Merge branch 'master' into android_download_rewrite

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -12,6 +12,16 @@ body:
   - type: markdown
     attributes:
       value: 'Join the [discord server](https://discord.gg/HQgCbd6E75) for questions or if you are not sure about a bug.'
+  - type: dropdown
+    id: confirm-check
+    attributes:
+      label: I have verified that the [bug is not already awaiting release](https://github.com/advplyr/audiobookshelf-app/issues?q=is%3Aissue%20label%3A%22awaiting%20release%22)
+      multiple: false
+      options:
+        - 'Yes'
+        - 'No'
+    validations:
+      required: true
   - type: textarea
     id: what-happened
     attributes:
@@ -44,7 +54,7 @@ body:
     attributes:
       label: Phone Model
       description: What kind of phone are you using?
-      placeholder: e.g. Pixel 6, iPhone 14, Samusung Galaxy s23, etc
+      placeholder: e.g. Pixel 6, iPhone 14, Samsung Galaxy s23, etc
     validations:
       required: true
   - type: input
@@ -62,10 +72,10 @@ body:
       description: Please ensure your app is up to date. *If you are using a 3rd-party app, please reach out to them directly.*
       multiple: true
       options:
-        - Android App - 0.9.79
-        - iOS App - 0.9.79
-        - Android App - 0.9.78
-        - iOS App - 0.9.78
+        - 'Android App - 0.9.79'
+        - 'iOS App - 0.9.79'
+        - 'Android App - 0.9.78'
+        - 'iOS App - 0.9.78'
     validations:
       required: true
   - type: dropdown
@@ -74,10 +84,10 @@ body:
       label: Installation Source
       multiple: true
       options:
-        - Google Play Store
-        - Testflight
-        - SideStore
-        - Other (List in "Additional Notes")
+        - 'Google Play Store'
+        - 'Testflight'
+        - 'SideStore'
+        - 'Other (List in "Additional Notes")'
     validations:
       required: true
   - type: textarea

.github/workflows/build-apk.yml

@@ -25,7 +25,7 @@ jobs:
         uses: actions/setup-java@v2
         with:
           distribution: 'temurin'
-          java-version: 17
+          java-version: 21
 
       - name: install dependencies
         run: npm ci

.github/workflows/deploy-apk.yml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/setup-java@v2
         with:
           distribution: 'temurin'
-          java-version: 17
+          java-version: 21
 
       - name: install dependencies
         run: npm ci

android/app/build.gradle

@@ -36,8 +36,8 @@ android {
     applicationId "com.audiobookshelf.app"
     minSdkVersion rootProject.ext.minSdkVersion
     targetSdkVersion rootProject.ext.targetSdkVersion
-    versionCode 110
-    versionName "0.9.79-beta"
+    versionCode 111
+    versionName "0.9.80-beta"
     testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     manifestPlaceholders = [
       "appAuthRedirectScheme": "com.audiobookshelf.app"
@@ -86,7 +86,7 @@ dependencies {
   implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
   implementation project(':capacitor-android')
 
-  implementation 'androidx.constraintlayout:constraintlayout:2.2.0'
+  implementation 'androidx.constraintlayout:constraintlayout:2.2.1'
   implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
 
   implementation project(':capacitor-cordova-android-plugins')

android/app/capacitor.build.gradle

@@ -9,7 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-    implementation project(':byteowls-capacitor-filesharer')
+    implementation project(':webnativellc-capacitor-filesharer')
     implementation project(':capacitor-community-keep-awake')
     implementation project(':capacitor-community-volume-buttons')
     implementation project(':capacitor-app')

android/app/src/main/AndroidManifest.xml

@@ -51,7 +51,7 @@
 
         <activity
             android:name=".MainActivity"
-            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation"
             android:exported="true"
             android:label="@string/title_activity_main"
             android:launchMode="singleTask"

android/app/src/main/assets/capacitor.plugins.json

@@ -1,6 +1,6 @@
 [
 	{
-		"pkg": "@byteowls/capacitor-filesharer",
+		"pkg": "@webnativellc/capacitor-filesharer",
 		"classpath": "com.byteowls.capacitor.filesharer.FileSharerPlugin"
 	},
 	{

android/app/src/main/java/com/audiobookshelf/app/MainActivity.kt

@@ -18,6 +18,7 @@ import com.audiobookshelf.app.plugins.AbsAudioPlayer
 import com.audiobookshelf.app.plugins.AbsDatabase
 import com.audiobookshelf.app.plugins.AbsDownloader
 import com.audiobookshelf.app.plugins.AbsFileSystem
+import com.audiobookshelf.app.plugins.AbsLogger
 import com.getcapacitor.BridgeActivity
 
 
@@ -57,6 +58,7 @@ class MainActivity : BridgeActivity() {
     registerPlugin(AbsDownloader::class.java)
     registerPlugin(AbsFileSystem::class.java)
     registerPlugin(AbsDatabase::class.java)
+    registerPlugin(AbsLogger::class.java)
 
     super.onCreate(savedInstanceState)
     Log.d(tag, "onCreate")

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

@@ -150,6 +150,7 @@ data class DeviceSettings(
         var sleepTimerLength: Long, // Time in milliseconds
         var disableSleepTimerFadeOut: Boolean,
         var disableSleepTimerResetFeedback: Boolean,
+        var enableSleepTimerAlmostDoneChime: Boolean,
         var languageCode: String,
         var downloadUsingCellular: DownloadUsingCellularSetting,
         var streamingUsingCellular: StreamingUsingCellularSetting,
@@ -178,6 +179,7 @@ data class DeviceSettings(
               autoSleepTimerAutoRewindTime = 300000L, // 5 minutes
               disableSleepTimerFadeOut = false,
               disableSleepTimerResetFeedback = false,
+              enableSleepTimerAlmostDoneChime = false,
               languageCode = "en-us",
               downloadUsingCellular = DownloadUsingCellularSetting.ALWAYS,
               streamingUsingCellular = StreamingUsingCellularSetting.ALWAYS,
@@ -208,9 +210,9 @@ data class DeviceSettings(
 
   @JsonIgnore
   fun getShakeThresholdGravity(): Float { // Used in ShakeDetector
-    return if (shakeSensitivity == ShakeSensitivitySetting.VERY_HIGH) 1.2f
-    else if (shakeSensitivity == ShakeSensitivitySetting.HIGH) 1.4f
-    else if (shakeSensitivity == ShakeSensitivitySetting.MEDIUM) 1.6f
+    return if (shakeSensitivity == ShakeSensitivitySetting.VERY_HIGH) 1.1f
+    else if (shakeSensitivity == ShakeSensitivitySetting.HIGH) 1.3f
+    else if (shakeSensitivity == ShakeSensitivitySetting.MEDIUM) 1.5f
     else if (shakeSensitivity == ShakeSensitivitySetting.LOW) 2f
     else if (shakeSensitivity == ShakeSensitivitySetting.VERY_LOW) 2.7f
     else {

android/app/src/main/java/com/audiobookshelf/app/device/DeviceManager.kt

@@ -32,8 +32,9 @@ object DeviceManager {
   var deviceData: DeviceData = dbManager.getDeviceData()
   var serverConnectionConfig: ServerConnectionConfig? = null
 
-  val serverConnectionConfigId
-    get() = serverConnectionConfig?.id ?: ""
+  val serverConnectionConfigId get() = serverConnectionConfig?.id ?: ""
+  val serverConnectionConfigName get() = serverConnectionConfig?.name ?: ""
+  val serverConnectionConfigString get() = serverConnectionConfig?.name ?: "No server connection"
   val serverAddress
     get() = serverConnectionConfig?.address ?: ""
   val serverUserId
@@ -63,6 +64,10 @@ object DeviceManager {
     if (deviceData.deviceSettings?.autoSleepTimerAutoRewindTime == null) {
       deviceData.deviceSettings?.autoSleepTimerAutoRewindTime = 300000L // 5 minutes
     }
+    // Initialize sleep timer almost done chime added in v0.9.81
+    if (deviceData.deviceSettings?.enableSleepTimerAlmostDoneChime == null) {
+      deviceData.deviceSettings?.enableSleepTimerAlmostDoneChime = false
+    }
 
     // Language added in v0.9.69
     if (deviceData.deviceSettings?.languageCode == null) {

android/app/src/main/java/com/audiobookshelf/app/managers/DbManager.kt

@@ -4,6 +4,8 @@ import android.content.Context
 import android.util.Log
 import com.audiobookshelf.app.data.*
 import com.audiobookshelf.app.models.DownloadItem
+import com.audiobookshelf.app.plugins.AbsLog
+import com.audiobookshelf.app.plugins.AbsLogger
 import io.paperdb.Paper
 import java.io.File
 
@@ -287,4 +289,35 @@ class DbManager {
     }
     return sessions
   }
+
+  fun saveLog(log:AbsLog) {
+    Paper.book("log").write(log.id, log)
+  }
+  fun getAllLogs() : List<AbsLog> {
+    val logs:MutableList<AbsLog> = mutableListOf()
+    Paper.book("log").allKeys.forEach { logId ->
+      Paper.book("log").read<AbsLog>(logId)?.let {
+        logs.add(it)
+      }
+    }
+    return logs.sortedBy { it.timestamp }
+  }
+  fun removeAllLogs() {
+    Paper.book("log").destroy()
+  }
+  fun cleanLogs() {
+    val numberOfHoursToKeep = 48
+    val keepLogCutoff = System.currentTimeMillis() - (3600000 * numberOfHoursToKeep)
+    val allLogs = getAllLogs()
+    var logsRemoved = 0
+    allLogs.forEach {
+      if (it.timestamp < keepLogCutoff) {
+        Paper.book("log").delete(it.id)
+        logsRemoved++
+      }
+    }
+    if (logsRemoved > 0) {
+      AbsLogger.info("DbManager", "cleanLogs: Removed $logsRemoved logs older than $numberOfHoursToKeep hours")
+    }
+  }
 }

android/app/src/main/java/com/audiobookshelf/app/managers/SleepTimerManager.kt

@@ -1,15 +1,20 @@
 package com.audiobookshelf.app.managers
 
 import android.content.Context
+import android.media.MediaPlayer
 import android.os.*
 import android.util.Log
+import com.audiobookshelf.app.R
 import com.audiobookshelf.app.device.DeviceManager
 import com.audiobookshelf.app.player.PlayerNotificationService
 import com.audiobookshelf.app.player.SLEEP_TIMER_WAKE_UP_EXPIRATION
+import com.audiobookshelf.app.plugins.AbsLogger
 import java.util.*
 import kotlin.concurrent.schedule
 import kotlin.math.roundToInt
 
+const val SLEEP_TIMER_CHIME_SOUND_VOLUME = 0.7f
+
 class SleepTimerManager
 constructor(private val playerNotificationService: PlayerNotificationService) {
   private val tag = "SleepTimerManager"
@@ -156,6 +161,10 @@ constructor(private val playerNotificationService: PlayerNotificationService) {
                     )
                   }
 
+                  if (sleepTimeSecondsRemaining == 30 && sleepTimerElapsed > 1 && DeviceManager.deviceData.deviceSettings?.enableSleepTimerAlmostDoneChime == true) {
+                    playChimeSound()
+                  }
+
                   if (sleepTimeSecondsRemaining <= 0) {
                     Log.d(tag, "Sleep Timer Pausing Player on Chapter")
                     pause()
@@ -263,6 +272,18 @@ constructor(private val playerNotificationService: PlayerNotificationService) {
     }
   }
 
+  /** Plays chime sound */
+  private fun playChimeSound() {
+    AbsLogger.info(tag, "playChimeSound: Playing sleep timer chime sound")
+    val ctx = playerNotificationService.getContext()
+    val mediaPlayer = MediaPlayer.create(ctx, R.raw.bell)
+    mediaPlayer.setVolume(SLEEP_TIMER_CHIME_SOUND_VOLUME, SLEEP_TIMER_CHIME_SOUND_VOLUME)
+    mediaPlayer.start()
+    mediaPlayer.setOnCompletionListener {
+      mediaPlayer.release()
+    }
+  }
+
   /**
    * Gets the chapter end time for use in End of Chapter timers. If less than 10 seconds remain in
    * the chapter, then use the next chapter.

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

@@ -136,7 +136,6 @@ class MediaManager(private var apiHandler: ApiHandler, var ctx: Context) {
     val serverConnConfig = if (DeviceManager.isConnectedToServer) DeviceManager.serverConnectionConfig else DeviceManager.deviceData.getLastServerConnectionConfig()
 
     if (!DeviceManager.isConnectedToServer || !DeviceManager.checkConnectivity(ctx) || serverConnConfig == null || serverConnConfig.id !== serverConfigIdUsed) {
-      Log.d(tag, "Reset caches")
       podcastEpisodeLibraryItemMap = mutableMapOf()
       serverLibraries = listOf()
       serverLibraryItems = mutableListOf()

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

@@ -8,6 +8,7 @@ import com.audiobookshelf.app.data.MediaProgress
 import com.audiobookshelf.app.data.PlaybackSession
 import com.audiobookshelf.app.device.DeviceManager
 import com.audiobookshelf.app.player.PlayerNotificationService
+import com.audiobookshelf.app.plugins.AbsLogger
 import com.audiobookshelf.app.server.ApiHandler
 import java.util.*
 import kotlin.concurrent.schedule
@@ -208,6 +209,7 @@ class MediaProgressSyncer(
     MediaEventManager.seekEvent(currentPlaybackSession!!, null)
   }
 
+  // Currently unused
   fun syncFromServerProgress(mediaProgress: MediaProgress) {
     currentPlaybackSession?.let {
       it.updatedAt = mediaProgress.lastUpdate
@@ -260,44 +262,46 @@ class MediaProgressSyncer(
                 tag,
                 "Sync local device current serverConnectionConfigId=${DeviceManager.serverConnectionConfig?.id}"
         )
+        AbsLogger.info("MediaProgressSyncer", "sync: Saved local progress (title: \"$currentDisplayTitle\") (currentTime: $currentTime) (session id: ${it.id})")
 
         // Local library item is linked to a server library item
         // Send sync to server also if connected to this server and local item belongs to this
         // server
+        val isConnectedToSameServer = it.serverConnectionConfigId != null && DeviceManager.serverConnectionConfig?.id == it.serverConnectionConfigId
         if (hasNetworkConnection &&
                         shouldSyncServer &&
                         !it.libraryItemId.isNullOrEmpty() &&
-                        it.serverConnectionConfigId != null &&
-                        DeviceManager.serverConnectionConfig?.id == it.serverConnectionConfigId
+                        isConnectedToSameServer
         ) {
           apiHandler.sendLocalProgressSync(it) { syncSuccess, errorMsg ->
             if (syncSuccess) {
               failedSyncs = 0
               playerNotificationService.alertSyncSuccess()
               DeviceManager.dbManager.removePlaybackSession(it.id) // Remove session from db
+              AbsLogger.info("MediaProgressSyncer", "sync: Successfully synced local progress (title: \"$currentDisplayTitle\") (currentTime: $currentTime) (session id: ${it.id})")
             } else {
               failedSyncs++
               if (failedSyncs == 2) {
                 playerNotificationService.alertSyncFailing() // Show alert in client
                 failedSyncs = 0
               }
-              Log.e(
-                      tag,
-                      "Local Progress sync failed ($failedSyncs) to send to server $currentDisplayTitle for time $currentTime with session id=${it.id}"
-              )
+              AbsLogger.error("MediaProgressSyncer", "sync: Local progress sync failed (count: $failedSyncs) (title: \"$currentDisplayTitle\") (currentTime: $currentTime) (session id: ${it.id}) (${DeviceManager.serverConnectionConfigName})")
             }
 
             cb(SyncResult(true, syncSuccess, errorMsg))
           }
         } else {
+          AbsLogger.info("MediaProgressSyncer", "sync: Not sending local progress to server (title: \"$currentDisplayTitle\") (currentTime: $currentTime) (session id: ${it.id}) (hasNetworkConnection: $hasNetworkConnection) (isConnectedToSameServer: $isConnectedToSameServer)")
           cb(SyncResult(false, null, null))
         }
       }
     } else if (hasNetworkConnection && shouldSyncServer) {
-      Log.d(tag, "sync: currentSessionId=$currentSessionId")
+      AbsLogger.info("MediaProgressSyncer", "sync: Sending progress sync to server (title: \"$currentDisplayTitle\") (currentTime: $currentTime) (session id: ${currentSessionId}) (${DeviceManager.serverConnectionConfigName})")
+
       apiHandler.sendProgressSync(currentSessionId, syncData) { syncSuccess, errorMsg ->
         if (syncSuccess) {
-          Log.d(tag, "Progress sync data sent to server $currentDisplayTitle for time $currentTime")
+          AbsLogger.info("MediaProgressSyncer", "sync: Successfully synced progress (title: \"$currentDisplayTitle\") (currentTime: $currentTime) (session id: ${currentSessionId}) (${DeviceManager.serverConnectionConfigName})")
+
           failedSyncs = 0
           playerNotificationService.alertSyncSuccess()
           lastSyncTime = System.currentTimeMillis()
@@ -308,14 +312,12 @@ class MediaProgressSyncer(
             playerNotificationService.alertSyncFailing() // Show alert in client
             failedSyncs = 0
           }
-          Log.e(
-                  tag,
-                  "Progress sync failed ($failedSyncs) to send to server $currentDisplayTitle for time $currentTime with session id=${currentSessionId}"
-          )
+          AbsLogger.error("MediaProgressSyncer", "sync: Progress sync failed (count: $failedSyncs) (title: \"$currentDisplayTitle\") (currentTime: $currentTime) (session id: $currentSessionId) (${DeviceManager.serverConnectionConfigName})")
         }
         cb(SyncResult(true, syncSuccess, errorMsg))
       }
     } else {
+      AbsLogger.info("MediaProgressSyncer", "sync: Not sending progress to server (title: \"$currentDisplayTitle\") (currentTime: $currentTime) (session id: $currentSessionId) (${DeviceManager.serverConnectionConfigName}) (hasNetworkConnection: $hasNetworkConnection)")
       cb(SyncResult(false, null, null))
     }
   }

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

@@ -7,7 +7,6 @@ import android.net.Uri
 import android.os.Build
 import android.provider.MediaStore
 import android.support.v4.media.session.MediaControllerCompat
-import android.util.Log
 import com.audiobookshelf.app.BuildConfig
 import com.audiobookshelf.app.R
 import com.bumptech.glide.Glide
@@ -41,7 +40,6 @@ class AbMediaDescriptionAdapter constructor(private val controller: MediaControl
       // Cache the bitmap for the current audiobook so that successive calls to
       // `getCurrentLargeIcon` don't cause the bitmap to be recreated.
       currentIconUri = albumArtUri
-      Log.d(tag, "ART $currentIconUri")
 
       if (currentIconUri.toString().startsWith("content://")) {
         currentBitmap = if (Build.VERSION.SDK_INT < 28) {

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

@@ -8,7 +8,6 @@ import android.util.Log
 import android.view.KeyEvent
 import com.audiobookshelf.app.data.LibraryItemWrapper
 import com.audiobookshelf.app.data.PodcastEpisode
-import com.audiobookshelf.app.device.DeviceManager
 import java.util.*
 import kotlin.concurrent.schedule
 

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

@@ -4,14 +4,11 @@ import android.annotation.SuppressLint
 import android.app.*
 import android.content.Context
 import android.content.Intent
-import android.graphics.Bitmap
 import android.graphics.Color
-import android.graphics.ImageDecoder
 import android.hardware.Sensor
 import android.hardware.SensorManager
 import android.net.*
 import android.os.*
-import android.provider.MediaStore
 import android.provider.Settings
 import android.support.v4.media.MediaBrowserCompat
 import android.support.v4.media.MediaDescriptionCompat
@@ -36,6 +33,7 @@ import com.audiobookshelf.app.media.MediaManager
 import com.audiobookshelf.app.media.MediaProgressSyncer
 import com.audiobookshelf.app.media.getUriToAbsIconDrawable
 import com.audiobookshelf.app.media.getUriToDrawable
+import com.audiobookshelf.app.plugins.AbsLogger
 import com.audiobookshelf.app.server.ApiHandler
 import com.google.android.exoplayer2.*
 import com.google.android.exoplayer2.audio.AudioAttributes
@@ -310,19 +308,6 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
 
                 val coverUri = currentPlaybackSession!!.getCoverUri(ctx)
 
-                var bitmap: Bitmap? = null
-                //         Local covers get bitmap
-                if (currentPlaybackSession!!.localLibraryItem?.coverContentUrl != null) {
-                  bitmap =
-                          if (Build.VERSION.SDK_INT < 28) {
-                            MediaStore.Images.Media.getBitmap(ctx.contentResolver, coverUri)
-                          } else {
-                            val source: ImageDecoder.Source =
-                                    ImageDecoder.createSource(ctx.contentResolver, coverUri)
-                            ImageDecoder.decodeBitmap(source)
-                          }
-                }
-
                 // Fix for local images crashing on Android 11 for specific devices
                 // https://stackoverflow.com/questions/64186578/android-11-mediastyle-notification-crash/64232958#64232958
                 try {
@@ -346,8 +331,7 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
                                 .setExtras(extra)
                                 .setTitle(currentPlaybackSession!!.displayTitle)
 
-                bitmap?.let { mediaDescriptionBuilder.setIconBitmap(it) }
-                        ?: mediaDescriptionBuilder.setIconUri(coverUri)
+                mediaDescriptionBuilder.setIconUri(coverUri)
 
                 return mediaDescriptionBuilder.build()
               }
@@ -452,7 +436,7 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
             playbackSession
     ) // Save playback session to use when app is closed
 
-    Log.d(tag, "Set CurrentPlaybackSession MediaPlayer ${currentPlaybackSession?.mediaPlayer}")
+    AbsLogger.info("PlayerNotificationService", "preparePlayer: Started playback session for item ${currentPlaybackSession?.mediaItemId}. MediaPlayer ${currentPlaybackSession?.mediaPlayer}")
     // Notify client
     clientEventEmitter?.onPlaybackSession(playbackSession)
 
@@ -469,7 +453,7 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
       val mediaSource: MediaSource
 
       if (playbackSession.isLocal) {
-        Log.d(tag, "Playing Local Item")
+        AbsLogger.info("PlayerNotificationService", "preparePlayer: Playing local item ${currentPlaybackSession?.mediaItemId}.")
         val dataSourceFactory = DefaultDataSource.Factory(ctx)
 
         val extractorsFactory = DefaultExtractorsFactory()
@@ -483,7 +467,7 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
                 ProgressiveMediaSource.Factory(dataSourceFactory, extractorsFactory)
                         .createMediaSource(mediaItems[0])
       } else if (!playbackSession.isHLS) {
-        Log.d(tag, "Direct Playing Item")
+        AbsLogger.info("PlayerNotificationService", "preparePlayer: Direct playing item ${currentPlaybackSession?.mediaItemId}.")
         val dataSourceFactory = DefaultHttpDataSource.Factory()
 
         val extractorsFactory = DefaultExtractorsFactory()
@@ -498,7 +482,7 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
                 ProgressiveMediaSource.Factory(dataSourceFactory, extractorsFactory)
                         .createMediaSource(mediaItems[0])
       } else {
-        Log.d(tag, "Playing HLS Item")
+        AbsLogger.info("PlayerNotificationService", "preparePlayer: Playing HLS stream of item ${currentPlaybackSession?.mediaItemId}.")
         val dataSourceFactory = DefaultHttpDataSource.Factory()
         dataSourceFactory.setUserAgent(channelId)
         dataSourceFactory.setDefaultRequestProperties(
@@ -1105,11 +1089,12 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
       // No further calls will be made to other media browsing methods.
       null
     } else {
-      Log.d(tag, "Android Auto starting $clientPackageName $clientUid")
+      AbsLogger.info(tag, "onGetRoot: clientPackageName: $clientPackageName, clientUid: $clientUid")
       isStarted = true
 
       // Reset cache if no longer connected to server or server changed
       if (mediaManager.checkResetServerItems()) {
+        AbsLogger.info(tag, "onGetRoot: Reset Android Auto server items cache (${DeviceManager.serverConnectionConfigString})")
         forceReloadingAndroidAuto = true
       }
 
@@ -1134,7 +1119,7 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
           parentMediaId: String,
           result: Result<MutableList<MediaBrowserCompat.MediaItem>>
   ) {
-    Log.d(tag, "ON LOAD CHILDREN $parentMediaId")
+    AbsLogger.info(tag, "onLoadChildren: parentMediaId: $parentMediaId (${DeviceManager.serverConnectionConfigString})")
 
     result.detach()
 
@@ -1145,7 +1130,6 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
     }
 
     if (parentMediaId == DOWNLOADS_ROOT) { // Load downloads
-
       val localBooks = DeviceManager.dbManager.getLocalLibraryItems("book")
       val localPodcasts = DeviceManager.dbManager.getLocalLibraryItems("podcast")
       val localBrowseItems: MutableList<MediaBrowserCompat.MediaItem> = mutableListOf()
@@ -1242,8 +1226,10 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
       Log.d(tag, "Trying to initialize browseTree.")
       if (!this::browseTree.isInitialized || forceReloadingAndroidAuto) {
         forceReloadingAndroidAuto = false
+        AbsLogger.info(tag, "onLoadChildren: Loading Android Auto items")
         mediaManager.loadAndroidAutoItems {
-          Log.d(tag, "android auto loaded. Starting browseTree initialize")
+          AbsLogger.info(tag, "onLoadChildren: Loaded Android Auto data, initializing browseTree")
+
           browseTree =
                   BrowseTree(
                           this,
@@ -1259,15 +1245,21 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
                             MediaBrowserCompat.MediaItem.FLAG_BROWSABLE
                     )
                   }
-          Log.d(tag, "browseTree initialize and android auto loaded")
+
           result.sendResult(children as MutableList<MediaBrowserCompat.MediaItem>?)
           firstLoadDone = true
           if (mediaManager.serverLibraries.isNotEmpty()) {
-            Log.d(tag, "Starting personalization fetch")
-            mediaManager.populatePersonalizedDataForAllLibraries { notifyChildrenChanged("/") }
+            AbsLogger.info(tag, "onLoadChildren: Android Auto fetching personalized data for all libraries")
+            mediaManager.populatePersonalizedDataForAllLibraries {
+              AbsLogger.info(tag, "onLoadChildren: Android Auto loaded personalized data for all libraries")
+              notifyChildrenChanged("/")
+            }
 
-            Log.d(tag, "Initialize inprogress items")
-            mediaManager.initializeInProgressItems { notifyChildrenChanged("/") }
+            AbsLogger.info(tag, "onLoadChildren: Android Auto fetching in progress items")
+            mediaManager.initializeInProgressItems {
+              AbsLogger.info(tag, "onLoadChildren: Android Auto loaded in progress items")
+              notifyChildrenChanged("/")
+            }
           }
         }
       } else {
@@ -1287,7 +1279,8 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
                           MediaBrowserCompat.MediaItem.FLAG_BROWSABLE
                   )
                 }
-        Log.d(tag, "browseTree initialize and android auto loaded")
+
+        AbsLogger.info(tag, "onLoadChildren: Android auto data loaded")
         result.sendResult(children as MutableList<MediaBrowserCompat.MediaItem>?)
       }
     } else if (parentMediaId == LIBRARIES_ROOT || parentMediaId == RECENTLY_ROOT) {

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

@@ -5,6 +5,7 @@ import android.hardware.SensorEvent
 import android.hardware.SensorEventListener
 import android.hardware.SensorManager
 import com.audiobookshelf.app.device.DeviceManager
+import com.audiobookshelf.app.plugins.AbsLogger
 import kotlin.math.sqrt
 
 class ShakeDetector : SensorEventListener {
@@ -46,6 +47,7 @@ class ShakeDetector : SensorEventListener {
         if (mShakeTimestamp + SHAKE_COUNT_RESET_TIME_MS < now) {
           mShakeCount = 0
         }
+        AbsLogger.info("ShakeDetector", "Device shake above threshold ($gForce > $shakeThreshold)")
         mShakeTimestamp = now
         mShakeCount++
         mListener!!.onShake(mShakeCount)

android/app/src/main/java/com/audiobookshelf/app/plugins/AbsAudioPlayer.kt

@@ -180,7 +180,8 @@ class AbsAudioPlayer : Plugin() {
     val playWhenReady = call.getBoolean("playWhenReady") == true
     val playbackRate = call.getFloat("playbackRate",1f) ?: 1f
     val startTimeOverride = call.getDouble("startTime")
-    Log.d(tag, "prepareLibraryItem lid=$libraryItemId, startTimeOverride=$startTimeOverride, playbackRate=$playbackRate")
+
+    AbsLogger.info("AbsAudioPlayer", "prepareLibraryItem: lid=$libraryItemId, startTimeOverride=$startTimeOverride, playbackRate=$playbackRate")
 
     if (libraryItemId.isEmpty()) {
       Log.e(tag, "Invalid call to play library item no library item id")

android/app/src/main/java/com/audiobookshelf/app/plugins/AbsDatabase.kt

@@ -36,6 +36,7 @@ class AbsDatabase : Plugin() {
 
     DeviceManager.dbManager.cleanLocalMediaProgress()
     DeviceManager.dbManager.cleanLocalLibraryItems()
+    DeviceManager.dbManager.cleanLogs()
   }
 
   @PluginMethod
@@ -220,12 +221,11 @@ class AbsDatabase : Plugin() {
   @PluginMethod
   fun syncLocalSessionsWithServer(call:PluginCall) {
     if (DeviceManager.serverConnectionConfig == null) {
-      Log.e(tag, "syncLocalSessionsWithServer not connected to server")
+      AbsLogger.error("AbsDatabase", "syncLocalSessionsWithServer: not connected to server")
       return call.resolve()
     }
 
     apiHandler.syncLocalMediaProgressForUser {
-      Log.d(tag, "Finished syncing local media progress for user")
       val savedSessions = DeviceManager.dbManager.getPlaybackSessions().filter { it.serverConnectionConfigId == DeviceManager.serverConnectionConfigId }
 
       if (savedSessions.isNotEmpty()) {
@@ -233,6 +233,7 @@ class AbsDatabase : Plugin() {
           if (!success) {
             call.resolve(JSObject("{\"error\":\"$errorMsg\"}"))
           } else {
+            AbsLogger.info("AbsDatabase", "syncLocalSessionsWithServer: Finished sending local playback sessions to server. Removing ${savedSessions.size} saved sessions.")
             // Remove all local sessions
             savedSessions.forEach {
               DeviceManager.dbManager.removePlaybackSession(it.id)
@@ -241,6 +242,7 @@ class AbsDatabase : Plugin() {
           }
         }
       } else {
+        AbsLogger.info("AbsDatabase", "syncLocalSessionsWithServer: No saved local playback sessions to send to server.")
         call.resolve()
       }
     }

android/app/src/main/java/com/audiobookshelf/app/plugins/AbsLogger.kt

@@ -0,0 +1,80 @@
+package com.audiobookshelf.app.plugins
+
+import android.util.Log
+import com.audiobookshelf.app.device.DeviceManager
+import com.fasterxml.jackson.core.json.JsonReadFeature
+import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper
+import com.getcapacitor.JSObject
+import com.getcapacitor.Plugin
+import com.getcapacitor.PluginCall
+import com.getcapacitor.PluginMethod
+import com.getcapacitor.annotation.CapacitorPlugin
+import java.util.UUID
+
+data class AbsLog(
+  var id:String,
+  var tag:String,
+  var level:String,
+  var message:String,
+  var timestamp:Long
+)
+
+data class AbsLogList(val value:List<AbsLog>)
+
+@CapacitorPlugin(name = "AbsLogger")
+class AbsLogger : Plugin() {
+  private var jacksonMapper = jacksonObjectMapper().enable(JsonReadFeature.ALLOW_UNESCAPED_CONTROL_CHARS.mappedFeature())
+
+  override fun load() {
+    onLogEmitter = { log:AbsLog ->
+      notifyListeners("onLog", JSObject(jacksonMapper.writeValueAsString(log)))
+    }
+    info("AbsLogger", "load: AbsLogger plugin initialized")
+  }
+
+  companion object {
+    var onLogEmitter:((log:AbsLog) -> Unit)? = null
+
+    fun log(level:String, tag:String, message:String) {
+      val absLog = AbsLog(id = UUID.randomUUID().toString(), tag, level, message, timestamp = System.currentTimeMillis())
+      DeviceManager.dbManager.saveLog(absLog)
+      onLogEmitter?.let { it(absLog) }
+    }
+    fun info(tag:String, message:String) {
+      Log.i("AbsLogger", message)
+      log("info", tag, message)
+    }
+    fun error(tag:String, message:String) {
+      Log.e("AbsLogger", message)
+      log("error", tag, message)
+    }
+  }
+
+  @PluginMethod
+  fun info(call: PluginCall) {
+    val msg = call.getString("message") ?: return call.reject("No message")
+    val tag = call.getString("tag") ?: ""
+    info(tag, msg)
+    call.resolve()
+  }
+
+  @PluginMethod
+  fun error(call: PluginCall) {
+    val msg = call.getString("message") ?: return call.reject("No message")
+    val tag = call.getString("tag") ?: ""
+    error(tag, msg)
+    call.resolve()
+  }
+
+  @PluginMethod
+  fun getAllLogs(call: PluginCall) {
+    val absLogs = DeviceManager.dbManager.getAllLogs()
+    call.resolve(JSObject(jacksonMapper.writeValueAsString(AbsLogList(absLogs))))
+  }
+
+  @PluginMethod
+  fun clearLogs(call: PluginCall) {
+    DeviceManager.dbManager.removeAllLogs()
+    call.resolve()
+  }
+}

android/app/src/main/java/com/audiobookshelf/app/server/ApiHandler.kt

@@ -13,6 +13,7 @@ import com.audiobookshelf.app.media.MediaProgressSyncData
 import com.audiobookshelf.app.media.SyncResult
 import com.audiobookshelf.app.models.User
 import com.audiobookshelf.app.BuildConfig
+import com.audiobookshelf.app.plugins.AbsLogger
 import com.fasterxml.jackson.annotation.JsonIgnoreProperties
 import com.fasterxml.jackson.core.json.JsonReadFeature
 import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper
@@ -468,22 +469,27 @@ class ApiHandler(var ctx:Context) {
     val deviceInfo = DeviceInfo(deviceId, Build.MANUFACTURER, Build.MODEL, Build.VERSION.SDK_INT, BuildConfig.VERSION_NAME)
 
     val payload = JSObject(jacksonMapper.writeValueAsString(LocalSessionsSyncRequestPayload(playbackSessions, deviceInfo)))
-    Log.d(tag, "Sending ${playbackSessions.size} saved local playback sessions to server")
+    AbsLogger.info("ApiHandler", "sendSyncLocalSessions: Sending ${playbackSessions.size} saved local playback sessions to server (${DeviceManager.serverConnectionConfigName})")
+
     postRequest("/api/session/local-all", payload, null) {
       if (!it.getString("error").isNullOrEmpty()) {
-        Log.e(tag, "Failed to sync local sessions")
+        AbsLogger.error("ApiHandler", "sendSyncLocalSessions: Failed to sync local sessions. (${it.getString("error")})")
         cb(false, it.getString("error"))
       } else {
         val response = jacksonMapper.readValue<LocalSessionsSyncResponsePayload>(it.toString())
         response.results.forEach { localSessionSyncResult ->
           Log.d(tag, "Synced session result ${localSessionSyncResult.id}|${localSessionSyncResult.progressSynced}|${localSessionSyncResult.success}")
+
           playbackSessions.find { ps -> ps.id == localSessionSyncResult.id }?.let { session ->
             if (localSessionSyncResult.progressSynced == true) {
               val syncResult = SyncResult(true, true, "Progress synced on server")
               MediaEventManager.saveEvent(session, syncResult)
-              Log.i(tag, "Successfully synced session ${session.displayTitle} with server")
+
+              AbsLogger.info("ApiHandler", "sendSyncLocalSessions: Synced session \"${session.displayTitle}\" with server, server progress was updated for item ${session.mediaItemId}")
             } else if (!localSessionSyncResult.success) {
-              Log.e(tag, "Failed to sync session ${session.displayTitle} with server. Error: ${localSessionSyncResult.error}")
+              AbsLogger.error("ApiHandler", "sendSyncLocalSessions: Failed to sync session \"${session.displayTitle}\" with server. Error: ${localSessionSyncResult.error}")
+            } else {
+              AbsLogger.info("ApiHandler", "sendSyncLocalSessions: Synced session \"${session.displayTitle}\" with server. Server progress was up-to-date for item ${session.mediaItemId}")
             }
           }
         }
@@ -493,37 +499,72 @@ class ApiHandler(var ctx:Context) {
   }
 
   fun syncLocalMediaProgressForUser(cb: () -> Unit) {
+    AbsLogger.info("ApiHandler", "[ApiHandler] syncLocalMediaProgressForUser: Server connection ${DeviceManager.serverConnectionConfigName}")
+
     // Get all local media progress for this server
     val allLocalMediaProgress = DeviceManager.dbManager.getAllLocalMediaProgress().filter { it.serverConnectionConfigId == DeviceManager.serverConnectionConfigId }
     if (allLocalMediaProgress.isEmpty()) {
-      Log.d(tag, "No local media progress to sync")
+      AbsLogger.info("ApiHandler", "[ApiHandler] syncLocalMediaProgressForUser: No local media progress to sync")
       return cb()
     }
 
-    getCurrentUser { _user ->
-      _user?.let { user->
+    AbsLogger.info("ApiHandler", "syncLocalMediaProgressForUser: Found ${allLocalMediaProgress.size} local media progress")
+
+    getCurrentUser { user ->
+      if (user == null) {
+        AbsLogger.error("ApiHandler", "syncLocalMediaProgressForUser: Failed to load user from server (${DeviceManager.serverConnectionConfigName})")
+      } else {
+        var numLocalMediaProgressUptToDate = 0
+        var numLocalMediaProgressUpdated = 0
+
         // Compare server user progress with local progress
         user.mediaProgress.forEach { mediaProgress ->
           // Get matching local media progress
           allLocalMediaProgress.find { it.isMatch(mediaProgress) }?.let { localMediaProgress ->
             if (mediaProgress.lastUpdate > localMediaProgress.lastUpdate) {
-              Log.d(tag, "Server progress for media item id=\"${mediaProgress.mediaItemId}\" is more recent then local. Updating local current time ${localMediaProgress.currentTime} to ${mediaProgress.currentTime}")
+              val updateLogs = mutableListOf<String>()
+              if (mediaProgress.progress != localMediaProgress.progress) {
+                updateLogs.add("Updated progress from ${localMediaProgress.progress} to ${mediaProgress.progress}")
+              }
+              if (mediaProgress.currentTime != localMediaProgress.currentTime) {
+                updateLogs.add("Updated currentTime from ${localMediaProgress.currentTime} to ${mediaProgress.currentTime}")
+              }
+              if (mediaProgress.isFinished != localMediaProgress.isFinished) {
+                updateLogs.add("Updated isFinished from ${localMediaProgress.isFinished} to ${mediaProgress.isFinished}")
+              }
+              if (mediaProgress.ebookProgress != localMediaProgress.ebookProgress) {
+                updateLogs.add("Updated ebookProgress from ${localMediaProgress.isFinished} to ${mediaProgress.isFinished}")
+              }
+              if (updateLogs.isNotEmpty()) {
+                AbsLogger.info("ApiHandler", "syncLocalMediaProgressForUser: Server progress for item \"${mediaProgress.mediaItemId}\" is more recent than local (server lastUpdate=${mediaProgress.lastUpdate}, local lastUpdate=${localMediaProgress.lastUpdate}). ${updateLogs.joinToString()}")
+              }
+
               localMediaProgress.updateFromServerMediaProgress(mediaProgress)
-              MediaEventManager.syncEvent(mediaProgress, "Sync on server connection")
+
+              // Only report sync if progress changed
+              if (updateLogs.isNotEmpty()) {
+                MediaEventManager.syncEvent(mediaProgress, "Sync on server connection")
+              }
               DeviceManager.dbManager.saveLocalMediaProgress(localMediaProgress)
+              numLocalMediaProgressUpdated++
             } else if (localMediaProgress.lastUpdate > mediaProgress.lastUpdate && localMediaProgress.ebookLocation != null && localMediaProgress.ebookLocation != mediaProgress.ebookLocation) {
               // Patch ebook progress to server
+              AbsLogger.info("ApiHandler", "syncLocalMediaProgressForUser: Local progress for ebook item \"${mediaProgress.mediaItemId}\" is more recent than server progress. Local progress last updated ${localMediaProgress.lastUpdate}, server progress last updated ${mediaProgress.lastUpdate}. Sending server request to update ebook progress from ${mediaProgress.ebookProgress} to ${localMediaProgress.ebookProgress}")
               val endpoint = "/api/me/progress/${localMediaProgress.libraryItemId}"
               val updatePayload = JSObject()
               updatePayload.put("ebookLocation", localMediaProgress.ebookLocation)
               updatePayload.put("ebookProgress", localMediaProgress.ebookProgress)
               updatePayload.put("lastUpdate", localMediaProgress.lastUpdate)
               patchRequest(endpoint,updatePayload) {
-                Log.d(tag, "syncLocalMediaProgressForUser patched ebook progress")
+                AbsLogger.info("ApiHandler", "syncLocalMediaProgressForUser: Successfully updated server ebook progress for item item \"${mediaProgress.mediaItemId}\"")
               }
+            } else {
+              numLocalMediaProgressUptToDate++
             }
           }
         }
+
+        AbsLogger.info("ApiHandler", "syncLocalMediaProgressForUser: Finishing syncing local media progress with server. $numLocalMediaProgressUptToDate up-to-date, $numLocalMediaProgressUpdated updated")
       }
       cb()
     }

android/build.gradle

@@ -9,7 +9,7 @@ buildscript {
     }
     dependencies {
       classpath 'com.google.gms:google-services:4.4.2'
-      classpath 'com.android.tools.build:gradle:8.8.0'
+      classpath 'com.android.tools.build:gradle:8.8.2'
       classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
 
       // NOTE: Do not place your application dependencies here; they belong

android/capacitor.settings.gradle

@@ -2,8 +2,8 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
-include ':byteowls-capacitor-filesharer'
-project(':byteowls-capacitor-filesharer').projectDir = new File('../node_modules/@byteowls/capacitor-filesharer/android')
+include ':webnativellc-capacitor-filesharer'
+project(':webnativellc-capacitor-filesharer').projectDir = new File('../node_modules/@webnativellc/capacitor-filesharer/android')
 
 include ':capacitor-community-keep-awake'
 project(':capacitor-community-keep-awake').projectDir = new File('../node_modules/@capacitor-community/keep-awake/android')

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-all.zip
 networkTimeout=10000
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

android/variables.gradle

@@ -1,24 +1,24 @@
 ext {
     minSdkVersion = 24
     compileSdkVersion = 35
-    targetSdkVersion = 34
-    androidxActivityVersion = '1.8.0'
+    targetSdkVersion = 35
+    androidxActivityVersion = '1.9.2'
     androidxAppCompatVersion = '1.7.0'
-    androidxCoordinatorLayoutVersion = '1.2.0'
-    androidxCoreVersion = '1.12.0'
-    androidxFragmentVersion = '1.6.2'
+    androidxCoordinatorLayoutVersion = '1.3.0'
+    androidxCoreVersion = '1.15.0'
+    androidxFragmentVersion = '1.8.4'
     junitVersion = '4.13.2'
-    androidxJunitVersion = '1.1.5'
-    androidxEspressoCoreVersion = '3.5.1'
+    androidxJunitVersion = '1.2.1'
+    androidxEspressoCoreVersion = '3.6.1'
     cordovaAndroidVersion = '10.1.1'
-    androidx_core_ktx_version = '1.15.0'
+    androidx_core_ktx_version = '1.16.0'
     androidx_media_version = '1.7.0'
     exoplayer_version = '2.18.7'
-    glide_version = '4.11.0'
+    glide_version = '4.16.0'
     junit_version = '4.13.2'
     kotlin_version = '2.1.0'
     kotlin_coroutines_version = '1.10.1'
     test_runner_version = '1.1.0'
     coreSplashScreenVersion = '1.0.1'
-    androidxWebkitVersion = '1.9.0'
+    androidxWebkitVersion = '1.12.1'
 }

assets/fonts.css

@@ -1,19 +1,12 @@
 @font-face {
-  font-family: 'Material Icons';
+  font-family: 'Material Symbols Rounded';
   font-style: normal;
   font-weight: 400;
-  src: url(/fonts/MaterialIcons-Regular.ttf) format('truetype');
+  src: url(/fonts/MaterialSymbolsRounded.woff2) format('woff2');
 }
 
-@font-face {
-  font-family: 'Material Icons Outlined';
-  font-style: normal;
-  font-weight: 400;
-  src: url(/fonts/MaterialIconsOutlined-Regular.otf) format('opentype');
-}
-
-.material-icons {
-  font-family: 'Material Icons';
+.material-symbols {
+  font-family: 'Material Symbols Rounded';
   font-weight: normal;
   font-style: normal;
   line-height: 1;
@@ -24,31 +17,14 @@
   word-wrap: normal;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
+  vertical-align: top;
 }
 
-.material-icons:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
-  font-size: 1.5rem;
+.material-symbols.fill {
+  font-variation-settings:
+    'FILL' 1
 }
 
-.material-icons-outlined {
-  font-family: 'Material Icons Outlined';
-  font-weight: normal;
-  font-style: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-}
-
-.material-icons-outlined:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
-  font-size: 1.5rem;
-}
-
-
 /* cyrillic-ext */
 @font-face {
   font-family: 'Source Sans Pro';
@@ -317,4 +293,4 @@
   font-display: swap;
   src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
+}

components/app/Appbar.vue

@@ -5,9 +5,9 @@
         <img src="/Logo.png" class="h-10 w-10" />
       </nuxt-link>
       <a v-if="showBack" @click="back" class="rounded-full h-10 w-10 flex items-center justify-center mr-2 cursor-pointer">
-        <span class="material-icons text-3xl text-fg">arrow_back</span>
+        <span class="material-symbols text-3xl text-fg">arrow_back</span>
       </a>
-      <div v-if="user && currentLibrary && socketConnected">
+      <div v-if="user && currentLibrary">
         <div class="pl-1.5 pr-2.5 py-2 bg-bg bg-opacity-30 rounded-md flex items-center" @click="clickShowLibraryModal">
           <ui-library-icon :icon="currentLibraryIcon" :size="4" font-size="base" />
           <p class="text-sm leading-4 ml-2 mt-0.5 max-w-24 truncate">{{ currentLibraryName }}</p>
@@ -21,16 +21,18 @@
       <widgets-download-progress-indicator />
 
       <!-- Must be connected to a server to cast, only supports media items on server -->
-      <div v-show="isCastAvailable && user" class="mx-2 cursor-pointer flex items-center pt-0.5" @click="castClick">
-        <span class="material-icons">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
+      <div v-show="isCastAvailable && user" class="mx-2 cursor-pointer flex items-center" @click="castClick">
+        <span class="material-symbols text-2xl leading-none">
+          {{ isCasting ? 'cast_connected' : 'cast' }}
+        </span>
       </div>
 
-      <nuxt-link v-if="user" class="h-7 mx-1.5" style="padding-top: 3px" to="/search">
-        <span class="material-icons">search</span>
+      <nuxt-link v-if="user" class="mx-1.5 flex items-center h-10" to="/search">
+        <span class="material-symbols text-2xl leading-none">search</span>
       </nuxt-link>
 
       <div class="h-7 mx-1.5">
-        <span class="material-icons" style="font-size: 1.75rem" @click="clickShowSideDrawer">menu</span>
+        <span class="material-symbols" style="font-size: 1.75rem" @click="clickShowSideDrawer">menu</span>
       </div>
     </div>
   </div>
@@ -54,9 +56,6 @@ export default {
         this.$store.commit('setCastAvailable', val)
       }
     },
-    socketConnected() {
-      return this.$store.state.socketConnected
-    },
     currentLibrary() {
       return this.$store.getters['libraries/getCurrentLibrary']
     },

components/app/AudioPlayer.vue

@@ -4,13 +4,13 @@
       <div class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: var(--gradient-audio-player)" />
 
       <div class="top-4 left-4 absolute cursor-pointer">
-        <span class="material-icons text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="collapseFullscreen">expand_more</span>
+        <span class="material-symbols text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="collapseFullscreen">keyboard_arrow_down</span>
       </div>
       <div v-show="showCastBtn" class="top-6 right-16 absolute cursor-pointer">
-        <span class="material-icons text-3xl" :class="coverBgIsLight ? 'text-black' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
+        <span class="material-symbols text-3xl" :class="coverBgIsLight ? 'text-black' : ''" @click="castClick">{{ isCasting ? 'cast_connected' : 'cast' }}</span>
       </div>
       <div class="top-6 right-4 absolute cursor-pointer">
-        <span class="material-icons text-3xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="showMoreMenuDialog = true">more_vert</span>
+        <span class="material-symbols text-3xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="showMoreMenuDialog = true">more_vert</span>
       </div>
       <p class="top-4 absolute left-0 right-0 mx-auto text-center uppercase tracking-widest text-opacity-75" :class="{ 'text-black text-opacity-75': coverBgIsLight }" style="font-size: 10px">{{ isDirectPlayMethod ? $strings.LabelPlaybackDirect : isLocalPlayMethod ? $strings.LabelPlaybackLocal : $strings.LabelPlaybackTranscode }}</p>
     </div>
@@ -36,7 +36,7 @@
       </div>
 
       <div v-if="syncStatus === $constants.SyncStatus.FAILED" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-30" @click.stop="showSyncsFailedDialog">
-        <span class="material-icons text-error text-3xl">error</span>
+        <span class="material-symbols text-error text-3xl">error</span>
       </div>
     </div>
 
@@ -50,9 +50,9 @@
     <div id="playerContent" class="playerContainer w-full z-20 absolute bottom-0 left-0 right-0 p-2 pointer-events-auto transition-all" :style="{ backgroundColor: showFullscreen ? '' : coverRgb }" @click="clickContainer">
       <div v-if="showFullscreen" class="absolute bottom-4 left-0 right-0 w-full pb-4 pt-2 mx-auto px-6" style="max-width: 414px">
         <div class="flex items-center justify-between pointer-events-auto">
-          <span v-if="!isPodcast && serverLibraryItemId && socketConnected" class="material-icons text-3xl text-fg-muted cursor-pointer" @click="$emit('showBookmarks')">{{ bookmarks.length ? 'bookmark' : 'bookmark_border' }}</span>
+          <span v-if="!isPodcast && serverLibraryItemId && socketConnected" class="material-symbols text-3xl text-fg-muted cursor-pointer" :class="{ fill: bookmarks.length }" @click="$emit('showBookmarks')">bookmark</span>
           <!-- hidden for podcasts but still using this as a placeholder -->
-          <span v-else class="material-icons text-3xl text-white text-opacity-0">bookmark</span>
+          <span v-else class="material-symbols text-3xl text-white text-opacity-0">bookmark</span>
 
           <span class="font-mono text-fg-muted cursor-pointer" style="font-size: 1.35rem" @click="$emit('selectPlaybackSpeed')">{{ currentPlaybackRate }}x</span>
           <svg v-if="!sleepTimerRunning" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-fg-muted cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" @click.stop="$emit('showSleepTimer')">
@@ -62,23 +62,23 @@
             <p class="text-xl font-mono text-success">{{ sleepTimeRemainingPretty }}</p>
           </div>
 
-          <span class="material-icons text-3xl text-fg cursor-pointer" :class="chapters.length ? 'text-opacity-75' : 'text-opacity-10'" @click="clickChaptersBtn">format_list_bulleted</span>
+          <span class="material-symbols text-3xl text-fg cursor-pointer" :class="chapters.length ? 'text-opacity-75' : 'text-opacity-10'" @click="clickChaptersBtn">format_list_bulleted</span>
         </div>
       </div>
       <div v-else class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: var(--gradient-minimized-audio-player)" />
 
       <div id="playerControls" class="absolute right-0 bottom-0 mx-auto" style="max-width: 414px">
         <div class="flex items-center max-w-full" :class="playerSettings.lockUi ? 'justify-center' : 'justify-between'">
-          <span v-show="showFullscreen && !playerSettings.lockUi" class="material-icons next-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
-          <span v-show="!playerSettings.lockUi" class="material-icons jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">{{ jumpBackwardsIcon }}</span>
+          <span v-show="showFullscreen && !playerSettings.lockUi" class="material-symbols next-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
+          <span v-show="!playerSettings.lockUi" class="material-symbols jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">{{ jumpBackwardsIcon }}</span>
           <div class="play-btn cursor-pointer shadow-sm flex items-center justify-center rounded-full text-primary mx-4 relative overflow-hidden" :style="{ backgroundColor: coverRgb }" :class="{ 'animate-spin': seekLoading }" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
             <div v-if="!coverBgIsLight" class="absolute top-0 left-0 w-full h-full bg-white bg-opacity-20 pointer-events-none" />
 
-            <span v-if="!isLoading" class="material-icons" :class="{ 'text-white': coverRgb && !coverBgIsLight }">{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}</span>
+            <span v-if="!isLoading" class="material-symbols fill" :class="{ 'text-white': coverRgb && !coverBgIsLight }">{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}</span>
             <widgets-spinner-icon v-else class="h-8 w-8" />
           </div>
-          <span v-show="!playerSettings.lockUi" class="material-icons jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">{{ jumpForwardIcon }}</span>
-          <span v-show="showFullscreen && !playerSettings.lockUi" class="material-icons next-icon text-fg cursor-pointer" :class="nextChapter && !isLoading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
+          <span v-show="!playerSettings.lockUi" class="material-symbols jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">{{ jumpForwardIcon }}</span>
+          <span v-show="showFullscreen && !playerSettings.lockUi" class="material-symbols next-icon text-fg cursor-pointer" :class="nextChapter && !isLoading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
         </div>
       </div>
 
@@ -1106,7 +1106,7 @@ export default {
   min-height: 40px;
   margin: 0px 7px;
 }
-#playerControls .play-btn .material-icons {
+#playerControls .play-btn .material-symbols {
   transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
   transition-property: font-size;
 
@@ -1142,7 +1142,7 @@ export default {
   min-width: 65px;
   min-height: 65px;
 }
-.fullscreen #playerControls .play-btn .material-icons {
+.fullscreen #playerControls .play-btn .material-symbols {
   font-size: 2.1rem;
 }
 </style>

components/app/AudioPlayerContainer.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { AbsAudioPlayer } from '@/plugins/capacitor'
+import { AbsAudioPlayer, AbsLogger } from '@/plugins/capacitor'
 import { Dialog } from '@capacitor/dialog'
 import CellularPermissionHelpers from '@/mixins/cellularPermissionHelpers'
 
@@ -190,6 +190,7 @@ export default {
         })
     },
     async playLibraryItem(payload) {
+      await AbsLogger.info({ tag: 'AudioPlayerContainer', message: `playLibraryItem: Received play request for library item ${payload.libraryItemId} ${payload.episodeId ? `episode ${payload.episodeId}` : ''}` })
       const libraryItemId = payload.libraryItemId
       const episodeId = payload.episodeId
       const startTime = payload.startTime

components/app/SideDrawer.vue

@@ -12,11 +12,11 @@
       <div class="w-full overflow-y-auto">
         <template v-for="item in navItems">
           <button v-if="item.action" :key="item.text" class="w-full hover:bg-bg/60 flex items-center py-3 px-6 text-fg-muted" @click="clickAction(item.action)">
-            <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
+            <span class="material-symbols fill text-lg">{{ item.icon }}</span>
             <p class="pl-4">{{ item.text }}</p>
           </button>
           <nuxt-link v-else :to="item.to" :key="item.text" class="w-full hover:bg-bg/60 flex items-center py-3 px-6 text-fg" :class="currentRoutePath.startsWith(item.to) ? 'bg-bg-hover/50' : 'text-fg-muted'">
-            <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
+            <span class="material-symbols fill text-lg">{{ item.icon }}</span>
             <p class="pl-4">{{ item.text }}</p>
           </nuxt-link>
         </template>
@@ -30,7 +30,7 @@
           <div class="flex-grow" />
           <div v-if="user" class="flex items-center" @click="disconnect">
             <p class="text-xs pr-2">{{ $strings.ButtonDisconnect }}</p>
-            <i class="material-icons text-sm -mb-0.5">cloud_off</i>
+            <i class="material-symbols text-sm -mb-0.5">cloud_off</i>
           </div>
         </div>
       </div>
@@ -134,6 +134,15 @@ export default {
         to: '/settings'
       })
 
+      if (this.$platform !== 'ios') {
+        items.push({
+          icon: 'bug_report',
+          iconOutlined: true,
+          text: this.$strings.ButtonLogs,
+          to: '/logs'
+        })
+      }
+
       if (this.serverConnectionConfig) {
         items.push({
           icon: 'language',

components/bookshelf/LazyBookshelf.vue

@@ -105,8 +105,18 @@ export default {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     },
     bookWidth() {
-      var coverSize = 100
-      if (window.innerWidth <= 375) coverSize = 90
+      const availableWidth = window.innerWidth - 16
+      let coverSize = 100
+
+      // Smaller screens fill width with 2 items per row
+      if (availableWidth <= 400) {
+        coverSize = Math.floor(availableWidth / 2 - 24)
+        if (coverSize < 120) {
+          // Fallback to 1 item per row
+          coverSize = Math.min(availableWidth - 24, 200)
+        }
+        if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') coverSize /= 1.6
+      }
 
       if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return coverSize * 1.6
       return coverSize

components/cards/LazyBookCard.vue

@@ -43,14 +43,14 @@
 
       <div v-if="showPlayButton" class="absolute -bottom-16 -right-16 rotate-45 w-32 h-32 p-2 bg-gradient-to-r from-transparent to-black to-40% inline-flex justify-start items-center">
         <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto -rotate-45" @click.stop.prevent="play">
-          <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">{{ streamIsPlaying ? 'pause_circle' : 'play_circle_filled' }}</span>
+          <span class="material-symbols fill">{{ streamIsPlaying ? 'pause_circle' : 'play_circle' }}</span>
         </div>
       </div>
     </div>
 
     <!-- Play/pause button for podcast episode -->
     <div v-if="recentEpisode" class="absolute z-10 top-0 left-0 bottom-0 right-0 m-auto flex items-center justify-center w-12 h-12 rounded-full" :class="{ 'bg-white/70': !playerIsStartingForThisMedia }" @click.stop="playEpisode">
-      <span v-if="!playerIsStartingForThisMedia" class="material-icons text-6xl text-black/80">{{ streamIsPlaying ? 'pause_circle' : 'play_circle_filled' }}</span>
+      <span v-if="!playerIsStartingForThisMedia" class="material-symbols fill text-6xl text-black/80">{{ streamIsPlaying ? 'pause_circle' : 'play_circle' }}</span>
       <div v-else class="text-fg absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black/80 rounded-full overflow-hidden">
         <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
           <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
@@ -63,26 +63,26 @@
 
     <!-- Downloaded icon -->
     <div v-if="showHasLocalDownload" class="absolute right-0 top-0 z-20" :style="{ top: (isPodcast || (seriesSequence && showSequence) ? 1.75 : 0.375) * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-      <span class="material-icons text-2xl text-success">{{ 'download_done' }}</span>
+      <span class="material-symbols text-2xl text-success">download_done</span>
     </div>
 
     <!-- Error widget -->
     <div v-if="showError" :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300 absolute bottom-4 left-0 z-10">
-      <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
+      <span class="material-symbols text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
     </div>
 
     <!-- rss feed icon -->
     <div v-if="rssFeed" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }">
-      <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.5 + 'rem' }">rss_feed</span>
+      <span class="material-symbols" :style="{ fontSize: sizeMultiplier * 1.5 + 'rem' }">rss_feed</span>
     </div>
 
     <!-- Series sequence -->
-    <div v-if="seriesSequence && showSequence && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+    <div v-if="seriesSequence && showSequence && !isSelectionMode" class="absolute rounded-lg bg-black/90 text-white box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
       <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequence }}</p>
     </div>
 
     <!-- Podcast Episode # -->
-    <div v-if="recentEpisodeNumber !== null && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+    <div v-if="recentEpisodeNumber !== null && !isSelectionMode" class="absolute rounded-lg bg-black/90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
       <p class="text-white" :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">
         Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
       </p>

components/cards/LazyListBookCard.vue

@@ -31,7 +31,7 @@
       </div>
 
       <div v-if="localLibraryItem || isLocal" class="absolute top-0 right-0 z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-        <span class="material-icons text-2xl text-success">{{ 'download_done' }}</span>
+        <span class="material-symbols text-2xl text-success">download_done</span>
       </div>
     </div>
   </div>

components/cards/NarratorSearchCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-full px-1 overflow-hidden">
     <div class="w-10 h-10 flex items-center justify-center">
-      <span class="material-icons text-2xl text-gray-200">record_voice_over</span>
+      <span class="material-symbols text-2xl text-gray-200">record_voice_over</span>
     </div>
     <div class="flex-grow px-2 narratorSearchCardContent h-full">
       <p class="truncate text-sm">{{ narrator }}</p>
@@ -31,4 +31,4 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
-</style>
+</style>

components/cards/TagSearchCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-full px-1 overflow-hidden">
     <div class="w-10 h-10 flex items-center justify-center">
-      <span class="material-icons text-2xl text-fg">local_offer</span>
+      <span class="material-symbols fill text-2xl text-fg">sell</span>
     </div>
     <div class="flex-grow px-2 tagSearchCardContent h-full">
       <p class="truncate text-sm">{{ tag }}</p>
@@ -31,4 +31,4 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
-</style>
+</style>

components/connection/ServerConnectForm.vue

@@ -5,11 +5,11 @@
       <template v-if="!showForm">
         <div v-for="config in serverConnectionConfigs" :key="config.id" class="border-b border-fg/10 py-4">
           <div class="flex items-center my-1 relative" @click="connectToServer(config)">
-            <span class="material-icons-outlined text-xl text-fg-muted">dns</span>
+            <span class="material-symbols text-xl text-fg-muted">dns</span>
             <p class="pl-3 pr-6 text-base text-fg">{{ config.name }}</p>
 
             <div class="absolute top-0 right-0 h-full px-4 flex items-center" @click.stop="editServerConfig(config)">
-              <span class="material-icons text-lg text-fg-muted">more_vert</span>
+              <span class="material-symbols text-2xl text-fg-muted">more_vert</span>
             </div>
           </div>
           <!-- warning message if server connection config is using an old user id -->
@@ -27,7 +27,7 @@
         <!-- server address input -->
         <form v-if="!showAuth" @submit.prevent="submit" novalidate class="w-full">
           <div v-if="serverConnectionConfigs.length" class="flex items-center mb-4" @click="showServerList">
-            <span class="material-icons text-fg-muted">arrow_back</span>
+            <span class="material-symbols text-fg-muted">arrow_back</span>
           </div>
           <h2 class="text-lg leading-7 mb-2">{{ $strings.LabelServerAddress }}</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 h-10" />
@@ -38,13 +38,13 @@
         <!-- username/password and auth methods -->
         <template v-else>
           <div v-if="serverConfig.id" class="flex items-center mb-4" @click="showServerList">
-            <span class="material-icons text-fg-muted">arrow_back</span>
+            <span class="material-symbols text-fg-muted">arrow_back</span>
           </div>
 
           <div class="flex items-center">
             <p class="text-fg-muted">{{ serverConfig.address }}</p>
             <div class="flex-grow" />
-            <span v-if="!serverConfig.id" class="material-icons" style="font-size: 1.1rem" @click="editServerAddress">edit</span>
+            <span v-if="!serverConfig.id" class="material-symbols" style="font-size: 1.1rem" @click="editServerAddress">edit</span>
           </div>
           <div class="w-full h-px bg-fg/10 my-2" />
           <form v-if="isLocalAuthEnabled" @submit.prevent="submitAuth" class="pt-3">
@@ -64,7 +64,7 @@
 
       <!-- auth error message -->
       <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>
+        <span class="material-symbols mr-2 text-error" style="font-size: 1.1rem">warning</span>
         <p class="text-error">{{ error }}</p>
       </div>
     </div>

components/covers/PreviewCover.vue

@@ -7,7 +7,7 @@
       <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
 
       <a v-if="!imageFailed && showOpenNewTab && isHovering" :href="cover" @click.stop target="_blank" class="absolute bg-primary flex items-center justify-center shadow-sm rounded-full hover:scale-110 transform duration-100" :style="{ top: sizeMultiplier * 0.5 + 'rem', right: sizeMultiplier * 0.5 + 'rem', width: 2.5 * sizeMultiplier + 'rem', height: 2.5 * sizeMultiplier + 'rem' }">
-        <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
+        <span class="material-symbols" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
       </a>
     </div>
 
@@ -100,4 +100,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

components/home/BookshelfNavBar.vue

@@ -62,7 +62,7 @@ export default {
           items.push({
             to: '/bookshelf/add-podcast',
             routeName: 'bookshelf-add-podcast',
-            iconPack: 'material-icons',
+            iconPack: 'material-symbols',
             icon: 'podcasts',
             iconClass: 'text-xl',
             text: this.$strings.ButtonAdd
@@ -97,7 +97,7 @@ export default {
           {
             to: '/bookshelf/collections',
             routeName: 'bookshelf-collections',
-            iconPack: 'material-icons-outlined',
+            iconPack: 'material-symbols',
             icon: 'collections_bookmark',
             iconClass: 'text-xl',
             text: this.$strings.ButtonCollections
@@ -117,8 +117,9 @@ export default {
         items.push({
           to: '/bookshelf/playlists',
           routeName: 'bookshelf-playlists',
-          iconPack: 'material-icons',
+          iconPack: 'material-symbols',
           icon: 'queue_music',
+          iconClass: 'text-2xl',
           text: this.$strings.ButtonPlaylists
         })
       }
@@ -149,4 +150,4 @@ export default {
 #bookshelf-navbar a {
   font-size: 0.9rem;
 }
-</style>
+</style>

components/home/BookshelfToolbar.vue

@@ -5,16 +5,16 @@
         <p v-show="!selectedSeriesName" class="pt-1">{{ $formatNumber(totalEntities) }} {{ entityTitle }}</p>
         <p v-show="selectedSeriesName" class="ml-2 pt-1">{{ selectedSeriesName }} ({{ $formatNumber(totalEntities) }})</p>
         <div class="flex-grow" />
-        <span v-if="page == 'library' || seriesBookPage" class="material-icons px-2" @click="changeView">{{ !bookshelfListView ? 'view_list' : 'grid_view' }}</span>
+        <span v-if="page == 'library' || seriesBookPage" class="material-symbols text-2xl px-2" @click="changeView">{{ !bookshelfListView ? 'view_list' : 'grid_view' }}</span>
         <template v-if="page === 'library'">
           <div class="relative flex items-center px-2">
-            <span class="material-icons" @click="showFilterModal = true">filter_alt</span>
+            <span class="material-symbols text-2xl" @click="showFilterModal = true">filter_alt</span>
             <div v-show="hasFilters" class="absolute top-0 right-2 w-2 h-2 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
           </div>
-          <span class="material-icons px-2" @click="showSortModal = true">sort</span>
+          <span class="material-symbols text-2xl px-2" @click="showSortModal = true">sort</span>
         </template>
-        <span v-if="seriesBookPage" class="material-icons px-2" @click="downloadSeries">download</span>
-        <span v-if="(page == 'library' && isBookLibrary) || seriesBookPage" class="material-icons px-2" @click="showMoreMenuDialog = true">more_vert</span>
+        <span v-if="seriesBookPage" class="material-symbols text-2xl px-2" @click="downloadSeries">download</span>
+        <span v-if="(page == 'library' && isBookLibrary) || seriesBookPage" class="material-symbols text-2xl px-2" @click="showMoreMenuDialog = true">more_vert</span>
       </div>
     </div>
 

components/modals/AutoSleepTimerRewindLengthModal.vue

@@ -6,22 +6,25 @@
       </div>
     </template>
 
-    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="
+    <div
+      class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center"
+      @click="
         show = false
         manualTimerModal = false
-      ">
+      "
+    >
       <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
         <div v-if="manualTimerModal" class="p-4">
           <div class="flex mb-4" @click="manualTimerModal = false">
-            <span class="material-icons text-3xl">arrow_back</span>
+            <span class="material-symbols text-3xl">arrow_back</span>
           </div>
           <div class="flex my-2 justify-between">
             <ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px">
-              <span class="material-icons">remove</span>
+              <span class="material-symbols">remove</span>
             </ui-btn>
             <p class="text-2xl font-mono text-center">{{ manualTimeoutMin }} min</p>
             <ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px">
-              <span class="material-icons">add</span>
+              <span class="material-symbols">add</span>
             </ui-btn>
           </div>
           <ui-btn @click="clickedOption(manualTimeoutMin)" class="w-full">{{ $strings.ButtonSetTimer }}</ui-btn>

components/modals/BookmarksModal.vue

@@ -10,7 +10,7 @@
         <div class="w-full h-full p-4" v-if="showBookmarkTitleInput">
           <div class="flex mb-4 items-center">
             <div class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-white hover:bg-opacity-10 cursor-pointer" @click.stop="showBookmarkTitleInput = false">
-              <span class="material-icons text-3xl">arrow_back</span>
+              <span class="material-symbols text-3xl">arrow_back</span>
             </div>
             <p class="text-xl pl-2">{{ selectedBookmark ? 'Edit Bookmark' : 'New Bookmark' }}</p>
             <div class="flex-grow" />
@@ -31,7 +31,7 @@
           </div>
         </div>
         <div v-if="canCreateBookmark && !showBookmarkTitleInput" class="flex px-4 py-2 items-center text-center justify-between border-b border-fg/10 bg-success cursor-pointer text-white text-opacity-80 sticky bottom-0 left-0 w-full" @click.stop="createBookmark">
-          <span class="material-icons">add</span>
+          <span class="material-symbols">add</span>
           <p class="text-base pl-2">{{ $strings.ButtonCreateBookmark }}</p>
           <p class="text-sm font-mono">{{ this.$secondsToTimestamp(currentTime / _playbackRate) }}</p>
         </div>

components/modals/CustomHeadersModal.vue

@@ -25,7 +25,7 @@
               <p class="text-sm text-gray-400">{{ value }}</p>
 
               <div class="absolute top-0 bottom-0 right-0 h-full p-4 flex items-center justify-center text-error">
-                <button @click="removeHeader(key)"><span class="material-icons text-lg">delete</span></button>
+                <button @click="removeHeader(key)"><span class="material-symbols text-lg">delete</span></button>
               </div>
             </div>
           </template>

components/modals/Dialog.vue

@@ -13,7 +13,7 @@
             <slot :name="item.value" :item="item" :selected="item.value === selected">
               <li :key="item.value" :ref="`item-${item.value}`" class="text-fg select-none relative cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" :style="{ paddingTop: itemPaddingY, paddingBottom: itemPaddingY }" role="option" @click="clickedOption(item.value)">
                 <div class="relative flex items-center px-3">
-                  <span v-if="item.icon" class="material-icons-outlined text-xl mr-2 text-fg text-opacity-80">{{ item.icon }}</span>
+                  <span v-if="item.icon" class="material-symbols text-xl mr-2 text-fg text-opacity-80">{{ item.icon }}</span>
                   <p class="font-normal block truncate text-base text-fg text-opacity-80">{{ item.text }}</p>
                 </div>
               </li>

components/modals/FilterModal.vue

@@ -14,7 +14,7 @@
                 <span class="font-normal ml-3 block truncate text-lg">{{ item.text }}</span>
               </div>
               <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
-                <span class="material-icons text-2xl">arrow_right</span>
+                <span class="material-symbols text-2xl">arrow_right</span>
               </div>
             </li>
           </template>
@@ -22,7 +22,7 @@
         <ul v-show="sublist" class="h-full w-full rounded-lg" role="listbox" aria-labelledby="listbox-label">
           <li class="text-fg select-none relative py-3 pl-9 cursor-pointer" role="option" @click="sublist = null">
             <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
-              <span class="material-icons text-2xl">arrow_left</span>
+              <span class="material-symbols text-2xl">arrow_left</span>
             </div>
             <div class="flex items-center justify-between">
               <span class="font-normal ml-3 block truncate text-lg">{{ $strings.ButtonBack }}</span>

components/modals/Modal.vue

@@ -3,7 +3,7 @@
     <div class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-black to-transparent opacity-90 pointer-events-none" />
 
     <div class="absolute z-40 top-11 right-4 h-10 w-10 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
-      <span class="material-icons text-4xl">close</span>
+      <span class="material-symbols text-4xl">close</span>
     </div>
     <slot name="outer" />
     <div ref="content" style="min-height: 200px" class="relative text-fg max-h-screen" :style="{ height: modalHeight, width: modalWidth, maxWidth: maxWidth }" v-click-outside="clickBg">
@@ -110,4 +110,4 @@ export default {
     this.$eventBus.$off('close-modal', this.closeModalEvt)
   }
 }
-</script>
+</script>

components/modals/OrderModal.vue

@@ -8,7 +8,7 @@
               <span class="font-normal ml-3 block truncate text-lg">{{ item.text }}</span>
             </div>
             <span v-if="item.value === selected" class="text-yellow-300 absolute inset-y-0 right-0 flex items-center pr-4">
-              <span class="material-icons text-3xl">{{ descending ? 'south' : 'north' }}</span>
+              <span class="material-symbols text-3xl">{{ descending ? 'south' : 'north' }}</span>
             </span>
           </li>
         </template>
@@ -119,6 +119,10 @@ export default {
         {
           text: this.$strings.LabelEpisode,
           value: 'episode'
+        },
+        {
+          text: this.$strings.LabelFilename,
+          value: 'audioFile.metadata.filename'
         }
       ]
     }

components/modals/PlaybackSpeedModal.vue

@@ -19,13 +19,13 @@
         </ul>
         <div class="flex items-center justify-center py-3 border-t border-fg/10">
           <button :disabled="!canDecrement" @click="decrement" class="icon-num-btn w-8 h-8 text-fg-muted rounded border border-border flex items-center justify-center">
-            <span class="material-icons">remove</span>
+            <span class="material-symbols">remove</span>
           </button>
           <div class="w-24 text-center">
             <p class="text-xl">{{ playbackRate }}<span class="text-lg">⨯</span></p>
           </div>
           <button :disabled="!canIncrement" @click="increment" class="icon-num-btn w-8 h-8 text-fg-muted rounded border border-border flex items-center justify-center">
-            <span class="material-icons">add</span>
+            <span class="material-symbols">add</span>
           </button>
         </div>
       </div>
@@ -118,4 +118,4 @@ button.icon-num-btn:disabled::before {
 button.icon-num-btn:disabled span {
   color: #777;
 }
-</style>
+</style>

components/modals/PodcastEpisodesFeedModal.vue

@@ -10,7 +10,7 @@
         <template v-for="(episode, index) in episodes">
           <div :key="index" class="relative" :class="itemEpisodeMap[episode.enclosure.url] ? 'bg-primary bg-opacity-40' : selectedEpisodes[String(index)] ? 'bg-success bg-opacity-10' : index % 2 == 0 ? 'bg-primary bg-opacity-25' : 'bg-primary bg-opacity-5'" @click="selectEpisode(episode, index)">
             <div class="absolute top-0 left-0 h-full flex items-center p-2">
-              <span v-if="itemEpisodeMap[episode.enclosure.url]" class="material-icons text-success text-xl">download_done</span>
+              <span v-if="itemEpisodeMap[episode.enclosure.url]" class="material-symbols text-success text-xl">download_done</span>
               <ui-checkbox v-else v-model="selectedEpisodes[String(index)]" small checkbox-bg="primary" border-color="gray-600" />
             </div>
             <div class="pl-9 pr-2 py-2 border-b border-white border-opacity-10">
@@ -134,4 +134,4 @@ export default {
   max-height: calc(100vh - 150px);
   margin-top: 5px;
 }
-</style>
+</style>

components/modals/SelectLocalFolderModal.vue

@@ -7,13 +7,13 @@
     </template>
 
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
-      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-fg/20" style="max-height: 75%" @click.stop>
         <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="folder in localFolders">
-            <li :key="folder.id" :id="`folder-${folder.id}`" class="text-gray-50 select-none relative py-5" role="option" @click="clickedOption(folder)">
+            <li :key="folder.id" :id="`folder-${folder.id}`" class="text-fg select-none relative py-5" role="option" @click="clickedOption(folder)">
               <div class="relative flex items-center pl-3" style="padding-right: 4.5rem">
-                <span class="material-icons-outlined text-xl mr-2 text-white text-opacity-80">folder</span>
-                <p class="font-normal block truncate text-sm text-white text-opacity-80">{{ folder.name }}</p>
+                <span class="material-symbols text-xl mr-2 text-fg text-opacity-80">folder</span>
+                <p class="font-normal block truncate text-sm text-fg text-opacity-80">{{ folder.name }}</p>
               </div>
             </li>
           </template>

components/modals/SleepTimerLengthModal.vue

@@ -16,12 +16,12 @@
       <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
         <div v-if="manualTimerModal" class="p-4">
           <div class="flex mb-4" @click="manualTimerModal = false">
-            <span class="material-icons text-3xl">arrow_back</span>
+            <span class="material-symbols text-3xl">arrow_back</span>
           </div>
           <div class="flex my-2 justify-between">
-            <ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">remove</span></ui-btn>
+            <ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols">remove</span></ui-btn>
             <p class="text-2xl font-mono text-center">{{ manualTimeoutMin }} min</p>
-            <ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">add</span></ui-btn>
+            <ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols">add</span></ui-btn>
           </div>
           <ui-btn @click="clickedOption(manualTimeoutMin)" class="w-full">{{ $strings.ButtonSetTimer }}</ui-btn>
         </div>

components/modals/SleepTimerModal.vue

@@ -10,12 +10,12 @@
       <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-border" style="max-height: 75%" @click.stop>
         <div v-if="manualTimerModal" class="p-4">
           <div class="flex mb-4" @click="manualTimerModal = false">
-            <span class="material-icons text-3xl">arrow_back</span>
+            <span class="material-symbols text-3xl">arrow_back</span>
           </div>
           <div class="flex my-2 justify-between">
-            <ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">remove</span></ui-btn>
+            <ui-btn @click="decreaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">remove</span></ui-btn>
             <p class="text-2xl font-mono text-center">{{ manualTimeoutMin }} min</p>
-            <ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">add</span></ui-btn>
+            <ui-btn @click="increaseManualTimeout" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">add</span></ui-btn>
           </div>
           <ui-btn @click="clickedOption(manualTimeoutMin)" class="w-full">{{ $strings.ButtonSetTimer }}</ui-btn>
         </div>
@@ -40,9 +40,9 @@
         </ul>
         <div v-else class="p-4">
           <div class="flex my-2 justify-between">
-            <ui-btn @click="decreaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">remove</span></ui-btn>
+            <ui-btn @click="decreaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">remove</span></ui-btn>
             <p class="text-2xl font-mono text-center">{{ timeRemainingPretty }}</p>
-            <ui-btn @click="increaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-icons">add</span></ui-btn>
+            <ui-btn @click="increaseSleepTime" class="w-9 h-9" :padding-x="0" small style="max-width: 36px"><span class="material-symbols text-lg">add</span></ui-btn>
           </div>
 
           <ui-btn @click="cancelSleepTimer" class="w-full">{{ isAuto ? $strings.ButtonDisableAutoTimer : $strings.ButtonCancelTimer }}</ui-btn>

components/modals/bookmarks/BookmarkItem.vue

@@ -2,16 +2,16 @@
   <div :key="bookmark.time" :id="`bookmark-row-${bookmark.time}`" class="flex items-center px-1 py-4 justify-start relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click">
     <div class="flex-grow overflow-hidden px-2">
       <div class="flex items-center mb-0.5">
-        <i class="material-icons text-lg pr-1 -mb-1" :class="highlight ? 'text-success' : 'text-fg-muted'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</i>
+        <i class="material-symbols text-lg pr-1 -mb-1" :class="{ 'text-success fill': highlight, 'text-fg-muted': !highlight }">bookmark</i>
         <p class="truncate text-sm">
           {{ bookmark.title }}
         </p>
       </div>
-      <p class="text-sm font-mono text-fg-muted flex items-center"><span class="material-icons text-base pl-px pr-1">schedule</span>{{ $secondsToTimestamp(bookmark.time / playbackRate) }}</p>
+      <p class="text-sm font-mono text-fg-muted flex items-center"><span class="material-symbols text-base pl-px pr-1">schedule</span>{{ $secondsToTimestamp(bookmark.time / playbackRate) }}</p>
     </div>
     <div class="h-full flex items-center justify-end transform w-16 pr-2" @click.stop>
-      <span class="material-icons text-2xl mr-2 text-fg hover:text-yellow-400" @click.stop="editClick">edit</span>
-      <span class="material-icons text-2xl text-fg hover:text-error" @click.stop="deleteClick">delete</span>
+      <span class="material-symbols text-2xl mr-2 text-fg hover:text-yellow-400" @click.stop="editClick">edit</span>
+      <span class="material-symbols text-2xl text-fg hover:text-error" @click.stop="deleteClick">delete</span>
     </div>
   </div>
 </template>
@@ -42,4 +42,4 @@ export default {
     }
   }
 }
-</script>
+</script>

components/modals/downloads/DownloadItem.vue

@@ -9,13 +9,13 @@
     </div>
     <div class="flex-grow" />
     <div v-if="download.isIncomplete || download.isMissing" class="shadow-sm text-warning flex items-center justify-center rounded-full mr-4">
-      <span class="material-icons">error_outline</span>
+      <span class="material-symbols">error_outline</span>
     </div>
     <button v-if="!isMissing" class="shadow-sm text-accent flex items-center justify-center rounded-full" @click.stop="playDownload">
-      <span class="material-icons" style="font-size: 2rem">play_arrow</span>
+      <span class="material-symbols fill" style="font-size: 2rem">play_arrow</span>
     </button>
     <div class="shadow-sm text-error flex items-center justify-center rounded-ful ml-4" @click.stop="clickDelete">
-      <span class="material-icons" style="font-size: 1.2rem">delete</span>
+      <span class="material-symbols" style="font-size: 1.2rem">delete</span>
     </div>
   </div>
 </template>
@@ -49,4 +49,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

components/modals/playlists/AddCreateModal.vue

@@ -3,7 +3,7 @@
     <div class="flex items-end justify-between h-24 px-4 pb-2">
       <h1 class="text-lg">{{ $strings.LabelAddToPlaylist }}</h1>
       <button class="flex" @click="show = false">
-        <span class="material-icons">close</span>
+        <span class="material-symbols">close</span>
       </button>
     </div>
 
@@ -12,7 +12,7 @@
       <div class="w-full px-4">
         <div class="flex mb-4 items-center">
           <div class="w-9 h-9 flex items-center justify-center rounded-full cursor-pointer" @click.stop="showPlaylistNameInput = false">
-            <span class="material-icons text-3xl">arrow_back</span>
+            <span class="material-symbols text-3xl">arrow_back</span>
           </div>
           <p class="text-xl pl-2 leading-none">{{ $strings.HeaderNewPlaylist }}</p>
           <div class="flex-grow" />

components/modals/rssfeeds/RssFeedModal.vue

@@ -3,7 +3,7 @@
     <div class="flex items-end justify-end h-24 pr-4 pb-2">
       <!-- <h1 class="text-lg">RSS Feed</h1> -->
       <button class="flex" @click="show = false">
-        <span class="material-icons">close</span>
+        <span class="material-symbols">close</span>
       </button>
     </div>
 
@@ -14,7 +14,7 @@
 
           <ui-text-input v-model="currentFeed.feedUrl" class="text-sm" readonly />
 
-          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base" :class="linkCopied ? 'text-success' : 'text-fg-muted'" @click="copyToClipboard(currentFeed.feedUrl)">{{ linkCopied ? 'done' : 'content_copy' }}</span>
+          <span class="material-symbols absolute right-2 bottom-2 p-0.5 text-base" :class="linkCopied ? 'text-success' : 'text-fg-muted'" @click="copyToClipboard(currentFeed.feedUrl)">{{ linkCopied ? 'check' : 'content_copy' }}</span>
         </div>
 
         <div v-if="currentFeed.meta" class="mt-5">

components/readers/ComicReader.vue

@@ -23,7 +23,7 @@
       </div>
     </div>
 
-    <div class="fixed left-0 h-8 w-full bg-bg px-4 flex items-center text-fg-muted" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full bg-bg px-4 flex items-center text-fg-muted transition-transform" :class="showingToolbar ? 'translate-y-0' : isPlayerOpen ? 'translate-y-[120px]' : 'translate-y-32'" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
       <div class="flex-grow" />
       <p class="text-xs">{{ page }} / {{ numPages }}</p>
     </div>
@@ -49,7 +49,8 @@ export default {
       default: () => {}
     },
     isLocal: Boolean,
-    keepProgress: Boolean
+    keepProgress: Boolean,
+    showingToolbar: Boolean
   },
   data() {
     return {
@@ -372,14 +373,12 @@ export default {
 
 <style scoped>
 #comic-reader {
-  height: calc(100% - 36px);
-  max-height: calc(100% - 36px);
-  padding-top: 36px;
+  height: 100%;
+  max-height: 100%;
 }
 .reader-player-open #comic-reader {
-  height: calc(100% - 156px);
-  max-height: calc(100% - 156px);
-  padding-top: 36px;
+  height: calc(100% - 120px);
+  max-height: calc(100% - 120px);
 }
 
 .comicimg {
@@ -390,4 +389,4 @@ export default {
   width: 100vw;
   height: 100%;
 }
-</style>
+</style>

components/readers/EpubReader.vue

@@ -2,7 +2,7 @@
   <div id="epub-frame" class="w-full">
     <div id="viewer" class="h-full w-full"></div>
 
-    <div class="fixed left-0 h-8 w-full px-4 flex items-center" :class="isLightTheme ? 'bg-white text-black' : 'bg-[#232323] text-white/80'" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full px-4 flex items-center" :class="isLightTheme ? 'bg-white text-black' : isDarkTheme ? 'bg-[#232323] text-white/80' : 'bg-black text-white/80'" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
       <p v-if="totalLocations" class="text-xs text-slate-600">Location {{ currentLocationNum }} of {{ totalLocations }}</p>
       <div class="flex-grow" />
       <p class="text-xs">{{ progress }}%</p>
@@ -105,17 +105,21 @@ export default {
     isLightTheme() {
       return this.ereaderSettings.theme === 'light'
     },
+    isDarkTheme() {
+      return this.ereaderSettings.theme === 'dark'
+    },
     themeRules() {
       const isDark = this.ereaderSettings.theme === 'dark'
-      const fontColor = isDark ? '#fff' : '#000'
-      const backgroundColor = isDark ? 'rgb(35 35 35)' : 'rgb(255, 255, 255)'
+      const isBlack = this.ereaderSettings.theme === 'black'
+      const fontColor = isDark ? '#fff' : isBlack ? '#fff' : '#000'
+      const backgroundColor = isDark ? 'rgb(35 35 35)' : isBlack ? 'rgb(0 0 0)' : 'rgb(255, 255, 255)'
 
       return {
         '*': {
           color: `${fontColor}!important`,
           'background-color': `${backgroundColor}!important`,
           'line-height': this.ereaderSettings.lineSpacing + '%!important',
-          '-webkit-text-stroke': this.ereaderSettings.textStroke/100 + 'px ' + fontColor + '!important'
+          '-webkit-text-stroke': this.ereaderSettings.textStroke / 100 + 'px ' + fontColor + '!important'
         },
         a: {
           color: `${fontColor}!important`
@@ -427,7 +431,7 @@ export default {
       document.removeEventListener('orientationchange', this.screenOrientationChange)
     }
     window.removeEventListener('resize', this.screenOrientationChange)
-  },
+  }
 }
 </script>
 

components/readers/PdfReader.vue

@@ -2,12 +2,12 @@
   <div class="w-full h-full relative">
     <div v-show="canGoPrev" class="absolute top-0 left-0 h-full w-1/2 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="prev" @mousedown.prevent>
       <div class="flex items-center justify-center h-full w-1/2">
-        <span class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_back_ios</span>
+        <span class="material-symbols text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_back_ios</span>
       </div>
     </div>
     <div v-show="canGoNext" class="absolute top-0 right-0 h-full w-1/2 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="next" @mousedown.prevent>
       <div class="flex items-center justify-center h-full w-1/2 ml-auto">
-        <span class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_forward_ios</span>
+        <span class="material-symbols text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_forward_ios</span>
       </div>
     </div>
 

components/readers/Reader.vue

@@ -1,20 +1,20 @@
 <template>
-  <div v-if="show" :data-theme="ereaderTheme" class="group fixed top-0 left-0 right-0 layout-wrapper w-full z-40 pt-8 data-[theme=dark]:bg-[#232323] data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': isPlayerOpen }">
+  <div v-if="show" :data-theme="ereaderTheme" class="group fixed top-0 left-0 right-0 layout-wrapper w-full z-40 pt-8 data-[theme=black]:bg-black data-[theme=black]:text-white data-[theme=dark]:bg-[#232323] data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': isPlayerOpen }">
     <!-- toolbar -->
     <div class="h-32 pt-10 w-full px-2 fixed top-0 left-0 z-30 transition-transform bg-bg text-fg" :class="showingToolbar ? 'translate-y-0' : '-translate-y-32'" :style="{ boxShadow: showingToolbar ? '0px 8px 8px #11111155' : '' }" @touchstart.stop @mousedown.stop @touchend.stop @mouseup.stop>
       <div class="flex items-center mb-2">
         <button type="button" class="inline-flex mx-2" @click.stop="show = false">
-          <span class="material-icons-outlined text-3xl text-fg">chevron_left</span>
+          <span class="material-symbols text-3xl text-fg">chevron_left</span>
         </button>
         <div class="flex-grow" />
         <button v-if="isComic || isEpub" type="button" class="inline-flex mx-2" @click.stop="clickTOCBtn">
-          <span class="material-icons-outlined text-2xl text-fg">format_list_bulleted</span>
+          <span class="material-symbols text-2xl text-fg">format_list_bulleted</span>
         </button>
         <button v-if="isEpub" type="button" class="inline-flex mx-2" @click.stop="clickSettingsBtn">
-          <span class="material-icons text-2xl text-fg">settings</span>
+          <span class="material-symbols text-2xl text-fg">settings</span>
         </button>
         <button v-if="comicHasMetadata" type="button" class="inline-flex mx-2" @click.stop="clickMetadataBtn">
-          <span class="material-icons text-2xl text-fg">more</span>
+          <span class="material-symbols text-2xl text-fg">more-vert</span>
         </button>
       </div>
 
@@ -22,14 +22,14 @@
     </div>
 
     <!-- ereader -->
-    <component v-if="readerComponentName" ref="readerComponent" :is="readerComponentName" :url="ebookUrl" :library-item="selectedLibraryItem" :is-local="isLocal" :keep-progress="keepProgress" @touchstart="touchstart" @touchend="touchend" @loaded="readerLoaded" @hook:mounted="readerMounted" />
+    <component v-if="readerComponentName" ref="readerComponent" :is="readerComponentName" :url="ebookUrl" :library-item="selectedLibraryItem" :is-local="isLocal" :keep-progress="keepProgress" :showing-toolbar="showingToolbar" @touchstart="touchstart" @touchend="touchend" @loaded="readerLoaded" @hook:mounted="readerMounted" />
 
     <!-- table of contents modal -->
     <modals-fullscreen-modal v-model="showTOCModal" :theme="ereaderTheme">
       <div class="flex items-end justify-between h-20 px-4 pb-2">
         <h1 class="text-lg">{{ $strings.HeaderTableOfContents }}</h1>
         <button class="flex" @click.stop="showTOCModal = false">
-          <span class="material-icons">close</span>
+          <span class="material-symbols">close</span>
         </button>
       </div>
 
@@ -59,7 +59,7 @@
         <div class="flex items-end justify-between h-14 px-4 pb-2 mb-6">
           <h1 class="text-lg">{{ $strings.HeaderEreaderSettings }}</h1>
           <button class="flex" @click="showSettingsModal = false">
-            <span class="material-icons">close</span>
+            <span class="material-symbols">close</span>
           </button>
         </div>
         <div class="w-full overflow-y-auto overflow-x-hidden h-full max-h-[calc(75vh-85px)]">
@@ -238,6 +238,10 @@ export default {
     },
     themeItems() {
       return [
+        {
+          text: this.$strings.LabelThemeBlack,
+          value: 'black'
+        },
         {
           text: this.$strings.LabelThemeDark,
           value: 'dark'

components/stats/YearInReview.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { FileSharer } from '@byteowls/capacitor-filesharer'
+import { FileSharer } from '@webnativellc/capacitor-filesharer'
 
 export default {
   props: {
@@ -75,7 +75,7 @@ export default {
 
       const addIcon = (icon, color, fontSize, x, y) => {
         ctx.fillStyle = color
-        ctx.font = `${fontSize} Material Icons Outlined`
+        ctx.font = `${fontSize} Material Symbols Rounded`
         ctx.fillText(icon, x, y)
       }
 

components/stats/YearInReviewBanner.vue

@@ -2,7 +2,7 @@
   <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-2 sm:p-4 mb-4">
     <!-- hack to get icon fonts loaded on init -->
     <div class="h-0 w-0 overflow-hidden opacity-0">
-      <span class="material-icons-outlined">close</span>
+      <span class="material-symbols">close</span>
       <span class="abs-icons icon-audiobookshelf" />
     </div>
 
@@ -19,7 +19,7 @@
       <div class="flex items-center justify-center mb-2 max-w-[800px] mx-auto">
         <!-- previous button -->
         <ui-btn small :disabled="!yearInReviewVariant || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant--">
-          <span class="material-icons text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
+          <span class="material-symbols text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
           <span class="hidden sm:inline-block pr-2">Previous</span>
         </ui-btn>
         <!-- share button -->
@@ -33,12 +33,12 @@
         <!-- refresh button -->
         <ui-btn small :disabled="processingYearInReview" class="inline-flex items-center font-semibold mr-1 sm:mr-2" @click="refreshYearInReview">
           <span class="hidden sm:inline-block">Refresh</span>
-          <span class="material-icons sm:!hidden text-lg py-px">refresh</span>
+          <span class="material-symbols sm:!hidden text-lg py-px">refresh</span>
         </ui-btn>
         <!-- next button -->
         <ui-btn small :disabled="yearInReviewVariant >= 2 || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant++">
           <span class="hidden sm:inline-block pl-2">Next</span>
-          <span class="material-icons-outlined text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
+          <span class="material-symbols text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
         </ui-btn>
       </div>
       <stats-year-in-review ref="yearInReview" :variant="yearInReviewVariant" :year="yearInReviewYear" :processing.sync="processingYearInReview" />
@@ -55,7 +55,7 @@
         <div class="flex items-center justify-center mb-2">
           <!-- previous button -->
           <ui-btn small :disabled="!yearInReviewServerVariant || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant--">
-            <span class="material-icons text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
+            <span class="material-symbols text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
             <span class="hidden sm:inline-block pr-2">Previous</span>
           </ui-btn>
           <!-- share button -->
@@ -69,12 +69,12 @@
           <!-- refresh button -->
           <ui-btn small :disabled="processingYearInReviewServer" class="inline-flex items-center font-semibold mr-1 sm:mr-2" @click="refreshYearInReviewServer">
             <span class="hidden sm:inline-block">Refresh</span>
-            <span class="material-icons sm:!hidden text-lg py-px">refresh</span>
+            <span class="material-symbols sm:!hidden text-lg py-px">refresh</span>
           </ui-btn>
           <!-- next button -->
           <ui-btn small :disabled="yearInReviewServerVariant >= 2 || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant++">
             <span class="hidden sm:inline-block pl-2">Next</span>
-            <span class="material-icons-outlined text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
+            <span class="material-symbols text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
           </ui-btn>
         </div>
       </div>
@@ -131,4 +131,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

components/stats/YearInReviewServer.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { FileSharer } from '@byteowls/capacitor-filesharer'
+import { FileSharer } from '@webnativellc/capacitor-filesharer'
 
 export default {
   props: {

components/stats/YearInReviewShort.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { FileSharer } from '@byteowls/capacitor-filesharer'
+import { FileSharer } from '@webnativellc/capacitor-filesharer'
 
 export default {
   props: {
@@ -66,7 +66,7 @@ export default {
 
       const addIcon = (icon, color, fontSize, x, y) => {
         ctx.fillStyle = color
-        ctx.font = `${fontSize} Material Icons Outlined`
+        ctx.font = `${fontSize} Material Symbols Rounded`
         ctx.fillText(icon, x, y)
       }
 

components/tables/ChaptersTable.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="flex-grow" />
       <div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="expanded ? 'transform rotate-180' : ''">
-        <span class="material-icons text-3xl">expand_more</span>
+        <span class="material-symbols text-3xl">arrow_drop_down</span>
       </div>
     </div>
     <transition name="slide">

components/tables/TracksTable.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="flex-grow" />
       <div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="showTracks ? 'transform rotate-180' : ''">
-        <span class="material-icons text-3xl">expand_more</span>
+        <span class="material-symbols text-3xl">arrow_drop_down</span>
       </div>
     </div>
     <transition name="slide">

components/tables/collection/BookTableRow.vue

@@ -6,14 +6,14 @@
       </div>
       <div class="book-table-content h-full px-2 flex items-center">
         <div class="max-w-full">
-          <p class="truncate block text-sm">{{ bookTitle }} <span v-if="localLibraryItem" class="material-icons text-success text-base align-text-bottom">download_done</span></p>
+          <p class="truncate block text-sm">{{ bookTitle }} <span v-if="localLibraryItem" class="material-symbols text-success text-base align-text-bottom">download_done</span></p>
           <p class="truncate block text-fg-muted text-xs">{{ bookAuthor }}</p>
           <p v-if="media.duration" class="text-xxs text-fg-muted">{{ bookDuration }}</p>
         </div>
       </div>
       <div class="w-8 min-w-8 flex justify-center">
         <button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white border-opacity-20 flex items-center justify-center" @click.stop.prevent="playClick">
-          <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+          <span class="material-symbols text-2xl fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
         </button>
       </div>
     </nuxt-link>
@@ -120,4 +120,4 @@ export default {
   width: calc(100% - 82px);
   max-width: calc(100% - 82px);
 }
-</style>
+</style>

components/tables/ebook/EbookFilesTable.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="flex-grow" />
       <div class="h-10 w-10 rounded-full flex justify-center items-center duration-500" :class="showFiles ? 'transform rotate-180' : ''">
-        <span class="material-icons text-3xl">expand_more</span>
+        <span class="material-symbols text-3xl">arrow_drop_down</span>
       </div>
     </div>
     <transition name="slide">
@@ -96,4 +96,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

components/tables/ebook/EbookFilesTableRow.vue

@@ -1,6 +1,6 @@
 <template>
   <tr>
-    <td class="px-4">{{ file.metadata.filename }} <span v-if="isPrimary" class="material-icons-outlined text-success align-text-bottom text-base">check_circle</span></td>
+    <td class="px-4">{{ file.metadata.filename }} <span v-if="isPrimary" class="material-symbols text-success align-text-bottom text-base">check_circle</span></td>
     <td class="text-xs w-16">
       <ui-icon-btn icon="auto_stories" outlined borderless icon-font-size="1.125rem" :size="8" @click="readEbook" />
     </td>
@@ -57,4 +57,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

components/tables/playlist/ItemTableRow.vue

@@ -7,14 +7,14 @@
         </div>
         <div class="item-table-content h-full px-2 flex items-center">
           <div class="max-w-full">
-            <p class="truncate block text-sm">{{ itemTitle }} <span v-if="localLibraryItem" class="material-icons text-success text-base align-text-bottom">download_done</span></p>
+            <p class="truncate block text-sm">{{ itemTitle }} <span v-if="localLibraryItem" class="material-symbols text-success text-base align-text-bottom">download_done</span></p>
             <p v-if="authorName" class="truncate block text-fg-muted text-xs">{{ authorName }}</p>
             <p class="text-xxs text-fg-muted">{{ itemDuration }}</p>
           </div>
         </div>
         <div class="w-8 min-w-8 flex justify-center">
           <button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center" @click.stop.prevent="playClick">
-            <span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
             <svg v-else class="animate-spin" style="width: 18px; height: 18px" viewBox="0 0 24 24">
               <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
             </svg>
@@ -22,7 +22,7 @@
         </div>
         <div class="w-8 min-w-8 flex justify-center">
           <button class="w-8 h-8 rounded-full flex items-center justify-center" @click.stop.prevent="showMore">
-            <span class="material-icons">more_vert</span>
+            <span class="material-symbols text-2xl">more_vert</span>
           </button>
         </div>
       </nuxt-link>
@@ -188,4 +188,4 @@ export default {
   width: calc(100% - 114px);
   max-width: calc(100% - 114px);
 }
-</style>
+</style>

components/tables/podcast/EpisodeRow.vue

@@ -17,6 +17,11 @@
 
       <p class="text-sm text-fg episode-subtitle mt-1.5 mb-0.5" v-html="subtitle" />
 
+      <p v-if="sortKey === 'audioFile.metadata.filename'" class="text-xs text-fg-muted truncate mt-2 mb-0.5">
+        <span class="font-semibold">{{ $getString('LabelFilename') }}</span
+        >: <span class="font-light">{{ episode.audioFile.metadata.filename }}</span>
+      </p>
+
       <div v-if="episodeNumber || season || episodeType" class="flex py-2 items-center -mx-0.5">
         <div v-if="episodeNumber" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-fg">Episode #{{ episodeNumber }}</div>
         <div v-if="season" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-fg">Season #{{ season }}</div>
@@ -24,26 +29,35 @@
       </div>
 
       <div class="flex items-center pt-2">
-        <div class="h-8 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
-          <span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
-          <svg v-else class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
+        <!-- Play/Pause Button -->
+        <div class="h-10 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
+          <span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill leading-none" :class="streamIsPlaying ? '' : 'text-success'">
+            {{ streamIsPlaying ? 'pause' : 'play_arrow' }}
+          </span>
+          <svg v-else class="animate-spin" style="width: 28px; height: 28px" viewBox="0 0 24 24">
             <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
           </svg>
           <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
         </div>
 
-        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
+        <!-- Read Status Button -->
+        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1" @click="toggleFinished" />
 
-        <button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
-          <span class="material-icons text-2xl">playlist_add</span>
+        <!-- Add to Playlist Button -->
+        <button v-if="!isLocal" class="mx-1.5" @click.stop="addToPlaylist">
+          <span class="material-symbols text-2xl leading-none">playlist_add</span>
         </button>
 
-        <div v-if="userCanDownload">
-          <span v-if="isLocal" class="material-icons-outlined px-2 text-success text-lg">audio_file</span>
-          <span v-else-if="!localEpisode" class="material-icons mx-1.5 mt-2 text-xl" :class="downloadItem || startingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
-          <span v-else class="material-icons px-2 text-success text-xl">download_done</span>
+        <!-- Download Section -->
+        <div v-if="userCanDownload" class="flex items-center">
+          <span v-if="isLocal" class="material-symbols px-2 text-success text-2xl leading-none">audio_file</span>
+          <span v-else-if="!localEpisode" class="material-symbols mx-1.5 text-2xl leading-none" :class="downloadItem || startingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">
+            {{ downloadItem || startingDownload ? 'downloading' : 'download' }}
+          </span>
+          <span v-else class="material-symbols px-2 text-success text-2xl leading-none">download_done</span>
         </div>
 
+        <!-- Spacer to push elements left -->
         <div class="flex-grow" />
       </div>
     </div>
@@ -72,7 +86,8 @@ export default {
       type: Object,
       default: () => {}
     },
-    isLocal: Boolean
+    isLocal: Boolean,
+    sortKey: String
   },
   mixins: [cellularPermissionHelpers],
   data() {

components/tables/podcast/EpisodesTable.vue

@@ -5,7 +5,7 @@
       <div class="flex items-center">
         <p class="text-sm py-1">{{ $getString('MessageEpisodesQueuedForDownload', [episodeDownloadsQueued.length]) }}</p>
         <div class="flex-grow" />
-        <span v-if="isAdminOrUp" class="material-icons text-xl ml-3 cursor-pointer" @click="clearDownloadQueue">close</span>
+        <span v-if="isAdminOrUp" class="material-symbols text-xl ml-3 cursor-pointer" @click="clearDownloadQueue">close</span>
       </div>
     </div>
 
@@ -23,23 +23,23 @@
       <div class="flex-grow" />
 
       <button v-if="isAdminOrUp && !fetchingRSSFeed" class="outline:none mx-1 pt-0.5 relative" @click="searchEpisodes">
-        <span class="material-icons text-xl text-fg">search</span>
+        <span class="material-symbols text-xl text-fg">search</span>
       </button>
       <widgets-loading-spinner v-else-if="fetchingRSSFeed" class="mx-1" />
 
       <button class="outline:none mx-3 pt-0.5 relative" @click="showFilters">
-        <span class="material-icons text-xl text-fg">filter_alt</span>
+        <span class="material-symbols text-xl text-fg">filter_alt</span>
         <div v-show="filterKey !== 'all' && episodesAreFiltered" class="absolute top-0 right-0 w-1.5 h-1.5 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
       </button>
 
       <div class="flex items-center border border-white border-opacity-25 rounded px-2" @click="clickSort">
         <p class="text-sm text-fg">{{ sortText }}</p>
-        <span class="material-icons ml-1 text-fg">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+        <span class="material-symbols ml-1 text-fg">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
       </div>
     </div>
 
     <template v-for="episode in episodesSorted">
-      <tables-podcast-episode-row :episode="episode" :local-episode="localEpisodeMap[episode.id]" :library-item-id="libraryItemId" :local-library-item-id="localLibraryItemId" :is-local="isLocal" :key="episode.id" @addToPlaylist="addEpisodeToPlaylist" />
+      <tables-podcast-episode-row :episode="episode" :local-episode="localEpisodeMap[episode.id]" :library-item-id="libraryItemId" :local-library-item-id="localLibraryItemId" :is-local="isLocal" :sort-key="sortKey" :key="episode.id" @addToPlaylist="addEpisodeToPlaylist" />
     </template>
 
     <!-- Huhhh?
@@ -133,6 +133,10 @@ export default {
         {
           text: this.$strings.LabelEpisode,
           value: 'episode'
+        },
+        {
+          text: this.$strings.LabelFilename,
+          value: 'audioFile.metadata.filename'
         }
       ]
     },
@@ -181,8 +185,17 @@ export default {
     },
     episodesSorted() {
       return this.episodesFiltered.sort((a, b) => {
-        let aValue = a[this.sortKey]
-        let bValue = b[this.sortKey]
+        let aValue
+        let bValue
+
+        if (this.sortKey.includes('.')) {
+          const getNestedValue = (ob, s) => s.split('.').reduce((o, k) => o?.[k], ob)
+          aValue = getNestedValue(a, this.sortKey)
+          bValue = getNestedValue(b, this.sortKey)
+        } else {
+          aValue = a[this.sortKey]
+          bValue = b[this.sortKey]
+        }
 
         // Sort episodes with no pub date as the oldest
         if (this.sortKey === 'publishedAt') {

components/tables/podcast/LatestEpisodeRow.vue

@@ -27,26 +27,35 @@
       </div>
 
       <div class="flex items-center pt-2">
-        <div class="h-8 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
-          <span v-if="!playerIsStartingForThisMedia" class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
-          <svg v-else class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
+        <!-- Play/Pause Button -->
+        <div class="h-9 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
+          <span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill leading-none" :class="streamIsPlaying ? '' : 'text-success'">
+            {{ streamIsPlaying ? 'pause' : 'play_arrow' }}
+          </span>
+          <svg v-else class="animate-spin" style="width: 22px; height: 22px" viewBox="0 0 24 24">
             <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
           </svg>
           <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
         </div>
 
-        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
+        <!-- Read Status Button -->
+        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1" @click="toggleFinished" />
 
-        <button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
-          <span class="material-icons text-2xl">playlist_add</span>
+        <!-- Add to Playlist Button -->
+        <button v-if="!isLocal" class="mx-1.5" @click.stop="addToPlaylist">
+          <span class="material-symbols text-2xl leading-none">playlist_add</span>
         </button>
 
-        <div v-if="userCanDownload">
-          <span v-if="isLocal" class="material-icons-outlined px-2 text-success text-lg">audio_file</span>
-          <span v-else-if="!localEpisode" class="material-icons mx-1.5 mt-2 text-xl" :class="downloadItem || pendingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || pendingDownload ? 'downloading' : 'download' }}</span>
-          <span v-else class="material-icons px-2 text-success text-xl">download_done</span>
+        <!-- Download Section -->
+        <div v-if="userCanDownload" class="flex items-center">
+          <span v-if="isLocal" class="material-symbols px-2 text-success text-2xl leading-none">audio_file</span>
+          <span v-else-if="!localEpisode" class="material-symbols mx-1.5 text-2xl leading-none" :class="downloadItem || pendingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">
+            {{ downloadItem || pendingDownload ? 'downloading' : 'download' }}
+          </span>
+          <span v-else class="material-symbols px-2 text-success text-2xl leading-none">download_done</span>
         </div>
 
+        <!-- Spacer to push elements left -->
         <div class="flex-grow" />
       </div>
     </div>

components/ui/Dropdown.vue

@@ -6,7 +6,7 @@
         <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText || placeholder || '' }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-        <span class="material-icons">expand_more</span>
+        <span class="material-symbols">arrow_drop_down</span>
       </span>
     </button>
 
@@ -86,4 +86,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

components/ui/DropdownMenu.vue

@@ -9,14 +9,14 @@
           <nuxt-link :key="item.value" v-if="item.to" :to="item.to">
             <li :key="item.value" class="text-fg select-none relative py-2" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
               <div class="flex items-center px-2">
-                <span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
+                <span v-if="item.icon" class="material-symbols text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
                 <span class="font-normal block truncate font-sans text-center">{{ item.text }}</span>
               </div>
             </li>
           </nuxt-link>
           <li v-else :key="item.value" class="text-fg select-none relative py-2" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
             <div class="flex items-center px-2">
-              <span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
+              <span v-if="item.icon" class="material-symbols text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
               <span class="font-normal block truncate font-sans text-center">{{ item.text }}</span>
             </div>
           </li>
@@ -102,4 +102,4 @@ export default {
     }
   }
 }
-</script>
+</script>

components/ui/IconBtn.vue

@@ -5,7 +5,7 @@
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
     </div>
-    <span v-else :class="outlined ? 'material-icons-outlined' : 'material-icons'" :style="{ fontSize }">{{ icon }}</span>
+    <span v-else class="material-symbols text-2xl" :class="{ fill: !outlined }" :style="{ fontSize }">{{ icon }}</span>
   </button>
 </template>
 

components/ui/Menu.vue

@@ -5,7 +5,7 @@
         <span class="block truncate">{{ label }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-        <span class="material-icons text-fg">person</span>
+        <span class="material-symbols text-fg">person</span>
       </span>
     </button>
 
@@ -58,4 +58,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

components/ui/MultiSelect.vue

@@ -6,8 +6,8 @@
         <div ref="inputWrapper" style="min-height: 36px" class="flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-1" :class="wrapperClass" @click.stop.prevent="clickWrapper" @mouseup.stop.prevent @mousedown.prevent>
           <div v-for="item in selected" :key="item" class="rounded-full px-2 py-1 mx-0.5 my-0.5 text-xs bg-bg flex flex-nowrap break-all items-center relative">
             <div v-if="!disabled" class="w-full h-full rounded-full absolute top-0 left-0 px-1 bg-bg bg-opacity-75 flex items-center justify-end opacity-0 hover:opacity-100">
-              <span v-if="showEdit" class="material-icons text-white hover:text-warning cursor-pointer" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</span>
-              <span class="material-icons text-white hover:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item)">close</span>
+              <span v-if="showEdit" class="material-symbols text-white hover:text-warning cursor-pointer" style="font-size: 1.1rem" @click.stop="editItem(item)">edit</span>
+              <span class="material-symbols text-white hover:text-error cursor-pointer" style="font-size: 1.1rem" @click.stop="removeItem(item)">close</span>
             </div>
             {{ item }}
           </div>
@@ -22,7 +22,7 @@
               <span class="font-normal ml-3 block truncate">{{ item }}</span>
             </div>
             <span v-if="selected.includes(item)" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
-              <span class="material-icons text-xl">checkmark</span>
+              <span class="material-symbols text-xl">checkmark</span>
             </span>
           </li>
         </template>
@@ -258,4 +258,4 @@ input:read-only {
   color: #aaa;
   background-color: #444;
 }
-</style>
+</style>

components/ui/TextInput.vue

@@ -2,13 +2,13 @@
   <div class="relative">
     <input v-model="input" ref="input" autofocus :type="type" :disabled="disabled" :readonly="readonly" autocorrect="off" autocapitalize="none" autocomplete="off" :placeholder="placeholder" class="py-2 w-full outline-none bg-primary disabled:text-fg-muted" :class="inputClass" @keyup="keyup" />
     <div v-if="prependIcon" class="absolute top-0 left-0 h-full px-2 flex items-center justify-center">
-      <span class="material-icons text-lg">{{ prependIcon }}</span>
+      <span class="material-symbols text-lg">{{ prependIcon }}</span>
     </div>
     <div v-if="clearable && input" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center" @click.stop="clear">
-      <span class="material-icons text-lg">close</span>
+      <span class="material-symbols text-lg">close</span>
     </div>
     <div v-else-if="!clearable && appendIcon" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
-      <span class="material-icons text-lg">{{ appendIcon }}</span>
+      <span class="material-symbols text-lg">{{ appendIcon }}</span>
     </div>
   </div>
 </template>
@@ -91,4 +91,4 @@ input[type='time']::-webkit-calendar-picker-indicator {
 html[data-theme='light'] input[type='time']::-webkit-calendar-picker-indicator {
   filter: unset;
 }
-</style>
+</style>

components/widgets/ConnectionIndicator.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="icon" class="flex h-full items-center px-2">
-    <span class="material-icons-outlined text-lg" :class="iconClass" @click="showAlertDialog">{{ icon }}</span>
+    <span class="material-symbols text-lg" :class="iconClass" @click="showAlertDialog">{{ icon }}</span>
   </div>
 </template>
 
@@ -79,4 +79,4 @@ export default {
   mounted() {},
   beforeDestroy() {}
 }
-</script>
+</script>

ios/App/App.xcodeproj/project.pbxproj

@@ -15,20 +15,17 @@
 		3ABF580928059BAE005DFBE5 /* PlaybackSession.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3ABF580828059BAE005DFBE5 /* PlaybackSession.swift */; };
 		3ABF618F2804325C0070250E /* PlayerHandler.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3ABF618E2804325C0070250E /* PlayerHandler.swift */; };
 		3AD4FCE528043E50006DB301 /* AbsDatabase.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3AD4FCE428043E50006DB301 /* AbsDatabase.swift */; };
-		3AD4FCE728043E72006DB301 /* AbsDatabase.m in Sources */ = {isa = PBXBuildFile; fileRef = 3AD4FCE628043E72006DB301 /* AbsDatabase.m */; };
 		3AD4FCE928043FD7006DB301 /* ServerConnectionConfig.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3AD4FCE828043FD7006DB301 /* ServerConnectionConfig.swift */; };
 		3AD4FCEB280443DD006DB301 /* Database.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3AD4FCEA280443DD006DB301 /* Database.swift */; };
 		3AD4FCED28044E6C006DB301 /* Store.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3AD4FCEC28044E6C006DB301 /* Store.swift */; };
 		3AF1970C2806E2590096F747 /* ApiClient.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3AF1970B2806E2590096F747 /* ApiClient.swift */; };
 		3AF1970E2806E3CA0096F747 /* AbsAudioPlayer.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3AF1970D2806E3CA0096F747 /* AbsAudioPlayer.swift */; };
-		3AF197102806E3DC0096F747 /* AbsAudioPlayer.m in Sources */ = {isa = PBXBuildFile; fileRef = 3AF1970F2806E3DC0096F747 /* AbsAudioPlayer.m */; };
 		3AFCB5E827EA240D00ECCC05 /* NowPlayingInfo.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3AFCB5E727EA240D00ECCC05 /* NowPlayingInfo.swift */; };
-		4D66B952282EE822008272D4 /* AbsDownloader.m in Sources */ = {isa = PBXBuildFile; fileRef = 4D66B951282EE822008272D4 /* AbsDownloader.m */; };
 		4D66B954282EE87C008272D4 /* AbsDownloader.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D66B953282EE87C008272D4 /* AbsDownloader.swift */; };
-		4D66B956282EE951008272D4 /* AbsFileSystem.m in Sources */ = {isa = PBXBuildFile; fileRef = 4D66B955282EE951008272D4 /* AbsFileSystem.m */; };
 		4D66B958282EEA14008272D4 /* AbsFileSystem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D66B957282EEA14008272D4 /* AbsFileSystem.swift */; };
 		4D91EEC62A40F28D004807ED /* EBookFile.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4D91EEC52A40F28D004807ED /* EBookFile.swift */; };
 		4DABC04F2B0139CA000F6264 /* User.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4DABC04E2B0139CA000F6264 /* User.swift */; };
+		4DF6C7172DB58ABF004059F1 /* AbsLogger.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4DF6C7162DB58ABF004059F1 /* AbsLogger.swift */; };
 		4DF74912287105C600AC7814 /* DeviceSettings.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4DF74911287105C600AC7814 /* DeviceSettings.swift */; };
 		4DFE2DA32D345C390000B204 /* MyViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4DFE2DA22D345C390000B204 /* MyViewController.swift */; };
 		50379B232058CBB4000EE86E /* capacitor.config.json in Resources */ = {isa = PBXBuildFile; fileRef = 50379B222058CBB4000EE86E /* capacitor.config.json */; };
@@ -90,21 +87,18 @@
 		3ABF580828059BAE005DFBE5 /* PlaybackSession.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PlaybackSession.swift; sourceTree = "<group>"; };
 		3ABF618E2804325C0070250E /* PlayerHandler.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PlayerHandler.swift; sourceTree = "<group>"; };
 		3AD4FCE428043E50006DB301 /* AbsDatabase.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AbsDatabase.swift; sourceTree = "<group>"; };
-		3AD4FCE628043E72006DB301 /* AbsDatabase.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = AbsDatabase.m; sourceTree = "<group>"; };
 		3AD4FCE828043FD7006DB301 /* ServerConnectionConfig.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ServerConnectionConfig.swift; sourceTree = "<group>"; };
 		3AD4FCEA280443DD006DB301 /* Database.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Database.swift; sourceTree = "<group>"; };
 		3AD4FCEC28044E6C006DB301 /* Store.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Store.swift; sourceTree = "<group>"; };
 		3AF1970B2806E2590096F747 /* ApiClient.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ApiClient.swift; sourceTree = "<group>"; };
 		3AF1970D2806E3CA0096F747 /* AbsAudioPlayer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AbsAudioPlayer.swift; sourceTree = "<group>"; };
-		3AF1970F2806E3DC0096F747 /* AbsAudioPlayer.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = AbsAudioPlayer.m; sourceTree = "<group>"; };
 		3AFCB5E727EA240D00ECCC05 /* NowPlayingInfo.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NowPlayingInfo.swift; sourceTree = "<group>"; };
-		4D66B951282EE822008272D4 /* AbsDownloader.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = AbsDownloader.m; sourceTree = "<group>"; };
 		4D66B953282EE87C008272D4 /* AbsDownloader.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AbsDownloader.swift; sourceTree = "<group>"; };
-		4D66B955282EE951008272D4 /* AbsFileSystem.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = AbsFileSystem.m; sourceTree = "<group>"; };
 		4D66B957282EEA14008272D4 /* AbsFileSystem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AbsFileSystem.swift; sourceTree = "<group>"; };
 		4D8D412C26E187E400BA5F0D /* App-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "App-Bridging-Header.h"; sourceTree = "<group>"; };
 		4D91EEC52A40F28D004807ED /* EBookFile.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EBookFile.swift; sourceTree = "<group>"; };
 		4DABC04E2B0139CA000F6264 /* User.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = User.swift; sourceTree = "<group>"; };
+		4DF6C7162DB58ABF004059F1 /* AbsLogger.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AbsLogger.swift; sourceTree = "<group>"; };
 		4DF74911287105C600AC7814 /* DeviceSettings.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DeviceSettings.swift; sourceTree = "<group>"; };
 		4DFE2DA22D345C390000B204 /* MyViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MyViewController.swift; sourceTree = "<group>"; };
 		50379B222058CBB4000EE86E /* capacitor.config.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = capacitor.config.json; sourceTree = "<group>"; };
@@ -217,13 +211,10 @@
 			isa = PBXGroup;
 			children = (
 				3AD4FCE428043E50006DB301 /* AbsDatabase.swift */,
-				3AD4FCE628043E72006DB301 /* AbsDatabase.m */,
 				3AF1970D2806E3CA0096F747 /* AbsAudioPlayer.swift */,
-				3AF1970F2806E3DC0096F747 /* AbsAudioPlayer.m */,
-				4D66B951282EE822008272D4 /* AbsDownloader.m */,
 				4D66B953282EE87C008272D4 /* AbsDownloader.swift */,
-				4D66B955282EE951008272D4 /* AbsFileSystem.m */,
 				4D66B957282EEA14008272D4 /* AbsFileSystem.swift */,
+				4DF6C7162DB58ABF004059F1 /* AbsLogger.swift */,
 			);
 			path = plugins;
 			sourceTree = "<group>";
@@ -531,7 +522,6 @@
 			files = (
 				E9D5507328AC218300C746DD /* DaoExtensions.swift in Sources */,
 				E9D5506228AC1CC900C746DD /* PlayerState.swift in Sources */,
-				3AD4FCE728043E72006DB301 /* AbsDatabase.m in Sources */,
 				504EC3081FED79650016851F /* AppDelegate.swift in Sources */,
 				EACB38122BCCA1330060DA4A /* AudioPlayerRateManager.swift in Sources */,
 				E9FA07E328C82848005520B0 /* Logger.swift in Sources */,
@@ -545,6 +535,7 @@
 				4D66B958282EEA14008272D4 /* AbsFileSystem.swift in Sources */,
 				E9D5504C28AC1AE000C746DD /* PodcastEpisode.swift in Sources */,
 				E9D5506A28AC1DF100C746DD /* LocalFile.swift in Sources */,
+				4DF6C7172DB58ABF004059F1 /* AbsLogger.swift in Sources */,
 				3AF1970E2806E3CA0096F747 /* AbsAudioPlayer.swift in Sources */,
 				E9D5506F28AC1E8E00C746DD /* DownloadItem.swift in Sources */,
 				3AD4FCE928043FD7006DB301 /* ServerConnectionConfig.swift in Sources */,
@@ -553,7 +544,6 @@
 				3A200C1527D64D7E00CBF02E /* AudioPlayer.swift in Sources */,
 				4DFE2DA32D345C390000B204 /* MyViewController.swift in Sources */,
 				E9D5507128AC1EC700C746DD /* DownloadItemPart.swift in Sources */,
-				4D66B956282EE951008272D4 /* AbsFileSystem.m in Sources */,
 				EACB38142BCCA1410060DA4A /* LegacyAudioPlayerRateManager.swift in Sources */,
 				3AFCB5E827EA240D00ECCC05 /* NowPlayingInfo.swift in Sources */,
 				3AB34053280829BF0039308B /* Extensions.swift in Sources */,
@@ -561,7 +551,6 @@
 				3AD4FCEB280443DD006DB301 /* Database.swift in Sources */,
 				3AD4FCE528043E50006DB301 /* AbsDatabase.swift in Sources */,
 				4DABC04F2B0139CA000F6264 /* User.swift in Sources */,
-				4D66B952282EE822008272D4 /* AbsDownloader.m in Sources */,
 				E9D5506828AC1DC300C746DD /* LocalPodcastEpisode.swift in Sources */,
 				EACB38162BCCA1500060DA4A /* DefaultedAudioPlayerRateManager.swift in Sources */,
 				E9D5505228AC1B5D00C746DD /* Chapter.swift in Sources */,
@@ -574,7 +563,6 @@
 				E9D5505C28AC1C6200C746DD /* LibraryFile.swift in Sources */,
 				4DF74912287105C600AC7814 /* DeviceSettings.swift in Sources */,
 				E9D5504A28AC1AA600C746DD /* Metadata.swift in Sources */,
-				3AF197102806E3DC0096F747 /* AbsAudioPlayer.m in Sources */,
 				E9D5507528AEF93100C746DD /* PlayerSettings.swift in Sources */,
 				E9D5505028AC1B3E00C746DD /* Author.swift in Sources */,
 				3AF1970C2806E2590096F747 /* ApiClient.swift in Sources */,
@@ -744,12 +732,12 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = Icons;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 36;
+				CURRENT_PROJECT_VERSION = 37;
 				DEVELOPMENT_TEAM = 7UFJ7D8V6A;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 0.9.79;
+				MARKETING_VERSION = 0.9.80;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = com.audiobookshelf.app.dev;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -768,12 +756,12 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = Icons;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 36;
+				CURRENT_PROJECT_VERSION = 37;
 				DEVELOPMENT_TEAM = 7UFJ7D8V6A;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 0.9.79;
+				MARKETING_VERSION = 0.9.80;
 				PRODUCT_BUNDLE_IDENTIFIER = com.audiobookshelf.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

ios/App/App/AppDelegate.swift

@@ -14,7 +14,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
         // Override point for customization after application launch.
 
         let configuration = Realm.Configuration(
-            schemaVersion: 18,
+            schemaVersion: 19,
             migrationBlock: { [weak self] migration, oldSchemaVersion in
                 if (oldSchemaVersion < 1) {
                     self?.logger.log("Realm schema version was \(oldSchemaVersion)")
@@ -61,6 +61,12 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
                         newObject?["streamingUsingCellular"] = "ALWAYS"
                     }
                 }
+                if (oldSchemaVersion < 18) {
+                    self?.logger.log("Realm schema version was \(oldSchemaVersion)... Adding disableSleepTimerFadeOut settings")
+                    migration.enumerateObjects(ofType: PlayerSettings.className()) { oldObject, newObject in
+                        newObject?["disableSleepTimerFadeOut"] = false
+                  }
+              }
 
             }
         )

ios/App/App/MyViewController.swift

@@ -21,6 +21,7 @@ class MyViewController: CAPBridgeViewController {
         bridge?.registerPluginInstance(AbsAudioPlayer())
         bridge?.registerPluginInstance(AbsDownloader())
         bridge?.registerPluginInstance(AbsFileSystem())
+        bridge?.registerPluginInstance(AbsLogger())
     }
     
 

ios/App/App/plugins/AbsAudioPlayer.m

@@ -1,35 +0,0 @@
-//
-//  AbsAudioPlayer.m
-//  App
-//
-//  Created by Rasmus Krämer on 13.04.22.
-//
-
-#import <Foundation/Foundation.h>
-#import <Capacitor/Capacitor.h>
-
-CAP_PLUGIN(AbsAudioPlayer, "AbsAudioPlayer",
-           CAP_PLUGIN_METHOD(onReady, CAPPluginReturnNone);
-           
-           CAP_PLUGIN_METHOD(prepareLibraryItem, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(closePlayback, CAPPluginReturnPromise);
-           
-           CAP_PLUGIN_METHOD(setPlaybackSpeed, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(setChapterTrack, CAPPluginReturnPromise);
-           
-           CAP_PLUGIN_METHOD(playPlayer, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(pausePlayer, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(playPause, CAPPluginReturnPromise);
-           
-           CAP_PLUGIN_METHOD(seek, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(seekForward, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(seekBackward, CAPPluginReturnPromise);
-           
-           CAP_PLUGIN_METHOD(getCurrentTime, CAPPluginReturnPromise);
-           
-           CAP_PLUGIN_METHOD(cancelSleepTimer, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(decreaseSleepTime, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(increaseSleepTime, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(getSleepTimerTime, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(setSleepTimer, CAPPluginReturnPromise);
-           )

ios/App/App/plugins/AbsAudioPlayer.swift

@@ -11,7 +11,29 @@ import RealmSwift
 import Network
 
 @objc(AbsAudioPlayer)
-public class AbsAudioPlayer: CAPPlugin {
+public class AbsAudioPlayer: CAPPlugin, CAPBridgedPlugin {
+    public var identifier = "AbsAudioPlayerPlugin"
+    public var jsName = "AbsAudioPlayer"
+    public let pluginMethods: [CAPPluginMethod] = [
+        CAPPluginMethod(name: "onReady", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "prepareLibraryItem", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "closePlayback", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "setPlaybackSpeed", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "setChapterTrack", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "playPlayer", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "pausePlayer", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "playPause", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "seek", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "seekForward", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "seekBackward", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getCurrentTime", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "cancelSleepTimer", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "decreaseSleepTime", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "increaseSleepTime", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getSleepTimerTime", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "setSleepTimer", returnType: CAPPluginReturnPromise)
+    ]
+    
     private let logger = AppLogger(category: "AbsAudioPlayer")
 
     private var initialPlayWhenReady = false

ios/App/App/plugins/AbsDatabase.m

@@ -1,29 +0,0 @@
-//
-//  AbsDatabase.m
-//  App
-//
-//  Created by Rasmus Krämer on 11.04.22.
-//
-
-#import <Foundation/Foundation.h>
-#import <Capacitor/Capacitor.h>
-
-CAP_PLUGIN(AbsDatabase, "AbsDatabase",
-           CAP_PLUGIN_METHOD(setCurrentServerConnectionConfig, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(removeServerConnectionConfig, CAPPluginReturnPromise);
-           
-           CAP_PLUGIN_METHOD(logout, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(getDeviceData, CAPPluginReturnPromise);
-           
-           CAP_PLUGIN_METHOD(getLocalLibraryItems, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(getLocalLibraryItem, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(getLocalLibraryItemByLId, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(getLocalLibraryItemsInFolder, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(getAllLocalMediaProgress, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(removeLocalMediaProgress, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(syncServerMediaProgressWithLocalMediaProgress, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(syncLocalSessionsWithServer, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(updateLocalMediaProgressFinished, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(updateDeviceSettings, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(updateLocalEbookProgress, CAPPluginReturnPromise);
-           )

ios/App/App/plugins/AbsDatabase.swift

@@ -27,7 +27,27 @@ extension String {
 }
 
 @objc(AbsDatabase)
-public class AbsDatabase: CAPPlugin {
+public class AbsDatabase: CAPPlugin, CAPBridgedPlugin {
+    public var identifier = "AbsDatabasePlugin"
+    public var jsName = "AbsDatabase"
+    public let pluginMethods: [CAPPluginMethod] = [
+        CAPPluginMethod(name: "setCurrentServerConnectionConfig", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "removeServerConnectionConfig", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "logout", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getDeviceData", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getLocalLibraryItems", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getLocalLibraryItem", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getLocalLibraryItemByLId", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getLocalLibraryItemsInFolder", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getAllLocalMediaProgress", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "removeLocalMediaProgress", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "syncServerMediaProgressWithLocalMediaProgress", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "syncLocalSessionsWithServer", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "updateLocalMediaProgressFinished", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "updateDeviceSettings", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "updateLocalEbookProgress", returnType: CAPPluginReturnPromise)
+    ]
+    
     private let logger = AppLogger(category: "AbsDatabase")
 
     @objc func setCurrentServerConnectionConfig(_ call: CAPPluginCall) {
@@ -246,6 +266,7 @@ public class AbsDatabase: CAPPlugin {
         let languageCode = call.getString("languageCode") ?? "en-us"
         let downloadUsingCellular = call.getString("downloadUsingCellular") ?? "ALWAYS"
         let streamingUsingCellular = call.getString("streamingUsingCellular") ?? "ALWAYS"
+        let disableSleepTimerFadeOut = call.getBool("disableSleepTimerFadeOut") ?? false
         let settings = DeviceSettings()
         settings.disableAutoRewind = disableAutoRewind
         settings.enableAltView = enableAltView
@@ -257,6 +278,7 @@ public class AbsDatabase: CAPPlugin {
         settings.languageCode = languageCode
         settings.downloadUsingCellular = downloadUsingCellular
         settings.streamingUsingCellular = streamingUsingCellular
+        settings.disableSleepTimerFadeOut = disableSleepTimerFadeOut
 
         Database.shared.setDeviceSettings(deviceSettings: settings)
 

ios/App/App/plugins/AbsDownloader.m

@@ -1,13 +0,0 @@
-//
-//  AbsDownloader.m
-//  App
-//
-//  Created by advplyr on 5/13/22.
-//
-
-#import <Foundation/Foundation.h>
-#import <Capacitor/Capacitor.h>
-
-CAP_PLUGIN(AbsDownloader, "AbsDownloader",
-           CAP_PLUGIN_METHOD(downloadLibraryItem, CAPPluginReturnPromise);
-           )

ios/App/App/plugins/AbsDownloader.swift

@@ -10,7 +10,12 @@ import Capacitor
 import RealmSwift
 
 @objc(AbsDownloader)
-public class AbsDownloader: CAPPlugin, URLSessionDownloadDelegate {
+public class AbsDownloader: CAPPlugin, CAPBridgedPlugin, URLSessionDownloadDelegate {
+    public var identifier = "AbsDownloaderPlugin"
+    public var jsName = "AbsDownloader"
+    public let pluginMethods: [CAPPluginMethod] = [
+        CAPPluginMethod(name: "downloadLibraryItem", returnType: CAPPluginReturnPromise)
+    ]
     
     static private let downloadsDirectory = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
     

ios/App/App/plugins/AbsFileSystem.m

@@ -1,20 +0,0 @@
-//
-//  AbsFileSystem.m
-//  App
-//
-//  Created by advplyr on 5/13/22.
-//
-
-#import <Foundation/Foundation.h>
-#import <Capacitor/Capacitor.h>
-
-CAP_PLUGIN(AbsFileSystem, "AbsFileSystem",
-           CAP_PLUGIN_METHOD(selectFolder, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(checkFolderPermission, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(scanFolder, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(removeFolder, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(removeLocalLibraryItem, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(scanLocalLibraryItem, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(deleteItem, CAPPluginReturnPromise);
-           CAP_PLUGIN_METHOD(deleteTrackFromItem, CAPPluginReturnPromise);
-           )

ios/App/App/plugins/AbsFileSystem.swift

@@ -9,7 +9,20 @@ import Foundation
 import Capacitor
 
 @objc(AbsFileSystem)
-public class AbsFileSystem: CAPPlugin {
+public class AbsFileSystem: CAPPlugin, CAPBridgedPlugin {
+    public var identifier = "AbsFileSystemPlugin"
+    public var jsName = "AbsFileSystem"
+    public let pluginMethods: [CAPPluginMethod] = [
+        CAPPluginMethod(name: "selectFolder", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "checkFolderPermission", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "scanFolder", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "removeFolder", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "removeLocalLibraryItem", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "scanLocalLibraryItem", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "deleteItem", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "deleteTrackFromItem", returnType: CAPPluginReturnPromise)
+    ]
+    
     private let logger = AppLogger(category: "AbsFileSystem")
     
     @objc func selectFolder(_ call: CAPPluginCall) {

ios/App/App/plugins/AbsLogger.swift

@@ -0,0 +1,47 @@
+//
+//  AbsLogger.swift
+//  Audiobookshelf
+//
+//  Created by advplyr on 4/20/25.
+//
+
+import Foundation
+import Capacitor
+
+@objc(AbsLogger)
+public class AbsLogger: CAPPlugin, CAPBridgedPlugin {
+    public var identifier = "AbsLoggerPlugin"
+    public var jsName = "AbsLogger"
+    public let pluginMethods: [CAPPluginMethod] = [
+        CAPPluginMethod(name: "info", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "error", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getAllLogs", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "clearLogs", returnType: CAPPluginReturnPromise)
+    ]
+    
+    private let logger = AppLogger(category: "AbsLogger")
+    
+    @objc func info(_ call: CAPPluginCall) {
+        let message = call.getString("message") ?? ""
+        let tag = call.getString("tag") ?? ""
+
+        logger.log("[\(tag)] \(message)")
+        call.resolve()
+    }
+    
+    @objc func error(_ call: CAPPluginCall) {
+        let message = call.getString("message") ?? ""
+        let tag = call.getString("tag") ?? ""
+
+        logger.error("[\(tag)] \(message)")
+        call.resolve()
+    }
+    
+    @objc func getAllLogs(_ call: CAPPluginCall) {
+        call.unimplemented("Not implemented on iOS")
+    }
+    
+    @objc func clearLogs(_ call: CAPPluginCall) {
+        call.unimplemented("Not implemented on iOS")
+    }
+}

ios/App/AudiobookshelfUnitTests/Shared/player/util/PlayerTimeUtilsTests.swift

@@ -12,9 +12,36 @@ final class PlayerTimeUtilsTests: XCTestCase {
     
     func testCalcSeekBackTime() {
         let currentTime: Double = 1000
-        let threeSecondsAgo = Date(timeIntervalSinceNow: -3)
-        let lastPlayedMs = threeSecondsAgo.timeIntervalSince1970 * 1000
-        XCTAssertEqual(PlayerTimeUtils.calcSeekBackTime(currentTime: currentTime, lastPlayedMs: lastPlayedMs), 998)
+        
+        // 1. Nil lastPlayedMs → should seek back 5s
+        XCTAssertEqual(PlayerTimeUtils.calcSeekBackTime(currentTime: currentTime, lastPlayedMs: nil), 1000)
+        
+        // 2. Played ~2s ago (<6s) → should seek back 2s
+        let played2sAgo = Date(timeIntervalSinceNow: -2).timeIntervalSince1970 * 1000
+        XCTAssertEqual(PlayerTimeUtils.calcSeekBackTime(currentTime: currentTime, lastPlayedMs: played2sAgo), 1000)
+        
+        // 3. Played ~12s ago (6-12s range) → should seek back 10s
+        let played12sAgo = Date(timeIntervalSinceNow: -12).timeIntervalSince1970 * 1000
+        XCTAssertEqual(PlayerTimeUtils.calcSeekBackTime(currentTime: currentTime, lastPlayedMs: played12sAgo), 997)
+        
+        // 4. Played ~62s ago (12-30s range) → should seek back 15s
+        let played62sAgo = Date(timeIntervalSinceNow: -62).timeIntervalSince1970 * 1000
+        XCTAssertEqual(PlayerTimeUtils.calcSeekBackTime(currentTime: currentTime, lastPlayedMs: played62sAgo), 990)
+        
+        // 5. Played ~302s ago (30-180s range) → should seek back 20s
+        let played302sAgo = Date(timeIntervalSinceNow: -302).timeIntervalSince1970 * 1000
+        XCTAssertEqual(PlayerTimeUtils.calcSeekBackTime(currentTime: currentTime, lastPlayedMs: played302sAgo), 980)
+        
+        // 6. Played ~1802s ago (180-3600s range) → should seek back 25s
+        let played1802sAgo = Date(timeIntervalSinceNow: -1802).timeIntervalSince1970 * 1000
+        XCTAssertEqual(PlayerTimeUtils.calcSeekBackTime(currentTime: currentTime, lastPlayedMs: played1802sAgo), 970)
+        
+        // 8. Edge case where currentTime is small and would go negative
+        XCTAssertEqual(PlayerTimeUtils.calcSeekBackTime(currentTime: 1, lastPlayedMs: played12sAgo), 0)
+        
+        // 9. Edge case: negative lastPlayedMs (should be treated as an old timestamp)
+        XCTAssertEqual(PlayerTimeUtils.calcSeekBackTime(currentTime: currentTime, lastPlayedMs: -5000), 970)
+      
     }
     
     func testCalcSeekBackTimeWithZeroCurrentTime() {
@@ -27,18 +54,18 @@ final class PlayerTimeUtilsTests: XCTestCase {
     func testTimeSinceLastPlayed() throws {
         let fiveSecondsAgo = Date(timeIntervalSinceNow: -5)
         let lastPlayedMs = fiveSecondsAgo.timeIntervalSince1970 * 1000
-        XCTAssertEqual(PlayerTimeUtils.timeSinceLastPlayed(lastPlayedMs)!, -5, accuracy: 1.0)
+        XCTAssertEqual(PlayerTimeUtils.timeSinceLastPlayed(lastPlayedMs)!, 5, accuracy: 1.0)
         XCTAssertNil(PlayerTimeUtils.timeSinceLastPlayed(nil))
     }
     
     func testTimeToSeekBackForSinceLastPlayed() throws {
-        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(nil), 5, "Seeks back 5 seconds for nil")
-        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(5), 2, "Seeks back 2 seconds for less than 6 seconds")
-        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(11), 10, "Seeks back 10 seconds for less than 12 seconds")
-        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(29), 15, "Seeks back 15 seconds for less than 30 seconds")
-        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(179), 20, "Seeks back 20 seconds for less than 2 minutes")
-        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(3599), 25, "Seeks back 25 seconds for less than 59 minutes")
-        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(60000), 29, "Seeks back 29 seconds for anything over 59 minuts")
+        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(nil), 0, "Seeks back 0 seconds for nil")
+        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(5), 0, "Seeks back 0 seconds for less than 10 seconds")
+        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(11), 3, "Seeks back 3 seconds for less than 1 minute")
+        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(298), 10, "Seeks back 10 seconds for less than 5 minutes")
+        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(1798), 20, "Seeks back 20 seconds for less than 30 minutes")
+        XCTAssertEqual(PlayerTimeUtils.timeToSeekBackForSinceLastPlayed(3599), 30, "Seeks back 30 seconds for greater than 30 minutes")
+
     }
 
 }

ios/App/Podfile

@@ -1,6 +1,6 @@
 require_relative '../../node_modules/@capacitor/ios/scripts/pods_helpers'
 
-platform :ios, '13.0'
+platform :ios, '14.0'
 use_frameworks!
 
 # workaround to avoid Xcode caching of Pods that requires
@@ -11,7 +11,7 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'ByteowlsCapacitorFilesharer', :path => '../../node_modules/@byteowls/capacitor-filesharer'
+  pod 'WebnativellcCapacitorFilesharer', :path => '../../node_modules/@webnativellc/capacitor-filesharer'
   pod 'CapacitorCommunityKeepAwake', :path => '../../node_modules/@capacitor-community/keep-awake'
   pod 'CapacitorCommunityVolumeButtons', :path => '../../node_modules/@capacitor-community/volume-buttons'
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'

ios/App/Podfile.lock

@@ -1,41 +1,40 @@
 PODS:
   - Alamofire (5.8.1)
-  - ByteowlsCapacitorFilesharer (6.0.0):
-    - Capacitor
-  - Capacitor (6.2.0):
+  - Capacitor (7.2.0):
     - CapacitorCordova
-  - CapacitorApp (6.0.2):
+  - CapacitorApp (7.0.1):
     - Capacitor
-  - CapacitorBrowser (6.0.4):
+  - CapacitorBrowser (7.0.1):
     - Capacitor
-  - CapacitorClipboard (6.0.2):
+  - CapacitorClipboard (7.0.1):
     - Capacitor
-  - CapacitorCommunityKeepAwake (5.0.1):
+  - CapacitorCommunityKeepAwake (7.0.0):
     - Capacitor
-  - CapacitorCommunityVolumeButtons (6.0.1):
+  - CapacitorCommunityVolumeButtons (7.0.0):
     - Capacitor
-  - CapacitorCordova (6.2.0)
-  - CapacitorDialog (6.0.2):
+  - CapacitorCordova (7.2.0)
+  - CapacitorDialog (7.0.1):
     - Capacitor
-  - CapacitorHaptics (6.0.2):
+  - CapacitorHaptics (7.0.1):
     - Capacitor
-  - CapacitorNetwork (6.0.3):
+  - CapacitorNetwork (7.0.1):
     - Capacitor
-  - CapacitorPreferences (6.0.3):
+  - CapacitorPreferences (7.0.1):
     - Capacitor
-  - CapacitorStatusBar (6.0.2):
+  - CapacitorStatusBar (7.0.1):
     - Capacitor
-  - CordovaPlugins (6.2.0):
+  - CordovaPlugins (6.2.1):
     - CapacitorCordova
   - Realm (10.47.0):
     - Realm/Headers (= 10.47.0)
   - Realm/Headers (10.47.0)
   - RealmSwift (10.47.0):
     - Realm (= 10.47.0)
+  - WebnativellcCapacitorFilesharer (7.0.4):
+    - Capacitor
 
 DEPENDENCIES:
   - Alamofire (~> 5.5)
-  - "ByteowlsCapacitorFilesharer (from `../../node_modules/@byteowls/capacitor-filesharer`)"
   - "Capacitor (from `../../node_modules/@capacitor/ios`)"
   - "CapacitorApp (from `../../node_modules/@capacitor/app`)"
   - "CapacitorBrowser (from `../../node_modules/@capacitor/browser`)"
@@ -50,6 +49,7 @@ DEPENDENCIES:
   - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
   - CordovaPlugins (from `../capacitor-cordova-ios-plugins`)
   - RealmSwift (~> 10)
+  - "WebnativellcCapacitorFilesharer (from `../../node_modules/@webnativellc/capacitor-filesharer`)"
 
 SPEC REPOS:
   trunk:
@@ -58,8 +58,6 @@ SPEC REPOS:
     - RealmSwift
 
 EXTERNAL SOURCES:
-  ByteowlsCapacitorFilesharer:
-    :path: "../../node_modules/@byteowls/capacitor-filesharer"
   Capacitor:
     :path: "../../node_modules/@capacitor/ios"
   CapacitorApp:
@@ -86,26 +84,28 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/status-bar"
   CordovaPlugins:
     :path: "../capacitor-cordova-ios-plugins"
+  WebnativellcCapacitorFilesharer:
+    :path: "../../node_modules/@webnativellc/capacitor-filesharer"
 
 SPEC CHECKSUMS:
   Alamofire: 3ca42e259043ee0dc5c0cdd76c4bc568b8e42af7
-  ByteowlsCapacitorFilesharer: ea14537059851aed44df8c52f0984f61cd34f53b
-  Capacitor: 1f3c7b9802d958cd8c4eb63895fff85dff2e1eea
-  CapacitorApp: 2a8c3a0b0814322e5e6e15fe595f02c3808f0f8b
-  CapacitorBrowser: ef0529d16cd8839281050c350e7bbee4f5c6d65f
-  CapacitorClipboard: 55e0a514f1e97b1409d533266c119dcbff3e78c3
-  CapacitorCommunityKeepAwake: e2ddd50812e3407f8dc3a2c28e97d66e9b59b2f5
-  CapacitorCommunityVolumeButtons: a7612c5996f1c66320ef7a567522346d84a57e22
-  CapacitorCordova: b33e7f4aa4ed105dd43283acdd940964374a87d9
-  CapacitorDialog: e966e2261e1c74a8a502e610dd66b4f97ec6fcca
-  CapacitorHaptics: b53409aaca1203f79c6d0eb3ed5de40556339518
-  CapacitorNetwork: da96b5fff8d05b67f4658503aabb22f65bda2c0f
-  CapacitorPreferences: 9f9935bce493977183511362131a93f7b260191a
-  CapacitorStatusBar: 3b9ac7d0684770522c532d1158a1434512ab1477
-  CordovaPlugins: 08731213c63ccf137c576da2926bf4b3a8c40f17
+  Capacitor: 106e7a4205f4618d582b886a975657c61179138d
+  CapacitorApp: d63334c052278caf5d81585d80b21905c6f93f39
+  CapacitorBrowser: 081852cf532acf77b9d2953f3a88fe5b9711fb06
+  CapacitorClipboard: b98aead5dc7ec595547fc2c5d75bacd2ae3338bc
+  CapacitorCommunityKeepAwake: 00dfd8fa3cca0df003c9a3e2cd7bee678aeec68b
+  CapacitorCommunityVolumeButtons: 8a0443a202ed659688d85f4d44d66f42f62f2b56
+  CapacitorCordova: 5967b9ba03915ef1d585469d6e31f31dc49be96f
+  CapacitorDialog: 9b934329026b2b0ffa56939bb06df3c67541a2ab
+  CapacitorHaptics: 70e47470fa1a6bd6338cd102552e3846b7f9a1b3
+  CapacitorNetwork: 07ec4c69c1bb696f41c23e00d31bda1bbb221bba
+  CapacitorPreferences: cbf154e5e5519b7f5ab33817a334dda1e98387f9
+  CapacitorStatusBar: 275cbf2f4dfc00388f519ef80c7ec22edda342c9
+  CordovaPlugins: 5a72a85b45469e68556bb172409f1b6d57b27236
   Realm: e43fb540ae947497e3ea8a662443256920602060
   RealmSwift: 8b06ed06b5d16749ae0c4d91c0cba414a9e28189
+  WebnativellcCapacitorFilesharer: 10b111373d4dc49608935600dcbcc14605258c73
 
-PODFILE CHECKSUM: 96d7bd74a37a613766883c65fc082490b5dbd7e9
+PODFILE CHECKSUM: 498821c0cfa2508609567fa95d7244c01cbef538
 
 COCOAPODS: 1.12.1

ios/App/Shared/models/DeviceSettings.swift

@@ -19,6 +19,7 @@ class DeviceSettings: Object {
     @Persisted var languageCode: String = "en-us"
     @Persisted var downloadUsingCellular: String = "ALWAYS"
     @Persisted var streamingUsingCellular: String = "ALWAYS"
+    @Persisted var disableSleepTimerFadeOut: Bool = false
 }
 
 func getDefaultDeviceSettings() -> DeviceSettings {
@@ -36,6 +37,7 @@ func deviceSettingsToJSON(settings: DeviceSettings) -> Dictionary<String, Any> {
         "hapticFeedback": settings.hapticFeedback,
         "languageCode": settings.languageCode,
         "downloadUsingCellular": settings.downloadUsingCellular,
-        "streamingUsingCellular": settings.streamingUsingCellular
+        "streamingUsingCellular": settings.streamingUsingCellular,
+        "disableSleepTimerFadeOut": settings.disableSleepTimerFadeOut
     ]
 }

ios/App/Shared/player/AudioPlayer.swift

@@ -45,6 +45,8 @@ class AudioPlayer: NSObject {
     private var queueObserver:NSKeyValueObservation?
     private var queueItemStatusObserver:NSKeyValueObservation?
     
+    private var isRebuildingQueue = false
+    
     // Sleep timer values
     internal var sleepTimeChapterStopAt: Double?
     internal var sleepTimeChapterToken: Any?
@@ -365,7 +367,57 @@ class AudioPlayer: NSObject {
         self.status = .paused
         updateNowPlaying()
     }
-    
+
+    public func startFadeOut() {
+        guard self.isInitialized() else { return }
+        guard let currentTime = self.getCurrentTime() else { return }
+        logger.log("fadeOut: Fading out playback")
+        
+        // Define fade parameters.
+        let fadeDuration: Float = 60.0  // total fade duration in seconds
+        let interval: Float = 1.0      // timer interval in seconds
+
+        // Get the current volume.
+        let initialVolume = self.audioPlayer.volume
+        let targetVolume: Float = 0.0
+        
+        // If the current volume is already at or below zero, just pause.
+        if initialVolume <= targetVolume {
+            self.pause()
+            return
+        }
+        
+        // Calculate the volume change per timer tick.
+        // (targetVolume - initialVolume) is negative since target < initial.
+        let step = (targetVolume - initialVolume) * interval / fadeDuration
+        
+        // Schedule a timer on the main queue to adjust the volume.
+        DispatchQueue.runOnMainQueue { [weak self] in
+            var timer = Timer.scheduledTimer(withTimeInterval: TimeInterval(interval), repeats: true) { t in
+                guard let self = self else {
+                    t.invalidate()
+                    return
+                }
+                
+                // Calculate the new volume.
+                let newVolume = self.audioPlayer.volume + step
+                
+                // Check if the next step would go below zero.
+                if newVolume > targetVolume {
+                    self.audioPlayer.volume = newVolume
+                } else {
+                    // Ensure volume is exactly zero and end fade.
+                    self.audioPlayer.volume = targetVolume
+                    t.invalidate()
+                    self.logger.log("Fadeout: Fade complete, pausing playback")
+                    self.pause()
+                    self.audioPlayer.volume = initialVolume
+                    self.seek(currentTime, from: "fadeOut")
+                }
+            }
+        }
+    }
+
     public func seek(_ to: Double, from: String) {
         logger.log("SEEK: Seek to \(to) from \(from)")
 
@@ -374,6 +426,31 @@ class AudioPlayer: NSObject {
         let indexOfSeek = getItemIndexForTime(time: to)
         logger.log("SEEK: Seek to index \(indexOfSeek) | Current index \(self.currentTrackIndex)")
         
+        if self.audioPlayer.currentItem == nil {
+          self.currentTrackIndex = indexOfSeek
+          
+          try? playbackSession.update {
+              playbackSession.currentTime = to
+          }
+          
+          let playerItems = self.allPlayerItems[indexOfSeek..<self.allPlayerItems.count]
+          
+          DispatchQueue.runOnMainQueue {
+              // Let observers know we're rebuilding the queue
+              // prevents race conditions on stopping sessions if queue is empty.
+              self.isRebuildingQueue = true
+              self.audioPlayer.removeAllItems()
+              for item in Array(playerItems) {
+                  self.audioPlayer.insert(item, after:self.audioPlayer.items().last)
+              }
+              self.isRebuildingQueue = false
+          }
+
+          seekInCurrentTrack(to: to, playbackSession: playbackSession)
+          setupQueueItemStatusObserver()
+          return
+        }
+        
         // Reconstruct queue if seeking to a different track
         if (self.currentTrackIndex != indexOfSeek) {
             // When we seek to a different track, we need to make sure to seek the old track to 0
@@ -389,10 +466,14 @@ class AudioPlayer: NSObject {
             let playerItems = self.allPlayerItems[indexOfSeek..<self.allPlayerItems.count]
             
             DispatchQueue.runOnMainQueue {
+                // Let observers know we're rebuilding the queue
+                // prevents race conditions on stopping sessions if queue is empty.
+                self.isRebuildingQueue = true
                 self.audioPlayer.removeAllItems()
                 for item in Array(playerItems) {
                     self.audioPlayer.insert(item, after:self.audioPlayer.items().last)
                 }
+                self.isRebuildingQueue = false
             }
 
             seekInCurrentTrack(to: to, playbackSession: playbackSession)
@@ -437,9 +518,14 @@ class AudioPlayer: NSObject {
 
     public func getCurrentTime() -> Double? {
         guard let playbackSession = self.getPlaybackSession() else { return nil }
-        let currentTrackTime = self.audioPlayer.currentTime().seconds
         let audioTrack = playbackSession.audioTracks[currentTrackIndex]
         let startOffset = audioTrack.startOffset ?? 0.0
+      
+        // if the currentTrackTime isNan, then fall back on session.
+        let currentTrackTime = self.audioPlayer.currentTime().seconds
+        if currentTrackTime.isNaN {
+          return playbackSession.currentTime
+        }
         return startOffset + currentTrackTime
     }
 
@@ -718,6 +804,15 @@ class AudioPlayer: NSObject {
             if keyPath == #keyPath(AVPlayer.currentItem) {
                 NotificationCenter.default.post(name: NSNotification.Name(PlayerEvents.update.rawValue), object: nil)
                 logger.log("WARNING: Item ended")
+
+                if audioPlayer.currentItem == nil {
+                   // if the queue is rebuilding, we expect the current item may be nil
+                   if self.isRebuildingQueue {
+                     return
+                   }
+                   logger.log("Player ended or next item is nil, marking ended")
+                   self.markAudioSessionAs(active: false)
+                }
             }
         } else {
             super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context)

ios/App/Shared/player/AudioPlayerSleepTimer.swift

@@ -125,7 +125,11 @@ extension AudioPlayer {
         if var sleepTimeRemaining = self.sleepTimeRemaining {
             sleepTimeRemaining -= 1
             self.sleepTimeRemaining = sleepTimeRemaining
-            
+          
+            if sleepTimeRemaining == 60 && self.isSleepTimerFadeOutEnabled() {
+                self.startFadeOut()
+            }
+          
             // Handle the sleep if the timer has expired
             if sleepTimeRemaining <= 0 {
                 self.handleSleepEnd()
@@ -154,5 +158,9 @@ extension AudioPlayer {
     private func isChapterSleepTimerSet() -> Bool {
         return self.sleepTimeChapterStopAt != nil
     }
-    
+  
+    private func isSleepTimerFadeOutEnabled() -> Bool {
+      let deviceSettings = Database.shared.getDeviceSettings()
+      return !deviceSettings.disableSleepTimerFadeOut
+    }
 }

ios/App/Shared/player/util/PlayerTimeUtils.swift

@@ -21,27 +21,27 @@ class PlayerTimeUtils {
     static internal func timeSinceLastPlayed(_ lastPlayedMs: Double?) -> TimeInterval? {
         guard let lastPlayedMs = lastPlayedMs else { return nil }
         let lastPlayed = Date(timeIntervalSince1970: lastPlayedMs / 1000)
-        return lastPlayed.timeIntervalSinceNow
+        return Date().timeIntervalSince(lastPlayed)
     }
     
     static internal func timeToSeekBackForSinceLastPlayed(_ sinceLastPlayed: TimeInterval?) -> TimeInterval {
+        if isAutoRewindDisabled(){
+          return 0
+        }
         if let sinceLastPlayed = sinceLastPlayed {
-            if sinceLastPlayed < 6 {
-                return 2
-            } else if sinceLastPlayed < 12 {
-                return 10
-            } else if sinceLastPlayed < 30 {
-                return 15
-            } else if sinceLastPlayed < 180 {
-                return 20
-            } else if sinceLastPlayed < 3600 {
-                return 25
-            } else {
-                return 29
-            }
+          if sinceLastPlayed < 10 { return 0 } // 10s or less = no seekback
+          else if sinceLastPlayed < 60 { return 3 } // 10s to 1m = jump back 3s
+          else if sinceLastPlayed < 300 { return 10 } // 1m to 5m = jump back 10s
+          else if sinceLastPlayed < 1800 { return 20 } // 5m to 30m = jump back 20s
+          else { return 30 } // 30m and up = jump back 30s
         } else {
-            return 5
+            return 0
         }
     }
     
+    static internal func isAutoRewindDisabled() -> Bool {
+      let deviceSettings = Database.shared.getDeviceSettings()
+      return deviceSettings.disableAutoRewind
+    }
+    
 }