hyperframes 0.7.4 → 0.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +808 -130
- package/dist/hyperframe-runtime.js +24 -24
- package/dist/hyperframe.manifest.json +1 -1
- package/dist/hyperframe.runtime.iife.js +24 -24
- package/dist/hyperframes-player.global.js +426 -0
- package/dist/hyperframes-slideshow.global.js +149 -0
- package/dist/skills/hyperframes/SKILL.md +8 -1
- package/dist/studio/assets/{hyperframes-player-Ztwg53-a.js → hyperframes-player-BGW5hpsb.js} +2 -2
- package/dist/studio/assets/{index-CUhSVvnV.js → index-B_NnmU6q.js} +1 -1
- package/dist/studio/assets/{index-DvpQwnaB.js → index-DsBhGFPe.js} +1 -1
- package/dist/studio/assets/{index-DzWIinxk.css → index-wJZf6FK3.css} +1 -1
- package/dist/studio/assets/index-ysftPins.js +374 -0
- package/dist/studio/chunk-KZXYQYIU.js +876 -0
- package/dist/studio/chunk-KZXYQYIU.js.map +1 -0
- package/dist/studio/domEditingLayers-SSXQZHHQ.js +41 -0
- package/dist/studio/domEditingLayers-SSXQZHHQ.js.map +1 -0
- package/dist/studio/index.d.ts +1 -0
- package/dist/studio/index.html +2 -2
- package/dist/studio/index.js +2298 -2483
- package/dist/studio/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/studio/assets/index-Dp0h2I9v.js +0 -374
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
"use strict";var HyperframesPlayer=(()=>{var S=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var G=Object.prototype.hasOwnProperty;var j=(n,e)=>{for(var t in e)S(n,t,{get:e[t],enumerable:!0})},W=(n,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of z(e))!G.call(n,r)&&r!==t&&S(n,r,{get:()=>e[r],enumerable:!(i=K(e,r))||i.enumerable});return n};var Y=n=>W(S({},"__esModule",{value:!0}),n);var Se={};j(Se,{HyperframesSlideshow:()=>b,dropInvalidSlides:()=>H});var X="application/hyperframes-slideshow+json";function V(n="i"){let e=X.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return new RegExp(`<script[^>]*type=["']${e}["'][^>]*>([\\s\\S]*?)<\\/script>`,n)}function I(n){let t=V("i").exec(n);if(!t||t[1]===void 0)return null;let i=t[1].trim();if(i.length===0)return null;let r=JSON.parse(i);if(!Q(r))throw new Error("slideshow island is not a valid SlideshowManifest");return r}function P(n){if(typeof n!="object"||n===null)return!1;let e=n;return!(typeof e.sceneId!="string"||e.fragments!==void 0&&!(Array.isArray(e.fragments)&&e.fragments.every(t=>typeof t=="number"))||e.hotspots!==void 0&&!Array.isArray(e.hotspots))}function J(n){if(typeof n!="object"||n===null)return!1;let e=n;return typeof e.id=="string"&&typeof e.label=="string"&&Array.isArray(e.slides)&&e.slides.every(P)}function Q(n){if(typeof n!="object"||n===null||Array.isArray(n))return!1;let e=n;return!(!Array.isArray(e.slides)||!e.slides.every(P)||e.slideSequences!==void 0&&(!Array.isArray(e.slideSequences)||!e.slideSequences.every(J)))}function Z(n,e){return`slide "${n}" sets ${e==="startTime"?"endTime":"startTime"} but ${e} cannot be resolved (no scene "${n}")`}function ee(n,e,t){let{startTime:i,endTime:r,sceneId:s}=n;if(i!==void 0&&r!==void 0)return{start:i,end:r};if(i===void 0&&r===void 0)return e?{start:e.start,end:e.start+e.duration}:(t.push(`slide references unresolved sceneId "${s}"`),{start:0,end:0});if(!e){let a=i===void 0?"startTime":"endTime";t.push(Z(s,a));let d=i??r??0;return{start:d,end:d}}return{start:i??e.start,end:r??e.start+e.duration}}function te(n,e,t,i,r){for(let s of e)(s<t||s>i)&&r.push(`slide "${n}" fragment ${s} is outside range [${t}, ${i}]`)}function E(n,e,t){let i=e.get(n.sceneId),{start:r,end:s}=ee(n,i,t);n.startTime!==void 0&&n.endTime!==void 0&&s<=r&&t.push(`slide "${n.sceneId}" has endTime (${s}) <= startTime (${r})`);let a=[...new Set(n.fragments??[])].sort((d,o)=>d-o);return te(n.sceneId,a,r,s,t),{...n,start:r,end:s,fragments:a,hotspots:n.hotspots??[]}}function $(n,e){let t=[],i=new Map(e.map(o=>[o.id,o])),r={};for(let o of n.slideSequences??[])Object.prototype.hasOwnProperty.call(r,o.id)&&t.push(`duplicate slideSequence id "${o.id}" \u2014 only the last definition is kept`),r[o.id]={id:o.id,label:o.label,slides:o.slides.map(l=>E(l,i,t))};let s=n.slides.map(o=>E(o,i,t)),a=[...s,...Object.values(r).flatMap(o=>o.slides)];for(let o of a)for(let l of o.hotspots){let u=r[l.target];u?u.slides.length===0&&t.push(`hotspot "${l.id}" targets empty sequence "${l.target}"`):t.push(`hotspot "${l.id}" targets unknown sequence "${l.target}"`)}let d=[...s].sort((o,l)=>o.start-l.start);for(let o=1;o<d.length;o++){let l=d[o-1],u=d[o];l!==void 0&&u!==void 0&&u.start<l.end&&t.push(`main-line slides "${l.sceneId}" and "${u.sceneId}" overlap`)}return{resolved:{slides:s,sequences:r},errors:t}}var f="main",v=class{constructor(e,t){this.player=e;this.show=t;this.enterSlide(0)}player;show;stack=[{sequenceId:f,slideIndex:0,fragmentIndex:-1}];changeCbs=new Set;dispose(){}slidesOf(e){return e===f?this.show.slides:this.show.sequences[e]?.slides??[]}get frame(){return this.stack[this.stack.length-1]}get currentSlide(){return this.slidesOf(this.frame.sequenceId)[this.frame.slideIndex]}get nextSlide(){return this.slidesOf(this.frame.sequenceId)[this.frame.slideIndex+1]??null}get position(){return{...this.frame}}get counter(){return{index:this.frame.slideIndex+1,total:this.slidesOf(this.frame.sequenceId).length}}get canPrev(){return this.frame.slideIndex>0||this.stack.length>1}get canNext(){let e=this.slidesOf(this.frame.sequenceId);return this.frame.slideIndex+1<e.length||this.stack.length>1}get breadcrumb(){return this.stack.map(e=>e.sequenceId===f?{id:f,label:"Main deck"}:{id:e.sequenceId,label:this.show.sequences[e.sequenceId]?.label??e.sequenceId})}onChange(e){return this.changeCbs.add(e),()=>this.changeCbs.delete(e)}emitChange(){for(let e of this.changeCbs)e()}stopSlideMedia(){this.player.stopMedia?.()}enterSlide(e){e!==this.frame.slideIndex&&this.stopSlideMedia(),this.frame.slideIndex=e;let t=this.currentSlide;if(!t){this.frame.fragmentIndex=-1;return}t.fragments.length>0?(this.frame.fragmentIndex=0,this.playTo(t.fragments[0]??t.end)):(this.frame.fragmentIndex=-1,this.playTo(this.restFrame(t))),this.emitChange()}restFrame(e){return e.start+(e.end-e.start)*.5}resumeSlide(e,t){this.frame.slideIndex=e,this.frame.fragmentIndex=t;let i=this.currentSlide;if(!i)return;let r=t>=0&&t<i.fragments.length?i.fragments[t]??i.start:i.fragments.length>0?i.start:this.restFrame(i);this.playTo(r),this.emitChange()}playTo(e){this.player.seek(e)}next(){let e=this.currentSlide;if(!e)return;if(this.frame.fragmentIndex+1<e.fragments.length){this.frame.fragmentIndex+=1;let r=e.fragments[this.frame.fragmentIndex]??e.end;this.playTo(r),this.emitChange();return}let i=this.slidesOf(this.frame.sequenceId);this.frame.slideIndex+1<i.length?this.enterSlide(this.frame.slideIndex+1):this.stack.length>1&&this.back()}prev(){if(this.frame.slideIndex>0){this.enterSlide(this.frame.slideIndex-1);return}this.stack.length>1&&this.back()}goToSlide(e){let t=this.slidesOf(this.frame.sequenceId);e>=0&&e<t.length&&this.enterSlide(e)}enterBranch(e){let t=this.show.sequences[e];!t||t.slides.length===0||(this.stopSlideMedia(),this.stack.push({sequenceId:e,slideIndex:0,fragmentIndex:-1}),this.enterSlide(0))}back(){this.stack.length<=1||(this.stopSlideMedia(),this.stack.pop(),this.resumeSlide(this.frame.slideIndex,this.frame.fragmentIndex))}backToMain(){this.stack.length<=1||(this.stopSlideMedia(),this.stack=[this.stack[0]],this.resumeSlide(this.frame.slideIndex,this.frame.fragmentIndex))}syncTo(e,t,i){this.isValidSyncTarget(e,t)&&(this.isCrossSlide(e,t)&&this.stopSlideMedia(),this.rerootStackTo(e)&&this.resumeSlide(t,i))}isValidSyncTarget(e,t){if(!this.stack[0])return!1;let i=e===f?this.show.slides:this.show.sequences[e]?.slides??null;return i?t>=0&&t<i.length:!1}isCrossSlide(e,t){return this.frame.sequenceId!==e||this.frame.slideIndex!==t}rerootStackTo(e){if(this.frame.sequenceId===e)return!0;let t=this.stack[0];if(!t)return!1;if(this.stack=[t],e===f)return!0;let i=this.show.sequences[e];return!i||i.slides.length===0?!1:(this.stack.push({sequenceId:e,slideIndex:0,fragmentIndex:-1}),!0)}};var C="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",ne=new Set(["play","pause","seeking","seeked","ratechange","volumechange","ended","timeupdate"]),ie=["currentTime","volume","playbackRate"],re=["paused","ended","muted"];function R(n){return!(typeof n!="object"||n===null)}function se(n){if(!R(n))return!1;let e=n;return e.type==="goto"&&typeof e.sequenceId=="string"&&typeof e.slideIndex=="number"&&typeof e.fragmentIndex=="number"}function oe(n){return ne.has(n)}function ae(n){return n==="presenter"||n==="audience"}function le(n){return ie.every(e=>typeof n[e]=="number")}function de(n){return re.every(e=>typeof n[e]=="boolean")}function ue(n){if(!R(n))return!1;let e=n;return e.type==="media"&&ae(e.sender)&&typeof e.key=="string"&&oe(e.action)&&le(e)&&de(e)}function ce(){return`hf-slideshow:${typeof location<"u"?location.pathname:""}`}var m=class{constructor(e,t,i=()=>{}){this.mode=e;this.onGoto=t;this.onMedia=i;try{this.channel=new BroadcastChannel(ce())}catch{return}this.channel.onmessage=r=>{if(se(r.data)){e==="audience"&&this.onGoto(r.data);return}ue(r.data)&&r.data.sender!==e&&this.onMedia(r.data)}}mode;onGoto;onMedia;channel=null;postPosition(e){if(this.mode!=="presenter"||!this.channel)return;let t={type:"goto",...e};this.channel.postMessage(t)}postMedia(e){this.channel&&this.channel.postMessage({type:"media",sender:this.mode,...e})}destroy(){this.channel&&(this.channel.onmessage=null,this.channel.close(),this.channel=null)}};function A(n){let e=s=>s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"),t=s=>e(s).replace(/"/g,"""),i=e(n.notes),r=n.hotspots.length?`<div style="display:flex;flex-direction:column;gap:6px;">
|
|
2
|
+
<div style="font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.55;">Branches</div>
|
|
3
|
+
${n.hotspots.map(s=>`<button data-hotspot-id="${t(s.id)}" data-hotspot-target="${t(s.target)}" type="button" title="${t(s.label)}" style="text-align:left;background:rgba(244,183,64,0.14);color:#f4b740;border:1px solid rgba(244,183,64,0.4);border-radius:8px;padding:8px 12px;font-size:15px;cursor:pointer;pointer-events:auto;font-family:inherit;">↳ ${e(s.label)}</button>`).join("")}
|
|
4
|
+
</div>`:"";return`
|
|
5
|
+
<div data-hf-presenter style="position:absolute;left:0;right:0;bottom:0;height:32%;display:flex;background:#11151f;color:#fff;border-top:2px solid rgba(255,255,255,0.12);box-sizing:border-box;font-family:sans-serif;pointer-events:auto;">
|
|
6
|
+
<textarea data-hf-presenter-notes data-hf-presenter-notes-key="${t(n.notesStorageKey??"")}" aria-label="Speaker notes" placeholder="No notes for this slide" spellcheck="true" style="flex:1;min-width:0;padding:24px 36px;overflow:auto;font:inherit;font-size:21px;line-height:1.55;color:#fff;background:transparent;border:0;outline:none;resize:none;white-space:pre-wrap;pointer-events:auto;">${i}</textarea>
|
|
7
|
+
<div style="width:380px;flex-shrink:0;border-left:1px solid rgba(255,255,255,0.12);padding:24px 28px;display:flex;flex-direction:column;gap:10px;">
|
|
8
|
+
<div style="font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.55;">Up next</div>
|
|
9
|
+
<div data-hf-presenter-next style="font-size:17px;opacity:.9;line-height:1.4;">${e(n.nextText)}</div>
|
|
10
|
+
${r}
|
|
11
|
+
<div style="display:flex;gap:34px;margin-top:auto;">
|
|
12
|
+
<div><div style="font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.5;margin-bottom:3px;">Slide</div><div data-hf-presenter-counter style="font-family:${C};font-size:23px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0;">${e(n.counterText)}</div></div>
|
|
13
|
+
<div><div style="font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.5;margin-bottom:3px;">Elapsed</div><div data-hf-presenter-elapsed style="font-family:${C};font-size:23px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0;">${e(n.elapsedText)}</div></div>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</div>`.trim()}function w(n){let e=Math.floor(n/60),t=Math.floor(n%60);return`${String(e).padStart(2,"0")}:${String(t).padStart(2,"0")}`}function he(n){return typeof n.seek=="function"&&typeof n.play=="function"&&typeof n.pause=="function"}var pe="hf-slideshow:presenter-notes:v1:",L=!1;function fe(){if(L)return;L=!0;let n=document.createElement("style");n.textContent=`
|
|
17
|
+
@keyframes hf-hotspot-pulse {
|
|
18
|
+
0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.35), 0 4px 16px rgba(0,0,0,0.35); }
|
|
19
|
+
50% { box-shadow: 0 0 0 8px rgba(255,255,255,0), 0 4px 20px rgba(0,0,0,0.45); }
|
|
20
|
+
}
|
|
21
|
+
@keyframes hf-nav-spin {
|
|
22
|
+
to { transform: rotate(360deg); }
|
|
23
|
+
}
|
|
24
|
+
@media (prefers-reduced-motion: reduce) {
|
|
25
|
+
.hf-hotspot-pill,
|
|
26
|
+
.hf-nav-spinner { animation: none !important; }
|
|
27
|
+
}
|
|
28
|
+
/* Nav-button hover (replaces inline onmouseover/onmouseout \u2014 CSP-safe).
|
|
29
|
+
!important beats the inline base color set on each button. */
|
|
30
|
+
[data-hf-nav-cluster] button:hover {
|
|
31
|
+
background: rgba(255,255,255,0.12) !important;
|
|
32
|
+
color: #fff !important;
|
|
33
|
+
}
|
|
34
|
+
[data-hf-nav-cluster] button[data-hf-tooltip] {
|
|
35
|
+
position: relative;
|
|
36
|
+
}
|
|
37
|
+
[data-hf-nav-cluster] button[data-hf-tooltip]::before,
|
|
38
|
+
[data-hf-nav-cluster] button[data-hf-tooltip]::after {
|
|
39
|
+
position: absolute;
|
|
40
|
+
left: 50%;
|
|
41
|
+
opacity: 0;
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
transform: translateX(-50%) translateY(3px);
|
|
44
|
+
transition: opacity 0.12s ease, transform 0.12s ease;
|
|
45
|
+
z-index: 20;
|
|
46
|
+
}
|
|
47
|
+
[data-hf-nav-cluster] button[data-hf-tooltip]::before {
|
|
48
|
+
content: "";
|
|
49
|
+
bottom: calc(100% + 4px);
|
|
50
|
+
border: 5px solid transparent;
|
|
51
|
+
border-top-color: rgba(12,12,14,0.95);
|
|
52
|
+
}
|
|
53
|
+
[data-hf-nav-cluster] button[data-hf-tooltip]::after {
|
|
54
|
+
content: attr(data-hf-tooltip);
|
|
55
|
+
bottom: calc(100% + 14px);
|
|
56
|
+
padding: 6px 8px;
|
|
57
|
+
border-radius: 6px;
|
|
58
|
+
background: rgba(12,12,14,0.95);
|
|
59
|
+
color: #fff;
|
|
60
|
+
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
|
|
61
|
+
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
62
|
+
font-size: 12px;
|
|
63
|
+
font-weight: 600;
|
|
64
|
+
letter-spacing: 0;
|
|
65
|
+
line-height: 1;
|
|
66
|
+
white-space: nowrap;
|
|
67
|
+
}
|
|
68
|
+
[data-hf-nav-cluster] button[data-hf-tooltip]:hover::before,
|
|
69
|
+
[data-hf-nav-cluster] button[data-hf-tooltip]:hover::after,
|
|
70
|
+
[data-hf-nav-cluster] button[data-hf-tooltip]:focus-visible::before,
|
|
71
|
+
[data-hf-nav-cluster] button[data-hf-tooltip]:focus-visible::after {
|
|
72
|
+
opacity: 1;
|
|
73
|
+
transform: translateX(-50%) translateY(0);
|
|
74
|
+
}
|
|
75
|
+
/* When muted, the speaker button stays dimmed on hover so the mute-state
|
|
76
|
+
affordance isn't erased (higher specificity than the rule above). */
|
|
77
|
+
[data-hf-muted] [data-hf-mute]:hover {
|
|
78
|
+
color: rgba(255,255,255,0.6) !important;
|
|
79
|
+
}
|
|
80
|
+
`,document.head.appendChild(n)}var q='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>',N='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3"/></svg>',me='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/><path d="M10 8.5v4l4-2-4-2z"/></svg>',ge="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",b=class extends HTMLElement{controller=null;offChange=null;chrome=null;touchStartX=0;touchStartY=0;channel=null;presenterStartMs=null;presenterInterval=null;presenterPositionTimers=[];disconnected=!1;initTimer=null;initInFlight=!1;initGeneration=0;_muted=!1;mediaWireInterval=null;applyingRemoteMedia=!1;lastMediaTimeBroadcastMs=0;audienceMutedPlaybackKeys=new Set;blockedAudienceMedia=new Map;audienceMediaUnlockButton=null;get muted(){return this._muted}resolveMode(){let e=this.getAttribute("mode");if(e)return e;try{return new URLSearchParams(location.search).get("mode")}catch{return null}}static get observedAttributes(){return["sound","mode"]}attributeChangedCallback(){this.controller&&this.render()}connectedCallback(){this.disconnected=!1,this.initInFlight=!1,this.initGeneration+=1,this.tabIndex=0,window.addEventListener("keydown",this.onKey),this.addEventListener("touchstart",this.onTouchStart,{passive:!0}),this.addEventListener("touchend",this.onTouchEnd),window.addEventListener("message",this.onMessage),document.addEventListener("fullscreenchange",this.onFsChange),this.initChannel(),this.initTimer=setTimeout(()=>{this.initTimer=null,this.isConnected&&!this.disconnected&&this.init()},0)}disconnectedCallback(){this.disconnected=!0,this.initGeneration+=1,this.initTimer!==null&&(clearTimeout(this.initTimer),this.initTimer=null),window.removeEventListener("keydown",this.onKey),this.removeEventListener("touchstart",this.onTouchStart),this.removeEventListener("touchend",this.onTouchEnd),window.removeEventListener("message",this.onMessage),document.removeEventListener("fullscreenchange",this.onFsChange),this.offChange?.(),this.offChange=null,this.controller?.dispose?.(),this.controller=null,this.chrome=null,this.channel?.destroy(),this.channel=null,this.mediaWireInterval!==null&&(clearInterval(this.mediaWireInterval),this.mediaWireInterval=null),this.audienceMediaUnlockButton?.remove(),this.audienceMediaUnlockButton=null,this.audienceMutedPlaybackKeys.clear(),this.blockedAudienceMedia.clear(),this.presenterInterval!==null&&(clearInterval(this.presenterInterval),this.presenterInterval=null),this.clearPresenterPositionTimers()}__setControllerForTest(e){this.bindController(e)}present(){if(this.resolveMode()==="audience"||this.getAttribute("data-hf-presenting")==="true")return;let e=location.search?"&":"?";window.open(location.href+e+"mode=audience","_blank","noopener,noreferrer"),this.setAttribute("data-hf-presenting","true"),this.postCurrentPresenterPositionBurst(),this.presenterStartMs=Date.now(),this.presenterInterval===null&&(this.presenterInterval=setInterval(()=>this.updateElapsed(),1e3)),this.render()}updateElapsed(){if(this.presenterStartMs===null)return;let e=this.chrome?.querySelector("[data-hf-presenter-elapsed]");e&&(e.textContent=w(Math.floor((Date.now()-this.presenterStartMs)/1e3)))}initChannel(){this.resolveMode()==="audience"?this.channel=new m("audience",t=>{this.controller&&this.controller.syncTo?.(t.sequenceId,t.slideIndex,t.fragmentIndex)},this.onRemoteMedia):this.channel=new m("presenter",()=>{},this.onRemoteMedia)}async init(){if(this.initInFlight)return;this.initInFlight=!0;let e=this.initGeneration;try{let t=this.querySelector("hyperframes-player");if(!t||!(t instanceof HTMLElement))return;let i=this.innerHTML,r;try{r=I(i)}catch{return}if(!r||(this.renderInitialChrome(r),!he(t))||(await xe(t),e!==this.initGeneration))return;let s=await Me(t,2500,()=>e!==this.initGeneration);if(e!==this.initGeneration)return;let{resolved:a,errors:d}=$(r,s);d.length>0&&console.warn("[hyperframes-slideshow] manifest errors:",d);let o=H(a);o.slides.length===0&&r.slides.length>0&&console.error("[hyperframes-slideshow] no main-line slides resolved \u2014 the scene timeline may not have loaded in time, or sceneIds/timing are invalid:",d);let l={seek:u=>t.seek(u),play:()=>t.play(),pause:()=>t.pause(),stopMedia:()=>{t.stopMedia?.(),this.stopDocumentMedia()},get currentTime(){return t.currentTime},onTimeUpdate:u=>{let p=c=>{let y=c.detail;u(y.currentTime)};return t.addEventListener("timeupdate",p),()=>t.removeEventListener("timeupdate",p)}};this.bindController(new v(l,o)),s.length===0&&r.slides.length>0&&t.addEventListener("scenes",()=>{e===this.initGeneration&&this.init()},{once:!0})}finally{this.initInFlight=!1}}renderInitialChrome(e){if(this.controller||e.slides.length===0)return;let t={index:1,total:e.slides.length};if(this.resolveMode()==="audience"){this.paintChrome(this.buildNavCluster(t,"28px","fs-only"));return}this.paintChrome(this.buildNavCluster(t,"28px","full",{canPrev:!1,canNext:e.slides.length>1,loading:e.slides.length>1}))}bindController(e){this.offChange?.(),this.controller?.dispose?.(),this.controller=e,this.startMediaSync(),this.offChange=e.onChange(()=>{this.resolveMode()!=="audience"&&this.channel&&this.channel.postPosition(e.position),this.render()}),this.resolveMode()!=="audience"&&this.channel&&this.channel.postPosition(e.position),this.render()}postCurrentPresenterPosition(){this.resolveMode()==="audience"||!this.channel||!this.controller||this.channel.postPosition(this.controller.position)}postCurrentPresenterPositionBurst(){this.clearPresenterPositionTimers(),this.postCurrentPresenterPosition();for(let e of[250,750,1500,3e3,5e3]){let t=setTimeout(()=>{this.presenterPositionTimers=this.presenterPositionTimers.filter(i=>i!==t),this.postCurrentPresenterPosition()},e);this.presenterPositionTimers.push(t)}}clearPresenterPositionTimers(){for(let e of this.presenterPositionTimers)clearTimeout(e);this.presenterPositionTimers=[]}startMediaSync(){this.wireSlideshowMedia(),this.mediaWireInterval===null&&(this.mediaWireInterval=setInterval(()=>this.wireSlideshowMedia(),1e3))}mediaPlayerElements(){return Array.from(this.querySelectorAll("hyperframes-player")).filter(e=>e instanceof HTMLElement)}playerFrameDocument(e){let t=e.iframeElement;if(!(t instanceof HTMLIFrameElement))return null;try{return t.contentDocument}catch{return null}}mediaKey(e,t,i,r){let s=e.id?`player-id:${e.id}`:`player:${t}`,a=i.id?`id:${i.id}`:`${i.tagName.toLowerCase()}:${r}`;return`${s}|${a}`}mediaEntries(){let e=[];return this.mediaPlayerElements().forEach((t,i)=>{let r=this.playerFrameDocument(t);r&&Array.from(r.querySelectorAll("video,audio")).filter(be).forEach((s,a)=>{e.push({key:this.mediaKey(t,i,s,a),el:s})})}),e}wireSlideshowMedia(){let e=["play","pause","seeking","seeked","ratechange","volumechange","ended","timeupdate"];for(let{key:t,el:i}of this.mediaEntries())if(i.dataset.hfSlideshowMediaSync!=="1"){i.dataset.hfSlideshowMediaSync="1";for(let r of e)i.addEventListener(r,()=>this.publishMediaState(i,t,r))}}publishMediaState(e,t,i){if(!(this.applyingRemoteMedia||this.resolveMode()==="audience"||!this.channel)){if(i==="timeupdate"){let r=performance.now();if(r-this.lastMediaTimeBroadcastMs<450&&!e.paused)return;this.lastMediaTimeBroadcastMs=r}this.channel.postMedia({key:t,action:i,currentTime:g(e.currentTime,0),paused:e.paused,ended:e.ended,muted:e.muted,volume:g(e.volume,1),playbackRate:g(e.playbackRate,1)})}}onRemoteMedia=e=>{if(this.resolveMode()!=="audience")return;if(this.blockedAudienceMedia.has(e.key)&&e.action==="timeupdate"){this.blockedAudienceMedia.set(e.key,e),this.showAudienceMediaUnlock();return}this.wireSlideshowMedia();let t=this.mediaEntries().find(i=>i.key===e.key);if(t){this.applyingRemoteMedia=!0;try{this.applyRemoteMedia(t.el,e)}finally{setTimeout(()=>{this.applyingRemoteMedia=!1},300)}}};applyRemoteMedia(e,t){if(t.action==="pause"||t.action==="ended"){this.audienceMutedPlaybackKeys.delete(t.key),this.blockedAudienceMedia.delete(t.key),this.syncRemoteMediaState(e,t,!0),e.pause(),this.hideAudienceMediaUnlockIfClear();return}if(t.action==="play"||t.action==="timeupdate"&&t.paused===!1&&e.paused){this.playAudienceMediaMuted(e,t);return}this.syncRemoteMediaState(e,t,!0)}syncRemoteMediaState(e,t,i){e.playbackRate=g(t.playbackRate,1),e.volume=Math.max(0,Math.min(1,g(t.volume,1))),e.muted=this.audienceMutedPlaybackKeys.has(t.key)?!0:t.muted,i&&Number.isFinite(t.currentTime)&&Math.abs((e.currentTime||0)-t.currentTime)>.35&&(e.currentTime=Math.max(0,t.currentTime))}playAudienceMediaMuted(e,t){this.audienceMutedPlaybackKeys.add(t.key),this.syncRemoteMediaState(e,t,!0),e.muted=!0;try{e.play().then(()=>{this.blockedAudienceMedia.delete(t.key),this.hideAudienceMediaUnlockIfClear()}).catch(()=>{this.blockedAudienceMedia.set(t.key,t),this.showAudienceMediaUnlock()})}catch{this.blockedAudienceMedia.set(t.key,t),this.showAudienceMediaUnlock()}}retryBlockedAudienceMedia=()=>{this.wireSlideshowMedia();let e=new Map(this.mediaEntries().map(t=>[t.key,t.el]));for(let[t,i]of this.blockedAudienceMedia){let r=e.get(t);r&&this.playAudienceMediaMuted(r,i)}};showAudienceMediaUnlock(){if(this.resolveMode()!=="audience"||this.audienceMediaUnlockButton)return;let e=document.createElement("button");e.type="button",e.textContent="Play audience media muted",e.style.cssText="position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:100000;border:0;border-radius:999px;padding:12px 18px;background:#fff;color:#111827;box-shadow:0 10px 32px rgba(0,0,0,.28);font:700 14px/1 system-ui,sans-serif;cursor:pointer;pointer-events:auto;",e.addEventListener("click",this.retryBlockedAudienceMedia),this.appendChild(e),this.audienceMediaUnlockButton=e}hideAudienceMediaUnlockIfClear(){this.blockedAudienceMedia.size>0||!this.audienceMediaUnlockButton||(this.audienceMediaUnlockButton.remove(),this.audienceMediaUnlockButton=null)}onKey=e=>{if(!this.controller)return;let t=e.target;if(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement||t instanceof HTMLElement&&t.isContentEditable)return;let i=document.activeElement,r=i===this||this.contains(i),s=document.querySelectorAll("hyperframes-slideshow").length>1,a=r||!s&&(i===document.body||i===null);if(e.key==="ArrowRight"){if(!a)return;this.controller.next(),e.preventDefault()}else if(e.key==="ArrowLeft"){if(!a)return;this.controller.prev(),e.preventDefault()}else if(e.key===" "){if(!r)return;this.controller.next(),e.preventDefault()}else if(e.key==="Backspace"){if(!r)return;this.controller.prev(),e.preventDefault()}else if((e.key==="f"||e.key==="F")&&!e.metaKey&&!e.ctrlKey&&!e.altKey){if(!r)return;this.toggleFullscreen(),e.preventDefault()}else if((e.key==="p"||e.key==="P")&&!e.metaKey&&!e.ctrlKey&&!e.altKey){if(!a||!this.shouldShowPresentControl())return;this.present(),e.preventDefault()}};onMessage=e=>{if(this.resolveMode()==="audience")return;let t=e.data;!t||!this.controller||(t.type==="next"?this.controller.next():t.type==="prev"?this.controller.prev():t.type==="goto"&&typeof t.slideIndex=="number"?this.controller.goToSlide?.(t.slideIndex):t.type==="back"&&this.controller.back?.())};onTouchStart=e=>{let t=e.touches[0];t&&(this.touchStartX=t.clientX,this.touchStartY=t.clientY)};onTouchEnd=e=>{if(!this.controller)return;let t=e.changedTouches[0];if(!t)return;let i=t.clientX-this.touchStartX,r=t.clientY-this.touchStartY;Math.abs(i)<=40||Math.abs(i)<=Math.abs(r)||(i<0?this.controller.next():this.controller.prev())};render(){if(!this.controller)return;if(this.resolveMode()==="audience"){let{counter:r}=this.controller;this.paintChrome(this.buildNavCluster(r,"28px","fs-only"));return}if(this.getAttribute("data-hf-presenting")==="true"){this.renderPresenter();return}let{counter:e,currentSlide:t}=this.controller;if(!t)return;let i=t.hotspots.map(r=>{let s=r.region?`left:${r.region.x}%;top:${r.region.y}%;`:"right:5%;bottom:18%;";return`<button
|
|
81
|
+
class="hf-hotspot-pill"
|
|
82
|
+
data-hotspot-id="${h(r.id)}"
|
|
83
|
+
data-hotspot-target="${h(r.target)}"
|
|
84
|
+
type="button"
|
|
85
|
+
style="position:absolute;${s}display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--hf-slideshow-accent,rgba(255,255,255,0.92));color:#111;border:none;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:0.01em;cursor:pointer;pointer-events:auto;box-shadow:0 4px 16px rgba(0,0,0,0.35);animation:hf-hotspot-pulse 1.8s ease-in-out infinite;white-space:nowrap;"
|
|
86
|
+
aria-label="${h(r.label)}"
|
|
87
|
+
><span aria-hidden="true" style="font-size:14px;line-height:1;">\u2295</span>${h(r.label)}</button>`}).join("");this.paintChrome(i+this.buildNavCluster(e,"28px"))}paintChrome(e){fe(),this.chrome||(this.chrome=document.createElement("div"),this.chrome.setAttribute("data-hf-chrome",""),this.appendChild(this.chrome)),this.chrome.style.cssText="position:absolute;inset:0;pointer-events:none;z-index:10;",this.chrome.innerHTML=e,this.wireChromeButtons()}buildNavCluster(e,t,i="full",r={}){let s=this.controller,a=r.canPrev??s?.canPrev??!0,d=r.canNext??s?.canNext??!0,o=r.loading===!0&&d,l=this.hasAttribute("sound"),u="display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:transparent;border:none;border-radius:999px;color:rgba(255,255,255,0.85);font-size:16px;cursor:pointer;transition:background 0.15s,color 0.15s;padding:0;",y=l?`<button
|
|
88
|
+
data-hf-mute
|
|
89
|
+
type="button"
|
|
90
|
+
aria-label="${this._muted?"Unmute":"Mute"}"
|
|
91
|
+
title="${this._muted?"Unmute":"Mute"}"
|
|
92
|
+
data-hf-tooltip="${this._muted?"Unmute":"Mute"}"
|
|
93
|
+
aria-pressed="${this._muted?"true":"false"}"
|
|
94
|
+
style="${u}${this._muted?"color:rgba(255,255,255,0.45);":""}"
|
|
95
|
+
>${this._muted?'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>':'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>'}</button>`:"",F=a?`<button
|
|
96
|
+
data-hf-prev
|
|
97
|
+
type="button"
|
|
98
|
+
aria-label="Previous slide"
|
|
99
|
+
title="Previous slide"
|
|
100
|
+
data-hf-tooltip="Previous slide"
|
|
101
|
+
style="${u}" >‹</button>`:"",B=o?`<span
|
|
102
|
+
data-hf-nav-loading
|
|
103
|
+
role="status"
|
|
104
|
+
aria-label="Loading slides"
|
|
105
|
+
title="Loading slides"
|
|
106
|
+
style="${u}cursor:progress;color:rgba(255,255,255,0.72);"
|
|
107
|
+
><span class="hf-nav-spinner" aria-hidden="true" style="width:14px;height:14px;border:2px solid rgba(255,255,255,0.32);border-top-color:rgba(255,255,255,0.92);border-radius:999px;animation:hf-nav-spin 0.8s linear infinite;"></span></span>`:"",_=o?B:d?`<button
|
|
108
|
+
data-hf-next
|
|
109
|
+
type="button"
|
|
110
|
+
aria-label="Next slide"
|
|
111
|
+
title="Next slide"
|
|
112
|
+
data-hf-tooltip="Next slide"
|
|
113
|
+
style="${u}" >›</button>`:"",D=this.shouldShowPresentControl()?`<button
|
|
114
|
+
data-hf-present
|
|
115
|
+
type="button"
|
|
116
|
+
aria-label="Present"
|
|
117
|
+
title="Present"
|
|
118
|
+
data-hf-tooltip="Present"
|
|
119
|
+
style="${u}" >${me}</button>`:"",x=document.fullscreenElement===this,M=x?"Exit full screen":"Full screen",T=`<button
|
|
120
|
+
data-hf-fullscreen
|
|
121
|
+
type="button"
|
|
122
|
+
aria-label="${M}"
|
|
123
|
+
title="${M}"
|
|
124
|
+
data-hf-tooltip="${M}"
|
|
125
|
+
aria-pressed="${x?"true":"false"}"
|
|
126
|
+
style="${u}" >${x?N:q}</button>`;if(i==="fs-only")return`
|
|
127
|
+
<div
|
|
128
|
+
data-hf-nav-cluster
|
|
129
|
+
style="position:absolute;bottom:${t};right:32px;display:inline-flex;align-items:center;background:rgba(20,20,22,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.12);border-radius:999px;box-shadow:0 4px 24px rgba(0,0,0,0.45);padding:4px;pointer-events:auto;"
|
|
130
|
+
>${T}</div>`;let U=a?"4px":"10px",O=d?"4px":"10px";return`
|
|
131
|
+
<div
|
|
132
|
+
data-hf-nav-cluster
|
|
133
|
+
style="position:absolute;bottom:${t};right:32px;display:inline-flex;align-items:center;gap:2px;background:rgba(20,20,22,0.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.12);border-radius:999px;box-shadow:0 4px 24px rgba(0,0,0,0.45);padding:4px;pointer-events:auto;"
|
|
134
|
+
>
|
|
135
|
+
${y}
|
|
136
|
+
${l?'<span aria-hidden="true" style="width:1px;height:20px;background:rgba(255,255,255,0.12);margin:0 2px;flex-shrink:0;"></span>':""}
|
|
137
|
+
${F}
|
|
138
|
+
<span
|
|
139
|
+
data-hf-counter
|
|
140
|
+
aria-label="Slide ${e.index} of ${e.total}"
|
|
141
|
+
style="min-width:46px;text-align:center;color:rgba(255,255,255,0.9);font-family:${ge};font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0;padding:0 ${O} 0 ${U};user-select:none;"
|
|
142
|
+
>${e.index} / ${e.total}</span>
|
|
143
|
+
${_}
|
|
144
|
+
<span aria-hidden="true" style="width:1px;height:20px;background:rgba(255,255,255,0.12);margin:0 2px;flex-shrink:0;"></span>
|
|
145
|
+
${D}
|
|
146
|
+
${T}
|
|
147
|
+
</div>`}wireChromeButtons(){let e=this.chrome;e&&(this.wireChromeClick(e,"[data-hf-mute]",()=>this.toggleMute()),this.wireChromeClick(e,"[data-hf-prev]",()=>this.controller?.prev()),this.wireChromeClick(e,"[data-hf-next]",()=>this.controller?.next()),this.wireChromeClick(e,"[data-hf-present]",()=>this.present()),this.wireChromeClick(e,"[data-hf-fullscreen]",()=>this.toggleFullscreen()),this.wirePresenterNotes(e),this.wireHotspots(e))}wireChromeClick(e,t,i){let r=e.querySelector(t);r&&r.addEventListener("click",i)}wirePresenterNotes(e){let t=e.querySelector("[data-hf-presenter-notes]");if(t instanceof HTMLTextAreaElement){let i=t.getAttribute("data-hf-presenter-notes-key");t.addEventListener("input",()=>this.writePresenterNotes(i,t.value))}}wireHotspots(e){for(let t of e.querySelectorAll("[data-hotspot-id]")){let i=t.getAttribute("data-hotspot-target")??"";t.addEventListener("click",()=>this.controller?.enterBranch?.(i))}}onFsChange=()=>{let e=this.chrome?.querySelector("[data-hf-fullscreen]");if(!e)return;let t=document.fullscreenElement===this;e.innerHTML=t?N:q;let i=t?"Exit full screen":"Full screen";e.setAttribute("aria-label",i),e.setAttribute("title",i),e.setAttribute("data-hf-tooltip",i),e.setAttribute("aria-pressed",t?"true":"false")};toggleFullscreen(){document.fullscreenElement===this?document.exitFullscreen().catch(()=>{}):this.requestFullscreen().catch(()=>{})}shouldShowPresentControl(){return this.resolveMode()!=="audience"&&this.getAttribute("data-hf-presenting")!=="true"}toggleMute(){this._muted=!this._muted,this._muted?this.setAttribute("data-hf-muted",""):this.removeAttribute("data-hf-muted"),this.applyGlobalMute(this._muted),this.dispatchEvent(new CustomEvent("hf-sound",{detail:{muted:this._muted},bubbles:!0,composed:!0})),this.render()}applyGlobalMute(e){for(let i of this.querySelectorAll("hyperframes-player")){if(!(i instanceof HTMLElement))continue;let r=i;"muted"in r?r.muted=e:e?r.setAttribute("muted",""):r.removeAttribute("muted")}let t=this.ownerDocument;for(let i of t.querySelectorAll("video, audio"))i instanceof HTMLMediaElement&&(i.muted=e||i.defaultMuted)}stopDocumentMedia(){let e=this.ownerDocument;for(let t of e.querySelectorAll("video, audio"))t instanceof HTMLMediaElement&&t.pause()}presenterNotesDeckKey(){let e=this.getAttribute("notes-storage-key")?.trim();if(e)return e;let t=this.querySelector("hyperframes-player")?.getAttribute("src")??"",i=t;try{let a=typeof location<"u"?location.href:"http://localhost/";i=new URL(t,a).href}catch{}let r=typeof location<"u"?`${location.origin}${location.pathname}`:"",s=this.ownerDocument.title;return`${r}|${s}|${i}`}presenterNotesStorageKey(e){let t=this.controller?.position;return t?`${pe}${JSON.stringify([this.presenterNotesDeckKey(),t.sequenceId,t.slideIndex,e.sceneId??""])}`:null}readPresenterNotes(e){if(!e||typeof window>"u")return null;try{return window.localStorage.getItem(e)}catch{return null}}writePresenterNotes(e,t){if(e&&!(typeof window>"u"))try{window.localStorage.setItem(e,t)}catch{}}renderPresenter(){if(!this.controller)return;let{counter:e,currentSlide:t,nextSlide:i}=this.controller;if(!t)return;let r=this.presenterStartMs!==null?Math.floor((Date.now()-this.presenterStartMs)/1e3):0,s=this.querySelector("hyperframes-player");s instanceof HTMLElement&&(s.style.top="0",s.style.bottom="32%",s.style.height="auto");let a=this.presenterNotesStorageKey(t),d=this.readPresenterNotes(a)??t.notes??"";this.paintChrome(A({notes:d,notesStorageKey:a,nextText:ve(i),counterText:`${e.index} / ${e.total}`,elapsedText:w(r),hotspots:t.hotspots})+this.buildNavCluster(e,"calc(32% + 18px)"))}};function ve(n){if(n===null)return"End of sequence";let e=n.notes!=null?n.notes.split(`
|
|
148
|
+
`)[0]??"":"";return e.length>0?`${h(n.sceneId)}: ${h(e)}`:h(n.sceneId)}function be(n){let e=n.ownerDocument.defaultView;return!e||typeof e.HTMLMediaElement!="function"?!1:n instanceof e.HTMLMediaElement}function g(n,e){return Number.isFinite(n)?n:e}function k(n){return"scenes"in n&&Array.isArray(n.scenes)?n.scenes:[]}var ye=5e3;function xe(n){return n.ready===!0?Promise.resolve():new Promise(e=>{let t=null,i=()=>{t!==null&&(clearTimeout(t),t=null),e()};n.addEventListener("ready",i,{once:!0}),t=setTimeout(()=>{n.removeEventListener("ready",i),e()},ye)})}function Me(n,e,t=()=>!1){let i=k(n);if(i.length>0)return Promise.resolve(i);let r=Math.ceil(e/100);return new Promise(s=>{let a=!1,d=null,o=0,l=c=>{a||(a=!0,d!==null&&clearTimeout(d),n.removeEventListener("scenes",u),s(c))},u=()=>{if(t())return l([]);let c=k(n);c.length>0&&l(c)},p=()=>{if(a)return;if(t())return l([]);let c=k(n);if(c.length>0)return l(c);if(o+=1,o>=r)return l([]);d=setTimeout(p,100)};n.addEventListener("scenes",u),d=setTimeout(p,100)})}function H(n){let e=r=>r.end>r.start,t=n.slides.filter(e),i={};for(let[r,s]of Object.entries(n.sequences))i[r]={...s,slides:s.slides.filter(e)};return{slides:t,sequences:i}}function h(n){return n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}customElements.get("hyperframes-slideshow")||customElements.define("hyperframes-slideshow",b);return Y(Se);})();
|
|
149
|
+
//# sourceMappingURL=hyperframes-slideshow.global.js.map
|
|
@@ -28,7 +28,6 @@ Atomic capabilities you load **on demand** — not full video workflows. For "ma
|
|
|
28
28
|
| You want to… | Skill |
|
|
29
29
|
| ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ |
|
|
30
30
|
| **Author / edit an HTML composition** — the `data-*` contract, clips, tracks, sub-compositions, variables | `/hyperframes-core` |
|
|
31
|
-
| **Author a slideshow / presentation / pitch deck** — discrete slides, fragments, branching, hotspots | `/slideshow` |
|
|
32
31
|
| **Animate** — atomic motion, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) | `/hyperframes-animation` |
|
|
33
32
|
| **Creative direction** — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive | `/hyperframes-creative` |
|
|
34
33
|
| **Media** — TTS voiceover, background music, transcription, background removal, captions | `/hyperframes-media` |
|
|
@@ -61,6 +60,7 @@ Routing needs to know **what the video is about** — its input and subject. If
|
|
|
61
60
|
| `/graphic-overlays` | Packaging an existing talking-head video with **designed graphic overlays** — lower-thirds, data callouts, kinetic titles, pull-quotes |
|
|
62
61
|
| `/motion-graphics` | A short, **unnarrated, design-led motion graphic** — kinetic type, a stat / chart hit, a logo sting, a lower-third overlay |
|
|
63
62
|
| `/music-to-video` | A **music track** → a **beat-synced** video — lyric video, slideshow, or kinetic promo; the music drives pacing (optional user images / videos cut onto the beat grid) |
|
|
63
|
+
| `/slideshow` | A **presentation / pitch deck / interactive deck** — discrete slides, fragments, branching, hotspots; output is a navigable **deck**, not a rendered video |
|
|
64
64
|
| `/general-video` | **Anything else** — longer or multi-scene pieces, a static loop / poster, a custom composition |
|
|
65
65
|
| `/remotion-to-hyperframes` | **Porting an existing Remotion (React) composition** to HyperFrames (migration, not creation) |
|
|
66
66
|
|
|
@@ -70,6 +70,7 @@ Routing needs to know **what the video is about** — its input and subject. If
|
|
|
70
70
|
- **A URL or script** — markets a specific product (even just naming the site) → `/product-launch-video`; a general non-product site → `/website-to-video`; a GitHub PR link → `/pr-to-video`; explains a concept with no product / site → `/faceless-explainer`. Genuinely unclear product-vs-topic, or launch-vs-general-site → ask one question.
|
|
71
71
|
- **Existing footage** — plain spoken-word subtitles → `/embedded-captions`; designed overlay cards → `/graphic-overlays`. Neither edits the footage itself (re-timing / recolor / reframe / reorder / audio is NLE editing — out of scope).
|
|
72
72
|
- **A music track is the input** (an audio file, or a video to pull audio from) with **no narration** → `/music-to-video` — the music's beats/energy drive the pacing. (Narrated pieces stay with the input-matched workflow above; `/motion-graphics` is for short unnarrated motion that isn't music-driven.)
|
|
73
|
+
- **A presentation / pitch deck / interactive deck** (discrete slides, navigation, presenter mode) → `/slideshow` — output is a navigable deck, not a rendered video. An explicit "slideshow" request proceeds directly; an adjacent trigger ("deck / slides / presentation / convert this page") makes `/slideshow` confirm it's a slideshow before authoring, and switch to the appropriate non-slideshow workflow if not.
|
|
73
74
|
- **Length is a guide, not a gate** — intent picks the workflow; go to `/general-video` only when the piece is clearly longer than ~3 min, or is a static / loop / custom format.
|
|
74
75
|
|
|
75
76
|
## If the matched workflow isn't installed
|
|
@@ -131,6 +132,12 @@ After they run it, re-read the workflow's skill and continue.
|
|
|
131
132
|
- **Output:** a **beat-synced** HyperFrames composition → MP4 where the music drives pacing. Typography and templates are the floor (a complete video needs zero assets); any supplied media is cut onto the same beat grid (beat-cut / ken-burns). The genre — lyric video, slideshow, kinetic promo — emerges from the per-frame choices; the pipeline never branches on it.
|
|
132
133
|
- **Triggers:** "make a video for this song", "beat-synced video from this track", "lyric video", "turn this music into a video", "music visualizer / kinetic promo to this beat".
|
|
133
134
|
|
|
135
|
+
### `/slideshow`
|
|
136
|
+
|
|
137
|
+
- **Input:** A **presentation / pitch deck / interactive deck** to author — a brief, an outline, or an existing page to convert to slides. Not a request for a rendered video; if the intent is ambiguous, the skill confirms "do you want this as a HyperFrames slideshow?" before authoring.
|
|
138
|
+
- **Output:** a runnable HyperFrames composition + a **JSON island** the player's `SlideshowController` reads to turn the GSAP timeline into a navigable **deck** — discrete slides, fragment reveals, branching sequences, hotspot navigation, presenter mode, and speaker notes. The deliverable is a deck, not an MP4.
|
|
139
|
+
- **Triggers:** "make a pitch deck / presentation / slide deck", "an interactive deck", "convert this page into slides", "a slideshow with presenter mode".
|
|
140
|
+
|
|
134
141
|
### `/general-video`
|
|
135
142
|
|
|
136
143
|
- **Input:** Anything not above — a creative brief, a single element to animate, an edit to a composition you're building. Input- and length-agnostic.
|
package/dist/studio/assets/{hyperframes-player-Ztwg53-a.js → hyperframes-player-BGW5hpsb.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var pe=Object.defineProperty;var me=(r,t,e)=>t in r?pe(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e;var u=(r,t,e)=>me(r,typeof t!="symbol"?t+"":t,e);function fe(r){return r.hasRuntime||r.runtimeInjected?!1:!!(r.hasNestedCompositions||r.hasTimelines&&r.attempts>=5)}function F(r){return typeof r=="object"&&r!==null}function _e(r){return F(r)&&typeof r.getDuration=="function"}function ge(r){return F(r)&&typeof r.duration=="function"&&typeof r.time=="function"&&typeof r.seek=="function"&&typeof r.play=="function"&&typeof r.pause=="function"}const ve="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js";function U(r){if(r===null)return null;const t=Number.parseInt(r,10);return Number.isFinite(t)&&t>0?t:null}function
|
|
1
|
+
var pe=Object.defineProperty;var me=(r,t,e)=>t in r?pe(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e;var u=(r,t,e)=>me(r,typeof t!="symbol"?t+"":t,e);function fe(r){return r.hasRuntime||r.runtimeInjected?!1:!!(r.hasNestedCompositions||r.hasTimelines&&r.attempts>=5)}function F(r){return typeof r=="object"&&r!==null}function _e(r){return F(r)&&typeof r.getDuration=="function"}function ge(r){return F(r)&&typeof r.duration=="function"&&typeof r.time=="function"&&typeof r.seek=="function"&&typeof r.play=="function"&&typeof r.pause=="function"}const ve="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js";function U(r){if(r===null)return null;const t=Number.parseInt(r,10);return Number.isFinite(t)&&t>0?t:null}function ye(r){const t=(r==null?void 0:r.querySelector("[data-composition-id][data-width][data-height]"))??(r==null?void 0:r.querySelector("[data-width][data-height]"));if(!t)return null;const e=U(t.getAttribute("data-width")),i=U(t.getAttribute("data-height"));return e!==null&&i!==null?{width:e,height:i}:null}class be{constructor(t,e){u(this,"_interval",null);u(this,"_runtimeInjected",!1);this._iframe=t,this._callbacks=e}get runtimeInjected(){return this._runtimeInjected}start(){this.stop(),this._runtimeInjected=!1;let t=0;this._interval=setInterval(()=>{var e;t++;try{const i=this._iframe.contentWindow;if(!i)return;const s=!!(i.__hf||i.__player),n=!!(i.__timelines&&Object.keys(i.__timelines).length>0),o=!!((e=this._iframe.contentDocument)!=null&&e.querySelector("[data-composition-src]"));if(fe({hasRuntime:s,hasTimelines:n,hasNestedCompositions:o,runtimeInjected:this._runtimeInjected,attempts:t})){this._injectRuntime();return}if(this._runtimeInjected&&!s)return;const d=this._resolvePlaybackDurationAdapter(i);if(d&&d.getDuration()>0){this.stop();const c=ye(this._iframe.contentDocument);this._callbacks.onReady({duration:d.getDuration(),adapter:d,compositionSize:c});return}}catch{}t>=40&&(this.stop(),this._callbacks.onError("Composition timeline not found after 8s"))},200)}stop(){this._interval!==null&&(clearInterval(this._interval),this._interval=null)}resolveDirectTimelineAdapter(){try{const t=this._iframe.contentWindow;return t?this._resolveDirectTimelineAdapterFromWindow(t):null}catch{return null}}resolveDirectTimelineAdapterFromWindow(t){return this._resolveDirectTimelineAdapterFromWindow(t)}hasRuntimeBridge(t){return Reflect.get(t,"__hf")!==void 0||F(Reflect.get(t,"__player"))}_injectRuntime(){var t,e;this._runtimeInjected=!0;try{const i=this._iframe.contentDocument;if(!i)return;const s=i.createElement("script");s.src=ve,(i.head||i.documentElement).appendChild(s),(e=(t=this._callbacks).onRuntimeInjected)==null||e.call(t)}catch{}}_resolveDirectTimelineAdapterFromWindow(t){var d,c;if(this.hasRuntimeBridge(t))return null;const e=Reflect.get(t,"__timelines");if(!F(e))return null;const i=Object.keys(e);if(i.length===0)return null;const s=(c=(d=this._iframe.contentDocument)==null?void 0:d.querySelector("[data-composition-id]"))==null?void 0:c.getAttribute("data-composition-id"),n=s&&s in e?s:i[i.length-1],o=e[n];return ge(o)?o:null}_resolvePlaybackDurationAdapter(t){const e=Reflect.get(t,"__player");if(_e(e))return{kind:"runtime",getDuration:()=>e.getDuration()};const i=this._resolveDirectTimelineAdapterFromWindow(t);return i?{kind:"direct-timeline",timeline:i,getDuration:()=>i.duration()}:null}}const we=`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
position: relative;
|
|
@@ -422,4 +422,4 @@ var pe=Object.defineProperty;var me=(r,t,e)=>t in r?pe(r,t,{enumerable:!0,config
|
|
|
422
422
|
background: var(--hfp-accent, #fff);
|
|
423
423
|
pointer-events: none;
|
|
424
424
|
}
|
|
425
|
-
`,ne='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><polygon points="4,2 16,9 4,16"/></svg>',Ae='<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>',oe='<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>',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"/></svg>',Ee='<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>',Ce=[.25,.5,1,1.5,2,4];function H(r){return Number.isInteger(r)?`${r}x`:`${r}x`}function de(r){if(!Number.isFinite(r)||r<0)return"0:00";const t=Math.floor(r),e=Math.floor(t/60),i=t%60;return`${e}:${i.toString().padStart(2,"0")}`}function Te(r,t,e={}){const i=e.speedPresets??Ce,s=document.createElement("div");s.className="hfp-controls",s.addEventListener("click",a=>{a.stopPropagation()});const n=document.createElement("button");n.className="hfp-play-btn",n.type="button",n.innerHTML=ne,n.setAttribute("aria-label","Play");const o=document.createElement("div");o.className="hfp-scrubber";const d=document.createElement("div");d.className="hfp-progress",d.style.width="0%",o.appendChild(d);const c=document.createElement("span");c.className="hfp-time",c.textContent="0:00 / 0:00";const p=document.createElement("div");p.className="hfp-speed-wrap";const h=document.createElement("button");h.className="hfp-speed-btn",h.type="button",h.textContent="1x",h.setAttribute("aria-label","Playback speed");const g=document.createElement("div");g.className="hfp-speed-menu",g.setAttribute("role","menu");for(const a of i){const l=document.createElement("button");l.className="hfp-speed-option",l.type="button",l.setAttribute("role","menuitem"),l.dataset.speed=String(a),l.textContent=H(a),a===1&&l.classList.add("hfp-active"),g.appendChild(l)}p.appendChild(g),p.appendChild(h);const v=document.createElement("div");v.className="hfp-volume-wrap";const f=document.createElement("button");f.className="hfp-mute-btn",f.type="button",f.innerHTML=oe,f.setAttribute("aria-label","Mute");const y=document.createElement("div");y.className="hfp-volume-slider-wrap";const m=document.createElement("div");m.className="hfp-volume-slider",m.setAttribute("role","slider"),m.setAttribute("aria-label","Volume"),m.setAttribute("aria-valuemin","0"),m.setAttribute("aria-valuemax","100"),m.setAttribute("aria-valuenow","100"),m.tabIndex=0;const b=document.createElement("div");b.className="hfp-volume-fill",b.style.width="100%",m.appendChild(b),y.appendChild(m),v.appendChild(y),v.appendChild(f),e.audioLocked&&(v.style.display="none"),s.appendChild(n),s.appendChild(o),s.appendChild(c),s.appendChild(v),s.appendChild(p),r.appendChild(s);let L=!1,E=!1,A=1,x=null;i.indexOf(1);const P=(a,l)=>a?Ee:l===0||l<.5?ae:oe;n.addEventListener("click",a=>{a.stopPropagation(),L?t.onPause():t.onPlay()}),f.addEventListener("click",a=>{a.stopPropagation(),t.onMuteToggle()});let C=!1;const R=a=>{const l=m.getBoundingClientRect(),_=Math.max(0,Math.min(1,(a-l.left)/l.width));A=_,b.style.width=`${_*100}%`,m.setAttribute("aria-valuenow",String(Math.round(_*100))),E&&_>0&&t.onMuteToggle(),f.innerHTML=P(E,_),t.onVolumeChange(_)};m.addEventListener("mousedown",a=>{a.stopPropagation(),C=!0,R(a.clientX)});const q=a=>{C&&R(a.clientX)},W=()=>{C=!1};document.addEventListener("mousemove",q),document.addEventListener("mouseup",W),m.addEventListener("touchstart",a=>{C=!0;const l=a.touches[0];l&&R(l.clientX)},{passive:!0});const G=a=>{if(C){const l=a.touches[0];l&&R(l.clientX)}},X=()=>{C=!1};document.addEventListener("touchmove",G,{passive:!0}),document.addEventListener("touchend",X);const Y=.05;m.addEventListener("keydown",a=>{let l=A;if(a.key==="ArrowRight"||a.key==="ArrowUp")l=Math.min(1,A+Y);else if(a.key==="ArrowLeft"||a.key==="ArrowDown")l=Math.max(0,A-Y);else return;a.preventDefault(),a.stopPropagation(),A=l,b.style.width=`${l*100}%`,m.setAttribute("aria-valuenow",String(Math.round(l*100))),E&&l>0&&t.onMuteToggle(),f.innerHTML=P(E,l),t.onVolumeChange(l)});const Q=a=>{for(const l of g.querySelectorAll(".hfp-speed-option"))l.classList.toggle("hfp-active",l.dataset.speed===String(a))};h.addEventListener("click",a=>{a.stopPropagation();const l=g.classList.toggle("hfp-open");h.setAttribute("aria-expanded",String(l))}),g.addEventListener("click",a=>{a.stopPropagation();const l=a.target.closest(".hfp-speed-option");if(!l)return;const _=parseFloat(l.dataset.speed);i.indexOf(_),h.textContent=H(_),Q(_),g.classList.remove("hfp-open"),h.setAttribute("aria-expanded","false"),t.onSpeedChange(_)});const J=()=>{g.classList.remove("hfp-open"),h.setAttribute("aria-expanded","false")};document.addEventListener("click",J);const I=a=>{const l=o.getBoundingClientRect(),_=Math.max(0,Math.min(1,(a-l.left)/l.width));t.onSeek(_)};let T=!1;o.addEventListener("mousedown",a=>{a.stopPropagation(),T=!0,I(a.clientX)});const K=a=>{T&&I(a.clientX)},Z=()=>{T=!1};document.addEventListener("mousemove",K),document.addEventListener("mouseup",Z),o.addEventListener("touchstart",a=>{T=!0;const l=a.touches[0];l&&I(l.clientX)},{passive:!0});const ee=a=>{if(T){const l=a.touches[0];l&&I(l.clientX)}},te=()=>{T=!1};document.addEventListener("touchmove",ee,{passive:!0}),document.addEventListener("touchend",te);const ie=()=>{x&&clearTimeout(x),x=setTimeout(()=>{L&&s.classList.add("hfp-hidden")},3e3)},O=r instanceof ShadowRoot?r.host:r,re=()=>{s.classList.remove("hfp-hidden"),ie()},se=()=>{L&&s.classList.add("hfp-hidden")};return O.addEventListener("mousemove",re),O.addEventListener("mouseleave",se),{updateTime(a,l){const _=l>0?Math.min(a,l):a,ce=l>0?_/l*100:0;d.style.width=`${ce}%`,c.textContent=`${de(_)} / ${de(l)}`},updatePlaying(a){L=a,n.innerHTML=a?Ae:ne,n.setAttribute("aria-label",a?"Pause":"Play"),a?ie():s.classList.remove("hfp-hidden")},updateSpeed(a){i.indexOf(a),h.textContent=H(a),Q(a)},updateMuted(a){E=a,f.innerHTML=P(a,A),f.setAttribute("aria-label",a?"Unmute":"Mute")},updateVolume(a){A=a,b.style.width=`${a*100}%`,m.setAttribute("aria-valuenow",String(Math.round(a*100))),f.innerHTML=P(E,a)},setVolumeControlsHidden(a){v.style.display=a?"none":""},show(){s.style.display=""},hide(){s.style.display="none"},destroy(){document.removeEventListener("mousemove",K),document.removeEventListener("mouseup",Z),document.removeEventListener("touchmove",ee),document.removeEventListener("touchend",te),document.removeEventListener("mousemove",q),document.removeEventListener("mouseup",W),document.removeEventListener("touchmove",G),document.removeEventListener("touchend",X),document.removeEventListener("click",J),O.removeEventListener("mousemove",re),O.removeEventListener("mouseleave",se),x&&clearTimeout(x),s.remove()}}}function ke(r,t,e,i,s,n=!1){const o=i?i.split(",").map(Number).filter(p=>!isNaN(p)&&p>0):void 0,d={...o?{speedPresets:o}:{},audioLocked:n},c=Te(r,s,d);return c.updateMuted(t),c.updateVolume(e),c}function le(r,t,e){return t?(e||(e=document.createElement("img"),e.className="hfp-poster",r.appendChild(e)),e.src=t,e):(e==null||e.remove(),null)}function xe(r){return r.composedPath().some(t=>t instanceof HTMLElement&&t.classList.contains("hfp-controls"))}let D=null;function Me(r,t){if(typeof CSSStyleSheet<"u")try{D||(D=new CSSStyleSheet,D.replaceSync(t)),r.adoptedStyleSheets=[D];return}catch{}const e=document.createElement("style");e.textContent=t,r.appendChild(e)}function Se(){const r=document.createElement("div");r.className="hfp-container";const t=document.createElement("iframe");return t.className="hfp-iframe",t.sandbox.add("allow-scripts","allow-same-origin"),t.allow="autoplay; fullscreen",t.referrerPolicy="no-referrer",t.title="HyperFrames Composition",r.appendChild(t),{container:r,iframe:t}}function Le(r,t,e,i){const s=r.offsetWidth,n=r.offsetHeight;if(s===0||n===0)return;const o=Math.min(s/e,n/i);t.style.width=`${e}px`,t.style.height=`${i}px`,t.style.transform=`translate(-50%, -50%) scale(${o})`}const Pe=100;class Re{constructor(t){u(this,"_raf",null);u(this,"_lastUpdateMs",0);this._callbacks=t}start(t,e,i,s){this.stop();const n=()=>{if(s()){this._raf=null;return}let o;try{o=t.time()}catch{this._raf=null;return}const d=i();d>0&&(o=Math.min(o,d));const c=d>0&&o>=d,p=performance.now();if((p-this._lastUpdateMs>Pe||c)&&(this._lastUpdateMs=p,this._callbacks.onTimeUpdate(o,d)),c){if(this._callbacks.getLoop()){this._callbacks.restart();return}try{t.pause()}catch{}this._callbacks.onPaused(),this._raf=null;return}this._raf=requestAnimationFrame(n)};this._raf=requestAnimationFrame(n)}stop(){this._raf!==null&&(cancelAnimationFrame(this._raf),this._raf=null)}get isRunning(){return this._raf!==null}}function Ie(r){const t=Array.from(r.querySelectorAll("[data-composition-id]"));if(t.length===0)return r.body?[r.body]:[];const e=[];for(const i of t)De(i)||e.push(i);return Oe(r),e}function Oe(r){const t=r.body;if(!t||typeof console>"u"||typeof console.warn!="function")return;const e=t.querySelectorAll("audio[data-start], video[data-start]");if(e.length===0)return;const i=[];for(const s of e)s.closest("[data-composition-id]")||i.push(s);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 De(r){let t=r.parentElement;for(;t;){if(t.hasAttribute("data-composition-id"))return!0;t=t.parentElement}return!1}function j(r){var e;const t=(e=r.ownerDocument)==null?void 0:e.defaultView;return t&&r instanceof t.Element?!0:r instanceof Element}function w(r){var e;if(!j(r)||r.tagName!=="AUDIO"&&r.tagName!=="VIDEO")return!1;const t=(e=r.ownerDocument)==null?void 0:e.defaultView;return t&&r instanceof t.HTMLMediaElement?!0:r instanceof HTMLMediaElement}const Ne=.05,Fe=2;class Ue{constructor(t){u(this,"_entries",[]);u(this,"_mediaObserver");u(this,"_playbackErrorPosted",!1);u(this,"_audioOwner","runtime");u(this,"_urlAudioEntry",null);u(this,"_urlAudioSrc",null);u(this,"_dispatchEvent");u(this,"_getMuted");u(this,"_getVolume");u(this,"_getPlaybackRate");u(this,"_getCurrentTime");u(this,"_isPaused");this._dispatchEvent=t.dispatchEvent,this._getMuted=t.getMuted,this._getVolume=t.getVolume,this._getPlaybackRate=t.getPlaybackRate,this._getCurrentTime=t.getCurrentTime,this._isPaused=t.isPaused}get audioOwner(){return this._audioOwner}get entries(){return this._entries}resetForIframeLoad(){this._playbackErrorPosted=!1;const t=this._audioOwner==="parent";this._audioOwner="runtime",this.pauseAll(),this.teardownObserver(),t&&this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"runtime",reason:"iframe-reload"}}))}destroy(){this.teardownObserver();for(const t of this._entries)t.el.pause(),t.el.src="";this._entries=[],this._urlAudioEntry=null,this._urlAudioSrc=null}updateMuted(t){for(const e of this._entries)e.el.muted=t}updateVolume(t){for(const e of this._entries)e.el.volume=t}updatePlaybackRate(t){for(const e of this._entries)e.el.playbackRate=t}_playEntry(t){t.el.src&&t.el.play().catch(e=>this._reportPlaybackError(e))}_playEntryIfActive(t){this._refreshEntryBounds(t);const e=this._getCurrentTime()-t.start;e<0||e>=t.duration||this._playEntry(t)}_refreshEntryBounds(t){var s;if(!((s=t.source)!=null&&s.isConnected))return;const e=parseFloat(t.source.getAttribute("data-start")||"0");t.start=Number.isFinite(e)?e:0;const i=parseFloat(t.source.getAttribute("data-duration")||"");t.duration=Number.isFinite(i)&&i>0?i:Number.POSITIVE_INFINITY}_gateEntryPlayback(t,e){return e<0||e>=t.duration?(t.el.paused||t.el.pause(),t.driftSamples=0,!1):(this._audioOwner==="parent"&&!this._isPaused()&&t.el.paused&&this._playEntry(t),!0)}playAll(){for(const t of this._entries)this._playEntryIfActive(t)}pauseAll(){for(const t of this._entries)t.el.pause()}stopAdoptedMedia(){for(const t of this._entries)t.source&&t.el.pause()}seekAll(t){for(const e of this._entries){this._refreshEntryBounds(e);const i=t-e.start;i>=0&&i<e.duration&&(e.el.currentTime=i)}}mirrorTime(t,e){const i=(e==null?void 0:e.force)===!0;for(const s of this._entries){this._refreshEntryBounds(s);const n=t-s.start;this._gateEntryPlayback(s,n)&&(Math.abs(s.el.currentTime-n)>Ne?(s.driftSamples+=1,(i||s.driftSamples>=Fe)&&(s.el.currentTime=n,s.driftSamples=0)):s.driftSamples=0)}}promoteToParentProxy(t,e){if(this._audioOwner==="parent")return;if(this._audioOwner="parent",t)for(const s of t.querySelectorAll("video, audio"))w(s)&&(s.muted=!0);const i=this._getCurrentTime();e?e(i,{force:!0}):this.mirrorTime(i,{force:!0}),this._isPaused()||this.playAll(),this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"parent",reason:"autoplay-blocked"}}))}setupFromIframe(t){const e=t.querySelectorAll("audio[data-start], video[data-start]");for(const i of e)w(i)&&this._adoptIframeMedia(i);this._observeDynamicMedia(t)}setupFromUrl(t){if(this._urlAudioSrc===t&&this._urlAudioEntry)return;this.teardownUrlAudio();const e=this._createEntry(t,"audio",0,1/0);this._urlAudioEntry=e,this._urlAudioSrc=e?t:null,e&&this._audioOwner==="parent"&&!this._isPaused()&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),this.playAll())}teardownUrlAudio(){const t=this._urlAudioEntry;if(this._urlAudioEntry=null,this._urlAudioSrc=null,!t)return;t.el.pause(),t.el.src="";const e=this._entries.indexOf(t);e!==-1&&this._entries.splice(e,1)}teardownObserver(){var t;(t=this._mediaObserver)==null||t.disconnect(),this._mediaObserver=void 0}_reportPlaybackError(t){this._playbackErrorPosted||(this._playbackErrorPosted=!0,this._dispatchEvent(new CustomEvent("playbackerror",{detail:{source:"parent-proxy",error:t}})))}_createEntry(t,e,i,s,n){if(this._entries.some(p=>p.el.src===t))return null;const o=e==="video"?document.createElement("video"):new Audio;o.preload="auto",o.src=t,o.load(),o.muted=this._getMuted(),o.volume=this._getVolume();const d=this._getPlaybackRate();d!==1&&(o.playbackRate=d);const c={el:o,start:i,duration:s,driftSamples:0,source:n};return this._entries.push(c),c}_resolveIframeMediaSrc(t){var i;const e=t.getAttribute("src")||((i=t.querySelector("source"))==null?void 0:i.getAttribute("src"));return e?new URL(e,t.ownerDocument.baseURI).href:null}_adoptIframeMedia(t){if(t.preload==="metadata"||t.preload==="none")return;const e=this._resolveIframeMediaSrc(t);if(!e)return;const i=parseFloat(t.getAttribute("data-start")||"0"),s=parseFloat(t.getAttribute("data-duration")||"Infinity"),n=t.tagName==="VIDEO"?"video":"audio",o=this._createEntry(e,n,i,s,t);o&&this._audioOwner==="parent"&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),this._isPaused()||this._playEntryIfActive(o))}_detachIframeMedia(t){const e=this._resolveIframeMediaSrc(t);if(!e)return;const i=this._entries.findIndex(n=>n.el.src===e);if(i===-1)return;const s=this._entries[i];s.el.pause(),s.el.src="",this._entries.splice(i,1)}_observeDynamicMedia(t){if(this.teardownObserver(),typeof MutationObserver>"u"||!t.body)return;const e=new MutationObserver(n=>{for(const o of n){if(o.type==="attributes"&&o.attributeName==="preload"){const d=o.target;w(d)&&d.matches("audio[data-start], video[data-start]")&&d.preload==="auto"&&this._adoptIframeMedia(d);continue}for(const d of o.addedNodes){if(!j(d))continue;const c=[];w(d)&&d.matches("audio[data-start], video[data-start]")&&c.push(d);const p=d.querySelectorAll("audio[data-start], video[data-start]");for(const h of p)w(h)&&c.push(h);for(const h of c)this._adoptIframeMedia(h)}for(const d of o.removedNodes){if(!j(d))continue;const c=[];w(d)&&d.matches("audio[data-start], video[data-start]")&&c.push(d);const p=d.querySelectorAll("audio[data-start], video[data-start]");for(const h of p)w(h)&&c.push(h);for(const h of c)this._detachIframeMedia(h)}}}),i={childList:!0,subtree:!0,attributes:!0,attributeFilter:["preload"]},s=Ie(t);for(const n of s)e.observe(n,i);this._mediaObserver=e}}const He=100;function Ve(r,t,e,i){const s=(r.frame??0)/t,n=e.duration>0?Math.min(s,e.duration):s,o=!e.paused,d=!r.isPlaying,c=e.duration>0&&n>=e.duration&&(o||r.isPlaying);if(c&&i.getLoop())return i.media.audioOwner==="parent"&&i.media.pauseAll(),i.seek(0),i.play(),{...e,currentTime:n,paused:!1};const p={...e,currentTime:n,paused:d};i.media.audioOwner==="parent"&&(o&&d?i.media.pauseAll():!o&&!d&&i.media.playAll(),i.media.mirrorTime(n));const h=performance.now(),g=d!==e.paused;return(h-e.lastUpdateMs>He||g)&&(p.lastUpdateMs=h,i.updateControlsTime(n,e.duration),i.updateControlsPlaying(!d),i.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:n}}))),c&&(i.media.audioOwner==="parent"&&i.media.pauseAll(),p.paused=!0,i.updateControlsPlaying(!1),i.dispatchEvent(new Event("ended"))),p}const he=30;function $e(r){return Array.isArray(r)?r.filter(t=>typeof t=="object"&&t!==null&&typeof t.id=="string"&&typeof t.start=="number"&&typeof t.duration=="number"):[]}function ze(r,t,e){var s;if(r.source!==t)return;const i=r.data;if(!(!i||i.source!=="hf-preview")){if(i.type==="shader-transition-state"){const n=i.state&&typeof i.state=="object"?i.state:{};e.shaderLoader.update(n,e.getShaderLoadingMode()),e.dispatchEvent(new CustomEvent("shadertransitionstate",{detail:{compositionId:i.compositionId,state:n}}));return}if(i.type==="ready"){e.onRuntimeReady();return}if(i.type==="state"){e.setPlaybackState(Ve({frame:i.frame??0,isPlaying:!!i.isPlaying},he,e.getPlaybackState(),e));return}if(i.type==="media-autoplay-blocked"){if(((s=e.shouldPromoteMediaAutoplayFallback)==null?void 0:s.call(e))===!1)return;let n=null;try{n=e.getIframeDoc()}catch{}e.media.promoteToParentProxy(n,(o,d)=>e.media.mirrorTime(o,d)),e.sendControl("set-media-output-muted",{muted:!0});return}if(i.type==="timeline"&&i.durationInFrames>0){if(Number.isFinite(i.durationInFrames)){const n=e.getPlaybackState(),o=i.durationInFrames/he;e.setPlaybackState({...n,duration:o}),e.updateControlsTime(n.currentTime,o)}e.setScenes($e(i.scenes));return}i.type==="stage-size"&&Number.isFinite(i.width)&&i.width>0&&Number.isFinite(i.height)&&i.height>0&&e.setCompositionSize(i.width,i.height)}}const k="shader-capture-scale",M="shader-loading",je="__hf_shader_capture_scale",Be="__hf_shader_loading",N=["Preparing scene transitions","Sampling outgoing scene motion","Sampling incoming scene motion","Caching transition frames","Finalizing transition preview"];function B(r){if(r===null)return null;const t=Number(r);return!Number.isFinite(t)||t<=0?null:String(Math.min(1,Math.max(.25,t)))}function qe(r){if(r===null||r.trim()==="")return"composition";const t=r.trim().toLowerCase();return t==="none"||t==="false"||t==="0"||t==="off"?"none":t==="player"||t==="true"||t==="1"||t==="on"?"player":"composition"}function ue(r,t,e){e===null?r.delete(t):r.set(t,e)}function We(r,t,e){const i=r.indexOf("#"),s=i>=0?r.slice(0,i):r,n=i>=0?r.slice(i):"",o=s.indexOf("?"),d=o>=0?s.slice(0,o):s,c=o>=0?s.slice(o+1):"",p=new URLSearchParams(c);ue(p,je,t),ue(p,Be,e==="composition"?null:e);const h=p.toString();return`${d}${h?`?${h}`:""}${n}`}function Ge(r,t,e){if(t===null&&e==="composition")return r;const i=[];t!==null&&i.push(`window.__HF_SHADER_CAPTURE_SCALE=${JSON.stringify(t)};`),e!=="composition"&&i.push(`window.__HF_SHADER_LOADING=${JSON.stringify(e)};`);const s=`<script data-hyperframes-player-shader-options>${i.join("")}<\/script>`;return/<head\b[^>]*>/i.test(r)?r.replace(/<head\b[^>]*>/i,n=>`${n}${s}`):/<html\b[^>]*>/i.test(r)?r.replace(/<html\b[^>]*>/i,n=>`${n}${s}`):`${s}${r}`}function S(r){return qe(r.getAttribute(M))}function Xe(r){return Number(B(r.getAttribute(k))??"1")}function V(r,t){return We(t,B(r.getAttribute(k)),S(r))}function $(r,t){return Ge(t,B(r.getAttribute(k)),S(r))}function Ye(){const 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;const t=f=>{f.preventDefault(),f.stopPropagation()};for(const f of["selectstart","dragstart","pointerdown","mousedown","click","dblclick","contextmenu","touchstart"])r.addEventListener(f,t,{capture:!0});const e=document.createElement("div");e.className="hfp-shader-loader-panel",e.draggable=!1;const 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("");const s=document.createElement("div");s.className="hfp-shader-loader-title";const n=document.createElement("span");n.className="hfp-shader-loader-title-text",n.textContent=N[0],s.appendChild(n);const o=document.createElement("div");o.className="hfp-shader-loader-detail",o.textContent="Rendering animated scene samples for shader transitions.";const d=document.createElement("div");d.className="hfp-shader-loader-track",d.setAttribute("aria-hidden","true");const c=document.createElement("div");c.className="hfp-shader-loader-fill",d.appendChild(c);const p=document.createElement("div");p.className="hfp-shader-loader-progress";const h=f=>{const y=document.createElement("div");y.className="hfp-shader-loader-row";const m=document.createElement("span");m.className="hfp-shader-loader-label",m.textContent=f;const b=document.createElement("span");return b.className="hfp-shader-loader-value",y.appendChild(m),y.appendChild(b),p.appendChild(y),{row:y,label:m,value:b}},g=h("transition"),v=h("transition frame");return e.appendChild(i),e.appendChild(s),e.appendChild(o),e.appendChild(d),e.appendChild(p),r.appendChild(e),{root:r,fill:c,title:n,detail:o,transitionValue:g.value,frameLabel:v.label,frameValue:v.value,frameRow:v.row}}const Qe=420;class Je{constructor(t){u(this,"_el");u(this,"_hideTimeout",null);this._el=t}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(t,e){if(e!=="player"){this.reset();return}if(t.ready||!t.loading){this.hide();return}const i=typeof t.progress=="number"&&Number.isFinite(t.progress)?t.progress:0,s=typeof t.total=="number"&&Number.isFinite(t.total)?t.total:0,n=s>0?Math.min(1,Math.max(0,i/s)):0,o=Math.min(N.length-1,Math.floor(n*N.length));this._el.title.textContent=N[o]||"Preparing scene transitions",this._el.detail.textContent=t.phase==="cached"?"Loading cached transition frames before playback.":t.phase==="finalizing"?"Uploading transition textures for smooth playback.":"Rendering animated scene samples for shader transitions.",this._el.fill.style.transform=`scaleX(${n})`,this._el.transitionValue.textContent=t.currentTransition!==void 0&&t.transitionTotal!==void 0?`${t.currentTransition}/${t.transitionTotal}`:s>0?`${i}/${s}`:"";const d=t.transitionFrame!==void 0&&t.transitionFrames!==void 0?`${t.transitionFrame}/${t.transitionFrames}`:"";this._el.frameLabel.textContent=t.phase==="cached"?"cached transition frames":t.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(n*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)}}const Ke=.1,Ze=5;function z(r){return!Number.isFinite(r)||r<=0?1:Math.max(Ke,Math.min(Ze,r))}class et extends HTMLElement{constructor(){super();u(this,"shadow");u(this,"container");u(this,"iframe");u(this,"posterEl",null);u(this,"controlsApi",null);u(this,"resizeObserver");u(this,"shaderLoader");u(this,"probe");u(this,"_ready",!1);u(this,"_currentTime",0);u(this,"_duration",0);u(this,"_paused",!0);u(this,"_lastUpdateMs",0);u(this,"_volume",1);u(this,"_compositionWidth",1920);u(this,"_compositionHeight",1080);u(this,"_directTimelineAdapter",null);u(this,"_directTimelineClock");u(this,"_parentTickRaf",null);u(this,"_media");u(this,"_scenes",[]);this.shadow=this.attachShadow({mode:"open"}),Me(this.shadow,we),{container:this.container,iframe:this.iframe}=Se(),this.shadow.appendChild(this.container);const e=Ye();this.shadow.appendChild(e.root),this.shaderLoader=new Je(e),this._media=new Ue({dispatchEvent:i=>this.dispatchEvent(i),getMuted:()=>this.muted,getVolume:()=>this._volume,getPlaybackRate:()=>this.playbackRate,getCurrentTime:()=>this._currentTime,isPaused:()=>this._paused}),this._directTimelineClock=new Re({onTimeUpdate:(i,s)=>{var n;this._currentTime=i,(n=this.controlsApi)==null||n.updateTime(i,s),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:i}}))},getLoop:()=>this.loop,restart:()=>{this.seek(0),this.play()},onPaused:()=>{var i;this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,(i=this.controlsApi)==null||i.updatePlaying(!1),this.dispatchEvent(new Event("ended"))},onEnded:()=>this.loop}),this.probe=new ye(this.iframe,{onReady:i=>this._onProbeReady(i),onError:i=>this.dispatchEvent(new CustomEvent("error",{detail:{message:i}}))}),this.addEventListener("click",i=>{xe(i)||(this._paused?this.play():this.pause())}),this.resizeObserver=new ResizeObserver(()=>this._rescale()),this._onMessage=this._onMessage.bind(this),this._onIframeLoad=this._onIframeLoad.bind(this)}static get observedAttributes(){return["src","srcdoc","width","height","controls","muted","audio-locked","volume","poster","playback-rate","audio-src",k,M]}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=le(this.shadow,this.getAttribute("poster"),this.posterEl)),this.hasAttribute("audio-src")&&this._media.setupFromUrl(this.getAttribute("audio-src")),this.hasAttribute("srcdoc")&&(this.iframe.srcdoc=$(this,this.getAttribute("srcdoc"))),this.hasAttribute("src")&&(this.iframe.src=V(this,this.getAttribute("src"))),!this.hasAttribute("audio-locked")&&this._isLockedHostEnvironment()&&this._applyAudioLock(!0)}disconnectedCallback(){var e;this.resizeObserver.disconnect(),window.removeEventListener("message",this._onMessage),this.iframe.removeEventListener("load",this._onIframeLoad),this.probe.stop(),this._directTimelineClock.stop(),this._stopParentTickClock(),this._directTimelineAdapter=null,this.shaderLoader.destroy(),this._media.destroy(),(e=this.controlsApi)==null||e.destroy()}attributeChangedCallback(e,i,s){var n,o,d,c,p;switch(e){case"src":s&&(this._ready=!1,this.iframe.src=V(this,s));break;case"srcdoc":this._ready=!1,s!==null?this.iframe.srcdoc=$(this,s):this.iframe.removeAttribute("srcdoc");break;case"width":this._compositionWidth=U(s)??1920,this._rescale();break;case"height":this._compositionHeight=U(s)??1080,this._rescale();break;case"controls":s!==null?this._setupControls():((n=this.controlsApi)==null||n.destroy(),this.controlsApi=null);break;case"poster":this.posterEl=le(this.shadow,s,this.posterEl);break;case"playback-rate":{const h=z(parseFloat(s||"1"));this._media.updatePlaybackRate(h),this._sendControl("set-playback-rate",{playbackRate:h}),(d=(o=this._directTimelineAdapter)==null?void 0:o.timeScale)==null||d.call(o,h),(c=this.controlsApi)==null||c.updateSpeed(h),this.dispatchEvent(new Event("ratechange"));break}case"muted":this._handleMutedChange(s);break;case"audio-locked":this._applyAudioLock(s!==null);break;case"volume":{const h=Math.max(0,Math.min(1,parseFloat(s||"1")));this._volume=h,this._media.updateVolume(h),this._sendControl("set-volume",{volume:h}),(p=this.controlsApi)==null||p.updateVolume(h),this.dispatchEvent(new Event("volumechange"));break}case"audio-src":s?this._media.setupFromUrl(s):this._media.teardownUrlAudio();break;case k:case M:this._reloadShaderOptions();break}}get iframeElement(){return this.iframe}get scenes(){return this._scenes}play(){var i,s;(i=this.posterEl)==null||i.remove(),this.posterEl=null,this._duration>0&&this._currentTime>=this._duration&&this.seek(0),this._paused=!1;const e=this._tryDirectTimelinePlay();e||(this._sendControl("play"),this._ready&&!this._directTimelineAdapter&&this._startParentTickClock()),this._media.audioOwner==="parent"&&this._media.playAll(),(s=this.controlsApi)==null||s.updatePlaying(!0),this.dispatchEvent(new Event("play")),e&&this._directTimelineAdapter&&this._directTimelineClock.start(this._directTimelineAdapter,()=>this._currentTime,()=>this._duration,()=>this._paused)}pause(){var e;this._tryDirectTimelinePause()||this._sendControl("pause"),this._directTimelineClock.stop(),this._stopParentTickClock(),this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,(e=this.controlsApi)==null||e.updatePlaying(!1),this.dispatchEvent(new Event("pause"))}stopMedia(){this._sendControl("stop-media"),this._stopIframeMedia(),this._media.stopAdoptedMedia()}seek(e){var i,s;!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,(i=this.controlsApi)==null||i.updatePlaying(!1),(s=this.controlsApi)==null||s.updateTime(this._currentTime,this._duration)}setColorGrading(e,i){this._sendControl("set-color-grading",{target:e,grading:i})}clearColorGrading(e){this._sendControl("set-color-grading",{target:e,grading:null})}setColorGradingCompare(e,i){this._sendControl("set-color-grading-compare",{target:e,compare:i})}clearColorGradingCompare(e){this._sendControl("set-color-grading-compare",{target:e,compare:{enabled:!1}})}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 z(parseFloat(this.getAttribute("playback-rate")||"1"))}set playbackRate(e){this.setAttribute("playback-rate",String(z(e)))}get shaderCaptureScale(){return Xe(this)}set shaderCaptureScale(e){this.setAttribute(k,String(e))}get shaderLoading(){return S(this)}set shaderLoading(e){e==="composition"?this.removeAttribute(M):this.setAttribute(M,e)}get muted(){return this.hasAttribute("muted")}set muted(e){e?this.setAttribute("muted",""):this.removeAttribute("muted")}get audioLocked(){return this.hasAttribute("audio-locked")}set audioLocked(e){e?this.setAttribute("audio-locked",""):this.removeAttribute("audio-locked")}_isLockedHostEnvironment(){if(typeof navigator>"u")return!1;const e=navigator.userAgent||"";return/\bClaude\/\d/.test(e)&&/\bElectron\b/.test(e)}_isAudioLocked(){return this.hasAttribute("audio-locked")||this._isLockedHostEnvironment()}_isSlideshowPlayer(){return this.closest("hyperframes-slideshow")!==null}_handleMutedChange(e){var i;if(e===null&&this._isAudioLocked()){this.setAttribute("muted","");return}this._media.updateMuted(e!==null),this._setIframeMediaMuted(e!==null),this._sendControl("set-muted",{muted:e!==null}),(i=this.controlsApi)==null||i.updateMuted(e!==null),this.dispatchEvent(new Event("volumechange"))}_applyAudioLock(e){var i;e&&(this.muted=!0),(i=this.controlsApi)==null||i.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,i={}){var s;try{(s=this.iframe.contentWindow)==null||s.postMessage({source:"hf-parent",type:"control",action:e,...i},"*")}catch{}}_getSameOriginIframeDocument(){try{return this.iframe.contentDocument}catch{return null}}_setIframeMediaMuted(e){const i=this._getSameOriginIframeDocument();if(i)for(const s of i.querySelectorAll("video, audio"))w(s)&&(s.muted=e||s.defaultMuted)}_stopIframeMedia(){const e=this._getSameOriginIframeDocument();if(e)for(const i of e.querySelectorAll("video, audio"))w(i)&&i.pause()}_replayBridgeState(){this._sendControl("set-muted",{muted:this.muted}),this._sendControl("set-volume",{volume:this._volume}),this._sendControl("set-playback-rate",{playbackRate:this.playbackRate}),this._sendControl("set-native-media-sync-disabled",{disabled:this._isSlideshowPlayer()}),this._sendControl("set-web-audio-media-disabled",{disabled:this._isSlideshowPlayer()})}_reloadShaderOptions(){if(S(this)!=="player"&&this.shaderLoader.reset(),this.hasAttribute("srcdoc")){this.iframe.srcdoc=$(this,this.getAttribute("srcdoc")||"");return}this.hasAttribute("src")&&(this.iframe.src=V(this,this.getAttribute("src")||""))}_trySyncSeek(e){try{const i=this.iframe.contentWindow,s=i==null?void 0:i.__player;return typeof(s==null?void 0:s.seek)!="function"?!1:(s.seek.call(s,e),!0)}catch{return!1}}_withDirectTimeline(e){const i=this._directTimelineAdapter||this.probe.resolveDirectTimelineAdapter();if(!i)return!1;try{return e(i),this._directTimelineAdapter=i,!0}catch{return!1}}_tryDirectTimelineSeek(e){return this._withDirectTimeline(i=>{i.seek(e,!1),i.pause()})}_tryDirectTimelinePlay(){return this._withDirectTimeline(e=>void e.play())}_tryDirectTimelinePause(){return this._withDirectTimeline(e=>void e.pause())}_startParentTickClock(){this._stopParentTickClock();const e=()=>{if(this._paused){this._parentTickRaf=null;return}this._sendControl("tick"),this._parentTickRaf=requestAnimationFrame(e)};this._parentTickRaf=requestAnimationFrame(e)}_stopParentTickClock(){this._parentTickRaf!==null&&(cancelAnimationFrame(this._parentTickRaf),this._parentTickRaf=null)}_onMessage(e){ze(e,this.iframe.contentWindow,{getPlaybackState:()=>({currentTime:this._currentTime,duration:this._duration,paused:this._paused,lastUpdateMs:this._lastUpdateMs}),setPlaybackState:({currentTime:i,duration:s,paused:n,lastUpdateMs:o})=>{this._currentTime=i,this._duration=s,this._paused=n,this._lastUpdateMs=o},getShaderLoadingMode:()=>S(this),shaderLoader:this.shaderLoader,setCompositionSize:(i,s)=>{this._compositionWidth=i,this._compositionHeight=s,this._rescale()},sendControl:(i,s)=>this._sendControl(i,s),getIframeDoc:()=>this.iframe.contentDocument,onRuntimeReady:()=>this._replayBridgeState(),shouldPromoteMediaAutoplayFallback:()=>!this._isSlideshowPlayer(),setScenes:i=>{this._scenes=i,this.dispatchEvent(new CustomEvent("scenes",{detail:{scenes:i}}))},updateControlsTime:(i,s)=>{var n;return(n=this.controlsApi)==null?void 0:n.updateTime(i,s)},updateControlsPlaying:i=>{var s;return(s=this.controlsApi)==null?void 0:s.updatePlaying(i)},dispatchEvent:i=>this.dispatchEvent(i),seek:i=>this.seek(i),play:()=>this.play(),getLoop:()=>this.loop,media:this._media})}_onProbeReady({duration:e,adapter:i,compositionSize:s}){var n;this._duration=e,this._directTimelineAdapter=i.kind==="direct-timeline"?i.timeline:null,this._ready=!0,(n=this.controlsApi)==null||n.updateTime(0,e),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:e}})),s&&(this._compositionWidth=s.width,this._compositionHeight=s.height,this._rescale());try{const o=this.iframe.contentDocument;o&&this._media.setupFromIframe(o)}catch{}this._setIframeMediaMuted(this.muted),this.hasAttribute("autoplay")&&this.play()}_rescale(){Le(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=ke(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=>void(this.playbackRate=e),onMuteToggle:()=>void(this.muted=!this.muted),onVolumeChange:e=>void(this.volume=e)},this._isAudioLocked()))}get _audioOwner(){return this._media.audioOwner}get _parentMedia(){return this._media.entries}_mirrorParentMediaTime(e,i){this._media.mirrorTime(e,i)}_promoteToParentProxy(){let e=null;try{e=this.iframe.contentDocument}catch{}this._media.promoteToParentProxy(e,(i,s)=>this._mirrorParentMediaTime(i,s)),this._sendControl("set-media-output-muted",{muted:!0})}_observeDynamicMedia(e){this._media.setupFromIframe(e)}}customElements.get("hyperframes-player")||customElements.define("hyperframes-player",et);export{et as HyperframesPlayer,Ce as SPEED_PRESETS,H as formatSpeed,de as formatTime};
|
|
425
|
+
`,ne='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><polygon points="4,2 16,9 4,16"/></svg>',Ae='<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>',oe='<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>',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"/></svg>',Ee='<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>',Ce=[.25,.5,1,1.5,2,4];function H(r){return Number.isInteger(r)?`${r}x`:`${r}x`}function de(r){if(!Number.isFinite(r)||r<0)return"0:00";const t=Math.floor(r),e=Math.floor(t/60),i=t%60;return`${e}:${i.toString().padStart(2,"0")}`}function Te(r,t,e={}){const i=e.speedPresets??Ce,s=document.createElement("div");s.className="hfp-controls",s.addEventListener("click",a=>{a.stopPropagation()});const n=document.createElement("button");n.className="hfp-play-btn",n.type="button",n.innerHTML=ne,n.setAttribute("aria-label","Play");const o=document.createElement("div");o.className="hfp-scrubber";const d=document.createElement("div");d.className="hfp-progress",d.style.width="0%",o.appendChild(d);const c=document.createElement("span");c.className="hfp-time",c.textContent="0:00 / 0:00";const p=document.createElement("div");p.className="hfp-speed-wrap";const h=document.createElement("button");h.className="hfp-speed-btn",h.type="button",h.textContent="1x",h.setAttribute("aria-label","Playback speed");const g=document.createElement("div");g.className="hfp-speed-menu",g.setAttribute("role","menu");for(const a of i){const l=document.createElement("button");l.className="hfp-speed-option",l.type="button",l.setAttribute("role","menuitem"),l.dataset.speed=String(a),l.textContent=H(a),a===1&&l.classList.add("hfp-active"),g.appendChild(l)}p.appendChild(g),p.appendChild(h);const v=document.createElement("div");v.className="hfp-volume-wrap";const f=document.createElement("button");f.className="hfp-mute-btn",f.type="button",f.innerHTML=oe,f.setAttribute("aria-label","Mute");const b=document.createElement("div");b.className="hfp-volume-slider-wrap";const m=document.createElement("div");m.className="hfp-volume-slider",m.setAttribute("role","slider"),m.setAttribute("aria-label","Volume"),m.setAttribute("aria-valuemin","0"),m.setAttribute("aria-valuemax","100"),m.setAttribute("aria-valuenow","100"),m.tabIndex=0;const y=document.createElement("div");y.className="hfp-volume-fill",y.style.width="100%",m.appendChild(y),b.appendChild(m),v.appendChild(b),v.appendChild(f),e.audioLocked&&(v.style.display="none"),s.appendChild(n),s.appendChild(o),s.appendChild(c),s.appendChild(v),s.appendChild(p),r.appendChild(s);let L=!1,E=!1,A=1,x=null;i.indexOf(1);const P=(a,l)=>a?Ee:l===0||l<.5?ae:oe;n.addEventListener("click",a=>{a.stopPropagation(),L?t.onPause():t.onPlay()}),f.addEventListener("click",a=>{a.stopPropagation(),t.onMuteToggle()});let C=!1;const R=a=>{const l=m.getBoundingClientRect(),_=Math.max(0,Math.min(1,(a-l.left)/l.width));A=_,y.style.width=`${_*100}%`,m.setAttribute("aria-valuenow",String(Math.round(_*100))),E&&_>0&&t.onMuteToggle(),f.innerHTML=P(E,_),t.onVolumeChange(_)};m.addEventListener("mousedown",a=>{a.stopPropagation(),C=!0,R(a.clientX)});const q=a=>{C&&R(a.clientX)},W=()=>{C=!1};document.addEventListener("mousemove",q),document.addEventListener("mouseup",W),m.addEventListener("touchstart",a=>{C=!0;const l=a.touches[0];l&&R(l.clientX)},{passive:!0});const G=a=>{if(C){const l=a.touches[0];l&&R(l.clientX)}},X=()=>{C=!1};document.addEventListener("touchmove",G,{passive:!0}),document.addEventListener("touchend",X);const Y=.05;m.addEventListener("keydown",a=>{let l=A;if(a.key==="ArrowRight"||a.key==="ArrowUp")l=Math.min(1,A+Y);else if(a.key==="ArrowLeft"||a.key==="ArrowDown")l=Math.max(0,A-Y);else return;a.preventDefault(),a.stopPropagation(),A=l,y.style.width=`${l*100}%`,m.setAttribute("aria-valuenow",String(Math.round(l*100))),E&&l>0&&t.onMuteToggle(),f.innerHTML=P(E,l),t.onVolumeChange(l)});const Q=a=>{for(const l of g.querySelectorAll(".hfp-speed-option"))l.classList.toggle("hfp-active",l.dataset.speed===String(a))};h.addEventListener("click",a=>{a.stopPropagation();const l=g.classList.toggle("hfp-open");h.setAttribute("aria-expanded",String(l))}),g.addEventListener("click",a=>{a.stopPropagation();const l=a.target.closest(".hfp-speed-option");if(!l)return;const _=parseFloat(l.dataset.speed);i.indexOf(_),h.textContent=H(_),Q(_),g.classList.remove("hfp-open"),h.setAttribute("aria-expanded","false"),t.onSpeedChange(_)});const J=()=>{g.classList.remove("hfp-open"),h.setAttribute("aria-expanded","false")};document.addEventListener("click",J);const I=a=>{const l=o.getBoundingClientRect(),_=Math.max(0,Math.min(1,(a-l.left)/l.width));t.onSeek(_)};let T=!1;o.addEventListener("mousedown",a=>{a.stopPropagation(),T=!0,I(a.clientX)});const K=a=>{T&&I(a.clientX)},Z=()=>{T=!1};document.addEventListener("mousemove",K),document.addEventListener("mouseup",Z),o.addEventListener("touchstart",a=>{T=!0;const l=a.touches[0];l&&I(l.clientX)},{passive:!0});const ee=a=>{if(T){const l=a.touches[0];l&&I(l.clientX)}},te=()=>{T=!1};document.addEventListener("touchmove",ee,{passive:!0}),document.addEventListener("touchend",te);const ie=()=>{x&&clearTimeout(x),x=setTimeout(()=>{L&&s.classList.add("hfp-hidden")},3e3)},O=r instanceof ShadowRoot?r.host:r,re=()=>{s.classList.remove("hfp-hidden"),ie()},se=()=>{L&&s.classList.add("hfp-hidden")};return O.addEventListener("mousemove",re),O.addEventListener("mouseleave",se),{updateTime(a,l){const _=l>0?Math.min(a,l):a,ce=l>0?_/l*100:0;d.style.width=`${ce}%`,c.textContent=`${de(_)} / ${de(l)}`},updatePlaying(a){L=a,n.innerHTML=a?Ae:ne,n.setAttribute("aria-label",a?"Pause":"Play"),a?ie():s.classList.remove("hfp-hidden")},updateSpeed(a){i.indexOf(a),h.textContent=H(a),Q(a)},updateMuted(a){E=a,f.innerHTML=P(a,A),f.setAttribute("aria-label",a?"Unmute":"Mute")},updateVolume(a){A=a,y.style.width=`${a*100}%`,m.setAttribute("aria-valuenow",String(Math.round(a*100))),f.innerHTML=P(E,a)},setVolumeControlsHidden(a){v.style.display=a?"none":""},show(){s.style.display=""},hide(){s.style.display="none"},destroy(){document.removeEventListener("mousemove",K),document.removeEventListener("mouseup",Z),document.removeEventListener("touchmove",ee),document.removeEventListener("touchend",te),document.removeEventListener("mousemove",q),document.removeEventListener("mouseup",W),document.removeEventListener("touchmove",G),document.removeEventListener("touchend",X),document.removeEventListener("click",J),O.removeEventListener("mousemove",re),O.removeEventListener("mouseleave",se),x&&clearTimeout(x),s.remove()}}}function ke(r,t,e,i,s,n=!1){const o=i?i.split(",").map(Number).filter(p=>!isNaN(p)&&p>0):void 0,d={...o?{speedPresets:o}:{},audioLocked:n},c=Te(r,s,d);return c.updateMuted(t),c.updateVolume(e),c}function le(r,t,e){return t?(e||(e=document.createElement("img"),e.className="hfp-poster",r.appendChild(e)),e.src=t,e):(e==null||e.remove(),null)}function xe(r){return r.composedPath().some(t=>t instanceof HTMLElement&&t.classList.contains("hfp-controls"))}let D=null;function Me(r,t){if(typeof CSSStyleSheet<"u")try{D||(D=new CSSStyleSheet,D.replaceSync(t)),r.adoptedStyleSheets=[D];return}catch{}const e=document.createElement("style");e.textContent=t,r.appendChild(e)}function Se(){const r=document.createElement("div");r.className="hfp-container";const t=document.createElement("iframe");return t.className="hfp-iframe",t.sandbox.add("allow-scripts","allow-same-origin"),t.allow="autoplay; fullscreen",t.referrerPolicy="no-referrer",t.title="HyperFrames Composition",r.appendChild(t),{container:r,iframe:t}}function Le(r,t,e,i){const s=r.offsetWidth,n=r.offsetHeight;if(s===0||n===0)return;const o=Math.min(s/e,n/i);t.style.width=`${e}px`,t.style.height=`${i}px`,t.style.transform=`translate(-50%, -50%) scale(${o})`}const Pe=100;class Re{constructor(t){u(this,"_raf",null);u(this,"_lastUpdateMs",0);this._callbacks=t}start(t,e,i,s){this.stop();const n=()=>{if(s()){this._raf=null;return}let o;try{o=t.time()}catch{this._raf=null;return}const d=i();d>0&&(o=Math.min(o,d));const c=d>0&&o>=d,p=performance.now();if((p-this._lastUpdateMs>Pe||c)&&(this._lastUpdateMs=p,this._callbacks.onTimeUpdate(o,d)),c){if(this._callbacks.getLoop()){this._callbacks.restart();return}try{t.pause()}catch{}this._callbacks.onPaused(),this._raf=null;return}this._raf=requestAnimationFrame(n)};this._raf=requestAnimationFrame(n)}stop(){this._raf!==null&&(cancelAnimationFrame(this._raf),this._raf=null)}get isRunning(){return this._raf!==null}}function Ie(r){const t=Array.from(r.querySelectorAll("[data-composition-id]"));if(t.length===0)return r.body?[r.body]:[];const e=[];for(const i of t)De(i)||e.push(i);return Oe(r),e}function Oe(r){const t=r.body;if(!t||typeof console>"u"||typeof console.warn!="function")return;const e=t.querySelectorAll("audio[data-start], video[data-start]");if(e.length===0)return;const i=[];for(const s of e)s.closest("[data-composition-id]")||i.push(s);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 De(r){let t=r.parentElement;for(;t;){if(t.hasAttribute("data-composition-id"))return!0;t=t.parentElement}return!1}function j(r){var e;const t=(e=r.ownerDocument)==null?void 0:e.defaultView;return t&&r instanceof t.Element?!0:r instanceof Element}function w(r){var e;if(!j(r)||r.tagName!=="AUDIO"&&r.tagName!=="VIDEO")return!1;const t=(e=r.ownerDocument)==null?void 0:e.defaultView;return t&&r instanceof t.HTMLMediaElement?!0:r instanceof HTMLMediaElement}const Ne=.05,Fe=2;class Ue{constructor(t){u(this,"_entries",[]);u(this,"_mediaObserver");u(this,"_playbackErrorPosted",!1);u(this,"_audioOwner","runtime");u(this,"_urlAudioEntry",null);u(this,"_urlAudioSrc",null);u(this,"_dispatchEvent");u(this,"_getMuted");u(this,"_getVolume");u(this,"_getPlaybackRate");u(this,"_getCurrentTime");u(this,"_isPaused");this._dispatchEvent=t.dispatchEvent,this._getMuted=t.getMuted,this._getVolume=t.getVolume,this._getPlaybackRate=t.getPlaybackRate,this._getCurrentTime=t.getCurrentTime,this._isPaused=t.isPaused}get audioOwner(){return this._audioOwner}get entries(){return this._entries}resetForIframeLoad(){this._playbackErrorPosted=!1;const t=this._audioOwner==="parent";this._audioOwner="runtime",this.pauseAll(),this.teardownObserver(),t&&this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"runtime",reason:"iframe-reload"}}))}destroy(){this.teardownObserver();for(const t of this._entries)t.el.pause(),t.el.src="";this._entries=[],this._urlAudioEntry=null,this._urlAudioSrc=null}updateMuted(t){for(const e of this._entries)e.el.muted=t}updateVolume(t){for(const e of this._entries)e.el.volume=t}updatePlaybackRate(t){for(const e of this._entries)e.el.playbackRate=t}_playEntry(t){t.el.src&&t.el.play().catch(e=>this._reportPlaybackError(e))}_playEntryIfActive(t){this._refreshEntryBounds(t);const e=this._getCurrentTime()-t.start;e<0||e>=t.duration||this._playEntry(t)}_refreshEntryBounds(t){var s;if(!((s=t.source)!=null&&s.isConnected))return;const e=parseFloat(t.source.getAttribute("data-start")||"0");t.start=Number.isFinite(e)?e:0;const i=parseFloat(t.source.getAttribute("data-duration")||"");t.duration=Number.isFinite(i)&&i>0?i:Number.POSITIVE_INFINITY}_gateEntryPlayback(t,e){return e<0||e>=t.duration?(t.el.paused||t.el.pause(),t.driftSamples=0,!1):(this._audioOwner==="parent"&&!this._isPaused()&&t.el.paused&&this._playEntry(t),!0)}playAll(){for(const t of this._entries)this._playEntryIfActive(t)}pauseAll(){for(const t of this._entries)t.el.pause()}stopAdoptedMedia(){for(const t of this._entries)t.source&&t.el.pause()}seekAll(t){for(const e of this._entries){this._refreshEntryBounds(e);const i=t-e.start;i>=0&&i<e.duration&&(e.el.currentTime=i)}}mirrorTime(t,e){const i=(e==null?void 0:e.force)===!0;for(const s of this._entries){this._refreshEntryBounds(s);const n=t-s.start;this._gateEntryPlayback(s,n)&&(Math.abs(s.el.currentTime-n)>Ne?(s.driftSamples+=1,(i||s.driftSamples>=Fe)&&(s.el.currentTime=n,s.driftSamples=0)):s.driftSamples=0)}}promoteToParentProxy(t,e){if(this._audioOwner==="parent")return;if(this._audioOwner="parent",t)for(const s of t.querySelectorAll("video, audio"))w(s)&&(s.muted=!0);const i=this._getCurrentTime();e?e(i,{force:!0}):this.mirrorTime(i,{force:!0}),this._isPaused()||this.playAll(),this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"parent",reason:"autoplay-blocked"}}))}setupFromIframe(t){const e=t.querySelectorAll("audio[data-start], video[data-start]");for(const i of e)w(i)&&this._adoptIframeMedia(i);this._observeDynamicMedia(t)}setupFromUrl(t){if(this._urlAudioSrc===t&&this._urlAudioEntry)return;this.teardownUrlAudio();const e=this._createEntry(t,"audio",0,1/0);this._urlAudioEntry=e,this._urlAudioSrc=e?t:null,e&&this._audioOwner==="parent"&&!this._isPaused()&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),this.playAll())}teardownUrlAudio(){const t=this._urlAudioEntry;if(this._urlAudioEntry=null,this._urlAudioSrc=null,!t)return;t.el.pause(),t.el.src="";const e=this._entries.indexOf(t);e!==-1&&this._entries.splice(e,1)}teardownObserver(){var t;(t=this._mediaObserver)==null||t.disconnect(),this._mediaObserver=void 0}_reportPlaybackError(t){this._playbackErrorPosted||(this._playbackErrorPosted=!0,this._dispatchEvent(new CustomEvent("playbackerror",{detail:{source:"parent-proxy",error:t}})))}_createEntry(t,e,i,s,n){if(this._entries.some(p=>p.el.src===t))return null;const o=e==="video"?document.createElement("video"):new Audio;o.preload="auto",o.src=t,o.load(),o.muted=this._getMuted(),o.volume=this._getVolume();const d=this._getPlaybackRate();d!==1&&(o.playbackRate=d);const c={el:o,start:i,duration:s,driftSamples:0,source:n};return this._entries.push(c),c}_resolveIframeMediaSrc(t){var i;const e=t.getAttribute("src")||((i=t.querySelector("source"))==null?void 0:i.getAttribute("src"));return e?new URL(e,t.ownerDocument.baseURI).href:null}_adoptIframeMedia(t){if(t.preload==="metadata"||t.preload==="none")return;const e=this._resolveIframeMediaSrc(t);if(!e)return;const i=parseFloat(t.getAttribute("data-start")||"0"),s=parseFloat(t.getAttribute("data-duration")||"Infinity"),n=t.tagName==="VIDEO"?"video":"audio",o=this._createEntry(e,n,i,s,t);o&&this._audioOwner==="parent"&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),this._isPaused()||this._playEntryIfActive(o))}_detachIframeMedia(t){const e=this._resolveIframeMediaSrc(t);if(!e)return;const i=this._entries.findIndex(n=>n.el.src===e);if(i===-1)return;const s=this._entries[i];s.el.pause(),s.el.src="",this._entries.splice(i,1)}_observeDynamicMedia(t){if(this.teardownObserver(),typeof MutationObserver>"u"||!t.body)return;const e=new MutationObserver(n=>{for(const o of n){if(o.type==="attributes"&&o.attributeName==="preload"){const d=o.target;w(d)&&d.matches("audio[data-start], video[data-start]")&&d.preload==="auto"&&this._adoptIframeMedia(d);continue}for(const d of o.addedNodes){if(!j(d))continue;const c=[];w(d)&&d.matches("audio[data-start], video[data-start]")&&c.push(d);const p=d.querySelectorAll("audio[data-start], video[data-start]");for(const h of p)w(h)&&c.push(h);for(const h of c)this._adoptIframeMedia(h)}for(const d of o.removedNodes){if(!j(d))continue;const c=[];w(d)&&d.matches("audio[data-start], video[data-start]")&&c.push(d);const p=d.querySelectorAll("audio[data-start], video[data-start]");for(const h of p)w(h)&&c.push(h);for(const h of c)this._detachIframeMedia(h)}}}),i={childList:!0,subtree:!0,attributes:!0,attributeFilter:["preload"]},s=Ie(t);for(const n of s)e.observe(n,i);this._mediaObserver=e}}const He=100;function Ve(r,t,e,i){const s=(r.frame??0)/t,n=e.duration>0?Math.min(s,e.duration):s,o=!e.paused,d=!r.isPlaying,c=e.duration>0&&n>=e.duration&&(o||r.isPlaying);if(c&&i.getLoop())return i.media.audioOwner==="parent"&&i.media.pauseAll(),i.seek(0),i.play(),{...e,currentTime:n,paused:!1};const p={...e,currentTime:n,paused:d};i.media.audioOwner==="parent"&&(o&&d?i.media.pauseAll():!o&&!d&&i.media.playAll(),i.media.mirrorTime(n));const h=performance.now(),g=d!==e.paused;return(h-e.lastUpdateMs>He||g)&&(p.lastUpdateMs=h,i.updateControlsTime(n,e.duration),i.updateControlsPlaying(!d),i.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:n}}))),c&&(i.media.audioOwner==="parent"&&i.media.pauseAll(),p.paused=!0,i.updateControlsPlaying(!1),i.dispatchEvent(new Event("ended"))),p}const he=30;function $e(r){return Array.isArray(r)?r.filter(t=>typeof t=="object"&&t!==null&&typeof t.id=="string"&&typeof t.start=="number"&&typeof t.duration=="number"):[]}function ze(r,t,e){var s;if(r.source!==t)return;const i=r.data;if(!(!i||i.source!=="hf-preview")){if(i.type==="shader-transition-state"){const n=i.state&&typeof i.state=="object"?i.state:{};e.shaderLoader.update(n,e.getShaderLoadingMode()),e.dispatchEvent(new CustomEvent("shadertransitionstate",{detail:{compositionId:i.compositionId,state:n}}));return}if(i.type==="ready"){e.onRuntimeReady();return}if(i.type==="state"){e.setPlaybackState(Ve({frame:i.frame??0,isPlaying:!!i.isPlaying},he,e.getPlaybackState(),e));return}if(i.type==="media-autoplay-blocked"){if(((s=e.shouldPromoteMediaAutoplayFallback)==null?void 0:s.call(e))===!1)return;let n=null;try{n=e.getIframeDoc()}catch{}e.media.promoteToParentProxy(n,(o,d)=>e.media.mirrorTime(o,d)),e.sendControl("set-media-output-muted",{muted:!0});return}if(i.type==="timeline"&&i.durationInFrames>0){if(Number.isFinite(i.durationInFrames)){const n=e.getPlaybackState(),o=i.durationInFrames/he;e.setPlaybackState({...n,duration:o}),e.updateControlsTime(n.currentTime,o),e.onRuntimeTimelineReady(o)}e.setScenes($e(i.scenes));return}i.type==="stage-size"&&Number.isFinite(i.width)&&i.width>0&&Number.isFinite(i.height)&&i.height>0&&e.setCompositionSize(i.width,i.height)}}const k="shader-capture-scale",M="shader-loading",je="__hf_shader_capture_scale",Be="__hf_shader_loading",N=["Preparing scene transitions","Sampling outgoing scene motion","Sampling incoming scene motion","Caching transition frames","Finalizing transition preview"];function B(r){if(r===null)return null;const t=Number(r);return!Number.isFinite(t)||t<=0?null:String(Math.min(1,Math.max(.25,t)))}function qe(r){if(r===null||r.trim()==="")return"composition";const t=r.trim().toLowerCase();return t==="none"||t==="false"||t==="0"||t==="off"?"none":t==="player"||t==="true"||t==="1"||t==="on"?"player":"composition"}function ue(r,t,e){e===null?r.delete(t):r.set(t,e)}function We(r,t,e){const i=r.indexOf("#"),s=i>=0?r.slice(0,i):r,n=i>=0?r.slice(i):"",o=s.indexOf("?"),d=o>=0?s.slice(0,o):s,c=o>=0?s.slice(o+1):"",p=new URLSearchParams(c);ue(p,je,t),ue(p,Be,e==="composition"?null:e);const h=p.toString();return`${d}${h?`?${h}`:""}${n}`}function Ge(r,t,e){if(t===null&&e==="composition")return r;const i=[];t!==null&&i.push(`window.__HF_SHADER_CAPTURE_SCALE=${JSON.stringify(t)};`),e!=="composition"&&i.push(`window.__HF_SHADER_LOADING=${JSON.stringify(e)};`);const s=`<script data-hyperframes-player-shader-options>${i.join("")}<\/script>`;return/<head\b[^>]*>/i.test(r)?r.replace(/<head\b[^>]*>/i,n=>`${n}${s}`):/<html\b[^>]*>/i.test(r)?r.replace(/<html\b[^>]*>/i,n=>`${n}${s}`):`${s}${r}`}function S(r){return qe(r.getAttribute(M))}function Xe(r){return Number(B(r.getAttribute(k))??"1")}function V(r,t){return We(t,B(r.getAttribute(k)),S(r))}function $(r,t){return Ge(t,B(r.getAttribute(k)),S(r))}function Ye(){const 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;const t=f=>{f.preventDefault(),f.stopPropagation()};for(const f of["selectstart","dragstart","pointerdown","mousedown","click","dblclick","contextmenu","touchstart"])r.addEventListener(f,t,{capture:!0});const e=document.createElement("div");e.className="hfp-shader-loader-panel",e.draggable=!1;const 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("");const s=document.createElement("div");s.className="hfp-shader-loader-title";const n=document.createElement("span");n.className="hfp-shader-loader-title-text",n.textContent=N[0],s.appendChild(n);const o=document.createElement("div");o.className="hfp-shader-loader-detail",o.textContent="Rendering animated scene samples for shader transitions.";const d=document.createElement("div");d.className="hfp-shader-loader-track",d.setAttribute("aria-hidden","true");const c=document.createElement("div");c.className="hfp-shader-loader-fill",d.appendChild(c);const p=document.createElement("div");p.className="hfp-shader-loader-progress";const h=f=>{const b=document.createElement("div");b.className="hfp-shader-loader-row";const m=document.createElement("span");m.className="hfp-shader-loader-label",m.textContent=f;const y=document.createElement("span");return y.className="hfp-shader-loader-value",b.appendChild(m),b.appendChild(y),p.appendChild(b),{row:b,label:m,value:y}},g=h("transition"),v=h("transition frame");return e.appendChild(i),e.appendChild(s),e.appendChild(o),e.appendChild(d),e.appendChild(p),r.appendChild(e),{root:r,fill:c,title:n,detail:o,transitionValue:g.value,frameLabel:v.label,frameValue:v.value,frameRow:v.row}}const Qe=420;class Je{constructor(t){u(this,"_el");u(this,"_hideTimeout",null);this._el=t}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(t,e){if(e!=="player"){this.reset();return}if(t.ready||!t.loading){this.hide();return}const i=typeof t.progress=="number"&&Number.isFinite(t.progress)?t.progress:0,s=typeof t.total=="number"&&Number.isFinite(t.total)?t.total:0,n=s>0?Math.min(1,Math.max(0,i/s)):0,o=Math.min(N.length-1,Math.floor(n*N.length));this._el.title.textContent=N[o]||"Preparing scene transitions",this._el.detail.textContent=t.phase==="cached"?"Loading cached transition frames before playback.":t.phase==="finalizing"?"Uploading transition textures for smooth playback.":"Rendering animated scene samples for shader transitions.",this._el.fill.style.transform=`scaleX(${n})`,this._el.transitionValue.textContent=t.currentTransition!==void 0&&t.transitionTotal!==void 0?`${t.currentTransition}/${t.transitionTotal}`:s>0?`${i}/${s}`:"";const d=t.transitionFrame!==void 0&&t.transitionFrames!==void 0?`${t.transitionFrame}/${t.transitionFrames}`:"";this._el.frameLabel.textContent=t.phase==="cached"?"cached transition frames":t.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(n*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)}}const Ke=.1,Ze=5;function z(r){return!Number.isFinite(r)||r<=0?1:Math.max(Ke,Math.min(Ze,r))}class et extends HTMLElement{constructor(){super();u(this,"shadow");u(this,"container");u(this,"iframe");u(this,"posterEl",null);u(this,"controlsApi",null);u(this,"resizeObserver");u(this,"shaderLoader");u(this,"probe");u(this,"_ready",!1);u(this,"_currentTime",0);u(this,"_duration",0);u(this,"_paused",!0);u(this,"_lastUpdateMs",0);u(this,"_volume",1);u(this,"_compositionWidth",1920);u(this,"_compositionHeight",1080);u(this,"_directTimelineAdapter",null);u(this,"_directTimelineClock");u(this,"_parentTickRaf",null);u(this,"_media");u(this,"_scenes",[]);this.shadow=this.attachShadow({mode:"open"}),Me(this.shadow,we),{container:this.container,iframe:this.iframe}=Se(),this.shadow.appendChild(this.container);const e=Ye();this.shadow.appendChild(e.root),this.shaderLoader=new Je(e),this._media=new Ue({dispatchEvent:i=>this.dispatchEvent(i),getMuted:()=>this.muted,getVolume:()=>this._volume,getPlaybackRate:()=>this.playbackRate,getCurrentTime:()=>this._currentTime,isPaused:()=>this._paused}),this._directTimelineClock=new Re({onTimeUpdate:(i,s)=>{var n;this._currentTime=i,(n=this.controlsApi)==null||n.updateTime(i,s),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:i}}))},getLoop:()=>this.loop,restart:()=>{this.seek(0),this.play()},onPaused:()=>{var i;this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,(i=this.controlsApi)==null||i.updatePlaying(!1),this.dispatchEvent(new Event("ended"))},onEnded:()=>this.loop}),this.probe=new be(this.iframe,{onReady:i=>this._onProbeReady(i),onError:i=>this.dispatchEvent(new CustomEvent("error",{detail:{message:i}}))}),this.addEventListener("click",i=>{xe(i)||(this._paused?this.play():this.pause())}),this.resizeObserver=new ResizeObserver(()=>this._rescale()),this._onMessage=this._onMessage.bind(this),this._onIframeLoad=this._onIframeLoad.bind(this)}static get observedAttributes(){return["src","srcdoc","width","height","controls","muted","audio-locked","volume","poster","playback-rate","audio-src",k,M]}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=le(this.shadow,this.getAttribute("poster"),this.posterEl)),this.hasAttribute("audio-src")&&this._media.setupFromUrl(this.getAttribute("audio-src")),this.hasAttribute("srcdoc")&&(this.iframe.srcdoc=$(this,this.getAttribute("srcdoc"))),this.hasAttribute("src")&&(this.iframe.src=V(this,this.getAttribute("src"))),!this.hasAttribute("audio-locked")&&this._isLockedHostEnvironment()&&this._applyAudioLock(!0)}disconnectedCallback(){var e;this.resizeObserver.disconnect(),window.removeEventListener("message",this._onMessage),this.iframe.removeEventListener("load",this._onIframeLoad),this.probe.stop(),this._directTimelineClock.stop(),this._stopParentTickClock(),this._directTimelineAdapter=null,this.shaderLoader.destroy(),this._media.destroy(),(e=this.controlsApi)==null||e.destroy()}attributeChangedCallback(e,i,s){var n,o,d,c,p;switch(e){case"src":s&&(this._ready=!1,this.iframe.src=V(this,s));break;case"srcdoc":this._ready=!1,s!==null?this.iframe.srcdoc=$(this,s):this.iframe.removeAttribute("srcdoc");break;case"width":this._compositionWidth=U(s)??1920,this._rescale();break;case"height":this._compositionHeight=U(s)??1080,this._rescale();break;case"controls":s!==null?this._setupControls():((n=this.controlsApi)==null||n.destroy(),this.controlsApi=null);break;case"poster":this.posterEl=le(this.shadow,s,this.posterEl);break;case"playback-rate":{const h=z(parseFloat(s||"1"));this._media.updatePlaybackRate(h),this._sendControl("set-playback-rate",{playbackRate:h}),(d=(o=this._directTimelineAdapter)==null?void 0:o.timeScale)==null||d.call(o,h),(c=this.controlsApi)==null||c.updateSpeed(h),this.dispatchEvent(new Event("ratechange"));break}case"muted":this._handleMutedChange(s);break;case"audio-locked":this._applyAudioLock(s!==null);break;case"volume":{const h=Math.max(0,Math.min(1,parseFloat(s||"1")));this._volume=h,this._media.updateVolume(h),this._sendControl("set-volume",{volume:h}),(p=this.controlsApi)==null||p.updateVolume(h),this.dispatchEvent(new Event("volumechange"));break}case"audio-src":s?this._media.setupFromUrl(s):this._media.teardownUrlAudio();break;case k:case M:this._reloadShaderOptions();break}}get iframeElement(){return this.iframe}get scenes(){return this._scenes}play(){var i,s;(i=this.posterEl)==null||i.remove(),this.posterEl=null,this._duration>0&&this._currentTime>=this._duration&&this.seek(0),this._paused=!1;const e=this._tryDirectTimelinePlay();e||(this._sendControl("play"),this._ready&&!this._directTimelineAdapter&&this._startParentTickClock()),this._media.audioOwner==="parent"&&this._media.playAll(),(s=this.controlsApi)==null||s.updatePlaying(!0),this.dispatchEvent(new Event("play")),e&&this._directTimelineAdapter&&this._directTimelineClock.start(this._directTimelineAdapter,()=>this._currentTime,()=>this._duration,()=>this._paused)}pause(){var e;this._tryDirectTimelinePause()||this._sendControl("pause"),this._directTimelineClock.stop(),this._stopParentTickClock(),this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,(e=this.controlsApi)==null||e.updatePlaying(!1),this.dispatchEvent(new Event("pause"))}stopMedia(){this._sendControl("stop-media"),this._stopIframeMedia(),this._media.stopAdoptedMedia()}seek(e){var i,s;!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,(i=this.controlsApi)==null||i.updatePlaying(!1),(s=this.controlsApi)==null||s.updateTime(this._currentTime,this._duration)}setColorGrading(e,i){this._sendControl("set-color-grading",{target:e,grading:i})}clearColorGrading(e){this._sendControl("set-color-grading",{target:e,grading:null})}setColorGradingCompare(e,i){this._sendControl("set-color-grading-compare",{target:e,compare:i})}clearColorGradingCompare(e){this._sendControl("set-color-grading-compare",{target:e,compare:{enabled:!1}})}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 z(parseFloat(this.getAttribute("playback-rate")||"1"))}set playbackRate(e){this.setAttribute("playback-rate",String(z(e)))}get shaderCaptureScale(){return Xe(this)}set shaderCaptureScale(e){this.setAttribute(k,String(e))}get shaderLoading(){return S(this)}set shaderLoading(e){e==="composition"?this.removeAttribute(M):this.setAttribute(M,e)}get muted(){return this.hasAttribute("muted")}set muted(e){e?this.setAttribute("muted",""):this.removeAttribute("muted")}get audioLocked(){return this.hasAttribute("audio-locked")}set audioLocked(e){e?this.setAttribute("audio-locked",""):this.removeAttribute("audio-locked")}_isLockedHostEnvironment(){if(typeof navigator>"u")return!1;const e=navigator.userAgent||"";return/\bClaude\/\d/.test(e)&&/\bElectron\b/.test(e)}_isAudioLocked(){return this.hasAttribute("audio-locked")||this._isLockedHostEnvironment()}_isSlideshowPlayer(){return this.closest("hyperframes-slideshow")!==null}_handleMutedChange(e){var i;if(e===null&&this._isAudioLocked()){this.setAttribute("muted","");return}this._media.updateMuted(e!==null),this._setIframeMediaMuted(e!==null),this._sendControl("set-muted",{muted:e!==null}),(i=this.controlsApi)==null||i.updateMuted(e!==null),this.dispatchEvent(new Event("volumechange"))}_applyAudioLock(e){var i;e&&(this.muted=!0),(i=this.controlsApi)==null||i.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,i={}){var s;try{(s=this.iframe.contentWindow)==null||s.postMessage({source:"hf-parent",type:"control",action:e,...i},"*")}catch{}}_getSameOriginIframeDocument(){try{return this.iframe.contentDocument}catch{return null}}_setIframeMediaMuted(e){const i=this._getSameOriginIframeDocument();if(i)for(const s of i.querySelectorAll("video, audio"))w(s)&&(s.muted=e||s.defaultMuted)}_stopIframeMedia(){const e=this._getSameOriginIframeDocument();if(e)for(const i of e.querySelectorAll("video, audio"))w(i)&&i.pause()}_replayBridgeState(){this._sendControl("set-muted",{muted:this.muted}),this._sendControl("set-volume",{volume:this._volume}),this._sendControl("set-playback-rate",{playbackRate:this.playbackRate}),this._sendControl("set-native-media-sync-disabled",{disabled:this._isSlideshowPlayer()}),this._sendControl("set-web-audio-media-disabled",{disabled:this._isSlideshowPlayer()})}_reloadShaderOptions(){if(S(this)!=="player"&&this.shaderLoader.reset(),this.hasAttribute("srcdoc")){this.iframe.srcdoc=$(this,this.getAttribute("srcdoc")||"");return}this.hasAttribute("src")&&(this.iframe.src=V(this,this.getAttribute("src")||""))}_trySyncSeek(e){try{const i=this.iframe.contentWindow,s=i==null?void 0:i.__player;return typeof(s==null?void 0:s.seek)!="function"?!1:(s.seek.call(s,e),!0)}catch{return!1}}_withDirectTimeline(e){const i=this._directTimelineAdapter||this.probe.resolveDirectTimelineAdapter();if(!i)return!1;try{return e(i),this._directTimelineAdapter=i,!0}catch{return!1}}_tryDirectTimelineSeek(e){return this._withDirectTimeline(i=>{i.seek(e,!1),i.pause()})}_tryDirectTimelinePlay(){return this._withDirectTimeline(e=>void e.play())}_tryDirectTimelinePause(){return this._withDirectTimeline(e=>void e.pause())}_startParentTickClock(){this._stopParentTickClock();const e=()=>{if(this._paused){this._parentTickRaf=null;return}this._sendControl("tick"),this._parentTickRaf=requestAnimationFrame(e)};this._parentTickRaf=requestAnimationFrame(e)}_stopParentTickClock(){this._parentTickRaf!==null&&(cancelAnimationFrame(this._parentTickRaf),this._parentTickRaf=null)}_onMessage(e){ze(e,this.iframe.contentWindow,{getPlaybackState:()=>({currentTime:this._currentTime,duration:this._duration,paused:this._paused,lastUpdateMs:this._lastUpdateMs}),setPlaybackState:({currentTime:i,duration:s,paused:n,lastUpdateMs:o})=>{this._currentTime=i,this._duration=s,this._paused=n,this._lastUpdateMs=o},getShaderLoadingMode:()=>S(this),shaderLoader:this.shaderLoader,setCompositionSize:(i,s)=>{this._compositionWidth=i,this._compositionHeight=s,this._rescale()},sendControl:(i,s)=>this._sendControl(i,s),getIframeDoc:()=>this.iframe.contentDocument,onRuntimeReady:()=>this._replayBridgeState(),onRuntimeTimelineReady:i=>this._onRuntimeTimelineReady(i),shouldPromoteMediaAutoplayFallback:()=>!this._isSlideshowPlayer(),setScenes:i=>{this._scenes=i,this.dispatchEvent(new CustomEvent("scenes",{detail:{scenes:i}}))},updateControlsTime:(i,s)=>{var n;return(n=this.controlsApi)==null?void 0:n.updateTime(i,s)},updateControlsPlaying:i=>{var s;return(s=this.controlsApi)==null?void 0:s.updatePlaying(i)},dispatchEvent:i=>this.dispatchEvent(i),seek:i=>this.seek(i),play:()=>this.play(),getLoop:()=>this.loop,media:this._media})}_onRuntimeTimelineReady(e){var s;if(this._ready)return;this.probe.stop(),this._duration=e,this._directTimelineAdapter=null,this._ready=!0,(s=this.controlsApi)==null||s.updateTime(this._currentTime,e),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:e}}));const i=this._getSameOriginIframeDocument();i&&this._media.setupFromIframe(i),this._replayBridgeState(),this._setIframeMediaMuted(this.muted),this.hasAttribute("autoplay")&&this.play()}_onProbeReady({duration:e,adapter:i,compositionSize:s}){var n;this._duration=e,this._directTimelineAdapter=i.kind==="direct-timeline"?i.timeline:null,this._ready=!0,(n=this.controlsApi)==null||n.updateTime(0,e),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:e}})),s&&(this._compositionWidth=s.width,this._compositionHeight=s.height,this._rescale());try{const o=this.iframe.contentDocument;o&&this._media.setupFromIframe(o)}catch{}this._setIframeMediaMuted(this.muted),this.hasAttribute("autoplay")&&this.play()}_rescale(){Le(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=ke(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=>void(this.playbackRate=e),onMuteToggle:()=>void(this.muted=!this.muted),onVolumeChange:e=>void(this.volume=e)},this._isAudioLocked()))}get _audioOwner(){return this._media.audioOwner}get _parentMedia(){return this._media.entries}_mirrorParentMediaTime(e,i){this._media.mirrorTime(e,i)}_promoteToParentProxy(){let e=null;try{e=this.iframe.contentDocument}catch{}this._media.promoteToParentProxy(e,(i,s)=>this._mirrorParentMediaTime(i,s)),this._sendControl("set-media-output-muted",{muted:!0})}_observeDynamicMedia(e){this._media.setupFromIframe(e)}}customElements.get("hyperframes-player")||customElements.define("hyperframes-player",et);export{et as HyperframesPlayer,Ce as SPEED_PRESETS,H as formatSpeed,de as formatTime};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{g as P}from"./index-
|
|
1
|
+
import{g as P}from"./index-ysftPins.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
|