@hyperframes/player 0.6.85 → 0.6.86
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 +10 -0
- package/dist/hyperframes-player.d.ts +10 -0
- package/dist/hyperframes-player.global.js +2 -2
- package/dist/hyperframes-player.global.js.map +1 -1
- package/dist/hyperframes-player.js +1 -1
- package/dist/hyperframes-player.js.map +1 -1
- package/package.json +1 -1
|
@@ -124,6 +124,16 @@ declare class HyperframesPlayer extends HTMLElement {
|
|
|
124
124
|
get loop(): boolean;
|
|
125
125
|
set loop(l: boolean);
|
|
126
126
|
private _sendControl;
|
|
127
|
+
/**
|
|
128
|
+
* Replay current bridge state to the iframe runtime. Triggered when the
|
|
129
|
+
* runtime announces `{type: "ready"}` — repairs the race where the parent
|
|
130
|
+
* posts control messages before the iframe's bridge listener is installed
|
|
131
|
+
* (warm-cache reloads, the Claude desktop Electron client, anywhere the
|
|
132
|
+
* iframe finishes loading after we've already called `set-muted` etc).
|
|
133
|
+
* Re-sending current state is idempotent — even at default values it just
|
|
134
|
+
* confirms what the runtime would have done anyway.
|
|
135
|
+
*/
|
|
136
|
+
private _replayBridgeState;
|
|
127
137
|
private _reloadShaderOptions;
|
|
128
138
|
private _trySyncSeek;
|
|
129
139
|
private _withDirectTimeline;
|
|
@@ -124,6 +124,16 @@ declare class HyperframesPlayer extends HTMLElement {
|
|
|
124
124
|
get loop(): boolean;
|
|
125
125
|
set loop(l: boolean);
|
|
126
126
|
private _sendControl;
|
|
127
|
+
/**
|
|
128
|
+
* Replay current bridge state to the iframe runtime. Triggered when the
|
|
129
|
+
* runtime announces `{type: "ready"}` — repairs the race where the parent
|
|
130
|
+
* posts control messages before the iframe's bridge listener is installed
|
|
131
|
+
* (warm-cache reloads, the Claude desktop Electron client, anywhere the
|
|
132
|
+
* iframe finishes loading after we've already called `set-muted` etc).
|
|
133
|
+
* Re-sending current state is idempotent — even at default values it just
|
|
134
|
+
* confirms what the runtime would have done anyway.
|
|
135
|
+
*/
|
|
136
|
+
private _replayBridgeState;
|
|
127
137
|
private _reloadShaderOptions;
|
|
128
138
|
private _trySyncSeek;
|
|
129
139
|
private _withDirectTimeline;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var HyperframesPlayer=(()=>{var
|
|
1
|
+
"use strict";var HyperframesPlayer=(()=>{var B=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var Oe=Object.prototype.hasOwnProperty;var He=(r,e)=>{for(var t in e)B(r,t,{get:e[t],enumerable:!0})},Ne=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Ie(e))!Oe.call(r,n)&&n!==t&&B(r,n,{get:()=>e[n],enumerable:!(i=De(e,n))||i.enumerable});return r};var Fe=r=>Ne(B({},"__esModule",{value:!0}),r);var Ze={};He(Ze,{HyperframesPlayer:()=>W,SPEED_PRESETS:()=>Y,formatSpeed:()=>L,formatTime:()=>N});function ce(r){return r.hasRuntime||r.runtimeInjected?!1:!!(r.hasNestedCompositions||r.hasTimelines&&r.attempts>=5)}function M(r){return typeof r=="object"&&r!==null}function he(r){return M(r)&&typeof r.getDuration=="function"}function me(r){return M(r)&&typeof r.duration=="function"&&typeof r.time=="function"&&typeof r.seek=="function"&&typeof r.play=="function"&&typeof r.pause=="function"}var Ue="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js";function fe(r){if(r===null)return null;let e=Number.parseInt(r,10);return Number.isFinite(e)&&e>0?e:null}function Ve(r){let e=r?.querySelector("[data-composition-id][data-width][data-height]")??r?.querySelector("[data-width][data-height]");if(!e)return null;let t=fe(e.getAttribute("data-width")),i=fe(e.getAttribute("data-height"));return t!==null&&i!==null?{width:t,height:i}:null}var 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(ce({hasRuntime:i,hasTimelines:n,hasNestedCompositions:o,runtimeInjected:this._runtimeInjected,attempts:e})){this._injectRuntime();return}if(this._runtimeInjected&&!i)return;let s=this._resolvePlaybackDurationAdapter(t);if(s&&s.getDuration()>0){this.stop();let d=Ve(this._iframe.contentDocument);this._callbacks.onReady({duration:s.getDuration(),adapter:s,compositionSize:d});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||M(Reflect.get(e,"__player"))}_injectRuntime(){this._runtimeInjected=!0;try{let e=this._iframe.contentDocument;if(!e)return;let t=e.createElement("script");t.src=Ue,(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(!M(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],s=t[o];return me(s)?s:null}_resolvePlaybackDurationAdapter(e){let t=Reflect.get(e,"__player");if(he(t))return{kind:"runtime",getDuration:()=>t.getDuration()};let i=this._resolveDirectTimelineAdapterFromWindow(e);return i?{kind:"direct-timeline",timeline:i,getDuration:()=>i.duration()}:null}};var be=`
|
|
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
|
-
`,B='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><polygon points="4,2 16,9 4,16"/></svg>',ve='<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>',ge='<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 L(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 _e(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=B,o.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 u=document.createElement("span");u.className="hfp-time",u.textContent="0:00 / 0:00";let p=document.createElement("div");p.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 b=document.createElement("div");b.className="hfp-speed-menu",b.setAttribute("role","menu");for(let a of i){let l=document.createElement("button");l.className="hfp-speed-option",l.type="button",l.setAttribute("role","menuitem"),l.dataset.speed=String(a),l.textContent=L(a),a===1&&l.classList.add("hfp-active"),b.appendChild(l)}p.appendChild(b),p.appendChild(c);let v=document.createElement("div");v.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 _=document.createElement("div");_.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 g=document.createElement("div");g.className="hfp-volume-fill",g.style.width="100%",h.appendChild(g),_.appendChild(h),v.appendChild(_),v.appendChild(m),t.audioLocked&&(v.style.display="none"),n.appendChild(o),n.appendChild(s),n.appendChild(u),n.appendChild(v),n.appendChild(p),r.appendChild(n);let P=!1,S=!1,y=1,x=null,R=i.indexOf(1);R===-1&&(R=0);let D=(a,l)=>a?ge:l===0?X:l<.5?X:G;o.addEventListener("click",a=>{a.stopPropagation(),P?e.onPause():e.onPlay()}),m.addEventListener("click",a=>{a.stopPropagation(),e.onMuteToggle()});let T=!1,I=a=>{let l=h.getBoundingClientRect(),f=Math.max(0,Math.min(1,(a-l.left)/l.width));y=f,g.style.width=`${f*100}%`,h.setAttribute("aria-valuenow",String(Math.round(f*100))),S&&f>0&&e.onMuteToggle(),m.innerHTML=D(S,f),e.onVolumeChange(f)};h.addEventListener("mousedown",a=>{a.stopPropagation(),T=!0,I(a.clientX)});let Z=a=>{T&&I(a.clientX)},ee=()=>{T=!1};document.addEventListener("mousemove",Z),document.addEventListener("mouseup",ee),h.addEventListener("touchstart",a=>{T=!0;let l=a.touches[0];l&&I(l.clientX)},{passive:!0});let te=a=>{if(T){let l=a.touches[0];l&&I(l.clientX)}},ie=()=>{T=!1};document.addEventListener("touchmove",te,{passive:!0}),document.addEventListener("touchend",ie);let re=.05;h.addEventListener("keydown",a=>{let l=y;if(a.key==="ArrowRight"||a.key==="ArrowUp")l=Math.min(1,y+re);else if(a.key==="ArrowLeft"||a.key==="ArrowDown")l=Math.max(0,y-re);else return;a.preventDefault(),a.stopPropagation(),y=l,g.style.width=`${l*100}%`,h.setAttribute("aria-valuenow",String(Math.round(l*100))),S&&l>0&&e.onMuteToggle(),m.innerHTML=D(S,l),e.onVolumeChange(l)});let ne=a=>{for(let l of b.querySelectorAll(".hfp-speed-option"))l.classList.toggle("hfp-active",l.dataset.speed===String(a))};c.addEventListener("click",a=>{a.stopPropagation();let l=b.classList.toggle("hfp-open");c.setAttribute("aria-expanded",String(l))}),b.addEventListener("click",a=>{a.stopPropagation();let l=a.target.closest(".hfp-speed-option");if(!l)return;let f=parseFloat(l.dataset.speed);R=i.indexOf(f),c.textContent=L(f),ne(f),b.classList.remove("hfp-open"),c.setAttribute("aria-expanded","false"),e.onSpeedChange(f)});let oe=()=>{b.classList.remove("hfp-open"),c.setAttribute("aria-expanded","false")};document.addEventListener("click",oe);let O=a=>{let l=s.getBoundingClientRect(),f=Math.max(0,Math.min(1,(a-l.left)/l.width));e.onSeek(f)},w=!1;s.addEventListener("mousedown",a=>{a.stopPropagation(),w=!0,O(a.clientX)});let ae=a=>{w&&O(a.clientX)},se=()=>{w=!1};document.addEventListener("mousemove",ae),document.addEventListener("mouseup",se),s.addEventListener("touchstart",a=>{w=!0;let l=a.touches[0];l&&O(l.clientX)},{passive:!0});let le=a=>{if(w){let l=a.touches[0];l&&O(l.clientX)}},de=()=>{w=!1};document.addEventListener("touchmove",le,{passive:!0}),document.addEventListener("touchend",de);let ue=()=>{x&&clearTimeout(x),x=setTimeout(()=>{P&&n.classList.add("hfp-hidden")},3e3)},pe=r instanceof ShadowRoot?r.host:r;return pe.addEventListener("mousemove",()=>{n.classList.remove("hfp-hidden"),ue()}),pe.addEventListener("mouseleave",()=>{P&&n.classList.add("hfp-hidden")}),{updateTime(a,l){let f=l>0?Math.min(a,l):a,Re=l>0?f/l*100:0;d.style.width=`${Re}%`,u.textContent=`${N(f)} / ${N(l)}`},updatePlaying(a){P=a,o.innerHTML=a?ve:B,o.setAttribute("aria-label",a?"Pause":"Play"),a?ue():n.classList.remove("hfp-hidden")},updateSpeed(a){let l=i.indexOf(a);l!==-1&&(R=l),c.textContent=L(a),ne(a)},updateMuted(a){S=a,m.innerHTML=D(a,y),m.setAttribute("aria-label",a?"Unmute":"Mute")},updateVolume(a){y=a,g.style.width=`${a*100}%`,h.setAttribute("aria-valuenow",String(Math.round(a*100))),m.innerHTML=D(S,a)},setVolumeControlsHidden(a){v.style.display=a?"none":""},show(){n.style.display=""},hide(){n.style.display="none"},destroy(){document.removeEventListener("mousemove",ae),document.removeEventListener("mouseup",se),document.removeEventListener("touchmove",le),document.removeEventListener("touchend",de),document.removeEventListener("mousemove",Z),document.removeEventListener("mouseup",ee),document.removeEventListener("touchmove",te),document.removeEventListener("touchend",ie),document.removeEventListener("click",oe),x&&clearTimeout(x)}}}function ye(r,e,t,i,n,o=!1){let s=i?i.split(",").map(Number).filter(p=>!isNaN(p)&&p>0):void 0,d={...s?{speedPresets:s}:{},audioLocked:o},u=_e(r,n,d);return u.updateMuted(e),u.updateVolume(t),u}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 Ee(r){return r.composedPath().some(e=>e instanceof HTMLElement&&e.classList.contains("hfp-controls"))}var F=null;function Se(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 Te(){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 we(r,e,t,i){let n=r.offsetWidth,o=r.offsetHeight;if(n===0||o===0)return;let s=Math.min(n/t,o/i);e.style.width=`${t}px`,e.style.height=`${i}px`,e.style.transform=`translate(-50%, -50%) scale(${s})`}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 s;try{s=e.time()}catch{this._raf=null;return}let d=i();d>0&&(s=Math.min(s,d));let u=d>0&&s>=d,p=performance.now();if((p-this._lastUpdateMs>100||u)&&(this._lastUpdateMs=p,this._callbacks.onTimeUpdate(s,d)),u){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 Ae(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)ze(i)||t.push(i);return je(r),t}function je(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 ze(r){let e=r.parentElement;for(;e;){if(e.hasAttribute("data-composition-id"))return!0;e=e.parentElement}return!1}var $e=.05,We=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)>$e?(n.driftSamples+=1,(i||n.driftSamples>=We)&&(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(u=>u.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 s=this._getPlaybackRate();s!==1&&(o.playbackRate=s);let d={el:o,start:i,duration:n,driftSamples:0};return this._entries.push(d),d}_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"),s=e.tagName==="VIDEO"?"video":"audio",d=this._createEntry(i,s,n,o);d&&this._audioOwner==="parent"&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),!this._isPaused()&&d.el.src&&d.el.play().catch(u=>this._reportPlaybackError(u)))}_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(s=>s.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 s of o){if(s.type==="attributes"&&s.attributeName==="preload"){let d=s.target;d instanceof HTMLMediaElement&&d.matches("audio[data-start], video[data-start]")&&d.preload==="auto"&&this._adoptIframeMedia(d);continue}for(let d of s.addedNodes){if(!(d instanceof Element))continue;let u=[];d.matches?.("audio[data-start], video[data-start]")&&u.push(d);let p=d.querySelectorAll?.("audio[data-start], video[data-start]");if(p)for(let c of p)u.push(c);for(let c of u)this._adoptIframeMedia(c)}for(let d of s.removedNodes){if(!(d instanceof Element))continue;let u=[];d.matches?.("audio[data-start], video[data-start]")&&u.push(d);let p=d.querySelectorAll?.("audio[data-start], video[data-start]");if(p)for(let c of p)u.push(c);for(let c of u)this._detachIframeMedia(c)}}}),i={childList:!0,subtree:!0,attributes:!0,attributeFilter:["preload"]},n=Ae(e);for(let o of n)t.observe(o,i);this._mediaObserver=t}};function Ce(r,e,t,i){let n=(r.frame??0)/e,o=t.duration>0?Math.min(n,t.duration):n,s=!t.paused,d=!r.isPlaying,u=t.duration>0&&o>=t.duration&&(s||r.isPlaying);if(u&&i.getLoop())return i.media.audioOwner==="parent"&&i.media.pauseAll(),i.seek(0),i.play(),{...t,currentTime:o,paused:!1};let p={...t,currentTime:o,paused:d};i.media.audioOwner==="parent"&&(s&&d?i.media.pauseAll():!s&&!d&&i.media.playAll(),i.media.mirrorTime(o));let c=performance.now(),b=d!==t.paused;return(c-t.lastUpdateMs>100||b)&&(p.lastUpdateMs=c,i.updateControlsTime(o,t.duration),i.updateControlsPlaying(!d),i.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:o}}))),u&&(i.media.audioOwner==="parent"&&i.media.pauseAll(),p.paused=!0,i.updateControlsPlaying(!1),i.dispatchEvent(new Event("ended"))),p}var ke=30;function xe(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(Ce({frame:i.frame??0,isPlaying:!!i.isPlaying},ke,t.getPlaybackState(),t));return}if(i.type==="media-autoplay-blocked"){let n=null;try{n=t.getIframeDoc()}catch{}t.media.promoteToParentProxy(n,(o,s)=>t.media.mirrorTime(o,s)),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/ke;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",A="shader-loading",qe="__hf_shader_capture_scale",Be="__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 Ge(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 Xe(r,e,t){let i=r.indexOf("#"),n=i>=0?r.slice(0,i):r,o=i>=0?r.slice(i):"",s=n.indexOf("?"),d=s>=0?n.slice(0,s):n,u=s>=0?n.slice(s+1):"",p=new URLSearchParams(u);Me(p,qe,e),Me(p,Be,t==="composition"?null:t);let c=p.toString();return`${d}${c?`?${c}`:""}${o}`}function Ye(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 k(r){return Ge(r.getAttribute(A))}function Le(r){return Number(J(r.getAttribute(E))??"1")}function j(r,e){return Xe(e,J(r.getAttribute(E)),k(r))}function z(r,e){return Ye(e,J(r.getAttribute(E)),k(r))}function Pe(){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 s=document.createElement("div");s.className="hfp-shader-loader-detail",s.textContent="Rendering animated scene samples for shader transitions.";let d=document.createElement("div");d.className="hfp-shader-loader-track",d.setAttribute("aria-hidden","true");let u=document.createElement("div");u.className="hfp-shader-loader-fill",d.appendChild(u);let p=document.createElement("div");p.className="hfp-shader-loader-progress";let c=m=>{let _=document.createElement("div");_.className="hfp-shader-loader-row";let h=document.createElement("span");h.className="hfp-shader-loader-label",h.textContent=m;let g=document.createElement("span");return g.className="hfp-shader-loader-value",_.appendChild(h),_.appendChild(g),p.appendChild(_),{row:_,label:h,value:g}},b=c("transition"),v=c("transition frame");return t.appendChild(i),t.appendChild(n),t.appendChild(s),t.appendChild(d),t.appendChild(p),r.appendChild(t),{root:r,fill:u,title:o,detail:s,transitionValue:b.value,frameLabel:v.label,frameValue:v.value,frameRow:v.row}}var Qe=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,s=Math.min(C.length-1,Math.floor(o*C.length));this._el.title.textContent=C[s]||"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 d=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=d,this._el.frameRow.style.visibility=d?"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},Qe)}};var Je=.1,Ke=5;function K(r){return!Number.isFinite(r)||r<=0?1:Math.max(Je,Math.min(Ke,r))}var W=class extends HTMLElement{static get observedAttributes(){return["src","srcdoc","width","height","controls","muted","audio-locked","volume","poster","playback-rate","audio-src",E,A]}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;_parentTickRaf=null;_media;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),Se(this.shadow,be),{container:this.container,iframe:this.iframe}=Te(),this.shadow.appendChild(this.container);let e=Pe();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=>{Ee(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"))),!this.hasAttribute("audio-locked")&&this._isLockedHostEnvironment()&&this._applyAudioLock(!0)}disconnectedCallback(){this.resizeObserver.disconnect(),window.removeEventListener("message",this._onMessage),this.iframe.removeEventListener("load",this._onIframeLoad),this.probe.stop(),this._directTimelineClock.stop(),this._stopParentTickClock(),this._directTimelineAdapter=null,this.shaderLoader.destroy(),this._media.destroy(),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=K(parseFloat(i||"1"));this._media.updatePlaybackRate(n),this._sendControl("set-playback-rate",{playbackRate:n}),this._directTimelineAdapter?.timeScale?.(n),this.controlsApi?.updateSpeed(n),this.dispatchEvent(new Event("ratechange"));break}case"muted":this._handleMutedChange(i);break;case"audio-locked":this._applyAudioLock(i!==null);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 A: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),this._paused=!1;let e=this._tryDirectTimelinePlay();e||(this._sendControl("play"),this._ready&&!this._directTimelineAdapter&&this._startParentTickClock()),this._media.audioOwner==="parent"&&this._media.playAll(),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._stopParentTickClock(),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._stopParentTickClock(),this._currentTime=e,this._media.audioOwner==="parent"&&(this._media.pauseAll(),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 K(parseFloat(this.getAttribute("playback-rate")||"1"))}set playbackRate(e){this.setAttribute("playback-rate",String(K(e)))}get shaderCaptureScale(){return Le(this)}set shaderCaptureScale(e){this.setAttribute(E,String(e))}get shaderLoading(){return k(this)}set shaderLoading(e){e==="composition"?this.removeAttribute(A):this.setAttribute(A,e)}get muted(){return this.hasAttribute("muted")}set muted(e){e?this.setAttribute("muted",""):this.removeAttribute("muted")}get audioLocked(){return this.hasAttribute("audio-locked")}set audioLocked(e){e?this.setAttribute("audio-locked",""):this.removeAttribute("audio-locked")}_isLockedHostEnvironment(){if(typeof navigator>"u")return!1;let e=navigator.userAgent||"";return/\bClaude\/\d/.test(e)&&/\bElectron\b/.test(e)}_isAudioLocked(){return this.hasAttribute("audio-locked")||this._isLockedHostEnvironment()}_handleMutedChange(e){if(e===null&&this._isAudioLocked()){this.setAttribute("muted","");return}this._media.updateMuted(e!==null),this._sendControl("set-muted",{muted:e!==null}),this.controlsApi?.updateMuted(e!==null),this.dispatchEvent(new Event("volumechange"))}_applyAudioLock(e){e&&(this.muted=!0),this.controlsApi?.setVolumeControlsHidden(e)}get volume(){return this._volume}set volume(e){this.setAttribute("volume",String(Math.max(0,Math.min(1,e))))}get loop(){return this.hasAttribute("loop")}set loop(e){e?this.setAttribute("loop",""):this.removeAttribute("loop")}_sendControl(e,t={}){try{this.iframe.contentWindow?.postMessage({source:"hf-parent",type:"control",action:e,...t},"*")}catch{}}_reloadShaderOptions(){if(k(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()})}_startParentTickClock(){this._stopParentTickClock();let e=()=>{if(this._paused){this._parentTickRaf=null;return}this._sendControl("tick"),this._parentTickRaf=requestAnimationFrame(e)};this._parentTickRaf=requestAnimationFrame(e)}_stopParentTickClock(){this._parentTickRaf!==null&&(cancelAnimationFrame(this._parentTickRaf),this._parentTickRaf=null)}_onMessage(e){xe(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:()=>k(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(){we(this,this.iframe,this._compositionWidth,this._compositionHeight)}_onIframeLoad(){this._directTimelineAdapter=null,this._directTimelineClock.stop(),this._stopParentTickClock(),this.shaderLoader.reset(),this._media.resetForIframeLoad(),this.probe.start()}_setupControls(){this.controlsApi||(this.controlsApi=ye(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}},this._isAudioLocked()))}get _audioOwner(){return this._media.audioOwner}get _parentMedia(){return this._media.entries}_mirrorParentMediaTime(e,t){this._media.mirrorTime(e,t)}_promoteToParentProxy(){let e=null;try{e=this.iframe.contentDocument}catch{}this._media.promoteToParentProxy(e,(t,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 Fe(Ze);})();
|
|
418
|
+
`,q='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><polygon points="4,2 16,9 4,16"/></svg>',ve='<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>',ge='<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 L(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 _e(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 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 u=document.createElement("span");u.className="hfp-time",u.textContent="0:00 / 0:00";let p=document.createElement("div");p.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 b=document.createElement("div");b.className="hfp-speed-menu",b.setAttribute("role","menu");for(let a of i){let l=document.createElement("button");l.className="hfp-speed-option",l.type="button",l.setAttribute("role","menuitem"),l.dataset.speed=String(a),l.textContent=L(a),a===1&&l.classList.add("hfp-active"),b.appendChild(l)}p.appendChild(b),p.appendChild(c);let v=document.createElement("div");v.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 _=document.createElement("div");_.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 g=document.createElement("div");g.className="hfp-volume-fill",g.style.width="100%",h.appendChild(g),_.appendChild(h),v.appendChild(_),v.appendChild(m),t.audioLocked&&(v.style.display="none"),n.appendChild(o),n.appendChild(s),n.appendChild(u),n.appendChild(v),n.appendChild(p),r.appendChild(n);let P=!1,S=!1,y=1,x=null,R=i.indexOf(1);R===-1&&(R=0);let D=(a,l)=>a?ge:l===0?X:l<.5?X:G;o.addEventListener("click",a=>{a.stopPropagation(),P?e.onPause():e.onPlay()}),m.addEventListener("click",a=>{a.stopPropagation(),e.onMuteToggle()});let T=!1,I=a=>{let l=h.getBoundingClientRect(),f=Math.max(0,Math.min(1,(a-l.left)/l.width));y=f,g.style.width=`${f*100}%`,h.setAttribute("aria-valuenow",String(Math.round(f*100))),S&&f>0&&e.onMuteToggle(),m.innerHTML=D(S,f),e.onVolumeChange(f)};h.addEventListener("mousedown",a=>{a.stopPropagation(),T=!0,I(a.clientX)});let Z=a=>{T&&I(a.clientX)},ee=()=>{T=!1};document.addEventListener("mousemove",Z),document.addEventListener("mouseup",ee),h.addEventListener("touchstart",a=>{T=!0;let l=a.touches[0];l&&I(l.clientX)},{passive:!0});let te=a=>{if(T){let l=a.touches[0];l&&I(l.clientX)}},ie=()=>{T=!1};document.addEventListener("touchmove",te,{passive:!0}),document.addEventListener("touchend",ie);let re=.05;h.addEventListener("keydown",a=>{let l=y;if(a.key==="ArrowRight"||a.key==="ArrowUp")l=Math.min(1,y+re);else if(a.key==="ArrowLeft"||a.key==="ArrowDown")l=Math.max(0,y-re);else return;a.preventDefault(),a.stopPropagation(),y=l,g.style.width=`${l*100}%`,h.setAttribute("aria-valuenow",String(Math.round(l*100))),S&&l>0&&e.onMuteToggle(),m.innerHTML=D(S,l),e.onVolumeChange(l)});let ne=a=>{for(let l of b.querySelectorAll(".hfp-speed-option"))l.classList.toggle("hfp-active",l.dataset.speed===String(a))};c.addEventListener("click",a=>{a.stopPropagation();let l=b.classList.toggle("hfp-open");c.setAttribute("aria-expanded",String(l))}),b.addEventListener("click",a=>{a.stopPropagation();let l=a.target.closest(".hfp-speed-option");if(!l)return;let f=parseFloat(l.dataset.speed);R=i.indexOf(f),c.textContent=L(f),ne(f),b.classList.remove("hfp-open"),c.setAttribute("aria-expanded","false"),e.onSpeedChange(f)});let oe=()=>{b.classList.remove("hfp-open"),c.setAttribute("aria-expanded","false")};document.addEventListener("click",oe);let O=a=>{let l=s.getBoundingClientRect(),f=Math.max(0,Math.min(1,(a-l.left)/l.width));e.onSeek(f)},w=!1;s.addEventListener("mousedown",a=>{a.stopPropagation(),w=!0,O(a.clientX)});let ae=a=>{w&&O(a.clientX)},se=()=>{w=!1};document.addEventListener("mousemove",ae),document.addEventListener("mouseup",se),s.addEventListener("touchstart",a=>{w=!0;let l=a.touches[0];l&&O(l.clientX)},{passive:!0});let le=a=>{if(w){let l=a.touches[0];l&&O(l.clientX)}},de=()=>{w=!1};document.addEventListener("touchmove",le,{passive:!0}),document.addEventListener("touchend",de);let ue=()=>{x&&clearTimeout(x),x=setTimeout(()=>{P&&n.classList.add("hfp-hidden")},3e3)},pe=r instanceof ShadowRoot?r.host:r;return pe.addEventListener("mousemove",()=>{n.classList.remove("hfp-hidden"),ue()}),pe.addEventListener("mouseleave",()=>{P&&n.classList.add("hfp-hidden")}),{updateTime(a,l){let f=l>0?Math.min(a,l):a,Re=l>0?f/l*100:0;d.style.width=`${Re}%`,u.textContent=`${N(f)} / ${N(l)}`},updatePlaying(a){P=a,o.innerHTML=a?ve:q,o.setAttribute("aria-label",a?"Pause":"Play"),a?ue():n.classList.remove("hfp-hidden")},updateSpeed(a){let l=i.indexOf(a);l!==-1&&(R=l),c.textContent=L(a),ne(a)},updateMuted(a){S=a,m.innerHTML=D(a,y),m.setAttribute("aria-label",a?"Unmute":"Mute")},updateVolume(a){y=a,g.style.width=`${a*100}%`,h.setAttribute("aria-valuenow",String(Math.round(a*100))),m.innerHTML=D(S,a)},setVolumeControlsHidden(a){v.style.display=a?"none":""},show(){n.style.display=""},hide(){n.style.display="none"},destroy(){document.removeEventListener("mousemove",ae),document.removeEventListener("mouseup",se),document.removeEventListener("touchmove",le),document.removeEventListener("touchend",de),document.removeEventListener("mousemove",Z),document.removeEventListener("mouseup",ee),document.removeEventListener("touchmove",te),document.removeEventListener("touchend",ie),document.removeEventListener("click",oe),x&&clearTimeout(x)}}}function ye(r,e,t,i,n,o=!1){let s=i?i.split(",").map(Number).filter(p=>!isNaN(p)&&p>0):void 0,d={...s?{speedPresets:s}:{},audioLocked:o},u=_e(r,n,d);return u.updateMuted(e),u.updateVolume(t),u}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 Ee(r){return r.composedPath().some(e=>e instanceof HTMLElement&&e.classList.contains("hfp-controls"))}var F=null;function Se(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 Te(){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 we(r,e,t,i){let n=r.offsetWidth,o=r.offsetHeight;if(n===0||o===0)return;let s=Math.min(n/t,o/i);e.style.width=`${t}px`,e.style.height=`${i}px`,e.style.transform=`translate(-50%, -50%) scale(${s})`}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 s;try{s=e.time()}catch{this._raf=null;return}let d=i();d>0&&(s=Math.min(s,d));let u=d>0&&s>=d,p=performance.now();if((p-this._lastUpdateMs>100||u)&&(this._lastUpdateMs=p,this._callbacks.onTimeUpdate(s,d)),u){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 Ae(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)ze(i)||t.push(i);return je(r),t}function je(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 ze(r){let e=r.parentElement;for(;e;){if(e.hasAttribute("data-composition-id"))return!0;e=e.parentElement}return!1}var $e=.05,We=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)>$e?(n.driftSamples+=1,(i||n.driftSamples>=We)&&(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(u=>u.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 s=this._getPlaybackRate();s!==1&&(o.playbackRate=s);let d={el:o,start:i,duration:n,driftSamples:0};return this._entries.push(d),d}_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"),s=e.tagName==="VIDEO"?"video":"audio",d=this._createEntry(i,s,n,o);d&&this._audioOwner==="parent"&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),!this._isPaused()&&d.el.src&&d.el.play().catch(u=>this._reportPlaybackError(u)))}_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(s=>s.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 s of o){if(s.type==="attributes"&&s.attributeName==="preload"){let d=s.target;d instanceof HTMLMediaElement&&d.matches("audio[data-start], video[data-start]")&&d.preload==="auto"&&this._adoptIframeMedia(d);continue}for(let d of s.addedNodes){if(!(d instanceof Element))continue;let u=[];d.matches?.("audio[data-start], video[data-start]")&&u.push(d);let p=d.querySelectorAll?.("audio[data-start], video[data-start]");if(p)for(let c of p)u.push(c);for(let c of u)this._adoptIframeMedia(c)}for(let d of s.removedNodes){if(!(d instanceof Element))continue;let u=[];d.matches?.("audio[data-start], video[data-start]")&&u.push(d);let p=d.querySelectorAll?.("audio[data-start], video[data-start]");if(p)for(let c of p)u.push(c);for(let c of u)this._detachIframeMedia(c)}}}),i={childList:!0,subtree:!0,attributes:!0,attributeFilter:["preload"]},n=Ae(e);for(let o of n)t.observe(o,i);this._mediaObserver=t}};function Ce(r,e,t,i){let n=(r.frame??0)/e,o=t.duration>0?Math.min(n,t.duration):n,s=!t.paused,d=!r.isPlaying,u=t.duration>0&&o>=t.duration&&(s||r.isPlaying);if(u&&i.getLoop())return i.media.audioOwner==="parent"&&i.media.pauseAll(),i.seek(0),i.play(),{...t,currentTime:o,paused:!1};let p={...t,currentTime:o,paused:d};i.media.audioOwner==="parent"&&(s&&d?i.media.pauseAll():!s&&!d&&i.media.playAll(),i.media.mirrorTime(o));let c=performance.now(),b=d!==t.paused;return(c-t.lastUpdateMs>100||b)&&(p.lastUpdateMs=c,i.updateControlsTime(o,t.duration),i.updateControlsPlaying(!d),i.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:o}}))),u&&(i.media.audioOwner==="parent"&&i.media.pauseAll(),p.paused=!0,i.updateControlsPlaying(!1),i.dispatchEvent(new Event("ended"))),p}var ke=30;function xe(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==="ready"){t.onRuntimeReady();return}if(i.type==="state"){t.setPlaybackState(Ce({frame:i.frame??0,isPlaying:!!i.isPlaying},ke,t.getPlaybackState(),t));return}if(i.type==="media-autoplay-blocked"){let n=null;try{n=t.getIframeDoc()}catch{}t.media.promoteToParentProxy(n,(o,s)=>t.media.mirrorTime(o,s)),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/ke;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",A="shader-loading",Be="__hf_shader_capture_scale",qe="__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 Ge(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 Xe(r,e,t){let i=r.indexOf("#"),n=i>=0?r.slice(0,i):r,o=i>=0?r.slice(i):"",s=n.indexOf("?"),d=s>=0?n.slice(0,s):n,u=s>=0?n.slice(s+1):"",p=new URLSearchParams(u);Me(p,Be,e),Me(p,qe,t==="composition"?null:t);let c=p.toString();return`${d}${c?`?${c}`:""}${o}`}function Ye(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 k(r){return Ge(r.getAttribute(A))}function Le(r){return Number(J(r.getAttribute(E))??"1")}function j(r,e){return Xe(e,J(r.getAttribute(E)),k(r))}function z(r,e){return Ye(e,J(r.getAttribute(E)),k(r))}function Pe(){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 s=document.createElement("div");s.className="hfp-shader-loader-detail",s.textContent="Rendering animated scene samples for shader transitions.";let d=document.createElement("div");d.className="hfp-shader-loader-track",d.setAttribute("aria-hidden","true");let u=document.createElement("div");u.className="hfp-shader-loader-fill",d.appendChild(u);let p=document.createElement("div");p.className="hfp-shader-loader-progress";let c=m=>{let _=document.createElement("div");_.className="hfp-shader-loader-row";let h=document.createElement("span");h.className="hfp-shader-loader-label",h.textContent=m;let g=document.createElement("span");return g.className="hfp-shader-loader-value",_.appendChild(h),_.appendChild(g),p.appendChild(_),{row:_,label:h,value:g}},b=c("transition"),v=c("transition frame");return t.appendChild(i),t.appendChild(n),t.appendChild(s),t.appendChild(d),t.appendChild(p),r.appendChild(t),{root:r,fill:u,title:o,detail:s,transitionValue:b.value,frameLabel:v.label,frameValue:v.value,frameRow:v.row}}var Qe=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,s=Math.min(C.length-1,Math.floor(o*C.length));this._el.title.textContent=C[s]||"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 d=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=d,this._el.frameRow.style.visibility=d?"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},Qe)}};var Je=.1,Ke=5;function K(r){return!Number.isFinite(r)||r<=0?1:Math.max(Je,Math.min(Ke,r))}var W=class extends HTMLElement{static get observedAttributes(){return["src","srcdoc","width","height","controls","muted","audio-locked","volume","poster","playback-rate","audio-src",E,A]}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;_parentTickRaf=null;_media;constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),Se(this.shadow,be),{container:this.container,iframe:this.iframe}=Te(),this.shadow.appendChild(this.container);let e=Pe();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=>{Ee(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"))),!this.hasAttribute("audio-locked")&&this._isLockedHostEnvironment()&&this._applyAudioLock(!0)}disconnectedCallback(){this.resizeObserver.disconnect(),window.removeEventListener("message",this._onMessage),this.iframe.removeEventListener("load",this._onIframeLoad),this.probe.stop(),this._directTimelineClock.stop(),this._stopParentTickClock(),this._directTimelineAdapter=null,this.shaderLoader.destroy(),this._media.destroy(),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=K(parseFloat(i||"1"));this._media.updatePlaybackRate(n),this._sendControl("set-playback-rate",{playbackRate:n}),this._directTimelineAdapter?.timeScale?.(n),this.controlsApi?.updateSpeed(n),this.dispatchEvent(new Event("ratechange"));break}case"muted":this._handleMutedChange(i);break;case"audio-locked":this._applyAudioLock(i!==null);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 A: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),this._paused=!1;let e=this._tryDirectTimelinePlay();e||(this._sendControl("play"),this._ready&&!this._directTimelineAdapter&&this._startParentTickClock()),this._media.audioOwner==="parent"&&this._media.playAll(),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._stopParentTickClock(),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._stopParentTickClock(),this._currentTime=e,this._media.audioOwner==="parent"&&(this._media.pauseAll(),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 K(parseFloat(this.getAttribute("playback-rate")||"1"))}set playbackRate(e){this.setAttribute("playback-rate",String(K(e)))}get shaderCaptureScale(){return Le(this)}set shaderCaptureScale(e){this.setAttribute(E,String(e))}get shaderLoading(){return k(this)}set shaderLoading(e){e==="composition"?this.removeAttribute(A):this.setAttribute(A,e)}get muted(){return this.hasAttribute("muted")}set muted(e){e?this.setAttribute("muted",""):this.removeAttribute("muted")}get audioLocked(){return this.hasAttribute("audio-locked")}set audioLocked(e){e?this.setAttribute("audio-locked",""):this.removeAttribute("audio-locked")}_isLockedHostEnvironment(){if(typeof navigator>"u")return!1;let e=navigator.userAgent||"";return/\bClaude\/\d/.test(e)&&/\bElectron\b/.test(e)}_isAudioLocked(){return this.hasAttribute("audio-locked")||this._isLockedHostEnvironment()}_handleMutedChange(e){if(e===null&&this._isAudioLocked()){this.setAttribute("muted","");return}this._media.updateMuted(e!==null),this._sendControl("set-muted",{muted:e!==null}),this.controlsApi?.updateMuted(e!==null),this.dispatchEvent(new Event("volumechange"))}_applyAudioLock(e){e&&(this.muted=!0),this.controlsApi?.setVolumeControlsHidden(e)}get volume(){return this._volume}set volume(e){this.setAttribute("volume",String(Math.max(0,Math.min(1,e))))}get loop(){return this.hasAttribute("loop")}set loop(e){e?this.setAttribute("loop",""):this.removeAttribute("loop")}_sendControl(e,t={}){try{this.iframe.contentWindow?.postMessage({source:"hf-parent",type:"control",action:e,...t},"*")}catch{}}_replayBridgeState(){this._sendControl("set-muted",{muted:this.muted}),this._sendControl("set-volume",{volume:this._volume}),this._sendControl("set-playback-rate",{playbackRate:this.playbackRate})}_reloadShaderOptions(){if(k(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()})}_startParentTickClock(){this._stopParentTickClock();let e=()=>{if(this._paused){this._parentTickRaf=null;return}this._sendControl("tick"),this._parentTickRaf=requestAnimationFrame(e)};this._parentTickRaf=requestAnimationFrame(e)}_stopParentTickClock(){this._parentTickRaf!==null&&(cancelAnimationFrame(this._parentTickRaf),this._parentTickRaf=null)}_onMessage(e){xe(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:()=>k(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,onRuntimeReady:()=>this._replayBridgeState(),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(){we(this,this.iframe,this._compositionWidth,this._compositionHeight)}_onIframeLoad(){this._directTimelineAdapter=null,this._directTimelineClock.stop(),this._stopParentTickClock(),this.shaderLoader.reset(),this._media.resetForIframeLoad(),this.probe.start()}_setupControls(){this.controlsApi||(this.controlsApi=ye(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}},this._isAudioLocked()))}get _audioOwner(){return this._media.audioOwner}get _parentMedia(){return this._media.entries}_mirrorParentMediaTime(e,t){this._media.mirrorTime(e,t)}_promoteToParentProxy(){let e=null;try{e=this.iframe.contentDocument}catch{}this._media.promoteToParentProxy(e,(t,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 Fe(Ze);})();
|
|
419
419
|
//# sourceMappingURL=hyperframes-player.global.js.map
|