diff --git a/frontend/src/static/js/components/media-page/MediaPage.scss b/frontend/src/static/js/components/media-page/MediaPage.scss index 60160a89..397e1f92 100755 --- a/frontend/src/static/js/components/media-page/MediaPage.scss +++ b/frontend/src/static/js/components/media-page/MediaPage.scss @@ -785,6 +785,78 @@ } } + .edit-media-dropdown { + position: relative; + display: inline-block; + + .popup-fullscreen-overlay { + display: none; + } + + .popup-main { + position: absolute; + top: calc(100% + 8px); + right: 0; + background: #fff; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + min-width: 200px; + z-index: 1000; + + .dark_theme & { + background: #2d2d2d; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); + } + } + + .edit-options { + .navigation-menu-list { + padding: 8px 0; + + li { + list-style: none; + margin: 0; + + a { + display: flex; + align-items: center; + padding: 12px 16px; + text-decoration: none; + color: #333; + transition: background-color 0.2s ease; + + .dark_theme & { + color: #e0e0e0; + } + + &:hover { + background-color: rgba(0, 153, 51, 0.1); + + .dark_theme & { + background-color: rgba(102, 187, 102, 0.2); + } + } + + .material-icons { + margin-right: 12px; + font-size: 20px; + color: rgba(0, 153, 51, 0.9); + + .dark_theme & { + color: rgba(102, 187, 102, 0.9); + } + } + + span { + font-size: 14px; + font-weight: 500; + } + } + } + } + } + } + .remove-media-icon { background-color: rgba(220, 53, 69, 0.9); diff --git a/frontend/src/static/js/components/media-page/ViewerInfoContent.js b/frontend/src/static/js/components/media-page/ViewerInfoContent.js index 66c397d7..6936b62e 100755 --- a/frontend/src/static/js/components/media-page/ViewerInfoContent.js +++ b/frontend/src/static/js/components/media-page/ViewerInfoContent.js @@ -4,7 +4,7 @@ import { useUser, usePopup } from '../../utils/hooks/'; import { PageStore, MediaPageStore } from '../../utils/stores/'; import { PageActions, MediaPageActions } from '../../utils/actions/'; import { formatInnerLink, publishedOnDate } from '../../utils/helpers/'; -import { PopupMain } from '../_shared/'; +import { PopupMain, CircleIconButton, MaterialIcon, NavigationMenuList, NavigationContentApp } from '../_shared/'; import CommentsList from '../comments/Comments'; import { replaceString } from '../../utils/helpers/'; import { translateString } from '../../utils/helpers/'; @@ -72,17 +72,103 @@ function MediaMetaField(props) { ); } -function EditMediaButton(props) { - let link = props.link; +function getEditMenuItems() { + const items = []; + const friendlyToken = window.MediaCMS.mediaId; + const mediaData = MediaPageStore.get('media-data'); + const mediaType = mediaData ? mediaData.media_type : null; + const isVideoOrAudio = mediaType === 'video' || mediaType === 'audio'; + const allowMediaReplacement = window.MediaCMS.features.media.actions.allowMediaReplacement; - if (window.MediaCMS.site.devEnv) { - link = '/edit-media.html'; + // Edit metadata - always available + items.push({ + itemType: 'link', + link: `/edit?m=${friendlyToken}`, + text: translateString('Edit metadata'), + icon: 'edit', + }); + + // Trim - only for video/audio + if (isVideoOrAudio) { + items.push({ + itemType: 'link', + link: `/edit_video?m=${friendlyToken}`, + text: translateString('Trim'), + icon: 'content_cut', + }); } + // Captions - only for video/audio + if (isVideoOrAudio) { + items.push({ + itemType: 'link', + link: `/add_subtitle?m=${friendlyToken}`, + text: translateString('Captions'), + icon: 'closed_caption', + }); + } + + // Chapters - only for video/audio + if (isVideoOrAudio) { + items.push({ + itemType: 'link', + link: `/edit_chapters?m=${friendlyToken}`, + text: 'Chapters', + icon: 'menu_book', + }); + } + + // Publish - always available + items.push({ + itemType: 'link', + link: `/publish?m=${friendlyToken}`, + text: translateString('Publish'), + icon: 'publish', + }); + + // Replace - only if enabled + if (allowMediaReplacement) { + items.push({ + itemType: 'link', + link: `/replace_media?m=${friendlyToken}`, + text: translateString('Replace'), + icon: 'swap_horiz', + }); + } + + return items; +} + +function EditMediaButton(props) { + const [popupContentRef, PopupContent, PopupTrigger] = usePopup(); + + const menuItems = getEditMenuItems(); + + const popupPages = { + main: ( +