@kieransimkin/dancemoves 3.0.2 → 3.0.4

package/lib/index.cjs

@@ -536,6 +536,17 @@ function install(__dmScope) {
       };
     }
     function dispatchLyric(entry, audio, index) {
+      var previousVisibleIndex = -1;
+      var previousVisibleEntry = null;
+      if (Number.isFinite(index)) {
+        for (var previousCursor = index - 1; previousCursor >= 0; previousCursor -= 1) {
+          if (String(lyricList[previousCursor].text || "").trim()) {
+            previousVisibleIndex = previousCursor;
+            previousVisibleEntry = lyricList[previousCursor];
+            break;
+          }
+        }
+      }
       var nextIndex = Number.isFinite(index) && index + 1 < lyricList.length ? index + 1 : -1;
       var nextEntry = nextIndex >= 0 ? lyricList[nextIndex] : null;
       var nextVisibleIndex = -1;
@@ -555,6 +566,10 @@ function install(__dmScope) {
         text: entry ? entry.text : "",
         normalisedText: entry ? entry.normalisedText : "",
         index: Number.isFinite(index) ? index : -1,
+        previousVisibleTime: previousVisibleEntry ? previousVisibleEntry.time : null,
+        previousVisibleText: previousVisibleEntry ? previousVisibleEntry.text : "",
+        previousVisibleNormalisedText: previousVisibleEntry ? previousVisibleEntry.normalisedText : "",
+        previousVisibleIndex,
         nextTime: nextEntry ? nextEntry.time : null,
         nextText: nextEntry ? nextEntry.text : "",
         nextNormalisedText: nextEntry ? nextEntry.normalisedText : "",
@@ -628,6 +643,7 @@ function install(__dmScope) {
           __dmScope.dataset(this.element, "danceMovesLyricState", "idle");
         }
       };
+      document2.dispatchEvent(new CustomEvent("dance-moves-lyric-ready", { detail: { element: container } }));
       return lyricRenderer;
     }
     function callHandlers(key, detail) {
@@ -1376,6 +1392,317 @@ function install2(__dmScope) {
         }
       }));
     }
+    function lyricStage(options) {
+      options = options || {};
+      var state = commonState(options, "lyric-stage");
+      var audio = element(options.audio, state.root.querySelector("audio"));
+      var popover = element(options.popover, document2.querySelector(".dance-moves-lyric-popover"));
+      if (!audio)
+        throw new Error("DanceMovesEffects lyricStage requires an audio element");
+      if (!popover) {
+        let mountWhenReady = function() {
+          if (!pending || !document2.querySelector(".dance-moves-lyric-popover"))
+            return;
+          pending = false;
+          state.removers.splice(0).forEach(function(remove) {
+            remove();
+          });
+          lyricStage(options);
+        };
+        var pending = true;
+        listen(document2, "dance-moves-lyric-ready", mountWhenReady, void 0, state.removers);
+        return register(state.id, Object.freeze({
+          id: state.id,
+          type: "lyric-stage-pending",
+          snapshot: function() {
+            return { id: state.id, type: "lyric-stage-pending", phase: "waiting-for-popover" };
+          },
+          teardown: function() {
+            pending = false;
+            state.removers.splice(0).forEach(function(remove) {
+              remove();
+            });
+            instances.delete(state.id);
+          }
+        }));
+      }
+      var current = popover.querySelector(".dance-moves-lyric-popover__text");
+      if (!current)
+        throw new Error("DanceMovesEffects lyricStage requires the DanceMoves current lyric element");
+      var viewport = document2.createElement("div");
+      var track = document2.createElement("div");
+      var previous = document2.createElement("span");
+      var next = document2.createElement("span");
+      viewport.className = "dance-moves-lyric-stage__viewport";
+      track.className = "dance-moves-lyric-stage__track";
+      previous.className = "dance-moves-lyric-stage__line dance-moves-lyric-stage__line--previous";
+      current.className += " dance-moves-lyric-stage__line dance-moves-lyric-stage__line--current";
+      next.className = "dance-moves-lyric-stage__line dance-moves-lyric-stage__line--next";
+      __dmScope.dataset(previous, "danceMovesLyricSlot", "previous");
+      __dmScope.dataset(current, "danceMovesLyricSlot", "current");
+      __dmScope.dataset(next, "danceMovesLyricSlot", "next");
+      track.appendChild(previous);
+      track.appendChild(current);
+      track.appendChild(next);
+      viewport.appendChild(track);
+      popover.appendChild(viewport);
+      __dmScope.dataset(popover, "danceMovesLyricStage", "ready");
+      __dmScope.setStyle(popover.style, "--dance-moves-lyric-progress", "0");
+      var travelTicks = Math.max(1, Math.round(finite2(options.travelTicks, 32)));
+      var defaultCueTicks = Math.max(1, Math.round(finite2(options.cueDurationTicks, 32)));
+      var latest = null, phase = "idle", progress = 0, frame = 0, wakeTimer = 0, cueTimer = 0, cueCleanup = null, cueCount = 0;
+      var lyricEffects = [];
+      var slots = Object.freeze({ previous, current, next, viewport, track });
+      function safely(callback, payload, label) {
+        if (typeof callback !== "function")
+          return null;
+        try {
+          return callback(payload);
+        } catch (error) {
+          if (window2.console && typeof window2.console.error === "function")
+            window2.console.error("DanceMoves " + label + " callback failed", error);
+        }
+        return null;
+      }
+      function blocked() {
+        return document2.hidden || state.reduced.matches || state.forced.matches;
+      }
+      function stopClock() {
+        if (frame)
+          window2.cancelAnimationFrame(frame);
+        if (wakeTimer)
+          window2.clearTimeout(wakeTimer);
+        frame = 0;
+        wakeTimer = 0;
+      }
+      function publish(reason) {
+        __dmScope.dataset(popover, "danceMovesLyricPhase", phase);
+        safely(options.render, {
+          root: state.root,
+          popover,
+          audio,
+          slots,
+          detail: latest,
+          phase,
+          progress,
+          reason,
+          playing: !audio.paused && !audio.ended && !blocked(),
+          reducedMotion: state.reduced.matches,
+          forcedColours: state.forced.matches
+        }, "lyricStage render");
+      }
+      function setPhase(value, reason) {
+        if (phase === value)
+          return;
+        phase = value;
+        publish(reason || value);
+      }
+      function setProgress(value) {
+        progress = clamp(finite2(value, 0), 0, 1);
+        __dmScope.setStyle(popover.style, "--dance-moves-lyric-progress", progress.toFixed(5));
+      }
+      function copyLyrics(detail) {
+        previous.textContent = detail ? String(detail.previousVisibleText || "") : "";
+        current.textContent = detail ? String(detail.text || "") : "";
+        next.textContent = detail ? String(detail.nextVisibleText || "") : "";
+        __dmScope.dataset(previous, "danceMovesLyricIndex", detail ? String(detail.previousVisibleIndex) : "-1");
+        __dmScope.dataset(current, "danceMovesLyricIndex", detail ? String(detail.index) : "-1");
+        __dmScope.dataset(next, "danceMovesLyricIndex", detail ? String(detail.nextVisibleIndex) : "-1");
+      }
+      function scheduleLyricEffect(result) {
+        if (!result)
+          return;
+        var cleanup = typeof result === "function" ? result : typeof result.cleanup === "function" ? result.cleanup : null;
+        if (!cleanup)
+          return;
+        var durationTicks = result && typeof result === "object" ? Math.max(1, Math.round(finite2(result.durationTicks, 64))) : 64;
+        var record = { cleanup, timer: 0 };
+        record.timer = window2.setTimeout(function() {
+          lyricEffects = lyricEffects.filter(function(item) {
+            return item !== record;
+          });
+          safely(cleanup, { reason: "complete" }, "lyricStage lyric cleanup");
+        }, motion.durationMilliseconds(durationTicks));
+        lyricEffects.push(record);
+      }
+      function travelWindow() {
+        if (!latest || !Number.isFinite(Number(latest.nextVisibleTime)))
+          return null;
+        var end = Number(latest.nextVisibleTime);
+        var duration = motion.durationMilliseconds(travelTicks) / 1e3;
+        return { start: Math.max(Number(latest.time) || 0, end - duration), end };
+      }
+      function tick() {
+        frame = 0;
+        if (audio.paused || audio.ended || blocked())
+          return reconcile("frame-inactive");
+        var windowRange = travelWindow();
+        if (!windowRange) {
+          setProgress(0);
+          return setPhase("waiting", "no-next-line");
+        }
+        var now = Math.max(0, finite2(audio.currentTime, 0));
+        if (now < windowRange.start)
+          return reconcile("frame-before-window");
+        if (now >= windowRange.end) {
+          setProgress(1);
+          return setPhase("arrived", "line-arrival");
+        }
+        setPhase("travelling", "travel-start");
+        setProgress((now - windowRange.start) / Math.max(1e-3, windowRange.end - windowRange.start));
+        frame = window2.requestAnimationFrame(tick);
+      }
+      function reconcile(reason) {
+        stopClock();
+        if (blocked()) {
+          setProgress(0);
+          return setPhase("inactive", reason || "inactive");
+        }
+        if (audio.ended) {
+          setProgress(0);
+          return setPhase("ended", reason || "ended");
+        }
+        if (audio.paused) {
+          setProgress(0);
+          return setPhase("paused", reason || "paused");
+        }
+        var windowRange = travelWindow();
+        if (!windowRange) {
+          setProgress(0);
+          return setPhase("waiting", reason || "no-next-line");
+        }
+        var now = Math.max(0, finite2(audio.currentTime, 0));
+        if (now >= windowRange.end) {
+          setProgress(1);
+          return setPhase("arrived", reason || "arrived");
+        }
+        if (now >= windowRange.start) {
+          setPhase("travelling", reason || "travelling");
+          frame = window2.requestAnimationFrame(tick);
+          return;
+        }
+        setProgress(0);
+        setPhase("waiting", reason || "waiting");
+        wakeTimer = window2.setTimeout(function() {
+          wakeTimer = 0;
+          tick();
+        }, Math.max(0, (windowRange.start - now) * 1e3 / Math.max(0.01, finite2(audio.playbackRate, 1))));
+      }
+      function onLyric(detail) {
+        var previousDetail = latest;
+        var previousText = String(current.textContent || "");
+        latest = detail || null;
+        copyLyrics(latest);
+        if (!blocked() && typeof options.renderLyric === "function") {
+          scheduleLyricEffect(safely(options.renderLyric, {
+            root: state.root,
+            popover,
+            audio,
+            slots,
+            detail: latest,
+            previousDetail,
+            previousText,
+            reducedMotion: false,
+            forcedColours: false
+          }, "lyricStage lyric"));
+        }
+        setProgress(0);
+        publish("lyric-change");
+        reconcile("lyric-change");
+      }
+      function clearCue(reason) {
+        if (cueTimer)
+          window2.clearTimeout(cueTimer);
+        cueTimer = 0;
+        if (cueCleanup)
+          safely(cueCleanup, { reason: reason || "complete" }, "lyricStage cue cleanup");
+        cueCleanup = null;
+        __dmScope.dataset(state.root, "danceMovesLyricCue", reason || "idle");
+      }
+      function onCue(detail) {
+        clearCue("restart");
+        if (blocked() || typeof options.renderCue !== "function")
+          return;
+        cueCount += 1;
+        __dmScope.dataset(state.root, "danceMovesLyricCue", String(detail.normalisedName || detail.name || "cue"));
+        var result = safely(options.renderCue, {
+          root: state.root,
+          popover,
+          audio,
+          slots,
+          detail,
+          count: cueCount,
+          reducedMotion: false,
+          forcedColours: false
+        }, "lyricStage cue");
+        var durationTicks = defaultCueTicks;
+        if (typeof result === "function")
+          cueCleanup = result;
+        else if (result && typeof result === "object") {
+          if (typeof result.cleanup === "function")
+            cueCleanup = result.cleanup;
+          durationTicks = Math.max(1, Math.round(finite2(result.durationTicks, defaultCueTicks)));
+        }
+        cueTimer = window2.setTimeout(function() {
+          clearCue("complete");
+        }, motion.durationMilliseconds(durationTicks));
+      }
+      var unsubscribeLyric = motion.onLyric(onLyric, { id: state.id });
+      var unsubscribeCue = motion.onCue("*", onCue, { id: state.id + ":cue" });
+      ["play", "playing", "pause", "ended", "seeking", "seeked", "ratechange", "timeupdate", "loadedmetadata"].forEach(function(name) {
+        listen(audio, name, function() {
+          reconcile(name);
+        }, void 0, state.removers);
+      });
+      listen(document2, "visibilitychange", function() {
+        reconcile(document2.hidden ? "hidden" : "visible");
+      }, { passive: true }, state.removers);
+      listen(window2, "resize", function() {
+        publish("resize");
+      }, { passive: true }, state.removers);
+      listen(state.reduced, "change", function() {
+        reconcile(state.reduced.matches ? "reduced-motion" : "motion-restored");
+      }, void 0, state.removers);
+      listen(state.forced, "change", function() {
+        reconcile(state.forced.matches ? "forced-colours" : "colours-restored");
+      }, void 0, state.removers);
+      copyLyrics(null);
+      publish("initial");
+      reconcile("initial");
+      return register(state.id, Object.freeze({
+        id: state.id,
+        type: "lyric-stage",
+        restore: function(reason) {
+          reconcile(reason || "manual-restore");
+        },
+        snapshot: function() {
+          return { id: state.id, type: "lyric-stage", phase, progress, playing: !audio.paused && !audio.ended && !blocked(), lyricIndex: latest ? latest.index : -1, nextVisibleIndex: latest ? latest.nextVisibleIndex : -1, cueCount };
+        },
+        teardown: function() {
+          stopClock();
+          clearCue("teardown");
+          unsubscribeLyric();
+          unsubscribeCue();
+          lyricEffects.splice(0).forEach(function(record) {
+            if (record.timer)
+              window2.clearTimeout(record.timer);
+            safely(record.cleanup, { reason: "teardown" }, "lyricStage lyric cleanup");
+          });
+          state.removers.splice(0).forEach(function(remove) {
+            remove();
+          });
+          current.className = current.className.replace(/\s*dance-moves-lyric-stage__line(?:--current)?/g, "").trim();
+          __dmScope.dataset(current, "danceMovesLyricSlot", null);
+          popover.appendChild(current);
+          if (viewport.parentNode === popover)
+            popover.removeChild(viewport);
+          __dmScope.dataset(popover, "danceMovesLyricStage", null);
+          __dmScope.dataset(popover, "danceMovesLyricPhase", null);
+          __dmScope.removeStyle(popover.style, "--dance-moves-lyric-progress");
+          instances.delete(state.id);
+        }
+      }));
+    }
     function quality(options) {
       options = options || {};
       var state = commonState(options, "quality");
@@ -1490,6 +1817,7 @@ function install2(__dmScope) {
       playbackPulse,
       cueClass,
       cueTimeline,
+      lyricStage,
       quality,
       get: function(id) {
         return instances.get(String(id)) || null;
@@ -4720,7 +5048,7 @@ function createMotionRecorder(scope, { durationMilliseconds = 3e4, maxSamples =
 }
 
 // .build/modules/version.mjs
-var VERSION = "3.0.2";
+var VERSION = "3.0.4";
 
 // .build/modules/index.mjs
 var mounted = /* @__PURE__ */ new WeakMap();

package/lib/index.d.ts

@@ -14,19 +14,24 @@ export interface Options extends PageConfig {
 }
 export type OrientationAdapter = 'light-will-win'|'dying-for-a-diagnosis'|'presents-and-chocolate'|'fully-nocturnal'|'amnesty-honestly'|'walk-with-me'|'dmitri-my-talisman'|'clay-stars'|'california-screamin';
 export interface Cue {time:number;type:string;name:string;label?:string;normalisedType?:string;normalisedName?:string;normalisedLabel?:string;audio?:HTMLAudioElement|null}
-export interface Lyric {time:number;text:string;normalisedText?:string;audio?:HTMLAudioElement|null;nextTime?:number|null;nextText?:string;nextVisibleTime?:number|null;nextVisibleText?:string;[field:string]:unknown}
+export interface Lyric {time:number;text:string;normalisedText?:string;audio?:HTMLAudioElement|null;previousVisibleTime?:number|null;previousVisibleText?:string;previousVisibleNormalisedText?:string;previousVisibleIndex?:number;nextTime?:number|null;nextText?:string;nextVisibleTime?:number|null;nextVisibleText?:string;nextVisibleNormalisedText?:string;nextVisibleIndex?:number;[field:string]:unknown}
 export interface Clock {clock?:'page'|'audio';audio?:HTMLAudioElement;bpm?:number;strictlyFuture?:boolean;handlerId?:string}
 export interface IntervalDetail {intervalTicks:number;boundaryTick:number;audio:HTMLAudioElement|null;clock:'page'|'audio'}
 export interface Controller {id?:string;teardown():void;snapshot():Record<string,unknown>}
 export interface PointerController extends Controller {set(x:number,y:number,reason?:string):void;reset(reason?:string):void}
 export interface QualityController extends Controller {setTier(index:number,reason?:string):void}
 export interface CueTimelineController extends Controller {restore(reason?:string):void;start(reason?:string):void;stop(reason?:string):void}
+export interface LyricStageController extends Controller {restore(reason?:string):void}
+export interface LyricStageSlots {previous:HTMLElement;current:HTMLElement;next:HTMLElement;viewport:HTMLElement;track:HTMLElement}
+export interface LyricStageState {root:Element;popover:HTMLElement;audio:HTMLAudioElement;slots:LyricStageSlots;detail?:Lyric|null;phase?:string;progress?:number;reason?:string;playing?:boolean;reducedMotion:boolean;forcedColours:boolean;[field:string]:unknown}
+export type LyricStageCleanup = void | (()=>void) | {durationTicks?:number;cleanup?:()=>void};
 export interface Effects {
  version:string;
  pointer(options:EffectOptions & {target?:Element|string;bounds?:Element|string;render?:(point:{x:number;y:number;reason?:string})=>void}):PointerController;
  playbackPulse(options:EffectOptions & {audio?:HTMLAudioElement|string;ticks?:number;className?:string;propertyPrefix?:string;render?:(state:Record<string,unknown> & {audio:HTMLAudioElement})=>void}):Controller & {sync():void};
  cueClass(options:EffectOptions & {cue?:string;className?:string;durationTicks?:number;render?:(state:Record<string,unknown>)=>void}):Controller & {fire(cue?:Cue):void;clear(reason?:string):void};
  cueTimeline(options:EffectOptions & {audio?:HTMLAudioElement|string;cues:Array<{id?:string;time:number;end?:number;[key:string]:unknown}>;onCue?:(event:Record<string,unknown>)=>void;render?:(state:Record<string,unknown>)=>void}):CueTimelineController;
+ lyricStage(options:EffectOptions & {audio?:HTMLAudioElement|string;popover?:HTMLElement|string;travelTicks?:number;cueDurationTicks?:number;render?:(state:LyricStageState)=>void;renderLyric?:(state:LyricStageState & {previousDetail?:Lyric|null;previousText?:string})=>LyricStageCleanup;renderCue?:(state:LyricStageState & {detail:Cue;count:number})=>LyricStageCleanup}):LyricStageController|Controller;
  quality(options:EffectOptions & {tiers?:string[];render?:(state:{tier:string;index:number;reason:string;sample?:{fps:number}})=>void;[key:string]:unknown}):QualityController;
  get(id:string):Controller|null;snapshot():Record<string,unknown>[];teardown(id:string):void;teardownAll():void;
 }