@mottosports/motto-video-player 1.0.1-rc.1 → 1.0.1-rc.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -64
- package/dist/index.d.mts +0 -10
- package/dist/index.d.ts +0 -10
- package/dist/index.js +86 -310
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +81 -303
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,70 +20,6 @@ React video player component for the Motto platform, powered by Shaka Player wit
|
|
|
20
20
|
npm install @motto-ui-components/motto-video-player @tanstack/react-query
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
## Next.js SSR Compatibility
|
|
24
|
-
|
|
25
|
-
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.
|
|
26
|
-
|
|
27
|
-
### Basic Usage in Next.js
|
|
28
|
-
|
|
29
|
-
```tsx
|
|
30
|
-
import { Event } from '@mottosports/motto-video-player';
|
|
31
|
-
|
|
32
|
-
export default function MyPage() {
|
|
33
|
-
return (
|
|
34
|
-
<Event
|
|
35
|
-
publicKey="your-public-key"
|
|
36
|
-
eventId="your-event-id"
|
|
37
|
-
locale="en"
|
|
38
|
-
/>
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
### Dynamic Imports (Optional)
|
|
44
|
-
|
|
45
|
-
For optimal performance and to ensure the component only loads on the client side, you can use Next.js dynamic imports:
|
|
46
|
-
|
|
47
|
-
```tsx
|
|
48
|
-
import dynamic from 'next/dynamic';
|
|
49
|
-
|
|
50
|
-
const Event = dynamic(
|
|
51
|
-
() => import('@mottosports/motto-video-player').then(mod => ({ default: mod.Event })),
|
|
52
|
-
{
|
|
53
|
-
ssr: false,
|
|
54
|
-
loading: () => <div>Loading video player...</div>
|
|
55
|
-
}
|
|
56
|
-
);
|
|
57
|
-
|
|
58
|
-
export default function MyPage() {
|
|
59
|
-
return (
|
|
60
|
-
<Event
|
|
61
|
-
publicKey="your-public-key"
|
|
62
|
-
eventId="your-event-id"
|
|
63
|
-
locale="en"
|
|
64
|
-
/>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
### App Router Usage (Next.js 13+)
|
|
70
|
-
|
|
71
|
-
```tsx
|
|
72
|
-
'use client';
|
|
73
|
-
|
|
74
|
-
import { Event } from '@mottosports/motto-video-player';
|
|
75
|
-
|
|
76
|
-
export default function VideoPlayer() {
|
|
77
|
-
return (
|
|
78
|
-
<Event
|
|
79
|
-
publicKey="your-public-key"
|
|
80
|
-
eventId="your-event-id"
|
|
81
|
-
locale="en"
|
|
82
|
-
/>
|
|
83
|
-
);
|
|
84
|
-
}
|
|
85
|
-
```
|
|
86
|
-
|
|
87
23
|
## Quick Start
|
|
88
24
|
|
|
89
25
|
### Setup QueryClient (Required for Video wrapper)
|
package/dist/index.d.mts
CHANGED
|
@@ -225,17 +225,7 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
|
|
|
225
225
|
* Event callbacks
|
|
226
226
|
*/
|
|
227
227
|
events?: PlayerEvents;
|
|
228
|
-
/**
|
|
229
|
-
* CSS class name for the container element
|
|
230
|
-
*/
|
|
231
228
|
containerClassName?: string;
|
|
232
|
-
/**
|
|
233
|
-
* Optional manual override for stream start time
|
|
234
|
-
* If not provided, the player will attempt to auto-detect the stream start time
|
|
235
|
-
* from the manifest for live streams. When provided, shows elapsed time since
|
|
236
|
-
* stream started instead of the current playback position.
|
|
237
|
-
*/
|
|
238
|
-
streamStartDate?: Date;
|
|
239
229
|
}
|
|
240
230
|
/**
|
|
241
231
|
* Mux Analytics type definitions
|
package/dist/index.d.ts
CHANGED
|
@@ -225,17 +225,7 @@ interface PlayerProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src' | 'on
|
|
|
225
225
|
* Event callbacks
|
|
226
226
|
*/
|
|
227
227
|
events?: PlayerEvents;
|
|
228
|
-
/**
|
|
229
|
-
* CSS class name for the container element
|
|
230
|
-
*/
|
|
231
228
|
containerClassName?: string;
|
|
232
|
-
/**
|
|
233
|
-
* Optional manual override for stream start time
|
|
234
|
-
* If not provided, the player will attempt to auto-detect the stream start time
|
|
235
|
-
* from the manifest for live streams. When provided, shows elapsed time since
|
|
236
|
-
* stream started instead of the current playback position.
|
|
237
|
-
*/
|
|
238
|
-
streamStartDate?: Date;
|
|
239
229
|
}
|
|
240
230
|
/**
|
|
241
231
|
* Mux Analytics type definitions
|