@hyperframes/player 0.6.0-alpha.9 → 0.6.1
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/hyperframes-player.cjs +2 -2
- package/dist/hyperframes-player.cjs.map +1 -1
- package/dist/hyperframes-player.d.cts +45 -261
- package/dist/hyperframes-player.d.ts +45 -261
- package/dist/hyperframes-player.global.js +2 -2
- package/dist/hyperframes-player.global.js.map +1 -1
- package/dist/hyperframes-player.js +2 -2
- package/dist/hyperframes-player.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Parent-frame media proxy subsystem.
|
|
3
|
+
*
|
|
4
|
+
* Maintains mirror copies of the iframe's timed `<audio>`/`<video>` elements
|
|
5
|
+
* in the parent frame so that mobile browsers — which gate `el.play()` on user
|
|
6
|
+
* activation in the *same* frame — can still produce audible output via proxies
|
|
7
|
+
* the parent controls directly.
|
|
8
|
+
*
|
|
9
|
+
* See the class-level JSDoc on `HyperframesPlayer` for the full ownership model.
|
|
10
|
+
*/
|
|
11
|
+
interface ProxyEntry {
|
|
12
|
+
el: HTMLMediaElement;
|
|
13
|
+
start: number;
|
|
14
|
+
duration: number;
|
|
15
|
+
/**
|
|
16
|
+
* Count of consecutive steady-state samples in which the proxy's
|
|
17
|
+
* `currentTime` was found drifted beyond `MIRROR_DRIFT_THRESHOLD_SECONDS`.
|
|
18
|
+
* Reset on every in-threshold sample. A write is only issued once this
|
|
19
|
+
* reaches `MIRROR_REQUIRED_CONSECUTIVE_DRIFT_SAMPLES`, absorbing
|
|
20
|
+
* single-sample jitter without thrashing.
|
|
21
|
+
*/
|
|
22
|
+
driftSamples: number;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
type ShaderLoadingMode = "composition" | "player" | "none";
|
|
26
|
+
|
|
1
27
|
interface ControlsCallbacks {
|
|
2
28
|
onPlay: () => void;
|
|
3
29
|
onPause: () => void;
|
|
@@ -15,7 +41,6 @@ interface ControlsOptions {
|
|
|
15
41
|
declare function formatSpeed(speed: number): string;
|
|
16
42
|
declare function formatTime(seconds: number): string;
|
|
17
43
|
|
|
18
|
-
type ShaderLoadingMode = "composition" | "player" | "none";
|
|
19
44
|
declare class HyperframesPlayer extends HTMLElement {
|
|
20
45
|
static get observedAttributes(): string[];
|
|
21
46
|
private shadow;
|
|
@@ -24,124 +49,31 @@ declare class HyperframesPlayer extends HTMLElement {
|
|
|
24
49
|
private posterEl;
|
|
25
50
|
private controlsApi;
|
|
26
51
|
private resizeObserver;
|
|
27
|
-
private
|
|
28
|
-
private
|
|
29
|
-
private shaderLoaderTitleEl;
|
|
30
|
-
private shaderLoaderDetailEl;
|
|
31
|
-
private shaderLoaderTransitionValueEl;
|
|
32
|
-
private shaderLoaderFrameLabelEl;
|
|
33
|
-
private shaderLoaderFrameValueEl;
|
|
34
|
-
private shaderLoaderFrameRowEl;
|
|
35
|
-
private shaderLoaderHideTimeout;
|
|
52
|
+
private shaderLoader;
|
|
53
|
+
private probe;
|
|
36
54
|
private _ready;
|
|
37
|
-
private _duration;
|
|
38
55
|
private _currentTime;
|
|
56
|
+
private _duration;
|
|
39
57
|
private _paused;
|
|
58
|
+
private _lastUpdateMs;
|
|
40
59
|
private _volume;
|
|
41
60
|
private _compositionWidth;
|
|
42
61
|
private _compositionHeight;
|
|
43
|
-
private _probeInterval;
|
|
44
|
-
private _lastUpdateMs;
|
|
45
62
|
private _directTimelineAdapter;
|
|
46
|
-
private
|
|
47
|
-
|
|
48
|
-
* Parent-frame audio/video proxies, preloaded mirror copies of the iframe's
|
|
49
|
-
* timed media. They exist as a fallback for environments that block iframe
|
|
50
|
-
* `.play()` — mobile browsers require the user gesture to originate in the
|
|
51
|
-
* same frame as the media element, and postMessage doesn't transfer user
|
|
52
|
-
* activation (User Activation v2). The runtime inside the iframe signals
|
|
53
|
-
* `media-autoplay-blocked` the first time a play() attempt rejects with
|
|
54
|
-
* `NotAllowedError`; receiving that message flips `_audioOwner` to `parent`
|
|
55
|
-
* and these proxies start driving audible output while the iframe keeps
|
|
56
|
-
* advancing timed media silently for frame-accurate state.
|
|
57
|
-
*
|
|
58
|
-
* Preloading at iframe-load time (rather than lazily on promotion) keeps
|
|
59
|
-
* the audible audio cut-in tight when the promotion fires mid-playback.
|
|
60
|
-
*/
|
|
61
|
-
private _parentMedia;
|
|
62
|
-
/**
|
|
63
|
-
* Who owns audible playback right now.
|
|
64
|
-
*
|
|
65
|
-
* - `runtime` (default): the iframe's runtime drives timed media; parent
|
|
66
|
-
* proxies stay paused and silent. This is the correct path on desktop,
|
|
67
|
-
* in same-frame embeds, and anywhere the iframe has user activation.
|
|
68
|
-
* - `parent`: parent-frame proxies drive audible output; the iframe keeps
|
|
69
|
-
* syncing timed media but at `muted = true` (orthogonal to author/user
|
|
70
|
-
* volume settings). Entered only in response to an actual autoplay
|
|
71
|
-
* rejection from the runtime — we don't guess device class.
|
|
72
|
-
*
|
|
73
|
-
* The transition is one-way per session; once autoplay is known to be
|
|
74
|
-
* gated, there's no benefit to attempting the iframe path again.
|
|
75
|
-
*/
|
|
76
|
-
private _audioOwner;
|
|
77
|
-
/**
|
|
78
|
-
* Watches the iframe document for sub-composition media added after
|
|
79
|
-
* initial setup. Disconnected on iframe reload (fresh iframe = fresh
|
|
80
|
-
* observer against the new document).
|
|
81
|
-
*/
|
|
82
|
-
private _mediaObserver?;
|
|
83
|
-
/**
|
|
84
|
-
* One-shot latch for `playbackerror`. Without it, under parent ownership
|
|
85
|
-
* where the parent frame itself lacks activation, every paused→playing
|
|
86
|
-
* transition in the iframe state loop would re-fire `play()` (and its
|
|
87
|
-
* rejection) on each proxy — spamming host subscribers through a whole
|
|
88
|
-
* playback session. Mirrors the `mediaAutoplayBlockedPosted` latch on the
|
|
89
|
-
* runtime side. Cleared on `_onIframeLoad` alongside the owner reset, so
|
|
90
|
-
* a fresh composition gets a fresh shot at surfacing the error.
|
|
91
|
-
*/
|
|
92
|
-
private _playbackErrorPosted;
|
|
63
|
+
private _directTimelineClock;
|
|
64
|
+
private _media;
|
|
93
65
|
constructor();
|
|
94
66
|
connectedCallback(): void;
|
|
95
67
|
disconnectedCallback(): void;
|
|
96
68
|
attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
|
|
97
69
|
/**
|
|
98
|
-
*
|
|
99
|
-
*
|
|
100
|
-
*
|
|
101
|
-
* timeline tools (e.g. `@hyperframes/studio`) that need to inspect
|
|
102
|
-
* the composition's DOM or read its `__player` / `__timelines`
|
|
103
|
-
* runtime objects.
|
|
104
|
-
*
|
|
105
|
-
* **Common pitfall:** the iframe lives inside the player's Shadow DOM.
|
|
106
|
-
* Passing the `<hyperframes-player>` element itself to code that expects
|
|
107
|
-
* an `<iframe>` will silently break — `.contentWindow` returns `null`.
|
|
108
|
-
* Always extract `iframeElement` first:
|
|
109
|
-
*
|
|
110
|
-
* ```ts
|
|
111
|
-
* // ❌ Wrong — element ref doesn't expose contentWindow
|
|
112
|
-
* iframeRef.current = playerRef.current;
|
|
113
|
-
*
|
|
114
|
-
* // ✓ Right — bridge the actual iframe
|
|
115
|
-
* iframeRef.current = playerRef.current.iframeElement;
|
|
116
|
-
* ```
|
|
70
|
+
* The inner `<iframe>` rendering the composition. Use this when integrating
|
|
71
|
+
* with tools that need `contentWindow` — `.contentWindow` on the
|
|
72
|
+
* `<hyperframes-player>` element itself returns `null` (Shadow DOM).
|
|
117
73
|
*/
|
|
118
74
|
get iframeElement(): HTMLIFrameElement;
|
|
119
75
|
play(): void;
|
|
120
76
|
pause(): void;
|
|
121
|
-
/**
|
|
122
|
-
* Move playback to `timeInSeconds`.
|
|
123
|
-
*
|
|
124
|
-
* Two transports, with different precision semantics — read this before
|
|
125
|
-
* writing assertions against `seek` from outside the player:
|
|
126
|
-
*
|
|
127
|
-
* - **Same-origin (sync) path** — when the runtime's `window.__player.seek`
|
|
128
|
-
* is reachable, we call it directly. `timeInSeconds` is forwarded
|
|
129
|
-
* *verbatim* (no rounding), so a same-origin scrub of `seek(7.3333)`
|
|
130
|
-
* lands the runtime at `7.3333 s` — sub-frame precision relative to
|
|
131
|
-
* `DEFAULT_FPS` (30). Studio scrub UIs that need fractional-frame
|
|
132
|
-
* alignment (e.g. waveform scrubbing on long-duration audio) get the
|
|
133
|
-
* exact requested time.
|
|
134
|
-
* - **Cross-origin (postMessage) path** — when same-origin access throws
|
|
135
|
-
* or `__player.seek` is missing, we fall back to the postMessage bridge.
|
|
136
|
-
* The wire protocol carries integer frames (`frame: Math.round(t × FPS)`),
|
|
137
|
-
* so cross-origin embeds are *frame-quantized* and `seek(7.3333)` lands
|
|
138
|
-
* at `Math.round(7.3333 × 30) / 30 ≈ 7.3333…` (same value here, but for
|
|
139
|
-
* most fractional inputs you'll see a snap to the nearest 1/30 s).
|
|
140
|
-
*
|
|
141
|
-
* `this._currentTime` always reflects the *requested* `timeInSeconds`
|
|
142
|
-
* regardless of transport, so the controls UI shows the un-quantized value
|
|
143
|
-
* either way; the asymmetry only affects what the runtime actually paints.
|
|
144
|
-
*/
|
|
145
77
|
seek(timeInSeconds: number): void;
|
|
146
78
|
get currentTime(): number;
|
|
147
79
|
set currentTime(t: number);
|
|
@@ -161,172 +93,24 @@ declare class HyperframesPlayer extends HTMLElement {
|
|
|
161
93
|
get loop(): boolean;
|
|
162
94
|
set loop(l: boolean);
|
|
163
95
|
private _sendControl;
|
|
164
|
-
private _shaderCaptureScaleParam;
|
|
165
|
-
private _shaderLoadingMode;
|
|
166
|
-
private _prepareSrc;
|
|
167
|
-
private _prepareSrcdoc;
|
|
168
96
|
private _reloadShaderOptions;
|
|
169
|
-
private _createShaderLoader;
|
|
170
|
-
private _showShaderLoader;
|
|
171
|
-
private _hideShaderLoader;
|
|
172
|
-
private _scheduleShaderLoaderHideCleanup;
|
|
173
|
-
private _resetShaderLoader;
|
|
174
|
-
private _updateShaderLoader;
|
|
175
|
-
/**
|
|
176
|
-
* Reach into the runtime's `window.__player.seek` directly, skipping the
|
|
177
|
-
* postMessage hop. Same-origin only — cross-origin embeds throw a
|
|
178
|
-
* `SecurityError` on `contentWindow` property access, which we catch and
|
|
179
|
-
* report as a no-op so the caller can transparently fall back to the
|
|
180
|
-
* postMessage bridge. Returns `true` only when the runtime accepted the
|
|
181
|
-
* call (`__player.seek` exists, is callable, and didn't throw).
|
|
182
|
-
*
|
|
183
|
-
* Studio has used this access path privately via `iframe.contentWindow.__player`
|
|
184
|
-
* (see `useTimelinePlayer.ts`); this helper just formalizes the same
|
|
185
|
-
* detection inside the player so external scrub UIs get the same
|
|
186
|
-
* single-task latency. The runtime-side `seek` is the same wrapped
|
|
187
|
-
* function the postMessage handler calls (`installRuntimeControlBridge`
|
|
188
|
-
* routes through `player.seek`), so `markExplicitSeek()` and downstream
|
|
189
|
-
* runtime state stay identical between the two paths.
|
|
190
|
-
*/
|
|
191
97
|
private _trySyncSeek;
|
|
98
|
+
private _withDirectTimeline;
|
|
192
99
|
private _tryDirectTimelineSeek;
|
|
193
100
|
private _tryDirectTimelinePlay;
|
|
194
101
|
private _tryDirectTimelinePause;
|
|
195
|
-
private _startDirectTimelineClock;
|
|
196
|
-
private _stopDirectTimelineClock;
|
|
197
|
-
private _resolveDirectTimelineAdapter;
|
|
198
|
-
private _resolveDirectTimelineAdapterFromWindow;
|
|
199
|
-
private _hasRuntimeBridge;
|
|
200
|
-
private _resolvePlaybackDurationAdapter;
|
|
201
|
-
private _isControlsClick;
|
|
202
102
|
private _onMessage;
|
|
203
|
-
private
|
|
103
|
+
private _onProbeReady;
|
|
104
|
+
private _rescale;
|
|
204
105
|
private _onIframeLoad;
|
|
205
|
-
/** Inject the HyperFrames runtime into the iframe if not already present. */
|
|
206
|
-
private _injectRuntime;
|
|
207
|
-
private _updateScale;
|
|
208
106
|
private _setupControls;
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
* — ITU-R BT.1359 puts A/V offset perceptibility at roughly ±45 ms, so
|
|
217
|
-
* anything looser risks audible lip-sync drift on talking-head content
|
|
218
|
-
* (a core use case). The re-seek cost at this tightness is a handful of
|
|
219
|
-
* extra `currentTime` writes per second; the media element's own buffer
|
|
220
|
-
* smooths them out without visible rebuffer on the mirror path.
|
|
221
|
-
*/
|
|
222
|
-
private static readonly MIRROR_DRIFT_THRESHOLD_SECONDS;
|
|
223
|
-
/**
|
|
224
|
-
* How many *consecutive* over-threshold steady-state samples we wait for
|
|
225
|
-
* before issuing a `currentTime` write. A value of 2 means a single
|
|
226
|
-
* spike (one slow bridge tick, one tab-throttled rAF batch, one GC pause)
|
|
227
|
-
* is absorbed without a seek; sustained drift still corrects on the very
|
|
228
|
-
* next tick after the threshold is crossed twice in a row.
|
|
229
|
-
*
|
|
230
|
-
* **Coupling with the timeline-control bridge** — read before changing:
|
|
231
|
-
* worst_case_correction_latency_ms
|
|
232
|
-
* ≈ MIRROR_REQUIRED_CONSECUTIVE_DRIFT_SAMPLES × bridgeMaxPostIntervalMs
|
|
233
|
-
*
|
|
234
|
-
* `bridgeMaxPostIntervalMs` (currently `80`) lives at
|
|
235
|
-
* `packages/core/src/runtime/state.ts` (field on `RuntimeState`). At
|
|
236
|
-
* today's values, worst-case is `2 × 80 ms = 160 ms` — still well under
|
|
237
|
-
* the human shot-change tolerance for A/V re-sync. If you bump bridge
|
|
238
|
-
* cadence (raising `bridgeMaxPostIntervalMs`) you may need to drop this
|
|
239
|
-
* constant to `1` to keep the product under ~150 ms; if you tighten
|
|
240
|
-
* cadence you can raise this to absorb more jitter without perceptual
|
|
241
|
-
* cost. There is a back-reference in `state.ts` next to
|
|
242
|
-
* `bridgeMaxPostIntervalMs` so a change to either side surfaces the
|
|
243
|
-
* coupling.
|
|
244
|
-
*/
|
|
245
|
-
private static readonly MIRROR_REQUIRED_CONSECUTIVE_DRIFT_SAMPLES;
|
|
246
|
-
/**
|
|
247
|
-
* Mirror parent-proxy `currentTime` to the iframe timeline. Defaults to
|
|
248
|
-
* the *coalesced* path: a single over-threshold sample is treated as
|
|
249
|
-
* jitter and merely increments a per-proxy counter; the actual seek only
|
|
250
|
-
* fires once `MIRROR_REQUIRED_CONSECUTIVE_DRIFT_SAMPLES` consecutive
|
|
251
|
-
* samples agree. Pass `{ force: true }` for one-shot alignment moments
|
|
252
|
-
* (audio-ownership promotion, brand-new proxy initialization) where we
|
|
253
|
-
* cannot tolerate even ~80 ms of misaligned audible playback.
|
|
254
|
-
*
|
|
255
|
-
* The counter is also reset on any in-threshold sample and on any
|
|
256
|
-
* out-of-range timeline position, so a proxy that drops back into a
|
|
257
|
-
* scene later starts fresh rather than carrying stale samples from the
|
|
258
|
-
* last time it was active.
|
|
259
|
-
*/
|
|
260
|
-
private _mirrorParentMediaTime;
|
|
261
|
-
/**
|
|
262
|
-
* Take ownership of audible playback. Fired in response to the runtime's
|
|
263
|
-
* `media-autoplay-blocked` signal — the iframe has lost the autoplay lottery
|
|
264
|
-
* and will never produce audio without a fresh gesture inside itself.
|
|
265
|
-
*
|
|
266
|
-
* Effects, in order:
|
|
267
|
-
* 1. Ask the runtime to mute its own media output via the bridge. The
|
|
268
|
-
* runtime then keeps advancing timed media for frame-accurate state
|
|
269
|
-
* but produces no sound of its own, freeing us to be the single
|
|
270
|
-
* audible source without racing a volume-reassert loop.
|
|
271
|
-
* 2. Align every parent proxy's currentTime to the iframe's timeline so
|
|
272
|
-
* the cut-over is imperceptible.
|
|
273
|
-
* 3. If the player is currently playing, start the proxies.
|
|
274
|
-
*
|
|
275
|
-
* Idempotent: repeat calls are a no-op.
|
|
276
|
-
*/
|
|
277
|
-
private _promoteToParentProxy;
|
|
278
|
-
/**
|
|
279
|
-
* Create a parent-frame media element, configure it, and start preloading.
|
|
280
|
-
* Returns the newly-created proxy entry, or `null` if one already exists for
|
|
281
|
-
* this src (dedup) — callers that need to act on the new element should
|
|
282
|
-
* branch on the return value rather than inferring via `_parentMedia.length`.
|
|
283
|
-
*/
|
|
284
|
-
private _createParentMedia;
|
|
285
|
-
/**
|
|
286
|
-
* Set up a single parent-frame audio from an explicit URL (via `audio-src`).
|
|
287
|
-
* Convenience for the common single-narration case — starts preloading
|
|
288
|
-
* immediately without waiting for the iframe to load.
|
|
289
|
-
*/
|
|
290
|
-
private _setupParentAudioFromUrl;
|
|
291
|
-
/**
|
|
292
|
-
* Mirror every timed iframe media element (`audio[data-start]`,
|
|
293
|
-
* `video[data-start]`) into a parent-frame proxy. The proxies preload at
|
|
294
|
-
* iframe-ready time so the cut-over to parent ownership — should the
|
|
295
|
-
* runtime's autoplay attempt later reject — is instantaneous.
|
|
296
|
-
*
|
|
297
|
-
* Under runtime ownership (the default) these proxies stay paused and
|
|
298
|
-
* inert; the iframe is the audible source. Ownership flips only in
|
|
299
|
-
* response to a real `media-autoplay-blocked` message from the runtime.
|
|
300
|
-
*
|
|
301
|
-
* Also installs a MutationObserver so that media added to the iframe
|
|
302
|
-
* *after* the initial scan (sub-composition activation is the common
|
|
303
|
-
* case) gets a proxy on the fly. Without this, under parent ownership
|
|
304
|
-
* late-added `<audio data-start>` would be silenced by the runtime
|
|
305
|
-
* (`outputMuted` sticks per-tick) but have no parent-frame counterpart
|
|
306
|
-
* to play — a silent hole in the audio track.
|
|
307
|
-
*/
|
|
308
|
-
private _setupParentMedia;
|
|
309
|
-
/**
|
|
310
|
-
* Create a parent-frame proxy mirroring a single iframe media element.
|
|
311
|
-
* Extracted so both the initial scan and the MutationObserver path use
|
|
312
|
-
* identical URL-resolution and attribute parsing.
|
|
313
|
-
*/
|
|
314
|
-
private _adoptIframeMedia;
|
|
315
|
-
/**
|
|
316
|
-
* Watch the iframe document for subtree additions of timed media so
|
|
317
|
-
* sub-composition activation (late-attached `<audio data-start>`) grows
|
|
318
|
-
* the parent-proxy set automatically. Disconnected on iframe reload via
|
|
319
|
-
* `_teardownMediaObserver`.
|
|
320
|
-
*/
|
|
321
|
-
private _observeDynamicMedia;
|
|
322
|
-
private _teardownMediaObserver;
|
|
323
|
-
/**
|
|
324
|
-
* Inverse of `_adoptIframeMedia`: drop the parent proxy mirroring a removed
|
|
325
|
-
* iframe media element. Resolves the src identically so matching is exact,
|
|
326
|
-
* then pauses, clears the src (frees the decoder), and splices it out.
|
|
327
|
-
*/
|
|
328
|
-
private _detachIframeMedia;
|
|
329
|
-
private _hidePoster;
|
|
107
|
+
get _audioOwner(): "parent" | "runtime";
|
|
108
|
+
get _parentMedia(): ProxyEntry[];
|
|
109
|
+
_mirrorParentMediaTime(t: number, opts?: {
|
|
110
|
+
force?: boolean;
|
|
111
|
+
}): void;
|
|
112
|
+
_promoteToParentProxy(): void;
|
|
113
|
+
_observeDynamicMedia(doc: Document): void;
|
|
330
114
|
}
|
|
331
115
|
|
|
332
116
|
export { type ControlsCallbacks, type ControlsOptions, HyperframesPlayer, SPEED_PRESETS, type ShaderLoadingMode, formatSpeed, formatTime };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var HyperframesPlayer=(()=>{var
|
|
1
|
+
"use strict";var HyperframesPlayer=(()=>{var B=Object.defineProperty;var Pe=Object.getOwnPropertyDescriptor;var Re=Object.getOwnPropertyNames;var De=Object.prototype.hasOwnProperty;var Ie=(r,e)=>{for(var t in e)B(r,t,{get:e[t],enumerable:!0})},Oe=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Re(e))!De.call(r,n)&&n!==t&&B(r,n,{get:()=>e[n],enumerable:!(i=Pe(e,n))||i.enumerable});return r};var He=r=>Oe(B({},"__esModule",{value:!0}),r);var Xe={};Ie(Xe,{HyperframesPlayer:()=>W,SPEED_PRESETS:()=>Y,formatSpeed:()=>k,formatTime:()=>N});function ue(r){return r.hasRuntime||r.runtimeInjected?!1:!!(r.hasNestedCompositions||r.hasTimelines&&r.attempts>=5)}function L(r){return typeof r=="object"&&r!==null}function ce(r){return L(r)&&typeof r.getDuration=="function"}function he(r){return L(r)&&typeof r.duration=="function"&&typeof r.time=="function"&&typeof r.seek=="function"&&typeof r.play=="function"&&typeof r.pause=="function"}var Ne="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js",H=class{constructor(e,t){this._iframe=e;this._callbacks=t}_iframe;_callbacks;_interval=null;_runtimeInjected=!1;get runtimeInjected(){return this._runtimeInjected}start(){this.stop(),this._runtimeInjected=!1;let e=0;this._interval=setInterval(()=>{e++;try{let t=this._iframe.contentWindow;if(!t)return;let i=!!(t.__hf||t.__player),n=!!(t.__timelines&&Object.keys(t.__timelines).length>0),o=!!this._iframe.contentDocument?.querySelector("[data-composition-src]");if(ue({hasRuntime:i,hasTimelines:n,hasNestedCompositions:o,runtimeInjected:this._runtimeInjected,attempts:e})){this._injectRuntime();return}if(this._runtimeInjected&&!i)return;let l=this._resolvePlaybackDurationAdapter(t);if(l&&l.getDuration()>0){this.stop();let s=this._iframe.contentDocument,p=null,c=s?.querySelector("[data-composition-id]");if(c){let u=parseInt(c.getAttribute("data-width")||"0",10),f=parseInt(c.getAttribute("data-height")||"0",10);u>0&&f>0&&(p={width:u,height:f})}this._callbacks.onReady({duration:l.getDuration(),adapter:l,compositionSize:p});return}}catch{}e>=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{let e=this._iframe.contentWindow;return e?this._resolveDirectTimelineAdapterFromWindow(e):null}catch{return null}}resolveDirectTimelineAdapterFromWindow(e){return this._resolveDirectTimelineAdapterFromWindow(e)}hasRuntimeBridge(e){return Reflect.get(e,"__hf")!==void 0||L(Reflect.get(e,"__player"))}_injectRuntime(){this._runtimeInjected=!0;try{let e=this._iframe.contentDocument;if(!e)return;let t=e.createElement("script");t.src=Ne,(e.head||e.documentElement).appendChild(t),this._callbacks.onRuntimeInjected?.()}catch{}}_resolveDirectTimelineAdapterFromWindow(e){if(this.hasRuntimeBridge(e))return null;let t=Reflect.get(e,"__timelines");if(!L(t))return null;let i=Object.keys(t);if(i.length===0)return null;let n=this._iframe.contentDocument?.querySelector("[data-composition-id]")?.getAttribute("data-composition-id"),o=n&&n in t?n:i[i.length-1],l=t[o];return he(l)?l:null}_resolvePlaybackDurationAdapter(e){let t=Reflect.get(e,"__player");if(ce(t))return{kind:"runtime",getDuration:()=>t.getDuration()};let i=this._resolveDirectTimelineAdapterFromWindow(e);return i?{kind:"direct-timeline",timeline:i,getDuration:()=>i.duration()}:null}};var me=`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
position: relative;
|
|
@@ -415,5 +415,5 @@
|
|
|
415
415
|
background: var(--hfp-accent, #fff);
|
|
416
416
|
pointer-events: none;
|
|
417
417
|
}
|
|
418
|
-
`,U='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><polygon points="4,2 16,9 4,16"/></svg>',ne='<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>',V='<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>',z='<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>',ae='<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>';var $=[.25,.5,1,1.5,2,4];function x(n){return Number.isInteger(n)?`${n}x`:`${n}x`}function D(n){if(!Number.isFinite(n)||n<0)return"0:00";let e=Math.floor(n),t=Math.floor(e/60),i=e%60;return`${t}:${i.toString().padStart(2,"0")}`}function se(n,e,t={}){let i=t.speedPresets??$,r=document.createElement("div");r.className="hfp-controls",r.addEventListener("click",a=>{a.stopPropagation()});let d=document.createElement("button");d.className="hfp-play-btn",d.type="button",d.innerHTML=U,d.setAttribute("aria-label","Play");let s=document.createElement("div");s.className="hfp-scrubber";let l=document.createElement("div");l.className="hfp-progress",l.style.width="0%",s.appendChild(l);let u=document.createElement("span");u.className="hfp-time",u.textContent="0:00 / 0:00";let h=document.createElement("div");h.className="hfp-speed-wrap";let c=document.createElement("button");c.className="hfp-speed-btn",c.type="button",c.textContent="1x",c.setAttribute("aria-label","Playback speed");let f=document.createElement("div");f.className="hfp-speed-menu",f.setAttribute("role","menu");for(let a of i){let o=document.createElement("button");o.className="hfp-speed-option",o.type="button",o.setAttribute("role","menuitem"),o.dataset.speed=String(a),o.textContent=x(a),a===1&&o.classList.add("hfp-active"),f.appendChild(o)}h.appendChild(f),h.appendChild(c);let E=document.createElement("div");E.className="hfp-volume-wrap";let v=document.createElement("button");v.className="hfp-mute-btn",v.type="button",v.innerHTML=V,v.setAttribute("aria-label","Mute");let g=document.createElement("div");g.className="hfp-volume-slider-wrap";let p=document.createElement("div");p.className="hfp-volume-slider",p.setAttribute("role","slider"),p.setAttribute("aria-label","Volume"),p.setAttribute("aria-valuemin","0"),p.setAttribute("aria-valuemax","100"),p.setAttribute("aria-valuenow","100"),p.tabIndex=0;let b=document.createElement("div");b.className="hfp-volume-fill",b.style.width="100%",p.appendChild(b),g.appendChild(p),E.appendChild(g),E.appendChild(v),r.appendChild(d),r.appendChild(s),r.appendChild(u),r.appendChild(E),r.appendChild(h),n.appendChild(r);let _=!1,S=!1,y=1,M=null,C=i.indexOf(1);C===-1&&(C=0);let k=(a,o)=>a?ae:o===0?z:o<.5?z:V;d.addEventListener("click",a=>{a.stopPropagation(),_?e.onPause():e.onPlay()}),v.addEventListener("click",a=>{a.stopPropagation(),e.onMuteToggle()});let L=!1,P=a=>{let o=p.getBoundingClientRect(),m=Math.max(0,Math.min(1,(a-o.left)/o.width));y=m,b.style.width=`${m*100}%`,p.setAttribute("aria-valuenow",String(Math.round(m*100))),S&&m>0&&e.onMuteToggle(),v.innerHTML=k(S,m),e.onVolumeChange(m)};p.addEventListener("mousedown",a=>{a.stopPropagation(),L=!0,P(a.clientX)});let B=a=>{L&&P(a.clientX)},q=()=>{L=!1};document.addEventListener("mousemove",B),document.addEventListener("mouseup",q),p.addEventListener("touchstart",a=>{L=!0;let o=a.touches[0];o&&P(o.clientX)},{passive:!0});let X=a=>{if(L){let o=a.touches[0];o&&P(o.clientX)}},G=()=>{L=!1};document.addEventListener("touchmove",X,{passive:!0}),document.addEventListener("touchend",G);let Y=.05;p.addEventListener("keydown",a=>{let o=y;if(a.key==="ArrowRight"||a.key==="ArrowUp")o=Math.min(1,y+Y);else if(a.key==="ArrowLeft"||a.key==="ArrowDown")o=Math.max(0,y-Y);else return;a.preventDefault(),a.stopPropagation(),y=o,b.style.width=`${o*100}%`,p.setAttribute("aria-valuenow",String(Math.round(o*100))),S&&o>0&&e.onMuteToggle(),v.innerHTML=k(S,o),e.onVolumeChange(o)});let Q=a=>{for(let o of f.querySelectorAll(".hfp-speed-option"))o.classList.toggle("hfp-active",o.dataset.speed===String(a))};c.addEventListener("click",a=>{a.stopPropagation();let o=f.classList.toggle("hfp-open");c.setAttribute("aria-expanded",String(o))}),f.addEventListener("click",a=>{a.stopPropagation();let o=a.target.closest(".hfp-speed-option");if(!o)return;let m=parseFloat(o.dataset.speed);C=i.indexOf(m),c.textContent=x(m),Q(m),f.classList.remove("hfp-open"),c.setAttribute("aria-expanded","false"),e.onSpeedChange(m)});let J=()=>{f.classList.remove("hfp-open"),c.setAttribute("aria-expanded","false")};document.addEventListener("click",J);let R=a=>{let o=s.getBoundingClientRect(),m=Math.max(0,Math.min(1,(a-o.left)/o.width));e.onSeek(m)},w=!1;s.addEventListener("mousedown",a=>{a.stopPropagation(),w=!0,R(a.clientX)});let Z=a=>{w&&R(a.clientX)},K=()=>{w=!1};document.addEventListener("mousemove",Z),document.addEventListener("mouseup",K),s.addEventListener("touchstart",a=>{w=!0;let o=a.touches[0];o&&R(o.clientX)},{passive:!0});let ee=a=>{if(w){let o=a.touches[0];o&&R(o.clientX)}},te=()=>{w=!1};document.addEventListener("touchmove",ee,{passive:!0}),document.addEventListener("touchend",te);let ie=()=>{M&&clearTimeout(M),M=setTimeout(()=>{_&&r.classList.add("hfp-hidden")},3e3)},re=n instanceof ShadowRoot?n.host:n;return re.addEventListener("mousemove",()=>{r.classList.remove("hfp-hidden"),ie()}),re.addEventListener("mouseleave",()=>{_&&r.classList.add("hfp-hidden")}),{updateTime(a,o){let m=o>0?Math.min(a,o):a,pe=o>0?m/o*100:0;l.style.width=`${pe}%`,u.textContent=`${D(m)} / ${D(o)}`},updatePlaying(a){_=a,d.innerHTML=a?ne:U,d.setAttribute("aria-label",a?"Pause":"Play"),a?ie():r.classList.remove("hfp-hidden")},updateSpeed(a){let o=i.indexOf(a);o!==-1&&(C=o),c.textContent=x(a),Q(a)},updateMuted(a){S=a,v.innerHTML=k(a,y),v.setAttribute("aria-label",a?"Unmute":"Mute")},updateVolume(a){y=a,b.style.width=`${a*100}%`,p.setAttribute("aria-valuenow",String(Math.round(a*100))),v.innerHTML=k(S,a)},show(){r.style.display=""},hide(){r.style.display="none"},destroy(){document.removeEventListener("mousemove",Z),document.removeEventListener("mouseup",K),document.removeEventListener("touchmove",ee),document.removeEventListener("touchend",te),document.removeEventListener("mousemove",B),document.removeEventListener("mouseup",q),document.removeEventListener("touchmove",X),document.removeEventListener("touchend",G),document.removeEventListener("click",J),M&&clearTimeout(M)}}}function oe(n){return n.hasRuntime||n.runtimeInjected?!1:!!(n.hasNestedCompositions||n.hasTimelines&&n.attempts>=5)}var j=null;function ge(){if(j)return j;if(typeof CSSStyleSheet>"u")return null;try{let n=new CSSStyleSheet;return n.replaceSync(F),j=n,n}catch{return null}}var W=30,_e="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js",A="shader-capture-scale",T="shader-loading",ye="__hf_shader_capture_scale",Ee="__hf_shader_loading",H=["Preparing scene transitions","Sampling outgoing scene motion","Sampling incoming scene motion","Caching transition frames","Finalizing transition preview"];function de(n){if(n===null)return null;let e=Number(n);return!Number.isFinite(e)||e<=0?null:String(Math.min(1,Math.max(.25,e)))}function le(n){if(n===null||n.trim()==="")return"composition";let e=n.trim().toLowerCase();return e==="none"||e==="false"||e==="0"||e==="off"?"none":e==="player"||e==="true"||e==="1"||e==="on"?"player":"composition"}function he(n,e,t){t===null?n.delete(e):n.set(e,t)}function Se(n,e,t){let i=n.indexOf("#"),r=i>=0?n.slice(0,i):n,d=i>=0?n.slice(i):"",s=r.indexOf("?"),l=s>=0?r.slice(0,s):r,u=s>=0?r.slice(s+1):"",h=new URLSearchParams(u);he(h,ye,e),he(h,Ee,t==="composition"?null:t);let c=h.toString();return`${l}${c?`?${c}`:""}${d}`}function I(n){return typeof n=="object"&&n!==null}function Le(n){return I(n)&&typeof n.getDuration=="function"}function we(n){return I(n)&&typeof n.duration=="function"&&typeof n.time=="function"&&typeof n.seek=="function"&&typeof n.play=="function"&&typeof n.pause=="function"}function Te(n,e,t){if(e===null&&t==="composition")return n;let i=[];e!==null&&i.push(`window.__HF_SHADER_CAPTURE_SCALE=${JSON.stringify(e)};`),t!=="composition"&&i.push(`window.__HF_SHADER_LOADING=${JSON.stringify(t)};`);let r=`<script data-hyperframes-player-shader-options>${i.join("")}</script>`;return/<head\b[^>]*>/i.test(n)?n.replace(/<head\b[^>]*>/i,d=>`${d}${r}`):/<html\b[^>]*>/i.test(n)?n.replace(/<html\b[^>]*>/i,d=>`${d}${r}`):`${r}${n}`}var O=class n extends HTMLElement{static get observedAttributes(){return["src","srcdoc","width","height","controls","muted","volume","poster","playback-rate","audio-src",A,T]}shadow;container;iframe;posterEl=null;controlsApi=null;resizeObserver;shaderLoaderEl;shaderLoaderFillEl;shaderLoaderTitleEl;shaderLoaderDetailEl;shaderLoaderTransitionValueEl;shaderLoaderFrameLabelEl;shaderLoaderFrameValueEl;shaderLoaderFrameRowEl;shaderLoaderHideTimeout=null;_ready=!1;_duration=0;_currentTime=0;_paused=!0;_volume=1;_compositionWidth=1920;_compositionHeight=1080;_probeInterval=null;_lastUpdateMs=0;_directTimelineAdapter=null;_directTimelineRaf=null;_parentMedia=[];_audioOwner="runtime";_mediaObserver;_playbackErrorPosted=!1;constructor(){super(),this.shadow=this.attachShadow({mode:"open"});let e=ge();if(e)this.shadow.adoptedStyleSheets=[e];else{let i=document.createElement("style");i.textContent=F,this.shadow.appendChild(i)}this.container=document.createElement("div"),this.container.className="hfp-container",this.iframe=document.createElement("iframe"),this.iframe.className="hfp-iframe",this.iframe.sandbox.add("allow-scripts","allow-same-origin"),this.iframe.allow="autoplay; fullscreen",this.iframe.referrerPolicy="no-referrer",this.iframe.title="HyperFrames Composition",this.container.appendChild(this.iframe),this.shadow.appendChild(this.container);let t=this._createShaderLoader();this.shaderLoaderEl=t.root,this.shaderLoaderFillEl=t.fill,this.shaderLoaderTitleEl=t.title,this.shaderLoaderDetailEl=t.detail,this.shaderLoaderTransitionValueEl=t.transitionValue,this.shaderLoaderFrameLabelEl=t.frameLabel,this.shaderLoaderFrameValueEl=t.frameValue,this.shaderLoaderFrameRowEl=t.frameRow,this.shadow.appendChild(this.shaderLoaderEl),this.addEventListener("click",i=>{this._isControlsClick(i)||(this._paused?this.play():this.pause())}),this.resizeObserver=new ResizeObserver(()=>this._updateScale()),this._onMessage=this._onMessage.bind(this),this._onIframeLoad=this._onIframeLoad.bind(this)}connectedCallback(){this.resizeObserver.observe(this),window.addEventListener("message",this._onMessage),this.iframe.addEventListener("load",this._onIframeLoad),this.hasAttribute("controls")&&this._setupControls(),this.hasAttribute("poster")&&this._setupPoster(),this.hasAttribute("audio-src")&&this._setupParentAudioFromUrl(this.getAttribute("audio-src")),this.hasAttribute("srcdoc")&&(this.iframe.srcdoc=this._prepareSrcdoc(this.getAttribute("srcdoc"))),this.hasAttribute("src")&&(this.iframe.src=this._prepareSrc(this.getAttribute("src")))}disconnectedCallback(){this.resizeObserver.disconnect(),window.removeEventListener("message",this._onMessage),this.iframe.removeEventListener("load",this._onIframeLoad),this._probeInterval&&clearInterval(this._probeInterval),this._stopDirectTimelineClock(),this._directTimelineAdapter=null,this.shaderLoaderHideTimeout&&clearTimeout(this.shaderLoaderHideTimeout),this.shaderLoaderHideTimeout=null,this._teardownMediaObserver(),this.controlsApi?.destroy();for(let e of this._parentMedia)e.el.pause(),e.el.src="";this._parentMedia=[]}attributeChangedCallback(e,t,i){switch(e){case"src":i&&(this._ready=!1,this.iframe.src=this._prepareSrc(i));break;case"srcdoc":this._ready=!1,i!==null?this.iframe.srcdoc=this._prepareSrcdoc(i):this.iframe.removeAttribute("srcdoc");break;case"width":this._compositionWidth=parseInt(i||"1920",10),this._updateScale();break;case"height":this._compositionHeight=parseInt(i||"1080",10),this._updateScale();break;case"controls":i!==null?this._setupControls():(this.controlsApi?.destroy(),this.controlsApi=null);break;case"poster":this._setupPoster();break;case"playback-rate":{let r=parseFloat(i||"1");for(let d of this._parentMedia)d.el.playbackRate=r;this._sendControl("set-playback-rate",{playbackRate:r}),this.controlsApi?.updateSpeed(r),this.dispatchEvent(new Event("ratechange"));break}case"muted":for(let r of this._parentMedia)r.el.muted=i!==null;this._sendControl("set-muted",{muted:i!==null}),this.controlsApi?.updateMuted(i!==null),this.dispatchEvent(new Event("volumechange"));break;case"volume":{let r=Math.max(0,Math.min(1,parseFloat(i||"1")));this._volume=r;for(let d of this._parentMedia)d.el.volume=r;this._sendControl("set-volume",{volume:r}),this.controlsApi?.updateVolume(r),this.dispatchEvent(new Event("volumechange"));break}case"audio-src":i&&this._setupParentAudioFromUrl(i);break;case A:case T:this._reloadShaderOptions();break}}get iframeElement(){return this.iframe}play(){this._hidePoster(),this._duration>0&&this._currentTime>=this._duration&&this.seek(0);let e=this._tryDirectTimelinePlay();e||this._sendControl("play"),this._audioOwner==="parent"&&this._playParentMedia(),this._paused=!1,this.controlsApi?.updatePlaying(!0),this.dispatchEvent(new Event("play")),e&&this._startDirectTimelineClock()}pause(){this._tryDirectTimelinePause()||this._sendControl("pause"),this._stopDirectTimelineClock(),this._audioOwner==="parent"&&this._pauseParentMedia(),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.dispatchEvent(new Event("pause"))}seek(e){if(!this._trySyncSeek(e)&&!this._tryDirectTimelineSeek(e)){let t=Math.round(e*W);this._sendControl("seek",{frame:t})}if(this._stopDirectTimelineClock(),this._currentTime=e,this._audioOwner==="parent")for(let t of this._parentMedia){let i=e-t.start;i>=0&&i<t.duration&&(t.el.currentTime=i)}this._paused=!0,this.controlsApi?.updatePlaying(!1),this.controlsApi?.updateTime(this._currentTime,this._duration)}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 playbackRate(){return parseFloat(this.getAttribute("playback-rate")||"1")}set playbackRate(e){this.setAttribute("playback-rate",String(e))}get shaderCaptureScale(){return Number(de(this.getAttribute(A))??"1")}set shaderCaptureScale(e){this.setAttribute(A,String(e))}get shaderLoading(){return le(this.getAttribute(T))}set shaderLoading(e){e==="composition"?this.removeAttribute(T):this.setAttribute(T,e)}get muted(){return this.hasAttribute("muted")}set muted(e){e?this.setAttribute("muted",""):this.removeAttribute("muted")}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{this.iframe.contentWindow?.postMessage({source:"hf-parent",type:"control",action:e,...t},"*")}catch{}}_shaderCaptureScaleParam(){return de(this.getAttribute(A))}_shaderLoadingMode(){return le(this.getAttribute(T))}_prepareSrc(e){return Se(e,this._shaderCaptureScaleParam(),this._shaderLoadingMode())}_prepareSrcdoc(e){return Te(e,this._shaderCaptureScaleParam(),this._shaderLoadingMode())}_reloadShaderOptions(){if(this._shaderLoadingMode()!=="player"&&this._resetShaderLoader(),this.hasAttribute("srcdoc")){this.iframe.srcdoc=this._prepareSrcdoc(this.getAttribute("srcdoc")||"");return}this.hasAttribute("src")&&(this.iframe.src=this._prepareSrc(this.getAttribute("src")||""))}_createShaderLoader(){let e=document.createElement("div");e.className="hfp-shader-loader",e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.setAttribute("aria-label","Preparing scene transitions"),e.setAttribute("data-hyperframes-ignore",""),e.draggable=!1;let t=g=>{g.preventDefault(),g.stopPropagation()};for(let g of["selectstart","dragstart","pointerdown","mousedown","click","dblclick","contextmenu","touchstart"])e.addEventListener(g,t,{capture:!0});let i=document.createElement("div");i.className="hfp-shader-loader-panel",i.draggable=!1;let r=document.createElement("div");r.className="hfp-shader-loader-mark",r.draggable=!1,r.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("");let d=document.createElement("div");d.className="hfp-shader-loader-title";let s=document.createElement("span");s.className="hfp-shader-loader-title-text",s.textContent=H[0]||"Preparing scene transitions",d.appendChild(s);let l=document.createElement("div");l.className="hfp-shader-loader-detail",l.textContent="Rendering animated scene samples for shader transitions.";let u=document.createElement("div");u.className="hfp-shader-loader-track",u.setAttribute("aria-hidden","true");let h=document.createElement("div");h.className="hfp-shader-loader-fill",u.appendChild(h);let c=document.createElement("div");c.className="hfp-shader-loader-progress";let f=g=>{let p=document.createElement("div");p.className="hfp-shader-loader-row";let b=document.createElement("span");b.className="hfp-shader-loader-label",b.textContent=g;let _=document.createElement("span");return _.className="hfp-shader-loader-value",p.appendChild(b),p.appendChild(_),c.appendChild(p),{row:p,label:b,value:_}},E=f("transition"),v=f("transition frame");return i.appendChild(r),i.appendChild(d),i.appendChild(l),i.appendChild(u),i.appendChild(c),e.appendChild(i),{root:e,fill:h,title:s,detail:l,transitionValue:E.value,frameLabel:v.label,frameValue:v.value,frameRow:v.row}}_showShaderLoader(){this.shaderLoaderHideTimeout&&(clearTimeout(this.shaderLoaderHideTimeout),this.shaderLoaderHideTimeout=null),this.shaderLoaderEl.classList.remove("hfp-hiding"),this.shaderLoaderEl.classList.add("hfp-visible")}_hideShaderLoader(){if(this.shaderLoaderEl.classList.contains("hfp-hiding")){this.shaderLoaderHideTimeout||this._scheduleShaderLoaderHideCleanup();return}this.shaderLoaderEl.classList.contains("hfp-visible")&&(this.shaderLoaderEl.classList.add("hfp-hiding"),this.shaderLoaderEl.classList.remove("hfp-visible"),this._scheduleShaderLoaderHideCleanup())}_scheduleShaderLoaderHideCleanup(){this.shaderLoaderHideTimeout&&clearTimeout(this.shaderLoaderHideTimeout),this.shaderLoaderHideTimeout=setTimeout(()=>{this.shaderLoaderEl.classList.remove("hfp-hiding"),this.shaderLoaderHideTimeout=null},420)}_resetShaderLoader(){this.shaderLoaderHideTimeout&&(clearTimeout(this.shaderLoaderHideTimeout),this.shaderLoaderHideTimeout=null),this.shaderLoaderEl.classList.remove("hfp-visible","hfp-hiding"),this.shaderLoaderFillEl.style.transform="scaleX(0)",this.shaderLoaderTransitionValueEl.textContent="",this.shaderLoaderFrameValueEl.textContent="",this.shaderLoaderFrameRowEl.style.visibility="hidden"}_updateShaderLoader(e){if(this._shaderLoadingMode()!=="player"){this._resetShaderLoader();return}if(e.ready||!e.loading){this._hideShaderLoader();return}let t=typeof e.progress=="number"&&Number.isFinite(e.progress)?e.progress:0,i=typeof e.total=="number"&&Number.isFinite(e.total)?e.total:0,r=i>0?Math.min(1,Math.max(0,t/i)):0,d=Math.min(H.length-1,Math.floor(r*H.length));this.shaderLoaderTitleEl.textContent=H[d]||"Preparing scene transitions",this.shaderLoaderDetailEl.textContent=e.phase==="cached"?"Loading cached transition frames before playback.":e.phase==="finalizing"?"Uploading transition textures for smooth playback.":"Rendering animated scene samples for shader transitions.",this.shaderLoaderFillEl.style.transform=`scaleX(${r})`,this.shaderLoaderTransitionValueEl.textContent=e.currentTransition!==void 0&&e.transitionTotal!==void 0?`${e.currentTransition}/${e.transitionTotal}`:i>0?`${t}/${i}`:"";let s=e.transitionFrame!==void 0&&e.transitionFrames!==void 0?`${e.transitionFrame}/${e.transitionFrames}`:"";this.shaderLoaderFrameLabelEl.textContent=e.phase==="cached"?"cached transition frames":e.phase==="finalizing"?"finalizing transition frames":"rendering transition frames",this.shaderLoaderFrameValueEl.textContent=s,this.shaderLoaderFrameRowEl.style.visibility=s?"visible":"hidden",this.shaderLoaderEl.setAttribute("aria-valuenow",String(Math.round(r*100))),this._showShaderLoader()}_trySyncSeek(e){try{let i=this.iframe.contentWindow?.__player,r=i?.seek;return typeof r!="function"?!1:(r.call(i,e),!0)}catch{return!1}}_tryDirectTimelineSeek(e){let t=this._directTimelineAdapter||this._resolveDirectTimelineAdapter();if(!t)return!1;try{return t.seek(e),t.pause(),this._directTimelineAdapter=t,!0}catch{return!1}}_tryDirectTimelinePlay(){let e=this._directTimelineAdapter||this._resolveDirectTimelineAdapter();if(!e)return!1;try{return e.play(),this._directTimelineAdapter=e,!0}catch{return!1}}_tryDirectTimelinePause(){let e=this._directTimelineAdapter||this._resolveDirectTimelineAdapter();if(!e)return!1;try{return e.pause(),this._directTimelineAdapter=e,!0}catch{return!1}}_startDirectTimelineClock(){this._stopDirectTimelineClock();let e=()=>{let t=this._directTimelineAdapter;if(!t||this._paused){this._directTimelineRaf=null;return}let i;try{i=t.time()}catch{this._directTimelineRaf=null;return}this._duration>0&&(i=Math.min(i,this._duration)),this._currentTime=i;let r=this._duration>0&&i>=this._duration,d=performance.now();if((d-this._lastUpdateMs>100||r)&&(this._lastUpdateMs=d,this.controlsApi?.updateTime(this._currentTime,this._duration),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:this._currentTime}}))),r){if(this.loop){this.seek(0),this.play();return}t.pause(),this._audioOwner==="parent"&&this._pauseParentMedia(),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.dispatchEvent(new Event("ended")),this._directTimelineRaf=null;return}this._directTimelineRaf=requestAnimationFrame(e)};this._directTimelineRaf=requestAnimationFrame(e)}_stopDirectTimelineClock(){this._directTimelineRaf!==null&&(cancelAnimationFrame(this._directTimelineRaf),this._directTimelineRaf=null)}_resolveDirectTimelineAdapter(){try{let e=this.iframe.contentWindow;return e?this._resolveDirectTimelineAdapterFromWindow(e):null}catch{return null}}_resolveDirectTimelineAdapterFromWindow(e){if(this._hasRuntimeBridge(e))return null;let t=Reflect.get(e,"__timelines");if(!I(t))return null;let i=Object.keys(t);if(i.length===0)return null;let r=this.iframe.contentDocument?.querySelector("[data-composition-id]")?.getAttribute("data-composition-id"),d=r&&r in t?r:i[i.length-1],s=t[d];return we(s)?s:null}_hasRuntimeBridge(e){return Reflect.get(e,"__hf")!==void 0||I(Reflect.get(e,"__player"))}_resolvePlaybackDurationAdapter(e){let t=Reflect.get(e,"__player");if(Le(t))return{kind:"runtime",getDuration:()=>t.getDuration()};let i=this._resolveDirectTimelineAdapterFromWindow(e);return i?{kind:"direct-timeline",timeline:i,getDuration:()=>i.duration()}:null}_isControlsClick(e){return e.composedPath().some(t=>t instanceof HTMLElement&&t.classList.contains("hfp-controls"))}_onMessage(e){if(e.source!==this.iframe.contentWindow)return;let t=e.data;if(!(!t||t.source!=="hf-preview")){if(t.type==="shader-transition-state"){let i=t.state&&typeof t.state=="object"?t.state:{};this._updateShaderLoader(i),this.dispatchEvent(new CustomEvent("shadertransitionstate",{detail:{compositionId:t.compositionId,state:i}}));return}if(t.type==="state"){let i=(t.frame??0)/W;this._currentTime=this._duration>0?Math.min(i,this._duration):i;let r=!this._paused,d=!t.isPlaying,s=this._duration>0&&this._currentTime>=this._duration&&(r||t.isPlaying);if(s&&this.loop){this._audioOwner==="parent"&&this._pauseParentMedia(),this._paused=d,this.seek(0),this.play();return}this._paused=d,this._audioOwner==="parent"&&(r&&this._paused?this._pauseParentMedia():!r&&!this._paused&&this._playParentMedia(),this._mirrorParentMediaTime(this._currentTime));let l=performance.now();(l-this._lastUpdateMs>100||this._paused!==r)&&(this._lastUpdateMs=l,this.controlsApi?.updateTime(this._currentTime,this._duration),this.controlsApi?.updatePlaying(!this._paused),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:this._currentTime}}))),s&&(this._audioOwner==="parent"&&this._pauseParentMedia(),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.dispatchEvent(new Event("ended")))}t.type==="media-autoplay-blocked"&&this._promoteToParentProxy(),t.type==="timeline"&&t.durationInFrames>0&&Number.isFinite(t.durationInFrames)&&(this._duration=t.durationInFrames/W,this.controlsApi?.updateTime(this._currentTime,this._duration)),t.type==="stage-size"&&t.width>0&&t.height>0&&(this._compositionWidth=t.width,this._compositionHeight=t.height,this._updateScale())}}_runtimeInjected=!1;_onIframeLoad(){let e=0;this._runtimeInjected=!1,this._directTimelineAdapter=null,this._stopDirectTimelineClock(),this._resetShaderLoader();let t=this._audioOwner==="parent";this._audioOwner="runtime",this._playbackErrorPosted=!1,this._pauseParentMedia(),this._teardownMediaObserver(),t&&this.dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"runtime",reason:"iframe-reload"}})),this._probeInterval&&clearInterval(this._probeInterval),this._probeInterval=setInterval(()=>{e++;try{let i=this.iframe.contentWindow;if(!i)return;let r=!!(i.__hf||i.__player),d=!!(i.__timelines&&Object.keys(i.__timelines).length>0),s=!!this.iframe.contentDocument?.querySelector("[data-composition-src]");if(oe({hasRuntime:r,hasTimelines:d,hasNestedCompositions:s,runtimeInjected:this._runtimeInjected,attempts:e})){this._injectRuntime();return}if(this._runtimeInjected&&!r)return;let l=this._resolvePlaybackDurationAdapter(i);if(l&&l.getDuration()>0){clearInterval(this._probeInterval),this._duration=l.getDuration(),this._directTimelineAdapter=l.kind==="direct-timeline"?l.timeline:null,this._ready=!0,this.controlsApi?.updateTime(0,this._duration),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:this._duration}}));let h=this.iframe.contentDocument?.querySelector("[data-composition-id]");if(h){let c=parseInt(h.getAttribute("data-width")||"0",10),f=parseInt(h.getAttribute("data-height")||"0",10);c>0&&f>0&&(this._compositionWidth=c,this._compositionHeight=f,this._updateScale())}this._setupParentMedia(),this.hasAttribute("autoplay")&&this.play();return}}catch{}e>=40&&(clearInterval(this._probeInterval),this.dispatchEvent(new CustomEvent("error",{detail:{message:"Composition timeline not found after 8s"}})))},200)}_injectRuntime(){this._runtimeInjected=!0;try{let e=this.iframe.contentDocument;if(!e)return;let t=e.createElement("script");t.src=_e,t.onload=()=>{},t.onerror=()=>{},(e.head||e.documentElement).appendChild(t)}catch{}}_updateScale(){let e=this.getBoundingClientRect();if(e.width===0||e.height===0)return;let t=Math.min(e.width/this._compositionWidth,e.height/this._compositionHeight);this.iframe.style.width=`${this._compositionWidth}px`,this.iframe.style.height=`${this._compositionHeight}px`,this.iframe.style.transform=`translate(-50%, -50%) scale(${t})`}_setupControls(){if(this.controlsApi)return;let e={onPlay:()=>this.play(),onPause:()=>this.pause(),onSeek:r=>this.seek(r*this._duration),onSpeedChange:r=>{this.playbackRate=r},onMuteToggle:()=>{this.muted=!this.muted},onVolumeChange:r=>{this.volume=r}},t=this.getAttribute("speed-presets"),i=t?t.split(",").map(Number).filter(r=>!isNaN(r)&&r>0):void 0;this.controlsApi=se(this.shadow,e,{speedPresets:i}),this.controlsApi.updateMuted(this.muted),this.controlsApi.updateVolume(this._volume)}_setupPoster(){let e=this.getAttribute("poster");if(!e){this.posterEl?.remove(),this.posterEl=null;return}this.posterEl||(this.posterEl=document.createElement("img"),this.posterEl.className="hfp-poster",this.shadow.appendChild(this.posterEl)),this.posterEl.src=e}_playParentMedia(){for(let e of this._parentMedia)e.el.src&&e.el.play().catch(t=>this._reportPlaybackError(t))}_reportPlaybackError(e){this._playbackErrorPosted||(this._playbackErrorPosted=!0,this.dispatchEvent(new CustomEvent("playbackerror",{detail:{source:"parent-proxy",error:e}})))}_pauseParentMedia(){for(let e of this._parentMedia)e.el.pause()}static MIRROR_DRIFT_THRESHOLD_SECONDS=.05;static MIRROR_REQUIRED_CONSECUTIVE_DRIFT_SAMPLES=2;_mirrorParentMediaTime(e,t){let i=t?.force===!0,r=n.MIRROR_REQUIRED_CONSECUTIVE_DRIFT_SAMPLES,d=n.MIRROR_DRIFT_THRESHOLD_SECONDS;for(let s of this._parentMedia){let l=e-s.start;if(l<0||l>=s.duration){s.driftSamples=0;continue}Math.abs(s.el.currentTime-l)>d?(s.driftSamples+=1,(i||s.driftSamples>=r)&&(s.el.currentTime=l,s.driftSamples=0)):s.driftSamples=0}}_promoteToParentProxy(){this._audioOwner!=="parent"&&(this._audioOwner="parent",this._sendControl("set-media-output-muted",{muted:!0}),this._mirrorParentMediaTime(this._currentTime,{force:!0}),this._paused||this._playParentMedia(),this.dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"parent",reason:"autoplay-blocked"}})))}_createParentMedia(e,t,i,r){if(this._parentMedia.some(l=>l.el.src===e))return null;let d=t==="video"?document.createElement("video"):new Audio;d.preload="auto",d.src=e,d.load(),d.muted=this.muted,d.volume=this._volume,this.playbackRate!==1&&(d.playbackRate=this.playbackRate);let s={el:d,start:i,duration:r,driftSamples:0};return this._parentMedia.push(s),s}_setupParentAudioFromUrl(e){this._createParentMedia(e,"audio",0,1/0)}_setupParentMedia(){try{let e=this.iframe.contentDocument;if(!e)return;let t=e.querySelectorAll("audio[data-start], video[data-start]");for(let i of t)this._adoptIframeMedia(i);this._observeDynamicMedia(e)}catch{}}_adoptIframeMedia(e){let t=e.getAttribute("src")||e.querySelector("source")?.getAttribute("src");if(!t)return;let i=new URL(t,e.ownerDocument.baseURI).href,r=parseFloat(e.getAttribute("data-start")||"0"),d=parseFloat(e.getAttribute("data-duration")||"Infinity"),s=e.tagName==="VIDEO"?"video":"audio",l=this._createParentMedia(i,s,r,d);l&&this._audioOwner==="parent"&&(this._mirrorParentMediaTime(this._currentTime,{force:!0}),!this._paused&&l.el.src&&l.el.play().catch(u=>this._reportPlaybackError(u)))}_observeDynamicMedia(e){if(this._teardownMediaObserver(),typeof MutationObserver>"u"||!e.body)return;let t=new MutationObserver(r=>{for(let d of r){for(let s of d.addedNodes){if(!(s instanceof Element))continue;let l=[];s.matches?.("audio[data-start], video[data-start]")&&l.push(s);let u=s.querySelectorAll?.("audio[data-start], video[data-start]");if(u)for(let h of u)l.push(h);for(let h of l)this._adoptIframeMedia(h)}for(let s of d.removedNodes){if(!(s instanceof Element))continue;let l=[];s.matches?.("audio[data-start], video[data-start]")&&l.push(s);let u=s.querySelectorAll?.("audio[data-start], video[data-start]");if(u)for(let h of u)l.push(h);for(let h of l)this._detachIframeMedia(h)}}}),i=e.querySelectorAll("[data-composition-id]");if(i.length>0)for(let r of i)t.observe(r,{childList:!0,subtree:!0});else t.observe(e.body,{childList:!0,subtree:!0});this._mediaObserver=t}_teardownMediaObserver(){this._mediaObserver?.disconnect(),this._mediaObserver=void 0}_detachIframeMedia(e){let t=e.getAttribute("src")||e.querySelector("source")?.getAttribute("src");if(!t)return;let i=new URL(t,e.ownerDocument.baseURI).href,r=this._parentMedia.findIndex(s=>s.el.src===i);if(r===-1)return;let d=this._parentMedia[r];d.el.pause(),d.el.src="",this._parentMedia.splice(r,1)}_hidePoster(){this.posterEl?.remove(),this.posterEl=null}};customElements.get("hyperframes-player")||customElements.define("hyperframes-player",O);return be(Me);})();
|
|
418
|
+
`,q='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><polygon points="4,2 16,9 4,16"/></svg>',fe='<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>',G='<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>',X='<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>',be='<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>';var Y=[.25,.5,1,1.5,2,4];function k(r){return Number.isInteger(r)?`${r}x`:`${r}x`}function N(r){if(!Number.isFinite(r)||r<0)return"0:00";let e=Math.floor(r),t=Math.floor(e/60),i=e%60;return`${t}:${i.toString().padStart(2,"0")}`}function ve(r,e,t={}){let i=t.speedPresets??Y,n=document.createElement("div");n.className="hfp-controls",n.addEventListener("click",a=>{a.stopPropagation()});let o=document.createElement("button");o.className="hfp-play-btn",o.type="button",o.innerHTML=q,o.setAttribute("aria-label","Play");let l=document.createElement("div");l.className="hfp-scrubber";let s=document.createElement("div");s.className="hfp-progress",s.style.width="0%",l.appendChild(s);let p=document.createElement("span");p.className="hfp-time",p.textContent="0:00 / 0:00";let c=document.createElement("div");c.className="hfp-speed-wrap";let u=document.createElement("button");u.className="hfp-speed-btn",u.type="button",u.textContent="1x",u.setAttribute("aria-label","Playback speed");let f=document.createElement("div");f.className="hfp-speed-menu",f.setAttribute("role","menu");for(let a of i){let d=document.createElement("button");d.className="hfp-speed-option",d.type="button",d.setAttribute("role","menuitem"),d.dataset.speed=String(a),d.textContent=k(a),a===1&&d.classList.add("hfp-active"),f.appendChild(d)}c.appendChild(f),c.appendChild(u);let y=document.createElement("div");y.className="hfp-volume-wrap";let m=document.createElement("button");m.className="hfp-mute-btn",m.type="button",m.innerHTML=G,m.setAttribute("aria-label","Mute");let g=document.createElement("div");g.className="hfp-volume-slider-wrap";let h=document.createElement("div");h.className="hfp-volume-slider",h.setAttribute("role","slider"),h.setAttribute("aria-label","Volume"),h.setAttribute("aria-valuemin","0"),h.setAttribute("aria-valuemax","100"),h.setAttribute("aria-valuenow","100"),h.tabIndex=0;let v=document.createElement("div");v.className="hfp-volume-fill",v.style.width="100%",h.appendChild(v),g.appendChild(h),y.appendChild(g),y.appendChild(m),n.appendChild(o),n.appendChild(l),n.appendChild(p),n.appendChild(y),n.appendChild(c),r.appendChild(n);let P=!1,S=!1,_=1,A=null,R=i.indexOf(1);R===-1&&(R=0);let D=(a,d)=>a?be:d===0?X:d<.5?X:G;o.addEventListener("click",a=>{a.stopPropagation(),P?e.onPause():e.onPlay()}),m.addEventListener("click",a=>{a.stopPropagation(),e.onMuteToggle()});let w=!1,I=a=>{let d=h.getBoundingClientRect(),b=Math.max(0,Math.min(1,(a-d.left)/d.width));_=b,v.style.width=`${b*100}%`,h.setAttribute("aria-valuenow",String(Math.round(b*100))),S&&b>0&&e.onMuteToggle(),m.innerHTML=D(S,b),e.onVolumeChange(b)};h.addEventListener("mousedown",a=>{a.stopPropagation(),w=!0,I(a.clientX)});let Z=a=>{w&&I(a.clientX)},K=()=>{w=!1};document.addEventListener("mousemove",Z),document.addEventListener("mouseup",K),h.addEventListener("touchstart",a=>{w=!0;let d=a.touches[0];d&&I(d.clientX)},{passive:!0});let ee=a=>{if(w){let d=a.touches[0];d&&I(d.clientX)}},te=()=>{w=!1};document.addEventListener("touchmove",ee,{passive:!0}),document.addEventListener("touchend",te);let ie=.05;h.addEventListener("keydown",a=>{let d=_;if(a.key==="ArrowRight"||a.key==="ArrowUp")d=Math.min(1,_+ie);else if(a.key==="ArrowLeft"||a.key==="ArrowDown")d=Math.max(0,_-ie);else return;a.preventDefault(),a.stopPropagation(),_=d,v.style.width=`${d*100}%`,h.setAttribute("aria-valuenow",String(Math.round(d*100))),S&&d>0&&e.onMuteToggle(),m.innerHTML=D(S,d),e.onVolumeChange(d)});let re=a=>{for(let d of f.querySelectorAll(".hfp-speed-option"))d.classList.toggle("hfp-active",d.dataset.speed===String(a))};u.addEventListener("click",a=>{a.stopPropagation();let d=f.classList.toggle("hfp-open");u.setAttribute("aria-expanded",String(d))}),f.addEventListener("click",a=>{a.stopPropagation();let d=a.target.closest(".hfp-speed-option");if(!d)return;let b=parseFloat(d.dataset.speed);R=i.indexOf(b),u.textContent=k(b),re(b),f.classList.remove("hfp-open"),u.setAttribute("aria-expanded","false"),e.onSpeedChange(b)});let ne=()=>{f.classList.remove("hfp-open"),u.setAttribute("aria-expanded","false")};document.addEventListener("click",ne);let O=a=>{let d=l.getBoundingClientRect(),b=Math.max(0,Math.min(1,(a-d.left)/d.width));e.onSeek(b)},T=!1;l.addEventListener("mousedown",a=>{a.stopPropagation(),T=!0,O(a.clientX)});let oe=a=>{T&&O(a.clientX)},ae=()=>{T=!1};document.addEventListener("mousemove",oe),document.addEventListener("mouseup",ae),l.addEventListener("touchstart",a=>{T=!0;let d=a.touches[0];d&&O(d.clientX)},{passive:!0});let se=a=>{if(T){let d=a.touches[0];d&&O(d.clientX)}},de=()=>{T=!1};document.addEventListener("touchmove",se,{passive:!0}),document.addEventListener("touchend",de);let le=()=>{A&&clearTimeout(A),A=setTimeout(()=>{P&&n.classList.add("hfp-hidden")},3e3)},pe=r instanceof ShadowRoot?r.host:r;return pe.addEventListener("mousemove",()=>{n.classList.remove("hfp-hidden"),le()}),pe.addEventListener("mouseleave",()=>{P&&n.classList.add("hfp-hidden")}),{updateTime(a,d){let b=d>0?Math.min(a,d):a,ke=d>0?b/d*100:0;s.style.width=`${ke}%`,p.textContent=`${N(b)} / ${N(d)}`},updatePlaying(a){P=a,o.innerHTML=a?fe:q,o.setAttribute("aria-label",a?"Pause":"Play"),a?le():n.classList.remove("hfp-hidden")},updateSpeed(a){let d=i.indexOf(a);d!==-1&&(R=d),u.textContent=k(a),re(a)},updateMuted(a){S=a,m.innerHTML=D(a,_),m.setAttribute("aria-label",a?"Unmute":"Mute")},updateVolume(a){_=a,v.style.width=`${a*100}%`,h.setAttribute("aria-valuenow",String(Math.round(a*100))),m.innerHTML=D(S,a)},show(){n.style.display=""},hide(){n.style.display="none"},destroy(){document.removeEventListener("mousemove",oe),document.removeEventListener("mouseup",ae),document.removeEventListener("touchmove",se),document.removeEventListener("touchend",de),document.removeEventListener("mousemove",Z),document.removeEventListener("mouseup",K),document.removeEventListener("touchmove",ee),document.removeEventListener("touchend",te),document.removeEventListener("click",ne),A&&clearTimeout(A)}}}function ge(r,e,t,i,n){let o=i?i.split(",").map(Number).filter(p=>!isNaN(p)&&p>0):void 0,s=ve(r,n,o?{speedPresets:o}:{});return s.updateMuted(e),s.updateVolume(t),s}function Q(r,e,t){return e?(t||(t=document.createElement("img"),t.className="hfp-poster",r.appendChild(t)),t.src=e,t):(t?.remove(),null)}function ye(r){return r.composedPath().some(e=>e instanceof HTMLElement&&e.classList.contains("hfp-controls"))}var F=null;function _e(r,e){if(typeof CSSStyleSheet<"u")try{F||(F=new CSSStyleSheet,F.replaceSync(e)),r.adoptedStyleSheets=[F];return}catch{}let t=document.createElement("style");t.textContent=e,r.appendChild(t)}function Ee(){let r=document.createElement("div");r.className="hfp-container";let e=document.createElement("iframe");return e.className="hfp-iframe",e.sandbox.add("allow-scripts","allow-same-origin"),e.allow="autoplay; fullscreen",e.referrerPolicy="no-referrer",e.title="HyperFrames Composition",r.appendChild(e),{container:r,iframe:e}}function Se(r,e,t,i){let n=r.getBoundingClientRect();if(n.width===0||n.height===0)return;let o=Math.min(n.width/t,n.height/i);e.style.width=`${t}px`,e.style.height=`${i}px`,e.style.transform=`translate(-50%, -50%) scale(${o})`}var U=class{constructor(e){this._callbacks=e}_callbacks;_raf=null;_lastUpdateMs=0;start(e,t,i,n){this.stop();let o=()=>{if(n()){this._raf=null;return}let l;try{l=e.time()}catch{this._raf=null;return}let s=i();s>0&&(l=Math.min(l,s));let p=s>0&&l>=s,c=performance.now();if((c-this._lastUpdateMs>100||p)&&(this._lastUpdateMs=c,this._callbacks.onTimeUpdate(l,s)),p){if(this._callbacks.getLoop()){this._callbacks.restart();return}try{e.pause()}catch{}this._callbacks.onPaused(),this._raf=null;return}this._raf=requestAnimationFrame(o)};this._raf=requestAnimationFrame(o)}stop(){this._raf!==null&&(cancelAnimationFrame(this._raf),this._raf=null)}get isRunning(){return this._raf!==null}};function we(r){let e=Array.from(r.querySelectorAll("[data-composition-id]"));if(e.length===0)return r.body?[r.body]:[];let t=[];for(let i of e)Ue(i)||t.push(i);return Fe(r),t}function Fe(r){let e=r.body;if(!e||typeof console>"u"||typeof console.warn!="function")return;let t=e.querySelectorAll("audio[data-start], video[data-start]");if(t.length===0)return;let i=[];for(let n of t)n.closest("[data-composition-id]")||i.push(n);i.length!==0&&console.warn(`[hyperframes-player] selectMediaObserverTargets: composition hosts are present, but ${i.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.`,i)}function Ue(r){let e=r.parentElement;for(;e;){if(e.hasAttribute("data-composition-id"))return!0;e=e.parentElement}return!1}var Ve=.05,je=2,V=class{_entries=[];_mediaObserver;_playbackErrorPosted=!1;_audioOwner="runtime";_dispatchEvent;_getMuted;_getVolume;_getPlaybackRate;_getCurrentTime;_isPaused;constructor(e){this._dispatchEvent=e.dispatchEvent,this._getMuted=e.getMuted,this._getVolume=e.getVolume,this._getPlaybackRate=e.getPlaybackRate,this._getCurrentTime=e.getCurrentTime,this._isPaused=e.isPaused}get audioOwner(){return this._audioOwner}get entries(){return this._entries}get playbackErrorPosted(){return this._playbackErrorPosted}resetForIframeLoad(){this._playbackErrorPosted=!1;let e=this._audioOwner==="parent";this._audioOwner="runtime",this.pauseAll(),this.teardownObserver(),e&&this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"runtime",reason:"iframe-reload"}}))}destroy(){this.teardownObserver();for(let e of this._entries)e.el.pause(),e.el.src="";this._entries=[]}updateMuted(e){for(let t of this._entries)t.el.muted=e}updateVolume(e){for(let t of this._entries)t.el.volume=e}updatePlaybackRate(e){for(let t of this._entries)t.el.playbackRate=e}playAll(){for(let e of this._entries)e.el.src&&e.el.play().catch(t=>this._reportPlaybackError(t))}pauseAll(){for(let e of this._entries)e.el.pause()}seekAll(e){for(let t of this._entries){let i=e-t.start;i>=0&&i<t.duration&&(t.el.currentTime=i)}}mirrorTime(e,t){let i=t?.force===!0;for(let n of this._entries){let o=e-n.start;if(o<0||o>=n.duration){n.driftSamples=0;continue}Math.abs(n.el.currentTime-o)>Ve?(n.driftSamples+=1,(i||n.driftSamples>=je)&&(n.el.currentTime=o,n.driftSamples=0)):n.driftSamples=0}}promoteToParentProxy(e,t){if(this._audioOwner==="parent")return;if(this._audioOwner="parent",e)for(let n of e.querySelectorAll("video, audio"))n.muted=!0;let i=this._getCurrentTime();t?t(i,{force:!0}):this.mirrorTime(i,{force:!0}),this._isPaused()||this.playAll(),this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"parent",reason:"autoplay-blocked"}}))}setupFromIframe(e){let t=e.querySelectorAll("audio[data-start], video[data-start]");for(let i of t)this._adoptIframeMedia(i);this._observeDynamicMedia(e)}setupFromUrl(e){this._createEntry(e,"audio",0,1/0)}teardownObserver(){this._mediaObserver?.disconnect(),this._mediaObserver=void 0}_reportPlaybackError(e){this._playbackErrorPosted||(this._playbackErrorPosted=!0,this._dispatchEvent(new CustomEvent("playbackerror",{detail:{source:"parent-proxy",error:e}})))}_createEntry(e,t,i,n){if(this._entries.some(p=>p.el.src===e))return null;let o=t==="video"?document.createElement("video"):new Audio;o.preload="auto",o.src=e,o.load(),o.muted=this._getMuted(),o.volume=this._getVolume();let l=this._getPlaybackRate();l!==1&&(o.playbackRate=l);let s={el:o,start:i,duration:n,driftSamples:0};return this._entries.push(s),s}_adoptIframeMedia(e){if(e.preload==="metadata"||e.preload==="none")return;let t=e.getAttribute("src")||e.querySelector("source")?.getAttribute("src");if(!t)return;let i=new URL(t,e.ownerDocument.baseURI).href,n=parseFloat(e.getAttribute("data-start")||"0"),o=parseFloat(e.getAttribute("data-duration")||"Infinity"),l=e.tagName==="VIDEO"?"video":"audio",s=this._createEntry(i,l,n,o);s&&this._audioOwner==="parent"&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),!this._isPaused()&&s.el.src&&s.el.play().catch(p=>this._reportPlaybackError(p)))}_detachIframeMedia(e){let t=e.getAttribute("src")||e.querySelector("source")?.getAttribute("src");if(!t)return;let i=new URL(t,e.ownerDocument.baseURI).href,n=this._entries.findIndex(l=>l.el.src===i);if(n===-1)return;let o=this._entries[n];o.el.pause(),o.el.src="",this._entries.splice(n,1)}_observeDynamicMedia(e){if(this.teardownObserver(),typeof MutationObserver>"u"||!e.body)return;let t=new MutationObserver(o=>{for(let l of o){if(l.type==="attributes"&&l.attributeName==="preload"){let s=l.target;s instanceof HTMLMediaElement&&s.matches("audio[data-start], video[data-start]")&&s.preload==="auto"&&this._adoptIframeMedia(s);continue}for(let s of l.addedNodes){if(!(s instanceof Element))continue;let p=[];s.matches?.("audio[data-start], video[data-start]")&&p.push(s);let c=s.querySelectorAll?.("audio[data-start], video[data-start]");if(c)for(let u of c)p.push(u);for(let u of p)this._adoptIframeMedia(u)}for(let s of l.removedNodes){if(!(s instanceof Element))continue;let p=[];s.matches?.("audio[data-start], video[data-start]")&&p.push(s);let c=s.querySelectorAll?.("audio[data-start], video[data-start]");if(c)for(let u of c)p.push(u);for(let u of p)this._detachIframeMedia(u)}}}),i={childList:!0,subtree:!0,attributes:!0,attributeFilter:["preload"]},n=we(e);for(let o of n)t.observe(o,i);this._mediaObserver=t}};function Te(r,e,t,i){let n=(r.frame??0)/e,o=t.duration>0?Math.min(n,t.duration):n,l=!t.paused,s=!r.isPlaying,p=t.duration>0&&o>=t.duration&&(l||r.isPlaying);if(p&&i.getLoop())return i.media.audioOwner==="parent"&&i.media.pauseAll(),i.seek(0),i.play(),{...t,currentTime:o,paused:!1};let c={...t,currentTime:o,paused:s};i.media.audioOwner==="parent"&&(l&&s?i.media.pauseAll():!l&&!s&&i.media.playAll(),i.media.mirrorTime(o));let u=performance.now(),f=s!==t.paused;return(u-t.lastUpdateMs>100||f)&&(c.lastUpdateMs=u,i.updateControlsTime(o,t.duration),i.updateControlsPlaying(!s),i.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:o}}))),p&&(i.media.audioOwner==="parent"&&i.media.pauseAll(),c.paused=!0,i.updateControlsPlaying(!1),i.dispatchEvent(new Event("ended"))),c}var xe=30;function Ce(r,e,t){if(r.source!==e)return;let i=r.data;if(!(!i||i.source!=="hf-preview")){if(i.type==="shader-transition-state"){let n=i.state&&typeof i.state=="object"?i.state:{};t.shaderLoader.update(n,t.getShaderLoadingMode()),t.dispatchEvent(new CustomEvent("shadertransitionstate",{detail:{compositionId:i.compositionId,state:n}}));return}if(i.type==="state"){t.setPlaybackState(Te({frame:i.frame??0,isPlaying:!!i.isPlaying},xe,t.getPlaybackState(),t));return}if(i.type==="media-autoplay-blocked"){let n=null;try{n=t.getIframeDoc()}catch{}t.media.promoteToParentProxy(n,(o,l)=>t.media.mirrorTime(o,l)),t.sendControl("set-media-output-muted",{muted:!0});return}if(i.type==="timeline"&&i.durationInFrames>0){if(Number.isFinite(i.durationInFrames)){let n=t.getPlaybackState(),o=i.durationInFrames/xe;t.setPlaybackState({...n,duration:o}),t.updateControlsTime(n.currentTime,o)}return}i.type==="stage-size"&&i.width>0&&i.height>0&&t.setCompositionSize(i.width,i.height)}}var E="shader-capture-scale",x="shader-loading",ze="__hf_shader_capture_scale",$e="__hf_shader_loading",C=["Preparing scene transitions","Sampling outgoing scene motion","Sampling incoming scene motion","Caching transition frames","Finalizing transition preview"];function J(r){if(r===null)return null;let e=Number(r);return!Number.isFinite(e)||e<=0?null:String(Math.min(1,Math.max(.25,e)))}function We(r){if(r===null||r.trim()==="")return"composition";let e=r.trim().toLowerCase();return e==="none"||e==="false"||e==="0"||e==="off"?"none":e==="player"||e==="true"||e==="1"||e==="on"?"player":"composition"}function Me(r,e,t){t===null?r.delete(e):r.set(e,t)}function Be(r,e,t){let i=r.indexOf("#"),n=i>=0?r.slice(0,i):r,o=i>=0?r.slice(i):"",l=n.indexOf("?"),s=l>=0?n.slice(0,l):n,p=l>=0?n.slice(l+1):"",c=new URLSearchParams(p);Me(c,ze,e),Me(c,$e,t==="composition"?null:t);let u=c.toString();return`${s}${u?`?${u}`:""}${o}`}function qe(r,e,t){if(e===null&&t==="composition")return r;let i=[];e!==null&&i.push(`window.__HF_SHADER_CAPTURE_SCALE=${JSON.stringify(e)};`),t!=="composition"&&i.push(`window.__HF_SHADER_LOADING=${JSON.stringify(t)};`);let n=`<script data-hyperframes-player-shader-options>${i.join("")}</script>`;return/<head\b[^>]*>/i.test(r)?r.replace(/<head\b[^>]*>/i,o=>`${o}${n}`):/<html\b[^>]*>/i.test(r)?r.replace(/<html\b[^>]*>/i,o=>`${o}${n}`):`${n}${r}`}function M(r){return We(r.getAttribute(x))}function Ae(r){return Number(J(r.getAttribute(E))??"1")}function j(r,e){return Be(e,J(r.getAttribute(E)),M(r))}function z(r,e){return qe(e,J(r.getAttribute(E)),M(r))}function Le(){let r=document.createElement("div");r.className="hfp-shader-loader",r.setAttribute("role","status"),r.setAttribute("aria-live","polite"),r.setAttribute("aria-label","Preparing scene transitions"),r.setAttribute("data-hyperframes-ignore",""),r.draggable=!1;let e=m=>{m.preventDefault(),m.stopPropagation()};for(let m of["selectstart","dragstart","pointerdown","mousedown","click","dblclick","contextmenu","touchstart"])r.addEventListener(m,e,{capture:!0});let t=document.createElement("div");t.className="hfp-shader-loader-panel",t.draggable=!1;let i=document.createElement("div");i.className="hfp-shader-loader-mark",i.draggable=!1,i.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("");let n=document.createElement("div");n.className="hfp-shader-loader-title";let o=document.createElement("span");o.className="hfp-shader-loader-title-text",o.textContent=C[0]||"Preparing scene transitions",n.appendChild(o);let l=document.createElement("div");l.className="hfp-shader-loader-detail",l.textContent="Rendering animated scene samples for shader transitions.";let s=document.createElement("div");s.className="hfp-shader-loader-track",s.setAttribute("aria-hidden","true");let p=document.createElement("div");p.className="hfp-shader-loader-fill",s.appendChild(p);let c=document.createElement("div");c.className="hfp-shader-loader-progress";let u=m=>{let g=document.createElement("div");g.className="hfp-shader-loader-row";let h=document.createElement("span");h.className="hfp-shader-loader-label",h.textContent=m;let v=document.createElement("span");return v.className="hfp-shader-loader-value",g.appendChild(h),g.appendChild(v),c.appendChild(g),{row:g,label:h,value:v}},f=u("transition"),y=u("transition frame");return t.appendChild(i),t.appendChild(n),t.appendChild(l),t.appendChild(s),t.appendChild(c),r.appendChild(t),{root:r,fill:p,title:o,detail:l,transitionValue:f.value,frameLabel:y.label,frameValue:y.value,frameRow:y.row}}var Ge=420,$=class{_el;_hideTimeout=null;constructor(e){this._el=e}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())}reset(){this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null),this._el.root.classList.remove("hfp-visible","hfp-hiding"),this._el.fill.style.transform="scaleX(0)",this._el.transitionValue.textContent="",this._el.frameValue.textContent="",this._el.frameRow.style.visibility="hidden"}update(e,t){if(t!=="player"){this.reset();return}if(e.ready||!e.loading){this.hide();return}let i=typeof e.progress=="number"&&Number.isFinite(e.progress)?e.progress:0,n=typeof e.total=="number"&&Number.isFinite(e.total)?e.total:0,o=n>0?Math.min(1,Math.max(0,i/n)):0,l=Math.min(C.length-1,Math.floor(o*C.length));this._el.title.textContent=C[l]||"Preparing scene transitions",this._el.detail.textContent=e.phase==="cached"?"Loading cached transition frames before playback.":e.phase==="finalizing"?"Uploading transition textures for smooth playback.":"Rendering animated scene samples for shader transitions.",this._el.fill.style.transform=`scaleX(${o})`,this._el.transitionValue.textContent=e.currentTransition!==void 0&&e.transitionTotal!==void 0?`${e.currentTransition}/${e.transitionTotal}`:n>0?`${i}/${n}`:"";let s=e.transitionFrame!==void 0&&e.transitionFrames!==void 0?`${e.transitionFrame}/${e.transitionFrames}`:"";this._el.frameLabel.textContent=e.phase==="cached"?"cached transition frames":e.phase==="finalizing"?"finalizing transition frames":"rendering transition frames",this._el.frameValue.textContent=s,this._el.frameRow.style.visibility=s?"visible":"hidden",this._el.root.setAttribute("aria-valuenow",String(Math.round(o*100))),this.show()}get hideTimeout(){return this._hideTimeout}destroy(){this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null)}_scheduleCleanup(){this._hideTimeout&&clearTimeout(this._hideTimeout),this._hideTimeout=setTimeout(()=>{this._el.root.classList.remove("hfp-hiding"),this._hideTimeout=null},Ge)}};var W=class extends HTMLElement{static get observedAttributes(){return["src","srcdoc","width","height","controls","muted","volume","poster","playback-rate","audio-src",E,x]}shadow;container;iframe;posterEl=null;controlsApi=null;resizeObserver;shaderLoader;probe;_ready=!1;_currentTime=0;_duration=0;_paused=!0;_lastUpdateMs=0;_volume=1;_compositionWidth=1920;_compositionHeight=1080;_directTimelineAdapter=null;_directTimelineClock;_media;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),_e(this.shadow,me),{container:this.container,iframe:this.iframe}=Ee(),this.shadow.appendChild(this.container);let e=Le();this.shadow.appendChild(e.root),this.shaderLoader=new $(e),this._media=new V({dispatchEvent:t=>this.dispatchEvent(t),getMuted:()=>this.muted,getVolume:()=>this._volume,getPlaybackRate:()=>this.playbackRate,getCurrentTime:()=>this._currentTime,isPaused:()=>this._paused}),this._directTimelineClock=new U({onTimeUpdate:(t,i)=>{this._currentTime=t,this.controlsApi?.updateTime(t,i),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:t}}))},getLoop:()=>this.loop,restart:()=>{this.seek(0),this.play()},onPaused:()=>{this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.dispatchEvent(new Event("ended"))},onEnded:()=>this.loop}),this.probe=new H(this.iframe,{onReady:t=>this._onProbeReady(t),onError:t=>this.dispatchEvent(new CustomEvent("error",{detail:{message:t}}))}),this.addEventListener("click",t=>{ye(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)}connectedCallback(){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=Q(this.shadow,this.getAttribute("poster"),this.posterEl)),this.hasAttribute("audio-src")&&this._media.setupFromUrl(this.getAttribute("audio-src")),this.hasAttribute("srcdoc")&&(this.iframe.srcdoc=z(this,this.getAttribute("srcdoc"))),this.hasAttribute("src")&&(this.iframe.src=j(this,this.getAttribute("src")))}disconnectedCallback(){this.resizeObserver.disconnect(),window.removeEventListener("message",this._onMessage),this.iframe.removeEventListener("load",this._onIframeLoad),this.probe.stop(),this._directTimelineClock.stop(),this._directTimelineAdapter=null,this.shaderLoader.destroy(),this._media.destroy(),this.controlsApi?.destroy()}attributeChangedCallback(e,t,i){switch(e){case"src":i&&(this._ready=!1,this.iframe.src=j(this,i));break;case"srcdoc":this._ready=!1,i!==null?this.iframe.srcdoc=z(this,i):this.iframe.removeAttribute("srcdoc");break;case"width":this._compositionWidth=parseInt(i||"1920",10),this._rescale();break;case"height":this._compositionHeight=parseInt(i||"1080",10),this._rescale();break;case"controls":i!==null?this._setupControls():(this.controlsApi?.destroy(),this.controlsApi=null);break;case"poster":this.posterEl=Q(this.shadow,i,this.posterEl);break;case"playback-rate":{let n=parseFloat(i||"1");this._media.updatePlaybackRate(n),this._sendControl("set-playback-rate",{playbackRate:n}),this.controlsApi?.updateSpeed(n),this.dispatchEvent(new Event("ratechange"));break}case"muted":this._media.updateMuted(i!==null),this._sendControl("set-muted",{muted:i!==null}),this.controlsApi?.updateMuted(i!==null),this.dispatchEvent(new Event("volumechange"));break;case"volume":{let n=Math.max(0,Math.min(1,parseFloat(i||"1")));this._volume=n,this._media.updateVolume(n),this._sendControl("set-volume",{volume:n}),this.controlsApi?.updateVolume(n),this.dispatchEvent(new Event("volumechange"));break}case"audio-src":i&&this._media.setupFromUrl(i);break;case E:case x:this._reloadShaderOptions();break}}get iframeElement(){return this.iframe}play(){this.posterEl?.remove(),this.posterEl=null,this._duration>0&&this._currentTime>=this._duration&&this.seek(0);let e=this._tryDirectTimelinePlay();e||this._sendControl("play"),this._media.audioOwner==="parent"&&this._media.playAll(),this._paused=!1,this.controlsApi?.updatePlaying(!0),this.dispatchEvent(new Event("play")),e&&this._directTimelineAdapter&&this._directTimelineClock.start(this._directTimelineAdapter,()=>this._currentTime,()=>this._duration,()=>this._paused)}pause(){this._tryDirectTimelinePause()||this._sendControl("pause"),this._directTimelineClock.stop(),this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.dispatchEvent(new Event("pause"))}seek(e){!this._trySyncSeek(e)&&!this._tryDirectTimelineSeek(e)&&this._sendControl("seek",{frame:Math.round(e*30)}),this._directTimelineClock.stop(),this._currentTime=e,this._media.audioOwner==="parent"&&this._media.seekAll(e),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.controlsApi?.updateTime(this._currentTime,this._duration)}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 playbackRate(){return parseFloat(this.getAttribute("playback-rate")||"1")}set playbackRate(e){this.setAttribute("playback-rate",String(e))}get shaderCaptureScale(){return Ae(this)}set shaderCaptureScale(e){this.setAttribute(E,String(e))}get shaderLoading(){return M(this)}set shaderLoading(e){e==="composition"?this.removeAttribute(x):this.setAttribute(x,e)}get muted(){return this.hasAttribute("muted")}set muted(e){e?this.setAttribute("muted",""):this.removeAttribute("muted")}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{this.iframe.contentWindow?.postMessage({source:"hf-parent",type:"control",action:e,...t},"*")}catch{}}_reloadShaderOptions(){if(M(this)!=="player"&&this.shaderLoader.reset(),this.hasAttribute("srcdoc")){this.iframe.srcdoc=z(this,this.getAttribute("srcdoc")||"");return}this.hasAttribute("src")&&(this.iframe.src=j(this,this.getAttribute("src")||""))}_trySyncSeek(e){try{let i=this.iframe.contentWindow?.__player;return typeof i?.seek!="function"?!1:(i.seek.call(i,e),!0)}catch{return!1}}_withDirectTimeline(e){let t=this._directTimelineAdapter||this.probe.resolveDirectTimelineAdapter();if(!t)return!1;try{return e(t),this._directTimelineAdapter=t,!0}catch{return!1}}_tryDirectTimelineSeek(e){return this._withDirectTimeline(t=>{t.seek(e),t.pause()})}_tryDirectTimelinePlay(){return this._withDirectTimeline(e=>{e.play()})}_tryDirectTimelinePause(){return this._withDirectTimeline(e=>{e.pause()})}_onMessage(e){Ce(e,this.iframe.contentWindow,{getPlaybackState:()=>({currentTime:this._currentTime,duration:this._duration,paused:this._paused,lastUpdateMs:this._lastUpdateMs}),setPlaybackState:({currentTime:t,duration:i,paused:n,lastUpdateMs:o})=>{this._currentTime=t,this._duration=i,this._paused=n,this._lastUpdateMs=o},getShaderLoadingMode:()=>M(this),shaderLoader:this.shaderLoader,setCompositionSize:(t,i)=>{this._compositionWidth=t,this._compositionHeight=i,this._rescale()},sendControl:(t,i)=>this._sendControl(t,i),getIframeDoc:()=>this.iframe.contentDocument,updateControlsTime:(t,i)=>this.controlsApi?.updateTime(t,i),updateControlsPlaying:t=>this.controlsApi?.updatePlaying(t),dispatchEvent:t=>this.dispatchEvent(t),seek:t=>this.seek(t),play:()=>this.play(),getLoop:()=>this.loop,media:this._media})}_onProbeReady({duration:e,adapter:t,compositionSize:i}){this._duration=e,this._directTimelineAdapter=t.kind==="direct-timeline"?t.timeline:null,this._ready=!0,this.controlsApi?.updateTime(0,e),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:e}})),i&&(this._compositionWidth=i.width,this._compositionHeight=i.height,this._rescale());try{let n=this.iframe.contentDocument;n&&this._media.setupFromIframe(n)}catch{}this.hasAttribute("autoplay")&&this.play()}_rescale(){Se(this,this.iframe,this._compositionWidth,this._compositionHeight)}_onIframeLoad(){this._directTimelineAdapter=null,this._directTimelineClock.stop(),this.shaderLoader.reset(),this._media.resetForIframeLoad(),this.probe.start()}_setupControls(){this.controlsApi||(this.controlsApi=ge(this.shadow,this.muted,this._volume,this.getAttribute("speed-presets"),{onPlay:()=>this.play(),onPause:()=>this.pause(),onSeek:e=>this.seek(e*this._duration),onSpeedChange:e=>{this.playbackRate=e},onMuteToggle:()=>{this.muted=!this.muted},onVolumeChange:e=>{this.volume=e}}))}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,i)=>this._mirrorParentMediaTime(t,i)),this._sendControl("set-media-output-muted",{muted:!0})}_observeDynamicMedia(e){this._media.setupFromIframe(e)}};customElements.get("hyperframes-player")||customElements.define("hyperframes-player",W);return He(Xe);})();
|
|
419
419
|
//# sourceMappingURL=hyperframes-player.global.js.map
|