@mottosports/motto-video-player 1.0.1-rc.22 → 1.0.1-rc.24

package/dist/index.mjs

@@ -1104,11 +1104,11 @@ styleInject(`/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
 
 // src/Player.tsx
 import { forwardRef, useEffect as useEffect5, useRef as useRef8, useImperativeHandle } from "react";
-import shaka2 from "shaka-player/dist/shaka-player.ui";
+import shaka3 from "shaka-player/dist/shaka-player.ui";
 
 // src/hooks/useShakePlayer.ts
 import { useRef, useCallback } from "react";
-import { Player as ShakaPlayer, polyfill } from "shaka-player/dist/shaka-player.ui";
+import shaka from "shaka-player/dist/shaka-player.ui";
 var useShakePlayer = ({
   src,
   shakaConfig,
@@ -1119,16 +1119,70 @@ var useShakePlayer = ({
   const playerRef = useRef(null);
   const initializePlayer = useCallback(async (video) => {
     try {
-      polyfill.installAll();
-      if (!ShakaPlayer.isBrowserSupported()) {
+      shaka.polyfill.installAll();
+      if (!shaka.Player.isBrowserSupported()) {
         throw new Error("Browser not supported by Shaka Player");
       }
-      const player = new ShakaPlayer();
+      const player = new shaka.Player();
       playerRef.current = player;
       await player.attach(video);
       if (shakaConfig) {
         player.configure(shakaConfig);
       }
+      const isPlaylistObject = typeof src === "object" && src !== null && src.dvr;
+      const manifestUrl = isPlaylistObject ? src.url : src;
+      const drmData = isPlaylistObject ? src.dvr : null;
+      if (drmData && drmData.token) {
+        const isAppleDevice2 = () => {
+          if (typeof navigator === "undefined") return false;
+          const ua = navigator.userAgent || "";
+          const isIOS = /iPad|iPhone|iPod/.test(ua) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+          const isSafari = /Safari/.test(ua) && !/Chrome|CriOS|FxiOS|Edg/.test(ua);
+          const isMacSafari = /Macintosh/.test(ua) && isSafari;
+          return isIOS || isMacSafari;
+        };
+        const useFairPlay = isAppleDevice2();
+        const drmConfig2 = {
+          servers: {},
+          advanced: {}
+        };
+        if (useFairPlay && drmData.fairplay?.license_url) {
+          drmConfig2.servers["com.apple.fps"] = drmData.fairplay.license_url;
+        } else if (drmData.widevine?.license_url) {
+          drmConfig2.servers["com.widevine.alpha"] = drmData.widevine.license_url;
+        }
+        if (useFairPlay && drmData.fairplay?.certificate_url) {
+          try {
+            const req = await fetch(drmData.fairplay.certificate_url);
+            const cert = await req.arrayBuffer();
+            drmConfig2.advanced["com.apple.fps"] = {
+              serverCertificate: new Uint8Array(cert)
+            };
+          } catch (e) {
+            console.warn("Failed to fetch FairPlay certificate:", e);
+          }
+        }
+        if (Object.keys(drmConfig2.servers).length > 0) {
+          player.configure({ drm: drmConfig2 });
+        }
+        const netEngine = player.getNetworkingEngine();
+        if (netEngine) {
+          netEngine.registerRequestFilter((type, request) => {
+            if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
+              request.headers["x-dt-custom-data"] = drmData.token;
+            }
+          });
+          netEngine.registerResponseFilter((type, response) => {
+            if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
+              const ks = player.keySystem && player.keySystem();
+              if (ks === "com.apple.fps") {
+                const responseText = shaka.util.StringUtils.fromUTF8(response.data);
+                response.data = shaka.util.Uint8ArrayUtils.fromBase64(responseText).buffer;
+              }
+            }
+          });
+        }
+      }
       if (drmConfig) {
         if (drmConfig.clearKeys) {
           player.configure({ "drm.clearKeys": drmConfig.clearKeys });
@@ -1145,7 +1199,7 @@ var useShakePlayer = ({
         console.error("Shaka Player Error:", error);
         onError?.(new Error(`Shaka Player Error: ${error.message || "Unknown error"}`));
       });
-      await player.load(src);
+      await player.load(manifestUrl);
       onPlayerReady?.(player);
       return player;
     } catch (error) {
@@ -1292,10 +1346,10 @@ var useSkipControls = (videoRef, onSkipBack, onSkipForward) => {
 // src/hooks/useMuxAnalytics.ts
 import { useCallback as useCallback4, useRef as useRef3 } from "react";
 import initShakaPlayerMux from "@mux/mux-data-shakaplayer";
-import shaka from "shaka-player/dist/shaka-player.ui";
+import shaka2 from "shaka-player/dist/shaka-player.ui";
 
 // package.json
-var version = "1.0.1-rc.22";
+var version = "1.0.1-rc.24";
 
 // src/hooks/useMuxAnalytics.ts
 var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
@@ -1322,7 +1376,7 @@ var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
           ...muxConfig.metadata
         }
       };
-      shakaPlayerMuxRef.current = initShakaPlayerMux(playerRef.current, muxOptions, shaka);
+      shakaPlayerMuxRef.current = initShakaPlayerMux(playerRef.current, muxOptions, shaka2);
       onMuxReady?.();
     } catch (error) {
       console.error("Failed to initialize Mux Analytics:", error);
@@ -3266,13 +3320,13 @@ var Player = forwardRef(
       if (!imaConfig || !playerRef.current || !videoRef.current) return;
       const adManager = playerRef.current.getAdManager();
       if (!adManager) return;
-      adManager.addEventListener(shaka2.ads?.Utils?.AD_STARTED, () => {
+      adManager.addEventListener(shaka3.ads?.Utils?.AD_STARTED, () => {
         events?.onAdStart?.();
       });
-      adManager.addEventListener(shaka2.ads?.Utils?.AD_COMPLETE, () => {
+      adManager.addEventListener(shaka3.ads?.Utils?.AD_COMPLETE, () => {
         events?.onAdComplete?.();
       });
-      adManager.addEventListener(shaka2.ads?.Utils?.AD_ERROR, (event) => {
+      adManager.addEventListener(shaka3.ads?.Utils?.AD_ERROR, (event) => {
         events?.onAdError?.(event.detail);
       });
       if (imaConfig.adTagUrl) {
@@ -3984,6 +4038,14 @@ import { useCallback as useCallback8, useEffect as useEffect8, useState as useSt
 import { twMerge as twMerge4 } from "tailwind-merge";
 import { useQuery as useQuery2 } from "@tanstack/react-query";
 import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var isAppleDevice = () => {
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent || navigator.vendor || "";
+  const isIOS = /iPad|iPhone|iPod/.test(ua) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+  const isSafari = /Safari/.test(ua) && !/Chrome|CriOS|FxiOS|Edg/.test(ua);
+  const isMacSafari = /Macintosh/.test(ua) && isSafari;
+  return isIOS || isMacSafari;
+};
 var Event = ({
   publicKey,
   eventId,
@@ -4016,6 +4078,7 @@ var Event = ({
   const [activePlaylist, setActivePlaylist] = useState4();
   const [activeVideoId, setActiveVideoId] = useState4();
   const videoIds = eventData?.videoIds ?? [];
+  const [isDRM, setIsDRM] = useState4(false);
   const {
     data: videosData,
     isLoading: videosIsLoading,
@@ -4042,9 +4105,34 @@ var Event = ({
         for (const video of videosWithPlaylists) {
           const hlsPlaylist = findHLSPlaylist(video);
           if (hlsPlaylist?.url) {
-            setActivePlaylist(hlsPlaylist.url);
+            const matchedPlaylist = video.playlists?.find((p) => p.url === hlsPlaylist.url);
+            const drm = matchedPlaylist?.dvr;
+            const hasDrm = Boolean(drm?.token);
+            let selectedPlaylist;
+            if (hasDrm) {
+              const useFairPlay = isAppleDevice();
+              if (useFairPlay && drm?.fairplay?.playlist_url && drm?.fairplay?.license_url) {
+                selectedPlaylist = {
+                  url: drm.fairplay.playlist_url,
+                  format: matchedPlaylist?.format || "HLS",
+                  dvr: drm
+                };
+              } else if (drm?.widevine?.playlist_url && drm?.widevine?.license_url) {
+                selectedPlaylist = {
+                  url: drm.widevine.playlist_url,
+                  format: matchedPlaylist?.format || "HLS",
+                  dvr: drm
+                };
+              } else {
+                selectedPlaylist = matchedPlaylist;
+              }
+            } else {
+              selectedPlaylist = hlsPlaylist.url;
+            }
+            setActivePlaylist(selectedPlaylist);
             setActiveVideoId(video.id);
             hlsPlaylistFound = true;
+            setIsDRM(Boolean(hasDrm));
             break;
           }
         }
@@ -4068,6 +4156,11 @@ var Event = ({
       events.onEventData(eventData);
     }
   }, [eventData, events]);
+  useEffect8(() => {
+    if (isDRM) {
+      console.log("DRM is enabled");
+    }
+  }, [isDRM]);
   useEffect8(() => {
     if (events?.onVideoData && activeVideoId && videosData) {
       const activeVideo = videosData.find((video) => video.id === activeVideoId);
@@ -4080,8 +4173,13 @@ var Event = ({
   const [loadingPlaylist, setLoadingPlaylist] = useState4(true);
   const videosDataError = videosData?.some((video) => !!video.error);
   useEffect8(() => {
-    if (eventError || videosError || videosDataError) {
-      const errorObj = eventError || videosError || videosData?.find((video) => !!video.error)?.error && new Error(videosData?.find((video) => !!video.error)?.error) || new Error("default");
+    if (isEventLoading || videosIsLoading || loadingApisState) {
+      return;
+    }
+    const hasPlayablePlaylist = Boolean(activePlaylist);
+    if (eventError || videosError || videosDataError && !hasPlayablePlaylist) {
+      const firstVideoError = videosData?.find((video) => !!video.error)?.error;
+      const errorObj = eventError || videosError || firstVideoError && new Error(firstVideoError) || new Error("default");
       setError(errorObj);
       if (events?.onError) {
         events.onError(errorObj);
@@ -4089,7 +4187,17 @@ var Event = ({
     } else {
       setError(null);
     }
-  }, [eventError, videosError, videosDataError, videosData, events]);
+  }, [
+    eventError,
+    videosError,
+    videosDataError,
+    videosData,
+    events,
+    activePlaylist,
+    isEventLoading,
+    videosIsLoading,
+    loadingApisState
+  ]);
   useEffect8(() => {
     const eventLoadedWithNoVideos = !isEventLoading && eventData && eventData.videoIds && (!eventData.videoIds || eventData?.videoIds?.length === 0) && !loadingApisState;
     const allApisLoadedWithPotentialVideos = !isEventLoading && !videosIsLoading && eventData && !loadingApisState;