Merge pull request #1776 from internxt/fix/progress-bar-while-loading-video-stream

[_]: fix/progress bar while loading video stream

Author: xabg2

public/video-streaming.js

@@ -13,7 +13,7 @@ const MESSAGE_TYPES = {
   CLEAR_SESSIONS: 'CLEAR_SESSIONS',
 };
 const DEFAULT_CHUNK_SIZE = 5 * 1024 * 1024;
-const CHUNK_REQUEST_TIMEOUT = 2 * 60 * 1000; // 2 minutes for slow connections
+const CHUNK_REQUEST_TIMEOUT = 10000;
 
 /**
  * Waiting until the Service Worker is installed

src/app/drive/components/FileViewer/FileViewer.tsx

@@ -100,7 +100,8 @@ const FileViewer = ({
   const isLastItemOrShareView = (totalFolderIndex && fileIndex === totalFolderIndex - 1) || isShareView;
   const isItemValidToPreview = isTypeAllowed && isPreviewAvailable;
   const isVideo = fileExtensionGroup === FileExtensionGroup['Video'];
-  const isVideoStreaming = isVideo && !disableVideoStream;
+  const isSafari = navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome');
+  const isVideoStreaming = isVideo && !disableVideoStream && (!isSafari || isFileSizePreviewable(file.size));
 
   const shouldRenderThePreview = isTypeAllowed && (isVideoStreaming || isFileSizePreviewable(file.size));
 

src/app/drive/components/FileViewer/viewers/FileVideoViewer/FileVideoViewer.tsx

@@ -3,6 +3,10 @@ import { localStorageService } from 'services';
 import { VideoStreamingSession } from 'app/drive/services/video-streaming.service/VideoStreamingSession';
 import { FormatFileViewerProps } from '../../FileViewer';
 
+const PROGRESS_INCREMENT = 0.2;
+const PROGRESS_INTERVAL_MS = 500;
+const MAX_SIMULATED_PROGRESS = 0.95;
+
 const FileVideoViewer = ({
   file,
   blob,
@@ -12,9 +16,42 @@ const FileVideoViewer = ({
 }: FormatFileViewerProps): JSX.Element => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const sessionRef = useRef<VideoStreamingSession | null>(null);
+  const progressIntervalRef = useRef<NodeJS.Timeout | null>(null);
   const [canPlay, setCanPlay] = useState(false);
+  const [simulatedProgress, setSimulatedProgress] = useState(0);
+
+  useEffect(() => {
+    if (disableVideoStream || canPlay) return;
+
+    progressIntervalRef.current = setInterval(() => {
+      setSimulatedProgress((prev) => {
+        const next = prev + PROGRESS_INCREMENT;
+        if (next >= MAX_SIMULATED_PROGRESS) {
+          if (progressIntervalRef.current) {
+            clearInterval(progressIntervalRef.current);
+            progressIntervalRef.current = null;
+          }
+          return MAX_SIMULATED_PROGRESS;
+        }
+        return next;
+      });
+    }, PROGRESS_INTERVAL_MS);
+
+    return () => {
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      }
+    };
+  }, [disableVideoStream, canPlay]);
+
+  useEffect(() => {
+    if (!disableVideoStream && !canPlay && simulatedProgress > 0) {
+      handlersForSpecialItems?.handleUpdateProgress(simulatedProgress);
+    }
+  }, [simulatedProgress, canPlay, disableVideoStream, handlersForSpecialItems]);
 
-  // Handle shared items (blob-based playback)
+  // Handle shared items
   useEffect(() => {
     if (!disableVideoStream || !videoRef.current || !blob) return;
 
@@ -27,7 +64,7 @@ const FileVideoViewer = ({
     };
   }, [disableVideoStream, blob]);
 
-  // Handle streaming playback (non-shared items)
+  // Handle streaming playback
   useEffect(() => {
     if (disableVideoStream) return;
 
@@ -50,9 +87,6 @@ const FileVideoViewer = ({
       credentials: file.credentials
         ? { user: file.credentials?.user, pass: file.credentials?.pass }
         : { user: bridgeUser, pass: userId },
-      onProgress: (progress) => {
-        handlersForSpecialItems?.handleUpdateProgress(progress);
-      },
     });
 
     sessionRef.current = session;
@@ -118,6 +152,7 @@ const FileVideoViewer = ({
       ref={videoRef}
       controls
       autoPlay
+      preload="metadata"
       style={{ width: '100%', maxHeight: '80vh', backgroundColor: '#000' }}
       className={canPlay ? 'flex' : 'hidden'}
     >

src/app/drive/services/video-streaming.service/VideoStreamingSession.test.ts

@@ -27,7 +27,6 @@ const createMockConfig = (overrides?: Partial<VideoStreamingSessionConfig>): Vid
   fileType: 'mp4',
   mnemonic: 'test-mnemonic',
   credentials: { user: 'test-user', pass: 'test-pass' },
-  onProgress: vi.fn(),
   ...overrides,
 });
 

src/app/drive/services/video-streaming.service/VideoStreamingSession.ts

@@ -13,7 +13,6 @@ export interface VideoStreamingSessionConfig {
     user: string;
     pass: string;
   };
-  onProgress?: (progress: number) => void;
 }
 
 const CACHE_SIZE_LIMIT = 20;
@@ -116,13 +115,7 @@ export class VideoStreamingSession {
         },
       });
 
-      const result = await binaryStreamToUint8Array(stream, (bytes) => {
-        const progress = bytes / (end - start);
-        if (this.chunkCache.size === 0 && this.config.onProgress) {
-          const currentProgress = progress >= 1 ? 0.95 : progress;
-          this.config.onProgress(currentProgress);
-        }
-      });
+      const result = await binaryStreamToUint8Array(stream);
 
       if (this.isDestroyed) {
         throw new Error('Session destroyed during download');