@fusion.dev/helix-headless 0.23.0 → 0.24.1

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

@@ -64,24 +64,12 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.remoteAvailable = false;
         this.remoteConnected = false;
         this.media = [];
+        this.mediaRead = false;
         this.handleMedia = (event) => {
-            const assigned = event.target.assignedElements();
-            this.media = assigned
-                .filter((node) => node instanceof HTMLSourceElement || node instanceof HTMLTrackElement)
-                .map((node) => {
-                const tag = node instanceof HTMLTrackElement ? 'track' : 'source';
-                const names = tag === 'track'
-                    ? ['default', 'kind', 'label', 'src', 'srclang']
-                    : ['media', 'sizes', 'src', 'srcset', 'type'];
-                const attrs = {};
-                for (const name of names) {
-                    const value = node.getAttribute(name);
-                    if (value !== null) {
-                        attrs[name] = value;
-                    }
-                }
-                return { attrs, tag };
-            });
+            const next = this.copiesOf(event.target.assignedElements());
+            if (JSON.stringify(next) !== JSON.stringify(this.media)) {
+                this.media = next;
+            }
         };
         this.handleLoaded = () => {
             const video = this.video;
@@ -92,7 +80,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             if (video.videoWidth > 0 && video.videoHeight > 0) {
                 this.style.setProperty('--video-intrinsic-ratio', `${video.videoWidth} / ${video.videoHeight}`);
             }
-            this.captionCount = this.captionTracks.length;
             const track = video.textTracks[0];
             if (track) {
                 if (track.mode === 'showing') {
@@ -229,6 +216,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.handleRemoteState = () => {
             this.remoteConnected = this.video?.remote?.state === 'connected';
         };
+        this.captions = [];
     }
     get localFile() {
         if (this.src === '') {
@@ -249,7 +237,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     }
     offers(one) {
         if (one === 'pip') {
-            return typeof document !== 'undefined' && document.pictureInPictureEnabled;
+            return !this.hydrating && typeof document !== 'undefined' && document.pictureInPictureEnabled;
         }
         if (one === 'remote') {
             return this.remoteAvailable;
@@ -395,6 +383,24 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         video.volume = Number(event.target.value);
         video.muted = false;
     }
+    copiesOf(elements) {
+        return elements
+            .filter((node) => node instanceof HTMLSourceElement || node instanceof HTMLTrackElement)
+            .map((node) => {
+            const tag = node instanceof HTMLTrackElement ? 'track' : 'source';
+            const names = tag === 'track'
+                ? ['default', 'kind', 'label', 'src', 'srclang']
+                : ['media', 'sizes', 'src', 'srcset', 'type'];
+            const attrs = {};
+            for (const name of names) {
+                const value = node.getAttribute(name);
+                if (value !== null) {
+                    attrs[name] = value;
+                }
+            }
+            return { attrs, tag };
+        });
+    }
     claimSession() {
         if (typeof navigator === 'undefined' || !navigator.mediaSession) {
             return;
@@ -533,10 +539,29 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             }
         }
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (!this.mediaRead && this.children !== undefined && !this.hydrating) {
+            this.mediaRead = true;
+            this.media = this.copiesOf([...this.children].filter((child) => child.slot === ''));
+        }
+        if (changed.has('media')) {
+            this.captions = this.media
+                .filter((one) => one.tag === 'track' &&
+                (one.attrs.kind === undefined ||
+                    ['captions', 'subtitles'].includes(one.attrs.kind.toLowerCase())))
+                .map((one) => ({ label: one.attrs.label ?? '', language: one.attrs.srclang ?? '' }));
+            this.captionCount = this.captions.length;
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
+        this.finishHydration();
         const video = this.video;
         if (video) {
+            if (this.defaultMuted || this.silent) {
+                video.muted = true;
+            }
             this.silent = video.muted;
             this.loudness = video.volume;
             video.remote?.addEventListener?.('connect', this.handleRemoteState);
@@ -549,9 +574,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.toggleAttribute('data-playing', this.playing);
         this.toggleAttribute('data-idle', this.idle && this.playing);
         if (changed.has('media')) {
-            const video = this.video;
-            video?.load();
-            this.captionCount = this.captionTracks.length;
+            this.video?.load();
         }
     }
     renderExtra(one) {
@@ -639,7 +662,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     </button>`;
     }
     renderCaptions() {
-        const tracks = this.captionTracks;
+        const tracks = this.captions;
         if (this.captionCount === 0) {
             return nothing;
         }

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -61,6 +61,8 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * Empty on a server, which has nothing to read.
      */
     private rows;
+    /** The `for` that `rows` came from, so it is read again only when that changes. */
+    private readFor;
     private readonly virtualize;
     /**
      * The rows in the tree, each with the item it drew.
@@ -73,14 +75,16 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      */
     private drawn;
     /**
-     * Reads the source named by `for`, once the document exists to read.
+     * Reads the source named by `for`, before the render that draws it.
      *
-     * `firstUpdated` rather than `connectedCallback`, per the server rules: the
-     * shim has attributes and no tree, so `getElementById` is undefined there.
-     * A source that is missing or not an array leaves the list empty rather than
-     * throwing, because a consumer whose data has not arrived yet is the ordinary
-     * case and an empty list says so by itself.
+     * Not on the server, per the server rules: the shim has attributes and no
+     * tree, so `getElementById` is undefined there. Nor while hydrating what a
+     * server sent, which it drew with nothing read. A source that is missing or
+     * not an array leaves the list empty rather than throwing, because a consumer
+     * whose data has not arrived yet is the ordinary case and an empty list says
+     * so by itself.
      */
+    protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     private read;

package/dist/virtual-list/root/virtual-list-root.js

@@ -29,15 +29,21 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             index: Number(element.dataset.index),
         }));
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.readFor !== this.for &&
+            typeof this.ownerDocument?.getElementById === 'function' &&
+            !this.hydrating) {
+            this.readFor = this.for;
+            this.read();
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
-        this.read();
+        this.finishHydration();
     }
     updated(changed) {
         super.updated?.(changed);
-        if (changed.has('for')) {
-            this.read();
-        }
         this.virtualize.measure();
         this.place();
     }

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.23.0",
+  "version": "0.24.1",
   "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.23.0",
-    "@fusion.dev/helix-icons": "0.23.0",
+    "@fusion.dev/helix-core": "0.24.1",
+    "@fusion.dev/helix-icons": "0.24.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.23.0",
-    "@fusion.dev/helix-testing": "0.23.0",
+    "@fusion.dev/helix-cem": "0.24.1",
+    "@fusion.dev/helix-testing": "0.24.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",