@scarlett-player/gestures 1.6.0

package/dist/index.cjs

@@ -0,0 +1,531 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_RECOGNIZER_OPTIONS: () => DEFAULT_RECOGNIZER_OPTIONS,
+  GestureOverlay: () => GestureOverlay,
+  createGesturesPlugin: () => createGesturesPlugin,
+  createRecognizer: () => createRecognizer,
+  default: () => index_default,
+  zoneFor: () => zoneFor
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/recognizer.ts
+var ZONE_HYSTERESIS = 0.05;
+var DEFAULT_RECOGNIZER_OPTIONS = {
+  doubleTapWindowMs: 275,
+  accumulationWindowMs: 650,
+  leftZone: 0.33,
+  rightZone: 0.33,
+  slopPx: 10
+};
+function zoneFor(fraction, options) {
+  if (fraction <= options.leftZone) return "left";
+  if (fraction >= 1 - options.rightZone) return "right";
+  return "middle";
+}
+function createRecognizer(options = {}) {
+  const config = { ...DEFAULT_RECOGNIZER_OPTIONS, ...options };
+  let pending = null;
+  let lastTapZone = null;
+  let lastTapAt = 0;
+  let accumulatingZone = null;
+  let accumulatedCount = 0;
+  let lastAccumulateAt = 0;
+  let activePointers = 0;
+  const resetSequence = () => {
+    lastTapZone = null;
+    lastTapAt = 0;
+    accumulatingZone = null;
+    accumulatedCount = 0;
+    lastAccumulateAt = 0;
+  };
+  const resolveZone = (fraction) => {
+    const raw = zoneFor(fraction, config);
+    const active = accumulatingZone ?? lastTapZone;
+    if (!active || raw === active) return raw;
+    if (active === "left" && fraction <= config.leftZone + ZONE_HYSTERESIS) return "left";
+    if (active === "right" && fraction >= 1 - config.rightZone - ZONE_HYSTERESIS) return "right";
+    return raw;
+  };
+  const expire = (now) => {
+    if (accumulatingZone && now - lastAccumulateAt > config.accumulationWindowMs) {
+      resetSequence();
+    } else if (!accumulatingZone && lastTapZone && now - lastTapAt > config.doubleTapWindowMs) {
+      lastTapZone = null;
+      lastTapAt = 0;
+    }
+    return [];
+  };
+  return {
+    handle(record) {
+      const events = [];
+      switch (record.type) {
+        case "down": {
+          activePointers += 1;
+          if (activePointers > 1) {
+            if (pending) pending.invalid = true;
+            if (accumulatingZone || lastTapZone) {
+              resetSequence();
+              events.push({ type: "cancel" });
+            }
+            return events;
+          }
+          expire(record.timeStamp);
+          pending = {
+            pointerId: record.pointerId,
+            x: record.x,
+            y: record.y,
+            fraction: record.fraction,
+            timeStamp: record.timeStamp,
+            invalid: false
+          };
+          return events;
+        }
+        case "move": {
+          if (!pending || pending.pointerId !== record.pointerId || pending.invalid) {
+            return events;
+          }
+          const dx = record.x - pending.x;
+          const dy = record.y - pending.y;
+          if (Math.hypot(dx, dy) > config.slopPx) {
+            pending.invalid = true;
+            if (accumulatingZone || lastTapZone) {
+              resetSequence();
+              events.push({ type: "cancel" });
+            }
+          }
+          return events;
+        }
+        case "up": {
+          activePointers = Math.max(0, activePointers - 1);
+          const candidate = pending;
+          pending = null;
+          if (!candidate || candidate.pointerId !== record.pointerId || candidate.invalid) {
+            return events;
+          }
+          expire(record.timeStamp);
+          const zone = resolveZone(record.fraction);
+          if (accumulatingZone) {
+            if (zone === accumulatingZone) {
+              accumulatedCount += 1;
+              lastAccumulateAt = record.timeStamp;
+              events.push({ type: "accumulate", zone, count: accumulatedCount });
+            } else {
+              resetSequence();
+              events.push({ type: "cancel" });
+            }
+            return events;
+          }
+          if (lastTapZone && zone === lastTapZone && record.timeStamp - lastTapAt <= config.doubleTapWindowMs) {
+            accumulatingZone = zone;
+            accumulatedCount = 1;
+            lastAccumulateAt = record.timeStamp;
+            lastTapZone = null;
+            lastTapAt = 0;
+            events.push({ type: "double-tap", zone, count: 1 });
+            return events;
+          }
+          lastTapZone = zone;
+          lastTapAt = record.timeStamp;
+          events.push({ type: "tap", zone });
+          return events;
+        }
+        case "cancel": {
+          activePointers = Math.max(0, activePointers - 1);
+          pending = null;
+          if (accumulatingZone || lastTapZone) {
+            resetSequence();
+            events.push({ type: "cancel" });
+          }
+          return events;
+        }
+        default:
+          return events;
+      }
+    },
+    tick(now) {
+      return expire(now);
+    },
+    reset() {
+      pending = null;
+      activePointers = 0;
+      resetSequence();
+    },
+    isAccumulating() {
+      return accumulatingZone !== null;
+    }
+  };
+}
+
+// src/overlay.ts
+var STYLE_ID = "sp-gestures-styles";
+var styles = `
+.sp-gestures {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  /* The bottom strip belongs to the progress bar and control bar. */
+  bottom: 64px;
+  z-index: 6;
+  touch-action: manipulation;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+
+.sp-gestures__zone {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  opacity: 0;
+  color: #fff;
+  transition: opacity 0.25s ease;
+}
+
+.sp-gestures__zone--left {
+  left: 0;
+  border-radius: 0 50% 50% 0;
+}
+
+.sp-gestures__zone--right {
+  right: 0;
+  border-radius: 50% 0 0 50%;
+}
+
+.sp-gestures__zone--active {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.sp-gestures__label {
+  font-size: 13px;
+  font-weight: 600;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+}
+
+.sp-gestures__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sp-gestures__zone {
+    transition: none;
+  }
+}
+`;
+var GestureOverlay = class {
+  constructor(container, options) {
+    this.container = container;
+    this.options = options;
+    this.styleEl = null;
+    this.hideTimer = null;
+    this.pointerHandler = (event) => {
+      if (event.pointerType !== "touch") return;
+      const rect = this.el.getBoundingClientRect();
+      const width = rect.width || 1;
+      this.options.onPointer({
+        type: event.type === "pointerdown" ? "down" : event.type === "pointermove" ? "move" : event.type === "pointerup" ? "up" : "cancel",
+        x: event.clientX,
+        y: event.clientY,
+        fraction: Math.max(0, Math.min(1, (event.clientX - rect.left) / width)),
+        pointerId: event.pointerId,
+        timeStamp: event.timeStamp
+      });
+    };
+    this.injectStyles();
+    this.el = document.createElement("div");
+    this.el.className = "sp-gestures";
+    const left = this.createZone("left");
+    const right = this.createZone("right");
+    this.zones = { left: left.zone, right: right.zone };
+    this.labels = { left: left.label, right: right.label };
+    this.live = document.createElement("div");
+    this.live.className = "sp-gestures__live";
+    this.live.setAttribute("aria-live", "polite");
+    this.live.setAttribute("role", "status");
+    this.el.appendChild(left.zone);
+    this.el.appendChild(right.zone);
+    this.el.appendChild(this.live);
+    this.el.addEventListener("pointerdown", this.pointerHandler);
+    this.el.addEventListener("pointermove", this.pointerHandler);
+    this.el.addEventListener("pointerup", this.pointerHandler);
+    this.el.addEventListener("pointercancel", this.pointerHandler);
+    container.appendChild(this.el);
+  }
+  /** Size the zones to match the recognizer's split. */
+  setZoneWidths(left, right) {
+    this.zones.left.style.width = `${left * 100}%`;
+    this.zones.right.style.width = `${right * 100}%`;
+  }
+  /**
+   * Show the cumulative seek for a zone.
+   *
+   * @param zone - Which side was tapped
+   * @param seconds - Total seconds this sequence has moved
+   */
+  showSeek(zone, seconds) {
+    if (zone === "middle") return;
+    const direction = zone === "right" ? "forward" : "back";
+    this.live.textContent = `${seconds} seconds ${direction}`;
+    if (!this.options.feedback) return;
+    const target = this.zones[zone];
+    this.labels[zone].textContent = `${seconds} seconds`;
+    target.classList.add("sp-gestures__zone--active");
+    if (this.hideTimer) clearTimeout(this.hideTimer);
+    this.hideTimer = setTimeout(() => {
+      this.zones.left.classList.remove("sp-gestures__zone--active");
+      this.zones.right.classList.remove("sp-gestures__zone--active");
+      this.hideTimer = null;
+    }, 600);
+  }
+  /** Announce that a forward seek was refused because the viewer is at the live edge. */
+  announceLiveEdge() {
+    this.live.textContent = "Already at the live edge";
+  }
+  destroy() {
+    if (this.hideTimer) {
+      clearTimeout(this.hideTimer);
+      this.hideTimer = null;
+    }
+    this.el.removeEventListener("pointerdown", this.pointerHandler);
+    this.el.removeEventListener("pointermove", this.pointerHandler);
+    this.el.removeEventListener("pointerup", this.pointerHandler);
+    this.el.removeEventListener("pointercancel", this.pointerHandler);
+    this.el.remove();
+    this.styleEl?.remove();
+    this.styleEl = null;
+  }
+  /** Exposed for tests and for hosts that want to inspect the surface. */
+  getElement() {
+    return this.el;
+  }
+  createZone(side) {
+    const zone = document.createElement("div");
+    zone.className = `sp-gestures__zone sp-gestures__zone--${side}`;
+    zone.setAttribute("aria-hidden", "true");
+    const label = document.createElement("span");
+    label.className = "sp-gestures__label";
+    zone.appendChild(label);
+    return { zone, label };
+  }
+  injectStyles() {
+    if (document.getElementById(STYLE_ID)) return;
+    this.styleEl = document.createElement("style");
+    this.styleEl.id = STYLE_ID;
+    this.styleEl.textContent = styles;
+    document.head.appendChild(this.styleEl);
+  }
+};
+
+// src/index.ts
+function hasCoarsePointer() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  try {
+    return window.matchMedia("(pointer: coarse)").matches;
+  } catch {
+    return false;
+  }
+}
+function createGesturesPlugin(config = {}) {
+  let api = null;
+  let overlay = null;
+  let recognizer = null;
+  let active = false;
+  let runSeconds = 0;
+  let pendingHide = null;
+  const seekSeconds = config.seekSeconds ?? 10;
+  const doubleTapWindowMs = config.doubleTapWindowMs ?? DEFAULT_RECOGNIZER_OPTIONS.doubleTapWindowMs;
+  const leftZone = config.zones?.left ?? DEFAULT_RECOGNIZER_OPTIONS.leftZone;
+  const rightZone = config.zones?.right ?? DEFAULT_RECOGNIZER_OPTIONS.rightZone;
+  const feedback = config.feedback !== false;
+  const haptics = config.haptics !== false;
+  const tapToToggleControls = config.tapToToggleControls !== false;
+  const canSeek = () => {
+    if (!api) return false;
+    if (api.getState("chromecastActive") || api.getState("airplayActive")) return false;
+    const live = api.getState("live");
+    const seekableRange = api.getState("seekableRange");
+    if (live && !seekableRange) return false;
+    const duration = api.getState("duration");
+    if (!live && (!duration || !Number.isFinite(duration))) return false;
+    return true;
+  };
+  const applySeek = (zone) => {
+    if (!api || zone === "middle") return false;
+    const video = api.container.querySelector("video");
+    if (!video) return false;
+    const delta = zone === "right" ? seekSeconds : -seekSeconds;
+    const live = api.getState("live");
+    const seekableRange = api.getState("seekableRange");
+    const current = video.currentTime;
+    let target;
+    if (live && seekableRange) {
+      target = Math.max(seekableRange.start, Math.min(seekableRange.end, current + delta));
+      if (zone === "right" && target <= current) {
+        overlay?.announceLiveEdge();
+        return false;
+      }
+    } else {
+      const duration = video.duration;
+      const max = Number.isFinite(duration) && duration > 0 ? duration - 0.25 : current;
+      target = Math.max(0, Math.min(max, current + delta));
+    }
+    video.currentTime = target;
+    api.emit("playback:seeking", { time: target });
+    if (haptics && typeof navigator !== "undefined" && typeof navigator.vibrate === "function") {
+      navigator.vibrate(10);
+    }
+    return true;
+  };
+  const ui = () => api?.getPlugin("ui-controls") ?? null;
+  const clearPendingHide = () => {
+    if (pendingHide) {
+      clearTimeout(pendingHide);
+      pendingHide = null;
+    }
+  };
+  const handleTap = () => {
+    if (!tapToToggleControls || !api) return;
+    const controls = ui();
+    if (!controls) return;
+    const visible = Boolean(api.getState("controlsVisible"));
+    const paused = Boolean(api.getState("paused"));
+    if (!visible) {
+      controls.show();
+      return;
+    }
+    if (paused) return;
+    clearPendingHide();
+    pendingHide = setTimeout(() => {
+      pendingHide = null;
+      controls.hide();
+    }, doubleTapWindowMs);
+  };
+  const handleSeekStep = (zone) => {
+    clearPendingHide();
+    if (!canSeek()) return;
+    const moved = applySeek(zone);
+    if (!moved) return;
+    runSeconds += seekSeconds;
+    overlay?.showSeek(zone, runSeconds);
+    api?.emit("gesture:seek", {
+      direction: zone === "right" ? "forward" : "backward",
+      seconds: seekSeconds,
+      cumulative: runSeconds
+    });
+  };
+  const onPointer = (record) => {
+    if (!recognizer) return;
+    for (const event of recognizer.handle(record)) {
+      switch (event.type) {
+        case "tap":
+          api?.emit("gesture:tap", { zone: event.zone });
+          handleTap();
+          break;
+        case "double-tap":
+          runSeconds = 0;
+          handleSeekStep(event.zone);
+          break;
+        case "accumulate":
+          handleSeekStep(event.zone);
+          break;
+        case "cancel":
+          runSeconds = 0;
+          clearPendingHide();
+          break;
+      }
+    }
+  };
+  return {
+    id: "gestures",
+    name: "Gestures",
+    version: "1.0.0",
+    type: "feature",
+    init(pluginApi) {
+      api = pluginApi;
+      const enabled = config.enabled ?? "auto";
+      active = enabled === "auto" ? hasCoarsePointer() : Boolean(enabled);
+      if (!active) {
+        api.logger.debug("[gestures] no coarse pointer, gesture surface not installed");
+        return;
+      }
+      if (api.getState("mediaType") === "audio") {
+        active = false;
+        return;
+      }
+      recognizer = createRecognizer({
+        doubleTapWindowMs,
+        accumulationWindowMs: config.accumulationWindowMs,
+        leftZone,
+        rightZone,
+        slopPx: config.slopPx
+      });
+      overlay = new GestureOverlay(api.container, { onPointer, feedback });
+      overlay.setZoneWidths(leftZone, rightZone);
+      api.onDestroy(() => {
+        clearPendingHide();
+        overlay?.destroy();
+        overlay = null;
+        recognizer?.reset();
+        recognizer = null;
+      });
+    },
+    destroy() {
+      clearPendingHide();
+      overlay?.destroy();
+      overlay = null;
+      recognizer?.reset();
+      recognizer = null;
+      active = false;
+      runSeconds = 0;
+      api = null;
+    },
+    ownsTapInteraction() {
+      return active && tapToToggleControls;
+    }
+  };
+}
+var index_default = createGesturesPlugin;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_RECOGNIZER_OPTIONS,
+  GestureOverlay,
+  createGesturesPlugin,
+  createRecognizer,
+  zoneFor
+});