From 728496010cbfcee5b7b54001c9f79e02ede30d82 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 17 Dec 2023 10:41:39 -0600
Subject: [PATCH 01/24] Update:/auth/openid/config API endpoint to require
 admin user and validate issuer URL

---
 server/Auth.js | 33 +++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

diff --git a/server/Auth.js b/server/Auth.js
index 0a282c9c9..d2334de26 100644
--- a/server/Auth.js
+++ b/server/Auth.js
@@ -296,7 +296,7 @@ class Auth {
         if (req.query.redirect_uri) {
           // Check if the redirect_uri is in the whitelist
           if (Database.serverSettings.authOpenIDMobileRedirectURIs.includes(req.query.redirect_uri) ||
-           (Database.serverSettings.authOpenIDMobileRedirectURIs.length === 1 && Database.serverSettings.authOpenIDMobileRedirectURIs[0] === '*')) {
+            (Database.serverSettings.authOpenIDMobileRedirectURIs.length === 1 && Database.serverSettings.authOpenIDMobileRedirectURIs[0] === '*')) {
             oidcStrategy._params.redirect_uri = new URL(`${protocol}://${req.get('host')}/auth/openid/mobile-redirect`).toString()
             mobile_redirect_uri = req.query.redirect_uri
           } else {
@@ -381,7 +381,7 @@ class Auth {
       try {
         // Extract the state parameter from the request
         const { state, code } = req.query
-    
+
         // Check if the state provided is in our list
         if (!state || !this.openIdAuthSession.has(state)) {
           Logger.error('[Auth] /auth/openid/mobile-redirect route: State parameter mismatch')
@@ -469,17 +469,38 @@ class Auth {
       this.handleLoginSuccessBasedOnCookie.bind(this))
 
     /**
-     * Used to auto-populate the openid URLs in config/authentication
+     * Helper route used to auto-populate the openid URLs in config/authentication
+     * Takes an issuer URL as a query param and requests the config data at "/.well-known/openid-configuration"
+     * 
+     * @example /auth/openid/config?issuer=http://192.168.1.66:9000/application/o/audiobookshelf/
      */
-    router.get('/auth/openid/config', async (req, res) => {
+    router.get('/auth/openid/config', this.isAuthenticated, async (req, res) => {
+      if (!req.user.isAdminOrUp) {
+        Logger.error(`[Auth] Non-admin user "${req.user.username}" attempted to get issuer config`)
+        return res.sendStatus(403)
+      }
+
       if (!req.query.issuer) {
         return res.status(400).send('Invalid request. Query param \'issuer\' is required')
       }
+
+      // Strip trailing slash
       let issuerUrl = req.query.issuer
       if (issuerUrl.endsWith('/')) issuerUrl = issuerUrl.slice(0, -1)
 
-      const configUrl = `${issuerUrl}/.well-known/openid-configuration`
-      axios.get(configUrl).then(({ data }) => {
+      // Append config pathname and validate URL
+      let configUrl = null
+      try {
+        configUrl = new URL(`${issuerUrl}/.well-known/openid-configuration`)
+        if (!configUrl.pathname.endsWith('/.well-known/openid-configuration')) {
+          throw new Error('Invalid pathname')
+        }
+      } catch (error) {
+        Logger.error(`[Auth] Failed to get openid configuration. Invalid URL "${configUrl}"`, error)
+        return res.status(400).send('Invalid request. Query param \'issuer\' is invalid')
+      }
+
+      axios.get(configUrl.toString()).then(({ data }) => {
         res.json({
           issuer: data.issuer,
           authorization_endpoint: data.authorization_endpoint,

From 8966dbbcd1fa24825e03695a1d3fb87f01a6066e Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 17 Dec 2023 11:06:03 -0600
Subject: [PATCH 02/24] Fix:Restrict podcast search page to admins

---
 client/pages/library/_library/podcast/search.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/pages/library/_library/podcast/search.vue b/client/pages/library/_library/podcast/search.vue
index cde844681..3be851ce7 100644
--- a/client/pages/library/_library/podcast/search.vue
+++ b/client/pages/library/_library/podcast/search.vue
@@ -45,6 +45,11 @@
 <script>
 export default {
   async asyncData({ params, query, store, app, redirect }) {
+    // Podcast search/add page is restricted to admins
+    if (!store.getters['user/getIsAdminOrUp']) {
+      return redirect(`/library/${params.library}`)
+    }
+
     var libraryId = params.library
     var libraryData = await store.dispatch('libraries/fetch', libraryId)
     if (!libraryData) {

From 05820aa820b5ac0b9d8ce71efedae19fc8614269 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 17 Dec 2023 11:17:35 -0600
Subject: [PATCH 03/24] Update:API endpoints /podcasts/feed and /podcasts/opml
 restricted to admin users

---
 server/controllers/PodcastController.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/server/controllers/PodcastController.js b/server/controllers/PodcastController.js
index 22c3cafa7..035f9152b 100644
--- a/server/controllers/PodcastController.js
+++ b/server/controllers/PodcastController.js
@@ -16,7 +16,7 @@ class PodcastController {
 
   async create(req, res) {
     if (!req.user.isAdminOrUp) {
-      Logger.error(`[PodcastController] Non-admin user attempted to create podcast`, req.user)
+      Logger.error(`[PodcastController] Non-admin user "${req.user.username}" attempted to create podcast`)
       return res.sendStatus(403)
     }
     const payload = req.body
@@ -103,6 +103,11 @@ class PodcastController {
   }
 
   async getPodcastFeed(req, res) {
+    if (!req.user.isAdminOrUp) {
+      Logger.error(`[PodcastController] Non-admin user "${req.user.username}" attempted to get podcast feed`)
+      return res.sendStatus(403)
+    }
+
     var url = req.body.rssFeed
     if (!url) {
       return res.status(400).send('Bad request')
@@ -116,6 +121,11 @@ class PodcastController {
   }
 
   async getFeedsFromOPMLText(req, res) {
+    if (!req.user.isAdminOrUp) {
+      Logger.error(`[PodcastController] Non-admin user "${req.user.username}" attempted to get feeds from opml`)
+      return res.sendStatus(403)
+    }
+
     if (!req.body.opmlText) {
       return res.sendStatus(400)
     }

From dc67a5200030c31794fa5f529e647b2ea0669407 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 17 Dec 2023 11:18:21 -0600
Subject: [PATCH 04/24] Update:API endpoint /search/podcast throw 400 error if
 term query param is not supplied

---
 server/controllers/SearchController.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/server/controllers/SearchController.js b/server/controllers/SearchController.js
index e52e69734..34d65e3cd 100644
--- a/server/controllers/SearchController.js
+++ b/server/controllers/SearchController.js
@@ -35,8 +35,19 @@ class SearchController {
     })
   }
 
+  /**
+   * Find podcast RSS feeds given a term
+   * 
+   * @param {import('express').Request} req 
+   * @param {import('express').Response} res 
+   */
   async findPodcasts(req, res) {
     const term = req.query.term
+    if (!term) {
+      Logger.error('[SearchController] Invalid request query param "term" is required')
+      return res.status(400).send('Invalid request query param "term" is required')
+    }
+
     const results = await PodcastFinder.search(term)
     res.json(results)
   }

From f2f2ea161ca0701e1405e737b0df0f96296e4f64 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 17 Dec 2023 12:00:11 -0600
Subject: [PATCH 05/24] Update:API endpoint /podcasts/feed validates rssFeed
 URL and uses SSRF req filter

---
 server/controllers/PodcastController.js | 14 +++++++++++--
 server/utils/index.js                   | 28 +++++++++++++++++++------
 server/utils/podcastUtils.js            | 28 ++++++++++++++++++++-----
 3 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/server/controllers/PodcastController.js b/server/controllers/PodcastController.js
index 035f9152b..e476efd51 100644
--- a/server/controllers/PodcastController.js
+++ b/server/controllers/PodcastController.js
@@ -6,6 +6,7 @@ const fs = require('../libs/fsExtra')
 
 const { getPodcastFeed, findMatchingEpisodes } = require('../utils/podcastUtils')
 const { getFileTimestampsWithIno, filePathToPOSIX } = require('../utils/fileUtils')
+const { validateUrl } = require('../utils/index')
 
 const Scanner = require('../scanner/Scanner')
 const CoverManager = require('../managers/CoverManager')
@@ -102,15 +103,24 @@ class PodcastController {
     }
   }
 
+  /**
+   * POST: /api/podcasts/feed
+   * 
+   * @typedef getPodcastFeedReqBody
+   * @property {string} rssFeed
+   * 
+   * @param {import('express').Request<{}, {}, getPodcastFeedReqBody, {}} req 
+   * @param {import('express').Response} res 
+   */
   async getPodcastFeed(req, res) {
     if (!req.user.isAdminOrUp) {
       Logger.error(`[PodcastController] Non-admin user "${req.user.username}" attempted to get podcast feed`)
       return res.sendStatus(403)
     }
 
-    var url = req.body.rssFeed
+    const url = validateUrl(req.body.rssFeed)
     if (!url) {
-      return res.status(400).send('Bad request')
+      return res.status(400).send('Invalid request body. "rssFeed" must be a valid URL')
     }
 
     const podcast = await getPodcastFeed(url)
diff --git a/server/utils/index.js b/server/utils/index.js
index 0377b1731..29a65885d 100644
--- a/server/utils/index.js
+++ b/server/utils/index.js
@@ -11,24 +11,24 @@ const levenshteinDistance = (str1, str2, caseSensitive = false) => {
     str2 = str2.toLowerCase()
   }
   const track = Array(str2.length + 1).fill(null).map(() =>
-    Array(str1.length + 1).fill(null));
+    Array(str1.length + 1).fill(null))
   for (let i = 0; i <= str1.length; i += 1) {
-    track[0][i] = i;
+    track[0][i] = i
   }
   for (let j = 0; j <= str2.length; j += 1) {
-    track[j][0] = j;
+    track[j][0] = j
   }
   for (let j = 1; j <= str2.length; j += 1) {
     for (let i = 1; i <= str1.length; i += 1) {
-      const indicator = str1[i - 1] === str2[j - 1] ? 0 : 1;
+      const indicator = str1[i - 1] === str2[j - 1] ? 0 : 1
       track[j][i] = Math.min(
         track[j][i - 1] + 1, // deletion
         track[j - 1][i] + 1, // insertion
         track[j - 1][i - 1] + indicator, // substitution
-      );
+      )
     }
   }
-  return track[str2.length][str1.length];
+  return track[str2.length][str1.length]
 }
 module.exports.levenshteinDistance = levenshteinDistance
 
@@ -204,4 +204,20 @@ module.exports.asciiOnlyToLowerCase = (str) => {
 module.exports.escapeRegExp = (str) => {
   if (typeof str !== 'string') return ''
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+/**
+ * Validate url string with URL class
+ * 
+ * @param {string} rawUrl 
+ * @returns {string} null if invalid
+ */
+module.exports.validateUrl = (rawUrl) => {
+  if (!rawUrl || typeof rawUrl !== 'string') return null
+  try {
+    return new URL(rawUrl).toString()
+  } catch (error) {
+    Logger.error(`Invalid URL "${rawUrl}"`, error)
+    return null
+  }
 }
\ No newline at end of file
diff --git a/server/utils/podcastUtils.js b/server/utils/podcastUtils.js
index 87b080d75..819ec9141 100644
--- a/server/utils/podcastUtils.js
+++ b/server/utils/podcastUtils.js
@@ -1,5 +1,6 @@
-const Logger = require('../Logger')
 const axios = require('axios')
+const ssrfFilter = require('ssrf-req-filter')
+const Logger = require('../Logger')
 const { xmlToJSON, levenshteinDistance } = require('./index')
 const htmlSanitizer = require('../utils/htmlSanitizer')
 
@@ -216,9 +217,26 @@ module.exports.parsePodcastRssFeedXml = async (xml, excludeEpisodeMetadata = fal
   }
 }
 
+/**
+ * Get podcast RSS feed as JSON
+ * Uses SSRF filter to prevent internal URLs
+ * 
+ * @param {string} feedUrl 
+ * @param {boolean} [excludeEpisodeMetadata=false]
+ * @returns {Promise}
+ */
 module.exports.getPodcastFeed = (feedUrl, excludeEpisodeMetadata = false) => {
   Logger.debug(`[podcastUtils] getPodcastFeed for "${feedUrl}"`)
-  return axios.get(feedUrl, { timeout: 12000, responseType: 'arraybuffer', headers: { Accept: 'application/rss+xml' } }).then(async (data) => {
+
+  return axios({
+    url: feedUrl,
+    method: 'GET',
+    timeout: 12000,
+    responseType: 'arraybuffer',
+    headers: { Accept: 'application/rss+xml' },
+    httpAgent: ssrfFilter(feedUrl),
+    httpsAgent: ssrfFilter(feedUrl)
+  }).then(async (data) => {
 
     // Adding support for ios-8859-1 encoded RSS feeds.
     //  See: https://github.com/advplyr/audiobookshelf/issues/1489
@@ -231,12 +249,12 @@ module.exports.getPodcastFeed = (feedUrl, excludeEpisodeMetadata = false) => {
 
     if (!data?.data) {
       Logger.error(`[podcastUtils] getPodcastFeed: Invalid podcast feed request response (${feedUrl})`)
-      return false
+      return null
     }
     Logger.debug(`[podcastUtils] getPodcastFeed for "${feedUrl}" success - parsing xml`)
     const payload = await this.parsePodcastRssFeedXml(data.data, excludeEpisodeMetadata)
     if (!payload) {
-      return false
+      return null
     }
 
     // RSS feed may be a private RSS feed
@@ -245,7 +263,7 @@ module.exports.getPodcastFeed = (feedUrl, excludeEpisodeMetadata = false) => {
     return payload.podcast
   }).catch((error) => {
     Logger.error('[podcastUtils] getPodcastFeed Error', error)
-    return false
+    return null
   })
 }
 

From 10b1784f6dc3175525900d3af689b5edb6dacc50 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 17 Dec 2023 12:23:55 -0600
Subject: [PATCH 06/24] Fix:Library search API endpoint /libraries/:id/search
 to check that query param q is a valid string

---
 server/controllers/LibraryController.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/controllers/LibraryController.js b/server/controllers/LibraryController.js
index d20902701..70baff85c 100644
--- a/server/controllers/LibraryController.js
+++ b/server/controllers/LibraryController.js
@@ -552,8 +552,8 @@ class LibraryController {
    * @param {import('express').Response} res 
    */
   async search(req, res) {
-    if (!req.query.q) {
-      return res.status(400).send('No query string')
+    if (!req.query.q || typeof req.query.q !== 'string') {
+      return res.status(400).send('Invalid request. Query param "q" must be a string')
     }
     const limit = req.query.limit && !isNaN(req.query.limit) ? Number(req.query.limit) : 12
     const query = asciiOnlyToLowerCase(req.query.q.trim())

From 2d8d11d4da561b4e97cc685dc211efa00ed56a48 Mon Sep 17 00:00:00 2001
From: Trey Gordon <41927921+treyg@users.noreply.github.com>
Date: Sun, 17 Dec 2023 15:56:14 -0500
Subject: [PATCH 07/24] docs: update synology reverse proxy to use the latest
 DSM settings

---
 readme.md | 49 +++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/readme.md b/readme.md
index ad00dd665..3ebe097dc 100644
--- a/readme.md
+++ b/readme.md
@@ -174,16 +174,49 @@ serve that directly:
 
 [See LinuxServer.io config sample](https://github.com/linuxserver/reverse-proxy-confs/blob/master/audiobookshelf.subdomain.conf.sample)
 
-### Synology Reverse Proxy
+### Synology NAS Reverse Proxy Setup (DSM 7+/Quickconnect)
 
-1. Open Control Panel > Application Portal
-2. Change to the Reverse Proxy tab
-3. Select the proxy rule for which you want to enable Websockets and click on Edit
-4. Change to the "Custom Header" tab
-5. Click Create > WebSocket
-6. Click Save
+1. **Open Control Panel**
+   - Navigate to `Login Portal > Advanced`.
+
+2. **General Tab**
+   - Click `Reverse Proxy` > `Create`.
+   
+   | Setting | Value          |
+   |---------|----------------|
+   | Reverse Proxy Name    | audiobookshelf |
+
+3. **Source Configuration**
+
+   | Setting                 | Value                               |
+   |-------------------------|-------------------------------------|
+   | Protocol                | HTTPS                               |
+   | Hostname                | `<sub>.<quickconnectdomain>.synology.me` |
+   | Port                    | 443                                 |
+   | Access Control Profile  | Leave as is                         |
+
+   - Example Hostname: `audiobookshelf.mydomain.synology.me`
+
+4. **Destination Configuration**
+
+   | Setting   | Value            |
+   |-----------|------------------|
+   | Protocol  | HTTP             |
+   | Hostname  | Your NAS IP      |
+   | Port      | 13378            |
+
+5. **Custom Header Tab**
+   - Go to `Create > Websocket`.
+   - Configure Headers (leave as is):
+
+    | Header Name | Value            |
+    |-------------|------------------|
+    | Upgrade     | `$http_upgrade`  |
+    | Connection  | `$connection_upgrade` |
+
+6. **Advanced Settings Tab**
+   - Leave as is.
 
-[from @silentArtifact](https://github.com/advplyr/audiobookshelf/issues/241#issuecomment-1036732329)
 
 ### [Traefik Reverse Proxy](https://doc.traefik.io/traefik/)
 

From bef0f3709f7f9b4417f93d393049ed42327e0647 Mon Sep 17 00:00:00 2001
From: Pablo <pablo.jimenez@exheus.com>
Date: Tue, 19 Dec 2023 18:39:02 +0100
Subject: [PATCH 08/24] feat: add basic zoom functionality to comic reader

---
 client/components/readers/ComicReader.vue | 34 +++++++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/client/components/readers/ComicReader.vue b/client/components/readers/ComicReader.vue
index 40b28a745..c0a3f957f 100644
--- a/client/components/readers/ComicReader.vue
+++ b/client/components/readers/ComicReader.vue
@@ -26,8 +26,12 @@
     <div v-if="numPages" class="absolute top-0 right-16 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">
       <p class="font-mono">{{ page }} / {{ numPages }}</p>
     </div>
+    <div class="absolute top-0 right-40 bg-bg text-gray-100 border-b border-l border-r border-gray-400 z-20 rounded-b-md px-2 h-9 hidden md:flex items-center text-center">
+      <ui-icon-btn icon="zoom_out" :size="8" :disabled="!canScaleDown" borderless class="mr-px" @click="zoomOut" />
+      <ui-icon-btn icon="zoom_in" :size="8" :disabled="!canScaleUp" borderless class="ml-px" @click="zoomIn" />
+    </div>
 
-    <div class="overflow-hidden w-full h-full relative">
+    <div class="w-full h-full relative">
       <div v-show="canGoPrev" class="absolute top-0 left-0 h-full w-1/2 lg:w-1/3 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 v-show="loadedFirstPage" class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_back_ios</span>
@@ -38,10 +42,11 @@
           <span v-show="loadedFirstPage" class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_forward_ios</span>
         </div>
       </div>
-      <div class="h-full flex justify-center">
-        <img v-if="mainImg" :src="mainImg" class="object-contain h-full m-auto" />
+      <div class="w-full h-full relative overflow-auto">
+        <div class="h-full flex" :class="scale > 100 ? '' : 'justify-center'">
+          <img v-if="mainImg" :style="{ minWidth: scale + '%', width: scale + '%' }" :src="mainImg" class="object-contain m-auto" />
+        </div>
       </div>
-
       <div v-show="loading" class="w-full h-full absolute top-0 left-0 flex items-center justify-center z-10">
         <ui-loading-indicator />
       </div>
@@ -54,6 +59,10 @@ import Path from 'path'
 import { Archive } from 'libarchive.js/main.js'
 import { CompressedFile } from 'libarchive.js/src/compressed-file'
 
+// This is % with respect to the screen width
+const MAX_SCALE = 400
+const MIN_SCALE = 10
+
 Archive.init({
   workerUrl: '/libarchive/worker-bundle.js'
 })
@@ -81,7 +90,8 @@ export default {
       showInfoMenu: false,
       loadTimeout: null,
       loadedFirstPage: false,
-      comicMetadata: null
+      comicMetadata: null,
+      scale: 80,
     }
   },
   watch: {
@@ -136,6 +146,12 @@ export default {
           return p
         }) || []
       )
+    },
+    canScaleUp() {
+      return this.scale < MAX_SCALE
+    },
+    canScaleDown() {
+      return this.scale > MIN_SCALE
     }
   },
   methods: {
@@ -331,7 +347,13 @@ export default {
       orderedImages = orderedImages.concat(noNumImages.map((i) => i.filename))
 
       this.pages = orderedImages
-    }
+    },
+    zoomIn() {
+      this.scale += 10
+    },
+    zoomOut() {
+      this.scale -= 10
+    },
   },
   mounted() {},
   beforeDestroy() {}

From aa7ee3e8ff3333cd9f99afc734b56e93346a6697 Mon Sep 17 00:00:00 2001
From: Pablo <pablo.jimenez@exheus.com>
Date: Tue, 19 Dec 2023 18:45:11 +0100
Subject: [PATCH 09/24] fix: zoom buttons were showing when loading the image

---
 client/components/readers/ComicReader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/readers/ComicReader.vue b/client/components/readers/ComicReader.vue
index c0a3f957f..57068e348 100644
--- a/client/components/readers/ComicReader.vue
+++ b/client/components/readers/ComicReader.vue
@@ -26,7 +26,7 @@
     <div v-if="numPages" class="absolute top-0 right-16 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">
       <p class="font-mono">{{ page }} / {{ numPages }}</p>
     </div>
-    <div class="absolute top-0 right-40 bg-bg text-gray-100 border-b border-l border-r border-gray-400 z-20 rounded-b-md px-2 h-9 hidden md:flex items-center text-center">
+    <div v-if="mainImg" class="absolute top-0 right-40 bg-bg text-gray-100 border-b border-l border-r border-gray-400 z-20 rounded-b-md px-2 h-9 hidden md:flex items-center text-center">
       <ui-icon-btn icon="zoom_out" :size="8" :disabled="!canScaleDown" borderless class="mr-px" @click="zoomOut" />
       <ui-icon-btn icon="zoom_in" :size="8" :disabled="!canScaleUp" borderless class="ml-px" @click="zoomIn" />
     </div>

From 7391b4d0ece9830d6d8bd0e91a2d5a56fac72af7 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Tue, 19 Dec 2023 17:19:33 -0600
Subject: [PATCH 10/24] Add:User stats API for year stats

---
 server/Database.js                 |   7 +-
 server/controllers/MeController.js |  16 +++
 server/routers/ApiRouter.js        |   1 +
 server/utils/queries/userStats.js  | 178 +++++++++++++++++++++++++++++
 4 files changed, 201 insertions(+), 1 deletion(-)
 create mode 100644 server/utils/queries/userStats.js

diff --git a/server/Database.js b/server/Database.js
index 5721ac274..8a3574818 100644
--- a/server/Database.js
+++ b/server/Database.js
@@ -122,11 +122,16 @@ class Database {
     return this.models.feed
   }
 
-  /** @type {typeof import('./models/Feed')} */
+  /** @type {typeof import('./models/FeedEpisode')} */
   get feedEpisodeModel() {
     return this.models.feedEpisode
   }
 
+  /** @type {typeof import('./models/PlaybackSession')} */
+  get playbackSessionModel() {
+    return this.models.playbackSession
+  }
+
   /**
    * Check if db file exists
    * @returns {boolean}
diff --git a/server/controllers/MeController.js b/server/controllers/MeController.js
index d38c1c4a7..42387b596 100644
--- a/server/controllers/MeController.js
+++ b/server/controllers/MeController.js
@@ -3,6 +3,7 @@ const SocketAuthority = require('../SocketAuthority')
 const Database = require('../Database')
 const { sort } = require('../libs/fastSort')
 const { toNumber } = require('../utils/index')
+const userStats = require('../utils/queries/userStats')
 
 class MeController {
   constructor() { }
@@ -333,5 +334,20 @@ class MeController {
     }
     res.json(req.user.toJSONForBrowser())
   }
+
+  /**
+   * 
+   * @param {import('express').Request} req 
+   * @param {import('express').Response} res 
+   */
+  async getStatsForYear(req, res) {
+    const year = Number(req.params.year)
+    if (isNaN(year) || year < 2000 || year > 9999) {
+      Logger.error(`[MeController] Invalid year "${year}"`)
+      return res.status(400).send('Invalid year')
+    }
+    const data = await userStats.getStatsForYear(req.user.id, year)
+    res.json(data)
+  }
 }
 module.exports = new MeController()
\ No newline at end of file
diff --git a/server/routers/ApiRouter.js b/server/routers/ApiRouter.js
index d77145681..f24181805 100644
--- a/server/routers/ApiRouter.js
+++ b/server/routers/ApiRouter.js
@@ -180,6 +180,7 @@ class ApiRouter {
     this.router.get('/me/items-in-progress', MeController.getAllLibraryItemsInProgress.bind(this))
     this.router.get('/me/series/:id/remove-from-continue-listening', MeController.removeSeriesFromContinueListening.bind(this))
     this.router.get('/me/series/:id/readd-to-continue-listening', MeController.readdSeriesFromContinueListening.bind(this))
+    this.router.get('/me/year/:year/stats', MeController.getStatsForYear.bind(this))
 
     //
     // Backup Routes
diff --git a/server/utils/queries/userStats.js b/server/utils/queries/userStats.js
new file mode 100644
index 000000000..b6895008a
--- /dev/null
+++ b/server/utils/queries/userStats.js
@@ -0,0 +1,178 @@
+const Sequelize = require('sequelize')
+const Database = require('../../Database')
+const PlaybackSession = require('../../models/PlaybackSession')
+const MediaProgress = require('../../models/MediaProgress')
+const { elapsedPretty } = require('../index')
+
+module.exports = {
+  /**
+   * 
+   * @param {string} userId 
+   * @param {number} year YYYY
+   * @returns {Promise<PlaybackSession[]>}
+   */
+  async getUserListeningSessionsForYear(userId, year) {
+    const sessions = await Database.playbackSessionModel.findAll({
+      where: {
+        userId,
+        createdAt: {
+          [Sequelize.Op.gte]: `${year}-01-01`,
+          [Sequelize.Op.lt]: `${year + 1}-01-01`
+        }
+      }
+    })
+    return sessions
+  },
+
+  /**
+   * 
+   * @param {string} userId 
+   * @param {number} year YYYY
+   * @returns {Promise<MediaProgress[]>}
+   */
+  async getBookMediaProgressFinishedForYear(userId, year) {
+    const progresses = await Database.mediaProgressModel.findAll({
+      where: {
+        userId,
+        mediaItemType: 'book',
+        finishedAt: {
+          [Sequelize.Op.gte]: `${year}-01-01`,
+          [Sequelize.Op.lt]: `${year + 1}-01-01`
+        }
+      },
+      include: {
+        model: Database.bookModel,
+        required: true
+      }
+    })
+    return progresses
+  },
+
+  /**
+   * @param {string} userId
+   * @param {number} year YYYY
+   */
+  async getStatsForYear(userId, year) {
+    const listeningSessions = await this.getUserListeningSessionsForYear(userId, year)
+
+    let totalBookListeningTime = 0
+    let totalPodcastListeningTime = 0
+    let totalListeningTime = 0
+
+    let authorListeningMap = {}
+    let genreListeningMap = {}
+    let narratorListeningMap = {}
+    let monthListeningMap = {}
+
+    listeningSessions.forEach((ls) => {
+      const listeningSessionListeningTime = ls.timeListening || 0
+
+      const lsMonth = ls.createdAt.getMonth()
+      if (!monthListeningMap[lsMonth]) monthListeningMap[lsMonth] = 0
+      monthListeningMap[lsMonth] += listeningSessionListeningTime
+
+      totalListeningTime += listeningSessionListeningTime
+      if (ls.mediaItemType === 'book') {
+        totalBookListeningTime += listeningSessionListeningTime
+
+        const authors = ls.mediaMetadata.authors || []
+        authors.forEach((au) => {
+          if (!authorListeningMap[au.name]) authorListeningMap[au.name] = 0
+          authorListeningMap[au.name] += listeningSessionListeningTime
+        })
+
+        const narrators = ls.mediaMetadata.narrators || []
+        narrators.forEach((narrator) => {
+          if (!narratorListeningMap[narrator]) narratorListeningMap[narrator] = 0
+          narratorListeningMap[narrator] += listeningSessionListeningTime
+        })
+
+        // Filter out bad genres like "audiobook" and "audio book"
+        const genres = (ls.mediaMetadata.genres || []).filter(g => !g.toLowerCase().includes('audiobook') && !g.toLowerCase().includes('audio book'))
+        genres.forEach((genre) => {
+          if (!genreListeningMap[genre]) genreListeningMap[genre] = 0
+          genreListeningMap[genre] += listeningSessionListeningTime
+        })
+      } else {
+        totalPodcastListeningTime += listeningSessionListeningTime
+      }
+    })
+
+    totalListeningTime = Math.round(totalListeningTime)
+    totalBookListeningTime = Math.round(totalBookListeningTime)
+    totalPodcastListeningTime = Math.round(totalPodcastListeningTime)
+
+    let mostListenedAuthor = null
+    for (const authorName in authorListeningMap) {
+      if (!mostListenedAuthor?.time || authorListeningMap[authorName] > mostListenedAuthor.time) {
+        mostListenedAuthor = {
+          time: Math.round(authorListeningMap[authorName]),
+          pretty: elapsedPretty(Math.round(authorListeningMap[authorName])),
+          name: authorName
+        }
+      }
+    }
+    let mostListenedNarrator = null
+    for (const narrator in narratorListeningMap) {
+      if (!mostListenedNarrator?.time || narratorListeningMap[narrator] > mostListenedNarrator.time) {
+        mostListenedNarrator = {
+          time: Math.round(narratorListeningMap[narrator]),
+          pretty: elapsedPretty(Math.round(narratorListeningMap[narrator])),
+          name: narrator
+        }
+      }
+    }
+    let mostListenedGenre = null
+    for (const genre in genreListeningMap) {
+      if (!mostListenedGenre?.time || genreListeningMap[genre] > mostListenedGenre.time) {
+        mostListenedGenre = {
+          time: Math.round(genreListeningMap[genre]),
+          pretty: elapsedPretty(Math.round(genreListeningMap[genre])),
+          name: genre
+        }
+      }
+    }
+    let mostListenedMonth = null
+    for (const month in monthListeningMap) {
+      if (!mostListenedMonth?.time || monthListeningMap[month] > mostListenedMonth.time) {
+        mostListenedMonth = {
+          month: Number(month),
+          time: Math.round(monthListeningMap[month]),
+          pretty: elapsedPretty(Math.round(monthListeningMap[month]))
+        }
+      }
+    }
+
+    const bookProgresses = await this.getBookMediaProgressFinishedForYear(userId, year)
+
+    const numBooksFinished = bookProgresses.length
+    let longestAudiobookFinished = null
+    bookProgresses.forEach((mediaProgress) => {
+      if (mediaProgress.duration && (!longestAudiobookFinished?.duration || mediaProgress.duration > longestAudiobookFinished.duration)) {
+        longestAudiobookFinished = {
+          id: mediaProgress.mediaItem.id,
+          title: mediaProgress.mediaItem.title,
+          duration: Math.round(mediaProgress.duration),
+          durationPretty: elapsedPretty(Math.round(mediaProgress.duration)),
+          finishedAt: mediaProgress.finishedAt
+        }
+      }
+    })
+
+    return {
+      totalListeningSessions: listeningSessions.length,
+      totalListeningTime,
+      totalListeningTimePretty: elapsedPretty(totalListeningTime),
+      totalBookListeningTime,
+      totalBookListeningTimePretty: elapsedPretty(totalBookListeningTime),
+      totalPodcastListeningTime,
+      totalPodcastListeningTimePretty: elapsedPretty(totalPodcastListeningTime),
+      mostListenedAuthor,
+      mostListenedNarrator,
+      mostListenedGenre,
+      mostListenedMonth,
+      numBooksFinished,
+      longestAudiobookFinished
+    }
+  }
+}

From 52f0a5432b6138c705da4580ce7a4203c0cad8b0 Mon Sep 17 00:00:00 2001
From: Pablo <pablo.jimenez@exheus.com>
Date: Wed, 20 Dec 2023 11:45:21 +0100
Subject: [PATCH 11/24] feat: enable zoom through the arrow buttons

---
 client/components/readers/ComicReader.vue | 34 +++++++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/client/components/readers/ComicReader.vue b/client/components/readers/ComicReader.vue
index 57068e348..9b09f5b67 100644
--- a/client/components/readers/ComicReader.vue
+++ b/client/components/readers/ComicReader.vue
@@ -26,23 +26,23 @@
     <div v-if="numPages" class="absolute top-0 right-16 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">
       <p class="font-mono">{{ page }} / {{ numPages }}</p>
     </div>
-    <div v-if="mainImg" class="absolute top-0 right-40 bg-bg text-gray-100 border-b border-l border-r border-gray-400 z-20 rounded-b-md px-2 h-9 hidden md:flex items-center text-center">
+    <div v-if="mainImg" class="absolute top-0 right-40 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">
       <ui-icon-btn icon="zoom_out" :size="8" :disabled="!canScaleDown" borderless class="mr-px" @click="zoomOut" />
       <ui-icon-btn icon="zoom_in" :size="8" :disabled="!canScaleUp" borderless class="ml-px" @click="zoomIn" />
     </div>
 
     <div class="w-full h-full relative">
-      <div v-show="canGoPrev" class="absolute top-0 left-0 h-full w-1/2 lg:w-1/3 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="prev" @mousedown.prevent>
+      <div v-show="canGoPrev" ref="prevButton" class="absolute top-0 left-0 h-full w-1/2 lg:w-1/3 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 v-show="loadedFirstPage" class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_back_ios</span>
         </div>
       </div>
-      <div v-show="canGoNext" class="absolute top-0 right-0 h-full w-1/2 lg:w-1/3 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="next" @mousedown.prevent>
+      <div v-show="canGoNext" ref="nextButton" class="absolute top-0 right-0 h-full w-1/2 lg:w-1/3 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="next" @mousedown.prevent>
         <div class="flex items-center justify-center h-full w-1/2 ml-auto">
           <span v-show="loadedFirstPage" class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_forward_ios</span>
         </div>
       </div>
-      <div class="w-full h-full relative overflow-auto">
+      <div ref="imageContainer" class="w-full h-full relative overflow-auto">
         <div class="h-full flex" :class="scale > 100 ? '' : 'justify-center'">
           <img v-if="mainImg" :style="{ minWidth: scale + '%', width: scale + '%' }" :src="mainImg" class="object-contain m-auto" />
         </div>
@@ -354,9 +354,31 @@ export default {
     zoomOut() {
       this.scale -= 10
     },
+    scroll(event) {
+      const imageContainer = this.$refs.imageContainer
+
+      console.log("Scrolling by " + event.deltaY)
+      imageContainer.scrollBy({
+        top: event.deltaY,
+        behavior: "auto",
+      });
+    }
   },
-  mounted() {},
-  beforeDestroy() {}
+  mounted() {
+    const prevButton = this.$refs.prevButton
+    const nextButton = this.$refs.nextButton
+    
+    prevButton.addEventListener('wheel', this.scroll, { passive: false })
+    nextButton.addEventListener('wheel', this.scroll, { passive: false })
+
+  },
+  beforeDestroy() {
+    const prevButton = this.$refs.prevButton
+    const nextButton = this.$refs.nextButton
+
+    prevButton.removeEventListener('wheel', this.scroll, { passive: false })
+    nextButton.removeEventListener('wheel', this.scroll, { passive: false })
+  }
 }
 </script>
 

From 2b7122c7447943afe8d581a91bed916e1c044fdf Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Wed, 20 Dec 2023 17:18:21 -0600
Subject: [PATCH 12/24] Update:Year stats API endpoint & generate year in
 review image #2373

---
 client/components/stats/YearInReview.vue | 175 +++++++++++++++++++++++
 client/pages/config/stats.vue            |  18 ++-
 server/utils/queries/userStats.js        |  93 +++++++-----
 3 files changed, 248 insertions(+), 38 deletions(-)
 create mode 100644 client/components/stats/YearInReview.vue

diff --git a/client/components/stats/YearInReview.vue b/client/components/stats/YearInReview.vue
new file mode 100644
index 000000000..fa57020a1
--- /dev/null
+++ b/client/components/stats/YearInReview.vue
@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <div v-if="processing" class="w-[400px] h-[400px] flex items-center justify-center">
+      <widgets-loading-spinner />
+    </div>
+    <img v-else-if="dataUrl" :src="dataUrl" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean
+  },
+  data() {
+    return {
+      dataUrl: null,
+      year: null,
+      yearStats: null
+    }
+  },
+  methods: {
+    async initCanvas() {
+      if (!this.yearStats) return
+
+      const canvas = document.createElement('canvas')
+      canvas.width = 400
+      canvas.height = 400
+      const ctx = canvas.getContext('2d')
+
+      const createRoundedRect = (x, y, w, h) => {
+        ctx.fillStyle = '#37383866'
+        ctx.strokeStyle = '#C0C0C0aa'
+        ctx.beginPath()
+        ctx.roundRect(x, y, w, h, [20])
+        ctx.fill()
+        ctx.stroke()
+      }
+
+      const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y) => {
+        ctx.fillStyle = color
+        ctx.font = `${fontWeight} ${fontSize} Source Sans Pro`
+        ctx.letterSpacing = letterSpacing
+        ctx.fillText(text, x, y)
+      }
+
+      const addIcon = (icon, color, fontSize, x, y) => {
+        ctx.fillStyle = color
+        ctx.font = `${fontSize} Material Icons Outlined`
+        ctx.fillText(icon, x, y)
+      }
+
+      // Bg color
+      ctx.fillStyle = '#232323'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Cover image tiles
+      if (this.yearStats.booksWithCovers.length) {
+        let index = 0
+        ctx.globalAlpha = 0.25
+        for (let x = 0; x < 4; x++) {
+          for (let y = 0; y < 4; y++) {
+            const coverIndex = index % this.yearStats.booksWithCovers.length
+            let libraryItemId = this.yearStats.booksWithCovers[coverIndex]
+            index++
+
+            await new Promise((resolve) => {
+              const img = new Image()
+              img.crossOrigin = 'anonymous'
+              img.addEventListener('load', () => {
+                ctx.drawImage(img, 100 * x, 100 * y, 100, 100)
+                resolve()
+              })
+              img.addEventListener('error', () => {
+                resolve()
+              })
+              img.src = this.$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId)
+            })
+          }
+        }
+      }
+
+      ctx.globalAlpha = 1
+      ctx.textBaseline = 'middle'
+
+      // Create gradient
+      const grd1 = ctx.createLinearGradient(0, 0, 400, 400)
+      grd1.addColorStop(0, '#000000aa')
+      grd1.addColorStop(1, '#cd9d49aa')
+      ctx.fillStyle = grd1
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Top Abs icon
+      let tanColor = '#ffdb70'
+      ctx.fillStyle = tanColor
+      ctx.font = '32px absicons'
+      ctx.fillText('\ue900', 15, 32)
+
+      // Top text
+      addText('audiobookshelf', '22px', 'normal', tanColor, '0px', 55, 22)
+      addText(`${this.year} YEAR IN REVIEW`, '14px', 'bold', 'white', '1px', 55, 44)
+
+      // Top left box
+      createRoundedRect(10, 65, 185, 80)
+      addText(this.yearStats.numBooksFinished, '32px', 'bold', 'white', '0px', 63, 98)
+      addText('books finished', '14px', 'normal', tanColor, '0px', 63, 120)
+      const readIconPath = new Path2D()
+      readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 1.2, d: 1.2, e: 26, f: 90 })
+      ctx.fillStyle = '#ffffff'
+      ctx.fill(readIconPath)
+
+      // Box top right
+      createRoundedRect(205, 65, 185, 80)
+      addText(this.$elapsedPrettyExtended(this.yearStats.totalListeningTime, true, false), '20px', 'bold', 'white', '0px', 257, 96)
+      addText('spent listening', '14px', 'normal', tanColor, '0px', 257, 117)
+      addIcon('watch_later', 'white', '32px', 218, 105)
+
+      // Box bottom left
+      createRoundedRect(10, 155, 185, 80)
+      addText(this.yearStats.totalListeningSessions, '32px', 'bold', 'white', '0px', 65, 188)
+      addText('sessions', '14px', 'normal', tanColor, '1px', 65, 210)
+      addIcon('headphones', 'white', '32px', 25, 195)
+
+      // Box bottom right
+      createRoundedRect(205, 155, 185, 80)
+      addText(this.yearStats.numBooksListened, '32px', 'bold', 'white', '0px', 258, 188)
+      addText('books listened to', '14px', 'normal', tanColor, '0.65px', 258, 210)
+      addIcon('local_library', 'white', '32px', 220, 195)
+
+      // Text stats
+      const topNarrator = this.yearStats.mostListenedNarrator
+      if (topNarrator) {
+        addText('TOP NARRATOR', '12px', 'normal', tanColor, '1px', 20, 260)
+        addText(topNarrator.name, '18px', 'bolder', 'white', '0px', 20, 282)
+        addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '14px', 'lighter', 'white', '1px', 20, 302)
+      }
+
+      const topGenre = this.yearStats.topGenres[0]
+      if (topGenre) {
+        addText('TOP GENRE', '12px', 'normal', tanColor, '1px', 215, 260)
+        addText(topGenre.genre, '18px', 'bolder', 'white', '0px', 215, 282)
+        addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '14px', 'lighter', 'white', '1px', 215, 302)
+      }
+
+      const topAuthor = this.yearStats.topAuthors[0]
+      if (topAuthor) {
+        addText('TOP AUTHOR', '12px', 'normal', tanColor, '1px', 20, 335)
+        addText(topAuthor.name, '18px', 'bolder', 'white', '0px', 20, 357)
+        addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '14px', 'lighter', 'white', '1px', 20, 377)
+      }
+
+      this.dataUrl = canvas.toDataURL('png')
+    },
+    refresh() {
+      this.init()
+    },
+    async init() {
+      this.$emit('update:processing', true)
+      let year = new Date().getFullYear()
+      if (new Date().getMonth() < 11) year--
+      this.year = year
+      this.yearStats = await this.$axios.$get(`/api/me/year/${year}/stats`).catch((err) => {
+        console.error('Failed to load stats for year', err)
+        this.$toast.error('Failed to load year stats')
+        return null
+      })
+      await this.initCanvas()
+      this.$emit('update:processing', false)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/client/pages/config/stats.vue b/client/pages/config/stats.vue
index 9b8f7ea59..b527ea38a 100644
--- a/client/pages/config/stats.vue
+++ b/client/pages/config/stats.vue
@@ -62,6 +62,13 @@
         </div>
       </div>
       <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" />
+
+      <ui-btn small :loading="processingYearInReview" @click.stop="clickShowYearInReview">Year in Review</ui-btn>
+      <div v-if="showYearInReview">
+        <div class="w-full h-px bg-slate-200/10 my-4" />
+
+        <stats-year-in-review ref="yearInReview" :processing.sync="processingYearInReview" />
+      </div>
     </app-settings-content>
   </div>
 </template>
@@ -71,7 +78,9 @@ export default {
   data() {
     return {
       listeningStats: null,
-      windowWidth: 0
+      windowWidth: 0,
+      showYearInReview: false,
+      processingYearInReview: false
     }
   },
   watch: {
@@ -114,6 +123,13 @@ export default {
     }
   },
   methods: {
+    clickShowYearInReview() {
+      if (this.showYearInReview) {
+        this.$refs.yearInReview.refresh()
+      } else {
+        this.showYearInReview = true
+      }
+    },
     async init() {
       this.listeningStats = await this.$axios.$get(`/api/me/listening-stats`).catch((err) => {
         console.error('Failed to load listening sesions', err)
diff --git a/server/utils/queries/userStats.js b/server/utils/queries/userStats.js
index b6895008a..f9b9684ef 100644
--- a/server/utils/queries/userStats.js
+++ b/server/utils/queries/userStats.js
@@ -2,7 +2,7 @@ const Sequelize = require('sequelize')
 const Database = require('../../Database')
 const PlaybackSession = require('../../models/PlaybackSession')
 const MediaProgress = require('../../models/MediaProgress')
-const { elapsedPretty } = require('../index')
+const fsExtra = require('../../libs/fsExtra')
 
 module.exports = {
   /**
@@ -18,8 +18,21 @@ module.exports = {
         createdAt: {
           [Sequelize.Op.gte]: `${year}-01-01`,
           [Sequelize.Op.lt]: `${year + 1}-01-01`
+        },
+        timeListening: {
+          [Sequelize.Op.gt]: 5
         }
-      }
+      },
+      include: {
+        model: Database.bookModel,
+        attributes: ['id', 'coverPath'],
+        include: {
+          model: Database.libraryItemModel,
+          attributes: ['id', 'mediaId', 'mediaType']
+        },
+        required: false
+      },
+      order: Database.sequelize.random()
     })
     return sessions
   },
@@ -42,6 +55,10 @@ module.exports = {
       },
       include: {
         model: Database.bookModel,
+        include: {
+          model: Database.libraryItemModel,
+          attributes: ['id', 'mediaId', 'mediaType']
+        },
         required: true
       }
     })
@@ -63,8 +80,15 @@ module.exports = {
     let genreListeningMap = {}
     let narratorListeningMap = {}
     let monthListeningMap = {}
+    let bookListeningMap = {}
+    const booksWithCovers = []
+
+    for (const ls of listeningSessions) {
+      // Grab first 16 that have a cover
+      if (ls.mediaItem?.coverPath && !booksWithCovers.includes(ls.mediaItem.libraryItem.id) && booksWithCovers.length < 16 && await fsExtra.pathExists(ls.mediaItem.coverPath)) {
+        booksWithCovers.push(ls.mediaItem.libraryItem.id)
+      }
 
-    listeningSessions.forEach((ls) => {
       const listeningSessionListeningTime = ls.timeListening || 0
 
       const lsMonth = ls.createdAt.getMonth()
@@ -75,6 +99,12 @@ module.exports = {
       if (ls.mediaItemType === 'book') {
         totalBookListeningTime += listeningSessionListeningTime
 
+        if (ls.displayTitle && !bookListeningMap[ls.displayTitle]) {
+          bookListeningMap[ls.displayTitle] = listeningSessionListeningTime
+        } else if (ls.displayTitle) {
+          bookListeningMap[ls.displayTitle] += listeningSessionListeningTime
+        }
+
         const authors = ls.mediaMetadata.authors || []
         authors.forEach((au) => {
           if (!authorListeningMap[au.name]) authorListeningMap[au.name] = 0
@@ -96,64 +126,54 @@ module.exports = {
       } else {
         totalPodcastListeningTime += listeningSessionListeningTime
       }
-    })
+    }
 
     totalListeningTime = Math.round(totalListeningTime)
     totalBookListeningTime = Math.round(totalBookListeningTime)
     totalPodcastListeningTime = Math.round(totalPodcastListeningTime)
 
-    let mostListenedAuthor = null
-    for (const authorName in authorListeningMap) {
-      if (!mostListenedAuthor?.time || authorListeningMap[authorName] > mostListenedAuthor.time) {
-        mostListenedAuthor = {
-          time: Math.round(authorListeningMap[authorName]),
-          pretty: elapsedPretty(Math.round(authorListeningMap[authorName])),
-          name: authorName
-        }
-      }
-    }
+    let topAuthors = null
+    topAuthors = Object.keys(authorListeningMap).map(authorName => ({
+      name: authorName,
+      time: Math.round(authorListeningMap[authorName])
+    })).sort((a, b) => b.time - a.time).slice(0, 3)
+
     let mostListenedNarrator = null
     for (const narrator in narratorListeningMap) {
       if (!mostListenedNarrator?.time || narratorListeningMap[narrator] > mostListenedNarrator.time) {
         mostListenedNarrator = {
           time: Math.round(narratorListeningMap[narrator]),
-          pretty: elapsedPretty(Math.round(narratorListeningMap[narrator])),
           name: narrator
         }
       }
     }
-    let mostListenedGenre = null
-    for (const genre in genreListeningMap) {
-      if (!mostListenedGenre?.time || genreListeningMap[genre] > mostListenedGenre.time) {
-        mostListenedGenre = {
-          time: Math.round(genreListeningMap[genre]),
-          pretty: elapsedPretty(Math.round(genreListeningMap[genre])),
-          name: genre
-        }
-      }
-    }
+
+    let topGenres = null
+    topGenres = Object.keys(genreListeningMap).map(genre => ({
+      genre,
+      time: Math.round(genreListeningMap[genre])
+    })).sort((a, b) => b.time - a.time).slice(0, 3)
+
     let mostListenedMonth = null
     for (const month in monthListeningMap) {
       if (!mostListenedMonth?.time || monthListeningMap[month] > mostListenedMonth.time) {
         mostListenedMonth = {
           month: Number(month),
-          time: Math.round(monthListeningMap[month]),
-          pretty: elapsedPretty(Math.round(monthListeningMap[month]))
+          time: Math.round(monthListeningMap[month])
         }
       }
     }
 
-    const bookProgresses = await this.getBookMediaProgressFinishedForYear(userId, year)
+    const bookProgressesFinished = await this.getBookMediaProgressFinishedForYear(userId, year)
 
-    const numBooksFinished = bookProgresses.length
+    const numBooksFinished = bookProgressesFinished.length
     let longestAudiobookFinished = null
-    bookProgresses.forEach((mediaProgress) => {
+    bookProgressesFinished.forEach((mediaProgress) => {
       if (mediaProgress.duration && (!longestAudiobookFinished?.duration || mediaProgress.duration > longestAudiobookFinished.duration)) {
         longestAudiobookFinished = {
           id: mediaProgress.mediaItem.id,
           title: mediaProgress.mediaItem.title,
           duration: Math.round(mediaProgress.duration),
-          durationPretty: elapsedPretty(Math.round(mediaProgress.duration)),
           finishedAt: mediaProgress.finishedAt
         }
       }
@@ -162,17 +182,16 @@ module.exports = {
     return {
       totalListeningSessions: listeningSessions.length,
       totalListeningTime,
-      totalListeningTimePretty: elapsedPretty(totalListeningTime),
       totalBookListeningTime,
-      totalBookListeningTimePretty: elapsedPretty(totalBookListeningTime),
       totalPodcastListeningTime,
-      totalPodcastListeningTimePretty: elapsedPretty(totalPodcastListeningTime),
-      mostListenedAuthor,
+      topAuthors,
+      topGenres,
       mostListenedNarrator,
-      mostListenedGenre,
       mostListenedMonth,
       numBooksFinished,
-      longestAudiobookFinished
+      numBooksListened: Object.keys(bookListeningMap).length,
+      longestAudiobookFinished,
+      booksWithCovers
     }
   }
 }

From 46ec59c74e5c9622b4053420dcfdc97f1b51d710 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 21 Dec 2023 09:44:37 -0600
Subject: [PATCH 13/24] Update:Year in review card prevent text overflow for
 narrator, author and genre #2373

---
 client/components/stats/YearInReview.vue | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/client/components/stats/YearInReview.vue b/client/components/stats/YearInReview.vue
index fa57020a1..74c57065a 100644
--- a/client/components/stats/YearInReview.vue
+++ b/client/components/stats/YearInReview.vue
@@ -37,10 +37,24 @@ export default {
         ctx.stroke()
       }
 
-      const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y) => {
+      const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y, maxWidth = 0) => {
         ctx.fillStyle = color
         ctx.font = `${fontWeight} ${fontSize} Source Sans Pro`
         ctx.letterSpacing = letterSpacing
+
+        // If maxWidth is specified then continue to remove chars until under maxWidth and add ellipsis
+        if (maxWidth) {
+          let txtWidth = ctx.measureText(text).width
+          while (txtWidth > maxWidth) {
+            console.warn(`Text "${text}" is greater than max width ${maxWidth} (width:${txtWidth})`)
+            if (text.endsWith('...')) text = text.slice(0, -4) // Repeated checks remove 1 char at a time
+            else text = text.slice(0, -3) // First check remove last 3 chars
+            text += '...'
+            txtWidth = ctx.measureText(text).width
+            console.log(`Checking text "${text}" (width:${txtWidth})`)
+          }
+        }
+
         ctx.fillText(text, x, y)
       }
 
@@ -131,21 +145,21 @@ export default {
       const topNarrator = this.yearStats.mostListenedNarrator
       if (topNarrator) {
         addText('TOP NARRATOR', '12px', 'normal', tanColor, '1px', 20, 260)
-        addText(topNarrator.name, '18px', 'bolder', 'white', '0px', 20, 282)
+        addText(topNarrator.name, '18px', 'bolder', 'white', '0px', 20, 282, 180)
         addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '14px', 'lighter', 'white', '1px', 20, 302)
       }
 
       const topGenre = this.yearStats.topGenres[0]
       if (topGenre) {
         addText('TOP GENRE', '12px', 'normal', tanColor, '1px', 215, 260)
-        addText(topGenre.genre, '18px', 'bolder', 'white', '0px', 215, 282)
+        addText(topGenre.genre, '18px', 'bolder', 'white', '0px', 215, 282, 180)
         addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '14px', 'lighter', 'white', '1px', 215, 302)
       }
 
       const topAuthor = this.yearStats.topAuthors[0]
       if (topAuthor) {
         addText('TOP AUTHOR', '12px', 'normal', tanColor, '1px', 20, 335)
-        addText(topAuthor.name, '18px', 'bolder', 'white', '0px', 20, 357)
+        addText(topAuthor.name, '18px', 'bolder', 'white', '0px', 20, 357, 180)
         addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '14px', 'lighter', 'white', '1px', 20, 377)
       }
 

From 76119445a302f0c1109bc4fdb44100f60be7107e Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 21 Dec 2023 13:52:42 -0600
Subject: [PATCH 14/24] Update:Listening sessions table for multi-select,
 sorting and rows per page - Updated get all sessions API endpoint to include
 sorting - Added sessions API endpoint for batch deleting

---
 client/components/ui/Checkbox.vue       |   6 +-
 client/components/ui/Dropdown.vue       |   4 +-
 client/components/ui/InputDropdown.vue  |   2 +-
 client/pages/config/sessions.vue        | 205 +++++++++++++++++++++---
 client/strings/cs.json                  |   3 +
 client/strings/da.json                  |   3 +
 client/strings/de.json                  |   5 +-
 client/strings/en-us.json               |   5 +-
 client/strings/es.json                  |   3 +
 client/strings/fr.json                  |   3 +
 client/strings/gu.json                  |   3 +
 client/strings/hi.json                  |   3 +
 client/strings/hr.json                  |   3 +
 client/strings/it.json                  |   3 +
 client/strings/lt.json                  |   3 +
 client/strings/nl.json                  |   3 +
 client/strings/no.json                  |   3 +
 client/strings/pl.json                  |   3 +
 client/strings/ru.json                  |   3 +
 client/strings/sv.json                  |   3 +
 client/strings/zh-cn.json               |   5 +-
 client/tailwind.config.js               |   1 +
 server/controllers/SessionController.js | 137 ++++++++++++++--
 server/routers/ApiRouter.js             |  13 +-
 server/utils/index.js                   |  12 ++
 25 files changed, 375 insertions(+), 62 deletions(-)

diff --git a/client/components/ui/Checkbox.vue b/client/components/ui/Checkbox.vue
index 439d6c7d5..58770aa89 100644
--- a/client/components/ui/Checkbox.vue
+++ b/client/components/ui/Checkbox.vue
@@ -2,7 +2,8 @@
   <label class="flex justify-start items-center" :class="!disabled ? 'cursor-pointer' : ''">
     <div class="border-2 rounded flex flex-shrink-0 justify-center items-center" :class="wrapperClass">
       <input v-model="selected" :disabled="disabled" type="checkbox" class="opacity-0 absolute" :class="!disabled ? 'cursor-pointer' : ''" />
-      <svg v-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
+      <span v-if="partial" class="material-icons text-base leading-none text-gray-400">remove</span>
+      <svg v-else-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
     </div>
     <div v-if="label" class="select-none" :class="[labelClassname, disabled ? 'text-gray-400' : 'text-gray-100']">{{ label }}</div>
   </label>
@@ -31,7 +32,8 @@ export default {
       type: String,
       default: ''
     },
-    disabled: Boolean
+    disabled: Boolean,
+    partial: Boolean
   },
   data() {
     return {}
diff --git a/client/components/ui/Dropdown.vue b/client/components/ui/Dropdown.vue
index 581554998..632e38ecf 100644
--- a/client/components/ui/Dropdown.vue
+++ b/client/components/ui/Dropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="relative w-full" v-click-outside="clickOutsideObj">
-    <p class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
+    <p v-if="label" class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
     <button type="button" :aria-label="longLabel" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center">
         <span class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small }">{{ selectedText }}</span>
@@ -64,7 +64,7 @@ export default {
     },
     itemsToShow() {
       return this.items.map((i) => {
-        if (typeof i === 'string') {
+        if (typeof i === 'string' || typeof i === 'number') {
           return {
             text: i,
             value: i
diff --git a/client/components/ui/InputDropdown.vue b/client/components/ui/InputDropdown.vue
index 852aa9977..a9ae7467b 100644
--- a/client/components/ui/InputDropdown.vue
+++ b/client/components/ui/InputDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <label class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</label>
+    <label v-if="label" class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</label>
     <div ref="wrapper" class="relative">
       <form @submit.prevent="submitForm">
         <div ref="inputWrapper" class="input-wrapper flex-wrap relative w-full shadow-sm flex items-center border border-gray-600 rounded px-2 py-2" :class="disabled ? 'pointer-events-none bg-black-300 text-gray-400' : 'bg-primary'">
diff --git a/client/pages/config/sessions.vue b/client/pages/config/sessions.vue
index 0b74955c6..fb6e4c307 100644
--- a/client/pages/config/sessions.vue
+++ b/client/pages/config/sessions.vue
@@ -5,37 +5,72 @@
         <ui-dropdown v-model="selectedUser" :items="userItems" :label="$strings.LabelFilterByUser" small class="max-w-48" @input="updateUserFilter" />
       </div>
 
-      <div v-if="listeningSessions.length" class="block max-w-full">
+      <div v-if="listeningSessions.length" class="block max-w-full relative">
         <table class="userSessionsTable">
           <tr class="bg-primary bg-opacity-40">
-            <th class="w-48 min-w-48 text-left">{{ $strings.LabelItem }}</th>
-            <th class="w-20 min-w-20 text-left hidden md:table-cell">{{ $strings.LabelUser }}</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="flex-grow hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th>
+            <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="flex-grow text-left" :colspan="7">
+              <div class="flex items-center">
+                <p>{{ $getString('MessageSelected', [numSelected]) }}</p>
+                <div class="flex-grow" />
+                <ui-btn small color="error" :loading="deletingSessions" @click.stop="removeSessionsClick">{{ $strings.ButtonRemove }}</ui-btn>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="w-48 min-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-icons 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-icons 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-32 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-icons text-base pl-px">{{ 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-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+              </div>
+            </th>
+            <th v-if="!numSelected" class="flex-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-icons 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="cursor-pointer" @click="showSession(session)">
-            <td class="py-1 max-w-48">
+          <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 w-48 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">
+            <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">
+            <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">
+            <td class="hidden sm:table-cell w-32 min-w-32">
               <p class="text-xs" v-html="getDeviceInfoString(session.deviceInfo)" />
             </td>
-            <td class="text-center">
+            <td class="text-center w-32 min-w-32">
               <p class="text-xs font-mono">{{ $elapsedPretty(session.timeListening) }}</p>
             </td>
-            <td class="text-center hover:underline" @click.stop="clickCurrentTime(session)">
+            <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">
@@ -45,10 +80,22 @@
             </td>
           </tr>
         </table>
-        <div class="flex items-center justify-end my-2">
-          <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">Page {{ currentPage + 1 }} of {{ numPages }}</p>
-          <ui-icon-btn icon="arrow_forward_ios" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage >= numPages - 1" @click="nextPage" />
+        <!-- table bottom options -->
+        <div class="flex items-center my-2">
+          <div class="flex-grow" />
+          <div class="inline-flex items-center">
+            <p class="text-sm">{{ $strings.LabelRowsPerPage }}</p>
+            <ui-dropdown v-model="itemsPerPage" :items="itemsPerPageOptions" small class="w-24 mx-2" @input="updatedItemsPerPage" />
+          </div>
+          <div class="inline-flex items-center">
+            <p class="text-sm mx-2">Page {{ currentPage + 1 }} of {{ numPages }}</p>
+            <ui-icon-btn icon="arrow_back_ios_new" :size="9" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
+            <ui-icon-btn icon="arrow_forward_ios" :size="9" icon-font-size="1rem" class="mx-1" :disabled="currentPage >= numPages - 1" @click="nextPage" />
+          </div>
+        </div>
+
+        <div v-if="deletingSessions || loading" class="absolute inset-0 w-full h-full flex items-center justify-center">
+          <ui-loading-indicator />
         </div>
       </div>
       <p v-else class="text-white text-opacity-50">{{ $strings.MessageNoListeningSessions }}</p>
@@ -128,6 +175,7 @@ export default {
   },
   data() {
     return {
+      loading: false,
       showSessionModal: false,
       selectedSession: null,
       listeningSessions: [],
@@ -138,7 +186,11 @@ export default {
       itemsPerPage: 10,
       userFilter: null,
       selectedUser: '',
-      processingGoToTimestamp: false
+      sortBy: 'updatedAt',
+      sortDesc: true,
+      processingGoToTimestamp: false,
+      deletingSessions: false,
+      itemsPerPageOptions: [10, 25, 50, 100]
     }
   },
   computed: {
@@ -162,9 +214,85 @@ export default {
     },
     timeFormat() {
       return this.$store.state.serverSettings.timeFormat
+    },
+    numSelected() {
+      return this.listeningSessions.filter((s) => s.selected).length
+    },
+    isAllSelected: {
+      get() {
+        return this.numSelected === this.listeningSessions.length
+      },
+      set(val) {
+        this.setSelectionForAll(val)
+      }
     }
   },
   methods: {
+    isSortSelected(column) {
+      return this.sortBy === column
+    },
+    sortColumn(column) {
+      if (this.sortBy === column) {
+        this.sortDesc = !this.sortDesc
+      } else {
+        this.sortBy = column
+      }
+      this.loadSessions(this.currentPage)
+    },
+    removeSelectedSessions() {
+      if (!this.numSelected) return
+      this.deletingSessions = true
+
+      let isAllSessions = this.isAllSelected
+      const payload = {
+        sessions: this.listeningSessions.filter((s) => s.selected).map((s) => s.id)
+      }
+      this.$axios
+        .$post(`/api/sessions/batch/delete`, payload)
+        .then(() => {
+          this.$toast.success('Sessions removed')
+          if (isAllSessions) {
+            // If all sessions were removed from the current page then go to the previous page
+            if (this.currentPage > 0) {
+              this.currentPage--
+            }
+            this.loadSessions(this.currentPage)
+          } else {
+            // Filter out the deleted sessions
+            this.listeningSessions = this.listeningSessions.filter((ls) => !payload.sessions.includes(ls.id))
+          }
+        })
+        .catch((error) => {
+          const errorMsg = error.response?.data || 'Failed to remove sessions'
+          this.$toast.error(errorMsg)
+        })
+        .finally(() => {
+          this.deletingSessions = false
+        })
+    },
+    removeSessionsClick() {
+      if (!this.numSelected) return
+      const payload = {
+        message: this.$getString('MessageConfirmRemoveListeningSessions', [this.numSelected]),
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.removeSelectedSessions()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    setSelectionForAll(val) {
+      this.listeningSessions = this.listeningSessions.map((s) => {
+        s.selected = val
+        return s
+      })
+    },
+    updatedItemsPerPage() {
+      this.currentPage = 0
+      this.loadSessions(this.currentPage)
+    },
     closedSession() {
       this.loadOpenSessions()
     },
@@ -252,6 +380,13 @@ export default {
     nextPage() {
       this.loadSessions(this.currentPage + 1)
     },
+    clickSessionRow(session) {
+      if (this.numSelected > 0) {
+        session.selected = !session.selected
+      } else {
+        this.showSession(session)
+      }
+    },
     showSession(session) {
       this.selectedSession = session
       this.showSessionModal = true
@@ -274,11 +409,21 @@ export default {
       return 'Unknown'
     },
     async loadSessions(page) {
-      const userFilterQuery = this.selectedUser ? `&user=${this.selectedUser}` : ''
-      const data = await this.$axios.$get(`/api/sessions?page=${page}&itemsPerPage=${this.itemsPerPage}${userFilterQuery}`).catch((err) => {
+      this.loading = true
+      const urlSearchParams = new URLSearchParams()
+      urlSearchParams.set('page', page)
+      urlSearchParams.set('itemsPerPage', this.itemsPerPage)
+      urlSearchParams.set('sort', this.sortBy)
+      urlSearchParams.set('desc', this.sortDesc ? '1' : '0')
+      if (this.selectedUser) {
+        urlSearchParams.set('user', this.selectedUser)
+      }
+
+      const data = await this.$axios.$get(`/api/sessions?${urlSearchParams.toString()}`).catch((err) => {
         console.error('Failed to load listening sessions', err)
         return null
       })
+      this.loading = false
       if (!data) {
         this.$toast.error('Failed to load listening sessions')
         return
@@ -287,8 +432,13 @@ export default {
       this.numPages = data.numPages
       this.total = data.total
       this.currentPage = data.page
-      this.listeningSessions = data.sessions
-      this.userFilter = data.userFilter
+      this.listeningSessions = data.sessions.map((ls) => {
+        return {
+          ...ls,
+          selected: false
+        }
+      })
+      this.userFilter = data.userId
     },
     async loadOpenSessions() {
       const data = await this.$axios.$get('/api/sessions/open').catch((err) => {
@@ -326,15 +476,18 @@ export default {
 .userSessionsTable tr:first-child {
   background-color: #272727;
 }
-.userSessionsTable tr:not(:first-child) {
+.userSessionsTable tr:not(:first-child):not(.selected) {
   background-color: #373838;
 }
-.userSessionsTable tr:not(:first-child):nth-child(odd) {
+.userSessionsTable tr:not(:first-child):nth-child(odd):not(.selected):not(:hover) {
   background-color: #2f2f2f;
 }
 .userSessionsTable tr:hover:not(:first-child) {
   background-color: #474747;
 }
+.userSessionsTable tr.selected {
+  background-color: #474747;
+}
 .userSessionsTable td {
   padding: 4px 8px;
 }
diff --git a/client/strings/cs.json b/client/strings/cs.json
index 6d39569e3..bac376d87 100644
--- a/client/strings/cs.json
+++ b/client/strings/cs.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Region",
   "LabelReleaseDate": "Datum vydání",
   "LabelRemoveCover": "Odstranit obálku",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Vlastní e-mail vlastníka",
   "LabelRSSFeedCustomOwnerName": "Vlastní jméno vlastníka",
   "LabelRSSFeedOpen": "Otevření RSS kanálu",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Opravdu chcete odstranit kolekci \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Opravdu chcete odstranit epizodu \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Opravdu chcete odstranit {0} epizody?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Opravdu chcete odebrat předčítání \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Opravdu chcete odstranit svůj playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Opravdu chcete přejmenovat žánr \"{0}\" na \"{1}\" pro všechny položky?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Opravdu chcete obnovit zálohu vytvořenou dne?",
   "MessageRestoreBackupWarning": "Obnovení zálohy přepíše celou databázi umístěnou v /config a obálku obrázků v /metadata/items & /metadata/authors.<br /><br />Backups nezmění žádné soubory ve složkách knihovny. Pokud jste povolili nastavení serveru pro ukládání obrázků obalu a metadat do složek knihovny, nebudou zálohovány ani přepsány.<br /><br />Všichni klienti používající váš server budou automaticky obnoveni.",
   "MessageSearchResultsFor": "Výsledky hledání pro",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Server je nedostupný",
   "MessageSetChaptersFromTracksDescription": "Nastavit kapitoly jako kapitolu a název kapitoly jako název zvukového souboru",
   "MessageStartPlaybackAtTime": "Spustit přehrávání pro \"{0}\" v {1}?",
diff --git a/client/strings/da.json b/client/strings/da.json
index fa28dd244..3dd611d9e 100644
--- a/client/strings/da.json
+++ b/client/strings/da.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Region",
   "LabelReleaseDate": "Udgivelsesdato",
   "LabelRemoveCover": "Fjern omslag",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Brugerdefineret ejerens e-mail",
   "LabelRSSFeedCustomOwnerName": "Brugerdefineret ejerens navn",
   "LabelRSSFeedOpen": "Åben RSS-feed",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Er du sikker på, at du vil fjerne samlingen \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Er du sikker på, at du vil fjerne episoden \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Er du sikker på, at du vil fjerne {0} episoder?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Er du sikker på, at du vil fjerne fortælleren \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Er du sikker på, at du vil fjerne din spilleliste \"{0}\"?",
   "MessageConfirmRenameGenre": "Er du sikker på, at du vil omdøbe genre \"{0}\" til \"{1}\" for alle elementer?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Er du sikker på, at du vil gendanne sikkerhedskopien oprettet den",
   "MessageRestoreBackupWarning": "Gendannelse af en sikkerhedskopi vil overskrive hele databasen, som er placeret på /config, og omslagsbilleder i /metadata/items & /metadata/authors.<br /><br />Sikkerhedskopier ændrer ikke nogen filer i dine biblioteksmapper. Hvis du har aktiveret serverindstillinger for at gemme omslagskunst og metadata i dine biblioteksmapper, sikkerhedskopieres eller overskrives disse ikke.<br /><br />Alle klienter, der bruger din server, opdateres automatisk.",
   "MessageSearchResultsFor": "Søgeresultater for",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Serveren kunne ikke nås",
   "MessageSetChaptersFromTracksDescription": "Indstil kapitler ved at bruge hver lydfil som et kapitel og kapiteloverskrift som lydfilnavn",
   "MessageStartPlaybackAtTime": "Start afspilning for \"{0}\" kl. {1}?",
diff --git a/client/strings/de.json b/client/strings/de.json
index 6975b794b..8cf54cbec 100644
--- a/client/strings/de.json
+++ b/client/strings/de.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Region",
   "LabelReleaseDate": "Veröffentlichungsdatum",
   "LabelRemoveCover": "Lösche Titelbild",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Benutzerdefinierte Eigentümer-E-Mail",
   "LabelRSSFeedCustomOwnerName": "Benutzerdefinierter Name des Eigentümers",
   "LabelRSSFeedOpen": "RSS Feed Offen",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Sammlung \"{0}\" wird gelöscht! Sind Sie sicher?",
   "MessageConfirmRemoveEpisode": "Episode \"{0}\" wird geloscht! Sind Sie sicher?",
   "MessageConfirmRemoveEpisodes": "{0} Episoden werden gelöscht! Sind Sie sicher?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Erzähler \"{0}\" wird gelöscht! Sind Sie sicher?",
   "MessageConfirmRemovePlaylist": "Wiedergabeliste \"{0}\" wird entfernt! Sind Sie sicher?",
   "MessageConfirmRenameGenre": "Kategorie \"{0}\" in \"{1}\" für alle Hörbücher/Podcasts werden umbenannt! Sind Sie sicher?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Sind Sie sicher, dass Sie die Sicherung wiederherstellen wollen, welche am",
   "MessageRestoreBackupWarning": "Bei der Wiederherstellung einer Sicherung wird die gesamte Datenbank unter /config und die Titelbilder in /metadata/items und /metadata/authors überschrieben.<br /><br />Bei der Sicherung werden keine Dateien in Ihren Bibliotheksordnern verändert. Wenn Sie die Servereinstellungen aktiviert haben, um Cover und Metadaten in Ihren Bibliotheksordnern zu speichern, werden diese nicht gesichert oder überschrieben.<br /><br />Alle Clients, die Ihren Server nutzen, werden automatisch aktualisiert.",
   "MessageSearchResultsFor": "Suchergebnisse für",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Server kann nicht erreicht werden",
   "MessageSetChaptersFromTracksDescription": "Kaitelerstellung basiert auf den existierenden einzelnen Audiodateien. Pro existierende Audiodatei wird 1 Kapitel erstellt, wobei deren Kapitelname aus dem Audiodateinamen extrahiert wird",
   "MessageStartPlaybackAtTime": "Start der Wiedergabe für \"{0}\" bei {1}?",
@@ -747,4 +750,4 @@
   "ToastSocketFailedToConnect": "Verbindung zum WebSocket fehlgeschlagen",
   "ToastUserDeleteFailed": "Benutzer konnte nicht gelöscht werden",
   "ToastUserDeleteSuccess": "Benutzer gelöscht"
-}
+}
\ No newline at end of file
diff --git a/client/strings/en-us.json b/client/strings/en-us.json
index 02f9df053..f69175fde 100644
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Region",
   "LabelReleaseDate": "Release Date",
   "LabelRemoveCover": "Remove cover",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Custom owner Email",
   "LabelRSSFeedCustomOwnerName": "Custom owner Name",
   "LabelRSSFeedOpen": "RSS Feed Open",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Are you sure you want to remove collection \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Are you sure you want to remove episode \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Are you sure you want to remove {0} episodes?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Are you sure you want to rename genre \"{0}\" to \"{1}\" for all items?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Are you sure you want to restore the backup created on",
   "MessageRestoreBackupWarning": "Restoring a backup will overwrite the entire database located at /config and cover images in /metadata/items & /metadata/authors.<br /><br />Backups do not modify any files in your library folders. If you have enabled server settings to store cover art and metadata in your library folders then those are not backed up or overwritten.<br /><br />All clients using your server will be automatically refreshed.",
   "MessageSearchResultsFor": "Search results for",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Server could not be reached",
   "MessageSetChaptersFromTracksDescription": "Set chapters using each audio file as a chapter and chapter title as the audio file name",
   "MessageStartPlaybackAtTime": "Start playback for \"{0}\" at {1}?",
@@ -747,4 +750,4 @@
   "ToastSocketFailedToConnect": "Socket failed to connect",
   "ToastUserDeleteFailed": "Failed to delete user",
   "ToastUserDeleteSuccess": "User deleted"
-}
+}
\ No newline at end of file
diff --git a/client/strings/es.json b/client/strings/es.json
index 473153015..cefeb8f87 100644
--- a/client/strings/es.json
+++ b/client/strings/es.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Región",
   "LabelReleaseDate": "Fecha de Estreno",
   "LabelRemoveCover": "Remover Portada",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Email de dueño personalizado",
   "LabelRSSFeedCustomOwnerName": "Nombre de dueño personalizado",
   "LabelRSSFeedOpen": "Fuente RSS Abierta",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "¿Está seguro de que desea remover la colección \"{0}\"?",
   "MessageConfirmRemoveEpisode": "¿Está seguro de que desea remover el episodio \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "¿Está seguro de que desea remover {0} episodios?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "¿Está seguro de que desea remover el narrador \"{0}\"?",
   "MessageConfirmRemovePlaylist": "¿Está seguro de que desea remover la lista de reproducción \"{0}\"?",
   "MessageConfirmRenameGenre": "¿Está seguro de que desea renombrar el genero \"{0}\" a \"{1}\" de todos los elementos?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "¿Está seguro de que desea para restaurar del respaldo creado en",
   "MessageRestoreBackupWarning": "Restaurar sobrescribirá toda la base de datos localizada en /config y las imágenes de portadas en /metadata/items y /metadata/authors.<br /><br />El respaldo no modifica ningún archivo en las carpetas de su biblioteca. Si ha habilitado la opción del servidor para almacenar portadas y metadata en las carpetas de su biblioteca, esos archivos no se respaldan o sobrescriben.<br /><br />Todos los clientes que usen su servidor se actualizarán automáticamente.",
   "MessageSearchResultsFor": "Resultados de la búsqueda de",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "No se pudo establecer la conexión con el servidor",
   "MessageSetChaptersFromTracksDescription": "Establecer capítulos usando cada archivo de audio como un capítulo y el título del capítulo como el nombre del archivo de audio",
   "MessageStartPlaybackAtTime": "Iniciar reproducción para \"{0}\" en {1}?",
diff --git a/client/strings/fr.json b/client/strings/fr.json
index f6efa428b..86a646025 100644
--- a/client/strings/fr.json
+++ b/client/strings/fr.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Région",
   "LabelReleaseDate": "Date de parution",
   "LabelRemoveCover": "Supprimer la couverture",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Courriel du propriétaire personnalisé",
   "LabelRSSFeedCustomOwnerName": "Nom propriétaire personnalisé",
   "LabelRSSFeedOpen": "Flux RSS ouvert",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Êtes-vous sûr de vouloir supprimer la collection « {0} » ?",
   "MessageConfirmRemoveEpisode": "Êtes-vous sûr de vouloir supprimer l’épisode « {0} » ?",
   "MessageConfirmRemoveEpisodes": "Êtes-vous sûr de vouloir supprimer {0} épisodes ?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Êtes-vous sûr de vouloir supprimer le narrateur « {0} » ?",
   "MessageConfirmRemovePlaylist": "Êtes-vous sûr de vouloir supprimer la liste de lecture « {0} » ?",
   "MessageConfirmRenameGenre": "Êtes-vous sûr de vouloir renommer le genre « {0} » en « {1} » pour tous les articles ?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Êtes-vous certain de vouloir restaurer la sauvegarde créée le",
   "MessageRestoreBackupWarning": "Restaurer la sauvegarde écrasera la base de donnée située dans le dossier /config ainsi que les images sur /metadata/items et /metadata/authors.<br /><br />Les sauvegardes ne touchent pas aux fichiers de la bibliothèque. Si vous avez activé le paramètre pour sauvegarder les métadonnées et les images de couverture dans le même dossier que les fichiers, ceux-ci ne ni sauvegardés, ni écrasés lors de la restauration.<br /><br />Tous les clients utilisant votre serveur seront automatiquement mis à jour.",
   "MessageSearchResultsFor": "Résultats de recherche pour",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Serveur inaccessible",
   "MessageSetChaptersFromTracksDescription": "Positionne un chapitre par fichier audio, avec le titre du fichier comme titre de chapitre",
   "MessageStartPlaybackAtTime": "Démarrer la lecture pour « {0} » à {1} ?",
diff --git a/client/strings/gu.json b/client/strings/gu.json
index 0317e2f98..24c874eba 100644
--- a/client/strings/gu.json
+++ b/client/strings/gu.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Region",
   "LabelReleaseDate": "Release Date",
   "LabelRemoveCover": "Remove cover",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Custom owner Email",
   "LabelRSSFeedCustomOwnerName": "Custom owner Name",
   "LabelRSSFeedOpen": "RSS Feed Open",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Are you sure you want to remove collection \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Are you sure you want to remove episode \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Are you sure you want to remove {0} episodes?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Are you sure you want to rename genre \"{0}\" to \"{1}\" for all items?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Are you sure you want to restore the backup created on",
   "MessageRestoreBackupWarning": "Restoring a backup will overwrite the entire database located at /config and cover images in /metadata/items & /metadata/authors.<br /><br />Backups do not modify any files in your library folders. If you have enabled server settings to store cover art and metadata in your library folders then those are not backed up or overwritten.<br /><br />All clients using your server will be automatically refreshed.",
   "MessageSearchResultsFor": "Search results for",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Server could not be reached",
   "MessageSetChaptersFromTracksDescription": "Set chapters using each audio file as a chapter and chapter title as the audio file name",
   "MessageStartPlaybackAtTime": "Start playback for \"{0}\" at {1}?",
diff --git a/client/strings/hi.json b/client/strings/hi.json
index eb4f074f9..e7ec61556 100644
--- a/client/strings/hi.json
+++ b/client/strings/hi.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Region",
   "LabelReleaseDate": "Release Date",
   "LabelRemoveCover": "Remove cover",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Custom owner Email",
   "LabelRSSFeedCustomOwnerName": "Custom owner Name",
   "LabelRSSFeedOpen": "RSS Feed Open",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Are you sure you want to remove collection \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Are you sure you want to remove episode \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Are you sure you want to remove {0} episodes?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Are you sure you want to rename genre \"{0}\" to \"{1}\" for all items?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Are you sure you want to restore the backup created on",
   "MessageRestoreBackupWarning": "Restoring a backup will overwrite the entire database located at /config and cover images in /metadata/items & /metadata/authors.<br /><br />Backups do not modify any files in your library folders. If you have enabled server settings to store cover art and metadata in your library folders then those are not backed up or overwritten.<br /><br />All clients using your server will be automatically refreshed.",
   "MessageSearchResultsFor": "Search results for",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Server could not be reached",
   "MessageSetChaptersFromTracksDescription": "Set chapters using each audio file as a chapter and chapter title as the audio file name",
   "MessageStartPlaybackAtTime": "Start playback for \"{0}\" at {1}?",
diff --git a/client/strings/hr.json b/client/strings/hr.json
index eb7d27d85..edefcf53c 100644
--- a/client/strings/hr.json
+++ b/client/strings/hr.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Regija",
   "LabelReleaseDate": "Datum izlaska",
   "LabelRemoveCover": "Remove cover",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Custom owner Email",
   "LabelRSSFeedCustomOwnerName": "Custom owner Name",
   "LabelRSSFeedOpen": "RSS Feed Open",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "AJeste li sigurni da želite obrisati kolekciju \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Jeste li sigurni da želite obrisati epizodu \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Jeste li sigurni da želite obrisati {0} epizoda/-u?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Are you sure you want to rename genre \"{0}\" to \"{1}\" for all items?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Jeste li sigurni da želite povratiti backup kreiran",
   "MessageRestoreBackupWarning": "Povračanje backupa će zamijeniti postoječu bazu podataka u /config i slike covera u /metadata/items i /metadata/authors.<br /><br />Backups ne modificiraju nikakve datoteke u folderu od biblioteke. Ako imate uključene server postavke da spremate cover i metapodtake u folderu od biblioteke, onda oni neće biti backupani ili overwritten.<br /><br />Svi klijenti koji koriste tvoj server će biti automatski osvježeni.",
   "MessageSearchResultsFor": "Traži rezultate za",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Server ne može biti kontaktiran",
   "MessageSetChaptersFromTracksDescription": "Set chapters using each audio file as a chapter and chapter title as the audio file name",
   "MessageStartPlaybackAtTime": "Pokreni reprodukciju za \"{0}\" na {1}?",
diff --git a/client/strings/it.json b/client/strings/it.json
index 7e5267217..0860e83f3 100644
--- a/client/strings/it.json
+++ b/client/strings/it.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Regione",
   "LabelReleaseDate": "Data Release",
   "LabelRemoveCover": "Rimuovi cover",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Email del proprietario personalizzato",
   "LabelRSSFeedCustomOwnerName": "Nome del proprietario personalizzato",
   "LabelRSSFeedOpen": "RSS Feed Aperto",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Sei sicuro di voler rimuovere la Raccolta \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Sei sicuro di voler rimuovere l'episodio \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Sei sicuro di voler rimuovere  {0} episodi?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Sei sicuro di voler rimuovere il narratore \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Sei sicuro di voler rimuovere la tua playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Sei sicuro di voler rinominare il genere \"{0}\" in \"{1}\" per tutti gli oggetti?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Sei sicuro di voler ripristinare il backup creato su",
   "MessageRestoreBackupWarning": "Il ripristino di un backup sovrascriverà l'intero database situato in /config e sovrascrive le immagini in /metadata/items & /metadata/authors.<br /><br />I backup non modificano alcun file nelle cartelle della libreria. Se hai abilitato le impostazioni del server per archiviare copertine e metadati nelle cartelle della libreria, questi non vengono sottoposti a backup o sovrascritti.<br /><br />Tutti i client che utilizzano il tuo server verranno aggiornati automaticamente.",
   "MessageSearchResultsFor": "cerca risultati per",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Impossibile raggiungere il server",
   "MessageSetChaptersFromTracksDescription": "Impostare i capitoli utilizzando ciascun file audio come capitolo e il titolo del capitolo come nome del file audio",
   "MessageStartPlaybackAtTime": "Avvia la riproduzione per \"{0}\" a {1}?",
diff --git a/client/strings/lt.json b/client/strings/lt.json
index 9c4b9a63c..94067198d 100644
--- a/client/strings/lt.json
+++ b/client/strings/lt.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Regionas",
   "LabelReleaseDate": "Išleidimo data",
   "LabelRemoveCover": "Pašalinti viršelį",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Pasirinktinis savininko el. paštas",
   "LabelRSSFeedCustomOwnerName": "Pasirinktinis savininko vardas",
   "LabelRSSFeedOpen": "Atidarytas RSS srautas",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Ar tikrai norite pašalinti kolekciją \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Ar tikrai norite pašalinti epizodą \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Ar tikrai norite pašalinti {0} epizodus?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Ar tikrai norite pašalinti skaitytoją \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Ar tikrai norite pašalinti savo grojaraštį \"{0}\"?",
   "MessageConfirmRenameGenre": "Ar tikrai norite pervadinti žanrą \"{0}\" į \"{1}\" visiems elementams?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Ar tikrai norite atkurti atsarginę kopiją, sukurtą",
   "MessageRestoreBackupWarning": "Atkurdami atsarginę kopiją perrašysite visą duomenų bazę, esančią /config ir viršelių vaizdus /metadata/items ir /metadata/authors.<br /><br />Atsarginės kopijos nekeičia jokių failų jūsų bibliotekos aplankuose. Jei esate įgalinę serverio nustatymus, kad viršelio meną ir metaduomenis saugotumėte savo bibliotekos aplankuose, šie neperrašomi ar atkuriami.<br /><br />Visi klientai, naudojantys jūsų serverį, bus automatiškai atnaujinti.",
   "MessageSearchResultsFor": "Paieškos rezultatai „{0}“",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Nepavyko pasiekti serverio",
   "MessageSetChaptersFromTracksDescription": "Nustatyti skyrius, naudojant kiekvieną garso failą kaip skyrių ir skyriaus pavadinimą kaip garso failo pavadinimą",
   "MessageStartPlaybackAtTime": "Paleisti klausymą „{0}“ nuo {1}?",
diff --git a/client/strings/nl.json b/client/strings/nl.json
index d4779abd6..19a5c35a8 100644
--- a/client/strings/nl.json
+++ b/client/strings/nl.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Regio",
   "LabelReleaseDate": "Verschijningsdatum",
   "LabelRemoveCover": "Verwijder cover",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Aangepast e-mailadres eigenaar",
   "LabelRSSFeedCustomOwnerName": "Aangepaste naam eigenaar",
   "LabelRSSFeedOpen": "RSS-feed open",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Weet je zeker dat je de collectie \"{0}\" wil verwijderen?",
   "MessageConfirmRemoveEpisode": "Weet je zeker dat je de aflevering \"{0}\" wil verwijderen?",
   "MessageConfirmRemoveEpisodes": "Weet je zeker dat je {0} afleveringen wil verwijderen?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Weet je zeker dat je verteller \"{0}\" wil verwijderen?",
   "MessageConfirmRemovePlaylist": "Weet je zeker dat je je afspeellijst \"{0}\" wil verwijderen?",
   "MessageConfirmRenameGenre": "Weet je zeker dat je genre \"{0}\" wil hernoemen naar \"{1}\" voor alle onderdelen?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Weet je zeker dat je wil herstellen met behulp van de back-up gemaakt op",
   "MessageRestoreBackupWarning": "Herstellen met een back-up zal de volledige database in /config en de covers in /metadata/items & /metadata/authors overschrijven.<br /><br />Back-ups wijzigen geen bestanden in je bibliotheekmappen. Als je de serverinstelling gebruikt om covers en metadata in je bibliotheekmappen te bewaren dan worden deze niet geback-upt of overschreven.<br /><br />Alle clients die van je server gebruik maken zullen automatisch worden ververst.",
   "MessageSearchResultsFor": "Zoekresultaten voor",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Server niet bereikbaar",
   "MessageSetChaptersFromTracksDescription": "Stel hoofdstukken in met ieder audiobestand als een hoofdstuk en de audiobestandsnaam als hoofdstuktitel",
   "MessageStartPlaybackAtTime": "Afspelen van \"{0}\" beginnen op {1}?",
diff --git a/client/strings/no.json b/client/strings/no.json
index 511c8b865..37cbc7a81 100644
--- a/client/strings/no.json
+++ b/client/strings/no.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Region",
   "LabelReleaseDate": "Utgivelsesdato",
   "LabelRemoveCover": "Fjern omslag",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Tilpasset eier Epost",
   "LabelRSSFeedCustomOwnerName": "Tilpasset eier Navn",
   "LabelRSSFeedOpen": "RSS Feed åpne",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Er du sikker på at du vil fjerne samling\"{0}\"?",
   "MessageConfirmRemoveEpisode": "Er du sikker på at du vil fjerne episode \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Er du sikker på at du vil fjerne {0} episoder?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Er du sikker på at du vil fjerne forteller \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Er du sikker på at du vil fjerne spillelisten \"{0}\"?",
   "MessageConfirmRenameGenre": "Er du sikker på at du vil endre sjanger \"{0}\" til \"{1}\" for alle gjenstandene?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Er du sikker på at du vil gjenopprette sikkerhetskopien som var laget",
   "MessageRestoreBackupWarning": "gjenoppretting av sikkerhetskopi vil overskrive hele databasen under /config og omslagsbilde under /metadata/items og /metadata/authors.<br /><br />Sikkerhetskopier endrer ikke noen filer under dine bibliotekmapper. Hvis du har aktivert tjenerinstillingen for å lagre omslagsbilder og metadata i bibliotekmapper så vil ikke de filene bli tatt sikkerhetskopi eller overskrevet.<br /><br />Alle klientene som bruker din tjener vil bli fornyet automatisk.",
   "MessageSearchResultsFor": "Søk resultat for",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Tjener kunne ikke bli nådd",
   "MessageSetChaptersFromTracksDescription": "Sett kapitler ved å bruke hver lydfil som kapittel og kapitteltittel som lydfilnavnet",
   "MessageStartPlaybackAtTime": "Start avspilling av \"{0}\" ved {1}?",
diff --git a/client/strings/pl.json b/client/strings/pl.json
index b51084e94..86e292741 100644
--- a/client/strings/pl.json
+++ b/client/strings/pl.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Region",
   "LabelReleaseDate": "Data wydania",
   "LabelRemoveCover": "Remove cover",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Custom owner Email",
   "LabelRSSFeedCustomOwnerName": "Custom owner Name",
   "LabelRSSFeedOpen": "RSS Feed otwarty",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Czy na pewno chcesz usunąć kolekcję \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Czy na pewno chcesz usunąć odcinek \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Czy na pewno chcesz usunąć {0} odcinki?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Are you sure you want to remove narrator \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Are you sure you want to remove your playlist \"{0}\"?",
   "MessageConfirmRenameGenre": "Are you sure you want to rename genre \"{0}\" to \"{1}\" for all items?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Czy na pewno chcesz przywrócić kopię zapasową utworzoną w dniu",
   "MessageRestoreBackupWarning": "Przywrócenie kopii zapasowej spowoduje nadpisane bazy danych w folderze /config oraz okładke w folderze /metadata/items & /metadata/authors.<br /><br />Kopie zapasowe nie modyfikują żadnego pliku w folderach z plikami audio. Jeśli włączyłeś ustawienia serwera, aby przechowywać okładki i metadane w folderach biblioteki, to nie są one zapisywane w kopii zapasowej lub nadpisywane<br /><br />Wszyscy klienci korzystający z Twojego serwera będą automatycznie odświeżani",
   "MessageSearchResultsFor": "Wyniki wyszukiwania dla",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Nie udało się uzyskać połączenia z serwerem",
   "MessageSetChaptersFromTracksDescription": "Set chapters using each audio file as a chapter and chapter title as the audio file name",
   "MessageStartPlaybackAtTime": "Rozpoczęcie odtwarzania \"{0}\" od {1}?",
diff --git a/client/strings/ru.json b/client/strings/ru.json
index 03e7385fa..4d26c4aae 100644
--- a/client/strings/ru.json
+++ b/client/strings/ru.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Регион",
   "LabelReleaseDate": "Дата выхода",
   "LabelRemoveCover": "Удалить обложку",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Пользовательский Email владельца",
   "LabelRSSFeedCustomOwnerName": "Пользовательское Имя владельца",
   "LabelRSSFeedOpen": "Открыть RSS-канал",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Вы уверены, что хотите удалить коллекцию \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Вы уверены, что хотите удалить эпизод \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Вы уверены, что хотите удалить {0} эпизодов?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Вы уверены, что хотите удалить чтеца \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Вы уверены, что хотите удалить плейлист \"{0}\"?",
   "MessageConfirmRenameGenre": "Вы уверены, что хотите переименовать жанр \"{0}\" в \"{1}\" для всех элементов?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Вы уверены, что хотите восстановить резервную копию, созданную",
   "MessageRestoreBackupWarning": "Восстановление резервной копии перезапишет всю базу данных, расположенную в /config, и обложки изображений в /metadata/items и /metadata/authors.<br/><br/>Бэкапы не изменяют файлы в папках библиотеки. Если вы включили параметры сервера для хранения обложек и метаданных в папках библиотеки, то они не резервируются и не перезаписываются.<br/><br/>Все клиенты, использующие ваш сервер, будут автоматически обновлены.",
   "MessageSearchResultsFor": "Результаты поиска для",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Не удалось связаться с сервером",
   "MessageSetChaptersFromTracksDescription": "Установка глав с использованием каждого аудиофайла в качестве главы и заголовка главы в качестве имени аудиофайла",
   "MessageStartPlaybackAtTime": "Начать воспроизведение для \"{0}\" с {1}?",
diff --git a/client/strings/sv.json b/client/strings/sv.json
index fde0cd875..1d71fce5a 100644
--- a/client/strings/sv.json
+++ b/client/strings/sv.json
@@ -406,6 +406,7 @@
   "LabelRegion": "Region",
   "LabelReleaseDate": "Utgivningsdatum",
   "LabelRemoveCover": "Ta bort omslag",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "Anpassad ägarens e-post",
   "LabelRSSFeedCustomOwnerName": "Anpassat ägarnamn",
   "LabelRSSFeedOpen": "Öppna RSS-flöde",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "Är du säker på att du vill ta bort samlingen \"{0}\"?",
   "MessageConfirmRemoveEpisode": "Är du säker på att du vill ta bort avsnittet \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "Är du säker på att du vill ta bort {0} avsnitt?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "Är du säker på att du vill ta bort berättaren \"{0}\"?",
   "MessageConfirmRemovePlaylist": "Är du säker på att du vill ta bort din spellista \"{0}\"?",
   "MessageConfirmRenameGenre": "Är du säker på att du vill byta namn på genren \"{0}\" till \"{1}\" för alla objekt?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "Är du säker på att du vill återställa säkerhetskopian som skapades den",
   "MessageRestoreBackupWarning": "Att återställa en säkerhetskopia kommer att skriva över hela databasen som finns i /config och omslagsbilder i /metadata/items & /metadata/authors.<br /><br />Säkerhetskopior ändrar inte några filer i dina biblioteksmappar. Om du har aktiverat serverinställningar för att lagra omslagskonst och metadata i dina biblioteksmappar säkerhetskopieras eller skrivs de inte över.<br /><br />Alla klienter som använder din server kommer att uppdateras automatiskt.",
   "MessageSearchResultsFor": "Sökresultat för",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "Servern kunde inte nås",
   "MessageSetChaptersFromTracksDescription": "Ställ in kapitel med varje ljudfil som ett kapitel och kapitelrubrik som ljudfilens namn",
   "MessageStartPlaybackAtTime": "Starta uppspelning för \"{0}\" kl. {1}?",
diff --git a/client/strings/zh-cn.json b/client/strings/zh-cn.json
index edf09040b..05553c081 100644
--- a/client/strings/zh-cn.json
+++ b/client/strings/zh-cn.json
@@ -406,6 +406,7 @@
   "LabelRegion": "区域",
   "LabelReleaseDate": "发布日期",
   "LabelRemoveCover": "移除封面",
+  "LabelRowsPerPage": "Rows per page",
   "LabelRSSFeedCustomOwnerEmail": "自定义所有者电子邮件",
   "LabelRSSFeedCustomOwnerName": "自定义所有者名称",
   "LabelRSSFeedOpen": "打开 RSS 源",
@@ -571,6 +572,7 @@
   "MessageConfirmRemoveCollection": "你确定要移除收藏 \"{0}\"?",
   "MessageConfirmRemoveEpisode": "你确定要移除剧集 \"{0}\"?",
   "MessageConfirmRemoveEpisodes": "你确定要移除 {0} 剧集?",
+  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
   "MessageConfirmRemoveNarrator": "你确定要删除演播者 \"{0}\"?",
   "MessageConfirmRemovePlaylist": "你确定要移除播放列表 \"{0}\"?",
   "MessageConfirmRenameGenre": "你确定要将所有项目流派 \"{0}\" 重命名到 \"{1}\"?",
@@ -650,6 +652,7 @@
   "MessageRestoreBackupConfirm": "你确定要恢复创建的这个备份",
   "MessageRestoreBackupWarning": "恢复备份将覆盖位于 /config 的整个数据库并覆盖 /metadata/items & /metadata/authors 中的图像.<br /><br />备份不会修改媒体库文件夹中的任何文件. 如果您已启用服务器设置将封面和元数据存储在库文件夹中，则不会备份或覆盖这些内容.<br /><br />将自动刷新使用服务器的所有客户端.",
   "MessageSearchResultsFor": "搜索结果",
+  "MessageSelected": "{0} selected",
   "MessageServerCouldNotBeReached": "无法访问服务器",
   "MessageSetChaptersFromTracksDescription": "把每个音频文件设置为章节并将章节标题设置为音频文件名",
   "MessageStartPlaybackAtTime": "开始播放 \"{0}\" 在 {1}?",
@@ -747,4 +750,4 @@
   "ToastSocketFailedToConnect": "网络连接失败",
   "ToastUserDeleteFailed": "删除用户失败",
   "ToastUserDeleteSuccess": "用户已删除"
-}
+}
\ No newline at end of file
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 1c39cb8f4..9eb819230 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -56,6 +56,7 @@ module.exports = {
         '16': '4rem',
         '20': '5rem',
         '24': '6rem',
+        '26': '6.5rem',
         '32': '8rem',
         '48': '12rem',
         '64': '16rem',
diff --git a/server/controllers/SessionController.js b/server/controllers/SessionController.js
index 884f0cd69..22fcaa1c6 100644
--- a/server/controllers/SessionController.js
+++ b/server/controllers/SessionController.js
@@ -1,6 +1,6 @@
 const Logger = require('../Logger')
 const Database = require('../Database')
-const { toNumber } = require('../utils/index')
+const { toNumber, isUUID } = require('../utils/index')
 
 class SessionController {
   constructor() { }
@@ -9,35 +9,97 @@ class SessionController {
     return res.json(req.playbackSession)
   }
 
+  /**
+   * GET: /api/sessions
+   * @this import('../routers/ApiRouter')
+   * 
+   * @param {import('express').Request} req 
+   * @param {import('express').Response} res 
+   */
   async getAllWithUserData(req, res) {
     if (!req.user.isAdminOrUp) {
       Logger.error(`[SessionController] getAllWithUserData: Non-admin user requested all session data ${req.user.id}/"${req.user.username}"`)
       return res.sendStatus(404)
     }
-
-    let listeningSessions = []
-    if (req.query.user) {
-      listeningSessions = await this.getUserListeningSessionsHelper(req.query.user)
-    } else {
-      listeningSessions = await this.getAllSessionsWithUserData()
+    // Validate "user" query
+    let userId = req.query.user
+    if (userId && !isUUID(userId)) {
+      Logger.warn(`[SessionController] Invalid "user" query string "${userId}"`)
+      userId = null
+    }
+    // Validate "sort" query
+    const validSortOrders = ['displayTitle', 'duration', 'playMethod', 'startTime', 'currentTime', 'timeListening', 'updatedAt', 'createdAt']
+    let orderKey = req.query.sort || 'updatedAt'
+    if (!validSortOrders.includes(orderKey)) {
+      Logger.warn(`[SessionController] Invalid "sort" query string "${orderKey}" (Must be one of "${validSortOrders.join('|')}")`)
+      orderKey = 'updatedAt'
+    }
+    let orderDesc = req.query.desc === '1' ? 'DESC' : 'ASC'
+    // Validate "itemsPerPage" and "page" query
+    let itemsPerPage = toNumber(req.query.itemsPerPage, 10) || 10
+    if (itemsPerPage < 1) {
+      Logger.warn(`[SessionController] Invalid "itemsPerPage" query string "${itemsPerPage}"`)
+      itemsPerPage = 10
+    }
+    let page = toNumber(req.query.page, 0)
+    if (page < 0) {
+      Logger.warn(`[SessionController] Invalid "page" query string "${page}"`)
+      page = 0
     }
 
-    const itemsPerPage = toNumber(req.query.itemsPerPage, 10) || 10
-    const page = toNumber(req.query.page, 0)
+    let where = null
+    const include = [
+      {
+        model: Database.models.device
+      }
+    ]
 
-    const start = page * itemsPerPage
-    const sessions = listeningSessions.slice(start, start + itemsPerPage)
+    if (userId) {
+      where = {
+        userId
+      }
+    } else {
+      include.push({
+        model: Database.userModel,
+        attributes: ['id', 'username']
+      })
+    }
+
+    const { rows, count } = await Database.playbackSessionModel.findAndCountAll({
+      where,
+      include,
+      order: [
+        [orderKey, orderDesc]
+      ],
+      limit: itemsPerPage,
+      offset: itemsPerPage * page
+    })
+
+    // Map playback sessions to old playback sessions
+    const sessions = rows.map(session => {
+      const oldPlaybackSession = Database.playbackSessionModel.getOldPlaybackSession(session)
+      if (session.user) {
+        return {
+          ...oldPlaybackSession,
+          user: {
+            id: session.user.id,
+            username: session.user.username
+          }
+        }
+      } else {
+        return oldPlaybackSession.toJSON()
+      }
+    })
 
     const payload = {
-      total: listeningSessions.length,
-      numPages: Math.ceil(listeningSessions.length / itemsPerPage),
+      total: count,
+      numPages: Math.ceil(count / itemsPerPage),
       page,
       itemsPerPage,
       sessions
     }
-
-    if (req.query.user) {
-      payload.userFilter = req.query.user
+    if (userId) {
+      payload.userId = userId
     }
 
     res.json(payload)
@@ -92,6 +154,49 @@ class SessionController {
     res.sendStatus(200)
   }
 
+  /**
+   * POST: /api/sessions/batch/delete
+   * @this import('../routers/ApiRouter')
+   * 
+   * @typedef batchDeleteReqBody
+   * @property {string[]} sessions
+   * 
+   * @param {import('express').Request<{}, {}, batchDeleteReqBody, {}} req 
+   * @param {import('express').Response} res 
+   */
+  async batchDelete(req, res) {
+    if (!req.user.isAdminOrUp) {
+      Logger.error(`[SessionController] Non-admin user attempted to batch delete sessions "${req.user.username}"`)
+      return res.sendStatus(403)
+    }
+    // Validate session ids
+    if (!req.body.sessions?.length || !Array.isArray(req.body.sessions) || req.body.sessions.some(s => !isUUID(s))) {
+      Logger.error(`[SessionController] Invalid request body. "sessions" array is required`, req.body)
+      return res.status(400).send('Invalid request body. "sessions" array of session id strings is required.')
+    }
+
+    // Check if any of these sessions are open and close it
+    for (const sessionId of req.body.sessions) {
+      const openSession = this.playbackSessionManager.getSession(sessionId)
+      if (openSession) {
+        await this.playbackSessionManager.removeSession(sessionId)
+      }
+    }
+
+    try {
+      const sessionsRemoved = await Database.playbackSessionModel.destroy({
+        where: {
+          id: req.body.sessions
+        }
+      })
+      Logger.info(`[SessionController] ${sessionsRemoved} playback sessions removed by "${req.user.username}"`)
+      res.sendStatus(200)
+    } catch (error) {
+      Logger.error(`[SessionController] Failed to remove playback sessions`, error)
+      res.status(500).send('Failed to remove sessions')
+    }
+  }
+
   // POST: api/session/local
   syncLocal(req, res) {
     this.playbackSessionManager.syncLocalSessionRequest(req, res)
diff --git a/server/routers/ApiRouter.js b/server/routers/ApiRouter.js
index f24181805..42e1d0401 100644
--- a/server/routers/ApiRouter.js
+++ b/server/routers/ApiRouter.js
@@ -221,6 +221,7 @@ class ApiRouter {
     this.router.get('/sessions', SessionController.getAllWithUserData.bind(this))
     this.router.delete('/sessions/:id', SessionController.middleware.bind(this), SessionController.delete.bind(this))
     this.router.get('/sessions/open', SessionController.getOpenSessions.bind(this))
+    this.router.post('/sessions/batch/delete', SessionController.batchDelete.bind(this))
     this.router.post('/session/local', SessionController.syncLocal.bind(this))
     this.router.post('/session/local-all', SessionController.syncLocalSessions.bind(this))
     // TODO: Update these endpoints because they are only for open playback sessions
@@ -491,18 +492,6 @@ class ApiRouter {
     return userSessions.sort((a, b) => b.updatedAt - a.updatedAt)
   }
 
-  async getAllSessionsWithUserData() {
-    const sessions = await Database.getPlaybackSessions()
-    sessions.sort((a, b) => b.updatedAt - a.updatedAt)
-    const minifiedUserObjects = await Database.userModel.getMinifiedUserObjects()
-    return sessions.map(se => {
-      return {
-        ...se,
-        user: minifiedUserObjects.find(u => u.id === se.userId) || null
-      }
-    })
-  }
-
   async getUserListeningStatsHelpers(userId) {
     const today = date.format(new Date(), 'YYYY-MM-DD')
 
diff --git a/server/utils/index.js b/server/utils/index.js
index 29a65885d..f75572ba0 100644
--- a/server/utils/index.js
+++ b/server/utils/index.js
@@ -1,4 +1,5 @@
 const Path = require('path')
+const uuid = require('uuid')
 const Logger = require('../Logger')
 const { parseString } = require("xml2js")
 const areEquivalent = require('./areEquivalent')
@@ -220,4 +221,15 @@ module.exports.validateUrl = (rawUrl) => {
     Logger.error(`Invalid URL "${rawUrl}"`, error)
     return null
   }
+}
+
+/**
+ * Check if a string is a valid UUID
+ * 
+ * @param {string} str 
+ * @returns {boolean}
+ */
+module.exports.isUUID = (str) => {
+  if (!str || typeof str !== 'string') return false
+  return uuid.validate(str)
 }
\ No newline at end of file

From 24a587b944bce4111817c05336d751e2a789cb93 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 21 Dec 2023 14:29:36 -0600
Subject: [PATCH 15/24] Update:Remove playback sessions that are 3s or less on
 startup

---
 server/Database.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/server/Database.js b/server/Database.js
index 8a3574818..fd606bacb 100644
--- a/server/Database.js
+++ b/server/Database.js
@@ -1,5 +1,5 @@
 const Path = require('path')
-const { Sequelize } = require('sequelize')
+const { Sequelize, Op } = require('sequelize')
 
 const packageJson = require('../package.json')
 const fs = require('./libs/fsExtra')
@@ -698,6 +698,7 @@ class Database {
    * Clean invalid records in database
    * Series should have atleast one Book
    * Book and Podcast must have an associated LibraryItem
+   * Remove playback sessions that are 3 seconds or less
    */
   async cleanDatabase() {
     // Remove invalid Podcast records
@@ -738,6 +739,18 @@ class Database {
       Logger.warn(`Found series "${series.name}" with no books - removing it`)
       await series.destroy()
     }
+
+    // Remove playback sessions that were 3 seconds or less
+    const badSessionsRemoved = await this.playbackSessionModel.destroy({
+      where: {
+        timeListening: {
+          [Op.lte]: 3
+        }
+      }
+    })
+    if (badSessionsRemoved > 0) {
+      Logger.warn(`Removed ${badSessionsRemoved} sessions that were 3 seconds or less`)
+    }
   }
 }
 

From 68d36522b1bfa6da591d818bc99725b26b95dd0c Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 21 Dec 2023 14:36:51 -0600
Subject: [PATCH 16/24] Update:Listening sessions table UI for mobile

---
 client/pages/config/sessions.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client/pages/config/sessions.vue b/client/pages/config/sessions.vue
index fb6e4c307..d90d849db 100644
--- a/client/pages/config/sessions.vue
+++ b/client/pages/config/sessions.vue
@@ -18,7 +18,7 @@
                 <ui-btn small color="error" :loading="deletingSessions" @click.stop="removeSessionsClick">{{ $strings.ButtonRemove }}</ui-btn>
               </div>
             </th>
-            <th v-if="!numSelected" class="w-48 min-w-48 text-left group cursor-pointer" @click.stop="sortColumn('displayTitle')">
+            <th v-if="!numSelected" class="flex-grow sm:flex-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-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
               </div>
@@ -30,14 +30,14 @@
               </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-32 min-w-32 group cursor-pointer" @click.stop="sortColumn('timeListening')">
+            <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-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                {{ $strings.LabelTimeListened }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('timeListening') }" class="material-icons 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-icons text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+                {{ $strings.LabelLastTime }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('currentTime') }" class="material-icons text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
               </div>
             </th>
             <th v-if="!numSelected" class="flex-grow hidden sm:table-cell cursor-pointer group" @click.stop="sortColumn('updatedAt')">
@@ -53,7 +53,7 @@
               <!-- 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 w-48 max-w-48">
+            <td class="py-1 flex-grow sm:flex-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>
@@ -67,7 +67,7 @@
             <td class="hidden sm:table-cell w-32 min-w-32">
               <p class="text-xs" v-html="getDeviceInfoString(session.deviceInfo)" />
             </td>
-            <td class="text-center w-32 min-w-32">
+            <td class="text-center w-24 min-w-24 sm:w-32 sm:min-w-32">
               <p class="text-xs font-mono">{{ $elapsedPretty(session.timeListening) }}</p>
             </td>
             <td class="text-center hover:underline w-24 min-w-24" @click.stop="clickCurrentTime(session)">
@@ -83,7 +83,7 @@
         <!-- table bottom options -->
         <div class="flex items-center my-2">
           <div class="flex-grow" />
-          <div class="inline-flex items-center">
+          <div class="hidden sm:inline-flex items-center">
             <p class="text-sm">{{ $strings.LabelRowsPerPage }}</p>
             <ui-dropdown v-model="itemsPerPage" :items="itemsPerPageOptions" small class="w-24 mx-2" @input="updatedItemsPerPage" />
           </div>

From 2738402aacbe43f21061667b417da35ceb8d5c10 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Fri, 22 Dec 2023 17:01:07 -0600
Subject: [PATCH 17/24] Add:Year in review card for server stats #2373

---
 client/components/stats/YearInReview.vue      |  89 ++++----
 .../components/stats/YearInReviewServer.vue   | 205 ++++++++++++++++++
 client/pages/config/stats.vue                 |  11 +-
 server/controllers/MeController.js            |   3 +-
 server/controllers/MiscController.js          |  21 ++
 server/routers/ApiRouter.js                   |   3 +-
 server/utils/queries/adminStats.js            | 118 ++++++++++
 server/utils/queries/userStats.js             |  12 +-
 8 files changed, 414 insertions(+), 48 deletions(-)
 create mode 100644 client/components/stats/YearInReviewServer.vue
 create mode 100644 server/utils/queries/adminStats.js

diff --git a/client/components/stats/YearInReview.vue b/client/components/stats/YearInReview.vue
index 74c57065a..104392b4e 100644
--- a/client/components/stats/YearInReview.vue
+++ b/client/components/stats/YearInReview.vue
@@ -24,12 +24,15 @@ export default {
       if (!this.yearStats) return
 
       const canvas = document.createElement('canvas')
-      canvas.width = 400
-      canvas.height = 400
+      canvas.width = 800
+      canvas.height = 800
       const ctx = canvas.getContext('2d')
 
       const createRoundedRect = (x, y, w, h) => {
-        ctx.fillStyle = '#37383866'
+        const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
+        grd1.addColorStop(0, '#44444466')
+        grd1.addColorStop(1, '#ffffff22')
+        ctx.fillStyle = grd1
         ctx.strokeStyle = '#C0C0C0aa'
         ctx.beginPath()
         ctx.roundRect(x, y, w, h, [20])
@@ -72,8 +75,13 @@ export default {
       if (this.yearStats.booksWithCovers.length) {
         let index = 0
         ctx.globalAlpha = 0.25
-        for (let x = 0; x < 4; x++) {
-          for (let y = 0; y < 4; y++) {
+        ctx.save()
+        ctx.translate(canvas.width / 2, canvas.height / 2)
+        ctx.rotate((-Math.PI / 180) * 25)
+        ctx.translate(-canvas.width / 2, -canvas.height / 2)
+        ctx.translate(-130, -120)
+        for (let x = 0; x < 5; x++) {
+          for (let y = 0; y < 5; y++) {
             const coverIndex = index % this.yearStats.booksWithCovers.length
             let libraryItemId = this.yearStats.booksWithCovers[coverIndex]
             index++
@@ -82,7 +90,13 @@ export default {
               const img = new Image()
               img.crossOrigin = 'anonymous'
               img.addEventListener('load', () => {
-                ctx.drawImage(img, 100 * x, 100 * y, 100, 100)
+                let sw = img.width
+                if (img.width > img.height) {
+                  sw = img.height
+                }
+                let sx = -(sw - img.width) / 2
+                let sy = -(sw - img.height) / 2
+                ctx.drawImage(img, sx, sy, sw, sw, 215 * x, 215 * y, 215, 215)
                 resolve()
               })
               img.addEventListener('error', () => {
@@ -92,13 +106,14 @@ export default {
             })
           }
         }
+        ctx.restore()
       }
 
       ctx.globalAlpha = 1
       ctx.textBaseline = 'middle'
 
       // Create gradient
-      const grd1 = ctx.createLinearGradient(0, 0, 400, 400)
+      const grd1 = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
       grd1.addColorStop(0, '#000000aa')
       grd1.addColorStop(1, '#cd9d49aa')
       ctx.fillStyle = grd1
@@ -107,60 +122,60 @@ export default {
       // Top Abs icon
       let tanColor = '#ffdb70'
       ctx.fillStyle = tanColor
-      ctx.font = '32px absicons'
-      ctx.fillText('\ue900', 15, 32)
+      ctx.font = '42px absicons'
+      ctx.fillText('\ue900', 15, 36)
 
       // Top text
-      addText('audiobookshelf', '22px', 'normal', tanColor, '0px', 55, 22)
-      addText(`${this.year} YEAR IN REVIEW`, '14px', 'bold', 'white', '1px', 55, 44)
+      addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28)
+      addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51)
 
       // Top left box
-      createRoundedRect(10, 65, 185, 80)
-      addText(this.yearStats.numBooksFinished, '32px', 'bold', 'white', '0px', 63, 98)
-      addText('books finished', '14px', 'normal', tanColor, '0px', 63, 120)
+      createRoundedRect(50, 100, 340, 160)
+      addText(this.yearStats.numBooksFinished, '64px', 'bold', 'white', '0px', 160, 165)
+      addText('books finished', '28px', 'normal', tanColor, '0px', 160, 210)
       const readIconPath = new Path2D()
-      readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 1.2, d: 1.2, e: 26, f: 90 })
+      readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 2, d: 2, e: 100, f: 160 })
       ctx.fillStyle = '#ffffff'
       ctx.fill(readIconPath)
 
       // Box top right
-      createRoundedRect(205, 65, 185, 80)
-      addText(this.$elapsedPrettyExtended(this.yearStats.totalListeningTime, true, false), '20px', 'bold', 'white', '0px', 257, 96)
-      addText('spent listening', '14px', 'normal', tanColor, '0px', 257, 117)
-      addIcon('watch_later', 'white', '32px', 218, 105)
+      createRoundedRect(410, 100, 340, 160)
+      addText(this.$elapsedPrettyExtended(this.yearStats.totalListeningTime, true, false), '40px', 'bold', 'white', '0px', 500, 165)
+      addText('spent listening', '28px', 'normal', tanColor, '0.5px', 500, 205)
+      addIcon('watch_later', 'white', '52px', 440, 180)
 
       // Box bottom left
-      createRoundedRect(10, 155, 185, 80)
-      addText(this.yearStats.totalListeningSessions, '32px', 'bold', 'white', '0px', 65, 188)
-      addText('sessions', '14px', 'normal', tanColor, '1px', 65, 210)
-      addIcon('headphones', 'white', '32px', 25, 195)
+      createRoundedRect(50, 280, 340, 160)
+      addText(this.yearStats.totalListeningSessions, '64px', 'bold', 'white', '0px', 160, 345)
+      addText('sessions', '28px', 'normal', tanColor, '1px', 160, 390)
+      addIcon('headphones', 'white', '52px', 95, 360)
 
       // Box bottom right
-      createRoundedRect(205, 155, 185, 80)
-      addText(this.yearStats.numBooksListened, '32px', 'bold', 'white', '0px', 258, 188)
-      addText('books listened to', '14px', 'normal', tanColor, '0.65px', 258, 210)
-      addIcon('local_library', 'white', '32px', 220, 195)
+      createRoundedRect(410, 280, 340, 160)
+      addText(this.yearStats.numBooksListened, '64px', 'bold', 'white', '0px', 500, 345)
+      addText('books listened to', '28px', 'normal', tanColor, '0.5px', 500, 390)
+      addIcon('local_library', 'white', '52px', 440, 360)
 
       // Text stats
       const topNarrator = this.yearStats.mostListenedNarrator
       if (topNarrator) {
-        addText('TOP NARRATOR', '12px', 'normal', tanColor, '1px', 20, 260)
-        addText(topNarrator.name, '18px', 'bolder', 'white', '0px', 20, 282, 180)
-        addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '14px', 'lighter', 'white', '1px', 20, 302)
+        addText('TOP NARRATOR', '24px', 'normal', tanColor, '1px', 70, 520)
+        addText(topNarrator.name, '36px', 'bolder', 'white', '0px', 70, 564, 330)
+        addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '24px', 'lighter', 'white', '1px', 70, 599)
       }
 
       const topGenre = this.yearStats.topGenres[0]
       if (topGenre) {
-        addText('TOP GENRE', '12px', 'normal', tanColor, '1px', 215, 260)
-        addText(topGenre.genre, '18px', 'bolder', 'white', '0px', 215, 282, 180)
-        addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '14px', 'lighter', 'white', '1px', 215, 302)
+        addText('TOP GENRE', '24px', 'normal', tanColor, '1px', 430, 520)
+        addText(topGenre.genre, '36px', 'bolder', 'white', '0px', 430, 564, 330)
+        addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '24px', 'lighter', 'white', '1px', 430, 599)
       }
 
       const topAuthor = this.yearStats.topAuthors[0]
       if (topAuthor) {
-        addText('TOP AUTHOR', '12px', 'normal', tanColor, '1px', 20, 335)
-        addText(topAuthor.name, '18px', 'bolder', 'white', '0px', 20, 357, 180)
-        addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '14px', 'lighter', 'white', '1px', 20, 377)
+        addText('TOP AUTHOR', '24px', 'normal', tanColor, '1px', 70, 670)
+        addText(topAuthor.name, '36px', 'bolder', 'white', '0px', 70, 714, 330)
+        addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '24px', 'lighter', 'white', '1px', 70, 749)
       }
 
       this.dataUrl = canvas.toDataURL('png')
@@ -173,7 +188,7 @@ export default {
       let year = new Date().getFullYear()
       if (new Date().getMonth() < 11) year--
       this.year = year
-      this.yearStats = await this.$axios.$get(`/api/me/year/${year}/stats`).catch((err) => {
+      this.yearStats = await this.$axios.$get(`/api/me/stats/year/${year}`).catch((err) => {
         console.error('Failed to load stats for year', err)
         this.$toast.error('Failed to load year stats')
         return null
diff --git a/client/components/stats/YearInReviewServer.vue b/client/components/stats/YearInReviewServer.vue
new file mode 100644
index 000000000..0d1fa8aa2
--- /dev/null
+++ b/client/components/stats/YearInReviewServer.vue
@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <div v-if="processing" class="w-[400px] h-[400px] flex items-center justify-center">
+      <widgets-loading-spinner />
+    </div>
+    <img v-else-if="dataUrl" :src="dataUrl" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean
+  },
+  data() {
+    return {
+      dataUrl: null,
+      year: null,
+      yearStats: null
+    }
+  },
+  methods: {
+    async initCanvas() {
+      if (!this.yearStats) return
+
+      const canvas = document.createElement('canvas')
+      canvas.width = 800
+      canvas.height = 800
+      const ctx = canvas.getContext('2d')
+
+      const createRoundedRect = (x, y, w, h) => {
+        const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
+        grd1.addColorStop(0, '#44444466')
+        grd1.addColorStop(1, '#ffffff22')
+        ctx.fillStyle = grd1
+        ctx.strokeStyle = '#C0C0C0aa'
+        ctx.beginPath()
+        ctx.roundRect(x, y, w, h, [20])
+        ctx.fill()
+        ctx.stroke()
+      }
+
+      const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y, maxWidth = 0) => {
+        ctx.fillStyle = color
+        ctx.font = `${fontWeight} ${fontSize} Source Sans Pro`
+        ctx.letterSpacing = letterSpacing
+
+        // If maxWidth is specified then continue to remove chars until under maxWidth and add ellipsis
+        if (maxWidth) {
+          let txtWidth = ctx.measureText(text).width
+          while (txtWidth > maxWidth) {
+            console.warn(`Text "${text}" is greater than max width ${maxWidth} (width:${txtWidth})`)
+            if (text.endsWith('...')) text = text.slice(0, -4) // Repeated checks remove 1 char at a time
+            else text = text.slice(0, -3) // First check remove last 3 chars
+            text += '...'
+            txtWidth = ctx.measureText(text).width
+            console.log(`Checking text "${text}" (width:${txtWidth})`)
+          }
+        }
+
+        ctx.fillText(text, x, y)
+      }
+
+      const addIcon = (icon, color, fontSize, x, y) => {
+        ctx.fillStyle = color
+        ctx.font = `${fontSize} Material Icons Outlined`
+        ctx.fillText(icon, x, y)
+      }
+
+      // Bg color
+      ctx.fillStyle = '#232323'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Cover image tiles
+      let imgsToAdd = {}
+
+      if (this.yearStats.booksAddedWithCovers.length) {
+        let index = 0
+        ctx.globalAlpha = 0.25
+        ctx.save()
+        ctx.translate(canvas.width / 2, canvas.height / 2)
+        ctx.rotate((-Math.PI / 180) * 25)
+        ctx.translate(-canvas.width / 2, -canvas.height / 2)
+        ctx.translate(-130, -120)
+        for (let x = 0; x < 5; x++) {
+          for (let y = 0; y < 5; y++) {
+            const coverIndex = index % this.yearStats.booksAddedWithCovers.length
+            let libraryItemId = this.yearStats.booksAddedWithCovers[coverIndex]
+            index++
+
+            await new Promise((resolve) => {
+              const img = new Image()
+              img.crossOrigin = 'anonymous'
+              img.addEventListener('load', () => {
+                let sw = img.width
+                if (img.width > img.height) {
+                  sw = img.height
+                }
+                let sx = -(sw - img.width) / 2
+                let sy = -(sw - img.height) / 2
+                ctx.drawImage(img, sx, sy, sw, sw, 215 * x, 215 * y, 215, 215)
+                if (!imgsToAdd[libraryItemId]) {
+                  imgsToAdd[libraryItemId] = {
+                    img,
+                    sx,
+                    sy,
+                    sw
+                  }
+                }
+                resolve()
+              })
+              img.addEventListener('error', () => {
+                resolve()
+              })
+              img.src = this.$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId)
+            })
+          }
+        }
+        ctx.restore()
+      }
+
+      ctx.globalAlpha = 1
+      ctx.textBaseline = 'middle'
+
+      // Create gradient
+      const grd1 = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
+      grd1.addColorStop(0, '#000000aa')
+      grd1.addColorStop(1, '#cd9d49aa')
+      ctx.fillStyle = grd1
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Top Abs icon
+      let tanColor = '#ffdb70'
+      ctx.fillStyle = tanColor
+      ctx.font = '42px absicons'
+      ctx.fillText('\ue900', 15, 36)
+
+      // Top text
+      addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28)
+      addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51)
+
+      // Top left box
+      createRoundedRect(40, 100, 230, 100)
+      ctx.textAlign = 'center'
+      addText(this.yearStats.numBooksAdded, '48px', 'bold', 'white', '0px', 155, 140)
+      addText('books added', '18px', 'normal', tanColor, '0px', 155, 170)
+
+      // Box top right
+      createRoundedRect(285, 100, 230, 100)
+      addText(this.yearStats.numAuthorsAdded, '48px', 'bold', 'white', '0px', 400, 140)
+      addText('authors added', '18px', 'normal', tanColor, '0px', 400, 170)
+
+      // Box bottom left
+      createRoundedRect(530, 100, 230, 100)
+      addText(this.yearStats.numListeningSessions, '48px', 'bold', 'white', '0px', 645, 140)
+      addText('sessions', '18px', 'normal', tanColor, '1px', 645, 170)
+
+      // Text stats
+      if (this.yearStats.totalBooksAddedSize) {
+        addText('Your book collection grew to...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 260)
+        addText(this.$bytesPretty(this.yearStats.totalBooksSize), '36px', 'bolder', 'white', '0px', canvas.width / 2, 300)
+        addText('+' + this.$bytesPretty(this.yearStats.totalBooksAddedSize), '20px', 'lighter', 'white', '0px', canvas.width / 2, 330)
+      }
+
+      if (this.yearStats.totalBooksAddedDuration) {
+        addText('With a total duration of...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 400)
+        addText(this.$elapsedPrettyExtended(this.yearStats.totalBooksDuration, true, false), '36px', 'bolder', 'white', '0px', canvas.width / 2, 440)
+        addText('+' + this.$elapsedPrettyExtended(this.yearStats.totalBooksAddedDuration, true, false), '20px', 'lighter', 'white', '0px', canvas.width / 2, 470)
+      }
+
+      // Bottom images
+      imgsToAdd = Object.values(imgsToAdd)
+      if (imgsToAdd.length >= 5) {
+        addText('Some additions include...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 540)
+
+        for (let i = 0; i < 5; i++) {
+          let imgToAdd = imgsToAdd[i]
+          ctx.drawImage(imgToAdd.img, imgToAdd.sx, imgToAdd.sy, imgToAdd.sw, imgToAdd.sw, 40 + 145 * i, 580, 140, 140)
+        }
+      }
+
+      this.dataUrl = canvas.toDataURL('png')
+    },
+    refresh() {
+      this.init()
+    },
+    async init() {
+      this.$emit('update:processing', true)
+      let year = new Date().getFullYear()
+      if (new Date().getMonth() < 11) year--
+      this.year = year
+      this.yearStats = await this.$axios.$get(`/api/stats/year/${year}`).catch((err) => {
+        console.error('Failed to load stats for year', err)
+        this.$toast.error('Failed to load year stats')
+        return null
+      })
+      await this.initCanvas()
+      this.$emit('update:processing', false)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/client/pages/config/stats.vue b/client/pages/config/stats.vue
index b527ea38a..96581714d 100644
--- a/client/pages/config/stats.vue
+++ b/client/pages/config/stats.vue
@@ -63,11 +63,13 @@
       </div>
       <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" />
 
-      <ui-btn small :loading="processingYearInReview" @click.stop="clickShowYearInReview">Year in Review</ui-btn>
+      <ui-btn small :loading="processingYearInReview || processingYearInReviewAlt" @click.stop="clickShowYearInReview">{{ showYearInReview ? 'Refresh Year in Review' : 'Year in Review' }}</ui-btn>
       <div v-if="showYearInReview">
         <div class="w-full h-px bg-slate-200/10 my-4" />
 
         <stats-year-in-review ref="yearInReview" :processing.sync="processingYearInReview" />
+
+        <stats-year-in-review-server v-if="isAdminOrUp" ref="yearInReviewAlt" :processing.sync="processingYearInReviewAlt" />
       </div>
     </app-settings-content>
   </div>
@@ -80,7 +82,8 @@ export default {
       listeningStats: null,
       windowWidth: 0,
       showYearInReview: false,
-      processingYearInReview: false
+      processingYearInReview: false,
+      processingYearInReviewAlt: false
     }
   },
   watch: {
@@ -126,6 +129,10 @@ export default {
     clickShowYearInReview() {
       if (this.showYearInReview) {
         this.$refs.yearInReview.refresh()
+
+        if (this.$refs.yearInReviewAlt) {
+          this.$refs.yearInReviewAlt.refresh()
+        }
       } else {
         this.showYearInReview = true
       }
diff --git a/server/controllers/MeController.js b/server/controllers/MeController.js
index 42387b596..8fa5c6bc3 100644
--- a/server/controllers/MeController.js
+++ b/server/controllers/MeController.js
@@ -336,6 +336,7 @@ class MeController {
   }
 
   /**
+   * GET: /api/stats/year/:year
    * 
    * @param {import('express').Request} req 
    * @param {import('express').Response} res 
@@ -346,7 +347,7 @@ class MeController {
       Logger.error(`[MeController] Invalid year "${year}"`)
       return res.status(400).send('Invalid year')
     }
-    const data = await userStats.getStatsForYear(req.user.id, year)
+    const data = await userStats.getStatsForYear(req.user, year)
     res.json(data)
   }
 }
diff --git a/server/controllers/MiscController.js b/server/controllers/MiscController.js
index db4110e09..c2272ee66 100644
--- a/server/controllers/MiscController.js
+++ b/server/controllers/MiscController.js
@@ -11,6 +11,7 @@ const { isObject, getTitleIgnorePrefix } = require('../utils/index')
 const { sanitizeFilename } = require('../utils/fileUtils')
 
 const TaskManager = require('../managers/TaskManager')
+const adminStats = require('../utils/queries/adminStats')
 
 //
 // This is a controller for routes that don't have a home yet :(
@@ -696,5 +697,25 @@ class MiscController {
       serverSettings: Database.serverSettings.toJSONForBrowser()
     })
   }
+
+  /**
+   * GET: /api/me/stats/year/:year
+   * 
+   * @param {import('express').Request} req 
+   * @param {import('express').Response} res 
+   */
+  async getAdminStatsForYear(req, res) {
+    if (!req.user.isAdminOrUp) {
+      Logger.error(`[MiscController] Non-admin user "${req.user.username}" attempted to get admin stats for year`)
+      return res.sendStatus(403)
+    }
+    const year = Number(req.params.year)
+    if (isNaN(year) || year < 2000 || year > 9999) {
+      Logger.error(`[MiscController] Invalid year "${year}"`)
+      return res.status(400).send('Invalid year')
+    }
+    const stats = await adminStats.getStatsForYear(year)
+    res.json(stats)
+  }
 }
 module.exports = new MiscController()
diff --git a/server/routers/ApiRouter.js b/server/routers/ApiRouter.js
index 42e1d0401..3edce256f 100644
--- a/server/routers/ApiRouter.js
+++ b/server/routers/ApiRouter.js
@@ -180,7 +180,7 @@ class ApiRouter {
     this.router.get('/me/items-in-progress', MeController.getAllLibraryItemsInProgress.bind(this))
     this.router.get('/me/series/:id/remove-from-continue-listening', MeController.removeSeriesFromContinueListening.bind(this))
     this.router.get('/me/series/:id/readd-to-continue-listening', MeController.readdSeriesFromContinueListening.bind(this))
-    this.router.get('/me/year/:year/stats', MeController.getStatsForYear.bind(this))
+    this.router.get('/me/stats/year/:year', MeController.getStatsForYear.bind(this))
 
     //
     // Backup Routes
@@ -317,6 +317,7 @@ class ApiRouter {
     this.router.get('/auth-settings', MiscController.getAuthSettings.bind(this))
     this.router.patch('/auth-settings', MiscController.updateAuthSettings.bind(this))
     this.router.post('/watcher/update', MiscController.updateWatchedPath.bind(this))
+    this.router.get('/stats/year/:year', MiscController.getAdminStatsForYear.bind(this))
   }
 
   async getDirectories(dir, relpath, excludedDirs, level = 0) {
diff --git a/server/utils/queries/adminStats.js b/server/utils/queries/adminStats.js
new file mode 100644
index 000000000..66a31e8de
--- /dev/null
+++ b/server/utils/queries/adminStats.js
@@ -0,0 +1,118 @@
+const Sequelize = require('sequelize')
+const Database = require('../../Database')
+const PlaybackSession = require('../../models/PlaybackSession')
+const fsExtra = require('../../libs/fsExtra')
+
+module.exports = {
+  /**
+   * 
+   * @param {number} year YYYY
+   * @returns {Promise<PlaybackSession[]>}
+   */
+  async getListeningSessionsForYear(year) {
+    const sessions = await Database.playbackSessionModel.findAll({
+      where: {
+        createdAt: {
+          [Sequelize.Op.gte]: `${year}-01-01`,
+          [Sequelize.Op.lt]: `${year + 1}-01-01`
+        }
+      }
+    })
+    return sessions
+  },
+
+  /**
+   * 
+   * @param {number} year YYYY
+   * @returns {Promise<number>}
+   */
+  async getNumAuthorsAddedForYear(year) {
+    const count = await Database.authorModel.count({
+      where: {
+        createdAt: {
+          [Sequelize.Op.gte]: `${year}-01-01`,
+          [Sequelize.Op.lt]: `${year + 1}-01-01`
+        }
+      }
+    })
+    return count
+  },
+
+  /**
+   * 
+   * @param {number} year YYYY
+   * @returns {Promise<import('../../models/Book')[]>}
+   */
+  async getBooksAddedForYear(year) {
+    const books = await Database.bookModel.findAll({
+      attributes: ['id', 'title', 'coverPath', 'duration', 'createdAt'],
+      where: {
+        createdAt: {
+          [Sequelize.Op.gte]: `${year}-01-01`,
+          [Sequelize.Op.lt]: `${year + 1}-01-01`
+        }
+      },
+      include: {
+        model: Database.libraryItemModel,
+        attributes: ['id', 'mediaId', 'mediaType', 'size'],
+        required: true
+      },
+      order: Database.sequelize.random()
+    })
+    return books
+  },
+
+  /**
+   * 
+   * @param {number} year YYYY
+   */
+  async getStatsForYear(year) {
+    const booksAdded = await this.getBooksAddedForYear(year)
+
+    let totalBooksAddedSize = 0
+    let totalBooksAddedDuration = 0
+    const booksWithCovers = []
+
+    for (const book of booksAdded) {
+      // Grab first 25 that have a cover
+      if (book.coverPath && !booksWithCovers.includes(book.libraryItem.id) && booksWithCovers.length < 25 && await fsExtra.pathExists(book.coverPath)) {
+        booksWithCovers.push(book.libraryItem.id)
+      }
+      if (book.duration && !isNaN(book.duration)) {
+        totalBooksAddedDuration += book.duration
+      }
+      if (book.libraryItem.size && !isNaN(book.libraryItem.size)) {
+        totalBooksAddedSize += book.libraryItem.size
+      }
+    }
+
+    const numAuthorsAdded = await this.getNumAuthorsAddedForYear(year)
+
+    const listeningSessions = await this.getListeningSessionsForYear(year)
+    let totalListeningTime = 0
+    for (const listeningSession of listeningSessions) {
+      totalListeningTime += (listeningSession.timeListening || 0)
+    }
+
+    // Stats for total books, size and duration for everything added this year or earlier
+    const [totalStatResultsRow] = await Database.sequelize.query(`SELECT SUM(li.size) AS totalSize, SUM(b.duration) AS totalDuration, COUNT(*) AS totalItems FROM libraryItems li, books b WHERE b.id = li.mediaId AND li.mediaType = 'book' AND li.createdAt < ":nextYear-01-01";`, {
+      replacements: {
+        nextYear: year + 1
+      }
+    })
+    const totalStatResults = totalStatResultsRow[0]
+
+    return {
+      numListeningSessions: listeningSessions.length,
+      numBooksAdded: booksAdded.length,
+      numAuthorsAdded,
+      totalBooksAddedSize,
+      totalBooksAddedDuration: Math.round(totalBooksAddedDuration),
+      booksAddedWithCovers: booksWithCovers,
+      totalBooksSize: totalStatResults?.totalSize || 0,
+      totalBooksDuration: totalStatResults?.totalDuration || 0,
+      totalListeningTime,
+      numBooks: totalStatResults?.totalItems || 0
+    }
+  }
+}
diff --git a/server/utils/queries/userStats.js b/server/utils/queries/userStats.js
index f9b9684ef..0f9977894 100644
--- a/server/utils/queries/userStats.js
+++ b/server/utils/queries/userStats.js
@@ -18,9 +18,6 @@ module.exports = {
         createdAt: {
           [Sequelize.Op.gte]: `${year}-01-01`,
           [Sequelize.Op.lt]: `${year + 1}-01-01`
-        },
-        timeListening: {
-          [Sequelize.Op.gt]: 5
         }
       },
       include: {
@@ -66,10 +63,11 @@ module.exports = {
   },
 
   /**
-   * @param {string} userId
+   * @param {import('../../objects/user/User')} user
    * @param {number} year YYYY
    */
-  async getStatsForYear(userId, year) {
+  async getStatsForYear(user, year) {
+    const userId = user.id
     const listeningSessions = await this.getUserListeningSessionsForYear(userId, year)
 
     let totalBookListeningTime = 0
@@ -84,8 +82,8 @@ module.exports = {
     const booksWithCovers = []
 
     for (const ls of listeningSessions) {
-      // Grab first 16 that have a cover
-      if (ls.mediaItem?.coverPath && !booksWithCovers.includes(ls.mediaItem.libraryItem.id) && booksWithCovers.length < 16 && await fsExtra.pathExists(ls.mediaItem.coverPath)) {
+      // Grab first 25 that have a cover
+      if (ls.mediaItem?.coverPath && !booksWithCovers.includes(ls.mediaItem.libraryItem.id) && booksWithCovers.length < 25 && await fsExtra.pathExists(ls.mediaItem.coverPath)) {
         booksWithCovers.push(ls.mediaItem.libraryItem.id)
       }
 

From 47bf9f7836ec04e9ebb4a05735b5611d0ac9859e Mon Sep 17 00:00:00 2001
From: JBlond <leet31337@web.de>
Date: Sat, 23 Dec 2023 14:42:56 +0100
Subject: [PATCH 18/24] Follow up Translations for
 76119445a302f0c1109bc4fdb44100f60be7107e

* Update:Listening sessions table for multi-select, sorting and rows per page
- Updated get all sessions API endpoint to include sorting
- Added sessions API endpoint for batch deleting
---
 client/strings/de.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/strings/de.json b/client/strings/de.json
index 8cf54cbec..20da77c19 100644
--- a/client/strings/de.json
+++ b/client/strings/de.json
@@ -406,7 +406,7 @@
   "LabelRegion": "Region",
   "LabelReleaseDate": "Veröffentlichungsdatum",
   "LabelRemoveCover": "Lösche Titelbild",
-  "LabelRowsPerPage": "Rows per page",
+  "LabelRowsPerPage": "Zeilen pro Seite",
   "LabelRSSFeedCustomOwnerEmail": "Benutzerdefinierte Eigentümer-E-Mail",
   "LabelRSSFeedCustomOwnerName": "Benutzerdefinierter Name des Eigentümers",
   "LabelRSSFeedOpen": "RSS Feed Offen",
@@ -572,7 +572,7 @@
   "MessageConfirmRemoveCollection": "Sammlung \"{0}\" wird gelöscht! Sind Sie sicher?",
   "MessageConfirmRemoveEpisode": "Episode \"{0}\" wird geloscht! Sind Sie sicher?",
   "MessageConfirmRemoveEpisodes": "{0} Episoden werden gelöscht! Sind Sie sicher?",
-  "MessageConfirmRemoveListeningSessions": "Are you sure you want to remove {0} listening sessions?",
+  "MessageConfirmRemoveListeningSessions": "Sind Sie sicher, dass sie {0} Hörsitzungen enfernen möchten?",
   "MessageConfirmRemoveNarrator": "Erzähler \"{0}\" wird gelöscht! Sind Sie sicher?",
   "MessageConfirmRemovePlaylist": "Wiedergabeliste \"{0}\" wird entfernt! Sind Sie sicher?",
   "MessageConfirmRenameGenre": "Kategorie \"{0}\" in \"{1}\" für alle Hörbücher/Podcasts werden umbenannt! Sind Sie sicher?",
@@ -652,7 +652,7 @@
   "MessageRestoreBackupConfirm": "Sind Sie sicher, dass Sie die Sicherung wiederherstellen wollen, welche am",
   "MessageRestoreBackupWarning": "Bei der Wiederherstellung einer Sicherung wird die gesamte Datenbank unter /config und die Titelbilder in /metadata/items und /metadata/authors überschrieben.<br /><br />Bei der Sicherung werden keine Dateien in Ihren Bibliotheksordnern verändert. Wenn Sie die Servereinstellungen aktiviert haben, um Cover und Metadaten in Ihren Bibliotheksordnern zu speichern, werden diese nicht gesichert oder überschrieben.<br /><br />Alle Clients, die Ihren Server nutzen, werden automatisch aktualisiert.",
   "MessageSearchResultsFor": "Suchergebnisse für",
-  "MessageSelected": "{0} selected",
+  "MessageSelected": "{0} ausgewählt",
   "MessageServerCouldNotBeReached": "Server kann nicht erreicht werden",
   "MessageSetChaptersFromTracksDescription": "Kaitelerstellung basiert auf den existierenden einzelnen Audiodateien. Pro existierende Audiodatei wird 1 Kapitel erstellt, wobei deren Kapitelname aus dem Audiodateinamen extrahiert wird",
   "MessageStartPlaybackAtTime": "Start der Wiedergabe für \"{0}\" bei {1}?",
@@ -750,4 +750,4 @@
   "ToastSocketFailedToConnect": "Verbindung zum WebSocket fehlgeschlagen",
   "ToastUserDeleteFailed": "Benutzer konnte nicht gelöscht werden",
   "ToastUserDeleteSuccess": "Benutzer gelöscht"
-}
\ No newline at end of file
+}

From 72fa6b8200fb66ade979cbaf2479d92bd972ea83 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 23 Dec 2023 10:50:04 -0600
Subject: [PATCH 19/24] Fix:Show cover size widget when audio player is open
 #2443

---
 client/components/app/BookShelfCategorized.vue | 5 ++++-
 client/components/app/LazyBookshelf.vue        | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/components/app/BookShelfCategorized.vue b/client/components/app/BookShelfCategorized.vue
index 15f34867b..eb4e9424a 100644
--- a/client/components/app/BookShelfCategorized.vue
+++ b/client/components/app/BookShelfCategorized.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative">
     <!-- Cover size widget -->
-    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-50" />
+    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
 
     <div v-if="loaded && !shelves.length && !search" class="w-full flex flex-col items-center justify-center py-12">
       <p class="text-center text-2xl mb-4 py-4">{{ libraryName }} Library is empty!</p>
@@ -94,6 +94,9 @@ export default {
     },
     selectedMediaItems() {
       return this.$store.state.globals.selectedMediaItems || []
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
     }
   },
   methods: {
diff --git a/client/components/app/LazyBookshelf.vue b/client/components/app/LazyBookshelf.vue
index 189f2c83d..5291cdbba 100644
--- a/client/components/app/LazyBookshelf.vue
+++ b/client/components/app/LazyBookshelf.vue
@@ -21,7 +21,7 @@
       </div>
     </div>
 
-    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-50" />
+    <widgets-cover-size-widget class="fixed right-4 z-50" :style="{ bottom: streamLibraryItem ? '181px' : '16px' }" />
   </div>
 </template>
 
@@ -205,6 +205,9 @@ export default {
     sizeMultiplier() {
       const baseSize = this.isCoverSquareAspectRatio ? 192 : 120
       return this.entityWidth / baseSize
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
     }
   },
   methods: {

From 0d644fe0c995f7f94ba7a4947241bbe16db898f7 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 23 Dec 2023 15:29:34 -0600
Subject: [PATCH 20/24] Add:Year in review banner for user stats page #2373

---
 client/components/stats/YearInReview.vue      | 143 +++++++++++----
 .../components/stats/YearInReviewBanner.vue   | 134 ++++++++++++++
 .../components/stats/YearInReviewServer.vue   |  99 +++++++---
 client/components/stats/YearInReviewShort.vue | 169 ++++++++++++++++++
 client/pages/config/stats.vue                 |  38 ++--
 server/utils/queries/adminStats.js            |  50 +++++-
 server/utils/queries/userStats.js             |  49 +++--
 7 files changed, 583 insertions(+), 99 deletions(-)
 create mode 100644 client/components/stats/YearInReviewBanner.vue
 create mode 100644 client/components/stats/YearInReviewShort.vue

diff --git a/client/components/stats/YearInReview.vue b/client/components/stats/YearInReview.vue
index 104392b4e..3fef3a8c7 100644
--- a/client/components/stats/YearInReview.vue
+++ b/client/components/stats/YearInReview.vue
@@ -1,24 +1,34 @@
 <template>
   <div>
-    <div v-if="processing" class="w-[400px] h-[400px] flex items-center justify-center">
+    <div v-if="processing" class="max-w-[800px] h-80 md:h-[800px] mx-auto flex items-center justify-center">
       <widgets-loading-spinner />
     </div>
-    <img v-else-if="dataUrl" :src="dataUrl" />
+    <img v-else-if="dataUrl" :src="dataUrl" class="mx-auto" />
   </div>
 </template>
 
 <script>
 export default {
   props: {
+    variant: {
+      type: Number,
+      default: 0
+    },
+    year: Number,
     processing: Boolean
   },
   data() {
     return {
+      canvas: null,
       dataUrl: null,
-      year: null,
       yearStats: null
     }
   },
+  watch: {
+    variant() {
+      this.init()
+    }
+  },
   methods: {
     async initCanvas() {
       if (!this.yearStats) return
@@ -72,7 +82,12 @@ export default {
       ctx.fillRect(0, 0, canvas.width, canvas.height)
 
       // Cover image tiles
-      if (this.yearStats.booksWithCovers.length) {
+      const bookCovers = this.yearStats.finishedBooksWithCovers
+      bookCovers.push(...this.yearStats.booksWithCovers)
+
+      let finishedBookCoverImgs = {}
+
+      if (bookCovers.length) {
         let index = 0
         ctx.globalAlpha = 0.25
         ctx.save()
@@ -82,8 +97,8 @@ export default {
         ctx.translate(-130, -120)
         for (let x = 0; x < 5; x++) {
           for (let y = 0; y < 5; y++) {
-            const coverIndex = index % this.yearStats.booksWithCovers.length
-            let libraryItemId = this.yearStats.booksWithCovers[coverIndex]
+            const coverIndex = index % bookCovers.length
+            let libraryItemId = bookCovers[coverIndex]
             index++
 
             await new Promise((resolve) => {
@@ -98,6 +113,14 @@ export default {
                 let sy = -(sw - img.height) / 2
                 ctx.drawImage(img, sx, sy, sw, sw, 215 * x, 215 * y, 215, 215)
                 resolve()
+                if (this.yearStats.finishedBooksWithCovers.includes(libraryItemId) && !finishedBookCoverImgs[libraryItemId]) {
+                  finishedBookCoverImgs[libraryItemId] = {
+                    img,
+                    sx,
+                    sy,
+                    sw
+                  }
+                }
               })
               img.addEventListener('error', () => {
                 resolve()
@@ -141,7 +164,7 @@ export default {
       // Box top right
       createRoundedRect(410, 100, 340, 160)
       addText(this.$elapsedPrettyExtended(this.yearStats.totalListeningTime, true, false), '40px', 'bold', 'white', '0px', 500, 165)
-      addText('spent listening', '28px', 'normal', tanColor, '0.5px', 500, 205)
+      addText('spent listening', '28px', 'normal', tanColor, '0px', 500, 205)
       addIcon('watch_later', 'white', '52px', 440, 180)
 
       // Box bottom left
@@ -153,42 +176,98 @@ export default {
       // Box bottom right
       createRoundedRect(410, 280, 340, 160)
       addText(this.yearStats.numBooksListened, '64px', 'bold', 'white', '0px', 500, 345)
-      addText('books listened to', '28px', 'normal', tanColor, '0.5px', 500, 390)
+      addText('books listened to', '28px', 'normal', tanColor, '0px', 500, 390)
       addIcon('local_library', 'white', '52px', 440, 360)
 
-      // Text stats
-      const topNarrator = this.yearStats.mostListenedNarrator
-      if (topNarrator) {
-        addText('TOP NARRATOR', '24px', 'normal', tanColor, '1px', 70, 520)
-        addText(topNarrator.name, '36px', 'bolder', 'white', '0px', 70, 564, 330)
-        addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '24px', 'lighter', 'white', '1px', 70, 599)
-      }
-
-      const topGenre = this.yearStats.topGenres[0]
-      if (topGenre) {
-        addText('TOP GENRE', '24px', 'normal', tanColor, '1px', 430, 520)
-        addText(topGenre.genre, '36px', 'bolder', 'white', '0px', 430, 564, 330)
-        addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '24px', 'lighter', 'white', '1px', 430, 599)
-      }
-
-      const topAuthor = this.yearStats.topAuthors[0]
-      if (topAuthor) {
-        addText('TOP AUTHOR', '24px', 'normal', tanColor, '1px', 70, 670)
-        addText(topAuthor.name, '36px', 'bolder', 'white', '0px', 70, 714, 330)
-        addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '24px', 'lighter', 'white', '1px', 70, 749)
+      if (!this.variant) {
+        // Text stats
+        const topNarrator = this.yearStats.mostListenedNarrator
+        if (topNarrator) {
+          addText('TOP NARRATOR', '24px', 'normal', tanColor, '1px', 70, 520)
+          addText(topNarrator.name, '36px', 'bolder', 'white', '0px', 70, 564, 330)
+          addText(this.$elapsedPrettyExtended(topNarrator.time, true, false), '24px', 'lighter', 'white', '1px', 70, 599)
+        }
+
+        const topGenre = this.yearStats.topGenres[0]
+        if (topGenre) {
+          addText('TOP GENRE', '24px', 'normal', tanColor, '1px', 430, 520)
+          addText(topGenre.genre, '36px', 'bolder', 'white', '0px', 430, 564, 330)
+          addText(this.$elapsedPrettyExtended(topGenre.time, true, false), '24px', 'lighter', 'white', '1px', 430, 599)
+        }
+
+        const topAuthor = this.yearStats.topAuthors[0]
+        if (topAuthor) {
+          addText('TOP AUTHOR', '24px', 'normal', tanColor, '1px', 70, 670)
+          addText(topAuthor.name, '36px', 'bolder', 'white', '0px', 70, 714, 330)
+          addText(this.$elapsedPrettyExtended(topAuthor.time, true, false), '24px', 'lighter', 'white', '1px', 70, 749)
+        }
+
+        if (this.yearStats.mostListenedMonth?.time) {
+          const jsdate = new Date(this.year, this.yearStats.mostListenedMonth.month, 1)
+          const monthName = this.$formatJsDate(jsdate, 'LLLL')
+          addText('TOP MONTH', '24px', 'normal', tanColor, '1px', 430, 670)
+          addText(monthName, '36px', 'bolder', 'white', '0px', 430, 714, 330)
+          addText(this.$elapsedPrettyExtended(this.yearStats.mostListenedMonth.time, true, false), '24px', 'lighter', 'white', '1px', 430, 749)
+        }
+      } else if (this.variant === 1) {
+        // Bottom images
+        finishedBookCoverImgs = Object.values(finishedBookCoverImgs)
+        if (finishedBookCoverImgs.length > 0) {
+          ctx.textAlign = 'center'
+          addText('Some books finished this year...', '28px', 'normal', tanColor, '0px', canvas.width / 2, 530)
+
+          for (let i = 0; i < Math.min(5, finishedBookCoverImgs.length); i++) {
+            let imgToAdd = finishedBookCoverImgs[i]
+            ctx.drawImage(imgToAdd.img, imgToAdd.sx, imgToAdd.sy, imgToAdd.sw, imgToAdd.sw, 40 + 145 * i, 570, 140, 140)
+          }
+        }
+      } else if (this.variant === 2) {
+        // Text stats
+        if (this.yearStats.topAuthors.length) {
+          addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 524)
+          for (let i = 0; i < this.yearStats.topAuthors.length; i++) {
+            addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 584 + i * 60, 330)
+          }
+        }
+
+        if (this.yearStats.topGenres.length) {
+          addText('TOP GENRES', '24px', 'normal', tanColor, '1px', 430, 524)
+          for (let i = 0; i < this.yearStats.topGenres.length; i++) {
+            addText(this.yearStats.topGenres[i].genre, '36px', 'bolder', 'white', '0px', 430, 584 + i * 60, 330)
+          }
+        }
       }
 
+      this.canvas = canvas
       this.dataUrl = canvas.toDataURL('png')
     },
     refresh() {
       this.init()
     },
+    share() {
+      this.canvas.toBlob((blob) => {
+        const file = new File([blob], 'yearinreview.png', { type: blob.type })
+        const shareData = {
+          files: [file]
+        }
+        if (navigator.canShare(shareData)) {
+          navigator
+            .share(shareData)
+            .then(() => {
+              console.log('Share success')
+            })
+            .catch((error) => {
+              console.error('Failed to share', error)
+              this.$toast.error('Failed to share: ' + error.message)
+            })
+        } else {
+          this.$toast.error('Cannot share natively on this device')
+        }
+      })
+    },
     async init() {
       this.$emit('update:processing', true)
-      let year = new Date().getFullYear()
-      if (new Date().getMonth() < 11) year--
-      this.year = year
-      this.yearStats = await this.$axios.$get(`/api/me/stats/year/${year}`).catch((err) => {
+      this.yearStats = await this.$axios.$get(`/api/me/stats/year/${this.year}`).catch((err) => {
         console.error('Failed to load stats for year', err)
         this.$toast.error('Failed to load year stats')
         return null
diff --git a/client/components/stats/YearInReviewBanner.vue b/client/components/stats/YearInReviewBanner.vue
new file mode 100644
index 000000000..9a0a0bbfe
--- /dev/null
+++ b/client/components/stats/YearInReviewBanner.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-4">
+    <!-- hack to get icon fonts loaded on init -->
+    <div class="h-0 w-0 overflow-hidden opacity-0">
+      <span class="material-icons-outlined">close</span>
+      <span class="abs-icons icon-audiobookshelf" />
+    </div>
+
+    <div class="flex items-center">
+      <p class="hidden md:block text-xl font-semibold">{{ yearInReviewYear }} Year in Review</p>
+      <div class="hidden md:block flex-grow" />
+      <ui-btn class="w-full md:w-auto" @click.stop="clickShowYearInReview">{{ showYearInReview ? 'Hide Year in Review' : 'See Year in Review' }}</ui-btn>
+    </div>
+
+    <!-- your year in review -->
+    <div v-if="showYearInReview">
+      <div class="w-full h-px bg-slate-200/10 my-4" />
+
+      <div class="flex items-center justify-center mb-2 max-w-[800px] mx-auto">
+        <!-- previous button -->
+        <ui-btn small :disabled="!yearInReviewVariant || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant--">
+          <span class="material-icons text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
+          <span class="hidden sm:inline-block pr-2">Previous</span>
+        </ui-btn>
+        <!-- share button -->
+        <ui-btn v-if="showShareButton" small :disabled="processingYearInReview" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReview"> Share </ui-btn>
+
+        <div class="flex-grow" />
+        <p class="text-lg font-semibold">Your Year <span class="hidden md:inline-block">in Review&nbsp;</span>({{ yearInReviewVariant + 1 }})</p>
+        <div class="flex-grow" />
+
+        <!-- refresh button -->
+        <ui-btn small :disabled="processingYearInReview" class="inline-flex items-center font-semibold mr-1 sm:mr-2" @click="refreshYearInReview">
+          <span class="hidden sm:inline-block">Refresh</span>
+          <span class="material-icons sm:!hidden text-lg py-px">refresh</span>
+        </ui-btn>
+        <!-- next button -->
+        <ui-btn small :disabled="yearInReviewVariant >= 2 || processingYearInReview" class="inline-flex items-center font-semibold" @click="yearInReviewVariant++">
+          <span class="hidden sm:inline-block pl-2">Next</span>
+          <span class="material-icons-outlined text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
+        </ui-btn>
+      </div>
+      <stats-year-in-review ref="yearInReview" :variant="yearInReviewVariant" :year="yearInReviewYear" :processing.sync="processingYearInReview" />
+
+      <!-- your year in review short -->
+      <div class="w-full max-w-[800px] mx-auto my-4">
+        <stats-year-in-review-short ref="yearInReviewShort" :year="yearInReviewYear" :processing.sync="processingYearInReviewShort" />
+      </div>
+
+      <!-- your server in review -->
+      <div v-if="isAdminOrUp" class="w-full max-w-[800px] mx-auto mb-2 mt-4 border-t pt-4 border-white/10">
+        <div class="flex items-center justify-center mb-2">
+          <!-- previous button -->
+          <ui-btn small :disabled="!yearInReviewServerVariant || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant--">
+            <span class="material-icons-outlined text-lg px-1 sm:pr-1 py-px sm:py-0">chevron_left</span>
+            <span class="hidden sm:inline-block pr-2">Previous</span>
+          </ui-btn>
+          <!-- share button -->
+          <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewServer" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReviewServer"> Share </ui-btn>
+
+          <div class="flex-grow" />
+          <p class="text-lg font-semibold">Server <span class="hidden md:inline-block">Year in Review&nbsp;</span>({{ yearInReviewServerVariant + 1 }})</p>
+          <div class="flex-grow" />
+
+          <!-- refresh button -->
+          <ui-btn small :disabled="processingYearInReviewServer" class="inline-flex items-center font-semibold mr-1 sm:mr-2" @click="refreshYearInReviewServer">
+            <span class="hidden sm:inline-block">Refresh</span>
+            <span class="material-icons sm:!hidden text-lg py-px">refresh</span>
+          </ui-btn>
+          <!-- next button -->
+          <ui-btn small :disabled="yearInReviewServerVariant >= 2 || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant++">
+            <span class="hidden sm:inline-block pl-2">Next</span>
+            <span class="material-icons-outlined text-lg px-1 sm:pl-1 py-px sm:py-0">chevron_right</span>
+          </ui-btn>
+        </div>
+      </div>
+      <stats-year-in-review-server v-if="isAdminOrUp" ref="yearInReviewServer" :year="yearInReviewYear" :variant="yearInReviewServerVariant" :processing.sync="processingYearInReviewServer" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showYearInReview: false,
+      yearInReviewYear: 0,
+      yearInReviewVariant: 0,
+      yearInReviewServerVariant: 0,
+      processingYearInReview: false,
+      processingYearInReviewShort: false,
+      processingYearInReviewServer: false,
+      showShareButton: false
+    }
+  },
+  computed: {
+    isAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    }
+  },
+  methods: {
+    shareYearInReviewServer() {
+      this.$refs.yearInReviewServer.share()
+    },
+    shareYearInReview() {
+      this.$refs.yearInReview.share()
+    },
+    refreshYearInReviewServer() {
+      this.$refs.yearInReviewServer.refresh()
+    },
+    refreshYearInReview() {
+      this.$refs.yearInReview.refresh()
+      this.$refs.yearInReviewShort.refresh()
+    },
+    clickShowYearInReview() {
+      this.showYearInReview = !this.showYearInReview
+    }
+  },
+  beforeMount() {
+    this.yearInReviewYear = new Date().getFullYear()
+    // When not December show previous year
+    if (new Date().getMonth() < 11) {
+      this.yearInReviewYear--
+    }
+  },
+  mounted() {
+    if (typeof navigator.share !== 'undefined' && navigator.share) {
+      this.showShareButton = true
+    } else {
+      console.warn('Navigator.share not supported')
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/client/components/stats/YearInReviewServer.vue b/client/components/stats/YearInReviewServer.vue
index 0d1fa8aa2..3aeddfafa 100644
--- a/client/components/stats/YearInReviewServer.vue
+++ b/client/components/stats/YearInReviewServer.vue
@@ -1,24 +1,34 @@
 <template>
   <div>
-    <div v-if="processing" class="w-[400px] h-[400px] flex items-center justify-center">
+    <div v-if="processing" class="max-w-[800px] h-80 md:h-[800px] mx-auto flex items-center justify-center">
       <widgets-loading-spinner />
     </div>
-    <img v-else-if="dataUrl" :src="dataUrl" />
+    <img v-else-if="dataUrl" :src="dataUrl" class="mx-auto" />
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    processing: Boolean
+    variant: {
+      type: Number,
+      default: 0
+    },
+    processing: Boolean,
+    year: Number
   },
   data() {
     return {
+      canvas: null,
       dataUrl: null,
-      year: null,
       yearStats: null
     }
   },
+  watch: {
+    variant() {
+      this.init()
+    }
+  },
   methods: {
     async initCanvas() {
       if (!this.yearStats) return
@@ -61,12 +71,6 @@ export default {
         ctx.fillText(text, x, y)
       }
 
-      const addIcon = (icon, color, fontSize, x, y) => {
-        ctx.fillStyle = color
-        ctx.font = `${fontSize} Material Icons Outlined`
-        ctx.fillText(icon, x, y)
-      }
-
       // Bg color
       ctx.fillStyle = '#232323'
       ctx.fillRect(0, 0, canvas.width, canvas.height)
@@ -168,28 +172,81 @@ export default {
         addText('+' + this.$elapsedPrettyExtended(this.yearStats.totalBooksAddedDuration, true, false), '20px', 'lighter', 'white', '0px', canvas.width / 2, 470)
       }
 
-      // Bottom images
-      imgsToAdd = Object.values(imgsToAdd)
-      if (imgsToAdd.length >= 5) {
-        addText('Some additions include...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 540)
+      if (!this.variant) {
+        // Bottom images
+        imgsToAdd = Object.values(imgsToAdd)
+        if (imgsToAdd.length > 0) {
+          addText('Some additions include...', '24px', 'normal', tanColor, '0px', canvas.width / 2, 540)
 
-        for (let i = 0; i < 5; i++) {
-          let imgToAdd = imgsToAdd[i]
-          ctx.drawImage(imgToAdd.img, imgToAdd.sx, imgToAdd.sy, imgToAdd.sw, imgToAdd.sw, 40 + 145 * i, 580, 140, 140)
+          for (let i = 0; i < Math.min(5, imgsToAdd.length); i++) {
+            let imgToAdd = imgsToAdd[i]
+            ctx.drawImage(imgToAdd.img, imgToAdd.sx, imgToAdd.sy, imgToAdd.sw, imgToAdd.sw, 40 + 145 * i, 580, 140, 140)
+          }
+        }
+      } else if (this.variant === 1) {
+        // Text stats
+        ctx.textAlign = 'left'
+        if (this.yearStats.topAuthors.length) {
+          addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 549)
+          for (let i = 0; i < this.yearStats.topAuthors.length; i++) {
+            addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 609 + i * 60, 330)
+          }
+        }
+
+        if (this.yearStats.topNarrators.length) {
+          addText('TOP NARRATORS', '24px', 'normal', tanColor, '1px', 430, 549)
+          for (let i = 0; i < this.yearStats.topNarrators.length; i++) {
+            addText(this.yearStats.topNarrators[i].name, '36px', 'bolder', 'white', '0px', 430, 609 + i * 60, 330)
+          }
+        }
+      } else if (this.variant === 2) {
+        // Text stats
+        ctx.textAlign = 'left'
+        if (this.yearStats.topAuthors.length) {
+          addText('TOP AUTHORS', '24px', 'normal', tanColor, '1px', 70, 549)
+          for (let i = 0; i < this.yearStats.topAuthors.length; i++) {
+            addText(this.yearStats.topAuthors[i].name, '36px', 'bolder', 'white', '0px', 70, 609 + i * 60, 330)
+          }
+        }
+
+        if (this.yearStats.topGenres.length) {
+          addText('TOP GENRES', '24px', 'normal', tanColor, '1px', 430, 549)
+          for (let i = 0; i < this.yearStats.topGenres.length; i++) {
+            addText(this.yearStats.topGenres[i].genre, '36px', 'bolder', 'white', '0px', 430, 609 + i * 60, 330)
+          }
         }
       }
 
+      this.canvas = canvas
       this.dataUrl = canvas.toDataURL('png')
     },
+    share() {
+      this.canvas.toBlob((blob) => {
+        const file = new File([blob], 'yearinreviewserver.png', { type: blob.type })
+        const shareData = {
+          files: [file]
+        }
+        if (navigator.canShare(shareData)) {
+          navigator
+            .share(shareData)
+            .then(() => {
+              console.log('Share success')
+            })
+            .catch((error) => {
+              console.error('Failed to share', error)
+              this.$toast.error('Failed to share: ' + error.message)
+            })
+        } else {
+          this.$toast.error('Cannot share natively on this device')
+        }
+      })
+    },
     refresh() {
       this.init()
     },
     async init() {
       this.$emit('update:processing', true)
-      let year = new Date().getFullYear()
-      if (new Date().getMonth() < 11) year--
-      this.year = year
-      this.yearStats = await this.$axios.$get(`/api/stats/year/${year}`).catch((err) => {
+      this.yearStats = await this.$axios.$get(`/api/stats/year/${this.year}`).catch((err) => {
         console.error('Failed to load stats for year', err)
         this.$toast.error('Failed to load year stats')
         return null
diff --git a/client/components/stats/YearInReviewShort.vue b/client/components/stats/YearInReviewShort.vue
new file mode 100644
index 000000000..49abe122e
--- /dev/null
+++ b/client/components/stats/YearInReviewShort.vue
@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <div v-if="processing" class="max-w-[600px] h-32 sm:h-[200px] flex items-center justify-center">
+      <widgets-loading-spinner />
+    </div>
+    <img v-else-if="dataUrl" :src="dataUrl" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean,
+    year: Number
+  },
+  data() {
+    return {
+      dataUrl: null,
+      yearStats: null
+    }
+  },
+  methods: {
+    async initCanvas() {
+      if (!this.yearStats) return
+
+      const canvas = document.createElement('canvas')
+      canvas.width = 600
+      canvas.height = 200
+      const ctx = canvas.getContext('2d')
+
+      const createRoundedRect = (x, y, w, h) => {
+        const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
+        grd1.addColorStop(0, '#44444455')
+        grd1.addColorStop(1, '#ffffff11')
+        ctx.fillStyle = grd1
+        ctx.strokeStyle = '#C0C0C088'
+        ctx.beginPath()
+        ctx.roundRect(x, y, w, h, [20])
+        ctx.fill()
+        ctx.stroke()
+      }
+
+      const addText = (text, fontSize, fontWeight, color, letterSpacing, x, y, maxWidth = 0) => {
+        ctx.fillStyle = color
+        ctx.font = `${fontWeight} ${fontSize} Source Sans Pro`
+        ctx.letterSpacing = letterSpacing
+
+        // If maxWidth is specified then continue to remove chars until under maxWidth and add ellipsis
+        if (maxWidth) {
+          let txtWidth = ctx.measureText(text).width
+          while (txtWidth > maxWidth) {
+            console.warn(`Text "${text}" is greater than max width ${maxWidth} (width:${txtWidth})`)
+            if (text.endsWith('...')) text = text.slice(0, -4) // Repeated checks remove 1 char at a time
+            else text = text.slice(0, -3) // First check remove last 3 chars
+            text += '...'
+            txtWidth = ctx.measureText(text).width
+            console.log(`Checking text "${text}" (width:${txtWidth})`)
+          }
+        }
+
+        ctx.fillText(text, x, y)
+      }
+
+      const addIcon = (icon, color, fontSize, x, y) => {
+        ctx.fillStyle = color
+        ctx.font = `${fontSize} Material Icons Outlined`
+        ctx.fillText(icon, x, y)
+      }
+
+      // Bg color
+      ctx.fillStyle = '#232323'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Cover image tiles
+      const bookCovers = this.yearStats.finishedBooksWithCovers
+      bookCovers.push(...this.yearStats.booksWithCovers)
+
+      if (bookCovers.length) {
+        let index = 0
+        ctx.globalAlpha = 0.25
+        ctx.save()
+        ctx.translate(canvas.width / 2, canvas.height / 2)
+        ctx.rotate((-Math.PI / 180) * 25)
+        ctx.translate(-canvas.width / 2, -canvas.height / 2)
+        ctx.translate(-10, -90)
+        for (let x = 0; x < 4; x++) {
+          for (let y = 0; y < 3; y++) {
+            const coverIndex = index % bookCovers.length
+            let libraryItemId = bookCovers[coverIndex]
+            index++
+
+            await new Promise((resolve) => {
+              const img = new Image()
+              img.crossOrigin = 'anonymous'
+              img.addEventListener('load', () => {
+                let sw = img.width
+                if (img.width > img.height) {
+                  sw = img.height
+                }
+                let sx = -(sw - img.width) / 2
+                let sy = -(sw - img.height) / 2
+                ctx.drawImage(img, sx, sy, sw, sw, 155 * x, 155 * y, 155, 155)
+                resolve()
+              })
+              img.addEventListener('error', () => {
+                resolve()
+              })
+              img.src = this.$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId)
+            })
+          }
+        }
+        ctx.restore()
+      }
+
+      ctx.globalAlpha = 1
+      ctx.textBaseline = 'middle'
+
+      // Create gradient
+      const grd1 = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
+      grd1.addColorStop(0, '#000000aa')
+      grd1.addColorStop(1, '#cd9d49aa')
+      ctx.fillStyle = grd1
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      // Top Abs icon
+      let tanColor = '#ffdb70'
+      ctx.fillStyle = tanColor
+      ctx.font = '42px absicons'
+      ctx.fillText('\ue900', 15, 36)
+
+      // Top text
+      addText('audiobookshelf', '28px', 'normal', tanColor, '0px', 65, 28)
+      addText(`${this.year} YEAR IN REVIEW`, '18px', 'bold', 'white', '1px', 65, 51)
+
+      // Top left box
+      createRoundedRect(15, 75, 280, 110)
+      addText(this.yearStats.numBooksFinished, '48px', 'bold', 'white', '0px', 105, 120)
+      addText('books finished', '20px', 'normal', tanColor, '0px', 105, 155)
+      const readIconPath = new Path2D()
+      readIconPath.addPath(new Path2D('M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z'), { a: 1.5, d: 1.5, e: 55, f: 115 })
+      ctx.fillStyle = '#ffffff'
+      ctx.fill(readIconPath)
+
+      createRoundedRect(305, 75, 280, 110)
+      addText(this.yearStats.numBooksListened, '48px', 'bold', 'white', '0px', 400, 120)
+      addText('books listened to', '20px', 'normal', tanColor, '0px', 400, 155)
+      addIcon('local_library', 'white', '42px', 345, 130)
+
+      this.dataUrl = canvas.toDataURL('png')
+    },
+    refresh() {
+      this.init()
+    },
+    async init() {
+      this.$emit('update:processing', true)
+      this.yearStats = await this.$axios.$get(`/api/me/stats/year/${this.year}`).catch((err) => {
+        console.error('Failed to load stats for year', err)
+        this.$toast.error('Failed to load year stats')
+        return null
+      })
+      await this.initCanvas()
+      this.$emit('update:processing', false)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/client/pages/config/stats.vue b/client/pages/config/stats.vue
index 96581714d..05d0550fe 100644
--- a/client/pages/config/stats.vue
+++ b/client/pages/config/stats.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <app-settings-content :header-text="$strings.HeaderYourStats">
+    <!-- Year in review banner shown at the top in December and January -->
+    <stats-year-in-review-banner v-if="showYearInReviewBanner" />
+
+    <app-settings-content :header-text="$strings.HeaderYourStats" class="!mb-4">
       <div class="flex justify-center">
         <div class="flex p-2">
           <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
@@ -62,16 +65,10 @@
         </div>
       </div>
       <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" />
-
-      <ui-btn small :loading="processingYearInReview || processingYearInReviewAlt" @click.stop="clickShowYearInReview">{{ showYearInReview ? 'Refresh Year in Review' : 'Year in Review' }}</ui-btn>
-      <div v-if="showYearInReview">
-        <div class="w-full h-px bg-slate-200/10 my-4" />
-
-        <stats-year-in-review ref="yearInReview" :processing.sync="processingYearInReview" />
-
-        <stats-year-in-review-server v-if="isAdminOrUp" ref="yearInReviewAlt" :processing.sync="processingYearInReviewAlt" />
-      </div>
     </app-settings-content>
+
+    <!-- Year in review banner shown at the bottom Feb - Nov -->
+    <stats-year-in-review-banner v-if="!showYearInReviewBanner" />
   </div>
 </template>
 
@@ -81,9 +78,7 @@ export default {
     return {
       listeningStats: null,
       windowWidth: 0,
-      showYearInReview: false,
-      processingYearInReview: false,
-      processingYearInReviewAlt: false
+      showYearInReviewBanner: false
     }
   },
   watch: {
@@ -126,22 +121,17 @@ export default {
     }
   },
   methods: {
-    clickShowYearInReview() {
-      if (this.showYearInReview) {
-        this.$refs.yearInReview.refresh()
-
-        if (this.$refs.yearInReviewAlt) {
-          this.$refs.yearInReviewAlt.refresh()
-        }
-      } else {
-        this.showYearInReview = true
-      }
-    },
     async init() {
       this.listeningStats = await this.$axios.$get(`/api/me/listening-stats`).catch((err) => {
         console.error('Failed to load listening sesions', err)
         return []
       })
+
+      let month = new Date().getMonth()
+      // January and December show year in review banner
+      if (month === 11 || month === 0) {
+        this.showYearInReviewBanner = true
+      }
     }
   },
   mounted() {
diff --git a/server/utils/queries/adminStats.js b/server/utils/queries/adminStats.js
index 66a31e8de..f1d64f478 100644
--- a/server/utils/queries/adminStats.js
+++ b/server/utils/queries/adminStats.js
@@ -88,12 +88,53 @@ module.exports = {
 
     const numAuthorsAdded = await this.getNumAuthorsAddedForYear(year)
 
+    let authorListeningMap = {}
+    let narratorListeningMap = {}
+    let genreListeningMap = {}
+
     const listeningSessions = await this.getListeningSessionsForYear(year)
     let totalListeningTime = 0
-    for (const listeningSession of listeningSessions) {
-      totalListeningTime += (listeningSession.timeListening || 0)
+    for (const ls of listeningSessions) {
+      totalListeningTime += (ls.timeListening || 0)
+
+      const authors = ls.mediaMetadata.authors || []
+      authors.forEach((au) => {
+        if (!authorListeningMap[au.name]) authorListeningMap[au.name] = 0
+        authorListeningMap[au.name] += (ls.timeListening || 0)
+      })
+
+      const narrators = ls.mediaMetadata.narrators || []
+      narrators.forEach((narrator) => {
+        if (!narratorListeningMap[narrator]) narratorListeningMap[narrator] = 0
+        narratorListeningMap[narrator] += (ls.timeListening || 0)
+      })
+
+      // Filter out bad genres like "audiobook" and "audio book"
+      const genres = (ls.mediaMetadata.genres || []).filter(g => !g.toLowerCase().includes('audiobook') && !g.toLowerCase().includes('audio book'))
+      genres.forEach((genre) => {
+        if (!genreListeningMap[genre]) genreListeningMap[genre] = 0
+        genreListeningMap[genre] += (ls.timeListening || 0)
+      })
     }
 
+    let topAuthors = null
+    topAuthors = Object.keys(authorListeningMap).map(authorName => ({
+      name: authorName,
+      time: Math.round(authorListeningMap[authorName])
+    })).sort((a, b) => b.time - a.time).slice(0, 3)
+
+    let topNarrators = null
+    topNarrators = Object.keys(narratorListeningMap).map(narratorName => ({
+      name: narratorName,
+      time: Math.round(narratorListeningMap[narratorName])
+    })).sort((a, b) => b.time - a.time).slice(0, 3)
+
+    let topGenres = null
+    topGenres = Object.keys(genreListeningMap).map(genre => ({
+      genre,
+      time: Math.round(genreListeningMap[genre])
+    })).sort((a, b) => b.time - a.time).slice(0, 3)
+
     // Stats for total books, size and duration for everything added this year or earlier
     const [totalStatResultsRow] = await Database.sequelize.query(`SELECT SUM(li.size) AS totalSize, SUM(b.duration) AS totalDuration, COUNT(*) AS totalItems FROM libraryItems li, books b WHERE b.id = li.mediaId AND li.mediaType = 'book' AND li.createdAt < ":nextYear-01-01";`, {
       replacements: {
@@ -112,7 +153,10 @@ module.exports = {
       totalBooksSize: totalStatResults?.totalSize || 0,
       totalBooksDuration: totalStatResults?.totalDuration || 0,
       totalListeningTime,
-      numBooks: totalStatResults?.totalItems || 0
+      numBooks: totalStatResults?.totalItems || 0,
+      topAuthors,
+      topNarrators,
+      topGenres
     }
   }
 }
diff --git a/server/utils/queries/userStats.js b/server/utils/queries/userStats.js
index 0f9977894..6fd5d5069 100644
--- a/server/utils/queries/userStats.js
+++ b/server/utils/queries/userStats.js
@@ -52,12 +52,14 @@ module.exports = {
       },
       include: {
         model: Database.bookModel,
+        attributes: ['id', 'title', 'coverPath'],
         include: {
           model: Database.libraryItemModel,
           attributes: ['id', 'mediaId', 'mediaType']
         },
         required: true
-      }
+      },
+      order: Database.sequelize.random()
     })
     return progresses
   },
@@ -69,6 +71,7 @@ module.exports = {
   async getStatsForYear(user, year) {
     const userId = user.id
     const listeningSessions = await this.getUserListeningSessionsForYear(userId, year)
+    const bookProgressesFinished = await this.getBookMediaProgressFinishedForYear(userId, year)
 
     let totalBookListeningTime = 0
     let totalPodcastListeningTime = 0
@@ -79,11 +82,33 @@ module.exports = {
     let narratorListeningMap = {}
     let monthListeningMap = {}
     let bookListeningMap = {}
-    const booksWithCovers = []
 
+    const booksWithCovers = []
+    const finishedBooksWithCovers = []
+
+    // Get finished book stats
+    const numBooksFinished = bookProgressesFinished.length
+    let longestAudiobookFinished = null
+    for (const mediaProgress of bookProgressesFinished) {
+      // Grab first 5 that have a cover
+      if (mediaProgress.mediaItem?.coverPath && !finishedBooksWithCovers.includes(mediaProgress.mediaItem.libraryItem.id) && finishedBooksWithCovers.length < 5 && await fsExtra.pathExists(mediaProgress.mediaItem.coverPath)) {
+        finishedBooksWithCovers.push(mediaProgress.mediaItem.libraryItem.id)
+      }
+
+      if (mediaProgress.duration && (!longestAudiobookFinished?.duration || mediaProgress.duration > longestAudiobookFinished.duration)) {
+        longestAudiobookFinished = {
+          id: mediaProgress.mediaItem.id,
+          title: mediaProgress.mediaItem.title,
+          duration: Math.round(mediaProgress.duration),
+          finishedAt: mediaProgress.finishedAt
+        }
+      }
+    }
+
+    // Get listening session stats
     for (const ls of listeningSessions) {
       // Grab first 25 that have a cover
-      if (ls.mediaItem?.coverPath && !booksWithCovers.includes(ls.mediaItem.libraryItem.id) && booksWithCovers.length < 25 && await fsExtra.pathExists(ls.mediaItem.coverPath)) {
+      if (ls.mediaItem?.coverPath && !booksWithCovers.includes(ls.mediaItem.libraryItem.id) && !finishedBooksWithCovers.includes(ls.mediaItem.libraryItem.id) && booksWithCovers.length < 25 && await fsExtra.pathExists(ls.mediaItem.coverPath)) {
         booksWithCovers.push(ls.mediaItem.libraryItem.id)
       }
 
@@ -162,21 +187,6 @@ module.exports = {
       }
     }
 
-    const bookProgressesFinished = await this.getBookMediaProgressFinishedForYear(userId, year)
-
-    const numBooksFinished = bookProgressesFinished.length
-    let longestAudiobookFinished = null
-    bookProgressesFinished.forEach((mediaProgress) => {
-      if (mediaProgress.duration && (!longestAudiobookFinished?.duration || mediaProgress.duration > longestAudiobookFinished.duration)) {
-        longestAudiobookFinished = {
-          id: mediaProgress.mediaItem.id,
-          title: mediaProgress.mediaItem.title,
-          duration: Math.round(mediaProgress.duration),
-          finishedAt: mediaProgress.finishedAt
-        }
-      }
-    })
-
     return {
       totalListeningSessions: listeningSessions.length,
       totalListeningTime,
@@ -189,7 +199,8 @@ module.exports = {
       numBooksFinished,
       numBooksListened: Object.keys(bookListeningMap).length,
       longestAudiobookFinished,
-      booksWithCovers
+      booksWithCovers,
+      finishedBooksWithCovers
     }
   }
 }

From 9f366863a94ab4c241b6f650db9e6c00b4cb0a45 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 23 Dec 2023 16:16:24 -0600
Subject: [PATCH 21/24] Update comic reader buttons for mobile screens, add
 left scrollBy

---
 client/components/readers/ComicReader.vue | 30 +++++++++++------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/components/readers/ComicReader.vue b/client/components/readers/ComicReader.vue
index 9b09f5b67..67aa16c6b 100644
--- a/client/components/readers/ComicReader.vue
+++ b/client/components/readers/ComicReader.vue
@@ -14,19 +14,20 @@
       </div>
     </div>
 
-    <a v-if="pages && numPages" :href="mainImg" :download="pages[page - 1]" class="absolute top-0 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" :class="comicMetadata ? 'left-32' : 'left-20'">
-      <span class="material-icons text-xl">download</span>
-    </a>
-    <div v-if="comicMetadata" class="absolute top-0 left-20 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-xl">more</span>
-    </div>
-    <div v-if="numPages" class="absolute top-0 left-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" @mousedown.prevent @click.stop.prevent="clickShowPageMenu">
+    <div v-if="numPages" class="absolute top-0 left-4 sm:left-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" @mousedown.prevent @click.stop.prevent="clickShowPageMenu">
       <span class="material-icons text-xl">menu</span>
     </div>
-    <div v-if="numPages" class="absolute top-0 right-16 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 v-if="comicMetadata" class="absolute top-0 left-16 sm:left-20 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-xl">more</span>
+    </div>
+    <a v-if="pages && numPages" :href="mainImg" :download="pages[page - 1]" class="absolute top-0 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" :class="comicMetadata ? 'left-28 sm:left-32' : 'left-16 sm:left-20'">
+      <span class="material-icons text-xl">download</span>
+    </a>
+
+    <div v-if="numPages" class="absolute top-0 right-14 sm:right-16 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">
       <p class="font-mono">{{ page }} / {{ numPages }}</p>
     </div>
-    <div v-if="mainImg" class="absolute top-0 right-40 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 v-if="mainImg" class="absolute top-0 right-36 sm:right-40 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">
       <ui-icon-btn icon="zoom_out" :size="8" :disabled="!canScaleDown" borderless class="mr-px" @click="zoomOut" />
       <ui-icon-btn icon="zoom_in" :size="8" :disabled="!canScaleUp" borderless class="ml-px" @click="zoomIn" />
     </div>
@@ -91,7 +92,7 @@ export default {
       loadTimeout: null,
       loadedFirstPage: false,
       comicMetadata: null,
-      scale: 80,
+      scale: 80
     }
   },
   watch: {
@@ -357,20 +358,19 @@ export default {
     scroll(event) {
       const imageContainer = this.$refs.imageContainer
 
-      console.log("Scrolling by " + event.deltaY)
       imageContainer.scrollBy({
         top: event.deltaY,
-        behavior: "auto",
-      });
+        left: event.deltaX,
+        behavior: 'auto'
+      })
     }
   },
   mounted() {
     const prevButton = this.$refs.prevButton
     const nextButton = this.$refs.nextButton
-    
+
     prevButton.addEventListener('wheel', this.scroll, { passive: false })
     nextButton.addEventListener('wheel', this.scroll, { passive: false })
-
   },
   beforeDestroy() {
     const prevButton = this.$refs.prevButton

From 5633113f256b5e9d70c6b32e7e61faf245616369 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 23 Dec 2023 16:39:56 -0600
Subject: [PATCH 22/24] Update share buttons to not show an error on abort

---
 client/components/stats/YearInReview.vue      | 10 +++++---
 .../components/stats/YearInReviewBanner.vue   | 17 +++++++++----
 .../components/stats/YearInReviewServer.vue   | 10 +++++---
 client/components/stats/YearInReviewShort.vue | 25 +++++++++++++++++++
 4 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/client/components/stats/YearInReview.vue b/client/components/stats/YearInReview.vue
index 3fef3a8c7..a6bed203a 100644
--- a/client/components/stats/YearInReview.vue
+++ b/client/components/stats/YearInReview.vue
@@ -40,10 +40,10 @@ export default {
 
       const createRoundedRect = (x, y, w, h) => {
         const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
-        grd1.addColorStop(0, '#44444466')
-        grd1.addColorStop(1, '#ffffff22')
+        grd1.addColorStop(0, '#44444455')
+        grd1.addColorStop(1, '#ffffff11')
         ctx.fillStyle = grd1
-        ctx.strokeStyle = '#C0C0C0aa'
+        ctx.strokeStyle = '#C0C0C088'
         ctx.beginPath()
         ctx.roundRect(x, y, w, h, [20])
         ctx.fill()
@@ -258,7 +258,9 @@ export default {
             })
             .catch((error) => {
               console.error('Failed to share', error)
-              this.$toast.error('Failed to share: ' + error.message)
+              if (error.name !== 'AbortError') {
+                this.$toast.error('Failed to share: ' + error.message)
+              }
             })
         } else {
           this.$toast.error('Cannot share natively on this device')
diff --git a/client/components/stats/YearInReviewBanner.vue b/client/components/stats/YearInReviewBanner.vue
index 9a0a0bbfe..f77360787 100644
--- a/client/components/stats/YearInReviewBanner.vue
+++ b/client/components/stats/YearInReviewBanner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-4">
+  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-1 sm:p-4 mb-4">
     <!-- hack to get icon fonts loaded on init -->
     <div class="h-0 w-0 overflow-hidden opacity-0">
       <span class="material-icons-outlined">close</span>
@@ -26,7 +26,8 @@
         <ui-btn v-if="showShareButton" small :disabled="processingYearInReview" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReview"> Share </ui-btn>
 
         <div class="flex-grow" />
-        <p class="text-lg font-semibold">Your Year <span class="hidden md:inline-block">in Review&nbsp;</span>({{ yearInReviewVariant + 1 }})</p>
+        <p class="hidden sm:block text-lg font-semibold">Your Year in Review ({{ yearInReviewVariant + 1 }})</p>
+        <p class="block sm:hidden text-lg font-semibold">{{ yearInReviewVariant + 1 }}</p>
         <div class="flex-grow" />
 
         <!-- refresh button -->
@@ -44,6 +45,8 @@
 
       <!-- your year in review short -->
       <div class="w-full max-w-[800px] mx-auto my-4">
+        <!-- share button -->
+        <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewShort" class="inline-flex sm:hidden items-center font-semibold mb-1" @click="shareYearInReviewShort"> Share </ui-btn>
         <stats-year-in-review-short ref="yearInReviewShort" :year="yearInReviewYear" :processing.sync="processingYearInReviewShort" />
       </div>
 
@@ -52,14 +55,15 @@
         <div class="flex items-center justify-center mb-2">
           <!-- previous button -->
           <ui-btn small :disabled="!yearInReviewServerVariant || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant--">
-            <span class="material-icons-outlined text-lg px-1 sm:pr-1 py-px sm:py-0">chevron_left</span>
+            <span class="material-icons text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
             <span class="hidden sm:inline-block pr-2">Previous</span>
           </ui-btn>
           <!-- share button -->
           <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewServer" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReviewServer"> Share </ui-btn>
 
           <div class="flex-grow" />
-          <p class="text-lg font-semibold">Server <span class="hidden md:inline-block">Year in Review&nbsp;</span>({{ yearInReviewServerVariant + 1 }})</p>
+          <p class="hidden sm:block text-lg font-semibold">Server Year in Review ({{ yearInReviewServerVariant + 1 }})</p>
+          <p class="block sm:hidden text-lg font-semibold">{{ yearInReviewServerVariant + 1 }}</p>
           <div class="flex-grow" />
 
           <!-- refresh button -->
@@ -70,7 +74,7 @@
           <!-- next button -->
           <ui-btn small :disabled="yearInReviewServerVariant >= 2 || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant++">
             <span class="hidden sm:inline-block pl-2">Next</span>
-            <span class="material-icons-outlined text-lg px-1 sm:pl-1 py-px sm:py-0">chevron_right</span>
+            <span class="material-icons-outlined text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
           </ui-btn>
         </div>
       </div>
@@ -105,6 +109,9 @@ export default {
     shareYearInReview() {
       this.$refs.yearInReview.share()
     },
+    shareYearInReviewShort() {
+      this.$refs.yearInReviewShort.share()
+    },
     refreshYearInReviewServer() {
       this.$refs.yearInReviewServer.refresh()
     },
diff --git a/client/components/stats/YearInReviewServer.vue b/client/components/stats/YearInReviewServer.vue
index 3aeddfafa..e6c10fa2a 100644
--- a/client/components/stats/YearInReviewServer.vue
+++ b/client/components/stats/YearInReviewServer.vue
@@ -40,10 +40,10 @@ export default {
 
       const createRoundedRect = (x, y, w, h) => {
         const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
-        grd1.addColorStop(0, '#44444466')
-        grd1.addColorStop(1, '#ffffff22')
+        grd1.addColorStop(0, '#44444455')
+        grd1.addColorStop(1, '#ffffff11')
         ctx.fillStyle = grd1
-        ctx.strokeStyle = '#C0C0C0aa'
+        ctx.strokeStyle = '#C0C0C088'
         ctx.beginPath()
         ctx.roundRect(x, y, w, h, [20])
         ctx.fill()
@@ -234,7 +234,9 @@ export default {
             })
             .catch((error) => {
               console.error('Failed to share', error)
-              this.$toast.error('Failed to share: ' + error.message)
+              if (error.name !== 'AbortError') {
+                this.$toast.error('Failed to share: ' + error.message)
+              }
             })
         } else {
           this.$toast.error('Cannot share natively on this device')
diff --git a/client/components/stats/YearInReviewShort.vue b/client/components/stats/YearInReviewShort.vue
index 49abe122e..daa566a67 100644
--- a/client/components/stats/YearInReviewShort.vue
+++ b/client/components/stats/YearInReviewShort.vue
@@ -15,6 +15,7 @@ export default {
   },
   data() {
     return {
+      canvas: null,
       dataUrl: null,
       yearStats: null
     }
@@ -146,8 +147,32 @@ export default {
       addText('books listened to', '20px', 'normal', tanColor, '0px', 400, 155)
       addIcon('local_library', 'white', '42px', 345, 130)
 
+      this.canvas = canvas
       this.dataUrl = canvas.toDataURL('png')
     },
+    share() {
+      this.canvas.toBlob((blob) => {
+        const file = new File([blob], 'yearinreviewserver.png', { type: blob.type + 'cat' })
+        const shareData = {
+          files: [file]
+        }
+        if (navigator.canShare(shareData)) {
+          navigator
+            .share(shareData)
+            .then(() => {
+              console.log('Share success')
+            })
+            .catch((error) => {
+              console.error('Failed to share', error)
+              if (error.name !== 'AbortError') {
+                this.$toast.error('Failed to share: ' + error.message)
+              }
+            })
+        } else {
+          this.$toast.error('Cannot share natively on this device')
+        }
+      })
+    },
     refresh() {
       this.init()
     },

From b376f89ce5bb6483cf74b287ac0d37a9c1929530 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 23 Dec 2023 17:05:44 -0600
Subject: [PATCH 23/24] Version bump v2.7.0

---
 client/package-lock.json | 4 ++--
 client/package.json      | 2 +-
 package-lock.json        | 4 ++--
 package.json             | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 16adf9db4..fb8be23f4 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "audiobookshelf-client",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "audiobookshelf-client",
-      "version": "2.6.0",
+      "version": "2.7.0",
       "license": "ISC",
       "dependencies": {
         "@nuxtjs/axios": "^5.13.6",
diff --git a/client/package.json b/client/package.json
index a13b58158..e404e7d42 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "buildNumber": 1,
   "description": "Self-hosted audiobook and podcast client",
   "main": "index.js",
diff --git a/package-lock.json b/package-lock.json
index 9df54fdde..8bd0b115c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "audiobookshelf",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "audiobookshelf",
-      "version": "2.6.0",
+      "version": "2.7.0",
       "license": "GPL-3.0",
       "dependencies": {
         "axios": "^0.27.2",
diff --git a/package.json b/package.json
index 061e2a7f9..33f483b01 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "buildNumber": 1,
   "description": "Self-hosted audiobook and podcast server",
   "main": "index.js",

From a2db81bf7d07a5b8c5f91cf5dcc4e4395c494fc4 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 23 Dec 2023 17:13:44 -0600
Subject: [PATCH 24/24] Fix share button for year in review short card

---
 client/components/stats/YearInReviewShort.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/stats/YearInReviewShort.vue b/client/components/stats/YearInReviewShort.vue
index daa566a67..18b120874 100644
--- a/client/components/stats/YearInReviewShort.vue
+++ b/client/components/stats/YearInReviewShort.vue
@@ -152,7 +152,7 @@ export default {
     },
     share() {
       this.canvas.toBlob((blob) => {
-        const file = new File([blob], 'yearinreviewserver.png', { type: blob.type + 'cat' })
+        const file = new File([blob], 'yearinreviewshort.png', { type: blob.type })
         const shareData = {
           files: [file]
         }