Update library sort dropdown to use max height available

Add 'sepia' theme to EpubReader

client/components/app/SideRail.vue

@@ -116,7 +116,7 @@
     </div>
 
     <div class="w-full h-12 px-1 py-2 border-t border-black/20 bg-bg absolute left-0" :style="{ bottom: streamLibraryItem ? '224px' : '65px' }">
-      <p class="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1" @click="clickChangelog">v{{ $config.version }}</p>
+      <p class="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1 cursor-pointer" @click="clickChangelog">v{{ $config.version }}</p>
       <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xxs text-center block leading-3">Update</a>
       <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
     </div>

client/components/cards/LazyBookCard.vue

@@ -101,7 +101,8 @@
         <!-- Podcast Episode # -->
         <div cy-id="podcastEpisodeNumber" v-if="recentEpisodeNumber !== null && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black/90 box-shadow-md z-10" :style="{ top: 0.375 + 'em', right: 0.375 + 'em', padding: `${0.1}em ${0.25}em` }">
           <p :style="{ fontSize: 0.8 + 'em' }">
-            Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
+            Episode
+            <span v-if="recentEpisodeNumber">#{{ recentEpisodeNumber }}</span>
           </p>
         </div>
 
@@ -200,6 +201,9 @@ export default {
     dateFormat() {
       return this.store.getters['getServerSetting']('dateFormat')
     },
+    timeFormat() {
+      return this.store.getters['getServerSetting']('timeFormat')
+    },
     _libraryItem() {
       return this.libraryItem || {}
     },
@@ -345,6 +349,10 @@ export default {
         if (this.mediaMetadata.publishedYear) return this.$getString('LabelPublishedDate', [this.mediaMetadata.publishedYear])
         return '\u00A0'
       }
+      if (this.orderBy === 'progress') {
+        if (!this.userProgressLastUpdated) return '\u00A0'
+        return this.$getString('LabelLastProgressDate', [this.$formatDatetime(this.userProgressLastUpdated, this.dateFormat, this.timeFormat)])
+      }
       return null
     },
     episodeProgress() {
@@ -377,6 +385,10 @@ export default {
       let progressPercent = this.itemIsFinished ? 1 : this.booksInSeries ? this.seriesProgressPercent : this.useEBookProgress ? this.userProgress?.ebookProgress || 0 : this.userProgress?.progress || 0
       return Math.max(Math.min(1, progressPercent), 0)
     },
+    userProgressLastUpdated() {
+      if (!this.userProgress) return null
+      return this.userProgress.lastUpdate
+    },
     itemIsFinished() {
       if (this.booksInSeries) return this.seriesIsFinished
       return this.userProgress ? !!this.userProgress.isFinished : false

client/components/controls/LibrarySortSelect.vue

@@ -7,7 +7,7 @@
       </span>
     </button>
 
-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 ring-1 ring-black/5 overflow-auto focus:outline-hidden text-sm" role="menu">
+    <ul v-show="showMenu" class="librarySortMenu absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 ring-1 ring-black/5 overflow-auto focus:outline-hidden text-sm" role="menu">
       <template v-for="item in selectItems">
         <li :key="item.value" class="select-none relative py-2 pr-9 cursor-pointer hover:bg-white/5" :class="item.value === selected ? 'bg-white/5 text-yellow-400' : 'text-gray-200 hover:text-white'" role="menuitem" @click="clickedOption(item.value)">
           <div class="flex items-center">
@@ -130,6 +130,10 @@ export default {
           text: this.$strings.LabelFileModified,
           value: 'mtimeMs'
         },
+        {
+          text: this.$strings.LabelLibrarySortByProgress,
+          value: 'progress'
+        },
         {
           text: this.$strings.LabelRandomly,
           value: 'random'
@@ -191,3 +195,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.librarySortMenu {
+  max-height: calc(100vh - 125px);
+}
+</style>

client/components/readers/EpubReader.vue

@@ -99,22 +99,32 @@ export default {
       return `/api/items/${this.libraryItemId}/ebook`
     },
     themeRules() {
-      const isDark = this.ereaderSettings.theme === 'dark'
-      const fontColor = isDark ? '#fff' : '#000'
-      const backgroundColor = isDark ? 'rgb(35 35 35)' : 'rgb(255, 255, 255)'
+      const theme = this.ereaderSettings.theme
+      const isDark = theme === 'dark'
+      const isSepia = theme === 'sepia'
+
+      const fontColor = isDark
+        ? '#fff'
+        : isSepia
+        ? '#5b4636'
+        : '#000'
+
+      const backgroundColor = isDark
+        ? 'rgb(35 35 35)'
+        : isSepia
+        ? 'rgb(244, 236, 216)'
+        : 'rgb(255, 255, 255)'
 
       const lineSpacing = this.ereaderSettings.lineSpacing / 100
-
-      const fontScale = this.ereaderSettings.fontScale / 100
-
-      const textStroke = this.ereaderSettings.textStroke / 100
+      const fontScale   = this.ereaderSettings.fontScale   / 100
+      const textStroke  = this.ereaderSettings.textStroke  / 100
 
       return {
         '*': {
           color: `${fontColor}!important`,
           'background-color': `${backgroundColor}!important`,
-          'line-height': lineSpacing * fontScale + 'rem!important',
-          '-webkit-text-stroke': textStroke + 'px ' + fontColor + '!important'
+          'line-height': `${lineSpacing * fontScale}rem!important`,
+          '-webkit-text-stroke': `${textStroke}px ${fontColor}!important`
         },
         a: {
           color: `${fontColor}!important`

client/components/readers/Reader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" id="reader" :data-theme="ereaderTheme" class="group absolute top-0 left-0 w-full z-60 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': !!streamLibraryItem }">
+  <div v-if="show" id="reader" :data-theme="ereaderTheme" class="group absolute top-0 left-0 w-full z-60 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black data-[theme=sepia]:bg-[rgb(244,236,216)] data-[theme=sepia]:text-[#5b4636]" :class="{ 'reader-player-open': !!streamLibraryItem }">
     <div class="absolute top-4 left-4 z-20 flex items-center">
       <button v-if="isEpub" @click="toggleToC" type="button" aria-label="Table of contents menu" class="inline-flex opacity-80 hover:opacity-100">
         <span class="material-symbols text-2xl">menu</span>
@@ -27,7 +27,12 @@
 
     <!-- TOC side nav -->
     <div v-if="tocOpen" class="w-full h-full overflow-y-scroll absolute inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
-    <div v-if="isEpub" class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent>
+    <div
+      v-if="isEpub"
+      class="w-96 h-full max-h-full absolute top-0 left-0 shadow-xl transition-transform z-30 group-data-[theme=dark]:bg-primary group-data-[theme=dark]:text-white group-data-[theme=light]:bg-white group-data-[theme=light]:text-black group-data-[theme=sepia]:bg-[rgb(244,236,216)] group-data-[theme=sepia]:text-[#5b4636]"
+      :class="tocOpen ? 'translate-x-0' : '-translate-x-96'"
+      @click.stop.prevent
+    >
       <div class="flex flex-col p-4 h-full">
         <div class="flex items-center mb-2">
           <button @click.stop.prevent="toggleToC" type="button" aria-label="Close table of contents" class="inline-flex opacity-80 hover:opacity-100">
@@ -37,7 +42,7 @@
           <p class="text-lg font-semibold ml-2">{{ $strings.HeaderTableOfContents }}</p>
         </div>
         <form @submit.prevent="searchBook" @click.stop.prevent>
-          <ui-text-input clearable ref="input" @clear="searchBook" v-model="searchQuery" :placeholder="$strings.PlaceholderSearch" class="h-8 w-full text-sm flex mb-2" />
+          <ui-text-input clearable ref="input" @clear="searchBook" v-model="searchQuery" :placeholder="$strings.PlaceholderSearch" custom-input-class="text-inherit !bg-inherit" class="h-8 w-full text-sm flex mb-2" />
         </form>
 
         <div class="overflow-y-auto">
@@ -181,6 +186,10 @@ export default {
             text: this.$strings.LabelThemeDark,
             value: 'dark'
           },
+          {
+            text: this.$strings.LabelThemeSepia,
+            value: 'sepia'
+          },
           {
             text: this.$strings.LabelThemeLight,
             value: 'light'

client/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "audiobookshelf-client",
-  "version": "2.26.2",
+  "version": "2.26.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "audiobookshelf-client",
-      "version": "2.26.2",
+      "version": "2.26.3",
       "license": "ISC",
       "dependencies": {
         "@nuxtjs/axios": "^5.13.6",

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "2.26.2",
+  "version": "2.26.3",
   "buildNumber": 1,
   "description": "Self-hosted audiobook and podcast client",
   "main": "index.js",

client/pages/config/sessions.vue

@@ -6,80 +6,82 @@
       </div>
 
       <div v-if="listeningSessions.length" class="block max-w-full relative">
-        <table class="userSessionsTable">
-          <tr class="bg-primary/40">
-            <th class="w-6 min-w-6 text-left hidden md:table-cell h-11">
-              <ui-checkbox v-model="isAllSelected" :partial="numSelected > 0 && !isAllSelected" small checkbox-bg="bg" />
-            </th>
-            <th v-if="numSelected" class="grow text-left" :colspan="7">
-              <div class="flex items-center">
-                <p>{{ $getString('MessageSelected', [numSelected]) }}</p>
-                <div class="grow" />
-                <ui-btn small color="bg-error" :loading="deletingSessions" @click.stop="removeSessionsClick">{{ $strings.ButtonRemove }}</ui-btn>
-              </div>
-            </th>
-            <th v-if="!numSelected" class="grow sm:grow-0 sm:w-48 sm:max-w-48 text-left group cursor-pointer" @click.stop="sortColumn('displayTitle')">
-              <div class="inline-flex items-center">
-                {{ $strings.LabelItem }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('displayTitle') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
-              </div>
-            </th>
-            <th v-if="!numSelected" class="w-20 min-w-20 text-left hidden md:table-cell">{{ $strings.LabelUser }}</th>
-            <th v-if="!numSelected" class="w-26 min-w-26 text-left hidden md:table-cell group cursor-pointer" @click.stop="sortColumn('playMethod')">
-              <div class="inline-flex items-center">
-                {{ $strings.LabelPlayMethod }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('playMethod') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
-              </div>
-            </th>
-            <th v-if="!numSelected" class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
-            <th v-if="!numSelected" class="w-24 min-w-24 sm:w-32 sm:min-w-32 group cursor-pointer" @click.stop="sortColumn('timeListening')">
-              <div class="inline-flex items-center">
-                {{ $strings.LabelTimeListened }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('timeListening') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
-              </div>
-            </th>
-            <th v-if="!numSelected" class="w-24 min-w-24 group cursor-pointer" @click.stop="sortColumn('currentTime')">
-              <div class="inline-flex items-center">
-                {{ $strings.LabelLastTime }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('currentTime') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
-              </div>
-            </th>
-            <th v-if="!numSelected" class="grow hidden sm:table-cell cursor-pointer group" @click.stop="sortColumn('updatedAt')">
-              <div class="inline-flex items-center">
-                {{ $strings.LabelLastUpdate }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('updatedAt') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
-              </div>
-            </th>
-          </tr>
+        <div class="overflow-x-auto">
+          <table class="userSessionsTable">
+            <tr class="bg-primary/40">
+              <th class="w-6 min-w-6 text-left hidden md:table-cell h-11">
+                <ui-checkbox v-model="isAllSelected" :partial="numSelected > 0 && !isAllSelected" small checkbox-bg="bg" />
+              </th>
+              <th v-if="numSelected" class="grow text-left" :colspan="7">
+                <div class="flex items-center">
+                  <p>{{ $getString('MessageSelected', [numSelected]) }}</p>
+                  <div class="grow" />
+                  <ui-btn small color="bg-error" :loading="deletingSessions" @click.stop="removeSessionsClick">{{ $strings.ButtonRemove }}</ui-btn>
+                </div>
+              </th>
+              <th v-if="!numSelected" class="grow sm:grow-0 sm:w-48 sm:max-w-48 text-left group cursor-pointer" @click.stop="sortColumn('displayTitle')">
+                <div class="inline-flex items-center">
+                  {{ $strings.LabelItem }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('displayTitle') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                </div>
+              </th>
+              <th v-if="!numSelected" class="w-20 min-w-20 text-left hidden md:table-cell">{{ $strings.LabelUser }}</th>
+              <th v-if="!numSelected" class="w-26 min-w-26 text-left hidden md:table-cell group cursor-pointer" @click.stop="sortColumn('playMethod')">
+                <div class="inline-flex items-center">
+                  {{ $strings.LabelPlayMethod }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('playMethod') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                </div>
+              </th>
+              <th v-if="!numSelected" class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
+              <th v-if="!numSelected" class="w-24 min-w-24 sm:w-32 sm:min-w-32 group cursor-pointer" @click.stop="sortColumn('timeListening')">
+                <div class="inline-flex items-center">
+                  {{ $strings.LabelTimeListened }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('timeListening') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                </div>
+              </th>
+              <th v-if="!numSelected" class="w-24 min-w-24 group cursor-pointer" @click.stop="sortColumn('currentTime')">
+                <div class="inline-flex items-center">
+                  {{ $strings.LabelLastTime }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('currentTime') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                </div>
+              </th>
+              <th v-if="!numSelected" class="grow hidden sm:table-cell cursor-pointer group" @click.stop="sortColumn('updatedAt')">
+                <div class="inline-flex items-center">
+                  {{ $strings.LabelLastUpdate }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('updatedAt') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                </div>
+              </th>
+            </tr>
 
-          <tr v-for="session in listeningSessions" :key="session.id" :class="{ selected: session.selected }" class="cursor-pointer" @click="clickSessionRow(session)">
-            <td class="hidden md:table-cell py-1 max-w-6 relative">
-              <ui-checkbox v-model="session.selected" small checkbox-bg="bg" />
-              <!-- overlay of the checkbox so that the entire box is clickable -->
-              <div class="absolute inset-0 w-full h-full" @click.stop="session.selected = !session.selected" />
-            </td>
-            <td class="py-1 grow sm:grow-0 sm:w-48 sm:max-w-48">
-              <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
-              <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
-            </td>
-            <td class="hidden md:table-cell w-20 min-w-20">
-              <p v-if="filteredUserUsername" class="text-xs">{{ filteredUserUsername }}</p>
-              <p v-else class="text-xs">{{ session.user ? session.user.username : 'N/A' }}</p>
-            </td>
-            <td class="hidden md:table-cell w-26 min-w-26">
-              <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
-            </td>
-            <td class="hidden sm:table-cell max-w-32 min-w-32">
-              <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
-            </td>
-            <td class="text-center w-24 min-w-24 sm:w-32 sm:min-w-32">
-              <p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p>
-            </td>
-            <td class="text-center hover:underline w-24 min-w-24" @click.stop="clickCurrentTime(session)">
-              <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
-            </td>
-            <td class="text-center hidden sm:table-cell">
-              <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
-                <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
-              </ui-tooltip>
-            </td>
-          </tr>
-        </table>
+            <tr v-for="session in listeningSessions" :key="session.id" :class="{ selected: session.selected }" class="cursor-pointer" @click="clickSessionRow(session)">
+              <td class="hidden md:table-cell py-1 max-w-6 relative">
+                <ui-checkbox v-model="session.selected" small checkbox-bg="bg" />
+                <!-- overlay of the checkbox so that the entire box is clickable -->
+                <div class="absolute inset-0 w-full h-full" @click.stop="session.selected = !session.selected" />
+              </td>
+              <td class="py-1 grow sm:grow-0 sm:w-48 sm:max-w-48">
+                <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
+                <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
+              </td>
+              <td class="hidden md:table-cell w-20 min-w-20">
+                <p v-if="filteredUserUsername" class="text-xs">{{ filteredUserUsername }}</p>
+                <p v-else class="text-xs">{{ session.user ? session.user.username : 'N/A' }}</p>
+              </td>
+              <td class="hidden md:table-cell w-26 min-w-26">
+                <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
+              </td>
+              <td class="hidden sm:table-cell max-w-32 min-w-32">
+                <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
+              </td>
+              <td class="text-center w-24 min-w-24 sm:w-32 sm:min-w-32">
+                <p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p>
+              </td>
+              <td class="text-center hover:underline w-24 min-w-24" @click.stop="clickCurrentTime(session)">
+                <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
+              </td>
+              <td class="text-center hidden sm:table-cell">
+                <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
+                  <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
+                </ui-tooltip>
+              </td>
+            </tr>
+          </table>
+        </div>
         <!-- table bottom options -->
         <div class="flex items-center my-2">
           <div class="grow" />

client/pages/config/users/_id/sessions.vue

@@ -19,39 +19,41 @@
       <div class="py-2">
         <h1 class="text-lg mb-2 text-white/90 px-2 sm:px-0">{{ $strings.HeaderListeningSessions }}</h1>
         <div v-if="listeningSessions.length">
-          <table class="userSessionsTable">
-            <tr class="bg-primary/40">
-              <th class="w-48 min-w-48 text-left">{{ $strings.LabelItem }}</th>
-              <th class="w-32 min-w-32 text-left hidden md:table-cell">{{ $strings.LabelPlayMethod }}</th>
-              <th class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
-              <th class="w-32 min-w-32">{{ $strings.LabelTimeListened }}</th>
-              <th class="w-16 min-w-16">{{ $strings.LabelLastTime }}</th>
-              <th class="grow hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th>
-            </tr>
-            <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
-              <td class="py-1 max-w-48">
-                <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
-                <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
-              </td>
-              <td class="hidden md:table-cell">
-                <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
-              </td>
-              <td class="hidden sm:table-cell min-w-32 max-w-32">
-                <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
-              </td>
-              <td class="text-center">
-                <p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p>
-              </td>
-              <td class="text-center hover:underline" @click.stop="clickCurrentTime(session)">
-                <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
-              </td>
-              <td class="text-center hidden sm:table-cell">
-                <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
-                  <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
-                </ui-tooltip>
-              </td>
-            </tr>
-          </table>
+          <div class="overflow-x-auto">
+            <table class="userSessionsTable">
+              <tr class="bg-primary/40">
+                <th class="w-48 min-w-48 text-left">{{ $strings.LabelItem }}</th>
+                <th class="w-32 min-w-32 text-left hidden md:table-cell">{{ $strings.LabelPlayMethod }}</th>
+                <th class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
+                <th class="w-32 min-w-32">{{ $strings.LabelTimeListened }}</th>
+                <th class="w-16 min-w-16">{{ $strings.LabelLastTime }}</th>
+                <th class="grow hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th>
+              </tr>
+              <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
+                <td class="py-1 max-w-48">
+                  <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
+                  <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
+                </td>
+                <td class="hidden md:table-cell">
+                  <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
+                </td>
+                <td class="hidden sm:table-cell min-w-32 max-w-32">
+                  <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
+                </td>
+                <td class="text-center">
+                  <p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p>
+                </td>
+                <td class="text-center hover:underline" @click.stop="clickCurrentTime(session)">
+                  <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
+                </td>
+                <td class="text-center hidden sm:table-cell">
+                  <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
+                    <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
+                  </ui-tooltip>
+                </td>
+              </tr>
+            </table>
+          </div>
           <div class="flex items-center justify-end py-1">
             <ui-icon-btn icon="arrow_back_ios_new" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
             <p class="text-sm mx-1">{{ $getString('LabelPaginationPageXOfY', [currentPage + 1, numPages]) }}</p>

client/store/user.js

@@ -92,7 +92,7 @@ export const actions = {
       if (state.settings.orderBy == 'media.duration') {
         settingsUpdate.orderBy = 'media.numTracks'
       }
-      if (state.settings.orderBy == 'media.metadata.publishedYear') {
+      if (state.settings.orderBy == 'media.metadata.publishedYear' || state.settings.orderBy == 'progress') {
         settingsUpdate.orderBy = 'media.metadata.title'
       }
       const invalidFilters = ['series', 'authors', 'narrators', 'publishers', 'publishedDecades', 'languages', 'progress', 'issues', 'ebooks', 'abridged']

client/strings/de.json

@@ -438,6 +438,7 @@
   "LabelLogLevelWarn": "Warnungen",
   "LabelLookForNewEpisodesAfterDate": "Suche nach neuen Episoden nach diesem Datum",
   "LabelLowestPriority": "Niedrigste Priorität",
+  "LabelMatchConfidence": "Zuversicht",
   "LabelMatchExistingUsersBy": "Zuordnen existierender Benutzer mit",
   "LabelMatchExistingUsersByDescription": "Wird zum Verbinden vorhandener Benutzer verwendet. Sobald die Verbindung hergestellt ist, wird den Benutzern eine eindeutige ID vom SSO-Anbieter zugeordnet",
   "LabelMaxEpisodesToDownload": "Max. Anzahl an Episoden zum Herunterladen, 0 für unbegrenzte Episoden.",
@@ -723,6 +724,7 @@
   "MessageAddToPlayerQueue": "Zur Abspielwarteliste hinzufügen",
   "MessageAppriseDescription": "Um diese Funktion nutzen zu können, musst du eine Instanz von <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> laufen haben oder eine API verwenden welche dieselbe Anfragen bearbeiten kann. <br />Die Apprise API Url muss der vollständige URL-Pfad sein, an den die Benachrichtigung gesendet werden soll, z.B. wenn Ihre API-Instanz unter <code>http://192.168.1.1:8337</code> läuft, würdest du <code>http://192.168.1.1:8337/notify</code> eingeben.",
   "MessageAsinCheck": "Stellen Sie sicher, dass Sie die ASIN aus der richtigen Audible Region verwenden, nicht Amazon.",
+  "MessageAuthenticationLegacyTokenWarning": "Alte API tokens werden in Zukunft entfernt. Benutze stattdessen <a href=\"/config/api-keys\">API Keys</a>.",
   "MessageAuthenticationOIDCChangesRestart": "Nach dem Speichern muss der Server neugestartet werden um die OIDC Änderungen zu übernehmen.",
   "MessageAuthenticationSecurityMessage": "Die Anmeldung wurde abgesichert. Benutzersitzungen werden getrennt, alle Benutzer müssen sich erneut anmelden.",
   "MessageBackupsDescription": "In einer Sicherung werden Benutzer, Benutzerfortschritte, Details zu den Bibliotheksobjekten, Servereinstellungen und Bilder welche in <code>/metadata/items</code> & <code>/metadata/authors</code> gespeichert sind gespeichert. Sicherungen enthalten keine Dateien welche in den einzelnen Bibliotheksordnern (Medien-Ordnern) gespeichert sind.",

client/strings/en-us.json

@@ -418,6 +418,7 @@
   "LabelLanguages": "Languages",
   "LabelLastBookAdded": "Last Book Added",
   "LabelLastBookUpdated": "Last Book Updated",
+  "LabelLastProgressDate": "Last progress: {0}",
   "LabelLastSeen": "Last Seen",
   "LabelLastTime": "Last Time",
   "LabelLastUpdate": "Last Update",
@@ -430,6 +431,7 @@
   "LabelLibraryFilterSublistEmpty": "No {0}",
   "LabelLibraryItem": "Library Item",
   "LabelLibraryName": "Library Name",
+  "LabelLibrarySortByProgress": "Progress Updated",
   "LabelLimit": "Limit",
   "LabelLineSpacing": "Line spacing",
   "LabelListenAgain": "Listen Again",
@@ -656,6 +658,7 @@
   "LabelTheme": "Theme",
   "LabelThemeDark": "Dark",
   "LabelThemeLight": "Light",
+  "LabelThemeSepia": "Sepia",
   "LabelTimeBase": "Time Base",
   "LabelTimeDurationXHours": "{0} hours",
   "LabelTimeDurationXMinutes": "{0} minutes",

client/strings/ru.json

@@ -438,6 +438,7 @@
   "LabelLogLevelWarn": "Предупреждение",
   "LabelLookForNewEpisodesAfterDate": "Искать новые эпизоды после этой даты",
   "LabelLowestPriority": "Самый низкий приоритет",
+  "LabelMatchConfidence": "Уверенность",
   "LabelMatchExistingUsersBy": "Сопоставление существующих пользователей по",
   "LabelMatchExistingUsersByDescription": "Используется для подключения существующих пользователей. После подключения пользователям будет присвоен уникальный идентификатор от поставщика единого входа",
   "LabelMaxEpisodesToDownload": "Максимальное количество эпизодов для загрузки. Используйте 0 для неограниченного количества.",
@@ -723,6 +724,7 @@
   "MessageAddToPlayerQueue": "Добавить в очередь проигрывателя",
   "MessageAppriseDescription": "Для использования этой функции необходимо иметь запущенный экземпляр <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> или api которое обрабатывает те же самые запросы. <br />URL-адрес API Apprise должен быть полным URL-адресом для отправки уведомления, т.е., если API запущено по адресу <code>http://192.168.1.1:8337</code> тогда нужно указать <code>http://192.168.1.1:8337/notify</code>.",
   "MessageAsinCheck": "Убедитесь, что вы используете ASIN из правильной региональной зоны Audible, а не из Amazon.",
+  "MessageAuthenticationLegacyTokenWarning": "Устаревшие токены API в будущем будут удалены. Вместо них используйте <a href=\"/config/api-keys\">API-ключи</a>.",
   "MessageAuthenticationOIDCChangesRestart": "Перезапустите ваш сервер после сохранения для применения изменений в OIDC.",
   "MessageAuthenticationSecurityMessage": "В целях безопасности была улучшена аутентификация. Всем пользователям необходимо повторно войти в систему.",
   "MessageBackupsDescription": "Бэкап включает пользователей, прогресс пользователей, данные элементов библиотеки, настройки сервера и изображения хранящиеся в <code>/metadata/items</code> и <code>/metadata/authors</code>. Бэкапы <strong>НЕ</strong> сохраняют файлы из папок библиотек.",

client/strings/uk.json

@@ -438,6 +438,7 @@
   "LabelLogLevelWarn": "Увага",
   "LabelLookForNewEpisodesAfterDate": "Шукати нові епізоди після вказаної дати",
   "LabelLowestPriority": "Найнижчий пріоритет",
+  "LabelMatchConfidence": "Впевненість",
   "LabelMatchExistingUsersBy": "Шукати наявних користувачів за",
   "LabelMatchExistingUsersByDescription": "Використовується для підключення наявних користувачів. Після підключення користувач отримає унікальний id від вашого сервісу SSO",
   "LabelMaxEpisodesToDownload": "Максимальна кількість епізодів для скачування. Використовуйте 0 для необмеженої кількості.",
@@ -837,7 +838,7 @@
   "MessageNoItems": "Елементи відсутні",
   "MessageNoItemsFound": "Елементів не знайдено",
   "MessageNoListeningSessions": "Сеанси прослуховування відсутні",
-  "MessageNoLogs": "Немає журнали",
+  "MessageNoLogs": "Немає журналів'",
   "MessageNoMediaProgress": "Прогрес відсутній",
   "MessageNoNotifications": "Сповіщення відсутні",
   "MessageNoPodcastFeed": "Некоректний подкаст: немає каналу",

client/strings/zh-cn.json

@@ -438,6 +438,7 @@
   "LabelLogLevelWarn": "警告",
   "LabelLookForNewEpisodesAfterDate": "在此日期后查找新剧集",
   "LabelLowestPriority": "最低优先级",
+  "LabelMatchConfidence": "置信度",
   "LabelMatchExistingUsersBy": "匹配现有用户",
   "LabelMatchExistingUsersByDescription": "用于连接现有用户. 连接后, 用户将通过 SSO 提供商提供的唯一 id 进行匹配",
   "LabelMaxEpisodesToDownload": "可下载的最大集数. 输入 0 表示无限制.",

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "audiobookshelf",
-  "version": "2.26.2",
+  "version": "2.26.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "audiobookshelf",
-      "version": "2.26.2",
+      "version": "2.26.3",
       "license": "GPL-3.0",
       "dependencies": {
         "axios": "^0.27.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "2.26.2",
+  "version": "2.26.3",
   "buildNumber": 1,
   "description": "Self-hosted audiobook and podcast server",
   "main": "index.js",

server/controllers/MeController.js

@@ -280,7 +280,7 @@ class MeController {
     }
 
     const { password, newPassword } = req.body
-    if (!password || !newPassword || typeof password !== 'string' || typeof newPassword !== 'string') {
+    if ((typeof password !== 'string' && password !== null) || (typeof newPassword !== 'string' && newPassword !== null)) {
       return res.status(400).send('Missing or invalid password or new password')
     }
 
@@ -450,7 +450,7 @@ class MeController {
     if (updated) {
       await Database.updateSetting(Database.emailSettings)
       SocketAuthority.clientEmitter(req.user.id, 'ereader-devices-updated', {
-        ereaderDevices: Database.emailSettings.ereaderDevices
+        ereaderDevices: Database.emailSettings.getEReaderDevices(req.user)
       })
     }
     res.json({

server/controllers/SessionController.js

@@ -288,7 +288,12 @@ class SessionController {
       return res.sendStatus(404)
     }
 
-    const audioTrack = playbackSession.audioTracks.find((t) => t.index === audioTrackIndex)
+    let audioTrack = playbackSession.audioTracks.find((t) => toNumber(t.index, 1) === audioTrackIndex)
+
+    // Support clients passing 0 or 1 for podcast episode audio track index (handles old episodes pre-v2.21.0 having null index)
+    if (!audioTrack && playbackSession.mediaType === 'podcast' && audioTrackIndex === 0) {
+      audioTrack = playbackSession.audioTracks[0]
+    }
     if (!audioTrack) {
       Logger.error(`[SessionController] Unable to find audio track with index=${audioTrackIndex}`)
       return res.sendStatus(404)

server/models/PodcastEpisode.js

@@ -185,6 +185,7 @@ class PodcastEpisode extends Model {
     const track = structuredClone(this.audioFile)
     track.startOffset = 0
     track.title = this.audioFile.metadata.filename
+    track.index = 1 // Podcast episodes only have one track
     track.contentUrl = `/api/items/${libraryItemId}/file/${track.ino}`
     return track
   }

server/utils/queries/libraryItemsBookFilters.js

@@ -399,9 +399,6 @@ module.exports = {
     if (filterGroup !== 'series' && sortBy === 'sequence') {
       sortBy = 'media.metadata.title'
     }
-    if (filterGroup !== 'progress' && sortBy === 'progress') {
-      sortBy = 'media.metadata.title'
-    }
     const includeRSSFeed = include.includes('rssfeed')
     const includeMediaItemShare = !!user?.isAdminOrUp && include.includes('share')
 
@@ -532,6 +529,18 @@ module.exports = {
       }
     }
 
+    // When sorting by progress but not filtering by progress, include media progresses
+    if (filterGroup !== 'progress' && sortBy === 'progress') {
+      bookIncludes.push({
+        model: Database.mediaProgressModel,
+        attributes: ['id', 'isFinished', 'currentTime', 'ebookProgress', 'updatedAt'],
+        where: {
+          userId: user.id
+        },
+        required: false
+      })
+    }
+
     let { mediaWhere, replacements } = this.getMediaGroupQuery(filterGroup, filterValue)
     let bookWhere = Array.isArray(mediaWhere) ? mediaWhere : [mediaWhere]