@viostream/viostream-player-svelte 0.2.2 → 0.2.4
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 +14 -32
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -14,18 +14,18 @@ Svelte 5 SDK for the [Viostream](https://www.viostream.com) video player. Embed,
|
|
|
14
14
|
## Installation
|
|
15
15
|
|
|
16
16
|
```bash
|
|
17
|
-
npm install viostream-player-svelte
|
|
17
|
+
npm install @viostream/viostream-player-svelte
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
## Quick Start
|
|
21
21
|
|
|
22
22
|
### Component
|
|
23
23
|
|
|
24
|
-
Drop a `<ViostreamPlayer>` into any Svelte component. The SDK loads the Viostream
|
|
24
|
+
Drop a `<ViostreamPlayer>` into any Svelte component. The SDK loads the Viostream player automatically.
|
|
25
25
|
|
|
26
26
|
```svelte
|
|
27
27
|
<script lang="ts">
|
|
28
|
-
import { ViostreamPlayer } from 'viostream-player-svelte';
|
|
28
|
+
import { ViostreamPlayer } from '@viostream/viostream-player-svelte';
|
|
29
29
|
</script>
|
|
30
30
|
|
|
31
31
|
<ViostreamPlayer
|
|
@@ -42,7 +42,7 @@ Drop a `<ViostreamPlayer>` into any Svelte component. The SDK loads the Viostrea
|
|
|
42
42
|
Use `createViostreamPlayer` when you need full control without a component:
|
|
43
43
|
|
|
44
44
|
```ts
|
|
45
|
-
import { createViostreamPlayer } from 'viostream-player-svelte';
|
|
45
|
+
import { createViostreamPlayer } from '@viostream/viostream-player-svelte';
|
|
46
46
|
|
|
47
47
|
const player = await createViostreamPlayer({
|
|
48
48
|
accountKey: 'vc-100100100',
|
|
@@ -120,8 +120,8 @@ Use `onplayerready` to get a reference to the player for programmatic control:
|
|
|
120
120
|
|
|
121
121
|
```svelte
|
|
122
122
|
<script lang="ts">
|
|
123
|
-
import { ViostreamPlayer } from 'viostream-player-svelte';
|
|
124
|
-
import type { ViostreamPlayerInstance } from 'viostream-player-svelte';
|
|
123
|
+
import { ViostreamPlayer } from '@viostream/viostream-player-svelte';
|
|
124
|
+
import type { ViostreamPlayerInstance } from '@viostream/viostream-player-svelte';
|
|
125
125
|
|
|
126
126
|
let player: ViostreamPlayerInstance | undefined = $state();
|
|
127
127
|
</script>
|
|
@@ -166,8 +166,8 @@ The player is destroyed automatically when the component unmounts. All event lis
|
|
|
166
166
|
For use outside of Svelte components or when you need full lifecycle control.
|
|
167
167
|
|
|
168
168
|
```ts
|
|
169
|
-
import { createViostreamPlayer } from 'viostream-player-svelte';
|
|
170
|
-
import type { CreateViostreamPlayerOptions } from 'viostream-player-svelte';
|
|
169
|
+
import { createViostreamPlayer } from '@viostream/viostream-player-svelte';
|
|
170
|
+
import type { CreateViostreamPlayerOptions } from '@viostream/viostream-player-svelte';
|
|
171
171
|
|
|
172
172
|
const player = await createViostreamPlayer({
|
|
173
173
|
accountKey: 'vc-100100100',
|
|
@@ -216,7 +216,7 @@ player.reload({ key: 'value' }); // reload with new settings
|
|
|
216
216
|
All getters return promises. The SDK converts the underlying callback-based API to `async`/`await`.
|
|
217
217
|
|
|
218
218
|
```ts
|
|
219
|
-
const volume = await player.getVolume(); // number (0
|
|
219
|
+
const volume = await player.getVolume(); // number (0-1)
|
|
220
220
|
const loop = await player.getLoop(); // boolean
|
|
221
221
|
const time = await player.getCurrentTime(); // number (seconds)
|
|
222
222
|
const paused = await player.getPaused(); // boolean
|
|
@@ -282,34 +282,16 @@ After calling `destroy()`:
|
|
|
282
282
|
- Getter calls will reject with `"Player has been destroyed"`.
|
|
283
283
|
---
|
|
284
284
|
|
|
285
|
-
## Script Loader
|
|
286
|
-
|
|
287
|
-
The SDK loads the Viostream API script automatically. If you need manual control over loading (e.g. preloading), you can use `loadViostream` directly:
|
|
288
|
-
|
|
289
|
-
```ts
|
|
290
|
-
import { loadViostream } from 'viostream-player-svelte';
|
|
291
|
-
|
|
292
|
-
const api = await loadViostream('vc-100100100');
|
|
293
|
-
// api.embed(...) is now available
|
|
294
|
-
```
|
|
295
|
-
|
|
296
|
-
The loader:
|
|
297
|
-
- Injects `<script src="https://play.viostream.com/api/{accountKey}">` into `<head>`.
|
|
298
|
-
- Deduplicates requests -- calling it multiple times with the same key returns the same promise.
|
|
299
|
-
- Times out after 15 seconds if the script fails to load.
|
|
300
|
-
- Detects if the script tag already exists in the DOM (e.g. added manually) and waits for it.
|
|
301
|
-
|
|
302
|
-
---
|
|
303
|
-
|
|
304
285
|
## TypeScript
|
|
305
286
|
|
|
306
287
|
Every export is fully typed. Import types alongside runtime exports:
|
|
307
288
|
|
|
308
289
|
```ts
|
|
309
|
-
import { ViostreamPlayer, createViostreamPlayer } from 'viostream-player-svelte';
|
|
290
|
+
import { ViostreamPlayer, createViostreamPlayer } from '@viostream/viostream-player-svelte';
|
|
310
291
|
import type {
|
|
311
292
|
ViostreamPlayerInstance,
|
|
312
293
|
ViostreamPlayerProps,
|
|
294
|
+
ViostreamPlayerEventProps,
|
|
313
295
|
ViostreamEmbedOptions,
|
|
314
296
|
ViostreamTimeUpdateData,
|
|
315
297
|
ViostreamVolumeChangeData,
|
|
@@ -318,7 +300,7 @@ import type {
|
|
|
318
300
|
ViostreamPlayerEventMap,
|
|
319
301
|
ViostreamEventHandler,
|
|
320
302
|
CreateViostreamPlayerOptions,
|
|
321
|
-
} from 'viostream-player-svelte';
|
|
303
|
+
} from '@viostream/viostream-player-svelte';
|
|
322
304
|
```
|
|
323
305
|
|
|
324
306
|
---
|
|
@@ -329,8 +311,8 @@ A complete example showing the component with custom controls, event logging, an
|
|
|
329
311
|
|
|
330
312
|
```svelte
|
|
331
313
|
<script lang="ts">
|
|
332
|
-
import { ViostreamPlayer } from 'viostream-player-svelte';
|
|
333
|
-
import type { ViostreamPlayerInstance, ViostreamTimeUpdateData } from 'viostream-player-svelte';
|
|
314
|
+
import { ViostreamPlayer } from '@viostream/viostream-player-svelte';
|
|
315
|
+
import type { ViostreamPlayerInstance, ViostreamTimeUpdateData } from '@viostream/viostream-player-svelte';
|
|
334
316
|
|
|
335
317
|
let player: ViostreamPlayerInstance | undefined = $state();
|
|
336
318
|
let currentTime = $state(0);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viostream/viostream-player-svelte",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.4",
|
|
4
4
|
"description": "Svelte 5 SDK for the Viostream video player — embed, control, and listen to player events",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"publishConfig": {
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"!dist/**/*.spec.*"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@viostream/viostream-player-core": "^0.2.
|
|
33
|
+
"@viostream/viostream-player-core": "^0.2.4"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"svelte": "^5.0.0"
|