@mottosports/motto-video-player 1.0.1-rc.25 → 1.0.1-rc.27

package/dist/index.d.mts

@@ -1,6 +1,72 @@
 import React, { HTMLAttributes } from 'react';
 import { QueryClient } from '@tanstack/react-query';
 
+interface VideoData {
+    id: string;
+    name?: string;
+    description?: string;
+    playlists?: Playlist[];
+    error?: string;
+}
+interface DVRSettings {
+    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 Playlist {
+    url: string;
+    format: string;
+    dvr_settings?: DVRSettings;
+    drm: DRM;
+}
+
+interface EventData {
+    id: string;
+    title: string;
+    description?: string;
+    startTime: string;
+    endTime?: string;
+    posterUrl?: string;
+    videoIds?: string[];
+    error?: string;
+}
+declare enum EventsSortDirection {
+    ASC = "asc",
+    DESC = "desc"
+}
+
+interface CreativeWorkData {
+    id: string;
+    title: string;
+    description?: string;
+    releaseTime: string;
+    endTime?: string;
+    posterUrl?: string;
+    videoIds?: string[];
+    error?: string;
+}
+declare enum CreativeWorksSortDirection {
+    ASC = "asc",
+    DESC = "desc"
+}
+
 /**
  * Unified events interface for both Player and Video wrapper
  */
@@ -111,7 +177,7 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
     /**
      * The source URL of the video (DASH, HLS, or regular MP4) or playlist object with DRM info
      */
-    src: string | any;
+    src: Playlist;
     /**
      * Whether the video should autoplay
      */
@@ -339,81 +405,6 @@ interface MuxAnalyticsConfig {
 
 declare const Player: React.ForwardRefExoticComponent<PlayerProps & React.RefAttributes<HTMLVideoElement>>;
 
-interface VideoData {
-    id: string;
-    name?: string;
-    description?: string;
-    playlists?: Array<{
-        url: string;
-        format: string;
-    }>;
-    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;
-    description?: string;
-    playlists?: Array<{
-        url: string;
-        format: string;
-        drm_settings: DRMSettings;
-        drm: DRM;
-    }>;
-    error?: string;
-}
-
-interface EventData {
-    id: string;
-    title: string;
-    description?: string;
-    startTime: string;
-    endTime?: string;
-    posterUrl?: string;
-    videoIds?: string[];
-    error?: string;
-}
-declare enum EventsSortDirection {
-    ASC = "asc",
-    DESC = "desc"
-}
-
-interface CreativeWorkData {
-    id: string;
-    title: string;
-    description?: string;
-    releaseTime: string;
-    endTime?: string;
-    posterUrl?: string;
-    videoIds?: string[];
-    error?: string;
-}
-declare enum CreativeWorksSortDirection {
-    ASC = "asc",
-    DESC = "desc"
-}
-
 interface VideoProps extends Omit<PlayerProps, 'src'> {
     videoId?: string;
     publicKey?: string;
@@ -460,7 +451,7 @@ interface EventProps extends Omit<PlayerProps, 'src' | 'drmConfig'> {
     order?: EventsSortDirection;
     events?: {
         onEventData?: (event: EventData) => void;
-        onVideoData?: (video: VideoListItem) => void;
+        onVideoData?: (video: VideoData) => void;
         onEmptyPlaylists?: () => void;
         onError?: (error: Error) => void;
         onPlay?: () => void;
@@ -498,7 +489,7 @@ interface CreativeWorkProps extends Omit<PlayerProps, 'src'> {
     order?: CreativeWorksSortDirection;
     events?: {
         onCreativeWorkData?: (creativeWork: CreativeWorkData) => void;
-        onVideoData?: (video: VideoListItem) => void;
+        onVideoData?: (video: VideoData) => void;
         onEmptyPlaylists?: () => void;
         onError?: (error: Error) => void;
         onPlay?: () => void;
@@ -551,4 +542,4 @@ interface BigPlayIconProps {
 }
 declare const BigPlayIcon: React.FC<BigPlayIconProps>;
 
-export { BigPlayIcon, CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, type IconSizes, Player, type PlayerEvents, type PlayerProps, QueryProvider, SkipBackIcon, SkipForwardIcon, Video, type VideoData, type VideoListItem, type VideoProps, queryClient };
+export { BigPlayIcon, CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, type IconSizes, Player, type PlayerEvents, type PlayerProps, QueryProvider, SkipBackIcon, SkipForwardIcon, Video, type VideoData, type VideoProps, queryClient };

package/dist/index.d.ts

@@ -1,6 +1,72 @@
 import React, { HTMLAttributes } from 'react';
 import { QueryClient } from '@tanstack/react-query';
 
+interface VideoData {
+    id: string;
+    name?: string;
+    description?: string;
+    playlists?: Playlist[];
+    error?: string;
+}
+interface DVRSettings {
+    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 Playlist {
+    url: string;
+    format: string;
+    dvr_settings?: DVRSettings;
+    drm: DRM;
+}
+
+interface EventData {
+    id: string;
+    title: string;
+    description?: string;
+    startTime: string;
+    endTime?: string;
+    posterUrl?: string;
+    videoIds?: string[];
+    error?: string;
+}
+declare enum EventsSortDirection {
+    ASC = "asc",
+    DESC = "desc"
+}
+
+interface CreativeWorkData {
+    id: string;
+    title: string;
+    description?: string;
+    releaseTime: string;
+    endTime?: string;
+    posterUrl?: string;
+    videoIds?: string[];
+    error?: string;
+}
+declare enum CreativeWorksSortDirection {
+    ASC = "asc",
+    DESC = "desc"
+}
+
 /**
  * Unified events interface for both Player and Video wrapper
  */
@@ -111,7 +177,7 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
     /**
      * The source URL of the video (DASH, HLS, or regular MP4) or playlist object with DRM info
      */
-    src: string | any;
+    src: Playlist;
     /**
      * Whether the video should autoplay
      */
@@ -339,81 +405,6 @@ interface MuxAnalyticsConfig {
 
 declare const Player: React.ForwardRefExoticComponent<PlayerProps & React.RefAttributes<HTMLVideoElement>>;
 
-interface VideoData {
-    id: string;
-    name?: string;
-    description?: string;
-    playlists?: Array<{
-        url: string;
-        format: string;
-    }>;
-    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;
-    description?: string;
-    playlists?: Array<{
-        url: string;
-        format: string;
-        drm_settings: DRMSettings;
-        drm: DRM;
-    }>;
-    error?: string;
-}
-
-interface EventData {
-    id: string;
-    title: string;
-    description?: string;
-    startTime: string;
-    endTime?: string;
-    posterUrl?: string;
-    videoIds?: string[];
-    error?: string;
-}
-declare enum EventsSortDirection {
-    ASC = "asc",
-    DESC = "desc"
-}
-
-interface CreativeWorkData {
-    id: string;
-    title: string;
-    description?: string;
-    releaseTime: string;
-    endTime?: string;
-    posterUrl?: string;
-    videoIds?: string[];
-    error?: string;
-}
-declare enum CreativeWorksSortDirection {
-    ASC = "asc",
-    DESC = "desc"
-}
-
 interface VideoProps extends Omit<PlayerProps, 'src'> {
     videoId?: string;
     publicKey?: string;
@@ -460,7 +451,7 @@ interface EventProps extends Omit<PlayerProps, 'src' | 'drmConfig'> {
     order?: EventsSortDirection;
     events?: {
         onEventData?: (event: EventData) => void;
-        onVideoData?: (video: VideoListItem) => void;
+        onVideoData?: (video: VideoData) => void;
         onEmptyPlaylists?: () => void;
         onError?: (error: Error) => void;
         onPlay?: () => void;
@@ -498,7 +489,7 @@ interface CreativeWorkProps extends Omit<PlayerProps, 'src'> {
     order?: CreativeWorksSortDirection;
     events?: {
         onCreativeWorkData?: (creativeWork: CreativeWorkData) => void;
-        onVideoData?: (video: VideoListItem) => void;
+        onVideoData?: (video: VideoData) => void;
         onEmptyPlaylists?: () => void;
         onError?: (error: Error) => void;
         onPlay?: () => void;
@@ -551,4 +542,4 @@ interface BigPlayIconProps {
 }
 declare const BigPlayIcon: React.FC<BigPlayIconProps>;
 
-export { BigPlayIcon, CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, type IconSizes, Player, type PlayerEvents, type PlayerProps, QueryProvider, SkipBackIcon, SkipForwardIcon, Video, type VideoData, type VideoListItem, type VideoProps, queryClient };
+export { BigPlayIcon, CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, type IconSizes, Player, type PlayerEvents, type PlayerProps, QueryProvider, SkipBackIcon, SkipForwardIcon, Video, type VideoData, type VideoProps, queryClient };

package/dist/index.js

@@ -1150,6 +1150,32 @@ 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 = __toESM(require("shaka-player/dist/shaka-player.ui"));
+
+// src/utils/devices.ts
+var isAppleDevice = () => {
+  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;
+};
+var isPlayReadySupported = () => {
+  if (typeof navigator === "undefined" || typeof window === "undefined") {
+    return false;
+  }
+  if (!navigator.requestMediaKeySystemAccess) {
+    return false;
+  }
+  const userAgent = navigator.userAgent || "";
+  const isWindows = /Windows/.test(userAgent);
+  const isXbox = /Xbox/.test(userAgent);
+  const isEdge = /Edg/.test(userAgent);
+  const isIE = /Trident|MSIE/.test(userAgent);
+  return isWindows || isXbox || isEdge || isIE;
+};
+
+// src/hooks/useShakePlayer.ts
 var useShakePlayer = ({
   src,
   shakaConfig,
@@ -1170,69 +1196,7 @@ var useShakePlayer = ({
       if (shakaConfig) {
         player.configure(shakaConfig);
       }
-      const isPlaylistObject = typeof src === "object" && src !== null && src.drm;
-      const manifestUrl = isPlaylistObject ? src.url : src;
-      const drmData = isPlaylistObject ? src.drm : 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 });
-        }
-        if (drmConfig.servers) {
-          player.configure({ "drm.servers": drmConfig.servers });
-        }
-      }
-      player.addEventListener("error", (event) => {
+      player?.addEventListener("error", (event) => {
         const error = event.detail;
         if (error?.code === 7e3) {
           return;
@@ -1240,7 +1204,6 @@ var useShakePlayer = ({
         console.error("Shaka Player Error:", error);
         onError?.(new Error(`Shaka Player Error: ${error.message || "Unknown error"}`));
       });
-      await player.load(manifestUrl);
       onPlayerReady?.(player);
       return player;
     } catch (error) {
@@ -1252,6 +1215,60 @@ var useShakePlayer = ({
       throw error;
     }
   }, [shakaConfig, drmConfig, src, onError, onPlayerReady]);
+  const loadSource = (0, import_react.useCallback)(async () => {
+    const player = playerRef.current;
+    if (!player) return;
+    let manifestUrl = src.url;
+    const isDRM = Boolean(src.drm);
+    let cert = null;
+    if (isDRM) {
+      const isPlayReady = isPlayReadySupported();
+      const isFairPlay = isAppleDevice();
+      if (isFairPlay && src.drm.fairplay?.certificate_url) {
+        const req = await fetch(src.drm.fairplay.certificate_url);
+        cert = await req.arrayBuffer();
+        manifestUrl = src.drm.fairplay.playlist_url;
+      } else if (isPlayReady && src.drm.playready?.license_url) {
+        manifestUrl = src.drm.playready.playlist_url;
+      } else {
+        manifestUrl = src.drm?.widevine?.playlist_url || "";
+      }
+      player.configure({
+        drm: {
+          servers: {
+            "com.widevine.alpha": src.drm.widevine?.license_url,
+            "com.microsoft.playready": src.drm.playready?.license_url,
+            "com.apple.fps": src.drm.fairplay?.license_url
+          },
+          ...cert && {
+            advanced: {
+              "com.apple.fps": {
+                serverCertificate: new Uint8Array(cert)
+              }
+            }
+          }
+        }
+      });
+      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"] = src.drm.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;
+            }
+          }
+        });
+      }
+    }
+    await player.load(manifestUrl);
+  }, [src]);
   const destroyPlayer = (0, import_react.useCallback)(async () => {
     if (playerRef.current) {
       try {
@@ -1266,6 +1283,7 @@ var useShakePlayer = ({
   return {
     playerRef,
     initializePlayer,
+    loadSource,
     destroyPlayer
   };
 };
@@ -1390,7 +1408,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.25";
+var version = "1.0.1-rc.27";
 
 // src/hooks/useMuxAnalytics.ts
 var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
@@ -3295,7 +3313,7 @@ var Player = (0, import_react12.forwardRef)(
     const containerRef = (0, import_react12.useRef)(null);
     const adContainerRef = (0, import_react12.useRef)(null);
     (0, import_react12.useImperativeHandle)(ref, () => videoRef.current, []);
-    const { playerRef, initializePlayer, destroyPlayer } = useShakePlayer({
+    const { playerRef, initializePlayer, loadSource, destroyPlayer } = useShakePlayer({
       src,
       shakaConfig,
       drmConfig,
@@ -3403,11 +3421,12 @@ var Player = (0, import_react12.forwardRef)(
       const initialize = async () => {
         try {
           await initializePlayer(video);
+          initializeMux();
+          await loadSource();
           setupEventListeners();
           const cleanupQuality = setupQualityTracking();
           configureQuality();
           await initializeUI();
-          initializeMux();
           initializeAds();
           initializeChromecast();
         } catch (error) {
@@ -4065,7 +4084,7 @@ var Video = ({
     Player,
     {
       ...props,
-      src: hlsUrl,
+      src: activePlaylist,
       className: (0, import_tailwind_merge3.twMerge)("video-player-container", className),
       events,
       containerClassName: "w-full h-full",
@@ -4079,14 +4098,6 @@ 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,
@@ -4119,7 +4130,6 @@ 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,
@@ -4146,34 +4156,9 @@ var Event = ({
         for (const video of videosWithPlaylists) {
           const hlsPlaylist = findHLSPlaylist(video);
           if (hlsPlaylist?.url) {
-            const matchedPlaylist = video.playlists?.find((p) => p.url === hlsPlaylist.url);
-            const drm = matchedPlaylist?.drm;
-            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",
-                  drm
-                };
-              } else if (drm?.widevine?.playlist_url && drm?.widevine?.license_url) {
-                selectedPlaylist = {
-                  url: drm.widevine.playlist_url,
-                  format: matchedPlaylist?.format || "HLS",
-                  drm
-                };
-              } else {
-                selectedPlaylist = matchedPlaylist;
-              }
-            } else {
-              selectedPlaylist = hlsPlaylist.url;
-            }
-            setActivePlaylist(selectedPlaylist);
+            setActivePlaylist(hlsPlaylist);
             setActiveVideoId(video.id);
             hlsPlaylistFound = true;
-            setIsDRM(Boolean(hasDrm));
             break;
           }
         }
@@ -4197,11 +4182,6 @@ 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);
@@ -4518,7 +4498,7 @@ var CreativeWork = ({
         for (const video of videosWithPlaylists) {
           const hlsPlaylist = findHLSPlaylist(video);
           if (hlsPlaylist?.url) {
-            setActivePlaylist(hlsPlaylist.url);
+            setActivePlaylist(hlsPlaylist);
             setActiveVideoId(video.id);
             hlsPlaylistFound = true;
             break;