Add chromecast support for android, update package versions

components/app/Appbar.vue

@@ -17,6 +17,10 @@
 
       <widgets-download-progress-indicator />
 
+      <div v-show="isCastAvailable" class="mx-2 cursor-pointer">
+        <span class="material-icons" :class="isCasting ? 'text-success' : ''" style="font-size: 1.75rem" @click="castClick">cast</span>
+      </div>
+
       <nuxt-link v-if="user" class="h-7 mx-2" to="/search">
         <span class="material-icons" style="font-size: 1.75rem">search</span>
       </nuxt-link>
@@ -29,9 +33,14 @@
 </template>
 
 <script>
+import { AbsAudioPlayer } from '@/plugins/capacitor'
+
 export default {
   data() {
-    return {}
+    return {
+      onCastAvailableUpdateListener: null,
+      isCastAvailable: false
+    }
   },
   computed: {
     socketConnected() {
@@ -55,9 +64,21 @@ export default {
     },
     username() {
       return this.user ? this.user.username : 'err'
+    },
+    isCasting() {
+      return this.$store.state.isCasting
     }
   },
   methods: {
+    castClick() {
+      if (this.$store.state.playerIsLocal) {
+        this.$toast.warn('Cannot cast downloaded media item')
+        return
+      }
+
+      console.log('Cast Btn Click')
+      AbsAudioPlayer.requestSession()
+    },
     clickShowSideDrawer() {
       this.$store.commit('setShowSideDrawer', true)
     },
@@ -66,9 +87,20 @@ export default {
     },
     back() {
       window.history.back()
+    },
+    onCastAvailableUpdate(data) {
+      this.isCastAvailable = data && data.value
     }
   },
-  mounted() {}
+  mounted() {
+    AbsAudioPlayer.getIsCastAvailable().then((data) => {
+      this.isCastAvailable = data && data.value
+    })
+    this.onCastAvailableUpdateListener = AbsAudioPlayer.addListener('onCastAvailableUpdate', this.onCastAvailableUpdate)
+  },
+  beforeDestroy() {
+    if (this.onCastAvailableUpdateListener) this.onCastAvailableUpdateListener.remove()
+  }
 }
 </script>
 

components/app/AudioPlayer.vue

@@ -5,7 +5,7 @@
         <span class="material-icons text-5xl" @click="collapseFullscreen">expand_more</span>
       </div>
       <div v-show="showCastBtn" class="top-3.5 right-20 absolute cursor-pointer">
-        <span class="material-icons text-3xl" @click="castClick">cast</span>
+        <span class="material-icons text-3xl" :class="isCasting ? 'text-success' : ''" @click="castClick">cast</span>
       </div>
       <div class="top-4 right-4 absolute cursor-pointer">
         <ui-dropdown-menu ref="dropdownMenu" :items="menuItems" @action="clickMenuAction">
@@ -109,7 +109,7 @@ export default {
     return {
       playbackSession: null,
       showChapterModal: false,
-      showCastBtn: false,
+      showCastBtn: true,
       showFullscreen: false,
       totalDuration: 0,
       currentPlaybackRate: 1,
@@ -159,6 +159,12 @@ export default {
       }
       return this.showFullscreen ? 200 : 60
     },
+    isCasting() {
+      return this.mediaPlayer === 'cast-player'
+    },
+    mediaPlayer() {
+      return this.playbackSession ? this.playbackSession.mediaPlayer : null
+    },
     mediaType() {
       return this.playbackSession ? this.playbackSession.mediaType : null
     },
@@ -262,6 +268,11 @@ export default {
     },
     castClick() {
       console.log('Cast Btn Click')
+      if (this.isLocalPlayMethod) {
+        this.$toast.warn('Cannot cast downloaded media items')
+        return
+      }
+
       AbsAudioPlayer.requestSession()
     },
     clickContainer() {

components/app/AudioPlayerContainer.vue

@@ -10,6 +10,7 @@
 
 <script>
 import { AbsAudioPlayer } from '@/plugins/capacitor'
+import { Dialog } from '@capacitor/dialog'
 
 export default {
   data() {
@@ -28,6 +29,7 @@ export default {
       onLocalMediaProgressUpdateListener: null,
       onSleepTimerEndedListener: null,
       onSleepTimerSetListener: null,
+      onMediaPlayerChangedListener: null,
       sleepInterval: null,
       currentEndOfChapterTime: 0
     }
@@ -169,6 +171,16 @@ export default {
       var libraryItemId = payload.libraryItemId
       var episodeId = payload.episodeId
 
+      if (libraryItemId.startsWith('local') && this.$store.state.isCasting) {
+        const { value } = await Dialog.confirm({
+          title: 'Warning',
+          message: `Cannot cast downloaded media items. Confirm to close cast and play on your device.`
+        })
+        if (!value) {
+          return
+        }
+      }
+
       console.log('Called playLibraryItem', libraryItemId)
       AbsAudioPlayer.prepareLibraryItem({ libraryItemId, episodeId, playWhenReady: true })
         .then((data) => {
@@ -186,12 +198,17 @@ export default {
     onLocalMediaProgressUpdate(localMediaProgress) {
       console.log('Got local media progress update', localMediaProgress.progress, JSON.stringify(localMediaProgress))
       this.$store.commit('globals/updateLocalMediaProgress', localMediaProgress)
+    },
+    onMediaPlayerChanged(data) {
+      var mediaPlayer = data.value
+      this.$store.commit('setMediaPlayer', mediaPlayer)
     }
   },
   mounted() {
     this.onLocalMediaProgressUpdateListener = AbsAudioPlayer.addListener('onLocalMediaProgressUpdate', this.onLocalMediaProgressUpdate)
     this.onSleepTimerEndedListener = AbsAudioPlayer.addListener('onSleepTimerEnded', this.onSleepTimerEnded)
     this.onSleepTimerSetListener = AbsAudioPlayer.addListener('onSleepTimerSet', this.onSleepTimerSet)
+    this.onMediaPlayerChangedListener = AbsAudioPlayer.addListener('onMediaPlayerChanged', this.onMediaPlayerChanged)
 
     this.playbackSpeed = this.$store.getters['user/getUserSetting']('playbackRate')
     console.log(`[AudioPlayerContainer] Init Playback Speed: ${this.playbackSpeed}`)
@@ -206,6 +223,7 @@ export default {
     if (this.onLocalMediaProgressUpdateListener) this.onLocalMediaProgressUpdateListener.remove()
     if (this.onSleepTimerEndedListener) this.onSleepTimerEndedListener.remove()
     if (this.onSleepTimerSetListener) this.onSleepTimerSetListener.remove()
+    if (this.onMediaPlayerChangedListener) this.onMediaPlayerChangedListener.remove()
 
     // if (this.$server.socket) {
     //   this.$server.socket.off('stream_open', this.streamOpen)

components/connection/ServerConnectForm.vue

@@ -14,7 +14,7 @@
           <ui-btn class="w-full" @click="newServerConfigClick">Add New Server</ui-btn>
         </div>
       </template>
-      <template v-else>
+      <div v-else class="w-full">
         <form v-show="!showAuth" @submit.prevent="submit" novalidate class="w-full">
           <h2 class="text-lg leading-7 mb-2">Server address</h2>
           <ui-text-input v-model="serverConfig.address" :disabled="processing || !networkConnected || serverConfig.id" placeholder="http://55.55.55.55:13378" type="url" class="w-full sm:w-72 h-10" />
@@ -44,12 +44,12 @@
             </div>
           </form>
         </template>
+      </div>
 
-        <div v-show="error" class="w-full rounded-lg bg-red-600 bg-opacity-10 border border-error border-opacity-50 py-3 px-2 flex items-center mt-4">
-          <span class="material-icons mr-2 text-error" style="font-size: 1.1rem">warning</span>
-          <p class="text-error">{{ error }}</p>
-        </div>
-      </template>
+      <div v-show="error" class="w-full rounded-lg bg-red-600 bg-opacity-10 border border-error border-opacity-50 py-3 px-2 flex items-center mt-4">
+        <span class="material-icons mr-2 text-error" style="font-size: 1.1rem">warning</span>
+        <p class="text-error">{{ error }}</p>
+      </div>
     </div>
 
     <div :class="processing ? 'opacity-100' : 'opacity-0 pointer-events-none'" class="fixed w-full h-full top-0 left-0 bg-black bg-opacity-75 flex items-center justify-center z-30 transition-opacity duration-500">
@@ -73,22 +73,6 @@ export default {
   data() {
     return {
       deviceData: null,
-      // serverConnectionConfigs: [
-      //   {
-      //     id: 'test1',
-      //     name: 'http://192.168.0.1:3333 (root)',
-      //     address: 'http://192.168.0.1:3333',
-      //     username: 'root',
-      //     token: 'asdf'
-      //   },
-      //   {
-      //     id: 'test2',
-      //     name: 'https://someserver.com (user)',
-      //     address: 'https://someserver.com',
-      //     username: 'user',
-      //     token: 'asdf'
-      //   }
-      // ],
       loggedIn: false,
       showAuth: false,
       processing: false,
@@ -128,18 +112,23 @@ export default {
       }
     },
     async connectToServer(config) {
+      console.log('[ServerConnectForm] connectToServer', config.address)
       this.processing = true
       this.serverConfig = {
         ...config
       }
       this.showForm = true
       var success = await this.pingServerAddress(config.address)
+      this.processing = false
+      console.log(`[ServerConnectForm] pingServer result ${success}`)
       if (!success) {
+        this.showForm = false
+        this.showAuth = false
+        console.log(`[ServerConnectForm] showForm ${this.showForm}`)
         return
       }
 
       this.error = null
-      this.processing = false
       var payload = await this.authenticateToken()
 
       if (payload) {
@@ -179,8 +168,14 @@ export default {
       console.log('Edit server config', serverConfig)
     },
     newServerConfigClick() {
+      this.serverConfig = {
+        address: '',
+        userId: '',
+        username: ''
+      }
       this.showForm = true
       this.showAuth = false
+      this.error = null
     },
     editServerAddress() {
       this.error = null