@guardvideo/player-sdk 1.0.0
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 +458 -0
- package/dist/core/player.d.ts +33 -0
- package/dist/core/player.d.ts.map +1 -0
- package/dist/core/types.d.ts +67 -0
- package/dist/core/types.d.ts.map +1 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.esm.js +477 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +481 -0
- package/dist/index.js.map +1 -0
- package/dist/react/GuardVideoPlayer.d.ts +18 -0
- package/dist/react/GuardVideoPlayer.d.ts.map +1 -0
- package/dist/react/hooks.d.ts +25 -0
- package/dist/react/hooks.d.ts.map +1 -0
- package/dist/vanilla/core/player.d.ts +33 -0
- package/dist/vanilla/core/player.d.ts.map +1 -0
- package/dist/vanilla/core/types.d.ts +67 -0
- package/dist/vanilla/core/types.d.ts.map +1 -0
- package/dist/vanilla/guardvideo-player.js +36931 -0
- package/dist/vanilla/guardvideo-player.js.map +1 -0
- package/dist/vanilla/guardvideo-player.min.js +36931 -0
- package/dist/vanilla/guardvideo-player.min.js.map +1 -0
- package/dist/vanilla/index.d.ts +7 -0
- package/dist/vanilla/index.d.ts.map +1 -0
- package/dist/vanilla/react/GuardVideoPlayer.d.ts +18 -0
- package/dist/vanilla/react/GuardVideoPlayer.d.ts.map +1 -0
- package/dist/vanilla/react/hooks.d.ts +25 -0
- package/dist/vanilla/react/hooks.d.ts.map +1 -0
- package/dist/vanilla/vanilla/index.d.ts +9 -0
- package/dist/vanilla/vanilla/index.d.ts.map +1 -0
- package/package.json +60 -0
package/README.md
ADDED
|
@@ -0,0 +1,458 @@
|
|
|
1
|
+
# GuardVideo Player SDK
|
|
2
|
+
|
|
3
|
+
🎬 **Secure HLS video player with embed token authentication for React, Next.js, and vanilla JavaScript**
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@guardvideo/player-sdk)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
✅ **Adaptive Bitrate Streaming** - Automatic quality switching based on network conditions
|
|
11
|
+
✅ **Secure Token Authentication** - API key never exposed to browser
|
|
12
|
+
✅ **Multi-Quality Support** - 1080p, 720p, 480p, 360p
|
|
13
|
+
✅ **AES-128 Encryption** - Secure video segment delivery
|
|
14
|
+
✅ **React & Next.js Support** - First-class TypeScript support
|
|
15
|
+
✅ **Vanilla JS Support** - Use without any framework
|
|
16
|
+
✅ **TypeScript Types** - Full type safety included
|
|
17
|
+
✅ **Browser Support** - All modern browsers + Safari/iOS native HLS
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
### NPM/Yarn (for React/Next.js)
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @guardvideo/player-sdk
|
|
27
|
+
# or
|
|
28
|
+
yarn add @guardvideo/player-sdk
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### CDN (for vanilla JavaScript)
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<script src="https://cdn.jsdelivr.net/npm/@guardvideo/player-sdk@latest/dist/guardvideo-player.min.js"></script>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Quick Start
|
|
40
|
+
|
|
41
|
+
### React Component
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { GuardVideoPlayer } from '@guardvideo/player-sdk';
|
|
45
|
+
|
|
46
|
+
function App() {
|
|
47
|
+
return (
|
|
48
|
+
<GuardVideoPlayer
|
|
49
|
+
videoId="your-video-id"
|
|
50
|
+
embedTokenEndpoint="/api/embed-token"
|
|
51
|
+
width="100%"
|
|
52
|
+
height="500px"
|
|
53
|
+
autoplay={false}
|
|
54
|
+
controls={true}
|
|
55
|
+
onReady={() => console.log('Video ready!')}
|
|
56
|
+
onError={(error) => console.error(error)}
|
|
57
|
+
/>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### React Hook
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { useGuardVideoPlayer } from '@guardvideo/player-sdk';
|
|
66
|
+
|
|
67
|
+
function VideoPlayer({ videoId }: { videoId: string }) {
|
|
68
|
+
const {
|
|
69
|
+
videoRef,
|
|
70
|
+
isReady,
|
|
71
|
+
isPlaying,
|
|
72
|
+
currentTime,
|
|
73
|
+
duration,
|
|
74
|
+
qualityLevels,
|
|
75
|
+
play,
|
|
76
|
+
pause,
|
|
77
|
+
seek,
|
|
78
|
+
setQuality,
|
|
79
|
+
} = useGuardVideoPlayer({
|
|
80
|
+
videoId,
|
|
81
|
+
embedTokenEndpoint: '/api/embed-token',
|
|
82
|
+
debug: true,
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
return (
|
|
86
|
+
<div>
|
|
87
|
+
<video ref={videoRef} style={{ width: '100%', height: 'auto' }} />
|
|
88
|
+
|
|
89
|
+
<div>
|
|
90
|
+
<button onClick={play}>Play</button>
|
|
91
|
+
<button onClick={pause}>Pause</button>
|
|
92
|
+
<span>{currentTime} / {duration}</span>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<select onChange={(e) => setQuality(Number(e.target.value))}>
|
|
96
|
+
<option value="-1">Auto</option>
|
|
97
|
+
{qualityLevels.map((level) => (
|
|
98
|
+
<option key={level.index} value={level.index}>
|
|
99
|
+
{level.name}
|
|
100
|
+
</option>
|
|
101
|
+
))}
|
|
102
|
+
</select>
|
|
103
|
+
</div>
|
|
104
|
+
);
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Next.js App Router
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
'use client';
|
|
112
|
+
|
|
113
|
+
import { GuardVideoPlayer } from '@guardvideo/player-sdk';
|
|
114
|
+
|
|
115
|
+
export default function VideoPage({ params }: { params: { videoId: string } }) {
|
|
116
|
+
return (
|
|
117
|
+
<div className="container">
|
|
118
|
+
<h1>Watch Video</h1>
|
|
119
|
+
<GuardVideoPlayer
|
|
120
|
+
videoId={params.videoId}
|
|
121
|
+
embedTokenEndpoint="/api/embed-token"
|
|
122
|
+
width="100%"
|
|
123
|
+
height="600px"
|
|
124
|
+
autoplay={false}
|
|
125
|
+
controls={true}
|
|
126
|
+
onReady={() => console.log('Ready!')}
|
|
127
|
+
onError={(error) => console.error('Error:', error)}
|
|
128
|
+
onQualityChange={(quality) => console.log('Quality:', quality)}
|
|
129
|
+
/>
|
|
130
|
+
</div>
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Vanilla JavaScript
|
|
136
|
+
|
|
137
|
+
```html
|
|
138
|
+
<!DOCTYPE html>
|
|
139
|
+
<html>
|
|
140
|
+
<head>
|
|
141
|
+
<title>GuardVideo Player</title>
|
|
142
|
+
<style>
|
|
143
|
+
#video-container {
|
|
144
|
+
width: 100%;
|
|
145
|
+
max-width: 800px;
|
|
146
|
+
aspect-ratio: 16/9;
|
|
147
|
+
margin: 0 auto;
|
|
148
|
+
}
|
|
149
|
+
</style>
|
|
150
|
+
</head>
|
|
151
|
+
<body>
|
|
152
|
+
<div id="video-container"></div>
|
|
153
|
+
|
|
154
|
+
<script src="https://cdn.jsdelivr.net/npm/@guardvideo/player-sdk@latest/dist/guardvideo-player.min.js"></script>
|
|
155
|
+
<script>
|
|
156
|
+
// Create player
|
|
157
|
+
const player = GuardVideoPlayer.create('video-container', 'your-video-id', {
|
|
158
|
+
embedTokenEndpoint: '/api/embed-token',
|
|
159
|
+
debug: true,
|
|
160
|
+
autoplay: false,
|
|
161
|
+
controls: true,
|
|
162
|
+
onReady: function() {
|
|
163
|
+
console.log('Video is ready!');
|
|
164
|
+
console.log('Available qualities:', player.getQualityLevels());
|
|
165
|
+
},
|
|
166
|
+
onError: function(error) {
|
|
167
|
+
console.error('Player error:', error);
|
|
168
|
+
},
|
|
169
|
+
onQualityChange: function(quality) {
|
|
170
|
+
console.log('Quality changed to:', quality);
|
|
171
|
+
},
|
|
172
|
+
onStateChange: function(state) {
|
|
173
|
+
console.log('State:', state);
|
|
174
|
+
}
|
|
175
|
+
});
|
|
176
|
+
|
|
177
|
+
// Control the player
|
|
178
|
+
document.getElementById('play-btn').addEventListener('click', function() {
|
|
179
|
+
player.play();
|
|
180
|
+
});
|
|
181
|
+
|
|
182
|
+
document.getElementById('pause-btn').addEventListener('click', function() {
|
|
183
|
+
player.pause();
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
document.getElementById('quality-select').addEventListener('change', function(e) {
|
|
187
|
+
player.setQuality(parseInt(e.target.value));
|
|
188
|
+
});
|
|
189
|
+
</script>
|
|
190
|
+
</body>
|
|
191
|
+
</html>
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
## API Reference
|
|
197
|
+
|
|
198
|
+
### PlayerConfig
|
|
199
|
+
|
|
200
|
+
```typescript
|
|
201
|
+
interface PlayerConfig {
|
|
202
|
+
// Required
|
|
203
|
+
embedTokenEndpoint: string; // Your backend API endpoint
|
|
204
|
+
|
|
205
|
+
// Optional
|
|
206
|
+
apiBaseUrl?: string; // Video API base URL
|
|
207
|
+
debug?: boolean; // Enable debug logging (default: false)
|
|
208
|
+
autoplay?: boolean; // Auto-play on load (default: false)
|
|
209
|
+
controls?: boolean; // Show controls (default: true)
|
|
210
|
+
className?: string; // CSS class name
|
|
211
|
+
style?: CSSProperties; // Inline styles
|
|
212
|
+
hlsConfig?: HlsConfig; // HLS.js config overrides
|
|
213
|
+
|
|
214
|
+
// Callbacks
|
|
215
|
+
onReady?: () => void;
|
|
216
|
+
onError?: (error: PlayerError) => void;
|
|
217
|
+
onQualityChange?: (quality: string) => void;
|
|
218
|
+
onStateChange?: (state: PlayerState) => void;
|
|
219
|
+
}
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
### Player Methods
|
|
223
|
+
|
|
224
|
+
```typescript
|
|
225
|
+
interface PlayerInstance {
|
|
226
|
+
play(): Promise<void>; // Play video
|
|
227
|
+
pause(): void; // Pause video
|
|
228
|
+
getCurrentTime(): number; // Get current time (seconds)
|
|
229
|
+
seek(time: number): void; // Seek to time (seconds)
|
|
230
|
+
getDuration(): number; // Get duration (seconds)
|
|
231
|
+
getVolume(): number; // Get volume (0-1)
|
|
232
|
+
setVolume(volume: number): void; // Set volume (0-1)
|
|
233
|
+
getQualityLevels(): QualityLevel[]; // Get available qualities
|
|
234
|
+
getCurrentQuality(): QualityLevel | null; // Get current quality
|
|
235
|
+
setQuality(levelIndex: number): void; // Set quality (-1 for auto)
|
|
236
|
+
getState(): PlayerState; // Get current state
|
|
237
|
+
destroy(): void; // Cleanup and destroy
|
|
238
|
+
}
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
### Player States
|
|
242
|
+
|
|
243
|
+
```typescript
|
|
244
|
+
enum PlayerState {
|
|
245
|
+
IDLE = 'idle', // Not initialized
|
|
246
|
+
LOADING = 'loading', // Loading video
|
|
247
|
+
READY = 'ready', // Ready to play
|
|
248
|
+
PLAYING = 'playing', // Currently playing
|
|
249
|
+
PAUSED = 'paused', // Paused
|
|
250
|
+
BUFFERING = 'buffering', // Buffering
|
|
251
|
+
ERROR = 'error', // Error occurred
|
|
252
|
+
}
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
---
|
|
256
|
+
|
|
257
|
+
## Backend Setup
|
|
258
|
+
|
|
259
|
+
Your backend needs to create embed tokens using your API key:
|
|
260
|
+
|
|
261
|
+
```typescript
|
|
262
|
+
// Next.js API Route: app/api/embed-token/[videoId]/route.ts
|
|
263
|
+
export async function POST(
|
|
264
|
+
request: Request,
|
|
265
|
+
{ params }: { params: { videoId: string } }
|
|
266
|
+
) {
|
|
267
|
+
const VIDEO_API_KEY = process.env.VIDEO_API_KEY;
|
|
268
|
+
const VIDEO_API_BASE = process.env.NEXT_PUBLIC_VIDEO_API_BASE;
|
|
269
|
+
|
|
270
|
+
const response = await fetch(
|
|
271
|
+
`${VIDEO_API_BASE}/videos/${params.videoId}/embed-token`,
|
|
272
|
+
{
|
|
273
|
+
method: 'POST',
|
|
274
|
+
headers: {
|
|
275
|
+
'X-API-Key': VIDEO_API_KEY, // API key stays on server!
|
|
276
|
+
'Content-Type': 'application/json'
|
|
277
|
+
},
|
|
278
|
+
body: JSON.stringify({
|
|
279
|
+
allowedDomain: request.headers.get('origin'),
|
|
280
|
+
expiresInMinutes: 120,
|
|
281
|
+
maxViews: null
|
|
282
|
+
})
|
|
283
|
+
}
|
|
284
|
+
);
|
|
285
|
+
|
|
286
|
+
const embedData = await response.json();
|
|
287
|
+
return Response.json(embedData);
|
|
288
|
+
}
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
### Environment Variables
|
|
292
|
+
|
|
293
|
+
```env
|
|
294
|
+
VIDEO_API_KEY=your-secret-api-key
|
|
295
|
+
NEXT_PUBLIC_VIDEO_API_BASE=http://localhost:3001
|
|
296
|
+
```
|
|
297
|
+
|
|
298
|
+
---
|
|
299
|
+
|
|
300
|
+
## Advanced Usage
|
|
301
|
+
|
|
302
|
+
### Custom Controls with React Hook
|
|
303
|
+
|
|
304
|
+
```tsx
|
|
305
|
+
function CustomVideoPlayer({ videoId }: { videoId: string }) {
|
|
306
|
+
const {
|
|
307
|
+
videoRef,
|
|
308
|
+
isReady,
|
|
309
|
+
isPlaying,
|
|
310
|
+
currentTime,
|
|
311
|
+
duration,
|
|
312
|
+
volume,
|
|
313
|
+
qualityLevels,
|
|
314
|
+
currentQuality,
|
|
315
|
+
play,
|
|
316
|
+
pause,
|
|
317
|
+
seek,
|
|
318
|
+
setVolume,
|
|
319
|
+
setQuality,
|
|
320
|
+
} = useGuardVideoPlayer({
|
|
321
|
+
videoId,
|
|
322
|
+
embedTokenEndpoint: '/api/embed-token',
|
|
323
|
+
debug: true,
|
|
324
|
+
});
|
|
325
|
+
|
|
326
|
+
const formatTime = (seconds: number) => {
|
|
327
|
+
const mins = Math.floor(seconds / 60);
|
|
328
|
+
const secs = Math.floor(seconds % 60);
|
|
329
|
+
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
|
330
|
+
};
|
|
331
|
+
|
|
332
|
+
return (
|
|
333
|
+
<div className="video-player">
|
|
334
|
+
<video ref={videoRef} className="video-element" />
|
|
335
|
+
|
|
336
|
+
{isReady && (
|
|
337
|
+
<div className="controls">
|
|
338
|
+
<button onClick={isPlaying ? pause : play}>
|
|
339
|
+
{isPlaying ? 'Pause' : 'Play'}
|
|
340
|
+
</button>
|
|
341
|
+
|
|
342
|
+
<input
|
|
343
|
+
type="range"
|
|
344
|
+
min="0"
|
|
345
|
+
max={duration}
|
|
346
|
+
value={currentTime}
|
|
347
|
+
onChange={(e) => seek(Number(e.target.value))}
|
|
348
|
+
/>
|
|
349
|
+
|
|
350
|
+
<span>{formatTime(currentTime)} / {formatTime(duration)}</span>
|
|
351
|
+
|
|
352
|
+
<input
|
|
353
|
+
type="range"
|
|
354
|
+
min="0"
|
|
355
|
+
max="1"
|
|
356
|
+
step="0.1"
|
|
357
|
+
value={volume}
|
|
358
|
+
onChange={(e) => setVolume(Number(e.target.value))}
|
|
359
|
+
/>
|
|
360
|
+
|
|
361
|
+
<select
|
|
362
|
+
value={currentQuality?.index ?? -1}
|
|
363
|
+
onChange={(e) => setQuality(Number(e.target.value))}
|
|
364
|
+
>
|
|
365
|
+
<option value="-1">Auto Quality</option>
|
|
366
|
+
{qualityLevels.map((level) => (
|
|
367
|
+
<option key={level.index} value={level.index}>
|
|
368
|
+
{level.name} ({Math.round(level.bitrate / 1000)}kbps)
|
|
369
|
+
</option>
|
|
370
|
+
))}
|
|
371
|
+
</select>
|
|
372
|
+
</div>
|
|
373
|
+
)}
|
|
374
|
+
</div>
|
|
375
|
+
);
|
|
376
|
+
}
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
### Using Ref for Imperative Control
|
|
380
|
+
|
|
381
|
+
```tsx
|
|
382
|
+
import { useRef } from 'react';
|
|
383
|
+
import { GuardVideoPlayer, GuardVideoPlayerRef } from '@guardvideo/player-sdk';
|
|
384
|
+
|
|
385
|
+
function VideoWithRef() {
|
|
386
|
+
const playerRef = useRef<GuardVideoPlayerRef>(null);
|
|
387
|
+
|
|
388
|
+
const handleSkipForward = () => {
|
|
389
|
+
if (playerRef.current) {
|
|
390
|
+
const currentTime = playerRef.current.getCurrentTime();
|
|
391
|
+
playerRef.current.seek(currentTime + 10);
|
|
392
|
+
}
|
|
393
|
+
};
|
|
394
|
+
|
|
395
|
+
const handleChangeQuality = (qualityIndex: number) => {
|
|
396
|
+
playerRef.current?.setQuality(qualityIndex);
|
|
397
|
+
};
|
|
398
|
+
|
|
399
|
+
return (
|
|
400
|
+
<div>
|
|
401
|
+
<GuardVideoPlayer
|
|
402
|
+
ref={playerRef}
|
|
403
|
+
videoId="your-video-id"
|
|
404
|
+
embedTokenEndpoint="/api/embed-token"
|
|
405
|
+
/>
|
|
406
|
+
<button onClick={handleSkipForward}>Skip +10s</button>
|
|
407
|
+
</div>
|
|
408
|
+
);
|
|
409
|
+
}
|
|
410
|
+
```
|
|
411
|
+
|
|
412
|
+
---
|
|
413
|
+
|
|
414
|
+
## TypeScript Support
|
|
415
|
+
|
|
416
|
+
The SDK is written in TypeScript and includes full type definitions:
|
|
417
|
+
|
|
418
|
+
```typescript
|
|
419
|
+
import type {
|
|
420
|
+
PlayerConfig,
|
|
421
|
+
PlayerInstance,
|
|
422
|
+
PlayerState,
|
|
423
|
+
PlayerError,
|
|
424
|
+
QualityLevel,
|
|
425
|
+
EmbedTokenResponse,
|
|
426
|
+
} from '@guardvideo/player-sdk';
|
|
427
|
+
```
|
|
428
|
+
|
|
429
|
+
---
|
|
430
|
+
|
|
431
|
+
## Browser Support
|
|
432
|
+
|
|
433
|
+
- ✅ Chrome 90+
|
|
434
|
+
- ✅ Firefox 88+
|
|
435
|
+
- ✅ Safari 14+ (native HLS)
|
|
436
|
+
- ✅ Edge 90+
|
|
437
|
+
- ✅ iOS Safari 14+
|
|
438
|
+
- ✅ Android Chrome 90+
|
|
439
|
+
|
|
440
|
+
---
|
|
441
|
+
|
|
442
|
+
## License
|
|
443
|
+
|
|
444
|
+
MIT © GuardVideo
|
|
445
|
+
|
|
446
|
+
---
|
|
447
|
+
|
|
448
|
+
## Support
|
|
449
|
+
|
|
450
|
+
For issues and questions:
|
|
451
|
+
- GitHub Issues: [github.com/guardvideo/player-sdk](https://github.com/guardvideo/player-sdk)
|
|
452
|
+
- Documentation: [docs.guardvideo.com](https://docs.guardvideo.com)
|
|
453
|
+
|
|
454
|
+
---
|
|
455
|
+
|
|
456
|
+
## Contributing
|
|
457
|
+
|
|
458
|
+
Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) first.
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { PlayerConfig, PlayerState, PlayerInstance, QualityLevel } from './types';
|
|
2
|
+
export declare class GuardVideoPlayer implements PlayerInstance {
|
|
3
|
+
private videoId;
|
|
4
|
+
private videoElement;
|
|
5
|
+
private hls;
|
|
6
|
+
private config;
|
|
7
|
+
private state;
|
|
8
|
+
private embedToken;
|
|
9
|
+
private currentQuality;
|
|
10
|
+
constructor(videoElement: HTMLVideoElement, videoId: string, config: PlayerConfig);
|
|
11
|
+
private log;
|
|
12
|
+
private error;
|
|
13
|
+
private setState;
|
|
14
|
+
private initialize;
|
|
15
|
+
private fetchEmbedToken;
|
|
16
|
+
private initializePlayer;
|
|
17
|
+
private initializeHls;
|
|
18
|
+
private setupVideoEventListeners;
|
|
19
|
+
private handleError;
|
|
20
|
+
play(): Promise<void>;
|
|
21
|
+
pause(): void;
|
|
22
|
+
getCurrentTime(): number;
|
|
23
|
+
seek(time: number): void;
|
|
24
|
+
getDuration(): number;
|
|
25
|
+
getVolume(): number;
|
|
26
|
+
setVolume(volume: number): void;
|
|
27
|
+
getQualityLevels(): QualityLevel[];
|
|
28
|
+
getCurrentQuality(): QualityLevel | null;
|
|
29
|
+
setQuality(levelIndex: number): void;
|
|
30
|
+
getState(): PlayerState;
|
|
31
|
+
destroy(): void;
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=player.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"player.d.ts","sourceRoot":"","sources":["../../src/core/player.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,YAAY,EAEZ,WAAW,EACX,cAAc,EACd,YAAY,EAEb,MAAM,SAAS,CAAC;AAEjB,qBAAa,gBAAiB,YAAW,cAAc;IAUnD,OAAO,CAAC,OAAO;IATjB,OAAO,CAAC,YAAY,CAAmB;IACvC,OAAO,CAAC,GAAG,CAAoB;IAC/B,OAAO,CAAC,MAAM,CAAyB;IACvC,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,cAAc,CAA6B;gBAGjD,YAAY,EAAE,gBAAgB,EACtB,OAAO,EAAE,MAAM,EACvB,MAAM,EAAE,YAAY;IAsBtB,OAAO,CAAC,GAAG;IAMX,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,QAAQ;YAQF,UAAU;YAoBV,eAAe;YAwBf,gBAAgB;IAgC9B,OAAO,CAAC,aAAa;IAsErB,OAAO,CAAC,wBAAwB;IAiChC,OAAO,CAAC,WAAW;IAQN,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAS3B,KAAK,IAAI,IAAI;IAIb,cAAc,IAAI,MAAM;IAIxB,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAIxB,WAAW,IAAI,MAAM;IAIrB,SAAS,IAAI,MAAM;IAInB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAI/B,gBAAgB,IAAI,YAAY,EAAE;IAYlC,iBAAiB,IAAI,YAAY,GAAG,IAAI;IAIxC,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAOpC,QAAQ,IAAI,WAAW;IAIvB,OAAO,IAAI,IAAI;CAYvB"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
export interface EmbedTokenResponse {
|
|
2
|
+
tokenId: string;
|
|
3
|
+
videoId: string;
|
|
4
|
+
allowedDomain: string;
|
|
5
|
+
expiresAt: string;
|
|
6
|
+
maxViews: number | null;
|
|
7
|
+
playerUrl: string;
|
|
8
|
+
embedCode?: string;
|
|
9
|
+
}
|
|
10
|
+
export interface PlayerConfig {
|
|
11
|
+
embedTokenEndpoint: string;
|
|
12
|
+
apiBaseUrl?: string;
|
|
13
|
+
debug?: boolean;
|
|
14
|
+
autoplay?: boolean;
|
|
15
|
+
controls?: boolean;
|
|
16
|
+
className?: string;
|
|
17
|
+
style?: React.CSSProperties | Record<string, string>;
|
|
18
|
+
hlsConfig?: Partial<HlsConfig>;
|
|
19
|
+
onReady?: () => void;
|
|
20
|
+
onError?: (error: PlayerError) => void;
|
|
21
|
+
onQualityChange?: (quality: string) => void;
|
|
22
|
+
onStateChange?: (state: PlayerState) => void;
|
|
23
|
+
}
|
|
24
|
+
export interface HlsConfig {
|
|
25
|
+
debug?: boolean;
|
|
26
|
+
enableWorker?: boolean;
|
|
27
|
+
lowLatencyMode?: boolean;
|
|
28
|
+
maxBufferLength?: number;
|
|
29
|
+
maxMaxBufferLength?: number;
|
|
30
|
+
}
|
|
31
|
+
export interface PlayerError {
|
|
32
|
+
code: string;
|
|
33
|
+
message: string;
|
|
34
|
+
fatal: boolean;
|
|
35
|
+
details?: any;
|
|
36
|
+
}
|
|
37
|
+
export declare enum PlayerState {
|
|
38
|
+
IDLE = "idle",
|
|
39
|
+
LOADING = "loading",
|
|
40
|
+
READY = "ready",
|
|
41
|
+
PLAYING = "playing",
|
|
42
|
+
PAUSED = "paused",
|
|
43
|
+
BUFFERING = "buffering",
|
|
44
|
+
ERROR = "error"
|
|
45
|
+
}
|
|
46
|
+
export interface QualityLevel {
|
|
47
|
+
index: number;
|
|
48
|
+
height: number;
|
|
49
|
+
width: number;
|
|
50
|
+
bitrate: number;
|
|
51
|
+
name: string;
|
|
52
|
+
}
|
|
53
|
+
export interface PlayerInstance {
|
|
54
|
+
play(): Promise<void>;
|
|
55
|
+
pause(): void;
|
|
56
|
+
getCurrentTime(): number;
|
|
57
|
+
seek(time: number): void;
|
|
58
|
+
getDuration(): number;
|
|
59
|
+
getVolume(): number;
|
|
60
|
+
setVolume(volume: number): void;
|
|
61
|
+
getQualityLevels(): QualityLevel[];
|
|
62
|
+
getCurrentQuality(): QualityLevel | null;
|
|
63
|
+
setQuality(levelIndex: number): void;
|
|
64
|
+
getState(): PlayerState;
|
|
65
|
+
destroy(): void;
|
|
66
|
+
}
|
|
67
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAK3B,kBAAkB,EAAE,MAAM,CAAC;IAM3B,UAAU,CAAC,EAAE,MAAM,CAAC;IAMpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAMhB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAKrD,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAK/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAKrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAKvC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAK5C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC9C;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAED,oBAAY,WAAW;IACrB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,SAAS,cAAc;IACvB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,cAAc;IAI7B,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAKtB,KAAK,IAAI,IAAI,CAAC;IAKd,cAAc,IAAI,MAAM,CAAC;IAKzB,IAAI,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAKzB,WAAW,IAAI,MAAM,CAAC;IAKtB,SAAS,IAAI,MAAM,CAAC;IAKpB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAKhC,gBAAgB,IAAI,YAAY,EAAE,CAAC;IAKnC,iBAAiB,IAAI,YAAY,GAAG,IAAI,CAAC;IAKzC,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAKrC,QAAQ,IAAI,WAAW,CAAC;IAKxB,OAAO,IAAI,IAAI,CAAC;CACjB"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { GuardVideoPlayer as GuardVideoPlayerCore } from './core/player';
|
|
2
|
+
export * from './core/types';
|
|
3
|
+
export { GuardVideoPlayerComponent as GuardVideoPlayer } from './react/GuardVideoPlayer';
|
|
4
|
+
export { useGuardVideoPlayer } from './react/hooks';
|
|
5
|
+
export type { GuardVideoPlayerProps, GuardVideoPlayerRef } from './react/GuardVideoPlayer';
|
|
6
|
+
export type { UseGuardVideoPlayerOptions, UseGuardVideoPlayerReturn } from './react/hooks';
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACzE,cAAc,cAAc,CAAC;AAG7B,OAAO,EAAE,yBAAyB,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACzF,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC3F,YAAY,EAAE,0BAA0B,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC"}
|