From 40594309b3bf71ac9e4dbd9afaacd6d9ca1cdfe9 Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Mon, 18 Nov 2024 16:06:56 +0100
Subject: [PATCH] Get rid of `AuthenticatedDataContext` by using relay store

So, quick recap of what was done before this commit:
- Initial GQL query can include credentials to immediately unlock
  `authorizedData`, but lets just consider the route where it doesn't.
- `useAuthenticatedDataQuery` was called which sent a request based on
  whether the `authorizedData` was already present and on whether
  credentials did exist (by cleverly using `fetchPolicy`). In our case
  it first did nothing as no credentials are there.
- The `authenticatedData` as stored inside a React context, and not in
  `event`.
- The password form, when submitted would send a GQL request. On success
  the `setAuthData` setter from the context was called, meaning that
  all components using the contexts were rerendered.

Generally nothing terrible going on here, but: `authorizedData` is
really a part of the event and having a separate store, instead of just
saving and retrieving it from the Relay store feels weird. There was
also a bug where only one context was used per realm, which lead to
all video blocks showing the same video if one was unlocked.

This commit changes this. The context is completely removed and the
data is stored in the relay store, making this more idiomatic. But oh
boy, it was not easy to get here. Relay docs are just terrible for me
to dig through. So one thing seemed clear fairly quickly: the idiomatic
way is `useRefetchableFragment` for this. With that, one can only
refetch a small part of the initial query, but with potentially
different variables. Perfect! Problem is that the `refetch` function's
callback function does not get the fetched data. So it is hard to
check if the credentials were correct (and to distinguish other network
errors). So my solution at the end is to keep the manual `fetchQuery`
as that allows us to check the result in a callback. Then, on success,
the `refetch` is called with "store-only" to just rerender the
components. One of the big time sinks for me was to understand that the
manual query we use with `fetchQuery` needs to be exactly the same as
what `refetch` will execute. Specifically: use `node()` and not
`eventById`.

Refetching only works with fragments, so another layer of fragments
needed to be introduced. I added a helper function to combine the event
with its `authorizedData` for that.

This commit is best viewed with whitespace-diff disabled.
---
 frontend/src/i18n/locales/en.yaml |   1 +
 frontend/src/routes/Embed.tsx     |  32 +--
 frontend/src/routes/Realm.tsx     |  10 +-
 frontend/src/routes/Video.tsx     | 390 ++++++++++++++++--------------
 frontend/src/ui/Blocks/Video.tsx  |  26 +-
 frontend/src/util/index.ts        |  33 +--
 6 files changed, 232 insertions(+), 260 deletions(-)

diff --git a/frontend/src/i18n/locales/en.yaml b/frontend/src/i18n/locales/en.yaml
index 38691a73a..9b0757e6e 100644
--- a/frontend/src/i18n/locales/en.yaml
+++ b/frontend/src/i18n/locales/en.yaml
@@ -180,6 +180,7 @@ video:
   password:
     heading: Protected Video
     sub-heading: Access to this video is restricted.
+    no-preview-permission: $t(api-remote-errors.view.event)
     body: >
       Please enter the username and the password you have received to access this video;
       please note that these are not your login credentials.
diff --git a/frontend/src/routes/Embed.tsx b/frontend/src/routes/Embed.tsx
index b389664a5..93f232d2e 100644
--- a/frontend/src/routes/Embed.tsx
+++ b/frontend/src/routes/Embed.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, Suspense, useState } from "react";
+import { ReactNode, Suspense } from "react";
 import { LuFrown, LuAlertTriangle } from "react-icons/lu";
 import { Translation, useTranslation } from "react-i18next";
 import {
@@ -7,7 +7,7 @@ import {
 } from "react-relay";
 import { unreachable } from "@opencast/appkit";
 
-import { eventId, getCredentials, isSynced, keyOfId, useAuthenticatedDataQuery } from "../util";
+import { eventId, getCredentials, isSynced, keyOfId } from "../util";
 import { GlobalErrorBoundary } from "../util/err";
 import { loadQuery } from "../relay";
 import { makeRoute, MatchedRoute } from "../rauta";
@@ -19,7 +19,7 @@ import { EmbedQuery } from "./__generated__/EmbedQuery.graphql";
 import { EmbedDirectOpencastQuery } from "./__generated__/EmbedDirectOpencastQuery.graphql";
 import { EmbedEventData$key } from "./__generated__/EmbedEventData.graphql";
 import { PlayerContextProvider } from "../ui/player/PlayerContext";
-import { AuthenticatedDataContext, AuthorizedData, PreviewPlaceholder } from "./Video";
+import { PreviewPlaceholder, useEventWithAuthData } from "./Video";
 
 export const EmbedVideoRoute = makeRoute({
     url: ({ videoId }: { videoId: string }) => `/~embed/!v/${keyOfId(videoId)}`,
@@ -120,12 +120,8 @@ const embedEventFragment = graphql`
                 endTime
                 duration
             }
-            authorizedData(user: $eventUser, password: $eventPassword) {
-                thumbnail
-                tracks { uri flavor mimetype resolution isMaster }
-                captions { uri lang }
-                segments { uri startTime }
-            }
+            ... VideoPageAuthorizedData
+                @arguments(eventUser: $eventUser, eventPassword: $eventPassword)
         }
     }
 `;
@@ -138,12 +134,12 @@ type EmbedProps = {
 
 const Embed: React.FC<EmbedProps> = ({ query, queryRef }) => {
     const fragmentRef = usePreloadedQuery(query, queryRef);
-    const event = useFragment<EmbedEventData$key>(
+    const protoEvent = useFragment<EmbedEventData$key>(
         embedEventFragment,
         fragmentRef.event,
     );
+    const [event, refetch] = useEventWithAuthData(protoEvent);
     const { t } = useTranslation();
-    const [authenticatedData, setAuthenticatedData] = useState<AuthorizedData | null>(null);
 
     if (!event) {
         return <PlayerPlaceholder>
@@ -170,17 +166,9 @@ const Embed: React.FC<EmbedProps> = ({ query, queryRef }) => {
         </PlayerPlaceholder>;
     }
 
-    const authorizedData = useAuthenticatedDataQuery(
-        event.id,
-        event.series?.id,
-        { authorizedData: event.authorizedData },
-    );
-
-    return authorizedData
-        ? <Player event={{ ...event, authorizedData }} />
-        : <AuthenticatedDataContext.Provider value={{ authenticatedData, setAuthenticatedData }}>
-            <PreviewPlaceholder embedded {...{ event }}/>;
-        </AuthenticatedDataContext.Provider>;
+    return event.authorizedData
+        ? <Player event={{ ...event, authorizedData: event.authorizedData }} />
+        : <PreviewPlaceholder embedded {...{ event, refetch }}/>;
 };
 
 export const BlockEmbedRoute = makeRoute({
diff --git a/frontend/src/routes/Realm.tsx b/frontend/src/routes/Realm.tsx
index 306447f2f..d0faed771 100644
--- a/frontend/src/routes/Realm.tsx
+++ b/frontend/src/routes/Realm.tsx
@@ -27,7 +27,6 @@ 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
@@ -146,7 +145,6 @@ 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);
@@ -168,11 +166,9 @@ const RealmPage: React.FC<Props> = ({ realm }) => {
                 {realm.isUserRealm && <UserRealmNote realm={realm} />}
             </div>
         )}
-        <AuthenticatedDataContext.Provider value={{ authenticatedData, setAuthenticatedData }}>
-            {realm.blocks.length === 0 && realm.isMainRoot
-                ? <WelcomeMessage />
-                : <Blocks realm={realm} />}
-        </AuthenticatedDataContext.Provider>
+        {realm.blocks.length === 0 && realm.isMainRoot
+            ? <WelcomeMessage />
+            : <Blocks realm={realm} />}
     </>;
 };
 
diff --git a/frontend/src/routes/Video.tsx b/frontend/src/routes/Video.tsx
index 5fb9e06d7..cb99303db 100644
--- a/frontend/src/routes/Video.tsx
+++ b/frontend/src/routes/Video.tsx
@@ -1,15 +1,14 @@
 import React, {
-    createContext,
-    Dispatch,
     ReactElement,
     ReactNode,
-    SetStateAction,
-    useContext,
     useEffect,
     useRef,
     useState,
 } from "react";
-import { graphql, GraphQLTaggedNode, PreloadedQuery, useFragment } from "react-relay/hooks";
+import {
+    graphql, GraphQLTaggedNode, PreloadedQuery, RefetchFnDynamic, useFragment,
+    useRefetchableFragment,
+} from "react-relay/hooks";
 import { useTranslation } from "react-i18next";
 import { fetchQuery, OperationType } from "relay-runtime";
 import {
@@ -19,7 +18,7 @@ import { QRCodeCanvas } from "qrcode.react";
 import {
     match, unreachable, screenWidthAtMost, screenWidthAbove, useColorScheme,
     Floating, FloatingContainer, FloatingTrigger, WithTooltip, Card, Button, ProtoButton,
-    bug,
+    notNullish,
 } from "@opencast/appkit";
 import { VideoObject, WithContext } from "schema-dts";
 
@@ -46,7 +45,6 @@ import {
     keyOfId,
     playlistId,
     getCredentials,
-    useAuthenticatedDataQuery,
     credentialsStorageKey,
 } from "../util";
 import { BREAKPOINT_SMALL, BREAKPOINT_MEDIUM } from "../GlobalStyle";
@@ -90,9 +88,11 @@ import { PlaylistBlockFromPlaylist } from "../ui/Blocks/Playlist";
 import { AuthenticationFormState, FormData, AuthenticationForm } from "./Login";
 import {
     VideoAuthorizedDataQuery,
-    VideoAuthorizedDataQuery$data,
 } from "./__generated__/VideoAuthorizedDataQuery.graphql";
 import { AuthorizedBlockEvent } from "../ui/Blocks/Video";
+import {
+    VideoPageAuthorizedData$data, VideoPageAuthorizedData$key,
+} from "./__generated__/VideoPageAuthorizedData.graphql";
 
 
 // ===========================================================================================
@@ -122,6 +122,7 @@ export const VideoRoute = makeRoute({
                 ... UserData
                 event: eventById(id: $id) {
                     ... VideoPageEventData
+                        @arguments(eventUser: $eventUser, eventPassword: $eventPassword)
                     ... on AuthorizedEvent {
                         isReferencedByRealm(path: $realmPath)
                     }
@@ -146,11 +147,7 @@ export const VideoRoute = makeRoute({
                 {... { query, queryRef }}
                 nav={data => data.realm ? <Nav fragRef={data.realm} /> : []}
                 render={({ event, realm, playlist }) => {
-                    if (!event) {
-                        return <NotFound kind="video" />;
-                    }
-
-                    if (!realm || !event.isReferencedByRealm) {
+                    if (!realm || (event && !event.isReferencedByRealm)) {
                         return <ForwardToDirectRoute videoId={videoId} />;
                     }
 
@@ -191,6 +188,7 @@ export const OpencastVideoRoute = makeRoute({
                 ... UserData
                 event: eventByOpencastId(id: $id) {
                     ... VideoPageEventData
+                        @arguments(eventUser: $eventUser, eventPassword: $eventPassword)
                     ... on AuthorizedEvent {
                         isReferencedByRealm(path: $realmPath)
                     }
@@ -215,11 +213,7 @@ export const OpencastVideoRoute = makeRoute({
                 {... { query, queryRef }}
                 nav={data => data.realm ? <Nav fragRef={data.realm} /> : []}
                 render={({ event, realm, playlist }) => {
-                    if (!event) {
-                        return <NotFound kind="video" />;
-                    }
-
-                    if (!realm || !event.isReferencedByRealm) {
+                    if (!realm || (event && !event.isReferencedByRealm)) {
                         return <ForwardToDirectOcRoute ocID={id} />;
                     }
 
@@ -266,7 +260,10 @@ export const DirectVideoRoute = makeRoute({
                 $eventPassword: String
             ) {
                 ... UserData
-                event: eventById(id: $id) { ... VideoPageEventData }
+                event: eventById(id: $id) {
+                    ... VideoPageEventData
+                        @arguments(eventUser: $eventUser, eventPassword: $eventPassword)
+                }
                 realm: rootRealm {
                     ... VideoPageRealmData
                     ... NavigationData
@@ -303,7 +300,10 @@ export const DirectOpencastVideoRoute = makeRoute({
                 $eventPassword: String
             ) {
                 ... UserData
-                event: eventByOpencastId(id: $id) { ... VideoPageEventData }
+                event: eventByOpencastId(id: $id) {
+                    ... VideoPageEventData
+                        @arguments(eventUser: $eventUser, eventPassword: $eventPassword)
+                }
                 realm: rootRealm {
                     ... VideoPageRealmData
                     ... NavigationData
@@ -376,18 +376,43 @@ const matchedDirectRoute = (
         {... { query, queryRef }}
         noindex
         nav={data => data.realm ? <Nav fragRef={data.realm} /> : []}
-        render={({ event, realm, playlist }) => !event
-            ? <NotFound kind="video" />
-            : <VideoPage
-                eventRef={event}
-                realmRef={realm ?? unreachable("root realm doesn't exist")}
-                playlistRef={playlist ?? null}
-                basePath="/!v"
-            />}
+        render={({ event, realm, playlist }) => <VideoPage
+            eventRef={event}
+            realmRef={realm ?? unreachable("root realm doesn't exist")}
+            playlistRef={playlist ?? null}
+            basePath="/!v"
+        />}
     />,
     dispose: () => queryRef.dispose(),
 });
 
+type RawEvent<T> =
+    | ({ __typename: "AuthorizedEvent"} & T)
+    | { __typename: "NotAllowed" }
+    | { __typename: "%other" };
+
+export const useEventWithAuthData = <T, >(
+    event?: RawEvent<T & VideoPageAuthorizedData$key> | null,
+): [
+    RawEvent<T & { authorizedData: VideoPageAuthorizedData$data["authorizedData"] }>
+        | undefined | null,
+    RefetchFnDynamic<VideoPageInRealmQuery, VideoPageAuthorizedData$key>,
+] => {
+    const [data, refetch] = useRefetchableFragment(
+        authorizedDataFragment,
+        !event || event.__typename !== "AuthorizedEvent"
+            ? null
+            : event as VideoPageAuthorizedData$key,
+    );
+
+    if (!event || event.__typename !== "AuthorizedEvent") {
+        return [event, refetch];
+    }
+
+    const patched = { ...event, authorizedData: notNullish(data).authorizedData };
+    return [patched, refetch];
+};
+
 
 // ===========================================================================================
 // ===== GraphQL Fragments
@@ -403,7 +428,12 @@ const realmFragment = graphql`
 `;
 
 const eventFragment = graphql`
-    fragment VideoPageEventData on Event {
+    fragment VideoPageEventData on Event
+        @argumentDefinitions(
+          eventUser: { type: "String", defaultValue: null },
+          eventPassword: { type: "String", defaultValue: null },
+        )
+    {
         __typename
         ... on NotAllowed { dummy } # workaround
         ... on AuthorizedEvent {
@@ -423,12 +453,8 @@ const eventFragment = graphql`
                 startTime
                 endTime
             }
-            authorizedData(user: $eventUser, password: $eventPassword) {
-                tracks { uri flavor mimetype resolution isMaster }
-                captions { uri lang }
-                segments { uri startTime }
-                thumbnail
-            }
+            ... VideoPageAuthorizedData
+                @arguments(eventUser: $eventUser, eventPassword: $eventPassword)
             series {
                 id
                 opencastId
@@ -439,19 +465,41 @@ const eventFragment = graphql`
     }
 `;
 
+const authorizedDataFragment = graphql`
+    fragment VideoPageAuthorizedData on AuthorizedEvent
+        @refetchable(queryName: "VideoAuthorizedDataRefetchQuery")
+        @argumentDefinitions(
+            eventUser: { type: "String", defaultValue: null },
+            eventPassword: { type: "String", defaultValue: null },
+        )
+    {
+        authorizedData(user: $eventUser, password: $eventPassword) {
+            tracks { uri flavor mimetype resolution isMaster }
+            captions { uri lang }
+            segments { uri startTime }
+            thumbnail
+        }
+    }
+`;
+
+// Custom query to refetch authorized event data manually. Unfortunately, using
+// the fragment here is not enough, we need to also selected `authorizedData`
+// manually. Without that, we could not access that field below to check if the
+// credentials were correct. Normally, adding `@relay(mask: false)` to the
+// fragment should also fix that, but that does not work for some reason.
 export const authorizedDataQuery = graphql`
     query VideoAuthorizedDataQuery(
-        $eventId: ID!,
+        $id: ID!,
         $eventUser: String,
         $eventPassword: String,
     ) {
-        authorizedEvent: eventById(id: $eventId) {
+        node(id: $id) {
+            __typename
+            id
+            ...VideoPageAuthorizedData
+                @arguments(eventUser: $eventUser, eventPassword: $eventPassword)
             ...on AuthorizedEvent {
-                id
                 authorizedData(user: $eventUser, password: $eventPassword) {
-                    tracks { uri flavor mimetype resolution isMaster }
-                    captions { uri lang }
-                    segments { uri startTime }
                     thumbnail
                 }
             }
@@ -464,15 +512,8 @@ 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>;
+    eventRef: NonNullable<VideoPageEventData$key> | null | undefined;
     realmRef: NonNullable<VideoPageRealmData$key>;
     playlistRef: PlaylistBlockPlaylistData$key | null;
     basePath: string;
@@ -481,9 +522,13 @@ type Props = {
 const VideoPage: React.FC<Props> = ({ eventRef, realmRef, playlistRef, basePath }) => {
     const { t } = useTranslation();
     const rerender = useForceRerender();
-    const event = useFragment(eventFragment, eventRef);
     const realm = useFragment(realmFragment, realmRef);
-    const [authenticatedData, setAuthenticatedData] = useState<AuthorizedData | null>(null);
+    const protoEvent = useFragment(eventFragment, eventRef);
+    const [event, refetch] = useEventWithAuthData(protoEvent);
+
+    if (!event) {
+        return <NotFound kind="video" />;
+    }
 
     if (event.__typename === "NotAllowed") {
         return <ErrorPage title={t("api-remote-errors.view.event")} />;
@@ -495,23 +540,6 @@ const VideoPage: React.FC<Props> = ({ eventRef, realmRef, playlistRef, basePath
         return <WaitingPage type="video" />;
     }
 
-    // If the event is password protected this will check if there are credentials for this event's
-    // series are stored, and if so, skip the authentication.
-    // Ideally this would happen at the top level in the `makeRoute` call, but at that point the
-    // series id isn't known. To prevent unnecessary queries, the hook is also passed the authorized
-    // data of this event. If that is neither null nor undefined, nothing is fetched.
-    //
-    // This extra check is particularly useful in this specific component, where we might run into a
-    // situation where an event has been previously authenticated and its credentials are stored
-    // with both its own ID (with which it is possible to already fetch the authenticated data in
-    // the initial video page query) and its series ID. So when the authenticated data is already
-    // present, it shouldn't be fetched a second time.
-    const authorizedData = useAuthenticatedDataQuery(
-        event.id,
-        event.series?.id,
-        { authorizedData: event.authorizedData },
-    );
-
     const breadcrumbs = realm.isMainRoot ? [] : realmBreadcrumbs(t, realm.ancestors.concat(realm));
     const { hasStarted, hasEnded } = getEventTimeInfo(event);
     const isCurrentlyLive = hasStarted === true && hasEnded === false;
@@ -539,49 +567,50 @@ 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>
-        <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 }} />
-
-            {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}
+        <PlayerContextProvider>
+            {event.authorizedData
+                ? <InlinePlayer
+                    event={{ ...event, authorizedData: event.authorizedData }}
+                    css={{ margin: "-4px auto 0" }}
+                    onEventStateChange={rerender}
                 />
+                : <PreviewPlaceholder {...{ event, refetch }}/>
             }
-        </AuthenticatedDataContext.Provider>
+            <Metadata id={event.id} event={event} />
+        </PlayerContextProvider>
+
+        <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}
+            />
+        }
     </>;
 };
 
 type ProtectedPlayerProps = {
     event: Event | AuthorizedBlockEvent;
     embedded?: boolean;
+    refetch: RefetchFnDynamic<VideoPageInRealmQuery, VideoPageAuthorizedData$key>;
 }
 
-export const PreviewPlaceholder: React.FC<ProtectedPlayerProps> = ({ event, embedded }) => {
+export const PreviewPlaceholder: React.FC<ProtectedPlayerProps> = ({
+    event, embedded, refetch,
+}) => {
     const { t } = useTranslation();
 
     return event.hasPassword
-        ? <ProtectedPlayer {...{ event, embedded }} />
+        ? <ProtectedPlayer {...{ event, embedded, refetch }} />
         : <div css={{ height: "unset" }}>
             <PlayerPlaceholder>
                 <p css={{
@@ -598,13 +627,12 @@ export const PreviewPlaceholder: React.FC<ProtectedPlayerProps> = ({ event, embe
 
 export const CREDENTIALS_STORAGE_KEY = "tobira-video-credentials-";
 
-const ProtectedPlayer: React.FC<ProtectedPlayerProps> = ({ event, embedded }) => {
+const ProtectedPlayer: React.FC<ProtectedPlayerProps> = ({ event, embedded, refetch }) => {
     const { t } = useTranslation(undefined, { keyPrefix: "video.password" });
     const isDark = useColorScheme().scheme === "dark";
     const user = useUser();
     const [authState, setAuthState] = useState<AuthenticationFormState>("idle");
     const [authError, setAuthError] = useState<string | null>(null);
-    const authenticatedDataContext = useContext(AuthenticatedDataContext);
 
     const embeddedStyles = {
         height: "100%",
@@ -613,34 +641,34 @@ const ProtectedPlayer: React.FC<ProtectedPlayerProps> = ({ event, embedded }) =>
     };
 
     const onSubmit = (data: FormData) => {
-        const credentials = JSON.stringify({
+        const credentialVars = {
             eventUser: data.userid,
             eventPassword: data.password,
-        });
-
+        };
         fetchQuery<VideoAuthorizedDataQuery>(environment, authorizedDataQuery, {
-            eventId: event.id,
-            eventUser: data.userid,
-            eventPassword: data.password,
+            id: event.id,
+            ...credentialVars,
         }).subscribe({
             start: () => setAuthState("pending"),
-            next: ({ authorizedEvent }) => {
-                if (!authorizedEvent?.authorizedData) {
-                    setAuthError(t("invalid-credentials"));
+            next: ({ node }) => {
+                if (node?.__typename !== "AuthorizedEvent") {
+                    setAuthError(t("no-preview-permission"));
                     setAuthState("idle");
                     return;
                 }
 
-                if (authenticatedDataContext) {
-                    authenticatedDataContext.setAuthenticatedData({
-                        authorizedData: authorizedEvent.authorizedData,
-                    });
-                } else {
-                    bug("Authenticated data context is not initialized");
+                if (!node.authorizedData) {
+                    setAuthError(t("invalid-credentials"));
+                    setAuthState("idle");
+                    return;
                 }
 
-                setAuthError(null);
-                setAuthState("success");
+                // This refetches the fragment, which actually makes the
+                // components re-render with the new `authorizedData` value.
+                // This does not actually send a network request as all data is
+                // in the store (due to `fetchQuery` that was just executed).
+                refetch(credentialVars, { fetchPolicy: "store-only" });
+
 
                 // To make the authentication "sticky", the credentials are stored in browser
                 // storage. If the user is logged in, local storage is used so the browser
@@ -656,6 +684,10 @@ const ProtectedPlayer: React.FC<ProtectedPlayerProps> = ({ event, embedded }) =>
                 // query, when only the single ID from the url is known.
                 // The check will return a result for either ID regardless of its kind, as long as
                 // one of them is stored.
+                const credentials = JSON.stringify({
+                    eventUser: data.userid,
+                    eventPassword: data.password,
+                });
                 const storage = isRealUser(user) ? window.localStorage : window.sessionStorage;
                 storage.setItem(credentialsStorageKey("event", event.id), credentials);
                 storage.setItem(credentialsStorageKey("oc-event", event.opencastId), credentials);
@@ -673,81 +705,75 @@ const ProtectedPlayer: React.FC<ProtectedPlayerProps> = ({ event, embedded }) =>
         });
     };
 
-    return authenticatedDataContext?.authenticatedData?.authorizedData && event.syncedData
-        ? <InlinePlayer event={{
-            ...event,
-            authorizedData: authenticatedDataContext.authenticatedData.authorizedData,
-            syncedData: event.syncedData,
-        }} />
-        : (
+    return (
+        <div css={{
+            display: "flex",
+            flexDirection: "column",
+            color: isDark ? COLORS.neutral80 : COLORS.neutral15,
+            backgroundColor: isDark ? COLORS.neutral15 : COLORS.neutral80,
+            [screenWidthAtMost(BREAKPOINT_MEDIUM)]: {
+                alignItems: "center",
+            },
+            ...embedded && embeddedStyles,
+        }}>
+            <h2 css={{
+                margin: 32,
+                marginBottom: 0,
+                [screenWidthAbove(BREAKPOINT_MEDIUM)]: {
+                    textAlign: "left",
+                },
+            }}>{t("heading")}</h2>
             <div css={{
                 display: "flex",
-                flexDirection: "column",
-                color: isDark ? COLORS.neutral80 : COLORS.neutral15,
-                backgroundColor: isDark ? COLORS.neutral15 : COLORS.neutral80,
                 [screenWidthAtMost(BREAKPOINT_MEDIUM)]: {
-                    alignItems: "center",
+                    flexDirection: "column-reverse",
                 },
-                ...embedded && embeddedStyles,
             }}>
-                <h2 css={{
-                    margin: 32,
-                    marginBottom: 0,
-                    [screenWidthAbove(BREAKPOINT_MEDIUM)]: {
-                        textAlign: "left",
-                    },
-                }}>{t("heading")}</h2>
                 <div css={{
                     display: "flex",
-                    [screenWidthAtMost(BREAKPOINT_MEDIUM)]: {
-                        flexDirection: "column-reverse",
-                    },
+                    flexDirection: "column",
+                    alignItems: "center",
                 }}>
-                    <div css={{
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: "center",
-                    }}>
-                        <AuthenticationForm
-                            {...{ onSubmit }}
-                            state={authState}
-                            error={null}
-                            SubmitIcon={LuUnlock}
-                            labels={{
-                                user: t("label.id"),
-                                password: t("label.password"),
-                                submit: t("label.submit"),
-                            }}
-                            css={{
-                                "&": { backgroundColor: "transparent" },
-                                margin: 0,
-                                border: 0,
-                                width: "unset",
-                                minWidth: 300,
-                                "div > label, div > input": {
-                                    ...!isDark && {
-                                        backgroundColor: COLORS.neutral15,
-                                    },
+                    <AuthenticationForm
+                        {...{ onSubmit }}
+                        state={authState}
+                        error={null}
+                        SubmitIcon={LuUnlock}
+                        labels={{
+                            user: t("label.id"),
+                            password: t("label.password"),
+                            submit: t("label.submit"),
+                        }}
+                        css={{
+                            "&": { backgroundColor: "transparent" },
+                            margin: 0,
+                            border: 0,
+                            width: "unset",
+                            minWidth: 300,
+                            "div > label, div > input": {
+                                ...!isDark && {
+                                    backgroundColor: COLORS.neutral15,
                                 },
+                            },
+                        }}
+                    />
+                    {authError && (
+                        <Card
+                            kind="error"
+                            iconPos="left"
+                            css={{
+                                width: "fit-content",
+                                marginBottom: 32,
                             }}
-                        />
-                        {authError && (
-                            <Card
-                                kind="error"
-                                iconPos="left"
-                                css={{
-                                    width: "fit-content",
-                                    marginBottom: 32,
-                                }}
-                            >
-                                {authError}
-                            </Card>
-                        )}
-                    </div>
-                    <AuthenticationFormText />
+                        >
+                            {authError}
+                        </Card>
+                    )}
                 </div>
+                <AuthenticationFormText />
             </div>
-        );
+        </div>
+    );
 };
 
 const AuthenticationFormText: React.FC = () => {
@@ -784,7 +810,9 @@ const AuthenticationFormText: React.FC = () => {
 };
 
 type Event = Extract<NonNullable<VideoPageEventData$data>, { __typename: "AuthorizedEvent" }>;
-type SyncedEvent = SyncedOpencastEntity<Event>;
+type SyncedEvent = SyncedOpencastEntity<Event> & {
+    authorizedData?: VideoPageAuthorizedData$data["authorizedData"];
+};
 
 type MetadataProps = {
     id: string;
diff --git a/frontend/src/ui/Blocks/Video.tsx b/frontend/src/ui/Blocks/Video.tsx
index 55b3d7332..5726a0ba6 100644
--- a/frontend/src/ui/Blocks/Video.tsx
+++ b/frontend/src/ui/Blocks/Video.tsx
@@ -5,11 +5,11 @@ import { InlinePlayer } from "../player";
 import { VideoBlockData$data, VideoBlockData$key } from "./__generated__/VideoBlockData.graphql";
 import { Title } from "..";
 import { useTranslation } from "react-i18next";
-import { isSynced, keyOfId, useAuthenticatedDataQuery } from "../../util";
+import { isSynced, keyOfId } from "../../util";
 import { Link } from "../../router";
 import { LuArrowRightCircle } from "react-icons/lu";
 import { PlayerContextProvider } from "../player/PlayerContext";
-import { PreviewPlaceholder } from "../../routes/Video";
+import { PreviewPlaceholder, useEventWithAuthData } from "../../routes/Video";
 
 
 export type BlockEvent = VideoBlockData$data["event"];
@@ -22,7 +22,7 @@ type Props = {
 
 export const VideoBlock: React.FC<Props> = ({ fragRef, basePath }) => {
     const { t } = useTranslation();
-    const { event, showTitle, showLink } = useFragment(graphql`
+    const { event: protoEvent, showTitle, showLink } = useFragment(graphql`
         fragment VideoBlockData on VideoBlock {
             event {
                 __typename
@@ -45,18 +45,14 @@ export const VideoBlock: React.FC<Props> = ({ fragRef, basePath }) => {
                         startTime
                         endTime
                     }
-                    authorizedData {
-                        thumbnail
-                        tracks { uri flavor mimetype resolution isMaster }
-                        captions { uri lang }
-                        segments { uri startTime }
-                    }
+                    ... VideoPageAuthorizedData
                 }
             }
             showTitle
             showLink
         }
     `, fragRef);
+    const [event, refetch] = useEventWithAuthData(protoEvent);
 
     if (event == null) {
         return <Card kind="error">{t("video.deleted-video-block")}</Card>;
@@ -69,22 +65,16 @@ export const VideoBlock: React.FC<Props> = ({ fragRef, basePath }) => {
         return unreachable();
     }
 
-    const authorizedData = useAuthenticatedDataQuery(
-        event.id,
-        event.series?.id,
-        { authorizedData: event.authorizedData },
-    );
-
 
     return <div css={{ maxWidth: 800 }}>
         {showTitle && <Title title={event.title} />}
         <PlayerContextProvider>
-            {authorizedData && isSynced(event)
+            {event.authorizedData && isSynced(event)
                 ? <InlinePlayer
-                    event={{ ...event, authorizedData }}
+                    event={{ ...event, authorizedData: event.authorizedData }}
                     css={{ margin: "-4px auto 0" }}
                 />
-                : <PreviewPlaceholder {...{ event }} />
+                : <PreviewPlaceholder {...{ event, refetch }} />
             }
         </PlayerContextProvider>
 
diff --git a/frontend/src/util/index.ts b/frontend/src/util/index.ts
index e276fc702..546f03212 100644
--- a/frontend/src/util/index.ts
+++ b/frontend/src/util/index.ts
@@ -2,14 +2,10 @@ import { i18n } from "i18next";
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { bug, match } from "@opencast/appkit";
-import { useLazyLoadQuery } from "react-relay";
 
 import CONFIG, { TranslatedString } from "../config";
 import { TimeUnit } from "../ui/Input";
-import { AuthorizedData, authorizedDataQuery, CREDENTIALS_STORAGE_KEY } from "../routes/Video";
-import {
-    VideoAuthorizedDataQuery,
-} from "../routes/__generated__/VideoAuthorizedDataQuery.graphql";
+import { CREDENTIALS_STORAGE_KEY } from "../routes/Video";
 
 
 /**
@@ -227,33 +223,6 @@ export type Credentials = {
 } | null;
 
 
-/**
- * Returns `authorizedData` of password protected events by fetching it from the API,
- * if the correct credentials were supplied.
- * This will not send a request when there are no credentials and instead return the
- * event's authorized data if that was already present and passed to this hook.
- */
-export const useAuthenticatedDataQuery = (
-    eventID: string,
-    seriesID?: string,
-    authData?: AuthorizedData | null,
-) => {
-    // If `id` is coming from a search event, the prefix might be `es` or `ss`, but
-    // the query and storage need it to be a regular event/series id (i.e. with prefix `ev`/`sr`).
-    const credentials = getCredentials("event", eventId(keyOfId(eventID))) ?? (
-        seriesID && getCredentials("series", seriesId(keyOfId(seriesID)))
-    );
-    const authenticatedData = useLazyLoadQuery<VideoAuthorizedDataQuery>(
-        authorizedDataQuery,
-        { eventId: eventId(keyOfId(eventID)), ...credentials },
-        // This will only query the data for events with stored credentials and/or yet unknown
-        // authorized data. This should help to prevent unnecessary queries.
-        { fetchPolicy: credentials && !authData ? "store-or-network" : "store-only" }
-    );
-
-    return authData?.authorizedData ?? authenticatedData?.authorizedEvent?.authorizedData;
-};
-
 /**
  * Returns stored credentials of events.
  *