✨ Allow user to disable video preview

frontend/src/api/document.ts

@@ -1,4 +1,4 @@
-import { fetcher, makeSwrHook } from '../api';
+import { RequestDataType, fetcher, makeSwrHook } from '../api';
 
 export const listDocuments = fetcher.path('/api/v1/documents/').method('get').create();
 export const createDocument = fetcher
@@ -19,7 +19,7 @@ export const useListDocuments = makeSwrHook('listDocuments', listDocuments);
 export const useGetDocument = makeSwrHook('getDocument', getDocument);
 export const useGetDocumentTasks = makeSwrHook('getDocumentTasks', getDocumentTasks);
 
-export type ApiDocument = ReturnType<typeof useGetDocument>['data'];
+export type ApiDocument = RequestDataType<typeof useGetDocument>;
 
 export const deleteDocument = fetcher
   .path('/api/v1/documents/{document_id}/')

frontend/src/editor/export/index.tsx

@@ -12,7 +12,7 @@ export type ExportProps = {
   outputNameBase: string;
   editor: Editor;
   onClose: () => void;
-  document: ApiDocument;
+  document?: ApiDocument;
 };
 
 export type ExportType = {
@@ -48,7 +48,7 @@ export function ExportModal({
 }: {
   onClose: () => void;
   editor: Editor;
-  document: ApiDocument;
+  document?: ApiDocument;
 } & Omit<ComponentProps<typeof Modal>, 'label'>) {
   const [exportType, setExportType] = useState(exportTypes[0]);
   const ExportBodyComponent = exportType.component;

frontend/src/editor/export/transcribee.tsx

@@ -5,23 +5,19 @@ import { Checkbox } from '../../components/form';
 import { downloadBinaryAsFile } from '../../utils/download_text_as_file';
 import { ExportProps } from '.';
 import { HttpReader, Uint8ArrayReader, ZipWriter, Uint8ArrayWriter } from '@zip.js/zip.js';
-import { sortMediaFiles } from '../../utils/use_audio';
 import { LoadingSpinnerButton, SecondaryButton } from '../../components/button';
+import { splitAndSortMediaFiles } from '../player';
 
 export function TranscribeeExportBody({ onClose, outputNameBase, editor, document }: ExportProps) {
   const [loading, setLoading] = useState(false);
   const [includeOriginalMediaFile, setIncludeOriginalMediaFile] = useState(false);
 
   const bestMediaUrl = useMemo(() => {
-    const mappedFiles =
-      document?.media_files.map((media) => {
-        return {
-          src: media.url,
-          type: media.content_type,
-        };
-      }) || [];
-
-    return sortMediaFiles(mappedFiles)[0].src;
+    const { videoSources, audioSources, hasVideo } = splitAndSortMediaFiles(
+      document?.media_files || [],
+    );
+    const bestSource = hasVideo ? videoSources[0] : audioSources[0];
+    return bestSource.src;
   }, [document?.media_files]);
 
   const originalMediaUrl = useMemo(() => {

frontend/src/editor/player.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { IconButton } from '../components/button';
 import { ImBackward2, ImPause2, ImPlay3 } from 'react-icons/im';
 import { useCallback, useMemo, useEffect, useState, useRef, useContext } from 'react';
-import { useGetDocument } from '../api/document';
+import { ApiDocument, useGetDocument } from '../api/document';
 import { CssRule } from '../utils/cssdom';
 import { SEEK_TO_EVENT, SeekToEvent } from './types';
 import { useEvent } from '../utils/use_event';
@@ -16,13 +16,36 @@ import { sortMediaFiles, useAudio } from '../utils/use_audio';
 import { minutesInMs } from '../utils/duration_in_ms';
 import { formattedTime } from './transcription_editor';
 import { IconType } from 'react-icons';
+import { BiVideo, BiVideoOff } from 'react-icons/bi';
 
 const DOUBLE_TAP_THRESHOLD_MS = 250;
 const SKIP_BUTTON_SEC = 2;
 const SKIP_SHORTCUT_SEC = 3;
 
 let lastTabPressTs = 0;
 
+export function splitAndSortMediaFiles(mediaFiles: ApiDocument['media_files']) {
+  const videoFiles = mediaFiles.filter((media) => media.tags.includes('video'));
+  const audioFiles = mediaFiles.filter((media) => !media.tags.includes('video'));
+
+  const mapFile = (media: (typeof mediaFiles)[0]) => {
+    return {
+      src: media.url,
+      type: media.content_type,
+      tags: media.tags,
+    };
+  };
+
+  const mappedVideoFiles = videoFiles.map(mapFile);
+  const mappedAudioFiles = audioFiles.map(mapFile);
+
+  return {
+    videoSources: sortMediaFiles(mappedVideoFiles),
+    audioSources: sortMediaFiles(mappedAudioFiles),
+    hasVideo: videoFiles.length > 0,
+  };
+}
+
 export function PlayerBar({
   documentId,
   editor,
@@ -40,40 +63,27 @@ export function PlayerBar({
     },
   );
 
-  const [playbackRate, setPlaybackRate] = useLocalStorage('playbackRate', 1);
-
-  const { sources, hasVideo } = useMemo(() => {
-    // do not play the original file, it may be large
-    const relevantMediaFiles =
-      data?.media_files.filter((media) => !media.tags.includes('original')) || [];
+  const { videoSources, audioSources, hasVideo } = useMemo(
+    () => splitAndSortMediaFiles(data?.media_files || []),
+    [data?.media_files],
+  );
 
-    const videoFiles = relevantMediaFiles.filter((media) => media.tags.includes('video'));
-    const audioFiles = relevantMediaFiles.filter((media) => !media.tags.includes('video'));
+  const [playbackRate, setPlaybackRate] = useLocalStorage('playbackRate', 1);
 
-    const mappedFiles = [...videoFiles, ...audioFiles].map((media) => {
-      return {
-        src: media.url,
-        type: media.content_type,
-      };
-    });
-
-    return {
-      sources: sortMediaFiles(mappedFiles),
-      hasVideo: videoFiles.length > 0,
-    };
-  }, [data?.media_files]);
+  const [_showVideo, setShowVideo] = useState(true);
+  const showVideo = _showVideo && hasVideo;
 
   const audio = useAudio({
     playbackRate,
-    sources,
-    videoPreview: hasVideo,
+    sources: showVideo ? videoSources : audioSources,
+    videoPreview: showVideo,
   });
 
   useEffect(() => {
     if (onShowVideo) {
-      onShowVideo(hasVideo);
+      onShowVideo(showVideo);
     }
-  }, [hasVideo]);
+  }, [showVideo]);
 
   // calculate the start of the current element to color it
   const [currentElementStartTime, setCurrentElementStartTime] = useState(0.0);
@@ -207,6 +217,13 @@ export function PlayerBar({
         </div>
 
         <PlaybackSpeedDropdown value={playbackRate} onChange={setPlaybackRate} />
+        {hasVideo && (
+          <IconButton
+            icon={showVideo ? BiVideoOff : BiVideo}
+            label={showVideo ? 'disable video preview' : 'enable video preview'}
+            onClick={() => setShowVideo(!showVideo)}
+          />
+        )}
       </div>
     </>
   );

frontend/src/editor/transcription_editor.tsx

@@ -314,7 +314,9 @@ export function TranscriptionEditor({
                   className={clsx('2xl:-ml-20')}
                 />
               </ErrorBoundary>
-              <PlayerBar documentId={documentId} editor={editor} onShowVideo={onShowVideo} />
+              {!loadingState[0] && (
+                <PlayerBar documentId={documentId} editor={editor} onShowVideo={onShowVideo} />
+              )}
             </LoadingContext.Provider>
           </SpeakerColorsProvider>
         </Slate>

frontend/src/utils/use_audio.ts

@@ -158,16 +158,21 @@ const MEDIA_PRIORITY = [
   'audio/mpeg',
 ];
 
-export function sortMediaFiles<T extends { type: string }>(mediaFiles: T[]) {
+export function sortMediaFiles<T extends { type: string; tags: string[] }>(mediaFiles: T[]) {
   const sorted = [];
 
+  const relevantMediaFiles = mediaFiles.filter((media) => !media.tags.includes('original'));
+  const originalMediaFiles = mediaFiles.filter((media) => media.tags.includes('original'));
+
   for (const contentType of MEDIA_PRIORITY) {
-    const files = mediaFiles.filter((file) => file.type == contentType);
+    const files = relevantMediaFiles.filter((file) => file.type == contentType);
     sorted.push(...files);
   }
 
-  const rest = mediaFiles.filter((file) => !MEDIA_PRIORITY.includes(file.type));
+  const rest = relevantMediaFiles.filter((file) => !MEDIA_PRIORITY.includes(file.type));
   sorted.push(...rest);
 
+  sorted.push(...originalMediaFiles);
+
   return sorted;
 }