@mottosports/motto-video-player 1.0.1-rc.2 → 1.0.1-rc.21

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,108 +21,6 @@ React video player component for the Motto platform, powered by Shaka Player wit
 npm install @motto-ui-components/motto-video-player @tanstack/react-query
 ```
 
-## Next.js SSR Compatibility
-
-This component is now fully compatible with Next.js Server-Side Rendering (SSR). The component automatically detects when it's running in a server environment and gracefully handles browser-only APIs.
-
-### Basic Usage in Next.js
-
-For SSR compatibility, use the `ClientSideEvent` component which only renders on the client side:
-
-```tsx
-import { ClientSideEvent } from '@mottosports/motto-video-player';
-
-export default function MyPage() {
-  return (
-    <ClientSideEvent
-      publicKey="your-public-key"
-      eventId="your-event-id"
-      locale="en"
-    />
-  );
-}
-```
-
-Alternatively, if you prefer to use the regular `Event` component, wrap it with SSR checks:
-
-```tsx
-import { Event } from '@mottosports/motto-video-player';
-
-export default function MyPage() {
-  return (
-    <Event
-      publicKey="your-public-key"
-      eventId="your-event-id"
-      locale="en"
-    />
-  );
-}
-```
-
-### Dynamic Imports (Alternative Approach)
-
-You can also use Next.js dynamic imports with the regular Event component:
-
-```tsx
-import dynamic from 'next/dynamic';
-
-const Event = dynamic(
-  () => import('@mottosports/motto-video-player').then(mod => ({ default: mod.Event })),
-  { 
-    ssr: false,
-    loading: () => <div>Loading video player...</div>
-  }
-);
-
-export default function MyPage() {
-  return (
-    <Event
-      publicKey="your-public-key"
-      eventId="your-event-id"
-      locale="en"
-    />
-  );
-}
-```
-
-**Recommended Approach**: Use `ClientSideEvent` for simpler SSR handling without dynamic imports.
-
-### App Router Usage (Next.js 13+)
-
-With App Router, you can use `ClientSideEvent` directly without 'use client' directive:
-
-```tsx
-import { ClientSideEvent } from '@mottosports/motto-video-player';
-
-export default function VideoPlayer() {
-  return (
-    <ClientSideEvent
-      publicKey="your-public-key"
-      eventId="your-event-id"
-      locale="en"
-    />
-  );
-}
-```
-
-Or use the regular Event component with 'use client':
-
-```tsx
-'use client';
-
-import { Event } from '@mottosports/motto-video-player';
-
-export default function VideoPlayer() {
-  return (
-    <Event
-      publicKey="your-public-key"
-      eventId="your-event-id"
-      locale="en"
-    />
-  );
-}
-```
-
 ## Quick Start
 
 ### Setup QueryClient (Required for Video wrapper)
@@ -228,6 +127,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

@@ -94,11 +94,28 @@ 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)
      */
     src: string;
+    /**
+     * The name of the player (used for Mux analytics. For example, 'Web' or 'Mobile App')
+     */
+    playerName?: string;
     /**
      * Whether the video should autoplay
      */
@@ -222,20 +239,14 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      */
     seekbarConfig?: SeekbarConfig;
     /**
-     * Event callbacks
+     * Icon size configuration
      */
-    events?: PlayerEvents;
+    iconSizes?: IconSizes;
     /**
-     * CSS class name for the container element
+     * Event callbacks
      */
+    events?: PlayerEvents;
     containerClassName?: string;
-    /**
-     * Optional manual override for stream start time
-     * If not provided, the player will attempt to auto-detect the stream start time
-     * from the manifest for live streams. When provided, shows elapsed time since
-     * stream started instead of the current playback position.
-     */
-    streamStartDate?: Date;
 }
 /**
  * Mux Analytics type definitions
@@ -452,13 +463,6 @@ interface EventProps extends Omit<PlayerProps, 'src'> {
 }
 declare const Event: React.FC<EventProps>;
 
-/**
- * Client-side wrapper for the Event component that prevents SSR issues.
- * This component only renders the Event component after the client has mounted,
- * preventing any browser API calls during server-side rendering.
- */
-declare const ClientSideEvent: React.FC<EventProps>;
-
 interface CreativeWorkProps extends Omit<PlayerProps, 'src'> {
     publicKey: string;
     creativeWorkId: string;
@@ -503,4 +507,22 @@ interface QueryProviderProps {
 }
 declare const QueryProvider: React.FC<QueryProviderProps>;
 
-export { ClientSideEvent, 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 VideoListItem, type VideoProps, queryClient };

package/dist/index.d.ts

@@ -94,11 +94,28 @@ 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)
      */
     src: string;
+    /**
+     * The name of the player (used for Mux analytics. For example, 'Web' or 'Mobile App')
+     */
+    playerName?: string;
     /**
      * Whether the video should autoplay
      */
@@ -222,20 +239,14 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      */
     seekbarConfig?: SeekbarConfig;
     /**
-     * Event callbacks
+     * Icon size configuration
      */
-    events?: PlayerEvents;
+    iconSizes?: IconSizes;
     /**
-     * CSS class name for the container element
+     * Event callbacks
      */
+    events?: PlayerEvents;
     containerClassName?: string;
-    /**
-     * Optional manual override for stream start time
-     * If not provided, the player will attempt to auto-detect the stream start time
-     * from the manifest for live streams. When provided, shows elapsed time since
-     * stream started instead of the current playback position.
-     */
-    streamStartDate?: Date;
 }
 /**
  * Mux Analytics type definitions
@@ -452,13 +463,6 @@ interface EventProps extends Omit<PlayerProps, 'src'> {
 }
 declare const Event: React.FC<EventProps>;
 
-/**
- * Client-side wrapper for the Event component that prevents SSR issues.
- * This component only renders the Event component after the client has mounted,
- * preventing any browser API calls during server-side rendering.
- */
-declare const ClientSideEvent: React.FC<EventProps>;
-
 interface CreativeWorkProps extends Omit<PlayerProps, 'src'> {
     publicKey: string;
     creativeWorkId: string;
@@ -503,4 +507,22 @@ interface QueryProviderProps {
 }
 declare const QueryProvider: React.FC<QueryProviderProps>;
 
-export { ClientSideEvent, 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 VideoListItem, type VideoProps, queryClient };