@mottosports/motto-video-player 1.0.1-rc.8 → 1.0.1-rc.80

package/README.md

@@ -8,6 +8,7 @@ React video player component for the Motto platform, powered by Shaka Player wit
 - 🔄 **TanStack Query Integration**: Advanced caching, background refetching, and error handling
 - 📱 **Responsive Design**: Automatic aspect ratio handling and mobile-friendly controls
 - 🎮 **Skip Controls**: Built-in skip back/forward buttons with customizable durations
+- ⌨️ **Keyboard Controls**: Desktop keyboard shortcuts (arrows for skip, spacebar for play/pause)
 - 🎯 **Quality Control**: Automatic quality selection and manual quality switching
 - 📊 **Analytics**: Built-in Mux analytics support
 - 🖥️ **Chromecast Support**: Cast videos to compatible devices
@@ -20,6 +21,34 @@ React video player component for the Motto platform, powered by Shaka Player wit
 npm install @motto-ui-components/motto-video-player @tanstack/react-query
 ```
 
+### Tailwind CSS Setup (Required)
+
+This package uses Tailwind CSS utility classes. You must have Tailwind CSS configured in your project:
+
+1. **Install Tailwind CSS** (if not already installed):
+```bash
+npm install -D tailwindcss
+```
+
+2. **Configure Tailwind to scan the package files**. Add this to your `tailwind.config.js`:
+```js
+module.exports = {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    // Add this line to scan the motto-video-player package
+    './node_modules/@mottosports/motto-video-player/dist/**/*.{js,mjs}'
+  ],
+  // ... rest of your config
+}
+```
+
+3. **Import Tailwind in your CSS**:
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
 ## Quick Start
 
 ### Setup QueryClient (Required for Video wrapper)
@@ -126,6 +155,16 @@ function MyPlayer() {
 />
 ```
 
+### Keyboard Controls
+
+Desktop users can control the player using keyboard shortcuts:
+
+- **←** Left Arrow: Skip back 15 seconds
+- **→** Right Arrow: Skip forward 15 seconds  
+- **Space**: Play/Pause toggle
+
+Keyboard controls are automatically enabled on desktop devices (disabled on mobile) and work when the player is focused or when no input fields are active.
+
 ### Responsive Sizing
 
 ```jsx

package/dist/index.d.mts

@@ -1,6 +1,77 @@
 import React, { HTMLAttributes } from 'react';
 import { QueryClient } from '@tanstack/react-query';
 
+interface VideoData {
+    id: string;
+    name?: string;
+    description?: string;
+    playlists?: Playlist[];
+    error?: string;
+    ad?: {
+        adTagUrl?: string;
+    };
+}
+interface DVRSettings {
+    window_size_seconds: number;
+}
+interface Widevine {
+    playlistUrl: string;
+    licenseUrl: string;
+}
+interface Fairplay {
+    certificateUrl: string;
+    licenseUrl: string;
+    playlistUrl: string;
+}
+interface Playready {
+    playlistUrl: string;
+    licenseUrl: string;
+}
+interface DRM {
+    token?: string;
+    licenseCacheKey?: string;
+    widevine?: Widevine;
+    fairplay?: Fairplay;
+    playready?: Playready;
+}
+interface Playlist {
+    id: string;
+    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
  */
@@ -52,6 +123,26 @@ interface PlayerEvents {
      * Callback when ad error occurs
      */
     onAdError?: (error: any) => void;
+    /**
+     * Callback when ad is skipped
+     */
+    onAdSkipped?: () => void;
+    /**
+     * Callback when ad is paused
+     */
+    onAdPaused?: () => void;
+    /**
+     * Callback when ad is resumed
+     */
+    onAdResumed?: () => void;
+    /**
+     * Callback when ad progress updates
+     */
+    onAdProgress?: (adProgressData: any) => void;
+    /**
+     * Callback when all ads are completed
+     */
+    onAllAdsCompleted?: () => void;
     /**
      * Callback when Chromecast state changes
      */
@@ -76,6 +167,14 @@ interface PlayerEvents {
      * Callback when live state changes
      */
     onLiveStateChange?: (isLive: boolean) => void;
+    /**
+     * Callback when live status changes (includes edge proximity)
+     */
+    onLiveStatusChange?: (status: {
+        isLive: boolean;
+        isNearEdge: boolean;
+        liveEdge?: number;
+    }) => void;
 }
 /**
  * Seekbar color configuration
@@ -94,11 +193,30 @@ interface SeekbarConfig {
      */
     played?: string;
 }
+/**
+ * Icon size configuration
+ */
+interface IconSizes {
+    /**
+     * Size for skip back/forward buttons (in pixels)
+     */
+    skipButtons?: number;
+    /**
+     * Size for the big play button (in pixels)
+     */
+    bigPlayButton?: number;
+}
 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.
+     * Can be a plain URL string or a Playlist object.
      */
-    src: string;
+    src: Playlist | string;
+    /**
+     * When true, player only reinitializes based on playlist presence rather than src changes.
+     * Used internally by Event, CreativeWork, and Video wrappers to optimize reinitialization.
+     */
+    managedMode?: boolean;
     /**
      * Whether the video should autoplay
      */
@@ -138,7 +256,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?: {
@@ -152,6 +270,10 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      * Mux Analytics configuration
      */
     muxConfig?: MuxAnalyticsConfig;
+    /**
+     * System73 SDK configuration
+     */
+    system73Config?: System73Config;
     /**
      * IMA (Interactive Media Ads) configuration
      */
@@ -180,21 +302,15 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
         nonLinearAdSlotHeight?: number;
     };
     /**
-     * Chromecast configuration
+     * Chromecast configuration (optional)
+     * Chromecast is always enabled by default. This config allows customization.
      */
     chromecastConfig?: {
-        /**
-         * Whether to enable Chromecast support
-         */
-        enabled?: boolean;
         /**
          * Custom receiver application ID
+         * Defaults to 'CC1AD845' (Google's default media receiver)
          */
         receiverApplicationId?: string;
-        /**
-         * Whether to auto-join cast sessions
-         */
-        autoJoinPolicy?: string;
     };
     /**
      * Quality selection configuration
@@ -221,11 +337,36 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      * Seekbar color configuration
      */
     seekbarConfig?: SeekbarConfig;
+    /**
+     * Icon size configuration
+     */
+    iconSizes?: IconSizes;
     /**
      * Event callbacks
      */
     events?: PlayerEvents;
+    /**
+     * Locale for Shaka Player UI localization (e.g., 'en', 'ar', 'es')
+     * Defaults to 'en' if not provided
+     */
+    locale?: string;
     containerClassName?: string;
+    /**
+     * Threshold in seconds to consider "near live edge" for live streams (default: 15)
+     */
+    liveThresholdSeconds?: number;
+    /**
+     * Motto public key used for authenticated requests
+     */
+    publicKey?: string;
+    /**
+     * Authentication context for player operations
+     */
+    auth?: {
+        mottoToken?: string;
+        userId?: string;
+        apiToken?: string;
+    };
 }
 /**
  * Mux Analytics type definitions
@@ -319,64 +460,51 @@ interface MuxAnalyticsConfig {
      */
     metadata?: MuxMetadata;
 }
-
-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 VideoListItem {
-    id: string;
-    name?: string;
-    description?: string;
-    playlists?: Array<{
-        url: string;
-        format: string;
-    }>;
-    error?: string;
-}
-
-interface EventData {
-    id: string;
-    title: string;
-    description?: string;
-    startTime: string;
-    endTime?: string;
-    posterUrl?: string;
-    videoIds?: string[];
-    error?: string;
+/**
+ * System73 SDK configuration
+ */
+interface System73Config {
+    /**
+     * System73 API key (required for authentication)
+     */
+    apiKey: string;
+    /**
+     * Content steering endpoint URI (optional)
+     */
+    contentSteeringEndpoint?: string;
+    /**
+     * Channel identifier (optional)
+     */
+    channelId?: string;
 }
-declare enum EventsSortDirection {
-    ASC = "asc",
-    DESC = "desc"
+/**
+ * System73 SDK wrapper interface
+ */
+declare global {
+    interface Window {
+        S73ShakaPlayerWrapper?: (config: System73Config, shakaInstance: {
+            shaka: any;
+        }) => {
+            wrapPlayerConfig: (config: any) => void;
+            wrapPlayer: (player: any) => void;
+        };
+    }
 }
 
-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"
+declare global {
+    namespace google {
+        namespace ima {
+            class AdsRequest {
+                adTagUrl: string;
+            }
+        }
+    }
 }
+declare const Player: React.ForwardRefExoticComponent<PlayerProps & React.RefAttributes<HTMLVideoElement>>;
 
 interface VideoProps extends Omit<PlayerProps, 'src'> {
     videoId?: string;
     publicKey?: string;
-    mottoToken?: string;
     videoData?: VideoData;
     refetchInterval?: number;
     playerName?: string;
@@ -391,9 +519,24 @@ interface VideoProps extends Omit<PlayerProps, 'src'> {
         onLoadStart?: () => void;
         onCanPlay?: () => void;
         onPlayerReady?: () => void;
+        onAdStart?: () => void;
+        onAdComplete?: () => void;
+        onAdError?: (error: any) => void;
+        onAdSkipped?: () => void;
+        onAdPaused?: () => void;
+        onAdResumed?: () => void;
+        onAdProgress?: (adProgressData: any) => void;
+        onAllAdsCompleted?: () => void;
     };
     children?: React.ReactNode;
     className?: string;
+    auth?: {
+        mottoToken?: string;
+        userId?: string;
+    };
+    settings?: {
+        backgroundImageUrl?: string;
+    };
     queryOptions?: {
         enabled?: boolean;
         staleTime?: number;
@@ -401,10 +544,11 @@ interface VideoProps extends Omit<PlayerProps, 'src'> {
         retry?: number;
         retryDelay?: number;
     };
+    adsEnabled?: boolean;
 }
 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;
@@ -413,7 +557,7 @@ interface EventProps extends Omit<PlayerProps, 'src'> {
     order?: EventsSortDirection;
     events?: {
         onEventData?: (event: EventData) => void;
-        onVideoData?: (video: VideoListItem) => void;
+        onVideoData?: (video: VideoData) => void;
         onEmptyPlaylists?: () => void;
         onError?: (error: Error) => void;
         onPlay?: () => void;
@@ -422,6 +566,14 @@ interface EventProps extends Omit<PlayerProps, 'src'> {
         onLoadStart?: () => void;
         onCanPlay?: () => void;
         onPlayerReady?: () => void;
+        onAdStart?: () => void;
+        onAdComplete?: () => void;
+        onAdError?: (error: any) => void;
+        onAdSkipped?: () => void;
+        onAdPaused?: () => void;
+        onAdResumed?: () => void;
+        onAdProgress?: (adProgressData: any) => void;
+        onAllAdsCompleted?: () => void;
     };
     className?: string;
     settings?: {
@@ -439,6 +591,7 @@ interface EventProps extends Omit<PlayerProps, 'src'> {
         retry?: number;
         retryDelay?: number;
     };
+    adsEnabled?: boolean;
 }
 declare const Event: React.FC<EventProps>;
 
@@ -451,7 +604,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;
@@ -460,6 +613,14 @@ interface CreativeWorkProps extends Omit<PlayerProps, 'src'> {
         onLoadStart?: () => void;
         onCanPlay?: () => void;
         onPlayerReady?: () => void;
+        onAdStart?: () => void;
+        onAdComplete?: () => void;
+        onAdError?: (error: any) => void;
+        onAdSkipped?: () => void;
+        onAdPaused?: () => void;
+        onAdResumed?: () => void;
+        onAdProgress?: (adProgressData: any) => void;
+        onAllAdsCompleted?: () => void;
     };
     className?: string;
     settings?: {
@@ -477,6 +638,7 @@ interface CreativeWorkProps extends Omit<PlayerProps, 'src'> {
         retry?: number;
         retryDelay?: number;
     };
+    adsEnabled?: boolean;
 }
 declare const CreativeWork: React.FC<CreativeWorkProps>;
 
@@ -486,4 +648,22 @@ interface QueryProviderProps {
 }
 declare const QueryProvider: React.FC<QueryProviderProps>;
 
-export { CreativeWork, type CreativeWorkData, type CreativeWorkProps, CreativeWorksSortDirection, Event, type EventData, type EventProps, EventsSortDirection, Player, type PlayerEvents, type PlayerProps, QueryProvider, Video, type VideoData, type VideoListItem, type VideoProps, queryClient };
+interface SkipBackIconProps {
+    size?: number;
+    className?: string;
+}
+declare const SkipBackIcon: React.FC<SkipBackIconProps>;
+
+interface SkipForwardIconProps {
+    size?: number;
+    className?: string;
+}
+declare const SkipForwardIcon: React.FC<SkipForwardIconProps>;
+
+interface BigPlayIconProps {
+    size?: number;
+    className?: string;
+}
+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 VideoProps, queryClient };