@kieransimkin/dancemoves 3.1.19 → 3.1.21

package/lib/index.mjs

@@ -17,6 +17,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;
@@ -106,13 +107,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);
@@ -169,7 +173,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();
@@ -731,9 +735,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),
@@ -741,7 +754,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)
@@ -750,7 +764,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;
@@ -788,8 +802,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) {
@@ -799,47 +819,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"));
@@ -953,6 +996,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);
@@ -993,6 +1046,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);
     }
@@ -1118,7 +1175,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)));
@@ -1218,7 +1275,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) {
@@ -1379,7 +1436,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");
@@ -1573,7 +1630,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");
@@ -4792,9 +4849,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]");
@@ -5042,7 +5101,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) {
@@ -5316,6 +5375,8 @@ function createScope(root, config, { legacyGlobals = false, nonce, orientation =
   }
   const api = {
     id,
+    root,
+    legacyGlobals,
     window,
     document,
     get disposed() {
@@ -5918,8 +5979,855 @@ 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 registerEndpoint(options, provider = false) {
+    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 || !provider && !scope.legacyGlobals && !scope.root.contains(element)) throw new TypeError("The player must belong to this runtime root");
+    if (provider && (!element.removeEventListener || typeof element.play !== "function" || typeof element.pause !== "function")) throw new TypeError("An event-driven playback provider is required");
+    if (provider && typeof host.Node === "function" && element instanceof host.Node) throw new TypeError("Use registerPlayer for native DOM players");
+    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: provider ? "provider" : "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;
+  }
+  const registerPlayer = (options) => registerEndpoint(options);
+  const registerPlaybackProvider = (options) => registerEndpoint(options, true);
+  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, registerPlaybackProvider, 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/child-playback.mjs
+var PROTOCOL = "dancemoves.child-playback.v1";
+var EVENTS = /* @__PURE__ */ new Set(["snapshot", "loadedmetadata", "durationchange", "play", "playing", "pause", "ended", "seeking", "seeked", "ratechange", "timeupdate", "waiting", "error"]);
+var MAX_SECONDS = 86400;
+var publisherOwners = /* @__PURE__ */ new WeakMap();
+var receiverOwners = /* @__PURE__ */ new WeakMap();
+function identity(value, name) {
+  if (typeof value !== "string" || !value.trim() || value.length > 200) throw new TypeError(`${name} must be a nonempty string of at most 200 characters`);
+  return value;
+}
+function exactOrigin(value) {
+  const url2 = new URL(value);
+  if (!["http:", "https:"].includes(url2.protocol) || url2.origin !== value) throw new TypeError("An exact HTTP(S) origin is required");
+  return value;
+}
+function context(options) {
+  const host = options.window || globalThis.window;
+  if (!host?.document || !host.crypto?.randomUUID) throw new TypeError("A browser Window with crypto.randomUUID is required");
+  return { host, channel: identity(options.channel, "channel"), assetId: identity(options.assetId, "assetId"), origin: exactOrigin(options.origin) };
+}
+function validState(value) {
+  return value && typeof value === "object" && typeof value.time === "number" && Number.isFinite(value.time) && value.time >= 0 && typeof value.duration === "number" && Number.isFinite(value.duration) && value.duration > 0 && value.duration <= MAX_SECONDS && value.time <= value.duration + 0.25 && typeof value.rate === "number" && Number.isFinite(value.rate) && value.rate >= 0.0625 && value.rate <= 16 && ["paused", "ended", "seeking", "buffering", "error"].every((key) => typeof value[key] === "boolean");
+}
+function packet(data, channel, assetId) {
+  return data && typeof data === "object" && data.protocol === PROTOCOL && data.channel === channel && data.assetId === assetId;
+}
+function resources(host) {
+  const removers = [], timers = /* @__PURE__ */ new Set();
+  return {
+    listen(target, type, callback) {
+      target.addEventListener(type, callback);
+      removers.push(() => target.removeEventListener(type, callback));
+    },
+    later(callback, delay) {
+      const id = host.setTimeout(() => {
+        timers.delete(id);
+        callback();
+      }, delay);
+      timers.add(id);
+      return id;
+    },
+    cancel(id) {
+      if (id) {
+        host.clearTimeout(id);
+        timers.delete(id);
+      }
+    },
+    dispose() {
+      removers.splice(0).forEach((remove) => remove());
+      for (const id of timers) host.clearTimeout(id);
+      timers.clear();
+    },
+    snapshot() {
+      return { listeners: removers.length, timers: timers.size };
+    }
+  };
+}
+function createPlaybackPublisher(options = {}) {
+  const { host, channel, assetId, origin } = context(options), source = options.source;
+  const target = options.targetWindow || host.parent;
+  if (!source?.addEventListener || !source?.pause || !target?.postMessage || target === host) throw new TypeError("A playback source and distinct target Window are required");
+  const owners = publisherOwners.get(host) || /* @__PURE__ */ new Map(), key = JSON.stringify([origin, channel, assetId]);
+  const routes = owners.get(target) || /* @__PURE__ */ new Set();
+  if (routes.has(key)) throw new Error("Child playback route already has a publisher");
+  const owned = resources(host);
+  let session = null, sequence = 0, commandSequence = 0, timer = 0, destroyed = false, suspended = false, lastPublished = null;
+  const envelope = (type, extra = {}) => ({ protocol: PROTOCOL, channel, assetId, session, type, ...extra });
+  function send(type, extra) {
+    target.postMessage(envelope(type, extra), origin);
+  }
+  function stop() {
+    owned.cancel(timer);
+    timer = 0;
+  }
+  function sample(event = "snapshot") {
+    if (event === "timeupdate" && lastPublished !== null && host.performance.now() - lastPublished < 250) return;
+    stop();
+    if (destroyed || suspended || !session) return;
+    const state = { time: Number(source.currentTime), duration: Number(source.duration), rate: Number(source.playbackRate), paused: !!source.paused, ended: !!source.ended, seeking: !!source.seeking, buffering: event === "waiting", error: !!source.error };
+    if (!validState(state)) return;
+    lastPublished = host.performance.now();
+    send("state", { sequence: ++sequence, event, state });
+    if (!state.paused && !state.ended && !state.error && !state.buffering && !host.document.hidden) timer = owned.later(() => sample(), 250);
+  }
+  function disconnect(reason) {
+    stop();
+    source.pause();
+    if (session) send("disconnect", { reason });
+    session = null;
+  }
+  function message(event) {
+    const data = event.data;
+    if (destroyed || suspended || event.source !== target || event.origin !== origin || !packet(data, channel, assetId)) return;
+    if (data.type === "connect" && typeof data.session === "string" && /^[0-9a-f-]{36}$/i.test(data.session)) {
+      if (session !== data.session) {
+        session = data.session;
+        sequence = 0;
+        commandSequence = 0;
+        lastPublished = null;
+      }
+      sample();
+      return;
+    }
+    if (data.session !== session || !session) return;
+    if (data.type === "disconnect") {
+      disconnect("parent-disconnected");
+      return;
+    }
+    if (data.type !== "command" || !Number.isSafeInteger(data.sequence) || data.sequence <= commandSequence) return;
+    if (!["pause", "seek", "play"].includes(data.command)) return;
+    if (data.command === "seek" && (typeof data.time !== "number" || !Number.isFinite(data.time) || data.time < 0 || data.time > Number(source.duration))) return;
+    commandSequence = data.sequence;
+    const currentSession = session;
+    Promise.resolve().then(() => {
+      if (destroyed || session !== currentSession) return;
+      if (data.command === "pause") source.pause();
+      else if (data.command === "seek") source.currentTime = data.time;
+      else if (options.allowPlayCommands === true) return source.play();
+      else throw new Error("Parent play commands are disabled");
+    }).then(() => {
+      if (!destroyed && session === currentSession) {
+        sample();
+        send("ack", { sequence: data.sequence, ok: true });
+      }
+    }, () => {
+      if (!destroyed && session === currentSession) send("ack", { sequence: data.sequence, ok: false });
+    });
+  }
+  owned.listen(host, "message", message);
+  function requestClose() {
+    if (!destroyed && !suspended && session) send("dismiss", { sequence: ++sequence });
+  }
+  if (options.notifyEscape === true) owned.listen(host.document, "keydown", (event) => {
+    if (event.key === "Escape" && !event.defaultPrevented && !host.document.fullscreenElement) requestClose();
+  });
+  for (const event of EVENTS) if (event !== "snapshot") owned.listen(source, event, () => sample(event));
+  owned.listen(host.document, "visibilitychange", () => {
+    if (host.document.hidden) {
+      stop();
+      if (session) {
+        sample("waiting");
+        stop();
+      }
+    } else sample();
+  });
+  owned.listen(host, "pagehide", () => {
+    suspended = true;
+    disconnect("pagehide");
+  });
+  owned.listen(host, "pageshow", () => {
+    if (!destroyed) {
+      suspended = false;
+      send("available");
+    }
+  });
+  routes.add(key);
+  owners.set(target, routes);
+  publisherOwners.set(host, owners);
+  send("available");
+  return { requestClose, teardown() {
+    if (destroyed) return;
+    disconnect("teardown");
+    destroyed = true;
+    owned.dispose();
+    routes.delete(key);
+    if (!routes.size) owners.delete(target);
+  }, snapshot() {
+    return { kind: "child-publisher", connected: !!session, destroyed, suspended, ...owned.snapshot() };
+  } };
+}
+function createPlaybackReceiver(options = {}) {
+  const { host, channel, assetId, origin } = context(options), iframe = options.iframe;
+  if (iframe?.tagName !== "IFRAME" || !iframe.contentWindow) throw new TypeError("An attached iframe is required");
+  if (receiverOwners.has(iframe)) throw new Error("The child frame already has a playback receiver");
+  const staleAfter = options.staleAfterMilliseconds ?? 1500;
+  if (typeof staleAfter !== "number" || !Number.isFinite(staleAfter) || staleAfter < 750 || staleAfter > 1e4) throw new RangeError("staleAfterMilliseconds must be between 750 and 10000");
+  const owned = resources(host), player = new host.EventTarget(), pending = /* @__PURE__ */ new Map();
+  let session = "", sequence = 0, commands = 0, lastWall = 0, timer = 0, connectTimer = 0, destroyed = false, connected = false, status = "connecting";
+  let state = { time: 0, duration: 0, rate: 1, paused: true, ended: false, seeking: false, buffering: false, error: false };
+  let resolveReady, rejectReady, ready, readySettled = false;
+  function prepareReady() {
+    readySettled = false;
+    ready = new Promise((resolve, reject) => {
+      resolveReady = (value) => {
+        readySettled = true;
+        resolve(value);
+      };
+      rejectReady = (error) => {
+        readySettled = true;
+        reject(error);
+      };
+    });
+    ready.catch(() => {
+    });
+  }
+  prepareReady();
+  const emit = (event) => player.dispatchEvent(new host.Event(event));
+  const envelope = (type, extra = {}) => ({ protocol: PROTOCOL, channel, assetId, session, type, ...extra });
+  function send(type, extra) {
+    iframe.contentWindow?.postMessage(envelope(type, extra), origin);
+  }
+  function cancelPending() {
+    for (const request of pending.values()) {
+      owned.cancel(request.timer);
+      request.reject(new Error("Child playback disconnected"));
+    }
+    pending.clear();
+  }
+  function stop(reason) {
+    owned.cancel(timer);
+    owned.cancel(connectTimer);
+    timer = connectTimer = 0;
+    const playing = !player.paused;
+    state = { ...state, time: player.currentTime, paused: true, buffering: false };
+    connected = false;
+    status = reason;
+    cancelPending();
+    if (playing) emit("pause");
+  }
+  function connect() {
+    if (destroyed) return ready;
+    if (readySettled) prepareReady();
+    stop("connecting");
+    session = host.crypto.randomUUID();
+    sequence = 0;
+    send("connect");
+    const started = host.performance.now();
+    const retry = () => {
+      if (destroyed || connected) return;
+      if (host.performance.now() - started >= 1e4) {
+        send("disconnect");
+        stop("unavailable");
+        session = "";
+        rejectReady(new Error("Child playback did not become ready"));
+        return;
+      }
+      send("connect");
+      connectTimer = owned.later(retry, 500);
+    };
+    connectTimer = owned.later(retry, 500);
+    return ready;
+  }
+  function command(name, time) {
+    if (destroyed || !connected) return Promise.reject(new Error("Child playback is unavailable"));
+    if (pending.size >= 16) return Promise.reject(new Error("Too many pending child playback commands"));
+    const id = ++commands;
+    return new Promise((resolve, reject) => {
+      const timeout = owned.later(() => {
+        pending.delete(id);
+        reject(new Error("Child playback command timed out"));
+      }, 2e3);
+      pending.set(id, { resolve, reject, timer: timeout });
+      send("command", { sequence: id, command: name, ...name === "seek" ? { time } : {} });
+    });
+  }
+  Object.defineProperties(player, {
+    nodeType: { value: 1 },
+    tagName: { value: "VIDEO" },
+    ownerDocument: { value: host.document },
+    isConnected: { get: () => !destroyed && iframe.isConnected },
+    currentTime: { get: () => Math.min(state.duration || MAX_SECONDS, state.time + (!player.paused && !state.seeking ? Math.min(500, Math.max(0, host.performance.now() - lastWall)) / 1e3 * state.rate : 0)), set: (value) => {
+      if (typeof value !== "number" || !Number.isFinite(value) || value < 0 || value > state.duration) throw new RangeError("Seek must be inside the child duration");
+      command("seek", value).catch(() => {
+      });
+    } },
+    duration: { get: () => state.duration },
+    paused: { get: () => state.paused || state.buffering || state.error || !connected },
+    ended: { get: () => state.ended },
+    seeking: { get: () => state.seeking },
+    playbackRate: { get: () => state.rate },
+    error: { get: () => state.error ? new Error("Child media error") : null }
+  });
+  player.play = () => command("play");
+  player.pause = () => {
+    command("pause").catch(() => {
+    });
+  };
+  function message(event) {
+    const data = event.data;
+    if (destroyed || event.source !== iframe.contentWindow || event.origin !== origin || !packet(data, channel, assetId)) return;
+    if (data.type === "available") {
+      if (!host.document.hidden) {
+        if (connected) send("connect");
+        else connect();
+      }
+      return;
+    }
+    if (data.session !== session) return;
+    if (data.type === "dismiss" && Number.isSafeInteger(data.sequence) && data.sequence > sequence) {
+      sequence = data.sequence;
+      emit("dismiss");
+      return;
+    }
+    if (data.type === "disconnect") {
+      stop("disconnected");
+      session = "";
+      return;
+    }
+    if (data.type === "ack" && Number.isSafeInteger(data.sequence) && typeof data.ok === "boolean") {
+      const request = pending.get(data.sequence);
+      if (request) {
+        owned.cancel(request.timer);
+        pending.delete(data.sequence);
+        data.ok ? request.resolve() : request.reject(new Error("Child playback rejected the command"));
+      }
+      return;
+    }
+    if (data.type !== "state" || !Number.isSafeInteger(data.sequence) || data.sequence <= sequence || !EVENTS.has(data.event) || !validState(data.state)) return;
+    const previous = state, wasConnected = connected, wasPaused = player.paused;
+    sequence = data.sequence;
+    state = { ...data.state };
+    lastWall = host.performance.now();
+    connected = true;
+    status = "connected";
+    owned.cancel(connectTimer);
+    connectTimer = 0;
+    owned.cancel(timer);
+    timer = 0;
+    if (!wasConnected) {
+      emit("loadedmetadata");
+      resolveReady(controller);
+    } else if (previous.duration !== state.duration) emit("durationchange");
+    if (previous.rate !== state.rate) emit("ratechange");
+    if (state.seeking && !previous.seeking) emit("seeking");
+    if (!state.seeking && previous.seeking) emit("seeked");
+    if (!state.seeking && !previous.seeking && wasConnected && Math.abs(state.time - previous.time - (wasPaused ? 0 : (lastWall - previousWall) / 1e3 * previous.rate)) > 0.4) {
+      emit("seeking");
+      emit("seeked");
+    }
+    previousWall = lastWall;
+    if (wasPaused && !player.paused) {
+      emit("play");
+      emit("playing");
+    }
+    if (!wasPaused && player.paused) emit("pause");
+    if (state.ended && !previous.ended) emit("ended");
+    if (data.event === "waiting") emit("waiting");
+    if (state.error && !previous.error) emit("error");
+    emit("timeupdate");
+    if (!player.paused) timer = owned.later(() => {
+      send("disconnect");
+      stop("stale");
+      session = "";
+      emit("waiting");
+    }, staleAfter);
+  }
+  let previousWall = 0;
+  owned.listen(host, "message", message);
+  owned.listen(iframe, "load", connect);
+  owned.listen(host, "pagehide", () => {
+    send("disconnect");
+    stop("suspended");
+    session = "";
+  });
+  owned.listen(host, "pageshow", connect);
+  owned.listen(host.document, "visibilitychange", () => {
+    if (host.document.hidden) {
+      send("command", { sequence: ++commands, command: "pause" });
+      stop("hidden");
+      session = "";
+    } else connect();
+  });
+  const observer = new host.MutationObserver(() => {
+    if (!iframe.isConnected) controller.teardown();
+  });
+  observer.observe(host.document.documentElement, { childList: true, subtree: true });
+  const controller = { player, get ready() {
+    return ready;
+  }, reconnect: connect, teardown() {
+    if (destroyed) return;
+    send("command", { sequence: ++commands, command: "pause" });
+    send("disconnect");
+    stop("destroyed");
+    destroyed = true;
+    session = "";
+    rejectReady(new Error("Child playback owner removed"));
+    observer.disconnect();
+    owned.dispose();
+    receiverOwners.delete(iframe);
+  }, snapshot() {
+    return { kind: "child-receiver", status, connected, destroyed, time: player.currentTime, paused: player.paused, assetId, ...owned.snapshot() };
+  } };
+  receiverOwners.set(iframe, controller);
+  connect();
+  return controller;
+}
+function installChildPlayback(scope, api, host) {
+  function own(controller) {
+    const teardown = controller.teardown.bind(controller);
+    const remove = scope.onDispose(() => teardown());
+    controller.teardown = () => {
+      remove();
+      teardown();
+    };
+    return controller;
+  }
+  api.publishPlayback = (options) => {
+    if (api.destroyed) throw new Error("DanceMoves owner is destroyed");
+    return own(createPlaybackPublisher({ ...options, window: host }));
+  };
+  api.receiveChildPlayback = (options) => {
+    if (api.destroyed) throw new Error("DanceMoves owner is destroyed");
+    if (typeof api.registerPlaybackProvider !== "function") throw new Error("The shared playback provider API is required");
+    if (options?.masterVerified !== true) throw new TypeError("An explicitly verified master association is required");
+    const receiver = createPlaybackReceiver({ ...options, window: host });
+    let registration;
+    try {
+      registration = api.registerPlaybackProvider({ ...options, player: receiver.player });
+    } catch (error) {
+      receiver.teardown();
+      throw error;
+    }
+    return own({ source: registration.source, player: receiver.player, get ready() {
+      return receiver.ready;
+    }, mapping: registration.mapping, reconnect: receiver.reconnect, teardown() {
+      receiver.teardown();
+      registration.teardown();
+    }, snapshot() {
+      return { ...receiver.snapshot(), mapping: registration.mapping };
+    } });
+  };
+}
+
 // .build/modules/version.mjs
-var VERSION = "3.1.19";
+var VERSION = "3.1.21";
 
 // .build/modules/index.mjs
 var mounted = /* @__PURE__ */ new WeakMap();
@@ -5954,6 +6862,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);
@@ -5986,6 +6895,7 @@ function createDanceMoves(options = {}) {
       }
     });
     Object.defineProperty(api, "destroyed", { get: () => scope.disposed });
+    installChildPlayback(scope, api, ownerDocument.defaultView);
     api.ready = Promise.resolve(api.ready).then(() => {
       if (!scope.disposed) scope.document.dispatchEvent(new w.CustomEvent("dance-moves-ready", {
         bubbles: true,
@@ -6008,6 +6918,8 @@ export {
   VERSION,
   createDanceMoves,
   createMemoryPageStore,
+  createPlaybackPublisher,
+  createPlaybackReceiver,
   fromWordPressMeta,
   validatePageConfig
 };