@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.
Files changed (141) hide show
  1. package/dist/cjs/components/fw-context-menu.js +17 -0
  2. package/dist/cjs/components/fw-context-menu.js.map +1 -0
  3. package/dist/cjs/components/fw-dev-mode-panel.js +273 -0
  4. package/dist/cjs/components/fw-dev-mode-panel.js.map +1 -0
  5. package/dist/cjs/components/fw-error-overlay.js +101 -0
  6. package/dist/cjs/components/fw-error-overlay.js.map +1 -0
  7. package/dist/cjs/components/fw-idle-screen.js +182 -0
  8. package/dist/cjs/components/fw-idle-screen.js.map +1 -0
  9. package/dist/cjs/components/fw-loading-spinner.js +62 -0
  10. package/dist/cjs/components/fw-loading-spinner.js.map +1 -0
  11. package/dist/cjs/components/fw-player-controls.js +258 -0
  12. package/dist/cjs/components/fw-player-controls.js.map +1 -0
  13. package/dist/cjs/components/fw-player.js +570 -0
  14. package/dist/cjs/components/fw-player.js.map +1 -0
  15. package/dist/cjs/components/fw-seek-bar.js +233 -0
  16. package/dist/cjs/components/fw-seek-bar.js.map +1 -0
  17. package/dist/cjs/components/fw-settings-menu.js +126 -0
  18. package/dist/cjs/components/fw-settings-menu.js.map +1 -0
  19. package/dist/cjs/components/fw-skip-indicator.js +143 -0
  20. package/dist/cjs/components/fw-skip-indicator.js.map +1 -0
  21. package/dist/cjs/components/fw-speed-indicator.js +61 -0
  22. package/dist/cjs/components/fw-speed-indicator.js.map +1 -0
  23. package/dist/cjs/components/fw-stats-panel.js +141 -0
  24. package/dist/cjs/components/fw-stats-panel.js.map +1 -0
  25. package/dist/cjs/components/fw-subtitle-renderer.js +70 -0
  26. package/dist/cjs/components/fw-subtitle-renderer.js.map +1 -0
  27. package/dist/cjs/components/fw-title-overlay.js +72 -0
  28. package/dist/cjs/components/fw-title-overlay.js.map +1 -0
  29. package/dist/cjs/components/fw-toast.js +74 -0
  30. package/dist/cjs/components/fw-toast.js.map +1 -0
  31. package/dist/cjs/components/fw-volume-control.js +140 -0
  32. package/dist/cjs/components/fw-volume-control.js.map +1 -0
  33. package/dist/cjs/controllers/player-controller-host.js +315 -0
  34. package/dist/cjs/controllers/player-controller-host.js.map +1 -0
  35. package/dist/cjs/define.js +45 -0
  36. package/dist/cjs/define.js.map +1 -0
  37. package/dist/cjs/icons/index.js +153 -0
  38. package/dist/cjs/icons/index.js.map +1 -0
  39. package/dist/cjs/index.js +88 -0
  40. package/dist/cjs/index.js.map +1 -0
  41. 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
  42. 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
  43. package/dist/cjs/styles/shared-styles.js +1967 -0
  44. package/dist/cjs/styles/shared-styles.js.map +1 -0
  45. package/dist/cjs/styles/utility-styles.js +725 -0
  46. package/dist/cjs/styles/utility-styles.js.map +1 -0
  47. package/dist/esm/components/fw-context-menu.js +17 -0
  48. package/dist/esm/components/fw-context-menu.js.map +1 -0
  49. package/dist/esm/components/fw-dev-mode-panel.js +273 -0
  50. package/dist/esm/components/fw-dev-mode-panel.js.map +1 -0
  51. package/dist/esm/components/fw-error-overlay.js +101 -0
  52. package/dist/esm/components/fw-error-overlay.js.map +1 -0
  53. package/dist/esm/components/fw-idle-screen.js +182 -0
  54. package/dist/esm/components/fw-idle-screen.js.map +1 -0
  55. package/dist/esm/components/fw-loading-spinner.js +62 -0
  56. package/dist/esm/components/fw-loading-spinner.js.map +1 -0
  57. package/dist/esm/components/fw-player-controls.js +258 -0
  58. package/dist/esm/components/fw-player-controls.js.map +1 -0
  59. package/dist/esm/components/fw-player.js +570 -0
  60. package/dist/esm/components/fw-player.js.map +1 -0
  61. package/dist/esm/components/fw-seek-bar.js +233 -0
  62. package/dist/esm/components/fw-seek-bar.js.map +1 -0
  63. package/dist/esm/components/fw-settings-menu.js +126 -0
  64. package/dist/esm/components/fw-settings-menu.js.map +1 -0
  65. package/dist/esm/components/fw-skip-indicator.js +143 -0
  66. package/dist/esm/components/fw-skip-indicator.js.map +1 -0
  67. package/dist/esm/components/fw-speed-indicator.js +61 -0
  68. package/dist/esm/components/fw-speed-indicator.js.map +1 -0
  69. package/dist/esm/components/fw-stats-panel.js +141 -0
  70. package/dist/esm/components/fw-stats-panel.js.map +1 -0
  71. package/dist/esm/components/fw-subtitle-renderer.js +70 -0
  72. package/dist/esm/components/fw-subtitle-renderer.js.map +1 -0
  73. package/dist/esm/components/fw-title-overlay.js +72 -0
  74. package/dist/esm/components/fw-title-overlay.js.map +1 -0
  75. package/dist/esm/components/fw-toast.js +74 -0
  76. package/dist/esm/components/fw-toast.js.map +1 -0
  77. package/dist/esm/components/fw-volume-control.js +140 -0
  78. package/dist/esm/components/fw-volume-control.js.map +1 -0
  79. package/dist/esm/controllers/player-controller-host.js +313 -0
  80. package/dist/esm/controllers/player-controller-host.js.map +1 -0
  81. package/dist/esm/define.js +43 -0
  82. package/dist/esm/define.js.map +1 -0
  83. package/dist/esm/icons/index.js +141 -0
  84. package/dist/esm/icons/index.js.map +1 -0
  85. package/dist/esm/index.js +18 -0
  86. package/dist/esm/index.js.map +1 -0
  87. 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
  88. 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
  89. package/dist/esm/styles/shared-styles.js +1965 -0
  90. package/dist/esm/styles/shared-styles.js.map +1 -0
  91. package/dist/esm/styles/utility-styles.js +723 -0
  92. package/dist/esm/styles/utility-styles.js.map +1 -0
  93. package/dist/fw-player.iife.js +4362 -0
  94. package/dist/fw-player.iife.js.map +1 -0
  95. package/dist/types/components/fw-context-menu.d.ts +15 -0
  96. package/dist/types/components/fw-dev-mode-panel.d.ts +24 -0
  97. package/dist/types/components/fw-error-overlay.d.ts +14 -0
  98. package/dist/types/components/fw-idle-screen.d.ts +13 -0
  99. package/dist/types/components/fw-loading-spinner.d.ts +10 -0
  100. package/dist/types/components/fw-player-controls.d.ts +23 -0
  101. package/dist/types/components/fw-player.d.ts +74 -0
  102. package/dist/types/components/fw-seek-bar.d.ts +33 -0
  103. package/dist/types/components/fw-settings-menu.d.ts +16 -0
  104. package/dist/types/components/fw-skip-indicator.d.ts +18 -0
  105. package/dist/types/components/fw-speed-indicator.d.ts +11 -0
  106. package/dist/types/components/fw-stats-panel.d.ts +18 -0
  107. package/dist/types/components/fw-subtitle-renderer.d.ts +21 -0
  108. package/dist/types/components/fw-title-overlay.d.ts +12 -0
  109. package/dist/types/components/fw-toast.d.ts +12 -0
  110. package/dist/types/components/fw-volume-control.d.ts +18 -0
  111. package/dist/types/controllers/player-controller-host.d.ts +119 -0
  112. package/dist/types/define.d.ts +1 -0
  113. package/dist/types/icons/index.d.ts +23 -0
  114. package/dist/types/iife-entry.d.ts +11 -0
  115. package/dist/types/index.d.ts +25 -0
  116. package/dist/types/styles/shared-styles.d.ts +1 -0
  117. package/dist/types/styles/utility-styles.d.ts +1 -0
  118. package/package.json +65 -0
  119. package/src/components/fw-context-menu.ts +23 -0
  120. package/src/components/fw-dev-mode-panel.ts +285 -0
  121. package/src/components/fw-error-overlay.ts +96 -0
  122. package/src/components/fw-idle-screen.ts +182 -0
  123. package/src/components/fw-loading-spinner.ts +63 -0
  124. package/src/components/fw-player-controls.ts +256 -0
  125. package/src/components/fw-player.ts +557 -0
  126. package/src/components/fw-seek-bar.ts +219 -0
  127. package/src/components/fw-settings-menu.ts +128 -0
  128. package/src/components/fw-skip-indicator.ts +139 -0
  129. package/src/components/fw-speed-indicator.ts +57 -0
  130. package/src/components/fw-stats-panel.ts +154 -0
  131. package/src/components/fw-subtitle-renderer.ts +65 -0
  132. package/src/components/fw-title-overlay.ts +64 -0
  133. package/src/components/fw-toast.ts +70 -0
  134. package/src/components/fw-volume-control.ts +140 -0
  135. package/src/controllers/player-controller-host.ts +457 -0
  136. package/src/define.ts +43 -0
  137. package/src/icons/index.ts +209 -0
  138. package/src/iife-entry.ts +11 -0
  139. package/src/index.ts +31 -0
  140. package/src/styles/shared-styles.ts +1962 -0
  141. 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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"}