@hyperframes/player 0.5.3 → 0.5.4
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 +66 -2
- package/dist/hyperframes-player.cjs.map +1 -1
- package/dist/hyperframes-player.d.cts +16 -0
- package/dist/hyperframes-player.d.ts +16 -0
- package/dist/hyperframes-player.global.js +66 -2
- package/dist/hyperframes-player.global.js.map +1 -1
- package/dist/hyperframes-player.js +66 -2
- package/dist/hyperframes-player.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,8 @@ interface ControlsCallbacks {
|
|
|
3
3
|
onPause: () => void;
|
|
4
4
|
onSeek: (fraction: number) => void;
|
|
5
5
|
onSpeedChange: (speed: number) => void;
|
|
6
|
+
onMuteToggle: () => void;
|
|
7
|
+
onVolumeChange: (volume: number) => void;
|
|
6
8
|
}
|
|
7
9
|
/** Default logarithmic speed presets — each step roughly doubles/halves. */
|
|
8
10
|
declare const SPEED_PRESETS: readonly [0.25, 0.5, 1, 1.5, 2, 4];
|
|
@@ -35,10 +37,13 @@ declare class HyperframesPlayer extends HTMLElement {
|
|
|
35
37
|
private _duration;
|
|
36
38
|
private _currentTime;
|
|
37
39
|
private _paused;
|
|
40
|
+
private _volume;
|
|
38
41
|
private _compositionWidth;
|
|
39
42
|
private _compositionHeight;
|
|
40
43
|
private _probeInterval;
|
|
41
44
|
private _lastUpdateMs;
|
|
45
|
+
private _directTimelineAdapter;
|
|
46
|
+
private _directTimelineRaf;
|
|
42
47
|
/**
|
|
43
48
|
* Parent-frame audio/video proxies, preloaded mirror copies of the iframe's
|
|
44
49
|
* timed media. They exist as a fallback for environments that block iframe
|
|
@@ -151,6 +156,8 @@ declare class HyperframesPlayer extends HTMLElement {
|
|
|
151
156
|
set shaderLoading(mode: ShaderLoadingMode);
|
|
152
157
|
get muted(): boolean;
|
|
153
158
|
set muted(m: boolean);
|
|
159
|
+
get volume(): number;
|
|
160
|
+
set volume(v: number);
|
|
154
161
|
get loop(): boolean;
|
|
155
162
|
set loop(l: boolean);
|
|
156
163
|
private _sendControl;
|
|
@@ -182,6 +189,15 @@ declare class HyperframesPlayer extends HTMLElement {
|
|
|
182
189
|
* runtime state stay identical between the two paths.
|
|
183
190
|
*/
|
|
184
191
|
private _trySyncSeek;
|
|
192
|
+
private _tryDirectTimelineSeek;
|
|
193
|
+
private _tryDirectTimelinePlay;
|
|
194
|
+
private _tryDirectTimelinePause;
|
|
195
|
+
private _startDirectTimelineClock;
|
|
196
|
+
private _stopDirectTimelineClock;
|
|
197
|
+
private _resolveDirectTimelineAdapter;
|
|
198
|
+
private _resolveDirectTimelineAdapterFromWindow;
|
|
199
|
+
private _hasRuntimeBridge;
|
|
200
|
+
private _resolvePlaybackDurationAdapter;
|
|
185
201
|
private _isControlsClick;
|
|
186
202
|
private _onMessage;
|
|
187
203
|
private _runtimeInjected;
|
|
@@ -3,6 +3,8 @@ interface ControlsCallbacks {
|
|
|
3
3
|
onPause: () => void;
|
|
4
4
|
onSeek: (fraction: number) => void;
|
|
5
5
|
onSpeedChange: (speed: number) => void;
|
|
6
|
+
onMuteToggle: () => void;
|
|
7
|
+
onVolumeChange: (volume: number) => void;
|
|
6
8
|
}
|
|
7
9
|
/** Default logarithmic speed presets — each step roughly doubles/halves. */
|
|
8
10
|
declare const SPEED_PRESETS: readonly [0.25, 0.5, 1, 1.5, 2, 4];
|
|
@@ -35,10 +37,13 @@ declare class HyperframesPlayer extends HTMLElement {
|
|
|
35
37
|
private _duration;
|
|
36
38
|
private _currentTime;
|
|
37
39
|
private _paused;
|
|
40
|
+
private _volume;
|
|
38
41
|
private _compositionWidth;
|
|
39
42
|
private _compositionHeight;
|
|
40
43
|
private _probeInterval;
|
|
41
44
|
private _lastUpdateMs;
|
|
45
|
+
private _directTimelineAdapter;
|
|
46
|
+
private _directTimelineRaf;
|
|
42
47
|
/**
|
|
43
48
|
* Parent-frame audio/video proxies, preloaded mirror copies of the iframe's
|
|
44
49
|
* timed media. They exist as a fallback for environments that block iframe
|
|
@@ -151,6 +156,8 @@ declare class HyperframesPlayer extends HTMLElement {
|
|
|
151
156
|
set shaderLoading(mode: ShaderLoadingMode);
|
|
152
157
|
get muted(): boolean;
|
|
153
158
|
set muted(m: boolean);
|
|
159
|
+
get volume(): number;
|
|
160
|
+
set volume(v: number);
|
|
154
161
|
get loop(): boolean;
|
|
155
162
|
set loop(l: boolean);
|
|
156
163
|
private _sendControl;
|
|
@@ -182,6 +189,15 @@ declare class HyperframesPlayer extends HTMLElement {
|
|
|
182
189
|
* runtime state stay identical between the two paths.
|
|
183
190
|
*/
|
|
184
191
|
private _trySyncSeek;
|
|
192
|
+
private _tryDirectTimelineSeek;
|
|
193
|
+
private _tryDirectTimelinePlay;
|
|
194
|
+
private _tryDirectTimelinePause;
|
|
195
|
+
private _startDirectTimelineClock;
|
|
196
|
+
private _stopDirectTimelineClock;
|
|
197
|
+
private _resolveDirectTimelineAdapter;
|
|
198
|
+
private _resolveDirectTimelineAdapterFromWindow;
|
|
199
|
+
private _hasRuntimeBridge;
|
|
200
|
+
private _resolvePlaybackDurationAdapter;
|
|
185
201
|
private _isControlsClick;
|
|
186
202
|
private _onMessage;
|
|
187
203
|
private _runtimeInjected;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var HyperframesPlayer=(()=>{var
|
|
1
|
+
"use strict";var HyperframesPlayer=(()=>{var N=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var ce=Object.getOwnPropertyNames;var ue=Object.prototype.hasOwnProperty;var me=(n,e)=>{for(var t in e)N(n,t,{get:e[t],enumerable:!0})},fe=(n,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of ce(e))!ue.call(n,r)&&r!==t&&N(n,r,{get:()=>e[r],enumerable:!(i=pe(e,r))||i.enumerable});return n};var ve=n=>fe(N({},"__esModule",{value:!0}),n);var Te={};me(Te,{HyperframesPlayer:()=>O,SPEED_PRESETS:()=>$,formatSpeed:()=>x,formatTime:()=>D});var F=`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
position: relative;
|
|
@@ -350,5 +350,69 @@
|
|
|
350
350
|
color: var(--hfp-accent, #fff);
|
|
351
351
|
font-weight: 600;
|
|
352
352
|
}
|
|
353
|
-
`,k='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><polygon points="4,2 16,9 4,16"/></svg>',$='<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>';var P=[.25,.5,1,1.5,2,4];function L(a){return Number.isInteger(a)?`${a}x`:`${a}x`}function x(a){if(!Number.isFinite(a)||a<0)return"0:00";let e=Math.floor(a),t=Math.floor(e/60),r=e%60;return`${t}:${r.toString().padStart(2,"0")}`}function z(a,e,t={}){let r=t.speedPresets??P,i=document.createElement("div");i.className="hfp-controls",i.addEventListener("click",o=>{o.stopPropagation()});let n=document.createElement("button");n.className="hfp-play-btn",n.type="button",n.innerHTML=k,n.setAttribute("aria-label","Play");let s=document.createElement("div");s.className="hfp-scrubber";let d=document.createElement("div");d.className="hfp-progress",d.style.width="0%",s.appendChild(d);let c=document.createElement("span");c.className="hfp-time",c.textContent="0:00 / 0:00";let p=document.createElement("div");p.className="hfp-speed-wrap";let h=document.createElement("button");h.className="hfp-speed-btn",h.type="button",h.textContent="1x",h.setAttribute("aria-label","Playback speed");let u=document.createElement("div");u.className="hfp-speed-menu",u.setAttribute("role","menu");for(let o of r){let l=document.createElement("button");l.className="hfp-speed-option",l.type="button",l.setAttribute("role","menuitem"),l.dataset.speed=String(o),l.textContent=L(o),o===1&&l.classList.add("hfp-active"),u.appendChild(l)}p.appendChild(u),p.appendChild(h),i.appendChild(n),i.appendChild(s),i.appendChild(c),i.appendChild(p),a.appendChild(i);let m=!1,b=null,f=r.indexOf(1);f===-1&&(f=0),n.addEventListener("click",o=>{o.stopPropagation(),m?e.onPause():e.onPlay()});let g=o=>{for(let l of u.querySelectorAll(".hfp-speed-option"))l.classList.toggle("hfp-active",l.dataset.speed===String(o))};h.addEventListener("click",o=>{o.stopPropagation();let l=u.classList.toggle("hfp-open");h.setAttribute("aria-expanded",String(l))}),u.addEventListener("click",o=>{o.stopPropagation();let l=o.target.closest(".hfp-speed-option");if(!l)return;let _=parseFloat(l.dataset.speed);f=r.indexOf(_),h.textContent=L(_),g(_),u.classList.remove("hfp-open"),h.setAttribute("aria-expanded","false"),e.onSpeedChange(_)});let y=()=>{u.classList.remove("hfp-open"),h.setAttribute("aria-expanded","false")};document.addEventListener("click",y);let v=o=>{let l=s.getBoundingClientRect(),_=Math.max(0,Math.min(1,(o-l.left)/l.width));e.onSeek(_)},S=!1;s.addEventListener("mousedown",o=>{o.stopPropagation(),S=!0,v(o.clientX)});let H=o=>{S&&v(o.clientX)},O=()=>{S=!1};document.addEventListener("mousemove",H),document.addEventListener("mouseup",O),s.addEventListener("touchstart",o=>{S=!0;let l=o.touches[0];l&&v(l.clientX)},{passive:!0});let D=o=>{if(S){let l=o.touches[0];l&&v(l.clientX)}},N=()=>{S=!1};document.addEventListener("touchmove",D,{passive:!0}),document.addEventListener("touchend",N);let F=()=>{b&&clearTimeout(b),b=setTimeout(()=>{m&&i.classList.add("hfp-hidden")},3e3)},U=a instanceof ShadowRoot?a.host:a;return U.addEventListener("mousemove",()=>{i.classList.remove("hfp-hidden"),F()}),U.addEventListener("mouseleave",()=>{m&&i.classList.add("hfp-hidden")}),{updateTime(o,l){let _=l>0?o/l*100:0;d.style.width=`${_}%`,c.textContent=`${x(o)} / ${x(l)}`},updatePlaying(o){m=o,n.innerHTML=o?$:k,n.setAttribute("aria-label",o?"Pause":"Play"),o?F():i.classList.remove("hfp-hidden")},updateSpeed(o){let l=r.indexOf(o);l!==-1&&(f=l),h.textContent=L(o),g(o)},show(){i.style.display=""},hide(){i.style.display="none"},destroy(){document.removeEventListener("mousemove",H),document.removeEventListener("mouseup",O),document.removeEventListener("touchmove",D),document.removeEventListener("touchend",N),document.removeEventListener("click",y),b&&clearTimeout(b)}}}function j(a){return a.hasRuntime||a.runtimeInjected?!1:!!(a.hasNestedCompositions||a.hasTimelines&&a.attempts>=5)}var R=null;function Z(){if(R)return R;if(typeof CSSStyleSheet>"u")return null;try{let a=new CSSStyleSheet;return a.replaceSync(A),R=a,a}catch{return null}}var I=30,K="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js",w="shader-capture-scale",E="shader-loading",ee="__hf_shader_capture_scale",te="__hf_shader_loading",M=["Preparing scene transitions","Sampling outgoing scene motion","Sampling incoming scene motion","Caching transition frames","Finalizing transition preview"];function V(a){if(a===null)return null;let e=Number(a);return!Number.isFinite(e)||e<=0?null:String(Math.min(1,Math.max(.25,e)))}function q(a){if(a===null||a.trim()==="")return"composition";let e=a.trim().toLowerCase();return e==="none"||e==="false"||e==="0"||e==="off"?"none":e==="player"||e==="true"||e==="1"||e==="on"?"player":"composition"}function W(a,e,t){t===null?a.delete(e):a.set(e,t)}function re(a,e,t){let r=a.indexOf("#"),i=r>=0?a.slice(0,r):a,n=r>=0?a.slice(r):"",s=i.indexOf("?"),d=s>=0?i.slice(0,s):i,c=s>=0?i.slice(s+1):"",p=new URLSearchParams(c);W(p,ee,e),W(p,te,t==="composition"?null:t);let h=p.toString();return`${d}${h?`?${h}`:""}${n}`}function ie(a,e,t){if(e===null&&t==="composition")return a;let r=[];e!==null&&r.push(`window.__HF_SHADER_CAPTURE_SCALE=${JSON.stringify(e)};`),t!=="composition"&&r.push(`window.__HF_SHADER_LOADING=${JSON.stringify(t)};`);let i=`<script data-hyperframes-player-shader-options>${r.join("")}</script>`;return/<head\b[^>]*>/i.test(a)?a.replace(/<head\b[^>]*>/i,n=>`${n}${i}`):/<html\b[^>]*>/i.test(a)?a.replace(/<html\b[^>]*>/i,n=>`${n}${i}`):`${i}${a}`}var T=class a extends HTMLElement{static get observedAttributes(){return["src","srcdoc","width","height","controls","muted","poster","playback-rate","audio-src",w,E]}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;_compositionWidth=1920;_compositionHeight=1080;_probeInterval=null;_lastUpdateMs=0;_parentMedia=[];_audioOwner="runtime";_mediaObserver;_playbackErrorPosted=!1;constructor(){super(),this.shadow=this.attachShadow({mode:"open"});let e=Z();if(e)this.shadow.adoptedStyleSheets=[e];else{let r=document.createElement("style");r.textContent=A,this.shadow.appendChild(r)}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",r=>{this._isControlsClick(r)||(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.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,r){switch(e){case"src":r&&(this._ready=!1,this.iframe.src=this._prepareSrc(r));break;case"srcdoc":this._ready=!1,r!==null?this.iframe.srcdoc=this._prepareSrcdoc(r):this.iframe.removeAttribute("srcdoc");break;case"width":this._compositionWidth=parseInt(r||"1920",10),this._updateScale();break;case"height":this._compositionHeight=parseInt(r||"1080",10),this._updateScale();break;case"controls":r!==null?this._setupControls():(this.controlsApi?.destroy(),this.controlsApi=null);break;case"poster":this._setupPoster();break;case"playback-rate":{let i=parseFloat(r||"1");for(let n of this._parentMedia)n.el.playbackRate=i;this._sendControl("set-playback-rate",{playbackRate:i}),this.controlsApi?.updateSpeed(i),this.dispatchEvent(new Event("ratechange"));break}case"muted":for(let i of this._parentMedia)i.el.muted=r!==null;this._sendControl("set-muted",{muted:r!==null});break;case"audio-src":r&&this._setupParentAudioFromUrl(r);break;case w:case E:this._reloadShaderOptions();break}}get iframeElement(){return this.iframe}play(){this._hidePoster(),this._duration>0&&this._currentTime>=this._duration&&this.seek(0),this._sendControl("play"),this._audioOwner==="parent"&&this._playParentMedia(),this._paused=!1,this.controlsApi?.updatePlaying(!0),this.dispatchEvent(new Event("play"))}pause(){this._sendControl("pause"),this._audioOwner==="parent"&&this._pauseParentMedia(),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.dispatchEvent(new Event("pause"))}seek(e){if(!this._trySyncSeek(e)){let t=Math.round(e*I);this._sendControl("seek",{frame:t})}if(this._currentTime=e,this._audioOwner==="parent")for(let t of this._parentMedia){let r=e-t.start;r>=0&&r<t.duration&&(t.el.currentTime=r)}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(V(this.getAttribute(w))??"1")}set shaderCaptureScale(e){this.setAttribute(w,String(e))}get shaderLoading(){return q(this.getAttribute(E))}set shaderLoading(e){e==="composition"?this.removeAttribute(E):this.setAttribute(E,e)}get muted(){return this.hasAttribute("muted")}set muted(e){e?this.setAttribute("muted",""):this.removeAttribute("muted")}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 V(this.getAttribute(w))}_shaderLoadingMode(){return q(this.getAttribute(E))}_prepareSrc(e){return re(e,this._shaderCaptureScaleParam(),this._shaderLoadingMode())}_prepareSrcdoc(e){return ie(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=f=>{f.preventDefault(),f.stopPropagation()};for(let f of["selectstart","dragstart","pointerdown","mousedown","click","dblclick","contextmenu","touchstart"])e.addEventListener(f,t,{capture:!0});let r=document.createElement("div");r.className="hfp-shader-loader-panel",r.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 s=document.createElement("span");s.className="hfp-shader-loader-title-text",s.textContent=M[0]||"Preparing scene transitions",n.appendChild(s);let d=document.createElement("div");d.className="hfp-shader-loader-detail",d.textContent="Rendering animated scene samples for shader transitions.";let c=document.createElement("div");c.className="hfp-shader-loader-track",c.setAttribute("aria-hidden","true");let p=document.createElement("div");p.className="hfp-shader-loader-fill",c.appendChild(p);let h=document.createElement("div");h.className="hfp-shader-loader-progress";let u=f=>{let g=document.createElement("div");g.className="hfp-shader-loader-row";let y=document.createElement("span");y.className="hfp-shader-loader-label",y.textContent=f;let v=document.createElement("span");return v.className="hfp-shader-loader-value",g.appendChild(y),g.appendChild(v),h.appendChild(g),{row:g,label:y,value:v}},m=u("transition"),b=u("transition frame");return r.appendChild(i),r.appendChild(n),r.appendChild(d),r.appendChild(c),r.appendChild(h),e.appendChild(r),{root:e,fill:p,title:s,detail:d,transitionValue:m.value,frameLabel:b.label,frameValue:b.value,frameRow:b.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,r=typeof e.total=="number"&&Number.isFinite(e.total)?e.total:0,i=r>0?Math.min(1,Math.max(0,t/r)):0,n=Math.min(M.length-1,Math.floor(i*M.length));this.shaderLoaderTitleEl.textContent=M[n]||"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(${i})`,this.shaderLoaderTransitionValueEl.textContent=e.currentTransition!==void 0&&e.transitionTotal!==void 0?`${e.currentTransition}/${e.transitionTotal}`:r>0?`${t}/${r}`:"";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(i*100))),this._showShaderLoader()}_trySyncSeek(e){try{let r=this.iframe.contentWindow?.__player,i=r?.seek;return typeof i!="function"?!1:(i.call(r,e),!0)}catch{return!1}}_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 r=t.state&&typeof t.state=="object"?t.state:{};this._updateShaderLoader(r),this.dispatchEvent(new CustomEvent("shadertransitionstate",{detail:{compositionId:t.compositionId,state:r}}));return}if(t.type==="state"){this._currentTime=(t.frame??0)/I;let r=!this._paused,i=!t.isPlaying,n=this._duration>0&&this._currentTime>=this._duration&&(r||t.isPlaying);if(n&&this.loop){this._audioOwner==="parent"&&this._pauseParentMedia(),this._paused=i,this.seek(0),this.play();return}this._paused=i,this._audioOwner==="parent"&&(r&&this._paused?this._pauseParentMedia():!r&&!this._paused&&this._playParentMedia(),this._mirrorParentMediaTime(this._currentTime));let s=performance.now();(s-this._lastUpdateMs>100||this._paused!==r)&&(this._lastUpdateMs=s,this.controlsApi?.updateTime(this._currentTime,this._duration),this.controlsApi?.updatePlaying(!this._paused),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:this._currentTime}}))),n&&(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/I,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._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 r=this.iframe.contentWindow;if(!r)return;let i=!!(r.__hf||r.__player),n=!!(r.__timelines&&Object.keys(r.__timelines).length>0),s=!!this.iframe.contentDocument?.querySelector("[data-composition-src]");if(j({hasRuntime:i,hasTimelines:n,hasNestedCompositions:s,runtimeInjected:this._runtimeInjected,attempts:e})){this._injectRuntime();return}if(this._runtimeInjected&&!i)return;let c=(()=>{if(r.__player&&typeof r.__player.getDuration=="function")return r.__player;if(r.__timelines){let p=Object.keys(r.__timelines);if(p.length>0){let h=this.iframe.contentDocument?.querySelector("[data-composition-id]")?.getAttribute("data-composition-id"),u=h&&h in r.__timelines?h:p[p.length-1],m=r.__timelines[u];return{getDuration:()=>m.duration()}}}return null})();if(c&&c.getDuration()>0){clearInterval(this._probeInterval),this._duration=c.getDuration(),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 u=parseInt(h.getAttribute("data-width")||"0",10),m=parseInt(h.getAttribute("data-height")||"0",10);u>0&&m>0&&(this._compositionWidth=u,this._compositionHeight=m,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=K,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:i=>this.seek(i*this._duration),onSpeedChange:i=>{this.playbackRate=i}},t=this.getAttribute("speed-presets"),r=t?t.split(",").map(Number).filter(i=>!isNaN(i)&&i>0):void 0;this.controlsApi=z(this.shadow,e,{speedPresets:r})}_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 r=t?.force===!0,i=a.MIRROR_REQUIRED_CONSECUTIVE_DRIFT_SAMPLES,n=a.MIRROR_DRIFT_THRESHOLD_SECONDS;for(let s of this._parentMedia){let d=e-s.start;if(d<0||d>=s.duration){s.driftSamples=0;continue}Math.abs(s.el.currentTime-d)>n?(s.driftSamples+=1,(r||s.driftSamples>=i)&&(s.el.currentTime=d,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,r,i){if(this._parentMedia.some(d=>d.el.src===e))return null;let n=t==="video"?document.createElement("video"):new Audio;n.preload="auto",n.src=e,n.load(),n.muted=this.muted,this.playbackRate!==1&&(n.playbackRate=this.playbackRate);let s={el:n,start:r,duration:i,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 r of t)this._adoptIframeMedia(r);this._observeDynamicMedia(e)}catch{}}_adoptIframeMedia(e){let t=e.getAttribute("src")||e.querySelector("source")?.getAttribute("src");if(!t)return;let r=new URL(t,e.ownerDocument.baseURI).href,i=parseFloat(e.getAttribute("data-start")||"0"),n=parseFloat(e.getAttribute("data-duration")||"Infinity"),s=e.tagName==="VIDEO"?"video":"audio",d=this._createParentMedia(r,s,i,n);d&&this._audioOwner==="parent"&&(this._mirrorParentMediaTime(this._currentTime,{force:!0}),!this._paused&&d.el.src&&d.el.play().catch(c=>this._reportPlaybackError(c)))}_observeDynamicMedia(e){if(this._teardownMediaObserver(),typeof MutationObserver>"u"||!e.body)return;let t=new MutationObserver(i=>{for(let n of i){for(let s of n.addedNodes){if(!(s instanceof Element))continue;let d=[];s.matches?.("audio[data-start], video[data-start]")&&d.push(s);let c=s.querySelectorAll?.("audio[data-start], video[data-start]");if(c)for(let p of c)d.push(p);for(let p of d)this._adoptIframeMedia(p)}for(let s of n.removedNodes){if(!(s instanceof Element))continue;let d=[];s.matches?.("audio[data-start], video[data-start]")&&d.push(s);let c=s.querySelectorAll?.("audio[data-start], video[data-start]");if(c)for(let p of c)d.push(p);for(let p of d)this._detachIframeMedia(p)}}}),r=e.querySelectorAll("[data-composition-id]");if(r.length>0)for(let i of r)t.observe(i,{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 r=new URL(t,e.ownerDocument.baseURI).href,i=this._parentMedia.findIndex(s=>s.el.src===r);if(i===-1)return;let n=this._parentMedia[i];n.el.pause(),n.el.src="",this._parentMedia.splice(i,1)}_hidePoster(){this.posterEl?.remove(),this.posterEl=null}};customElements.get("hyperframes-player")||customElements.define("hyperframes-player",T);return J(ae);})();
|
|
353
|
+
|
|
354
|
+
.hfp-volume-wrap {
|
|
355
|
+
position: relative;
|
|
356
|
+
flex-shrink: 0;
|
|
357
|
+
display: flex;
|
|
358
|
+
align-items: center;
|
|
359
|
+
gap: 0;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.hfp-mute-btn {
|
|
363
|
+
background: none;
|
|
364
|
+
border: none;
|
|
365
|
+
color: var(--hfp-color, #fff);
|
|
366
|
+
cursor: pointer;
|
|
367
|
+
padding: 4px;
|
|
368
|
+
display: flex;
|
|
369
|
+
align-items: center;
|
|
370
|
+
justify-content: center;
|
|
371
|
+
width: 32px;
|
|
372
|
+
height: 32px;
|
|
373
|
+
flex-shrink: 0;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.hfp-mute-btn:hover {
|
|
377
|
+
opacity: 0.8;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.hfp-mute-btn svg,
|
|
381
|
+
.hfp-mute-btn svg * {
|
|
382
|
+
pointer-events: none;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.hfp-volume-slider-wrap {
|
|
386
|
+
width: 0;
|
|
387
|
+
overflow: hidden;
|
|
388
|
+
transition: width 0.2s ease;
|
|
389
|
+
display: flex;
|
|
390
|
+
align-items: center;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.hfp-volume-wrap:hover .hfp-volume-slider-wrap {
|
|
394
|
+
width: 64px;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.hfp-volume-slider {
|
|
398
|
+
width: 56px;
|
|
399
|
+
height: var(--hfp-scrubber-height, 4px);
|
|
400
|
+
background: var(--hfp-scrubber-bg, rgba(255, 255, 255, 0.3));
|
|
401
|
+
border-radius: var(--hfp-scrubber-radius, 2px);
|
|
402
|
+
cursor: pointer;
|
|
403
|
+
position: relative;
|
|
404
|
+
margin-left: 4px;
|
|
405
|
+
margin-right: 4px;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.hfp-volume-fill {
|
|
409
|
+
position: absolute;
|
|
410
|
+
top: 0;
|
|
411
|
+
left: 0;
|
|
412
|
+
height: 100%;
|
|
413
|
+
background: var(--hfp-accent, #fff);
|
|
414
|
+
border-radius: var(--hfp-scrubber-radius, 2px);
|
|
415
|
+
pointer-events: none;
|
|
416
|
+
}
|
|
417
|
+
`,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 o=document.createElement("button");o.className="hfp-play-btn",o.type="button",o.innerHTML=U,o.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 m=document.createElement("div");m.className="hfp-speed-menu",m.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=x(a),a===1&&d.classList.add("hfp-active"),m.appendChild(d)}h.appendChild(m),h.appendChild(c);let E=document.createElement("div");E.className="hfp-volume-wrap";let f=document.createElement("button");f.className="hfp-mute-btn",f.type="button",f.innerHTML=V,f.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(f),r.appendChild(o),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,d)=>a?ae:d===0?z:d<.5?z:V;o.addEventListener("click",a=>{a.stopPropagation(),_?e.onPause():e.onPlay()}),f.addEventListener("click",a=>{a.stopPropagation(),e.onMuteToggle()});let L=!1,P=a=>{let d=p.getBoundingClientRect(),v=Math.max(0,Math.min(1,(a-d.left)/d.width));y=v,b.style.width=`${v*100}%`,p.setAttribute("aria-valuenow",String(Math.round(v*100))),S&&v>0&&e.onMuteToggle(),f.innerHTML=k(S,v),e.onVolumeChange(v)};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 d=a.touches[0];d&&P(d.clientX)},{passive:!0});let X=a=>{if(L){let d=a.touches[0];d&&P(d.clientX)}},G=()=>{L=!1};document.addEventListener("touchmove",X,{passive:!0}),document.addEventListener("touchend",G);let Y=.05;p.addEventListener("keydown",a=>{let d=y;if(a.key==="ArrowRight"||a.key==="ArrowUp")d=Math.min(1,y+Y);else if(a.key==="ArrowLeft"||a.key==="ArrowDown")d=Math.max(0,y-Y);else return;a.preventDefault(),a.stopPropagation(),y=d,b.style.width=`${d*100}%`,p.setAttribute("aria-valuenow",String(Math.round(d*100))),S&&d>0&&e.onMuteToggle(),f.innerHTML=k(S,d),e.onVolumeChange(d)});let Q=a=>{for(let d of m.querySelectorAll(".hfp-speed-option"))d.classList.toggle("hfp-active",d.dataset.speed===String(a))};c.addEventListener("click",a=>{a.stopPropagation();let d=m.classList.toggle("hfp-open");c.setAttribute("aria-expanded",String(d))}),m.addEventListener("click",a=>{a.stopPropagation();let d=a.target.closest(".hfp-speed-option");if(!d)return;let v=parseFloat(d.dataset.speed);C=i.indexOf(v),c.textContent=x(v),Q(v),m.classList.remove("hfp-open"),c.setAttribute("aria-expanded","false"),e.onSpeedChange(v)});let J=()=>{m.classList.remove("hfp-open"),c.setAttribute("aria-expanded","false")};document.addEventListener("click",J);let R=a=>{let d=s.getBoundingClientRect(),v=Math.max(0,Math.min(1,(a-d.left)/d.width));e.onSeek(v)},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 d=a.touches[0];d&&R(d.clientX)},{passive:!0});let ee=a=>{if(w){let d=a.touches[0];d&&R(d.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,d){let v=d>0?a/d*100:0;l.style.width=`${v}%`,u.textContent=`${D(a)} / ${D(d)}`},updatePlaying(a){_=a,o.innerHTML=a?ne:U,o.setAttribute("aria-label",a?"Pause":"Play"),a?ie():r.classList.remove("hfp-hidden")},updateSpeed(a){let d=i.indexOf(a);d!==-1&&(C=d),c.textContent=x(a),Q(a)},updateMuted(a){S=a,f.innerHTML=k(a,y),f.setAttribute("aria-label",a?"Unmute":"Mute")},updateVolume(a){y=a,b.style.width=`${a*100}%`,p.setAttribute("aria-valuenow",String(Math.round(a*100))),f.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 be(){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,ge="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js",A="shader-capture-scale",T="shader-loading",_e="__hf_shader_capture_scale",ye="__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 Ee(n,e,t){let i=n.indexOf("#"),r=i>=0?n.slice(0,i):n,o=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,_e,e),he(h,ye,t==="composition"?null:t);let c=h.toString();return`${l}${c?`?${c}`:""}${o}`}function I(n){return typeof n=="object"&&n!==null}function Se(n){return I(n)&&typeof n.getDuration=="function"}function Le(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 we(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,o=>`${o}${r}`):/<html\b[^>]*>/i.test(n)?n.replace(/<html\b[^>]*>/i,o=>`${o}${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=be();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 o of this._parentMedia)o.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 o of this._parentMedia)o.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 Ee(e,this._shaderCaptureScaleParam(),this._shaderLoadingMode())}_prepareSrcdoc(e){return we(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 o=document.createElement("div");o.className="hfp-shader-loader-title";let s=document.createElement("span");s.className="hfp-shader-loader-title-text",s.textContent=H[0]||"Preparing scene transitions",o.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 m=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=m("transition"),f=m("transition frame");return i.appendChild(r),i.appendChild(o),i.appendChild(l),i.appendChild(u),i.appendChild(c),e.appendChild(i),{root:e,fill:h,title:s,detail:l,transitionValue:E.value,frameLabel:f.label,frameValue:f.value,frameRow:f.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,o=Math.min(H.length-1,Math.floor(r*H.length));this.shaderLoaderTitleEl.textContent=H[o]||"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,o=performance.now();if((o-this._lastUpdateMs>100||r)&&(this._lastUpdateMs=o,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"),o=r&&r in t?r:i[i.length-1],s=t[o];return Le(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(Se(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"){this._currentTime=(t.frame??0)/W;let i=!this._paused,r=!t.isPlaying,o=this._duration>0&&this._currentTime>=this._duration&&(i||t.isPlaying);if(o&&this.loop){this._audioOwner==="parent"&&this._pauseParentMedia(),this._paused=r,this.seek(0),this.play();return}this._paused=r,this._audioOwner==="parent"&&(i&&this._paused?this._pauseParentMedia():!i&&!this._paused&&this._playParentMedia(),this._mirrorParentMediaTime(this._currentTime));let s=performance.now();(s-this._lastUpdateMs>100||this._paused!==i)&&(this._lastUpdateMs=s,this.controlsApi?.updateTime(this._currentTime,this._duration),this.controlsApi?.updatePlaying(!this._paused),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:this._currentTime}}))),o&&(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),o=!!(i.__timelines&&Object.keys(i.__timelines).length>0),s=!!this.iframe.contentDocument?.querySelector("[data-composition-src]");if(oe({hasRuntime:r,hasTimelines:o,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),m=parseInt(h.getAttribute("data-height")||"0",10);c>0&&m>0&&(this._compositionWidth=c,this._compositionHeight=m,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=ge,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,o=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)>o?(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 o=t==="video"?document.createElement("video"):new Audio;o.preload="auto",o.src=e,o.load(),o.muted=this.muted,o.volume=this._volume,this.playbackRate!==1&&(o.playbackRate=this.playbackRate);let s={el:o,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"),o=parseFloat(e.getAttribute("data-duration")||"Infinity"),s=e.tagName==="VIDEO"?"video":"audio",l=this._createParentMedia(i,s,r,o);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 o of r){for(let s of o.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 o.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 o=this._parentMedia[r];o.el.pause(),o.el.src="",this._parentMedia.splice(r,1)}_hidePoster(){this.posterEl?.remove(),this.posterEl=null}};customElements.get("hyperframes-player")||customElements.define("hyperframes-player",O);return ve(Te);})();
|
|
354
418
|
//# sourceMappingURL=hyperframes-player.global.js.map
|