@livepeer-frameworks/player-wc 0.1.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/dist/cjs/components/fw-context-menu.js +17 -0
- package/dist/cjs/components/fw-context-menu.js.map +1 -0
- package/dist/cjs/components/fw-dev-mode-panel.js +273 -0
- package/dist/cjs/components/fw-dev-mode-panel.js.map +1 -0
- package/dist/cjs/components/fw-error-overlay.js +101 -0
- package/dist/cjs/components/fw-error-overlay.js.map +1 -0
- package/dist/cjs/components/fw-idle-screen.js +182 -0
- package/dist/cjs/components/fw-idle-screen.js.map +1 -0
- package/dist/cjs/components/fw-loading-spinner.js +62 -0
- package/dist/cjs/components/fw-loading-spinner.js.map +1 -0
- package/dist/cjs/components/fw-player-controls.js +258 -0
- package/dist/cjs/components/fw-player-controls.js.map +1 -0
- package/dist/cjs/components/fw-player.js +570 -0
- package/dist/cjs/components/fw-player.js.map +1 -0
- package/dist/cjs/components/fw-seek-bar.js +233 -0
- package/dist/cjs/components/fw-seek-bar.js.map +1 -0
- package/dist/cjs/components/fw-settings-menu.js +126 -0
- package/dist/cjs/components/fw-settings-menu.js.map +1 -0
- package/dist/cjs/components/fw-skip-indicator.js +143 -0
- package/dist/cjs/components/fw-skip-indicator.js.map +1 -0
- package/dist/cjs/components/fw-speed-indicator.js +61 -0
- package/dist/cjs/components/fw-speed-indicator.js.map +1 -0
- package/dist/cjs/components/fw-stats-panel.js +141 -0
- package/dist/cjs/components/fw-stats-panel.js.map +1 -0
- package/dist/cjs/components/fw-subtitle-renderer.js +70 -0
- package/dist/cjs/components/fw-subtitle-renderer.js.map +1 -0
- package/dist/cjs/components/fw-title-overlay.js +72 -0
- package/dist/cjs/components/fw-title-overlay.js.map +1 -0
- package/dist/cjs/components/fw-toast.js +74 -0
- package/dist/cjs/components/fw-toast.js.map +1 -0
- package/dist/cjs/components/fw-volume-control.js +140 -0
- package/dist/cjs/components/fw-volume-control.js.map +1 -0
- package/dist/cjs/controllers/player-controller-host.js +315 -0
- package/dist/cjs/controllers/player-controller-host.js.map +1 -0
- package/dist/cjs/define.js +45 -0
- package/dist/cjs/define.js.map +1 -0
- package/dist/cjs/icons/index.js +153 -0
- package/dist/cjs/icons/index.js.map +1 -0
- package/dist/cjs/index.js +88 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/cjs/node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js +33 -0
- package/dist/cjs/node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js.map +1 -0
- package/dist/cjs/styles/shared-styles.js +1967 -0
- package/dist/cjs/styles/shared-styles.js.map +1 -0
- package/dist/cjs/styles/utility-styles.js +725 -0
- package/dist/cjs/styles/utility-styles.js.map +1 -0
- package/dist/esm/components/fw-context-menu.js +17 -0
- package/dist/esm/components/fw-context-menu.js.map +1 -0
- package/dist/esm/components/fw-dev-mode-panel.js +273 -0
- package/dist/esm/components/fw-dev-mode-panel.js.map +1 -0
- package/dist/esm/components/fw-error-overlay.js +101 -0
- package/dist/esm/components/fw-error-overlay.js.map +1 -0
- package/dist/esm/components/fw-idle-screen.js +182 -0
- package/dist/esm/components/fw-idle-screen.js.map +1 -0
- package/dist/esm/components/fw-loading-spinner.js +62 -0
- package/dist/esm/components/fw-loading-spinner.js.map +1 -0
- package/dist/esm/components/fw-player-controls.js +258 -0
- package/dist/esm/components/fw-player-controls.js.map +1 -0
- package/dist/esm/components/fw-player.js +570 -0
- package/dist/esm/components/fw-player.js.map +1 -0
- package/dist/esm/components/fw-seek-bar.js +233 -0
- package/dist/esm/components/fw-seek-bar.js.map +1 -0
- package/dist/esm/components/fw-settings-menu.js +126 -0
- package/dist/esm/components/fw-settings-menu.js.map +1 -0
- package/dist/esm/components/fw-skip-indicator.js +143 -0
- package/dist/esm/components/fw-skip-indicator.js.map +1 -0
- package/dist/esm/components/fw-speed-indicator.js +61 -0
- package/dist/esm/components/fw-speed-indicator.js.map +1 -0
- package/dist/esm/components/fw-stats-panel.js +141 -0
- package/dist/esm/components/fw-stats-panel.js.map +1 -0
- package/dist/esm/components/fw-subtitle-renderer.js +70 -0
- package/dist/esm/components/fw-subtitle-renderer.js.map +1 -0
- package/dist/esm/components/fw-title-overlay.js +72 -0
- package/dist/esm/components/fw-title-overlay.js.map +1 -0
- package/dist/esm/components/fw-toast.js +74 -0
- package/dist/esm/components/fw-toast.js.map +1 -0
- package/dist/esm/components/fw-volume-control.js +140 -0
- package/dist/esm/components/fw-volume-control.js.map +1 -0
- package/dist/esm/controllers/player-controller-host.js +313 -0
- package/dist/esm/controllers/player-controller-host.js.map +1 -0
- package/dist/esm/define.js +43 -0
- package/dist/esm/define.js.map +1 -0
- package/dist/esm/icons/index.js +141 -0
- package/dist/esm/icons/index.js.map +1 -0
- package/dist/esm/index.js +18 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js +31 -0
- package/dist/esm/node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js.map +1 -0
- package/dist/esm/styles/shared-styles.js +1965 -0
- package/dist/esm/styles/shared-styles.js.map +1 -0
- package/dist/esm/styles/utility-styles.js +723 -0
- package/dist/esm/styles/utility-styles.js.map +1 -0
- package/dist/fw-player.iife.js +4362 -0
- package/dist/fw-player.iife.js.map +1 -0
- package/dist/types/components/fw-context-menu.d.ts +15 -0
- package/dist/types/components/fw-dev-mode-panel.d.ts +24 -0
- package/dist/types/components/fw-error-overlay.d.ts +14 -0
- package/dist/types/components/fw-idle-screen.d.ts +13 -0
- package/dist/types/components/fw-loading-spinner.d.ts +10 -0
- package/dist/types/components/fw-player-controls.d.ts +23 -0
- package/dist/types/components/fw-player.d.ts +74 -0
- package/dist/types/components/fw-seek-bar.d.ts +33 -0
- package/dist/types/components/fw-settings-menu.d.ts +16 -0
- package/dist/types/components/fw-skip-indicator.d.ts +18 -0
- package/dist/types/components/fw-speed-indicator.d.ts +11 -0
- package/dist/types/components/fw-stats-panel.d.ts +18 -0
- package/dist/types/components/fw-subtitle-renderer.d.ts +21 -0
- package/dist/types/components/fw-title-overlay.d.ts +12 -0
- package/dist/types/components/fw-toast.d.ts +12 -0
- package/dist/types/components/fw-volume-control.d.ts +18 -0
- package/dist/types/controllers/player-controller-host.d.ts +119 -0
- package/dist/types/define.d.ts +1 -0
- package/dist/types/icons/index.d.ts +23 -0
- package/dist/types/iife-entry.d.ts +11 -0
- package/dist/types/index.d.ts +25 -0
- package/dist/types/styles/shared-styles.d.ts +1 -0
- package/dist/types/styles/utility-styles.d.ts +1 -0
- package/package.json +65 -0
- package/src/components/fw-context-menu.ts +23 -0
- package/src/components/fw-dev-mode-panel.ts +285 -0
- package/src/components/fw-error-overlay.ts +96 -0
- package/src/components/fw-idle-screen.ts +182 -0
- package/src/components/fw-loading-spinner.ts +63 -0
- package/src/components/fw-player-controls.ts +256 -0
- package/src/components/fw-player.ts +557 -0
- package/src/components/fw-seek-bar.ts +219 -0
- package/src/components/fw-settings-menu.ts +128 -0
- package/src/components/fw-skip-indicator.ts +139 -0
- package/src/components/fw-speed-indicator.ts +57 -0
- package/src/components/fw-stats-panel.ts +154 -0
- package/src/components/fw-subtitle-renderer.ts +65 -0
- package/src/components/fw-title-overlay.ts +64 -0
- package/src/components/fw-toast.ts +70 -0
- package/src/components/fw-volume-control.ts +140 -0
- package/src/controllers/player-controller-host.ts +457 -0
- package/src/define.ts +43 -0
- package/src/icons/index.ts +209 -0
- package/src/iife-entry.ts +11 -0
- package/src/index.ts +31 -0
- package/src/styles/shared-styles.ts +1962 -0
- package/src/styles/utility-styles.ts +720 -0
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
|
|
4
|
+
var lit = require('lit');
|
|
5
|
+
var decorators_js = require('lit/decorators.js');
|
|
6
|
+
|
|
7
|
+
exports.FwLoadingSpinner = class FwLoadingSpinner extends lit.LitElement {
|
|
8
|
+
render() {
|
|
9
|
+
return lit.html `
|
|
10
|
+
<div class="overlay" role="status" aria-live="polite">
|
|
11
|
+
<div class="pill">
|
|
12
|
+
<div class="spinner"></div>
|
|
13
|
+
<span>Buffering...</span>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
`;
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
exports.FwLoadingSpinner.styles = lit.css `
|
|
20
|
+
:host {
|
|
21
|
+
display: contents;
|
|
22
|
+
}
|
|
23
|
+
.overlay {
|
|
24
|
+
position: absolute;
|
|
25
|
+
inset: 0;
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
background: rgb(0 0 0 / 0.4);
|
|
30
|
+
backdrop-filter: blur(4px);
|
|
31
|
+
z-index: 20;
|
|
32
|
+
}
|
|
33
|
+
.pill {
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
gap: 0.75rem;
|
|
37
|
+
border-radius: 0.5rem;
|
|
38
|
+
border: 1px solid rgb(255 255 255 / 0.1);
|
|
39
|
+
background: rgb(0 0 0 / 0.7);
|
|
40
|
+
padding: 0.75rem 1rem;
|
|
41
|
+
font-size: 0.875rem;
|
|
42
|
+
color: white;
|
|
43
|
+
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
44
|
+
}
|
|
45
|
+
.spinner {
|
|
46
|
+
width: 1rem;
|
|
47
|
+
height: 1rem;
|
|
48
|
+
border: 2px solid rgb(255 255 255 / 0.3);
|
|
49
|
+
border-top-color: white;
|
|
50
|
+
border-radius: 50%;
|
|
51
|
+
animation: _fw-spin 1s linear infinite;
|
|
52
|
+
}
|
|
53
|
+
@keyframes _fw-spin {
|
|
54
|
+
to {
|
|
55
|
+
transform: rotate(360deg);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
`;
|
|
59
|
+
exports.FwLoadingSpinner = tslib_es6.__decorate([
|
|
60
|
+
decorators_js.customElement("fw-loading-spinner")
|
|
61
|
+
], exports.FwLoadingSpinner);
|
|
62
|
+
//# sourceMappingURL=fw-loading-spinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fw-loading-spinner.js","sources":["../../../../src/components/fw-loading-spinner.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\n\n@customElement(\"fw-loading-spinner\")\nexport class FwLoadingSpinner extends LitElement {\n static styles = css`\n :host {\n display: contents;\n }\n .overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgb(0 0 0 / 0.4);\n backdrop-filter: blur(4px);\n z-index: 20;\n }\n .pill {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n border-radius: 0.5rem;\n border: 1px solid rgb(255 255 255 / 0.1);\n background: rgb(0 0 0 / 0.7);\n padding: 0.75rem 1rem;\n font-size: 0.875rem;\n color: white;\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n }\n .spinner {\n width: 1rem;\n height: 1rem;\n border: 2px solid rgb(255 255 255 / 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: _fw-spin 1s linear infinite;\n }\n @keyframes _fw-spin {\n to {\n transform: rotate(360deg);\n }\n }\n `;\n\n protected render() {\n return html`\n <div class=\"overlay\" role=\"status\" aria-live=\"polite\">\n <div class=\"pill\">\n <div class=\"spinner\"></div>\n <span>Buffering...</span>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"fw-loading-spinner\": FwLoadingSpinner;\n }\n}\n"],"names":["FwLoadingSpinner","LitElement","html","css","__decorate","customElement"],"mappings":";;;;;;AAIaA,wBAAgB,GAAtB,MAAM,gBAAiB,SAAQC,cAAU,CAAA;IA0CpC,MAAM,GAAA;AACd,QAAA,OAAOC,QAAI,CAAA;;;;;;;KAOV;IACH;;AAlDOF,wBAAA,CAAA,MAAM,GAAGG,OAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuClB,EAAA,CAvCY;AADFH,wBAAgB,GAAAI,oBAAA,CAAA;IAD5BC,2BAAa,CAAC,oBAAoB;AACtB,CAAA,EAAAL,wBAAgB,CAoD5B;;"}
|
|
@@ -0,0 +1,258 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
|
|
4
|
+
var lit = require('lit');
|
|
5
|
+
var decorators_js = require('lit/decorators.js');
|
|
6
|
+
var classMap_js = require('lit/directives/class-map.js');
|
|
7
|
+
var sharedStyles = require('../styles/shared-styles.js');
|
|
8
|
+
var utilityStyles = require('../styles/utility-styles.js');
|
|
9
|
+
var index = require('../icons/index.js');
|
|
10
|
+
|
|
11
|
+
exports.FwPlayerControls = class FwPlayerControls extends lit.LitElement {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
this.playbackMode = "auto";
|
|
15
|
+
this.isContentLive = false;
|
|
16
|
+
this.isStatsOpen = false;
|
|
17
|
+
this._settingsOpen = false;
|
|
18
|
+
}
|
|
19
|
+
_formatTime(seconds) {
|
|
20
|
+
if (!isFinite(seconds) || isNaN(seconds))
|
|
21
|
+
return "0:00";
|
|
22
|
+
const abs = Math.abs(Math.floor(seconds));
|
|
23
|
+
const h = Math.floor(abs / 3600);
|
|
24
|
+
const m = Math.floor((abs % 3600) / 60);
|
|
25
|
+
const s = abs % 60;
|
|
26
|
+
if (h > 0)
|
|
27
|
+
return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
|
|
28
|
+
return `${m}:${String(s).padStart(2, "0")}`;
|
|
29
|
+
}
|
|
30
|
+
get _isNearLive() {
|
|
31
|
+
if (!this.isContentLive)
|
|
32
|
+
return false;
|
|
33
|
+
const { currentTime, duration } = this.pc.s;
|
|
34
|
+
if (!isFinite(duration) || duration <= 0)
|
|
35
|
+
return true;
|
|
36
|
+
return duration - currentTime < 10;
|
|
37
|
+
}
|
|
38
|
+
render() {
|
|
39
|
+
const s = this.pc.s;
|
|
40
|
+
const disabled = !s.videoElement;
|
|
41
|
+
return lit.html `
|
|
42
|
+
<div
|
|
43
|
+
class=${classMap_js.classMap({
|
|
44
|
+
"controls-wrapper": true,
|
|
45
|
+
"controls-wrapper--visible": s.shouldShowControls,
|
|
46
|
+
"fw-controls-wrapper": true,
|
|
47
|
+
})}
|
|
48
|
+
>
|
|
49
|
+
<div class="bar fw-control-bar">
|
|
50
|
+
<!-- Seek bar -->
|
|
51
|
+
<fw-seek-bar
|
|
52
|
+
.currentTime=${s.currentTime}
|
|
53
|
+
.duration=${s.duration}
|
|
54
|
+
.disabled=${disabled}
|
|
55
|
+
.isLive=${this.isContentLive}
|
|
56
|
+
@fw-seek=${(e) => this.pc.seek(e.detail.time)}
|
|
57
|
+
></fw-seek-bar>
|
|
58
|
+
|
|
59
|
+
<!-- Button row -->
|
|
60
|
+
<div class="row">
|
|
61
|
+
<div class="group fw-control-group">
|
|
62
|
+
<!-- Play/Pause -->
|
|
63
|
+
<button
|
|
64
|
+
class="btn fw-btn-flush"
|
|
65
|
+
type="button"
|
|
66
|
+
?disabled=${disabled}
|
|
67
|
+
@click=${() => this.pc.togglePlay()}
|
|
68
|
+
aria-label="${s.isPlaying ? "Pause" : "Play"}"
|
|
69
|
+
>
|
|
70
|
+
${s.isPlaying ? index.pauseIcon(18) : index.playIcon(18)}
|
|
71
|
+
</button>
|
|
72
|
+
|
|
73
|
+
<!-- Volume -->
|
|
74
|
+
<fw-volume-control .pc=${this.pc}></fw-volume-control>
|
|
75
|
+
|
|
76
|
+
<!-- Time display -->
|
|
77
|
+
${!this.isContentLive
|
|
78
|
+
? lit.html `
|
|
79
|
+
<span class="time fw-time-display">
|
|
80
|
+
${this._formatTime(s.currentTime)} / ${this._formatTime(s.duration)}
|
|
81
|
+
</span>
|
|
82
|
+
`
|
|
83
|
+
: lit.nothing}
|
|
84
|
+
|
|
85
|
+
<!-- Live badge -->
|
|
86
|
+
${this.isContentLive
|
|
87
|
+
? lit.html `
|
|
88
|
+
<button
|
|
89
|
+
class=${classMap_js.classMap({
|
|
90
|
+
"live-badge": true,
|
|
91
|
+
"fw-live-badge": true,
|
|
92
|
+
"live-badge--active": this._isNearLive,
|
|
93
|
+
"fw-live-badge--active": this._isNearLive,
|
|
94
|
+
"live-badge--behind": !this._isNearLive,
|
|
95
|
+
"fw-live-badge--behind": !this._isNearLive,
|
|
96
|
+
})}
|
|
97
|
+
type="button"
|
|
98
|
+
@click=${() => this.pc.jumpToLive()}
|
|
99
|
+
aria-label="Jump to live"
|
|
100
|
+
>
|
|
101
|
+
<span class="live-dot"></span>
|
|
102
|
+
LIVE
|
|
103
|
+
</button>
|
|
104
|
+
`
|
|
105
|
+
: lit.nothing}
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<div class="group fw-control-group">
|
|
109
|
+
<!-- Settings -->
|
|
110
|
+
<div class="settings-anchor">
|
|
111
|
+
<button
|
|
112
|
+
class="btn fw-btn-flush"
|
|
113
|
+
type="button"
|
|
114
|
+
@click=${() => {
|
|
115
|
+
this._settingsOpen = !this._settingsOpen;
|
|
116
|
+
}}
|
|
117
|
+
aria-label="Settings"
|
|
118
|
+
>
|
|
119
|
+
${index.settingsIcon(16)}
|
|
120
|
+
</button>
|
|
121
|
+
<fw-settings-menu .pc=${this.pc} .open=${this._settingsOpen}></fw-settings-menu>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<!-- Fullscreen -->
|
|
125
|
+
<button
|
|
126
|
+
class="btn fw-btn-flush"
|
|
127
|
+
type="button"
|
|
128
|
+
?disabled=${disabled}
|
|
129
|
+
@click=${() => this.pc.toggleFullscreen()}
|
|
130
|
+
aria-label="${s.isFullscreen ? "Exit fullscreen" : "Fullscreen"}"
|
|
131
|
+
>
|
|
132
|
+
${s.isFullscreen ? index.fullscreenExitIcon(16) : index.fullscreenIcon(16)}
|
|
133
|
+
</button>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
`;
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
exports.FwPlayerControls.styles = [
|
|
142
|
+
sharedStyles.sharedStyles,
|
|
143
|
+
utilityStyles.utilityStyles,
|
|
144
|
+
lit.css `
|
|
145
|
+
:host {
|
|
146
|
+
display: contents;
|
|
147
|
+
}
|
|
148
|
+
.controls-wrapper {
|
|
149
|
+
position: absolute;
|
|
150
|
+
bottom: 0;
|
|
151
|
+
left: 0;
|
|
152
|
+
right: 0;
|
|
153
|
+
z-index: 20;
|
|
154
|
+
background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
|
|
155
|
+
padding: 2rem 0.75rem 0.5rem;
|
|
156
|
+
opacity: 0;
|
|
157
|
+
transition: opacity 200ms ease;
|
|
158
|
+
pointer-events: none;
|
|
159
|
+
}
|
|
160
|
+
.controls-wrapper--visible {
|
|
161
|
+
opacity: 1;
|
|
162
|
+
pointer-events: auto;
|
|
163
|
+
}
|
|
164
|
+
.bar {
|
|
165
|
+
display: flex;
|
|
166
|
+
flex-direction: column;
|
|
167
|
+
gap: 0.25rem;
|
|
168
|
+
}
|
|
169
|
+
.row {
|
|
170
|
+
display: flex;
|
|
171
|
+
align-items: center;
|
|
172
|
+
justify-content: space-between;
|
|
173
|
+
gap: 0.25rem;
|
|
174
|
+
}
|
|
175
|
+
.group {
|
|
176
|
+
display: flex;
|
|
177
|
+
align-items: center;
|
|
178
|
+
gap: 0.125rem;
|
|
179
|
+
}
|
|
180
|
+
.btn {
|
|
181
|
+
display: flex;
|
|
182
|
+
align-items: center;
|
|
183
|
+
justify-content: center;
|
|
184
|
+
width: 2rem;
|
|
185
|
+
height: 2rem;
|
|
186
|
+
background: none;
|
|
187
|
+
border: none;
|
|
188
|
+
color: rgb(255 255 255 / 0.8);
|
|
189
|
+
cursor: pointer;
|
|
190
|
+
padding: 0;
|
|
191
|
+
border-radius: 0.25rem;
|
|
192
|
+
transition: color 150ms;
|
|
193
|
+
}
|
|
194
|
+
.btn:hover {
|
|
195
|
+
color: white;
|
|
196
|
+
}
|
|
197
|
+
.btn:disabled {
|
|
198
|
+
opacity: 0.4;
|
|
199
|
+
cursor: not-allowed;
|
|
200
|
+
}
|
|
201
|
+
.time {
|
|
202
|
+
font-size: 0.6875rem;
|
|
203
|
+
color: rgb(255 255 255 / 0.7);
|
|
204
|
+
font-variant-numeric: tabular-nums;
|
|
205
|
+
padding: 0 0.375rem;
|
|
206
|
+
white-space: nowrap;
|
|
207
|
+
}
|
|
208
|
+
.live-badge {
|
|
209
|
+
display: inline-flex;
|
|
210
|
+
align-items: center;
|
|
211
|
+
gap: 0.375rem;
|
|
212
|
+
padding: 0.125rem 0.5rem;
|
|
213
|
+
border-radius: 0.25rem;
|
|
214
|
+
font-size: 0.6875rem;
|
|
215
|
+
font-weight: 600;
|
|
216
|
+
text-transform: uppercase;
|
|
217
|
+
letter-spacing: 0.025em;
|
|
218
|
+
cursor: pointer;
|
|
219
|
+
border: none;
|
|
220
|
+
background: none;
|
|
221
|
+
transition: color 150ms;
|
|
222
|
+
}
|
|
223
|
+
.live-badge--active {
|
|
224
|
+
color: hsl(var(--tn-red, 348 74% 64%));
|
|
225
|
+
}
|
|
226
|
+
.live-badge--behind {
|
|
227
|
+
color: rgb(255 255 255 / 0.5);
|
|
228
|
+
}
|
|
229
|
+
.live-dot {
|
|
230
|
+
width: 6px;
|
|
231
|
+
height: 6px;
|
|
232
|
+
border-radius: 50%;
|
|
233
|
+
background: currentColor;
|
|
234
|
+
}
|
|
235
|
+
.settings-anchor {
|
|
236
|
+
position: relative;
|
|
237
|
+
}
|
|
238
|
+
`,
|
|
239
|
+
];
|
|
240
|
+
tslib_es6.__decorate([
|
|
241
|
+
decorators_js.property({ attribute: false })
|
|
242
|
+
], exports.FwPlayerControls.prototype, "pc", void 0);
|
|
243
|
+
tslib_es6.__decorate([
|
|
244
|
+
decorators_js.property({ type: String })
|
|
245
|
+
], exports.FwPlayerControls.prototype, "playbackMode", void 0);
|
|
246
|
+
tslib_es6.__decorate([
|
|
247
|
+
decorators_js.property({ type: Boolean, attribute: "is-content-live" })
|
|
248
|
+
], exports.FwPlayerControls.prototype, "isContentLive", void 0);
|
|
249
|
+
tslib_es6.__decorate([
|
|
250
|
+
decorators_js.property({ type: Boolean, attribute: "is-stats-open" })
|
|
251
|
+
], exports.FwPlayerControls.prototype, "isStatsOpen", void 0);
|
|
252
|
+
tslib_es6.__decorate([
|
|
253
|
+
decorators_js.state()
|
|
254
|
+
], exports.FwPlayerControls.prototype, "_settingsOpen", void 0);
|
|
255
|
+
exports.FwPlayerControls = tslib_es6.__decorate([
|
|
256
|
+
decorators_js.customElement("fw-player-controls")
|
|
257
|
+
], exports.FwPlayerControls);
|
|
258
|
+
//# sourceMappingURL=fw-player-controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fw-player-controls.js","sources":["../../../../src/components/fw-player-controls.ts"],"sourcesContent":["/**\n * <fw-player-controls> — Control bar with play/pause, seek, volume, quality, fullscreen.\n * Port of PlayerControls.tsx from player-react.\n */\nimport { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport {\n playIcon,\n pauseIcon,\n fullscreenIcon,\n fullscreenExitIcon,\n settingsIcon,\n seekToLiveIcon,\n} from \"../icons/index.js\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\nimport type { PlaybackMode } from \"@livepeer-frameworks/player-core\";\n\n@customElement(\"fw-player-controls\")\nexport class FwPlayerControls extends LitElement {\n @property({ attribute: false }) pc!: PlayerControllerHost;\n @property({ type: String }) playbackMode: PlaybackMode = \"auto\";\n @property({ type: Boolean, attribute: \"is-content-live\" }) isContentLive = false;\n @property({ type: Boolean, attribute: \"is-stats-open\" }) isStatsOpen = false;\n\n @state() private _settingsOpen = false;\n\n static styles = [\n sharedStyles,\n utilityStyles,\n css`\n :host {\n display: contents;\n }\n .controls-wrapper {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 20;\n background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);\n padding: 2rem 0.75rem 0.5rem;\n opacity: 0;\n transition: opacity 200ms ease;\n pointer-events: none;\n }\n .controls-wrapper--visible {\n opacity: 1;\n pointer-events: auto;\n }\n .bar {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n .row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.25rem;\n }\n .group {\n display: flex;\n align-items: center;\n gap: 0.125rem;\n }\n .btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n background: none;\n border: none;\n color: rgb(255 255 255 / 0.8);\n cursor: pointer;\n padding: 0;\n border-radius: 0.25rem;\n transition: color 150ms;\n }\n .btn:hover {\n color: white;\n }\n .btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n .time {\n font-size: 0.6875rem;\n color: rgb(255 255 255 / 0.7);\n font-variant-numeric: tabular-nums;\n padding: 0 0.375rem;\n white-space: nowrap;\n }\n .live-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.125rem 0.5rem;\n border-radius: 0.25rem;\n font-size: 0.6875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.025em;\n cursor: pointer;\n border: none;\n background: none;\n transition: color 150ms;\n }\n .live-badge--active {\n color: hsl(var(--tn-red, 348 74% 64%));\n }\n .live-badge--behind {\n color: rgb(255 255 255 / 0.5);\n }\n .live-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: currentColor;\n }\n .settings-anchor {\n position: relative;\n }\n `,\n ];\n\n private _formatTime(seconds: number): string {\n if (!isFinite(seconds) || isNaN(seconds)) return \"0:00\";\n const abs = Math.abs(Math.floor(seconds));\n const h = Math.floor(abs / 3600);\n const m = Math.floor((abs % 3600) / 60);\n const s = abs % 60;\n if (h > 0) return `${h}:${String(m).padStart(2, \"0\")}:${String(s).padStart(2, \"0\")}`;\n return `${m}:${String(s).padStart(2, \"0\")}`;\n }\n\n private get _isNearLive(): boolean {\n if (!this.isContentLive) return false;\n const { currentTime, duration } = this.pc.s;\n if (!isFinite(duration) || duration <= 0) return true;\n return duration - currentTime < 10;\n }\n\n protected render() {\n const s = this.pc.s;\n const disabled = !s.videoElement;\n\n return html`\n <div\n class=${classMap({\n \"controls-wrapper\": true,\n \"controls-wrapper--visible\": s.shouldShowControls,\n \"fw-controls-wrapper\": true,\n })}\n >\n <div class=\"bar fw-control-bar\">\n <!-- Seek bar -->\n <fw-seek-bar\n .currentTime=${s.currentTime}\n .duration=${s.duration}\n .disabled=${disabled}\n .isLive=${this.isContentLive}\n @fw-seek=${(e: CustomEvent) => this.pc.seek(e.detail.time)}\n ></fw-seek-bar>\n\n <!-- Button row -->\n <div class=\"row\">\n <div class=\"group fw-control-group\">\n <!-- Play/Pause -->\n <button\n class=\"btn fw-btn-flush\"\n type=\"button\"\n ?disabled=${disabled}\n @click=${() => this.pc.togglePlay()}\n aria-label=\"${s.isPlaying ? \"Pause\" : \"Play\"}\"\n >\n ${s.isPlaying ? pauseIcon(18) : playIcon(18)}\n </button>\n\n <!-- Volume -->\n <fw-volume-control .pc=${this.pc}></fw-volume-control>\n\n <!-- Time display -->\n ${!this.isContentLive\n ? html`\n <span class=\"time fw-time-display\">\n ${this._formatTime(s.currentTime)} / ${this._formatTime(s.duration)}\n </span>\n `\n : nothing}\n\n <!-- Live badge -->\n ${this.isContentLive\n ? html`\n <button\n class=${classMap({\n \"live-badge\": true,\n \"fw-live-badge\": true,\n \"live-badge--active\": this._isNearLive,\n \"fw-live-badge--active\": this._isNearLive,\n \"live-badge--behind\": !this._isNearLive,\n \"fw-live-badge--behind\": !this._isNearLive,\n })}\n type=\"button\"\n @click=${() => this.pc.jumpToLive()}\n aria-label=\"Jump to live\"\n >\n <span class=\"live-dot\"></span>\n LIVE\n </button>\n `\n : nothing}\n </div>\n\n <div class=\"group fw-control-group\">\n <!-- Settings -->\n <div class=\"settings-anchor\">\n <button\n class=\"btn fw-btn-flush\"\n type=\"button\"\n @click=${() => {\n this._settingsOpen = !this._settingsOpen;\n }}\n aria-label=\"Settings\"\n >\n ${settingsIcon(16)}\n </button>\n <fw-settings-menu .pc=${this.pc} .open=${this._settingsOpen}></fw-settings-menu>\n </div>\n\n <!-- Fullscreen -->\n <button\n class=\"btn fw-btn-flush\"\n type=\"button\"\n ?disabled=${disabled}\n @click=${() => this.pc.toggleFullscreen()}\n aria-label=\"${s.isFullscreen ? \"Exit fullscreen\" : \"Fullscreen\"}\"\n >\n ${s.isFullscreen ? fullscreenExitIcon(16) : fullscreenIcon(16)}\n </button>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"fw-player-controls\": FwPlayerControls;\n }\n}\n"],"names":["FwPlayerControls","LitElement","html","classMap","pauseIcon","playIcon","nothing","settingsIcon","fullscreenExitIcon","fullscreenIcon","sharedStyles","utilityStyles","css","__decorate","property","state","customElement"],"mappings":"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"}
|