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

package/README.md

@@ -20,6 +20,108 @@ 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)

package/dist/index.d.mts

@@ -225,7 +225,17 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      * Event callbacks
      */
     events?: PlayerEvents;
+    /**
+     * CSS class name for the container element
+     */
     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
@@ -442,6 +452,13 @@ 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;
@@ -486,4 +503,4 @@ 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 };
+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 };

package/dist/index.d.ts

@@ -225,7 +225,17 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
      * Event callbacks
      */
     events?: PlayerEvents;
+    /**
+     * CSS class name for the container element
+     */
     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
@@ -442,6 +452,13 @@ 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;
@@ -486,4 +503,4 @@ 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 };
+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 };