gsap-timeline-viewer 0.1.21 → 0.1.22

package/dist/gsap-timeline-viewer.iife.js

@@ -114,7 +114,7 @@ var GSAPTimelineViewer=function(b){"use strict";var Z=Object.defineProperty;var
           </div>
         </div>
       </div>
-    `,this.container=this.shadow.querySelector(".gtv-container"),this.playBtn=this.shadow.querySelector('[data-action="play"]'),this.loopDropdown=this.shadow.querySelector(".gtv-loop-dropdown"),this.loopMenu=this.shadow.querySelector("#loop-menu"),this.speedDropdown=this.shadow.querySelector(".gtv-speed-dropdown"),this.speedMenu=this.shadow.querySelector("#speed-menu"),this.timelineDropdown=this.shadow.querySelector(".gtv-timeline-dropdown"),this.timelineMenu=this.shadow.querySelector("#timeline-menu"),this.timeDisplay=this.shadow.querySelector(".gtv-time-display"),this.rulerInner=this.shadow.querySelector(".gtv-ruler-inner"),this.tracksScroll=this.shadow.querySelector(".gtv-tracks-scroll"),this.playhead=this.shadow.querySelector(".gtv-playhead"),this.scrubArea=this.shadow.querySelector(".gtv-scrub-area"),this.resizeHandle=this.shadow.querySelector(".gtv-resize-handle")}setupEventListeners(){this.shadow.addEventListener("click",n=>{const p=n.target.closest("[data-action]");if(!p)return;switch(p.dataset.action){case"play":this.togglePlay();break;case"rewind":this.playReverse();break;case"collapse":this.toggleCollapse();break;case"autofit":this.toggleAutofit();break;case"ease-curves":this.toggleEaseCurves();break}p.blur()});const e=this.loopDropdown.querySelector(".gtv-dropdown-trigger");let t=!1;e.addEventListener("mousedown",()=>{t=this.loopMenu.matches(":popover-open")}),e.addEventListener("click",n=>{n.stopPropagation(),this.speedMenu.hidePopover(),this.timelineMenu.hidePopover(),t||this.loopMenu.showPopover()}),this.loopMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.loopMenu,e):e.blur()});const i=this.speedDropdown.querySelector(".gtv-dropdown-trigger");let s=!1;i.addEventListener("mousedown",()=>{s=this.speedMenu.matches(":popover-open")}),i.addEventListener("click",n=>{n.stopPropagation(),this.loopMenu.hidePopover(),this.timelineMenu.hidePopover(),s||this.speedMenu.showPopover()}),this.speedMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.speedMenu,i):i.blur()}),this.speedMenu.querySelectorAll("[data-speed]").forEach(n=>{n.addEventListener("click",g=>{g.stopPropagation();const p=parseFloat(n.dataset.speed);this.setSpeed(p),this.speedMenu.hidePopover()})});const a=this.timelineDropdown.querySelector(".gtv-dropdown-trigger");let o=!1;a.addEventListener("mousedown",()=>{o=this.timelineMenu.matches(":popover-open")}),a.addEventListener("click",n=>{n.stopPropagation(),this.loopMenu.hidePopover(),this.speedMenu.hidePopover(),o||this.timelineMenu.showPopover()}),this.timelineMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.timelineMenu,a):a.blur()}),this.loopMenu.querySelectorAll("[data-loop]").forEach(n=>{n.addEventListener("click",g=>{g.stopPropagation();const p=n.dataset.loop;this.setLoopMode(p),this.loopMenu.hidePopover()})}),this.shadow.addEventListener("click",n=>{const p=n.target.closest(".gtv-track-bar");if(p){const h=p.closest(".gtv-track");(h==null?void 0:h.dataset.expandable)==="true"&&(n.stopPropagation(),h.classList.toggle("expanded"),requestAnimationFrame(()=>this.applyAutofit()))}}),this.scrubArea.addEventListener("mousedown",n=>this.startScrub(n)),this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown",n=>this.startScrub(n)),this.shadow.querySelector(".gtv-tracks-container").addEventListener("mousedown",n=>{n.target.closest(".gtv-track-bar")||this.startScrub(n)}),document.addEventListener("mousemove",n=>{this.onScrub(n),this.onResize(n),this.onPlayrangeDrag(n),this.onScrubberDrag(n)}),document.addEventListener("mouseup",()=>{this.endScrub(),this.endResize(),this.endPlayrangeDrag(),this.endScrubberDrag()}),this.resizeHandle.addEventListener("mousedown",n=>this.startResize(n)),this.shadow.querySelectorAll(".gtv-playrange-handle").forEach(n=>{n.addEventListener("mousedown",g=>this.startPlayrangeDrag(g))});const l=this.shadow.querySelector(".gtv-playrange-scrubber");l&&l.addEventListener("mousedown",n=>this.startScrubberDrag(n)),document.addEventListener("keydown",n=>{if(n.target===document.body)switch(n.code){case"Space":n.preventDefault(),this.togglePlay();break;case"KeyJ":n.preventDefault(),this.jumpToPrevPoint();break;case"KeyK":n.preventDefault(),this.jumpToNextPoint();break;case"KeyR":n.preventDefault(),this.playReverse();break;case"KeyO":n.preventDefault(),this.setLoopMode("oneshot");break;case"KeyL":n.preventDefault(),this.setLoopMode("loop");break;case"KeyP":n.preventDefault(),this.setLoopMode("pingpong");break;case"BracketLeft":n.preventDefault(),this.setPlayrangeStart();break;case"BracketRight":n.preventDefault(),this.setPlayrangeEnd();break;case"Backslash":n.preventDefault(),this.resetPlayrange();break}})}startScrub(e){this.timeline&&(e.preventDefault(),this.isDragging=!0,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",this.scrubToPosition(e))}onScrub(e){!this.isDragging||!this.timeline||this.scrubToPosition(e)}endScrub(){this.isDragging=!1,document.body.style.cursor="",document.body.style.userSelect=""}startResize(e){e.preventDefault(),this.isResizing=!0,document.body.style.cursor="ns-resize",document.body.style.userSelect="none"}onResize(e){if(!this.isResizing)return;const t=window.innerHeight,i=t-e.clientY;this.height=Math.max(100,Math.min(i,t-100)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}endResize(){this.isResizing&&(this.isResizing=!1,document.body.style.cursor="",document.body.style.userSelect="",this.saveSettings())}startPlayrangeDrag(e){e.preventDefault(),e.stopPropagation();const t=e.target.closest(".gtv-playrange-handle");t&&(this.draggingPlayrange=t.dataset.handle,document.body.style.cursor="ew-resize",document.body.style.userSelect="none")}onPlayrangeDrag(e){if(!this.draggingPlayrange)return;const t=this.shadow.querySelector(".gtv-playrange-track");if(!t)return;const i=t.getBoundingClientRect(),a=Math.max(0,Math.min(e.clientX-i.left,i.width))/i.width;this.draggingPlayrange==="start"?this.playrangeStart=Math.min(a,this.playrangeEnd-.01):this.playrangeEnd=Math.max(a,this.playrangeStart+.01),this.updatePlayrangeDisplay()}endPlayrangeDrag(){this.draggingPlayrange&&(this.draggingPlayrange=null,document.body.style.cursor="",document.body.style.userSelect="",this.saveSettings())}startScrubberDrag(e){this.timeline&&(e.preventDefault(),e.stopPropagation(),this.draggingScrubber=!0,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",this.onScrubberDrag(e))}onScrubberDrag(e){if(!this.draggingScrubber||!this.timeline)return;const t=this.shadow.querySelector(".gtv-playrange-track");if(!t)return;const i=t.getBoundingClientRect();let a=Math.max(0,Math.min(e.clientX-i.left,i.width))/i.width;a=Math.max(this.playrangeStart,Math.min(a,this.playrangeEnd)),this.timeline.progress(a),this.timeline.pause(),this.updatePlayState()}endScrubberDrag(){this.draggingScrubber&&(this.draggingScrubber=!1,document.body.style.cursor="",document.body.style.userSelect="")}updatePlayrangeDisplay(){const e=this.shadow.querySelector(".gtv-playrange-track"),t=this.shadow.querySelector(".gtv-playrange-handle-start"),i=this.shadow.querySelector(".gtv-playrange-handle-end"),s=this.shadow.querySelector(".gtv-playrange-active"),a=this.shadow.querySelector(".gtv-playrange-inactive-left"),o=this.shadow.querySelector(".gtv-playrange-inactive-right");if(e&&t&&i&&s&&a&&o){const l=this.playrangeStart*100,n=this.playrangeEnd*100,g=e.offsetLeft,p=e.offsetWidth;t.style.left=`${g+this.playrangeStart*p}px`,i.style.left=`${g+this.playrangeEnd*p}px`,s.style.left=`${l}%`,s.style.width=`${n-l}%`,a.style.width=`${l}%`,o.style.width=`${100-n}%`}}setPlayrangeStart(){if(!this.timeline)return;const e=this.timeline.progress();Math.abs(e-this.playrangeStart)<.001?this.playrangeStart=0:this.playrangeStart=Math.min(e,this.playrangeEnd-.01),this.updatePlayrangeDisplay(),this.saveSettings()}setPlayrangeEnd(){if(!this.timeline)return;const e=this.timeline.progress();Math.abs(e-this.playrangeEnd)<.001?this.playrangeEnd=1:this.playrangeEnd=Math.max(e,this.playrangeStart+.01),this.updatePlayrangeDisplay(),this.saveSettings()}resetPlayrange(){this.playrangeStart=0,this.playrangeEnd=1,this.updatePlayrangeDisplay(),this.saveSettings()}updateBodyPadding(){if(!this.manageBodyPadding)return;const e=this.collapsed?A:this.height;document.body.style.paddingBottom=`${e}px`}clearBodyPadding(){this.manageBodyPadding&&(document.body.style.paddingBottom="")}scrubToPosition(e){if(!this.timeline||!this.timelineData)return;const t=this.rulerInner.getBoundingClientRect(),s=Math.max(0,Math.min(e.clientX-t.left,t.width))/t.width;this.timeline.progress(s),this.timeline.pause(),this.updatePlayState()}togglePlay(){if(!this.timeline)return;const e=this.timeline.progress(),t=e<=this.playrangeStart,i=e>=this.playrangeEnd;this.timeline.paused()||i||t?i&&!this.timeline.reversed()?(this.timeline.progress(this.playrangeStart),this.timeline.play()):t&&this.timeline.reversed()?(this.timeline.reversed(!1),this.timeline.play()):this.timeline.play():this.timeline.pause(),this.updatePlayState()}playReverse(){this.timeline&&(this.timeline.progress()===0&&this.timeline.progress(1),this.timeline.reverse(),this.updatePlayState())}getTimePoints(){if(!this.timelineData)return[0];const e=new Set;return e.add(0),e.add(Math.round(this.timelineData.duration*1e3)/1e3),this.timelineData.tweens.forEach(t=>{e.add(Math.round(t.startTime*1e3)/1e3),e.add(Math.round(t.endTime*1e3)/1e3)}),Array.from(e).sort((t,i)=>t-i)}jumpToPrevPoint(){if(!this.timeline||!this.timelineData)return;const e=Math.round(this.timeline.time()*1e3)/1e3,t=this.getTimePoints(),i=this.playrangeStart*this.timelineData.duration;let s=i;for(const a of t)if(a<e-.001&&a>=i)s=a;else if(a>=e)break;this.timeline.time(Math.max(s,i)),this.timeline.pause(),this.updatePlayState()}jumpToNextPoint(){if(!this.timeline||!this.timelineData)return;const e=Math.round(this.timeline.time()*1e3)/1e3,t=this.getTimePoints(),i=this.playrangeEnd*this.timelineData.duration;let s=i;for(const a of t)if(a>e+.001&&a<=i){s=a;break}this.timeline.time(Math.min(s,i)),this.timeline.pause(),this.updatePlayState()}positionPopover(e,t){const i=t.getBoundingClientRect(),s=e.getBoundingClientRect(),a=i.left+i.width/2-s.width/2;let o;this.collapsed?o=i.top-s.height-4:o=i.bottom+4,e.style.position="fixed",e.style.left=`${a}px`,e.style.top=`${o}px`,e.style.margin="0"}setLoopMode(e){this.loopMode=e,this.updateLoopIcon(),this.updateLoopMenuSelection(),this.timeline&&this.timeline.repeat(this.loopMode==="loop"?-1:0),this.saveSettings()}updateLoopIcon(){const e=this.loopDropdown.querySelector(".gtv-dropdown-trigger"),t=e.querySelector(".icon-oneshot"),i=e.querySelector(".icon-loop"),s=e.querySelector(".icon-pingpong");t.style.display=this.loopMode==="oneshot"?"block":"none",i.style.display=this.loopMode==="loop"?"block":"none",s.style.display=this.loopMode==="pingpong"?"block":"none";const a={oneshot:"One Shot",loop:"Loop",pingpong:"Ping Pong"};e.setAttribute("title",a[this.loopMode])}updateLoopMenuSelection(){this.loopDropdown.querySelectorAll("[data-loop]").forEach(e=>{const t=e.dataset.loop;e.classList.toggle("selected",t===this.loopMode)})}setSpeed(e){this.speedIndex=$.indexOf(e),this.timeline&&this.timeline.timeScale(e),this.updateSpeedDisplay(),this.saveSettings()}updateSpeedDisplay(){const e=$[this.speedIndex],t=this.speedDropdown.querySelector(".gtv-speed-value");t.textContent=`${e}x`,this.speedMenu.querySelectorAll("[data-speed]").forEach(i=>{const s=parseFloat(i.dataset.speed);i.classList.toggle("selected",s===e)})}toggleCollapse(){this.collapsed=!this.collapsed,this.container.classList.toggle("collapsed",this.collapsed);const e=this.shadow.querySelector('[data-action="collapse"]');e.innerHTML=this.collapsed?'<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>':'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>',this.updateBodyPadding(),this.saveSettings()}toggleAutofit(){this.isAutofit=!this.isAutofit,this.shadow.querySelector('[data-action="autofit"]').classList.toggle("active",this.isAutofit),this.isAutofit&&this.applyAutofit(),this.saveSettings()}toggleEaseCurves(){this.showEaseCurves=!this.showEaseCurves,this.shadow.querySelector('[data-action="ease-curves"]').classList.toggle("active",this.showEaseCurves),this.container.classList.toggle("show-ease-curves",this.showEaseCurves),this.saveSettings()}applyAutofit(){if(!this.isAutofit||this.collapsed)return;const e=this.shadow.querySelectorAll(".gtv-track");let t=0;const i=36,s=30;e.forEach(g=>{if(t+=i,g.classList.contains("expanded")){const p=g.querySelectorAll(".gtv-stagger-child");t+=p.length*s}});const a=24,o=16,l=100,n=window.innerHeight-100;this.height=Math.max(l,Math.min(A+a+t+o,n)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}updatePlayState(){if(!this.timeline)return;const e=this.timeline.progress(),t=e>=this.playrangeEnd,i=e<=this.playrangeStart;this.isPlaying=!this.timeline.paused()&&!(t&&!this.timeline.reversed())&&!(i&&this.timeline.reversed());const s=this.playBtn.querySelector(".play-icon"),a=this.playBtn.querySelector(".pause-icon");s.style.display=this.isPlaying?"none":"block",a.style.display=this.isPlaying?"block":"none"}onTimelineUpdate(){this.updatePlayhead(),this.updateTimeDisplay(),this.updateActiveTracks(),this.updatePlayState(),this.checkPlayrangeConstraint()}checkPlayrangeConstraint(){if(!this.timeline||this.timeline.paused())return;const e=this.timeline.progress();if(this.loopMode==="pingpong"){e>=this.playrangeEnd&&!this.timeline.reversed()?this.timeline.reverse():e<=this.playrangeStart&&this.timeline.reversed()&&(this.timeline.reversed(!1),this.timeline.play());return}this.playrangeStart===0&&this.playrangeEnd===1||(e>=this.playrangeEnd?this.loopMode==="loop"?this.timeline.progress(this.playrangeStart):(this.timeline.progress(this.playrangeEnd),this.timeline.pause(),this.updatePlayState()):e<this.playrangeStart&&this.timeline.progress(this.playrangeStart))}updatePlayhead(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.progress();this.playhead.style.left=`${e*100}%`;const t=this.shadow.querySelector(".gtv-playrange-fill"),i=this.shadow.querySelector(".gtv-playrange-scrubber");t&&(t.style.width=`${e*100}%`),i&&(i.style.left=`${e*100}%`)}updateTimeDisplay(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.time(),t=this.timelineData.duration,i=this.timeDisplay.querySelector(".gtv-time-current"),s=this.timeDisplay.querySelector(".gtv-time-total");i.textContent=M(e),s.textContent=` / ${M(t)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i,s)=>{const a=this.timelineData.tweens[s],o=e>=a.startTime&&e<=a.endTime,l=i.dataset.color;o?i.style.background=`var(--gtv-track-${l}-active)`:i.style.background=`var(--gtv-track-${l})`})}renderTracks(){if(!this.timelineData)return;const{duration:e,tweens:t}=this.timelineData,i=this.shadow.querySelector(".gtv-empty");i.style.display=t.length>0?"none":"flex",this.renderRuler(e);const s=this.renderGridLines(e),a=t.map(l=>this.renderTrack(l,e)).join(""),o=this.tracksScroll.querySelector(".gtv-scrub-area");this.tracksScroll.innerHTML=s+a,this.tracksScroll.prepend(o),this.scrubArea=o}renderGridLines(e){const t=[],i=this.calculateInterval(e);for(let s=0;s<=e;s+=i){const a=s/e*100;t.push(`<div class="gtv-grid-line" style="left: ${a}%;"></div>`)}return t.join("")}renderRuler(e){const t=[],i=this.calculateInterval(e);for(let s=0;s<=e;s+=i){const a=s/e*100;t.push(`
+    `,this.container=this.shadow.querySelector(".gtv-container"),this.playBtn=this.shadow.querySelector('[data-action="play"]'),this.loopDropdown=this.shadow.querySelector(".gtv-loop-dropdown"),this.loopMenu=this.shadow.querySelector("#loop-menu"),this.speedDropdown=this.shadow.querySelector(".gtv-speed-dropdown"),this.speedMenu=this.shadow.querySelector("#speed-menu"),this.timelineDropdown=this.shadow.querySelector(".gtv-timeline-dropdown"),this.timelineMenu=this.shadow.querySelector("#timeline-menu"),this.timeDisplay=this.shadow.querySelector(".gtv-time-display"),this.rulerInner=this.shadow.querySelector(".gtv-ruler-inner"),this.tracksScroll=this.shadow.querySelector(".gtv-tracks-scroll"),this.playhead=this.shadow.querySelector(".gtv-playhead"),this.scrubArea=this.shadow.querySelector(".gtv-scrub-area"),this.resizeHandle=this.shadow.querySelector(".gtv-resize-handle")}setupEventListeners(){this.shadow.addEventListener("click",n=>{const p=n.target.closest("[data-action]");if(!p)return;switch(p.dataset.action){case"play":this.togglePlay();break;case"rewind":this.playReverse();break;case"collapse":this.toggleCollapse();break;case"autofit":this.toggleAutofit();break;case"ease-curves":this.toggleEaseCurves();break}p.blur()});const e=this.loopDropdown.querySelector(".gtv-dropdown-trigger");let t=!1;e.addEventListener("mousedown",()=>{t=this.loopMenu.matches(":popover-open")}),e.addEventListener("click",n=>{n.stopPropagation(),this.speedMenu.hidePopover(),this.timelineMenu.hidePopover(),t||this.loopMenu.showPopover()}),this.loopMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.loopMenu,e):e.blur()});const i=this.speedDropdown.querySelector(".gtv-dropdown-trigger");let s=!1;i.addEventListener("mousedown",()=>{s=this.speedMenu.matches(":popover-open")}),i.addEventListener("click",n=>{n.stopPropagation(),this.loopMenu.hidePopover(),this.timelineMenu.hidePopover(),s||this.speedMenu.showPopover()}),this.speedMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.speedMenu,i):i.blur()}),this.speedMenu.querySelectorAll("[data-speed]").forEach(n=>{n.addEventListener("click",g=>{g.stopPropagation();const p=parseFloat(n.dataset.speed);this.setSpeed(p),this.speedMenu.hidePopover()})});const a=this.timelineDropdown.querySelector(".gtv-dropdown-trigger");let o=!1;a.addEventListener("mousedown",()=>{o=this.timelineMenu.matches(":popover-open")}),a.addEventListener("click",n=>{n.stopPropagation(),this.loopMenu.hidePopover(),this.speedMenu.hidePopover(),o||this.timelineMenu.showPopover()}),this.timelineMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.timelineMenu,a):a.blur()}),this.loopMenu.querySelectorAll("[data-loop]").forEach(n=>{n.addEventListener("click",g=>{g.stopPropagation();const p=n.dataset.loop;this.setLoopMode(p),this.loopMenu.hidePopover()})}),this.shadow.addEventListener("click",n=>{const p=n.target.closest(".gtv-track-bar");if(p){const h=p.closest(".gtv-track");(h==null?void 0:h.dataset.expandable)==="true"&&(n.stopPropagation(),h.classList.toggle("expanded"),requestAnimationFrame(()=>this.applyAutofit()))}}),this.scrubArea.addEventListener("mousedown",n=>this.startScrub(n)),this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown",n=>this.startScrub(n)),this.shadow.querySelector(".gtv-tracks-container").addEventListener("mousedown",n=>{n.target.closest(".gtv-track-bar")||this.startScrub(n)}),document.addEventListener("mousemove",n=>{this.onScrub(n),this.onResize(n),this.onPlayrangeDrag(n),this.onScrubberDrag(n)}),document.addEventListener("mouseup",()=>{this.endScrub(),this.endResize(),this.endPlayrangeDrag(),this.endScrubberDrag()}),this.resizeHandle.addEventListener("mousedown",n=>this.startResize(n)),this.shadow.querySelectorAll(".gtv-playrange-handle").forEach(n=>{n.addEventListener("mousedown",g=>this.startPlayrangeDrag(g))});const l=this.shadow.querySelector(".gtv-playrange-scrubber");l&&l.addEventListener("mousedown",n=>this.startScrubberDrag(n)),document.addEventListener("keydown",n=>{if(n.target===document.body)switch(n.code){case"Space":n.preventDefault(),this.togglePlay();break;case"KeyJ":n.preventDefault(),this.jumpToPrevPoint();break;case"KeyK":n.preventDefault(),this.jumpToNextPoint();break;case"KeyR":n.preventDefault(),this.playReverse();break;case"KeyO":n.preventDefault(),this.setLoopMode("oneshot");break;case"KeyL":n.preventDefault(),this.setLoopMode("loop");break;case"KeyP":n.preventDefault(),this.setLoopMode("pingpong");break;case"BracketLeft":n.preventDefault(),this.setPlayrangeStart();break;case"BracketRight":n.preventDefault(),this.setPlayrangeEnd();break;case"Backslash":n.preventDefault(),this.resetPlayrange();break}})}startScrub(e){this.timeline&&(e.preventDefault(),this.isDragging=!0,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",this.scrubToPosition(e))}onScrub(e){!this.isDragging||!this.timeline||this.scrubToPosition(e)}endScrub(){this.isDragging=!1,document.body.style.cursor="",document.body.style.userSelect=""}startResize(e){e.preventDefault(),this.isResizing=!0,document.body.style.cursor="ns-resize",document.body.style.userSelect="none"}onResize(e){if(!this.isResizing)return;const t=window.innerHeight,i=t-e.clientY;this.height=Math.max(100,Math.min(i,t-100)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}endResize(){this.isResizing&&(this.isResizing=!1,document.body.style.cursor="",document.body.style.userSelect="",this.saveSettings())}startPlayrangeDrag(e){e.preventDefault(),e.stopPropagation();const t=e.target.closest(".gtv-playrange-handle");t&&(this.draggingPlayrange=t.dataset.handle,document.body.style.cursor="ew-resize",document.body.style.userSelect="none")}onPlayrangeDrag(e){if(!this.draggingPlayrange)return;const t=this.shadow.querySelector(".gtv-playrange-track");if(!t)return;const i=t.getBoundingClientRect(),a=Math.max(0,Math.min(e.clientX-i.left,i.width))/i.width;this.draggingPlayrange==="start"?this.playrangeStart=Math.min(a,this.playrangeEnd-.01):this.playrangeEnd=Math.max(a,this.playrangeStart+.01),this.updatePlayrangeDisplay()}endPlayrangeDrag(){this.draggingPlayrange&&(this.draggingPlayrange=null,document.body.style.cursor="",document.body.style.userSelect="",this.saveSettings())}startScrubberDrag(e){this.timeline&&(e.preventDefault(),e.stopPropagation(),this.draggingScrubber=!0,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",this.onScrubberDrag(e))}onScrubberDrag(e){if(!this.draggingScrubber||!this.timeline)return;const t=this.shadow.querySelector(".gtv-playrange-track");if(!t)return;const i=t.getBoundingClientRect();let a=Math.max(0,Math.min(e.clientX-i.left,i.width))/i.width;a=Math.max(this.playrangeStart,Math.min(a,this.playrangeEnd)),this.timeline.progress(a),this.timeline.pause(),this.updatePlayState()}endScrubberDrag(){this.draggingScrubber&&(this.draggingScrubber=!1,document.body.style.cursor="",document.body.style.userSelect="")}updatePlayrangeDisplay(){const e=this.shadow.querySelector(".gtv-playrange-track"),t=this.shadow.querySelector(".gtv-playrange-handle-start"),i=this.shadow.querySelector(".gtv-playrange-handle-end"),s=this.shadow.querySelector(".gtv-playrange-active"),a=this.shadow.querySelector(".gtv-playrange-inactive-left"),o=this.shadow.querySelector(".gtv-playrange-inactive-right");if(e&&t&&i&&s&&a&&o){const l=this.playrangeStart*100,n=this.playrangeEnd*100,g=e.offsetLeft,p=e.offsetWidth;t.style.left=`${g+this.playrangeStart*p}px`,i.style.left=`${g+this.playrangeEnd*p}px`,s.style.left=`${l}%`,s.style.width=`${n-l}%`,a.style.width=`${l}%`,o.style.width=`${100-n}%`}}setPlayrangeStart(){if(!this.timeline)return;const e=this.timeline.progress();Math.abs(e-this.playrangeStart)<.001?this.playrangeStart=0:this.playrangeStart=Math.min(e,this.playrangeEnd-.01),this.updatePlayrangeDisplay(),this.saveSettings()}setPlayrangeEnd(){if(!this.timeline)return;const e=this.timeline.progress();Math.abs(e-this.playrangeEnd)<.001?this.playrangeEnd=1:this.playrangeEnd=Math.max(e,this.playrangeStart+.01),this.updatePlayrangeDisplay(),this.saveSettings()}resetPlayrange(){this.playrangeStart=0,this.playrangeEnd=1,this.updatePlayrangeDisplay(),this.saveSettings()}updateBodyPadding(){if(!this.manageBodyPadding)return;const e=this.collapsed?A:this.height;document.body.style.paddingBottom=`${e}px`}clearBodyPadding(){this.manageBodyPadding&&(document.body.style.paddingBottom="")}scrubToPosition(e){if(!this.timeline||!this.timelineData)return;const t=this.rulerInner.getBoundingClientRect(),s=Math.max(0,Math.min(e.clientX-t.left,t.width))/t.width;this.timeline.progress(s),this.timeline.pause(),this.updatePlayState()}togglePlay(){if(!this.timeline)return;const e=this.timeline.progress(),t=e<=this.playrangeStart,i=e>=this.playrangeEnd;this.timeline.paused()||i||t?i&&!this.timeline.reversed()?(this.timeline.progress(this.playrangeStart),this.timeline.play()):t&&this.timeline.reversed()?(this.timeline.reversed(!1),this.timeline.play()):this.timeline.play():this.timeline.pause(),this.updatePlayState()}playReverse(){this.timeline&&(this.timeline.progress()===0&&this.timeline.progress(1),this.timeline.reverse(),this.updatePlayState())}getTimePoints(){if(!this.timelineData)return[0];const e=new Set;return e.add(0),e.add(Math.round(this.timelineData.duration*1e3)/1e3),this.timelineData.tweens.forEach(t=>{e.add(Math.round(t.startTime*1e3)/1e3),e.add(Math.round(t.endTime*1e3)/1e3)}),Array.from(e).sort((t,i)=>t-i)}jumpToPrevPoint(){if(!this.timeline||!this.timelineData)return;const e=Math.round(this.timeline.time()*1e3)/1e3,t=this.getTimePoints(),i=this.playrangeStart*this.timelineData.duration;let s=i;for(const a of t)if(a<e-.001&&a>=i)s=a;else if(a>=e)break;this.timeline.time(Math.max(s,i)),this.timeline.pause(),this.updatePlayState()}jumpToNextPoint(){if(!this.timeline||!this.timelineData)return;const e=Math.round(this.timeline.time()*1e3)/1e3,t=this.getTimePoints(),i=this.playrangeEnd*this.timelineData.duration;let s=i;for(const a of t)if(a>e+.001&&a<=i){s=a;break}this.timeline.time(Math.min(s,i)),this.timeline.pause(),this.updatePlayState()}positionPopover(e,t){const i=t.getBoundingClientRect(),s=e.getBoundingClientRect(),a=i.left+i.width/2-s.width/2;let o;this.collapsed?o=i.top-s.height-4:o=i.bottom+4,e.style.position="fixed",e.style.left=`${a}px`,e.style.top=`${o}px`,e.style.margin="0"}setLoopMode(e){this.loopMode=e,this.updateLoopIcon(),this.updateLoopMenuSelection(),this.timeline&&this.timeline.repeat(this.loopMode==="loop"?-1:0),this.saveSettings()}updateLoopIcon(){const e=this.loopDropdown.querySelector(".gtv-dropdown-trigger"),t=e.querySelector(".icon-oneshot"),i=e.querySelector(".icon-loop"),s=e.querySelector(".icon-pingpong");t.style.display=this.loopMode==="oneshot"?"block":"none",i.style.display=this.loopMode==="loop"?"block":"none",s.style.display=this.loopMode==="pingpong"?"block":"none";const a={oneshot:"One Shot",loop:"Loop",pingpong:"Ping Pong"};e.setAttribute("title",a[this.loopMode])}updateLoopMenuSelection(){this.loopDropdown.querySelectorAll("[data-loop]").forEach(e=>{const t=e.dataset.loop;e.classList.toggle("selected",t===this.loopMode)})}setSpeed(e){this.speedIndex=$.indexOf(e),this.timeline&&this.timeline.timeScale(e),this.updateSpeedDisplay(),this.saveSettings()}updateSpeedDisplay(){const e=$[this.speedIndex],t=this.speedDropdown.querySelector(".gtv-speed-value");t.textContent=`${e}x`,this.speedMenu.querySelectorAll("[data-speed]").forEach(i=>{const s=parseFloat(i.dataset.speed);i.classList.toggle("selected",s===e)})}toggleCollapse(){this.collapsed=!this.collapsed,this.container.classList.toggle("collapsed",this.collapsed);const e=this.shadow.querySelector('[data-action="collapse"]');e.innerHTML=this.collapsed?'<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>':'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>',this.updateBodyPadding(),this.saveSettings()}toggleAutofit(){this.isAutofit=!this.isAutofit,this.shadow.querySelector('[data-action="autofit"]').classList.toggle("active",this.isAutofit),this.isAutofit&&this.applyAutofit(),this.saveSettings()}toggleEaseCurves(){this.showEaseCurves=!this.showEaseCurves,this.shadow.querySelector('[data-action="ease-curves"]').classList.toggle("active",this.showEaseCurves),this.container.classList.toggle("show-ease-curves",this.showEaseCurves),this.saveSettings()}applyAutofit(){if(!this.isAutofit||this.collapsed)return;const e=this.shadow.querySelectorAll(".gtv-track");let t=0;const i=36,s=30;e.forEach(g=>{if(t+=i,g.classList.contains("expanded")){const p=g.querySelectorAll(".gtv-stagger-child");t+=p.length*s}});const a=24,o=16,l=100,n=window.innerHeight-100;this.height=Math.max(l,Math.min(A+a+t+o,n)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}updatePlayState(){if(!this.timeline)return;const e=this.timeline.progress(),t=e>=this.playrangeEnd,i=e<=this.playrangeStart;this.isPlaying=!this.timeline.paused()&&!(t&&!this.timeline.reversed())&&!(i&&this.timeline.reversed());const s=this.playBtn.querySelector(".play-icon"),a=this.playBtn.querySelector(".pause-icon");s.style.display=this.isPlaying?"none":"block",a.style.display=this.isPlaying?"block":"none"}onTimelineUpdate(){this.updatePlayhead(),this.updateTimeDisplay(),this.updateActiveTracks(),this.updatePlayState(),this.checkPlayrangeConstraint()}checkPlayrangeConstraint(){if(!this.timeline||this.timeline.paused())return;const e=this.timeline.progress();if(this.loopMode==="pingpong"){e>=this.playrangeEnd&&!this.timeline.reversed()?this.timeline.reverse():e<=this.playrangeStart&&this.timeline.reversed()&&(this.timeline.reversed(!1),this.timeline.play());return}this.playrangeStart===0&&this.playrangeEnd===1||(e>=this.playrangeEnd?this.loopMode==="loop"?this.timeline.progress(this.playrangeStart):(this.timeline.progress(this.playrangeEnd),this.timeline.pause(),this.updatePlayState()):e<this.playrangeStart&&this.timeline.progress(this.playrangeStart))}updatePlayhead(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.progress();this.playhead.style.left=`${e*100}%`;const t=this.shadow.querySelector(".gtv-playrange-fill"),i=this.shadow.querySelector(".gtv-playrange-scrubber");if(t){const s=this.playrangeStart*100,a=e*100;t.style.left=`${s}%`,t.style.width=`${Math.max(0,a-s)}%`}i&&(i.style.left=`${e*100}%`)}updateTimeDisplay(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.time(),t=this.timelineData.duration,i=this.timeDisplay.querySelector(".gtv-time-current"),s=this.timeDisplay.querySelector(".gtv-time-total");i.textContent=M(e),s.textContent=` / ${M(t)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i,s)=>{const a=this.timelineData.tweens[s],o=e>=a.startTime&&e<=a.endTime,l=i.dataset.color;o?i.style.background=`var(--gtv-track-${l}-active)`:i.style.background=`var(--gtv-track-${l})`})}renderTracks(){if(!this.timelineData)return;const{duration:e,tweens:t}=this.timelineData,i=this.shadow.querySelector(".gtv-empty");i.style.display=t.length>0?"none":"flex",this.renderRuler(e);const s=this.renderGridLines(e),a=t.map(l=>this.renderTrack(l,e)).join(""),o=this.tracksScroll.querySelector(".gtv-scrub-area");this.tracksScroll.innerHTML=s+a,this.tracksScroll.prepend(o),this.scrubArea=o}renderGridLines(e){const t=[],i=this.calculateInterval(e);for(let s=0;s<=e;s+=i){const a=s/e*100;t.push(`<div class="gtv-grid-line" style="left: ${a}%;"></div>`)}return t.join("")}renderRuler(e){const t=[],i=this.calculateInterval(e);for(let s=0;s<=e;s+=i){const a=s/e*100;t.push(`
         <div class="gtv-ruler-marker" style="left: ${a}%;">
           <div class="gtv-ruler-marker-line"></div>
           <span class="gtv-ruler-marker-label">${M(s,!1)}s</span>

package/dist/gsap-timeline-viewer.js

@@ -663,7 +663,11 @@ class I extends HTMLElement {
     const e = this.timeline.progress();
     this.playhead.style.left = `${e * 100}%`;
     const t = this.shadow.querySelector(".gtv-playrange-fill"), i = this.shadow.querySelector(".gtv-playrange-scrubber");
-    t && (t.style.width = `${e * 100}%`), i && (i.style.left = `${e * 100}%`);
+    if (t) {
+      const s = this.playrangeStart * 100, a = e * 100;
+      t.style.left = `${s}%`, t.style.width = `${Math.max(0, a - s)}%`;
+    }
+    i && (i.style.left = `${e * 100}%`);
   }
   updateTimeDisplay() {
     if (!this.timeline || !this.timelineData) return;

package/dist/gsap-timeline-viewer.umd.cjs

@@ -114,7 +114,7 @@
           </div>
         </div>
       </div>
-    `,this.container=this.shadow.querySelector(".gtv-container"),this.playBtn=this.shadow.querySelector('[data-action="play"]'),this.loopDropdown=this.shadow.querySelector(".gtv-loop-dropdown"),this.loopMenu=this.shadow.querySelector("#loop-menu"),this.speedDropdown=this.shadow.querySelector(".gtv-speed-dropdown"),this.speedMenu=this.shadow.querySelector("#speed-menu"),this.timelineDropdown=this.shadow.querySelector(".gtv-timeline-dropdown"),this.timelineMenu=this.shadow.querySelector("#timeline-menu"),this.timeDisplay=this.shadow.querySelector(".gtv-time-display"),this.rulerInner=this.shadow.querySelector(".gtv-ruler-inner"),this.tracksScroll=this.shadow.querySelector(".gtv-tracks-scroll"),this.playhead=this.shadow.querySelector(".gtv-playhead"),this.scrubArea=this.shadow.querySelector(".gtv-scrub-area"),this.resizeHandle=this.shadow.querySelector(".gtv-resize-handle")}setupEventListeners(){this.shadow.addEventListener("click",n=>{const p=n.target.closest("[data-action]");if(!p)return;switch(p.dataset.action){case"play":this.togglePlay();break;case"rewind":this.playReverse();break;case"collapse":this.toggleCollapse();break;case"autofit":this.toggleAutofit();break;case"ease-curves":this.toggleEaseCurves();break}p.blur()});const e=this.loopDropdown.querySelector(".gtv-dropdown-trigger");let t=!1;e.addEventListener("mousedown",()=>{t=this.loopMenu.matches(":popover-open")}),e.addEventListener("click",n=>{n.stopPropagation(),this.speedMenu.hidePopover(),this.timelineMenu.hidePopover(),t||this.loopMenu.showPopover()}),this.loopMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.loopMenu,e):e.blur()});const i=this.speedDropdown.querySelector(".gtv-dropdown-trigger");let s=!1;i.addEventListener("mousedown",()=>{s=this.speedMenu.matches(":popover-open")}),i.addEventListener("click",n=>{n.stopPropagation(),this.loopMenu.hidePopover(),this.timelineMenu.hidePopover(),s||this.speedMenu.showPopover()}),this.speedMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.speedMenu,i):i.blur()}),this.speedMenu.querySelectorAll("[data-speed]").forEach(n=>{n.addEventListener("click",g=>{g.stopPropagation();const p=parseFloat(n.dataset.speed);this.setSpeed(p),this.speedMenu.hidePopover()})});const a=this.timelineDropdown.querySelector(".gtv-dropdown-trigger");let o=!1;a.addEventListener("mousedown",()=>{o=this.timelineMenu.matches(":popover-open")}),a.addEventListener("click",n=>{n.stopPropagation(),this.loopMenu.hidePopover(),this.speedMenu.hidePopover(),o||this.timelineMenu.showPopover()}),this.timelineMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.timelineMenu,a):a.blur()}),this.loopMenu.querySelectorAll("[data-loop]").forEach(n=>{n.addEventListener("click",g=>{g.stopPropagation();const p=n.dataset.loop;this.setLoopMode(p),this.loopMenu.hidePopover()})}),this.shadow.addEventListener("click",n=>{const p=n.target.closest(".gtv-track-bar");if(p){const h=p.closest(".gtv-track");(h==null?void 0:h.dataset.expandable)==="true"&&(n.stopPropagation(),h.classList.toggle("expanded"),requestAnimationFrame(()=>this.applyAutofit()))}}),this.scrubArea.addEventListener("mousedown",n=>this.startScrub(n)),this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown",n=>this.startScrub(n)),this.shadow.querySelector(".gtv-tracks-container").addEventListener("mousedown",n=>{n.target.closest(".gtv-track-bar")||this.startScrub(n)}),document.addEventListener("mousemove",n=>{this.onScrub(n),this.onResize(n),this.onPlayrangeDrag(n),this.onScrubberDrag(n)}),document.addEventListener("mouseup",()=>{this.endScrub(),this.endResize(),this.endPlayrangeDrag(),this.endScrubberDrag()}),this.resizeHandle.addEventListener("mousedown",n=>this.startResize(n)),this.shadow.querySelectorAll(".gtv-playrange-handle").forEach(n=>{n.addEventListener("mousedown",g=>this.startPlayrangeDrag(g))});const l=this.shadow.querySelector(".gtv-playrange-scrubber");l&&l.addEventListener("mousedown",n=>this.startScrubberDrag(n)),document.addEventListener("keydown",n=>{if(n.target===document.body)switch(n.code){case"Space":n.preventDefault(),this.togglePlay();break;case"KeyJ":n.preventDefault(),this.jumpToPrevPoint();break;case"KeyK":n.preventDefault(),this.jumpToNextPoint();break;case"KeyR":n.preventDefault(),this.playReverse();break;case"KeyO":n.preventDefault(),this.setLoopMode("oneshot");break;case"KeyL":n.preventDefault(),this.setLoopMode("loop");break;case"KeyP":n.preventDefault(),this.setLoopMode("pingpong");break;case"BracketLeft":n.preventDefault(),this.setPlayrangeStart();break;case"BracketRight":n.preventDefault(),this.setPlayrangeEnd();break;case"Backslash":n.preventDefault(),this.resetPlayrange();break}})}startScrub(e){this.timeline&&(e.preventDefault(),this.isDragging=!0,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",this.scrubToPosition(e))}onScrub(e){!this.isDragging||!this.timeline||this.scrubToPosition(e)}endScrub(){this.isDragging=!1,document.body.style.cursor="",document.body.style.userSelect=""}startResize(e){e.preventDefault(),this.isResizing=!0,document.body.style.cursor="ns-resize",document.body.style.userSelect="none"}onResize(e){if(!this.isResizing)return;const t=window.innerHeight,i=t-e.clientY;this.height=Math.max(100,Math.min(i,t-100)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}endResize(){this.isResizing&&(this.isResizing=!1,document.body.style.cursor="",document.body.style.userSelect="",this.saveSettings())}startPlayrangeDrag(e){e.preventDefault(),e.stopPropagation();const t=e.target.closest(".gtv-playrange-handle");t&&(this.draggingPlayrange=t.dataset.handle,document.body.style.cursor="ew-resize",document.body.style.userSelect="none")}onPlayrangeDrag(e){if(!this.draggingPlayrange)return;const t=this.shadow.querySelector(".gtv-playrange-track");if(!t)return;const i=t.getBoundingClientRect(),a=Math.max(0,Math.min(e.clientX-i.left,i.width))/i.width;this.draggingPlayrange==="start"?this.playrangeStart=Math.min(a,this.playrangeEnd-.01):this.playrangeEnd=Math.max(a,this.playrangeStart+.01),this.updatePlayrangeDisplay()}endPlayrangeDrag(){this.draggingPlayrange&&(this.draggingPlayrange=null,document.body.style.cursor="",document.body.style.userSelect="",this.saveSettings())}startScrubberDrag(e){this.timeline&&(e.preventDefault(),e.stopPropagation(),this.draggingScrubber=!0,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",this.onScrubberDrag(e))}onScrubberDrag(e){if(!this.draggingScrubber||!this.timeline)return;const t=this.shadow.querySelector(".gtv-playrange-track");if(!t)return;const i=t.getBoundingClientRect();let a=Math.max(0,Math.min(e.clientX-i.left,i.width))/i.width;a=Math.max(this.playrangeStart,Math.min(a,this.playrangeEnd)),this.timeline.progress(a),this.timeline.pause(),this.updatePlayState()}endScrubberDrag(){this.draggingScrubber&&(this.draggingScrubber=!1,document.body.style.cursor="",document.body.style.userSelect="")}updatePlayrangeDisplay(){const e=this.shadow.querySelector(".gtv-playrange-track"),t=this.shadow.querySelector(".gtv-playrange-handle-start"),i=this.shadow.querySelector(".gtv-playrange-handle-end"),s=this.shadow.querySelector(".gtv-playrange-active"),a=this.shadow.querySelector(".gtv-playrange-inactive-left"),o=this.shadow.querySelector(".gtv-playrange-inactive-right");if(e&&t&&i&&s&&a&&o){const l=this.playrangeStart*100,n=this.playrangeEnd*100,g=e.offsetLeft,p=e.offsetWidth;t.style.left=`${g+this.playrangeStart*p}px`,i.style.left=`${g+this.playrangeEnd*p}px`,s.style.left=`${l}%`,s.style.width=`${n-l}%`,a.style.width=`${l}%`,o.style.width=`${100-n}%`}}setPlayrangeStart(){if(!this.timeline)return;const e=this.timeline.progress();Math.abs(e-this.playrangeStart)<.001?this.playrangeStart=0:this.playrangeStart=Math.min(e,this.playrangeEnd-.01),this.updatePlayrangeDisplay(),this.saveSettings()}setPlayrangeEnd(){if(!this.timeline)return;const e=this.timeline.progress();Math.abs(e-this.playrangeEnd)<.001?this.playrangeEnd=1:this.playrangeEnd=Math.max(e,this.playrangeStart+.01),this.updatePlayrangeDisplay(),this.saveSettings()}resetPlayrange(){this.playrangeStart=0,this.playrangeEnd=1,this.updatePlayrangeDisplay(),this.saveSettings()}updateBodyPadding(){if(!this.manageBodyPadding)return;const e=this.collapsed?A:this.height;document.body.style.paddingBottom=`${e}px`}clearBodyPadding(){this.manageBodyPadding&&(document.body.style.paddingBottom="")}scrubToPosition(e){if(!this.timeline||!this.timelineData)return;const t=this.rulerInner.getBoundingClientRect(),s=Math.max(0,Math.min(e.clientX-t.left,t.width))/t.width;this.timeline.progress(s),this.timeline.pause(),this.updatePlayState()}togglePlay(){if(!this.timeline)return;const e=this.timeline.progress(),t=e<=this.playrangeStart,i=e>=this.playrangeEnd;this.timeline.paused()||i||t?i&&!this.timeline.reversed()?(this.timeline.progress(this.playrangeStart),this.timeline.play()):t&&this.timeline.reversed()?(this.timeline.reversed(!1),this.timeline.play()):this.timeline.play():this.timeline.pause(),this.updatePlayState()}playReverse(){this.timeline&&(this.timeline.progress()===0&&this.timeline.progress(1),this.timeline.reverse(),this.updatePlayState())}getTimePoints(){if(!this.timelineData)return[0];const e=new Set;return e.add(0),e.add(Math.round(this.timelineData.duration*1e3)/1e3),this.timelineData.tweens.forEach(t=>{e.add(Math.round(t.startTime*1e3)/1e3),e.add(Math.round(t.endTime*1e3)/1e3)}),Array.from(e).sort((t,i)=>t-i)}jumpToPrevPoint(){if(!this.timeline||!this.timelineData)return;const e=Math.round(this.timeline.time()*1e3)/1e3,t=this.getTimePoints(),i=this.playrangeStart*this.timelineData.duration;let s=i;for(const a of t)if(a<e-.001&&a>=i)s=a;else if(a>=e)break;this.timeline.time(Math.max(s,i)),this.timeline.pause(),this.updatePlayState()}jumpToNextPoint(){if(!this.timeline||!this.timelineData)return;const e=Math.round(this.timeline.time()*1e3)/1e3,t=this.getTimePoints(),i=this.playrangeEnd*this.timelineData.duration;let s=i;for(const a of t)if(a>e+.001&&a<=i){s=a;break}this.timeline.time(Math.min(s,i)),this.timeline.pause(),this.updatePlayState()}positionPopover(e,t){const i=t.getBoundingClientRect(),s=e.getBoundingClientRect(),a=i.left+i.width/2-s.width/2;let o;this.collapsed?o=i.top-s.height-4:o=i.bottom+4,e.style.position="fixed",e.style.left=`${a}px`,e.style.top=`${o}px`,e.style.margin="0"}setLoopMode(e){this.loopMode=e,this.updateLoopIcon(),this.updateLoopMenuSelection(),this.timeline&&this.timeline.repeat(this.loopMode==="loop"?-1:0),this.saveSettings()}updateLoopIcon(){const e=this.loopDropdown.querySelector(".gtv-dropdown-trigger"),t=e.querySelector(".icon-oneshot"),i=e.querySelector(".icon-loop"),s=e.querySelector(".icon-pingpong");t.style.display=this.loopMode==="oneshot"?"block":"none",i.style.display=this.loopMode==="loop"?"block":"none",s.style.display=this.loopMode==="pingpong"?"block":"none";const a={oneshot:"One Shot",loop:"Loop",pingpong:"Ping Pong"};e.setAttribute("title",a[this.loopMode])}updateLoopMenuSelection(){this.loopDropdown.querySelectorAll("[data-loop]").forEach(e=>{const t=e.dataset.loop;e.classList.toggle("selected",t===this.loopMode)})}setSpeed(e){this.speedIndex=$.indexOf(e),this.timeline&&this.timeline.timeScale(e),this.updateSpeedDisplay(),this.saveSettings()}updateSpeedDisplay(){const e=$[this.speedIndex],t=this.speedDropdown.querySelector(".gtv-speed-value");t.textContent=`${e}x`,this.speedMenu.querySelectorAll("[data-speed]").forEach(i=>{const s=parseFloat(i.dataset.speed);i.classList.toggle("selected",s===e)})}toggleCollapse(){this.collapsed=!this.collapsed,this.container.classList.toggle("collapsed",this.collapsed);const e=this.shadow.querySelector('[data-action="collapse"]');e.innerHTML=this.collapsed?'<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>':'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>',this.updateBodyPadding(),this.saveSettings()}toggleAutofit(){this.isAutofit=!this.isAutofit,this.shadow.querySelector('[data-action="autofit"]').classList.toggle("active",this.isAutofit),this.isAutofit&&this.applyAutofit(),this.saveSettings()}toggleEaseCurves(){this.showEaseCurves=!this.showEaseCurves,this.shadow.querySelector('[data-action="ease-curves"]').classList.toggle("active",this.showEaseCurves),this.container.classList.toggle("show-ease-curves",this.showEaseCurves),this.saveSettings()}applyAutofit(){if(!this.isAutofit||this.collapsed)return;const e=this.shadow.querySelectorAll(".gtv-track");let t=0;const i=36,s=30;e.forEach(g=>{if(t+=i,g.classList.contains("expanded")){const p=g.querySelectorAll(".gtv-stagger-child");t+=p.length*s}});const a=24,o=16,l=100,n=window.innerHeight-100;this.height=Math.max(l,Math.min(A+a+t+o,n)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}updatePlayState(){if(!this.timeline)return;const e=this.timeline.progress(),t=e>=this.playrangeEnd,i=e<=this.playrangeStart;this.isPlaying=!this.timeline.paused()&&!(t&&!this.timeline.reversed())&&!(i&&this.timeline.reversed());const s=this.playBtn.querySelector(".play-icon"),a=this.playBtn.querySelector(".pause-icon");s.style.display=this.isPlaying?"none":"block",a.style.display=this.isPlaying?"block":"none"}onTimelineUpdate(){this.updatePlayhead(),this.updateTimeDisplay(),this.updateActiveTracks(),this.updatePlayState(),this.checkPlayrangeConstraint()}checkPlayrangeConstraint(){if(!this.timeline||this.timeline.paused())return;const e=this.timeline.progress();if(this.loopMode==="pingpong"){e>=this.playrangeEnd&&!this.timeline.reversed()?this.timeline.reverse():e<=this.playrangeStart&&this.timeline.reversed()&&(this.timeline.reversed(!1),this.timeline.play());return}this.playrangeStart===0&&this.playrangeEnd===1||(e>=this.playrangeEnd?this.loopMode==="loop"?this.timeline.progress(this.playrangeStart):(this.timeline.progress(this.playrangeEnd),this.timeline.pause(),this.updatePlayState()):e<this.playrangeStart&&this.timeline.progress(this.playrangeStart))}updatePlayhead(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.progress();this.playhead.style.left=`${e*100}%`;const t=this.shadow.querySelector(".gtv-playrange-fill"),i=this.shadow.querySelector(".gtv-playrange-scrubber");t&&(t.style.width=`${e*100}%`),i&&(i.style.left=`${e*100}%`)}updateTimeDisplay(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.time(),t=this.timelineData.duration,i=this.timeDisplay.querySelector(".gtv-time-current"),s=this.timeDisplay.querySelector(".gtv-time-total");i.textContent=M(e),s.textContent=` / ${M(t)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i,s)=>{const a=this.timelineData.tweens[s],o=e>=a.startTime&&e<=a.endTime,l=i.dataset.color;o?i.style.background=`var(--gtv-track-${l}-active)`:i.style.background=`var(--gtv-track-${l})`})}renderTracks(){if(!this.timelineData)return;const{duration:e,tweens:t}=this.timelineData,i=this.shadow.querySelector(".gtv-empty");i.style.display=t.length>0?"none":"flex",this.renderRuler(e);const s=this.renderGridLines(e),a=t.map(l=>this.renderTrack(l,e)).join(""),o=this.tracksScroll.querySelector(".gtv-scrub-area");this.tracksScroll.innerHTML=s+a,this.tracksScroll.prepend(o),this.scrubArea=o}renderGridLines(e){const t=[],i=this.calculateInterval(e);for(let s=0;s<=e;s+=i){const a=s/e*100;t.push(`<div class="gtv-grid-line" style="left: ${a}%;"></div>`)}return t.join("")}renderRuler(e){const t=[],i=this.calculateInterval(e);for(let s=0;s<=e;s+=i){const a=s/e*100;t.push(`
+    `,this.container=this.shadow.querySelector(".gtv-container"),this.playBtn=this.shadow.querySelector('[data-action="play"]'),this.loopDropdown=this.shadow.querySelector(".gtv-loop-dropdown"),this.loopMenu=this.shadow.querySelector("#loop-menu"),this.speedDropdown=this.shadow.querySelector(".gtv-speed-dropdown"),this.speedMenu=this.shadow.querySelector("#speed-menu"),this.timelineDropdown=this.shadow.querySelector(".gtv-timeline-dropdown"),this.timelineMenu=this.shadow.querySelector("#timeline-menu"),this.timeDisplay=this.shadow.querySelector(".gtv-time-display"),this.rulerInner=this.shadow.querySelector(".gtv-ruler-inner"),this.tracksScroll=this.shadow.querySelector(".gtv-tracks-scroll"),this.playhead=this.shadow.querySelector(".gtv-playhead"),this.scrubArea=this.shadow.querySelector(".gtv-scrub-area"),this.resizeHandle=this.shadow.querySelector(".gtv-resize-handle")}setupEventListeners(){this.shadow.addEventListener("click",n=>{const p=n.target.closest("[data-action]");if(!p)return;switch(p.dataset.action){case"play":this.togglePlay();break;case"rewind":this.playReverse();break;case"collapse":this.toggleCollapse();break;case"autofit":this.toggleAutofit();break;case"ease-curves":this.toggleEaseCurves();break}p.blur()});const e=this.loopDropdown.querySelector(".gtv-dropdown-trigger");let t=!1;e.addEventListener("mousedown",()=>{t=this.loopMenu.matches(":popover-open")}),e.addEventListener("click",n=>{n.stopPropagation(),this.speedMenu.hidePopover(),this.timelineMenu.hidePopover(),t||this.loopMenu.showPopover()}),this.loopMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.loopMenu,e):e.blur()});const i=this.speedDropdown.querySelector(".gtv-dropdown-trigger");let s=!1;i.addEventListener("mousedown",()=>{s=this.speedMenu.matches(":popover-open")}),i.addEventListener("click",n=>{n.stopPropagation(),this.loopMenu.hidePopover(),this.timelineMenu.hidePopover(),s||this.speedMenu.showPopover()}),this.speedMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.speedMenu,i):i.blur()}),this.speedMenu.querySelectorAll("[data-speed]").forEach(n=>{n.addEventListener("click",g=>{g.stopPropagation();const p=parseFloat(n.dataset.speed);this.setSpeed(p),this.speedMenu.hidePopover()})});const a=this.timelineDropdown.querySelector(".gtv-dropdown-trigger");let o=!1;a.addEventListener("mousedown",()=>{o=this.timelineMenu.matches(":popover-open")}),a.addEventListener("click",n=>{n.stopPropagation(),this.loopMenu.hidePopover(),this.speedMenu.hidePopover(),o||this.timelineMenu.showPopover()}),this.timelineMenu.addEventListener("toggle",n=>{n.newState==="open"?this.positionPopover(this.timelineMenu,a):a.blur()}),this.loopMenu.querySelectorAll("[data-loop]").forEach(n=>{n.addEventListener("click",g=>{g.stopPropagation();const p=n.dataset.loop;this.setLoopMode(p),this.loopMenu.hidePopover()})}),this.shadow.addEventListener("click",n=>{const p=n.target.closest(".gtv-track-bar");if(p){const h=p.closest(".gtv-track");(h==null?void 0:h.dataset.expandable)==="true"&&(n.stopPropagation(),h.classList.toggle("expanded"),requestAnimationFrame(()=>this.applyAutofit()))}}),this.scrubArea.addEventListener("mousedown",n=>this.startScrub(n)),this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown",n=>this.startScrub(n)),this.shadow.querySelector(".gtv-tracks-container").addEventListener("mousedown",n=>{n.target.closest(".gtv-track-bar")||this.startScrub(n)}),document.addEventListener("mousemove",n=>{this.onScrub(n),this.onResize(n),this.onPlayrangeDrag(n),this.onScrubberDrag(n)}),document.addEventListener("mouseup",()=>{this.endScrub(),this.endResize(),this.endPlayrangeDrag(),this.endScrubberDrag()}),this.resizeHandle.addEventListener("mousedown",n=>this.startResize(n)),this.shadow.querySelectorAll(".gtv-playrange-handle").forEach(n=>{n.addEventListener("mousedown",g=>this.startPlayrangeDrag(g))});const l=this.shadow.querySelector(".gtv-playrange-scrubber");l&&l.addEventListener("mousedown",n=>this.startScrubberDrag(n)),document.addEventListener("keydown",n=>{if(n.target===document.body)switch(n.code){case"Space":n.preventDefault(),this.togglePlay();break;case"KeyJ":n.preventDefault(),this.jumpToPrevPoint();break;case"KeyK":n.preventDefault(),this.jumpToNextPoint();break;case"KeyR":n.preventDefault(),this.playReverse();break;case"KeyO":n.preventDefault(),this.setLoopMode("oneshot");break;case"KeyL":n.preventDefault(),this.setLoopMode("loop");break;case"KeyP":n.preventDefault(),this.setLoopMode("pingpong");break;case"BracketLeft":n.preventDefault(),this.setPlayrangeStart();break;case"BracketRight":n.preventDefault(),this.setPlayrangeEnd();break;case"Backslash":n.preventDefault(),this.resetPlayrange();break}})}startScrub(e){this.timeline&&(e.preventDefault(),this.isDragging=!0,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",this.scrubToPosition(e))}onScrub(e){!this.isDragging||!this.timeline||this.scrubToPosition(e)}endScrub(){this.isDragging=!1,document.body.style.cursor="",document.body.style.userSelect=""}startResize(e){e.preventDefault(),this.isResizing=!0,document.body.style.cursor="ns-resize",document.body.style.userSelect="none"}onResize(e){if(!this.isResizing)return;const t=window.innerHeight,i=t-e.clientY;this.height=Math.max(100,Math.min(i,t-100)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}endResize(){this.isResizing&&(this.isResizing=!1,document.body.style.cursor="",document.body.style.userSelect="",this.saveSettings())}startPlayrangeDrag(e){e.preventDefault(),e.stopPropagation();const t=e.target.closest(".gtv-playrange-handle");t&&(this.draggingPlayrange=t.dataset.handle,document.body.style.cursor="ew-resize",document.body.style.userSelect="none")}onPlayrangeDrag(e){if(!this.draggingPlayrange)return;const t=this.shadow.querySelector(".gtv-playrange-track");if(!t)return;const i=t.getBoundingClientRect(),a=Math.max(0,Math.min(e.clientX-i.left,i.width))/i.width;this.draggingPlayrange==="start"?this.playrangeStart=Math.min(a,this.playrangeEnd-.01):this.playrangeEnd=Math.max(a,this.playrangeStart+.01),this.updatePlayrangeDisplay()}endPlayrangeDrag(){this.draggingPlayrange&&(this.draggingPlayrange=null,document.body.style.cursor="",document.body.style.userSelect="",this.saveSettings())}startScrubberDrag(e){this.timeline&&(e.preventDefault(),e.stopPropagation(),this.draggingScrubber=!0,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",this.onScrubberDrag(e))}onScrubberDrag(e){if(!this.draggingScrubber||!this.timeline)return;const t=this.shadow.querySelector(".gtv-playrange-track");if(!t)return;const i=t.getBoundingClientRect();let a=Math.max(0,Math.min(e.clientX-i.left,i.width))/i.width;a=Math.max(this.playrangeStart,Math.min(a,this.playrangeEnd)),this.timeline.progress(a),this.timeline.pause(),this.updatePlayState()}endScrubberDrag(){this.draggingScrubber&&(this.draggingScrubber=!1,document.body.style.cursor="",document.body.style.userSelect="")}updatePlayrangeDisplay(){const e=this.shadow.querySelector(".gtv-playrange-track"),t=this.shadow.querySelector(".gtv-playrange-handle-start"),i=this.shadow.querySelector(".gtv-playrange-handle-end"),s=this.shadow.querySelector(".gtv-playrange-active"),a=this.shadow.querySelector(".gtv-playrange-inactive-left"),o=this.shadow.querySelector(".gtv-playrange-inactive-right");if(e&&t&&i&&s&&a&&o){const l=this.playrangeStart*100,n=this.playrangeEnd*100,g=e.offsetLeft,p=e.offsetWidth;t.style.left=`${g+this.playrangeStart*p}px`,i.style.left=`${g+this.playrangeEnd*p}px`,s.style.left=`${l}%`,s.style.width=`${n-l}%`,a.style.width=`${l}%`,o.style.width=`${100-n}%`}}setPlayrangeStart(){if(!this.timeline)return;const e=this.timeline.progress();Math.abs(e-this.playrangeStart)<.001?this.playrangeStart=0:this.playrangeStart=Math.min(e,this.playrangeEnd-.01),this.updatePlayrangeDisplay(),this.saveSettings()}setPlayrangeEnd(){if(!this.timeline)return;const e=this.timeline.progress();Math.abs(e-this.playrangeEnd)<.001?this.playrangeEnd=1:this.playrangeEnd=Math.max(e,this.playrangeStart+.01),this.updatePlayrangeDisplay(),this.saveSettings()}resetPlayrange(){this.playrangeStart=0,this.playrangeEnd=1,this.updatePlayrangeDisplay(),this.saveSettings()}updateBodyPadding(){if(!this.manageBodyPadding)return;const e=this.collapsed?A:this.height;document.body.style.paddingBottom=`${e}px`}clearBodyPadding(){this.manageBodyPadding&&(document.body.style.paddingBottom="")}scrubToPosition(e){if(!this.timeline||!this.timelineData)return;const t=this.rulerInner.getBoundingClientRect(),s=Math.max(0,Math.min(e.clientX-t.left,t.width))/t.width;this.timeline.progress(s),this.timeline.pause(),this.updatePlayState()}togglePlay(){if(!this.timeline)return;const e=this.timeline.progress(),t=e<=this.playrangeStart,i=e>=this.playrangeEnd;this.timeline.paused()||i||t?i&&!this.timeline.reversed()?(this.timeline.progress(this.playrangeStart),this.timeline.play()):t&&this.timeline.reversed()?(this.timeline.reversed(!1),this.timeline.play()):this.timeline.play():this.timeline.pause(),this.updatePlayState()}playReverse(){this.timeline&&(this.timeline.progress()===0&&this.timeline.progress(1),this.timeline.reverse(),this.updatePlayState())}getTimePoints(){if(!this.timelineData)return[0];const e=new Set;return e.add(0),e.add(Math.round(this.timelineData.duration*1e3)/1e3),this.timelineData.tweens.forEach(t=>{e.add(Math.round(t.startTime*1e3)/1e3),e.add(Math.round(t.endTime*1e3)/1e3)}),Array.from(e).sort((t,i)=>t-i)}jumpToPrevPoint(){if(!this.timeline||!this.timelineData)return;const e=Math.round(this.timeline.time()*1e3)/1e3,t=this.getTimePoints(),i=this.playrangeStart*this.timelineData.duration;let s=i;for(const a of t)if(a<e-.001&&a>=i)s=a;else if(a>=e)break;this.timeline.time(Math.max(s,i)),this.timeline.pause(),this.updatePlayState()}jumpToNextPoint(){if(!this.timeline||!this.timelineData)return;const e=Math.round(this.timeline.time()*1e3)/1e3,t=this.getTimePoints(),i=this.playrangeEnd*this.timelineData.duration;let s=i;for(const a of t)if(a>e+.001&&a<=i){s=a;break}this.timeline.time(Math.min(s,i)),this.timeline.pause(),this.updatePlayState()}positionPopover(e,t){const i=t.getBoundingClientRect(),s=e.getBoundingClientRect(),a=i.left+i.width/2-s.width/2;let o;this.collapsed?o=i.top-s.height-4:o=i.bottom+4,e.style.position="fixed",e.style.left=`${a}px`,e.style.top=`${o}px`,e.style.margin="0"}setLoopMode(e){this.loopMode=e,this.updateLoopIcon(),this.updateLoopMenuSelection(),this.timeline&&this.timeline.repeat(this.loopMode==="loop"?-1:0),this.saveSettings()}updateLoopIcon(){const e=this.loopDropdown.querySelector(".gtv-dropdown-trigger"),t=e.querySelector(".icon-oneshot"),i=e.querySelector(".icon-loop"),s=e.querySelector(".icon-pingpong");t.style.display=this.loopMode==="oneshot"?"block":"none",i.style.display=this.loopMode==="loop"?"block":"none",s.style.display=this.loopMode==="pingpong"?"block":"none";const a={oneshot:"One Shot",loop:"Loop",pingpong:"Ping Pong"};e.setAttribute("title",a[this.loopMode])}updateLoopMenuSelection(){this.loopDropdown.querySelectorAll("[data-loop]").forEach(e=>{const t=e.dataset.loop;e.classList.toggle("selected",t===this.loopMode)})}setSpeed(e){this.speedIndex=$.indexOf(e),this.timeline&&this.timeline.timeScale(e),this.updateSpeedDisplay(),this.saveSettings()}updateSpeedDisplay(){const e=$[this.speedIndex],t=this.speedDropdown.querySelector(".gtv-speed-value");t.textContent=`${e}x`,this.speedMenu.querySelectorAll("[data-speed]").forEach(i=>{const s=parseFloat(i.dataset.speed);i.classList.toggle("selected",s===e)})}toggleCollapse(){this.collapsed=!this.collapsed,this.container.classList.toggle("collapsed",this.collapsed);const e=this.shadow.querySelector('[data-action="collapse"]');e.innerHTML=this.collapsed?'<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>':'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>',this.updateBodyPadding(),this.saveSettings()}toggleAutofit(){this.isAutofit=!this.isAutofit,this.shadow.querySelector('[data-action="autofit"]').classList.toggle("active",this.isAutofit),this.isAutofit&&this.applyAutofit(),this.saveSettings()}toggleEaseCurves(){this.showEaseCurves=!this.showEaseCurves,this.shadow.querySelector('[data-action="ease-curves"]').classList.toggle("active",this.showEaseCurves),this.container.classList.toggle("show-ease-curves",this.showEaseCurves),this.saveSettings()}applyAutofit(){if(!this.isAutofit||this.collapsed)return;const e=this.shadow.querySelectorAll(".gtv-track");let t=0;const i=36,s=30;e.forEach(g=>{if(t+=i,g.classList.contains("expanded")){const p=g.querySelectorAll(".gtv-stagger-child");t+=p.length*s}});const a=24,o=16,l=100,n=window.innerHeight-100;this.height=Math.max(l,Math.min(A+a+t+o,n)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}updatePlayState(){if(!this.timeline)return;const e=this.timeline.progress(),t=e>=this.playrangeEnd,i=e<=this.playrangeStart;this.isPlaying=!this.timeline.paused()&&!(t&&!this.timeline.reversed())&&!(i&&this.timeline.reversed());const s=this.playBtn.querySelector(".play-icon"),a=this.playBtn.querySelector(".pause-icon");s.style.display=this.isPlaying?"none":"block",a.style.display=this.isPlaying?"block":"none"}onTimelineUpdate(){this.updatePlayhead(),this.updateTimeDisplay(),this.updateActiveTracks(),this.updatePlayState(),this.checkPlayrangeConstraint()}checkPlayrangeConstraint(){if(!this.timeline||this.timeline.paused())return;const e=this.timeline.progress();if(this.loopMode==="pingpong"){e>=this.playrangeEnd&&!this.timeline.reversed()?this.timeline.reverse():e<=this.playrangeStart&&this.timeline.reversed()&&(this.timeline.reversed(!1),this.timeline.play());return}this.playrangeStart===0&&this.playrangeEnd===1||(e>=this.playrangeEnd?this.loopMode==="loop"?this.timeline.progress(this.playrangeStart):(this.timeline.progress(this.playrangeEnd),this.timeline.pause(),this.updatePlayState()):e<this.playrangeStart&&this.timeline.progress(this.playrangeStart))}updatePlayhead(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.progress();this.playhead.style.left=`${e*100}%`;const t=this.shadow.querySelector(".gtv-playrange-fill"),i=this.shadow.querySelector(".gtv-playrange-scrubber");if(t){const s=this.playrangeStart*100,a=e*100;t.style.left=`${s}%`,t.style.width=`${Math.max(0,a-s)}%`}i&&(i.style.left=`${e*100}%`)}updateTimeDisplay(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.time(),t=this.timelineData.duration,i=this.timeDisplay.querySelector(".gtv-time-current"),s=this.timeDisplay.querySelector(".gtv-time-total");i.textContent=M(e),s.textContent=` / ${M(t)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const e=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i,s)=>{const a=this.timelineData.tweens[s],o=e>=a.startTime&&e<=a.endTime,l=i.dataset.color;o?i.style.background=`var(--gtv-track-${l}-active)`:i.style.background=`var(--gtv-track-${l})`})}renderTracks(){if(!this.timelineData)return;const{duration:e,tweens:t}=this.timelineData,i=this.shadow.querySelector(".gtv-empty");i.style.display=t.length>0?"none":"flex",this.renderRuler(e);const s=this.renderGridLines(e),a=t.map(l=>this.renderTrack(l,e)).join(""),o=this.tracksScroll.querySelector(".gtv-scrub-area");this.tracksScroll.innerHTML=s+a,this.tracksScroll.prepend(o),this.scrubArea=o}renderGridLines(e){const t=[],i=this.calculateInterval(e);for(let s=0;s<=e;s+=i){const a=s/e*100;t.push(`<div class="gtv-grid-line" style="left: ${a}%;"></div>`)}return t.join("")}renderRuler(e){const t=[],i=this.calculateInterval(e);for(let s=0;s<=e;s+=i){const a=s/e*100;t.push(`
         <div class="gtv-ruler-marker" style="left: ${a}%;">
           <div class="gtv-ruler-marker-line"></div>
           <span class="gtv-ruler-marker-label">${M(s,!1)}s</span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gsap-timeline-viewer",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "A lightweight, framework-agnostic timeline viewer for GSAP animations",
   "type": "module",
   "main": "./dist/gsap-timeline-viewer.umd.cjs",