@kieransimkin/dancemoves 3.0.3 → 3.0.5

package/lib/index.mjs

@@ -505,6 +505,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;
@@ -524,6 +535,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 : "",
@@ -597,6 +612,7 @@ function install(__dmScope) {
           __dmScope.dataset(this.element, "danceMovesLyricState", "idle");
         }
       };
+      document2.dispatchEvent(new CustomEvent("dance-moves-lyric-ready", { bubbles: true, detail: { element: container } }));
       return lyricRenderer;
     }
     function callHandlers(key, detail) {
@@ -1345,6 +1361,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");
@@ -1459,6 +1786,7 @@ function install2(__dmScope) {
       playbackPulse,
       cueClass,
       cueTimeline,
+      lyricStage,
       quality,
       get: function(id) {
         return instances.get(String(id)) || null;
@@ -1479,7 +1807,7 @@ function install2(__dmScope) {
         });
       }
     });
-    document2.dispatchEvent(new CustomEvent("dance-moves-effects-ready", { detail: { api: window2.DanceMovesEffects, version: window2.DanceMovesEffects.version } }));
+    document2.dispatchEvent(new CustomEvent("dance-moves-effects-ready", { bubbles: true, detail: { api: window2.DanceMovesEffects, version: window2.DanceMovesEffects.version } }));
   })(window, document);
 }
 
@@ -3457,7 +3785,7 @@ function install9(__dmScope) {
     let native = null, view = null, loading = null, loadError = null;
     let frame = 0, serial2 = 0, styleElement = null, removalObserver = null, pageHidden = false;
     function emit(name, detail) {
-      document2.dispatchEvent(new window2.CustomEvent(name, { detail }));
+      document2.dispatchEvent(new window2.CustomEvent(name, { bubbles: true, detail }));
     }
     function number(value, label) {
       if (typeof value !== "number" || !Number.isFinite(value))
@@ -4213,10 +4541,11 @@ function createScope(root, config, { legacyGlobals = false, nonce, orientation =
       if (property === "readyState") return "complete";
       if (property === "defaultView") return window;
       if (property === "styleSheets" && !legacyGlobals) return [];
-      if (property === "querySelectorAll") return queryAll;
-      if (property === "querySelector") return (selector) => queryAll(selector)[0] || null;
+      if (property === "querySelectorAll") return legacyGlobals ? target.querySelectorAll.bind(target) : queryAll;
+      if (property === "querySelector") return legacyGlobals ? target.querySelector.bind(target) : (selector) => queryAll(selector)[0] || null;
       if (property === "getElementById") return (wanted) => {
         if (disposed) return null;
+        if (legacyGlobals) return target.getElementById(wanted);
         if (root.id === wanted) return root;
         return Array.from(root.querySelectorAll("[id]")).find((node) => node.id === wanted) || [...created].find((node) => node.id === wanted) || null;
       };
@@ -4689,7 +5018,7 @@ function createMotionRecorder(scope, { durationMilliseconds = 3e4, maxSamples =
 }
 
 // .build/modules/version.mjs
-var VERSION = "3.0.3";
+var VERSION = "3.0.5";
 
 // .build/modules/index.mjs
 var mounted = /* @__PURE__ */ new WeakMap();

package/lib/styles/dance-moves-core.css

@@ -1 +1 @@
-[data-dance-moves-start-interval]:not([data-dance-moves-started=true]),[data-dance-moves-start-interval]:not([data-dance-moves-started=true]):before,[data-dance-moves-start-interval]:not([data-dance-moves-started=true]):after{animation-play-state:paused!important}html[data-dance-moves-shared-controls=true] .ks-epk .epk-button,html[data-dance-moves-shared-controls=true] .ks-epk .epk-download{transition-property:background-color,color,transform,border-color!important;transition-duration:var(--dance-moves-shared-control-duration)!important;transition-timing-function:ease!important}.ks-epk .ks-epk-lyrics-track summary span[aria-hidden]{transition-property:transform!important;transition-duration:var(--dance-moves-lyric-disclosure-duration)!important;transition-timing-function:ease!important}.dance-moves-lyric-popover{--dance-moves-lyric-bg: rgba(20, 20, 24, .94);--dance-moves-lyric-border: rgba(255, 255, 255, .28);--dance-moves-lyric-color: #fff;position:fixed;z-index:9998;inset-inline:max(1rem,env(safe-area-inset-left)) max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translateY(.75rem) scale(.98);transition:opacity var(--dance-moves-6t) ease,transform var(--dance-moves-6t) ease}.dance-moves-lyric-popover[data-dance-moves-lyric-state=active]{opacity:1;transform:translateY(0) scale(1)}.dance-moves-lyric-popover__text{display:block;max-width:min(44rem,100%);padding:.72rem 1rem;border:1px solid var(--dance-moves-lyric-border);border-radius:.75rem;background:var(--dance-moves-lyric-bg);color:var(--dance-moves-lyric-color);box-shadow:0 .6rem 1.8rem #00000052;font:700 clamp(1rem,2.4vw,1.35rem)/1.3 system-ui,sans-serif;text-align:center;text-wrap:balance}.dance-moves-lyric-popover[data-dance-moves-lyric-pulse=true] .dance-moves-lyric-popover__text{animation:dance-moves-lyric-arrive var(--dance-moves-6t) ease both}@keyframes dance-moves-lyric-arrive{0%{transform:translateY(.4rem) scale(.98)}to{transform:translateY(0) scale(1)}}@media(forced-colors:active){.dance-moves-lyric-popover__text{border:2px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none}}@media(prefers-reduced-motion:reduce){[data-dance-moves-start-interval],[data-dance-moves-start-interval]:before,[data-dance-moves-start-interval]:after{animation:none!important;transition-duration:.01ms!important}html[data-dance-moves-shared-controls=true] .ks-epk .epk-button,html[data-dance-moves-shared-controls=true] .ks-epk .epk-download,.ks-epk .ks-epk-lyrics-track summary span[aria-hidden]{transition:none!important}.dance-moves-lyric-popover,.dance-moves-lyric-popover__text{animation:none!important;transition:none!important;transform:none!important}}
+[data-dance-moves-start-interval]:not([data-dance-moves-started=true]),[data-dance-moves-start-interval]:not([data-dance-moves-started=true]):before,[data-dance-moves-start-interval]:not([data-dance-moves-started=true]):after{animation-play-state:paused!important}html[data-dance-moves-shared-controls=true] .ks-epk .epk-button,html[data-dance-moves-shared-controls=true] .ks-epk .epk-download{transition-property:background-color,color,transform,border-color!important;transition-duration:var(--dance-moves-shared-control-duration)!important;transition-timing-function:ease!important}.ks-epk .ks-epk-lyrics-track summary span[aria-hidden]{transition-property:transform!important;transition-duration:var(--dance-moves-lyric-disclosure-duration)!important;transition-timing-function:ease!important}.dance-moves-lyric-popover{--dance-moves-lyric-bg: rgba(20, 20, 24, .94);--dance-moves-lyric-border: rgba(255, 255, 255, .28);--dance-moves-lyric-color: #fff;position:fixed;z-index:9998;inset-inline:max(1rem,env(safe-area-inset-left)) max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translateY(.75rem) scale(.98);transition:opacity var(--dance-moves-6t) ease,transform var(--dance-moves-6t) ease}.dance-moves-lyric-popover[data-dance-moves-lyric-state=active]{opacity:1;transform:translateY(0) scale(1)}.dance-moves-lyric-popover__text{display:block;max-width:min(44rem,100%);padding:.72rem 1rem;border:1px solid var(--dance-moves-lyric-border);border-radius:.75rem;background:var(--dance-moves-lyric-bg);color:var(--dance-moves-lyric-color);box-shadow:0 .6rem 1.8rem #00000052;font:700 clamp(1rem,2.4vw,1.35rem)/1.3 system-ui,sans-serif;text-align:center;text-wrap:balance}.dance-moves-lyric-popover[data-dance-moves-lyric-pulse=true] .dance-moves-lyric-popover__text{animation:dance-moves-lyric-arrive var(--dance-moves-6t) ease both}.dance-moves-lyric-popover[data-dance-moves-lyric-stage=ready]{--dance-moves-lyric-stage-step: 4.75rem;--dance-moves-lyric-progress: 0;overflow:hidden;height:calc(var(--dance-moves-lyric-stage-step) * 3);align-items:stretch}.dance-moves-lyric-stage__viewport{width:min(48rem,100%);height:100%;overflow:hidden}.dance-moves-lyric-stage__track{display:grid;grid-template-rows:repeat(3,var(--dance-moves-lyric-stage-step));transform:translate3d(0,calc(var(--dance-moves-lyric-progress) * var(--dance-moves-lyric-stage-step) * -1),0);will-change:transform}.dance-moves-lyric-stage__line{display:grid;place-items:center;min-width:0;padding:.4rem 1rem;color:var(--dance-moves-lyric-color);font:650 clamp(.92rem,2.2vw,1.22rem)/1.25 system-ui,sans-serif;text-align:center;text-wrap:balance;opacity:.58}.dance-moves-lyric-stage__line--current{opacity:1}.dance-moves-lyric-popover[data-dance-moves-lyric-stage=ready] .dance-moves-lyric-popover__text{max-width:none;padding:.4rem 1rem;border:0;border-radius:0;background:transparent;box-shadow:none;animation:none}.dance-moves-lyric-popover[data-dance-moves-lyric-stage=ready][data-dance-moves-lyric-phase=waiting] .dance-moves-lyric-stage__track{will-change:auto}@keyframes dance-moves-lyric-arrive{0%{transform:translateY(.4rem) scale(.98)}to{transform:translateY(0) scale(1)}}@media(forced-colors:active){.dance-moves-lyric-popover__text{border:2px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none}}@media(prefers-reduced-motion:reduce){[data-dance-moves-start-interval],[data-dance-moves-start-interval]:before,[data-dance-moves-start-interval]:after{animation:none!important;transition-duration:.01ms!important}html[data-dance-moves-shared-controls=true] .ks-epk .epk-button,html[data-dance-moves-shared-controls=true] .ks-epk .epk-download,.ks-epk .ks-epk-lyrics-track summary span[aria-hidden]{transition:none!important}.dance-moves-lyric-popover,.dance-moves-lyric-popover__text,.dance-moves-lyric-stage__track{animation:none!important;transition:none!important;transform:none!important}}