feat(player): add PWA-compatible stream casting (#33)

Add a browser-native casting service with Live and Watch player controls for Remote Playback and AirPlay-compatible devices. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-10-06 22:07:49 +02:00
parent d1934163ca
commit fd314f0a59
5 changed files with 275 additions and 2 deletions
--- a/public/js/services/castService.js
+++ b/public/js/services/castService.js
@ -0,0 +1,108 @@
+(function (root, factory) {
+    const CastService = factory();
+    if (typeof module === 'object' && module.exports) module.exports = CastService;
+    if (root) root.CastService = CastService;
+})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
+    class CastService {
+        constructor(video) {
+            this.video = video || null;
+            this.listeners = new Set();
+            this.availabilityWatchId = null;
+            this.state = { status: 'unsupported', available: false, type: 'unsupported', error: '' };
+            this.handleRemoteConnect = () => this.setState({ status: 'connected', available: true });
+            this.handleRemoteDisconnect = () => this.setState({ status: 'available', available: true });
+            this.handleAirPlayAvailability = event => this.setState({
+                status: event?.availability === 'available' ? 'available' : 'unavailable',
+                available: event?.availability === 'available',
+                type: 'airplay'
+            });
+            this.handleAirPlayState = () => this.setState({
+                status: this.video?.webkitCurrentPlaybackTargetIsWireless ? 'connected' : 'available',
+                available: true,
+                type: 'airplay'
+            });
+            this.attachStateEvents();
+        }
+
+        attachStateEvents() {
+            this.video?.remote?.addEventListener?.('connect', this.handleRemoteConnect);
+            this.video?.remote?.addEventListener?.('disconnect', this.handleRemoteDisconnect);
+            this.video?.addEventListener?.('webkitplaybacktargetavailabilitychanged', this.handleAirPlayAvailability);
+            this.video?.addEventListener?.('webkitcurrentplaybacktargetiswirelesschanged', this.handleAirPlayState);
+        }
+
+        setState(update) {
+            this.state = { ...this.state, ...update };
+            this.listeners.forEach(listener => listener({ ...this.state }));
+        }
+
+        subscribe(listener) {
+            if (typeof listener !== 'function') return () => {};
+            this.listeners.add(listener);
+            listener({ ...this.state });
+            return () => this.listeners.delete(listener);
+        }
+
+        async watchAvailability() {
+            const remote = this.video?.remote;
+            if (remote && typeof remote.watchAvailability === 'function') {
+                this.setState({ status: 'unavailable', available: false, type: 'remote-playback', error: '' });
+                try {
+                    this.availabilityWatchId = await remote.watchAvailability(available => {
+                        this.setState({
+                            status: available ? 'available' : 'unavailable',
+                            available: Boolean(available),
+                            type: 'remote-playback',
+                            error: ''
+                        });
+                    });
+                    return this.state;
+                } catch (error) {
+                    if (typeof this.video?.webkitShowPlaybackTargetPicker !== 'function') {
+                        this.setState({ status: 'unavailable', available: false, type: 'remote-playback', error: error?.message || '' });
+                        return this.state;
+                    }
+                }
+            }
+            if (typeof this.video?.webkitShowPlaybackTargetPicker === 'function') {
+                this.setState({ status: 'available', available: true, type: 'airplay', error: '' });
+                return this.state;
+            }
+            this.setState({ status: 'unsupported', available: false, type: 'unsupported', error: '' });
+            return this.state;
+        }
+
+        async prompt() {
+            if (this.state.type === 'remote-playback' && typeof this.video?.remote?.prompt === 'function') {
+                this.setState({ status: 'connecting', error: '' });
+                try {
+                    await this.video.remote.prompt();
+                    const connected = this.video.remote.state === 'connected';
+                    this.setState({ status: connected ? 'connected' : (this.state.available ? 'available' : 'unavailable') });
+                    return true;
+                } catch (error) {
+                    this.setState({ status: this.state.available ? 'available' : 'unavailable', error: error?.message || 'Unable to open device picker.' });
+                    throw error;
+                }
+            }
+            if (this.state.type === 'airplay' && typeof this.video?.webkitShowPlaybackTargetPicker === 'function') {
+                this.video.webkitShowPlaybackTargetPicker();
+                return true;
+            }
+            return false;
+        }
+
+        destroy() {
+            if (this.availabilityWatchId !== null) {
+                this.video?.remote?.cancelWatchAvailability?.(this.availabilityWatchId).catch?.(() => {});
+            }
+            this.video?.remote?.removeEventListener?.('connect', this.handleRemoteConnect);
+            this.video?.remote?.removeEventListener?.('disconnect', this.handleRemoteDisconnect);
+            this.video?.removeEventListener?.('webkitplaybacktargetavailabilitychanged', this.handleAirPlayAvailability);
+            this.video?.removeEventListener?.('webkitcurrentplaybacktargetiswirelesschanged', this.handleAirPlayState);
+            this.listeners.clear();
+        }
+    }
+
+    return CastService;
+});