@fusion.dev/helix-headless 0.17.2 → 0.18.0

package/custom-elements.json

@@ -76554,6 +76554,13 @@
               "readonly": true,
               "description": "Restarts the wait, on anything that counts as the reader being here.\n\nPointer movement and focus both count, and both have to: a reader using the\nkeyboard never moves a pointer, and a bar that only answered the mouse\nwould leave them nothing to look at."
             },
+            {
+              "kind": "field",
+              "name": "handlePicture",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A press on the picture plays or pauses it.\n\n**The picture is the biggest target a player has**, and on every other\nplayer a reader has used it is the one that stops the thing. A component\nthat spends the whole frame on a video and then asks for a 32 pixel button\nis one that works only for people who know where the button is.\n\n**Two cases where it must not.** The first is `controls`, where the browser\ndraws its own bar over the picture and owns what a press on it means: acting\nas well would toggle twice, once here and once in the UA, which cancels out\nand looks broken.\n\nThe second is a player whose chrome has gone idle. There, the first press is\nasking for the controls back rather than asking to pause, which is what\nevery touch player does: `stir` brings them, and the press is spent. A\nsecond press, with the bar showing, means what it says. This is also why the\ncheck is `idle` rather than a pointer-type test: it is the same answer for a\nmouse left resting until the bar faded."
+            },
             {
               "kind": "field",
               "name": "handleFullscreenChange",

package/dist/video/root/video-root.d.ts

@@ -593,6 +593,27 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * would leave them nothing to look at.
      */
     private readonly stir;
+    /**
+     * A press on the picture plays or pauses it.
+     *
+     * **The picture is the biggest target a player has**, and on every other
+     * player a reader has used it is the one that stops the thing. A component
+     * that spends the whole frame on a video and then asks for a 32 pixel button
+     * is one that works only for people who know where the button is.
+     *
+     * **Two cases where it must not.** The first is `controls`, where the browser
+     * draws its own bar over the picture and owns what a press on it means: acting
+     * as well would toggle twice, once here and once in the UA, which cancels out
+     * and looks broken.
+     *
+     * The second is a player whose chrome has gone idle. There, the first press is
+     * asking for the controls back rather than asking to pause, which is what
+     * every touch player does: `stir` brings them, and the press is spent. A
+     * second press, with the bar showing, means what it says. This is also why the
+     * check is `idle` rather than a pointer-type test: it is the same answer for a
+     * mouse left resting until the bar faded.
+     */
+    private readonly handlePicture;
     private readonly handleFullscreenChange;
     /**
      * The keys every player uses, bound to this element rather than the document.

package/dist/video/root/video-root.js

@@ -157,6 +157,16 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
                 }, this.idleDelay);
             }
         };
+        this.handlePicture = () => {
+            if (this.controls) {
+                return;
+            }
+            if (this.idle) {
+                this.stir();
+                return;
+            }
+            this.toggle();
+        };
         this.handleFullscreenChange = () => {
             this.full = document.fullscreenElement === this;
         };
@@ -841,6 +851,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         ?loop=${this.loop}
         ?muted=${this.defaultMuted}
         ?playsinline=${this.playsInline}
+        @click=${this.handlePicture}
         @loadedmetadata=${this.handleLoaded}
         @timeupdate=${this.handleTime}
         @volumechange=${this.handleVolume}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -45,14 +45,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.17.2",
-    "@fusion.dev/helix-icons": "0.17.2",
+    "@fusion.dev/helix-core": "0.18.0",
+    "@fusion.dev/helix-icons": "0.18.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.17.2",
-    "@fusion.dev/helix-testing": "0.17.2",
+    "@fusion.dev/helix-cem": "0.18.0",
+    "@fusion.dev/helix-testing": "0.18.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",