Fix no-op storage (#511)

* fix: storage on lvpr.tv * fix: lvpr.tv * ci: bump * fix: localstorage null * fix: lvpr.tv * fix: build * fix: storage
livepeer · Mar 12, 2024 · 5da507e · 5da507e
1 parent b9e6d86
commit 5da507e
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 15 deletions.
diff --git a/.changeset/selfish-frogs-itch.md b/.changeset/selfish-frogs-itch.md
@@ -0,0 +1,8 @@
+---
+"@livepeer/react": patch
+"@livepeer/core": patch
+"@livepeer/core-react": patch
+"@livepeer/core-web": patch
+---
+
+**Fix:** fixed no-op localstorage when the `storage` prop is null.
diff --git a/apps/docs-embed/src/lib/player-components.ts b/apps/docs-embed/src/lib/player-components.ts
@@ -294,7 +294,7 @@ export const source = `export const vodSource = {
       {
         hrn: "HLS (TS)",
         type: "html5/application/vnd.apple.mpegurl",
-        url: "https://lp-playback.com/hls/f5eese9wwl88k4g8/index.m3u8",
+        url: "https://vod-cdn.lp-playback.studio/raw/jxf4iblf6wlsyor6526t4tcmtmqa/catalyst-vod-com/hls/f5eese9wwl88k4g8/index.m3u8",
       },
     ],
   },

diff --git a/apps/lvpr-tv/src/components/broadcast/Broadcast.tsx b/apps/lvpr-tv/src/components/broadcast/Broadcast.tsx
@@ -39,6 +39,7 @@ export function BroadcastWithControls({
         }
         aspectRatio={null}
         ingestUrl={ingestUrl}
+        storage={null}
       >
         <Broadcast.Container className="flex-1 w-full h-full overflow-hidden rounded-sm bg-gray-950">
           <Broadcast.Video title="Live stream" className="w-full h-full" />

diff --git a/apps/lvpr-tv/src/components/player/Player.tsx b/apps/lvpr-tv/src/components/player/Player.tsx
@@ -97,6 +97,7 @@ export async function PlayerWithControls(props: PlayerProps) {
       jwt={props.jwt}
       src={src}
       aspectRatio={null}
+      storage={null}
     >
       <Player.Container className="flex-1 h-full w-full overflow-hidden bg-black outline-none transition-all">
         <Player.Video
@@ -267,3 +268,14 @@ export const PlayerLoading = ({
     )}
   </div>
 );
+
+function isInIframe() {
+  try {
+    return typeof window !== "undefined" && window.self !== window.top;
+  } catch (e) {
+    // if accessing window.top throws an exception due to cross-origin policy,
+    // the catch block will also return true,
+    // indicating the code is running inside an iframe
+    return true;
+  }
+}
diff --git a/packages/core/src/media/controller.ts b/packages/core/src/media/controller.ts
@@ -14,7 +14,7 @@ import {
   isPermissionsError,
   isStreamOfflineError,
 } from "./errors";
-import { type ClientStorage, createStorage, noopStorage } from "./storage";
+import type { ClientStorage } from "./storage";
 import {
   generateRandomToken,
   getBoundedRate,
@@ -431,13 +431,6 @@ export const createControllerStore = ({
   initialProps: Partial<InitialProps>;
   playbackId?: string;
 }): { store: MediaControllerStore; destroy: () => void } => {
-  const resolvedStorage =
-    initialProps?.storage === null
-      ? createStorage({
-          storage: noopStorage,
-        })
-      : initialProps?.storage ?? storage;
-
   const initialPlaybackRate = initialProps?.playbackRate ?? 1;
   const initialVolume = getBoundedVolume(
     initialProps.volume ?? DEFAULT_VOLUME_LEVEL,
@@ -576,7 +569,7 @@ export const createControllerStore = ({
             playbackRate: initialPlaybackRate,
             posterLiveUpdate: initialProps.posterLiveUpdate ?? 30000,
             preload: initialProps.preload ?? "none",
-            storage: resolvedStorage,
+            storage,
             timeout: initialProps.timeout ?? 10000,
             videoQuality: initialVideoQuality,
             viewerId: initialProps.viewerId ?? null,
@@ -1099,7 +1092,7 @@ export const createControllerStore = ({
             volume,
             videoQuality,
           }),
-          storage: createJSONStorage(() => resolvedStorage),
+          storage: createJSONStorage(() => storage),
         },
       ),
     ),

diff --git a/packages/react/src/broadcast/Broadcast.tsx b/packages/react/src/broadcast/Broadcast.tsx
@@ -61,7 +61,7 @@ const Broadcast = (
     createControllerStore({
       device: getDeviceInfo(version.react),
       storage: createStorage(
-        typeof window !== "undefined"
+        storage !== null && typeof window !== "undefined"
           ? {
               storage: window.localStorage,
             }
@@ -75,7 +75,6 @@ const Broadcast = (
         aspectRatio,
         volume: 0,
         onError,
-        storage,
         timeout,
         videoQuality,
       },
@@ -86,7 +85,7 @@ const Broadcast = (
     createBroadcastStore({
       device: getBroadcastDeviceInfo(version.react),
       storage: createStorage(
-        typeof window !== "undefined"
+        storage !== null && typeof window !== "undefined"
           ? {
               storage: window.localStorage,
             }

diff --git a/packages/react/src/player/Player.tsx b/packages/react/src/player/Player.tsx
@@ -48,14 +48,15 @@ const Player = React.memo((props: MediaScopedProps<PlayerProps>) => {
     children,
     jwt,
     accessKey,
+    storage,
     ...rest
   } = props;
 
   const store = useRef(
     createControllerStore({
       device: getDeviceInfo(version.react),
       storage: createStorage(
-        typeof window !== "undefined"
+        storage !== null && typeof window !== "undefined"
           ? {
               storage: window.localStorage,
             }