@fusion.dev/helix-headless 0.25.1 → 0.30.0

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

@@ -10,6 +10,11 @@ import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../menu/index.js';
+import { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, showCaption, } from './captions.js';
+import { FullscreenController } from './fullscreen.js';
+import { IdleController } from './idle.js';
+import { MediaSessionController, SKIP_SECONDS } from './media-session.js';
+import { RemotePlaybackController } from './remote-playback.js';
 const clock = (seconds) => {
     if (!Number.isFinite(seconds) || seconds < 0) {
         return '0:00';
@@ -23,8 +28,6 @@ const clock = (seconds) => {
         ? `${hours}:${String(minutes).padStart(2, '0')}:${padded}`
         : `${minutes}:${padded}`;
 };
-let owner;
-const SKIP_SECONDS = 10;
 let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     constructor() {
         super(...arguments);
@@ -63,6 +66,22 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.idle = false;
         this.remoteAvailable = false;
         this.remoteConnected = false;
+        this.cues = new CueController(this, () => this.handleCue());
+        this.fullscreen = new FullscreenController(this, (full) => {
+            this.full = full;
+        });
+        this.idler = new IdleController(this, () => this.idleDelay, (idle) => {
+            this.idle = idle;
+        });
+        this.remote = new RemotePlaybackController(this, {
+            available: (available) => {
+                this.remoteAvailable = available;
+            },
+            connected: (connected) => {
+                this.remoteConnected = connected;
+            },
+        });
+        this.session = new MediaSessionController(this);
         this.media = [];
         this.mediaRead = false;
         this.handleMedia = (event) => {
@@ -82,13 +101,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             }
             const track = video.textTracks[0];
             if (track) {
-                if (track.mode === 'showing') {
-                    track.mode = 'hidden';
-                }
-                this.captioned = track.mode === 'hidden';
-                this.cued?.removeEventListener('cuechange', this.handleCue);
-                this.cued = track;
-                track.addEventListener('cuechange', this.handleCue);
+                this.captioned = adoptTrack(track);
+                this.cues.follow(track);
                 this.handleCue();
             }
         };
@@ -117,9 +131,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             if (event.type === 'play') {
                 this.claimSession();
             }
-            if (owner === this && typeof navigator !== 'undefined' && navigator.mediaSession) {
-                navigator.mediaSession.playbackState = this.playing ? 'playing' : 'paused';
-            }
+            this.session.report(this.playing);
             this.dispatchEvent(new Event(event.type, { bubbles: false, composed: false }));
         };
         this.handleVolume = () => {
@@ -131,32 +143,19 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             this.silent = video.muted;
         };
         this.handleCue = () => {
-            const track = this.captionTracks[this.captionIndex] ?? this.video?.textTracks[0];
-            const active = track?.activeCues?.[0];
-            this.cue = active instanceof VTTCue ? active.getCueAsHTML() : undefined;
-        };
-        this.stir = () => {
-            this.idle = false;
-            clearTimeout(this.idleTimer);
-            if (this.idleDelay > 0) {
-                this.idleTimer = setTimeout(() => {
-                    this.idle = true;
-                }, this.idleDelay);
-            }
+            const track = captionTracks(this.video)[this.captionIndex] ?? this.video?.textTracks[0];
+            this.cue = activeCue(track);
         };
         this.handlePicture = () => {
             if (this.controls) {
                 return;
             }
             if (this.idle) {
-                this.stir();
+                this.idler.stir();
                 return;
             }
             this.toggle();
         };
-        this.handleFullscreenChange = () => {
-            this.full = document.fullscreenElement === this;
-        };
         this.handleKeydown = (event) => {
             if (this.controls) {
                 return;
@@ -204,7 +203,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
                     break;
                 }
                 case 'f': {
-                    void this.toggleFullscreen();
+                    void this.fullscreen.toggle();
                     break;
                 }
                 default: {
@@ -213,9 +212,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             }
             event.preventDefault();
         };
-        this.handleRemoteState = () => {
-            this.remoteConnected = this.video?.remote?.state === 'connected';
-        };
         this.captions = [];
     }
     get localFile() {
@@ -343,7 +339,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
     }
     get video() {
-        return this.renderRoot?.querySelector('[part="video"]') ?? null;
+        return this.partNamed('video');
     }
     play() {
         void this.video?.play().catch(() => { });
@@ -402,31 +398,14 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         });
     }
     claimSession() {
-        if (typeof navigator === 'undefined' || !navigator.mediaSession) {
-            return;
-        }
-        owner = this;
-        const session = navigator.mediaSession;
-        session.metadata = new MediaMetadata({
-            artwork: this.poster === '' ? [] : [{ src: this.poster }],
-            title: this.label,
-        });
-        session.setActionHandler('play', () => this.toggle());
-        session.setActionHandler('pause', () => this.toggle());
-        session.setActionHandler('seekto', (details) => {
-            if (details.seekTime !== undefined && details.seekTime !== null) {
-                this.seek(details.seekTime);
-            }
-        });
         const skips = `${this.extraControls} ${this.overflowControls}`.split(/\s+/);
-        session.setActionHandler('seekbackward', (details) => {
-            this.skipBy(-(details.seekOffset ?? SKIP_SECONDS));
-        });
-        session.setActionHandler('seekforward', (details) => {
-            this.skipBy(details.seekOffset ?? SKIP_SECONDS);
+        this.session.claim({ artwork: this.poster, title: this.label }, {
+            next: skips.includes('next') ? () => this.skip(false) : null,
+            previous: skips.includes('previous') ? () => this.skip(true) : null,
+            seek: (seconds) => this.seek(seconds),
+            skipBy: (seconds) => this.skipBy(seconds),
+            toggle: () => this.toggle(),
         });
-        session.setActionHandler('nexttrack', skips.includes('next') ? () => this.skip(false) : null);
-        session.setActionHandler('previoustrack', skips.includes('previous') ? () => this.skip(true) : null);
     }
     skipBy(seconds) {
         const video = this.video;
@@ -435,24 +414,14 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         this.seek(video.currentTime + seconds);
     }
-    get captionTracks() {
-        const tracks = this.video?.textTracks;
-        if (!tracks) {
-            return [];
-        }
-        return [...tracks].filter((one) => one.kind === 'subtitles' || one.kind === 'captions');
-    }
     showCaption(index) {
-        const tracks = this.captionTracks;
-        tracks.forEach((track, at) => {
-            track.mode = at === index ? 'hidden' : 'disabled';
-        });
+        showCaption(captionTracks(this.video), index);
         this.captionIndex = index;
         this.captioned = index >= 0;
         this.cue = undefined;
     }
     toggleCaptions() {
-        if (this.captionTracks.length === 0) {
+        if (captionTracks(this.video).length === 0) {
             return;
         }
         this.showCaption(this.captioned ? -1 : 0);
@@ -474,26 +443,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         video.playbackRate = next;
         this.rate = next;
     }
-    async watchRemote() {
-        const remote = this.video?.remote;
-        if (!remote?.watchAvailability) {
-            return;
-        }
-        try {
-            this.remoteWatch = await remote.watchAvailability((available) => {
-                this.remoteAvailable = available;
-            });
-        }
-        catch {
-        }
-    }
-    async promptRemote() {
-        try {
-            await this.video?.remote?.prompt();
-        }
-        catch {
-        }
-    }
     async togglePip() {
         const video = this.video;
         if (!video) {
@@ -505,40 +454,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         await video.requestPictureInPicture();
     }
-    async toggleFullscreen() {
-        try {
-            if (document.fullscreenElement === this) {
-                await document.exitFullscreen();
-                return;
-            }
-            await this.requestFullscreen();
-        }
-        catch (error) {
-            console.warn(`<${this.localName}> could not enter fullscreen. If it is inside an iframe, that frame needs allow="fullscreen".`, error);
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener('fullscreenchange', this.handleFullscreenChange);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        clearTimeout(this.idleTimer);
-        this.cued?.removeEventListener('cuechange', this.handleCue);
-        this.cued = undefined;
-        document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
-        if (this.remoteWatch !== undefined) {
-            void this.video?.remote?.cancelWatchAvailability?.(this.remoteWatch);
-            this.remoteWatch = undefined;
-        }
-        if (owner === this) {
-            owner = undefined;
-            if (typeof navigator !== 'undefined' && navigator.mediaSession) {
-                navigator.mediaSession.metadata = null;
-                navigator.mediaSession.playbackState = 'none';
-            }
-        }
-    }
     willUpdate(changed) {
         super.willUpdate(changed);
         if (!this.mediaRead && this.children !== undefined && !this.hydrating) {
@@ -546,11 +461,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             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.captions = captionsAmong(this.media);
             this.captionCount = this.captions.length;
         }
     }
@@ -564,9 +475,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             }
             this.silent = video.muted;
             this.loudness = video.volume;
-            video.remote?.addEventListener?.('connect', this.handleRemoteState);
-            video.remote?.addEventListener?.('disconnect', this.handleRemoteState);
-            void this.watchRemote();
+            void this.remote.attach(video);
         }
     }
     updated(changed) {
@@ -584,7 +493,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         type="button"
         aria-label="Play on another device"
         aria-pressed=${this.remoteConnected ? 'true' : 'false'}
-        @click=${() => void this.promptRemote()}
+        @click=${() => void this.remote.prompt()}
       >
         ${drawIcon(airplay)}
       </button>`;
@@ -710,7 +619,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="item: entry-item, mark: entry-mark, start: entry-start"
         value="remote"
-        @helix-select=${() => void this.promptRemote()}
+        @helix-select=${() => void this.remote.prompt()}
       >
         ${drawIcon(airplay, { slot: 'start' })}
         Play on another device
@@ -840,7 +749,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         type="button"
         aria-label=${this.full ? 'Exit fullscreen' : 'Fullscreen'}
         aria-pressed=${this.full ? 'true' : 'false'}
-        @click=${() => void this.toggleFullscreen()}
+        @click=${() => void this.fullscreen.toggle()}
       >
         ${drawIcon(this.full ? cornersIn : cornersOut)}
       </button>
@@ -853,12 +762,9 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         role=${this.controls ? nothing : 'group'}
         aria-label=${this.controls ? nothing : this.label || 'Video'}
         @keydown=${this.handleKeydown}
-        @pointermove=${this.stir}
-        @pointerleave=${() => {
-            clearTimeout(this.idleTimer);
-            this.idle = true;
-        }}
-        @focusin=${this.stir}
+        @pointermove=${this.idler.stir}
+        @pointerleave=${this.idler.leave}
+        @focusin=${this.idler.stir}
       >
       <video
         part="video"

package/dist/video-playlist/menu/video-playlist-menu.d.ts

@@ -41,7 +41,6 @@ import '../../menu/index.js';
  * @csspart trigger - The button that opens it.
  */
 export declare class HelixHeadlessVideoPlaylistMenu extends HelixElement {
-    #private;
     /**
      * The menu's accessible name, and its trigger's.
      *
@@ -56,8 +55,10 @@ export declare class HelixHeadlessVideoPlaylistMenu extends HelixElement {
      * opening downward from there opens off the player.
      */
     placement: string;
+    private observer;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private foundPlaylist;
     /** The playlist this menu belongs to, found upward through the slots. */
     private get playlist();
     /** The playlist's entries, in the order it holds them. */

package/dist/video-playlist/menu/video-playlist-menu.js

@@ -24,7 +24,6 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
             this.dispatchEvent(new HelixSelectEvent({ value }));
         };
     }
-    #observer;
     connectedCallback() {
         super.connectedCallback();
         this.updateComplete.then(() => this.watch());
@@ -32,26 +31,25 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-before-open', this.reread);
-        this.#observer?.disconnect();
-        this.#observer = undefined;
+        this.observer?.disconnect();
+        this.observer = undefined;
     }
-    #playlist;
     get playlist() {
-        return this.#playlist;
+        return this.foundPlaylist;
     }
     get entries() {
         const playlist = this.playlist;
         return playlist ? [...playlist.querySelectorAll(ITEMS)] : [];
     }
     watch() {
-        this.#playlist ??= closestInstance(this, HelixHeadlessVideoPlaylist) ?? undefined;
-        const playlist = this.#playlist;
-        if (!playlist || this.#observer) {
+        this.foundPlaylist ??= closestInstance(this, HelixHeadlessVideoPlaylist) ?? undefined;
+        const playlist = this.playlist;
+        if (!playlist || this.observer) {
             return;
         }
         this.addEventListener('helix-before-open', this.reread);
-        this.#observer = new MutationObserver(this.reread);
-        this.#observer.observe(playlist, { childList: true, subtree: true });
+        this.observer = new MutationObserver(this.reread);
+        this.observer.observe(playlist, { childList: true, subtree: true });
         this.reread();
     }
     render() {

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

@@ -16,7 +16,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.measured = false;
         this.rows = [];
         this.virtualize = new VirtualizeController(this, {
-            container: () => this.renderRoot.querySelector('[part="viewport"]'),
+            container: () => this.partNamed('viewport'),
             count: () => this.rows.length,
             estimate: () => this.estimate,
             measured: () => this.measured,

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.25.1",
+  "version": "0.30.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -41,21 +41,22 @@
     "test:dom": "bun test dom.spec",
     "test:pure": "bun test pure.spec",
     "test:ssr": "bun test ssr.spec",
-    "typecheck": "bun run element-events && tsc -p tsconfig.json --noEmit"
+    "typecheck": "bun run element-events && tsc -p tsconfig.json --noEmit && bun run typecheck:examples",
+    "typecheck:examples": "tsc -p tsconfig.examples.json"
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.25.1",
-    "@fusion.dev/helix-icons": "0.25.1",
+    "@fusion.dev/helix-core": "0.30.0",
+    "@fusion.dev/helix-icons": "0.30.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.25.1",
-    "@fusion.dev/helix-testing": "0.25.1",
+    "@fusion.dev/helix-cem": "0.30.0",
+    "@fusion.dev/helix-testing": "0.30.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
-    "@lit-labs/ssr": "^3.3.0",
+    "@lit-labs/ssr": "^4.1.0",
     "@types/bun": "^1.3.0",
     "lit": "^3.2.1"
   },