✨ Add space for video below document content

bugbakery · Dec 9, 2023 · dd56e5c · dd56e5c
1 parent be467fa
commit dd56e5c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/frontend/src/editor/player.tsx b/frontend/src/editor/player.tsx
@@ -23,7 +23,15 @@ const SKIP_SHORTCUT_SEC = 3;
 
 let lastTabPressTs = 0;
 
-export function PlayerBar({ documentId, editor }: { documentId: string; editor: Editor }) {
+export function PlayerBar({
+  documentId,
+  editor,
+  onShowVideo,
+}: {
+  documentId: string;
+  editor: Editor;
+  onShowVideo?: (show: boolean) => void;
+}) {
   const { data } = useGetDocument(
     { document_id: documentId },
     {
@@ -61,6 +69,12 @@ export function PlayerBar({ documentId, editor }: { documentId: string; editor:
     videoPreview: hasVideo,
   });
 
+  useEffect(() => {
+    if (onShowVideo) {
+      onShowVideo(hasVideo);
+    }
+  }, [hasVideo]);
+
   // calculate the start of the current element to color it
   const [currentElementStartTime, setCurrentElementStartTime] = useState(0.0);
 

diff --git a/frontend/src/editor/transcription_editor.tsx b/frontend/src/editor/transcription_editor.tsx
@@ -224,12 +224,14 @@ export function TranscriptionEditor({
   documentId,
   readOnly,
   initialValue,
+  onShowVideo,
   ...props
 }: {
   editor?: Editor;
   documentId: string;
   readOnly: boolean;
   initialValue?: Paragraph[];
+  onShowVideo?: (show: boolean) => void;
 } & ComponentProps<'div'>) {
   const systemPrefersDark = useMediaQuery('(prefers-color-scheme: dark)');
   // prevent ctrl+s
@@ -312,7 +314,7 @@ export function TranscriptionEditor({
                   className={clsx('2xl:-ml-20')}
                 />
               </ErrorBoundary>
-              <PlayerBar documentId={documentId} editor={editor} />
+              <PlayerBar documentId={documentId} editor={editor} onShowVideo={onShowVideo} />
             </LoadingContext.Provider>
           </SpeakerColorsProvider>
         </Slate>

diff --git a/frontend/src/pages/document.tsx b/frontend/src/pages/document.tsx
@@ -112,6 +112,7 @@ export function DocumentPage({
   const [_location, navigate] = useLocation();
   const debugMode = useDebugMode();
   const { isLoggedIn } = useAuthData();
+  const [videoVisible, setVideoVisible] = useState(false);
 
   const url = getDocumentWsUrl(documentId);
 
@@ -188,13 +189,17 @@ export function DocumentPage({
       </TopBar>
 
       <TranscriptionEditor
+        onShowVideo={setVideoVisible}
         editor={editor}
         documentId={documentId}
         initialValue={initialValue}
         className={'grow flex flex-col'}
         readOnly={!data || !data.can_write}
       />
 
+      {/* Spacer to prevent video preview from hiding text */}
+      {videoVisible && <div className="h-36"></div>}
+
       {editor && debugMode && <Suspense>{<LazyDebugPanel editor={editor} />}</Suspense>}
     </AppContainer>
   );