From c5c2a71ad2f5fece1bd457a2c50e8948c0880e30 Mon Sep 17 00:00:00 2001
From: Toche Camille <tochecamille@gmail.com>
Date: Mon, 27 Oct 2025 15:22:51 +0100
Subject: [PATCH 1/4] Add chromecast Google SDK

---
 index.html | 1 +
 1 file changed, 1 insertion(+)
diff --git a/index.html b/index.html
index 65bfd45c..25c88a8a 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
     <title>Swing Music</title>
     <base href="./" />
+    <script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1" onload="console.log('Cast SDK loaded')" onerror="console.error('Cast SDK failed to load')"></script>
   </head>
   <body>
     <noscript>

From d65fe13a925ea6c5d60fd5bef1ce1b233bc1f473 Mon Sep 17 00:00:00 2001
From: Toche Camille <tochecamille@gmail.com>
Date: Mon, 27 Oct 2025 15:23:50 +0100
Subject: [PATCH 2/4] Add useCast.ts and cast button on bottom bar

---
 src/assets/icons/cast.svg          |   3 +
 src/components/BottomBar/Right.vue |  59 +++++++-
 src/composables/useCast.ts         | 207 +++++++++++++++++++++++++++++
 3 files changed, 267 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/icons/cast.svg
 create mode 100644 src/composables/useCast.ts

diff --git a/src/assets/icons/cast.svg b/src/assets/icons/cast.svg
new file mode 100644
index 00000000..73e22423
--- /dev/null
+++ b/src/assets/icons/cast.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1 18V21H4C4 19.34 2.66 18 1 18ZM1 14V16C3.76 16 6 18.24 6 21H8C8 17.13 4.87 14 1 14ZM1 10V12C5.97 12 10 16.03 10 21H12C12 14.92 7.07 10 1 10ZM21 3H3C1.9 3 1 3.9 1 5V8H3V5H21V19H14V21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/BottomBar/Right.vue b/src/components/BottomBar/Right.vue
index 72f8f310..e6a6c35e 100644
--- a/src/components/BottomBar/Right.vue
+++ b/src/components/BottomBar/Right.vue
@@ -2,6 +2,18 @@
     <div class="right-group">
         <LyricsButton />
         <Volume />
+        <button
+            class="cast"
+            :class="{ 
+                'cast-connected': cast.isConnected, 
+                'cast-connecting': cast.isConnecting,
+                'cast-disabled': !cast.isSupported
+            }"
+            :title="!cast.isSupported ? 'Cast SDK loading...' : cast.isConnected ? 'Disconnect from cast device' : cast.isConnecting ? 'Connecting...' : 'Cast to device'"
+            @click="cast.toggleCast"
+        >
+            <CastSvg />
+        </button>
         <button
             class="repeat"
             :class="{ 'repeat-disabled': settings.repeat == 'none' }"
@@ -24,18 +36,26 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
 import useQueue from '@/stores/queue'
 import useSettings from '@/stores/settings'
+import useCast from '@/composables/useCast'
 
 import RepeatOneSvg from '@/assets/icons/repeat-one.svg'
 import RepeatAllSvg from '@/assets/icons/repeat.svg'
 import ShuffleSvg from '@/assets/icons/shuffle.svg'
+import CastSvg from '@/assets/icons/cast.svg'
 import HeartSvg from '../shared/HeartSvg.vue'
 import LyricsButton from '../shared/LyricsButton.vue'
 import Volume from './Volume.vue'
 
 const queue = useQueue()
 const settings = useSettings()
+const cast = useCast()
+
+onMounted(() => {
+    cast.initCast()
+})
 
 defineProps<{
     hideHeart?: boolean
@@ -50,7 +70,7 @@ defineEmits<{
 .right-group {
     display: grid;
     justify-content: flex-end;
-    grid-template-columns: repeat(5, max-content);
+    grid-template-columns: repeat(6, max-content);
     align-items: center;
     height: 4rem;
 
@@ -72,7 +92,8 @@ defineEmits<{
     }
 
     .lyrics,
-    .repeat {
+    .repeat,
+    .cast {
         svg {
             transform: scale(0.75);
         }
@@ -82,6 +103,40 @@ defineEmits<{
         }
     }
 
+    .cast {
+        &.cast-connected {
+            background-color: $primary !important;
+            border-color: $primary !important;
+            
+            svg {
+                color: white;
+            }
+
+            &:hover {
+                background-color: $primary !important;
+                border-color: $primary !important;
+                opacity: 0.8;
+            }
+        }
+
+        &.cast-connecting {
+            svg {
+                opacity: 0.7;
+            }
+        }
+
+        &.cast-disabled {
+            svg {
+                opacity: 0.3;
+            }
+            
+            &:hover {
+                background-color: transparent !important;
+                border-color: transparent !important;
+            }
+        }
+    }
+
     button.repeat.repeat-disabled {
         svg {
             opacity: 0.25;
diff --git a/src/composables/useCast.ts b/src/composables/useCast.ts
new file mode 100644
index 00000000..f9c05273
--- /dev/null
+++ b/src/composables/useCast.ts
@@ -0,0 +1,207 @@
+import { ref, computed } from 'vue'
+import useQueueStore from '@/stores/queue'
+import { useToast, NotifType } from '@/stores/notification'
+import { paths } from '@/config'
+
+const isConnected = ref(false)
+const isConnecting = ref(false)
+const castSession = ref<cast.framework.CastSession | null>(null)
+
+export default function useCast() {
+    const queue = useQueueStore()
+    const toast = useToast()
+
+    const isSupported = computed(() => {
+        const supported = typeof window !== 'undefined' && 'cast' in window && 'framework' in window.cast
+        console.log('Cast support check:', {
+            hasWindow: typeof window !== 'undefined',
+            hasCast: typeof window !== 'undefined' && 'cast' in window,
+            hasFramework: typeof window !== 'undefined' && 'cast' in window && 'framework' in window.cast,
+            supported
+        })
+        return supported
+    })
+
+    const canCast = computed(() => {
+        return isSupported.value && queue.currenttrack && !isConnecting.value
+    })
+
+    function initCast() {
+        console.log('initCast called, isSupported:', isSupported.value)
+        
+        // Always set up the API availability callback first
+        window['__onGCastApiAvailable'] = (isAvailable: boolean) => {
+            console.log('Cast API available callback:', isAvailable)
+            if (isAvailable) {
+                console.log('Cast API is now available, initializing...')
+                initializeCastApi()
+            } else {
+                console.log('Cast API not available')
+            }
+        }
+
+        // Try to load Cast SDK if it's not already loaded
+        if (!window.cast) {
+            console.log('Cast SDK not found, attempting to load dynamically...')
+            loadCastSDK()
+        } else if (window.cast && window.cast.framework) {
+            console.log('Cast supported, initializing immediately')
+            initializeCastApi()
+        }
+    }
+
+    function loadCastSDK() {
+        // Check if script already exists
+        if (document.querySelector('script[src*="cast_sender.js"]')) {
+            console.log('Cast SDK script already exists')
+            return
+        }
+
+        console.log('Loading Cast SDK dynamically...')
+        const script = document.createElement('script')
+        script.src = 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1'
+        script.onload = () => {
+            console.log('Cast SDK loaded dynamically')
+        }
+        script.onerror = () => {
+            console.error('Failed to load Cast SDK dynamically')
+            toast.showNotification('Cast SDK failed to load. Check your internet connection.', NotifType.Error)
+        }
+        document.head.appendChild(script)
+    }
+
+    function initializeCastApi() {
+        console.log('initializeCastApi called')
+        try {
+            const context = cast.framework.CastContext.getInstance()
+            console.log('CastContext obtained:', context)
+            
+            context.setOptions({
+                receiverApplicationId: cast.framework.CastContext.DEFAULT_MEDIA_RECEIVER_APP_ID,
+                autoJoinPolicy: cast.framework.AutoJoinPolicy.ORIGIN_SCOPED
+            })
+            console.log('Cast options set')
+
+            context.addEventListener(cast.framework.CastContextEventType.CAST_STATE_CHANGED, (event) => {
+                console.log('Cast state changed:', event.castState)
+                switch (event.castState) {
+                    case cast.framework.CastState.CONNECTED:
+                        isConnected.value = true
+                        isConnecting.value = false
+                        castSession.value = context.getCurrentSession()
+                        toast.showNotification('Connected to cast device', NotifType.Success)
+                        break
+                    case cast.framework.CastState.CONNECTING:
+                        isConnecting.value = true
+                        break
+                    case cast.framework.CastState.NOT_CONNECTED:
+                        isConnected.value = false
+                        isConnecting.value = false
+                        castSession.value = null
+                        break
+                }
+            })
+            console.log('Cast event listeners added')
+        } catch (error) {
+            console.error('Failed to initialize Cast API:', error)
+        }
+    }
+
+    async function startCasting() {
+        console.log('startCasting called')
+        console.log('canCast:', canCast.value, 'window.cast:', !!window.cast)
+        
+        if (!canCast.value || !window.cast) {
+            console.log('Cannot cast - either not supported or no current track')
+            toast.showNotification('Cast not available', NotifType.Info)
+            return
+        }
+
+        try {
+            console.log('Requesting cast session...')
+            const context = cast.framework.CastContext.getInstance()
+            await context.requestSession()
+            console.log('Cast session requested successfully')
+            
+            // Load current track
+            if (queue.currenttrack && castSession.value) {
+                console.log('Loading current track to cast device')
+                loadCurrentTrack()
+            }
+        } catch (error) {
+            isConnecting.value = false
+            console.error('Cast request failed:', error)
+            if (error.code === 'cancel') {
+                console.log('User cancelled cast request')
+                return
+            }
+            toast.showNotification('No cast devices found on your network', NotifType.Info)
+        }
+    }
+
+    function loadCurrentTrack() {
+        if (!castSession.value || !queue.currenttrack) return
+
+        const track = queue.currenttrack
+        const mediaInfo = new chrome.cast.media.MediaInfo(
+            `${paths.api.files}/${track.trackhash}?filepath=${encodeURIComponent(track.filepath)}`,
+            'audio/mpeg'
+        )
+
+        mediaInfo.metadata = new chrome.cast.media.MusicTrackMediaMetadata()
+        mediaInfo.metadata.title = track.title
+        mediaInfo.metadata.artist = track.artists.map(a => a.name).join(', ')
+        mediaInfo.metadata.albumName = track.album
+        
+        if (track.image) {
+            mediaInfo.metadata.images = [{
+                url: paths.images.thumb.medium + track.image
+            }]
+        }
+
+        const request = new chrome.cast.media.LoadRequest(mediaInfo)
+        request.autoplay = queue.playing
+
+        castSession.value.loadMedia(request)
+            .then(() => {
+                console.log('Media loaded successfully')
+            })
+            .catch((error) => {
+                toast.showNotification('Failed to load media on cast device', NotifType.Error)
+                console.error('Failed to load media:', error)
+            })
+    }
+
+    function stopCasting() {
+        if (!castSession.value) return
+
+        try {
+            castSession.value.endSession(true)
+        } catch (error) {
+            console.warn('Failed to stop casting:', error)
+        }
+    }
+
+    function toggleCast() {
+        console.log('toggleCast clicked! isConnected:', isConnected.value)
+        if (isConnected.value) {
+            console.log('Stopping cast...')
+            stopCasting()
+        } else {
+            console.log('Starting cast...')
+            startCasting()
+        }
+    }
+
+    return {
+        isSupported,
+        canCast,
+        isConnected,
+        isConnecting,
+        initCast,
+        startCasting,
+        stopCasting,
+        toggleCast,
+        loadCurrentTrack
+    }
+}
\ No newline at end of file

From 01697e9fdac5b5673c6252b04247c056dfb2c05c Mon Sep 17 00:00:00 2001
From: Toche Camille <tochecamille@gmail.com>
Date: Mon, 27 Oct 2025 15:24:23 +0100
Subject: [PATCH 3/4] Declare cast namespace with types

---
 src/vite-env.d.ts | 63 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 323c78a6..b69ef4cf 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -5,3 +5,66 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+// Google Cast SDK types
+declare namespace cast {
+  namespace framework {
+    class CastContext {
+      static getInstance(): CastContext
+      setOptions(options: any): void
+      requestSession(): Promise<void>
+      getCurrentSession(): CastSession | null
+      addEventListener(type: string, listener: (event: any) => void): void
+      static readonly DEFAULT_MEDIA_RECEIVER_APP_ID: string
+    }
+    
+    class CastSession {
+      loadMedia(loadRequest: any): Promise<void>
+      endSession(stopCasting: boolean): void
+    }
+    
+    enum CastState {
+      NO_DEVICES_AVAILABLE = 'NO_DEVICES_AVAILABLE',
+      NOT_CONNECTED = 'NOT_CONNECTED',
+      CONNECTING = 'CONNECTING',
+      CONNECTED = 'CONNECTED'
+    }
+    
+    enum AutoJoinPolicy {
+      ORIGIN_SCOPED = 'ORIGIN_SCOPED'
+    }
+    
+    enum CastContextEventType {
+      CAST_STATE_CHANGED = 'caststatechanged'
+    }
+  }
+}
+
+declare namespace chrome.cast.media {
+  class MediaInfo {
+    constructor(contentId: string, contentType: string)
+    metadata: any
+  }
+  
+  class LoadRequest {
+    constructor(mediaInfo: MediaInfo)
+    autoplay: boolean
+  }
+  
+  class MusicTrackMediaMetadata {
+    title: string
+    artist: string
+    albumName: string
+    images: Array<{url: string}>
+  }
+}
+
+interface Window {
+  cast: typeof cast
+  chrome: {
+    cast: {
+      media: typeof chrome.cast.media
+    }
+  }
+  __onGCastApiAvailable: (isAvailable: boolean) => void
+}

From 7a0b48d2f17ac4d77d9008633d6ed21ba5f48dcf Mon Sep 17 00:00:00 2001
From: Toche Camille <tochecamille@gmail.com>
Date: Mon, 27 Oct 2025 16:41:43 +0100
Subject: [PATCH 4/4] Remove unused code

---
 src/components/BottomBar/Right.vue | 15 +++++++++------
 src/composables/useCast.ts         | 31 +++++++++---------------------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/components/BottomBar/Right.vue b/src/components/BottomBar/Right.vue
index e6a6c35e..e7b4289b 100644
--- a/src/components/BottomBar/Right.vue
+++ b/src/components/BottomBar/Right.vue
@@ -4,12 +4,15 @@
         <Volume />
         <button
             class="cast"
-            :class="{ 
-                'cast-connected': cast.isConnected, 
+            v-if='cast.canCast'
+            :class="{
+                'cast-connected': cast.isConnected,
                 'cast-connecting': cast.isConnecting,
-                'cast-disabled': !cast.isSupported
             }"
-            :title="!cast.isSupported ? 'Cast SDK loading...' : cast.isConnected ? 'Disconnect from cast device' : cast.isConnecting ? 'Connecting...' : 'Cast to device'"
+            :title="cast.isConnected
+              ? 'Disconnect from cast device'
+              : cast.isConnecting ? 'Connecting...' : 'Cast to device'
+            "
             @click="cast.toggleCast"
         >
             <CastSvg />
@@ -107,7 +110,7 @@ defineEmits<{
         &.cast-connected {
             background-color: $primary !important;
             border-color: $primary !important;
-            
+
             svg {
                 color: white;
             }
@@ -129,7 +132,7 @@ defineEmits<{
             svg {
                 opacity: 0.3;
             }
-            
+
             &:hover {
                 background-color: transparent !important;
                 border-color: transparent !important;
diff --git a/src/composables/useCast.ts b/src/composables/useCast.ts
index f9c05273..c9cb226e 100644
--- a/src/composables/useCast.ts
+++ b/src/composables/useCast.ts
@@ -28,7 +28,7 @@ export default function useCast() {
 
     function initCast() {
         console.log('initCast called, isSupported:', isSupported.value)
-        
+
         // Always set up the API availability callback first
         window['__onGCastApiAvailable'] = (isAvailable: boolean) => {
             console.log('Cast API available callback:', isAvailable)
@@ -57,17 +57,8 @@ export default function useCast() {
             return
         }
 
-        console.log('Loading Cast SDK dynamically...')
-        const script = document.createElement('script')
-        script.src = 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1'
-        script.onload = () => {
-            console.log('Cast SDK loaded dynamically')
-        }
-        script.onerror = () => {
-            console.error('Failed to load Cast SDK dynamically')
-            toast.showNotification('Cast SDK failed to load. Check your internet connection.', NotifType.Error)
-        }
-        document.head.appendChild(script)
+        console.error('Failed to load Cast SDK dynamically')
+        toast.showNotification('Cast SDK failed to load. Check your internet connection.', NotifType.Error)
     }
 
     function initializeCastApi() {
@@ -75,7 +66,7 @@ export default function useCast() {
         try {
             const context = cast.framework.CastContext.getInstance()
             console.log('CastContext obtained:', context)
-            
+
             context.setOptions({
                 receiverApplicationId: cast.framework.CastContext.DEFAULT_MEDIA_RECEIVER_APP_ID,
                 autoJoinPolicy: cast.framework.AutoJoinPolicy.ORIGIN_SCOPED
@@ -110,7 +101,7 @@ export default function useCast() {
     async function startCasting() {
         console.log('startCasting called')
         console.log('canCast:', canCast.value, 'window.cast:', !!window.cast)
-        
+
         if (!canCast.value || !window.cast) {
             console.log('Cannot cast - either not supported or no current track')
             toast.showNotification('Cast not available', NotifType.Info)
@@ -122,7 +113,7 @@ export default function useCast() {
             const context = cast.framework.CastContext.getInstance()
             await context.requestSession()
             console.log('Cast session requested successfully')
-            
+
             // Load current track
             if (queue.currenttrack && castSession.value) {
                 console.log('Loading current track to cast device')
@@ -152,7 +143,7 @@ export default function useCast() {
         mediaInfo.metadata.title = track.title
         mediaInfo.metadata.artist = track.artists.map(a => a.name).join(', ')
         mediaInfo.metadata.albumName = track.album
-        
+
         if (track.image) {
             mediaInfo.metadata.images = [{
                 url: paths.images.thumb.medium + track.image
@@ -194,14 +185,10 @@ export default function useCast() {
     }
 
     return {
-        isSupported,
         canCast,
         isConnected,
         isConnecting,
         initCast,
-        startCasting,
-        stopCasting,
-        toggleCast,
-        loadCurrentTrack
+        toggleCast
     }
-}
\ No newline at end of file
+}
