Transcript screen (#1428)

Transcript screen to download and display transcript nicely as per design. Terrible router is terrible (actually it works fine): Hacky routing so we have a `/transcript-$id` page and the back button works. Add Nala (Leo) repository for component styling, with hack for Inter Regular / Inter Variable. The search bar uses CSS Highlights API. Dark theme support. Unrelated: Wipe the order parameters from the href after enabling premium as it's annoying me when looking at history state. 日本語が出来ますか？ Japanese now shows when language is `ja-JP` rather than checking for just `ja`.
brave · Jun 12, 2024 · 546a050 · 546a050
1 parent 58ffb42
commit 546a050
Show file tree

Hide file tree

Showing 15 changed files with 1,547 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,6 +58,7 @@
     "webpack-dev-server": "4.15.2"
   },
   "dependencies": {
+    "@brave/leo": "github:brave/leo#b7e0d7dafbabb1ccaf8163868795dfe9c99d4eae",
     "@emotion/react": "11.11.4",
     "@types/dom-screen-wake-lock": "1.0.3",
     "buffer": "6.0.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -12,6 +12,7 @@ import { useParams } from "./hooks/use-params";
 import { reportAction } from "./lib";
 
 import "./i18n/i18next";
+import { useEffect } from "react";
 
 const styles = {
   container: css({
@@ -53,18 +54,42 @@ export const App = () => {
     window.close();
   }
 
+  const initRouteTranscriptId = () => {
+    const match = window.location.pathname.match(
+      /^\/transcript-([a-z0-9]{50})$/,
+    );
+    if (match) {
+      return match[1];
+    }
+  };
+  const [routeTranscriptId, setRouteTranscriptId] = React.useState<
+    string | undefined
+  >(initRouteTranscriptId);
+  const onRouterStatePushed = () => {
+    setRouteTranscriptId(initRouteTranscriptId());
+  };
+  useEffect(() => {
+    const onPopstate = onRouterStatePushed;
+    window.addEventListener("popstate", onPopstate);
+    return () => {
+      window.removeEventListener("popstate", onPopstate);
+    };
+  });
+
   return (
     <React.Fragment>
       <GlobalStyles />
       <div css={styles.container}>
-        <InCall
-          roomName={roomName ?? ""}
-          jwt={jwt ?? ""}
-          isMobile={browserProps.isMobile}
-          isCallReady={isCallReady}
-          isWeb3Call={isWeb3Call}
-          jitsiContext={jitsiContext}
-        />
+        {!routeTranscriptId && isCallReady && (
+          <InCall
+            roomName={roomName ?? ""}
+            jwt={jwt ?? ""}
+            isMobile={browserProps.isMobile}
+            isCallReady={isCallReady}
+            isWeb3Call={isWeb3Call}
+            jitsiContext={jitsiContext}
+          />
+        )}
         {!isCallReady &&
           (isWeb3Call && hasInitialRoom ? (
             <JoinWeb3Call
@@ -90,6 +115,8 @@ export const App = () => {
               setRoomName={setRoomName}
               jitsiContext={jitsiContext}
               setJitsiContext={setJitsiContext}
+              onRouterStatePushed={onRouterStatePushed}
+              displayTranscriptId={routeTranscriptId}
             />
           ))}
       </div>

diff --git a/src/components/Recordings.tsx b/src/components/Recordings.tsx
@@ -7,14 +7,44 @@ import MediaPlayerImage from "../images/media_player.svg";
 import TranscriptImage from "../images/transcript.svg";
 import { Section } from "./Section";
 import { Text } from "./Text";
+import { MouseEventHandler } from "react";
 
 interface Props {
+  onRouterStatePushed: () => void;
+}
+interface DisplayProps {
   recording: Recording;
+  onRouterStatePushed: () => void;
 }
 
-const RecordingDisplay = ({ recording: r }: Props) => {
+const RecordingDisplay = ({
+  recording: r,
+  onRouterStatePushed,
+}: DisplayProps) => {
   const recordingDate = new Date(r.createdAt * 1000);
 
+  const getTranscriptOnClick = (transcriptUrl: string, startDateTime: Date) => {
+    const match = transcriptUrl.match(/\/([a-z0-9]{50})\/?$/);
+    if (!match) {
+      return;
+    }
+    const transcriptId: string = match[1];
+    const handler: MouseEventHandler<HTMLAnchorElement> = (e) => {
+      // hopefully sufficient magical incantations to prevent the popup
+      e.preventDefault();
+      e.stopPropagation();
+      e.nativeEvent.stopImmediatePropagation();
+      window.history.pushState(
+        { startDateTime: startDateTime.getTime() },
+        "",
+        `/transcript-${transcriptId}`,
+      );
+      onRouterStatePushed();
+      return false;
+    };
+    return handler;
+  };
+
   return (
     <div
       css={{
@@ -58,6 +88,7 @@ const RecordingDisplay = ({ recording: r }: Props) => {
             css={{ textDecoration: "none", color: "inherit" }}
             target="_blank"
             rel="noreferrer"
+            onClick={getTranscriptOnClick(r.transcriptUrl, recordingDate)}
           >
             <img
               src={TranscriptImage}
@@ -73,7 +104,7 @@ const RecordingDisplay = ({ recording: r }: Props) => {
   );
 };
 
-export const Recordings = () => {
+export const Recordings = ({ onRouterStatePushed }: Props) => {
   const recordings = useRecordings();
 
   if (recordings.length === 0) {
@@ -102,7 +133,11 @@ export const Recordings = () => {
       {recordings
         .filter((r) => r.transcriptUrl || r.url)
         .map((r, idx) => (
-          <RecordingDisplay key={idx} recording={r} />
+          <RecordingDisplay
+            key={idx}
+            recording={r}
+            onRouterStatePushed={onRouterStatePushed}
+          />
         ))}
     </Section>
   );