Skip to content

Commit

Permalink
Transcript screen (#1428)
Browse files Browse the repository at this point in the history
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`.
  • Loading branch information
bcaller authored Jun 12, 2024
1 parent 58ffb42 commit 546a050
Show file tree
Hide file tree
Showing 15 changed files with 1,547 additions and 33 deletions.
1,030 changes: 1,010 additions & 20 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
43 changes: 35 additions & 8 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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
Expand All @@ -90,6 +115,8 @@ export const App = () => {
setRoomName={setRoomName}
jitsiContext={jitsiContext}
setJitsiContext={setJitsiContext}
onRouterStatePushed={onRouterStatePushed}
displayTranscriptId={routeTranscriptId}
/>
))}
</div>
Expand Down
41 changes: 38 additions & 3 deletions src/components/Recordings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={{
Expand Down Expand Up @@ -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}
Expand All @@ -73,7 +104,7 @@ const RecordingDisplay = ({ recording: r }: Props) => {
);
};

export const Recordings = () => {
export const Recordings = ({ onRouterStatePushed }: Props) => {
const recordings = useRecordings();

if (recordings.length === 0) {
Expand Down Expand Up @@ -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>
);
Expand Down
Loading

0 comments on commit 546a050

Please sign in to comment.