@norskvideo/moq-watch 0.1.8 → 0.2.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 +43 -31
- package/audio/config.d.ts +19 -0
- package/audio/config.d.ts.map +1 -0
- package/audio/decoder.d.ts +9 -2
- package/audio/decoder.d.ts.map +1 -1
- package/audio/emitter.d.ts +6 -1
- package/audio/emitter.d.ts.map +1 -1
- package/audio/latency.d.ts +11 -0
- package/audio/latency.d.ts.map +1 -0
- package/audio/ring-buffer.d.ts.map +1 -1
- package/audio/shared-ring-buffer.d.ts +8 -1
- package/audio/shared-ring-buffer.d.ts.map +1 -1
- package/audio/source.d.ts.map +1 -1
- package/audio/terminal.d.ts +1 -0
- package/audio/terminal.d.ts.map +1 -1
- package/broadcast.d.ts +19 -5
- package/broadcast.d.ts.map +1 -1
- package/duration.d.ts +2 -0
- package/duration.d.ts.map +1 -0
- package/element.d.ts +50 -26
- package/element.d.ts.map +1 -1
- package/element.js +142 -160
- package/element.js.map +1 -1
- package/index.d.ts +4 -2
- package/index.d.ts.map +1 -1
- package/index.js +25 -17
- package/index.js.map +1 -1
- package/media.d.ts +2 -0
- package/media.d.ts.map +1 -0
- package/msf.d.ts.map +1 -1
- package/package.json +12 -7
- package/player-C19uf7Dc.js +2172 -0
- package/player-C19uf7Dc.js.map +1 -0
- package/player.d.ts +78 -0
- package/player.d.ts.map +1 -0
- package/sync.d.ts +27 -41
- package/sync.d.ts.map +1 -1
- package/text/index.d.ts +9 -0
- package/text/index.d.ts.map +1 -0
- package/text/renderer.d.ts +31 -0
- package/text/renderer.d.ts.map +1 -0
- package/text/source.d.ts +30 -0
- package/text/source.d.ts.map +1 -0
- package/ui/components/captions-button.d.ts +11 -0
- package/ui/components/captions-button.d.ts.map +1 -0
- package/ui/components/captions.d.ts +5 -0
- package/ui/components/captions.d.ts.map +1 -0
- package/ui/components/control-bar.d.ts.map +1 -1
- package/ui/components/hidden-indicator.d.ts +5 -0
- package/ui/components/hidden-indicator.d.ts.map +1 -0
- package/ui/components/latency.d.ts +1 -1
- package/ui/components/latency.d.ts.map +1 -1
- package/ui/components/settings-panel.d.ts.map +1 -1
- package/ui/element.d.ts.map +1 -1
- package/ui/element.js +257 -193
- package/ui/element.js.map +1 -1
- package/ui/icons.d.ts +2 -1
- package/ui/icons.d.ts.map +1 -1
- package/ui/state.d.ts +1 -1
- package/ui/state.d.ts.map +1 -1
- package/video/decoder.d.ts +10 -11
- package/video/decoder.d.ts.map +1 -1
- package/video/playhead.d.ts +14 -4
- package/video/playhead.d.ts.map +1 -1
- package/video/renderer.d.ts +6 -1
- package/video/renderer.d.ts.map +1 -1
- package/video/source.d.ts +1 -1
- package/video/source.d.ts.map +1 -1
- package/audio/subscription.d.ts +0 -10
- package/audio/subscription.d.ts.map +0 -1
- package/audio/unlock.d.ts +0 -20
- package/audio/unlock.d.ts.map +0 -1
- package/source-BeABanvB.js +0 -1723
- package/source-BeABanvB.js.map +0 -1
- package/sync-DNQkgnlX.js +0 -132
- package/sync-DNQkgnlX.js.map +0 -1
package/ui/element.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import * as i from "@norskvideo/moq-signals/dom";
|
|
1
|
+
import * as e from "@norskvideo/moq-net";
|
|
2
|
+
import { Effect as t, Signal as n } from "@norskvideo/moq-signals";
|
|
3
|
+
import * as r from "@norskvideo/moq-signals/dom";
|
|
5
4
|
//#region src/ui/components/buffering-indicator.ts
|
|
6
|
-
function
|
|
5
|
+
function i(e, t) {
|
|
7
6
|
let n = document.createElement("div");
|
|
8
7
|
n.className = "buffering";
|
|
9
8
|
let r = document.createElement("div");
|
|
@@ -14,7 +13,7 @@ function a(e, t) {
|
|
|
14
13
|
}
|
|
15
14
|
//#endregion
|
|
16
15
|
//#region src/ui/icons/audio.svg?raw
|
|
17
|
-
var
|
|
16
|
+
var a = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M9 18V5l12-2v13\" />\n <circle cx=\"6\" cy=\"18\" r=\"3\" />\n <circle cx=\"18\" cy=\"16\" r=\"3\" />\n</svg>", o = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" ry=\"2\" />\n <path d=\"M7 15h4M15 15h2M7 11h2M13 11h4\" />\n</svg>\n", s = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 6 9 17l-5-5\" />\n</svg>\n", c = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n</svg>\n", l = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M8 3H5a2 2 0 0 0-2 2v3\" />\n <path d=\"M21 8V5a2 2 0 0 0-2-2h-3\" />\n <path d=\"M3 16v3a2 2 0 0 0 2 2h3\" />\n <path d=\"M16 21h3a2 2 0 0 0 2-2v-3\" />\n</svg>", u = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M8 3v3a2 2 0 0 1-2 2H3\" />\n <path d=\"M21 8h-3a2 2 0 0 1-2-2V3\" />\n <path d=\"M3 16h3a2 2 0 0 1 2 2v3\" />\n <path d=\"M16 21v-3a2 2 0 0 1 2-2h3\" />\n</svg>", d = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m12 14 4-4\" />\n <path d=\"M3.34 19a10 10 0 1 1 17.32 0\" />\n</svg>\n", f = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M16 9a5 5 0 0 1 .95 2.293\" />\n <path d=\"M19.364 5.636a9 9 0 0 1 1.889 9.96\" />\n <path d=\"m2 2 20 20\" />\n <path d=\"m7 7-.587.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298V11\" />\n <path d=\"M9.828 4.172A.686.686 0 0 1 11 4.657v.686\" />\n</svg>", p = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M16.247 7.761a6 6 0 0 1 0 8.478\" />\n <path d=\"M19.075 4.933a10 10 0 0 1 0 14.134\" />\n <path d=\"M4.925 19.067a10 10 0 0 1 0-14.134\" />\n <path d=\"M7.753 16.239a6 6 0 0 1 0-8.478\" />\n <circle cx=\"12\" cy=\"12\" r=\"2\" />\n</svg>", m = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"14\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" />\n <rect x=\"5\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" />\n</svg>", h = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z\" />\n</svg>", g = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"21\" x2=\"14\" y1=\"4\" y2=\"4\" />\n <line x1=\"10\" x2=\"3\" y1=\"4\" y2=\"4\" />\n <line x1=\"21\" x2=\"12\" y1=\"12\" y2=\"12\" />\n <line x1=\"8\" x2=\"3\" y1=\"12\" y2=\"12\" />\n <line x1=\"21\" x2=\"16\" y1=\"20\" y2=\"20\" />\n <line x1=\"12\" x2=\"3\" y1=\"20\" y2=\"20\" />\n <line x1=\"14\" x2=\"14\" y1=\"2\" y2=\"6\" />\n <line x1=\"8\" x2=\"8\" y1=\"10\" y2=\"14\" />\n <line x1=\"16\" x2=\"16\" y1=\"18\" y2=\"22\" />\n</svg>\n", _ = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 21v-6\" />\n <path d=\"M12 21V3\" />\n <path d=\"M19 21V9\" />\n</svg>", v = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5\" />\n <rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\" />\n</svg>", y = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\" />\n <path d=\"M16 9a5 5 0 0 1 0 6\" />\n <path d=\"M19.364 18.364a9 9 0 0 0 0-12.728\" />\n</svg>", b = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\" />\n</svg>", x = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"var(--color-white)\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\" />\n <path d=\"M16 9a5 5 0 0 1 0 6\" />\n</svg>";
|
|
18
17
|
//#endregion
|
|
19
18
|
//#region src/ui/icons.ts
|
|
20
19
|
function S(e) {
|
|
@@ -33,14 +32,32 @@ function C(e, t) {
|
|
|
33
32
|
}), n;
|
|
34
33
|
}
|
|
35
34
|
//#endregion
|
|
36
|
-
//#region src/ui/
|
|
37
|
-
|
|
35
|
+
//#region src/ui/components/button.ts
|
|
36
|
+
function w(e, t) {
|
|
37
|
+
let n = document.createElement("button");
|
|
38
|
+
return n.type = "button", n.className = "control flex-center", n.title = t, n.setAttribute("aria-label", t), n.replaceChildren(S(e)), n;
|
|
39
|
+
}
|
|
40
|
+
//#endregion
|
|
41
|
+
//#region src/ui/components/captions-button.ts
|
|
38
42
|
function T(e, t) {
|
|
43
|
+
let n = w(o, "Captions");
|
|
44
|
+
return e.run((e) => {
|
|
45
|
+
let r = Object.keys(e.get(t.text.out.available)), i = e.get(t.controls.captions) !== void 0;
|
|
46
|
+
n.style.display = r.length === 0 ? "none" : "", n.classList.toggle("control--active", i), n.title = i ? "Turn off captions" : "Turn on captions", n.setAttribute("aria-label", n.title), n.setAttribute("aria-pressed", String(i));
|
|
47
|
+
}), e.event(n, "click", () => {
|
|
48
|
+
let e = Object.keys(t.text.out.available.peek()).at(0);
|
|
49
|
+
t.captions = t.controls.captions.peek() === void 0 ? e : void 0;
|
|
50
|
+
}), n;
|
|
51
|
+
}
|
|
52
|
+
//#endregion
|
|
53
|
+
//#region src/ui/fullscreen.ts
|
|
54
|
+
var E = "player--pseudo-fullscreen";
|
|
55
|
+
function D(e, t) {
|
|
39
56
|
let n = document, r = /* @__PURE__ */ new Set(), i = () => {
|
|
40
57
|
for (let e of r) e();
|
|
41
58
|
};
|
|
42
59
|
e.event(document, "fullscreenchange", i), e.event(document, "webkitfullscreenchange", i);
|
|
43
|
-
let a = () => !!(document.fullscreenElement || n.webkitFullscreenElement), o = () => t.classList.contains(
|
|
60
|
+
let a = () => !!(document.fullscreenElement || n.webkitFullscreenElement), o = () => t.classList.contains(E), s = () => a() || o(), c = () => {
|
|
44
61
|
let e = t;
|
|
45
62
|
if (e.requestFullscreen) {
|
|
46
63
|
e.requestFullscreen().catch(() => u());
|
|
@@ -62,9 +79,9 @@ function T(e, t) {
|
|
|
62
79
|
}
|
|
63
80
|
n.webkitExitFullscreen?.();
|
|
64
81
|
}, u = () => {
|
|
65
|
-
t.classList.add(
|
|
82
|
+
t.classList.add(E), i();
|
|
66
83
|
}, d = () => {
|
|
67
|
-
t.classList.remove(
|
|
84
|
+
t.classList.remove(E), i();
|
|
68
85
|
};
|
|
69
86
|
return {
|
|
70
87
|
active: s,
|
|
@@ -73,15 +90,9 @@ function T(e, t) {
|
|
|
73
90
|
};
|
|
74
91
|
}
|
|
75
92
|
//#endregion
|
|
76
|
-
//#region src/ui/components/button.ts
|
|
77
|
-
function E(e, t) {
|
|
78
|
-
let n = document.createElement("button");
|
|
79
|
-
return n.type = "button", n.className = "control flex-center", n.title = t, n.setAttribute("aria-label", t), n.replaceChildren(S(e)), n;
|
|
80
|
-
}
|
|
81
|
-
//#endregion
|
|
82
93
|
//#region src/ui/components/fullscreen-button.ts
|
|
83
|
-
function
|
|
84
|
-
let n =
|
|
94
|
+
function O(e, t) {
|
|
95
|
+
let n = w(l, "Fullscreen"), r = D(e, t), i = () => {
|
|
85
96
|
let e = r.active();
|
|
86
97
|
n.replaceChildren(S(e ? u : l)), n.title = e ? "Exit fullscreen" : "Fullscreen", n.setAttribute("aria-label", n.title);
|
|
87
98
|
};
|
|
@@ -89,10 +100,10 @@ function D(e, t) {
|
|
|
89
100
|
}
|
|
90
101
|
//#endregion
|
|
91
102
|
//#region src/ui/format.ts
|
|
92
|
-
function
|
|
103
|
+
function k(e) {
|
|
93
104
|
return e >= 1e6 ? `${(e / 1e6).toFixed(1)} Mbps` : e >= 1e3 ? `${(e / 1e3).toFixed(0)} kbps` : `${Math.round(e)} bps`;
|
|
94
105
|
}
|
|
95
|
-
function
|
|
106
|
+
function A(e) {
|
|
96
107
|
return e < 1e3 ? `${Math.round(e)} ms` : `${(e / 1e3).toFixed(2)} s`;
|
|
97
108
|
}
|
|
98
109
|
function ee(e) {
|
|
@@ -103,7 +114,7 @@ function te(e) {
|
|
|
103
114
|
}
|
|
104
115
|
//#endregion
|
|
105
116
|
//#region src/ui/components/live-badge.ts
|
|
106
|
-
function
|
|
117
|
+
function j(e, t, n) {
|
|
107
118
|
return e ? t === "disconnected" ? {
|
|
108
119
|
variant: "error",
|
|
109
120
|
text: "Disconnected"
|
|
@@ -127,7 +138,7 @@ function A(e, t, n) {
|
|
|
127
138
|
text: "No URL"
|
|
128
139
|
};
|
|
129
140
|
}
|
|
130
|
-
function
|
|
141
|
+
function M(e, t, n) {
|
|
131
142
|
let r = document.createElement("button");
|
|
132
143
|
r.type = "button", r.className = "badge flex-align-center", r.title = "Latency settings";
|
|
133
144
|
let i = document.createElement("span");
|
|
@@ -136,19 +147,19 @@ function j(e, t, n) {
|
|
|
136
147
|
a.className = "badge-text";
|
|
137
148
|
let o = document.createElement("span");
|
|
138
149
|
return o.className = "badge-latency", r.append(i, a, o), e.run((e) => {
|
|
139
|
-
let n = e.get(t.connection.url), i = e.get(t.connection.status), o = e.get(t.broadcast.out.status), { variant: s, text: c } =
|
|
150
|
+
let n = e.get(t.connection.url), i = e.get(t.connection.status), o = e.get(t.broadcast.out.status), { variant: s, text: c } = j(n, i, o);
|
|
140
151
|
r.style.display = o === "offline" ? "none" : "", r.dataset.variant = s, a.textContent = c.toUpperCase();
|
|
141
152
|
}), e.run((e) => {
|
|
142
|
-
let n = e.get(t.sync.out.
|
|
143
|
-
o.textContent = `+${
|
|
153
|
+
let n = e.get(t.sync.out.delay);
|
|
154
|
+
o.textContent = `+${A(n)} latency`;
|
|
144
155
|
}), e.event(r, "click", () => {
|
|
145
156
|
n.tab.set("latency"), n.panel.set(!0);
|
|
146
157
|
}), r;
|
|
147
158
|
}
|
|
148
159
|
//#endregion
|
|
149
160
|
//#region src/ui/components/play-pause.ts
|
|
150
|
-
function
|
|
151
|
-
let n =
|
|
161
|
+
function N(e, t) {
|
|
162
|
+
let n = w(h, "Play");
|
|
152
163
|
return e.run((e) => {
|
|
153
164
|
let r = e.get(t.controls.paused);
|
|
154
165
|
n.title = r ? "Play" : "Pause", n.setAttribute("aria-label", n.title), n.replaceChildren(S(r ? h : m));
|
|
@@ -158,8 +169,8 @@ function M(e, t) {
|
|
|
158
169
|
}
|
|
159
170
|
//#endregion
|
|
160
171
|
//#region src/ui/components/settings-button.ts
|
|
161
|
-
function
|
|
162
|
-
let n =
|
|
172
|
+
function P(e, t) {
|
|
173
|
+
let n = w(g, "Settings");
|
|
163
174
|
return e.run((e) => {
|
|
164
175
|
let r = e.get(t.panel);
|
|
165
176
|
n.classList.toggle("control--active", r), n.title = r ? "Close settings" : "Settings", n.setAttribute("aria-label", n.title), n.setAttribute("aria-expanded", String(r));
|
|
@@ -169,10 +180,10 @@ function N(e, t) {
|
|
|
169
180
|
}
|
|
170
181
|
//#endregion
|
|
171
182
|
//#region src/ui/components/volume-slider.ts
|
|
172
|
-
function
|
|
183
|
+
function ne(e, t) {
|
|
173
184
|
return t || e === 0 ? f : e <= 33 ? b : e <= 66 ? x : y;
|
|
174
185
|
}
|
|
175
|
-
function
|
|
186
|
+
function re(e, t) {
|
|
176
187
|
let n = document.createElement("div");
|
|
177
188
|
n.className = "volume flex-align-center";
|
|
178
189
|
let r = document.createElement("button");
|
|
@@ -180,7 +191,7 @@ function F(e, t) {
|
|
|
180
191
|
let i = document.createElement("input");
|
|
181
192
|
return i.type = "range", i.className = "volume-track", i.min = "0", i.max = "100", i.setAttribute("aria-label", "Volume"), n.append(r, i), e.run((e) => {
|
|
182
193
|
let n = e.get(t.controls.volume), a = e.get(t.controls.muted), o = Math.round(n * 100), s = a ? 0 : o;
|
|
183
|
-
i.value = s.toString(), i.style.setProperty("--fill", `${s}%`), r.title = a ? "Unmute" : "Mute", r.setAttribute("aria-label", r.title), r.replaceChildren(S(
|
|
194
|
+
i.value = s.toString(), i.style.setProperty("--fill", `${s}%`), r.title = a ? "Unmute" : "Mute", r.setAttribute("aria-label", r.title), r.replaceChildren(S(ne(o, a)));
|
|
184
195
|
}), e.event(i, "input", () => {
|
|
185
196
|
let e = Number.parseFloat(i.value) / 100;
|
|
186
197
|
t.controls.volume.set(e), e > 0 && t.controls.muted.set(!1);
|
|
@@ -190,15 +201,28 @@ function F(e, t) {
|
|
|
190
201
|
}
|
|
191
202
|
//#endregion
|
|
192
203
|
//#region src/ui/components/control-bar.ts
|
|
193
|
-
function
|
|
194
|
-
let o =
|
|
195
|
-
a || s.append(
|
|
196
|
-
let c =
|
|
197
|
-
return l.append(
|
|
204
|
+
function ie(e, t, n, i, a = !1) {
|
|
205
|
+
let o = r.create("div", { className: "controls" }), s = r.create("div", { className: "controls-group" });
|
|
206
|
+
a || s.append(N(e, t)), s.append(re(e, t), M(e, t, n));
|
|
207
|
+
let c = r.create("div", { className: "controls-spacer" }), l = r.create("div", { className: "controls-group" });
|
|
208
|
+
return l.append(T(e, t), P(e, n), O(e, i)), o.append(s, c, l), o;
|
|
209
|
+
}
|
|
210
|
+
//#endregion
|
|
211
|
+
//#region src/ui/components/hidden-indicator.ts
|
|
212
|
+
function ae(e, t) {
|
|
213
|
+
let r = document.createElement("div");
|
|
214
|
+
r.className = "watch-ui__notice watch-ui__hidden-indicator", r.setAttribute("role", "status"), r.setAttribute("aria-live", "polite");
|
|
215
|
+
let i = document.createElement("span");
|
|
216
|
+
i.className = "watch-ui__notice-text", r.appendChild(i);
|
|
217
|
+
let a = new n(document.hidden);
|
|
218
|
+
return e.event(document, "visibilitychange", () => a.set(document.hidden)), e.run((e) => {
|
|
219
|
+
let n = !e.get(t.renderer.out.visible), o = !e.get(t.controls.paused), s = e.get(t.video.source.out.catalog) !== void 0, c = e.get(t.broadcast.out.status) !== "offline", l = e.get(t.video.source.out.error) !== "unsupported", u = e.get(t.controls.visible) === "never", d = n && o && s && c && l && !u;
|
|
220
|
+
r.style.display = d ? "" : "none", d && (e.get(a) ? i.textContent = "Video paused while the tab is hidden. Set visible=\"always\" to keep downloading." : i.textContent = "Video paused while off-screen. Set visible=\"always\" to keep downloading.");
|
|
221
|
+
}), r;
|
|
198
222
|
}
|
|
199
223
|
//#endregion
|
|
200
224
|
//#region src/ui/components/offline-indicator.ts
|
|
201
|
-
function
|
|
225
|
+
function oe(e, t) {
|
|
202
226
|
let n = document.createElement("div");
|
|
203
227
|
n.className = "watch-ui__offline-indicator", n.setAttribute("role", "status"), n.setAttribute("aria-live", "polite");
|
|
204
228
|
let r = document.createElement("span");
|
|
@@ -209,8 +233,8 @@ function ne(e, t) {
|
|
|
209
233
|
}
|
|
210
234
|
//#endregion
|
|
211
235
|
//#region src/ui/graph.ts
|
|
212
|
-
var
|
|
213
|
-
function
|
|
236
|
+
var se = 120;
|
|
237
|
+
function F(e, t) {
|
|
214
238
|
let n = document.createElement("canvas").getContext("2d");
|
|
215
239
|
if (!n) return e;
|
|
216
240
|
n.fillStyle = e;
|
|
@@ -222,8 +246,8 @@ function L(e, t) {
|
|
|
222
246
|
let i = r.match(/[\d.]+/g);
|
|
223
247
|
return i && i.length >= 3 ? `rgba(${i[0]}, ${i[1]}, ${i[2]}, ${t})` : e;
|
|
224
248
|
}
|
|
225
|
-
function
|
|
226
|
-
let r = n?.color ?? "#4ade80", i =
|
|
249
|
+
function I(e, t, n) {
|
|
250
|
+
let r = n?.color ?? "#4ade80", i = F(r, .33), a = F(r, 0), o = Number.isFinite(n?.samples) ? Math.max(1, Math.floor(n?.samples)) : se, s = document.createElement("div");
|
|
227
251
|
s.className = "graph";
|
|
228
252
|
let c = document.createElement("div");
|
|
229
253
|
c.className = "graph-header";
|
|
@@ -266,64 +290,64 @@ function R(e, t, n) {
|
|
|
266
290
|
}
|
|
267
291
|
//#endregion
|
|
268
292
|
//#region src/ui/stats.ts
|
|
269
|
-
var
|
|
270
|
-
function
|
|
271
|
-
let
|
|
293
|
+
var L = 250;
|
|
294
|
+
function R(e, t, n) {
|
|
295
|
+
let i = r.create("div", { className: `stat-card stat-card--${e}` }), a = r.create("div", { className: "stat-head" }), o = r.create("div", { className: "stat-icon" });
|
|
272
296
|
o.appendChild(S(n));
|
|
273
|
-
let s =
|
|
297
|
+
let s = r.create("span", {
|
|
274
298
|
className: "stat-status",
|
|
275
299
|
style: { display: "none" }
|
|
276
300
|
});
|
|
277
|
-
a.append(o,
|
|
278
|
-
let c =
|
|
279
|
-
return
|
|
280
|
-
el:
|
|
301
|
+
a.append(o, r.create("span", { className: "stat-title" }, t), s);
|
|
302
|
+
let c = r.create("div", { className: "stat-grid" });
|
|
303
|
+
return i.append(a, c), {
|
|
304
|
+
el: i,
|
|
281
305
|
grid: c,
|
|
282
306
|
status: s
|
|
283
307
|
};
|
|
284
308
|
}
|
|
285
|
-
function
|
|
286
|
-
let n =
|
|
287
|
-
return n.append(
|
|
309
|
+
function z(e, t) {
|
|
310
|
+
let n = r.create("div", { className: "stat-line" }), i = r.create("span", { className: "stat-value" }, "—");
|
|
311
|
+
return n.append(r.create("span", { className: "stat-key" }, t), i), e.appendChild(n), i;
|
|
288
312
|
}
|
|
289
|
-
function
|
|
313
|
+
function B(e, t, n) {
|
|
290
314
|
if (e.bytes <= 0) return;
|
|
291
315
|
let r = n - e.when, i = t - e.bytes;
|
|
292
316
|
if (!(i <= 0 || r <= 0)) return i * 8 * (1e3 / r);
|
|
293
317
|
}
|
|
294
|
-
function
|
|
318
|
+
function V(e) {
|
|
295
319
|
return Object.keys(e?.renditions ?? {}).length > 0;
|
|
296
320
|
}
|
|
297
|
-
function
|
|
321
|
+
function H(e, t, n) {
|
|
298
322
|
t.status.textContent = n.label, e.run((e) => {
|
|
299
|
-
let r =
|
|
323
|
+
let r = V(e.get(n.catalog));
|
|
300
324
|
t.el.style.display = r ? "" : "none", t.status.style.display = r && e.get(n.flag) ? "" : "none";
|
|
301
325
|
});
|
|
302
326
|
}
|
|
303
|
-
function
|
|
304
|
-
let n =
|
|
327
|
+
function U(e, t) {
|
|
328
|
+
let n = r.create("div", { className: "tab-body stats" }), i = R("video", "Video", v), o = z(i.grid, "Resolution"), s = z(i.grid, "Codec"), c = I(e, "Bitrate", {
|
|
305
329
|
color: "#a855f7",
|
|
306
|
-
format:
|
|
307
|
-
}), l =
|
|
330
|
+
format: k
|
|
331
|
+
}), l = I(e, "Frame rate", {
|
|
308
332
|
color: "#facc15",
|
|
309
333
|
format: te
|
|
310
334
|
});
|
|
311
|
-
|
|
335
|
+
i.el.append(c.el, l.el), H(e, i, {
|
|
312
336
|
catalog: t.video.source.out.catalog,
|
|
313
337
|
flag: t.controls.paused,
|
|
314
338
|
label: "paused"
|
|
315
339
|
});
|
|
316
|
-
let u =
|
|
317
|
-
|
|
340
|
+
let u = R("audio", "Audio", a), d = z(u.grid, "Codec"), f = z(u.grid, "Sample rate"), m = z(u.grid, "Channels"), h = z(u.grid, "Bitrate");
|
|
341
|
+
H(e, u, {
|
|
318
342
|
catalog: t.audio.source.out.catalog,
|
|
319
343
|
flag: t.controls.muted,
|
|
320
344
|
label: "muted"
|
|
321
345
|
});
|
|
322
|
-
let g =
|
|
346
|
+
let g = R("network", "Network", p), _ = z(g.grid, "Estimated max"), y = z(g.grid, "Actual"), b = I(e, "Round trip", {
|
|
323
347
|
color: "#00dfff",
|
|
324
|
-
format: (e) =>
|
|
348
|
+
format: (e) => A(e)
|
|
325
349
|
});
|
|
326
|
-
g.el.append(b.el), n.append(
|
|
350
|
+
g.el.append(b.el), n.append(i.el, u.el, g.el);
|
|
327
351
|
let x = {
|
|
328
352
|
frames: 0,
|
|
329
353
|
bytes: 0,
|
|
@@ -333,14 +357,14 @@ function G(e, t) {
|
|
|
333
357
|
when: performance.now()
|
|
334
358
|
};
|
|
335
359
|
return e.interval(() => {
|
|
336
|
-
let e = performance.now(), n = t.video.source.out.config.peek(), r = t.video.source.out.catalog.peek(), i = t.video.out.stats.peek(),
|
|
337
|
-
|
|
360
|
+
let e = performance.now(), n = t.video.source.out.config.peek(), r = t.video.source.out.catalog.peek(), i = t.video.out.stats.peek(), a = n?.codedWidth ?? r?.display?.width, u = n?.codedHeight ?? r?.display?.height;
|
|
361
|
+
o.textContent = a && u ? `${a}×${u}` : "—", s.textContent = n?.codec ?? "—";
|
|
338
362
|
let p;
|
|
339
363
|
if (i && x.frames > 0) {
|
|
340
364
|
let t = e - x.when, n = i.frameCount - x.frames;
|
|
341
365
|
n > 0 && t > 0 && (p = n / (t / 1e3));
|
|
342
366
|
}
|
|
343
|
-
let g = i ?
|
|
367
|
+
let g = i ? B(x, i.bytesReceived, e) : void 0;
|
|
344
368
|
c.push(g), l.push(p), i && (x = {
|
|
345
369
|
frames: i.frameCount,
|
|
346
370
|
bytes: i.bytesReceived,
|
|
@@ -348,43 +372,78 @@ function G(e, t) {
|
|
|
348
372
|
});
|
|
349
373
|
let v = t.audio.source.out.config.peek(), C = t.audio.out.stats.peek();
|
|
350
374
|
d.textContent = v?.codec ?? "—", f.textContent = v?.sampleRate ? ee(v.sampleRate) : "—", m.textContent = v?.numberOfChannels ? `${v.numberOfChannels}` : "—";
|
|
351
|
-
let w = C ?
|
|
352
|
-
h.textContent = w === void 0 ? "—" :
|
|
375
|
+
let w = C ? B(S, C.bytesReceived, e) : void 0;
|
|
376
|
+
h.textContent = w === void 0 ? "—" : k(w), C && (S = {
|
|
353
377
|
bytes: C.bytesReceived,
|
|
354
378
|
when: e
|
|
355
379
|
});
|
|
356
380
|
let T = t.connection.probe.peek(), E = T?.estimatedRecvRate;
|
|
357
|
-
_.textContent = E ?
|
|
381
|
+
_.textContent = E ? k(E) : "—";
|
|
358
382
|
let D = g !== void 0 || w !== void 0 ? (g ?? 0) + (w ?? 0) : void 0;
|
|
359
|
-
y.textContent = D === void 0 ? "—" :
|
|
360
|
-
let
|
|
361
|
-
b.push(
|
|
362
|
-
},
|
|
383
|
+
y.textContent = D === void 0 ? "—" : k(D);
|
|
384
|
+
let O = T?.rtt;
|
|
385
|
+
b.push(O !== void 0 && O > 0 ? O : void 0);
|
|
386
|
+
}, L), n;
|
|
387
|
+
}
|
|
388
|
+
//#endregion
|
|
389
|
+
//#region src/ui/components/captions.ts
|
|
390
|
+
function W(e, t) {
|
|
391
|
+
return t.label ? t.label : t.lang ? t.role === "caption" ? `${t.lang} (CC)` : t.lang : e;
|
|
392
|
+
}
|
|
393
|
+
function G(e) {
|
|
394
|
+
let t = [e.role === "caption" ? "captions" : "subtitles"];
|
|
395
|
+
return e.format && e.format !== "vtt" && t.push(e.format), t.join(" · ");
|
|
396
|
+
}
|
|
397
|
+
function K(e, t, n, i, a) {
|
|
398
|
+
let o = r.create("button", {
|
|
399
|
+
className: "q-row",
|
|
400
|
+
type: "button"
|
|
401
|
+
});
|
|
402
|
+
i && o.classList.add("q-row--selected");
|
|
403
|
+
let c = r.create("span", { className: "q-row-check" });
|
|
404
|
+
i && c.appendChild(S(s));
|
|
405
|
+
let l = r.create("div", { className: "q-row-body" });
|
|
406
|
+
return l.append(r.create("span", { className: "q-row-title" }, t), r.create("span", { className: "q-row-sub" }, n)), o.append(c, l), e.event(o, "click", a), o;
|
|
407
|
+
}
|
|
408
|
+
function ce(e, t) {
|
|
409
|
+
let n = r.create("div", { className: "tab-body q-list" });
|
|
410
|
+
return e.run((e) => {
|
|
411
|
+
let i = e.get(t.text.out.available), a = e.get(t.controls.captions), o = Object.entries(i);
|
|
412
|
+
if (n.replaceChildren(), n.appendChild(K(e, "Off", "no captions", a === void 0, () => {
|
|
413
|
+
t.controls.captions.set(void 0);
|
|
414
|
+
})), o.length === 0) {
|
|
415
|
+
n.appendChild(r.create("div", { className: "tab-empty" }, "No caption tracks"));
|
|
416
|
+
return;
|
|
417
|
+
}
|
|
418
|
+
for (let [r, i] of o) n.appendChild(K(e, W(r, i), G(i), a === r, () => {
|
|
419
|
+
t.controls.captions.set(r);
|
|
420
|
+
}));
|
|
421
|
+
}), n;
|
|
363
422
|
}
|
|
364
423
|
//#endregion
|
|
365
424
|
//#region src/ui/components/buffer-control.ts
|
|
366
|
-
var
|
|
367
|
-
function X(
|
|
368
|
-
let o =
|
|
425
|
+
var q = e.Time.Milli(0), J = e.Time.Milli(10), le = e.Time.Milli(4e3), Y = 48;
|
|
426
|
+
function X(t, n, r, i, a) {
|
|
427
|
+
let o = t.getContext("2d");
|
|
369
428
|
if (!o) return;
|
|
370
|
-
let s = window.devicePixelRatio || 1, c =
|
|
371
|
-
if ((
|
|
429
|
+
let s = window.devicePixelRatio || 1, c = t.getBoundingClientRect(), l = c.width, u = c.height, d = Math.round(l * s), f = Math.round(u * s);
|
|
430
|
+
if ((t.width !== d || t.height !== f) && (t.width = d, t.height = f), o.setTransform(s, 0, 0, s, 0, 0), o.clearRect(0, 0, l, u), r === void 0) return;
|
|
372
431
|
let p = u - 4;
|
|
373
|
-
for (let
|
|
374
|
-
let s = n[
|
|
432
|
+
for (let t = 0; t < n.length; t++) {
|
|
433
|
+
let s = n[t], c = e.Time.Milli(s.start - r), d = e.Time.Milli(s.end - r), f = Math.max(0, c), m = Math.min(d, i);
|
|
375
434
|
if (m <= f) continue;
|
|
376
435
|
let h = f / i * l, g = Math.max(2, (m - f) / i * l);
|
|
377
|
-
if (o.globalAlpha = .85, o.fillStyle = a ? "#f87171" :
|
|
436
|
+
if (o.globalAlpha = .85, o.fillStyle = a ? "#f87171" : t > 0 ? "#facc15" : "#4ade80", typeof o.roundRect == "function" ? (o.beginPath(), o.roundRect(h, 2, g, p, 2), o.fill()) : o.fillRect(h, 2, g, p), d > i) {
|
|
378
437
|
let e = ((d - i) / 1e3).toFixed(1);
|
|
379
438
|
o.globalAlpha = .7, o.fillStyle = "black", o.font = "500 9px system-ui, sans-serif", o.textAlign = "right", o.textBaseline = "middle", o.fillText(`+${e}s`, h + g - 4, u / 2);
|
|
380
439
|
}
|
|
381
440
|
}
|
|
382
441
|
}
|
|
383
|
-
function
|
|
442
|
+
function ue(t, n, r = le) {
|
|
384
443
|
let i = document.createElement("div");
|
|
385
444
|
i.className = "buffer";
|
|
386
445
|
let a = document.createElement("div");
|
|
387
|
-
a.className = "buffer-visualization", a.setAttribute("role", "slider"), a.tabIndex = 0, a.setAttribute("aria-valuemin",
|
|
446
|
+
a.className = "buffer-visualization", a.setAttribute("role", "slider"), a.tabIndex = 0, a.setAttribute("aria-valuemin", q.toString()), a.setAttribute("aria-valuemax", r.toString()), a.setAttribute("aria-label", "Buffer jitter");
|
|
388
447
|
let o = document.createElement("div");
|
|
389
448
|
o.className = "buffer-playhead";
|
|
390
449
|
let s = document.createElement("div");
|
|
@@ -408,43 +467,43 @@ function ie(e, n, r = J) {
|
|
|
408
467
|
let g = document.createElement("span");
|
|
409
468
|
g.className = "buffer-help", g.textContent = "click to change latency", a.append(o, s, u, p, g), i.appendChild(a);
|
|
410
469
|
let _ = !1, v = !1;
|
|
411
|
-
|
|
470
|
+
t.run((e) => {
|
|
412
471
|
let t = e.get(n.sync.out.jitter), i = t / r * 100;
|
|
413
472
|
m.style.left = `${i}%`, h.textContent = `${Math.round(t)}ms`, a.setAttribute("aria-valuenow", t.toString());
|
|
414
473
|
});
|
|
415
|
-
let y = (
|
|
416
|
-
let i = a.getBoundingClientRect(), o = i.width - Y, s = Math.max(0, Math.min(
|
|
417
|
-
n.
|
|
474
|
+
let y = (t) => {
|
|
475
|
+
let i = a.getBoundingClientRect(), o = i.width - Y, s = Math.max(0, Math.min(t - i.left - Y, o)) / o * r, c = e.Time.Milli(Math.round(s / J) * J);
|
|
476
|
+
n.delay = e.Time.Milli(Math.max(q, Math.min(r, c)));
|
|
418
477
|
}, b = () => {
|
|
419
478
|
v || (v = !0, g.style.display = "none");
|
|
420
479
|
};
|
|
421
|
-
|
|
480
|
+
t.event(a, "mousedown", (e) => {
|
|
422
481
|
_ = !0, a.classList.add("buffer-visualization--dragging"), b(), y(e.clientX);
|
|
423
|
-
}),
|
|
482
|
+
}), t.event(document, "mousemove", (e) => {
|
|
424
483
|
_ && y(e.clientX);
|
|
425
|
-
}),
|
|
484
|
+
}), t.event(document, "mouseup", () => {
|
|
426
485
|
_ && (_ = !1, a.classList.remove("buffer-visualization--dragging"));
|
|
427
|
-
}),
|
|
428
|
-
let i =
|
|
429
|
-
if (
|
|
430
|
-
else if (
|
|
486
|
+
}), t.event(a, "keydown", (t) => {
|
|
487
|
+
let i = e.Time.Milli(0);
|
|
488
|
+
if (t.key === "ArrowRight" || t.key === "ArrowUp") i = J;
|
|
489
|
+
else if (t.key === "ArrowLeft" || t.key === "ArrowDown") i = e.Time.Milli(-J);
|
|
431
490
|
else return;
|
|
432
|
-
|
|
491
|
+
t.preventDefault(), b();
|
|
433
492
|
let a = n.sync.out.jitter.peek();
|
|
434
|
-
n.
|
|
493
|
+
n.delay = e.Time.Milli(Math.max(q, Math.min(r, a + i)));
|
|
435
494
|
});
|
|
436
495
|
let x = () => {
|
|
437
|
-
let
|
|
438
|
-
X(l, n.video.out.buffered.peek(),
|
|
496
|
+
let e = n.sync.now(), i = n.video.out.stalled.peek();
|
|
497
|
+
X(l, n.video.out.buffered.peek(), e, r, i), X(f, n.audio.out.buffered.peek(), e, r, i), t.animate(x);
|
|
439
498
|
};
|
|
440
|
-
return
|
|
499
|
+
return t.animate(x), i;
|
|
441
500
|
}
|
|
442
501
|
//#endregion
|
|
443
502
|
//#region src/ui/components/latency.ts
|
|
444
|
-
var
|
|
503
|
+
var de = [
|
|
445
504
|
{
|
|
446
|
-
label: "
|
|
447
|
-
value: "
|
|
505
|
+
label: "Auto",
|
|
506
|
+
value: "auto"
|
|
448
507
|
},
|
|
449
508
|
{
|
|
450
509
|
label: "100ms",
|
|
@@ -467,67 +526,67 @@ var ae = [
|
|
|
467
526
|
value: 2e3
|
|
468
527
|
}
|
|
469
528
|
];
|
|
470
|
-
function
|
|
471
|
-
let
|
|
472
|
-
let
|
|
529
|
+
function fe(t, n) {
|
|
530
|
+
let i = r.create("div", { className: "tab-body latency" }), a = r.create("div", { className: "latency-presets" }), o = de.map((i) => {
|
|
531
|
+
let o = r.create("button", {
|
|
473
532
|
className: "chip",
|
|
474
533
|
type: "button"
|
|
475
|
-
},
|
|
476
|
-
return
|
|
477
|
-
|
|
478
|
-
}),
|
|
479
|
-
preset:
|
|
480
|
-
chip:
|
|
534
|
+
}, i.label);
|
|
535
|
+
return t.event(o, "click", () => {
|
|
536
|
+
n.delay = i.value === "auto" ? "auto" : e.Time.Milli(i.value);
|
|
537
|
+
}), a.appendChild(o), {
|
|
538
|
+
preset: i,
|
|
539
|
+
chip: o
|
|
481
540
|
};
|
|
482
541
|
});
|
|
483
|
-
|
|
484
|
-
let
|
|
485
|
-
for (let { preset: e, chip:
|
|
486
|
-
let r = e.value === "
|
|
487
|
-
|
|
542
|
+
t.run((e) => {
|
|
543
|
+
let t = e.get(n.controls.delay);
|
|
544
|
+
for (let { preset: e, chip: n } of o) {
|
|
545
|
+
let r = e.value === "auto" ? t === "auto" : t === e.value;
|
|
546
|
+
n.classList.toggle("chip--active", r);
|
|
488
547
|
}
|
|
489
548
|
});
|
|
490
|
-
let
|
|
491
|
-
|
|
492
|
-
let
|
|
493
|
-
|
|
494
|
-
let
|
|
495
|
-
|
|
549
|
+
let s = ue(t, n), c = r.create("div", { className: "latency-readout" }), l = r.create("div", { className: "latency-stat" }), u = r.create("span", { className: "latency-stat-value" }, "—");
|
|
550
|
+
l.append(r.create("span", { className: "latency-stat-label" }, "Jitter buffer"), u);
|
|
551
|
+
let d = r.create("div", { className: "latency-stat" }), f = r.create("span", { className: "latency-stat-value" }, "—");
|
|
552
|
+
d.append(r.create("span", { className: "latency-stat-label" }, "Total buffer"), f), c.append(l, d), t.run((e) => {
|
|
553
|
+
let t = e.get(n.controls.delay), r = e.get(n.sync.out.jitter), i = e.get(n.sync.out.delay);
|
|
554
|
+
u.textContent = `${A(r)}${t === "auto" ? " (auto)" : ""}`, f.textContent = A(i);
|
|
496
555
|
});
|
|
497
|
-
let
|
|
498
|
-
return
|
|
556
|
+
let p = r.create("div", { className: "tab-hint" }, "A larger delay smooths over network jitter at the cost of latency. Auto tracks the connection RTT. Drag the timeline to fine-tune.");
|
|
557
|
+
return i.append(a, s, c, p), i;
|
|
499
558
|
}
|
|
500
559
|
//#endregion
|
|
501
560
|
//#region src/ui/components/quality.ts
|
|
502
|
-
function
|
|
561
|
+
function pe(e) {
|
|
503
562
|
if (e.codedWidth && e.codedHeight) return `${e.codedWidth}×${e.codedHeight}`;
|
|
504
563
|
}
|
|
505
|
-
function
|
|
564
|
+
function me(e) {
|
|
506
565
|
let t = [];
|
|
507
|
-
return e.framerate && t.push(`${Math.round(e.framerate)}fps`), e.bitrate && t.push(
|
|
566
|
+
return e.framerate && t.push(`${Math.round(e.framerate)}fps`), e.bitrate && t.push(k(e.bitrate)), e.codec && t.push(e.codec), t.join(" · ");
|
|
508
567
|
}
|
|
509
|
-
function Z(e, t, n,
|
|
510
|
-
let c =
|
|
568
|
+
function Z(e, t, n, i, a, o) {
|
|
569
|
+
let c = r.create("button", {
|
|
511
570
|
className: "q-row",
|
|
512
571
|
type: "button"
|
|
513
572
|
});
|
|
514
|
-
|
|
515
|
-
let l =
|
|
516
|
-
|
|
517
|
-
let u =
|
|
573
|
+
i && c.classList.add("q-row--selected");
|
|
574
|
+
let l = r.create("span", { className: "q-row-check" });
|
|
575
|
+
i && l.appendChild(S(s));
|
|
576
|
+
let u = r.create("div", { className: "q-row-body" }), d = r.create("span", { className: "q-row-title" }, t);
|
|
518
577
|
if (a) {
|
|
519
|
-
let e =
|
|
578
|
+
let e = r.create("span", { className: "q-row-playing" }, "playing");
|
|
520
579
|
d.appendChild(e);
|
|
521
580
|
}
|
|
522
|
-
let f =
|
|
581
|
+
let f = r.create("span", { className: "q-row-sub" }, n);
|
|
523
582
|
return u.append(d, f), c.append(l, u), e.event(c, "click", o), c;
|
|
524
583
|
}
|
|
525
|
-
function
|
|
526
|
-
let n =
|
|
584
|
+
function Q(e, t) {
|
|
585
|
+
let n = r.create("div", { className: "tab-body q-list" });
|
|
527
586
|
return e.run((e) => {
|
|
528
|
-
let
|
|
587
|
+
let i = t.video.source, a = e.get(i.out.catalog), o = e.get(t.controls.target), s = e.get(i.out.track), c = a?.renditions ?? {}, l = Object.entries(c);
|
|
529
588
|
if (n.replaceChildren(), l.length === 0) {
|
|
530
|
-
n.appendChild(
|
|
589
|
+
n.appendChild(r.create("div", { className: "tab-empty" }, "No video renditions"));
|
|
531
590
|
return;
|
|
532
591
|
}
|
|
533
592
|
let u = o?.name, d = s && !u ? `auto · currently ${s}` : "adapts to bandwidth";
|
|
@@ -541,8 +600,8 @@ function le(e, t) {
|
|
|
541
600
|
return (t[1].codedWidth ?? 0) * (t[1].codedHeight ?? 0) - n;
|
|
542
601
|
});
|
|
543
602
|
for (let [r, i] of l) {
|
|
544
|
-
let a =
|
|
545
|
-
n.appendChild(Z(e, a,
|
|
603
|
+
let a = pe(i) ?? r;
|
|
604
|
+
n.appendChild(Z(e, a, me(i), u === r, s === r, () => {
|
|
546
605
|
t.controls.target.update((e) => ({
|
|
547
606
|
...e,
|
|
548
607
|
name: r
|
|
@@ -553,12 +612,17 @@ function le(e, t) {
|
|
|
553
612
|
}
|
|
554
613
|
//#endregion
|
|
555
614
|
//#region src/ui/components/settings-panel.ts
|
|
556
|
-
var
|
|
615
|
+
var he = [
|
|
557
616
|
{
|
|
558
617
|
id: "quality",
|
|
559
618
|
label: "Quality",
|
|
560
619
|
svg: v
|
|
561
620
|
},
|
|
621
|
+
{
|
|
622
|
+
id: "captions",
|
|
623
|
+
label: "Captions",
|
|
624
|
+
svg: o
|
|
625
|
+
},
|
|
562
626
|
{
|
|
563
627
|
id: "latency",
|
|
564
628
|
label: "Latency",
|
|
@@ -570,29 +634,29 @@ var ue = [
|
|
|
570
634
|
svg: _
|
|
571
635
|
}
|
|
572
636
|
];
|
|
573
|
-
function
|
|
574
|
-
let
|
|
575
|
-
|
|
576
|
-
let a =
|
|
577
|
-
o.append(S(g),
|
|
578
|
-
let s =
|
|
637
|
+
function ge(e, t, n) {
|
|
638
|
+
let i = r.create("div", { className: "panel" });
|
|
639
|
+
i.setAttribute("role", "dialog"), i.setAttribute("aria-label", "Player settings");
|
|
640
|
+
let a = r.create("div", { className: "panel-head" }), o = r.create("div", { className: "panel-head-title flex-align-center" });
|
|
641
|
+
o.append(S(g), r.create("span", {}, "Settings"));
|
|
642
|
+
let s = r.create("button", {
|
|
579
643
|
className: "control flex-center",
|
|
580
644
|
type: "button"
|
|
581
645
|
});
|
|
582
646
|
s.title = "Close", s.setAttribute("aria-label", "Close settings"), s.appendChild(S(c)), e.event(s, "click", () => n.panel.set(!1)), a.append(o, s);
|
|
583
|
-
let l = "panel-body", u =
|
|
647
|
+
let l = "panel-body", u = r.create("div", { className: "panel-tabs" });
|
|
584
648
|
u.setAttribute("role", "tablist");
|
|
585
|
-
let d =
|
|
586
|
-
let
|
|
649
|
+
let d = he.map((t) => {
|
|
650
|
+
let i = r.create("button", {
|
|
587
651
|
className: "panel-tab",
|
|
588
652
|
type: "button",
|
|
589
653
|
id: `tab-${t.id}`
|
|
590
654
|
});
|
|
591
|
-
return
|
|
655
|
+
return i.setAttribute("role", "tab"), i.setAttribute("aria-controls", l), i.append(S(t.svg), r.create("span", {}, t.label)), e.event(i, "click", () => n.tab.set(t.id)), u.appendChild(i), {
|
|
592
656
|
tab: t,
|
|
593
|
-
btn:
|
|
657
|
+
btn: i
|
|
594
658
|
};
|
|
595
|
-
}), f =
|
|
659
|
+
}), f = r.create("div", {
|
|
596
660
|
className: "panel-body",
|
|
597
661
|
id: l
|
|
598
662
|
});
|
|
@@ -605,20 +669,20 @@ function Q(e, t, n) {
|
|
|
605
669
|
}
|
|
606
670
|
}), e.run((e) => {
|
|
607
671
|
if (!e.get(n.panel)) return;
|
|
608
|
-
let
|
|
609
|
-
|
|
610
|
-
}),
|
|
672
|
+
let i = e.get(n.tab), a = i === "quality" ? Q(e, t) : i === "captions" ? ce(e, t) : i === "latency" ? fe(e, t) : U(e, t);
|
|
673
|
+
r.render(e, f, a);
|
|
674
|
+
}), i.append(a, u, f), e.run((e) => {
|
|
611
675
|
let t = e.get(n.panel);
|
|
612
|
-
|
|
613
|
-
}),
|
|
676
|
+
i.classList.toggle("panel--open", t), i.setAttribute("aria-hidden", String(!t));
|
|
677
|
+
}), i;
|
|
614
678
|
}
|
|
615
679
|
//#endregion
|
|
616
680
|
//#region src/ui/components/unsupported-indicator.ts
|
|
617
|
-
function
|
|
681
|
+
function _e(e, t) {
|
|
618
682
|
let n = document.createElement("div");
|
|
619
|
-
n.className = "watch-ui__unsupported-indicator", n.setAttribute("role", "status"), n.setAttribute("aria-live", "polite");
|
|
683
|
+
n.className = "watch-ui__notice watch-ui__unsupported-indicator", n.setAttribute("role", "status"), n.setAttribute("aria-live", "polite");
|
|
620
684
|
let r = document.createElement("span");
|
|
621
|
-
return r.className = "watch-
|
|
685
|
+
return r.className = "watch-ui__notice-text", n.appendChild(r), e.run((e) => {
|
|
622
686
|
let i = e.get(t.video.source.out.error) === "unsupported", a = e.get(t.broadcast.out.status) === "offline", o = i && !a;
|
|
623
687
|
if (n.style.display = o ? "" : "none", !o) return;
|
|
624
688
|
let s = e.get(t.video.source.out.catalog)?.renditions ?? {}, c = [...new Set(Object.values(s).map((e) => e.codec))].join(", ");
|
|
@@ -627,8 +691,8 @@ function de(e, t) {
|
|
|
627
691
|
}
|
|
628
692
|
//#endregion
|
|
629
693
|
//#region src/ui/styles/index.css?inline
|
|
630
|
-
var fe = "*,:before,:after{box-sizing:border-box}:host{--color-white:#fff;--color-white-alpha-05:#ffffff0d;--color-white-alpha-10:#ffffff1a;--color-white-alpha-15:#ffffff26;--color-white-alpha-20:#fff3;--color-white-alpha-25:#ffffff40;--color-white-alpha-30:#ffffff4d;--color-white-alpha-40:#fff6;--color-white-alpha-60:#fff9;--color-white-alpha-70:#ffffffb3;--color-white-alpha-90:#ffffffe6;--color-gray-100:#9ca3af;--color-gray-400:#6b7280;--color-gray-950:#1a1a1a;--color-blue-400:#00dfff;--color-blue-500:#52a1ff;--color-blue-900:#1b3243;--color-purple-400:#a855f7;--color-purple-900:#31144a;--color-green-400:#65ee2e;--color-green-500:#22c55e;--color-green-900:#3d4928;--color-yellow-400:#facc15;--color-orange-400:#f90;--color-orange-450:#fb923c;--color-orange-500:#f97316;--color-orange-900:#4d301b;--color-red-400:#f87171;--color-amber-600:#d97706;--color-orange-500-alpha-60:#f9731699;--color-orange-500-alpha-80:#f97316cc;--color-black-alpha-08:#00000014;--color-black-alpha-10:#0000001a;--color-black-alpha-40:#0006;--color-black-alpha-60:#0009;--color-black-alpha-85:#000000d9;--color-panel:#121214eb;--spacing-1:.0625rem;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-24:1.5rem;--spacing-32:2rem;--spacing-48:3rem;--border-radius-sm:.375rem;--border-radius-md:.5rem;--border-radius-lg:.75rem;--accent:var(--color-orange-400);--ease:cubic-bezier(.4, 0, .2, 1);font-family:system-ui,Segoe UI,Roboto,sans-serif}.flex-center{justify-content:center;align-items:center;display:flex}.flex-align-center{align-items:center;display:flex}.control{width:2.25rem;height:2.25rem;color:var(--color-white);cursor:pointer;transition:background-color .12s var(--ease), transform .12s var(--ease), color .12s var(--ease);background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.control svg{width:1.25rem;height:1.25rem}.control:hover:not(:disabled){background-color:var(--color-white-alpha-15)}.control:active:not(:disabled){transform:scale(.92)}.control--active{color:var(--accent)}.control:disabled{opacity:.4;cursor:default}.chip{padding:var(--spacing-4) var(--spacing-12);color:var(--color-white-alpha-70);background-color:var(--color-white-alpha-10);border:var(--spacing-1) solid transparent;cursor:pointer;transition:background-color .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);border-radius:999px;font-size:.75rem;font-weight:500}.chip:hover{background-color:var(--color-white-alpha-20);color:var(--color-white)}.chip--active{color:var(--color-gray-950);background-color:var(--accent);border-color:var(--accent)}:host{display:block;position:relative}.player{border-radius:var(--spacing-8);background:#000;justify-content:center;align-items:center;width:100%;line-height:0;display:flex;position:relative;overflow:hidden}.player ::slotted(moq-watch){width:100%;line-height:0;display:block}.player:not(.player--chrome){cursor:none}.player:fullscreen,.player:-webkit-full-screen,.player--pseudo-fullscreen{border-radius:0;justify-content:center;align-items:center;display:flex}.player:fullscreen,.player:fullscreen,.player--pseudo-fullscreen{border-radius:0;justify-content:center;align-items:center;display:flex}.player--pseudo-fullscreen{z-index:2147483647;width:100vw;height:100vh;position:fixed;inset:0}@supports (height:100dvh){.player--pseudo-fullscreen{height:100dvh}}.player:fullscreen ::slotted(moq-watch),.player:-webkit-full-screen ::slotted(moq-watch),.player--pseudo-fullscreen ::slotted(moq-watch){width:100%;height:100%;max-height:100%}.player:fullscreen ::slotted(moq-watch),.player:fullscreen ::slotted(moq-watch),.player--pseudo-fullscreen ::slotted(moq-watch){width:100%;height:100%;max-height:100%}.scrim{pointer-events:none;opacity:0;transition:opacity .2s var(--ease);position:absolute;left:0;right:0}.scrim--top{background:linear-gradient(to bottom, var(--color-black-alpha-40), transparent);height:25%;top:0}.scrim--bottom{background:linear-gradient(to top, var(--color-black-alpha-60), transparent 60%);height:100%;bottom:0}.player--chrome .scrim{opacity:1}.center{pointer-events:none;justify-content:center;align-items:center;line-height:1;display:flex;position:absolute;inset:0}.center-play{pointer-events:auto;width:4.5rem;height:4.5rem;color:var(--color-white);background:linear-gradient(to bottom right, var(--color-orange-400), var(--color-orange-500), var(--color-amber-600));cursor:pointer;box-shadow:0 var(--spacing-8) var(--spacing-24) var(--color-black-alpha-40);transition:transform .15s var(--ease), box-shadow .15s var(--ease);border:none;border-radius:50%}.center-play svg{width:2rem;height:2rem}.center-play:hover{box-shadow:0 var(--spacing-8) var(--spacing-32) var(--color-orange-500-alpha-60);transform:scale(1.06)}.center-play:active{transform:scale(.97)}.chrome{opacity:0;pointer-events:none;transition:opacity .2s var(--ease), transform .2s var(--ease);flex-direction:column;justify-content:flex-end;line-height:1.4;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(.5rem)}.player--chrome .chrome{opacity:1;pointer-events:auto;transform:translateY(0)}.controls{align-items:center;gap:var(--spacing-4);padding:var(--spacing-8) var(--spacing-12) var(--spacing-12);display:flex;position:relative}.controls-group{align-items:center;gap:var(--spacing-4);display:flex}.controls-spacer{flex:1}.volume{gap:var(--spacing-4)}.volume-track{-webkit-appearance:none;appearance:none;background:linear-gradient(to right, var(--color-white) 0%, var(--color-white) var(--fill,50%), var(--color-white-alpha-30) var(--fill,50%));cursor:pointer;opacity:0;width:0;max-width:0;height:.25rem;transition:width .16s var(--ease), max-width .16s var(--ease), opacity .16s var(--ease);border-radius:999px;outline:none;margin:0}.volume:hover .volume-track,.volume:focus-within .volume-track{opacity:1;width:4.5rem;max-width:4.5rem}.volume-track::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--color-white);cursor:pointer;border:none;border-radius:50%;width:.75rem;height:.75rem}.volume-track::-moz-range-thumb{background:var(--color-white);cursor:pointer;border:none;border-radius:50%;width:.75rem;height:.75rem}.badge{gap:var(--spacing-8);height:2.25rem;padding:0 var(--spacing-12);margin-left:var(--spacing-4);color:var(--color-white);border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color .12s var(--ease);background:0 0;border:none;font-size:.8125rem}.badge:hover{background-color:var(--color-white-alpha-10)}.badge-dot{background:var(--color-gray-400);border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem}.badge-text{letter-spacing:.04em;font-weight:600}.badge-latency{max-width:0;margin-left:calc(-1 * var(--spacing-8));opacity:0;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--color-white-alpha-60);transition:max-width .16s var(--ease), margin-left .16s var(--ease), opacity .16s var(--ease);overflow:hidden}.badge:hover .badge-latency,.badge:focus-visible .badge-latency{opacity:1;max-width:9rem;margin-left:0}.badge[data-variant=live] .badge-dot{background:var(--color-red-400);animation:badge-pulse 2s var(--ease) infinite;box-shadow:0 0 #f87171b3}.badge[data-variant=live] .badge-text{color:var(--color-red-400)}.badge[data-variant=loading] .badge-dot,.badge[data-variant=connecting] .badge-dot{background:var(--color-yellow-400)}.badge[data-variant=error] .badge-dot{background:var(--color-gray-400)}.badge[data-variant=error] .badge-text{color:var(--color-gray-100)}@keyframes badge-pulse{0%{box-shadow:0 0 #f8717199}70%{box-shadow:0 0 0 .4rem #f8717100}to{box-shadow:0 0 #f8717100}}.panel{top:var(--spacing-8);right:var(--spacing-8);bottom:var(--spacing-8);width:20rem;max-width:calc(100% - var(--spacing-16));background:var(--color-panel);backdrop-filter:blur(12px);border:var(--spacing-1) solid var(--color-white-alpha-15);border-radius:var(--border-radius-lg);box-shadow:0 var(--spacing-8) var(--spacing-32) var(--color-black-alpha-60);color:var(--color-white);z-index:4;opacity:0;pointer-events:none;transition:opacity .2s var(--ease), transform .2s var(--ease);flex-direction:column;line-height:1.4;display:flex;position:absolute;overflow:hidden;transform:translate(.75rem)}.panel--open{opacity:1;pointer-events:auto;transform:translate(0)}.panel-head{padding:var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);border-bottom:var(--spacing-1) solid var(--color-white-alpha-10);justify-content:space-between;align-items:center;display:flex}.panel-head-title{gap:var(--spacing-8);font-size:.875rem;font-weight:600}.panel-head-title svg{width:1.125rem;height:1.125rem}.panel-head .control{width:2rem;height:2rem}.panel-tabs{padding:var(--spacing-8);gap:var(--spacing-4);display:flex}.panel-tab{align-items:center;gap:var(--spacing-4);padding:var(--spacing-8) var(--spacing-4);color:var(--color-white-alpha-60);border-radius:var(--border-radius-md);cursor:pointer;transition:background-color .12s var(--ease), color .12s var(--ease);background:0 0;border:none;flex-direction:column;flex:1;font-size:.6875rem;font-weight:500;display:flex}.panel-tab svg{width:1.125rem;height:1.125rem}.panel-tab:hover{background-color:var(--color-white-alpha-05);color:var(--color-white)}.panel-tab--active{background-color:var(--color-white-alpha-10);color:var(--color-white)}.panel-body{scrollbar-width:thin;scrollbar-color:var(--color-white-alpha-20) transparent;flex:1;min-height:0;overflow-y:auto}.panel-body::-webkit-scrollbar{width:.375rem}.panel-body::-webkit-scrollbar-thumb{background:var(--color-white-alpha-20);border-radius:999px}.tab-body{gap:var(--spacing-12);padding:var(--spacing-12) var(--spacing-16) var(--spacing-16);flex-direction:column;display:flex}.tab-empty{padding:var(--spacing-24) 0;text-align:center;color:var(--color-white-alpha-40);font-size:.8125rem}.tab-hint{color:var(--color-white-alpha-40);font-size:.6875rem;line-height:1.5}.q-list{gap:var(--spacing-2)}.q-row{align-items:center;gap:var(--spacing-8);width:100%;padding:var(--spacing-8);text-align:left;color:var(--color-white);border-radius:var(--border-radius-md);cursor:pointer;transition:background-color .12s var(--ease);background:0 0;border:none;display:flex}.q-row:hover{background-color:var(--color-white-alpha-05)}.q-row--selected{background-color:var(--color-white-alpha-10)}.q-row-check{width:1rem;color:var(--accent);flex-shrink:0;justify-content:center;align-items:center;display:flex}.q-row-check svg{width:1rem;height:1rem}.q-row-body{flex-direction:column;gap:.1rem;min-width:0;display:flex}.q-row-title{align-items:center;gap:var(--spacing-8);font-size:.8125rem;font-weight:600;display:flex}.q-row-playing{letter-spacing:.06em;text-transform:uppercase;color:var(--color-green-500);background:var(--color-green-900);padding:.05rem var(--spacing-4);border-radius:var(--border-radius-sm);font-size:.5625rem;font-weight:600}.q-row-sub{color:var(--color-white-alpha-60);text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;overflow:hidden}.latency-presets{gap:var(--spacing-4);flex-wrap:wrap;display:flex}.latency-readout{gap:var(--spacing-8);display:flex}.latency-stat{gap:var(--spacing-2);padding:var(--spacing-8) var(--spacing-12);background:var(--color-white-alpha-05);border-radius:var(--border-radius-md);flex-direction:column;flex:1;display:flex}.latency-stat-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-white-alpha-40);font-size:.625rem}.latency-stat-value{font-variant-numeric:tabular-nums;color:var(--accent);font-size:.9375rem;font-weight:600}.stat-card{gap:var(--spacing-8);padding:var(--spacing-12);background:var(--color-white-alpha-05);border-radius:var(--border-radius-md);flex-direction:column;display:flex}.stat-head{align-items:center;gap:var(--spacing-8);display:flex}.stat-icon{border-radius:var(--border-radius-sm);justify-content:center;align-items:center;width:1.5rem;height:1.5rem;display:flex}.stat-icon svg{width:.875rem;height:.875rem}.stat-title{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.stat-status{letter-spacing:.06em;text-transform:uppercase;color:var(--color-gray-100);background:var(--color-white-alpha-10);padding:.05rem var(--spacing-8);border-radius:var(--border-radius-sm);margin-left:auto;font-size:.5625rem;font-weight:600}.stat-card--video .stat-icon{background:var(--color-purple-900);color:var(--color-purple-400)}.stat-card--video .stat-title{color:var(--color-purple-400)}.stat-card--audio .stat-icon{background:var(--color-green-900);color:var(--color-green-400)}.stat-card--audio .stat-title{color:var(--color-green-400)}.stat-card--network .stat-icon{background:var(--color-blue-900);color:var(--color-blue-400)}.stat-card--network .stat-title{color:var(--color-blue-400)}.stat-grid{gap:var(--spacing-2) var(--spacing-12);grid-template-columns:auto 1fr;display:grid}.stat-line{display:contents}.stat-key{color:var(--color-white-alpha-60);font-size:.75rem}.stat-value{text-align:right;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;font-weight:600;overflow:hidden}.graph{gap:var(--spacing-2);margin-top:var(--spacing-4);flex-direction:column;display:flex}.graph-header{justify-content:space-between;align-items:baseline;display:flex}.graph-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-white-alpha-40);font-size:.625rem}.graph-value{font-variant-numeric:tabular-nums;font-size:.6875rem;font-weight:600}.graph-canvas{width:100%;height:2.5rem;display:block}.buffer{width:100%}.buffer-visualization{background:var(--color-white-alpha-10);border-radius:var(--spacing-4);cursor:pointer;user-select:none;width:100%;height:3.75rem;padding-left:var(--spacing-48);box-sizing:border-box;position:relative}.buffer-playhead{left:var(--spacing-48);width:var(--spacing-2);background:var(--color-white);z-index:3;position:absolute;top:0;bottom:0}.buffer-track{left:var(--spacing-48);height:var(--spacing-24);align-items:center;display:flex;position:absolute;right:0}.buffer-track--video{top:var(--spacing-4)}.buffer-track--audio{top:var(--spacing-32)}.buffer-track-label{width:2.5rem;color:var(--color-white-alpha-70);text-align:right;padding-right:var(--spacing-4);pointer-events:none;box-sizing:border-box;font-size:.625rem;position:absolute;left:-2.875rem}.buffer-canvas{width:100%;height:100%;position:absolute;top:0;left:0}.buffer-target-area{top:0;bottom:0;left:var(--spacing-48);pointer-events:none;position:absolute;right:0}.buffer-target-line{background:var(--color-orange-400,var(--color-orange-450));z-index:2;cursor:ew-resize;border-radius:var(--spacing-1);pointer-events:auto;width:.1875rem;position:absolute;top:0;bottom:0}.buffer-target-label{color:var(--color-orange-400,var(--color-orange-450));white-space:nowrap;margin-bottom:var(--spacing-2);opacity:0;pointer-events:none;font-size:.6875rem;font-weight:500;transition:opacity .15s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.buffer-visualization:hover .buffer-target-label,.buffer-visualization--dragging .buffer-target-label{opacity:1}.buffer-help{color:var(--color-white-alpha-30,#ffffff4d);pointer-events:none;white-space:nowrap;font-size:.75rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.buffering{z-index:1;background-color:var(--color-black-alpha-40);width:100%;height:100%;backdrop-filter:blur(var(--spacing-2));pointer-events:auto;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}.buffering-spinner{border:var(--spacing-4) solid var(--color-white-alpha-20);border-top:var(--spacing-4) solid var(--color-white);border-radius:50%;width:2.5rem;height:2.5rem;animation:1s linear infinite buffer-spin}@keyframes buffer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.watch-ui__offline-indicator{z-index:4;pointer-events:auto;background-color:#000;border-radius:.25rem;justify-content:center;align-items:center;padding:.5rem 1rem;display:flex;position:absolute;bottom:1rem;right:1rem}.watch-ui__offline-text{color:#fff;letter-spacing:.08em;text-shadow:none;font-size:.875rem;font-weight:700}@media (width<=768px){.watch-ui__offline-indicator{padding:.375rem .75rem;bottom:.75rem;right:.75rem}.watch-ui__offline-text{font-size:.75rem}}@media (width<=480px){.watch-ui__offline-indicator{padding:.25rem .5rem;bottom:.5rem;right:.5rem}.watch-ui__offline-text{font-size:.75rem}}.watch-ui__unsupported-indicator{text-align:center;background-color:var(--color-black-alpha-85);z-index:4;pointer-events:auto;border-radius:.25rem;justify-content:center;align-items:center;max-width:min(80%,32rem);padding:.75rem 1.25rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.watch-ui__unsupported-text{color:var(--color-white);font-size:.875rem;font-weight:600;line-height:1.4}@media (width<=480px){.watch-ui__unsupported-indicator{max-width:90%;padding:.625rem .875rem}.watch-ui__unsupported-text{font-size:.75rem}}", pe = 2800;
|
|
631
|
-
function
|
|
694
|
+
var ve = "*,:before,:after{box-sizing:border-box}:host{--color-white:#fff;--color-white-alpha-05:#ffffff0d;--color-white-alpha-10:#ffffff1a;--color-white-alpha-15:#ffffff26;--color-white-alpha-20:#fff3;--color-white-alpha-25:#ffffff40;--color-white-alpha-30:#ffffff4d;--color-white-alpha-40:#fff6;--color-white-alpha-60:#fff9;--color-white-alpha-70:#ffffffb3;--color-white-alpha-90:#ffffffe6;--color-gray-100:#9ca3af;--color-gray-400:#6b7280;--color-gray-950:#1a1a1a;--color-blue-400:#00dfff;--color-blue-500:#52a1ff;--color-blue-900:#1b3243;--color-purple-400:#a855f7;--color-purple-900:#31144a;--color-green-400:#65ee2e;--color-green-500:#22c55e;--color-green-900:#3d4928;--color-yellow-400:#facc15;--color-orange-400:#f90;--color-orange-450:#fb923c;--color-orange-500:#f97316;--color-orange-900:#4d301b;--color-red-400:#f87171;--color-amber-600:#d97706;--color-orange-500-alpha-60:#f9731699;--color-orange-500-alpha-80:#f97316cc;--color-black-alpha-08:#00000014;--color-black-alpha-10:#0000001a;--color-black-alpha-40:#0006;--color-black-alpha-60:#0009;--color-black-alpha-85:#000000d9;--color-panel:#121214eb;--spacing-1:.0625rem;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-24:1.5rem;--spacing-32:2rem;--spacing-48:3rem;--border-radius-sm:.375rem;--border-radius-md:.5rem;--border-radius-lg:.75rem;--accent:var(--color-orange-400);--ease:cubic-bezier(.4, 0, .2, 1);font-family:system-ui,Segoe UI,Roboto,sans-serif}.flex-center{justify-content:center;align-items:center;display:flex}.flex-align-center{align-items:center;display:flex}.control{width:2.25rem;height:2.25rem;color:var(--color-white);cursor:pointer;transition:background-color .12s var(--ease), transform .12s var(--ease), color .12s var(--ease);background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.control svg{width:1.25rem;height:1.25rem}.control:hover:not(:disabled){background-color:var(--color-white-alpha-15)}.control:active:not(:disabled){transform:scale(.92)}.control--active{color:var(--accent)}.control:disabled{opacity:.4;cursor:default}.chip{padding:var(--spacing-4) var(--spacing-12);color:var(--color-white-alpha-70);background-color:var(--color-white-alpha-10);border:var(--spacing-1) solid transparent;cursor:pointer;transition:background-color .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);border-radius:999px;font-size:.75rem;font-weight:500}.chip:hover{background-color:var(--color-white-alpha-20);color:var(--color-white)}.chip--active{color:var(--color-gray-950);background-color:var(--accent);border-color:var(--accent)}:host{display:block;position:relative}.player{border-radius:var(--spacing-8);background:#000;justify-content:center;align-items:center;width:100%;line-height:0;display:flex;position:relative;overflow:hidden}.player ::slotted(moq-watch){width:100%;line-height:0;display:block}.player:not(.player--chrome){cursor:none}.player:fullscreen,.player:-webkit-full-screen,.player--pseudo-fullscreen{border-radius:0;justify-content:center;align-items:center;display:flex}.player:fullscreen,.player:fullscreen,.player--pseudo-fullscreen{border-radius:0;justify-content:center;align-items:center;display:flex}.player--pseudo-fullscreen{z-index:2147483647;width:100vw;height:100vh;position:fixed;inset:0}@supports (height:100dvh){.player--pseudo-fullscreen{height:100dvh}}.player--pseudo-fullscreen ::slotted(moq-watch),.player:fullscreen ::slotted(moq-watch),.player:-webkit-full-screen ::slotted(moq-watch){width:100%;height:100%;max-height:100%}.player--pseudo-fullscreen ::slotted(moq-watch),.player:fullscreen ::slotted(moq-watch),.player:fullscreen ::slotted(moq-watch){width:100%;height:100%;max-height:100%}.scrim{pointer-events:none;opacity:0;transition:opacity .2s var(--ease);position:absolute;left:0;right:0}.scrim--top{background:linear-gradient(to bottom, var(--color-black-alpha-40), transparent);height:25%;top:0}.scrim--bottom{background:linear-gradient(to top, var(--color-black-alpha-60), transparent 60%);height:100%;bottom:0}.player--chrome .scrim{opacity:1}.center{pointer-events:none;justify-content:center;align-items:center;line-height:1;display:flex;position:absolute;inset:0}.center-play{pointer-events:auto;width:4.5rem;height:4.5rem;color:var(--color-white);background:linear-gradient(to bottom right, var(--color-orange-400), var(--color-orange-500), var(--color-amber-600));cursor:pointer;box-shadow:0 var(--spacing-8) var(--spacing-24) var(--color-black-alpha-40);transition:transform .15s var(--ease), box-shadow .15s var(--ease);border:none;border-radius:50%}.center-play svg{width:2rem;height:2rem}.center-play:hover{box-shadow:0 var(--spacing-8) var(--spacing-32) var(--color-orange-500-alpha-60);transform:scale(1.06)}.center-play:active{transform:scale(.97)}.chrome{opacity:0;pointer-events:none;transition:opacity .2s var(--ease), transform .2s var(--ease);flex-direction:column;justify-content:flex-end;line-height:1.4;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(.5rem)}.player--chrome .chrome{opacity:1;pointer-events:auto;transform:translateY(0)}.controls{align-items:center;gap:var(--spacing-4);padding:var(--spacing-8) var(--spacing-12) var(--spacing-12);display:flex;position:relative}.controls-group{align-items:center;gap:var(--spacing-4);display:flex}.controls-spacer{flex:1}.volume{gap:var(--spacing-4)}.volume-track{-webkit-appearance:none;appearance:none;background:linear-gradient(to right, var(--color-white) 0%, var(--color-white) var(--fill,50%), var(--color-white-alpha-30) var(--fill,50%));cursor:pointer;opacity:0;width:0;max-width:0;height:.25rem;transition:width .16s var(--ease), max-width .16s var(--ease), opacity .16s var(--ease);border-radius:999px;outline:none;margin:0}.volume:hover .volume-track,.volume:focus-within .volume-track{opacity:1;width:4.5rem;max-width:4.5rem}.volume-track::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--color-white);cursor:pointer;border:none;border-radius:50%;width:.75rem;height:.75rem}.volume-track::-moz-range-thumb{background:var(--color-white);cursor:pointer;border:none;border-radius:50%;width:.75rem;height:.75rem}.badge{gap:var(--spacing-8);height:2.25rem;padding:0 var(--spacing-12);margin-left:var(--spacing-4);color:var(--color-white);border-radius:var(--border-radius-sm);cursor:pointer;transition:background-color .12s var(--ease);background:0 0;border:none;font-size:.8125rem}.badge:hover{background-color:var(--color-white-alpha-10)}.badge-dot{background:var(--color-gray-400);border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem}.badge-text{letter-spacing:.04em;font-weight:600}.badge-latency{max-width:0;margin-left:calc(-1 * var(--spacing-8));opacity:0;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--color-white-alpha-60);transition:max-width .16s var(--ease), margin-left .16s var(--ease), opacity .16s var(--ease);overflow:hidden}.badge:hover .badge-latency,.badge:focus-visible .badge-latency{opacity:1;max-width:9rem;margin-left:0}.badge[data-variant=live] .badge-dot{background:var(--color-red-400);animation:badge-pulse 2s var(--ease) infinite;box-shadow:0 0 #f87171b3}.badge[data-variant=live] .badge-text{color:var(--color-red-400)}.badge[data-variant=loading] .badge-dot,.badge[data-variant=connecting] .badge-dot{background:var(--color-yellow-400)}.badge[data-variant=error] .badge-dot{background:var(--color-gray-400)}.badge[data-variant=error] .badge-text{color:var(--color-gray-100)}@keyframes badge-pulse{0%{box-shadow:0 0 #f8717199}70%{box-shadow:0 0 0 .4rem #f8717100}to{box-shadow:0 0 #f8717100}}.panel{top:var(--spacing-8);right:var(--spacing-8);bottom:var(--spacing-8);width:20rem;max-width:calc(100% - var(--spacing-16));background:var(--color-panel);backdrop-filter:blur(12px);border:var(--spacing-1) solid var(--color-white-alpha-15);border-radius:var(--border-radius-lg);box-shadow:0 var(--spacing-8) var(--spacing-32) var(--color-black-alpha-60);color:var(--color-white);z-index:4;opacity:0;pointer-events:none;transition:opacity .2s var(--ease), transform .2s var(--ease);flex-direction:column;line-height:1.4;display:flex;position:absolute;overflow:hidden;transform:translate(.75rem)}.panel--open{opacity:1;pointer-events:auto;transform:translate(0)}.panel-head{padding:var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-16);border-bottom:var(--spacing-1) solid var(--color-white-alpha-10);justify-content:space-between;align-items:center;display:flex}.panel-head-title{gap:var(--spacing-8);font-size:.875rem;font-weight:600}.panel-head-title svg{width:1.125rem;height:1.125rem}.panel-head .control{width:2rem;height:2rem}.panel-tabs{padding:var(--spacing-8);gap:var(--spacing-4);display:flex}.panel-tab{align-items:center;gap:var(--spacing-4);padding:var(--spacing-8) var(--spacing-4);color:var(--color-white-alpha-60);border-radius:var(--border-radius-md);cursor:pointer;transition:background-color .12s var(--ease), color .12s var(--ease);background:0 0;border:none;flex-direction:column;flex:1;font-size:.6875rem;font-weight:500;display:flex}.panel-tab svg{width:1.125rem;height:1.125rem}.panel-tab:hover{background-color:var(--color-white-alpha-05);color:var(--color-white)}.panel-tab--active{background-color:var(--color-white-alpha-10);color:var(--color-white)}.panel-body{scrollbar-width:thin;scrollbar-color:var(--color-white-alpha-20) transparent;flex:1;min-height:0;overflow-y:auto}.panel-body::-webkit-scrollbar{width:.375rem}.panel-body::-webkit-scrollbar-thumb{background:var(--color-white-alpha-20);border-radius:999px}.tab-body{gap:var(--spacing-12);padding:var(--spacing-12) var(--spacing-16) var(--spacing-16);flex-direction:column;display:flex}.tab-empty{padding:var(--spacing-24) 0;text-align:center;color:var(--color-white-alpha-40);font-size:.8125rem}.tab-hint{color:var(--color-white-alpha-40);font-size:.6875rem;line-height:1.5}.q-list{gap:var(--spacing-2)}.q-row{align-items:center;gap:var(--spacing-8);width:100%;padding:var(--spacing-8);text-align:left;color:var(--color-white);border-radius:var(--border-radius-md);cursor:pointer;transition:background-color .12s var(--ease);background:0 0;border:none;display:flex}.q-row:hover{background-color:var(--color-white-alpha-05)}.q-row--selected{background-color:var(--color-white-alpha-10)}.q-row-check{width:1rem;color:var(--accent);flex-shrink:0;justify-content:center;align-items:center;display:flex}.q-row-check svg{width:1rem;height:1rem}.q-row-body{flex-direction:column;gap:.1rem;min-width:0;display:flex}.q-row-title{align-items:center;gap:var(--spacing-8);font-size:.8125rem;font-weight:600;display:flex}.q-row-playing{letter-spacing:.06em;text-transform:uppercase;color:var(--color-green-500);background:var(--color-green-900);padding:.05rem var(--spacing-4);border-radius:var(--border-radius-sm);font-size:.5625rem;font-weight:600}.q-row-sub{color:var(--color-white-alpha-60);text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;overflow:hidden}.latency-presets{gap:var(--spacing-4);flex-wrap:wrap;display:flex}.latency-readout{gap:var(--spacing-8);display:flex}.latency-stat{gap:var(--spacing-2);padding:var(--spacing-8) var(--spacing-12);background:var(--color-white-alpha-05);border-radius:var(--border-radius-md);flex-direction:column;flex:1;display:flex}.latency-stat-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-white-alpha-40);font-size:.625rem}.latency-stat-value{font-variant-numeric:tabular-nums;color:var(--accent);font-size:.9375rem;font-weight:600}.stat-card{gap:var(--spacing-8);padding:var(--spacing-12);background:var(--color-white-alpha-05);border-radius:var(--border-radius-md);flex-direction:column;display:flex}.stat-head{align-items:center;gap:var(--spacing-8);display:flex}.stat-icon{border-radius:var(--border-radius-sm);justify-content:center;align-items:center;width:1.5rem;height:1.5rem;display:flex}.stat-icon svg{width:.875rem;height:.875rem}.stat-title{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.stat-status{letter-spacing:.06em;text-transform:uppercase;color:var(--color-gray-100);background:var(--color-white-alpha-10);padding:.05rem var(--spacing-8);border-radius:var(--border-radius-sm);margin-left:auto;font-size:.5625rem;font-weight:600}.stat-card--video .stat-icon{background:var(--color-purple-900);color:var(--color-purple-400)}.stat-card--video .stat-title{color:var(--color-purple-400)}.stat-card--audio .stat-icon{background:var(--color-green-900);color:var(--color-green-400)}.stat-card--audio .stat-title{color:var(--color-green-400)}.stat-card--network .stat-icon{background:var(--color-blue-900);color:var(--color-blue-400)}.stat-card--network .stat-title{color:var(--color-blue-400)}.stat-grid{gap:var(--spacing-2) var(--spacing-12);grid-template-columns:auto 1fr;display:grid}.stat-line{display:contents}.stat-key{color:var(--color-white-alpha-60);font-size:.75rem}.stat-value{text-align:right;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;font-weight:600;overflow:hidden}.graph{gap:var(--spacing-2);margin-top:var(--spacing-4);flex-direction:column;display:flex}.graph-header{justify-content:space-between;align-items:baseline;display:flex}.graph-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-white-alpha-40);font-size:.625rem}.graph-value{font-variant-numeric:tabular-nums;font-size:.6875rem;font-weight:600}.graph-canvas{width:100%;height:2.5rem;display:block}.buffer{width:100%}.buffer-visualization{background:var(--color-white-alpha-10);border-radius:var(--spacing-4);cursor:pointer;user-select:none;width:100%;height:3.75rem;padding-left:var(--spacing-48);box-sizing:border-box;position:relative}.buffer-playhead{left:var(--spacing-48);width:var(--spacing-2);background:var(--color-white);z-index:3;position:absolute;top:0;bottom:0}.buffer-track{left:var(--spacing-48);height:var(--spacing-24);align-items:center;display:flex;position:absolute;right:0}.buffer-track--video{top:var(--spacing-4)}.buffer-track--audio{top:var(--spacing-32)}.buffer-track-label{width:2.5rem;color:var(--color-white-alpha-70);text-align:right;padding-right:var(--spacing-4);pointer-events:none;box-sizing:border-box;font-size:.625rem;position:absolute;left:-2.875rem}.buffer-canvas{width:100%;height:100%;position:absolute;top:0;left:0}.buffer-target-area{top:0;bottom:0;left:var(--spacing-48);pointer-events:none;position:absolute;right:0}.buffer-target-line{background:var(--color-orange-400,var(--color-orange-450));z-index:2;cursor:ew-resize;border-radius:var(--spacing-1);pointer-events:auto;width:.1875rem;position:absolute;top:0;bottom:0}.buffer-target-label{color:var(--color-orange-400,var(--color-orange-450));white-space:nowrap;margin-bottom:var(--spacing-2);opacity:0;pointer-events:none;font-size:.6875rem;font-weight:500;transition:opacity .15s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.buffer-visualization--dragging .buffer-target-label,.buffer-visualization:hover .buffer-target-label{opacity:1}.buffer-help{color:var(--color-white-alpha-30,#ffffff4d);pointer-events:none;white-space:nowrap;font-size:.75rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.buffering{z-index:1;background-color:var(--color-black-alpha-40);width:100%;height:100%;backdrop-filter:blur(var(--spacing-2));pointer-events:auto;justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}.buffering-spinner{border:var(--spacing-4) solid var(--color-white-alpha-20);border-top:var(--spacing-4) solid var(--color-white);border-radius:50%;width:2.5rem;height:2.5rem;animation:1s linear infinite buffer-spin}@keyframes buffer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.watch-ui__offline-indicator{z-index:4;pointer-events:auto;background-color:#000;border-radius:.25rem;justify-content:center;align-items:center;padding:.5rem 1rem;display:flex;position:absolute;bottom:1rem;right:1rem}.watch-ui__offline-text{color:#fff;letter-spacing:.08em;text-shadow:none;font-size:.875rem;font-weight:700}@media (width<=768px){.watch-ui__offline-indicator{padding:.375rem .75rem;bottom:.75rem;right:.75rem}.watch-ui__offline-text{font-size:.75rem}}@media (width<=480px){.watch-ui__offline-indicator{padding:.25rem .5rem;bottom:.5rem;right:.5rem}.watch-ui__offline-text{font-size:.75rem}}.watch-ui__notice{text-align:center;background-color:var(--color-black-alpha-85);z-index:4;pointer-events:auto;border-radius:.25rem;justify-content:center;align-items:center;max-width:min(80%,32rem);padding:.75rem 1.25rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.watch-ui__notice-text{color:var(--color-white);font-size:.875rem;font-weight:600;line-height:1.4}@media (width<=480px){.watch-ui__notice{max-width:90%;padding:.625rem .875rem}.watch-ui__notice-text{font-size:.75rem}}", ye = 2800;
|
|
695
|
+
function be(e) {
|
|
632
696
|
for (let t of [":fullscreen", ":-webkit-full-screen"]) try {
|
|
633
697
|
if (e.matches(t)) return !0;
|
|
634
698
|
} catch {}
|
|
@@ -637,16 +701,16 @@ function me(e) {
|
|
|
637
701
|
var $ = class extends HTMLElement {
|
|
638
702
|
#e;
|
|
639
703
|
#t;
|
|
640
|
-
#n = new
|
|
704
|
+
#n = new n(void 0);
|
|
641
705
|
#r;
|
|
642
706
|
constructor() {
|
|
643
707
|
super(), this.#t = this.attachShadow({ mode: "open" });
|
|
644
708
|
let e = document.createElement("style");
|
|
645
|
-
e.textContent =
|
|
709
|
+
e.textContent = ve, this.#t.appendChild(e), this.#r = new MutationObserver(() => this.#i());
|
|
646
710
|
}
|
|
647
711
|
connectedCallback() {
|
|
648
712
|
this.#i(), this.#r.observe(this, { childList: !0 });
|
|
649
|
-
let e = new
|
|
713
|
+
let e = new t();
|
|
650
714
|
this.#e = e, e.run(this.#a.bind(this));
|
|
651
715
|
}
|
|
652
716
|
disconnectedCallback() {
|
|
@@ -659,22 +723,22 @@ var $ = class extends HTMLElement {
|
|
|
659
723
|
#a(e) {
|
|
660
724
|
let t = e.get(this.#n);
|
|
661
725
|
if (!t) return;
|
|
662
|
-
let
|
|
663
|
-
chrome: new
|
|
664
|
-
panel: new
|
|
665
|
-
tab: new
|
|
666
|
-
}, o = this.hasAttribute("live"), s =
|
|
667
|
-
s.appendChild(
|
|
668
|
-
let c =
|
|
669
|
-
o || c.append(C(e, t)), c.append(
|
|
670
|
-
let l =
|
|
671
|
-
u.append(
|
|
672
|
-
let d =
|
|
673
|
-
s.append(l, c, u, d),
|
|
726
|
+
let a = {
|
|
727
|
+
chrome: new n(!0),
|
|
728
|
+
panel: new n(!1),
|
|
729
|
+
tab: new n("quality")
|
|
730
|
+
}, o = this.hasAttribute("live"), s = r.create("div", { className: "player" });
|
|
731
|
+
s.appendChild(r.create("slot"));
|
|
732
|
+
let c = r.create("div", { className: "center" });
|
|
733
|
+
o || c.append(C(e, t)), c.append(i(e, t), oe(e, t), _e(e, t), ae(e, t));
|
|
734
|
+
let l = r.create("div", { className: "scrim scrim--top" }), u = r.create("div", { className: "chrome" });
|
|
735
|
+
u.append(r.create("div", { className: "scrim scrim--bottom" }), ie(e, t, a, s, o));
|
|
736
|
+
let d = ge(e, t, a);
|
|
737
|
+
s.append(l, c, u, d), r.render(e, this.#t, s), this.#s(e, t, s), this.#c(e, t, a, s, u, d);
|
|
674
738
|
}
|
|
675
739
|
#o(e) {
|
|
676
740
|
let t = document;
|
|
677
|
-
return this.#t.fullscreenElement === e || document.fullscreenElement === e || t.webkitFullscreenElement === e ||
|
|
741
|
+
return this.#t.fullscreenElement === e || document.fullscreenElement === e || t.webkitFullscreenElement === e || be(e) || e.classList.contains("player--pseudo-fullscreen");
|
|
678
742
|
}
|
|
679
743
|
#s(e, t, n) {
|
|
680
744
|
let r = () => {
|
|
@@ -693,21 +757,21 @@ var $ = class extends HTMLElement {
|
|
|
693
757
|
attributeFilter: ["class"]
|
|
694
758
|
}), e.cleanup(() => i.disconnect()), e.cleanup(() => a.disconnect()), e.event(document, "fullscreenchange", r), e.event(document, "webkitfullscreenchange", r), e.event(this.#t, "fullscreenchange", r), r();
|
|
695
759
|
}
|
|
696
|
-
#c(e, t,
|
|
760
|
+
#c(e, t, r, i, a, o) {
|
|
697
761
|
if (window.matchMedia("(pointer: coarse)").matches || window.matchMedia("(hover: none)").matches) {
|
|
698
|
-
this.#l(e,
|
|
762
|
+
this.#l(e, r, i, a, o);
|
|
699
763
|
return;
|
|
700
764
|
}
|
|
701
|
-
let s = new
|
|
765
|
+
let s = new n(0), c = () => s.update((e) => e + 1);
|
|
702
766
|
e.event(this, "pointermove", c), e.event(this, "pointerdown", c), e.event(this, "focusin", c);
|
|
703
|
-
let l = () => t.controls.paused.peek() ||
|
|
767
|
+
let l = () => t.controls.paused.peek() || r.panel.peek();
|
|
704
768
|
e.run((e) => {
|
|
705
|
-
let
|
|
706
|
-
e.get(s),
|
|
769
|
+
let n = e.get(t.controls.paused) || e.get(r.panel);
|
|
770
|
+
e.get(s), r.chrome.set(!0), !n && e.timer(() => r.chrome.set(!1), ye);
|
|
707
771
|
}), e.event(this, "pointerleave", () => {
|
|
708
|
-
l() ||
|
|
772
|
+
l() || r.chrome.set(!1);
|
|
709
773
|
}), e.run((e) => {
|
|
710
|
-
i.classList.toggle("player--chrome", e.get(
|
|
774
|
+
i.classList.toggle("player--chrome", e.get(r.chrome));
|
|
711
775
|
});
|
|
712
776
|
}
|
|
713
777
|
#l(e, t, n, r, i) {
|