@scarlett-player/gestures 1.8.1 → 1.10.0

package/dist/index.cjs

@@ -178,6 +178,7 @@ function createRecognizer(options = {}) {
 }
 
 // src/overlay.ts
+var import_core = require("@scarlett-player/core");
 var STYLE_ID = "sp-gestures-styles";
 var styles = `
 .sp-gestures {
@@ -250,7 +251,7 @@ var GestureOverlay = class {
   constructor(container, options) {
     this.container = container;
     this.options = options;
-    this.styleEl = null;
+    this.releaseStyles = null;
     this.hideTimer = null;
     this.pointerHandler = (event) => {
       if (event.pointerType !== "touch") return;
@@ -325,8 +326,8 @@ var GestureOverlay = class {
     this.el.removeEventListener("pointerup", this.pointerHandler);
     this.el.removeEventListener("pointercancel", this.pointerHandler);
     this.el.remove();
-    this.styleEl?.remove();
-    this.styleEl = null;
+    this.releaseStyles?.();
+    this.releaseStyles = null;
   }
   /** Exposed for tests and for hosts that want to inspect the surface. */
   getElement() {
@@ -341,17 +342,19 @@ var GestureOverlay = class {
     zone.appendChild(label);
     return { zone, label };
   }
+  /**
+   * Claim the shared gesture stylesheet.
+   *
+   * Reference-counted: two players on one page share the sheet, and destroying
+   * either used to take it away from the other.
+   */
   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);
+    this.releaseStyles = (0, import_core.injectSharedStyles)(STYLE_ID, styles);
   }
 };
 
 // src/version.ts
-var PKG_VERSION = true ? "1.8.1" : "0.0.0-dev";
+var PKG_VERSION = true ? "1.10.0" : "0.0.0-dev";
 
 // src/index.ts
 function hasCoarsePointer() {
@@ -474,6 +477,19 @@ function createGesturesPlugin(config = {}) {
       }
     }
   };
+  const syncSurface = () => {
+    if (!active || !api) return;
+    const wantsSurface = api.getState("mediaType") !== "audio";
+    if (wantsSurface && !overlay) {
+      overlay = new GestureOverlay(api.container, { onPointer, feedback });
+      overlay.setZoneWidths(leftZone, rightZone);
+    } else if (!wantsSurface && overlay) {
+      clearPendingHide();
+      overlay.destroy();
+      overlay = null;
+      recognizer?.reset();
+    }
+  };
   return {
     id: "gestures",
     name: "Gestures",
@@ -487,10 +503,6 @@ function createGesturesPlugin(config = {}) {
         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,
@@ -498,9 +510,12 @@ function createGesturesPlugin(config = {}) {
         rightZone,
         slopPx: config.slopPx
       });
-      overlay = new GestureOverlay(api.container, { onPointer, feedback });
-      overlay.setZoneWidths(leftZone, rightZone);
+      syncSurface();
+      const unsubscribe = api.subscribeToState((event) => {
+        if (event.key === "mediaType") syncSurface();
+      });
       api.onDestroy(() => {
+        unsubscribe();
         clearPendingHide();
         overlay?.destroy();
         overlay = null;
@@ -519,7 +534,7 @@ function createGesturesPlugin(config = {}) {
       api = null;
     },
     ownsTapInteraction() {
-      return active && tapToToggleControls;
+      return active && tapToToggleControls && overlay !== null;
     }
   };
 }

package/dist/index.d.cts

@@ -201,7 +201,7 @@ declare class GestureOverlay {
     private zones;
     private labels;
     private live;
-    private styleEl;
+    private releaseStyles;
     private hideTimer;
     private readonly pointerHandler;
     constructor(container: HTMLElement, options: OverlayOptions);
@@ -220,6 +220,12 @@ declare class GestureOverlay {
     /** Exposed for tests and for hosts that want to inspect the surface. */
     getElement(): HTMLElement;
     private createZone;
+    /**
+     * Claim the shared gesture stylesheet.
+     *
+     * Reference-counted: two players on one page share the sheet, and destroying
+     * either used to take it away from the other.
+     */
     private injectStyles;
 }
 

package/dist/index.d.ts

@@ -201,7 +201,7 @@ declare class GestureOverlay {
     private zones;
     private labels;
     private live;
-    private styleEl;
+    private releaseStyles;
     private hideTimer;
     private readonly pointerHandler;
     constructor(container: HTMLElement, options: OverlayOptions);
@@ -220,6 +220,12 @@ declare class GestureOverlay {
     /** Exposed for tests and for hosts that want to inspect the surface. */
     getElement(): HTMLElement;
     private createZone;
+    /**
+     * Claim the shared gesture stylesheet.
+     *
+     * Reference-counted: two players on one page share the sheet, and destroying
+     * either used to take it away from the other.
+     */
     private injectStyles;
 }
 

package/dist/index.js

@@ -147,6 +147,7 @@ function createRecognizer(options = {}) {
 }
 
 // src/overlay.ts
+import { injectSharedStyles } from "@scarlett-player/core";
 var STYLE_ID = "sp-gestures-styles";
 var styles = `
 .sp-gestures {
@@ -219,7 +220,7 @@ var GestureOverlay = class {
   constructor(container, options) {
     this.container = container;
     this.options = options;
-    this.styleEl = null;
+    this.releaseStyles = null;
     this.hideTimer = null;
     this.pointerHandler = (event) => {
       if (event.pointerType !== "touch") return;
@@ -294,8 +295,8 @@ var GestureOverlay = class {
     this.el.removeEventListener("pointerup", this.pointerHandler);
     this.el.removeEventListener("pointercancel", this.pointerHandler);
     this.el.remove();
-    this.styleEl?.remove();
-    this.styleEl = null;
+    this.releaseStyles?.();
+    this.releaseStyles = null;
   }
   /** Exposed for tests and for hosts that want to inspect the surface. */
   getElement() {
@@ -310,17 +311,19 @@ var GestureOverlay = class {
     zone.appendChild(label);
     return { zone, label };
   }
+  /**
+   * Claim the shared gesture stylesheet.
+   *
+   * Reference-counted: two players on one page share the sheet, and destroying
+   * either used to take it away from the other.
+   */
   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);
+    this.releaseStyles = injectSharedStyles(STYLE_ID, styles);
   }
 };
 
 // src/version.ts
-var PKG_VERSION = true ? "1.8.1" : "0.0.0-dev";
+var PKG_VERSION = true ? "1.10.0" : "0.0.0-dev";
 
 // src/index.ts
 function hasCoarsePointer() {
@@ -443,6 +446,19 @@ function createGesturesPlugin(config = {}) {
       }
     }
   };
+  const syncSurface = () => {
+    if (!active || !api) return;
+    const wantsSurface = api.getState("mediaType") !== "audio";
+    if (wantsSurface && !overlay) {
+      overlay = new GestureOverlay(api.container, { onPointer, feedback });
+      overlay.setZoneWidths(leftZone, rightZone);
+    } else if (!wantsSurface && overlay) {
+      clearPendingHide();
+      overlay.destroy();
+      overlay = null;
+      recognizer?.reset();
+    }
+  };
   return {
     id: "gestures",
     name: "Gestures",
@@ -456,10 +472,6 @@ function createGesturesPlugin(config = {}) {
         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,
@@ -467,9 +479,12 @@ function createGesturesPlugin(config = {}) {
         rightZone,
         slopPx: config.slopPx
       });
-      overlay = new GestureOverlay(api.container, { onPointer, feedback });
-      overlay.setZoneWidths(leftZone, rightZone);
+      syncSurface();
+      const unsubscribe = api.subscribeToState((event) => {
+        if (event.key === "mediaType") syncSurface();
+      });
       api.onDestroy(() => {
+        unsubscribe();
         clearPendingHide();
         overlay?.destroy();
         overlay = null;
@@ -488,7 +503,7 @@ function createGesturesPlugin(config = {}) {
       api = null;
     },
     ownsTapInteraction() {
-      return active && tapToToggleControls;
+      return active && tapToToggleControls && overlay !== null;
     }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scarlett-player/gestures",
-  "version": "1.8.1",
+  "version": "1.10.0",
   "description": "Gestures Plugin for Scarlett Player - double-tap seek zones and tap to toggle controls",
   "type": "module",
   "main": "dist/index.cjs",
@@ -22,7 +22,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "@scarlett-player/core": "^1.8.0"
+    "@scarlett-player/core": "^1.9.0"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^1.6.0",
@@ -30,7 +30,7 @@
     "tsup": "^8.5.1",
     "typescript": "^5.3.0",
     "vitest": "^1.6.0",
-    "@scarlett-player/core": "1.8.1"
+    "@scarlett-player/core": "1.10.0"
   },
   "keywords": [
     "video",