diff --git a/cms/version.py b/cms/version.py index c31ab5bc..b1479906 100644 --- a/cms/version.py +++ b/cms/version.py @@ -1 +1 @@ -VERSION = "8" +VERSION = "8.07" diff --git a/frontend/src/static/js/components/MediaListHeader.tsx b/frontend/src/static/js/components/MediaListHeader.tsx index f378b85d..8b5cb81a 100755 --- a/frontend/src/static/js/components/MediaListHeader.tsx +++ b/frontend/src/static/js/components/MediaListHeader.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { translateString } from '../utils/helpers/'; +import { translateString, inEmbeddedApp } from '../utils/helpers/'; interface MediaListHeaderProps { title?: string; @@ -11,10 +11,12 @@ interface MediaListHeaderProps { export const MediaListHeader: React.FC = (props) => { const viewAllText = props.viewAllText || translateString('VIEW ALL'); + const isEmbedMode = inEmbeddedApp(); + return (

{props.title}

- {props.viewAllLink ? ( + {!isEmbedMode && props.viewAllLink ? (

{' '} diff --git a/frontend/src/static/js/components/list-item/MediaItem.jsx b/frontend/src/static/js/components/list-item/MediaItem.jsx index e6485570..460914b0 100644 --- a/frontend/src/static/js/components/list-item/MediaItem.jsx +++ b/frontend/src/static/js/components/list-item/MediaItem.jsx @@ -1,18 +1,50 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useMediaItem } from '../../utils/hooks/'; -import { PositiveInteger, PositiveIntegerOrZero } from '../../utils/helpers/'; +import { PositiveInteger, PositiveIntegerOrZero, inEmbeddedApp } from '../../utils/helpers/'; import { MediaItemThumbnailLink, itemClassname } from './includes/items/'; import { Item } from './Item'; export function MediaItem(props) { const type = props.type; + const isEmbedMode = inEmbeddedApp(); - const [titleComponent, descriptionComponent, thumbnailUrl, UnderThumbWrapper, editMediaComponent, metaComponents, viewMediaComponent] = + const [titleComponentOrig, descriptionComponent, thumbnailUrl, UnderThumbWrapperOrig, editMediaComponent, metaComponents, viewMediaComponent] = useMediaItem({ ...props, type }); + // In embed mode, override components to remove links + const ItemTitle = ({ title }) => ( +

+ {title} +

+ ); + + const ItemMain = ({ children }) =>
{children}
; + + const titleComponent = isEmbedMode + ? () => + : titleComponentOrig; + + const UnderThumbWrapper = isEmbedMode ? ItemMain : UnderThumbWrapperOrig; function thumbnailComponent() { + if (isEmbedMode) { + // In embed mode, render thumbnail without link + const thumbStyle = thumbnailUrl ? { backgroundImage: "url('" + thumbnailUrl + "')" } : null; + return ( +
+ {thumbnailUrl ? ( +
+
+
+ ) : null} +
+ ); + } return ; } @@ -23,13 +55,15 @@ export function MediaItem(props) { ); const finalClassname = containerClassname + - (props.showSelection ? ' with-selection' : '') + + (props.showSelection && !isEmbedMode ? ' with-selection' : '') + (props.isSelected ? ' selected' : '') + - (props.hasAnySelection ? ' has-any-selection' : ''); + (props.hasAnySelection || isEmbedMode ? ' has-any-selection' : ''); const handleItemClick = (e) => { - // If there's any selection active, clicking the item should toggle selection - if (props.hasAnySelection && props.onCheckboxChange) { + const isEmbedMode = inEmbeddedApp(); + + // In embed mode or if there's any selection active, clicking the item should toggle selection + if ((isEmbedMode || props.hasAnySelection) && props.onCheckboxChange) { // Check if clicking on the checkbox itself, edit icon, or view icon if (e.target.closest('.item-selection-checkbox') || e.target.closest('.item-edit-icon') || @@ -59,16 +93,24 @@ export function MediaItem(props) {

)} - {editMediaComponent()} - {viewMediaComponent()} + {!isEmbedMode && editMediaComponent()} + {!isEmbedMode && viewMediaComponent()} {thumbnailComponent()} - - {titleComponent()} - {metaComponents()} - {descriptionComponent()} - + {isEmbedMode ? ( + + {titleComponent()} + {metaComponents()} + {descriptionComponent()} + + ) : ( + + {titleComponent()} + {metaComponents()} + {descriptionComponent()} + + )} ); diff --git a/frontend/src/static/js/components/list-item/MediaItemAudio.jsx b/frontend/src/static/js/components/list-item/MediaItemAudio.jsx index 1002bd5c..b92959f2 100644 --- a/frontend/src/static/js/components/list-item/MediaItemAudio.jsx +++ b/frontend/src/static/js/components/list-item/MediaItemAudio.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useMediaItem } from '../../utils/hooks/'; -import { PositiveIntegerOrZero } from '../../utils/helpers/'; +import { PositiveIntegerOrZero, inEmbeddedApp } from '../../utils/helpers/'; import { MediaDurationInfo } from '../../utils/classes/'; import { MediaPlaylistOptions } from '../media-playlist-options/MediaPlaylistOptions'; import { MediaItemDuration, MediaItemPlaylistIndex, itemClassname } from './includes/items/'; @@ -9,10 +9,26 @@ import { MediaItem } from './MediaItem'; export function MediaItemAudio(props) { const type = props.type; + const isEmbedMode = inEmbeddedApp(); - const [titleComponent, descriptionComponent, thumbnailUrl, UnderThumbWrapper, editMediaComponent, metaComponents, viewMediaComponent] = + const [titleComponentOrig, descriptionComponent, thumbnailUrl, UnderThumbWrapperOrig, editMediaComponent, metaComponents, viewMediaComponent] = useMediaItem({ ...props, type }); + // In embed mode, override components to remove links + const ItemTitle = ({ title }) => ( +

+ {title} +

+ ); + + const ItemMain = ({ children }) =>
{children}
; + + const titleComponent = isEmbedMode + ? () => + : titleComponentOrig; + + const UnderThumbWrapper = isEmbedMode ? ItemMain : UnderThumbWrapperOrig; + const _MediaDurationInfo = new MediaDurationInfo(); _MediaDurationInfo.update(props.duration); @@ -22,6 +38,21 @@ export function MediaItemAudio(props) { const durationISO8601 = _MediaDurationInfo.ISO8601(); function thumbnailComponent() { + if (isEmbedMode) { + // In embed mode, render thumbnail without link + return ( +
+ {props.inPlaylistView ? null : ( + + )} +
+ ); + } + const attr = { key: 'item-thumb', href: props.link, @@ -66,13 +97,13 @@ export function MediaItemAudio(props) { ); const finalClassname = containerClassname + - (props.showSelection ? ' with-selection' : '') + + (props.showSelection && !isEmbedMode ? ' with-selection' : '') + (props.isSelected ? ' selected' : '') + - (props.hasAnySelection ? ' has-any-selection' : ''); + (props.hasAnySelection || isEmbedMode ? ' has-any-selection' : ''); const handleItemClick = (e) => { - // If there's any selection active, clicking the item should toggle selection - if (props.hasAnySelection && props.onCheckboxChange) { + // In embed mode or if there's any selection active, clicking the item should toggle selection + if ((isEmbedMode || props.hasAnySelection) && props.onCheckboxChange) { // Check if clicking on the checkbox itself, edit icon, or view icon if (e.target.closest('.item-selection-checkbox') || e.target.closest('.item-edit-icon') || @@ -104,16 +135,24 @@ export function MediaItemAudio(props) { )} - {editMediaComponent()} - {viewMediaComponent()} + {!isEmbedMode && editMediaComponent()} + {!isEmbedMode && viewMediaComponent()} {thumbnailComponent()} - - {titleComponent()} - {metaComponents()} - {descriptionComponent()} - + {isEmbedMode ? ( + + {titleComponent()} + {metaComponents()} + {descriptionComponent()} + + ) : ( + + {titleComponent()} + {metaComponents()} + {descriptionComponent()} + + )} {playlistOptionsComponent()} diff --git a/frontend/src/static/js/components/list-item/MediaItemVideo.jsx b/frontend/src/static/js/components/list-item/MediaItemVideo.jsx index a2b38574..9735a415 100644 --- a/frontend/src/static/js/components/list-item/MediaItemVideo.jsx +++ b/frontend/src/static/js/components/list-item/MediaItemVideo.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useMediaItem } from '../../utils/hooks/'; -import { PositiveIntegerOrZero } from '../../utils/helpers/'; +import { PositiveIntegerOrZero, inEmbeddedApp } from '../../utils/helpers/'; import { MediaDurationInfo } from '../../utils/classes/'; import { MediaPlaylistOptions } from '../media-playlist-options/MediaPlaylistOptions.jsx'; import { MediaItemVideoPlayer, MediaItemDuration, MediaItemVideoPreviewer, MediaItemPlaylistIndex, itemClassname } from './includes/items/'; @@ -9,10 +9,26 @@ import { MediaItem } from './MediaItem'; export function MediaItemVideo(props) { const type = props.type; + const isEmbedMode = inEmbeddedApp(); - const [titleComponent, descriptionComponent, thumbnailUrl, UnderThumbWrapper, editMediaComponent, metaComponents, viewMediaComponent] = + const [titleComponentOrig, descriptionComponent, thumbnailUrl, UnderThumbWrapperOrig, editMediaComponent, metaComponents, viewMediaComponent] = useMediaItem({ ...props, type }); + // In embed mode, override components to remove links + const ItemTitle = ({ title }) => ( +

+ {title} +

+ ); + + const ItemMain = ({ children }) =>
{children}
; + + const titleComponent = isEmbedMode + ? () => + : titleComponentOrig; + + const UnderThumbWrapper = isEmbedMode ? ItemMain : UnderThumbWrapperOrig; + const _MediaDurationInfo = new MediaDurationInfo(); _MediaDurationInfo.update(props.duration); @@ -26,6 +42,24 @@ export function MediaItemVideo(props) { } function thumbnailComponent() { + if (isEmbedMode) { + // In embed mode, render thumbnail without link + return ( +
+ {props.inPlaylistView ? null : ( + + )} + {props.inPlaylistView || props.inPlaylistPage ? null : ( + + )} +
+ ); + } + const attr = { key: 'item-thumb', href: props.link, @@ -73,13 +107,13 @@ export function MediaItemVideo(props) { ); const finalClassname = containerClassname + - (props.showSelection ? ' with-selection' : '') + + (props.showSelection && !isEmbedMode ? ' with-selection' : '') + (props.isSelected ? ' selected' : '') + - (props.hasAnySelection ? ' has-any-selection' : ''); + (props.hasAnySelection || isEmbedMode ? ' has-any-selection' : ''); const handleItemClick = (e) => { - // If there's any selection active, clicking the item should toggle selection - if (props.hasAnySelection && props.onCheckboxChange) { + // In embed mode or if there's any selection active, clicking the item should toggle selection + if ((isEmbedMode || props.hasAnySelection) && props.onCheckboxChange) { // Check if clicking on the checkbox itself, edit icon, or view icon if (e.target.closest('.item-selection-checkbox') || e.target.closest('.item-edit-icon') || @@ -111,19 +145,27 @@ export function MediaItemVideo(props) { )} - {editMediaComponent()} - {viewMediaComponent()} + {!isEmbedMode && editMediaComponent()} + {!isEmbedMode && viewMediaComponent()} {props.hasMediaViewer ? videoViewerComponent() : thumbnailComponent()} - - {titleComponent()} - {metaComponents()} - {descriptionComponent()} - - + {isEmbedMode ? ( + + {titleComponent()} + {metaComponents()} + {descriptionComponent()} + + ) : ( + + {titleComponent()} + {metaComponents()} + {descriptionComponent()} + + )} - {playlistOptionsComponent()} + {playlistOptionsComponent()} + ); } diff --git a/frontend/src/static/js/components/profile-page/ProfilePagesHeader.js b/frontend/src/static/js/components/profile-page/ProfilePagesHeader.js index be5fce04..cf20fce8 100644 --- a/frontend/src/static/js/components/profile-page/ProfilePagesHeader.js +++ b/frontend/src/static/js/components/profile-page/ProfilePagesHeader.js @@ -5,7 +5,7 @@ import { LinksContext, MemberContext, SiteContext } from '../../utils/contexts/' import { PageStore, ProfilePageStore } from '../../utils/stores/'; import { PageActions, ProfilePageActions } from '../../utils/actions/'; import { CircleIconButton, PopupMain } from '../_shared'; -import { translateString } from '../../utils/helpers/'; +import { translateString, inEmbeddedApp } from '../../utils/helpers/'; class ProfileSearchBar extends React.PureComponent { constructor(props) { @@ -372,18 +372,22 @@ class NavMenuInlineTabs extends React.PureComponent { } render() { + const isEmbedMode = inEmbeddedApp(); + return (