@livepeer-frameworks/player-wc 0.2.4 → 0.2.7
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 +164 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
# @livepeer-frameworks/player-wc
|
|
2
|
+
|
|
3
|
+
Web Components wrapper for the FrameWorks player. Registers `<fw-player>` and composable sub-elements via Lit.
|
|
4
|
+
|
|
5
|
+
**Docs:** https://logbook.frameworks.network
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @livepeer-frameworks/player-wc
|
|
11
|
+
# or
|
|
12
|
+
npm i @livepeer-frameworks/player-wc
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
### Auto-register elements (side-effect import)
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
import "@livepeer-frameworks/player-wc/define";
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<fw-player
|
|
25
|
+
content-id="pk_..."
|
|
26
|
+
content-type="live"
|
|
27
|
+
gateway-url="https://your-bridge/graphql"
|
|
28
|
+
autoplay
|
|
29
|
+
muted
|
|
30
|
+
></fw-player>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Class import (no auto-registration)
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
import { FwPlayer } from "@livepeer-frameworks/player-wc";
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### CDN / Script Tag
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<script src="https://unpkg.com/@livepeer-frameworks/player-wc/dist/fw-player.iife.js"></script>
|
|
43
|
+
|
|
44
|
+
<fw-player content-id="pk_..." content-type="live"></fw-player>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Notes:
|
|
48
|
+
|
|
49
|
+
- There is **no default gateway**; provide `gatewayUrl` unless you pass `endpoints` or `mistUrl`.
|
|
50
|
+
|
|
51
|
+
### Direct MistServer Node (mistUrl)
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<fw-player
|
|
55
|
+
content-id="pk_..."
|
|
56
|
+
content-type="live"
|
|
57
|
+
mist-url="https://edge-egress.example.com"
|
|
58
|
+
></fw-player>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Attributes
|
|
62
|
+
|
|
63
|
+
| Attribute | Type | Default | Description |
|
|
64
|
+
| ---------------- | --------- | -------- | ------------------------------------------- |
|
|
65
|
+
| `content-id` | `string` | `""` | Playback ID |
|
|
66
|
+
| `content-type` | `string` | — | `"live"` · `"dvr"` · `"clip"` · `"vod"` |
|
|
67
|
+
| `gateway-url` | `string` | — | Gateway GraphQL endpoint |
|
|
68
|
+
| `mist-url` | `string` | — | Direct MistServer endpoint |
|
|
69
|
+
| `auth-token` | `string` | — | Auth token |
|
|
70
|
+
| `autoplay` | `boolean` | `true` | Auto-start playback |
|
|
71
|
+
| `muted` | `boolean` | `true` | Start muted |
|
|
72
|
+
| `playback-mode` | `string` | `"auto"` | `"auto"` · `"hls"` · `"webrtc"` · etc. |
|
|
73
|
+
| `stock-controls`| `boolean` | `false` | Use native browser controls |
|
|
74
|
+
| `thumbnail-url` | `string` | — | Poster / thumbnail URL |
|
|
75
|
+
| `theme` | `string` | — | Theme preset name |
|
|
76
|
+
| `locale` | `string` | `"en"` | UI language |
|
|
77
|
+
| `debug` | `boolean` | `false` | Debug logging |
|
|
78
|
+
| `dev-mode` | `boolean` | `false` | Show dev panel |
|
|
79
|
+
|
|
80
|
+
## Methods
|
|
81
|
+
|
|
82
|
+
```js
|
|
83
|
+
const player = document.querySelector("fw-player");
|
|
84
|
+
|
|
85
|
+
player.play();
|
|
86
|
+
player.pause();
|
|
87
|
+
player.togglePlay();
|
|
88
|
+
player.seek(30);
|
|
89
|
+
player.seekBy(-10);
|
|
90
|
+
player.jumpToLive();
|
|
91
|
+
player.setVolume(0.5);
|
|
92
|
+
player.toggleMute();
|
|
93
|
+
player.toggleLoop();
|
|
94
|
+
player.toggleFullscreen();
|
|
95
|
+
player.togglePiP();
|
|
96
|
+
player.toggleSubtitles();
|
|
97
|
+
player.getQualities();
|
|
98
|
+
player.selectQuality(id);
|
|
99
|
+
player.retry();
|
|
100
|
+
player.reload();
|
|
101
|
+
player.destroy();
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Events
|
|
105
|
+
|
|
106
|
+
| Event | Detail |
|
|
107
|
+
| ---------------------- | ----------------------------------------------- |
|
|
108
|
+
| `fw-state-change` | Player state updated |
|
|
109
|
+
| `fw-ready` | Player attached, `{ videoElement }` |
|
|
110
|
+
| `fw-stream-state` | Stream health state changed |
|
|
111
|
+
| `fw-time-update` | `{ currentTime, duration }` |
|
|
112
|
+
| `fw-volume-change` | `{ volume, muted }` |
|
|
113
|
+
| `fw-fullscreen-change` | `{ isFullscreen }` |
|
|
114
|
+
| `fw-pip-change` | `{ isPiP }` |
|
|
115
|
+
| `fw-error` | `{ error }` |
|
|
116
|
+
| `fw-protocol-swapped` | Transport protocol changed |
|
|
117
|
+
| `fw-playback-failed` | Playback failed after retries |
|
|
118
|
+
|
|
119
|
+
## Theming
|
|
120
|
+
|
|
121
|
+
Set a preset via the `theme` attribute, or pass a CSS variable object to the `themeOverrides` JS property:
|
|
122
|
+
|
|
123
|
+
```js
|
|
124
|
+
player.themeOverrides = {
|
|
125
|
+
"--fw-color-accent": "#ff6600",
|
|
126
|
+
};
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Sub-elements
|
|
130
|
+
|
|
131
|
+
`<fw-player>` bundles a full UI. All sub-elements are also exported for custom layouts:
|
|
132
|
+
|
|
133
|
+
`<fw-player-controls>` · `<fw-seek-bar>` · `<fw-volume-control>` · `<fw-settings-menu>` · `<fw-idle-screen>` · `<fw-loading-spinner>` · `<fw-loading-screen>` · `<fw-stream-state-overlay>` · `<fw-thumbnail-overlay>` · `<fw-title-overlay>` · `<fw-error-overlay>` · `<fw-toast>` · `<fw-stats-panel>` · `<fw-dev-mode-panel>` · `<fw-subtitle-renderer>` · `<fw-skip-indicator>` · `<fw-speed-indicator>` · `<fw-context-menu>` · `<fw-play-button>` · `<fw-skip-button>` · `<fw-time-display>` · `<fw-live-badge>` · `<fw-fullscreen-button>` · `<fw-dvd-logo>`
|
|
134
|
+
|
|
135
|
+
## Controls & Shortcuts
|
|
136
|
+
|
|
137
|
+
The player ships with keyboard/mouse shortcuts when the player is focused (click/tap once).
|
|
138
|
+
|
|
139
|
+
**Keyboard**
|
|
140
|
+
| Shortcut | Action | Notes |
|
|
141
|
+
|---|---|---|
|
|
142
|
+
| Space | Play/Pause | Hold = 2x speed (when seekable) |
|
|
143
|
+
| K | Play/Pause | YouTube-style |
|
|
144
|
+
| J / Left | Skip back 10s | Disabled on live-only |
|
|
145
|
+
| L / Right | Skip forward 10s | Disabled on live-only |
|
|
146
|
+
| Up / Down | Volume +/-10% | - |
|
|
147
|
+
| M | Mute/Unmute | - |
|
|
148
|
+
| F | Fullscreen toggle | - |
|
|
149
|
+
| C | Captions toggle | - |
|
|
150
|
+
| 0-9 | Seek to 0-90% | Disabled on live-only |
|
|
151
|
+
| , / . | Prev/Next frame (paused) | WebCodecs = true step; others = buffered-only |
|
|
152
|
+
|
|
153
|
+
**Mouse / Touch**
|
|
154
|
+
| Gesture | Action | Notes |
|
|
155
|
+
|---|---|---|
|
|
156
|
+
| Double-click | Fullscreen toggle | Desktop |
|
|
157
|
+
| Double-tap (left/right) | Skip +/-10s | Touch only, disabled on live-only |
|
|
158
|
+
| Click/Tap and hold | 2x speed | Disabled on live-only |
|
|
159
|
+
|
|
160
|
+
**Constraints**
|
|
161
|
+
|
|
162
|
+
- Live-only streams disable seeking/skip/2x hold and frame-step.
|
|
163
|
+
- Live with DVR buffer enables the same shortcuts as VOD.
|
|
164
|
+
- Frame stepping only moves within already buffered ranges (no network seek). WebCodecs supports true frame stepping when paused.
|
package/package.json
CHANGED