@mottosports/motto-video-player 1.0.1-rc.15 → 1.0.1-rc.17

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
@@ -126,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,6 +94,19 @@ 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)
@@ -221,6 +234,10 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      * Seekbar color configuration
      */
     seekbarConfig?: SeekbarConfig;
+    /**
+     * Icon size configuration
+     */
+    iconSizes?: IconSizes;
     /**
      * Event callbacks
      */
@@ -486,4 +503,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 VideoListItem, type VideoProps, queryClient };

package/dist/index.d.ts

@@ -94,6 +94,19 @@ 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)
@@ -221,6 +234,10 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      * Seekbar color configuration
      */
     seekbarConfig?: SeekbarConfig;
+    /**
+     * Icon size configuration
+     */
+    iconSizes?: IconSizes;
     /**
      * Event callbacks
      */
@@ -486,4 +503,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 VideoListItem, type VideoProps, queryClient };