Add:iOS audio player

components/app/AudioPlayer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fixed top-0 bottom-0 left-0 right-0 z-50 pointer-events-none" :class="showFullscreen ? 'fullscreen' : ''">
+  <div class="fixed top-0 left-0 layout-wrapper right-0 z-50 pointer-events-none" :class="showFullscreen ? 'fullscreen' : ''">
     <div v-if="showFullscreen" class="w-full h-full z-10 bg-bg absolute top-0 left-0 pointer-events-auto">
       <div class="top-2 left-4 absolute cursor-pointer">
         <span class="material-icons text-5xl" @click="collapseFullscreen">expand_more</span>
@@ -524,6 +524,7 @@ export default {
       this.streamId = stream ? stream.id : null
       this.audiobookId = audiobookStreamData.audiobookId
       this.initObject = { ...audiobookStreamData }
+      console.log('[AudioPlayer] Set Audio Player', !!stream)
 
       var init = true
       if (!!stream) {
@@ -612,6 +613,7 @@ export default {
         var data = await MyNativeAudio.getCurrentTime()
         this.currentTime = Number((data.value / 1000).toFixed(2))
         this.bufferedTime = Number((data.bufferedTime / 1000).toFixed(2))
+        console.log('[AudioPlayer] Got Current Time', this.currentTime)
         this.timeupdate()
       }, 1000)
     },

components/app/AudioPlayerContainer.vue

@@ -378,7 +378,7 @@ export default {
       console.log('[StreamContainer] Stream Open: ' + this.title)
 
       if (!this.$refs.audioPlayer) {
-        console.error('No Audio Player Mini')
+        console.error('[StreamContainer] No Audio Player Mini')
         return
       }
 
@@ -406,7 +406,12 @@ export default {
         audiobookId: this.audiobookId,
         tracks: this.tracksForCast
       }
-
+      console.log('[StreamContainer] Set Audio Player', JSON.stringify(audiobookStreamData))
+      if (!this.$refs.audioPlayer) {
+        console.error('[StreamContainer] Invalid no audio player')
+      } else {
+        console.log('[StreamContainer] Has Audio Player Ref')
+      }
       this.$refs.audioPlayer.set(audiobookStreamData, stream, !this.stream)
 
       this.stream = stream

components/app/SideDrawer.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="fixed top-0 left-0 right-0 bottom-0 w-full h-full z-50 overflow-hidden pointer-events-none">
+  <div class="fixed top-0 left-0 right-0 layout-wrapper w-full z-50 overflow-hidden pointer-events-none">
     <div class="absolute top-0 left-0 w-full h-full bg-black transition-opacity duration-200" :class="show ? 'bg-opacity-60 pointer-events-auto' : 'bg-opacity-0'" @click="clickBackground" />
     <div class="absolute top-0 right-0 w-64 h-full bg-primary transform transition-transform py-6 pointer-events-auto" :class="show ? '' : 'translate-x-64'" @click.stop>
       <div class="px-6 mb-4">
         <p v-if="socketConnected" class="text-base">
-          Welcome, <strong>{{ username }}</strong>
+          Welcome,
+          <strong>{{ username }}</strong>
         </p>
       </div>
       <div class="w-full overflow-y-auto">

components/bookshelf/LazyBookshelf.vue

@@ -90,8 +90,9 @@ export default {
       return this.isCoverSquareAspectRatio ? 1 : 1.6
     },
     bookWidth() {
-      // var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
       var coverSize = 100
+      if (window.innerWidth <= 375) coverSize = 90
+
       if (this.isCoverSquareAspectRatio) return coverSize * 1.6
       return coverSize
     },

components/readers/ComicReader.vue

@@ -8,8 +8,8 @@
     <div v-show="showInfoMenu" v-click-outside="clickOutside" class="pagemenu absolute top-20 right-0 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-full" style="top: 72px">
       <div v-for="key in comicMetadataKeys" :key="key" class="w-full px-2 py-1">
         <p class="text-xs">
-          <strong>{{ key }}</strong
-          >: {{ comicMetadata[key] }}
+          <strong>{{ key }}</strong>
+          : {{ comicMetadata[key] }}
         </p>
       </div>
     </div>
@@ -210,10 +210,10 @@ export default {
 
 <style scoped>
 #comic-reader {
-  height: calc(100vh - 32px);
+  height: calc(100% - 32px);
 }
 .pagemenu {
-  max-height: calc(100vh - 80px);
+  max-height: calc(100% - 80px);
 }
 .comicimg {
   height: 100%;