@kieransimkin/dancemoves 3.1.18 → 3.1.20

package/lib/index.cjs

@@ -48,6 +48,7 @@ function install(__dmScope) {
     var lyricList = [];
     var lyricRenderer = null;
     var boundAudio = /* @__PURE__ */ new WeakSet();
+    var playbackBindings = /* @__PURE__ */ new Map();
     var activeAudio = null;
     var pageClockStarted = window2.performance && typeof window2.performance.now === "function" ? window2.performance.now() : Date.now();
     var referenceDurationSeconds = positiveNumber(rawConfig.masterDurationMilliseconds) / 1e3;
@@ -137,13 +138,16 @@ function install(__dmScope) {
     }
     function currentTick(options) {
       var settings = options || {};
-      var audio = settings.audio || (settings.clock === "audio" ? activeAudio : null);
+      var audio = playbackAudio(settings.audio) || (settings.clock === "audio" ? activeAudio : null);
       if (audio && !audio.paused && !audio.ended && Number.isFinite(Number(audio.currentTime))) {
         return Number(audio.currentTime) * effectiveBpm(settings.bpm || bpm) * TICKS_PER_BEAT / 60;
       }
       var now = window2.performance && typeof window2.performance.now === "function" ? window2.performance.now() : Date.now();
       return Math.max(0, now - pageClockStarted) * effectiveBpm(settings.bpm || bpm) * TICKS_PER_BEAT / 6e4;
     }
+    function playbackAudio(audio) {
+      return audio && api && api.playbackSource ? api.playbackSource(audio) : audio;
+    }
     function nextIntervalTick(intervalTicks, fromTick, strictlyFuture) {
       var interval = Math.max(1, roundHalfUp(intervalTicks));
       var tick = Math.max(0, Number(fromTick) || 0);
@@ -200,7 +204,7 @@ function install(__dmScope) {
         var pollAudio = function() {
           if (cancelled)
             return;
-          var candidate = settings.audio || activeAudio;
+          var candidate = playbackAudio(settings.audio) || activeAudio;
           if (!candidate || candidate.paused || candidate.ended) {
             if (sourceAudio && sourceAudio.ended) {
               cancel();
@@ -762,9 +766,18 @@ function install(__dmScope) {
       return Math.abs(duration - referenceDurationSeconds) <= Math.max(0.25, duration / 1e5);
     }
     function bindAudio(audio) {
+      if (api.playbackSource)
+        audio = api.playbackSource(audio);
       if (boundAudio.has(audio) || !matchesMasterDuration(audio))
         return;
       boundAudio.add(audio);
+      var removers = [];
+      function listen(target, name, handler) {
+        __dmScope.listen(target, name, handler);
+        removers.push(function() {
+          __dmScope.unlisten(target, name, handler);
+        });
+      }
       __dmScope.dataset(audio, "danceMovesTiming", "master-length");
       var state = {
         next: firstCueAfter(audio.currentTime || 0),
@@ -772,7 +785,8 @@ function install(__dmScope) {
         last: audio.currentTime || 0,
         seeking: false,
         frame: 0,
-        pendingCue: cueAtLanding(audio.currentTime || 0)
+        pendingCue: cueAtLanding(audio.currentTime || 0),
+        endedPending: false
       };
       function stopFrame() {
         if (state.frame)
@@ -781,7 +795,7 @@ function install(__dmScope) {
       }
       function tick() {
         state.frame = 0;
-        if (audio.paused || audio.ended || state.seeking)
+        if (audio.paused || audio.ended || state.seeking || document2.hidden)
           return;
         var diagnosticStartedAt = diagnosticsSink ? diagnosticNow() : 0;
         var firedCount = 0;
@@ -819,8 +833,14 @@ function install(__dmScope) {
       }
       function start() {
         stopFrame();
+        if (document2.hidden || audio.paused || audio.ended)
+          return;
         activeAudio = audio;
         state.last = positiveNumber(audio.currentTime);
+        if (state.endedPending) {
+          state.pendingCue = cueAtLanding(state.last);
+          state.endedPending = false;
+        }
         state.next = firstCueAfter(state.last);
         state.lyric = -2;
         if (state.pendingCue) {
@@ -830,47 +850,70 @@ function install(__dmScope) {
         setOwnedPlaybackRate(audio.playbackRate);
         state.frame = window2.requestAnimationFrame(tick);
       }
-      __dmScope.listen(audio, "play", start);
-      __dmScope.listen(audio, "playing", start);
-      __dmScope.listen(audio, "pause", function() {
+      listen(audio, "play", start);
+      listen(audio, "playing", start);
+      listen(audio, "pause", function() {
         stopFrame();
         if (activeAudio === audio)
           activeAudio = null;
         if (lyricRenderer)
           lyricRenderer.hide();
       });
-      __dmScope.listen(audio, "ended", function() {
+      listen(audio, "ended", function() {
         stopFrame();
         if (activeAudio === audio)
           activeAudio = null;
         state.last = 0;
         state.next = 0;
         state.lyric = -2;
-        state.pendingCue = cueAtLanding(0);
+        state.pendingCue = null;
+        state.endedPending = true;
         if (lyricRenderer)
           lyricRenderer.hide();
       });
-      __dmScope.listen(audio, "seeking", function() {
+      listen(audio, "seeking", function() {
         state.seeking = true;
         state.pendingCue = null;
         stopFrame();
       });
-      __dmScope.listen(audio, "seeked", function() {
+      listen(audio, "seeked", function() {
         state.seeking = false;
         state.last = positiveNumber(audio.currentTime);
         state.next = firstCueAfter(state.last);
         state.lyric = -2;
         state.pendingCue = cueAtLanding(state.last);
+        playbackBindings.set(audio, function() {
+          stopFrame();
+          removers.splice(0).forEach(function(remove) {
+            remove();
+          });
+          boundAudio.delete(audio);
+          if (activeAudio === audio)
+            activeAudio = null;
+          playbackBindings.delete(audio);
+        });
         if (!audio.paused && !audio.ended)
           start();
       });
-      __dmScope.listen(audio, "ratechange", function() {
+      listen(audio, "ratechange", function() {
         setOwnedPlaybackRate(audio.playbackRate);
       });
-      __dmScope.listen(audio, "timeupdate", function() {
+      listen(audio, "timeupdate", function() {
         if (!audio.paused && !state.frame && !state.seeking)
           tick();
       });
+      listen(document2, "visibilitychange", function() {
+        if (document2.hidden) {
+          stopFrame();
+          if (lyricRenderer)
+            lyricRenderer.hide();
+        } else if (!audio.paused && !audio.ended && !state.seeking) {
+          state.pendingCue = null;
+          start();
+        }
+      });
+      if (!audio.paused && !audio.ended)
+        start();
     }
     function discoverAudio() {
       var audioElements = Array.from(document2.querySelectorAll("audio"));
@@ -984,6 +1027,16 @@ function install(__dmScope) {
       registerAnimationScope,
       resetRunningAnimations,
       discoverAudio,
+      unregisterPlaybackSource: function(source) {
+        var remove = playbackBindings.get(source);
+        if (remove)
+          remove();
+      },
+      registerPlaybackSource: function(source) {
+        if (!referenceDurationSeconds)
+          referenceDurationSeconds = positiveNumber(source.duration);
+        bindAudio(source);
+      },
       setDiagnosticsSink,
       diagnosticsEnabled: function() {
         return diagnosticsAllowed && Boolean(diagnosticsSink);
@@ -1024,6 +1077,10 @@ function install2(__dmScope) {
         return document2.querySelector(value);
       return fallback || null;
     }
+    function playbackElement(value, fallback) {
+      var target = element(value, fallback);
+      return target && motion.playbackSource ? motion.playbackSource(target) : target;
+    }
     function media(query) {
       return window2.matchMedia(query);
     }
@@ -1149,7 +1206,7 @@ function install2(__dmScope) {
     function playbackPulse(options) {
       options = options || {};
       var state = commonState(options, "pulse");
-      var audio = element(options.audio, state.root.querySelector("audio"));
+      var audio = playbackElement(options.audio, state.root.querySelector("audio"));
       if (!audio)
         throw new Error("DanceMovesEffects pulse requires an audio element");
       var ticks = Math.max(1, Math.round(finite2(options.ticks, 16)));
@@ -1249,7 +1306,7 @@ function install2(__dmScope) {
     function cueTimeline(options) {
       options = options || {};
       var state = commonState(options, "cue-timeline");
-      var audio = element(options.audio, state.root.querySelector("audio"));
+      var audio = playbackElement(options.audio, state.root.querySelector("audio"));
       if (!audio)
         throw new Error("DanceMovesEffects cueTimeline requires an audio element");
       var cues = (Array.isArray(options.cues) ? options.cues : []).map(function(cue, index) {
@@ -1410,7 +1467,7 @@ function install2(__dmScope) {
     function spritePlayback(options) {
       options = options || {};
       var state = commonState(options, "sprite-playback");
-      var audio = element(options.audio, state.root.querySelector("audio"));
+      var audio = playbackElement(options.audio, state.root.querySelector("audio"));
       var target = element(options.target, state.root);
       if (!audio)
         throw new Error("DanceMovesEffects spritePlayback requires an audio element");
@@ -1604,7 +1661,7 @@ function install2(__dmScope) {
     function lyricStage(options) {
       options = options || {};
       var state = commonState(options, "lyric-stage");
-      var audio = element(options.audio, state.root.querySelector("audio"));
+      var audio = playbackElement(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");
@@ -4823,9 +4880,11 @@ function install9(__dmScope) {
       const clock = options.clock === void 0 ? "page" : options.clock;
       if (!["page", "audio", "auto"].includes(clock))
         throw new TypeError("clock must be page, audio or auto");
-      const audio = clock === "page" ? null : element(options.audio, "audio");
-      if (audio && String(audio.tagName).toLowerCase() !== "audio")
-        throw new TypeError("audio must be an HTMLAudioElement");
+      let audio = clock === "page" ? null : element(options.audio, "audio");
+      if (audio && motion.playbackSource)
+        audio = motion.playbackSource(audio);
+      if (audio && !["audio", "video"].includes(String(audio.tagName).toLowerCase()))
+        throw new TypeError("audio must resolve to native media or a shared playback source");
       const rate = options.rate === void 0 ? 1 : number(options.rate, "rate");
       if (rate <= 0 || rate > 64)
         throw new RangeError("rate must be in (0, 64]");
@@ -5073,7 +5132,7 @@ function install9(__dmScope) {
       }
       if (options.resetOnCue)
         disposers.push(motion.onCue(typeof options.resetOnCue === "string" ? options.resetOnCue : "*", (detail) => {
-          if (!detail.audio || !audio || detail.audio === audio)
+          if (!detail.audio || !audio || detail.audio === audio || motion.playbackSource && motion.playbackSource(detail.audio) === motion.playbackSource(audio))
             reset();
         }, { id: id + ":cue-reset" }));
       if (options.offscreen !== false && window2.IntersectionObserver) {
@@ -5347,6 +5406,8 @@ function createScope(root, config, { legacyGlobals = false, nonce, orientation =
   }
   const api = {
     id,
+    root,
+    legacyGlobals,
     window,
     document,
     get disposed() {
@@ -5949,8 +6010,428 @@ function createMotionRecorder(scope, { durationMilliseconds = 3e4, maxSamples =
   });
 }
 
+// .build/modules/playback.mjs
+var youtubeLoaders = /* @__PURE__ */ new WeakMap();
+function validatePlaybackMapping(input, masterDuration) {
+  const offset = input.offset ?? 0, duration = input.duration ?? masterDuration, playerStart = input.playerStart ?? 0;
+  for (const [key, value] of Object.entries({ offset, duration, playerStart, masterDuration })) {
+    if (typeof value !== "number" || !Number.isFinite(value) || value < 0 || (key === "duration" || key === "masterDuration") && value === 0) throw new RangeError(`${key} must be a finite positive duration or nonnegative offset`);
+  }
+  if (offset + duration > masterDuration + 1e-3) throw new RangeError("The clip extends beyond its associated master");
+  return Object.freeze({ offset, duration, playerStart, masterDuration });
+}
+function loadYouTubeAPI(host) {
+  if (host.YT?.Player) return Promise.resolve(host.YT);
+  if (youtubeLoaders.has(host)) return youtubeLoaders.get(host);
+  const pending = new Promise((resolve, reject) => {
+    const previous = host.onYouTubeIframeAPIReady;
+    let timeout;
+    const script = host.document.createElement("script");
+    function finish(error) {
+      host.clearTimeout(timeout);
+      if (host.onYouTubeIframeAPIReady === ready) host.onYouTubeIframeAPIReady = previous;
+      script.removeEventListener("error", failed);
+      if (error) {
+        script.remove();
+        youtubeLoaders.delete(host);
+        reject(error);
+      } else resolve(host.YT);
+    }
+    function ready() {
+      try {
+        previous?.();
+      } finally {
+        finish(host.YT?.Player ? null : new Error("YouTube API unavailable"));
+      }
+    }
+    function failed() {
+      finish(new Error("YouTube API failed to load"));
+    }
+    host.onYouTubeIframeAPIReady = ready;
+    script.src = "https://www.youtube.com/iframe_api";
+    script.addEventListener("error", failed, { once: true });
+    timeout = host.setTimeout(() => finish(new Error("YouTube API timed out")), 2e4);
+    host.document.head.appendChild(script);
+  });
+  youtubeLoaders.set(host, pending);
+  return pending;
+}
+function installPlayback(scope, api, host = scope.document.defaultView) {
+  const groups = /* @__PURE__ */ new Map(), transports = /* @__PURE__ */ new WeakSet(), aliases = /* @__PURE__ */ new WeakMap(), controllers = /* @__PURE__ */ new Set(), registered = /* @__PURE__ */ new WeakMap();
+  let disposed = false;
+  function emit(target, type) {
+    target.dispatchEvent(new host.Event(type));
+  }
+  function groupFor(reference) {
+    if (disposed) throw new Error("DanceMoves playback owner is destroyed");
+    const master = reference?.element || reference, declared = reference?.element ? reference.duration : void 0;
+    const isNative = !!master?.addEventListener && ["AUDIO", "VIDEO"].includes(master.tagName);
+    if (!isNative && (!master || typeof master.id !== "string" || !master.id.trim() || master.id.length > 160 || typeof master.duration !== "number" || !Number.isFinite(master.duration) || master.duration <= 0)) throw new TypeError("A native master or identified master duration is required");
+    if (isNative && (master.ownerDocument !== host.document || !scope.legacyGlobals && !scope.root.contains(master))) throw new TypeError("The master must belong to this runtime root");
+    if (groups.has(master)) {
+      const group2 = groups.get(master);
+      group2.setDuration(declared);
+      return group2;
+    }
+    const transport = new host.EventTarget();
+    transports.add(transport);
+    let active = null, lastPaused = true, delegate = null;
+    let declaredDuration = declared || 0;
+    function setDuration(value) {
+      if (value === void 0) return;
+      if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) throw new RangeError("Declared master duration must be positive and finite");
+      if (declaredDuration && Math.abs(declaredDuration - value) > 1e-3) throw new RangeError("Conflicting master durations");
+      if (isNative && Number(master.duration) > 0 && Math.abs(Number(master.duration) - value) > 0.25) throw new RangeError("Declared master duration does not match its native reference");
+      declaredDuration = value;
+    }
+    setDuration(declared);
+    const duration = () => delegate?.duration || declaredDuration || (Number(master.duration) > 0 && Number.isFinite(Number(master.duration)) ? Number(master.duration) : Number(api.config?.masterDurationMilliseconds || 0) / 1e3);
+    const target = isNative ? master : scope.root;
+    const native = { element: isNative ? master : null, read: () => ({ time: Number(master.currentTime) || 0, paused: isNative ? master.paused : true, ended: master.ended || false, rate: master.playbackRate || 1, seeking: master.seeking || false, error: master.error }), pause: () => master.pause?.(), play: () => master.play?.(), seek: (time) => {
+      if (isNative) master.currentTime = time;
+    }, mapping: null };
+    active = native;
+    function read() {
+      if (delegate) return { time: delegate.currentTime, paused: delegate.paused, ended: delegate.ended, rate: delegate.playbackRate, seeking: delegate.seeking, error: delegate.error };
+      const raw = active.read(), map = active.mapping || { offset: 0, playerStart: 0, duration: duration() };
+      const local = raw.time - map.playerStart, outside = local < -1e-3 || local > map.duration + 1e-3;
+      return { ...raw, time: map.offset + Math.max(0, Math.min(map.duration, local)), paused: raw.paused || outside, ended: raw.ended || local > map.duration + 1e-3 };
+    }
+    Object.defineProperties(transport, {
+      nodeType: { value: 1 },
+      tagName: { get: () => isNative ? master.tagName : "VIDEO" },
+      ownerDocument: { get: () => target.ownerDocument },
+      dataset: { get: () => target.dataset },
+      id: { get: () => master.id },
+      isConnected: { get: () => target.isConnected },
+      currentTime: { get: () => read().time, set: (value) => {
+        if (delegate) {
+          delegate.currentTime = value;
+          return;
+        }
+        const map = active.mapping || { offset: 0, playerStart: 0, duration: duration() };
+        active.seek(map.playerStart + Math.max(0, Math.min(map.duration, Number(value) - map.offset)));
+      } },
+      duration: { get: duration },
+      paused: { get: () => read().paused },
+      ended: { get: () => read().ended },
+      seeking: { get: () => read().seeking || false },
+      playbackRate: { get: () => read().rate },
+      error: { get: () => read().error || null },
+      element: { value: isNative ? master : null },
+      activePlayer: { get: () => delegate ? delegate.activePlayer : active.element },
+      masterId: { get: () => delegate ? delegate.masterId : master.currentSrc || master.src || master.id }
+    });
+    transport.matches = (selector) => target.matches(selector);
+    transport.getAttribute = (name) => target.getAttribute(name);
+    transport.setAttribute = (name, value) => target.setAttribute(name, value);
+    transport.removeAttribute = (name) => target.removeAttribute(name);
+    transport.play = () => delegate ? delegate.play() : active.play();
+    transport.pause = () => delegate ? delegate.pause() : active.pause();
+    function activate(source) {
+      if (active !== source) {
+        const previous = active;
+        active = source;
+        previous.pause();
+        emit(transport, "seeking");
+        emit(transport, "seeked");
+      }
+    }
+    function forward(source, type) {
+      if (type === "play" || type === "playing") activate(source);
+      if (active !== source) return;
+      const paused = read().paused;
+      if (type === "timeupdate" && paused !== lastPaused) emit(transport, paused ? "pause" : "playing");
+      lastPaused = paused;
+      emit(transport, type);
+    }
+    const events = ["loadedmetadata", "durationchange", "play", "playing", "pause", "ended", "seeking", "seeked", "ratechange", "timeupdate", "waiting", "error"];
+    const removers = [];
+    function bindNative(element, mapping) {
+      const source = element === master ? native : { element, mapping, read: () => ({ time: Number(element.currentTime) || 0, paused: element.paused, ended: element.ended, rate: element.playbackRate || 1, seeking: element.seeking, error: element.error }), pause: () => element.pause(), play: () => element.play(), seek: (time) => {
+        element.currentTime = time;
+      } };
+      source.removers = [];
+      for (const type of events) {
+        const listener = () => forward(source, type);
+        scope.listen(element, type, listener);
+        const remove = () => scope.unlisten(element, type, listener);
+        removers.push(remove);
+        source.removers.push(remove);
+      }
+      return source;
+    }
+    if (isNative) bindNative(master, null);
+    const group = {
+      transport,
+      duration,
+      setDuration,
+      activate,
+      forward,
+      bindNative,
+      isActive: (source) => active === source,
+      aliasTo(target2) {
+        removers.splice(0).forEach((remove) => remove());
+        delegate = target2;
+        aliases.set(transport, target2);
+        for (const type of events) {
+          const relay = () => emit(transport, type);
+          scope.listen(target2, type, relay);
+          removers.push(() => scope.unlisten(target2, type, relay));
+        }
+      },
+      reconcile(source) {
+        if (active !== source) return;
+        const paused = read().paused;
+        if (paused !== lastPaused) {
+          lastPaused = paused;
+          emit(transport, paused ? "pause" : "playing");
+        }
+        emit(transport, "timeupdate");
+      },
+      remove(source) {
+        if (active === source) {
+          source.pause();
+          active = native;
+          lastPaused = true;
+          emit(transport, "pause");
+          emit(transport, "seeking");
+          emit(transport, "seeked");
+        }
+      },
+      destroy() {
+        removers.splice(0).forEach((remove) => remove());
+        emit(transport, "pause");
+      }
+    };
+    groups.set(master, group);
+    return group;
+  }
+  function registerPlayer(options) {
+    if (!options || options.masterVerified !== true) throw new TypeError("An explicitly verified master association is required");
+    const group = groupFor(options.master), mapping = validatePlaybackMapping(options, group.duration());
+    const element = options.player;
+    if (!element?.addEventListener || !["AUDIO", "VIDEO"].includes(element.tagName)) throw new TypeError("player must be native audio or video");
+    if (element.ownerDocument !== host.document || !scope.legacyGlobals && !scope.root.contains(element)) throw new TypeError("The player must belong to this runtime root");
+    if (registered.has(element)) throw new Error("Player already has a playback owner");
+    if (element === options.master || element === group.transport.element) throw new TypeError("The master is already registered");
+    const previousGroup = groups.get(element);
+    if (previousGroup && previousGroup !== group) {
+      if ([...controllers].some((owner) => owner.source === previousGroup.transport)) throw new Error("This player already owns a different master group");
+      api.unregisterPlaybackSource?.(previousGroup.transport);
+      previousGroup.aliasTo(group.transport);
+      for (const [key, value] of groups) if (value === previousGroup) groups.set(key, group);
+    }
+    const source = group.bindNative(element, mapping);
+    let destroyed = false;
+    const controller = { source: group.transport, mapping, teardown() {
+      if (destroyed) return;
+      destroyed = true;
+      source.removers.splice(0).forEach((remove) => remove());
+      group.remove(source);
+      registered.delete(element);
+      controllers.delete(controller);
+    }, snapshot() {
+      return { kind: "native", mapping, active: group.isActive(source), destroyed };
+    } };
+    registered.set(element, controller);
+    if (!element.paused && !element.ended) group.forward(source, "playing");
+    Promise.resolve(api.ready).then(() => {
+      if (!destroyed && !disposed) api.registerPlaybackSource?.(group.transport);
+    });
+    controllers.add(controller);
+    return controller;
+  }
+  function registerYouTube(options) {
+    if (!options || options.masterVerified !== true) throw new TypeError("An explicitly verified master association is required");
+    const group = groupFor(options.master), mapping = validatePlaybackMapping(options, group.duration());
+    const iframe = options.iframe;
+    if (iframe?.tagName !== "IFRAME") throw new TypeError("A YouTube iframe is required");
+    if (iframe.ownerDocument !== host.document || !scope.legacyGlobals && !scope.root.contains(iframe)) throw new TypeError("The iframe must belong to this runtime root");
+    if (registered.has(iframe)) throw new Error("Player already has a playback owner");
+    const url2 = new URL(iframe.src, host.location.href);
+    if (!/^https:\/\/(www\.)?youtube(-nocookie)?\.com\/embed\/[A-Za-z0-9_-]{11}(\?|$)/.test(url2.href)) throw new TypeError("Unsupported YouTube embed");
+    url2.searchParams.set("enablejsapi", "1");
+    url2.searchParams.set("origin", host.location.origin);
+    const expectedVideoId = url2.pathname.split("/").at(-1);
+    if (iframe.src !== url2.href) iframe.src = url2.href;
+    let player = null, state = -1, error = null, frame = 0, destroyed = false, lastTime = null, lastWall = null, lastRate = 1, readyTimer = 0, rejectReady = null;
+    const source = {
+      element: iframe,
+      mapping,
+      read: () => ({ time: player?.getCurrentTime?.() || 0, paused: state !== 1, ended: state === 0, rate: player?.getPlaybackRate?.() || 1, error }),
+      pause: () => player?.pauseVideo?.(),
+      play: () => player?.playVideo?.(),
+      seek: (time) => player?.seekTo?.(time, true)
+    };
+    function stop() {
+      if (frame) scope.window.cancelAnimationFrame(frame);
+      frame = 0;
+      lastTime = null;
+      lastWall = null;
+    }
+    function sample(wall) {
+      frame = 0;
+      if (destroyed || state !== 1 || scope.document.hidden || !group.isActive(source)) return;
+      const raw = source.read();
+      if (lastTime !== null && Math.abs(raw.time - lastTime - (wall - lastWall) / 1e3 * raw.rate) > 0.4) {
+        group.forward(source, "seeking");
+        group.forward(source, "seeked");
+      }
+      if (raw.rate !== lastRate) {
+        lastRate = raw.rate;
+        group.forward(source, "ratechange");
+      }
+      lastTime = raw.time;
+      lastWall = wall;
+      group.reconcile(source);
+      frame = scope.window.requestAnimationFrame(sample);
+    }
+    function resume() {
+      stop();
+      if (!destroyed && state === 1 && !scope.document.hidden && group.isActive(source)) frame = scope.window.requestAnimationFrame(sample);
+    }
+    const visibility = () => {
+      if (scope.document.hidden) stop();
+      else {
+        group.forward(source, "seeking");
+        group.forward(source, "seeked");
+        resume();
+      }
+    };
+    const pageHide = () => stop(), pageShow = () => {
+      if (player?.getPlayerState) state = player.getPlayerState();
+      visibility();
+    };
+    scope.listen(scope.document, "visibilitychange", visibility);
+    scope.listen(host, "pagehide", pageHide);
+    scope.listen(host, "pageshow", pageShow);
+    const controller = {
+      source: group.transport,
+      mapping,
+      ready: null,
+      teardown() {
+        if (destroyed) return;
+        destroyed = true;
+        stop();
+        if (readyTimer) scope.window.clearTimeout(readyTimer);
+        readyTimer = 0;
+        rejectReady?.(new Error("YouTube playback owner removed"));
+        rejectReady = null;
+        group.remove(source);
+        scope.unlisten(scope.document, "visibilitychange", visibility);
+        scope.unlisten(host, "pagehide", pageHide);
+        scope.unlisten(host, "pageshow", pageShow);
+        player?.destroy?.();
+        registered.delete(iframe);
+        controllers.delete(controller);
+      },
+      snapshot() {
+        return { kind: "youtube", mapping, state, error, active: group.isActive(source), destroyed, polling: !!frame, time: group.transport.currentTime };
+      }
+    };
+    controllers.add(controller);
+    registered.set(iframe, controller);
+    Promise.resolve(api.ready).then(() => {
+      if (!destroyed && !disposed) api.registerPlaybackSource?.(group.transport);
+    });
+    controller.ready = loadYouTubeAPI(host).then((YT) => {
+      if (destroyed || disposed) return controller;
+      return new Promise((resolve, reject) => {
+        rejectReady = reject;
+        readyTimer = scope.window.setTimeout(() => {
+          readyTimer = 0;
+          error = new Error("YouTube player readiness timed out");
+          rejectReady = null;
+          reject(error);
+        }, 15e3);
+        player = new YT.Player(iframe, { events: {
+          onReady() {
+            if (destroyed) return;
+            if (readyTimer) scope.window.clearTimeout(readyTimer);
+            readyTimer = 0;
+            rejectReady = null;
+            const actual = Number(player.getDuration?.());
+            if (actual > 0 && actual + 0.25 < mapping.playerStart + mapping.duration) {
+              error = new Error("The mapped soundtrack window exceeds the video duration");
+              reject(error);
+              return;
+            }
+            group.forward(source, "loadedmetadata");
+            const initialState = player.getPlayerState?.();
+            if (initialState === 1) controllerState({ data: initialState });
+            resolve(controller);
+          },
+          onStateChange: controllerState,
+          onPlaybackRateChange() {
+            if (!destroyed) group.forward(source, "ratechange");
+          },
+          onError(event) {
+            if (destroyed) return;
+            error = new Error("YouTube playback error " + event.data);
+            state = -1;
+            stop();
+            if (readyTimer) scope.window.clearTimeout(readyTimer);
+            readyTimer = 0;
+            rejectReady = null;
+            group.forward(source, "pause");
+            group.forward(source, "error");
+            reject(error);
+          }
+        } });
+        function controllerState(event) {
+          if (destroyed) return;
+          state = event.data;
+          stop();
+          if (state === 1) {
+            let actualId;
+            try {
+              const actualUrl = new URL(player.getVideoUrl());
+              actualId = actualUrl.searchParams.get("v") || actualUrl.pathname.match(/^\/(?:shorts|embed)\/([A-Za-z0-9_-]{11})\/?$/)?.[1];
+            } catch {
+            }
+            if (actualId !== expectedVideoId) {
+              error = new Error("YouTube switched away from the verified soundtrack asset");
+              state = -1;
+              group.forward(source, "pause");
+              group.forward(source, "error");
+              return;
+            }
+            const actualDuration = Number(player.getDuration?.());
+            if (actualDuration > 0 && actualDuration + 0.25 < mapping.playerStart + mapping.duration) {
+              error = new Error("The mapped soundtrack window exceeds the video duration");
+              state = -1;
+              group.forward(source, "pause");
+              group.forward(source, "error");
+              return;
+            }
+            group.forward(source, "play");
+            group.forward(source, "playing");
+            resume();
+          } else group.forward(source, state === 0 ? "ended" : state === 3 ? "waiting" : "pause");
+          if (state === 3) group.forward(source, "pause");
+        }
+      });
+    });
+    controller.ready.catch(() => {
+    });
+    return controller;
+  }
+  Object.assign(api, { playbackSource: (master) => {
+    let source = transports.has(master) ? master : groupFor(master).transport;
+    while (aliases.has(source)) source = aliases.get(source);
+    return source;
+  }, registerPlayer, registerYouTube });
+  scope.onDispose(() => {
+    disposed = true;
+    for (const controller of [...controllers]) controller.teardown();
+    for (const group of new Set(groups.values())) group.destroy();
+    groups.clear();
+  });
+}
+
 // .build/modules/version.mjs
-var VERSION = "3.1.18";
+var VERSION = "3.1.20";
 
 // .build/modules/index.mjs
 var mounted = /* @__PURE__ */ new WeakMap();
@@ -5985,6 +6466,7 @@ function createDanceMoves(options = {}) {
   }
   try {
     runtime_default.core(scope);
+    installPlayback(scope, w.DanceMoves, root.ownerDocument.defaultView);
     runtime_default.effects(scope);
     runtime_default.orientationCore(scope);
     runtime_default.native(scope);