@helios-project/player 0.48.3 → 0.76.4

package/dist/features/media-session.js

@@ -0,0 +1,107 @@
+export class HeliosMediaSession {
+    player;
+    controller;
+    unsubscribe = null;
+    constructor(player, controller) {
+        this.player = player;
+        this.controller = controller;
+        if (!('mediaSession' in navigator))
+            return;
+        this.updateMetadata();
+        this.setupHandlers();
+        // Subscribe to state changes
+        this.unsubscribe = controller.subscribe(state => this.updateState(state));
+        // Initial state update
+        this.updateState(controller.getState());
+    }
+    updateMetadata() {
+        if (!('mediaSession' in navigator))
+            return;
+        const title = this.player.getAttribute('media-title') || '';
+        const artist = this.player.getAttribute('media-artist') || '';
+        const album = this.player.getAttribute('media-album') || '';
+        let artworkSrc = this.player.getAttribute('media-artwork');
+        // Fallback to poster if artwork not set
+        if (!artworkSrc) {
+            artworkSrc = this.player.getAttribute('poster');
+        }
+        const artwork = artworkSrc ? [{ src: artworkSrc }] : [];
+        navigator.mediaSession.metadata = new MediaMetadata({
+            title,
+            artist,
+            album,
+            artwork
+        });
+    }
+    setupHandlers() {
+        if (!('mediaSession' in navigator))
+            return;
+        const actions = [
+            ['play', () => this.controller.play()],
+            ['pause', () => this.controller.pause()],
+            ['seekbackward', (details) => this.seekRelative(-(details.seekOffset || 10))],
+            ['seekforward', (details) => this.seekRelative(details.seekOffset || 10)],
+            ['seekto', (details) => {
+                    if (details.seekTime !== undefined) {
+                        const state = this.controller.getState();
+                        if (state.fps) {
+                            this.controller.seek(Math.floor(details.seekTime * state.fps));
+                        }
+                    }
+                }],
+            ['stop', () => {
+                    this.controller.pause();
+                    this.controller.seek(0);
+                }]
+        ];
+        for (const [action, handler] of actions) {
+            try {
+                navigator.mediaSession.setActionHandler(action, handler);
+            }
+            catch (e) {
+                // Ignore unsupported actions
+            }
+        }
+    }
+    seekRelative(seconds) {
+        const state = this.controller.getState();
+        if (state.fps && state.duration) {
+            const currentSeconds = state.currentFrame / state.fps;
+            const newSeconds = Math.max(0, Math.min(state.duration, currentSeconds + seconds));
+            this.controller.seek(Math.floor(newSeconds * state.fps));
+        }
+    }
+    updateState(state) {
+        if (!('mediaSession' in navigator))
+            return;
+        navigator.mediaSession.playbackState = state.isPlaying ? 'playing' : 'paused';
+        if (state.duration > 0 && state.fps > 0) {
+            try {
+                navigator.mediaSession.setPositionState({
+                    duration: state.duration,
+                    playbackRate: state.playbackRate || 1,
+                    position: Math.min(state.duration, Math.max(0, state.currentFrame / state.fps))
+                });
+            }
+            catch (e) {
+                // Log warning (e.g. invalid position)
+            }
+        }
+    }
+    destroy() {
+        if ('mediaSession' in navigator) {
+            const actions = ['play', 'pause', 'seekbackward', 'seekforward', 'seekto', 'stop'];
+            actions.forEach(action => {
+                try {
+                    navigator.mediaSession.setActionHandler(action, null);
+                }
+                catch (e) { }
+            });
+            navigator.mediaSession.playbackState = 'none';
+        }
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+    }
+}

package/dist/features/text-tracks.d.ts

@@ -3,38 +3,66 @@ export interface TrackHost {
     handleTrackModeChange(track: HeliosTextTrack): void;
 }
 export declare class HeliosCue {
+    id: string;
+    track: HeliosTextTrack | null;
     startTime: number;
     endTime: number;
+    pauseOnExit: boolean;
     text: string;
     constructor(startTime: number, endTime: number, text: string);
 }
 export declare const CueClass: any;
+export declare class HeliosTextTrackCueList implements Iterable<HeliosCue> {
+    [index: number]: HeliosCue;
+    private _cues;
+    constructor(cues: HeliosCue[]);
+    get length(): number;
+    getCueById(id: string): HeliosCue | null;
+    [Symbol.iterator](): ArrayIterator<HeliosCue>;
+}
 export declare class HeliosTextTrack extends EventTarget {
     private _mode;
     private _cues;
+    private _activeCues;
+    private _oncuechange;
     private _kind;
     private _label;
     private _language;
     private _id;
     private _host;
+    private _cuesWrapper;
+    private _activeCuesWrapper;
     constructor(kind: string, label: string, language: string, host: TrackHost);
     get kind(): string;
     get label(): string;
     get language(): string;
     get id(): string;
-    get cues(): any[];
+    get cues(): HeliosTextTrackCueList;
+    get activeCues(): HeliosTextTrackCueList;
+    get oncuechange(): ((event: Event) => void) | null;
+    set oncuechange(handler: ((event: Event) => void) | null);
     get mode(): TextTrackMode;
     set mode(value: TextTrackMode);
-    addCue(cue: any): void;
-    removeCue(cue: any): void;
+    updateActiveCues(currentTime: number): void;
+    addCue(cue: HeliosCue): void;
+    removeCue(cue: HeliosCue): void;
 }
 export declare class HeliosTextTrackList extends EventTarget implements Iterable<HeliosTextTrack> {
     private tracks;
+    private _onaddtrack;
+    private _onremovetrack;
+    private _onchange;
     get length(): number;
     [index: number]: HeliosTextTrack;
     [Symbol.iterator](): Iterator<HeliosTextTrack>;
     addTrack(track: HeliosTextTrack): void;
     getTrackById(id: string): HeliosTextTrack | null;
     removeTrack(track: HeliosTextTrack): void;
+    dispatchChangeEvent(): void;
+    get onaddtrack(): ((event: any) => void) | null;
     set onaddtrack(handler: ((event: any) => void) | null);
+    get onremovetrack(): ((event: any) => void) | null;
+    set onremovetrack(handler: ((event: any) => void) | null);
+    get onchange(): ((event: any) => void) | null;
+    set onchange(handler: ((event: any) => void) | null);
 }

package/dist/features/text-tracks.js

@@ -1,8 +1,11 @@
 // Shim for VTTCue if not present (e.g. JSDOM, older browsers)
 const GlobalVTTCue = (typeof window !== 'undefined' && window.VTTCue) || null;
 export class HeliosCue {
+    id = "";
+    track = null;
     startTime;
     endTime;
+    pauseOnExit = false;
     text;
     constructor(startTime, endTime, text) {
         this.startTime = startTime;
@@ -11,14 +14,43 @@ export class HeliosCue {
     }
 }
 export const CueClass = GlobalVTTCue || HeliosCue;
+export class HeliosTextTrackCueList {
+    _cues;
+    constructor(cues) {
+        this._cues = cues;
+        return new Proxy(this, {
+            get: (target, prop) => {
+                if (typeof prop === 'string') {
+                    const index = Number(prop);
+                    if (Number.isInteger(index) && index >= 0) {
+                        return target._cues[index];
+                    }
+                }
+                return Reflect.get(target, prop);
+            }
+        });
+    }
+    get length() { return this._cues.length; }
+    getCueById(id) {
+        return this._cues.find(c => c.id === id) || null;
+    }
+    [Symbol.iterator]() {
+        return this._cues[Symbol.iterator]();
+    }
+}
 export class HeliosTextTrack extends EventTarget {
     _mode = 'disabled';
     _cues = [];
+    _activeCues = [];
+    _oncuechange = null;
     _kind;
     _label;
     _language;
     _id;
     _host;
+    // Cached lists to ensure stable references
+    _cuesWrapper = null;
+    _activeCuesWrapper = null;
     constructor(kind, label, language, host) {
         super();
         this._kind = kind;
@@ -31,7 +63,28 @@ export class HeliosTextTrack extends EventTarget {
     get label() { return this._label; }
     get language() { return this._language; }
     get id() { return this._id; }
-    get cues() { return this._cues; }
+    get cues() {
+        if (!this._cuesWrapper) {
+            this._cuesWrapper = new HeliosTextTrackCueList(this._cues);
+        }
+        return this._cuesWrapper;
+    }
+    get activeCues() {
+        if (!this._activeCuesWrapper) {
+            this._activeCuesWrapper = new HeliosTextTrackCueList(this._activeCues);
+        }
+        return this._activeCuesWrapper;
+    }
+    get oncuechange() { return this._oncuechange; }
+    set oncuechange(handler) {
+        if (this._oncuechange) {
+            this.removeEventListener('cuechange', this._oncuechange);
+        }
+        this._oncuechange = handler;
+        if (handler) {
+            this.addEventListener('cuechange', handler);
+        }
+    }
     get mode() {
         return this._mode;
     }
@@ -41,7 +94,51 @@ export class HeliosTextTrack extends EventTarget {
             this._host.handleTrackModeChange(this);
         }
     }
+    updateActiveCues(currentTime) {
+        if (this._mode === 'disabled') {
+            if (this._activeCues.length > 0) {
+                this._activeCues = [];
+                this._activeCuesWrapper = null;
+                this.dispatchEvent(new Event('cuechange'));
+            }
+            return;
+        }
+        const newActiveCues = this._cues.filter(cue => currentTime >= cue.startTime && currentTime < cue.endTime);
+        let changed = false;
+        if (newActiveCues.length !== this._activeCues.length) {
+            changed = true;
+        }
+        else {
+            for (let i = 0; i < newActiveCues.length; i++) {
+                if (newActiveCues[i] !== this._activeCues[i]) {
+                    changed = true;
+                    break;
+                }
+            }
+        }
+        if (changed) {
+            this._activeCues = newActiveCues;
+            this._activeCuesWrapper = null;
+            this.dispatchEvent(new Event('cuechange'));
+        }
+    }
     addCue(cue) {
+        try {
+            cue.track = this;
+        }
+        catch (e) {
+            // Handle native VTTCue where track is read-only
+            try {
+                Object.defineProperty(cue, 'track', {
+                    value: this,
+                    writable: true,
+                    configurable: true
+                });
+            }
+            catch (e2) {
+                console.warn("HeliosTextTrack: Could not set track property on cue", e2);
+            }
+        }
         this._cues.push(cue);
         this._cues.sort((a, b) => a.startTime - b.startTime);
         // If we are showing, we need to update the host (controller) immediately with new cues
@@ -52,6 +149,17 @@ export class HeliosTextTrack extends EventTarget {
     removeCue(cue) {
         const idx = this._cues.indexOf(cue);
         if (idx !== -1) {
+            try {
+                cue.track = null;
+            }
+            catch (e) {
+                try {
+                    Object.defineProperty(cue, 'track', { value: null });
+                }
+                catch (e2) {
+                    // Ignore
+                }
+            }
             this._cues.splice(idx, 1);
             if (this._mode === 'showing') {
                 this._host.handleTrackModeChange(this);
@@ -61,6 +169,9 @@ export class HeliosTextTrack extends EventTarget {
 }
 export class HeliosTextTrackList extends EventTarget {
     tracks = [];
+    _onaddtrack = null;
+    _onremovetrack = null;
+    _onchange = null;
     get length() { return this.tracks.length; }
     [Symbol.iterator]() {
         return this.tracks[Symbol.iterator]();
@@ -90,10 +201,37 @@ export class HeliosTextTrackList extends EventTarget {
             this.dispatchEvent(event);
         }
     }
-    // Stub for standard event handler property
+    dispatchChangeEvent() {
+        this.dispatchEvent(new Event('change'));
+    }
+    get onaddtrack() { return this._onaddtrack; }
     set onaddtrack(handler) {
+        if (this._onaddtrack) {
+            this.removeEventListener('addtrack', this._onaddtrack);
+        }
+        this._onaddtrack = handler;
         if (handler) {
             this.addEventListener('addtrack', handler);
         }
     }
+    get onremovetrack() { return this._onremovetrack; }
+    set onremovetrack(handler) {
+        if (this._onremovetrack) {
+            this.removeEventListener('removetrack', this._onremovetrack);
+        }
+        this._onremovetrack = handler;
+        if (handler) {
+            this.addEventListener('removetrack', handler);
+        }
+    }
+    get onchange() { return this._onchange; }
+    set onchange(handler) {
+        if (this._onchange) {
+            this.removeEventListener('change', this._onchange);
+        }
+        this._onchange = handler;
+        if (handler) {
+            this.addEventListener('change', handler);
+        }
+    }
 }

package/dist/features/video-tracks.d.ts

@@ -0,0 +1,43 @@
+export interface VideoTrackHost {
+    handleVideoTrackSelectedChange(track: HeliosVideoTrack): void;
+}
+export declare class HeliosVideoTrack {
+    private _id;
+    private _kind;
+    private _label;
+    private _language;
+    private _selected;
+    private _host;
+    constructor(id: string, kind: string, label: string, language: string, selected: boolean, host: VideoTrackHost);
+    get id(): string;
+    get kind(): string;
+    get label(): string;
+    get language(): string;
+    get selected(): boolean;
+    set selected(value: boolean);
+    /**
+     * Internal method to update state without triggering host callback.
+     * Used when syncing from external state.
+     */
+    _setSelectedInternal(value: boolean): void;
+}
+export declare class HeliosVideoTrackList extends EventTarget implements Iterable<HeliosVideoTrack> {
+    private tracks;
+    private _onaddtrack;
+    private _onremovetrack;
+    private _onchange;
+    get length(): number;
+    get selectedIndex(): number;
+    [index: number]: HeliosVideoTrack;
+    [Symbol.iterator](): Iterator<HeliosVideoTrack>;
+    getTrackById(id: string): HeliosVideoTrack | null;
+    addTrack(track: HeliosVideoTrack): void;
+    removeTrack(track: HeliosVideoTrack): void;
+    dispatchChangeEvent(): void;
+    get onaddtrack(): ((event: any) => void) | null;
+    set onaddtrack(handler: ((event: any) => void) | null);
+    get onremovetrack(): ((event: any) => void) | null;
+    set onremovetrack(handler: ((event: any) => void) | null);
+    get onchange(): ((event: any) => void) | null;
+    set onchange(handler: ((event: any) => void) | null);
+}

package/dist/features/video-tracks.js

@@ -0,0 +1,107 @@
+export class HeliosVideoTrack {
+    _id;
+    _kind;
+    _label;
+    _language;
+    _selected;
+    _host;
+    constructor(id, kind, label, language, selected, host) {
+        this._id = id;
+        this._kind = kind;
+        this._label = label;
+        this._language = language;
+        this._selected = selected;
+        this._host = host;
+    }
+    get id() { return this._id; }
+    get kind() { return this._kind; }
+    get label() { return this._label; }
+    get language() { return this._language; }
+    get selected() { return this._selected; }
+    set selected(value) {
+        if (this._selected !== value) {
+            this._selected = value;
+            this._host.handleVideoTrackSelectedChange(this);
+        }
+    }
+    /**
+     * Internal method to update state without triggering host callback.
+     * Used when syncing from external state.
+     */
+    _setSelectedInternal(value) {
+        this._selected = value;
+    }
+}
+export class HeliosVideoTrackList extends EventTarget {
+    tracks = [];
+    _onaddtrack = null;
+    _onremovetrack = null;
+    _onchange = null;
+    get length() { return this.tracks.length; }
+    get selectedIndex() {
+        return this.tracks.findIndex(t => t.selected);
+    }
+    [Symbol.iterator]() {
+        return this.tracks[Symbol.iterator]();
+    }
+    getTrackById(id) {
+        return this.tracks.find(t => t.id === id) || null;
+    }
+    addTrack(track) {
+        this.tracks.push(track);
+        // Enable array-like access
+        this[this.tracks.length - 1] = track;
+        const event = new Event('addtrack');
+        event.track = track;
+        this.dispatchEvent(event);
+    }
+    removeTrack(track) {
+        const index = this.tracks.indexOf(track);
+        if (index !== -1) {
+            this.tracks.splice(index, 1);
+            // Re-index properties
+            for (let i = index; i < this.tracks.length; i++) {
+                this[i] = this.tracks[i];
+            }
+            delete this[this.tracks.length];
+            const event = new Event('removetrack');
+            event.track = track;
+            this.dispatchEvent(event);
+        }
+    }
+    // Helper to dispatch change event
+    dispatchChangeEvent() {
+        this.dispatchEvent(new Event('change'));
+    }
+    // Standard event handler properties
+    get onaddtrack() { return this._onaddtrack; }
+    set onaddtrack(handler) {
+        if (this._onaddtrack) {
+            this.removeEventListener('addtrack', this._onaddtrack);
+        }
+        this._onaddtrack = handler;
+        if (handler) {
+            this.addEventListener('addtrack', handler);
+        }
+    }
+    get onremovetrack() { return this._onremovetrack; }
+    set onremovetrack(handler) {
+        if (this._onremovetrack) {
+            this.removeEventListener('removetrack', this._onremovetrack);
+        }
+        this._onremovetrack = handler;
+        if (handler) {
+            this.addEventListener('removetrack', handler);
+        }
+    }
+    get onchange() { return this._onchange; }
+    set onchange(handler) {
+        if (this._onchange) {
+            this.removeEventListener('change', this._onchange);
+        }
+        this._onchange = handler;
+        if (handler) {
+            this.addEventListener('change', handler);
+        }
+    }
+}