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

@@ -16,11 +16,11 @@ import '../VideoViewer.scss';
 
 function filterVideoEncoding(encoding_status) {
   switch (encoding_status) {
-    case 'running':
+    case 'running_X':
       MediaPageStore.set('media-load-error-type', 'encodingRunning');
       MediaPageStore.set('media-load-error-message', 'Media encoding is currently running. Try again in few minutes.');
       break;
-    case 'pending':
+    case 'pending_X':
       MediaPageStore.set('media-load-error-type', 'encodingPending');
       MediaPageStore.set('media-load-error-message', 'Media encoding is pending');
       break;
@@ -590,7 +590,7 @@ function findGetParameter(parameterName) {
 }
 
  function handleCanvas(videoElem) { // Make sure it's a video element
-  
+
   if (!videoElem || !videoElem.tagName || videoElem.tagName.toLowerCase() !== 'video') {
     console.error('Invalid video element:', videoElem);
     return;
@@ -604,10 +604,24 @@ function findGetParameter(parameterName) {
     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);
     }
-    
+
     if (timestamp >= 0 && timestamp < Player.duration()) {
       // Start the video from the given time
       Player.currentTime(timestamp);

frontend/src/static/js/components/page-layout/PageSidebar.scss

@@ -25,10 +25,10 @@
 }
 
 .page-sidebar {
-  z-index: +6;
+  z-index: 9999;
 
   @media (min-width: 768px) {
-    z-index: +5;
+    z-index: 9999;
   }
 
   position: fixed;