feat: Video Trimmer and more

frontend/src/static/js/components/_shared/popup/PopupContent.jsx

@@ -15,8 +15,10 @@ export function PopupContent(props) {
     }
 
     const domElem = findDOMNode(wrapperRef.current);
-
-    if (-1 === ev.path.indexOf(domElem)) {
+    const clickedElement = ev.target;
+    
+    // Check if the clicked element is outside the popup
+    if (domElem && !domElem.contains(clickedElement)) {
       hide();
     }
   }, []);
@@ -29,12 +31,12 @@ export function PopupContent(props) {
   }, []);
 
   function enableListeners() {
-    document.addEventListener('click', onClickOutside);
+    document.addEventListener('mousedown', onClickOutside);
     document.addEventListener('keydown', onKeyDown);
   }
 
   function disableListeners() {
-    document.removeEventListener('click', onClickOutside);
+    document.removeEventListener('mousedown', onClickOutside);
     document.removeEventListener('keydown', onKeyDown);
   }
 

frontend/src/static/js/components/comments/Comments.jsx

@@ -443,17 +443,13 @@ export default function CommentsList(props) {
       let split = match.split(':'),
         s = 0,
         m = 1;
-      let searchParameters = new URLSearchParams(window.location.search);
 
       while (split.length > 0) {
         s += m * parseInt(split.pop(), 10);
         m *= 60;
       }
-      searchParameters.set('t', s);
 
-      let mediaUrl = MediaPageStore.get('media-url').split('?')[0] + '?' + searchParameters;
-
-      const wrapped = '<a href="' + mediaUrl + '">' + match + '</a>';
+      const wrapped = `<a href="#" data-timestamp="${s}" class="video-timestamp">${match}</a>`;
       return wrapped;
     }
 

frontend/src/static/js/components/media-page/ViewerInfoContent.js

@@ -180,16 +180,13 @@ export default function ViewerInfoContent(props) {
       let split = match.split(':'),
         s = 0,
         m = 1;
-      let searchParameters = new URLSearchParams(window.location.search);
 
       while (split.length > 0) {
         s += m * parseInt(split.pop(), 10);
         m *= 60;
       }
-      searchParameters.set('t', s);
 
-      const wrapped =
-        '<a href="' + MediaPageStore.get('media-url').split('?')[0] + '?' + searchParameters + '">' + match + '</a>';
+      const wrapped = `<a href="#" data-timestamp="${s}" class="video-timestamp">${match}</a>`;
       return wrapped;
     }
 

frontend/src/static/js/components/media-page/ViewerSidebar.js

@@ -13,6 +13,7 @@ export default class ViewerSidebar extends React.PureComponent {
       isPlaylistPage: !!props.playlistData,
       activeItem: 0,
       mediaType: MediaPageStore.get('media-type'),
+      chapters: MediaPageStore.get('media-data')?.chapters
     };
 
     if (props.playlistData) {
@@ -37,6 +38,7 @@ export default class ViewerSidebar extends React.PureComponent {
   onMediaLoad() {
     this.setState({
       mediaType: MediaPageStore.get('media-type'),
+      chapters: MediaPageStore.get('media-data')?.chapter_data || []
     });
   }
 

frontend/src/static/js/components/media-viewer/VideoViewer/index.js

@@ -603,6 +603,20 @@ function findGetParameter(parameterName) {
     const muted = parseInt(findGetParameter('muted'));
     const autoplay = parseInt(findGetParameter('autoplay'));
     const timestamp = parseInt(findGetParameter('t'));
+    
+    // Handle timestamp clicks
+    document.addEventListener('click', function (e) {
+      if (e.target.classList.contains('video-timestamp')) {
+        e.preventDefault();
+        const timestamp = parseInt(e.target.dataset.timestamp, 10);
+
+        if (timestamp >= 0 && timestamp < Player.duration()) {
+          Player.currentTime(timestamp);
+        } else if (timestamp >= 0) {
+          Player.play();
+        }
+      }
+    });
 
     if (muted == 1) {
       Player.muted(true);