diff --git a/js/app.js b/js/app.js index ddef513..1dbba2f 100644 --- a/js/app.js +++ b/js/app.js @@ -17,6 +17,79 @@ import { syncManager } from './firebase/sync.js'; import { registerSW } from 'virtual:pwa-register'; +function initializeCasting(audioPlayer, castBtn) { + if (!castBtn) return; + + if ('remote' in audioPlayer) { + audioPlayer.remote.watchAvailability((available) => { + if (available) { + castBtn.style.display = 'flex'; + castBtn.classList.add('available'); + } + }).catch(err => { + console.log('Remote playback not available:', err); + if (window.innerWidth > 768) { + castBtn.style.display = 'flex'; + } + }); + + castBtn.addEventListener('click', () => { + if (!audioPlayer.src) { + alert('Please play a track first to enable casting.'); + return; + } + audioPlayer.remote.prompt().catch(err => { + if (err.name === 'NotAllowedError') return; + if (err.name === 'NotFoundError') { + alert('No remote playback devices (Chromecast/AirPlay) were found on your network.'); + return; + } + console.log('Cast prompt error:', err); + }); + }); + + audioPlayer.addEventListener('playing', () => { + if (audioPlayer.remote && audioPlayer.remote.state === 'connected') { + castBtn.classList.add('connected'); + } + }); + + audioPlayer.addEventListener('pause', () => { + if (audioPlayer.remote && audioPlayer.remote.state === 'disconnected') { + castBtn.classList.remove('connected'); + } + }); + } + else if (audioPlayer.webkitShowPlaybackTargetPicker) { + castBtn.style.display = 'flex'; + castBtn.classList.add('available'); + + castBtn.addEventListener('click', () => { + audioPlayer.webkitShowPlaybackTargetPicker(); + }); + + audioPlayer.addEventListener('webkitplaybacktargetavailabilitychanged', (e) => { + if (e.availability === 'available') { + castBtn.classList.add('available'); + } + }); + + audioPlayer.addEventListener('webkitcurrentplaybacktargetiswirelesschanged', () => { + if (audioPlayer.webkitCurrentPlaybackTargetIsWireless) { + castBtn.classList.add('connected'); + } else { + castBtn.classList.remove('connected'); + } + }); + } + else if (window.innerWidth > 768) { + castBtn.style.display = 'flex'; + castBtn.addEventListener('click', () => { + alert('Casting is not supported in this browser. Try Chrome for Chromecast or Safari for AirPlay.'); + }); + } +} + function initializeKeyboardShortcuts(player, audioPlayer) { document.addEventListener('keydown', (e) => { @@ -133,6 +206,9 @@ document.addEventListener('DOMContentLoaded', async () => { initializeUIInteractions(player, api); initializeKeyboardShortcuts(player, audioPlayer); + const castBtn = document.getElementById('cast-btn'); + initializeCasting(audioPlayer, castBtn); + // Restore UI state for the current track (like button, theme)