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

package/dist/index.d.mts

@@ -109,9 +109,9 @@ interface IconSizes {
 }
 interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'onError'> {
     /**
-     * The source URL of the video (DASH, HLS, or regular MP4)
+     * The source URL of the video (DASH, HLS, or regular MP4) or playlist object with DRM info
      */
-    src: string;
+    src: string | any;
     /**
      * Whether the video should autoplay
      */
@@ -151,7 +151,7 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      */
     shakaConfig?: any;
     /**
-     * DRM configuration for protected content
+     * DRM configuration for protected content (deprecated - now derived from src playlist)
      */
     drmConfig?: {
         clearKeys?: {
@@ -349,6 +349,28 @@ interface VideoData {
     }>;
     error?: string;
 }
+interface DRMSettings {
+    window_size_seconds: number;
+}
+interface Widevine {
+    playlist_url: string;
+    license_url: string;
+}
+interface Fairplay {
+    certificate_url: string;
+    license_url: string;
+    playlist_url: string;
+}
+interface Playready {
+    playlist_url: string;
+    license_url: string;
+}
+interface DRM {
+    token?: string;
+    widevine?: Widevine;
+    fairplay?: Fairplay;
+    playready?: Playready;
+}
 interface VideoListItem {
     id: string;
     name?: string;
@@ -356,6 +378,8 @@ interface VideoListItem {
     playlists?: Array<{
         url: string;
         format: string;
+        dvr_settings: DRMSettings;
+        dvr: DRM;
     }>;
     error?: string;
 }
@@ -427,7 +451,7 @@ interface VideoProps extends Omit<PlayerProps, 'src'> {
 }
 declare const Video: React.FC<VideoProps>;
 
-interface EventProps extends Omit<PlayerProps, 'src'> {
+interface EventProps extends Omit<PlayerProps, 'src' | 'drmConfig'> {
     publicKey: string;
     eventId: string;
     hideTitle?: boolean;

package/dist/index.d.ts

@@ -109,9 +109,9 @@ interface IconSizes {
 }
 interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'onError'> {
     /**
-     * The source URL of the video (DASH, HLS, or regular MP4)
+     * The source URL of the video (DASH, HLS, or regular MP4) or playlist object with DRM info
      */
-    src: string;
+    src: string | any;
     /**
      * Whether the video should autoplay
      */
@@ -151,7 +151,7 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      */
     shakaConfig?: any;
     /**
-     * DRM configuration for protected content
+     * DRM configuration for protected content (deprecated - now derived from src playlist)
      */
     drmConfig?: {
         clearKeys?: {
@@ -349,6 +349,28 @@ interface VideoData {
     }>;
     error?: string;
 }
+interface DRMSettings {
+    window_size_seconds: number;
+}
+interface Widevine {
+    playlist_url: string;
+    license_url: string;
+}
+interface Fairplay {
+    certificate_url: string;
+    license_url: string;
+    playlist_url: string;
+}
+interface Playready {
+    playlist_url: string;
+    license_url: string;
+}
+interface DRM {
+    token?: string;
+    widevine?: Widevine;
+    fairplay?: Fairplay;
+    playready?: Playready;
+}
 interface VideoListItem {
     id: string;
     name?: string;
@@ -356,6 +378,8 @@ interface VideoListItem {
     playlists?: Array<{
         url: string;
         format: string;
+        dvr_settings: DRMSettings;
+        dvr: DRM;
     }>;
     error?: string;
 }
@@ -427,7 +451,7 @@ interface VideoProps extends Omit<PlayerProps, 'src'> {
 }
 declare const Video: React.FC<VideoProps>;
 
-interface EventProps extends Omit<PlayerProps, 'src'> {
+interface EventProps extends Omit<PlayerProps, 'src' | 'drmConfig'> {
     publicKey: string;
     eventId: string;
     hideTitle?: boolean;

package/dist/index.js

@@ -1149,7 +1149,7 @@ var import_shaka_player4 = __toESM(require("shaka-player/dist/shaka-player.ui"))
 
 // src/hooks/useShakePlayer.ts
 var import_react = require("react");
-var import_shaka_player = require("shaka-player/dist/shaka-player.ui");
+var import_shaka_player = __toESM(require("shaka-player/dist/shaka-player.ui"));
 var useShakePlayer = ({
   src,
   shakaConfig,
@@ -1160,16 +1160,70 @@ var useShakePlayer = ({
   const playerRef = (0, import_react.useRef)(null);
   const initializePlayer = (0, import_react.useCallback)(async (video) => {
     try {
-      import_shaka_player.polyfill.installAll();
-      if (!import_shaka_player.Player.isBrowserSupported()) {
+      import_shaka_player.default.polyfill.installAll();
+      if (!import_shaka_player.default.Player.isBrowserSupported()) {
         throw new Error("Browser not supported by Shaka Player");
       }
-      const player = new import_shaka_player.Player();
+      const player = new import_shaka_player.default.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 === import_shaka_player.default.net.NetworkingEngine.RequestType.LICENSE) {
+              request.headers["x-dt-custom-data"] = drmData.token;
+            }
+          });
+          netEngine.registerResponseFilter((type, response) => {
+            if (type === import_shaka_player.default.net.NetworkingEngine.RequestType.LICENSE) {
+              const ks = player.keySystem && player.keySystem();
+              if (ks === "com.apple.fps") {
+                const responseText = import_shaka_player.default.util.StringUtils.fromUTF8(response.data);
+                response.data = import_shaka_player.default.util.Uint8ArrayUtils.fromBase64(responseText).buffer;
+              }
+            }
+          });
+        }
+      }
       if (drmConfig) {
         if (drmConfig.clearKeys) {
           player.configure({ "drm.clearKeys": drmConfig.clearKeys });
@@ -1186,7 +1240,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) {
@@ -1336,7 +1390,7 @@ var import_mux_data_shakaplayer = __toESM(require("@mux/mux-data-shakaplayer"));
 var import_shaka_player2 = __toESM(require("shaka-player/dist/shaka-player.ui"));
 
 // package.json
-var version = "1.0.1-rc.23";
+var version = "1.0.1-rc.24";
 
 // src/hooks/useMuxAnalytics.ts
 var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
@@ -4025,6 +4079,14 @@ var import_react15 = require("react");
 var import_tailwind_merge4 = require("tailwind-merge");
 var import_react_query2 = require("@tanstack/react-query");
 var import_jsx_runtime10 = require("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,
@@ -4057,6 +4119,7 @@ var Event = ({
   const [activePlaylist, setActivePlaylist] = (0, import_react15.useState)();
   const [activeVideoId, setActiveVideoId] = (0, import_react15.useState)();
   const videoIds = eventData?.videoIds ?? [];
+  const [isDRM, setIsDRM] = (0, import_react15.useState)(false);
   const {
     data: videosData,
     isLoading: videosIsLoading,
@@ -4083,9 +4146,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;
           }
         }
@@ -4109,6 +4197,11 @@ var Event = ({
       events.onEventData(eventData);
     }
   }, [eventData, events]);
+  (0, import_react15.useEffect)(() => {
+    if (isDRM) {
+      console.log("DRM is enabled");
+    }
+  }, [isDRM]);
   (0, import_react15.useEffect)(() => {
     if (events?.onVideoData && activeVideoId && videosData) {
       const activeVideo = videosData.find((video) => video.id === activeVideoId);