Fix:iOS audio player cutting off timestamps #173

android/app/src/main/java/com/audiobookshelf/app/data/LocalLibraryItem.kt

@@ -1,5 +1,6 @@
 package com.audiobookshelf.app.data
 
+import android.content.Context
 import android.net.Uri
 import android.support.v4.media.MediaMetadataCompat
 import android.util.Log
@@ -44,7 +45,7 @@ data class LocalLibraryItem(
   @JsonIgnore
   fun getDuration():Double {
     var total = 0.0
-    var audioTracks = media.getAudioTracks()
+    val audioTracks = media.getAudioTracks()
     audioTracks.forEach{ total += it.duration }
     return total
   }
@@ -94,15 +95,17 @@ data class LocalLibraryItem(
   }
 
   @JsonIgnore
-  fun getMediaMetadata(): MediaMetadataCompat {
+  fun getMediaMetadata(ctx: Context): MediaMetadataCompat {
+    val coverUri = getCoverUri()
+
     return MediaMetadataCompat.Builder().apply {
       putString(MediaMetadataCompat.METADATA_KEY_MEDIA_ID, id)
       putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_TITLE, title)
       putString(MediaMetadataCompat.METADATA_KEY_TITLE, title)
       putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_SUBTITLE, authorName)
-      putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_ICON_URI, getCoverUri().toString())
-      putString(MediaMetadataCompat.METADATA_KEY_ALBUM_ART_URI, getCoverUri().toString())
-      putString(MediaMetadataCompat.METADATA_KEY_ART_URI, getCoverUri().toString())
+      putString(MediaMetadataCompat.METADATA_KEY_DISPLAY_ICON_URI, coverUri.toString())
+      putString(MediaMetadataCompat.METADATA_KEY_ALBUM_ART_URI, coverUri.toString())
+      putString(MediaMetadataCompat.METADATA_KEY_ART_URI, coverUri.toString())
       putString(MediaMetadataCompat.METADATA_KEY_AUTHOR, authorName)
     }.build()
   }

android/app/src/main/java/com/audiobookshelf/app/media/MediaManager.kt

@@ -57,9 +57,9 @@ class MediaManager(var apiHandler: ApiHandler, var ctx: Context) {
 
   // TODO: Load currently listening category for local items
   fun loadLocalCategory():List<LibraryCategory> {
-    var localBooks = DeviceManager.dbManager.getLocalLibraryItems("book")
-    var localPodcasts = DeviceManager.dbManager.getLocalLibraryItems("podcast")
-    var cats = mutableListOf<LibraryCategory>()
+    val localBooks = DeviceManager.dbManager.getLocalLibraryItems("book")
+    val localPodcasts = DeviceManager.dbManager.getLocalLibraryItems("podcast")
+    val cats = mutableListOf<LibraryCategory>()
     if (localBooks.isNotEmpty()) {
       cats.add(LibraryCategory("local-books", "Local Books", "book", localBooks, true))
     }
@@ -71,9 +71,9 @@ class MediaManager(var apiHandler: ApiHandler, var ctx: Context) {
 
   fun loadAndroidAutoItems(libraryId:String, cb: (List<LibraryCategory>) -> Unit) {
     Log.d(tag, "Load android auto items for library id $libraryId")
-    var cats = mutableListOf<LibraryCategory>()
+    val cats = mutableListOf<LibraryCategory>()
 
-    var localCategories = loadLocalCategory()
+    val localCategories = loadLocalCategory()
     cats.addAll(localCategories)
 
     // Connected to server and has internet - load other cats
@@ -84,7 +84,7 @@ class MediaManager(var apiHandler: ApiHandler, var ctx: Context) {
       }
 
       loadLibraries { libraries ->
-        var library = libraries.find { it.id == libraryId } ?: libraries[0]
+        val library = libraries.find { it.id == libraryId } ?: libraries[0]
         Log.d(tag, "Loading categories for library ${library.name} - ${library.id} - ${library.mediaType}")
 
         loadLibraryCategories(libraryId) { libraryCategories ->
@@ -99,7 +99,7 @@ class MediaManager(var apiHandler: ApiHandler, var ctx: Context) {
           }
 
           loadLibraryItems(libraryId) { libraryItems ->
-            var mainCat = LibraryCategory("library", "Library", library.mediaType, libraryItems, false)
+            val mainCat = LibraryCategory("library", "Library", library.mediaType, libraryItems, false)
             cats.add(mainCat)
 
             cb(cats)
@@ -115,7 +115,7 @@ class MediaManager(var apiHandler: ApiHandler, var ctx: Context) {
     if (serverLibraryItems.isNotEmpty()) {
       return serverLibraryItems[0]
     } else {
-      var localBooks = DeviceManager.dbManager.getLocalLibraryItems("book")
+      val localBooks = DeviceManager.dbManager.getLocalLibraryItems("book")
       return if (localBooks.isNotEmpty()) return localBooks[0] else null
     }
   }
@@ -137,10 +137,10 @@ class MediaManager(var apiHandler: ApiHandler, var ctx: Context) {
 
   fun play(libraryItemWrapper:LibraryItemWrapper, mediaPlayer:String, cb: (PlaybackSession) -> Unit) {
    if (libraryItemWrapper is LocalLibraryItem) {
-    var localLibraryItem = libraryItemWrapper as LocalLibraryItem
+    val localLibraryItem = libraryItemWrapper as LocalLibraryItem
     cb(localLibraryItem.getPlaybackSession(null))
    } else {
-     var libraryItem = libraryItemWrapper as LibraryItem
+     val libraryItem = libraryItemWrapper as LibraryItem
      apiHandler.playLibraryItem(libraryItem.id,"",false, mediaPlayer) {
        cb(it)
      }

android/app/src/main/java/com/audiobookshelf/app/player/BrowseTree.kt

@@ -55,8 +55,8 @@ class BrowseTree(
 
     // Server continue Listening cat
     libraryCategories.find { it.id == "continue-listening" }?.let { continueListeningCategory ->
-      var continueListeningMediaMetadata = continueListeningCategory.entities.map { liw ->
-        var libraryItem = liw as LibraryItem
+      val continueListeningMediaMetadata = continueListeningCategory.entities.map { liw ->
+        val libraryItem = liw as LibraryItem
         libraryItem.getMediaMetadata()
       }
       if (continueListeningMediaMetadata.isNotEmpty()) {
@@ -74,8 +74,8 @@ class BrowseTree(
 
     // Server library cat
     libraryCategories.find { it.id == "library" }?.let { libraryCategory ->
-      var libraryMediaMetadata = libraryCategory.entities.map { libc ->
-        var libraryItem = libc as LibraryItem
+      val libraryMediaMetadata = libraryCategory.entities.map { libc ->
+        val libraryItem = libc as LibraryItem
         libraryItem.getMediaMetadata()
       }
       libraryMediaMetadata.forEach {
@@ -86,9 +86,9 @@ class BrowseTree(
     }
 
     libraryCategories.find { it.id == "local-books" }?.let { localBooksCat ->
-      var localMediaMetadata = localBooksCat.entities.map { libc ->
-        var libraryItem = libc as LocalLibraryItem
-        libraryItem.getMediaMetadata()
+      val localMediaMetadata = localBooksCat.entities.map { libc ->
+        val libraryItem = libc as LocalLibraryItem
+        libraryItem.getMediaMetadata(context)
       }
       localMediaMetadata.forEach {
         val children = mediaIdToChildren[DOWNLOADS_ROOT] ?: mutableListOf()

components/app/AudioPlayer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="playbackSession" id="streamContainer" class="fixed top-0 left-0 layout-wrapper right-0 z-50 pointer-events-none" :class="showFullscreen ? 'fullscreen' : ''">
+  <div v-if="playbackSession" id="streamContainer" class="playerContainer fixed top-0 left-0 layout-wrapper right-0 z-50 pointer-events-none" :class="{ fullscreen: showFullscreen, 'ios-player': $platform === 'ios', 'web-player': $platform === 'web' }">
     <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>
@@ -41,7 +41,7 @@
       <p class="author-text text-white text-opacity-75 truncate">by {{ authorName }}</p>
     </div>
 
-    <div id="streamContainer" class="w-full z-20 bg-primary absolute bottom-0 left-0 right-0 p-2 pointer-events-auto transition-all" @click="clickContainer">
+    <div id="playerContent" class="playerContainer w-full z-20 bg-primary absolute bottom-0 left-0 right-0 p-2 pointer-events-auto transition-all" @click="clickContainer">
       <div v-if="showFullscreen" class="absolute top-0 left-0 right-0 w-full py-3 mx-auto px-3" style="max-width: 380px">
         <div class="flex items-center justify-between pointer-events-auto">
           <span v-if="!isPodcast && !isLocalPlayMethod" class="material-icons text-3xl text-white text-opacity-75 cursor-pointer" @click="$emit('showBookmarks')">{{ bookmarks.length ? 'bookmark' : 'bookmark_border' }}</span>
@@ -79,7 +79,7 @@
           <div ref="bufferedTrack" class="h-full bg-gray-500 absolute top-0 left-0 pointer-events-none" />
           <div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none" />
         </div>
-        <div class="flex pt-0.5">
+        <div id="timestamp-row" class="flex pt-0.5">
           <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem" ref="currentTimestamp">0:00</p>
           <div class="flex-grow" />
           <p v-show="showFullscreen" class="text-sm truncate text-white text-opacity-75" style="max-width: 65%">{{ currentChapterTitle }}</p>
@@ -659,13 +659,15 @@ export default {
 .bookCoverWrapper {
   box-shadow: 3px -2px 5px #00000066;
 }
-#streamContainer {
-  box-shadow: 0px -8px 8px #11111155;
+.playerContainer {
   height: 100px;
 }
-.fullscreen #streamContainer {
+.fullscreen .playerContainer {
   height: 200px;
 }
+#playerContent {
+  box-shadow: 0px -8px 8px #11111155;
+}
 
 #playerTrack {
   transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
@@ -676,6 +678,11 @@ export default {
   margin-bottom: 18px;
 }
 
+.ios-player #timestamp-row {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
 .cover-wrapper {
   bottom: 44px;
   left: 12px;

package.json

@@ -3,7 +3,7 @@
   "version": "0.9.44-beta",
   "author": "advplyr",
   "scripts": {
-    "dev": "nuxt --hostname localhost --port 1337",
+    "dev": "nuxt --hostname 0.0.0.0 --port 1337",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
@@ -38,4 +38,4 @@
     "@nuxtjs/tailwindcss": "^4.2.0",
     "postcss": "^8.3.5"
   }
-}
+}

plugins/db.js

@@ -1,8 +1,5 @@
-import { Capacitor } from '@capacitor/core';
 import { AbsDatabase } from './capacitor/AbsDatabase'
 
-const isWeb = Capacitor.getPlatform() == 'web'
-
 class DbService {
   constructor() { }