Fix play at start time

iOS fix local episode duration and playback session title, version bump 0.9.63
Version bump 0.9.63
2026-07-28 07:28:35 +02:00 · 2023-03-06 16:59:49 -06:00 · 2023-03-06 16:47:38 -06:00 · 2023-03-06 16:11:20 -06:00 · 2023-03-06 15:51:11 -06:00 · 2023-03-06 15:46:07 -06:00
74 changed files with 1713 additions and 663 deletions
@@ -35,8 +35,8 @@ android {
        applicationId "com.audiobookshelf.app"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 93
-        versionName "0.9.62-beta"
+        versionCode 94
+        versionName "0.9.63-beta"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        aaptOptions {
             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
@@ -74,8 +74,6 @@ configurations.all {
    force("androidx.media:media:$androidx_media_version")
    force("org.jetbrains.kotlinx:kotlinx-coroutines-core:$kotlin_coroutines_version")
    force("org.jetbrains.kotlinx:kotlinx-coroutines-android:$kotlin_coroutines_version")
-
-//    failOnVersionConflict()
  }
 }

@@ -23,18 +23,18 @@
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true" >

-<!-- TODO: Incomplete desktop widget -->
-<!--        <receiver-->
-<!--            android:name=".NewAppWidget"-->
-<!--            android:exported="true" >-->
-<!--            <intent-filter>-->
-<!--                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />-->
-<!--            </intent-filter>-->
+        <!-- Android app widget -->
+        <receiver
+          android:name="MediaPlayerWidget"
+          android:exported="false">
+          <intent-filter>
+            <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
+          </intent-filter>

-<!--            <meta-data-->
-<!--                android:name="android.appwidget.provider"-->
-<!--                android:resource="@xml/new_app_widget_info" />-->
-<!--        </receiver>-->
+          <meta-data
+            android:name="android.appwidget.provider"
+            android:resource="@xml/media_player_widget_info" />
+        </receiver>

        <!-- Used by Android Auto -->
        <meta-data
@@ -0,0 +1,123 @@
+package com.audiobookshelf.app
+
+import android.app.PendingIntent
+import android.appwidget.AppWidgetManager
+import android.appwidget.AppWidgetProvider
+import android.content.ComponentName
+import android.content.Context
+import android.content.Intent
+import android.graphics.Bitmap
+import android.net.Uri
+import android.support.v4.media.session.PlaybackStateCompat
+import android.util.Log
+import android.view.View
+import android.widget.RemoteViews
+import androidx.media.session.MediaButtonReceiver
+import com.audiobookshelf.app.data.PlaybackSession
+import com.audiobookshelf.app.device.DeviceManager
+import com.audiobookshelf.app.device.WidgetEventEmitter
+import com.audiobookshelf.app.player.PlayerNotificationService
+import com.bumptech.glide.Glide
+import com.bumptech.glide.request.RequestOptions
+import com.bumptech.glide.request.target.AppWidgetTarget
+import com.bumptech.glide.request.transition.Transition
+
+/**
+ * Implementation of App Widget functionality.
+ */
+class MediaPlayerWidget : AppWidgetProvider() {
+  val tag = "MediaPlayerWidget"
+    override fun onUpdate(context: Context, appWidgetManager: AppWidgetManager, appWidgetIds: IntArray) {
+      // There may be multiple widgets active, so update all of them
+      for (appWidgetId in appWidgetIds) {
+        updateAppWidget(context, appWidgetManager, appWidgetId, null, false, PlayerNotificationService.isClosed)
+      }
+    }
+
+  override fun onEnabled(context: Context) {
+    Log.i(tag, "onEnabled check context ${context.packageName}")
+
+    DeviceManager.deviceData.lastPlaybackSession?.let {
+      val appWidgetManager = AppWidgetManager.getInstance(context)
+      val componentName = ComponentName(context, MediaPlayerWidget::class.java)
+      val ids = appWidgetManager.getAppWidgetIds(componentName)
+      Log.d(tag, "Setting initial widget state with last playback session ${it.displayTitle}")
+      for (widgetId in ids) {
+        updateAppWidget(context, appWidgetManager, widgetId, it, false, true)
+      }
+    }
+
+    // Enter relevant functionality for when the first widget is created
+    DeviceManager.widgetUpdater = (object : WidgetEventEmitter {
+      override fun onPlayerChanged(pns: PlayerNotificationService) {
+        val isPlaying = pns.currentPlayer.isPlaying
+
+        val appWidgetManager = AppWidgetManager.getInstance(context)
+        val componentName = ComponentName(context, MediaPlayerWidget::class.java)
+        val ids = appWidgetManager.getAppWidgetIds(componentName)
+
+        val playbackSession = pns.getCurrentPlaybackSessionCopy()
+
+        for (widgetId in ids) {
+          updateAppWidget(context, appWidgetManager, widgetId, playbackSession, isPlaying, PlayerNotificationService.isClosed)
+        }
+      }
+    })
+  }
+
+    override fun onDisabled(context: Context) {
+        // Enter relevant functionality for when the last widget is disabled
+    }
+}
+
+internal fun updateAppWidget(context: Context, appWidgetManager: AppWidgetManager, appWidgetId: Int, playbackSession: PlaybackSession?, isPlaying:Boolean, isAppClosed:Boolean) {
+  val tag = "MediaPlayerWidget"
+  val views = RemoteViews(context.packageName, R.layout.media_player_widget)
+
+  val wholeWidgetClickI = Intent(context, MainActivity::class.java)
+  wholeWidgetClickI.flags = Intent.FLAG_ACTIVITY_CLEAR_TOP or Intent.FLAG_ACTIVITY_NEW_TASK
+  val wholeWidgetClickPI = PendingIntent.getActivity(
+    context,
+    System.currentTimeMillis().toInt(),
+    wholeWidgetClickI,
+    PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
+  )
+
+  val playPausePI = MediaButtonReceiver.buildMediaButtonPendingIntent(context, PlaybackStateCompat.ACTION_PLAY_PAUSE)
+  views.setOnClickPendingIntent(R.id.widgetPlayPauseButton, playPausePI)
+
+  val fastForwardPI = MediaButtonReceiver.buildMediaButtonPendingIntent(context, PlaybackStateCompat.ACTION_FAST_FORWARD)
+  views.setOnClickPendingIntent(R.id.widgetFastForwardButton, fastForwardPI)
+
+  val rewindPI = MediaButtonReceiver.buildMediaButtonPendingIntent(context, PlaybackStateCompat.ACTION_REWIND)
+  views.setOnClickPendingIntent(R.id.widgetRewindButton, rewindPI)
+
+  // Show/Hide button container
+  views.setViewVisibility(R.id.widgetButtonContainer, if (isAppClosed) View.GONE else View.VISIBLE)
+
+  views.setOnClickPendingIntent(R.id.widgetBackground, wholeWidgetClickPI)
+  
+  val imageUri = playbackSession?.getCoverUri() ?: Uri.parse("android.resource://${BuildConfig.APPLICATION_ID}/" + R.drawable.icon)
+  val awt: AppWidgetTarget = object : AppWidgetTarget(context.applicationContext, R.id.widgetAlbumArt, views, appWidgetId) {
+    override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
+      super.onResourceReady(resource, transition)
+    }
+  }
+
+  val artist = playbackSession?.displayAuthor ?: "Unknown"
+  views.setTextViewText(R.id.widgetArtistText, artist)
+
+  val title = playbackSession?.displayTitle ?: "Unknown"
+  views.setTextViewText(R.id.widgetMediaTitle, title)
+
+  val options = RequestOptions().override(300, 300).placeholder(R.drawable.icon).error(R.drawable.icon)
+  Glide.with(context.applicationContext).asBitmap().load(imageUri).apply(options).into(awt)
+
+  Log.i(tag, "Update App Widget | Is Playing=$isPlaying | isAppClosed=$isAppClosed")
+
+  val playPauseResource = if (isPlaying) R.drawable.ic_media_pause_dark else R.drawable.ic_media_play_dark
+  views.setImageViewResource(R.id.widgetPlayPauseButton, playPauseResource)
+
+  // Instruct the widget manager to update the widget
+  appWidgetManager.updateAppWidget(appWidgetId, views)
+}
@@ -1,96 +0,0 @@
-package com.audiobookshelf.app
-
-import android.app.PendingIntent
-import android.appwidget.AppWidgetManager
-import android.appwidget.AppWidgetProvider
-import android.content.ComponentName
-import android.content.Context
-import android.content.Intent
-import android.graphics.Bitmap
-import android.net.Uri
-import android.support.v4.media.session.PlaybackStateCompat.ACTION_PLAY_PAUSE
-import android.util.Log
-import android.widget.RemoteViews
-import androidx.media.session.MediaButtonReceiver.buildMediaButtonPendingIntent
-import com.audiobookshelf.app.device.DeviceManager
-import com.audiobookshelf.app.device.WidgetEventEmitter
-import com.audiobookshelf.app.player.PlayerNotificationService
-import com.bumptech.glide.Glide
-import com.bumptech.glide.request.RequestOptions
-import com.bumptech.glide.request.target.AppWidgetTarget
-import com.bumptech.glide.request.transition.Transition
-
-/**
- * Implementation of App Widget functionality.
- */
-class NewAppWidget : AppWidgetProvider() {
-  val tag = "NewAppWidget"
-
-    override fun onUpdate(context: Context, appWidgetManager: AppWidgetManager, appWidgetIds: IntArray) {
-        // There may be multiple widgets active, so update all of them
-        for (appWidgetId in appWidgetIds) {
-            updateAppWidget(context, appWidgetManager, appWidgetId, null,false)
-        }
-    }
-
-    override fun onEnabled(context: Context) {
-      Log.w(tag, "onEnabled check context ${context.packageName}")
-
-        // Enter relevant functionality for when the first widget is created
-      DeviceManager.widgetUpdater = (object : WidgetEventEmitter {
-        override fun onPlayerChanged(pns:PlayerNotificationService) {
-          val isPlaying = pns.currentPlayer.isPlaying
-          Log.i(tag, "onPlayerChanged | Is Playing? $isPlaying")
-
-          val appWidgetManager = AppWidgetManager.getInstance(context)
-          val componentName = ComponentName(context, NewAppWidget::class.java)
-          val ids = appWidgetManager.getAppWidgetIds(componentName)
-
-          val playbackSession = pns.getCurrentPlaybackSessionCopy()
-          val cover = playbackSession?.getCoverUri()
-
-          for (widgetId in ids) {
-            updateAppWidget(context, appWidgetManager, widgetId, cover, isPlaying)
-          }
-        }
-      })
-    }
-
-    override fun onDisabled(context: Context) {
-        // Enter relevant functionality for when the last widget is disabled
-    }
-}
-
-internal fun updateAppWidget(context: Context, appWidgetManager: AppWidgetManager, appWidgetId: Int, coverUri:Uri?, isPlaying:Boolean) {
-
-    val views = RemoteViews(context.packageName, R.layout.new_app_widget)
-
-    val playPausePI = buildMediaButtonPendingIntent(context, ACTION_PLAY_PAUSE)
-    views.setOnClickPendingIntent(R.id.playPauseIcon, playPausePI)
-
-    val wholeWidgetClickI = Intent(context, MainActivity::class.java)
-    wholeWidgetClickI.flags = Intent.FLAG_ACTIVITY_CLEAR_TOP or Intent.FLAG_ACTIVITY_NEW_TASK
-    val wholeWidgetClickPI = PendingIntent.getActivity(
-      context,
-      System.currentTimeMillis().toInt(),
-      wholeWidgetClickI,
-      PendingIntent.FLAG_UPDATE_CURRENT or PendingIntent.FLAG_IMMUTABLE
-    )
-    views.setOnClickPendingIntent(R.id.appWidget, wholeWidgetClickPI)
-
-    val imageUri = coverUri ?: Uri.parse("android.resource://com.audiobookshelf.app/" + R.drawable.icon)
-    val awt: AppWidgetTarget = object : AppWidgetTarget(context.applicationContext, R.id.imageView, views, appWidgetId) {
-      override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
-        super.onResourceReady(resource, transition)
-      }
-    }
-
-    val options = RequestOptions().override(300, 300).placeholder(R.drawable.icon).error(R.drawable.icon)
-    Glide.with(context.applicationContext).asBitmap().load(imageUri).apply(options).into(awt)
-
-    val playPauseResource = if (isPlaying) R.drawable.ic_media_pause_dark else R.drawable.ic_media_play_dark
-    views.setImageViewResource(R.id.playPauseIcon, playPauseResource)
-
-    // Instruct the widget manager to update the widget
-    appWidgetManager.updateAppWidget(appWidgetId, views)
-}
@@ -5,6 +5,7 @@ import android.net.Uri
 import android.os.Bundle
 import android.support.v4.media.MediaDescriptionCompat
 import androidx.media.utils.MediaConstants
+import com.audiobookshelf.app.BuildConfig
 import com.audiobookshelf.app.R
 import com.audiobookshelf.app.device.DeviceManager
 import com.fasterxml.jackson.annotation.JsonIgnore
@@ -41,7 +42,7 @@ class LibraryItem(
  @JsonIgnore
  fun getCoverUri(): Uri {
    if (media.coverPath == null) {
-      return Uri.parse("android.resource://com.audiobookshelf.app/" + R.drawable.icon)
+      return Uri.parse("android.resource://${BuildConfig.APPLICATION_ID}/" + R.drawable.icon)
    }

    return Uri.parse("${DeviceManager.serverAddress}/api/items/$id/cover?token=${DeviceManager.token}")
@@ -10,6 +10,7 @@ import android.provider.MediaStore
 import android.support.v4.media.MediaDescriptionCompat
 import android.util.Log
 import androidx.media.utils.MediaConstants
+import com.audiobookshelf.app.BuildConfig
 import com.audiobookshelf.app.R
 import com.audiobookshelf.app.device.DeviceManager
 import com.fasterxml.jackson.annotation.JsonIgnore
@@ -46,7 +47,7 @@ class LocalLibraryItem(

  @JsonIgnore
  fun getCoverUri(): Uri {
-    return if (coverContentUrl != null) Uri.parse(coverContentUrl) else Uri.parse("android.resource://com.audiobookshelf.app/" + R.drawable.icon)
+    return if (coverContentUrl != null) Uri.parse(coverContentUrl) else Uri.parse("android.resource://${BuildConfig.APPLICATION_ID}/" + R.drawable.icon)
  }

  @JsonIgnore
@@ -82,18 +83,21 @@ class LocalLibraryItem(
    val mediaProgress = DeviceManager.dbManager.getLocalMediaProgress(mediaProgressId)
    val currentTime = mediaProgress?.currentTime ?: 0.0

-    // TODO: Clean up add mediaType methods for displayTitle and displayAuthor
+
    val mediaMetadata = media.metadata
    val chapters = if (mediaType == "book") (media as Book).chapters else mutableListOf()
    var audioTracks = media.getAudioTracks() as MutableList<AudioTrack>
    val authorName = mediaMetadata.getAuthorDisplayName()
+    val displayTitle = episode?.title ?: mediaMetadata.title
+    var duration = getDuration()
    if (episode != null) { // Get podcast episode audio track
      episode.audioTrack?.let { at -> mutableListOf(at) }?.let { tracks -> audioTracks = tracks }
+      duration = episode.audioTrack?.duration ?: 0.0
      Log.d("LocalLibraryItem", "getPlaybackSession: Got podcast episode audio track ${audioTracks.size}")
    }

    val dateNow = System.currentTimeMillis()
-    return PlaybackSession(sessionId,serverUserId,libraryItemId,episode?.serverEpisodeId, mediaType, mediaMetadata, chapters ?: mutableListOf(), mediaMetadata.title, authorName,null,getDuration(),PLAYMETHOD_LOCAL,dateNow,0L,0L, audioTracks,currentTime,null,this,localEpisodeId,serverConnectionConfigId, serverAddress, "exo-player")
+    return PlaybackSession(sessionId,serverUserId,libraryItemId,episode?.serverEpisodeId, mediaType, mediaMetadata, chapters ?: mutableListOf(), displayTitle, authorName,null,duration,PLAYMETHOD_LOCAL,dateNow,0L,0L, audioTracks,currentTime,null,this,localEpisodeId,serverConnectionConfigId, serverAddress, "exo-player")
  }

  @JsonIgnore
@@ -6,6 +6,8 @@ import android.net.Uri
 import android.os.Build
 import android.provider.MediaStore
 import android.support.v4.media.MediaMetadataCompat
+import com.audiobookshelf.app.BuildConfig
+import com.audiobookshelf.app.R
 import com.audiobookshelf.app.device.DeviceManager
 import com.audiobookshelf.app.media.MediaProgressSyncData
 import com.fasterxml.jackson.annotation.JsonIgnore
@@ -136,9 +138,9 @@ class PlaybackSession(

  @JsonIgnore
  fun getCoverUri(): Uri {
-    if (localLibraryItem?.coverContentUrl != null) return Uri.parse(localLibraryItem?.coverContentUrl) ?: Uri.parse("android.resource://com.audiobookshelf.app/" + com.audiobookshelf.app.R.drawable.icon)
+    if (localLibraryItem?.coverContentUrl != null) return Uri.parse(localLibraryItem?.coverContentUrl) ?: Uri.parse("android.resource://${BuildConfig.APPLICATION_ID}/" + R.drawable.icon)

-    if (coverPath == null) return Uri.parse("android.resource://com.audiobookshelf.app/" + com.audiobookshelf.app.R.drawable.icon)
+    if (coverPath == null) return Uri.parse("android.resource://${BuildConfig.APPLICATION_ID}/" + R.drawable.icon)
    return Uri.parse("$serverAddress/api/items/$libraryItemId/cover?token=${DeviceManager.token}")
  }

@@ -137,6 +137,8 @@ class SleepTimerManager constructor(private val playerNotificationService: Playe
    sleepTimerRunning = false
    isAutoSleepTimer = false
    playerNotificationService.unregisterSensor()
+
+    setVolume(1f)
  }

  fun getSleepTimerTime():Long {
@@ -8,6 +8,7 @@ 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
 import com.google.android.exoplayer2.Player
@@ -83,7 +84,7 @@ class AbMediaDescriptionAdapter constructor(private val controller: MediaControl

        Glide.with(playerNotificationService)
          .asBitmap()
-          .load(Uri.parse("android.resource://com.audiobookshelf.app/" + R.drawable.icon))
+          .load(Uri.parse("android.resource://${BuildConfig.APPLICATION_ID}/" + R.drawable.icon))
          .submit(NOTIFICATION_LARGE_ICON_SIZE, NOTIFICATION_LARGE_ICON_SIZE)
          .get()
      }
@@ -190,6 +190,14 @@ class MediaSessionCallback(var playerNotificationService:PlayerNotificationServi
              handleMediaButtonClickCount()
            }
          }
+          KeyEvent.KEYCODE_MEDIA_FAST_FORWARD -> {
+            Log.d(tag, "handleCallMediaButton: Media Fast Forward")
+            playerNotificationService.jumpForward()
+          }
+          KeyEvent.KEYCODE_MEDIA_REWIND -> {
+            Log.d(tag, "handleCallMediaButton: Media Rewind")
+            playerNotificationService.jumpBackward()
+          }
        }
      }

@@ -224,12 +232,6 @@ class MediaSessionCallback(var playerNotificationService:PlayerNotificationServi
          KeyEvent.KEYCODE_MEDIA_PREVIOUS -> {
            playerNotificationService.jumpBackward()
          }
-          KeyEvent.KEYCODE_MEDIA_FAST_FORWARD -> {
-            playerNotificationService.jumpForward()
-          }
-          KeyEvent.KEYCODE_MEDIA_REWIND -> {
-            playerNotificationService.jumpBackward()
-          }
          KeyEvent.KEYCODE_MEDIA_STOP -> {
            playerNotificationService.closePlayback()
          }
@@ -1,6 +1,8 @@
 package com.audiobookshelf.app.player

 import android.app.*
+import android.appwidget.AppWidgetManager
+import android.content.ComponentName
 import android.content.Context
 import android.content.Intent
 import android.graphics.Bitmap
@@ -21,12 +23,15 @@ import android.support.v4.media.session.MediaControllerCompat
 import android.support.v4.media.session.MediaSessionCompat
 import android.support.v4.media.session.PlaybackStateCompat
 import android.util.Log
+import android.view.View
+import android.widget.RemoteViews
 import androidx.annotation.RequiresApi
 import androidx.core.app.NotificationCompat
 import androidx.core.content.ContextCompat
 import androidx.media.MediaBrowserServiceCompat
 import androidx.media.utils.MediaConstants
 import com.audiobookshelf.app.BuildConfig
+import com.audiobookshelf.app.MediaPlayerWidget
 import com.audiobookshelf.app.R
 import com.audiobookshelf.app.data.*
 import com.audiobookshelf.app.data.DeviceInfo
@@ -170,12 +175,16 @@ class PlayerNotificationService : MediaBrowserServiceCompat()  {
    }

    Log.d(tag, "onDestroy")
+    isStarted = false
+    isClosed = true
+    DeviceManager.widgetUpdater?.onPlayerChanged(this)
+
    playerNotificationManager.setPlayer(null)
    mPlayer.release()
    castPlayer?.release()
    mediaSession.release()
    mediaProgressSyncer.reset()
-    isStarted = false
+

    super.onDestroy()
  }
@@ -184,6 +193,7 @@ class PlayerNotificationService : MediaBrowserServiceCompat()  {
  override fun onTaskRemoved(rootIntent: Intent?) {
    super.onTaskRemoved(rootIntent)
    Log.d(tag, "onTaskRemoved")
+
    stopSelf()
  }

@@ -258,7 +268,7 @@ class PlayerNotificationService : MediaBrowserServiceCompat()  {
    playerNotificationManager.setPriority(NotificationCompat.PRIORITY_MAX)
    playerNotificationManager.setUseFastForwardActionInCompactView(true)
    playerNotificationManager.setUseRewindActionInCompactView(true)
-    playerNotificationManager.setSmallIcon(R.drawable.exo_icon_localaudio)
+    playerNotificationManager.setSmallIcon(R.drawable.icon_monochrome)

    // Unknown action
    playerNotificationManager.setBadgeIconType(NotificationCompat.BADGE_ICON_LARGE)
@@ -409,9 +419,12 @@ class PlayerNotificationService : MediaBrowserServiceCompat()  {
    DeviceManager.setLastPlaybackSession(playbackSession) // Save playback session to use when app is closed

    Log.d(tag, "Set CurrentPlaybackSession MediaPlayer ${currentPlaybackSession?.mediaPlayer}")
-
+    // Notify client
    clientEventEmitter?.onPlaybackSession(playbackSession)

+    // Update widget
+    DeviceManager.widgetUpdater?.onPlayerChanged(this)
+
    if (mediaItems.isEmpty()) {
      Log.e(tag, "Invalid playback session no media items to play")
      currentPlaybackSession = null
@@ -378,7 +378,9 @@ class AbsAudioPlayer : Plugin() {

  @PluginMethod
  fun cancelSleepTimer(call: PluginCall) {
-    playerNotificationService.sleepTimerManager.cancelSleepTimer()
+    Handler(Looper.getMainLooper()).post {
+      playerNotificationService.sleepTimerManager.cancelSleepTimer()
+    }
    call.resolve()
  }

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="862dp"
+    android:height="1024dp"
+    android:viewportWidth="862"
+    android:viewportHeight="1024">
+  <path
+      android:fillColor="#FFFFFF"
+      android:pathData="M855,504.4c-5.3,-4.4 -13.5,-10.9 -24.7,-18.6v-86.5c0,-220.5 -178.8,-399.3 -399.3,-399.3v0c-220.5,0 -399.3,178.8 -399.3,399.3v86.5c-11.1,7.7 -19.4,14.2 -24.7,18.6 -4.4,3.7 -7.1,9.1 -7.1,15.2 0,0 0,0 0,0v-0,103.6c0,0 0,0 0,0 0,6.1 2.8,11.6 7.1,15.2l0,0c12.3,10.3 40.6,31.8 84.7,53.8v10.1c0,27.2 17.5,49.2 39.1,49.2v0c21.6,0 39.1,-22 39.1,-49.2v-248.5c0,-27.2 -17.5,-49.2 -39.1,-49.2v0c-20.7,0 -37.7,20.2 -39,45.8l-0.1,0v-51.2c0,-187.4 151.9,-339.3 339.3,-339.3v0c187.4,0 339.3,151.9 339.3,339.3v51.2l-0.1,-0c-1.4,-25.6 -18.3,-45.8 -39,-45.8v0c-21.6,0 -39.1,22 -39.1,49.2v248.5c0,27.2 17.5,49.2 39.1,49.2v0c21.6,0 39.1,-22 39.1,-49.2v-10.1c44,-22.1 72.3,-43.6 84.7,-53.8 4.4,-3.7 7.1,-9.1 7.1,-15.2 0,-0 0,-0 0,-0v0,-103.6c0,-0 0,-0 0,-0 0,-6.1 -2.8,-11.6 -7.1,-15.2l-0,-0zM291.8,936.4c26.1,0 47.3,-21.2 47.3,-47.3v0,-529.4c0,-0 0,-0 0,-0 0,-26.1 -21.2,-47.3 -47.3,-47.3h-48.8c-26.1,0 -47.3,21.2 -47.3,47.3v0,529.4c0,26.1 21.2,47.3 47.3,47.3 0,0 0,0 0,0v0zM213.5,439.4h107.8v11.3h-107.8zM455.5,936.4c26.1,0 47.3,-21.2 47.3,-47.3v0,-529.4c0,-0 0,-0 0,-0 0,-26.1 -21.2,-47.3 -47.3,-47.3h-48.8c-26.1,0 -47.3,21.2 -47.3,47.3v0,529.4c0,26.1 21.2,47.3 47.3,47.3 0,0 0,0 0,0v0zM377.2,439.4h107.8v11.3h-107.8zM619.1,936.4c26.1,0 47.3,-21.2 47.3,-47.3v0,-529.4c0,-0 0,-0 0,-0 0,-26.1 -21.2,-47.3 -47.3,-47.3h-48.8c-26.1,0 -47.3,21.2 -47.3,47.3v0,529.4c0,26.1 21.2,47.3 47.3,47.3 0,0 0,0 0,0v0zM540.8,439.4h107.8v11.3h-107.8zM114.1,952.7h633.9c19.7,0 35.6,15.9 35.6,35.6v0c0,19.7 -15.9,35.6 -35.6,35.6h-633.9c-19.7,0 -35.6,-15.9 -35.6,-35.6v-0c0,-19.7 15.9,-35.6 35.6,-35.6z"/>
+</vector>
@@ -0,0 +1,108 @@
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
+  android:id="@+id/widgetBackground"
+  android:layout_width="fill_parent"
+  android:layout_height="fill_parent"
+  android:orientation="horizontal"
+  android:theme="@style/AppTheme.AppWidgetContainer"
+  style="@style/Widget.Android.AppWidget.Container">
+
+  <LinearLayout
+    android:layout_width="0dp"
+    android:layout_height="match_parent"
+    android:layout_weight="3"
+    android:background="?android:attr/colorAccent"
+    android:theme="@style/MediaPlayerWidgetTheme"
+    android:orientation="horizontal">
+
+    <ImageView
+      android:id="@+id/widgetAlbumArt"
+      android:layout_width="0dp"
+      android:layout_height="match_parent"
+      android:layout_weight="2"
+      android:scaleType="centerCrop"
+      android:src="@drawable/icon" />
+
+    <LinearLayout
+      android:layout_width="0dp"
+      android:layout_height="match_parent"
+      android:layout_weight="3"
+      android:layout_marginVertical="8dp"
+      android:orientation="vertical"
+      android:gravity="center_vertical">
+
+      <TextView
+        android:id="@+id/widgetArtistText"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="2"
+        android:layout_marginLeft="8dp"
+        android:gravity="bottom"
+        android:ellipsize="end"
+        android:maxLines="1"
+        android:text="Artist"/>
+
+      <TextView
+        android:id="@+id/widgetMediaTitle"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="2"
+        android:layout_marginLeft="8dp"
+        android:gravity="top"
+        android:ellipsize="end"
+        android:maxLines="1"
+        android:text="Title"/>
+
+      <LinearLayout
+        android:id="@+id/widgetButtonContainer"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
+        android:layout_weight="3"
+        android:orientation="horizontal"
+        android:background="?android:attr/colorAccent"
+        android:theme="@style/MediaPlayerWidgetTheme">
+
+        <ImageView
+          android:id="@+id/widgetRewindButton"
+          android:layout_width="0dp"
+          android:layout_height="match_parent"
+          android:layout_weight="1"
+          android:layout_margin="8dp"
+          android:src="@drawable/exo_icon_rewind"
+          style="@style/Widget.Android.AppWidget.InnerView"/>
+
+        <ImageView
+          android:id="@+id/widgetPlayPauseButton"
+          android:layout_width="0dp"
+          android:layout_height="match_parent"
+          android:layout_weight="1"
+          android:layout_margin="6dp"
+          android:src="@drawable/ic_media_play_dark" />
+
+        <ImageView
+          android:id="@+id/widgetFastForwardButton"
+          android:layout_width="0dp"
+          android:layout_height="match_parent"
+          android:layout_weight="1"
+          android:layout_margin="8dp"
+          android:src="@drawable/exo_icon_fastforward" />
+      </LinearLayout>
+
+    </LinearLayout>
+
+    <LinearLayout
+      android:layout_width="36dp"
+      android:layout_height="match_parent"
+      android:orientation="vertical">
+
+      <ImageView
+        android:id="@+id/tinyCornerIcon"
+        android:layout_width="16dp"
+        android:layout_height="16dp"
+        android:layout_margin="6dp"
+        android:adjustViewBounds ="true"
+        android:src="@drawable/icon_monochrome" />
+    </LinearLayout>
+
+  </LinearLayout>
+</LinearLayout>
@@ -1,26 +0,0 @@
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto"
-  style="@style/Widget.Android.AppWidget.Container"
-    android:id="@+id/appWidget"
-    android:theme="@style/AppTheme.AppWidgetContainer"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent">
-
-  <ImageView
-    android:id="@+id/imageView"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:layout_centerInParent="true"
-    android:adjustViewBounds="true"
-    android:alpha="0.75"
-    android:contentDescription="Cover image"
-    android:visibility="visible" />
-
-  <ImageView
-    android:id="@+id/playPauseIcon"
-    android:layout_width="71dp"
-    android:layout_height="55dp"
-    android:layout_centerInParent="true"
-    app:srcCompat="@drawable/cast_ic_expanded_controller_play" />
-
-</RelativeLayout>
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <!--
+    Having themes.xml for night-v31 because of the priority order of the resource qualifiers.
+    -->
+  <style name="AppTheme.AppWidgetContainerParent" parent="@android:style/Theme.DeviceDefault.DayNight">
+    <item name="appWidgetRadius">@android:dimen/system_app_widget_background_radius</item>
+    <item name="appWidgetInnerRadius">@android:dimen/system_app_widget_inner_radius</item>
+  </style>
+</resources>
@@ -0,0 +1,16 @@
+<resources>
+
+  <style name="Widget.Android.AppWidget.Container" parent="android:Widget">
+    <item name="android:id">@android:id/background</item>
+    <item name="android:padding">?attr/appWidgetPadding</item>
+    <item name="android:background">@drawable/app_widget_background</item>
+    <item name="android:clipToOutline">true</item>
+  </style>
+
+  <style name="Widget.Android.AppWidget.InnerView" parent="android:Widget">
+    <item name="android:padding">?attr/appWidgetPadding</item>
+<!--    <item name="android:background">@drawable/app_widget_inner_view_background</item>-->
+<!--    <item name="android:textColor">?android:attr/textColorPrimary</item>-->
+    <item name="android:clipToOutline">true</item>
+  </style>
+</resources>
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <!--
+    Having themes.xml for v31 variant because @android:dimen/system_app_widget_background_radius
+     and @android:dimen/system_app_widget_internal_padding requires API level 31
+    -->
+  <style name="AppTheme.AppWidgetContainerParent" parent="@android:style/Theme.DeviceDefault.DayNight">
+    <item name="appWidgetRadius">@android:dimen/system_app_widget_background_radius</item>
+    <item name="appWidgetInnerRadius">@android:dimen/system_app_widget_inner_radius</item>
+  </style>
+</resources>
@@ -1,7 +1,9 @@
 <resources>
-    <declare-styleable name="AppWidgetAttrs">
-        <attr name="appWidgetPadding" format="dimension" />
-        <attr name="appWidgetInnerRadius" format="dimension" />
-        <attr name="appWidgetRadius" format="dimension" />
-    </declare-styleable>
-</resources>
+  <declare-styleable name="AppWidgetAttrs">
+    <attr name="appWidgetPadding" format="dimension" />
+    <attr name="appWidgetInnerRadius" format="dimension" />
+    <attr name="appWidgetRadius" format="dimension" />
+    <attr name="backgroundRadius" format="dimension" />
+    <attr name="appWidgetViewPadding" format="dimension" />
+  </declare-styleable>
+</resources>
@@ -1,33 +1,42 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>

-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
-        <!-- Customize your theme here. -->
-        <item name="colorPrimary">@color/colorPrimary</item>
-        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
-        <item name="colorAccent">@color/colorAccent</item>
-    </style>
+  <!-- Base application theme. -->
+  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+    <!-- Customize your theme here. -->
+    <item name="colorPrimary">@color/colorPrimary</item>
+    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+    <item name="colorAccent">@color/colorAccent</item>
+  </style>

-    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
-        <item name="windowActionBar">false</item>
-        <item name="windowNoTitle">true</item>
-        <item name="android:background">@null</item>
-        <item name="android:statusBarColor">@color/background_dark</item>
-        <item name="android:navigationBarColor">@color/background_dark</item>
-    </style>
+  <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
+    <item name="windowActionBar">false</item>
+    <item name="windowNoTitle">true</item>
+    <item name="android:background">@null</item>
+    <item name="android:statusBarColor">@color/background_dark</item>
+    <item name="android:navigationBarColor">@color/background_dark</item>
+  </style>


-    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
-<!--        <item name="android:background">@drawable/screen</item>-->
-    </style>
-    <style name="Widget.Android.AppWidget.Container" parent="android:Widget">
-        <item name="android:id">@android:id/background</item>
-        <item name="android:background">?android:attr/colorBackground</item>
-    </style>
+  <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
+    <!--        <item name="android:background">@drawable/screen</item>-->
+  </style>

-    <style name="Widget.Android.AppWidget.InnerView" parent="android:Widget">
-        <item name="android:background">?android:attr/colorBackground</item>
-        <item name="android:textColor">?android:attr/textColorPrimary</item>
-    </style>
+  <style name="MediaPlayerWidgetTheme" parent="Theme.AppCompat.DayNight">
+    <!-- These colors match the vue pages -->
+    <item name="android:colorBackground">#232323</item>
+    <item name="android:colorAccent">#373838</item>
+    <item name="android:textColor">#ffffff</item>
+  </style>
+
+  <style name="Widget.Android.AppWidget.Container" parent="android:Widget">
+    <item name="android:id">@android:id/background</item>
+    <item name="android:background">?android:attr/colorBackground</item>
+  </style>
+
+  <style name="Widget.Android.AppWidget.InnerView" parent="android:Widget">
+<!--    <item name="android:background">?android:attr/colorBackground</item>-->
+<!--    <item name="android:textColor">?android:attr/textColorPrimary</item>-->
+    <item name="android:padding">0dp</item>
+  </style>
 </resources>
@@ -1,17 +1,17 @@
 <resources>
-    <style name="AppTheme.AppWidgetContainerParent" parent="@android:style/Theme.DeviceDefault">
-        <!-- Radius of the outer bound of widgets to make the rounded corners -->
-        <item name="appWidgetRadius">16dp</item>
-        <!--
+
+  <style name="AppTheme.AppWidgetContainerParent" parent="@android:style/Theme.DeviceDefault">
+    <!-- Radius of the outer bound of widgets to make the rounded corners -->
+    <item name="appWidgetRadius">0dp</item>
+    <!--
        Radius of the inner view's bound of widgets to make the rounded corners.
        It needs to be 8dp or less than the value of appWidgetRadius
        -->
-        <item name="appWidgetInnerRadius">8dp</item>
-    </style>
+    <item name="appWidgetInnerRadius">0dp</item>
+  </style>

-    <style name="AppTheme.AppWidgetContainer"
-        parent="AppTheme.AppWidgetContainerParent">
-        <!-- Apply padding to avoid the content of the widget colliding with the rounded corners -->
-        <item name="appWidgetPadding">16dp</item>
-    </style>
+  <style name="AppTheme.AppWidgetContainer" parent="AppTheme.AppWidgetContainerParent">
+    <!-- Apply padding to avoid the content of the widget colliding with the rounded corners -->
+    <item name="appWidgetPadding">0dp</item>
+  </style>
 </resources>
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:description="@string/app_widget_description"
+    android:initialKeyguardLayout="@layout/media_player_widget"
+    android:initialLayout="@layout/media_player_widget"
+    android:minWidth="275dp"
+    android:minHeight="50dp"
+    android:previewImage="@drawable/media_player_widget_preview"
+    android:previewLayout="@layout/media_player_widget"
+    android:resizeMode="horizontal"
+    android:targetCellWidth="4"
+    android:targetCellHeight="1"
+    android:updatePeriodMillis="86400000"
+    android:widgetCategory="home_screen" />
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
-    android:minWidth="110dp"
-    android:minHeight="40dp"
-    android:updatePeriodMillis="86400000"
-    android:previewImage="@drawable/example_appwidget_preview"
-    android:initialLayout="@layout/new_app_widget"
-    android:description="@string/app_widget_description"
-    android:resizeMode="horizontal|vertical"
-    android:widgetCategory="home_screen"
-    android:initialKeyguardLayout="@layout/new_app_widget"
-/>
@@ -2,6 +2,19 @@
@import './defaultStyles.css';
@import './absicons.css';

+* {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+input,
+textarea {
+  -webkit-touch-callout: auto;
+  -webkit-user-select: auto;
+  user-select: auto;
+}
+
 body {
  background-color: #262626;
 }
@@ -102,4 +115,18 @@ Bookshelf Label
  background-position: center;
  opacity: 1;
  filter: blur(20px);
+}
+
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
 }
@@ -15,24 +15,24 @@
      <p class="top-4 absolute left-0 right-0 mx-auto text-center uppercase tracking-widest text-opacity-75" style="font-size: 10px" :class="{ 'text-success': isLocalPlayMethod, 'text-accent': !isLocalPlayMethod }">{{ isDirectPlayMethod ? 'Direct' : isLocalPlayMethod ? 'Local' : 'Transcode' }}</p>
    </div>

-    <div v-if="useChapterTrack && useTotalTrack && showFullscreen" class="absolute total-track w-full px-3 z-30">
+    <div v-if="useChapterTrack && useTotalTrack && showFullscreen" class="absolute total-track w-full z-30 px-6">
      <div class="flex">
        <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ currentTimePretty }}</p>
        <div class="flex-grow" />
        <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ totalTimeRemainingPretty }}</p>
      </div>
      <div class="w-full">
-        <div class="h-1 w-full bg-gray-500 bg-opacity-50 relative">
-          <div ref="totalReadyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none" />
-          <div ref="totalBufferedTrack" class="h-full bg-gray-500 absolute top-0 left-0 pointer-events-none" />
-          <div ref="totalPlayedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none" />
+        <div class="h-1 w-full bg-gray-500 bg-opacity-50 relative rounded-full">
+          <div ref="totalReadyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none rounded-full" />
+          <div ref="totalBufferedTrack" class="h-full bg-gray-500 absolute top-0 left-0 pointer-events-none rounded-full" />
+          <div ref="totalPlayedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none rounded-full" />
        </div>
      </div>
    </div>

    <div class="cover-wrapper absolute z-30 pointer-events-auto" @click="clickContainer">
      <div class="w-full h-full flex justify-center">
-        <covers-book-cover v-if="libraryItem || localLibraryItemCoverSrc" ref="cover" :library-item="libraryItem" :download-cover="localLibraryItemCoverSrc" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" @imageLoaded="coverImageLoaded" />
+        <covers-book-cover v-if="libraryItem || localLibraryItemCoverSrc" ref="cover" :library-item="libraryItem" :download-cover="localLibraryItemCoverSrc" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" raw @imageLoaded="coverImageLoaded" />
      </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">
@@ -46,7 +46,7 @@
    </div>

    <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 py-3 mx-auto px-3" style="max-width: 380px">
+      <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 && isServerItem && networkConnected" class="material-icons text-3xl text-white text-opacity-75 cursor-pointer" @click="$emit('showBookmarks')">{{ bookmarks.length ? 'bookmark' : 'bookmark_border' }}</span>
          <!-- hidden for podcasts but still using this as a placeholder -->
@@ -65,8 +65,8 @@
      </div>
      <div v-else class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: linear-gradient(145deg, rgba(38, 38, 38, 0.5) 0%, rgba(38, 38, 38, 0.9) 20%, rgb(38, 38, 38) 60%)" />

-      <div id="playerControls" class="absolute right-0 bottom-0 py-2">
-        <div class="flex items-center justify-center">
+      <div id="playerControls" class="absolute right-0 bottom-0 mx-auto" style="max-width: 414px">
+        <div class="flex items-center justify-between max-w-full">
          <span v-show="showFullscreen && !lockUi" class="material-icons next-icon text-white text-opacity-75 cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
          <span v-show="!lockUi" class="material-icons jump-icon text-white 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">
@@ -80,20 +80,17 @@
        </div>
      </div>

-      <div id="playerTrack" class="absolute left-0 w-full px-3">
-        <div class="flex pb-0.5">
+      <div id="playerTrack" class="absolute left-0 w-full px-6">
+        <div class="flex pointer-events-none">
          <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem" ref="currentTimestamp">0:00</p>
          <div class="flex-grow" />
-          <p v-show="showFullscreen" class="text-sm truncate text-white text-opacity-75" style="max-width: 65%">{{ currentChapterTitle }}</p>
-          <div class="flex-grow" />
          <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ timeRemainingPretty }}</p>
        </div>
-        <div ref="track" class="h-1.5 w-full bg-gray-500 bg-opacity-50 relative" :class="{ 'animate-pulse': isLoading }" @touchstart="touchstartTrack" @click="clickTrack">
-          <div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none" />
-          <div ref="bufferedTrack" class="h-full bg-gray-500 absolute top-0 left-0 pointer-events-none" />
-          <div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none" />
-          <div ref="draggingTrack" class="h-full bg-warning bg-opacity-25 absolute top-0 left-0 pointer-events-none" />
-          <div ref="trackCursor" class="h-3.5 w-3.5 rounded-full bg-gray-200 absolute -top-1 pointer-events-none" :class="{ 'opacity-0': lockUi || !showFullscreen }" />
+        <div ref="track" class="h-1.5 w-full bg-gray-500 bg-opacity-50 relative rounded-full" :class="{ 'animate-pulse': isLoading }" @click.stop>
+          <div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 rounded-full pointer-events-none" />
+          <div ref="bufferedTrack" class="h-full bg-gray-500 absolute top-0 left-0 rounded-full pointer-events-none" />
+          <div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 rounded-full pointer-events-none" />
+          <div ref="trackCursor" class="h-3.5 w-3.5 -top-1 rounded-full bg-gray-200 absolute pointer-events-auto" :class="{ 'opacity-0': lockUi || !showFullscreen }" @touchstart="touchstartCursor" />
        </div>
      </div>
    </div>
@@ -151,8 +148,10 @@ export default {
      useTotalTrack: true,
      lockUi: false,
      isLoading: false,
-      touchTrackStart: false,
-      dragPercent: 0,
+      isDraggingCursor: false,
+      draggingTouchStartX: 0,
+      draggingTouchStartTime: 0,
+      draggingCurrentTime: 0,
      syncStatus: 0,
      showMoreMenuDialog: false,
      coverRgb: 'rgb(55, 56, 56)',
@@ -287,6 +286,7 @@ export default {
      return this.playMethod == this.$constants.PlayMethod.DIRECTPLAY
    },
    title() {
+      if (this.currentChapterTitle && this.showFullscreen) return this.currentChapterTitle
      if (this.playbackSession) return this.playbackSession.displayTitle
      return this.mediaMetadata ? this.mediaMetadata.title : 'Title'
    },
@@ -318,17 +318,20 @@ export default {
      return this.$secondsToTimestamp(this.totalDuration)
    },
    currentTimePretty() {
-      return this.$secondsToTimestamp(this.currentTime / this.currentPlaybackRate)
+      let currentTimeToUse = this.isDraggingCursor ? this.draggingCurrentTime : this.currentTime
+      return this.$secondsToTimestamp(currentTimeToUse / this.currentPlaybackRate)
    },
    timeRemaining() {
+      let currentTimeToUse = this.isDraggingCursor ? this.draggingCurrentTime : this.currentTime
      if (this.useChapterTrack && this.currentChapter) {
-        var currChapTime = this.currentTime - this.currentChapter.start
+        var currChapTime = currentTimeToUse - this.currentChapter.start
        return (this.currentChapterDuration - currChapTime) / this.currentPlaybackRate
      }
      return this.totalTimeRemaining
    },
    totalTimeRemaining() {
-      return (this.totalDuration - this.currentTime) / this.currentPlaybackRate
+      let currentTimeToUse = this.isDraggingCursor ? this.draggingCurrentTime : this.currentTime
+      return (this.totalDuration - currentTimeToUse) / this.currentPlaybackRate
    },
    totalTimeRemainingPretty() {
      if (this.totalTimeRemaining < 0) {
@@ -342,10 +345,6 @@ export default {
      }
      return '-' + this.$secondsToTimestamp(this.timeRemaining)
    },
-    timeLeftInChapter() {
-      if (!this.currentChapter) return 0
-      return this.currentChapter.end - this.currentTime
-    },
    sleepTimeRemainingPretty() {
      if (!this.sleepTimeRemaining) return '0s'
      var secondsRemaining = Math.round(this.sleepTimeRemaining)
@@ -392,11 +391,6 @@ export default {
        this.showFullscreen = false
      }
    },
-    async touchstartTrack(e) {
-      await this.$hapticsImpact()
-      if (!e || !e.touches || !this.$refs.track || !this.showFullscreen || this.lockUi) return
-      this.touchTrackStart = true
-    },
    async selectChapter(chapter) {
      await this.$hapticsImpact()
      this.seek(chapter.start)
@@ -450,7 +444,6 @@ export default {
      this.$emit('showSleepTimer')
    },
    async setPlaybackSpeed(speed) {
-      await this.$hapticsImpact()
      console.log(`[AudioPlayer] Set Playback Rate: ${speed}`)
      this.currentPlaybackRate = speed
      this.updateTimestamp()
@@ -509,12 +502,13 @@ export default {
        console.error('No timestamp el')
        return
      }
-      let currentTime = this.currentTime / this.currentPlaybackRate
+
+      let currentTime = this.isDraggingCursor ? this.draggingCurrentTime : this.currentTime
      if (this.useChapterTrack && this.currentChapter) {
-        const currChapTime = Math.max(0, this.currentTime - this.currentChapter.start)
-        currentTime = currChapTime / this.currentPlaybackRate
+        currentTime = Math.max(0, currentTime - this.currentChapter.start)
      }
-      ts.innerText = this.$secondsToTimestamp(currentTime)
+
+      ts.innerText = this.$secondsToTimestamp(currentTime / this.currentPlaybackRate)
    },
    timeupdate() {
      if (!this.$refs.playedTrack) {
@@ -536,22 +530,24 @@ export default {
    },
    updateTrack() {
      // Update progress track UI
-      let percentDone = this.currentTime / this.totalDuration
+      let currentTimeToUse = this.isDraggingCursor ? this.draggingCurrentTime : this.currentTime
+      let percentDone = currentTimeToUse / this.totalDuration
      const totalPercentDone = percentDone
      let bufferedPercent = this.bufferedTime / this.totalDuration
      const totalBufferedPercent = bufferedPercent

      if (this.useChapterTrack && this.currentChapter) {
-        const currChapTime = this.currentTime - this.currentChapter.start
+        const currChapTime = currentTimeToUse - this.currentChapter.start
        percentDone = currChapTime / this.currentChapterDuration
        bufferedPercent = Math.max(0, Math.min(1, (this.bufferedTime - this.currentChapter.start) / this.currentChapterDuration))
      }
+
      const ptWidth = Math.round(percentDone * this.trackWidth)
      this.$refs.playedTrack.style.width = ptWidth + 'px'
      this.$refs.bufferedTrack.style.width = Math.round(bufferedPercent * this.trackWidth) + 'px'

      if (this.$refs.trackCursor) {
-        this.$refs.trackCursor.style.left = ptWidth - 8 + 'px'
+        this.$refs.trackCursor.style.left = ptWidth - 7 + 'px'
      }

      if (this.useChapterTrack) {
@@ -580,27 +576,15 @@ export default {
        this.$refs.playedTrack.classList.add('bg-yellow-300')
      }
    },
-    clickTrack(e) {
-      if (this.isLoading || this.lockUi) return
-      if (!this.showFullscreen) {
-        // Track not clickable on mini-player
-        return
-      }
-      if (e) e.stopPropagation()
+    async touchstartCursor(e) {
+      if (!e || !e.touches || !this.$refs.track || !this.showFullscreen || this.lockUi) return

-      var offsetX = e.offsetX
-      var perc = offsetX / this.trackWidth
-      var time = 0
-      if (this.useChapterTrack && this.currentChapter) {
-        time = perc * this.currentChapterDuration + this.currentChapter.start
-      } else {
-        time = perc * this.totalDuration
-      }
-      if (isNaN(time) || time === null) {
-        console.error('Invalid time', perc, time)
-        return
-      }
-      this.seek(time)
+      await this.$hapticsImpact()
+      this.isDraggingCursor = true
+      this.draggingTouchStartX = e.touches[0].pageX
+      this.draggingTouchStartTime = this.currentTime
+      this.draggingCurrentTime = this.currentTime
+      this.updateTrack()
    },
    async playPauseClick() {
      await this.$hapticsImpact()
@@ -653,24 +637,11 @@ export default {
    touchend(e) {
      if (!e.changedTouches) return

-      if (this.touchTrackStart) {
-        var touch = e.changedTouches[0]
-        const touchOnTrackPos = touch.pageX - 12
-        const dragPercent = Math.max(0, Math.min(1, touchOnTrackPos / this.trackWidth))
-
-        var seekToTime = 0
-        if (this.useChapterTrack && this.currentChapter) {
-          const currChapTime = dragPercent * this.currentChapterDuration
-          seekToTime = this.currentChapter.start + currChapTime
-        } else {
-          seekToTime = dragPercent * this.totalDuration
+      if (this.isDraggingCursor) {
+        if (this.draggingCurrentTime !== this.currentTime) {
+          this.seek(this.draggingCurrentTime)
        }
-        this.seek(seekToTime)
-
-        if (this.$refs.draggingTrack) {
-          this.$refs.draggingTrack.style.width = '0px'
-        }
-        this.touchTrackStart = false
+        this.isDraggingCursor = false
      } else if (this.showFullscreen) {
        this.touchEndY = e.changedTouches[0].screenY
        var touchDuration = Date.now() - this.touchStartTime
@@ -682,29 +653,24 @@ export default {
      }
    },
    touchmove(e) {
-      if (!this.touchTrackStart) return
+      if (!this.isDraggingCursor || !e.touches) return

-      var touch = e.touches[0]
-      const touchOnTrackPos = touch.pageX - 12
-      const dragPercent = Math.max(0, Math.min(1, touchOnTrackPos / this.trackWidth))
-      this.dragPercent = dragPercent
-
-      if (this.$refs.draggingTrack) {
-        this.$refs.draggingTrack.style.width = this.dragPercent * this.trackWidth + 'px'
+      const distanceMoved = e.touches[0].pageX - this.draggingTouchStartX
+      let duration = this.totalDuration
+      let minTime = 0
+      let maxTime = duration
+      if (this.useChapterTrack && this.currentChapter) {
+        duration = this.currentChapterDuration
+        minTime = this.currentChapter.start
+        maxTime = minTime + duration
      }

-      var ts = this.$refs.currentTimestamp
-      if (ts) {
-        var currTimeStr = ''
-        if (this.useChapterTrack && this.currentChapter) {
-          const currChapTime = dragPercent * this.currentChapterDuration
-          currTimeStr = this.$secondsToTimestamp(currChapTime)
-        } else {
-          const dragTime = dragPercent * this.totalDuration
-          currTimeStr = this.$secondsToTimestamp(dragTime)
-        }
-        ts.innerText = currTimeStr
-      }
+      const timePerPixel = duration / this.trackWidth
+      const newTime = this.draggingTouchStartTime + timePerPixel * distanceMoved
+      this.draggingCurrentTime = Math.min(maxTime, Math.max(minTime, newTime))
+
+      this.updateTimestamp()
+      this.updateTrack()
    },
    async clickMenuAction(action) {
      await this.$hapticsImpact()
@@ -850,7 +816,7 @@ export default {
      document.documentElement.style.setProperty('--cover-image-height', coverHeight + 'px')
      document.documentElement.style.setProperty('--cover-image-width-collapsed', coverImageWidthCollapsed + 'px')
      document.documentElement.style.setProperty('--cover-image-height-collapsed', 46 + 'px')
-      document.documentElement.style.setProperty('--title-author-left-offset-collapsed', 24 + coverImageWidthCollapsed + 'px')
+      document.documentElement.style.setProperty('--title-author-left-offset-collapsed', 30 + coverImageWidthCollapsed + 'px')
    },
    minimizePlayerEvt() {
      this.collapseFullscreen()
@@ -917,7 +883,7 @@ export default {
  --cover-image-height: 0px;
  --cover-image-width-collapsed: 46px;
  --cover-image-height-collapsed: 46px;
-  --title-author-left-offset-collapsed: 70px;
+  --title-author-left-offset-collapsed: 80px;
 }

 .playerContainer {
@@ -944,12 +910,14 @@ export default {

 .cover-wrapper {
  bottom: 68px;
-  left: 12px;
+  left: 24px;
  height: var(--cover-image-height-collapsed);
  width: var(--cover-image-width-collapsed);
  transition: all 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-property: left, bottom, width, height;
  transform-origin: left bottom;
+  border-radius: 3px;
+  overflow: hidden;
 }

 .total-track {
@@ -990,19 +958,17 @@ export default {
  pointer-events: auto;
 }
 .fullscreen .title-author-texts .title-text {
-  font-size: clamp(0.8rem, calc(var(--cover-image-height) / 260 * 20), 1.5rem);
+  font-size: clamp(0.8rem, calc(var(--cover-image-height) / 260 * 20), 1.3rem);
 }
 .fullscreen .title-author-texts .author-text {
-  font-size: clamp(0.6rem, calc(var(--cover-image-height) / 260 * 16), 1.1rem);
+  font-size: clamp(0.6rem, calc(var(--cover-image-height) / 260 * 16), 1rem);
 }

 #playerControls {
  transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-property: width, bottom;
-  height: 48px;
-  width: 140px;
-  padding-left: 12px;
-  padding-right: 12px;
+  width: 128px;
+  padding-right: 24px;
  bottom: 70px;
 }
 #playerControls .jump-icon {
@@ -1020,7 +986,7 @@ export default {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
-  margin: 0px 14px;
+  margin: 0px 7px;
 }
 #playerControls .play-btn .material-icons {
  transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
@@ -1035,18 +1001,21 @@ export default {
  width: var(--cover-image-width);
  left: calc(50% - (calc(var(--cover-image-width)) / 2));
  bottom: calc(50% + 120px - (calc(var(--cover-image-height)) / 2));
+  border-radius: 16px;
+  overflow: hidden;
 }

 .fullscreen #playerControls {
  width: 100%;
-  bottom: 94px;
+  padding-left: 24px;
+  padding-right: 24px;
+  bottom: 78px;
+  left: 0;
 }
 .fullscreen #playerControls .jump-icon {
-  margin: 0px 18px;
  font-size: 2.4rem;
 }
 .fullscreen #playerControls .next-icon {
-  margin: 0px 20px;
  font-size: 2rem;
 }
 .fullscreen #playerControls .play-btn {
@@ -1054,7 +1023,6 @@ export default {
  width: 65px;
  min-width: 65px;
  min-height: 65px;
-  margin: 0px 26px;
 }
 .fullscreen #playerControls .play-btn .material-icons {
  font-size: 2.1rem;
@@ -50,6 +50,9 @@ export default {
  watch: {
    showBookshelfListView(newVal) {
      this.resetEntities()
+    },
+    seriesId() {
+      this.resetEntities()
    }
  },
  computed: {
@@ -85,6 +88,12 @@ export default {
    filterBy() {
      return this.$store.getters['user/getUserSetting']('mobileFilterBy')
    },
+    collapseSeries() {
+      return this.$store.getters['user/getUserSetting']('collapseSeries')
+    },
+    collapseBookSeries() {
+      return this.$store.getters['user/getUserSetting']('collapseBookSeries')
+    },
    isCoverSquareAspectRatio() {
      return this.bookCoverAspectRatio === 1
    },
@@ -356,6 +365,9 @@ export default {
      let searchParams = new URLSearchParams()
      if (this.page === 'series-books') {
        searchParams.set('filter', `series.${this.$encode(this.seriesId)}`)
+        if (this.collapseBookSeries) {
+          searchParams.set('collapseseries', 1)
+        }
      } else {
        if (this.filterBy && this.filterBy !== 'all') {
          searchParams.set('filter', this.filterBy)
@@ -452,6 +464,12 @@ export default {
        this.libraryItemUpdated(ab)
      })
    },
+    screenOrientationChange() {
+      setTimeout(() => {
+        console.log('LazyBookshelf Screen orientation change')
+        this.resetEntities()
+      }, 50)
+    },
    initListeners() {
      const bookshelf = document.getElementById('bookshelf-wrapper')
      if (bookshelf) {
@@ -466,6 +484,13 @@ export default {
      this.$socket.$on('item_removed', this.libraryItemRemoved)
      this.$socket.$on('items_updated', this.libraryItemsUpdated)
      this.$socket.$on('items_added', this.libraryItemsAdded)
+
+      if (screen.orientation) {
+        // Not available on ios
+        screen.orientation.addEventListener('change', this.screenOrientationChange)
+      } else {
+        document.addEventListener('orientationchange', this.screenOrientationChange)
+      }
    },
    removeListeners() {
      const bookshelf = document.getElementById('bookshelf-wrapper')
@@ -481,6 +506,13 @@ export default {
      this.$socket.$off('item_removed', this.libraryItemRemoved)
      this.$socket.$off('items_updated', this.libraryItemsUpdated)
      this.$socket.$off('items_added', this.libraryItemsAdded)
+
+      if (screen.orientation) {
+        // Not available on ios
+        screen.orientation.removeEventListener('change', this.screenOrientationChange)
+      } else {
+        document.removeEventListener('orientationchange', this.screenOrientationChange)
+      }
    }
  },
  updated() {
@@ -10,11 +10,16 @@
      <p class="truncate" :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
        {{ displayTitle }}
      </p>
-      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayAuthor || '&nbsp;' }}</p>
+      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
    </div>

-    <div v-if="booksInSeries" class="absolute z-20 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ booksInSeries }}</div>
+    <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #78350f">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequenceList }}</p>
+    </div>
+    <div v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #cd9d49dd">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ booksInSeries }}</p>
+    </div>

    <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
      <div v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
@@ -35,7 +40,7 @@
    </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 bg-white bg-opacity-70">
+    <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 bg-white bg-opacity-70" @click.stop="playEpisode">
      <span class="material-icons text-6xl text-black text-opacity-80">{{ streamIsPlaying ? 'pause_circle' : 'play_circle_filled' }}</span>
    </div>

@@ -226,22 +231,36 @@ export default {
      // Only added to item object when collapseSeries is enabled
      return this.collapsedSeries ? this.collapsedSeries.numBooks : 0
    },
-    displayTitle() {
-      if (this.orderBy === 'media.metadata.title' && this.sortingIgnorePrefix && this.title.toLowerCase().startsWith('the ')) {
-        return this.title.substr(4) + ', The'
-      }
-      return this.title
+    seriesSequenceList() {
+      return this.collapsedSeries ? this.collapsedSeries.seriesSequenceList : null
    },
-    displayAuthor() {
+    libraryItemIdsInSeries() {
+      // Only added to item object when collapseSeries is enabled
+      return this.collapsedSeries ? this.collapsedSeries.libraryItemIds || [] : []
+    },
+    displayTitle() {
+      if (this.recentEpisode) return this.recentEpisode.title
+
+      const ignorePrefix = this.orderBy === 'media.metadata.title' && this.sortingIgnorePrefix
+      if (this.collapsedSeries) return ignorePrefix ? this.collapsedSeries.nameIgnorePrefix : this.collapsedSeries.name
+      return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix : this.title
+    },
+    displayLineTwo() {
+      if (this.recentEpisode) return this.title
+      if (this.collapsedSeries) return ''
+      if (this.isPodcast) return this.author
+
      if (this.orderBy === 'media.metadata.authorNameLF') return this.authorLF
      return this.author
    },
    displaySortLine() {
+      if (this.collapsedSeries) return null
      if (this.orderBy === 'mtimeMs') return 'Modified ' + this.$formatDate(this._libraryItem.mtimeMs)
      if (this.orderBy === 'birthtimeMs') return 'Born ' + this.$formatDate(this._libraryItem.birthtimeMs)
      if (this.orderBy === 'addedAt') return 'Added ' + this.$formatDate(this._libraryItem.addedAt)
      if (this.orderBy === 'media.duration') return 'Duration: ' + this.$elapsedPrettyExtended(this.media.duration, false)
      if (this.orderBy === 'size') return 'Size: ' + this.$bytesPretty(this._libraryItem.size)
+      if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} Episodes`
      return null
    },
    episodeProgress() {
@@ -401,38 +420,40 @@ export default {
      // Server books may have a local library item
      this.localLibraryItem = localLibraryItem
    },
+    async playEpisode() {
+      await this.$hapticsImpact()
+      const eventBus = this.$eventBus || this.$nuxt.$eventBus
+      if (this.streamIsPlaying) {
+        eventBus.$emit('pause-item')
+        return
+      }
+
+      if (this.localLibraryItem) {
+        const localEpisode = this.localLibraryItem.media.episodes.find((ep) => ep.serverEpisodeId === this.recentEpisode.id)
+        if (localEpisode) {
+          // Play episode locally
+          eventBus.$emit('play-item', {
+            libraryItemId: this.localLibraryItemId,
+            episodeId: localEpisode.id,
+            serverLibraryItemId: this.libraryItemId,
+            serverEpisodeId: this.recentEpisode.id
+          })
+          return
+        }
+      }
+
+      eventBus.$emit('play-item', { libraryItemId: this.libraryItemId, episodeId: this.recentEpisode.id })
+    },
    async clickCard(e) {
      if (this.isSelectionMode) {
        e.stopPropagation()
        e.preventDefault()
        this.selectBtnClick()
-      } else if (this.recentEpisode) {
-        await this.$hapticsImpact()
-        var eventBus = this.$eventBus || this.$nuxt.$eventBus
-        if (this.streamIsPlaying) {
-          eventBus.$emit('pause-item')
-          return
-        }
-
-        if (this.localLibraryItem) {
-          const localEpisode = this.localLibraryItem.media.episodes.find((ep) => ep.serverEpisodeId === this.recentEpisode.id)
-          if (localEpisode) {
-            // Play episode locally
-            eventBus.$emit('play-item', {
-              libraryItemId: this.localLibraryItemId,
-              episodeId: localEpisode.id,
-              serverLibraryItemId: this.libraryItemId,
-              serverEpisodeId: this.recentEpisode.id
-            })
-            return
-          }
-        }
-
-        eventBus.$emit('play-item', { libraryItemId: this.libraryItemId, episodeId: this.recentEpisode.id })
      } else {
-        var router = this.$router || this.$nuxt.$router
+        const router = this.$router || this.$nuxt.$router
        if (router) {
-          if (this.collapsedSeries) router.push(`/library/${this.libraryId}/series/${this.collapsedSeries.id}`)
+          if (this.recentEpisode) router.push(`/item/${this.libraryItemId}/${this.recentEpisode.id}`)
+          else if (this.collapsedSeries) router.push(`/bookshelf/series/${this.collapsedSeries.id}`)
          else router.push(`/item/${this.libraryItemId}`)
        }
      }
@@ -101,15 +101,15 @@ export default {
            icon: 'collections_bookmark',
            iconClass: 'text-xl',
            text: 'Collections'
+          },
+          {
+            to: '/bookshelf/authors',
+            routeName: 'bookshelf-authors',
+            iconPack: 'abs-icons',
+            icon: 'authors',
+            iconClass: 'text-2xl',
+            text: 'Authors'
          }
-          // {
-          //   to: '/bookshelf/authors',
-          //   routeName: 'bookshelf-authors',
-          //   iconPack: 'abs-icons',
-          //   icon: 'authors',
-          //   iconClass: 'text-2xl pb-px',
-          //   text: 'Authors'
-          // }
        ]
      }

@@ -2,11 +2,8 @@
  <div class="w-full h-9 bg-bg relative z-20">
    <div id="bookshelf-toolbar" class="absolute top-0 left-0 w-full h-full z-20 flex items-center px-2">
      <div class="flex items-center w-full text-sm">
-        <nuxt-link to="/bookshelf/series" v-if="selectedSeriesName" class="pt-1">
-          <span class="material-icons">arrow_back</span>
-        </nuxt-link>
        <p v-show="!selectedSeriesName" class="pt-1">{{ totalEntities }} {{ entityTitle }}</p>
-        <p v-show="selectedSeriesName" class="ml-2pt-1">{{ selectedSeriesName }} ({{ totalEntities }})</p>
+        <p v-show="selectedSeriesName" class="ml-2 pt-1">{{ selectedSeriesName }} ({{ 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>
        <template v-if="page === 'library'">
@@ -16,11 +13,13 @@
          </div>
          <span class="material-icons px-2" @click="showSortModal = true">sort</span>
        </template>
+        <span v-if="(page == 'library' && isBookLibrary) || seriesBookPage" class="material-icons px-2" @click="showMoreMenuDialog = true">more_vert</span>
      </div>
    </div>

    <modals-order-modal v-model="showSortModal" :order-by.sync="settings.mobileOrderBy" :descending.sync="settings.mobileOrderDesc" @change="updateOrder" />
    <modals-filter-modal v-model="showFilterModal" :filter-by.sync="settings.mobileFilterBy" @change="updateFilter" />
+    <modals-dialog v-model="showMoreMenuDialog" :items="menuItems" @action="clickMenuAction" />
  </div>
 </template>

@@ -31,7 +30,8 @@ export default {
      showSortModal: false,
      showFilterModal: false,
      settings: {},
-      totalEntities: 0
+      totalEntities: 0,
+      showMoreMenuDialog: false
    }
  },
  computed: {
@@ -44,6 +44,12 @@ export default {
        this.$store.commit('globals/setBookshelfListView', val)
      }
    },
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isBookLibrary() {
+      return this.currentLibraryMediaType === 'book'
+    },
    hasFilters() {
      return this.$store.getters['user/getUserSetting']('mobileFilterBy') !== 'all'
    },
@@ -66,6 +72,8 @@ export default {
        return 'Collections'
      } else if (this.page === 'playlists') {
        return 'Playlists'
+      } else if (this.page === 'authors') {
+        return 'Authors'
      }
      return ''
    },
@@ -77,9 +85,40 @@ export default {
    },
    isPodcast() {
      return this.$store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast'
+    },
+    menuItems() {
+      if (!this.isBookLibrary) return []
+
+      if (this.seriesBookPage) {
+        return [
+          {
+            text: 'Collapse Sub-Series',
+            value: 'collapse_subseries',
+            icon: this.settings.collapseBookSeries ? 'check_box' : 'check_box_outline_blank'
+          }
+        ]
+      } else {
+        return [
+          {
+            text: 'Collapse Series',
+            value: 'collapse_series',
+            icon: this.settings.collapseSeries ? 'check_box' : 'check_box_outline_blank'
+          }
+        ]
+      }
    }
  },
  methods: {
+    clickMenuAction(action) {
+      this.showMoreMenuDialog = false
+      if (action === 'collapse_series') {
+        this.settings.collapseSeries = !this.settings.collapseSeries
+        this.saveSettings()
+      } else if (action === 'collapse_subseries') {
+        this.settings.collapseBookSeries = !this.settings.collapseBookSeries
+        this.saveSettings()
+      }
+    },
    updateOrder() {
      this.saveSettings()
    },
@@ -1,7 +1,7 @@
 <template>
  <modals-modal v-model="show" :width="300" height="100%">
    <template #outer>
-      <div class="absolute top-5 left-4 z-40">
+      <div class="absolute top-8 left-4 z-40">
        <p class="text-white text-2xl truncate">Bookmarks</p>
      </div>
    </template>
@@ -1,7 +1,7 @@
 <template>
  <modals-modal v-model="show" :width="350" height="100%">
    <template #outer>
-      <div v-if="currentChapter" class="absolute top-7 left-4 z-40" style="max-width: 80%">
+      <div v-if="currentChapter" class="absolute top-8 left-4 z-40 pt-0.5" style="max-width: 80%">
        <p class="text-white text-lg truncate">Current: {{ currentChapterTitle }}</p>
      </div>
    </template>
@@ -1,8 +1,8 @@
 <template>
  <modals-modal v-model="show" :width="300" height="100%">
    <template #outer>
-      <div v-if="title" class="absolute top-7 left-4 z-40" style="max-width: 80%">
-        <p class="text-white text-lg truncate">{{ title }}</p>
+      <div v-if="title" class="absolute top-8 left-4 z-40" style="max-width: 80%">
+        <p class="text-white text-xl truncate">{{ title }}</p>
      </div>
    </template>

@@ -1,7 +1,7 @@
 <template>
  <modals-modal v-model="show" width="90%" height="100%">
    <template #outer>
-      <div v-show="selected !== 'all'" class="absolute top-4 left-4 z-40">
+      <div v-show="selected !== 'all'" class="absolute top-6 left-4 z-40">
        <ui-btn class="text-xl border-yellow-400 border-opacity-40" @click="clearSelected">Clear</ui-btn>
      </div>
    </template>
@@ -1,14 +1,17 @@
 <template>
  <modals-modal v-model="show" :width="400" height="100%">
    <template #outer>
-      <div class="absolute top-5 left-4 z-40">
+      <div class="absolute top-8 left-4 z-40">
        <p class="text-white text-2xl truncate">Details</p>
      </div>
    </template>

    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20 p-2" style="max-height: 75%" @click.stop>
-        <p class="mb-1">{{ mediaMetadata.title }}</p>
+        <p class="mb-2">{{ mediaMetadata.title }}</p>
+
+        <div v-if="size" class="text-sm mb-2">Size: {{ $bytesPretty(size) }}</div>
+
        <p class="mb-1 text-xs text-gray-200">ID: {{ _libraryItem.id }}</p>
      </div>
    </div>
@@ -44,6 +47,9 @@ export default {
    },
    mediaMetadata() {
      return this.media.metadata || {}
+    },
+    size() {
+      return this.media.size
    }
  },
  methods: {},
@@ -1,7 +1,7 @@
 <template>
  <modals-modal v-model="show" :width="300" :processing="processing" height="100%">
    <template #outer>
-      <div class="absolute top-4 left-4 z-40" style="max-width: 80%">
+      <div class="absolute top-8 left-4 z-40" style="max-width: 80%">
        <p class="text-white text-2xl truncate">Libraries</p>
      </div>
    </template>
@@ -2,7 +2,7 @@
  <div ref="wrapper" class="modal modal-bg w-full h-full max-h-screen fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-50 opacity-0">
    <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-4 right-4 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
+    <div class="absolute z-40 top-6 right-4 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">
      <span class="material-icons text-4xl">close</span>
    </div>
    <slot name="outer" />
@@ -70,9 +70,9 @@ export default {
    }
  },
  methods: {
-    clickBg(vm, ev) {
+    clickBg(ev) {
      if (this.processing && this.persistent) return
-      if (vm.srcElement.classList.contains('modal-bg')) {
+      if (ev && ev.srcElement && ev.srcElement.classList && ev.srcElement.classList.contains('modal-bg')) {
        this.show = false
      }
    },
@@ -1,7 +1,7 @@
 <template>
  <modals-modal v-model="show" @input="modalInput" :width="200" height="100%">
    <template #outer>
-      <div class="absolute top-5 left-4 z-40">
+      <div class="absolute top-8 left-4 z-40">
        <p class="text-white text-2xl truncate">Playback Speed</p>
      </div>
    </template>
@@ -1,7 +1,7 @@
 <template>
  <modals-modal v-model="show" width="100%" height="100%" max-width="100%">
    <template #outer>
-      <div class="absolute top-6 left-4 z-40">
+      <div class="absolute top-8 left-4 z-40">
        <p class="text-white text-2xl truncate">Feed Episodes</p>
      </div>
    </template>
@@ -22,7 +22,7 @@
          </div>
        </template>
      </div>
-      <div class="absolute bottom-0 left-0 w-full flex items-center" style="height: 50px">
+      <div class="absolute bottom-6 left-0 w-full flex items-center" style="height: 50px">
        <ui-btn class="w-full" :disabled="!episodesSelected.length" color="success" @click.stop="downloadEpisodes">{{ episodesSelected.length ? `Add ${episodesSelected.length} Episode(s) to Server` : 'No Episodes Selected' }}</ui-btn>
      </div>
    </div>
@@ -130,8 +130,8 @@ export default {

 <style>
 .feed-content {
-  height: calc(100vh - 125px);
-  max-height: calc(100vh - 125px);
-  margin-top: 20px;
+  height: calc(100vh - 150px);
+  max-height: calc(100vh - 150px);
+  margin-top: 5px;
 }
 </style>
@@ -1,7 +1,7 @@
 <template>
  <modals-modal v-model="show" :width="300" height="100%">
    <template #outer>
-      <div class="absolute top-7 left-4 z-40" style="max-width: 80%">
+      <div class="absolute top-8 left-4 z-40" style="max-width: 80%">
        <p class="text-white text-lg truncate">Select Local Folder</p>
      </div>
    </template>
@@ -1,7 +1,7 @@
 <template>
  <modals-modal v-model="show" :width="200" height="100%">
    <template #outer>
-      <div class="absolute top-5 left-4 z-40">
+      <div class="absolute top-8 left-4 z-40">
        <p class="text-white text-2xl truncate">Sleep Timer</p>
      </div>
    </template>
@@ -1,7 +1,7 @@
 <template>
  <modals-modal v-model="show" :width="200" height="100%">
    <template #outer>
-      <div class="absolute top-5 left-4 z-40">
+      <div class="absolute top-8 left-4 z-40">
        <p class="text-white text-2xl truncate">Sleep Timer</p>
      </div>
    </template>
@@ -1,7 +1,7 @@
 <template>
  <modals-modal v-model="show" :width="360" height="100%" :processing="processing">
    <template #outer>
-      <div class="absolute top-5 left-4 z-40">
+      <div class="absolute top-8 left-4 z-40">
        <p class="text-white text-2xl truncate">Add to Playlist</p>
      </div>
    </template>
@@ -1,11 +1,11 @@
 <template>
-  <div id="comic-reader" class="w-full h-full">
-    <div v-show="showPageMenu" v-click-outside="clickOutside" class="pagemenu absolute right-20 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-52" style="top: 72px">
-      <div v-for="(file, index) in pages" :key="file" class="w-full cursor-pointer hover:bg-black-200 px-2 py-1" :class="page === index ? 'bg-black-200' : ''" @click="setPage(index)">
+  <div id="comic-reader" class="w-full h-full relative">
+    <div v-show="showPageMenu" v-click-outside="clickOutsideObj" class="pagemenu absolute top-12 right-16 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-52">
+      <div v-for="(file, index) in pages" :key="file" class="w-full cursor-pointer hover:bg-black-200 px-2 py-1" :class="page === index ? 'bg-black-200' : ''" @click.stop="setPage(index)">
        <p class="text-sm truncate">{{ file }}</p>
      </div>
    </div>
-    <div v-show="showInfoMenu" v-click-outside="clickOutside" class="pagemenu absolute top-20 right-0 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-full" style="top: 72px">
+    <div v-show="showInfoMenu" v-click-outside="clickedOutsideInfoMenu" class="pagemenu absolute top-12 right-0 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-full" @click.stop.prevent>
      <div v-for="key in comicMetadataKeys" :key="key" class="w-full px-2 py-1">
        <p class="text-xs">
          <strong>{{ key }}</strong>
@@ -14,13 +14,13 @@
      </div>
    </div>

-    <div v-if="comicMetadata" class="absolute top-8 right-36 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="showInfoMenu = !showInfoMenu">
+    <div v-if="comicMetadata" class="absolute top-0 right-3 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="clickShowInfoMenu">
      <span class="material-icons text-lg">more</span>
    </div>
-    <div class="absolute top-8 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" style="right: 92px" @mousedown.prevent @click.stop.prevent="showPageMenu = !showPageMenu">
+    <div class="absolute top-0 right-16 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-10 h-9 flex items-center justify-center text-center z-20" @mousedown.prevent @mouseup.prevent @click.stop.prevent="clickShowPageMenu">
      <span class="material-icons text-lg">menu</span>
    </div>
-    <div class="absolute top-8 right-4 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-9 flex items-center text-center z-20">
+    <div class="absolute top-0 left-3 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-9 flex items-center text-center z-20" @click.stop>
      <p class="font-mono">{{ page + 1 }} / {{ numPages }}</p>
    </div>

@@ -61,7 +61,12 @@ export default {
      showInfoMenu: false,
      loadTimeout: null,
      loadedFirstPage: false,
-      comicMetadata: null
+      comicMetadata: null,
+      clickOutsideObj: {
+        handler: this.clickedOutside,
+        events: ['mousedown'],
+        isActive: true
+      }
    }
  },
  watch: {
@@ -84,9 +89,19 @@ export default {
    }
  },
  methods: {
-    clickOutside() {
-      if (this.showPageMenu) this.showPageMenu = false
-      if (this.showInfoMenu) this.showInfoMenu = false
+    clickShowInfoMenu() {
+      this.showInfoMenu = !this.showInfoMenu
+      this.showPageMenu = false
+    },
+    clickShowPageMenu() {
+      this.showPageMenu = !this.showPageMenu
+      this.showInfoMenu = false
+    },
+    clickedOutside() {
+      this.showPageMenu = false
+    },
+    clickedOutsideInfoMenu() {
+      this.showInfoMenu = false
    },
    next() {
      if (!this.canGoNext) return
@@ -100,7 +115,8 @@ export default {
      if (index < 0 || index > this.numPages - 1) {
        return
      }
-      var filename = this.pages[index]
+      this.showPageMenu = false
+      const filename = this.pages[index]
      this.page = index
      return this.extractFile(filename)
    },
@@ -235,8 +251,16 @@ export default {

 <style scoped>
 #comic-reader {
-  height: calc(100% - 32px);
+  height: calc(100% - 36px);
+  max-height: calc(100% - 36px);
+  padding-top: 36px;
 }
+.reader-player-open #comic-reader {
+  height: calc(100% - 156px);
+  max-height: calc(100% - 156px);
+  padding-top: 36px;
+}
+
 .pagemenu {
  max-height: calc(100% - 80px);
 }
@@ -39,7 +39,7 @@ export default {
      return this.$store.state.playerLibraryItemId
    },
    readerHeightOffset() {
-      return this.playerLibraryItemId ? 164 : 64
+      return this.playerLibraryItemId ? 196 : 96
    }
  },
  methods: {
@@ -58,13 +58,6 @@ export default {
        this.rendition.next()
      }
    },
-    keyUp() {
-      if ((e.keyCode || e.which) == 37) {
-        this.prev()
-      } else if ((e.keyCode || e.which) == 39) {
-        this.next()
-      }
-    },
    initEpub() {
      var book = ePub(this.url)
      this.book = book
@@ -93,7 +86,7 @@ export default {
              console.error('No Start', currentLocation)
            } else {
              var currentPage = book.locations.percentageFromCfi(currentLocation.start.cfi)
-              // console.log('current page', currentPage)
+              console.log('current page', currentPage)
            }
          })
        })
@@ -105,10 +98,10 @@ export default {
        })
        this.chapters = _chapters
      })
-      book.loaded.metadata.then((metadata) => {
-        // this.author = metadata.creator
-        // this.title = metadata.title
-      })
+      // book.loaded.metadata.then((metadata) => {
+      // this.author = metadata.creator
+      // this.title = metadata.title
+      // })

      // const spine_get = book.spine.get.bind(book.spine)
      // book.spine.get = function (target) {
@@ -121,8 +114,6 @@ export default {
      //   return t
      // }

-      this.rendition.on('keyup', this.keyUp)
-
      this.rendition.on('relocated', (location) => {
        var percent = book.locations.percentageFromCfi(location.start.cfi)
        this.progress = Math.floor(percent * 100)
@@ -1,9 +1,9 @@
 <template>
-  <div class="mobi-ebook-viewer w-full">
+  <div class="mobi-ebook-viewer w-full relative">
    <div class="absolute overflow-hidden left-0 right-0 w-full max-w-full m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
      <iframe title="html-viewer" class="w-full overflow-hidden"> Loading </iframe>
    </div>
-    <div class="fixed bottom-0 left-0 h-8 w-full bg-bg px-2 flex items-center z-20" :style="{ bottom: playerLibraryItemId ? '100px' : '0px' }">
+    <div class="fixed bottom-0 left-0 h-8 w-full bg-bg px-2 flex items-center z-20" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
      <p class="text-xs">mobi</p>
      <div class="flex-grow" />
    </div>
@@ -25,9 +25,6 @@ export default {
  computed: {
    playerLibraryItemId() {
      return this.$store.state.playerLibraryItemId
-    },
-    readerHeightOffset() {
-      return this.playerLibraryItemId ? 164 : 64
    }
  },
  methods: {
@@ -122,13 +119,15 @@ export default {

 <style>
 .mobi-ebook-viewer {
-  height: calc(100% - 32px);
-  max-height: calc(100% - 32px);
-  overflow: hidden;
+  height: calc(100% - 52px);
+  max-height: calc(100% - 52px);
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 .reader-player-open .mobi-ebook-viewer {
-  height: calc(100% - 132px);
-  max-height: calc(100% - 132px);
-  overflow: hidden;
+  height: calc(100% - 152px);
+  max-height: calc(100% - 152px);
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 </style>
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full pt-20 relative">
+  <div class="w-full h-full pt-6 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>
@@ -1,6 +1,6 @@
 <template>
-  <div v-if="show" class="absolute top-0 left-0 w-full h-full bg-bg z-40 pt-8" :class="{ 'reader-player-open': !!playerLibraryItemId }">
-    <div class="h-8 w-full bg-primary flex items-center px-2 fixed top-0 left-0 z-30 box-shadow-sm">
+  <div v-if="show" class="absolute top-0 left-0 w-full h-full bg-bg z-40 pt-16" :class="{ 'reader-player-open': !!playerLibraryItemId }">
+    <div class="h-16 pt-8 w-full bg-primary flex items-center px-2 fixed top-0 left-0 z-30 box-shadow-sm">
      <p class="w-5/6 truncate">{{ title }}</p>
      <div class="flex-grow" />
      <span class="material-icons text-xl text-white" @click.stop="show = false">close</span>
@@ -132,7 +132,9 @@ export default {

      const touchDistanceX = Math.abs(this.touchendX - this.touchstartX)
      const touchDistanceY = Math.abs(this.touchendY - this.touchstartY)
-      if (touchDistanceX < 100 || touchDistanceY > touchDistanceX) return
+      if (touchDistanceX < 60 || touchDistanceY > touchDistanceX) {
+        return
+      }

      if (this.touchendX < this.touchstartX) {
        console.log('swiped left')
@@ -144,8 +146,8 @@ export default {
      }
    },
    touchstart(e) {
-      this.touchstartX = e.changedTouches[0].screenX
-      this.touchstartY = e.changedTouches[0].screenY
+      this.touchstartX = e.touches[0].screenX
+      this.touchstartY = e.touches[0].screenY
      this.touchstartTime = Date.now()
    },
    touchend(e) {
@@ -0,0 +1,97 @@
+<template>
+  <div class="w-full my-4">
+    <div class="w-full bg-primary px-4 py-2 flex items-center" :class="expanded ? 'rounded-t-md' : 'rounded-md'" @click.stop="clickBar">
+      <p class="pr-2">Chapters</p>
+      <div class="h-6 w-6 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+        <span class="text-xs font-mono">{{ chapters.length }}</span>
+      </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>
+      </div>
+    </div>
+    <transition name="slide">
+      <table class="text-xs tracksTable" v-show="expanded">
+        <tr>
+          <th class="text-left">Title</th>
+          <th class="text-center w-16">Start</th>
+        </tr>
+        <tr v-for="chapter in chapters" :key="chapter.id">
+          <td>
+            {{ chapter.title }}
+          </td>
+          <td class="font-mono text-center underline w-16" @click.stop="goToTimestamp(chapter.start)">
+            {{ $secondsToTimestamp(chapter.start) }}
+          </td>
+        </tr>
+      </table>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      expanded: false
+    }
+  },
+  computed: {
+    libraryItemId() {
+      return this.libraryItem.id
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    metadata() {
+      return this.media.metadata || {}
+    },
+    chapters() {
+      return this.media.chapters || []
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    }
+  },
+  methods: {
+    clickBar() {
+      this.expanded = !this.expanded
+    },
+    goToTimestamp(time) {
+      this.$emit('playAtTimestamp', time)
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.tracksTable {
+  border-collapse: collapse;
+  width: 100%;
+  border: 1px solid #474747;
+}
+
+.tracksTable tr:nth-child(even) {
+  background-color: #2e2e2e;
+}
+
+.tracksTable tr {
+  background-color: #373838;
+}
+
+.tracksTable td {
+  padding: 8px 8px;
+}
+
+.tracksTable th {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+</style>
@@ -0,0 +1,85 @@
+<template>
+  <div class="w-full my-4">
+    <div class="w-full bg-primary px-4 py-2 flex items-center" :class="showTracks ? 'rounded-t-md' : 'rounded-md'" @click.stop="clickBar">
+      <p class="pr-2">{{ title }}</p>
+      <div class="h-6 w-6 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+        <span class="text-xs font-mono">{{ tracks.length }}</span>
+      </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>
+      </div>
+    </div>
+    <transition name="slide">
+      <div class="w-full" v-show="showTracks">
+        <table class="text-xs tracksTable">
+          <tr>
+            <th class="text-left">Filename</th>
+            <th class="text-center w-16">Duration</th>
+          </tr>
+          <template v-for="track in tracks">
+            <tr :key="track.index">
+              <td>{{ track.metadata.filename }}</td>
+              <td class="font-mono text-center w-16">
+                {{ $secondsToTimestamp(track.duration) }}
+              </td>
+            </tr>
+          </template>
+        </table>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: 'Audio Tracks'
+    },
+    tracks: {
+      type: Array,
+      default: () => []
+    },
+    libraryItemId: String
+  },
+  data() {
+    return {
+      showTracks: false
+    }
+  },
+  computed: {},
+  methods: {
+    clickBar() {
+      this.showTracks = !this.showTracks
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+.tracksTable {
+  border-collapse: collapse;
+  width: 100%;
+  border: 1px solid #474747;
+}
+
+.tracksTable tr:nth-child(even) {
+  background-color: #2e2e2e;
+}
+
+.tracksTable tr {
+  background-color: #373838;
+}
+
+.tracksTable td {
+  padding: 8px 8px;
+}
+
+.tracksTable th {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+</style>
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full py-4 overflow-hidden relative border-b border-white border-opacity-10">
+  <div class="w-full py-4 overflow-hidden relative border-b border-white border-opacity-10" @click.stop="goToEpisodePage">
    <div v-if="episode" class="w-full px-1">
      <!-- Help debug for testing -->
      <!-- <template>
@@ -16,31 +16,28 @@
      <p class="text-sm font-semibold">
        {{ title }}
      </p>
-      <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5 default-style" v-html="description" />
+
+      <p class="text-sm text-gray-200 line-clamp-2 mt-1.5 mb-0.5">{{ subtitle }}</p>

      <div class="flex items-center pt-2">
-        <div class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click="playClick">
+        <div class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
          <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
          <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" />

-        <button v-if="!isLocal" class="mx-1.5 mt-1.5" @click="addToPlaylist">
+        <button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
          <span class="material-icons text-2xl">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 ? 'animate-bounce text-warning text-opacity-75' : ''" @click="downloadClick">{{ downloadItem ? 'downloading' : 'download' }}</span>
+          <span v-else-if="!localEpisode" class="material-icons mx-1.5 mt-2 text-xl" :class="downloadItem ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem ? 'downloading' : 'download' }}</span>
          <span v-else class="material-icons px-2 text-success text-xl">download_done</span>
        </div>

        <div class="flex-grow" />
-
-        <button v-if="!isLocal && isAdminOrUp" class="mx-1.5 mt-1.5" @click="deleteEpisodeFromServerClick">
-          <span class="material-icons text-xl">delete_forever</span>
-        </button>
      </div>
    </div>

@@ -77,9 +74,6 @@ export default {
    }
  },
  computed: {
-    isAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
    isIos() {
      return this.$platform === 'ios'
    },
@@ -95,10 +89,8 @@ export default {
    title() {
      return this.episode.title || ''
    },
-    description() {
-      if (this.episode.subtitle) return this.episode.subtitle
-      var desc = this.episode.description || ''
-      return desc
+    subtitle() {
+      return this.episode.subtitle || ''
    },
    duration() {
      return this.$secondsToTimestamp(this.episode.duration)
@@ -152,28 +144,8 @@ export default {
    }
  },
  methods: {
-    async deleteEpisodeFromServerClick() {
-      const { value } = await Dialog.confirm({
-        title: 'Confirm',
-        message: `Are you sure you want to delete episode "${this.title}" from the server?\nWarning: This will delete the audio file.`
-      })
-
-      if (value) {
-        this.processing = true
-        this.$axios
-          .$delete(`/api/podcasts/${this.libraryItemId}/episode/${this.episode.id}?hard=1`)
-          .then(() => {
-            this.$toast.success('Episode deleted from server')
-          })
-          .catch((error) => {
-            const errorMsg = error.response && error.response.data ? error.response.data : 'Failed to delete episode'
-            console.error('Failed to delete episode', error)
-            this.$toast.error(errorMsg)
-          })
-          .finally(() => {
-            this.processing = false
-          })
-      }
+    goToEpisodePage() {
+      this.$router.push(`/item/${this.libraryItemId}/${this.episode.id}`)
    },
    addToPlaylist() {
      this.$emit('addToPlaylist', this.episode)
@@ -1,12 +1,12 @@
 <template>
-  <div class="w-full py-4 overflow-hidden relative border-b border-white border-opacity-10">
+  <div class="w-full py-4 overflow-hidden relative border-b border-white border-opacity-10" @click.stop="goToEpisodePage">
    <div v-if="episode" class="w-full px-1">
      <div class="flex mb-2">
        <div class="w-10 min-w-10">
          <covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId)" :width="40" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" class="md:hidden" />
        </div>
        <div class="flex-grow px-2">
-          <div class="-mt-0.5 mb-0.5">
+          <div class="-mt-0.5 mb-0.5" @click.stop>
            <nuxt-link :to="`/item/${libraryItemId}`" class="text-sm text-gray-200 underline">{{ podcast.metadata.title }}</nuxt-link>
          </div>
          <p v-if="publishedAt" class="text-xs text-gray-300">{{ $dateDistanceFromNow(publishedAt) }}</p>
@@ -16,31 +16,27 @@
      <p class="text-sm font-semibold">
        {{ title }}
      </p>
-      <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5 default-style" v-html="description" />
+      <p class="text-sm text-gray-200 line-clamp-2 mt-1.5 mb-0.5">{{ subtitle }}</p>

      <div class="flex items-center pt-2">
-        <div class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click="playClick">
+        <div class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
          <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
          <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" />

-        <button v-if="!isLocal" class="mx-1.5 mt-1.5" @click="addToPlaylist">
+        <button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
          <span class="material-icons text-2xl">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 ? 'animate-bounce text-warning text-opacity-75' : ''" @click="downloadClick">{{ downloadItem ? 'downloading' : 'download' }}</span>
+          <span v-else-if="!localEpisode" class="material-icons mx-1.5 mt-2 text-xl" :class="downloadItem ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem ? 'downloading' : 'download' }}</span>
          <span v-else class="material-icons px-2 text-success text-xl">download_done</span>
        </div>

        <div class="flex-grow" />
-
-        <button v-if="!isLocal && isAdminOrUp" class="mx-1.5 mt-1.5" @click="deleteEpisodeFromServerClick">
-          <span class="material-icons text-xl">delete_forever</span>
-        </button>
      </div>
    </div>

@@ -80,9 +76,6 @@ export default {
    bookCoverAspectRatio() {
      return this.$store.getters['libraries/getBookCoverAspectRatio']
    },
-    isAdminOrUp() {
-      return this.$store.getters['user/getIsAdminOrUp']
-    },
    isIos() {
      return this.$platform === 'ios'
    },
@@ -98,10 +91,8 @@ export default {
    title() {
      return this.episode.title || ''
    },
-    description() {
-      if (this.episode.subtitle) return this.episode.subtitle
-      var desc = this.episode.description || ''
-      return desc
+    subtitle() {
+      return this.episode.subtitle || ''
    },
    duration() {
      return this.$secondsToTimestamp(this.episode.duration)
@@ -158,28 +149,8 @@ export default {
    }
  },
  methods: {
-    async deleteEpisodeFromServerClick() {
-      const { value } = await Dialog.confirm({
-        title: 'Confirm',
-        message: `Are you sure you want to delete episode "${this.title}" from the server?\nWarning: This will delete the audio file.`
-      })
-
-      if (value) {
-        this.processing = true
-        this.$axios
-          .$delete(`/api/podcasts/${this.libraryItemId}/episode/${this.episode.id}?hard=1`)
-          .then(() => {
-            this.$toast.success('Episode deleted from server')
-          })
-          .catch((error) => {
-            const errorMsg = error.response && error.response.data ? error.response.data : 'Failed to delete episode'
-            console.error('Failed to delete episode', error)
-            this.$toast.error(errorMsg)
-          })
-          .finally(() => {
-            this.processing = false
-          })
-      }
+    goToEpisodePage() {
+      this.$router.push(`/item/${this.libraryItemId}/${this.episode.id}`)
    },
    addToPlaylist() {
      this.$emit('addToPlaylist', this.episode)
@@ -28,7 +28,7 @@ export default {
        e.preventDefault()
        return
      }
-      this.$emit('click')
+      this.$emit('click', e)
      e.stopPropagation()
    }
  },
@@ -173,7 +173,6 @@
 				BE96D57E131924D520D57057 /* Pods-Audiobookshelf.debug.xcconfig */,
 				D2F7F575384A63F1C47DE984 /* Pods-Audiobookshelf.release.xcconfig */,
 			);
-			name = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 		};
@@ -721,12 +720,12 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = Icons;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 19;
+				CURRENT_PROJECT_VERSION = 20;
 				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.62;
+				MARKETING_VERSION = 0.9.63;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = com.audiobookshelf.app.dev;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -745,12 +744,12 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = Icons;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 19;
+				CURRENT_PROJECT_VERSION = 20;
 				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.62;
+				MARKETING_VERSION = 0.9.63;
 				PRODUCT_BUNDLE_IDENTIFIER = com.audiobookshelf.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
@@ -14,7 +14,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
        // Override point for customization after application launch.
        
        let configuration = Realm.Configuration(
-            schemaVersion: 7,
+            schemaVersion: 8,
            migrationBlock: { [weak self] migration, oldSchemaVersion in
                if (oldSchemaVersion < 1) {
                    self?.logger.log("Realm schema version was \(oldSchemaVersion)")
@@ -66,6 +66,7 @@ public class AbsAudioPlayer: CAPPlugin {
        let episodeId = call.getString("episodeId")
        let playWhenReady = call.getBool("playWhenReady", true)
        let playbackRate = call.getFloat("playbackRate", 1)
+        let startTimeOverride = call.getDouble("startTime")
        
        if libraryItemId == nil {
            logger.error("provide library item id")
@@ -84,6 +85,9 @@ public class AbsAudioPlayer: CAPPlugin {
            }
            
            do {
+                if (startTimeOverride != nil) {
+                    playbackSession.currentTime = startTimeOverride!
+                }
                try playbackSession.save()
                try self.startPlaybackSession(playbackSession, playWhenReady: playWhenReady, playbackRate: playbackRate)
                call.resolve(try playbackSession.asDictionary())
@@ -95,6 +99,9 @@ public class AbsAudioPlayer: CAPPlugin {
        } else { // Playing from the server
            ApiClient.startPlaybackSession(libraryItemId: libraryItemId!, episodeId: episodeId, forceTranscode: false) { [weak self] session in
                do {
+                    if (startTimeOverride != nil) {
+                        session.currentTime = startTimeOverride!
+                    }
                    try session.save()
                    try self?.startPlaybackSession(session, playWhenReady: playWhenReady, playbackRate: playbackRate)
                    call.resolve(try session.asDictionary())
@@ -348,8 +348,9 @@ public class AbsDownloader: CAPPlugin, URLSessionDownloadDelegate {
    
    private func urlForTrack(item: LibraryItem, track: AudioTrack) -> URL {
        // filename needs to be encoded otherwise would just use contentUrl
-        let filenameEncoded = track.metadata?.filename.addingPercentEncoding(withAllowedCharacters: NSCharacterSet.urlQueryAllowed)
-        let urlstr = "\(Store.serverConfig!.address)/s/item/\(item.id)/\(filenameEncoded ?? "")?token=\(Store.serverConfig!.token)"
+        let relPath = track.metadata?.relPath ?? ""
+        let filepathEncoded = relPath.addingPercentEncoding(withAllowedCharacters: NSCharacterSet.urlQueryAllowed)
+        let urlstr = "\(Store.serverConfig!.address)/s/item/\(item.id)/\(filepathEncoded ?? "")?token=\(Store.serverConfig!.token)"
        return URL(string: urlstr)!
    }
    
@@ -169,9 +169,14 @@ extension LocalLibraryItem {
        self.media?.chapters.forEach { chapter in chapters.append(Chapter.detachCopy(of: chapter)!) }
        let authorName = mediaMetadata?.authorDisplayName
        
+        var duration = getDuration()
+        var displayTitle = mediaMetadata?.title
+
        let audioTracks = List<AudioTrack>()
        if let episode = episode, let track = episode.audioTrack {
            audioTracks.append(AudioTrack.detachCopy(of: track)!)
+            duration = track.duration
+            displayTitle = episode.title
        } else if let tracks = self.media?.tracks {
            tracks.forEach { t in audioTracks.append(AudioTrack.detachCopy(of: t)!) }
        }
@@ -185,10 +190,10 @@ extension LocalLibraryItem {
            mediaType: self.mediaType,
            mediaMetadata: mediaMetadata,
            chapters: chapters,
-            displayTitle: mediaMetadata?.title,
+            displayTitle: displayTitle,
            displayAuthor: authorName,
            coverPath: self.coverContentUrl,
-            duration: self.getDuration(),
+            duration: duration,
            playMethod: PlayMethod.local.rawValue,
            startedAt: dateNow,
            updatedAt: dateNow,
@@ -12,6 +12,7 @@ class Metadata: EmbeddedObject, Codable {
    @Persisted var title: String = "Unknown"
    @Persisted var subtitle: String?
    @Persisted var authors = List<Author>()
+    @Persisted var author: String? // Podcast author
    @Persisted var narrators = List<String>()
    @Persisted var genres = List<String>()
    @Persisted var publishedYear: String?
@@ -28,12 +29,13 @@ class Metadata: EmbeddedObject, Codable {
    @Persisted var seriesName: String?
    @Persisted var feedUrl: String?
    
-    var authorDisplayName: String { self.authorName ?? "Unknown" }
+    var authorDisplayName: String { self.authorName ?? self.author ?? "Unknown" }
    
    private enum CodingKeys : String, CodingKey {
        case title,
             subtitle,
             authors,
+             author, // Podcast author
             narrators,
             genres,
             publishedYear,
@@ -60,6 +62,7 @@ class Metadata: EmbeddedObject, Codable {
        let values = try decoder.container(keyedBy: CodingKeys.self)
        title = try values.decode(String.self, forKey: .title)
        subtitle = try? values.decode(String.self, forKey: .subtitle)
+        author = try? values.decode(String.self, forKey: .author) // Podcast author
        if let authorList = try? values.decode([Author].self, forKey: .authors) {
            authors.append(objectsIn: authorList)
        }
@@ -88,6 +91,7 @@ class Metadata: EmbeddedObject, Codable {
        var container = encoder.container(keyedBy: CodingKeys.self)
        try container.encode(title, forKey: .title)
        try container.encode(subtitle, forKey: .subtitle)
+        try container.encode(author, forKey: .author) // Podcast author
        try container.encode(Array(authors), forKey: .authors)
        try container.encode(Array(narrators), forKey: .narrators)
        try container.encode(Array(genres), forKey: .genres)
@@ -1,5 +1,5 @@
 <template>
-  <div class="select-none w-full layout-wrapper bg-bg text-white">
+  <div class="w-full layout-wrapper bg-bg text-white">
    <app-appbar />
    <div id="content" class="overflow-hidden relative" :class="playerIsOpen ? 'playerOpen' : ''">
      <Nuxt />
@@ -101,7 +101,7 @@ export default {
      const deviceData = await this.$db.getDeviceData()
      let serverConfig = null
      if (deviceData) {
-        this.$store.commit('globals/setHapticFeedback', deviceData.hapticFeedback)
+        this.$store.commit('globals/setHapticFeedback', deviceData.deviceSettings?.hapticFeedback)

        if (deviceData.lastServerConnectionConfigId && deviceData.serverConnectionConfigs.length) {
          serverConfig = deviceData.serverConnectionConfigs.find((scc) => scc.id == deviceData.lastServerConnectionConfigId)
@@ -1,12 +1,12 @@
 {
  "name": "audiobookshelf-app",
-  "version": "0.9.62-beta",
+  "version": "0.9.63-beta",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "audiobookshelf-app",
-      "version": "0.9.62-beta",
+      "version": "0.9.63-beta",
      "dependencies": {
        "@capacitor/android": "^4.0.0",
        "@capacitor/app": "^4.0.0",
@@ -26,6 +26,7 @@
        "libarchive.js": "^1.3.0",
        "nuxt": "^2.15.7",
        "socket.io-client": "^4.1.3",
+        "v-click-outside": "^3.2.0",
        "vue-pdf": "^4.2.0",
        "vue-toastification": "^1.7.11",
        "vuedraggable": "^2.24.3"
@@ -17192,6 +17193,14 @@
        "node": ">= 0.4.0"
      }
    },
+    "node_modules/v-click-outside": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-3.2.0.tgz",
+      "integrity": "sha512-QD0bDy38SHJXQBjgnllmkI/rbdiwmq9RC+/+pvrFjYJKTn8dtp7Penf9q1lLBta280fYG2q53mgLhQ+3l3z74w==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -31992,6 +32001,11 @@
      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
    },
+    "v-click-outside": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-3.2.0.tgz",
+      "integrity": "sha512-QD0bDy38SHJXQBjgnllmkI/rbdiwmq9RC+/+pvrFjYJKTn8dtp7Penf9q1lLBta280fYG2q53mgLhQ+3l3z74w=="
+    },
    "vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -1,6 +1,6 @@
 {
  "name": "audiobookshelf-app",
-  "version": "0.9.62-beta",
+  "version": "0.9.63-beta",
  "author": "advplyr",
  "scripts": {
    "dev": "nuxt --hostname 0.0.0.0 --port 1337",
@@ -30,6 +30,7 @@
    "libarchive.js": "^1.3.0",
    "nuxt": "^2.15.7",
    "socket.io-client": "^4.1.3",
+    "v-click-outside": "^3.2.0",
    "vue-pdf": "^4.2.0",
    "vue-toastification": "^1.7.11",
    "vuedraggable": "^2.24.3"
@@ -1,14 +1,83 @@
 <template>
-  <div>Authors</div>
+  <div>
+    <div id="bookshelf" class="w-full h-full p-4 overflow-y-auto">
+      <div class="flex flex-wrap justify-center">
+        <template v-for="author in authors">
+          <cards-author-card :key="author.id" :author="author" :width="96" :height="120" class="p-2" />
+        </template>
+      </div>
+    </div>
+  </div>
 </template>

 <script>
 export default {
  data() {
-    return {}
+    return {
+      loading: true,
+      authors: [],
+      loadedLibraryId: null
+    }
  },
-  watch: {},
-  computed: {},
-  methods: {}
+  computed: {
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    }
+  },
+  methods: {
+    async init() {
+      this.loadedLibraryId = this.currentLibraryId
+      this.authors = await this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/authors`)
+        .then((response) => response.authors)
+        .catch((error) => {
+          console.error('Failed to load authors', error)
+          return []
+        })
+      console.log('Loaded authors', this.authors)
+      this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
+      this.loading = false
+    },
+    authorAdded(author) {
+      if (!this.authors.some((au) => au.id === author.id)) {
+        this.authors.push(author)
+        this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
+      }
+    },
+    authorUpdated(author) {
+      this.authors = this.authors.map((au) => {
+        if (au.id === author.id) {
+          return author
+        }
+        return au
+      })
+    },
+    authorRemoved(author) {
+      this.authors = this.authors.filter((au) => au.id !== author.id)
+      this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
+    },
+    libraryChanged(libraryId) {
+      if (libraryId !== this.loadedLibraryId) {
+        if (this.$store.getters['libraries/getCurrentLibraryMediaType'] === 'book') {
+          this.init()
+        } else {
+          this.$router.replace('/bookshelf')
+        }
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    this.$socket.$on('author_added', this.authorAdded)
+    this.$socket.$on('author_updated', this.authorUpdated)
+    this.$socket.$on('author_removed', this.authorRemoved)
+    this.$eventBus.$on('library-changed', this.libraryChanged)
+  },
+  beforeDestroy() {
+    this.$socket.$off('author_added', this.authorAdded)
+    this.$socket.$off('author_updated', this.authorUpdated)
+    this.$socket.$off('author_removed', this.authorRemoved)
+    this.$eventBus.$off('library-changed', this.libraryChanged)
+  }
 }
 </script>
@@ -37,6 +37,7 @@ export default {
  data() {
    return {
      shelves: [],
+      isSettingsLoaded: false,
      isFirstNetworkConnection: true,
      lastServerFetch: 0,
      lastServerFetchLibraryId: null,
@@ -276,12 +277,25 @@ export default {

      this.isLoading = false
    },
-    openMediaPlayerWithMostRecentListening() {
+    async waitForSettings() {
+      // Wait up to 3 seconds
+      for (let i = 0; i < 6; i++) {
+        if (this.isSettingsLoaded) return true
+        await new Promise((resolve) => setTimeout(resolve, 500))
+      }
+      return false
+    },
+    async openMediaPlayerWithMostRecentListening() {
      // If we don't already have a player open
      // Try opening the first book from continue-listening without playing it
      if (this.$store.state.playerLibraryItemId || !this.$store.state.isFirstAudioLoad) return
      this.$store.commit('setIsFirstAudioLoad', false) // Only run this once on app launch

+      // Wait for settings to load to prevent race condition when setting playback speed.
+      if (!this.isSettingsLoaded) {
+        await this.waitForSettings()
+      }
+
      const continueListeningShelf = this.shelves.find((cat) => cat.id === 'continue-listening')
      const mostRecentEntity = continueListeningShelf?.entities?.[0]
      if (mostRecentEntity) {
@@ -356,11 +370,16 @@ export default {
        }
      })
    },
+    settingsUpdated() {
+      this.isSettingsLoaded = true
+    },
    initListeners() {
      this.$eventBus.$on('library-changed', this.libraryChanged)
+      this.$eventBus.$on('user-settings', this.settingsUpdated)
    },
    removeListeners() {
      this.$eventBus.$off('library-changed', this.libraryChanged)
+      this.$eventBus.$off('user-settings', this.settingsUpdated)
    }
  },
  mounted() {
@@ -17,7 +17,8 @@ export default {
      totalEpisodes: 0,
      currentPage: 0,
      localEpisodeMap: {},
-      isLocal: false
+      isLocal: false,
+      loadedLibraryId: null
    }
  },
  watch: {},
@@ -39,6 +40,7 @@ export default {
      this.$store.commit('globals/setShowPlaylistsAddCreateModal', true)
    },
    async loadRecentEpisodes(page = 0) {
+      this.loadedLibraryId = this.currentLibraryId
      this.processing = true
      const episodePayload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/recent-episodes?limit=25&page=${page}`).catch((error) => {
        console.error('Failed to get recent episodes', error)
@@ -50,10 +52,23 @@ export default {
      this.recentEpisodes = episodePayload.episodes || []
      this.totalEpisodes = episodePayload.total
      this.currentPage = page
+    },
+    libraryChanged(libraryId) {
+      if (libraryId !== this.loadedLibraryId) {
+        if (this.$store.getters['libraries/getCurrentLibraryMediaType'] === 'podcast') {
+          this.loadRecentEpisodes()
+        } else {
+          this.$router.replace('/bookshelf')
+        }
+      }
    }
  },
  mounted() {
    this.loadRecentEpisodes()
+    this.$eventBus.$on('library-changed', this.libraryChanged)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('library-changed', this.libraryChanged)
  }
 }
 </script>
@@ -7,7 +7,6 @@ export default {
  async asyncData({ store, params, query }) {
    // Set filter by
    if (query.filter) {
-      store.commit('user/setSettings', { mobileFilterBy: query.filter })
      await store.dispatch('user/updateUserSettings', { mobileFilterBy: query.filter })
    }
  }
@@ -0,0 +1,485 @@
+<template>
+  <div class="w-full h-full px-3 py-4 overflow-y-auto overflow-x-hidden relative bg-bg">
+    <div class="flex mb-2">
+      <div class="w-10 min-w-10">
+        <covers-preview-cover :src="coverUrl" :width="40" :book-cover-aspect-ratio="bookCoverAspectRatio" :show-resolution="false" class="md:hidden" />
+      </div>
+      <div class="flex-grow px-2">
+        <div class="-mt-0.5 mb-0.5">
+          <nuxt-link :to="`/item/${libraryItemId}`" class="text-sm text-gray-200 underline">{{ podcast.metadata.title }}</nuxt-link>
+        </div>
+        <p v-if="publishedAt" class="text-xs text-gray-300">{{ $dateDistanceFromNow(publishedAt) }}</p>
+      </div>
+    </div>
+
+    <p class="text-lg font-semibold">
+      {{ title }}
+    </p>
+
+    <!-- user progress card -->
+    <div v-if="progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 relative" :class="resettingProgress ? 'opacity-25' : ''">
+      <p class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
+      <p v-if="progressPercent < 1" class="text-gray-400 text-xs">{{ $elapsedPretty(userTimeRemaining) }} remaining</p>
+      <p v-else class="text-gray-400 text-xs">Finished {{ $formatDate(userProgressFinishedAt) }}</p>
+    </div>
+
+    <!-- action buttons -->
+    <div class="flex mt-4 -mx-1">
+      <ui-btn color="success" :disabled="isPlaying" class="flex items-center justify-center flex-grow mx-1" :padding-x="4" @click="playClick">
+        <span v-show="!isPlaying" class="material-icons">play_arrow</span>
+        <span class="px-1 text-sm">{{ isPlaying ? (playerIsLocal ? 'Playing' : 'Streaming') : localEpisodeId ? 'Play' : 'Stream' }}</span>
+      </ui-btn>
+      <ui-btn v-if="showDownload" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mx-1" :padding-x="2" @click="downloadClick">
+        <span class="material-icons" :class="downloadItem ? 'animate-pulse' : ''">{{ downloadItem ? 'downloading' : 'download' }}</span>
+      </ui-btn>
+      <ui-btn color="primary" class="flex items-center justify-center mx-1" :padding-x="2" @click="showMoreMenu = true">
+        <span class="material-icons">more_vert</span>
+      </ui-btn>
+    </div>
+
+    <p class="text-sm text-gray-200 mt-1.5 mb-0.5 default-style" v-html="description" />
+
+    <!-- loading overlay -->
+    <div v-if="processing" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-30 flex items-center justify-center">
+      <widgets-loading-spinner size="la-lg" />
+    </div>
+
+    <modals-dialog v-model="showMoreMenu" :items="moreMenuItems" @action="moreMenuAction" />
+  </div>
+</template>
+
+<script>
+import { Capacitor } from '@capacitor/core'
+import { Dialog } from '@capacitor/dialog'
+import { AbsFileSystem, AbsDownloader } from '@/plugins/capacitor'
+
+export default {
+  async asyncData({ store, params, redirect, app }) {
+    const libraryItemId = params.id
+    const episodeId = params.episode
+
+    let libraryItem = null
+    let episode = null
+    let localEpisode = null
+
+    if (libraryItemId.startsWith('local')) {
+      libraryItem = await app.$db.getLocalLibraryItem(libraryItemId)
+      console.log('Got lli', libraryItemId)
+    } else if (store.state.user.serverConnectionConfig) {
+      libraryItem = await app.$axios.$get(`/api/items/${libraryItemId}?expanded=1`).catch((error) => {
+        console.error('Failed', error)
+        return false
+      })
+
+      if (libraryItem) {
+        const localLibraryItem = await app.$db.getLocalLibraryItemByLId(libraryItemId)
+        if (localLibraryItem) {
+          console.log('Library item has local library item also', localLibraryItem.id)
+          libraryItem.localLibraryItem = localLibraryItem
+
+          localEpisode = localLibraryItem.media.episodes.find((ep) => ep.serverEpisodeId === episodeId)
+        }
+      }
+    }
+
+    if (!libraryItem) {
+      console.error('No item...', params.id)
+      return redirect('/')
+    }
+
+    episode = libraryItem.media.episodes.find((ep) => ep.id === episodeId)
+    if (localEpisode) {
+      // For server episodes that have a matching local episode
+      episode.localEpisode = localEpisode
+    }
+
+    if (!episode) {
+      console.error('No episode...', params.episode)
+      return redirect(`/item/${libraryItemId}`)
+    }
+
+    return {
+      libraryItem,
+      episode
+    }
+  },
+  data() {
+    return {
+      showMoreMenu: false,
+      processing: false,
+      resettingProgress: false
+    }
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    isAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    isIos() {
+      return this.$platform === 'ios'
+    },
+    mediaType() {
+      return 'podcast'
+    },
+    userCanDownload() {
+      return this.$store.getters['user/getUserCanDownload']
+    },
+    isLocal() {
+      return this.libraryItem.isLocal
+    },
+    localLibraryItem() {
+      if (this.isLocal) return this.libraryItem
+      return this.libraryItem.localLibraryItem
+    },
+    libraryItemId() {
+      return this.libraryItem.id
+    },
+    localLibraryItemId() {
+      if (this.localLibraryItem) return this.localLibraryItem.id
+      return null
+    },
+    localEpisode() {
+      if (this.isLocal) return this.episode
+      return this.episode.localEpisode
+    },
+    localEpisodeId() {
+      if (this.localEpisode) return this.localEpisode.id
+      return null
+    },
+    podcast() {
+      return this.libraryItem.media
+    },
+    audioFile() {
+      return this.episode.audioFile
+    },
+    title() {
+      return this.episode.title || ''
+    },
+    description() {
+      return this.episode.description || ''
+    },
+    duration() {
+      return this.$secondsToTimestamp(this.episode.duration)
+    },
+    coverUrl() {
+      if (this.isLocal) {
+        if (!this.libraryItem.coverContentUrl) return '/book_placeholder.jpg'
+        return Capacitor.convertFileSrc(this.libraryItem.coverContentUrl)
+      }
+      return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.libraryItemId)
+    },
+    isPlaying() {
+      if (this.playerIsLocal && this.localLibraryItemId && this.localEpisodeId) {
+        // Check is streaming local version of this episode
+        return this.$store.getters['getIsEpisodeStreaming'](this.localLibraryItemId, this.localEpisodeId)
+      }
+      return this.$store.getters['getIsEpisodeStreaming'](this.libraryItemId, this.episode.id)
+    },
+    playerIsLocal() {
+      return !!this.$store.state.playerIsLocal
+    },
+    playerIsPlaying() {
+      return this.$store.state.playerIsPlaying && this.isPlaying
+    },
+    userItemProgress() {
+      if (this.isLocal) return this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId, this.episode.id)
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId, this.episode.id)
+    },
+    localMediaProgress() {
+      if (this.isLocal) return this.$store.getters['globals/getLocalMediaProgressById'](this.libraryItemId, this.episode.id)
+      else if (this.localLibraryItemId && this.localEpisodeId) {
+        return this.$store.getters['globals/getLocalMediaProgressById'](this.localLibraryItemId, this.localEpisodeId)
+      } else {
+        return null
+      }
+    },
+    progressPercent() {
+      return this.userItemProgress ? this.userItemProgress.progress : 0
+    },
+    userIsFinished() {
+      return this.userItemProgress ? !!this.userItemProgress.isFinished : false
+    },
+    userProgressFinishedAt() {
+      return this.userItemProgress ? this.userItemProgress.finishedAt : 0
+    },
+    userTimeRemaining() {
+      if (!this.userItemProgress) return 0
+      const duration = this.userItemProgress.duration || this.episode.duration
+      return duration - this.userItemProgress.currentTime
+    },
+    timeRemaining() {
+      if (this.playerIsPlaying) return 'Playing'
+      if (!this.progressPercent) return this.$elapsedPretty(this.episode.duration)
+      if (this.userIsFinished) return 'Finished'
+      const remaining = Math.floor(this.userItemProgress.duration - this.userItemProgress.currentTime)
+      return `${this.$elapsedPretty(remaining)} left`
+    },
+    publishedAt() {
+      return this.episode.publishedAt
+    },
+    downloadItem() {
+      return this.$store.getters['globals/getDownloadItem'](this.libraryItemId, this.episode.id)
+    },
+    showDownload() {
+      return this.userCanDownload && !this.localEpisode
+    },
+    moreMenuItems() {
+      const items = []
+
+      if (!this.userIsFinished) {
+        items.push({
+          text: 'Mark as Finished',
+          value: 'markFinished',
+          icon: 'beenhere'
+        })
+      }
+
+      if (this.progressPercent > 0) {
+        items.push({
+          text: 'Discard Progress',
+          value: 'discardProgress',
+          icon: 'backspace'
+        })
+      }
+
+      if (!this.isLocal) {
+        items.push({
+          text: 'Add to Playlist',
+          value: 'playlist',
+          icon: 'playlist_add'
+        })
+
+        if (this.isAdminOrUp) {
+          items.push({
+            text: 'Remove from Server',
+            value: 'remove_from_server',
+            icon: 'delete_forever'
+          })
+        }
+      }
+
+      return items
+    }
+  },
+  methods: {
+    async playClick() {
+      await this.$hapticsImpact()
+      if (this.playerIsPlaying) {
+        this.$eventBus.$emit('pause-item')
+      } else {
+        if (this.localEpisodeId && this.localLibraryItemId && !this.isLocal) {
+          console.log('Play local episode', this.localEpisodeId, this.localLibraryItemId)
+
+          this.$eventBus.$emit('play-item', {
+            libraryItemId: this.localLibraryItemId,
+            episodeId: this.localEpisodeId,
+            serverLibraryItemId: this.libraryItemId,
+            serverEpisodeId: this.episode.id
+          })
+        } else {
+          this.$eventBus.$emit('play-item', {
+            libraryItemId: this.libraryItemId,
+            episodeId: this.episode.id
+          })
+        }
+      }
+    },
+    async downloadClick() {
+      if (this.downloadItem) return
+      await this.$hapticsImpact()
+      if (this.isIos) {
+        // no local folders on iOS
+        this.startDownload()
+      } else {
+        this.download()
+      }
+    },
+    async download(selectedLocalFolder = null) {
+      let localFolder = selectedLocalFolder
+      if (!localFolder) {
+        const localFolders = (await this.$db.getLocalFolders()) || []
+        console.log('Local folders loaded', localFolders.length)
+        const foldersWithMediaType = localFolders.filter((lf) => {
+          console.log('Checking local folder', lf.mediaType)
+          return lf.mediaType == this.mediaType
+        })
+        console.log('Folders with media type', this.mediaType, foldersWithMediaType.length)
+        if (!foldersWithMediaType.length) {
+          // No local folders or no local folders with this media type
+          localFolder = await this.selectFolder()
+        } else if (foldersWithMediaType.length == 1) {
+          console.log('Only 1 local folder with this media type - auto select it')
+          localFolder = foldersWithMediaType[0]
+        } else {
+          console.log('Multiple folders with media type')
+          // this.showSelectLocalFolder = true
+          return
+        }
+        if (!localFolder) {
+          return this.$toast.error('Invalid download folder')
+        }
+      }
+
+      console.log('Local folder', JSON.stringify(localFolder))
+
+      const startDownloadMessage = `Start download for "${this.title}" to folder ${localFolder.name}?`
+      const { value } = await Dialog.confirm({
+        title: 'Confirm',
+        message: startDownloadMessage
+      })
+      if (value) {
+        this.startDownload(localFolder)
+      }
+    },
+    async selectFolder() {
+      const folderObj = await AbsFileSystem.selectFolder({ mediaType: this.mediaType })
+      if (folderObj.error) {
+        return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
+      }
+      return folderObj
+    },
+    async startDownload(localFolder) {
+      const payload = {
+        libraryItemId: this.libraryItemId,
+        episodeId: this.episode.id
+      }
+      if (localFolder) {
+        payload.localFolderId = localFolder.id
+      }
+      const downloadRes = await AbsDownloader.downloadLibraryItem(payload)
+      if (downloadRes && downloadRes.error) {
+        const errorMsg = downloadRes.error || 'Unknown error'
+        console.error('Download error', errorMsg)
+        this.$toast.error(errorMsg)
+      }
+    },
+    moreMenuAction(action) {
+      this.showMoreMenu = false
+      if (action === 'markFinished') {
+        this.toggleFinished()
+      } else if (action === 'discardProgress') {
+        this.discardProgress()
+      } else if (action === 'playlist' && !this.isLocal) {
+        this.$store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode: this.episode }])
+        this.$store.commit('globals/setShowPlaylistsAddCreateModal', true)
+      } else if (action === 'remove_from_server' && !this.isLocal && this.isAdminOrUp) {
+        this.deleteEpisodeFromServerClick()
+      }
+    },
+    async discardProgress() {
+      await this.$hapticsImpact()
+
+      const { value } = await Dialog.confirm({
+        title: 'Confirm',
+        message: 'Are you sure you want to reset your progress?'
+      })
+      if (value) {
+        this.resettingProgress = true
+        if (this.isLocal) {
+          // TODO: If connected to server also sync with server
+          await this.$db.removeLocalMediaProgress(this.localMediaProgress.id)
+          this.$store.commit('globals/removeLocalMediaProgressForItem', this.localMediaProgress.id)
+        } else {
+          await this.$axios
+            .$delete(`/api/me/progress/${this.userItemProgress.id}`)
+            .then(() => {
+              console.log('Progress reset complete')
+              this.$toast.success(`Your progress was reset`)
+              this.$store.commit('user/removeMediaProgress', this.userItemProgress.id)
+            })
+            .catch((error) => {
+              console.error('Progress reset failed', error)
+            })
+        }
+        this.resettingProgress = false
+      }
+    },
+    async toggleFinished() {
+      await this.$hapticsImpact()
+
+      if (this.isLocal || this.localEpisode) {
+        const isFinished = !this.userIsFinished
+        const localLibraryItemId = this.localLibraryItemId
+        const localEpisodeId = this.localEpisodeId
+        const payload = await this.$db.updateLocalMediaProgressFinished({ localLibraryItemId, localEpisodeId, isFinished })
+        console.log('toggleFinished payload', JSON.stringify(payload))
+
+        if (!payload || payload.error) {
+          var errorMsg = payload ? payload.error : 'Unknown error'
+          this.$toast.error(errorMsg)
+        } else {
+          const localMediaProgress = payload.localMediaProgress
+          console.log('toggleFinished localMediaProgress', JSON.stringify(localMediaProgress))
+          if (localMediaProgress) {
+            this.$store.commit('globals/updateLocalMediaProgress', localMediaProgress)
+          }
+
+          if (payload.server) {
+            this.$toast.success(`Local & Server Item marked as ${isFinished ? 'Finished' : 'Not Finished'}`)
+          } else {
+            this.$toast.success(`Local Item marked as ${isFinished ? 'Finished' : 'Not Finished'}`)
+          }
+        }
+      } else {
+        const updatePayload = {
+          isFinished: !this.userIsFinished
+        }
+        this.$axios
+          .$patch(`/api/me/progress/${this.libraryItemId}/${this.episode.id}`, updatePayload)
+          .then(() => {
+            this.$toast.success(`Item marked as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+          })
+          .catch((error) => {
+            console.error('Failed', error)
+            this.$toast.error(`Failed to mark as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+          })
+      }
+    },
+    async deleteEpisodeFromServerClick() {
+      await this.$hapticsImpact()
+
+      const { value } = await Dialog.confirm({
+        title: 'Confirm',
+        message: `Are you sure you want to delete episode "${this.title}" from the server?\nWarning: This will delete the audio file.`
+      })
+
+      if (value) {
+        this.processing = true
+        this.$axios
+          .$delete(`/api/podcasts/${this.libraryItemId}/episode/${this.episode.id}?hard=1`)
+          .then(() => {
+            this.$toast.success('Episode deleted from server')
+            this.$router.replace(`/item/${this.libraryItemId}`)
+          })
+          .catch((error) => {
+            const errorMsg = error.response && error.response.data ? error.response.data : 'Failed to delete episode'
+            console.error('Failed to delete episode', error)
+            this.$toast.error(errorMsg)
+          })
+          .finally(() => {
+            this.processing = false
+          })
+      }
+    },
+    newLocalLibraryItem(item) {
+      if (item.libraryItemId == this.libraryItemId) {
+        console.log('New local library item', item.id)
+        this.$set(this.libraryItem, 'localLibraryItem', item)
+
+        const episode = item.media.episodes.find((ep) => ep.serverEpisodeId === this.episode.id)
+        if (episode) {
+          this.$set(this.episode, 'localEpisode', episode)
+        }
+      }
+    }
+  },
+  mounted() {
+    this.$eventBus.$on('new-local-library-item', this.newLocalLibraryItem)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('new-local-library-item', this.newLocalLibraryItem)
+  }
+}
+</script>
@@ -1,11 +1,12 @@
 <template>
-  <div class="w-full h-full px-3 py-4 overflow-y-auto overflow-x-hidden relative bg-bg">
+  <div class="w-full h-full px-3 pb-4 overflow-y-auto overflow-x-hidden relative bg-bg">
    <div class="fixed top-0 left-0 w-full h-full pointer-events-none p-px z-10">
      <div class="w-full h-full" :style="{ backgroundColor: coverRgb }" />
      <div class="w-full h-full absolute top-0 left-0" style="background: linear-gradient(169deg, rgba(0, 0, 0, 0.4) 0%, rgba(55, 56, 56, 1) 80%)" />
    </div>

    <div class="z-10 relative">
+      <!-- cover -->
      <div class="w-full flex justify-center relative mb-4">
        <div style="width: 0; transform: translateX(-50vw); overflow: visible">
          <div style="width: 150vw; overflow: hidden">
@@ -20,38 +21,18 @@
        </div>
      </div>

-      <h1 class="text-xl font-semibold">{{ title }}</h1>
-
-      <p v-if="subtitle" class="text-gray-100 text-base py-0.5 mb-0.5">{{ subtitle }}</p>
-
-      <p v-if="seriesList && seriesList.length" class="text-sm text-gray-300 py-0.5">
-        <template v-for="(series, index) in seriesList">
-          <nuxt-link :key="series.id" :to="`/bookshelf/series/${series.id}`" class="underline">{{ series.text }}</nuxt-link
-          ><span :key="`${series.id}-comma`" v-if="index < seriesList.length - 1">,&nbsp;</span>
-        </template>
-      </p>
-
-      <p v-if="podcastAuthor" class="text-sm text-gray-300 py-0.5">by {{ podcastAuthor }}</p>
-      <p v-else-if="bookAuthors && bookAuthors.length" class="text-sm text-gray-300 py-0.5">
-        by
-        <template v-for="(author, index) in bookAuthors">
-          <nuxt-link :key="author.id" :to="`/bookshelf/library?filter=authors.${$encode(author.id)}`" class="underline">{{ author.name }}</nuxt-link
-          ><span :key="`${author.id}-comma`" v-if="index < bookAuthors.length - 1">,&nbsp;</span>
-        </template>
-      </p>
+      <!-- title -->
+      <div class="text-center mb-2">
+        <h1 class="text-xl font-semibold">{{ title }}</h1>
+        <p v-if="subtitle" class="text-gray-100 text-base">{{ subtitle }}</p>
+      </div>

      <!-- Show an indicator for local library items whether they are linked to a server item and if that server item is connected -->
-      <p v-if="isLocal && serverLibraryItemId" style="font-size: 10px" class="text-success py-1 uppercase tracking-widest">connected</p>
-      <p v-else-if="isLocal && libraryItem.serverAddress" style="font-size: 10px" class="text-gray-400 py-1">{{ libraryItem.serverAddress }}</p>
+      <p v-if="isLocal && serverLibraryItemId" style="font-size: 10px" class="text-success text-center py-1 uppercase tracking-widest">connected</p>
+      <p v-else-if="isLocal && libraryItem.serverAddress" style="font-size: 10px" class="text-gray-400 text-center py-1">{{ libraryItem.serverAddress }}</p>

      <!-- action buttons -->
-      <div>
-        <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 relative" :class="resettingProgress ? 'opacity-25' : ''">
-          <p class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
-          <p v-if="progressPercent < 1" class="text-gray-400 text-xs">{{ $elapsedPretty(userTimeRemaining) }} remaining</p>
-          <p v-else class="text-gray-400 text-xs">Finished {{ $formatDate(userProgressFinishedAt) }}</p>
-        </div>
-
+      <div class="col-span-full">
        <div v-if="isLocal" class="flex mt-4 -mx-1">
          <ui-btn v-if="showPlay" color="success" :disabled="isPlaying" class="flex items-center justify-center flex-grow mx-1" :padding-x="4" @click="playClick">
            <span v-show="!isPlaying" class="material-icons">play_arrow</span>
@@ -81,6 +62,12 @@
            <span class="material-icons">more_vert</span>
          </ui-btn>
        </div>
+
+        <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 text-center" :class="resettingProgress ? 'opacity-25' : ''">
+          <p>Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
+          <p v-if="progressPercent < 1" class="text-gray-400 text-xs">{{ $elapsedPretty(userTimeRemaining) }} remaining</p>
+          <p v-else class="text-gray-400 text-xs">Finished {{ $formatDate(userProgressFinishedAt) }}</p>
+        </div>
      </div>

      <div v-if="downloadItem" class="py-3">
@@ -89,8 +76,28 @@
      </div>

      <!-- metadata -->
-      <div class="grid gap-2 my-4" style="grid-template-columns: max-content auto">
-        <div v-if="narrators && narrators.length" class="text-white text-opacity-60 uppercase text-sm">Narrators</div>
+      <div id="metadata" class="grid gap-2 my-2" style="">
+        <div v-if="podcastAuthor || (bookAuthors && bookAuthors.length)" class="text-white text-opacity-60 uppercase text-sm">Author</div>
+        <div v-if="podcastAuthor" class="text-sm">{{ podcastAuthor }}</div>
+        <div v-else-if="bookAuthors && bookAuthors.length" class="text-sm">
+          <template v-for="(author, index) in bookAuthors">
+            <nuxt-link :key="author.id" :to="`/bookshelf/library?filter=authors.${$encode(author.id)}`" class="underline">{{ author.name }}</nuxt-link
+            ><span :key="`${author.id}-comma`" v-if="index < bookAuthors.length - 1">, </span>
+          </template>
+        </div>
+
+        <div v-if="series && series.length" class="text-white text-opacity-60 uppercase text-sm">Series</div>
+        <div v-if="series && series.length" class="truncate text-sm">
+          <template v-for="(series, index) in seriesList">
+            <nuxt-link :key="series.id" :to="`/bookshelf/series/${series.id}`" class="underline">{{ series.text }}</nuxt-link
+            ><span :key="`${series.id}-comma`" v-if="index < seriesList.length - 1">,&nbsp;</span>
+          </template>
+        </div>
+
+        <div v-if="numTracks" class="text-white text-opacity-60 uppercase text-sm">Duration</div>
+        <div v-if="numTracks" class="text-sm">{{ $elapsedPretty(duration) }}</div>
+
+        <div v-if="narrators && narrators.length" class="text-white text-opacity-60 uppercase text-sm">{{ narrators.length === 1 ? 'Narrator' : 'Narrators' }}</div>
        <div v-if="narrators && narrators.length" class="truncate text-sm">
          <template v-for="(narrator, index) in narrators">
            <nuxt-link :key="narrator" :to="`/bookshelf/library?filter=narrators.${$encode(narrator)}`" class="underline">{{ narrator }}</nuxt-link
@@ -98,40 +105,35 @@
          </template>
        </div>

-        <div v-if="publishedYear" class="text-white text-opacity-60 uppercase text-sm">Published</div>
-        <div v-if="publishedYear" class="text-sm">{{ publishedYear }}</div>
-
-        <div v-if="genres.length" class="text-white text-opacity-60 uppercase text-sm">Genres</div>
+        <div v-if="genres.length" class="text-white text-opacity-60 uppercase text-sm">{{ genres.length === 1 ? 'Genre' : 'Genres' }}</div>
        <div v-if="genres.length" class="truncate text-sm">
          <template v-for="(genre, index) in genres">
            <nuxt-link :key="genre" :to="`/bookshelf/library?filter=genres.${$encode(genre)}`" class="underline">{{ genre }}</nuxt-link
            ><span :key="index" v-if="index < genres.length - 1">, </span>
          </template>
        </div>
+
+        <div v-if="publishedYear" class="text-white text-opacity-60 uppercase text-sm">Published</div>
+        <div v-if="publishedYear" class="text-sm">{{ publishedYear }}</div>
      </div>

-      <div v-if="numTracks" class="flex text-gray-100 text-xs my-2 -mx-0.5">
-        <div class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5">
-          <p>{{ $elapsedPretty(duration) }}</p>
-        </div>
-        <!-- TODO: Local books dont save the size -->
-        <div v-if="size" class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5">
-          <p>{{ $bytesPretty(size) }}</p>
-        </div>
-        <div class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5">
-          <p>{{ numTracks }} Track{{ numTracks > 1 ? 's' : '' }}</p>
-        </div>
-        <div v-if="numChapters" class="bg-primary bg-opacity-80 px-3 py-0.5 rounded-full mx-0.5">
-          <p>{{ numChapters }} Chapter{{ numChapters > 1 ? 's' : '' }}</p>
+      <div v-if="description" class="w-full py-2">
+        <p ref="description" class="text-sm text-justify whitespace-pre-line font-light" :class="{ 'line-clamp-4': !showFullDescription }" style="hyphens: auto">{{ description }}</p>
+
+        <div v-if="descriptionClamped" class="text-white text-sm py-2" @click="showFullDescription = !showFullDescription">
+          {{ showFullDescription ? 'Read less' : 'Read more' }}
+          <span class="material-icons align-middle text-base -mt-px">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span>
        </div>
      </div>

-      <div class="w-full py-4">
-        <p class="text-sm text-justify" style="hyphens: auto;">{{ description }}</p>
-      </div>
-
+      <!-- tables -->
      <tables-podcast-episodes-table v-if="isPodcast" :library-item="libraryItem" :local-library-item-id="localLibraryItemId" :episodes="episodes" :local-episodes="localLibraryItemEpisodes" :is-local="isLocal" />

+      <tables-chapters-table v-if="numChapters" :library-item="libraryItem" @playAtTimestamp="playAtTimestamp" />
+
+      <tables-tracks-table v-if="numTracks" :tracks="tracks" :library-item-id="libraryItemId" />
+
+      <!-- modals -->
      <modals-select-local-folder-modal v-model="showSelectLocalFolder" :media-type="mediaType" @select="selectedLocalFolder" />

      <modals-dialog v-model="showMoreMenu" :items="moreMenuItems" @action="moreMenuAction" />
@@ -150,9 +152,8 @@ import { FastAverageColor } from 'fast-average-color'

 export default {
  async asyncData({ store, params, redirect, app }) {
-    var libraryItemId = params.id
-    var libraryItem = null
-    console.log(libraryItemId)
+    const libraryItemId = params.id
+    let libraryItem = null
    if (libraryItemId.startsWith('local')) {
      libraryItem = await app.$db.getLocalLibraryItem(libraryItemId)
      console.log('Got lli', libraryItemId)
@@ -161,9 +162,9 @@ export default {
        console.error('Failed', error)
        return false
      })
-      // Check if
+
      if (libraryItem) {
-        var localLibraryItem = await app.$db.getLocalLibraryItemByLId(libraryItemId)
+        const localLibraryItem = await app.$db.getLocalLibraryItemByLId(libraryItemId)
        if (localLibraryItem) {
          console.log('Library item has local library item also', localLibraryItem.id)
          libraryItem.localLibraryItem = localLibraryItem
@@ -189,7 +190,9 @@ export default {
      showFullscreenCover: false,
      coverRgb: 'rgb(55, 56, 56)',
      coverBgIsLight: false,
-      windowWidth: 0
+      windowWidth: 0,
+      descriptionClamped: false,
+      showFullDescription: false
    }
  },
  computed: {
@@ -289,9 +292,6 @@ export default {
    duration() {
      return this.media.duration
    },
-    size() {
-      return this.media.size
-    },
    user() {
      return this.$store.state.user.user
    },
@@ -314,9 +314,6 @@ export default {
    progressPercent() {
      return this.userItemProgress ? Math.max(Math.min(1, this.userItemProgress.progress), 0) : 0
    },
-    userProgressStartedAt() {
-      return this.userItemProgress ? this.userItemProgress.startedAt : 0
-    },
    userProgressFinishedAt() {
      return this.userItemProgress ? this.userItemProgress.finishedAt : 0
    },
@@ -327,9 +324,11 @@ export default {
      if (this.localLibraryItemId && this.$store.getters['getIsItemStreaming'](this.localLibraryItemId)) return true
      return this.$store.getters['getIsItemStreaming'](this.libraryItemId)
    },
+    tracks() {
+      return this.media.tracks || []
+    },
    numTracks() {
-      if (!this.media.tracks) return 0
-      return this.media.tracks.length || 0
+      return this.tracks.length || 0
    },
    numChapters() {
      if (!this.media.chapters) return 0
@@ -475,8 +474,13 @@ export default {
    readBook() {
      this.$store.commit('openReader', this.libraryItem)
    },
-    async playClick() {
-      let episodeId = null
+    playAtTimestamp(seconds) {
+      this.play(seconds)
+    },
+    playClick() {
+      this.play()
+    },
+    async play(startTime = null) {
      await this.$hapticsImpact()

      if (this.isPodcast) {
@@ -496,7 +500,7 @@ export default {

        if (!episode) episode = this.episodes[0]

-        episodeId = episode.id
+        const episodeId = episode.id

        let localEpisode = null
        if (this.hasLocal && !this.isLocal) {
@@ -509,26 +513,33 @@ export default {
        if (serverEpisodeId && this.serverLibraryItemId && this.isCasting) {
          // If casting and connected to server for local library item then send server library item id
          this.$eventBus.$emit('play-item', { libraryItemId: this.serverLibraryItemId, episodeId: serverEpisodeId })
-          return
-        }
-        if (localEpisode) {
+        } else if (localEpisode) {
          this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItem.id, episodeId: localEpisode.id, serverLibraryItemId: this.serverLibraryItemId, serverEpisodeId })
-          return
+        } else {
+          this.$eventBus.$emit('play-item', { libraryItemId: this.libraryItemId, episodeId })
        }
      } else {
        // Audiobook
-        if (this.hasLocal && this.serverLibraryItemId && this.isCasting) {
-          // If casting and connected to server for local library item then send server library item id
-          this.$eventBus.$emit('play-item', { libraryItemId: this.serverLibraryItemId })
-          return
-        }
-        if (this.hasLocal) {
-          this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItem.id, serverLibraryItemId: this.serverLibraryItemId })
-          return
-        }
-      }
+        let libraryItemId = this.libraryItemId

-      this.$eventBus.$emit('play-item', { libraryItemId: this.libraryItemId, episodeId })
+        // When casting use server library item
+        if (this.hasLocal && this.serverLibraryItemId && this.isCasting) {
+          libraryItemId = this.serverLibraryItemId
+        } else if (this.hasLocal) {
+          libraryItemId = this.localLibraryItem.id
+        }
+
+        // If start time and is not already streaming then ask for confirmation
+        if (startTime !== null && startTime !== undefined && !this.$store.getters['getIsMediaStreaming'](libraryItemId, null)) {
+          const { value } = await Dialog.confirm({
+            title: 'Confirm',
+            message: `Start playback for "${this.title}" at ${this.$secondsToTimestamp(startTime)}?`
+          })
+          if (!value) return
+        }
+
+        this.$eventBus.$emit('play-item', { libraryItemId, serverLibraryItemId: this.serverLibraryItemId, startTime })
+      }
    },
    async clearProgressClick() {
      await this.$hapticsImpact()
@@ -564,6 +575,7 @@ export default {
      if (libraryItem.id === this.libraryItemId) {
        console.log('Item Updated')
        this.libraryItem = libraryItem
+        this.checkDescriptionClamped()
      }
    },
    async selectFolder() {
@@ -712,8 +724,17 @@ export default {
        this.$router.replace('/bookshelf')
      }
    },
+    checkDescriptionClamped() {
+      if (this.showFullDescription) return
+      if (!this.$refs.description) {
+        this.descriptionClamped = false
+      } else {
+        this.descriptionClamped = this.$refs.description.scrollHeight > this.$refs.description.clientHeight
+      }
+    },
    windowResized() {
      this.windowWidth = window.innerWidth
+      this.checkDescriptionClamped()
    }
  },
  mounted() {
@@ -722,6 +743,7 @@ export default {
    this.$eventBus.$on('library-changed', this.libraryChanged)
    this.$eventBus.$on('new-local-library-item', this.newLocalLibraryItem)
    this.$socket.$on('item_updated', this.itemUpdated)
+    this.checkDescriptionClamped()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.windowResized)
@@ -741,4 +763,15 @@ export default {
  width: 150vw !important;
  max-width: 150vw !important;
 }
+
+@media only screen and (max-width: 500px) {
+  #metadata {
+    grid-template-columns: auto 1fr;
+  }
+}
+@media only screen and (min-width: 500px) {
+  #metadata {
+    grid-template-columns: auto 1fr auto 1fr;
+  }
+}
 </style>
@@ -189,7 +189,11 @@ export default {

 <style scoped>
 .media-item-container {
-  height: calc(100vh - 200px);
-  max-height: calc(100vh - 200px);
+  height: calc(100vh - 210px);
+  max-height: calc(100vh - 210px);
+}
+.playerOpen .media-item-container {
+  height: calc(100vh - 310px);
+  max-height: calc(100vh - 310px);
 }
 </style>
@@ -390,7 +390,7 @@ export default {
 }
 </script>

-<style>
+<style scoped>
 .media-item-container {
  height: calc(100vh - 200px);
  max-height: calc(100vh - 200px);
@@ -53,7 +53,7 @@ class AbsAudioPlayerWeb extends WebPlugin {
      var playbackSession = await $axios.$post(route, { mediaPlayer: 'html5-mobile', forceDirectPlay: true })
      if (playbackSession) {
        if (startTime !== undefined && startTime !== null) playbackSession.currentTime = startTime
-        this.setAudioPlayer(playbackSession, true)
+        this.setAudioPlayer(playbackSession, playWhenReady)
      }
    }
    return false
@@ -1,9 +1,12 @@
 import Vue from 'vue'
+import vClickOutside from 'v-click-outside'
 import { App } from '@capacitor/app'
 import { Dialog } from '@capacitor/dialog'
 import { StatusBar, Style } from '@capacitor/status-bar';
 import { formatDistance, format, addDays, isDate } from 'date-fns'
-import { Capacitor } from '@capacitor/core';
+import { Capacitor } from '@capacitor/core'
+
+Vue.directive('click-outside', vClickOutside.directive)

 if (Capacitor.getPlatform() != 'web') {
  const setStatusBarStyleDark = async () => {
@@ -150,43 +153,6 @@ Vue.prototype.$sanitizeFilename = (input, colonReplacement = ' - ') => {
  return sanitized
 }

-function isClickedOutsideEl(clickEvent, elToCheckOutside, ignoreSelectors = [], ignoreElems = []) {
-  const isDOMElement = (element) => {
-    return element instanceof Element || element instanceof HTMLDocument
-  }
-
-  const clickedEl = clickEvent.srcElement
-  const didClickOnIgnoredEl = ignoreElems.filter((el) => el).some((element) => element.contains(clickedEl) || element.isEqualNode(clickedEl))
-  const didClickOnIgnoredSelector = ignoreSelectors.length ? ignoreSelectors.map((selector) => clickedEl.closest(selector)).reduce((curr, accumulator) => curr && accumulator, true) : false
-
-  if (isDOMElement(elToCheckOutside) && !elToCheckOutside.contains(clickedEl) && !didClickOnIgnoredEl && !didClickOnIgnoredSelector) {
-    return true
-  }
-
-  return false
-}
-
-Vue.directive('click-outside', {
-  bind: function (el, binding, vnode) {
-    let vm = vnode.context;
-    let callback = binding.value;
-    if (typeof callback !== 'function') {
-      console.error('Invalid callback', binding)
-      return
-    }
-    el['__click_outside__'] = (ev) => {
-      if (isClickedOutsideEl(ev, el)) {
-        callback.call(vm, ev)
-      }
-    }
-    document.addEventListener('click', el['__click_outside__'], false)
-  },
-  unbind: function (el, binding, vnode) {
-    document.removeEventListener('click', el['__click_outside__'], false)
-    delete el['__click_outside__']
-  }
-})
-
 function xmlToJson(xml) {
  const json = {};
  for (const res of xml.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) {
@@ -5,7 +5,9 @@ export const state = () => ({
    mobileOrderBy: 'addedAt',
    mobileOrderDesc: true,
    mobileFilterBy: 'all',
-    playbackRate: 1
+    playbackRate: 1,
+    collapseSeries: false,
+    collapseBookSeries: false
  }
 })

@@ -89,8 +91,8 @@ export const actions = {
      }
    }
    if (hasChanges) {
-      await this.$localStore.setUserSettings(existingSettings)
      commit('setSettings', existingSettings)
+      await this.$localStore.setUserSettings(existingSettings)
      this.$eventBus.$emit('user-settings', state.settings)
    }
  },
Author	SHA1	Message	Date
advplyr	840979d635	Fix play at start time	2023-03-06 16:59:49 -06:00
advplyr	53c9109534	iOS fix local episode duration and playback session title, version bump 0.9.63	2023-03-06 16:47:38 -06:00
advplyr	87ca6018d3	Version bump 0.9.63	2023-03-06 16:11:20 -06:00
advplyr	c590087578	Fix description line clamp show more	2023-03-06 15:51:11 -06:00
advplyr	3963ffa0e2	iOS implement start time override	2023-03-06 15:46:07 -06:00
advplyrandGitHub	eaa0c9914a	Merge pull request #571 from lkiesow/center-title Center title on book details	2023-03-06 15:30:15 -06:00
advplyr	d9b0b8c33d	Add chapters & tracks table. Clamp description to 4 lines. Move size to more info modal	2023-03-06 15:27:12 -06:00
advplyr	fb4e7e6b55	Merge branch 'master' into center-title	2023-03-06 13:48:30 -06:00
advplyr	78a063a669	Fix:iOS download books with CD subfolders #620	2023-03-06 13:27:57 -06:00
advplyr	cb5d32bbb9	Fix epub reader	2023-03-06 13:09:09 -06:00
advplyr	f594b734c0	Adding more top padding to ereader	2023-03-06 11:40:00 -06:00
advplyr	bf62b82037	Fix ereader padding and swiping	2023-03-06 10:58:08 -06:00
advplyr	39fbb0902e	Removing padding above cover on item page	2023-03-05 16:47:04 -06:00
advplyr	7818500f0f	Fix:Podcast latest and book authors page refresh/redirect on library change	2023-03-05 11:12:17 -06:00
advplyr	1ea984b915	Update iOS disable touch callout and user select	2023-03-04 17:15:48 -06:00
advplyr	f28405081a	Update:Audio player controls max width	2023-03-04 16:42:06 -06:00
advplyr	317f00e1b8	Update:Audio player drag cursor to seek #457	2023-03-04 16:26:37 -06:00
advplyr	f8ce0b8355	Fix collapse sub series show series name	2023-03-04 14:15:08 -06:00
advplyr	9fd6ff9fd2	Fix sub series navigation not refreshing entities	2023-03-04 14:12:16 -06:00
advplyr	3931020c83	Update:Audio player cover rounded corners and rounded track	2023-03-04 13:59:37 -06:00
advplyr	8bdb6b0b66	Update:Fullscreen audio player track padding	2023-03-04 13:49:58 -06:00
advplyr	33bdee66a3	Add:Collapse series and collapse sub-series settings #99	2023-03-03 17:05:23 -06:00
advplyr	a81f50878e	Add:Authors page #618	2023-03-02 17:59:11 -06:00
advplyr	322f7d75dd	Fix:Show episode title on home page shelves #616	2023-03-02 17:17:49 -06:00
advplyr	2f34da4e99	Fix:Android playback rate set on initial load #532	2023-03-01 17:47:07 -06:00
advplyr	5a9e30b08c	Update:Show raw cover image in audio player #614	2023-02-27 16:30:18 -06:00
advplyr	04e233816d	Android fix for playing items with no cover in development	2023-02-26 17:21:03 -06:00
advplyr	3ad1042b13	Fix:Android bluetooth controls for fast forward/rewind	2023-02-26 15:56:39 -06:00
advplyr	4fb9201823	Update:Additional padding in local library items folder page #592	2023-02-26 14:57:04 -06:00
advplyr	02089e1489	Update:Increased padding on modals	2023-02-26 14:41:18 -06:00
advplyr	da442f4a17	Fix:Clicking author card on home page filter/sort #607	2023-02-26 14:26:41 -06:00
advplyr	a0f8e6fb93	Fix:Initializing haptic feedback setting on app launch #603	2023-02-26 12:54:56 -06:00
advplyrandGitHub	20cf5a6132	Merge pull request #597 from KeyboardHammer/widget Android Home Screen Widget	2023-02-26 11:30:16 -06:00
advplyr	f5ca30620f	Update android widget sizing, hide buttons on app close, and initialize when added	2023-02-26 11:26:34 -06:00
Lars Kiesow	72ec9d81b1	Singular & Plural	2023-02-26 13:19:23 +01:00
Lars Kiesow	29568412e6	four columns	2023-02-26 13:19:23 +01:00
Lars Kiesow	f94140ec6b	expand	2023-02-26 13:19:23 +01:00
Lars Kiesow	51062e7403	…	2023-02-26 13:19:22 +01:00
Lars Kiesow	0942bd2548	move title down	2023-02-26 13:19:22 +01:00
Lars Kiesow	5939fee66f	one-big-table	2023-02-26 13:19:22 +01:00
Lars Kiesow	68560fd5f5	move series down	2023-02-26 13:19:22 +01:00
Lars Kiesow	a38b826898	Center title on book details This patch centers the title, author and series metadata on the book details page below the cover. This makes this view look similar to the places where the metadata are also places in the center.	2023-02-26 13:19:22 +01:00
advplyr	0158ccc4c8	Hide widget action buttons when app closes	2023-02-25 18:13:03 -06:00
Alex	a5ba6c64c9	redo widget layout, hide buttons on force close	2023-02-25 18:02:20 -06:00
advplyr	d67454db9a	Fix:Update bookshelf on screen orientation change #602	2023-02-25 16:53:48 -06:00
advplyr	fb35d8b1a0	Add:Podcast episode page and update episode lists to not show description #588	2023-02-25 16:33:06 -06:00
advplyr	960f75bfba	Fix:Android cancel sleep timer resets volume #605	2023-02-25 09:28:22 -06:00
advplyr	83027a5787	Fix:Android local podcasts creating playback sessions with bad duration and displayTitle	2023-02-24 17:42:34 -06:00
Alex	bc6ef96465	Android Home Screen Widget	2023-02-21 22:20:49 -06:00