fix: fix regression (#189)

livepeer · Dec 12, 2022 · 0f6bb63 · 0f6bb63
1 parent 83a2efa
commit 0f6bb63
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 41 deletions.
diff --git a/.changeset/warm-cameras-cover.md b/.changeset/warm-cameras-cover.md
@@ -0,0 +1,8 @@
+---
+'@livepeer/core-react': patch
+'livepeer': patch
+'@livepeer/react': patch
+'@livepeer/react-native': patch
+---
+
+**Fix:** fixed regression with IPFS auto-playback and mime type checking in browser.
diff --git a/examples/_next/src/components/AssetDemoPlayer.tsx b/examples/_next/src/components/AssetDemoPlayer.tsx
@@ -1,7 +1,7 @@
 import { Player } from '@livepeer/react';
 import { useCallback } from 'react';
 
-const playbackId = '6d7el73r1y12chxr';
+const playbackId = 'ar://JIuxwuF79WrYNKN9_B99SxVEcKIpdibF2kWRwHBUeQg';
 // const streamId = '2c61917e-4f05-449a-ab7d-1b3c85f78993';
 
 export const AssetDemoPlayer = () => {
@@ -14,7 +14,7 @@ export const AssetDemoPlayer = () => {
       <Player
         playbackId={playbackId}
         // src={'/audio-example.mp3'}
-        autoUrlUpload={{ fallback: true, ipfsGateway: 'dweb.link' }}
+        autoUrlUpload={{ fallback: true, ipfsGateway: 'https://dweb.link' }}
         loop
         autoPlay
         showPipButton

diff --git a/packages/core-react/src/components/player/useSourceMimeTyped.tsx b/packages/core-react/src/components/player/useSourceMimeTyped.tsx
@@ -69,42 +69,6 @@ export const useSourceMimeTyped = <TElement, TPoster>({
   }, [playbackInfo]);
 
   const sourceMimeTyped = React.useMemo(() => {
-    // cast all URLs to an array of strings
-    const sources =
-      playbackUrls.length > 0
-        ? playbackUrls
-        : typeof src === 'string'
-        ? [src]
-        : src;
-
-    if (!sources) {
-      return null;
-    }
-
-    const authenticatedSources = sources.map((source) => {
-      // append the JWT to the query params
-      if (jwt) {
-        const url = new URL(source);
-        url.searchParams.append('jwt', jwt);
-        return url.toString();
-      }
-
-      return source;
-    });
-
-    const mediaSourceTypes = authenticatedSources
-      .map((s) => (typeof s === 'string' ? getMediaSourceType(s) : s))
-      .filter((s) => s) as Src[];
-
-    // if there are multiple Hls sources, we take only the first one
-    // otherwise we pass all sources to the video or audio player components
-    if (
-      mediaSourceTypes.every((s) => s.type === 'hls') &&
-      mediaSourceTypes?.[0]?.type === 'hls'
-    ) {
-      return mediaSourceTypes[0];
-    }
-
     // if the player is auto uploading, we do not play back the detected input file unless specified
     // e.g. https://arweave.net/84KylA52FVGLxyvLADn1Pm8Q3kt8JJM74B87MeoBt2w/400019.mp4
     if (decentralizedSrcOrPlaybackId) {
@@ -145,6 +109,42 @@ export const useSourceMimeTyped = <TElement, TPoster>({
       }
     }
 
+    // cast all URLs to an array of strings
+    const sources =
+      playbackUrls.length > 0
+        ? playbackUrls
+        : typeof src === 'string'
+        ? [src]
+        : src;
+
+    if (!sources) {
+      return null;
+    }
+
+    const authenticatedSources = sources.map((source) => {
+      // append the JWT to the query params
+      if (jwt) {
+        const url = new URL(source);
+        url.searchParams.append('jwt', jwt);
+        return url.toString();
+      }
+
+      return source;
+    });
+
+    const mediaSourceTypes = authenticatedSources
+      .map((s) => (typeof s === 'string' ? getMediaSourceType(s) : s))
+      .filter((s) => s) as Src[];
+
+    // if there are multiple Hls sources, we take only the first one
+    // otherwise we pass all sources to the video or audio player components
+    if (
+      mediaSourceTypes.every((s) => s.type === 'hls') &&
+      mediaSourceTypes?.[0]?.type === 'hls'
+    ) {
+      return mediaSourceTypes[0];
+    }
+
     // we filter by the first source type in the array provided
     const mediaSourceFiltered =
       mediaSourceTypes?.[0]?.type === 'audio'

diff --git a/packages/core-web/src/media/browser/utils.ts b/packages/core-web/src/media/browser/utils.ts
@@ -64,14 +64,14 @@ export const canAutoplay = (
  * Checks if the native HTML5 video player can play the mime type.
  */
 export const canPlayMediaNatively = (src: Src): boolean => {
-  if (isClient()) {
+  if (isClient() && src?.mime) {
     // TODO fix this to better support audio mime types
     if (src?.type?.includes('audio')) {
       const audio = document.createElement('audio');
-      return audio.canPlayType(src?.type).length > 0;
+      return audio.canPlayType(src.mime).length > 0;
     } else {
       const video = document.createElement('video');
-      return video.canPlayType(src?.type).length > 0;
+      return video.canPlayType(src.mime).length > 0;
     }
   }