Add android graceful fallback to transcode & onPlaybackFailed event

components/app/AudioPlayer.vue

@@ -535,6 +535,12 @@ export default {
         this.$refs.dropdownMenu.closeMenu()
       }
     },
+    closePlayback() {
+      this.$store.commit('setPlayerItem', null)
+      this.showFullscreen = false
+      this.isEnded = false
+      this.playbackSession = null
+    },
     //
     // Listeners from audio AbsAudioPlayer
     //
@@ -586,16 +592,20 @@ export default {
     },
     onPlaybackClosed() {
       console.log('Received onPlaybackClosed evt')
-      this.$store.commit('setPlayerItem', null)
-      this.showFullscreen = false
-      this.isEnded = false
-      this.playbackSession = null
+      this.closePlayback()
+    },
+    onPlaybackFailed(data) {
+      console.log('Received onPlaybackFailed evt')
+      var errorMessage = data.value || 'Unknown Error'
+      this.$toast.error(`Playback Failed: ${errorMessage}`)
+      this.closePlayback()
     },
     async init() {
       this.useChapterTrack = await this.$localStore.getUseChapterTrack()
 
       this.onPlaybackSessionListener = AbsAudioPlayer.addListener('onPlaybackSession', this.onPlaybackSession)
       this.onPlaybackClosedListener = AbsAudioPlayer.addListener('onPlaybackClosed', this.onPlaybackClosed)
+      this.onPlaybackFailedListener = AbsAudioPlayer.addListener('onPlaybackFailed', this.onPlaybackFailed)
       this.onPlayingUpdateListener = AbsAudioPlayer.addListener('onPlayingUpdate', this.onPlayingUpdate)
       this.onMetadataListener = AbsAudioPlayer.addListener('onMetadata', this.onMetadata)
     }
@@ -615,6 +625,7 @@ export default {
     if (this.onMetadataListener) this.onMetadataListener.remove()
     if (this.onPlaybackSessionListener) this.onPlaybackSessionListener.remove()
     if (this.onPlaybackClosedListener) this.onPlaybackClosedListener.remove()
+    if (this.onPlaybackFailedListener) this.onPlaybackFailedListener.remove()
     clearInterval(this.playInterval)
   }
 }

components/covers/BookCover.vue

@@ -23,11 +23,11 @@
 
     <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div>
-        <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
+        <p class="text-center font-book truncate leading-none origin-center" style="color: rgb(247 223 187); font-size: 0.8rem" :style="{ transform: `scale(${sizeMultiplier})` }">{{ titleCleaned }}</p>
       </div>
     </div>
     <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-      <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
+      <p class="text-center font-book truncate leading-none origin-center" style="color: rgb(247 223 187); opacity: 0.75; font-size: 0.6rem" :style="{ transform: `scale(${sizeMultiplier})` }">{{ authorCleaned }}</p>
     </div>
   </div>
 </template>
@@ -123,7 +123,7 @@ export default {
       return !!this.media.coverPath || this.localCover || this.downloadCover
     },
     sizeMultiplier() {
-      var baseSize = this.squareAspectRatio ? 192 : 120
+      var baseSize = this.squareAspectRatio ? 128 : 96
       return this.width / baseSize
     },
     titleFontSize() {
@@ -133,7 +133,8 @@ export default {
       return 0.6 * this.sizeMultiplier
     },
     placeholderCoverPadding() {
-      return 0.8 * this.sizeMultiplier
+      if (this.sizeMultiplier < 0.5) return 0
+      return this.sizeMultiplier
     },
     authorBottom() {
       return 0.75 * this.sizeMultiplier