CORE: added 'connected devices' like in spotify

templates/player/scripts.html

@@ -406,6 +406,10 @@ document.addEventListener('alpine:init', () => {
         _playbackStartedAt: null,
         _listenedSeconds: 0,
         _lastAudioTime: 0,
+        _remoteExecuting: false,
+        _remoteStateBaseTime: 0,
+        _remoteStateReceivedAt: 0,
+        _remoteStateTimer: null,
 
         init() {
             audio.volume = this.volume;
@@ -440,29 +444,100 @@ document.addEventListener('alpine:init', () => {
 
             // Periodic state save
             this._saveTimer = setInterval(() => {
-                this._saveState();
+                if (this._isLocalPlaybackDevice()) this._saveState();
             }, 10000);
+            this._remoteStateTimer = setInterval(() => {
+                this._tickRemoteProgress();
+            }, 250);
 
             // Restore state
             this._restoreState();
 
             // Save state on page unload
             window.addEventListener('beforeunload', () => {
-                this._saveStateSync();
+                if (this._isLocalPlaybackDevice()) this._saveStateSync();
             });
         },
 
         play(track) {
+            if (!track) return;
+            if (this._shouldSendRemote()) {
+                this._mirrorRemoteTrack(track, true, 0);
+                this._sendRemote('play_track', this._remotePlaybackPayload(track, {
+                    position_seconds: 0,
+                    paused: false,
+                }));
+                return;
+            }
+            this._playLocal(track);
+        },
+
+        playQueueIndex(idx) {
+            const queue = Alpine.store('queue');
+            if (!queue || idx < 0 || idx >= queue.tracks.length) return;
+            queue.currentIndex = idx;
+            const track = queue.tracks[idx];
+            if (this._shouldSendRemote()) {
+                this._mirrorRemoteTrack(track, true, 0);
+                this._sendRemote('play_from_index', this._remotePlaybackPayload(track, {
+                    index: idx,
+                    position_seconds: 0,
+                    paused: false,
+                }));
+                return;
+            }
+            this._playLocal(track);
+        },
+
+        _playLocal(track, options = {}) {
             this.currentTrack = track;
             this._historyRecorded = false;
             this._resetPlaybackTracking();
             audio.src = track.stream_url;
-            audio.play().catch(() => {});
+            const seekSeconds = Number(options.position_seconds || 0);
+            if (seekSeconds > 0) {
+                const onLoaded = () => {
+                    audio.currentTime = seekSeconds;
+                    this._lastAudioTime = audio.currentTime || 0;
+                    audio.removeEventListener('loadedmetadata', onLoaded);
+                };
+                audio.addEventListener('loadedmetadata', onLoaded);
+            }
+            if (options.paused) {
+                audio.pause();
+                this.isPlaying = false;
+            } else {
+                audio.play().catch(() => {});
+            }
             this._updateMediaSession();
         },
 
-        pause() { audio.pause(); },
-        resume() { audio.play().catch(() => {}); },
+        _pauseLocal() {
+            audio.pause();
+            this.isPlaying = false;
+        },
+
+        pause() {
+            if (this._shouldSendRemote()) {
+                this.isPlaying = false;
+                this._remoteStateBaseTime = this.currentTime;
+                this._remoteStateReceivedAt = Date.now();
+                this._sendRemote('pause');
+                return;
+            }
+            this._pauseLocal();
+        },
+
+        resume() {
+            if (this._shouldSendRemote()) {
+                this.isPlaying = true;
+                this._remoteStateBaseTime = this.currentTime;
+                this._remoteStateReceivedAt = Date.now();
+                this._sendRemote('resume');
+                return;
+            }
+            audio.play().catch(() => {});
+        },
 
         toggle() {
             if (!this.currentTrack) return;
@@ -471,14 +546,25 @@ document.addEventListener('alpine:init', () => {
         },
 
         seek(time) {
-            audio.currentTime = time;
+            const nextTime = Math.max(0, Number(time || 0));
+            if (this._shouldSendRemote()) {
+                this.currentTime = nextTime;
+                this.progress = this.duration > 0 ? (this.currentTime / this.duration) * 100 : 0;
+                this._remoteStateBaseTime = nextTime;
+                this._remoteStateReceivedAt = Date.now();
+                this._sendRemote('seek', { time: nextTime });
+                return;
+            }
+            audio.currentTime = nextTime;
             this._lastAudioTime = audio.currentTime || 0;
         },
 
         seekRelative(delta) {
             if (!this.currentTrack) return;
-            audio.currentTime = Math.max(0, Math.min(audio.duration || 0, audio.currentTime + delta));
-            this._lastAudioTime = audio.currentTime || 0;
+            const duration = this.duration || audio.duration || 0;
+            const current = this._shouldSendRemote() ? this.currentTime : audio.currentTime;
+            const max = duration > 0 ? duration : Number.MAX_SAFE_INTEGER;
+            this.seek(Math.max(0, Math.min(max, current + delta)));
         },
 
         seekFromClick(event) {
@@ -491,6 +577,13 @@ document.addEventListener('alpine:init', () => {
         },
 
         next() {
+            if (this._shouldSendRemote()) {
+                this._sendRemote('next', {
+                    shuffle: this.shuffle,
+                    repeat_mode: this.repeatMode,
+                });
+                return;
+            }
             const queue = Alpine.store('queue');
             if (queue.tracks.length === 0) return;
 
@@ -516,10 +609,14 @@ document.addEventListener('alpine:init', () => {
                     }
                 }
             }
-            queue.playFromIndex(nextIdx);
+            this.playQueueIndex(nextIdx);
         },
 
         prev() {
+            if (this._shouldSendRemote()) {
+                this._sendRemote('prev');
+                return;
+            }
             if (this.currentTime > 3) {
                 this.seek(0);
                 return;
@@ -536,11 +633,18 @@ document.addEventListener('alpine:init', () => {
                     return;
                 }
             }
-            queue.playFromIndex(prevIdx);
+            this.playQueueIndex(prevIdx);
         },
 
         setVolume(v) {
-            this.volume = Math.max(0, Math.min(1, v));
+            this._setVolumeLocal(v);
+            if (this._shouldSendRemote()) {
+                this._sendRemote('set_volume', { volume: this.volume });
+            }
+        },
+
+        _setVolumeLocal(v) {
+            this.volume = Math.max(0, Math.min(1, Number(v || 0)));
             audio.volume = this.volume;
         },
 
@@ -583,12 +687,162 @@ document.addEventListener('alpine:init', () => {
 
         toggleShuffle() {
             this.shuffle = !this.shuffle;
+            if (this._shouldSendRemote()) {
+                this._sendRemote('set_options', {
+                    shuffle: this.shuffle,
+                    repeat_mode: this.repeatMode,
+                });
+            }
         },
 
         cycleRepeat() {
             if (this.repeatMode === 'off') this.repeatMode = 'all';
             else if (this.repeatMode === 'all') this.repeatMode = 'one';
             else this.repeatMode = 'off';
+            if (this._shouldSendRemote()) {
+                this._sendRemote('set_options', {
+                    shuffle: this.shuffle,
+                    repeat_mode: this.repeatMode,
+                });
+            }
+        },
+
+        _isLocalPlaybackDevice() {
+            const devices = Alpine.store('devices');
+            return !devices || devices.isActive();
+        },
+
+        _shouldSendRemote() {
+            const devices = Alpine.store('devices');
+            return !!devices && !this._remoteExecuting && !devices.isActive();
+        },
+
+        _sendRemote(command, payload = {}) {
+            const devices = Alpine.store('devices');
+            if (!devices) return false;
+            devices.sendCommand(command, payload);
+            return true;
+        },
+
+        _remotePlaybackPayload(track, overrides = {}) {
+            const queue = Alpine.store('queue');
+            const tracks = queue?.tracks?.length ? queue.tracks : (track ? [track] : []);
+            let index = Number.isInteger(overrides.index) ? overrides.index : (queue?.currentIndex ?? 0);
+            if (track && tracks[index]?.id !== track.id) {
+                const foundIndex = tracks.findIndex(item => item.id === track.id);
+                index = foundIndex >= 0 ? foundIndex : 0;
+            }
+            return {
+                track,
+                tracks,
+                index,
+                position_seconds: overrides.position_seconds ?? this.currentTime,
+                duration_seconds: overrides.duration_seconds ?? this._trackDuration(),
+                paused: overrides.paused ?? !this.isPlaying,
+                shuffle: this.shuffle,
+                repeat_mode: this.repeatMode,
+                volume: this.volume,
+            };
+        },
+
+        _devicePlaybackStatePayload() {
+            const queue = Alpine.store('queue');
+            const track = this.currentTrack || queue?.tracks?.[queue.currentIndex] || null;
+            if (!track && (!queue || queue.tracks.length === 0)) return null;
+            const payload = this._remotePlaybackPayload(track, {
+                position_seconds: audio.currentTime || this.currentTime || 0,
+                duration_seconds: this._trackDuration(),
+                paused: !this.isPlaying,
+            });
+            payload.tracks = [];
+            return payload;
+        },
+
+        _mirrorRemoteTrack(track, playing, positionSeconds = null) {
+            if (!track) return;
+            this.currentTrack = track;
+            this.isPlaying = !!playing;
+            if (positionSeconds !== null) this.currentTime = Math.max(0, Number(positionSeconds || 0));
+            this.duration = Number(track.duration_seconds || this.duration || 0);
+            this.progress = this.duration > 0 ? (this.currentTime / this.duration) * 100 : 0;
+            this._remoteStateBaseTime = this.currentTime;
+            this._remoteStateReceivedAt = Date.now();
+            this._updateMediaSession();
+        },
+
+        _applyRemotePlaybackState(state) {
+            if (!state) return;
+            const queue = Alpine.store('queue');
+            const tracks = Array.isArray(state.tracks) ? state.tracks.filter(Boolean) : [];
+            if (queue && tracks.length > 0) {
+                queue.tracks = tracks;
+                queue.currentIndex = Math.max(0, Math.min(Number(state.index || 0), tracks.length - 1));
+            }
+            const track = state.track || queue?.tracks?.[queue.currentIndex] || null;
+            if (track) {
+                this.currentTrack = track;
+            }
+            this.shuffle = !!state.shuffle;
+            this.repeatMode = state.repeat_mode || 'off';
+            if (typeof state.volume === 'number') this._setVolumeLocal(state.volume);
+            this.duration = Number(state.duration_seconds || track?.duration_seconds || this.duration || 0);
+            this.isPlaying = !state.paused;
+            this._remoteStateBaseTime = Math.max(0, Number(state.position_seconds || 0));
+            this._remoteStateReceivedAt = Date.now();
+            this._tickRemoteProgress(true);
+            this._updateMediaSession();
+        },
+
+        _tickRemoteProgress(force = false) {
+            if (this._isLocalPlaybackDevice() || !this.currentTrack) return;
+            if (!force && !this.isPlaying) return;
+            let nextTime = Number(this._remoteStateBaseTime || 0);
+            if (this.isPlaying && this._remoteStateReceivedAt > 0) {
+                nextTime += (Date.now() - this._remoteStateReceivedAt) / 1000;
+            }
+            const duration = Number(this.duration || this.currentTrack?.duration_seconds || 0);
+            if (duration > 0) nextTime = Math.min(nextTime, duration);
+            this.currentTime = Math.max(0, nextTime);
+            this.progress = duration > 0 ? (this.currentTime / duration) * 100 : 0;
+        },
+
+        _executeRemoteCommand(command) {
+            if (!command || !command.command) return;
+            const payload = command.payload || {};
+            const queue = Alpine.store('queue');
+            this._remoteExecuting = true;
+            try {
+                if (typeof payload.shuffle === 'boolean') this.shuffle = payload.shuffle;
+                if (payload.repeat_mode) this.repeatMode = payload.repeat_mode;
+                if (typeof payload.volume === 'number') this._setVolumeLocal(payload.volume);
+
+                if (command.command === 'play_track' || command.command === 'play_from_index') {
+                    if (Array.isArray(payload.tracks) && payload.tracks.length > 0) {
+                        queue.tracks = payload.tracks;
+                        queue.currentIndex = Math.max(0, Math.min(Number(payload.index || 0), queue.tracks.length - 1));
+                    }
+                    const track = payload.track || queue.tracks[queue.currentIndex];
+                    if (track) this._playLocal(track, payload);
+                } else if (command.command === 'pause') {
+                    this.pause();
+                } else if (command.command === 'resume') {
+                    this.resume();
+                } else if (command.command === 'seek') {
+                    this.seek(Number(payload.time || 0));
+                } else if (command.command === 'next') {
+                    this.next();
+                } else if (command.command === 'prev') {
+                    this.prev();
+                } else if (command.command === 'set_volume') {
+                    this.setVolume(payload.volume);
+                } else if (command.command === 'set_options') {
+                    // Options were already applied above.
+                }
+                this._saveState();
+                Alpine.store('devices')?.heartbeat();
+            } finally {
+                this._remoteExecuting = false;
+            }
         },
 
         _updateMediaSession() {
@@ -645,7 +899,7 @@ document.addEventListener('alpine:init', () => {
                 const state = await res.json();
                 this.shuffle = state.shuffle || false;
                 this.repeatMode = state.repeat_mode || 'off';
-                this.setVolume(typeof state.volume === 'number' ? state.volume : 0.7);
+                this._setVolumeLocal(typeof state.volume === 'number' ? state.volume : 0.7);
 
                 // Restore queue if there are track IDs
                 if (state.queue && state.queue.length > 0) {
@@ -783,6 +1037,158 @@ document.addEventListener('alpine:init', () => {
         },
     });
 
+    // -----------------------------------------------------------------------
+    // Playback devices store
+    // -----------------------------------------------------------------------
+    Alpine.store('devices', {
+        id: null,
+        devices: [],
+        activeDeviceId: null,
+        open: false,
+        _pollTimer: null,
+        _stateRefreshTick: 0,
+
+        init() {
+            this.id = this._ensureId();
+            this.heartbeat();
+            this._pollTimer = setInterval(() => this.poll(), 750);
+            document.addEventListener('visibilitychange', () => {
+                if (!document.hidden) this.poll();
+            });
+        },
+
+        _ensureId() {
+            let id = sessionStorage.getItem('furu_player_device_id');
+            if (!id) {
+                id = (crypto.randomUUID ? crypto.randomUUID() : this._fallbackId()).replace(/[^a-zA-Z0-9_-]/g, '');
+                sessionStorage.setItem('furu_player_device_id', id);
+            }
+            return id;
+        },
+
+        _fallbackId() {
+            return 'device-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2);
+        },
+
+        requestPayload() {
+            const player = Alpine.store('player');
+            return {
+                device_id: this.id,
+                user_agent: navigator.userAgent || '',
+                playback_state: player && this.isActive() ? player._devicePlaybackStatePayload() : null,
+            };
+        },
+
+        async heartbeat() {
+            try {
+                const res = await fetch('/api/player/devices/heartbeat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(this.requestPayload()),
+                });
+                if (!res.ok) return;
+                this._apply(await res.json());
+            } catch {}
+        },
+
+        async poll() {
+            try {
+                const res = await fetch('/api/player/devices/poll', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(this.requestPayload()),
+                });
+                if (!res.ok) return;
+                const data = await res.json();
+                this._apply(data);
+
+                const player = Alpine.store('player');
+                if (player && Array.isArray(data.commands)) {
+                    data.commands.forEach(command => player._executeRemoteCommand(command));
+                }
+                if (player && !this.isActive()) {
+                    if (data.playback_state) {
+                        player._applyRemotePlaybackState(data.playback_state);
+                    } else if (++this._stateRefreshTick % 8 === 0) {
+                        player._restoreState();
+                    }
+                }
+            } catch {}
+        },
+
+        _apply(data) {
+            const wasActive = this.isActive();
+            this.activeDeviceId = data.active_device_id || null;
+            this.devices = Array.isArray(data.devices) ? data.devices : [];
+            if (wasActive && !this.isActive()) {
+                Alpine.store('player')?._pauseLocal();
+            }
+        },
+
+        isActive() {
+            return !this.activeDeviceId || this.activeDeviceId === this.id;
+        },
+
+        activeLabel() {
+            const active = this.devices.find(device => device.id === this.activeDeviceId);
+            return active ? active.name : 'Devices';
+        },
+
+        toggle() {
+            this.open = !this.open;
+            if (this.open) this.poll();
+        },
+
+        async select(deviceId) {
+            if (!deviceId) return;
+            const player = Alpine.store('player');
+            const transferPayload = player?.currentTrack
+                ? player._remotePlaybackPayload(player.currentTrack, {
+                    position_seconds: player.currentTime,
+                    paused: !player.isPlaying,
+                })
+                : null;
+
+            try {
+                const res = await fetch('/api/player/devices/active', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        device_id: deviceId,
+                        current_device_id: this.id,
+                    }),
+                });
+                if (!res.ok) return;
+                this._apply(await res.json());
+                this.open = false;
+
+                if (deviceId !== this.id && transferPayload) {
+                    const sent = await this.sendCommand('play_from_index', transferPayload, deviceId);
+                    if (sent && player?.isPlaying) player._pauseLocal();
+                }
+            } catch {}
+        },
+
+        async sendCommand(command, payload = {}, targetDeviceId = null) {
+            const target = targetDeviceId || this.activeDeviceId;
+            if (!target || target === this.id) return false;
+            try {
+                const res = await fetch('/api/player/devices/command', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        target_device_id: target,
+                        command,
+                        payload,
+                    }),
+                });
+                return res.ok;
+            } catch {
+                return false;
+            }
+        },
+    });
+
     // -----------------------------------------------------------------------
     // Queue store
     // -----------------------------------------------------------------------
@@ -812,8 +1218,7 @@ document.addEventListener('alpine:init', () => {
 
         playFromIndex(idx) {
             if (idx < 0 || idx >= this.tracks.length) return;
-            this.currentIndex = idx;
-            Alpine.store('player').play(this.tracks[idx]);
+            Alpine.store('player').playQueueIndex(idx);
         },
 
         remove(idx) {

templates/player/shell.html

@@ -1046,5 +1046,50 @@
             <button class="queue-toggle-btn" :class="{ active: $store.queue.visible }" @click="$store.queue.visible = !$store.queue.visible" title="{{ t.player_queue }}">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
             </button>
+            <div class="device-picker" @click.outside="$store.devices.open = false">
+                <button class="queue-toggle-btn device-toggle-btn"
+                        :class="{ active: !$store.devices.isActive() || $store.devices.open }"
+                        @click="$store.devices.toggle()"
+                        :title="$store.devices.activeLabel()"
+                        aria-label="Devices">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="4" width="18" height="12" rx="2"/>
+                        <path d="M8 20h8"/>
+                        <path d="M12 16v4"/>
+                    </svg>
+                </button>
+                <div class="device-popover" x-show="$store.devices.open" x-transition x-cloak>
+                    <template x-for="device in $store.devices.devices" :key="device.id">
+                        <button class="device-row"
+                                :class="{ active: device.is_active }"
+                                @click="$store.devices.select(device.id)">
+                            <span class="device-row-icon">
+                                <template x-if="device.kind === 'phone'">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <rect x="7" y="2" width="10" height="20" rx="2"/>
+                                        <path d="M11 18h2"/>
+                                    </svg>
+                                </template>
+                                <template x-if="device.kind !== 'phone'">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <rect x="3" y="4" width="18" height="12" rx="2"/>
+                                        <path d="M8 20h8"/>
+                                        <path d="M12 16v4"/>
+                                    </svg>
+                                </template>
+                            </span>
+                            <span class="device-row-main">
+                                <span class="device-row-name" x-text="device.name"></span>
+                                <span class="device-row-current" x-show="device.is_current"></span>
+                            </span>
+                            <span class="device-row-check" x-show="device.is_active">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4">
+                                    <polyline points="20 6 9 17 4 12"/>
+                                </svg>
+                            </span>
+                        </button>
+                    </template>
+                </div>
+            </div>
         </div>
     </div>

templates/player/styles.html

@@ -1342,6 +1342,104 @@ button.user-stat:hover {
 .queue-toggle-btn.active { color: var(--accent); }
 .queue-toggle-btn svg { width: 18px; height: 18px; }
 
+.device-picker {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.device-toggle-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.device-popover {
+    position: absolute;
+    right: 0;
+    bottom: 38px;
+    width: 260px;
+    max-width: calc(100vw - 24px);
+    max-height: min(320px, calc(100dvh - var(--player-bar-space) - 24px));
+    overflow-y: auto;
+    padding: 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-elevated);
+    box-shadow: 0 16px 46px rgba(0,0,0,0.48);
+    z-index: 45;
+}
+
+.device-row {
+    width: 100%;
+    min-height: 44px;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-secondary);
+    display: grid;
+    grid-template-columns: 28px minmax(0, 1fr) 22px;
+    align-items: center;
+    gap: 9px;
+    padding: 7px 8px;
+    cursor: pointer;
+    text-align: left;
+}
+
+.device-row:hover,
+.device-row.active {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.device-row.active {
+    color: var(--accent);
+}
+
+.device-row-icon,
+.device-row-check {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.device-row-icon svg {
+    width: 18px;
+    height: 18px;
+}
+
+.device-row-check svg {
+    width: 16px;
+    height: 16px;
+}
+
+.device-row-main {
+    min-width: 0;
+}
+
+.device-row-name {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.device-row-name {
+    color: inherit;
+    font-size: 13px;
+    font-weight: 650;
+}
+
+.device-row-current {
+    display: block;
+    width: 18px;
+    height: 3px;
+    margin-top: 5px;
+    border-radius: 999px;
+    background: currentColor;
+    opacity: 0.55;
+}
+
 /* Loading */
 .loading-spinner {
     display: flex;
@@ -3226,6 +3324,14 @@ button.user-stat:hover {
         bottom: calc(var(--player-bar-space) + 8px);
     }
 
+    .device-popover {
+        position: fixed;
+        right: 8px;
+        bottom: calc(var(--player-bar-space) + 8px);
+        width: min(280px, calc(100vw - 16px));
+        max-height: 42dvh;
+    }
+
     .player-bar {
         gap: 8px;
         padding-left: 10px;