Add authenticated data context to video pages and realms

Before this change, authenticating a video on video pages or in video blocks would not rerender series blocks, i.e. the thumbnails would not reflect the fact that the videos of these blocks were unlocked. This adds a shared state through context so these blocks are now rerendered and correctly show the videos as unlocked.
elan-ev · Oct 20, 2024 · c7b710b · c7b710b
1 parent 85d4c1f
commit c7b710b
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 35 deletions.
diff --git a/frontend/src/routes/Realm.tsx b/frontend/src/routes/Realm.tsx
@@ -27,6 +27,7 @@ import { COLORS } from "../color";
 import { useMenu } from "../layout/MenuState";
 import { ManageNav } from "./manage";
 import { BREAKPOINT as NAV_BREAKPOINT } from "../layout/Navigation";
+import { AuthorizedData, AuthenticatedDataContext } from "./Video";
 
 
 // eslint-disable-next-line @typescript-eslint/quotes
@@ -145,6 +146,7 @@ const RealmPage: React.FC<Props> = ({ realm }) => {
     const { t } = useTranslation();
     const siteTitle = useTranslatedConfig(CONFIG.siteTitle);
     const breadcrumbs = realmBreadcrumbs(t, realm.ancestors);
+    const [authenticatedData, setAuthenticatedData] = useState<AuthorizedData | null>(null);
 
     const title = realm.isMainRoot ? siteTitle : realm.name;
     useTitle(title, realm.isMainRoot);
@@ -166,9 +168,11 @@ const RealmPage: React.FC<Props> = ({ realm }) => {
                 {realm.isUserRealm && <UserRealmNote realm={realm} />}
             </div>
         )}
-        {realm.blocks.length === 0 && realm.isMainRoot
-            ? <WelcomeMessage />
-            : <Blocks realm={realm} />}
+        <AuthenticatedDataContext.Provider value={{ authenticatedData, setAuthenticatedData }}>
+            {realm.blocks.length === 0 && realm.isMainRoot
+                ? <WelcomeMessage />
+                : <Blocks realm={realm} />}
+        </AuthenticatedDataContext.Provider>
     </>;
 };
 

diff --git a/frontend/src/routes/Video.tsx b/frontend/src/routes/Video.tsx
@@ -1,4 +1,14 @@
-import React, { ReactElement, ReactNode, useEffect, useRef, useState } from "react";
+import React, {
+    createContext,
+    Dispatch,
+    ReactElement,
+    ReactNode,
+    SetStateAction,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
 import { graphql, GraphQLTaggedNode, PreloadedQuery, useFragment } from "react-relay/hooks";
 import { useTranslation } from "react-i18next";
 import { fetchQuery, OperationType } from "relay-runtime";
@@ -9,6 +19,7 @@ import { QRCodeCanvas } from "qrcode.react";
 import {
     match, unreachable, screenWidthAtMost, screenWidthAbove, useColorScheme,
     Floating, FloatingContainer, FloatingTrigger, WithTooltip, Card, Button, ProtoButton,
+    bug,
 } from "@opencast/appkit";
 import { VideoObject, WithContext } from "schema-dts";
 
@@ -452,6 +463,13 @@ export const authorizedDataQuery = graphql`
 // ===== Components
 // ===========================================================================================
 
+export type AuthorizedData = VideoAuthorizedDataQuery$data["authorizedEvent"];
+type AuthenticatedDataContext = {
+    authenticatedData: AuthorizedData;
+    setAuthenticatedData: Dispatch<SetStateAction<AuthorizedData>>;
+}
+export const AuthenticatedDataContext = createContext<AuthenticatedDataContext | null>(null);
+
 type Props = {
     eventRef: NonNullable<VideoPageEventData$key>;
     realmRef: NonNullable<VideoPageRealmData$key>;
@@ -464,6 +482,7 @@ const VideoPage: React.FC<Props> = ({ eventRef, realmRef, playlistRef, basePath
     const rerender = useForceRerender();
     const event = useFragment(eventFragment, eventRef);
     const realm = useFragment(realmFragment, realmRef);
+    const [authenticatedData, setAuthenticatedData] = useState<AuthorizedData | null>(null);
 
     if (event.__typename === "NotAllowed") {
         return <ErrorPage title={t("api-remote-errors.view.event")} />;
@@ -521,34 +540,36 @@ const VideoPage: React.FC<Props> = ({ eventRef, realmRef, playlistRef, basePath
     return <>
         <Breadcrumbs path={breadcrumbs} tail={event.title} />
         <script type="application/ld+json">{JSON.stringify(structuredData)}</script>
-        <PlayerContextProvider>
-            {authorizedData
-                ? <InlinePlayer
-                    event={{ ...event, authorizedData }}
-                    css={{ margin: "-4px auto 0" }}
-                    onEventStateChange={rerender}
-                />
-                : <PreviewPlaceholder {...{ event }}/>
-            }
-            <Metadata id={event.id} event={event} />
-        </PlayerContextProvider>
+        <AuthenticatedDataContext.Provider value={{ authenticatedData, setAuthenticatedData }}>
+            <PlayerContextProvider>
+                {authorizedData
+                    ? <InlinePlayer
+                        event={{ ...event, authorizedData }}
+                        css={{ margin: "-4px auto 0" }}
+                        onEventStateChange={rerender}
+                    />
+                    : <PreviewPlaceholder {...{ event }}/>
+                }
+                <Metadata id={event.id} event={event} />
+            </PlayerContextProvider>
 
-        <div css={{ height: 80 }} />
+            <div css={{ height: 80 }} />
 
-        {playlistRef
-            ? <PlaylistBlockFromPlaylist
-                moreOfTitle
-                basePath={basePath}
-                fragRef={playlistRef}
-                activeEventId={event.id}
-            />
-            : event.series && <SeriesBlockFromSeries
-                basePath={basePath}
-                fragRef={event.series}
-                title={t("video.more-from-series", { series: event.series.title })}
-                activeEventId={event.id}
-            />
-        }
+            {playlistRef
+                ? <PlaylistBlockFromPlaylist
+                    moreOfTitle
+                    basePath={basePath}
+                    fragRef={playlistRef}
+                    activeEventId={event.id}
+                />
+                : event.series && <SeriesBlockFromSeries
+                    basePath={basePath}
+                    fragRef={event.series}
+                    title={t("video.more-from-series", { series: event.series.title })}
+                    activeEventId={event.id}
+                />
+            }
+        </AuthenticatedDataContext.Provider>
     </>;
 };
 
@@ -576,7 +597,6 @@ export const PreviewPlaceholder: React.FC<ProtectedPlayerProps> = ({ event, embe
         </div>;
 };
 
-export type AuthorizedData = VideoAuthorizedDataQuery$data["authorizedEvent"];
 export const CREDENTIALS_STORAGE_KEY = "tobira-video-credentials-";
 
 const ProtectedPlayer: React.FC<ProtectedPlayerProps> = ({ event, embedded }) => {
@@ -585,7 +605,7 @@ const ProtectedPlayer: React.FC<ProtectedPlayerProps> = ({ event, embedded }) =>
     const user = useUser();
     const [authState, setAuthState] = useState<AuthenticationFormState>("idle");
     const [authError, setAuthError] = useState<string | null>(null);
-    const [authData, setAuthData] = useState<AuthorizedData | null>(null);
+    const authenticatedDataContext = useContext(AuthenticatedDataContext);
 
     const embeddedStyles = {
         height: "100%",
@@ -612,8 +632,15 @@ const ProtectedPlayer: React.FC<ProtectedPlayerProps> = ({ event, embedded }) =>
                     return;
                 }
 
+                if (authenticatedDataContext) {
+                    authenticatedDataContext.setAuthenticatedData({
+                        authorizedData: authorizedEvent.authorizedData,
+                    });
+                } else {
+                    bug("Authenticated data context is not initialized");
+                }
+
                 setAuthError(null);
-                setAuthData({ authorizedData: authorizedEvent.authorizedData });
                 setAuthState("success");
 
                 // To make the authentication "sticky", the credentials are stored in browser
@@ -648,10 +675,10 @@ const ProtectedPlayer: React.FC<ProtectedPlayerProps> = ({ event, embedded }) =>
         });
     };
 
-    return authData && event.syncedData
+    return authenticatedDataContext?.authenticatedData && event.syncedData
         ? <InlinePlayer event={{
             ...event,
-            ...authData,
+            ...authenticatedDataContext.authenticatedData,
             syncedData: event.syncedData,
         }} />
         : (