hyperframes 0.8.73 → 0.8.74
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +2415 -1449
- package/dist/commands/layout-audit.browser.js +116 -0
- package/dist/fontLocalizeCli.js +640 -334
- package/dist/hyperframe-runtime.js +17 -17
- package/dist/hyperframe.manifest.json +1 -1
- package/dist/hyperframe.runtime.iife.js +17 -17
- package/dist/hyperframes-player.global.js +3 -3
- package/dist/renderSetupWorker.js +242 -0
- package/dist/skills/hyperframes-cli/references/lint-validate-inspect.md +1 -1
- package/dist/studio/assets/hyperframes-player-Bs9qG2hg.js +464 -0
- package/dist/studio/assets/{index-CMFPPAGq.js → index-B86QTmD2.js} +1 -1
- package/dist/studio/assets/{index-DxIHGgGZ.js → index-DhTyI9zH.js} +107 -107
- package/dist/studio/assets/{index-DKInxDDv.js → index-vccPjvCl.js} +1 -1
- package/dist/studio/index.html +1 -1
- package/dist/studio/index.js +1387 -1306
- package/dist/studio/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/studio/assets/hyperframes-player-BUauoSsb.js +0 -464
package/package.json
CHANGED
|
@@ -1,464 +0,0 @@
|
|
|
1
|
-
var Ae=Object.defineProperty;var Ee=(s,i,e)=>i in s?Ae(s,i,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[i]=e;var h=(s,i,e)=>Ee(s,typeof i!="symbol"?i+"":i,e);import{r as ue,i as Ce,a as w,b as ce,c as Te,d as Re,s as Se,e as Le,F as Me}from"./index-DxIHGgGZ.js";function xe(s){return s.hasRuntime||s.runtimeInjected?!1:!!(s.hasNestedCompositions||s.hasTimelines&&s.attempts>=5)}function V(s){return typeof s=="object"&&s!==null}function De(s){return V(s)&&typeof s.getDuration=="function"}function Pe(s){return V(s)&&typeof s.duration=="function"&&typeof s.time=="function"&&typeof s.seek=="function"&&typeof s.play=="function"&&typeof s.pause=="function"}function ke(s){if(!/^\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?(?:\+[0-9A-Za-z.-]+)?$/.test(s))throw new Error(`Invalid HyperFrames runtime version: ${s}`);return`https://cdn.jsdelivr.net/npm/@hyperframes/core@${s}/dist/hyperframe.runtime.iife.js`}const U=typeof __HYPERFRAMES_RUNTIME_CDN_URL__=="string"?__HYPERFRAMES_RUNTIME_CDN_URL__:ke("0.0.0-dev");function W(s){if(s===null)return null;const i=Number.parseInt(s,10);return Number.isFinite(i)&&i>0?i:null}function Ie(s){const i=(s==null?void 0:s.querySelector("[data-composition-id][data-width][data-height]"))??(s==null?void 0:s.querySelector("[data-width][data-height]"));if(!i)return null;const e=W(i.getAttribute("data-width")),t=W(i.getAttribute("data-height"));return e!==null&&t!==null?{width:e,height:t}:null}class Oe{constructor(i,e){h(this,"_interval",null);h(this,"_runtimeInjected",!1);this._iframe=i,this._callbacks=e}get runtimeInjected(){return this._runtimeInjected}start(){this.stop(),this._runtimeInjected=!1;let i=0;this._interval=setInterval(()=>{var e;i++;try{const t=this._iframe.contentWindow;if(!t)return;const r=!!(t.__hf||t.__player),n=!!(t.__timelines&&Object.keys(t.__timelines).length>0),a=!!((e=this._iframe.contentDocument)!=null&&e.querySelector("[data-composition-src]"));if(xe({hasRuntime:r,hasTimelines:n,hasNestedCompositions:a,runtimeInjected:this._runtimeInjected,attempts:i})){this._injectRuntime();return}if(this._runtimeInjected&&!r)return;const d=this._resolvePlaybackDurationAdapter(t);if(d&&d.getDuration()>0){this.stop();const c=Ie(this._iframe.contentDocument);this._callbacks.onReady({duration:d.getDuration(),adapter:d,compositionSize:c});return}}catch{}i>=40&&(this.stop(),this._callbacks.onError("Composition timeline not found after 8s"))},200)}stop(){this._interval!==null&&(clearInterval(this._interval),this._interval=null)}resolveDirectTimelineAdapter(){try{const i=this._iframe.contentWindow;return i?this._resolveDirectTimelineAdapterFromWindow(i):null}catch{return null}}resolveDirectTimelineAdapterFromWindow(i){return this._resolveDirectTimelineAdapterFromWindow(i)}hasRuntimeBridge(i){return Reflect.get(i,"__hf")!==void 0||V(Reflect.get(i,"__player"))}_injectRuntime(){var i,e;this._runtimeInjected=!0;try{const t=this._iframe.contentDocument;if(!t)return;const r=t.createElement("script");r.src=U,(t.head||t.documentElement).appendChild(r),(e=(i=this._callbacks).onRuntimeInjected)==null||e.call(i)}catch{}}_resolveDirectTimelineAdapterFromWindow(i){var d,c;if(this.hasRuntimeBridge(i))return null;const e=Reflect.get(i,"__timelines");if(!V(e))return null;const t=Object.keys(e);if(t.length===0)return null;const r=(c=(d=this._iframe.contentDocument)==null?void 0:d.querySelector("[data-composition-id]"))==null?void 0:c.getAttribute("data-composition-id"),n=r&&r in e?r:t[t.length-1],a=e[n];return Pe(a)?a:null}_resolvePlaybackDurationAdapter(i){const e=Reflect.get(i,"__player");if(De(e))return{kind:"runtime",getDuration:()=>e.getDuration()};const t=this._resolveDirectTimelineAdapterFromWindow(i);return t?{kind:"direct-timeline",timeline:t,getDuration:()=>t.duration()}:null}}const Ne=`
|
|
2
|
-
:host {
|
|
3
|
-
display: block;
|
|
4
|
-
position: relative;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
background: #000;
|
|
7
|
-
contain: layout style;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.hfp-container {
|
|
11
|
-
position: absolute;
|
|
12
|
-
inset: 0;
|
|
13
|
-
overflow: hidden;
|
|
14
|
-
pointer-events: none;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
.hfp-iframe {
|
|
19
|
-
position: absolute;
|
|
20
|
-
top: 50%;
|
|
21
|
-
left: 50%;
|
|
22
|
-
border: none;
|
|
23
|
-
pointer-events: none;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/* Opt-in: an interactive composition (e.g. a live slideshow/app with playable
|
|
27
|
-
media or controls) — let pointer events reach the iframe content. */
|
|
28
|
-
:host([interactive]) .hfp-container,
|
|
29
|
-
:host([interactive]) .hfp-iframe {
|
|
30
|
-
pointer-events: auto;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.hfp-poster {
|
|
34
|
-
position: absolute;
|
|
35
|
-
inset: 0;
|
|
36
|
-
object-fit: contain;
|
|
37
|
-
z-index: 1;
|
|
38
|
-
pointer-events: none;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.hfp-shader-loader {
|
|
42
|
-
position: absolute;
|
|
43
|
-
inset: 0;
|
|
44
|
-
z-index: 20;
|
|
45
|
-
display: grid;
|
|
46
|
-
place-items: center;
|
|
47
|
-
visibility: hidden;
|
|
48
|
-
opacity: 0;
|
|
49
|
-
pointer-events: none;
|
|
50
|
-
background: #030504;
|
|
51
|
-
color: #f4f7fb;
|
|
52
|
-
cursor: default;
|
|
53
|
-
user-select: none;
|
|
54
|
-
-webkit-user-select: none;
|
|
55
|
-
transition: opacity 420ms ease-out, visibility 420ms ease-out;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.hfp-shader-loader.hfp-visible,
|
|
59
|
-
.hfp-shader-loader.hfp-hiding {
|
|
60
|
-
visibility: visible;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.hfp-shader-loader.hfp-visible {
|
|
64
|
-
opacity: 1;
|
|
65
|
-
pointer-events: auto;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.hfp-shader-loader.hfp-hiding {
|
|
69
|
-
opacity: 0;
|
|
70
|
-
pointer-events: none;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.hfp-shader-loader-panel {
|
|
74
|
-
display: grid;
|
|
75
|
-
grid-template-rows: 86px 40px 26px 12px 44px;
|
|
76
|
-
justify-items: center;
|
|
77
|
-
align-items: center;
|
|
78
|
-
gap: 8px;
|
|
79
|
-
width: min(620px, 82%);
|
|
80
|
-
text-align: center;
|
|
81
|
-
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.hfp-shader-loader-mark {
|
|
85
|
-
width: 86px;
|
|
86
|
-
height: 86px;
|
|
87
|
-
display: grid;
|
|
88
|
-
place-items: center;
|
|
89
|
-
overflow: visible;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.hfp-shader-loader-mark svg {
|
|
93
|
-
display: block;
|
|
94
|
-
overflow: visible;
|
|
95
|
-
filter: drop-shadow(0 0 5px rgba(79, 219, 94, 0.16));
|
|
96
|
-
pointer-events: none;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.hfp-shader-loader-title {
|
|
100
|
-
width: 100%;
|
|
101
|
-
height: 40px;
|
|
102
|
-
overflow: hidden;
|
|
103
|
-
white-space: nowrap;
|
|
104
|
-
text-overflow: ellipsis;
|
|
105
|
-
font-size: 26px;
|
|
106
|
-
line-height: 40px;
|
|
107
|
-
font-weight: 700;
|
|
108
|
-
letter-spacing: 0;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
.hfp-shader-loader-title-text {
|
|
112
|
-
color: transparent;
|
|
113
|
-
background: linear-gradient(
|
|
114
|
-
90deg,
|
|
115
|
-
rgba(244, 247, 251, 0.84) 0%,
|
|
116
|
-
#ffffff 42%,
|
|
117
|
-
#80efe4 52%,
|
|
118
|
-
#ffffff 62%,
|
|
119
|
-
rgba(244, 247, 251, 0.84) 100%
|
|
120
|
-
);
|
|
121
|
-
background-size: 220% 100%;
|
|
122
|
-
-webkit-background-clip: text;
|
|
123
|
-
background-clip: text;
|
|
124
|
-
animation: hfp-shader-loader-sheen 1.9s linear infinite;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.hfp-shader-loader:not(.hfp-visible):not(.hfp-hiding) .hfp-shader-loader-title-text {
|
|
128
|
-
animation-play-state: paused;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.hfp-shader-loader-detail {
|
|
132
|
-
width: 100%;
|
|
133
|
-
height: 26px;
|
|
134
|
-
overflow: hidden;
|
|
135
|
-
white-space: nowrap;
|
|
136
|
-
text-overflow: ellipsis;
|
|
137
|
-
color: rgba(244, 247, 251, 0.62);
|
|
138
|
-
font-size: 15px;
|
|
139
|
-
line-height: 26px;
|
|
140
|
-
font-weight: 500;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.hfp-shader-loader-track {
|
|
144
|
-
width: min(360px, 100%);
|
|
145
|
-
height: 8px;
|
|
146
|
-
overflow: hidden;
|
|
147
|
-
border-radius: 999px;
|
|
148
|
-
background: rgba(255, 255, 255, 0.1);
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.hfp-shader-loader-fill {
|
|
152
|
-
width: 100%;
|
|
153
|
-
height: 100%;
|
|
154
|
-
border-radius: inherit;
|
|
155
|
-
background: linear-gradient(90deg, #06e3fa, #4fdb5e);
|
|
156
|
-
transform: scaleX(0);
|
|
157
|
-
transform-origin: left center;
|
|
158
|
-
transition: transform 160ms ease;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.hfp-shader-loader-progress {
|
|
162
|
-
width: min(420px, 100%);
|
|
163
|
-
height: 44px;
|
|
164
|
-
display: grid;
|
|
165
|
-
grid-template-rows: repeat(2, 22px);
|
|
166
|
-
color: rgba(244, 247, 251, 0.48);
|
|
167
|
-
font: 600 13px/22px "IBM Plex Mono", "SF Mono", "Fira Code", "Courier New", monospace;
|
|
168
|
-
font-variant-numeric: tabular-nums;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.hfp-shader-loader-row {
|
|
172
|
-
display: grid;
|
|
173
|
-
grid-template-columns: minmax(0, 1fr) 74px;
|
|
174
|
-
align-items: center;
|
|
175
|
-
column-gap: 20px;
|
|
176
|
-
width: 100%;
|
|
177
|
-
white-space: nowrap;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.hfp-shader-loader-label {
|
|
181
|
-
min-width: 0;
|
|
182
|
-
overflow: hidden;
|
|
183
|
-
text-align: left;
|
|
184
|
-
text-overflow: ellipsis;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.hfp-shader-loader-value {
|
|
188
|
-
text-align: right;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
@keyframes hfp-shader-loader-sheen {
|
|
192
|
-
from {
|
|
193
|
-
background-position: 140% 0;
|
|
194
|
-
}
|
|
195
|
-
to {
|
|
196
|
-
background-position: -140% 0;
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
/* ── Theming via CSS custom properties ──
|
|
201
|
-
*
|
|
202
|
-
* Override from outside the shadow DOM:
|
|
203
|
-
* hyperframes-player {
|
|
204
|
-
* --hfp-controls-bg: linear-gradient(transparent, rgba(0,0,0,0.9));
|
|
205
|
-
* --hfp-accent: #ff6b6b;
|
|
206
|
-
* --hfp-font: "Inter", sans-serif;
|
|
207
|
-
* }
|
|
208
|
-
*/
|
|
209
|
-
|
|
210
|
-
.hfp-controls {
|
|
211
|
-
position: absolute;
|
|
212
|
-
bottom: 0;
|
|
213
|
-
left: 0;
|
|
214
|
-
right: 0;
|
|
215
|
-
display: flex;
|
|
216
|
-
align-items: center;
|
|
217
|
-
gap: var(--hfp-controls-gap, 12px);
|
|
218
|
-
padding: var(--hfp-controls-padding, 8px 16px);
|
|
219
|
-
background: var(--hfp-controls-bg, linear-gradient(transparent, rgba(0, 0, 0, 0.7)));
|
|
220
|
-
color: var(--hfp-color, #fff);
|
|
221
|
-
font-family: var(--hfp-font, system-ui, -apple-system, sans-serif);
|
|
222
|
-
font-size: var(--hfp-font-size, 13px);
|
|
223
|
-
z-index: 10;
|
|
224
|
-
pointer-events: auto;
|
|
225
|
-
opacity: 1;
|
|
226
|
-
transition: opacity 0.3s ease;
|
|
227
|
-
user-select: none;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.hfp-controls.hfp-hidden {
|
|
231
|
-
opacity: 0;
|
|
232
|
-
pointer-events: none;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
.hfp-play-btn {
|
|
236
|
-
position: relative;
|
|
237
|
-
background: none;
|
|
238
|
-
border: none;
|
|
239
|
-
color: var(--hfp-color, #fff);
|
|
240
|
-
cursor: pointer;
|
|
241
|
-
padding: 8px;
|
|
242
|
-
display: flex;
|
|
243
|
-
align-items: center;
|
|
244
|
-
justify-content: center;
|
|
245
|
-
width: 40px;
|
|
246
|
-
height: 40px;
|
|
247
|
-
flex-shrink: 0;
|
|
248
|
-
z-index: 10;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
.hfp-play-btn:hover {
|
|
252
|
-
opacity: 0.8;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
/* Stacked play/pause glyphs that crossfade-morph on toggle (rotate + scale). */
|
|
256
|
-
.hfp-play-btn .hfp-ico {
|
|
257
|
-
position: absolute;
|
|
258
|
-
display: flex;
|
|
259
|
-
align-items: center;
|
|
260
|
-
justify-content: center;
|
|
261
|
-
transition:
|
|
262
|
-
opacity 200ms ease,
|
|
263
|
-
transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
264
|
-
}
|
|
265
|
-
.hfp-play-btn .hfp-ico-play {
|
|
266
|
-
opacity: 1;
|
|
267
|
-
transform: rotate(0) scale(1);
|
|
268
|
-
}
|
|
269
|
-
.hfp-play-btn .hfp-ico-pause {
|
|
270
|
-
opacity: 0;
|
|
271
|
-
transform: rotate(-90deg) scale(0.4);
|
|
272
|
-
}
|
|
273
|
-
.hfp-play-btn.hfp-playing .hfp-ico-play {
|
|
274
|
-
opacity: 0;
|
|
275
|
-
transform: rotate(90deg) scale(0.4);
|
|
276
|
-
}
|
|
277
|
-
.hfp-play-btn.hfp-playing .hfp-ico-pause {
|
|
278
|
-
opacity: 1;
|
|
279
|
-
transform: rotate(0) scale(1);
|
|
280
|
-
}
|
|
281
|
-
@media (prefers-reduced-motion: reduce) {
|
|
282
|
-
.hfp-play-btn .hfp-ico {
|
|
283
|
-
transition-duration: 0ms;
|
|
284
|
-
transform: none;
|
|
285
|
-
}
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
.hfp-play-btn svg,
|
|
289
|
-
.hfp-play-btn svg * {
|
|
290
|
-
pointer-events: none;
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
.hfp-scrubber {
|
|
294
|
-
flex: 1;
|
|
295
|
-
min-width: 0;
|
|
296
|
-
height: var(--hfp-scrubber-height, 4px);
|
|
297
|
-
background: var(--hfp-scrubber-bg, rgba(255, 255, 255, 0.3));
|
|
298
|
-
border-radius: var(--hfp-scrubber-radius, 2px);
|
|
299
|
-
cursor: pointer;
|
|
300
|
-
position: relative;
|
|
301
|
-
overflow: hidden;
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
.hfp-scrubber:hover {
|
|
305
|
-
height: var(--hfp-scrubber-height-hover, 6px);
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
.hfp-progress {
|
|
309
|
-
position: absolute;
|
|
310
|
-
top: 0;
|
|
311
|
-
left: 0;
|
|
312
|
-
height: 100%;
|
|
313
|
-
background: var(--hfp-accent, #fff);
|
|
314
|
-
pointer-events: none;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
.hfp-time {
|
|
318
|
-
flex-shrink: 0;
|
|
319
|
-
font-variant-numeric: tabular-nums;
|
|
320
|
-
opacity: 0.9;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
.hfp-speed-wrap {
|
|
324
|
-
position: relative;
|
|
325
|
-
flex-shrink: 0;
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
.hfp-speed-btn {
|
|
329
|
-
background: var(--hfp-speed-btn-bg, rgba(255, 255, 255, 0.15));
|
|
330
|
-
border: none;
|
|
331
|
-
border-radius: var(--hfp-speed-btn-radius, 4px);
|
|
332
|
-
color: var(--hfp-color, #fff);
|
|
333
|
-
cursor: pointer;
|
|
334
|
-
font-family: var(--hfp-font, system-ui, -apple-system, sans-serif);
|
|
335
|
-
font-size: 12px;
|
|
336
|
-
font-variant-numeric: tabular-nums;
|
|
337
|
-
font-weight: 600;
|
|
338
|
-
padding: 4px 8px;
|
|
339
|
-
min-width: 40px;
|
|
340
|
-
text-align: center;
|
|
341
|
-
transition: background 0.15s ease;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
.hfp-speed-btn:hover {
|
|
345
|
-
background: var(--hfp-speed-btn-bg-hover, rgba(255, 255, 255, 0.3));
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
.hfp-speed-menu {
|
|
349
|
-
position: absolute;
|
|
350
|
-
bottom: calc(100% + 8px);
|
|
351
|
-
right: 0;
|
|
352
|
-
background: var(--hfp-menu-bg, rgba(20, 20, 20, 0.95));
|
|
353
|
-
backdrop-filter: blur(12px);
|
|
354
|
-
-webkit-backdrop-filter: blur(12px);
|
|
355
|
-
border: 1px solid var(--hfp-menu-border, rgba(255, 255, 255, 0.1));
|
|
356
|
-
border-radius: var(--hfp-menu-radius, 8px);
|
|
357
|
-
padding: 4px;
|
|
358
|
-
display: flex;
|
|
359
|
-
flex-direction: column;
|
|
360
|
-
gap: 2px;
|
|
361
|
-
min-width: 80px;
|
|
362
|
-
opacity: 0;
|
|
363
|
-
visibility: hidden;
|
|
364
|
-
transform: translateY(4px);
|
|
365
|
-
transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
|
|
366
|
-
box-shadow: var(--hfp-menu-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
.hfp-speed-menu.hfp-open {
|
|
370
|
-
opacity: 1;
|
|
371
|
-
visibility: visible;
|
|
372
|
-
transform: translateY(0);
|
|
373
|
-
}
|
|
374
|
-
|
|
375
|
-
.hfp-speed-option {
|
|
376
|
-
background: none;
|
|
377
|
-
border: none;
|
|
378
|
-
border-radius: 4px;
|
|
379
|
-
color: var(--hfp-menu-color, rgba(255, 255, 255, 0.7));
|
|
380
|
-
cursor: pointer;
|
|
381
|
-
font-family: var(--hfp-font, system-ui, -apple-system, sans-serif);
|
|
382
|
-
font-size: 13px;
|
|
383
|
-
font-variant-numeric: tabular-nums;
|
|
384
|
-
padding: 6px 12px;
|
|
385
|
-
text-align: left;
|
|
386
|
-
transition: background 0.1s ease, color 0.1s ease;
|
|
387
|
-
white-space: nowrap;
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
.hfp-speed-option:hover {
|
|
391
|
-
background: var(--hfp-menu-hover-bg, rgba(255, 255, 255, 0.1));
|
|
392
|
-
color: var(--hfp-color, #fff);
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
.hfp-speed-option.hfp-active {
|
|
396
|
-
color: var(--hfp-accent, #fff);
|
|
397
|
-
font-weight: 600;
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
.hfp-volume-wrap {
|
|
401
|
-
position: relative;
|
|
402
|
-
flex-shrink: 0;
|
|
403
|
-
display: flex;
|
|
404
|
-
align-items: center;
|
|
405
|
-
gap: 0;
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
.hfp-mute-btn {
|
|
409
|
-
background: none;
|
|
410
|
-
border: none;
|
|
411
|
-
color: var(--hfp-color, #fff);
|
|
412
|
-
cursor: pointer;
|
|
413
|
-
padding: 4px;
|
|
414
|
-
display: flex;
|
|
415
|
-
align-items: center;
|
|
416
|
-
justify-content: center;
|
|
417
|
-
width: 32px;
|
|
418
|
-
height: 32px;
|
|
419
|
-
flex-shrink: 0;
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
.hfp-mute-btn:hover {
|
|
423
|
-
opacity: 0.8;
|
|
424
|
-
}
|
|
425
|
-
|
|
426
|
-
.hfp-mute-btn svg,
|
|
427
|
-
.hfp-mute-btn svg * {
|
|
428
|
-
pointer-events: none;
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
.hfp-volume-slider-wrap {
|
|
432
|
-
width: 0;
|
|
433
|
-
overflow: hidden;
|
|
434
|
-
transition: width 0.2s ease;
|
|
435
|
-
display: flex;
|
|
436
|
-
align-items: center;
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.hfp-volume-wrap:hover .hfp-volume-slider-wrap {
|
|
440
|
-
width: 64px;
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
.hfp-volume-slider {
|
|
444
|
-
width: 56px;
|
|
445
|
-
height: var(--hfp-scrubber-height, 4px);
|
|
446
|
-
background: var(--hfp-scrubber-bg, rgba(255, 255, 255, 0.3));
|
|
447
|
-
border-radius: var(--hfp-scrubber-radius, 2px);
|
|
448
|
-
cursor: pointer;
|
|
449
|
-
position: relative;
|
|
450
|
-
overflow: hidden;
|
|
451
|
-
margin-left: 4px;
|
|
452
|
-
margin-right: 4px;
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
.hfp-volume-fill {
|
|
456
|
-
position: absolute;
|
|
457
|
-
top: 0;
|
|
458
|
-
left: 0;
|
|
459
|
-
height: 100%;
|
|
460
|
-
background: var(--hfp-accent, #fff);
|
|
461
|
-
pointer-events: none;
|
|
462
|
-
}
|
|
463
|
-
`,Fe='<svg width="24" height="24" viewBox="46 21 54 56" fill="currentColor"><path d="M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z"/></svg>',He='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><rect x="3" y="2" width="4" height="14"/><rect x="11" y="2" width="4" height="14"/></svg>',pe='<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3z"/><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/><path d="M14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>',me='<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3z"/><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>',Ue='<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3z"/><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z" opacity="0.3"/><line x1="18" y1="7" x2="14" y2="17" stroke="currentColor" stroke-width="2"/></svg>',$e=[.25,.5,1,1.5,2,4];function j(s){return Number.isInteger(s)?`${s}x`:`${s}x`}function fe(s){if(!Number.isFinite(s)||s<0)return"0:00";const i=Math.floor(s),e=Math.floor(i/60),t=i%60;return`${e}:${t.toString().padStart(2,"0")}`}function Ve(s,i,e={}){const t=e.speedPresets??$e,r=document.createElement("div");r.className="hfp-controls",r.addEventListener("click",o=>{o.stopPropagation()});const n=document.createElement("button");n.className="hfp-play-btn",n.type="button",n.innerHTML=`<span class="hfp-ico hfp-ico-play">${Fe}</span><span class="hfp-ico hfp-ico-pause">${He}</span>`,n.setAttribute("aria-label","Play");const a=document.createElement("div");a.className="hfp-scrubber";const d=document.createElement("div");d.className="hfp-progress",d.style.width="0%",a.appendChild(d);const c=document.createElement("span");c.className="hfp-time",c.textContent="0:00 / 0:00";const p=document.createElement("div");p.className="hfp-speed-wrap";const u=document.createElement("button");u.className="hfp-speed-btn",u.type="button",u.textContent="1x",u.setAttribute("aria-label","Playback speed");const g=document.createElement("div");g.className="hfp-speed-menu",g.setAttribute("role","menu");for(const o of t){const l=document.createElement("button");l.className="hfp-speed-option",l.type="button",l.setAttribute("role","menuitem"),l.dataset.speed=String(o),l.textContent=j(o),o===1&&l.classList.add("hfp-active"),g.appendChild(l)}p.appendChild(g),p.appendChild(u);const y=document.createElement("div");y.className="hfp-volume-wrap";const m=document.createElement("button");m.className="hfp-mute-btn",m.type="button",m.innerHTML=pe,m.setAttribute("aria-label","Mute");const b=document.createElement("div");b.className="hfp-volume-slider-wrap";const f=document.createElement("div");f.className="hfp-volume-slider",f.setAttribute("role","slider"),f.setAttribute("aria-label","Volume"),f.setAttribute("aria-valuemin","0"),f.setAttribute("aria-valuemax","100"),f.setAttribute("aria-valuenow","100"),f.tabIndex=0;const v=document.createElement("div");v.className="hfp-volume-fill",v.style.width="100%",f.appendChild(v),b.appendChild(f),y.appendChild(b),y.appendChild(m),e.audioLocked&&(y.style.display="none"),r.appendChild(n),r.appendChild(a),r.appendChild(c),r.appendChild(y),r.appendChild(p),s.appendChild(r);let x=!1,C=!1,E=1,S=null;t.indexOf(1);const D=(o,l)=>o?Ue:l===0||l<.5?me:pe;n.addEventListener("click",o=>{o.stopPropagation(),x?i.onPause():i.onPlay()}),m.addEventListener("click",o=>{o.stopPropagation(),i.onMuteToggle()});let T=!1;const P=o=>{const l=f.getBoundingClientRect(),_=Math.max(0,Math.min(1,(o-l.left)/l.width));E=_,v.style.width=`${_*100}%`,f.setAttribute("aria-valuenow",String(Math.round(_*100))),C&&_>0&&i.onMuteToggle(),m.innerHTML=D(C,_),i.onVolumeChange(_)};f.addEventListener("mousedown",o=>{o.stopPropagation(),T=!0,P(o.clientX)});const Q=o=>{T&&P(o.clientX)},J=()=>{T=!1};document.addEventListener("mousemove",Q),document.addEventListener("mouseup",J),f.addEventListener("touchstart",o=>{T=!0;const l=o.touches[0];l&&P(l.clientX)},{passive:!0});const K=o=>{if(T){const l=o.touches[0];l&&P(l.clientX)}},ee=()=>{T=!1};document.addEventListener("touchmove",K,{passive:!0}),document.addEventListener("touchend",ee);const te=.05;f.addEventListener("keydown",o=>{let l=E;if(o.key==="ArrowRight"||o.key==="ArrowUp")l=Math.min(1,E+te);else if(o.key==="ArrowLeft"||o.key==="ArrowDown")l=Math.max(0,E-te);else return;o.preventDefault(),o.stopPropagation(),E=l,v.style.width=`${l*100}%`,f.setAttribute("aria-valuenow",String(Math.round(l*100))),C&&l>0&&i.onMuteToggle(),m.innerHTML=D(C,l),i.onVolumeChange(l)});const ie=o=>{for(const l of g.querySelectorAll(".hfp-speed-option"))l.classList.toggle("hfp-active",l.dataset.speed===String(o))};u.addEventListener("click",o=>{o.stopPropagation();const l=g.classList.toggle("hfp-open");u.setAttribute("aria-expanded",String(l))}),g.addEventListener("click",o=>{o.stopPropagation();const l=o.target.closest(".hfp-speed-option");if(!l)return;const _=parseFloat(l.dataset.speed);t.indexOf(_),u.textContent=j(_),ie(_),g.classList.remove("hfp-open"),u.setAttribute("aria-expanded","false"),i.onSpeedChange(_)});const re=()=>{g.classList.remove("hfp-open"),u.setAttribute("aria-expanded","false")};document.addEventListener("click",re);const k=o=>{const l=a.getBoundingClientRect(),_=Math.max(0,Math.min(1,(o-l.left)/l.width));i.onSeek(_)};let A=!1;a.addEventListener("mousedown",o=>{var l;o.stopPropagation(),A=!0,(l=i.onScrubStart)==null||l.call(i),k(o.clientX)});const se=o=>{A&&k(o.clientX)},ne=()=>{var o;A&&(A=!1,(o=i.onScrubEnd)==null||o.call(i))};document.addEventListener("mousemove",se),document.addEventListener("mouseup",ne),a.addEventListener("touchstart",o=>{var _;A=!0,(_=i.onScrubStart)==null||_.call(i);const l=o.touches[0];l&&k(l.clientX)},{passive:!0});const ae=o=>{if(A){const l=o.touches[0];l&&k(l.clientX)}},oe=()=>{var o;A&&(A=!1,(o=i.onScrubEnd)==null||o.call(i))};document.addEventListener("touchmove",ae,{passive:!0}),document.addEventListener("touchend",oe);const de=()=>{S&&clearTimeout(S),S=setTimeout(()=>{x&&r.classList.add("hfp-hidden")},3e3)},I=s instanceof ShadowRoot?s.host:s,le=()=>{r.classList.remove("hfp-hidden"),de()},he=()=>{x&&r.classList.add("hfp-hidden")};return I.addEventListener("mousemove",le),I.addEventListener("mouseleave",he),{updateTime(o,l){const _=l>0?Math.min(o,l):o,we=l>0?_/l*100:0;d.style.width=`${we}%`,c.textContent=`${fe(_)} / ${fe(l)}`},updatePlaying(o){x=o,n.classList.toggle("hfp-playing",o),n.setAttribute("aria-label",o?"Pause":"Play"),o?de():r.classList.remove("hfp-hidden")},updateSpeed(o){t.indexOf(o),u.textContent=j(o),ie(o)},updateMuted(o){C=o,m.innerHTML=D(o,E),m.setAttribute("aria-label",o?"Unmute":"Mute")},updateVolume(o){E=o,v.style.width=`${o*100}%`,f.setAttribute("aria-valuenow",String(Math.round(o*100))),m.innerHTML=D(C,o)},setVolumeControlsHidden(o){y.style.display=o?"none":""},show(){r.style.display=""},hide(){r.style.display="none"},destroy(){document.removeEventListener("mousemove",se),document.removeEventListener("mouseup",ne),document.removeEventListener("touchmove",ae),document.removeEventListener("touchend",oe),document.removeEventListener("mousemove",Q),document.removeEventListener("mouseup",J),document.removeEventListener("touchmove",K),document.removeEventListener("touchend",ee),document.removeEventListener("click",re),I.removeEventListener("mousemove",le),I.removeEventListener("mouseleave",he),S&&clearTimeout(S),r.remove()}}}function We(s,i,e,t,r,n=!1){const a=t?t.split(",").map(Number).filter(p=>!isNaN(p)&&p>0):void 0,d={...a?{speedPresets:a}:{},audioLocked:n},c=Ve(s,r,d);return c.updateMuted(i),c.updateVolume(e),c}function _e(s,i,e){return i?(e||(e=document.createElement("img"),e.className="hfp-poster",s.appendChild(e)),e.src=i,e):(e==null||e.remove(),null)}function je(s){return s.composedPath().some(i=>i instanceof HTMLElement&&i.classList.contains("hfp-controls"))}let O=null;function ze(s,i){if(typeof CSSStyleSheet<"u")try{O||(O=new CSSStyleSheet,O.replaceSync(i)),s.adoptedStyleSheets=[O];return}catch{}const e=document.createElement("style");e.textContent=i,s.appendChild(e)}function Be(){const s=document.createElement("div");s.className="hfp-container";const i=document.createElement("iframe");return i.className="hfp-iframe",i.sandbox.add("allow-scripts","allow-same-origin"),i.allow="autoplay; fullscreen",i.referrerPolicy="no-referrer",i.title="HyperFrames Composition",s.appendChild(i),{container:s,iframe:i}}function qe(s,i,e,t){const r=s.offsetWidth,n=s.offsetHeight;if(r===0||n===0)return!1;const a=Math.min(r/e,n/t);return i.style.width=`${e}px`,i.style.height=`${t}px`,i.style.transform=`translate(-50%, -50%) scale(${a})`,!0}const Ge=100;class Ye{constructor(i){h(this,"_raf",null);h(this,"_lastUpdateMs",0);this._callbacks=i}start(i,e,t,r){this.stop();const n=()=>{if(r()){this._raf=null;return}let a;try{a=i.time()}catch{this._raf=null;return}const d=t();d>0&&(a=Math.min(a,d));const c=d>0&&a>=d,p=performance.now();if((p-this._lastUpdateMs>Ge||c)&&(this._lastUpdateMs=p,this._callbacks.onTimeUpdate(a,d)),c){if(this._callbacks.getLoop()){this._callbacks.restart();return}try{i.pause()}catch{}this._callbacks.onPaused(),this._raf=null;return}this._raf=requestAnimationFrame(n)};this._raf=requestAnimationFrame(n)}stop(){this._raf!==null&&(cancelAnimationFrame(this._raf),this._raf=null)}get isRunning(){return this._raf!==null}}function Xe(s){const i=Array.from(s.querySelectorAll("[data-composition-id]"));if(i.length===0)return s.body?[s.body]:[];const e=[];for(const t of i)Qe(t)||e.push(t);return Ze(s),e}function Ze(s){const i=s.body;if(!i||typeof console>"u"||typeof console.warn!="function")return;const e=i.querySelectorAll("audio[data-start], video[data-start]");if(e.length===0)return;const t=[];for(const r of e)r.closest("[data-composition-id]")||t.push(r);t.length!==0&&console.warn(`[hyperframes-player] selectMediaObserverTargets: composition hosts are present, but ${t.length} body-level timed media element(s) sit outside every [data-composition-id] subtree and will not be observed. Move them inside a composition host or the parent-frame proxy will never adopt them.`,t)}function Qe(s){let i=s.parentElement;for(;i;){if(i.hasAttribute("data-composition-id"))return!0;i=i.parentElement}return!1}const Je=.05,Ke=2;class et{constructor(i){h(this,"_entries",[]);h(this,"_mediaObserver");h(this,"_playbackErrorPosted",!1);h(this,"_audioOwner","runtime");h(this,"_urlAudioEntry",null);h(this,"_urlAudioSrc",null);h(this,"_dispatchEvent");h(this,"_getMuted");h(this,"_getVolume");h(this,"_getPlaybackRate");h(this,"_getCurrentTime");h(this,"_isPaused");this._dispatchEvent=i.dispatchEvent,this._getMuted=i.getMuted,this._getVolume=i.getVolume,this._getPlaybackRate=i.getPlaybackRate,this._getCurrentTime=i.getCurrentTime,this._isPaused=i.isPaused}get audioOwner(){return this._audioOwner}get entries(){return this._entries}resetForIframeLoad(){this._playbackErrorPosted=!1;const i=this._audioOwner==="parent";this._audioOwner="runtime",this.pauseAll(),this.teardownObserver(),i&&this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"runtime",reason:"iframe-reload"}}))}destroy(){this.teardownObserver();for(const i of this._entries)i.el.pause(),i.el.src="";this._entries=[],this._urlAudioEntry=null,this._urlAudioSrc=null,this._audioOwner="runtime",this._playbackErrorPosted=!1}updateMuted(i){for(const e of this._entries)e.el.muted=i}updateVolume(i){for(const e of this._entries)e.el.volume=i}updatePlaybackRate(i){for(const e of this._entries)e.el.playbackRate=i}_playEntry(i){i.el.src&&i.el.play().catch(e=>this._reportPlaybackError(e))}_playEntryIfActive(i){this._refreshEntryBounds(i),this._inWindow(i,this._getCurrentTime())&&this._playEntry(i)}_refreshEntryBounds(i){var t;if(!((t=i.source)!=null&&t.isConnected))return;const e=ue(i.source);i.start=e.start??0,i.duration=e.duration!=null&&e.duration>0?e.duration:Number.POSITIVE_INFINITY}_inWindow(i,e){return Ce(e,i.start,i.start+i.duration)}_gateEntryPlayback(i,e){return this._inWindow(i,e)?(this._audioOwner==="parent"&&!this._isPaused()&&i.el.paused&&this._playEntry(i),!0):(i.el.paused||i.el.pause(),i.driftSamples=0,!1)}playAll(){for(const i of this._entries)this._playEntryIfActive(i)}pauseAll(){for(const i of this._entries)i.el.pause()}stopAdoptedMedia(){for(const i of this._entries)i.source&&i.el.pause()}seekAll(i){for(const e of this._entries)this._refreshEntryBounds(e),this._inWindow(e,i)&&(e.el.currentTime=i-e.start)}scrubAll(i){for(const e of this._entries)this._refreshEntryBounds(e),this._inWindow(e,i)?(e.el.currentTime=i-e.start,this._playEntry(e)):e.el.paused||e.el.pause()}mirrorTime(i,e){const t=(e==null?void 0:e.force)===!0;for(const r of this._entries){if(this._refreshEntryBounds(r),!this._gateEntryPlayback(r,i))continue;const n=i-r.start;Math.abs(r.el.currentTime-n)>Je?(r.driftSamples+=1,(t||r.driftSamples>=Ke)&&(r.el.currentTime=n,r.driftSamples=0)):r.driftSamples=0}}promoteToParentProxy(i,e){if(this._audioOwner==="parent")return;if(this._audioOwner="parent",i)for(const r of i.querySelectorAll("video, audio"))w(r)&&(r.muted=!0);const t=this._getCurrentTime();e?e(t,{force:!0}):this.mirrorTime(t,{force:!0}),this._isPaused()||this.playAll(),this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"parent",reason:"autoplay-blocked"}}))}setupFromIframe(i){const e=i.querySelectorAll("audio[data-start], video[data-start]");for(const t of e)w(t)&&this._adoptIframeMedia(t);this._observeDynamicMedia(i)}setupFromUrl(i){if(this._urlAudioSrc===i&&this._urlAudioEntry)return;this.teardownUrlAudio();const e=this._createEntry(i,"audio",0,1/0);this._urlAudioEntry=e,this._urlAudioSrc=e?i:null,e&&this._audioOwner==="parent"&&!this._isPaused()&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),this.playAll())}teardownUrlAudio(){const i=this._urlAudioEntry;if(this._urlAudioEntry=null,this._urlAudioSrc=null,!i)return;i.el.pause(),i.el.src="";const e=this._entries.indexOf(i);e!==-1&&this._entries.splice(e,1)}teardownObserver(){var i;(i=this._mediaObserver)==null||i.disconnect(),this._mediaObserver=void 0}_reportPlaybackError(i){this._playbackErrorPosted||(this._playbackErrorPosted=!0,this._dispatchEvent(new CustomEvent("playbackerror",{detail:{source:"parent-proxy",error:i}})))}_createEntry(i,e,t,r,n){if(this._entries.some(p=>p.el.src===i))return null;const a=e==="video"?document.createElement("video"):new Audio;a.preload="auto",a.src=i,a.load(),a.muted=this._getMuted(),a.volume=this._getVolume();const d=this._getPlaybackRate();d!==1&&(a.playbackRate=d);const c={el:a,start:t,duration:r,driftSamples:0,source:n};return this._entries.push(c),c}_resolveIframeMediaSrc(i){var t;const e=i.getAttribute("src")||((t=i.querySelector("source"))==null?void 0:t.getAttribute("src"));return e?new URL(e,i.ownerDocument.baseURI).href:null}_adoptIframeMedia(i){if(i.preload==="metadata"||i.preload==="none")return;const e=this._resolveIframeMediaSrc(i);if(!e)return;const t=ue(i),r=t.start??0,n=t.duration??Number.POSITIVE_INFINITY,a=i.tagName==="VIDEO"?"video":"audio",d=this._createEntry(e,a,r,n,i);d&&this._audioOwner==="parent"&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),this._isPaused()||this._playEntryIfActive(d))}_detachIframeMedia(i){const e=this._resolveIframeMediaSrc(i);if(!e)return;const t=this._entries.findIndex(n=>n.el.src===e);if(t===-1)return;const r=this._entries[t];r.el.pause(),r.el.src="",this._entries.splice(t,1)}_observeDynamicMedia(i){if(this.teardownObserver(),typeof MutationObserver>"u"||!i.body)return;const e=new MutationObserver(n=>{for(const a of n){if(a.type==="attributes"&&a.attributeName==="preload"){const d=a.target;w(d)&&d.matches("audio[data-start], video[data-start]")&&d.preload==="auto"&&this._adoptIframeMedia(d);continue}for(const d of a.addedNodes){if(!ce(d))continue;const c=[];w(d)&&d.matches("audio[data-start], video[data-start]")&&c.push(d);const p=d.querySelectorAll("audio[data-start], video[data-start]");for(const u of p)w(u)&&c.push(u);for(const u of c)this._adoptIframeMedia(u)}for(const d of a.removedNodes){if(!ce(d))continue;const c=[];w(d)&&d.matches("audio[data-start], video[data-start]")&&c.push(d);const p=d.querySelectorAll("audio[data-start], video[data-start]");for(const u of p)w(u)&&c.push(u);for(const u of c)this._detachIframeMedia(u)}}}),t={childList:!0,subtree:!0,attributes:!0,attributeFilter:["preload"]},r=Xe(i);for(const n of r)e.observe(n,t);this._mediaObserver=e}}const tt=100;function it(s,i,e,t){const r=(s.frame??0)/i,n=e.duration>0?Math.min(r,e.duration):r,a=!e.paused,d=!s.isPlaying,c=e.duration>0&&n>=e.duration&&(a||s.isPlaying);if(c&&t.getLoop())return t.media.audioOwner==="parent"&&t.media.pauseAll(),t.seek(0),t.play(),{...e,currentTime:n,paused:!1};const p={...e,currentTime:n,paused:d};t.media.audioOwner==="parent"&&(a&&d?t.media.pauseAll():!a&&!d&&t.media.playAll(),t.media.mirrorTime(n));const u=performance.now(),g=d!==e.paused;return(u-e.lastUpdateMs>tt||g)&&(p.lastUpdateMs=u,t.updateControlsTime(n,e.duration),t.updateControlsPlaying(!d),t.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:n}}))),c&&(t.media.audioOwner==="parent"&&t.media.pauseAll(),p.paused=!0,t.updateControlsPlaying(!1),t.dispatchEvent(new Event("ended"))),p}function rt(s){return Array.isArray(s)?s.filter(i=>typeof i=="object"&&i!==null&&typeof i.id=="string"&&typeof i.start=="number"&&typeof i.duration=="number"):[]}function st(s,i,e){var n,a,d,c,p;if(s.source!==i)return;const t=s.data;if(!t||t.source!=="hf-preview")return;const r=Te(t);if(r.status==="unsupported"){e.dispatchEvent(new CustomEvent("runtimeprotocolerror",{detail:{code:r.code,receivedVersion:r.receivedVersion}}));return}if((n=e.setRuntimeFps)==null||n.call(e,r.fps),t.type==="shader-transition-state"){const u=t.state&&typeof t.state=="object"?t.state:{};e.shaderLoader.update(u,e.getShaderLoadingMode()),e.dispatchEvent(new CustomEvent("shadertransitionstate",{detail:{compositionId:t.compositionId,state:u}}));return}if(t.type==="ready"){e.onRuntimeReady();return}if(t.type==="assets-ready"){(a=e.onRuntimeAssetsReady)==null||a.call(e,t.timedOut===!0);return}if(t.type==="runtime-data-error"){(d=e.onRuntimeDataError)==null||d.call(e,t.channel,t.requestId,t.message);return}if(t.type==="runtime-data-applied"){(c=e.onRuntimeDataApplied)==null||c.call(e,t.channel,t.requestId);return}if(t.type==="state"){e.setPlaybackState(it({frame:t.frame??0,isPlaying:!!t.isPlaying},r.fps,e.getPlaybackState(),e));return}if(t.type==="media-autoplay-blocked"){if(((p=e.shouldPromoteMediaAutoplayFallback)==null?void 0:p.call(e))===!1)return;let u=null;try{u=e.getIframeDoc()}catch{}e.media.promoteToParentProxy(u,(g,y)=>e.media.mirrorTime(g,y)),e.sendControl("set-media-output-muted",{muted:!0});return}if(t.type==="timeline"&&t.durationInFrames>0){const u=Number(t.durationSeconds),g=Number(t.durationInFrames),y=Number.isFinite(u)&&u>0?u:g/r.fps;if(Number.isFinite(y)&&y>0){const m=e.getPlaybackState();e.setPlaybackState({...m,duration:y}),e.updateControlsTime(m.currentTime,y),e.onRuntimeTimelineReady(y,typeof t.assetsReady=="boolean"?t.assetsReady:void 0)}Number.isFinite(t.compositionWidth)&&t.compositionWidth>0&&Number.isFinite(t.compositionHeight)&&t.compositionHeight>0&&e.setCompositionSize(t.compositionWidth,t.compositionHeight),e.setScenes(rt(t.scenes));return}t.type==="stage-size"&&Number.isFinite(t.width)&&t.width>0&&Number.isFinite(t.height)&&t.height>0&&e.setCompositionSize(t.width,t.height)}function nt(s,i){return s.includes(i)?!0:/hyperframe\.runtime\.iife\.js|__hyperframes\s*=/.test(s)}const at=new Set([">"," "," ",`
|
|
464
|
-
`,"\r","\f"]);function z(s,i){const e=s.toLowerCase(),t=`<${i}`;let r=0;for(;r<e.length;){const n=e.indexOf(t,r);if(n<0)return null;const a=e[n+t.length];if(at.has(a)){const d=e.indexOf(">",n+t.length);return d<0?null:{index:n,end:d+1}}r=n+t.length}return null}function ot(s,i){if(!s||nt(s,i))return s;const e=`<script src="${i}"><\/script>`,t=z(s,"head");if(t)return s.slice(0,t.end)+e+s.slice(t.end);const r=z(s,"body");if(r)return s.slice(0,r.index)+e+s.slice(r.index);const n=z(s,"html");return n?s.slice(0,n.end)+e+s.slice(n.end):e+s}const R="shader-capture-scale",L="shader-loading",X="runtime-src",ge="__hf_shader_capture_scale",ye="__hf_shader_loading",$=["Preparing scene transitions","Sampling outgoing scene motion","Sampling incoming scene motion","Caching transition frames","Finalizing transition preview"];function Z(s){if(s===null)return null;const i=Number(s);return!Number.isFinite(i)||i<=0?null:String(Math.min(1,Math.max(.25,i)))}function dt(s){if(s===null||s.trim()==="")return"composition";const i=s.trim().toLowerCase();return i==="none"||i==="false"||i==="0"||i==="off"?"none":i==="player"||i==="true"||i==="1"||i==="on"?"player":"composition"}function ve(s,i){return s.filter(e=>e!==""&&e.split("=")[0]!==i)}function lt(s,i,e){const t=s.indexOf("#"),r=t>=0?s.slice(0,t):s,n=t>=0?s.slice(t):"",a=r.indexOf("?"),d=a>=0?r.slice(0,a):r,c=a>=0?r.slice(a+1):"";let p=ve(c.split("&"),ge);p=ve(p,ye),i!==null&&p.push(`${ge}=${encodeURIComponent(i)}`),e!=="composition"&&p.push(`${ye}=${encodeURIComponent(e)}`);const u=p.join("&");return`${d}${u?`?${u}`:""}${n}`}function ht(s,i,e){if(i===null&&e==="composition")return s;const t=[];i!==null&&t.push(`window.__HF_SHADER_CAPTURE_SCALE=${JSON.stringify(i)};`),e!=="composition"&&t.push(`window.__HF_SHADER_LOADING=${JSON.stringify(e)};`);const r=`<script data-hyperframes-player-shader-options>${t.join("")}<\/script>`;return/<head\b[^>]*>/i.test(s)?s.replace(/<head\b[^>]*>/i,n=>`${n}${r}`):/<html\b[^>]*>/i.test(s)?s.replace(/<html\b[^>]*>/i,n=>`${n}${r}`):`${r}${s}`}function M(s){return dt(s.getAttribute(L))}function ut(s){return Number(Z(s.getAttribute(R))??"1")}function N(s,i){return lt(i,Z(s.getAttribute(R)),M(s))}function F(s,i){return ot(ht(i,Z(s.getAttribute(R)),M(s)),ct(s))}function ct(s){var e;const i=(e=s.getAttribute(X))==null?void 0:e.trim();if(!i)return U;try{const t=new URL(i,document.baseURI),r=t.protocol==="http:"||t.protocol==="https:",n=t.hostname==="127.0.0.1"||t.hostname==="localhost"||t.hostname==="[::1]";return r&&(n||t.origin===location.origin)?t.href:U}catch{return U}}function pt(){const s=document.createElement("div");s.className="hfp-shader-loader",s.setAttribute("role","status"),s.setAttribute("aria-live","polite"),s.setAttribute("aria-label","Preparing scene transitions"),s.setAttribute("data-hyperframes-ignore",""),s.draggable=!1;const i=m=>{m.preventDefault(),m.stopPropagation()};for(const m of["selectstart","dragstart","pointerdown","mousedown","click","dblclick","contextmenu","touchstart"])s.addEventListener(m,i,{capture:!0});const e=document.createElement("div");e.className="hfp-shader-loader-panel",e.draggable=!1;const t=document.createElement("div");t.className="hfp-shader-loader-mark",t.draggable=!1,t.innerHTML=['<svg width="78" height="78" viewBox="0 0 100 100" fill="none" aria-hidden="true" draggable="false">','<path d="M10.1851 57.8021L33.1145 73.8313C36.2202 75.9978 41.5173 73.5433 42.4816 69.4984L51.7611 30.4271C52.7253 26.3822 48.5802 23.9277 44.4602 26.0942L13.917 42.1235C6.96677 45.7676 4.97564 54.1579 10.1851 57.8021Z" fill="url(#hfp-shader-loader-grad-left)"/>','<path d="M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z" fill="url(#hfp-shader-loader-grad-right)"/>',"<defs>",'<linearGradient id="hfp-shader-loader-grad-left" x1="48.5676" y1="25" x2="44.7804" y2="71.9384" gradientUnits="userSpaceOnUse">','<stop stop-color="#06E3FA"/>','<stop offset="1" stop-color="#4FDB5E"/>',"</linearGradient>",'<linearGradient id="hfp-shader-loader-grad-right" x1="54.8282" y1="73.8392" x2="72.0989" y2="32.8932" gradientUnits="userSpaceOnUse">','<stop stop-color="#06E3FA"/>','<stop offset="1" stop-color="#4FDB5E"/>',"</linearGradient>","</defs>","</svg>"].join("");const r=document.createElement("div");r.className="hfp-shader-loader-title";const n=document.createElement("span");n.className="hfp-shader-loader-title-text",n.textContent=$[0],r.appendChild(n);const a=document.createElement("div");a.className="hfp-shader-loader-detail",a.textContent="Rendering animated scene samples for shader transitions.";const d=document.createElement("div");d.className="hfp-shader-loader-track",d.setAttribute("aria-hidden","true");const c=document.createElement("div");c.className="hfp-shader-loader-fill",d.appendChild(c);const p=document.createElement("div");p.className="hfp-shader-loader-progress";const u=m=>{const b=document.createElement("div");b.className="hfp-shader-loader-row";const f=document.createElement("span");f.className="hfp-shader-loader-label",f.textContent=m;const v=document.createElement("span");return v.className="hfp-shader-loader-value",b.appendChild(f),b.appendChild(v),p.appendChild(b),{row:b,label:f,value:v}},g=u("transition"),y=u("transition frame");return e.appendChild(t),e.appendChild(r),e.appendChild(a),e.appendChild(d),e.appendChild(p),s.appendChild(e),{root:s,fill:c,title:n,detail:a,transitionValue:g.value,transitionRow:g.row,frameLabel:y.label,frameValue:y.value,frameRow:y.row}}const mt=420;function H(s,i,e){i.textContent=e,s.style.visibility=e?"visible":"hidden"}class ft{constructor(i){h(this,"_el");h(this,"_hideTimeout",null);h(this,"_hiddenCallbacks",[]);this._el=i}show(){this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null),this._el.root.classList.remove("hfp-hiding"),this._el.root.classList.add("hfp-visible")}hide(){if(this._el.root.classList.contains("hfp-hiding")){this._hideTimeout||this._scheduleCleanup();return}this._el.root.classList.contains("hfp-visible")&&(this._el.root.classList.add("hfp-hiding"),this._el.root.classList.remove("hfp-visible"),this._scheduleCleanup())}whenHidden(i){const e=this._el.root.classList;e.contains("hfp-visible")||e.contains("hfp-hiding")?this._hiddenCallbacks.push(i):i()}_flushHidden(){const i=this._hiddenCallbacks;this._hiddenCallbacks=[];for(const e of i)e()}reset(){this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null),this._el.root.classList.remove("hfp-visible","hfp-hiding"),this._flushHidden(),this._el.fill.style.transform="scaleX(0)",H(this._el.transitionRow,this._el.transitionValue,""),H(this._el.frameRow,this._el.frameValue,"")}update(i,e){if(e!=="player"){this.reset();return}if(i.ready||!i.loading){this.hide();return}this._el.root.setAttribute("aria-label","Preparing scene transitions");const t=typeof i.progress=="number"&&Number.isFinite(i.progress)?i.progress:0,r=typeof i.total=="number"&&Number.isFinite(i.total)?i.total:0,n=r>0?Math.min(1,Math.max(0,t/r)):0,a=Math.min($.length-1,Math.floor(n*$.length));this._el.title.textContent=$[a]||"Preparing scene transitions",this._el.detail.textContent=i.phase==="cached"?"Loading cached transition frames before playback.":i.phase==="finalizing"?"Uploading transition textures for smooth playback.":"Rendering animated scene samples for shader transitions.",this._el.fill.style.transform=`scaleX(${n})`;const d=i.currentTransition!==void 0&&i.transitionTotal!==void 0?`${i.currentTransition}/${i.transitionTotal}`:r>0?`${t}/${r}`:"",c=i.transitionFrame!==void 0&&i.transitionFrames!==void 0?`${i.transitionFrame}/${i.transitionFrames}`:"";this._el.frameLabel.textContent=i.phase==="cached"?"cached transition frames":i.phase==="finalizing"?"finalizing transition frames":"rendering transition frames",H(this._el.transitionRow,this._el.transitionValue,d),H(this._el.frameRow,this._el.frameValue,c),this._el.root.setAttribute("aria-valuenow",String(Math.round(n*100))),this.show()}showAssetsLoading(){this.reset(),this._el.title.textContent="Loading assets",this._el.detail.textContent="Waiting for images, video and fonts to finish loading.",this._el.root.setAttribute("aria-label","Loading assets"),this.show()}get hideTimeout(){return this._hideTimeout}destroy(){this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null),this._hiddenCallbacks=[]}_scheduleCleanup(){this._hideTimeout&&clearTimeout(this._hideTimeout),this._hideTimeout=setTimeout(()=>{this._el.root.classList.remove("hfp-hiding"),this._hideTimeout=null,this._flushHidden()},mt)}}const _t=.1,gt=5,B="sandbox-origin",be=1e4,q=8e3,G="assets-loading",yt=150;function Y(s){return!Number.isFinite(s)||s<=0?1:Math.max(_t,Math.min(gt,s))}class vt extends HTMLElement{constructor(){super();h(this,"shadow");h(this,"container");h(this,"iframe");h(this,"posterEl",null);h(this,"controlsApi",null);h(this,"resizeObserver");h(this,"shaderLoader");h(this,"probe");h(this,"_ready",!1);h(this,"_assetsReady",!1);h(this,"_painted",!1);h(this,"_pendingPlay",!1);h(this,"_assetsGeneration",0);h(this,"_assetsLoadingShowTimer",null);h(this,"_currentTime",0);h(this,"_duration",0);h(this,"_paused",!0);h(this,"_scrubbing",!1);h(this,"_lastUpdateMs",0);h(this,"_volume",1);h(this,"_compositionWidth",1920);h(this,"_compositionHeight",1080);h(this,"_rescaleWarned",!1);h(this,"_directTimelineAdapter",null);h(this,"_directTimelineClock");h(this,"_parentTickRaf",null);h(this,"_media");h(this,"_scenes",[]);h(this,"_runtimeFps",30);h(this,"_runtimeBridgeReady",!1);h(this,"_runtimeAssetsReadyGeneration",-1);h(this,"_runtimeData",new Map);h(this,"_runtimeDataRequestId",0);h(this,"_pendingRuntimeData",new Map);this.shadow=this.attachShadow({mode:"open"}),ze(this.shadow,Ne),{container:this.container,iframe:this.iframe}=Be(),this.shadow.appendChild(this.container);const e=pt();this.shadow.appendChild(e.root),this.shaderLoader=new ft(e),this._media=new et({dispatchEvent:t=>this.dispatchEvent(t),getMuted:()=>this.muted,getVolume:()=>this._volume,getPlaybackRate:()=>this.playbackRate,getCurrentTime:()=>this._currentTime,isPaused:()=>this._paused}),this._directTimelineClock=new Ye({onTimeUpdate:(t,r)=>{var n;this._currentTime=t,(n=this.controlsApi)==null||n.updateTime(t,r),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:t}}))},getLoop:()=>this.loop,restart:()=>{this.seek(0),this.play()},onPaused:()=>{var t;this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,(t=this.controlsApi)==null||t.updatePlaying(!1),this.dispatchEvent(new Event("ended"))},onEnded:()=>this.loop}),this.probe=new Oe(this.iframe,{onReady:t=>this._onProbeReady(t),onError:t=>this.dispatchEvent(new CustomEvent("error",{detail:{message:t}}))}),this.addEventListener("click",t=>{je(t)||(this._paused?this.play():this.pause())}),this.resizeObserver=new ResizeObserver(()=>this._rescale()),this._onMessage=this._onMessage.bind(this),this._onIframeLoad=this._onIframeLoad.bind(this)}static get observedAttributes(){return["src","srcdoc","width","height","controls","muted","audio-locked","volume","poster","playback-rate","audio-src",B,X,R,L]}connectedCallback(){this._applySandboxOriginPolicy(),this.resizeObserver.observe(this),window.addEventListener("message",this._onMessage),this.iframe.addEventListener("load",this._onIframeLoad),this.hasAttribute("controls")&&this._setupControls(),this.hasAttribute("poster")&&(this.posterEl=_e(this.shadow,this.getAttribute("poster"),this.posterEl)),this.hasAttribute("audio-src")&&this._media.setupFromUrl(this.getAttribute("audio-src")),this.hasAttribute("srcdoc")&&(this.iframe.srcdoc=F(this,this.getAttribute("srcdoc"))),this.hasAttribute("src")&&(this.iframe.src=N(this,this.getAttribute("src"))),!this.hasAttribute("audio-locked")&&this._isLockedHostEnvironment()&&this._applyAudioLock(!0)}disconnectedCallback(){var e;this._sendControl("pause"),this._stopIframeMedia(),this.resizeObserver.disconnect(),window.removeEventListener("message",this._onMessage),this.iframe.removeEventListener("load",this._onIframeLoad),this.probe.stop(),this._directTimelineClock.stop(),this._stopParentTickClock(),this._directTimelineAdapter=null,this.shaderLoader.destroy(),this._media.destroy(),(e=this.controlsApi)==null||e.destroy(),this.controlsApi=null,this._paused=!0,this._ready=!1,this._invalidateAssetsWait(),this._runtimeBridgeReady=!1,this._rejectAllRuntimeDataDeliveries("Player disconnected before runtime data was applied")}attributeChangedCallback(e,t,r){var n,a,d,c,p;switch(e){case"src":if(!this.isConnected)break;r&&(this._ready=!1,this._invalidateAssetsWait(),this._runtimeBridgeReady=!1,this._rejectAllRuntimeDataDeliveries("Composition navigated before runtime data was applied"),this.iframe.src=N(this,r));break;case"srcdoc":if(!this.isConnected)break;this._ready=!1,this._invalidateAssetsWait(),this._runtimeBridgeReady=!1,this._rejectAllRuntimeDataDeliveries("Composition navigated before runtime data was applied"),r!==null?this.iframe.srcdoc=F(this,r):this.iframe.removeAttribute("srcdoc");break;case B:this._applySandboxOriginPolicy(this.isConnected&&t!==r);break;case"width":this._compositionWidth=W(r)??1920,this._rescale();break;case"height":this._compositionHeight=W(r)??1080,this._rescale();break;case"controls":r!==null?this._setupControls():((n=this.controlsApi)==null||n.destroy(),this.controlsApi=null);break;case"poster":this.posterEl=_e(this.shadow,r,this.posterEl);break;case"playback-rate":{const u=Y(parseFloat(r||"1"));this._media.updatePlaybackRate(u),this._sendControl("set-playback-rate",{playbackRate:u}),(d=(a=this._directTimelineAdapter)==null?void 0:a.timeScale)==null||d.call(a,u),(c=this.controlsApi)==null||c.updateSpeed(u),this.dispatchEvent(new Event("ratechange"));break}case"muted":this._handleMutedChange(r);break;case"audio-locked":this._applyAudioLock(r!==null);break;case"volume":{const u=Math.max(0,Math.min(1,parseFloat(r||"1")));this._volume=u,this._media.updateVolume(u),this._sendControl("set-volume",{volume:u}),(p=this.controlsApi)==null||p.updateVolume(u),this.dispatchEvent(new Event("volumechange"));break}case"audio-src":r?this._media.setupFromUrl(r):this._media.teardownUrlAudio();break;case R:case L:case X:if(!this.isConnected)break;this._reloadShaderOptions();break}}_applySandboxOriginPolicy(e=!1){this.hasAttribute(B)?this.iframe.sandbox.remove("allow-same-origin"):this.iframe.sandbox.add("allow-same-origin"),e&&this._reloadForSandboxOriginPolicy()}_reloadForSandboxOriginPolicy(){this._ready=!1,this._invalidateAssetsWait(),this._runtimeBridgeReady=!1,this._rejectAllRuntimeDataDeliveries("Sandbox policy changed before runtime data was applied");const e=this.getAttribute("srcdoc");if(e!==null){this.iframe.srcdoc=F(this,e);return}const t=this.getAttribute("src");this.iframe.src=t===null?"about:blank":N(this,t)}get iframeElement(){return this.iframe}get scenes(){return this._scenes}play(){var r,n;if(this._ready&&!this._assetsReady){this._pendingPlay=!0;return}this._pendingPlay=!1,(r=this.posterEl)==null||r.remove(),this.posterEl=null,this._duration>0&&this._currentTime>=this._duration&&this.seek(0),this._paused=!1;const e=this._tryDirectTimelinePlay();let t=!1;e||(this._sendControl("play"),this._ready&&!this._directTimelineAdapter?this._startParentTickClock():this._ready||(this._pendingPlay=!0,t=!0)),this._media.audioOwner==="parent"&&this._media.playAll(),(n=this.controlsApi)==null||n.updatePlaying(!0),t||this.dispatchEvent(new Event("play")),e&&this._directTimelineAdapter&&this._directTimelineClock.start(this._directTimelineAdapter,()=>this._currentTime,()=>this._duration,()=>this._paused)}pause(){var e;this._pendingPlay=!1,this._tryDirectTimelinePause()||this._sendControl("pause"),this._directTimelineClock.stop(),this._stopParentTickClock(),this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,(e=this.controlsApi)==null||e.updatePlaying(!1),this.dispatchEvent(new Event("pause"))}stopMedia(){this._sendControl("stop-media"),this._stopIframeMedia(),this._media.stopAdoptedMedia()}seek(e){var t,r;this._pendingPlay=!1,!this._trySyncSeek(e)&&!this._tryDirectTimelineSeek(e)&&this._sendControl("seek",{timeSeconds:e,frame:Math.round(e*this._runtimeFps)}),this._directTimelineClock.stop(),this._stopParentTickClock(),this._currentTime=e,this._media.audioOwner==="parent"&&(this._scrubbing?this._media.scrubAll(e):(this._media.pauseAll(),this._media.seekAll(e))),this._paused=!0,(t=this.controlsApi)==null||t.updatePlaying(!1),(r=this.controlsApi)==null||r.updateTime(this._currentTime,this._duration)}setColorGrading(e,t){this._sendControl("set-color-grading",{target:e,grading:t})}clearColorGrading(e){this._sendControl("set-color-grading",{target:e,grading:null})}setColorGradingCompare(e,t){this._sendControl("set-color-grading-compare",{target:e,compare:t})}clearColorGradingCompare(e){this._sendControl("set-color-grading-compare",{target:e,compare:{enabled:!1}})}setRuntimeData(e,t){if(!/^[a-z][a-z0-9-]{0,63}$/.test(e))throw new Error(`Invalid HyperFrames runtime-data channel: ${e}`);if(typeof structuredClone!="function")throw new Error("HyperFrames runtime data requires structuredClone support; refusing an unverified payload");const r=structuredClone(t);this._runtimeData.set(e,r),this._deliverRuntimeData(e,r)}clearRuntimeData(e){if(!/^[a-z][a-z0-9-]{0,63}$/.test(e))throw new Error(`Invalid HyperFrames runtime-data channel: ${e}`);this._runtimeData.delete(e),this._deliverRuntimeDataClear(e)}get currentTime(){return this._currentTime}set currentTime(e){this.seek(e)}get duration(){return this._duration}get paused(){return this._paused}get ready(){return this._ready}get assetsReady(){return this._assetsReady}get painted(){return this._painted}get playbackRate(){return Y(parseFloat(this.getAttribute("playback-rate")||"1"))}set playbackRate(e){this.setAttribute("playback-rate",String(Y(e)))}get shaderCaptureScale(){return ut(this)}set shaderCaptureScale(e){this.setAttribute(R,String(e))}get shaderLoading(){return M(this)}set shaderLoading(e){e==="composition"?this.removeAttribute(L):this.setAttribute(L,e)}get muted(){return this.hasAttribute("muted")}set muted(e){e?this.setAttribute("muted",""):this.removeAttribute("muted")}get audioLocked(){return this.hasAttribute("audio-locked")}set audioLocked(e){e?this.setAttribute("audio-locked",""):this.removeAttribute("audio-locked")}_isLockedHostEnvironment(){if(typeof navigator>"u")return!1;const e=navigator.userAgent||"";return/\bClaude\/\d/.test(e)&&/\bElectron\b/.test(e)}_isAudioLocked(){return this.hasAttribute("audio-locked")||this._isLockedHostEnvironment()}_isSlideshowPlayer(){return this.closest("hyperframes-slideshow")!==null}_handleMutedChange(e){var t;if(e===null&&this._isAudioLocked()){this.setAttribute("muted","");return}this._media.updateMuted(e!==null),this._setIframeMediaMuted(e!==null),this._sendControl("set-muted",{muted:e!==null}),(t=this.controlsApi)==null||t.updateMuted(e!==null),this.dispatchEvent(new Event("volumechange"))}_applyAudioLock(e){var t;e&&(this.muted=!0),(t=this.controlsApi)==null||t.setVolumeControlsHidden(e)}get volume(){return this._volume}set volume(e){this.setAttribute("volume",String(Math.max(0,Math.min(1,e))))}get loop(){return this.hasAttribute("loop")}set loop(e){e?this.setAttribute("loop",""):this.removeAttribute("loop")}_sendControl(e,t={}){try{const r=this.iframe.contentWindow;return r?(r.postMessage({...t,source:"hf-parent",type:"control",action:e,...Re(this._runtimeFps)},"*"),!0):((e==="set-runtime-data"||e==="clear-runtime-data")&&this._rejectRuntimeDataDelivery(t.channel,t.requestId,"Composition iframe is unavailable"),!1)}catch(r){return(e==="set-runtime-data"||e==="clear-runtime-data")&&this._rejectRuntimeDataDelivery(t.channel,t.requestId,r instanceof Error?r.message:String(r)),!1}}_deliverRuntimeData(e,t){if(!this.isConnected||!this._runtimeBridgeReady)return;const r=this._beginRuntimeDataDelivery(e);this._trySetRuntimeDataDirect(e,t,r)||this._sendControl("set-runtime-data",{channel:e,payload:t,requestId:r})}_deliverRuntimeDataClear(e){if(!this.isConnected||!this._runtimeBridgeReady)return;const t=this._beginRuntimeDataDelivery(e);this._tryClearRuntimeDataDirect(e,t)||this._sendControl("clear-runtime-data",{channel:e,requestId:t})}_trySetRuntimeDataDirect(e,t,r){var n;try{const a=(n=this.iframe.contentWindow)==null?void 0:n.__hyperframes;return typeof(a==null?void 0:a.setRuntimeData)!="function"?!1:(a.setRuntimeData(e,t,r),!0)}catch{return!1}}_tryClearRuntimeDataDirect(e,t){var r;try{const n=(r=this.iframe.contentWindow)==null?void 0:r.__hyperframes;return typeof(n==null?void 0:n.clearRuntimeData)!="function"?!1:(n.clearRuntimeData(e,t),!0)}catch{return!1}}_replayRuntimeData(){for(const[e,t]of this._runtimeData)this._deliverRuntimeData(e,t)}_beginRuntimeDataDelivery(e){const t=this._pendingRuntimeData.get(e);t&&window.clearTimeout(t.timeoutId),this._runtimeDataRequestId+=1;const r=this._runtimeDataRequestId,n=window.setTimeout(()=>{this._rejectRuntimeDataDelivery(e,r,`Runtime data delivery timed out after ${be}ms`)},be);return this._pendingRuntimeData.set(e,{requestId:r,timeoutId:n}),r}_resolveRuntimeDataDelivery(e,t){const r=this._takeRuntimeDataDelivery(e,t);r&&this.dispatchEvent(new CustomEvent("runtimedataapplied",{detail:{channel:e,requestId:r.requestId}}))}_rejectRuntimeDataDelivery(e,t,r){const n=this._takeRuntimeDataDelivery(e,t);n&&this.dispatchEvent(new CustomEvent("runtimedataerror",{detail:{channel:e,requestId:n.requestId,message:typeof r=="string"?r:String(r)}}))}_takeRuntimeDataDelivery(e,t){if(typeof e!="string"||typeof t!="number"||!Number.isSafeInteger(t))return null;const r=this._pendingRuntimeData.get(e);return!r||r.requestId!==t?null:(window.clearTimeout(r.timeoutId),this._pendingRuntimeData.delete(e),r)}_rejectAllRuntimeDataDeliveries(e){for(const[t,r]of[...this._pendingRuntimeData])this._rejectRuntimeDataDelivery(t,r.requestId,e)}_getSameOriginIframeDocument(){try{return this.iframe.contentDocument}catch{return null}}_setIframeMediaMuted(e){const t=this._getSameOriginIframeDocument();if(t)for(const r of t.querySelectorAll("video, audio"))w(r)&&(r.muted=e||r.defaultMuted)}_stopIframeMedia(){const e=this._getSameOriginIframeDocument();if(e)for(const t of e.querySelectorAll("video, audio"))w(t)&&t.pause()}_replayBridgeState(){this._sendControl("set-muted",{muted:this.muted}),this._sendControl("set-volume",{volume:this._volume}),this._sendControl("set-playback-rate",{playbackRate:this.playbackRate}),this._sendControl("set-native-media-sync-disabled",{disabled:this._isSlideshowPlayer()}),this._sendControl("set-web-audio-media-disabled",{disabled:this._isSlideshowPlayer()})}_reloadShaderOptions(){if(this._ready=!1,this._invalidateAssetsWait(),this._runtimeBridgeReady=!1,this._rejectAllRuntimeDataDeliveries("Shader options changed before runtime data was applied"),M(this)!=="player"&&this.shaderLoader.reset(),this.hasAttribute("srcdoc")){this.iframe.srcdoc=F(this,this.getAttribute("srcdoc")||"");return}this.hasAttribute("src")&&(this.iframe.src=N(this,this.getAttribute("src")||""))}_trySyncSeek(e){try{const t=this.iframe.contentWindow,r=t==null?void 0:t.__player;return typeof(r==null?void 0:r.seek)!="function"?!1:(r.seek.call(r,e),!0)}catch{return!1}}_withDirectTimeline(e){var n;const t=this.probe.resolveDirectTimelineAdapter(),r=t||this._directTimelineAdapter;if(!r)return!1;try{if(e(r),t&&t!==this._directTimelineAdapter){const a=t.duration();Number.isFinite(a)&&a>0&&(this._duration=a,(n=this.controlsApi)==null||n.updateTime(this._currentTime,a))}return this._directTimelineAdapter=r,!0}catch{return!1}}_tryDirectTimelineSeek(e){return this._withDirectTimeline(t=>{t.seek(e,!1),t.pause()})}_tryDirectTimelinePlay(){return this._withDirectTimeline(e=>void e.play())}_tryDirectTimelinePause(){return this._withDirectTimeline(e=>void e.pause())}_startParentTickClock(){this._stopParentTickClock();const e=()=>{if(this._paused){this._parentTickRaf=null;return}this._sendControl("tick"),this._parentTickRaf=requestAnimationFrame(e)};this._parentTickRaf=requestAnimationFrame(e)}_stopParentTickClock(){this._parentTickRaf!==null&&(cancelAnimationFrame(this._parentTickRaf),this._parentTickRaf=null)}_onMessage(e){st(e,this.iframe.contentWindow,{getPlaybackState:()=>({currentTime:this._currentTime,duration:this._duration,paused:this._paused,lastUpdateMs:this._lastUpdateMs}),setPlaybackState:({currentTime:t,duration:r,paused:n,lastUpdateMs:a})=>{this._currentTime=t,this._duration=r,this._paused=n,this._lastUpdateMs=a},getShaderLoadingMode:()=>M(this),shaderLoader:this.shaderLoader,setCompositionSize:(t,r)=>{this._compositionWidth=t,this._compositionHeight=r,this._rescale()},sendControl:(t,r)=>this._sendControl(t,r),getIframeDoc:()=>this.iframe.contentDocument,onRuntimeReady:()=>{this._runtimeBridgeReady=!0,this._replayBridgeState(),this._replayRuntimeData()},onRuntimeAssetsReady:()=>{this._runtimeAssetsReadyGeneration===this._assetsGeneration&&this._settleAssetsReady(this._assetsGeneration)},onRuntimeDataApplied:(t,r)=>this._resolveRuntimeDataDelivery(t,r),onRuntimeDataError:(t,r,n)=>this._rejectRuntimeDataDelivery(t,r,n),onRuntimeTimelineReady:(t,r)=>this._onRuntimeTimelineReady(t,r),setRuntimeFps:t=>{this._runtimeFps=t},shouldPromoteMediaAutoplayFallback:()=>!this._isSlideshowPlayer(),setScenes:t=>{this._scenes=t,this.dispatchEvent(new CustomEvent("scenes",{detail:{scenes:t}}))},updateControlsTime:(t,r)=>{var n;return(n=this.controlsApi)==null?void 0:n.updateTime(t,r)},updateControlsPlaying:t=>{var r;return(r=this.controlsApi)==null?void 0:r.updatePlaying(t)},dispatchEvent:t=>this.dispatchEvent(t),seek:t=>this.seek(t),play:()=>this.play(),getLoop:()=>this.loop,media:this._media})}_onRuntimeTimelineReady(e,t){var n;if(this._ready)return;this.probe.stop(),this._duration=e,this._directTimelineAdapter=null,this._ready=!0,(n=this.controlsApi)==null||n.updateTime(this._currentTime,e),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:e}})),this._rescale();const r=this._getSameOriginIframeDocument();r&&this._media.setupFromIframe(r),this._replayBridgeState(),this._setIframeMediaMuted(this.muted),this._waitForAssetsReady(r,t),(this.hasAttribute("autoplay")||this._pendingPlay)&&this.play()}_onProbeReady({duration:e,adapter:t,compositionSize:r}){var a;this._duration=e,this._directTimelineAdapter=t.kind==="direct-timeline"?t.timeline:null,this._ready=!0,(a=this.controlsApi)==null||a.updateTime(0,e),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:e}})),r&&(this._compositionWidth=r.width,this._compositionHeight=r.height,this._rescale());const n=this._getSameOriginIframeDocument();n&&this._media.setupFromIframe(n),this._setIframeMediaMuted(this.muted),this._waitForAssetsReady(n),(this.hasAttribute("autoplay")||this._pendingPlay)&&this.play()}_waitForAssetsReady(e,t){this._clearAssetsLoadingShowTimer(),this._assetsReady=!1,this._painted=!1;const r=++this._assetsGeneration;if(!e){t===!1?(this._runtimeAssetsReadyGeneration=r,this._startAssetsLoadingOverlayTimer(r),setTimeout(()=>this._settleAssetsReady(r),q)):this._settleAssetsReady(r);return}Se(e,({timedOut:n})=>{r===this._assetsGeneration&&(n&&this._warnStuckAssets(e),this._settleAssetsReady(r))},{timeoutMs:q}),this._assetsReady||this._startAssetsLoadingOverlayTimer(r)}_startAssetsLoadingOverlayTimer(e){this._assetsLoadingShowTimer=setTimeout(()=>{this._assetsLoadingShowTimer=null,!(e!==this._assetsGeneration||this._assetsReady)&&(this.setAttribute(G,""),this.shaderLoader.showAssetsLoading())},yt)}_warnStuckAssets(e){const{pendingMedia:t,pendingImages:r,fontsLoading:n}=Le(e,{scope:Me}),a=e.defaultView;console.warn(`[hyperframes-player] assets-loading timed out after ${q}ms — playing anyway`,{stuckMedia:t.map(d=>d.currentSrc||d.getAttribute("src")||`<${d.tagName.toLowerCase()}>`),stuckImages:r.map(d=>d.currentSrc||d.getAttribute("src")||"<img>"),fontsLoading:n,computeReady:(a==null?void 0:a.__renderReady)===!0,documentHidden:e.hidden===!0})}_settleAssetsReady(e){e!==this._assetsGeneration||this._assetsReady||(this._clearAssetsLoadingShowTimer(),this._assetsReady=!0,this.removeAttribute(G),this.shaderLoader.hide(),this.dispatchEvent(new Event("assetsready")),this.shaderLoader.whenHidden(()=>{e===this._assetsGeneration&&(this._painted=!0,this.dispatchEvent(new Event("painted")))}),this._pendingPlay&&this.play())}_invalidateAssetsWait(){this._clearAssetsLoadingShowTimer(),this._assetsReady=!1,this._painted=!1,this._pendingPlay=!1,this._assetsGeneration++,this.removeAttribute(G),this.shaderLoader.hide()}_clearAssetsLoadingShowTimer(){this._assetsLoadingShowTimer!==null&&(clearTimeout(this._assetsLoadingShowTimer),this._assetsLoadingShowTimer=null)}_rescale(){!qe(this,this.iframe,this._compositionWidth,this._compositionHeight)&&this._ready&&!this._rescaleWarned&&(this._rescaleWarned=!0,console.warn("[hyperframes-player] rescale no-op after ready — zero-size player element",{src:this.getAttribute("src"),offsetWidth:this.offsetWidth,offsetHeight:this.offsetHeight,compositionWidth:this._compositionWidth,compositionHeight:this._compositionHeight}))}_onIframeLoad(){this._ready&&this._getSameOriginIframeDocument()===null||(this._ready=!1,this._directTimelineAdapter=null,this._directTimelineClock.stop(),this._stopParentTickClock(),this._invalidateAssetsWait(),this.shaderLoader.reset(),this._media.resetForIframeLoad(),this.probe.start())}_setupControls(){this.controlsApi||(this.controlsApi=We(this.shadow,this.muted,this._volume,this.getAttribute("speed-presets"),{onPlay:()=>this.play(),onPause:()=>this.pause(),onSeek:e=>this.seek(e*this._duration),onScrubStart:()=>{this._scrubbing=!0},onScrubEnd:()=>{this._scrubbing=!1,this.seek(this._currentTime)},onSpeedChange:e=>void(this.playbackRate=e),onMuteToggle:()=>void(this.muted=!this.muted),onVolumeChange:e=>void(this.volume=e)},this._isAudioLocked()))}get _audioOwner(){return this._media.audioOwner}get _parentMedia(){return this._media.entries}_mirrorParentMediaTime(e,t){this._media.mirrorTime(e,t)}_promoteToParentProxy(){let e=null;try{e=this.iframe.contentDocument}catch{}this._media.promoteToParentProxy(e,(t,r)=>this._mirrorParentMediaTime(t,r)),this._sendControl("set-media-output-muted",{muted:!0})}_observeDynamicMedia(e){this._media.setupFromIframe(e)}}customElements.get("hyperframes-player")||customElements.define("hyperframes-player",vt);export{vt as HyperframesPlayer,$e as SPEED_PRESETS,j as formatSpeed,fe as formatTime};
|