droplist for actions

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);
 

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: (
+      <div className="edit-options">
+        <PopupMain>
+          <NavigationMenuList items={menuItems} />
+        </PopupMain>
+      </div>
+    ),
+  };
+
   return (
-    <a href={link} rel="nofollow" title={translateString('Edit media')} className="edit-media-icon">
-      <i className="material-icons">edit</i>
-    </a>
+    <div className="edit-media-dropdown">
+      <PopupTrigger contentRef={popupContentRef}>
+        <button className="edit-media-icon" title={translateString('Edit media')}>
+          <i className="material-icons">edit</i>
+        </button>
+      </PopupTrigger>
+      <PopupContent contentRef={popupContentRef}>
+        <NavigationContentApp
+          initPage="main"
+          focusFirstItemOnPageChange={false}
+          pages={popupPages}
+        />
+      </PopupContent>
+    </div>
   );
 }
 
@@ -219,7 +305,7 @@ export default function ViewerInfoContent(props) {
 
           {userCan.editMedia ? (
             <div className="media-author-actions">
-              {userCan.editMedia ? <EditMediaButton link={MediaPageStore.get('media-data').edit_url} /> : null}
+              {userCan.editMedia ? <EditMediaButton /> : null}
 
               {userCan.deleteMedia ? (
                 <PopupTrigger contentRef={popupContentRef}>