Move Marvin into production! (#1394)

* Update all non-major dependencies (#1372) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update all non-major dependencies (#1373) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update all non-major dependencies (#1375) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * build(deps-dev): bump follow-redirects from 1.15.4 to 1.15.6 (#1376) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.4 to 1.15.6. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](follow-redirects/follow-redirects@v1.15.4...v1.15.6) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Deploy Brave Talk Marvin to staging (#1367) * enable transcription subtitles * Add hooks for transcriptionChunkReceivedHander * Update event-handlers.ts initial transcription construction * typescript! * Initial add of <main/> element for transcript chunks * Update index.html <main> outside of root * transcript chunks reactified many thanks @tackley ! * use opacity rather than visibility * use <main> (one change at a time... * update to chunk data * "Typescript" * Update types.ts to reflect [current](https://developer.8x8.com/jaas/docs/webhooks-payload#transcription_chunk_received) `TRANSCRIPT_CHUNK_RECEIVED` structure * Update InCall.tsx Get rid of "hello world." debugging message. * On first time receiving a transcript chunk, disable subtitle display * Oops! Case-sensitive typo * begin work on timestamps * Update event-handlers.ts persist `chunk.elapsed` * fine-tune prefix determination * Handle participant events, initial check-in * part deux * more debugging * Update event-handlers.ts very odd debugging issue * Update event-handlers.ts always test locally first * Update event-handlers.ts closer! * API documentation a bit confusing... * try to find my own participantID * Update event-handlers.ts It would be nice to have a call to return my userID. * capture my JitsiID clean-up * do not generate user events unless transcription is on * Move transcript management to separate class, retrieve previous transcript * update transcript automatically on non-speech events * first event: the participants! * Update event-handlers.ts - sanitize logging for private chat messages - handle display[Nn]ame parameter on name change * Update event-handlers.ts consolidate! * initialize, but never reset state and put the "starting" participants as the first event * Update event-handlers.ts sync with API definition * Squash spurious `raiseHandUpdated` on entering a breakout room * Update initial transcript text to indicate it's a transcript. * set webrtc_domain based on isDevelopment if `isDevelopment` use the the JAAS staging server * Revert "set webrtc_domain based on isDevelopment" This reverts commit bae7f8a. * set service domain based on environment configuration * make the time-elapsed prefix configurable turn it off for now (we may turn it back on later) * Reapply "set webrtc_domain based on isDevelopment", Update development vpaas id to staging id * Revert "Reapply "set webrtc_domain based on isDevelopment", Update development vpaas id to staging id" This reverts commit e5a3ac2. * Create transcript if moderator enabled transcription, add notification for transcript URL generation * Reapply "Reapply "set webrtc_domain based on isDevelopment", Update development vpaas id to staging id" This reverts commit 73f8204. * Attempted fix for transcribingStatusChanged event listener * remove subtitlle menu option & management... ...since the unified recording/transcript UI is underway * Add >>>/<<< logging... ... for transcription calls to Brave Talk server * remove localRecording option (not needed, confusing) * Request CSRF token before creating transcript * Fix transcript creation notification * Make the timestamp style an enum instead of a bool to allow for easier testing... * use numeric timestamp styles * bumb aggregation timer to 30s * make transcript timestamps short for testing and put back the `>>>/<<<` * Better timestamp for short style * initial work on testing `isBrave` * test initial code for isBrave * Revert "test initial code for isBrave" This reverts commit aa70263. * Make transcription link notification sticky, place room info at beginning of transcript * Revert change to !getRoomsInfo * Revert "Revert change to !getRoomsInfo" This reverts commit 846ecdf. * Revert "Revert "Revert change to !getRoomsInfo"" This reverts commit efa29b2. * Fix transcript prompt/context * Add transcript download button, misc fixes * test for brave browser/transcription started * <main/>'s position changed from "absolute" to "fixed" * Retrieve internal version of transcript, update transcript expiry when transcription stops * Moderate finalizes transcript when recording is stopped * Update initial participant transcript prompt * Update .prettierignore missing EOL * Delay transcript finalization to prevent premature finalization for moderators destroying the room * cleanup based on review of #1367, part un... * use css rather a style for <main/> * Revert "use css rather a style for <main/>" This reverts commit f23e484. * Update InCall.tsx better CSS/react juxtaposition * add configOverwrite.recordings. recordAudioAndVideo so that the default is not to do AV, just transcripts * sync with main's package*.json --------- Co-authored-by: Marshall T. Rose <[email protected]> * build(deps-dev): bump webpack-dev-middleware from 5.3.3 to 5.3.4 (#1383) Bumps [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) from 5.3.3 to 5.3.4. - [Release notes](https://github.com/webpack/webpack-dev-middleware/releases) - [Changelog](https://github.com/webpack/webpack-dev-middleware/blob/v5.3.4/CHANGELOG.md) - [Commits](webpack/webpack-dev-middleware@v5.3.3...v5.3.4) --- updated-dependencies: - dependency-name: webpack-dev-middleware dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix trial CTA (#1381) * Fix trial CTA * Audit fix * Fix premature finalize transcript call (#1382) * Audit fix * Fix premature finalize transcript call --------- Co-authored-by: Marshall T. Rose <[email protected]> * Update all non-major dependencies (#1379) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * build(deps-dev): bump express from 4.18.2 to 4.19.2 (#1388) Bumps [express](https://github.com/expressjs/express) from 4.18.2 to 4.19.2. - [Release notes](https://github.com/expressjs/express/releases) - [Changelog](https://github.com/expressjs/express/blob/master/History.md) - [Commits](expressjs/express@4.18.2...4.19.2) --- updated-dependencies: - dependency-name: express dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Update all non-major dependencies (#1385) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Add Inter font as per design guidelines (#1387) * Add Inter font as per design guidelines * Audit fix * Update github/codeql-action action to v3.24.9 (#1374) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update actions/download-artifact action to v4.1.4 (#1371) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Darnell Andries <[email protected]> * Update all non-major dependencies (#1389) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update dependency node to v20.12.1 (#1390) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Add Leo AI promo (#1386) * Add Leo AI promo * Audit fix * Revert "Add Leo AI promo (#1386)" (#1396) This reverts commit 1f7d015. --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Darnell Andries <[email protected]>
brave · Apr 9, 2024 · 323a4fd · 323a4fd
1 parent 82a89cf
commit 323a4fd
Show file tree

Hide file tree

Showing 28 changed files with 883 additions and 161 deletions.
diff --git a/.github/actions/deploy/action.yml b/.github/actions/deploy/action.yml
@@ -11,7 +11,7 @@ inputs:
 runs:
   using: composite
   steps:
-    - uses: actions/download-artifact@eaceaf801fd36c7dee90939fad912460b18a1ffe # v4.1.2
+    - uses: actions/download-artifact@c850b930e6ba138125429b7e5c93fc707a7f8427 # v4.1.4
       with:
         name: build-output
         path: html

diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
@@ -42,7 +42,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
+        uses: github/codeql-action/init@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
+        uses: github/codeql-action/autobuild@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@47b3d888fe66b639e431abf22ebca059152f1eea # v3.24.5
+        uses: github/codeql-action/analyze@1b1aada464948af03b950897e5eb522f92603cc2 # v3.24.9
diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-20.11.1
+20.12.1
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,6 +5,7 @@ import { InCall } from "./components/InCall";
 import { JoinCall as JoinWeb3Call } from "./components/web3/JoinCall";
 import { WelcomeScreen } from "./components/WelcomeScreen";
 import "./css/poppins.css";
+import "./css/inter.css";
 import { useBrowserProperties } from "./hooks/use-browser-properties";
 import { useCallSetupStatus } from "./hooks/use-call-setup-status";
 import { useParams } from "./hooks/use-params";

diff --git a/src/components/GlobalStyles.tsx b/src/components/GlobalStyles.tsx
@@ -17,14 +17,18 @@ export const GlobalStyles = () => (
         margin: "0 auto",
         width: "100%",
         fontSize: "12px",
-        fontWeight: 400,
-        fontFamily: '"Poppins", "Open Sans Pro", Arial, sans-serif',
+        fontWeight: "normal",
+        fontFamily: '"Inter", "Poppins", "Open Sans Pro", Arial, sans-serif',
         color: "#f1f1f1",
         overflow: "hidden",
       },
       button: {
         border: "none",
         font: "inherit",
+        fontFamily: '"Poppins", "Open Sans Pro", Arial, sans-serif',
+      },
+      "h1,h2,h3,h4,h5,h6": {
+        fontFamily: '"Poppins", "Open Sans Pro", Arial, sans-serif',
       },
       iframe: {
         position: "absolute",

diff --git a/src/components/InCall.tsx b/src/components/InCall.tsx
@@ -1,23 +1,33 @@
 import { useEffect, useRef, useState } from "react";
+import { css } from "@emotion/react";
 import { IJitsiMeetApi, JitsiContext } from "../jitsi/types";
 import { renderConferencePage } from "../jitsi/conference-page";
 import { jitsiOptions } from "../jitsi/options";
 import {
   breakoutRoomsUpdatedHandler,
   dataChannelOpenedHandler,
+  displayNameChangeHandler,
   endpointTextMessageReceivedHandler,
   errorOccurredHandler,
+  incomingMessageHandler,
+  knockingParticipantHandler,
+  outgoingMessageHandler,
   participantJoinedHandler,
   participantKickedOutHandler,
   participantLeftHandler,
   passwordRequiredHandler,
+  raiseHandUpdatedHandler,
   readyToCloseHandler,
   recordingLinkAvailableHandler,
   recordingStatusChangedHandler,
   subjectChangeHandler,
-  videoQualityChangeHandler,
+  transcribingStatusChangedHandler,
+  transcriptionChunkReceivedHandler,
   videoConferenceJoinedHandler,
+  videoQualityChangeHandler,
 } from "../jitsi/event-handlers";
+import { TranscriptManager } from "../transcripts";
+import { resetCurrentRecordingState } from "../recordings-store";
 
 interface Props {
   roomName: string;
@@ -38,26 +48,40 @@ export const InCall = ({
 }: Props) => {
   const divRef = useRef(null);
   const [jitsiMeet, setJitsiMeet] = useState<IJitsiMeetApi>();
+  const [transcript, setTranscript] = useState<string>("");
+  const transcriptManager = useRef(new TranscriptManager(setTranscript));
 
   useEffect(() => {
     if (!jitsiMeet && divRef.current && isCallReady) {
       const jitsiEventHandlers = [
-        subjectChangeHandler,
+        subjectChangeHandler(transcriptManager.current),
         videoQualityChangeHandler,
         recordingLinkAvailableHandler,
         recordingStatusChangedHandler,
         readyToCloseHandler,
         breakoutRoomsUpdatedHandler,
-        participantJoinedHandler,
-        participantKickedOutHandler,
-        participantLeftHandler,
+        participantJoinedHandler(transcriptManager.current),
+        participantKickedOutHandler(transcriptManager.current),
+        participantLeftHandler(transcriptManager.current),
+        knockingParticipantHandler(transcriptManager.current),
+        raiseHandUpdatedHandler(transcriptManager.current),
+        displayNameChangeHandler(transcriptManager.current),
+        incomingMessageHandler(transcriptManager.current),
+        outgoingMessageHandler(transcriptManager.current),
         passwordRequiredHandler,
         errorOccurredHandler,
         dataChannelOpenedHandler,
         endpointTextMessageReceivedHandler,
-        videoConferenceJoinedHandler,
+        videoConferenceJoinedHandler(transcriptManager.current),
+        transcriptionChunkReceivedHandler(transcriptManager.current),
+        transcribingStatusChangedHandler(transcriptManager.current),
       ];
 
+      transcriptManager.current.roomName = roomName;
+      transcriptManager.current.jwt = jwt;
+
+      resetCurrentRecordingState(roomName);
+
       const options = jitsiOptions(roomName, divRef.current, jwt, isMobile);
 
       renderConferencePage(jitsiEventHandlers, options, context).then(
@@ -79,5 +103,17 @@ export const InCall = ({
     return null;
   }
 
-  return <div ref={divRef} css={{ height: "100%" }} />;
+  const hiddenStyle = css({
+    opacity: "0",
+    pointerEvents: "none" as const,
+    position: "fixed" as const,
+    zIndex: -1,
+  });
+
+  return (
+    <>
+      <div ref={divRef} css={{ height: "100%" }} />{" "}
+      <main css={hiddenStyle}>{transcript}</main>{" "}
+    </>
+  );
 };
diff --git a/src/components/Recordings.tsx b/src/components/Recordings.tsx
@@ -1,9 +1,10 @@
 import { useRecordings } from "../hooks/use-recordings";
-import { Recording } from "../recordings-store";
+import { RECORDING_TTL_SECS, Recording } from "../recordings-store";
 import { formatDuration, formatRelativeDay } from "../recordings-utils";
 
 import DownloadImage from "../images/download.svg";
 import MediaPlayerImage from "../images/media_player.svg";
+import TranscriptImage from "../images/transcript.svg";
 import { Section } from "./Section";
 import { Text } from "./Text";
 
@@ -15,32 +16,60 @@ const RecordingDisplay = ({ recording: r }: Props) => {
   const recordingDate = new Date(r.createdAt * 1000);
 
   return (
-    <a href={r.url} css={{ textDecoration: "none", color: "inherit" }}>
-      <div
-        css={{
-          display: "flex",
-          justifyContent: "space-between",
-          background: "rgba(255, 255, 255, 0.08)",
-          borderRadius: "24px",
-          margin: "21px auto 0",
-          padding: "16px 27px",
-          maxWidth: "377px",
-        }}
-      >
-        <div>
-          <Text variant="body">
-            <strong>{formatRelativeDay(recordingDate)}</strong>
-            {", "}
-            {recordingDate.toLocaleTimeString()}
-            {", "}
-            {formatDuration(r.expiresAt - r.ttl - r.createdAt)}
-          </Text>
-        </div>
-        <div>
-          <img src={DownloadImage} height="16" width="18" alt="download" />
-        </div>
+    <div
+      css={{
+        display: "flex",
+        justifyContent: "space-between",
+        background: "rgba(255, 255, 255, 0.08)",
+        borderRadius: "24px",
+        margin: "21px auto 0",
+        padding: "16px 27px",
+        maxWidth: "377px",
+      }}
+    >
+      <div>
+        <Text variant="body">
+          <strong>{formatRelativeDay(recordingDate)}</strong>
+          {", "}
+          {recordingDate.toLocaleTimeString()}
+          {", "}
+          {formatDuration(r.expiresAt - RECORDING_TTL_SECS - r.createdAt)}
+        </Text>
+      </div>
+      <div>
+        {r.url && (
+          <a
+            href={r.url}
+            css={{ textDecoration: "none", color: "inherit" }}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              src={DownloadImage}
+              height="16"
+              width="18"
+              alt="recording download"
+            />
+          </a>
+        )}
+        {r.transcriptUrl && (
+          <a
+            href={r.transcriptUrl}
+            css={{ textDecoration: "none", color: "inherit" }}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <img
+              src={TranscriptImage}
+              height="16"
+              width="18"
+              alt="transcript download"
+              css={{ marginLeft: "1em" }}
+            />
+          </a>
+        )}
       </div>
-    </a>
+    </div>
   );
 };
 
@@ -70,9 +99,11 @@ export const Recordings = () => {
           recording time
         </Text>
       </p>
-      {recordings.map((r, idx) => (
-        <RecordingDisplay key={idx} recording={r} />
-      ))}
+      {recordings
+        .filter((r) => r.transcriptUrl || r.url)
+        .map((r, idx) => (
+          <RecordingDisplay key={idx} recording={r} />
+        ))}
     </Section>
   );
 };
diff --git a/src/css/inter.css b/src/css/inter.css
@@ -0,0 +1,31 @@
+/* Inter Variable */
+@font-face {
+  font-family: "Inter";
+  src: url("../fonts/Inter-Light.ttf") format("truetype");
+  font-weight: 200;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("../fonts/Inter-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("../fonts/Inter-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("../fonts/Inter-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("../fonts/Inter-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
diff --git a/src/environment.ts b/src/environment.ts
@@ -1,14 +1,14 @@
 export const env = process.env.ENVIRONMENT ?? "local";
-export const isDevelopment = env.startsWith("development");
+export const isDevelopment = env.startsWith("development") || env === "local";
 export const config = {
   vpaas: isDevelopment
-    ? "vpaas-magic-cookie-cd4131ef77674a71b73411408226e232"
+    ? "vpaas-magic-cookie-41b5e4eb989e414cac4fe7f51400a1d7"
     : env === "staging"
       ? "vpaas-magic-cookie-520aa9362071418c8a8661950bc0a470"
       : env === "local"
         ? "vpaas-magic-cookie-cd4131ef77674a71b73411408226e232"
         : "vpaas-magic-cookie-a4818bd762a044998d717b70ac734cfe",
-  webrtc_domain: "8x8.vc",
+  webrtc_domain: isDevelopment ? "stage.8x8.vc" : "8x8.vc",
 };
 
 export const isProduction = env === "production";
diff --git a/src/fonts/Inter-Bold.ttf b/src/fonts/Inter-Bold.ttf
diff --git a/src/fonts/Inter-Light.ttf b/src/fonts/Inter-Light.ttf
diff --git a/src/fonts/Inter-Medium.ttf b/src/fonts/Inter-Medium.ttf
diff --git a/src/fonts/Inter-Regular.ttf b/src/fonts/Inter-Regular.ttf
diff --git a/src/fonts/Inter-SemiBold.ttf b/src/fonts/Inter-SemiBold.ttf
diff --git a/src/fonts/OFL.txt b/src/fonts/OFL.txt
@@ -1,4 +1,5 @@
 Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
 
 This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:

diff --git a/src/hooks/use-call-setup-status.ts b/src/hooks/use-call-setup-status.ts
@@ -114,8 +114,6 @@ export function useCallSetupStatus(
   const [notice, setNotice] = useState<TranslationKeys>();
   const [isEstablishingCall, setIsEstablishingCall] = useState(false);
   const [jitsiContext, setJitsiContext] = useState<JitsiContext>({
-    recordingLink: undefined,
-    recordingTTL: undefined,
     firstTime: true,
     // check every 30 seconds (disable by setting to 0)
     inactiveInterval: 30 * 1000,

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -52,6 +52,8 @@
   "subscribe_text": "Host video calls with hundreds of people, get moderator controls, and more.",
   "talk_title": "Brave Talk",
   "talk_title_premium": "Brave Talk Premium",
+  "transcription_link_available_title": "Transcription started",
+  "transcription_link_available_description": "We have generated a link to your transcript: \n\n{{transcriptUrl}}",
   "wallet_address": "Your wallet address:",
   "wallet_connect_failed": "<0><p>Failed to connect to wallet. Please reload the page and try again.</p> <1>Help with Brave Wallet</1></0>",
   "wallet_connect_request": "Requesting wallet access...",

diff --git a/src/images/transcript.svg b/src/images/transcript.svg
diff --git a/src/index.tsx b/src/index.tsx
@@ -7,7 +7,7 @@ import "./js/jwt-decode";
 
 // these envvars are set by the EnvironmentPlugin in webpack.config.js
 console.log(
-  `!!! version ${process.env.GIT_VERSION} (${process.env.ENVIRONMENT})`,
+  `!!! version ${process.env.GIT_VERSION} (${process.env.ENVIRONMENT}) using ${config.webrtc_domain}`,
 );
 
 if (!isProduction) {
@@ -17,7 +17,7 @@ if (!isProduction) {
 // deliberately don't wait for the resolution of the promise
 // returned here - we'll await it only when we need to interact with
 // the jitsi api.
-void miniLoadExternalApi("8x8.vc", "", config.vpaas);
+void miniLoadExternalApi(config.webrtc_domain, "", config.vpaas);
 
 const rootNode = document.getElementById("root");