Version bump 2.0.21

Merge branch 'master' of https://github.com/advplyr/audiobookshelf
Fix:Match tab #708
2026-06-01 16:30:39 +02:00 · 2022-06-09 18:24:03 -05:00 · 2022-06-09 17:56:22 -05:00 · 2022-06-09 17:56:16 -05:00 · 2022-06-09 04:54:08 -05:00 · 2022-06-08 19:15:35 -07:00
203 changed files with 11959 additions and 1783 deletions
@@ -3,8 +3,15 @@
 name: Build and Push Docker Image

 on:
+  # Allows you to run workflow manually from Actions tab
+  workflow_dispatch:
+    inputs:
+      tags:
+        description: 'Docker Tag'
+        required: true
+        default: 'latest'
  push:
-    branches: [master]
+    branches: [main,master]
    tags:
      - 'v*.*.*'
    # Only build when files in these directories have been changed
@@ -13,8 +20,6 @@ on:
      - server/**
      - index.js
      - package.json
-  # Allows you to run workflow manually from Actions tab
-  workflow_dispatch:

 jobs:
  build:
@@ -23,24 +28,25 @@ jobs:

    steps:
      - name: Check out
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3

      - name: Docker meta
        id: meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v4
        with:
          images: advplyr/audiobookshelf,ghcr.io/${{ github.repository_owner }}/audiobookshelf
          tags: |
            type=edge,branch=master
            type=semver,pattern={{version}}
+
      - name: Setup QEMU
-        uses: docker/setup-qemu-action@v1
+        uses: docker/setup-qemu-action@v2

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
-        
+        uses: docker/setup-buildx-action@v2
+
      - name: Cache Docker layers
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ github.sha }}
@@ -48,28 +54,28 @@ jobs:
            ${{ runner.os }}-buildx-

      - name: Login to Dockerhub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_PASSWORD }}
-      
+
      - name: Login to ghcr
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GHCR_PASSWORD }}

      - name: Build image
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v3
        with:
-          tags: ${{ steps.meta.outputs.tags }}
+          tags: ${{ github.event.inputs.tags || steps.meta.outputs.tags }}
          context: .
          platforms: linux/amd64,linux/arm64,linux/arm/v7
          push: true
          cache-from: type=local,src=/tmp/.buildx-cache
          cache-to: type=local,dest=/tmp/.buildx-cache-new,mode=max
-          
+
      - name: Move cache
        run: |
          rm -rf /tmp/.buildx-cache
@@ -2,18 +2,28 @@
 FROM node:16-alpine AS build
 WORKDIR /client
 COPY /client /client
-RUN npm install
+RUN npm ci && npm cache clean --force
 RUN npm run generate

 ### STAGE 1: Build server ###
 FROM node:16-alpine
-RUN apk update && apk add --no-cache --update ffmpeg
 ENV NODE_ENV=production
+RUN apk update && \
+    apk add --no-cache --update \
+    curl \
+    tzdata \
+    ffmpeg
+
 COPY --from=build /client/dist /client/dist
-COPY index.js index.js
-COPY package-lock.json package-lock.json
-COPY package.json package.json
+COPY index.js package* /
 COPY server server
+
 RUN npm ci --only=production
+
 EXPOSE 80
+HEALTHCHECK \
+    --interval=30s \
+    --timeout=3s \
+    --start-period=10s \
+    CMD curl -f http://127.0.0.1/ping || exit 1
 CMD ["npm", "start"]
@@ -1,6 +1,7 @@
@import './fonts.css';
@import './transitions.css';
@import './draggable.css';
+@import './defaultStyles.css';

 :root {
  --bookshelf-texture-img: url(/textures/wood_default.jpg);
@@ -0,0 +1,55 @@
+/*
+
+  This is for setting regular html styles for places where embedding HTML will be
+  like podcast episode descriptions. Otherwise TailwindCSS will have stripped all default markup.
+
+*/
+
+.default-style p {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
+
+.default-style a {
+  text-decoration: none;
+  color: #5985ff;
+}
+
+.default-style ul {
+  display: block;
+  list-style: circle;
+  list-style-type: disc;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 40px;
+}
+
+.default-style ol {
+  display: block;
+  list-style: decimal;
+  list-style-type: decimal;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 40px;
+}
+
+.default-style li {
+  display: list-item;
+  text-align: -webkit-match-parent;
+}
+
+.default-style li::marker {
+  unicode-bidi: isolate;
+  font-variant-numeric: tabular-nums;
+  text-transform: none;
+  text-indent: 0px !important;
+  text-align: start !important;
+  text-align-last: start !important;
+}
@@ -0,0 +1,563 @@
+@charset "UTF-8";
+
+/*
+Trix 1.3.1
+Copyright © 2020 Basecamp, LLC
+http://trix-editor.org/*/
+trix-editor {
+  border: 1px solid rgb(75, 85, 99);
+  border-radius: 3px;
+  background: rgb(35, 35, 35);
+  margin: 0;
+  padding: 0.4em 0.6em;
+  min-height: 5em;
+  outline: none;
+}
+
+trix-toolbar * {
+  box-sizing: border-box;
+}
+
+trix-toolbar .trix-button-row {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  overflow-x: auto;
+}
+
+trix-toolbar .trix-button-group {
+  display: flex;
+  margin-bottom: 10px;
+  border: 1px solid rgb(75, 85, 99);
+  border-top-color: rgb(75, 85, 99);
+  border-bottom-color: rgb(75, 85, 99);
+  border-radius: 3px;
+}
+
+trix-toolbar .trix-button-group:not(:first-child) {
+  margin-left: 1.5vw;
+}
+
+@media (max-device-width: 768px) {
+  trix-toolbar .trix-button-group:not(:first-child) {
+    margin-left: 0;
+  }
+}
+
+trix-toolbar .trix-button-group-spacer {
+  flex-grow: 1;
+}
+
+@media (max-device-width: 768px) {
+  trix-toolbar .trix-button-group-spacer {
+    display: none;
+  }
+}
+
+trix-toolbar .trix-button {
+  position: relative;
+  float: left;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 0.75em;
+  font-weight: 600;
+  white-space: nowrap;
+  padding: 0 0.5em;
+  margin: 0;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+trix-toolbar .trix-button:not(:first-child) {
+  border-left: 1px solid rgb(75, 85, 99);
+}
+
+trix-toolbar .trix-button.trix-active {
+  background: #bbb;
+  color: black;
+}
+
+trix-toolbar .trix-button:not(:disabled) {
+  cursor: pointer;
+  background: rgb(35, 35, 35);
+}
+
+trix-toolbar .trix-button:disabled {
+  color: rgba(0, 0, 0, 0.25);
+}
+
+@media (max-device-width: 768px) {
+  trix-toolbar .trix-button {
+    letter-spacing: -0.01em;
+    padding: 0 0.3em;
+  }
+}
+
+trix-toolbar .trix-button--icon {
+  font-size: inherit;
+  width: 2.6em;
+  height: 1.6em;
+  max-width: calc(0.8em + 4vw);
+  text-indent: -9999px;
+}
+
+@media (max-device-width: 768px) {
+  trix-toolbar .trix-button--icon {
+    height: 2em;
+    max-width: calc(0.8em + 3.5vw);
+  }
+}
+
+trix-toolbar .trix-button--icon::before {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.6;
+  content: "";
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  filter: invert(100%);
+}
+
+@media (max-device-width: 768px) {
+  trix-toolbar .trix-button--icon::before {
+    right: 6%;
+    left: 6%;
+  }
+}
+
+trix-toolbar .trix-button--icon.trix-active::before {
+  opacity: 1;
+}
+
+trix-toolbar .trix-button--icon:disabled::before {
+  opacity: 0.125;
+}
+
+trix-toolbar .trix-button--icon-attach::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
+  top: 8%;
+  bottom: 4%;
+}
+
+trix-toolbar .trix-button--icon-bold::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-italic::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-link::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-strike::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-quote::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-heading-1::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-code::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-bullet-list::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-number-list::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-undo::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-redo::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-decrease-nesting-level::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-button--icon-increase-nesting-level::before {
+  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
+}
+
+trix-toolbar .trix-dialogs {
+  position: relative;
+}
+
+trix-toolbar .trix-dialog {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size: 0.75em;
+  padding: 15px 10px;
+  background: rgb(48, 48, 48);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border: 1px solid rgb(112, 112, 112);
+  border-radius: 5px;
+  z-index: 5;
+}
+
+trix-toolbar .trix-input--dialog {
+  font-size: inherit;
+  font-weight: normal;
+  padding: 0.5em 0.8em;
+  margin: 0 10px 0 0;
+  border-radius: 3px;
+  border: 1px solid #bbb;
+  background-color: rgb(95, 95, 95);
+  box-shadow: none;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+trix-toolbar .trix-input--dialog.validate:invalid {
+  box-shadow: #F00 0px 0px 1.5px 1px;
+}
+
+trix-toolbar .trix-button--dialog {
+  font-size: inherit;
+  padding: 0.5em;
+  border-bottom: none;
+  color: #eee;
+}
+
+trix-toolbar .trix-dialog--link {
+  max-width: 600px;
+}
+
+trix-toolbar .trix-dialog__link-fields {
+  display: flex;
+  align-items: baseline;
+}
+
+trix-toolbar .trix-dialog__link-fields .trix-input {
+  flex: 1;
+}
+
+trix-toolbar .trix-dialog__link-fields .trix-button-group {
+  flex: 0 0 content;
+  margin: 0;
+}
+
+trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+trix-editor [data-trix-mutable]::-moz-selection,
+trix-editor [data-trix-cursor-target]::-moz-selection,
+trix-editor [data-trix-mutable] ::-moz-selection {
+  background: none;
+}
+
+trix-editor [data-trix-mutable]::selection,
+trix-editor [data-trix-cursor-target]::selection,
+trix-editor [data-trix-mutable] ::selection {
+  background: none;
+}
+
+trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
+  background: highlight;
+}
+
+trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
+  background: highlight;
+}
+
+trix-editor [data-trix-mutable].attachment.attachment--file {
+  box-shadow: 0 0 0 2px highlight;
+  border-color: transparent;
+}
+
+trix-editor [data-trix-mutable].attachment img {
+  box-shadow: 0 0 0 2px highlight;
+}
+
+trix-editor .attachment {
+  position: relative;
+}
+
+trix-editor .attachment:hover {
+  cursor: default;
+}
+
+trix-editor .attachment--preview .attachment__caption:hover {
+  cursor: text;
+}
+
+trix-editor .attachment__progress {
+  position: absolute;
+  z-index: 1;
+  height: 20px;
+  top: calc(50% - 10px);
+  left: 5%;
+  width: 90%;
+  opacity: 0.9;
+  transition: opacity 200ms ease-in;
+}
+
+trix-editor .attachment__progress[value="100"] {
+  opacity: 0;
+}
+
+trix-editor .attachment__caption-editor {
+  display: inline-block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  color: inherit;
+  text-align: center;
+  vertical-align: top;
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+trix-editor .attachment__toolbar {
+  position: absolute;
+  z-index: 1;
+  top: -0.9em;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+
+trix-editor .trix-button-group {
+  display: inline-flex;
+}
+
+trix-editor .trix-button {
+  position: relative;
+  float: left;
+  color: #666;
+  white-space: nowrap;
+  font-size: 80%;
+  padding: 0 0.8em;
+  margin: 0;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+trix-editor .trix-button:not(:first-child) {
+  border-left: 1px solid #ccc;
+}
+
+trix-editor .trix-button.trix-active {
+  background: #cbeefa;
+}
+
+trix-editor .trix-button:not(:disabled) {
+  cursor: pointer;
+}
+
+trix-editor .trix-button--remove {
+  text-indent: -9999px;
+  display: inline-block;
+  padding: 0;
+  outline: none;
+  width: 1.8em;
+  height: 1.8em;
+  line-height: 1.8em;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 2px solid highlight;
+  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
+}
+
+trix-editor .trix-button--remove::before {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0.7;
+  content: "";
+  background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 90%;
+}
+
+trix-editor .trix-button--remove:hover {
+  border-color: #333;
+}
+
+trix-editor .trix-button--remove:hover::before {
+  opacity: 1;
+}
+
+trix-editor .attachment__metadata-container {
+  position: relative;
+}
+
+trix-editor .attachment__metadata {
+  position: absolute;
+  left: 50%;
+  top: 2em;
+  transform: translate(-50%, 0);
+  max-width: 90%;
+  padding: 0.1em 0.6em;
+  font-size: 0.8em;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 3px;
+}
+
+trix-editor .attachment__metadata .attachment__name {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+trix-editor .attachment__metadata .attachment__size {
+  margin-left: 0.2em;
+  white-space: nowrap;
+}
+
+.trix-content {
+  line-height: 1.5;
+}
+
+.trix-content * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.trix-content h1 {
+  font-size: 1.2em;
+  line-height: 1.2;
+}
+
+.trix-content blockquote {
+  border: 0 solid #ccc;
+  border-left-width: 0.3em;
+  margin-left: 0.3em;
+  padding-left: 0.6em;
+}
+
+.trix-content [dir=rtl] blockquote,
+.trix-content blockquote[dir=rtl] {
+  border-width: 0;
+  border-right-width: 0.3em;
+  margin-right: 0.3em;
+  padding-right: 0.6em;
+}
+
+.trix-content li {
+  margin-left: 1em;
+}
+
+.trix-content [dir=rtl] li {
+  margin-right: 1em;
+}
+
+.trix-content pre {
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+  font-family: monospace;
+  font-size: 0.9em;
+  padding: 0.5em;
+  white-space: pre;
+  background-color: #eee;
+  overflow-x: auto;
+}
+
+.trix-content img {
+  max-width: 100%;
+  height: auto;
+}
+
+.trix-content .attachment {
+  display: inline-block;
+  position: relative;
+  max-width: 100%;
+}
+
+.trix-content .attachment a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.trix-content .attachment a:hover,
+.trix-content .attachment a:visited:hover {
+  color: inherit;
+}
+
+.trix-content .attachment__caption {
+  text-align: center;
+}
+
+.trix-content .attachment__caption .attachment__name+.attachment__size::before {
+  content: ' · ';
+}
+
+.trix-content .attachment--preview {
+  width: 100%;
+  text-align: center;
+}
+
+.trix-content .attachment--preview .attachment__caption {
+  color: #666;
+  font-size: 0.9em;
+  line-height: 1.2;
+}
+
+.trix-content .attachment--file {
+  color: #333;
+  line-height: 1;
+  margin: 0 2px 2px 2px;
+  padding: 0.4em 1em;
+  border: 1px solid #bbb;
+  border-radius: 5px;
+}
+
+.trix-content .attachment-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.trix-content .attachment-gallery .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
@@ -147,9 +147,6 @@ export default {
    }
  },
  methods: {
-    toggleBookshelfTexture() {
-      this.$store.dispatch('setBookshelfTexture', 'wood2.png')
-    },
    cancelSelectionMode() {
      if (this.processingBatchDelete) return
      this.$store.commit('setSelectedLibraryItems', [])
@@ -2,10 +2,6 @@
  <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-30" />
-    <!-- Experimental Bookshelf Texture -->
-    <div v-show="showExperimentalFeatures && !isAlternativeBookshelfView" class="fixed bottom-4 right-28 z-40">
-      <div class="rounded-full py-1 bg-primary hover:bg-bg cursor-pointer px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent @click="showBookshelfTextureModal"><p class="text-sm py-0.5">Texture</p></div>
-    </div>

    <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 font-book mb-4 py-4">{{ libraryName }} Library is empty!</p>
@@ -100,9 +96,6 @@ export default {
    }
  },
  methods: {
-    showBookshelfTextureModal() {
-      this.$store.commit('globals/setShowBookshelfTextureModal', true)
-    },
    async init() {
      this.wrapperClientWidth = this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0

@@ -61,6 +61,10 @@
        <p>Search results for "{{ searchQuery }}"</p>
        <div class="flex-grow" />
      </template>
+      <template v-else-if="page === 'authors'">
+        <div class="flex-grow" />
+        <ui-btn v-if="userCanUpdate && authors && authors.length" :loading="processingAuthors" color="primary" small @click="matchAllAuthors">Match All Authors</ui-btn>
+      </template>
    </div>
  </div>
 </template>
@@ -75,7 +79,11 @@ export default {
      default: () => null
    },
    searchQuery: String,
-    viewMode: String
+    viewMode: String,
+    authors: {
+      type: Array,
+      default: () => []
+    }
  },
  data() {
    return {
@@ -85,13 +93,17 @@ export default {
      keywordFilter: null,
      keywordTimeout: null,
      processingSeries: false,
-      processingIssues: false
+      processingIssues: false,
+      processingAuthors: false
    }
  },
  computed: {
    userCanDelete() {
      return this.$store.getters['user/getUserCanDelete']
    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
    isPodcast() {
      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
    },
@@ -147,6 +159,35 @@ export default {
    }
  },
  methods: {
+    async matchAllAuthors() {
+      this.processingAuthors = true
+
+      for (const author of this.authors) {
+        const payload = {}
+        if (author.asin) payload.asin = author.asin
+        else payload.q = author.name
+        console.log('Payload', payload, 'author', author)
+
+        this.$eventBus.$emit(`searching-author-${author.id}`, true)
+
+        var response = await this.$axios.$post(`/api/authors/${author.id}/match`, payload).catch((error) => {
+          console.error('Failed', error)
+          return null
+        })
+        if (!response) {
+          console.error(`Author ${author.name} not found`)
+          this.$toast.error(`Author ${author.name} not found`)
+        } else if (response.updated) {
+          if (response.author.imagePath) console.log(`Author ${response.author.name} was updated`)
+          else console.log(`Author ${response.author.name} was updated (no image found)`)
+        } else {
+          console.log(`No updates were made for Author ${response.author.name}`)
+        }
+
+        this.$eventBus.$emit(`searching-author-${author.id}`, false)
+      }
+      this.processingAuthors = false
+    },
    removeAllIssues() {
      if (confirm(`Are you sure you want to remove all library items with issues?\n\nNote: This will not delete any files`)) {
        this.processingIssues = true
@@ -64,6 +64,11 @@ export default {
          title: 'Users',
          path: '/config/users'
        },
+        {
+          id: 'config-sessions',
+          title: 'Sessions',
+          path: '/config/sessions'
+        },
        {
          id: 'config-backups',
          title: 'Backups',
@@ -22,13 +22,6 @@
    </div>

    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-30" />
-
-    <!-- Experimental Bookshelf Texture -->
-    <div v-show="showExperimentalFeatures && !isAlternativeBookshelfView" class="fixed bottom-4 right-28 z-40">
-      <div class="rounded-full py-1 bg-primary hover:bg-bg cursor-pointer px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent @click="showBookshelfTextureModal">
-        <p class="text-sm py-0.5">Texture</p>
-      </div>
-    </div>
  </div>
 </template>

@@ -206,9 +199,6 @@ export default {
    }
  },
  methods: {
-    showBookshelfTextureModal() {
-      this.$store.commit('globals/setShowBookshelfTextureModal', true)
-    },
    clearFilter() {
      this.$store.dispatch('user/updateUserSettings', { filterBy: 'all' })
    },
@@ -73,6 +73,12 @@
        <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
      </div>
    </nuxt-link>
+
+    <div class="w-full h-12 px-1 py-2 border-t border-black border-opacity-20 absolute left-0" :style="{ bottom: streamLibraryItem ? '240px' : '65px' }">
+      <p class="font-mono text-xs text-center text-gray-300 leading-3 mb-1">v{{ $config.version }}</p>
+      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xxs text-center block leading-3">Update</a>
+      <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
+    </div>
  </div>
 </template>

@@ -82,6 +88,12 @@ export default {
    return {}
  },
  computed: {
+    Source() {
+      return this.$store.state.Source
+    },
+    isMobileLandscape() {
+      return this.$store.state.globals.isMobileLandscape
+    },
    isShowingBookshelfToolbar() {
      if (!this.$route.name) return false
      return this.$route.name.startsWith('library')
@@ -131,6 +143,21 @@ export default {
    },
    numIssues() {
      return this.$store.state.libraries.issues || 0
+    },
+    versionData() {
+      return this.$store.state.versionData || {}
+    },
+    hasUpdate() {
+      return !!this.versionData.hasUpdate
+    },
+    latestVersion() {
+      return this.versionData.latestVersion
+    },
+    githubTagUrl() {
+      return this.versionData.githubTagUrl
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
    }
  },
  methods: {},
@@ -1,14 +1,15 @@
 <template>
  <div v-if="streamLibraryItem" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-48 sm:h-44 md:h-40 z-40 bg-primary px-4 pb-1 md:pb-4 pt-2">
-    <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="absolute left-4 cursor-pointer" :style="{ top: bookCoverPosTop + 'px' }">
+    <div id="videoDock" />
+    <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-4 cursor-pointer" :style="{ top: bookCoverPosTop + 'px' }">
      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
    </nuxt-link>
-    <div class="flex items-start pl-24 mb-6 md:mb-0">
+    <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : 'pl-24'">
      <div>
        <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-base sm:text-lg">
          {{ title }}
        </nuxt-link>
-        <div class="text-gray-400 flex items-center">
+        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center">
          <span class="material-icons text-sm">person</span>
          <p v-if="podcastAuthor">{{ podcastAuthor }}</p>
          <p v-else-if="authors.length" class="pl-1.5 text-sm sm:text-base">
@@ -25,7 +26,7 @@
      <div class="flex-grow" />
      <span class="material-icons px-2 py-1 md:p-4 cursor-pointer" @click="closePlayer">close</span>
    </div>
-    <audio-player
+    <player-ui
      ref="audioPlayer"
      :chapters="chapters"
      :paused="!isPlaying"
@@ -70,7 +71,8 @@ export default {
      sleepTimerRemaining: 0,
      sleepTimer: null,
      displayTitle: null,
-      initialPlaybackRate: 1
+      initialPlaybackRate: 1,
+      syncFailedToast: null
    }
  },
  computed: {
@@ -379,6 +381,10 @@ export default {
    },
    pauseItem() {
      this.playerHandler.pause()
+    },
+    showFailedProgressSyncs() {
+      if (!isNaN(this.syncFailedToast)) this.$toast.dismiss(this.syncFailedToast)
+      this.syncFailedToast = this.$toast('Progress is not being synced. Restart playback', { timeout: false, type: 'error' })
    }
  },
  mounted() {
@@ -101,8 +101,16 @@ export default {
        this.$toast.info('No updates were made for Author')
      }
      this.searching = false
+    },
+    setSearching(isSearching) {
+      this.searching = isSearching
    }
  },
-  mounted() {}
+  mounted() {
+    this.$eventBus.$on(`searching-author-${this.authorId}`, this.setSearching)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
+  }
 }
 </script>
@@ -0,0 +1,71 @@
+<template>
+  <div ref="wrapper" class="w-full p-2 border border-white border-opacity-10 rounded">
+    <div class="flex">
+      <div class="w-16 min-w-16">
+        <div class="w-full h-16 bg-primary">
+          <img v-if="image" :src="image" class="w-full h-full object-cover" />
+        </div>
+        <p class="text-gray-400 text-xxs pt-1 text-center">{{ numEpisodes }} Episodes</p>
+      </div>
+      <div class="flex-grow pl-2" :style="{ maxWidth: detailsWidth + 'px' }">
+        <p class="mb-1">{{ title }}</p>
+        <p class="text-xs mb-1 text-gray-300">{{ author }}</p>
+        <p class="text-xs mb-2 text-gray-200">{{ description }}</p>
+        <p class="text-xs truncate text-blue-200">
+          Folder: <span class="font-mono">{{ folderPath }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    feed: {
+      type: Object,
+      default: () => {}
+    },
+    libraryFolderPath: String
+  },
+  data() {
+    return {
+      width: 900
+    }
+  },
+  computed: {
+    title() {
+      return this.metadata.title || 'No Title'
+    },
+    image() {
+      return this.metadata.imageUrl
+    },
+    description() {
+      return this.metadata.description || ''
+    },
+    author() {
+      return this.metadata.author || ''
+    },
+    metadata() {
+      return this.feed || {}
+    },
+    numEpisodes() {
+      return this.feed.numEpisodes || 0
+    },
+    folderPath() {
+      if (!this.libraryFolderPath) return ''
+      return `${this.libraryFolderPath}\\${this.$sanitizeFilename(this.title)}`
+    },
+    detailsWidth() {
+      return this.width - 85
+    }
+  },
+  methods: {},
+  updated() {
+    this.width = this.$refs.wrapper.clientWidth
+  },
+  mounted() {
+    this.width = this.$refs.wrapper.clientWidth
+  }
+}
+</script>
@@ -214,7 +214,7 @@ export default {
      return this.filterData.languages || []
    },
    progress() {
-      return ['Finished', 'In Progress', 'Not Started']
+      return ['Finished', 'In Progress', 'Not Started', 'Not Finished']
    },
    missing() {
      return ['ASIN', 'ISBN', 'Subtitle', 'Author', 'Publish Year', 'Series', 'Description', 'Genres', 'Tags', 'Narrator', 'Publisher', 'Language']
@@ -65,6 +65,15 @@
              </div>
            </div>

+            <div class="flex items-center my-2 max-w-md">
+              <div class="w-1/2">
+                <p>Can Access Explicit Content</p>
+              </div>
+              <div class="w-1/2">
+                <ui-toggle-switch v-model="newUser.permissions.accessExplicitContent" />
+              </div>
+            </div>
+
            <div class="flex items-center my-2 max-w-md">
              <div class="w-1/2">
                <p>Can Access All Libraries</p>
@@ -1,68 +0,0 @@
-<template>
-  <modals-modal v-model="show" name="textures" :width="'40vw'" :height="'unset'" :bg-opacity="10" :processing="processing">
-    <template #outer>
-      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
-        <p class="font-book text-3xl text-white truncate">Bookshelf Texture</p>
-      </div>
-    </template>
-    <div class="px-4 w-full max-w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300" @mousedown.prevent @mouseup.prevent @mousemove.prevent>
-      <h1 class="text-2xl mb-2">Select a bookshelf texture (For testing only)</h1>
-      <div class="overflow-y-hidden overflow-x-auto">
-        <div class="flex -mx-1">
-          <template v-for="texture in textures">
-            <div :key="texture" class="relative mx-1" style="height: 180px; width: 180px; min-width: 180px" @mousedown.prevent @mouseup.prevent>
-              <img :src="texture" class="h-full object-cover cursor-pointer" @click="setTexture(texture)" />
-              <div v-if="texture === selectedBookshelfTexture" class="absolute top-0 left-0 flex items-center justify-center w-full h-full bg-black bg-opacity-10">
-                <span class="material-icons text-4xl text-success">check</span>
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-      <!-- <div class="flex pt-4">
-        <div class="flex-grow" />
-        <ui-btn color="success" type="submit">Submit</ui-btn>
-      </div> -->
-    </div>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      textures: ['/textures/wood_default.jpg', '/textures/wood1.png', '/textures/wood2.png', '/textures/wood3.png', '/textures/wood4.png', '/textures/leather1.jpg'],
-      processing: false
-    }
-  },
-  watch: {
-    show: {
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.$store.state.globals.showBookshelfTextureModal
-      },
-      set(val) {
-        this.$store.commit('globals/setShowBookshelfTextureModal', val)
-      }
-    },
-    selectedBookshelfTexture() {
-      return this.$store.state.selectedBookshelfTexture
-    }
-  },
-  methods: {
-    init() {},
-    setTexture(img) {
-      this.$store.dispatch('setBookshelfTexture', img)
-    }
-  },
-  mounted() {}
-}
-</script>
@@ -0,0 +1,120 @@
+<template>
+  <div ref="wrapper" class="hidden absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 rounded-lg items-center justify-center" style="z-index: 51" @click="clickClose">
+    <div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300">
+      <span class="material-icons text-4xl">close</span>
+    </div>
+    <div ref="content" class="text-white">
+      <form v-if="selectedSeries" @submit.prevent="submitSeriesForm">
+        <div class="bg-bg rounded-lg p-8" @click.stop>
+          <div class="flex">
+            <div class="flex-grow p-1 min-w-80">
+              <ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!selectedSeries.id.startsWith('new')" label="Series Name" />
+            </div>
+            <div class="w-40 p-1">
+              <ui-text-input-with-label v-model="selectedSeries.sequence" label="Sequence" />
+            </div>
+          </div>
+          <div class="flex justify-end mt-2 p-1">
+            <ui-btn type="submit">Save</ui-btn>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    selectedSeries: {
+      type: Object,
+      default: () => {}
+    },
+    existingSeriesNames: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      el: null,
+      content: null
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        this.$nextTick(this.setShow)
+      } else {
+        this.setHide()
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    submitSeriesForm() {
+      if (this.$refs.newSeriesSelect) {
+        this.$refs.newSeriesSelect.blur()
+      }
+
+      this.$emit('submit')
+    },
+    clickClose() {
+      this.show = false
+    },
+    hotkey(action) {
+      if (action === this.$hotkeys.Modal.CLOSE) {
+        this.show = false
+      }
+    },
+    setShow() {
+      if (!this.el || !this.content) {
+        this.init()
+      }
+      if (!this.el || !this.content) {
+        return
+      }
+
+      document.body.appendChild(this.el)
+      setTimeout(() => {
+        this.content.style.transform = 'scale(1)'
+      }, 10)
+      document.documentElement.classList.add('modal-open')
+
+      this.$store.commit('setInnerModalOpen', true)
+      this.$eventBus.$on('modal-hotkey', this.hotkey)
+    },
+    setHide() {
+      if (this.content) this.content.style.transform = 'scale(0)'
+      if (this.el) this.el.remove()
+      document.documentElement.classList.remove('modal-open')
+
+      this.$store.commit('setInnerModalOpen', false)
+      this.$eventBus.$off('modal-hotkey', this.hotkey)
+    },
+    init() {
+      this.el = this.$refs.wrapper
+      this.content = this.$refs.content
+      if (this.content && this.el) {
+        this.el.classList.remove('hidden')
+        this.el.classList.add('flex')
+        this.content.style.transform = 'scale(0)'
+        this.content.style.transition = 'transform 0.25s cubic-bezier(0.16, 1, 0.3, 1)'
+        this.el.style.opacity = 1
+        this.el.remove()
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
@@ -0,0 +1,153 @@
+<template>
+  <modals-modal v-model="show" name="listening-session-modal" :width="700" :height="'unset'">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">Session {{ _session.id }}</p>
+      </div>
+    </template>
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
+      <div class="flex items-center">
+        <p class="text-base text-gray-200">{{ _session.displayTitle }}</p>
+        <p v-if="_session.displayAuthor" class="text-xs text-gray-400 px-4">by {{ _session.displayAuthor }}</p>
+      </div>
+
+      <div class="w-full h-px bg-white bg-opacity-10 my-4" />
+
+      <div class="flex flex-wrap mb-4">
+        <div class="w-full md:w-2/3">
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2">Details</p>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Started At</div>
+            <div class="px-1">
+              {{ $formatDate(_session.startedAt, 'MMMM do, yyyy HH:mm') }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Updated At</div>
+            <div class="px-1">
+              {{ $formatDate(_session.updatedAt, 'MMMM do, yyyy HH:mm') }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Listened for</div>
+            <div class="px-1">
+              {{ $elapsedPrettyExtended(_session.timeListening) }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Start Time</div>
+            <div class="px-1">
+              {{ $secondsToTimestamp(_session.startTime) }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Last Time</div>
+            <div class="px-1">
+              {{ $secondsToTimestamp(_session.currentTime) }}
+            </div>
+          </div>
+
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Item</p>
+          <div v-if="_session.libraryId" class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Library Id</div>
+            <div class="px-1">
+              {{ _session.libraryId }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Library Item Id</div>
+            <div class="px-1">
+              {{ _session.libraryItemId }}
+            </div>
+          </div>
+          <div v-if="_session.episodeId" class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Episode Id</div>
+            <div class="px-1">
+              {{ _session.episodeId }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Media Type</div>
+            <div class="px-1">
+              {{ _session.mediaType }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Duration</div>
+            <div class="px-1">
+              {{ $elapsedPretty(_session.duration) }}
+            </div>
+          </div>
+        </div>
+        <div class="w-full md:w-1/3">
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">User</p>
+          <p class="mb-1">{{ _session.userId }}</p>
+
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Media Player</p>
+          <p class="mb-1">{{ playMethodName }}</p>
+          <p class="mb-1">{{ _session.mediaPlayer }}</p>
+
+          <p v-if="hasDeviceInfo" class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Device</p>
+          <p v-if="deviceInfo.ipAddress" class="mb-1">{{ deviceInfo.ipAddress }}</p>
+          <p v-if="osDisplayName" class="mb-1">{{ osDisplayName }}</p>
+          <p v-if="deviceInfo.browserName" class="mb-1">{{ deviceInfo.browserName }}</p>
+          <p v-if="clientDisplayName" class="mb-1">{{ clientDisplayName }}</p>
+          <p v-if="deviceInfo.sdkVersion" class="mb-1">SDK Version: {{ deviceInfo.sdkVersion }}</p>
+          <p v-if="deviceInfo.deviceType" class="mb-1">Type: {{ deviceInfo.deviceType }}</p>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    session: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    _session() {
+      return this.session || {}
+    },
+    deviceInfo() {
+      return this._session.deviceInfo || {}
+    },
+    hasDeviceInfo() {
+      return Object.keys(this.deviceInfo).length
+    },
+    osDisplayName() {
+      if (!this.deviceInfo.osName) return null
+      return `${this.deviceInfo.osName} ${this.deviceInfo.osVersion}`
+    },
+    clientDisplayName() {
+      if (!this.deviceInfo.manufacturer || !this.deviceInfo.model) return null
+      return `${this.deviceInfo.manufacturer} ${this.deviceInfo.model}`
+    },
+    playMethodName() {
+      const playMethod = this._session.playMethod
+      if (playMethod === this.$constants.PlayMethod.DIRECTPLAY) return 'Direct Play'
+      else if (playMethod === this.$constants.PlayMethod.TRANSCODE) return 'Transcode'
+      else if (playMethod === this.$constants.PlayMethod.DIRECTSTREAM) return 'Direct Stream'
+      else if (playMethod === this.$constants.PlayMethod.LOCAL) return 'Local'
+      return 'Unknown'
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
@@ -104,6 +104,7 @@ export default {
      }
    },
    hotkey(action) {
+      if (this.$store.state.innerModalOpen) return
      if (action === this.$hotkeys.Modal.CLOSE) {
        this.show = false
      }
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full overflow-hidden px-4 py-6 relative">
+  <div id="match-wrapper" class="w-full h-full overflow-hidden px-4 py-6 relative">
    <form @submit.prevent="submitSearch">
      <div class="flex items-center justify-start -mx-1 h-20">
        <div class="w-40 px-1">
@@ -87,7 +87,7 @@
        <div v-if="selectedMatch.series" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.series" />
          <div class="flex-grow ml-4">
-            <ui-text-input-with-label v-model="selectedMatch.series" :disabled="!selectedMatchUsage.series" label="Series" />
+            <widgets-series-input-widget v-model="selectedMatch.series" />
            <p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.seriesName || '' }}</p>
          </div>
        </div>
@@ -95,6 +95,27 @@
          <ui-checkbox v-model="selectedMatchUsage.volumeNumber" />
          <ui-text-input-with-label v-model="selectedMatch.volumeNumber" :disabled="!selectedMatchUsage.volumeNumber" label="Volume Number" class="flex-grow ml-4" />
        </div>
+        <div v-if="selectedMatch.genres" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.genres" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.genres" :disabled="!selectedMatchUsage.genres" label="Genres" />
+            <p v-if="mediaMetadata.genresList" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.genresList || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.tags" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.tags" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.tags" :disabled="!selectedMatchUsage.tags" label="Tags" />
+            <p v-if="mediaMetadata.tagsList" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.tagsList || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.language" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.language" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.language" :disabled="!selectedMatchUsage.language" label="Language" />
+            <p v-if="mediaMetadata.language" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.language || '' }}</p>
+          </div>
+        </div>
        <div v-if="selectedMatch.isbn" class="flex items-center py-2">
          <ui-checkbox v-model="selectedMatchUsage.isbn" />
          <div class="flex-grow ml-4">
@@ -177,6 +198,10 @@ export default {
        publishedYear: true,
        series: true,
        volumeNumber: true,
+        genres: true,
+        tags: true,
+        language: true,
+        explicit: true,
        asin: true,
        isbn: true,
        // Podcast specific
@@ -204,6 +229,22 @@ export default {
        this.$emit('update:processing', val)
      }
    },
+    seriesItems: {
+      get() {
+        return this.selectedMatch.series.map((se) => {
+          return {
+            id: `new-${Math.floor(Math.random() * 10000)}`,
+            displayName: se.volumeNumber ? `${se.series} #${se.volumeNumber}` : se.series,
+            name: se.series,
+            sequence: se.volumeNumber || ''
+          }
+        })
+      },
+      set(val) {
+        console.log('set series items', val)
+        this.selectedMatch.series = val
+      }
+    },
    bookCoverAspectRatio() {
      return this.$store.getters['getBookCoverAspectRatio']
    },
@@ -294,6 +335,10 @@ export default {
        publishedYear: true,
        series: true,
        volumeNumber: true,
+        genres: true,
+        tags: true,
+        language: true,
+        explicit: true,
        asin: true,
        isbn: true,
        // Podcast specific
@@ -320,36 +365,82 @@ export default {
      else this.provider = localStorage.getItem('book-provider') || 'google'
    },
    selectMatch(match) {
+      if (match) {
+        if (match.series) {
+          if (!match.series.length) {
+            delete match.series
+          } else {
+            match.series = match.series.map((se) => {
+              return {
+                id: `new-${Math.floor(Math.random() * 10000)}`,
+                displayName: se.volumeNumber ? `${se.series} #${se.volumeNumber}` : se.series,
+                name: se.series,
+                sequence: se.volumeNumber || ''
+              }
+            })
+          }
+        }
+        if (match.genres && Array.isArray(match.genres)) {
+          match.genres = match.genres.join(',')
+        }
+      }
+
+      console.log('Select Match', match)
      this.selectedMatch = match
    },
    buildMatchUpdatePayload() {
      var updatePayload = {}
+      updatePayload.metadata = {}

      var volumeNumber = this.selectedMatchUsage.volumeNumber ? this.selectedMatch.volumeNumber || null : null
      for (const key in this.selectedMatchUsage) {
        if (this.selectedMatchUsage[key] && this.selectedMatch[key]) {
          if (key === 'series') {
-            var seriesItem = {
-              id: `new-${Math.floor(Math.random() * 10000)}`,
-              name: this.selectedMatch[key],
-              sequence: volumeNumber
+            var seriesPayload = []
+            if (!Array.isArray(this.selectedMatch[key])) {
+              seriesPayload.push({
+                id: `new-${Math.floor(Math.random() * 10000)}`,
+                name: this.selectedMatch[key],
+                sequence: volumeNumber
+              })
+            } else {
+              this.selectedMatch[key].forEach((seriesItem) =>
+                seriesPayload.push({
+                  id: seriesItem.id,
+                  name: seriesItem.name,
+                  sequence: seriesItem.sequence
+                })
+              )
            }
-            updatePayload.series = [seriesItem]
+
+            updatePayload.metadata.series = seriesPayload
          } else if (key === 'author' && !this.isPodcast) {
-            var authorItem = {
-              id: `new-${Math.floor(Math.random() * 10000)}`,
-              name: this.selectedMatch[key]
+            var authors = this.selectedMatch[key]
+            if (!Array.isArray(authors)) {
+              authors = authors.split(',').map((au) => au.trim())
            }
-            updatePayload.authors = [authorItem]
+            var authorPayload = []
+            authors.forEach((authorName) =>
+              authorPayload.push({
+                id: `new-${Math.floor(Math.random() * 10000)}`,
+                name: authorName
+              })
+            )
+            updatePayload.metadata.authors = authorPayload
          } else if (key === 'narrator') {
-            updatePayload.narrators = [this.selectedMatch[key]]
+            updatePayload.metadata.narrators = [this.selectedMatch[key]]
+          } else if (key === 'genres') {
+            updatePayload.metadata.genres = this.selectedMatch[key].split(',').map((v) => v.trim())
+          } else if (key === 'tags') {
+            updatePayload.tags = this.selectedMatch[key].split(',').map((v) => v.trim())
          } else if (key === 'itunesId') {
-            updatePayload.itunesId = Number(this.selectedMatch[key])
-          } else if (key !== 'volumeNumber') {
-            updatePayload[key] = this.selectedMatch[key]
+            updatePayload.metadata.itunesId = Number(this.selectedMatch[key])
+          } else {
+            updatePayload.metadata[key] = this.selectedMatch[key]
          }
        }
      }
+
      return updatePayload
    },
    async submitMatchUpdate() {
@@ -357,11 +448,13 @@ export default {
      if (!Object.keys(updatePayload).length) {
        return
      }
+
+      console.log('Match payload', updatePayload)
      this.isProcessing = true

-      if (updatePayload.cover) {
+      if (updatePayload.metadata.cover) {
        var coverPayload = {
-          url: updatePayload.cover
+          url: updatePayload.metadata.cover
        }
        var success = await this.$axios.$post(`/api/items/${this.libraryItemId}/cover`, coverPayload).catch((error) => {
          console.error('Failed to update', error)
@@ -373,13 +466,11 @@ export default {
          this.$toast.error('Item Cover Failed to Update')
        }
        console.log('Updated cover')
-        delete updatePayload.cover
+        delete updatePayload.metadata.cover
      }

      if (Object.keys(updatePayload).length) {
-        var mediaUpdatePayload = {
-          metadata: updatePayload
-        }
+        var mediaUpdatePayload = updatePayload
        var updateResult = await this.$axios.$patch(`/api/items/${this.libraryItemId}/media`, mediaUpdatePayload).catch((error) => {
          console.error('Failed to update', error)
          return false
@@ -5,7 +5,7 @@
        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
      </div>
    </template>
-    <div ref="wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
+    <div ref="wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-auto" style="max-height: 80vh">
      <div class="flex flex-wrap">
        <div class="w-1/5 p-1">
          <ui-text-input-with-label v-model="newEpisode.season" label="Season" />
@@ -25,8 +25,8 @@
        <div class="w-full p-1">
          <ui-textarea-with-label v-model="newEpisode.subtitle" label="Subtitle" :rows="3" />
        </div>
-        <div class="w-full p-1">
-          <ui-textarea-with-label v-model="newEpisode.description" label="Description" :rows="8" />
+        <div class="w-full p-1 default-style">
+          <ui-rich-text-editor v-if="show" label="Description" v-model="newEpisode.description" />
        </div>
      </div>
      <div class="flex justify-end pt-4">
@@ -0,0 +1,168 @@
+<template>
+  <modals-modal v-model="show" name="opml-feeds-modal" :width="1000" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <div ref="wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
+      <div class="w-full p-4">
+        <div class="flex items-center -mx-2 mb-2">
+          <div class="w-full md:w-2/3 p-2">
+            <ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="processing" label="Folder" />
+          </div>
+          <div class="w-full md:w-1/3 p-2 pt-6">
+            <ui-checkbox v-model="autoDownloadEpisodes" label="Auto Download New Episodes" checkbox-bg="primary" border-color="gray-600" label-class="text-sm font-semibold pl-2" />
+          </div>
+        </div>
+
+        <p class="text-lg font-semibold mb-2">Podcasts to Add</p>
+
+        <div class="w-full overflow-y-auto" style="max-height: 50vh">
+          <template v-for="(feed, index) in feedMetadata">
+            <cards-podcast-feed-summary-card :key="index" :feed="feed" :library-folder-path="selectedFolderPath" class="my-1" />
+          </template>
+        </div>
+      </div>
+      <div class="flex items-center py-4">
+        <div class="flex-grow" />
+        <ui-btn color="success" @click="submit">Add Podcasts</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    feeds: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      selectedFolderId: null,
+      fullPath: null,
+      autoDownloadEpisodes: false,
+      feedMetadata: []
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    title() {
+      return 'OPML Feeds'
+    },
+    currentLibrary() {
+      return this.$store.getters['libraries/getCurrentLibrary']
+    },
+    folders() {
+      if (!this.currentLibrary) return []
+      return this.currentLibrary.folders || []
+    },
+    folderItems() {
+      return this.folders.map((fold) => {
+        return {
+          value: fold.id,
+          text: fold.fullPath
+        }
+      })
+    },
+    selectedFolder() {
+      return this.folders.find((f) => f.id === this.selectedFolderId)
+    },
+    selectedFolderPath() {
+      if (!this.selectedFolder) return ''
+      return this.selectedFolder.fullPath
+    }
+  },
+  methods: {
+    toFeedMetadata(feed) {
+      var metadata = feed.metadata
+      return {
+        title: metadata.title,
+        author: metadata.author,
+        description: metadata.description,
+        releaseDate: '',
+        genres: [...metadata.categories],
+        feedUrl: metadata.feedUrl,
+        imageUrl: metadata.image,
+        itunesPageUrl: '',
+        itunesId: '',
+        itunesArtistId: '',
+        language: '',
+        numEpisodes: feed.numEpisodes
+      }
+    },
+    init() {
+      this.feedMetadata = this.feeds.map(this.toFeedMetadata)
+
+      if (this.folderItems[0]) {
+        this.selectedFolderId = this.folderItems[0].value
+      }
+    },
+    async submit() {
+      this.processing = true
+      var newFeedPayloads = this.feedMetadata.map((metadata) => {
+        return {
+          path: `${this.selectedFolderPath}\\${this.$sanitizeFilename(metadata.title)}`,
+          folderId: this.selectedFolderId,
+          libraryId: this.currentLibrary.id,
+          media: {
+            metadata: {
+              ...metadata
+            },
+            autoDownloadEpisodes: this.autoDownloadEpisodes
+          }
+        }
+      })
+      console.log('New feed payloads', newFeedPayloads)
+
+      for (const podcastPayload of newFeedPayloads) {
+        await this.$axios
+          .$post('/api/podcasts', podcastPayload)
+          .then(() => {
+            this.$toast.success(`${podcastPayload.media.metadata.title}: Podcast created successfully`)
+          })
+          .catch((error) => {
+            var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to create podcast'
+            console.error('Failed to create podcast', podcastPayload, error)
+            this.$toast.error(`${podcastPayload.media.metadata.title}: ${errorMsg}`)
+          })
+      }
+      this.processing = false
+      this.show = false
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+#podcast-wrapper {
+  min-height: 400px;
+  max-height: 80vh;
+}
+#episodes-scroll {
+  max-height: calc(80vh - 200px);
+}
+</style>
@@ -0,0 +1,75 @@
+<template>
+  <modals-modal v-model="show" name="podcast-episode-view-modal" :width="800" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">Episode</p>
+      </div>
+    </template>
+    <div ref="wrapper" class="p-4 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-auto" style="max-height: 80vh">
+      <div class="flex mb-4">
+        <div class="w-12 h-12">
+          <covers-book-cover :library-item="libraryItem" :width="48" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        </div>
+        <div class="flex-grow px-2">
+          <p class="text-base mb-1">{{ podcastTitle }}</p>
+          <p class="text-xs text-gray-300">{{ podcastAuthor }}</p>
+        </div>
+      </div>
+      <p class="text-lg font-semibold mb-6">{{ title }}</p>
+      <div v-if="description" class="default-style" v-html="description" />
+      <p v-else class="mb-2">No description</p>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      processing: false
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showViewPodcastEpisodeModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowViewPodcastEpisodeModal', val)
+      }
+    },
+    libraryItem() {
+      return this.$store.state.selectedLibraryItem
+    },
+    episode() {
+      return this.$store.state.globals.selectedEpisode || {}
+    },
+    episodeId() {
+      return this.episode.id
+    },
+    title() {
+      return this.episode.title || 'No Episode Title'
+    },
+    description() {
+      return this.episode.description || ''
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    podcastTitle() {
+      return this.mediaMetadata.title
+    },
+    podcastAuthor() {
+      return this.mediaMetadata.author
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
@@ -27,7 +27,6 @@
        <p v-if="hasEpisodesWithoutPubDate" class="w-full pt-2 text-warning text-xs">Warning: 1 or more of your episodes do not have a Pub Date. Some podcast apps require this.</p>
      </div>
      <div v-show="userIsAdminOrUp" class="flex items-center pt-6">
-        <p class="text-xs text-gray-300">Note: RSS feed URLs are not authenticated</p>
        <div class="flex-grow" />
        <ui-btn v-if="currentFeedUrl" color="error" small @click="closeFeed">Close RSS Feed</ui-btn>
        <ui-btn v-else color="success" small @click="openFeed">Open RSS Feed</ui-btn>
@@ -0,0 +1,73 @@
+<template>
+  <div class="flex pt-4 pb-2 md:pt-0 md:pb-2">
+    <div class="flex-grow" />
+    <template v-if="!loading">
+      <div class="cursor-pointer flex items-center justify-center text-gray-300 mr-4 md:mr-8" @mousedown.prevent @mouseup.prevent @click.stop="prevChapter">
+        <span class="material-icons text-3xl">first_page</span>
+      </div>
+      <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
+        <span class="material-icons text-3xl">replay_10</span>
+      </div>
+      <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-4 md:mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
+        <span class="material-icons">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
+      </div>
+      <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
+        <span class="material-icons text-3xl">forward_10</span>
+      </div>
+      <div class="flex items-center justify-center ml-4 md:ml-8" :class="hasNextChapter ? 'text-gray-300 cursor-pointer' : 'text-gray-500'" @mousedown.prevent @mouseup.prevent @click.stop="nextChapter">
+        <span class="material-icons text-3xl">last_page</span>
+      </div>
+      <controls-playback-speed-control v-model="playbackRate" @input="playbackRateUpdated" @change="playbackRateChanged" />
+    </template>
+    <template v-else>
+      <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
+        <span class="material-icons">autorenew</span>
+      </div>
+    </template>
+    <div class="flex-grow" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    loading: Boolean,
+    seekLoading: Boolean,
+    playbackRate: Number,
+    paused: Boolean,
+    hasNextChapter: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {
+    playPause() {
+      this.$emit('playPause')
+    },
+    prevChapter() {
+      this.$emit('prevChapter')
+    },
+    nextChapter() {
+      if (!this.hasNextChapter) return
+      this.$emit('nextChapter')
+    },
+    jumpBackward() {
+      this.$emit('jumpBackward')
+    },
+    jumpForward() {
+      this.$emit('jumpForward')
+    },
+    playbackRateUpdated(playbackRate) {
+      this.$emit('setPlaybackRate', playbackRate)
+    },
+    playbackRateChanged(playbackRate) {
+      this.$emit('setPlaybackRate', playbackRate)
+      this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {
+        console.error('Failed to update settings', err)
+      })
+    }
+  },
+  mounted() {}
+}
+</script>
@@ -0,0 +1,185 @@
+<template>
+  <div class="relative">
+    <!-- Track -->
+    <div ref="track" class="w-full h-2 bg-gray-700 relative cursor-pointer transform duration-100 hover:scale-y-125 overflow-hidden" @mousemove="mousemoveTrack" @mouseleave="mouseleaveTrack" @click.stop="clickTrack">
+      <div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none" />
+      <div ref="bufferTrack" class="h-full bg-gray-500 absolute top-0 left-0 pointer-events-none" />
+      <div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none" />
+      <div ref="trackCursor" class="h-full w-0.5 bg-gray-50 absolute top-0 left-0 opacity-0 pointer-events-none" />
+      <div v-if="loading" class="h-full w-1/4 absolute left-0 top-0 loadingTrack pointer-events-none bg-white bg-opacity-25" />
+    </div>
+    <div ref="track" class="w-full h-2 relative overflow-hidden">
+      <template v-for="(tick, index) in chapterTicks">
+        <div :key="index" :style="{ left: tick.left + 'px' }" class="absolute top-0 w-px bg-white bg-opacity-30 h-1 pointer-events-none" />
+      </template>
+    </div>
+
+    <!-- Hover timestamp -->
+    <div ref="hoverTimestamp" class="absolute -top-8 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
+      <p ref="hoverTimestampText" class="text-xs font-mono text-center px-2 py-0.5 truncate whitespace-nowrap">00:00</p>
+    </div>
+    <div ref="hoverTimestampArrow" class="absolute -top-3 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
+      <div class="absolute -bottom-1.5 left-0 right-0 w-full flex justify-center">
+        <div class="arrow-down" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    loading: Boolean,
+    duration: Number,
+    chapters: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      trackWidth: 0,
+      currentTime: 0,
+      percentReady: 0,
+      bufferTime: 0,
+      chapterTicks: [],
+      trackOffsetLeft: 16, // Track is 16px from edge
+      playedTrackWidth: 0,
+      readyTrackWidth: 0,
+      bufferTrackWidth: 0
+    }
+  },
+  watch: {
+    duration: {
+      immediate: true,
+      handler() {
+        this.setChapterTicks()
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    clickTrack(e) {
+      if (this.loading) return
+
+      var offsetX = e.offsetX
+      var perc = offsetX / this.trackWidth
+      var time = perc * this.duration
+      if (isNaN(time) || time === null) {
+        console.error('Invalid time', perc, time)
+        return
+      }
+      this.$emit('seek', time)
+    },
+    setBufferTime(time) {
+      this.bufferTime = time
+      this.updateBufferTrack()
+    },
+    updateBufferTrack() {
+      var bufferlen = (this.bufferTime / this.duration) * this.trackWidth
+      bufferlen = Math.round(bufferlen)
+      if (this.bufferTrackWidth === bufferlen || !this.$refs.bufferTrack) return
+      if (this.$refs.bufferTrack) this.$refs.bufferTrack.style.width = bufferlen + 'px'
+      this.bufferTrackWidth = bufferlen
+    },
+    setPercentageReady(percent) {
+      this.percentReady = percent
+      this.updateReadyTrack()
+    },
+    updateReadyTrack() {
+      var widthReady = Math.round(this.trackWidth * this.percentReady)
+      if (this.readyTrackWidth === widthReady) return
+      this.readyTrackWidth = widthReady
+      if (this.$refs.readyTrack) this.$refs.readyTrack.style.width = widthReady + 'px'
+    },
+    setCurrentTime(time) {
+      this.currentTime = time
+      this.updatePlayedTrackWidth()
+    },
+    updatePlayedTrackWidth() {
+      var perc = this.currentTime / this.duration
+      var ptWidth = Math.round(perc * this.trackWidth)
+      if (this.playedTrackWidth === ptWidth) {
+        return
+      }
+      if (this.$refs.playedTrack) this.$refs.playedTrack.style.width = ptWidth + 'px'
+      this.playedTrackWidth = ptWidth
+    },
+    setChapterTicks() {
+      this.chapterTicks = this.chapters.map((chap) => {
+        var perc = chap.start / this.duration
+        return {
+          title: chap.title,
+          left: perc * this.trackWidth
+        }
+      })
+    },
+    mousemoveTrack(e) {
+      var offsetX = e.offsetX
+      var time = (offsetX / this.trackWidth) * this.duration
+
+      console.log('Mousemove track', this.trackWidth, this.duration)
+
+      if (this.$refs.hoverTimestamp) {
+        var width = this.$refs.hoverTimestamp.clientWidth
+        this.$refs.hoverTimestamp.style.opacity = 1
+        var posLeft = offsetX - width / 2
+        if (posLeft + width + this.trackOffsetLeft > window.innerWidth) {
+          posLeft = window.innerWidth - width - this.trackOffsetLeft
+        } else if (posLeft < -this.trackOffsetLeft) {
+          posLeft = -this.trackOffsetLeft
+        }
+        this.$refs.hoverTimestamp.style.left = posLeft + 'px'
+      }
+
+      if (this.$refs.hoverTimestampArrow) {
+        var width = this.$refs.hoverTimestampArrow.clientWidth
+        var posLeft = offsetX - width / 2
+        this.$refs.hoverTimestampArrow.style.opacity = 1
+        this.$refs.hoverTimestampArrow.style.left = posLeft + 'px'
+      }
+      if (this.$refs.hoverTimestampText) {
+        var hoverText = this.$secondsToTimestamp(time)
+
+        var chapter = this.chapters.find((chapter) => chapter.start <= time && time < chapter.end)
+        if (chapter && chapter.title) {
+          hoverText += ` - ${chapter.title}`
+        }
+        this.$refs.hoverTimestampText.innerText = hoverText
+      }
+      if (this.$refs.trackCursor) {
+        this.$refs.trackCursor.style.opacity = 1
+        this.$refs.trackCursor.style.left = offsetX - 1 + 'px'
+      }
+    },
+    mouseleaveTrack() {
+      if (this.$refs.hoverTimestamp) {
+        this.$refs.hoverTimestamp.style.opacity = 0
+      }
+      if (this.$refs.hoverTimestampArrow) {
+        this.$refs.hoverTimestampArrow.style.opacity = 0
+      }
+      if (this.$refs.trackCursor) {
+        this.$refs.trackCursor.style.opacity = 0
+      }
+    },
+    setTrackWidth() {
+      if (this.$refs.track) {
+        this.trackWidth = this.$refs.track.clientWidth
+      } else {
+        console.error('Track not loaded', this.$refs)
+      }
+    },
+    windowResize() {
+      this.setTrackWidth()
+    }
+  },
+  mounted() {
+    this.setTrackWidth()
+    window.addEventListener('resize', this.windowResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.windowResize)
+  }
+}
+</script>
@@ -2,6 +2,8 @@
  <div class="w-full -mt-6">
    <div class="w-full relative mb-1">
      <div class="absolute -top-10 md:top-0 right-0 md:right-2 flex items-center h-full">
+        <!-- <span class="material-icons text-2xl cursor-pointer" @click="toggleFullscreen(true)">expand_less</span> -->
+
        <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden md:block" />

        <div class="cursor-pointer text-gray-300 mx-1 md:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
@@ -21,57 +23,11 @@
        </div>
      </div>

-      <div class="flex pt-4 pb-2 md:pt-0 md:pb-2">
-        <div class="flex-grow" />
-        <template v-if="!loading">
-          <div class="cursor-pointer flex items-center justify-center text-gray-300 mr-8" @mousedown.prevent @mouseup.prevent @click.stop="restart">
-            <span class="material-icons text-3xl">first_page</span>
-          </div>
-          <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpBackward">
-            <span class="material-icons text-3xl">replay_10</span>
-          </div>
-          <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8" :class="seekLoading ? 'animate-spin' : ''" @mousedown.prevent @mouseup.prevent @click.stop="playPause">
-            <span class="material-icons">{{ seekLoading ? 'autorenew' : paused ? 'play_arrow' : 'pause' }}</span>
-          </div>
-          <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="jumpForward">
-            <span class="material-icons text-3xl">forward_10</span>
-          </div>
-          <controls-playback-speed-control v-model="playbackRate" @input="playbackRateUpdated" @change="playbackRateChanged" />
-        </template>
-        <template v-else>
-          <div class="cursor-pointer p-2 shadow-sm bg-accent flex items-center justify-center rounded-full text-primary mx-8 animate-spin">
-            <span class="material-icons">autorenew</span>
-          </div>
-        </template>
-
-        <div class="flex-grow" />
-      </div>
+      <player-playback-controls :loading="loading" :seek-loading="seekLoading" :playback-rate="playbackRate" :paused="paused" :has-next-chapter="hasNextChapter" @prevChapter="prevChapter" @nextChapter="nextChapter" @jumpForward="jumpForward" @jumpBackward="jumpBackward" @setPlaybackRate="setPlaybackRate" @playPause="playPause" />
    </div>
-    <div class="relative">
-      <!-- Track -->
-      <div ref="track" class="w-full h-2 bg-gray-700 relative cursor-pointer transform duration-100 hover:scale-y-125 overflow-hidden" @mousemove="mousemoveTrack" @mouseleave="mouseleaveTrack" @click.stop="clickTrack">
-        <div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 pointer-events-none" />
-        <div ref="bufferTrack" class="h-full bg-gray-400 absolute top-0 left-0 pointer-events-none" />
-        <div ref="playedTrack" class="h-full bg-gray-200 absolute top-0 left-0 pointer-events-none" />
-        <div ref="trackCursor" class="h-full w-0.5 bg-gray-50 absolute top-0 left-0 opacity-0 pointer-events-none" />
-        <div v-if="loading" class="h-full w-1/4 absolute left-0 top-0 loadingTrack pointer-events-none bg-white bg-opacity-25" />
-      </div>
-      <div ref="track" class="w-full h-2 relative overflow-hidden">
-        <template v-for="(tick, index) in chapterTicks">
-          <div :key="index" :style="{ left: tick.left + 'px' }" class="absolute top-0 w-px bg-white bg-opacity-30 h-1 pointer-events-none" />
-        </template>
-      </div>

-      <!-- Hover timestamp -->
-      <div ref="hoverTimestamp" class="absolute -top-8 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
-        <p ref="hoverTimestampText" class="text-xs font-mono text-center px-2 py-0.5 truncate whitespace-nowrap">00:00</p>
-      </div>
-      <div ref="hoverTimestampArrow" class="absolute -top-3 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
-        <div class="absolute -bottom-1.5 left-0 right-0 w-full flex justify-center">
-          <div class="arrow-down" />
-        </div>
-      </div>
-    </div>
+    <player-track-bar ref="trackbar" :loading="loading" :chapters="chapters" :duration="duration" @seek="seek" />
+
    <div class="flex">
      <p ref="currentTimestamp" class="font-mono text-sm text-gray-100 pointer-events-auto">00:00:00</p>
      <p class="font-mono text-sm text-gray-100 pointer-events-auto">&nbsp;/&nbsp;{{ progressPercent }}%</p>
@@ -106,17 +62,11 @@ export default {
    return {
      volume: 1,
      playbackRate: 1,
-      trackWidth: 0,
-      playedTrackWidth: 0,
-      bufferTrackWidth: 0,
-      readyTrackWidth: 0,
      audioEl: null,
      seekLoading: false,
      showChaptersModal: false,
      currentTime: 0,
-      trackOffsetLeft: 16, // Track is 16px from edge
-      duration: 0,
-      chapterTicks: []
+      duration: 0
    }
  },
  computed: {
@@ -153,24 +103,46 @@ export default {
    },
    currentChapterName() {
      return this.currentChapter ? this.currentChapter.title : ''
+    },
+    isFullscreen() {
+      return this.$store.state.playerIsFullscreen
+    },
+    currentChapterIndex() {
+      if (!this.currentChapter) return 0
+      return this.chapters.findIndex((ch) => ch.id === this.currentChapter.id)
+    },
+    hasNextChapter() {
+      if (!this.chapters.length) return false
+      return this.currentChapterIndex < this.chapters.length - 1
    }
  },
  methods: {
+    toggleFullscreen(isFullscreen) {
+      this.$store.commit('setPlayerIsFullscreen', isFullscreen)
+
+      var videoPlayerEl = document.getElementById('video-player')
+      if (videoPlayerEl) {
+        if (isFullscreen) {
+          videoPlayerEl.style.width = '100vw'
+          videoPlayerEl.style.height = '100vh'
+          videoPlayerEl.style.top = '0px'
+          videoPlayerEl.style.left = '0px'
+        } else {
+          videoPlayerEl.style.width = '384px'
+          videoPlayerEl.style.height = '216px'
+          videoPlayerEl.style.top = 'unset'
+          videoPlayerEl.style.bottom = '80px'
+          videoPlayerEl.style.left = '16px'
+        }
+      }
+    },
    setDuration(duration) {
      this.duration = duration
-
-      this.chapterTicks = this.chapters.map((chap) => {
-        var perc = chap.start / this.duration
-        return {
-          title: chap.title,
-          left: perc * this.trackWidth
-        }
-      })
    },
    setCurrentTime(time) {
      this.currentTime = time
      this.updateTimestamp()
-      this.updatePlayedTrack()
+      if (this.$refs.trackbar) this.$refs.trackbar.setCurrentTime(time)
    },
    playPause() {
      this.$emit('playPause')
@@ -223,67 +195,28 @@ export default {
    seek(time) {
      this.$emit('seek', time)
    },
-    playbackRateUpdated(playbackRate) {
-      this.setPlaybackRate(playbackRate)
-    },
-    playbackRateChanged(playbackRate) {
-      this.setPlaybackRate(playbackRate)
-      this.$store.dispatch('user/updateUserSettings', { playbackRate }).catch((err) => {
-        console.error('Failed to update settings', err)
-      })
-    },
-    mousemoveTrack(e) {
-      var offsetX = e.offsetX
-      var time = (offsetX / this.trackWidth) * this.duration
-      if (this.$refs.hoverTimestamp) {
-        var width = this.$refs.hoverTimestamp.clientWidth
-        this.$refs.hoverTimestamp.style.opacity = 1
-        var posLeft = offsetX - width / 2
-        if (posLeft + width + this.trackOffsetLeft > window.innerWidth) {
-          posLeft = window.innerWidth - width - this.trackOffsetLeft
-        } else if (posLeft < -this.trackOffsetLeft) {
-          posLeft = -this.trackOffsetLeft
-        }
-        this.$refs.hoverTimestamp.style.left = posLeft + 'px'
-      }
-
-      if (this.$refs.hoverTimestampArrow) {
-        var width = this.$refs.hoverTimestampArrow.clientWidth
-        var posLeft = offsetX - width / 2
-        this.$refs.hoverTimestampArrow.style.opacity = 1
-        this.$refs.hoverTimestampArrow.style.left = posLeft + 'px'
-      }
-      if (this.$refs.hoverTimestampText) {
-        var hoverText = this.$secondsToTimestamp(time)
-
-        var chapter = this.chapters.find((chapter) => chapter.start <= time && time < chapter.end)
-        if (chapter && chapter.title) {
-          hoverText += ` - ${chapter.title}`
-        }
-        this.$refs.hoverTimestampText.innerText = hoverText
-      }
-      if (this.$refs.trackCursor) {
-        this.$refs.trackCursor.style.opacity = 1
-        this.$refs.trackCursor.style.left = offsetX - 1 + 'px'
-      }
-    },
-    mouseleaveTrack() {
-      if (this.$refs.hoverTimestamp) {
-        this.$refs.hoverTimestamp.style.opacity = 0
-      }
-      if (this.$refs.hoverTimestampArrow) {
-        this.$refs.hoverTimestampArrow.style.opacity = 0
-      }
-      if (this.$refs.trackCursor) {
-        this.$refs.trackCursor.style.opacity = 0
-      }
-    },
    restart() {
      this.seek(0)
    },
+    prevChapter() {
+      if (!this.currentChapter || this.currentChapterIndex === 0) {
+        return this.restart()
+      }
+      var timeInCurrentChapter = this.currentTime - this.currentChapter.start
+      if (timeInCurrentChapter <= 3 && this.chapters[this.currentChapterIndex - 1]) {
+        var prevChapter = this.chapters[this.currentChapterIndex - 1]
+        this.seek(prevChapter.start)
+      } else {
+        this.seek(this.currentChapter.start)
+      }
+    },
+    nextChapter() {
+      if (!this.currentChapter || !this.hasNextChapter) return
+      var nextChapter = this.chapters[this.currentChapterIndex + 1]
+      this.seek(nextChapter.start)
+    },
    setStreamReady() {
-      this.readyTrackWidth = this.trackWidth
-      this.$refs.readyTrack.style.width = this.trackWidth + 'px'
+      if (this.$refs.trackbar) this.$refs.trackbar.setPercentageReady(1)
    },
    setChunksReady(chunks, numSegments) {
      var largestSeg = 0
@@ -298,10 +231,7 @@ export default {
        }
      }
      var percentageReady = largestSeg / numSegments
-      var widthReady = Math.round(this.trackWidth * percentageReady)
-      if (this.readyTrackWidth === widthReady) return
-      this.readyTrackWidth = widthReady
-      this.$refs.readyTrack.style.width = widthReady + 'px'
+      if (this.$refs.trackbar) this.$refs.trackbar.setPercentageReady(percentageReady)
    },
    updateTimestamp() {
      var ts = this.$refs.currentTimestamp
@@ -312,36 +242,9 @@ export default {
      var currTimeClean = this.$secondsToTimestamp(this.currentTime)
      ts.innerText = currTimeClean
    },
-    updatePlayedTrack() {
-      var perc = this.currentTime / this.duration
-      var ptWidth = Math.round(perc * this.trackWidth)
-      if (this.playedTrackWidth === ptWidth) {
-        return
-      }
-      this.$refs.playedTrack.style.width = ptWidth + 'px'
-      this.playedTrackWidth = ptWidth
-    },
-    clickTrack(e) {
-      if (this.loading) return

-      var offsetX = e.offsetX
-      var perc = offsetX / this.trackWidth
-      var time = perc * this.duration
-      if (isNaN(time) || time === null) {
-        console.error('Invalid time', perc, time)
-        return
-      }
-      this.seek(time)
-    },
    setBufferTime(bufferTime) {
-      if (!this.audioEl) {
-        return
-      }
-      var bufferlen = (bufferTime / this.duration) * this.trackWidth
-      bufferlen = Math.round(bufferlen)
-      if (this.bufferTrackWidth === bufferlen || !this.$refs.bufferTrack) return
-      this.$refs.bufferTrack.style.width = bufferlen + 'px'
-      this.bufferTrackWidth = bufferlen
+      if (this.$refs.trackbar) this.$refs.trackbar.setBufferTime(bufferTime)
    },
    showChapters() {
      if (!this.chapters.length) return
@@ -350,14 +253,6 @@ export default {
    init() {
      this.playbackRate = this.$store.getters['user/getUserSetting']('playbackRate') || 1
      this.$emit('setPlaybackRate', this.playbackRate)
-      this.setTrackWidth()
-    },
-    setTrackWidth() {
-      if (this.$refs.track) {
-        this.trackWidth = this.$refs.track.clientWidth
-      } else {
-        console.error('Track not loaded', this.$refs)
-      }
    },
    settingsUpdated(settings) {
      if (settings.playbackRate && this.playbackRate !== settings.playbackRate) {
@@ -365,6 +260,11 @@ export default {
      }
    },
    closePlayer() {
+      if (this.isFullscreen) {
+        this.toggleFullscreen(false)
+        return
+      }
+
      if (this.loading) return
      this.$emit('close')
    },
@@ -379,19 +279,14 @@ export default {
      else if (action === this.$hotkeys.AudioPlayer.INCREASE_PLAYBACK_RATE) this.increasePlaybackRate()
      else if (action === this.$hotkeys.AudioPlayer.DECREASE_PLAYBACK_RATE) this.decreasePlaybackRate()
      else if (action === this.$hotkeys.AudioPlayer.CLOSE) this.closePlayer()
-    },
-    windowResize() {
-      this.setTrackWidth()
    }
  },
  mounted() {
-    window.addEventListener('resize', this.windowResize)
    this.$store.commit('user/addSettingsListener', { id: 'audioplayer', meth: this.settingsUpdated })
    this.init()
    this.$eventBus.$on('player-hotkey', this.hotkey)
  },
  beforeDestroy() {
-    window.removeEventListener('resize', this.windowResize)
    this.$store.commit('user/removeSettingsListener', 'audioplayer')
    this.$eventBus.$off('player-hotkey', this.hotkey)
  }
@@ -1,16 +1,18 @@
 <template>
  <div class="w-full px-2 py-3 overflow-hidden relative border-b border-white border-opacity-10" @mouseover="mouseover" @mouseleave="mouseleave">
-    <div v-if="episode" class="flex items-center h-24">
+    <div v-if="episode" class="flex items-center h-24 cursor-pointer" @click="$emit('view', episode)">
      <div class="flex-grow px-2">
        <p class="text-sm font-semibold">
          {{ title }}
        </p>
-        <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5">{{ description }}</p>
+
+        <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5">{{ subtitle }}</p>
+
        <div class="flex items-center pt-2">
-          <div class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click="playClick">
+          <button class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer focus:outline-none" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
            <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
            <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
-          </div>
+          </button>

          <ui-tooltip :text="userIsFinished ? 'Mark as Not Finished' : 'Mark as Finished'" direction="top">
            <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
@@ -66,10 +68,11 @@ export default {
    title() {
      return this.episode.title || ''
    },
+    subtitle() {
+      return this.episode.subtitle || ''
+    },
    description() {
-      if (this.episode.subtitle) return this.episode.subtitle
-      var desc = this.episode.description || ''
-      return desc
+      return this.episode.description || ''
    },
    duration() {
      return this.$secondsToTimestamp(this.episode.duration)
@@ -7,7 +7,7 @@
    </div>
    <p v-if="!episodes.length" class="py-4 text-center text-lg">No Episodes</p>
    <template v-for="episode in episodesSorted">
-      <tables-podcast-episode-table-row :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" class="item" @remove="removeEpisode" @edit="editEpisode" />
+      <tables-podcast-episode-table-row :key="episode.id" :episode="episode" :library-item-id="libraryItem.id" class="item" @remove="removeEpisode" @edit="editEpisode" @view="viewEpisode" />
    </template>

    <modals-podcast-remove-episode v-model="showPodcastRemoveModal" :library-item="libraryItem" :episode="selectedEpisode" />
@@ -68,6 +68,11 @@ export default {
      this.$store.commit('globals/setSelectedEpisode', episode)
      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
    },
+    viewEpisode(episode) {
+      this.$store.commit('setSelectedLibraryItem', this.libraryItem)
+      this.$store.commit('globals/setSelectedEpisode', episode)
+      this.$store.commit('globals/setShowViewPodcastEpisodeModal', true)
+    },
    init() {
      this.episodesCopy = this.episodes.map((ep) => ({ ...ep }))
    }
@@ -32,6 +32,7 @@ export default {
      default: ''
    },
    paddingX: Number,
+    paddingY: Number,
    small: Boolean,
    loading: Boolean,
    disabled: Boolean
@@ -48,14 +49,17 @@ export default {
      if (this.small) {
        list.push('text-sm')
        if (this.paddingX === undefined) list.push('px-4')
-        list.push('py-1')
+        if (this.paddingY === undefined) list.push('py-1')
      } else {
        if (this.paddingX === undefined) list.push('px-8')
-        list.push('py-2')
+        if (this.paddingY === undefined) list.push('py-2')
      }
      if (this.paddingX !== undefined) {
        list.push(`px-${this.paddingX}`)
      }
+      if (this.paddingY !== undefined) {
+        list.push(`py-${this.paddingY}`)
+      }
      if (this.disabled) {
        list.push('cursor-not-allowed')
      }
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <input ref="fileInput" id="hidden-input" type="file" :accept="accept" class="hidden" @change="inputChanged" />
+    <input ref="fileInput" type="file" :accept="accept" class="hidden" @change="inputChanged" />
    <ui-btn @click="clickUpload" color="primary" type="text"><slot /></ui-btn>
  </div>
 </template>
@@ -1,5 +1,5 @@
 <template>
-  <button class="icon-btn rounded-md flex items-center justify-center h-9 w-9 relative" @mousedown.prevent :disabled="disabled || loading" :class="className" @click="clickBtn">
+  <button class="icon-btn rounded-md flex items-center justify-center relative" @mousedown.prevent :disabled="disabled || loading" :class="className" @click="clickBtn">
    <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
      <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
        <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
@@ -20,20 +20,29 @@ export default {
    },
    outlined: Boolean,
    borderless: Boolean,
-    loading: Boolean
+    loading: Boolean,
+    iconFontSize: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: Number,
+      default: 9
+    }
  },
  data() {
    return {}
  },
  computed: {
    className() {
-      var classes = []
+      var classes = [`h-${this.size} w-${this.size}`]
      if (!this.borderless) {
        classes.push(`bg-${this.bgColor} border border-gray-600`)
      }
      return classes.join(' ')
    },
    fontSize() {
+      if (this.iconFontSize) return this.iconFontSize
      if (this.icon === 'edit') return '1.25rem'
      return '1.4rem'
    }
@@ -42,7 +42,8 @@ export default {
    editable: {
      type: Boolean,
      default: true
-    }
+    },
+    showAllWhenEmpty: Boolean
  },
  data() {
    return {
@@ -72,6 +73,7 @@ export default {
    itemsToShow() {
      if (!this.editable) return this.items
      if (!this.textInput || this.textInput === this.input) {
+        if (this.showAllWhenEmpty) return this.items
        return []
      }
      return this.items.filter((i) => {
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <p v-if="label" class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }">
+      {{ label }}
+    </p>
+    <ui-vue-trix v-model="content" :config="config" :disabled-editor="disabled" @trix-file-accept="trixFileAccept" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    label: String,
+    disabled: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    content: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    config() {
+      return {
+        toolbar: {
+          getDefaultHTML: () => `    <div class="trix-button-row">
+      <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="#{lang.bold}" tabindex="-1">#{lang.bold}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="#{lang.italic}" tabindex="-1">#{lang.italic}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="#{lang.strike}" tabindex="-1">#{lang.strike}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="#{lang.link}" tabindex="-1">#{lang.link}</button>
+      </span>
+      <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="#{lang.bullets}" tabindex="-1">#{lang.bullets}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="#{lang.numbers}" tabindex="-1">#{lang.numbers}</button>
+      </span>
+
+      <span class="trix-button-group-spacer"></span>
+      <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="#{lang.undo}" tabindex="-1">#{lang.undo}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="#{lang.redo}" tabindex="-1">#{lang.redo}</button>
+      </span>
+    </div>
+    <div class="trix-dialogs" data-trix-dialogs>
+      <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
+        <div class="trix-dialog__link-fields">
+          <input type="url" name="href" class="trix-input trix-input--dialog" placeholder="#{lang.urlPlaceholder}" aria-label="#{lang.url}" required data-trix-input>
+          <div class="trix-button-group">
+            <input type="button" class="trix-button trix-button--dialog" value="#{lang.link}" data-trix-method="setAttribute">
+            <input type="button" class="trix-button trix-button--dialog" value="#{lang.unlink}" data-trix-method="removeAttribute">
+          </div>
+        </div>
+      </div>
+    </div>`
+        }
+      }
+    }
+  },
+  methods: {
+    trixFileAccept(e) {
+      e.preventDefault()
+    }
+  },
+  mounted() {},
+  beforeDestroy() {
+    console.log('Before destroy')
+  }
+}
+</script>
@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <trix-editor :contenteditable="!disabledEditor" :class="['trix-content']" ref="trix" :input="computedId" :placeholder="placeholder" @trix-change="handleContentChange" @trix-initialize="handleInitialize" @trix-focus="processTrixFocus" @trix-blur="processTrixBlur" />
+    <input type="hidden" :name="inputName" :id="computedId" :value="editorContent" />
+  </div>
+</template>
+
+<script>
+/*
+  ORIGINAL SOURCE: https://github.com/hanhdt/vue-trix
+
+  modified for audiobookshelf
+*/
+import Trix from 'trix'
+import '@/assets/trix.css'
+
+export default {
+  name: 'vue-trix',
+  model: {
+    prop: 'srcContent',
+    event: 'update'
+  },
+  props: {
+    /**
+     * This prop will put the editor in read-only mode
+     */
+    disabledEditor: {
+      type: Boolean,
+      required: false,
+      default() {
+        return false
+      }
+    },
+    /**
+     * This is referenced `id` of the hidden input field defined.
+     * It is optional and will be a random string by default.
+     */
+    inputId: {
+      type: String,
+      required: false,
+      default() {
+        return ''
+      }
+    },
+    /**
+     * This is referenced `name` of the hidden input field defined,
+     * default value is `content`.
+     */
+    inputName: {
+      type: String,
+      required: false,
+      default() {
+        return 'content'
+      }
+    },
+    /**
+     * The placeholder attribute specifies a short hint
+     * that describes the expected value of a editor.
+     */
+    placeholder: {
+      type: String,
+      required: false,
+      default() {
+        return ''
+      }
+    },
+    /**
+     * The source content is associcated to v-model directive.
+     */
+    srcContent: {
+      type: String,
+      required: false,
+      default() {
+        return ''
+      }
+    },
+    /**
+     * The boolean attribute allows saving editor state into browser's localStorage
+     * (optional, default is `false`).
+     */
+    localStorage: {
+      type: Boolean,
+      required: false,
+      default() {
+        return false
+      }
+    },
+    /**
+     * Focuses cursor in the editor when attached to the DOM
+     * (optional, default is `false`).
+     */
+    autofocus: {
+      type: Boolean,
+      required: false,
+      default() {
+        return false
+      }
+    },
+    /**
+     * Object to override default editor configuration
+     */
+    config: {
+      type: Object,
+      required: false,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      editorContent: this.srcContent,
+      isActived: null
+    }
+  },
+  watch: {
+    editorContent: {
+      handler: 'emitEditorState'
+    },
+    initialContent: {
+      handler: 'handleInitialContentChange'
+    },
+    isDisabled: {
+      handler: 'decorateDisabledEditor'
+    },
+    config: {
+      handler: 'overrideConfig',
+      immediate: true,
+      deep: true
+    }
+  },
+  computed: {
+    /**
+     * Compute a random id of hidden input
+     * when it haven't been specified.
+     */
+    generateId() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        var r = (Math.random() * 16) | 0
+        var v = c === 'x' ? r : (r & 0x3) | 0x8
+        return v.toString(16)
+      })
+    },
+    computedId() {
+      return this.inputId || this.generateId
+    },
+    initialContent() {
+      return this.srcContent
+    },
+    isDisabled() {
+      return this.disabledEditor
+    }
+  },
+  methods: {
+    processTrixFocus(event) {
+      if (this.$refs.trix) {
+        this.isActived = true
+        this.$emit('trix-focus', this.$refs.trix.editor, event)
+      }
+    },
+    processTrixBlur(event) {
+      if (this.$refs.trix) {
+        this.isActived = false
+        this.$emit('trix-blur', this.$refs.trix.editor, event)
+      }
+    },
+    handleContentChange(event) {
+      this.editorContent = event.srcElement ? event.srcElement.value : event.target.value
+      this.$emit('input', this.editorContent)
+    },
+    handleInitialize(event) {
+      /**
+       * If autofocus is true, manually set focus to
+       * beginning of content (consistent with Trix behavior)
+       */
+      if (this.autofocus) {
+        this.$refs.trix.editor.setSelectedRange(0)
+      }
+      this.$emit('trix-initialize', this.emitInitialize)
+    },
+    handleInitialContentChange(newContent, oldContent) {
+      newContent = newContent === undefined ? '' : newContent
+      if (this.$refs.trix.editor && this.$refs.trix.editor.innerHTML !== newContent) {
+        /* Update editor's content when initial content changed */
+        this.editorContent = newContent
+        /**
+         *  If user are typing, then don't reload the editor,
+         *  hence keep cursor's position after typing.
+         */
+        if (!this.isActived) {
+          this.reloadEditorContent(this.editorContent)
+        }
+      }
+    },
+    emitEditorState(value) {
+      /**
+       * If localStorage is enabled,
+       * then save editor's content into storage
+       */
+      if (this.localStorage) {
+        localStorage.setItem(this.storageId('VueTrix'), JSON.stringify(this.$refs.trix.editor))
+      }
+      this.$emit('update', this.editorContent)
+    },
+    storageId(component) {
+      if (this.inputId) {
+        return `${component}.${this.inputId}.content`
+      } else {
+        return `${component}.content`
+      }
+    },
+    reloadEditorContent(newContent) {
+      // Reload HTML content
+      this.$refs.trix.editor.loadHTML(newContent)
+      // Move cursor to end of new content updated
+      this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())
+    },
+    getContentEndPosition() {
+      return this.$refs.trix.editor.getDocument().toString().length - 1
+    },
+    decorateDisabledEditor(editorState) {
+      /** Disable toolbar and editor by pointer events styling */
+      if (editorState) {
+        this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'
+        this.$refs.trix.contentEditable = false
+        this.$refs.trix.style['background'] = '#e9ecef'
+      } else {
+        this.$refs.trix.toolbarElement.style['pointer-events'] = 'unset'
+        this.$refs.trix.style['pointer-events'] = 'unset'
+        this.$refs.trix.style['background'] = 'transparent'
+      }
+    },
+    overrideConfig(config) {
+      Trix.config = this.deepMerge(Trix.config, config)
+    },
+    deepMerge(target, override) {
+      // deep merge the object into the target object
+      for (let prop in override) {
+        if (override.hasOwnProperty(prop)) {
+          if (Object.prototype.toString.call(override[prop]) === '[object Object]') {
+            // if the property is a nested object
+            target[prop] = this.deepMerge(target[prop], override[prop])
+          } else {
+            // for regular property
+            target[prop] = override[prop]
+          }
+        }
+      }
+      return target
+    }
+  },
+  mounted() {
+    /** Override editor configuration */
+    this.overrideConfig(this.config)
+    /** Check if editor read-only mode is required */
+    this.decorateDisabledEditor(this.disabledEditor)
+    this.$nextTick(() => {
+      /**
+       *  If localStorage is enabled,
+       *  then load editor's content from the beginning.
+       */
+      if (this.localStorage) {
+        const savedValue = localStorage.getItem(this.storageId('VueTrix'))
+        if (savedValue && !this.srcContent) {
+          this.$refs.trix.editor.loadJSON(JSON.parse(savedValue))
+        }
+      }
+    })
+  }
+}
+</script>
+
+<style lang="css" module>
+.trix_container {
+  max-width: 100%;
+  height: auto;
+}
+.trix_container .trix-button-group {
+  background-color: white;
+}
+.trix_container .trix-content {
+  background-color: white;
+}
+</style>
@@ -22,7 +22,7 @@

      <div class="flex mt-2 -mx-1">
        <div class="flex-grow px-1">
-          <ui-multi-select-query-input ref="seriesSelect" v-model="seriesItems" text-key="displayName" label="Series" readonly show-edit @edit="editSeriesItem" @add="addNewSeries" />
+          <widgets-series-input-widget v-model="details.series" />
        </div>
      </div>

@@ -63,27 +63,6 @@
        </div>
      </div>
    </form>
-
-    <div v-if="showSeriesForm" class="absolute top-0 left-0 z-20 w-full h-full bg-black bg-opacity-50 rounded-lg flex items-center justify-center" @click="cancelSeriesForm">
-      <div class="absolute top-0 right-0 p-4">
-        <span class="material-icons text-gray-200 hover:text-white text-4xl cursor-pointer">close</span>
-      </div>
-      <form @submit.prevent="submitSeriesForm">
-        <div class="bg-bg rounded-lg p-8" @click.stop>
-          <div class="flex">
-            <div class="flex-grow p-1 min-w-80">
-              <ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!selectedSeries.id.startsWith('new')" label="Series Name" />
-            </div>
-            <div class="w-40 p-1">
-              <ui-text-input-with-label v-model="selectedSeries.sequence" label="Sequence" />
-            </div>
-          </div>
-          <div class="flex justify-end mt-2 p-1">
-            <ui-btn type="submit">Save</ui-btn>
-          </div>
-        </div>
-      </form>
-    </div>
  </div>
 </template>

@@ -97,8 +76,6 @@ export default {
  },
  data() {
    return {
-      selectedSeries: {},
-      showSeriesForm: false,
      details: {
        title: null,
        subtitle: null,
@@ -146,24 +123,6 @@ export default {
    },
    filterData() {
      return this.$store.state.libraries.filterData || {}
-    },
-    existingSeriesNames() {
-      // Only show series names not already selected
-      var alreadySelectedSeriesIds = this.details.series.map((se) => se.id)
-      return this.series.filter((se) => !alreadySelectedSeriesIds.includes(se.id)).map((se) => se.name)
-    },
-    seriesItems: {
-      get() {
-        return this.details.series.map((se) => {
-          return {
-            displayName: se.sequence ? `${se.name} #${se.sequence}` : se.name,
-            ...se
-          }
-        })
-      },
-      set(val) {
-        this.details.series = val
-      }
    }
  },
  methods: {
@@ -214,50 +173,6 @@ export default {
        this.$refs.tagsSelect.forceBlur()
      }
    },
-    cancelSeriesForm() {
-      this.showSeriesForm = false
-    },
-    editSeriesItem(series) {
-      var _series = this.details.series.find((se) => se.id === series.id)
-      if (!_series) return
-      this.selectedSeries = {
-        ..._series
-      }
-      this.showSeriesForm = true
-    },
-    addNewSeries() {
-      this.selectedSeries = {
-        id: `new-${Date.now()}`,
-        name: '',
-        sequence: ''
-      }
-      this.showSeriesForm = true
-    },
-    submitSeriesForm() {
-      if (!this.selectedSeries.name) {
-        this.$toast.error('Must enter a series')
-        return
-      }
-      if (this.$refs.newSeriesSelect) {
-        this.$refs.newSeriesSelect.blur()
-      }
-      var existingSeriesIndex = this.details.series.findIndex((se) => se.id === this.selectedSeries.id)
-
-      var seriesSameName = this.series.find((se) => se.name.toLowerCase() === this.selectedSeries.name.toLowerCase())
-      if (existingSeriesIndex < 0 && seriesSameName) {
-        this.selectedSeries.id = seriesSameName.id
-      }
-
-      if (existingSeriesIndex >= 0) {
-        this.details.series.splice(existingSeriesIndex, 1, { ...this.selectedSeries })
-      } else {
-        this.details.series.push({
-          ...this.selectedSeries
-        })
-      }
-
-      this.showSeriesForm = false
-    },
    stringArrayEqual(array1, array2) {
      // return false if different
      if (array1.length !== array2.length) return false
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <ui-multi-select-query-input v-model="seriesItems" text-key="displayName" label="Series" readonly show-edit @edit="editSeriesItem" @add="addNewSeries" />
+
+    <modals-edit-series-input-inner-modal v-model="showSeriesForm" :selected-series="selectedSeries" :existing-series-names="existingSeriesNames" @submit="submitSeriesForm" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      selectedSeries: null,
+      showSeriesForm: false
+    }
+  },
+  computed: {
+    seriesItems: {
+      get() {
+        return (this.value || []).map((se) => {
+          return {
+            displayName: se.sequence ? `${se.name} #${se.sequence}` : se.name,
+            ...se
+          }
+        })
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    series() {
+      return this.filterData.series || []
+    },
+    filterData() {
+      return this.$store.state.libraries.filterData || {}
+    },
+    existingSeriesNames() {
+      // Only show series names not already selected
+      var alreadySelectedSeriesIds = (this.value || []).map((se) => se.id)
+      return this.series.filter((se) => !alreadySelectedSeriesIds.includes(se.id)).map((se) => se.name)
+    }
+  },
+  methods: {
+    cancelSeriesForm() {
+      this.showSeriesForm = false
+    },
+    editSeriesItem(series) {
+      var _series = this.seriesItems.find((se) => se.id === series.id)
+      if (!_series) return
+
+      this.selectedSeries = {
+        ..._series
+      }
+
+      console.log('Selected series', this.selectedSeries)
+      this.showSeriesForm = true
+    },
+    addNewSeries() {
+      this.selectedSeries = {
+        id: `new-${Date.now()}`,
+        name: '',
+        sequence: ''
+      }
+
+      this.showSeriesForm = true
+    },
+    submitSeriesForm() {
+      console.log('submit series form', this.value, this.selectedSeries)
+
+      if (!this.selectedSeries.name) {
+        this.$toast.error('Must enter a series')
+        return
+      }
+
+      var existingSeriesIndex = this.seriesItems.findIndex((se) => se.id === this.selectedSeries.id)
+
+      var existingSeriesSameName = this.seriesItems.findIndex((se) => se.name.toLowerCase() === this.selectedSeries.name.toLowerCase())
+      if (existingSeriesSameName >= 0 && existingSeriesIndex < 0) {
+        console.error('Attempt to add duplicate series')
+        this.$toast.error('Cannot add two of the same series')
+        return
+      }
+
+      var seriesSameName = this.series.find((se) => se.name.toLowerCase() === this.selectedSeries.name.toLowerCase())
+      if (existingSeriesIndex < 0 && seriesSameName) {
+        this.selectedSeries.id = seriesSameName.id
+      }
+
+      var selectedSeriesCopy = { ...this.selectedSeries }
+      selectedSeriesCopy.displayName = selectedSeriesCopy.sequence ? `${selectedSeriesCopy.name} #${selectedSeriesCopy.sequence}` : selectedSeriesCopy.name
+
+      var seriesCopy = this.seriesItems.map((v) => ({ ...v }))
+      if (existingSeriesIndex >= 0) {
+        seriesCopy.splice(existingSeriesIndex, 1, selectedSeriesCopy)
+        this.seriesItems = seriesCopy
+      } else {
+        seriesCopy.push(selectedSeriesCopy)
+        this.seriesItems = seriesCopy
+      }
+
+      this.showSeriesForm = false
+    }
+  }
+}
+</script>
@@ -12,8 +12,8 @@
    <modals-item-edit-modal />
    <modals-user-collections-modal />
    <modals-edit-collection-modal />
-    <modals-bookshelf-texture-modal />
    <modals-podcast-edit-episode />
+    <modals-podcast-view-episode />
    <modals-authors-edit-modal />
    <readers-reader />
  </div>
@@ -515,23 +515,12 @@ export default {
      this.$store.commit('globals/updateWindowSize', { width: window.innerWidth, height: window.innerHeight })
    },
    checkVersionUpdate() {
-      // Version check is only run if time since last check was 5 minutes
-      const VERSION_CHECK_BUFF = 1000 * 60 * 5 // 5 minutes
-      var lastVerCheck = localStorage.getItem('lastVerCheck') || 0
-      if (Date.now() - Number(lastVerCheck) > VERSION_CHECK_BUFF) {
-        this.$store
-          .dispatch('checkForUpdate')
-          .then((res) => {
-            localStorage.setItem('lastVerCheck', Date.now())
-            if (res && res.hasUpdate) this.showUpdateToast(res)
-          })
-          .catch((err) => console.error(err))
-
-        if (this.$route.query.error) {
-          this.$toast.error(this.$route.query.error)
-          this.$router.replace(this.$route.path)
-        }
-      }
+      this.$store
+        .dispatch('checkForUpdate')
+        .then((res) => {
+          if (res && res.hasUpdate) this.showUpdateToast(res)
+        })
+        .catch((err) => console.error(err))
    }
  },
  beforeMount() {
@@ -551,6 +540,11 @@ export default {
    }

    this.checkVersionUpdate()
+
+    if (this.$route.query.error) {
+      this.$toast.error(this.$route.query.error)
+      this.$router.replace(this.$route.path)
+    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
@@ -1,12 +1,12 @@
 {
  "name": "audiobookshelf-client",
-  "version": "2.0.14",
+  "version": "2.0.21",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "audiobookshelf-client",
-      "version": "2.0.14",
+      "version": "2.0.17",
      "license": "ISC",
      "dependencies": {
        "@nuxtjs/axios": "^5.13.6",
@@ -18,6 +18,7 @@
        "libarchive.js": "^1.3.0",
        "nuxt": "^2.15.8",
        "nuxt-socket-io": "^1.1.18",
+        "trix": "^1.3.1",
        "v-click-outside": "^3.1.2",
        "vue-pdf": "^4.3.0",
        "vue-toastification": "^1.7.11",
@@ -15285,6 +15286,11 @@
      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
    },
+    "node_modules/trix": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/trix/-/trix-1.3.1.tgz",
+      "integrity": "sha512-BbH6mb6gk+AV4f2as38mP6Ucc1LE3OD6XxkZnAgPIduWXYtvg2mI3cZhIZSLqmMh9OITEpOBCCk88IVmyjU7bA=="
+    },
    "node_modules/ts-pnp": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
@@ -29080,6 +29086,11 @@
      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
    },
+    "trix": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/trix/-/trix-1.3.1.tgz",
+      "integrity": "sha512-BbH6mb6gk+AV4f2as38mP6Ucc1LE3OD6XxkZnAgPIduWXYtvg2mI3cZhIZSLqmMh9OITEpOBCCk88IVmyjU7bA=="
+    },
    "ts-pnp": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
@@ -30624,4 +30635,4 @@
      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
    }
  }
-}
+}
@@ -1,6 +1,6 @@
 {
  "name": "audiobookshelf-client",
-  "version": "2.0.16",
+  "version": "2.0.21",
  "description": "Self-hosted audiobook and podcast client",
  "main": "index.js",
  "scripts": {
@@ -22,6 +22,7 @@
    "libarchive.js": "^1.3.0",
    "nuxt": "^2.15.8",
    "nuxt-socket-io": "^1.1.18",
+    "trix": "^1.3.1",
    "v-click-outside": "^3.1.2",
    "vue-pdf": "^4.3.0",
    "vue-toastification": "^1.7.11",
@@ -1,13 +1,13 @@
 <template>
-  <div id="page-wrapper" class="bg-bg page overflow-y-auto p-8" :class="streamLibraryItem ? 'streaming' : ''">
+  <div id="page-wrapper" class="bg-bg page overflow-y-auto p-4 md:p-8" :class="streamLibraryItem ? 'streaming' : ''">
    <div class="max-w-6xl mx-auto">
-      <div class="flex mb-6">
+      <div class="flex flex-wrap sm:flex-nowrap justify-center mb-6">
        <div class="w-48 min-w-48">
          <div class="w-full h-52">
            <covers-author-image :author="author" rounded="0" />
          </div>
        </div>
-        <div class="flex-grow px-8">
+        <div class="flex-grow py-4 sm:py-0 px-4 md:px-8">
          <div class="flex items-center mb-8">
            <h1 class="text-2xl">{{ author.name }}</h1>

@@ -113,6 +113,16 @@
        </ui-tooltip>
      </div>

+      <div class="flex items-center py-2">
+        <ui-toggle-switch v-model="newServerSettings.scannerPreferMatchedMetadata" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerPreferMatchedMetadata', val)" />
+        <ui-tooltip :text="tooltips.scannerPreferMatchedMetadata">
+          <p class="pl-4 text-lg">
+            Scanner prefer matched metadata
+            <span class="material-icons icon-text">info_outlined</span>
+          </p>
+        </ui-tooltip>
+      </div>
+
      <div class="flex items-center py-2">
        <ui-toggle-switch v-model="newServerSettings.scannerDisableWatcher" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('scannerDisableWatcher', val)" />
        <ui-tooltip :text="tooltips.scannerDisableWatcher">
@@ -226,6 +236,7 @@ export default {
        experimentalFeatures: 'Features in development that could use your feedback and help testing. Click to open github discussion.',
        scannerDisableWatcher: 'Disables the automatic adding/updating of items when file changes are detected. *Requires server restart',
        scannerPreferOpfMetadata: 'OPF file metadata will be used for book details over folder names',
+        scannerPreferMatchedMetadata: 'Matched data will overide book details when using Quick Match',
        scannerPreferAudioMetadata: 'Audio file ID3 meta tags will be used for book details over folder names',
        scannerParseSubtitle: 'Extract subtitles from audiobook folder names.<br>Subtitle must be seperated by " - "<br>i.e. "Book Title - A Subtitle Here" has the subtitle "A Subtitle Here"',
        sortingIgnorePrefix: 'i.e. for prefix "the" book title "The Book Title" would sort as "Book Title, The"',
@@ -0,0 +1,196 @@
+<template>
+  <div class="w-full h-full">
+    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-0 sm:p-4 mb-8">
+      <div class="py-2">
+        <div class="flex items-center mb-1">
+          <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">Listening Sessions</h1>
+          <div class="flex-grow" />
+
+          <ui-dropdown v-model="selectedUser" :items="userItems" label="Filter by User" small class="max-w-48" @input="updateUserFilter" />
+        </div>
+        <div v-if="listeningSessions.length" class="block max-w-full">
+          <table class="userSessionsTable">
+            <tr class="bg-primary bg-opacity-40">
+              <th class="w-48 min-w-48 text-left">Item</th>
+              <th class="w-20 min-w-20 text-left hidden md:table-cell">User</th>
+              <th class="w-32 min-w-32 text-left hidden md:table-cell">Play Method</th>
+              <th class="w-32 min-w-32 text-left hidden sm:table-cell">Device Info</th>
+              <th class="w-32 min-w-32">Listened</th>
+              <th class="w-16 min-w-16">Last Time</th>
+              <th class="flex-grow hidden sm:table-cell">Last Update</th>
+            </tr>
+
+            <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
+              <td class="py-1 max-w-48">
+                <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
+                <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
+              </td>
+              <td class="hidden md:table-cell">
+                <p 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">
+                <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
+              </td>
+              <td class="hidden sm:table-cell">
+                <p class="text-xs" v-html="getDeviceInfoString(session.deviceInfo)" />
+              </td>
+              <td class="text-center">
+                <p class="text-xs font-mono">{{ $elapsedPretty(session.timeListening) }}</p>
+              </td>
+              <td class="text-center">
+                <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
+              </td>
+              <td class="text-center hidden sm:table-cell">
+                <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDate(session.updatedAt, 'MMMM do, yyyy HH:mm')">
+                  <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
+                </ui-tooltip>
+              </td>
+            </tr>
+          </table>
+          <div class="flex items-center justify-end py-1">
+            <ui-icon-btn icon="arrow_back_ios_new" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
+            <p class="text-sm mx-1">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" />
+          </div>
+        </div>
+        <p v-else class="text-white text-opacity-50">No sessions yet...</p>
+      </div>
+    </div>
+
+    <modals-listening-session-modal v-model="showSessionModal" :session="selectedSession" />
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ params, redirect, app }) {
+    var users = await app.$axios
+      .$get('/api/users')
+      .then((users) => {
+        return users.sort((a, b) => {
+          return a.createdAt - b.createdAt
+        })
+      })
+      .catch((error) => {
+        console.error('Failed', error)
+        return []
+      })
+    return {
+      users
+    }
+  },
+  data() {
+    return {
+      showSessionModal: false,
+      selectedSession: null,
+      listeningSessions: [],
+      numPages: 0,
+      total: 0,
+      currentPage: 0,
+      userFilter: null,
+      selectedUser: ''
+    }
+  },
+  computed: {
+    username() {
+      return this.user.username
+    },
+    userOnline() {
+      return this.$store.getters['users/getIsUserOnline'](this.user.id)
+    },
+    userItems() {
+      var userItems = [{ value: '', text: 'All Users' }]
+      return userItems.concat(this.users.map((u) => ({ value: u.id, text: u.username })))
+    },
+    filteredUserUsername() {
+      if (!this.userFilter) return null
+      var user = this.users.find((u) => u.id === this.userFilter)
+      return user ? user.username : null
+    }
+  },
+  methods: {
+    updateUserFilter() {
+      this.loadSessions(0)
+    },
+    prevPage() {
+      this.loadSessions(this.currentPage - 1)
+    },
+    nextPage() {
+      this.loadSessions(this.currentPage + 1)
+    },
+    showSession(session) {
+      this.selectedSession = session
+      this.showSessionModal = true
+    },
+    getDeviceInfoString(deviceInfo) {
+      if (!deviceInfo) return ''
+      var lines = []
+      if (deviceInfo.osName) lines.push(`${deviceInfo.osName} ${deviceInfo.osVersion}`)
+      if (deviceInfo.browserName) lines.push(deviceInfo.browserName)
+
+      if (deviceInfo.manufacturer && deviceInfo.model) lines.push(`${deviceInfo.manufacturer} ${deviceInfo.model}`)
+      if (deviceInfo.sdkVersion) lines.push(`SDK Version: ${deviceInfo.sdkVersion}`)
+      return lines.join('<br>')
+    },
+    getPlayMethodName(playMethod) {
+      if (playMethod === this.$constants.PlayMethod.DIRECTPLAY) return 'Direct Play'
+      else if (playMethod === this.$constants.PlayMethod.TRANSCODE) return 'Transcode'
+      else if (playMethod === this.$constants.PlayMethod.DIRECTSTREAM) return 'Direct Stream'
+      else if (playMethod === this.$constants.PlayMethod.LOCAL) return 'Local'
+      return 'Unknown'
+    },
+    async loadSessions(page) {
+      var userFilterQuery = this.selectedUser ? `&user=${this.selectedUser}` : ''
+      const data = await this.$axios.$get(`/api/sessions?page=${page}&itemsPerPage=10${userFilterQuery}`).catch((err) => {
+        console.error('Failed to load listening sesions', err)
+        return null
+      })
+      if (!data) {
+        this.$toast.error('Failed to load listening sessions')
+        return
+      }
+
+      this.numPages = data.numPages
+      this.total = data.total
+      this.currentPage = data.page
+      this.listeningSessions = data.sessions
+      this.userFilter = data.userFilter
+    },
+    init() {
+      this.loadSessions(0)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+.userSessionsTable {
+  border-collapse: collapse;
+  width: 100%;
+  max-width: 100%;
+  border: 1px solid #474747;
+}
+.userSessionsTable tr:first-child {
+  background-color: #272727;
+}
+.userSessionsTable tr:not(:first-child) {
+  background-color: #373838;
+}
+.userSessionsTable tr:not(:first-child):nth-child(odd) {
+  background-color: #2f2f2f;
+}
+.userSessionsTable tr:hover:not(:first-child) {
+  background-color: #474747;
+}
+.userSessionsTable td {
+  padding: 4px 8px;
+}
+.userSessionsTable th {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+</style>
@@ -37,7 +37,11 @@
    <div class="flex flex-col md:flex-row overflow-hidden max-w-full">
      <stats-daily-listening-chart :listening-stats="listeningStats" class="origin-top-left transform scale-75 lg:scale-100" />
      <div class="w-80 my-6 mx-auto">
-        <h1 class="text-2xl mb-4 font-book">Recent Listening Sessions</h1>
+        <div class="flex mb-4 items-center">
+          <h1 class="text-2xl font-book">Recent Sessions</h1>
+          <div class="flex-grow" />
+          <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs" :padding-x="1.5" :padding-y="1">View All</ui-btn>
+        </div>
        <p v-if="!mostRecentListeningSessions.length">No Listening Sessions</p>
        <template v-for="(item, index) in mostRecentListeningSessions">
          <div :key="item.id" class="w-full py-0.5">
@@ -22,6 +22,10 @@
      <div class="w-full h-px bg-white bg-opacity-10 my-2" />
      <div class="py-2">
        <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">Listening Stats</h1>
+        <div class="flex items-center">
+          <p class="text-sm text-gray-300">{{ listeningSessions.length }} Listening Sessions</p>
+          <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs mx-2" :padding-x="1.5" :padding-y="1">View All</ui-btn>
+        </div>
        <p class="text-sm text-gray-300">
          Total Time Listened:&nbsp;
          <span class="font-mono text-base">{{ listeningTimePretty }}</span>
@@ -33,12 +37,14 @@

        <div v-if="latestSession" class="mt-4">
          <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">Last Listening Session</h1>
-          <p class="text-sm text-gray-300">{{ latestSession.audiobookTitle }} {{ $dateDistanceFromNow(latestSession.lastUpdate) }} for {{ $elapsedPrettyExtended(this.latestSession.timeListening) }}</p>
+          <p class="text-sm text-gray-300">
+            <strong>{{ latestSession.displayTitle }}</strong> {{ $dateDistanceFromNow(latestSession.updatedAt) }} for <span class="font-mono text-base">{{ $elapsedPrettyExtended(this.latestSession.timeListening) }}</span>
+          </p>
        </div>
      </div>
      <div class="w-full h-px bg-white bg-opacity-10 my-2" />
      <div class="py-2">
-        <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">Item Progress</h1>
+        <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">Saved Media Progress</h1>
        <table v-if="mediaProgress.length" class="userAudiobooksTable">
          <tr class="bg-primary bg-opacity-40">
            <th class="w-16 text-left">Item</th>
@@ -70,7 +76,7 @@
            </td>
          </tr>
        </table>
-        <p v-else class="text-white text-opacity-50">Nothing read yet...</p>
+        <p v-else class="text-white text-opacity-50">Nothing listened to yet...</p>
      </div>
    </div>
  </div>
@@ -132,7 +138,9 @@ export default {
      this.$copyToClipboard(str, this)
    },
    async init() {
-      this.listeningSessions = await this.$axios.$get(`/api/users/${this.user.id}/listening-sessions`).catch((err) => {
+      this.listeningSessions = await this.$axios.$get(`/api/users/${this.user.id}/listening-sessions?page=0&itemsPerPage=10`).then((data) => {
+        return data.sessions || []
+      }).catch((err) => {
        console.error('Failed to load listening sesions', err)
        return []
      })
@@ -0,0 +1,178 @@
+<template>
+  <div class="w-full h-full">
+    <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-0 sm:p-4 mb-8">
+      <nuxt-link :to="`/config/users/${user.id}`" class="text-white text-opacity-70 hover:text-opacity-100 hover:bg-white hover:bg-opacity-5 cursor-pointer rounded-full px-2 sm:px-0">
+        <div class="flex items-center">
+          <div class="h-10 w-10 flex items-center justify-center">
+            <span class="material-icons text-2xl">arrow_back</span>
+          </div>
+          <p class="pl-1">Back to User</p>
+        </div>
+      </nuxt-link>
+      <div class="flex items-center mb-2 mt-4 px-2 sm:px-0">
+        <widgets-online-indicator :value="!!userOnline" />
+        <h1 class="text-xl pl-2">{{ username }}</h1>
+      </div>
+
+      <div class="w-full h-px bg-white bg-opacity-10 my-2" />
+
+      <div class="py-2">
+        <h1 class="text-lg mb-2 text-white text-opacity-90 px-2 sm:px-0">Listening Sessions</h1>
+        <div v-if="listeningSessions.length">
+          <table class="userSessionsTable">
+            <tr class="bg-primary bg-opacity-40">
+              <th class="w-48 min-w-48 text-left">Item</th>
+              <th class="w-32 min-w-32 text-left hidden md:table-cell">Play Method</th>
+              <th class="w-32 min-w-32 text-left hidden sm:table-cell">Device Info</th>
+              <th class="w-32 min-w-32">Listened</th>
+              <th class="w-16 min-w-16">Last Time</th>
+              <th class="flex-grow hidden sm:table-cell">Last Update</th>
+            </tr>
+            <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
+              <td class="py-1 max-w-48">
+                <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
+                <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
+              </td>
+              <td class="hidden md:table-cell">
+                <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
+              </td>
+              <td class="hidden sm:table-cell">
+                <p class="text-xs" v-html="getDeviceInfoString(session.deviceInfo)" />
+              </td>
+              <td class="text-center">
+                <p class="text-xs font-mono">{{ $elapsedPretty(session.timeListening) }}</p>
+              </td>
+              <td class="text-center">
+                <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
+              </td>
+              <td class="text-center hidden sm:table-cell">
+                <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDate(session.updatedAt, 'MMMM do, yyyy HH:mm')">
+                  <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
+                </ui-tooltip>
+              </td>
+            </tr>
+          </table>
+          <div class="flex items-center justify-end py-1">
+            <ui-icon-btn icon="arrow_back_ios_new" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
+            <p class="text-sm mx-1">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" />
+          </div>
+        </div>
+        <p v-else class="text-white text-opacity-50">No sessions yet...</p>
+      </div>
+    </div>
+
+    <modals-listening-session-modal v-model="showSessionModal" :session="selectedSession" />
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ params, redirect, app }) {
+    var user = await app.$axios.$get(`/api/users/${params.id}`).catch((error) => {
+      console.error('Failed to get user', error)
+      return null
+    })
+    if (!user) return redirect('/config/users')
+    return {
+      user
+    }
+  },
+  data() {
+    return {
+      showSessionModal: false,
+      selectedSession: null,
+      listeningSessions: [],
+      numPages: 0,
+      total: 0,
+      currentPage: 0
+    }
+  },
+  computed: {
+    username() {
+      return this.user.username
+    },
+    userOnline() {
+      return this.$store.getters['users/getIsUserOnline'](this.user.id)
+    }
+  },
+  methods: {
+    prevPage() {
+      this.loadSessions(this.currentPage - 1)
+    },
+    nextPage() {
+      this.loadSessions(this.currentPage + 1)
+    },
+    showSession(session) {
+      this.selectedSession = session
+      this.showSessionModal = true
+    },
+    getDeviceInfoString(deviceInfo) {
+      if (!deviceInfo) return ''
+      var lines = []
+      if (deviceInfo.osName) lines.push(`${deviceInfo.osName} ${deviceInfo.osVersion}`)
+      if (deviceInfo.browserName) lines.push(deviceInfo.browserName)
+
+      if (deviceInfo.manufacturer && deviceInfo.model) lines.push(`${deviceInfo.manufacturer} ${deviceInfo.model}`)
+      if (deviceInfo.sdkVersion) lines.push(`SDK Version: ${deviceInfo.sdkVersion}`)
+      return lines.join('<br>')
+    },
+    getPlayMethodName(playMethod) {
+      if (playMethod === this.$constants.PlayMethod.DIRECTPLAY) return 'Direct Play'
+      else if (playMethod === this.$constants.PlayMethod.TRANSCODE) return 'Transcode'
+      else if (playMethod === this.$constants.PlayMethod.DIRECTSTREAM) return 'Direct Stream'
+      else if (playMethod === this.$constants.PlayMethod.LOCAL) return 'Local'
+      return 'Unknown'
+    },
+    async loadSessions(page) {
+      const data = await this.$axios.$get(`/api/users/${this.user.id}/listening-sessions?page=${page}&itemsPerPage=10`).catch((err) => {
+        console.error('Failed to load listening sesions', err)
+        return null
+      })
+      if (!data) {
+        this.$toast.error('Failed to load listening sessions')
+        return
+      }
+
+      this.numPages = data.numPages
+      this.total = data.total
+      this.currentPage = data.page
+      this.listeningSessions = data.sessions
+    },
+    init() {
+      this.loadSessions(0)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+.userSessionsTable {
+  border-collapse: collapse;
+  width: 100%;
+  max-width: 100%;
+  border: 1px solid #474747;
+}
+.userSessionsTable tr:first-child {
+  background-color: #272727;
+}
+.userSessionsTable tr:not(:first-child) {
+  background-color: #373838;
+}
+.userSessionsTable tr:not(:first-child):nth-child(odd) {
+  background-color: #2f2f2f;
+}
+.userSessionsTable tr:hover:not(:first-child) {
+  background-color: #474747;
+}
+.userSessionsTable td {
+  padding: 4px 8px;
+}
+.userSessionsTable th {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+</style>
@@ -31,11 +31,13 @@
                <p v-if="bookSubtitle" class="sm:ml-4 text-gray-400 text-xl md:text-2xl">{{ bookSubtitle }}</p>
              </div>

-              <p v-if="isPodcast" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl">by {{ podcastAuthor || 'Unknown' }}</p>
-              <p v-else-if="authors.length" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl">
-                by <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
-              </p>
-              <p v-else class="mb-2 mt-0.5 text-gray-200 text-xl">by Unknown</p>
+              <template v-if="!isVideo">
+                <p v-if="isPodcast" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl">by {{ podcastAuthor || 'Unknown' }}</p>
+                <p v-else-if="authors.length" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl">
+                  by <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">,&nbsp;</span></nuxt-link>
+                </p>
+                <p v-else class="mb-2 mt-0.5 text-gray-200 text-xl">by Unknown</p>
+              </template>

              <nuxt-link v-for="_series in seriesList" :key="_series.id" :to="`/library/${libraryId}/series/${_series.id}`" class="hover:underline font-sans text-gray-300 text-lg leading-7"> {{ _series.text }}</nuxt-link>

@@ -251,6 +253,9 @@ export default {
    isPodcast() {
      return this.libraryItem.mediaType === 'podcast'
    },
+    isVideo() {
+      return this.libraryItem.mediaType === 'video'
+    },
    isMissing() {
      return this.libraryItem.isMissing
    },
@@ -258,11 +263,12 @@ export default {
      return this.libraryItem.isInvalid
    },
    invalidAudioFiles() {
-      if (this.isPodcast) return []
+      if (this.isPodcast || this.isVideo) return []
      return this.libraryItem.media.audioFiles.filter((af) => af.invalid)
    },
    showPlayButton() {
      if (this.isMissing || this.isInvalid) return false
+      if (this.isVideo) return !!this.videoFile
      if (this.isPodcast) return this.podcastEpisodes.length
      return this.tracks.length
    },
@@ -348,6 +354,9 @@ export default {
    ebookFile() {
      return this.media.ebookFile
    },
+    videoFile() {
+      return this.media.videoFile
+    },
    showExperimentalReadAlert() {
      return !this.tracks.length && this.ebookFile && !this.showExperimentalFeatures && !this.enableEReader
    },
@@ -525,13 +534,13 @@ export default {
      }
    },
    rssFeedOpen(data) {
-      if (data.libraryItemId === this.libraryItemId) {
+      if (data.entityId === this.libraryItemId) {
        console.log('RSS Feed Opened', data)
        this.rssFeedUrl = data.feedUrl
      }
    },
    rssFeedClosed(data) {
-      if (data.libraryItemId === this.libraryItemId) {
+      if (data.entityId === this.libraryItemId) {
        console.log('RSS Feed Closed', data)
        this.rssFeedUrl = null
      }
@@ -1,6 +1,6 @@
 <template>
  <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
-    <app-book-shelf-toolbar is-home />
+    <app-book-shelf-toolbar page="authors" is-home :authors="authors" />
    <div id="bookshelf" class="w-full h-full p-8 overflow-y-auto">
      <div class="flex flex-wrap justify-center">
        <template v-for="author in authors">
@@ -1,12 +1,14 @@
 <template>
  <div class="page" :class="streamLibraryItem ? 'streaming' : ''">
    <app-book-shelf-toolbar page="podcast-search" />
+
    <div class="w-full h-full overflow-y-auto p-12 relative">
-      <div class="w-full max-w-3xl mx-auto">
-        <form @submit.prevent="submit" class="flex">
+      <div class="w-full max-w-4xl mx-auto flex">
+        <form @submit.prevent="submit" class="flex flex-grow">
          <ui-text-input v-model="searchInput" :disabled="processing" placeholder="Enter search term or RSS feed URL" class="flex-grow mr-2" />
          <ui-btn type="submit" :disabled="processing">Submit</ui-btn>
        </form>
+        <ui-file-input ref="fileInput" :accept="'.opml, .txt'" class="mx-2" @change="opmlFileUpload"> Upload OPML File </ui-file-input>
      </div>

      <div class="w-full max-w-3xl mx-auto py-4">
@@ -32,6 +34,7 @@
    </div>

    <modals-podcast-new-modal v-model="showNewPodcastModal" :podcast-data="selectedPodcast" :podcast-feed-data="selectedPodcastFeed" />
+    <modals-podcast-opml-feeds-modal v-model="showOPMLFeedsModal" :feeds="opmlFeeds" />
  </div>
 </template>

@@ -62,7 +65,9 @@ export default {
      processing: false,
      showNewPodcastModal: false,
      selectedPodcast: null,
-      selectedPodcastFeed: null
+      selectedPodcastFeed: null,
+      showOPMLFeedsModal: false,
+      opmlFeeds: []
    }
  },
  computed: {
@@ -71,6 +76,40 @@ export default {
    }
  },
  methods: {
+    async opmlFileUpload(file) {
+      this.processing = true
+      var txt = await new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.onload = () => {
+          resolve(reader.result)
+        }
+        reader.readAsText(file)
+      })
+
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.reset()
+      }
+
+      if (!txt || !txt.includes('<opml') || !txt.includes('<outline ')) {
+        // Quick lazy check for valid OPML
+        this.$toast.error('Invalid OPML file <opml> tag not found OR an <outline> tag was not found')
+        this.processing = false
+        return
+      }
+
+      await this.$axios
+        .$post(`/api/podcasts/opml`, { opmlText: txt })
+        .then((data) => {
+          console.log(data)
+          this.opmlFeeds = data.feeds || []
+          this.showOPMLFeedsModal = true
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.$toast.error('Failed to parse OPML file')
+        })
+      this.processing = false
+    },
    submit() {
      if (!this.searchInput) return

@@ -64,8 +64,8 @@
      </div>
    </div>

-    <input ref="fileInput" id="hidden-input" type="file" multiple :accept="inputAccept" class="hidden" @change="inputChanged" />
-    <input ref="fileFolderInput" id="hidden-input" type="file" webkitdirectory multiple :accept="inputAccept" class="hidden" @change="inputChanged" />
+    <input ref="fileInput" type="file" multiple :accept="inputAccept" class="hidden" @change="inputChanged" />
+    <input ref="fileFolderInput" type="file" webkitdirectory multiple :accept="inputAccept" class="hidden" @change="inputChanged" />
  </div>
 </template>

@@ -52,12 +52,12 @@ export default class CastPlayer extends EventEmitter {
      return
    }

-    // var currentItemId = media.currentItemId
    var currentItemId = media.media.itemId
    if (currentItemId && this.currentTrackIndex !== currentItemId - 1) {
      this.currentTrackIndex = currentItemId - 1
    }

+    // TODO: Emit finished event
    if (media.playerState !== this.castPlayerState) {
      this.emit('stateChange', media.playerState)
      this.castPlayerState = media.playerState
@@ -124,6 +124,8 @@ export default class CastPlayer extends EventEmitter {

  async seek(time, playWhenReady) {
    if (!this.player) return
+
+    this.playWhenReady = playWhenReady
    if (time < this.currentTrack.startOffset || time > this.currentTrack.startOffset + this.currentTrack.duration) {
      // Change Track
      var request = buildCastLoadRequest(this.libraryItem, this.coverUrl, this.audioTracks, time, playWhenReady, this.defaultPlaybackRate)
@@ -1,7 +1,7 @@
 import Hls from 'hls.js'
 import EventEmitter from 'events'

-export default class LocalPlayer extends EventEmitter {
+export default class LocalAudioPlayer extends EventEmitter {
  constructor(ctx) {
    super()

@@ -71,11 +71,11 @@ export default class LocalPlayer extends EventEmitter {
      console.log(`[LocalPlayer] Track ended - loading next track ${this.currentTrackIndex + 1}`)
      // Has next track
      this.currentTrackIndex++
-      this.playWhenReady = true
      this.startTime = this.currentTrack.startOffset
      this.loadCurrentTrack()
    } else {
      console.log(`[LocalPlayer] Ended`)
+      this.emit('finished')
    }
  }
  evtError(error) {
@@ -88,6 +88,7 @@ export default class LocalPlayer extends EventEmitter {
    }

    this.emit('stateChange', 'LOADED')
+
    if (this.playWhenReady) {
      this.playWhenReady = false
      this.play()
@@ -204,10 +205,12 @@ export default class LocalPlayer extends EventEmitter {
  }

  play() {
+    this.playWhenReady = true
    if (this.player) this.player.play()
  }

  pause() {
+    this.playWhenReady = false
    if (this.player) this.player.pause()
  }

@@ -228,8 +231,11 @@ export default class LocalPlayer extends EventEmitter {
    this.player.playbackRate = playbackRate
  }

-  seek(time) {
+  seek(time, playWhenReady) {
    if (!this.player) return
+
+    this.playWhenReady = playWhenReady
+
    if (this.isHlsTranscode) {
      // Seeking HLS stream
      var offsetTime = time - (this.currentTrack.startOffset || 0)
@@ -254,7 +260,6 @@ export default class LocalPlayer extends EventEmitter {
        this.player.currentTime = Math.max(0, offsetTime)
      }
    }
-
  }

  setVolume(volume) {
@@ -0,0 +1,260 @@
+import Hls from 'hls.js'
+import EventEmitter from 'events'
+
+export default class LocalVideoPlayer extends EventEmitter {
+  constructor(ctx) {
+    super()
+
+    this.ctx = ctx
+    this.player = null
+
+    this.libraryItem = null
+    this.videoTrack = null
+    this.isHlsTranscode = null
+    this.hlsInstance = null
+    this.usingNativeplayer = false
+    this.startTime = 0
+    this.playWhenReady = false
+    this.defaultPlaybackRate = 1
+
+    this.playableMimeTypes = []
+
+    this.initialize()
+  }
+
+  initialize() {
+    if (document.getElementById('video-player')) {
+      document.getElementById('video-player').remove()
+    }
+    var videoEl = document.createElement('video')
+    videoEl.id = 'video-player'
+    // videoEl.style.display = 'none'
+    videoEl.className = 'absolute bg-black z-50'
+    videoEl.style.height = '216px'
+    videoEl.style.width = '384px'
+    videoEl.style.bottom = '80px'
+    videoEl.style.left = '16px'
+    document.body.appendChild(videoEl)
+    this.player = videoEl
+
+    this.player.addEventListener('play', this.evtPlay.bind(this))
+    this.player.addEventListener('pause', this.evtPause.bind(this))
+    this.player.addEventListener('progress', this.evtProgress.bind(this))
+    this.player.addEventListener('ended', this.evtEnded.bind(this))
+    this.player.addEventListener('error', this.evtError.bind(this))
+    this.player.addEventListener('loadedmetadata', this.evtLoadedMetadata.bind(this))
+    this.player.addEventListener('timeupdate', this.evtTimeupdate.bind(this))
+
+    var mimeTypes = ['video/mp4']
+    var mimeTypeCanPlayMap = {}
+    mimeTypes.forEach((mt) => {
+      var canPlay = this.player.canPlayType(mt)
+      mimeTypeCanPlayMap[mt] = canPlay
+      if (canPlay) this.playableMimeTypes.push(mt)
+    })
+    console.log(`[LocalVideoPlayer] Supported mime types`, mimeTypeCanPlayMap, this.playableMimeTypes)
+  }
+
+  evtPlay() {
+    this.emit('stateChange', 'PLAYING')
+  }
+  evtPause() {
+    this.emit('stateChange', 'PAUSED')
+  }
+  evtProgress() {
+    var lastBufferTime = this.getLastBufferedTime()
+    this.emit('buffertimeUpdate', lastBufferTime)
+  }
+  evtEnded() {
+    console.log(`[LocalVideoPlayer] Ended`)
+    this.emit('finished')
+  }
+  evtError(error) {
+    console.error('Player error', error)
+    this.emit('error', error)
+  }
+  evtLoadedMetadata(data) {
+    if (!this.isHlsTranscode) {
+      this.player.currentTime = this.startTime
+    }
+
+    this.emit('stateChange', 'LOADED')
+    if (this.playWhenReady) {
+      this.playWhenReady = false
+      this.play()
+    }
+  }
+  evtTimeupdate() {
+    if (this.player.paused) {
+      this.emit('timeupdate', this.getCurrentTime())
+    }
+  }
+
+  destroy() {
+    this.destroyHlsInstance()
+    if (this.player) {
+      this.player.remove()
+    }
+  }
+
+  set(libraryItem, videoTrack, isHlsTranscode, startTime, playWhenReady = false) {
+    this.libraryItem = libraryItem
+    this.videoTrack = videoTrack
+    this.isHlsTranscode = isHlsTranscode
+    this.playWhenReady = playWhenReady
+    this.startTime = startTime
+
+    if (this.hlsInstance) {
+      this.destroyHlsInstance()
+    }
+
+    if (this.isHlsTranscode) {
+      this.setHlsStream()
+    } else {
+      this.setDirectPlay()
+    }
+  }
+
+  setHlsStream() {
+    // iOS does not support Media Elements but allows for HLS in the native video player
+    if (!Hls.isSupported()) {
+      console.warn('HLS is not supported - fallback to using video element')
+      this.usingNativeplayer = true
+      this.player.src = this.videoTrack.relativeContentUrl
+      this.player.currentTime = this.startTime
+      return
+    }
+
+    var hlsOptions = {
+      startPosition: this.startTime || -1
+      // No longer needed because token is put in a query string
+      // xhrSetup: (xhr) => {
+      //   xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
+      // }
+    }
+    this.hlsInstance = new Hls(hlsOptions)
+
+    this.hlsInstance.attachMedia(this.player)
+    this.hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
+      this.hlsInstance.loadSource(this.videoTrack.relativeContentUrl)
+
+      this.hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
+        console.log('[HLS] Manifest Parsed')
+      })
+
+      this.hlsInstance.on(Hls.Events.ERROR, (e, data) => {
+        console.error('[HLS] Error', data.type, data.details, data)
+        if (data.details === Hls.ErrorDetails.BUFFER_STALLED_ERROR) {
+          console.error('[HLS] BUFFER STALLED ERROR')
+        }
+      })
+      this.hlsInstance.on(Hls.Events.DESTROYING, () => {
+        console.log('[HLS] Destroying HLS Instance')
+      })
+    })
+  }
+
+  setDirectPlay() {
+    this.player.src = this.videoTrack.relativeContentUrl
+    console.log(`[LocalVideoPlayer] Loading track src ${this.videoTrack.relativeContentUrl}`)
+    this.player.load()
+  }
+
+  destroyHlsInstance() {
+    if (!this.hlsInstance) return
+    if (this.hlsInstance.destroy) {
+      var temp = this.hlsInstance
+      temp.destroy()
+    }
+    this.hlsInstance = null
+  }
+
+  async resetStream(startTime) {
+    this.destroyHlsInstance()
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    this.set(this.libraryItem, this.videoTrack, this.isHlsTranscode, startTime, true)
+  }
+
+  playPause() {
+    if (!this.player) return
+    if (this.player.paused) this.play()
+    else this.pause()
+  }
+
+  play() {
+    if (this.player) this.player.play()
+  }
+
+  pause() {
+    if (this.player) this.player.pause()
+  }
+
+  getCurrentTime() {
+    return this.player ? this.player.currentTime : 0
+  }
+
+  getDuration() {
+    return this.videoTrack.duration
+  }
+
+  setPlaybackRate(playbackRate) {
+    if (!this.player) return
+    this.defaultPlaybackRate = playbackRate
+    this.player.playbackRate = playbackRate
+  }
+
+  seek(time) {
+    if (!this.player) return
+    this.player.currentTime = Math.max(0, time)
+  }
+
+  setVolume(volume) {
+    if (!this.player) return
+    this.player.volume = volume
+  }
+
+  // Utils
+  isValidDuration(duration) {
+    if (duration && !isNaN(duration) && duration !== Number.POSITIVE_INFINITY && duration !== Number.NEGATIVE_INFINITY) {
+      return true
+    }
+    return false
+  }
+
+  getBufferedRanges() {
+    if (!this.player) return []
+    const ranges = []
+    const seekable = this.player.buffered || []
+
+    let offset = 0
+
+    for (let i = 0, length = seekable.length; i < length; i++) {
+      let start = seekable.start(i)
+      let end = seekable.end(i)
+      if (!this.isValidDuration(start)) {
+        start = 0
+      }
+      if (!this.isValidDuration(end)) {
+        end = 0
+        continue
+      }
+
+      ranges.push({
+        start: start + offset,
+        end: end + offset
+      })
+    }
+    return ranges
+  }
+
+  getLastBufferedTime() {
+    var bufferedRanges = this.getBufferedRanges()
+    if (!bufferedRanges.length) return 0
+
+    var buff = bufferedRanges.find((buff) => buff.start < this.player.currentTime && buff.end > this.player.currentTime)
+    if (buff) return buff.end
+
+    var last = bufferedRanges[bufferedRanges.length - 1]
+    return last.end
+  }
+}
@@ -1,6 +1,8 @@
-import LocalPlayer from './LocalPlayer'
+import LocalAudioPlayer from './LocalAudioPlayer'
+import LocalVideoPlayer from './LocalVideoPlayer'
 import CastPlayer from './CastPlayer'
 import AudioTrack from './AudioTrack'
+import VideoTrack from './VideoTrack'

 export default class PlayerHandler {
  constructor(ctx) {
@@ -14,9 +16,11 @@ export default class PlayerHandler {
    this.player = null
    this.playerState = 'IDLE'
    this.isHlsTranscode = false
+    this.isVideo = false
    this.currentSessionId = null
    this.startTime = 0

+    this.failedProgressSyncs = 0
    this.lastSyncTime = 0
    this.lastSyncedAt = 0
    this.listeningTimeSinceSync = 0
@@ -34,7 +38,7 @@ export default class PlayerHandler {
    return this.libraryItem && (this.player instanceof CastPlayer)
  }
  get isPlayingLocalItem() {
-    return this.libraryItem && (this.player instanceof LocalPlayer)
+    return this.libraryItem && (this.player instanceof LocalAudioPlayer)
  }
  get userToken() {
    return this.ctx.$store.getters['user/getToken']
@@ -48,16 +52,17 @@ export default class PlayerHandler {
  }

  load(libraryItem, episodeId, playWhenReady, playbackRate) {
-    if (!this.player) this.switchPlayer()
-
    this.libraryItem = libraryItem
    this.episodeId = episodeId
    this.playWhenReady = playWhenReady
    this.initialPlaybackRate = playbackRate
-    this.prepare()
+    this.isVideo = libraryItem.mediaType === 'video'
+
+    if (!this.player) this.switchPlayer(playWhenReady)
+    else this.prepare()
  }

-  switchPlayer() {
+  switchPlayer(playWhenReady) {
    if (this.isCasting && !(this.player instanceof CastPlayer)) {
      console.log('[PlayerHandler] Switching to cast player')

@@ -73,10 +78,10 @@ export default class PlayerHandler {

      if (this.libraryItem) {
        // libraryItem was already loaded - prepare for cast
-        this.playWhenReady = false
+        this.playWhenReady = playWhenReady
        this.prepare()
      }
-    } else if (!this.isCasting && !(this.player instanceof LocalPlayer)) {
+    } else if (!this.isCasting && !(this.player instanceof LocalAudioPlayer) && !(this.player instanceof LocalVideoPlayer)) {
      console.log('[PlayerHandler] Switching to local player')

      this.stopPlayInterval()
@@ -85,12 +90,18 @@ export default class PlayerHandler {
      if (this.player) {
        this.player.destroy()
      }
-      this.player = new LocalPlayer(this.ctx)
+
+      if (this.isVideo) {
+        this.player = new LocalVideoPlayer(this.ctx)
+      } else {
+        this.player = new LocalAudioPlayer(this.ctx)
+      }
+
      this.setPlayerListeners()

      if (this.libraryItem) {
        // libraryItem was already loaded - prepare for local play
-        this.playWhenReady = false
+        this.playWhenReady = playWhenReady
        this.prepare()
      }
    }
@@ -101,16 +112,27 @@ export default class PlayerHandler {
    this.player.on('timeupdate', this.playerTimeupdate.bind(this))
    this.player.on('buffertimeUpdate', this.playerBufferTimeUpdate.bind(this))
    this.player.on('error', this.playerError.bind(this))
+    this.player.on('finished', this.playerFinished.bind(this))
  }

  playerError() {
    // Switch to HLS stream on error
-    if (!this.isCasting && !this.currentStreamId && (this.player instanceof LocalPlayer)) {
+    if (!this.isCasting && !this.currentStreamId && (this.player instanceof LocalAudioPlayer)) {
      console.log(`[PlayerHandler] Audio player error switching to HLS stream`)
      this.prepare(true)
    }
  }

+  playerFinished() {
+    this.stopPlayInterval()
+
+    var currentTime = this.player.getCurrentTime()
+    this.ctx.setCurrentTime(currentTime)
+
+    // TODO: Add listening time between last sync and now?
+    this.sendProgressSync(currentTime)
+  }
+
  playerStateChange(state) {
    console.log('[PlayerHandler] Player state change', state)
    this.playerState = state
@@ -144,7 +166,7 @@ export default class PlayerHandler {
      supportedMimeTypes: this.player.playableMimeTypes,
      mediaPlayer: this.isCasting ? 'chromecast' : 'html5',
      forceTranscode,
-      forceDirectPlay: this.isCasting // TODO: add transcode support for chromecast
+      forceDirectPlay: this.isCasting || this.isVideo // TODO: add transcode support for chromecast
    }

    var path = this.episodeId ? `/api/items/${this.libraryItem.id}/play/${this.episodeId}` : `/api/items/${this.libraryItem.id}/play`
@@ -155,31 +177,46 @@ export default class PlayerHandler {
  }

  prepareOpenSession(session, playbackRate) { // Session opened on init socket
-    if (!this.player) this.switchPlayer()
-
    this.libraryItem = session.libraryItem
+    this.isVideo = session.libraryItem.mediaType === 'video'
    this.playWhenReady = false
    this.initialPlaybackRate = playbackRate
+
+    if (!this.player) this.switchPlayer()
    this.prepareSession(session)
  }

  prepareSession(session) {
+    this.failedProgressSyncs = 0
    this.startTime = session.currentTime
    this.currentSessionId = session.id
    this.displayTitle = session.displayTitle
    this.displayAuthor = session.displayAuthor

    console.log('[PlayerHandler] Preparing Session', session)
-    var audioTracks = session.audioTracks.map(at => new AudioTrack(at, this.userToken))

-    this.ctx.playerLoading = true
-    this.isHlsTranscode = true
-    if (session.playMethod === this.ctx.$constants.PlayMethod.DIRECTPLAY) {
-      this.isHlsTranscode = false
+    if (session.videoTrack) {
+      var videoTrack = new VideoTrack(session.videoTrack, this.userToken)
+
+      this.ctx.playerLoading = true
+      this.isHlsTranscode = true
+      if (session.playMethod === this.ctx.$constants.PlayMethod.DIRECTPLAY) {
+        this.isHlsTranscode = false
+      }
+
+      this.player.set(this.libraryItem, videoTrack, this.isHlsTranscode, this.startTime, this.playWhenReady)
+    } else {
+      var audioTracks = session.audioTracks.map(at => new AudioTrack(at, this.userToken))
+
+      this.ctx.playerLoading = true
+      this.isHlsTranscode = true
+      if (session.playMethod === this.ctx.$constants.PlayMethod.DIRECTPLAY) {
+        this.isHlsTranscode = false
+      }
+
+      this.player.set(this.libraryItem, audioTracks, this.isHlsTranscode, this.startTime, this.playWhenReady)
    }

-    this.player.set(this.libraryItem, audioTracks, this.isHlsTranscode, this.startTime, this.playWhenReady)
-
    // browser media session api
    this.ctx.setMediaSession()
  }
@@ -251,8 +288,15 @@ export default class PlayerHandler {
      currentTime
    }
    this.listeningTimeSinceSync = 0
-    this.ctx.$axios.$post(`/api/session/${this.currentSessionId}/sync`, syncData, { timeout: 1000 }).catch((error) => {
+    this.ctx.$axios.$post(`/api/session/${this.currentSessionId}/sync`, syncData, { timeout: 1000 }).then(() => {
+      this.failedProgressSyncs = 0
+    }).catch((error) => {
      console.error('Failed to update session progress', error)
+      this.failedProgressSyncs++
+      if (this.failedProgressSyncs >= 2) {
+        this.ctx.showFailedProgressSyncs()
+        this.failedProgressSyncs = 0
+      }
    })
  }

@@ -0,0 +1,32 @@
+export default class VideoTrack {
+  constructor(track, userToken) {
+    this.index = track.index || 0
+    this.startOffset = track.startOffset || 0 // Total time of all previous tracks
+    this.duration = track.duration || 0
+    this.title = track.title || ''
+    this.contentUrl = track.contentUrl || null
+    this.mimeType = track.mimeType
+    this.metadata = track.metadata || {}
+
+    this.userToken = userToken
+  }
+
+  get fullContentUrl() {
+    if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
+
+    if (process.env.NODE_ENV === 'development') {
+      return `${process.env.serverUrl}${this.contentUrl}?token=${this.userToken}`
+    }
+    return `${window.location.origin}${this.contentUrl}?token=${this.userToken}`
+  }
+
+  get relativeContentUrl() {
+    if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
+
+    if (process.env.NODE_ENV === 'development') {
+      return `${process.env.serverUrl}${this.contentUrl}?token=${this.userToken}`
+    }
+
+    return this.contentUrl + `?token=${this.userToken}`
+  }
+}
@@ -1,6 +1,6 @@
 const SupportedFileTypes = {
  image: ['png', 'jpg', 'jpeg', 'webp'],
-  audio: ['m4b', 'mp3', 'm4a', 'flac', 'opus', 'ogg', 'mp4', 'aac', 'wma', 'aiff'],
+  audio: ['m4b', 'mp3', 'm4a', 'flac', 'opus', 'ogg', 'mp4', 'aac', 'wma', 'aiff', 'wav'],
  ebook: ['epub', 'pdf', 'mobi', 'azw3', 'cbr', 'cbz'],
  info: ['nfo'],
  text: ['txt'],
@@ -28,7 +28,8 @@ const BookshelfView = {
 const PlayMethod = {
  DIRECTPLAY: 0,
  DIRECTSTREAM: 1,
-  TRANSCODE: 2
+  TRANSCODE: 2,
+  LOCAL: 3
 }

 const Constants = {
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import Path from 'path'
 import vClickOutside from 'v-click-outside'
 import { formatDistance, format, addDays, isDate } from 'date-fns'

@@ -57,6 +58,7 @@ Vue.prototype.$elapsedPretty = (seconds, useFullNames = false) => {
 }

 Vue.prototype.$secondsToTimestamp = (seconds) => {
+  if (!seconds) return '0:00'
  var _seconds = seconds
  var _minutes = Math.floor(seconds / 60)
  _seconds -= _minutes * 60
@@ -118,20 +120,36 @@ Vue.prototype.$sanitizeFilename = (input, colonReplacement = ' - ') => {
  if (typeof input !== 'string') {
    return false
  }
+
+  // Max is actually 255-260 for windows but this leaves padding incase ext wasnt put on yet
+  const MAX_FILENAME_LEN = 240
+
  var replacement = ''
-  var illegalRe = /[\/\?<>\\:\*\|"]/g;
-  var controlRe = /[\x00-\x1f\x80-\x9f]/g;
-  var reservedRe = /^\.+$/;
-  var windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i;
-  var windowsTrailingRe = /[\. ]+$/;
+  var illegalRe = /[\/\?<>\\:\*\|"]/g
+  var controlRe = /[\x00-\x1f\x80-\x9f]/g
+  var reservedRe = /^\.+$/
+  var windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i
+  var windowsTrailingRe = /[\. ]+$/
+  var lineBreaks = /[\n\r]/g

  var sanitized = input
    .replace(':', colonReplacement) // Replace first occurrence of a colon
    .replace(illegalRe, replacement)
    .replace(controlRe, replacement)
    .replace(reservedRe, replacement)
+    .replace(lineBreaks, replacement)
    .replace(windowsReservedRe, replacement)
-    .replace(windowsTrailingRe, replacement);
+    .replace(windowsTrailingRe, replacement)
+
+
+  if (sanitized.length > MAX_FILENAME_LEN) {
+    var lenToRemove = sanitized.length - MAX_FILENAME_LEN
+    var ext = Path.extname(sanitized)
+    var basename = Path.basename(sanitized, ext)
+    basename = basename.slice(0, basename.length - lenToRemove)
+    sanitized = basename + ext
+  }
+
  return sanitized
 }

@@ -23,14 +23,17 @@ function parseSemver(ver) {
  }
  return null
 }
+
+export const currentVersion = packagejson.version
+
 export async function checkForUpdate() {
  if (!packagejson.version) {
-    return
+    return null
  }
  var currVerObj = parseSemver('v' + packagejson.version)
  if (!currVerObj) {
    console.error('Invalid version', packagejson.version)
-    return
+    return null
  }
  var largestVer = null
  await axios.get(`https://api.github.com/repos/advplyr/audiobookshelf/releases`).then((res) => {
@@ -49,7 +52,7 @@ export async function checkForUpdate() {
  })
  if (!largestVer) {
    console.error('No valid version tags to compare with')
-    return
+    return null
  }

  return {
@@ -6,11 +6,11 @@ export const state = () => ({
  showUserCollectionsModal: false,
  showEditCollectionModal: false,
  showEditPodcastEpisode: false,
+  showViewPodcastEpisodeModal: false,
  showEditAuthorModal: false,
  selectedEpisode: null,
  selectedCollection: null,
  selectedAuthor: null,
-  showBookshelfTextureModal: false,
  isCasting: false, // Actively casting
  isChromecastInitialized: false // Script loaded
 })
@@ -53,6 +53,9 @@ export const mutations = {
  setShowEditPodcastEpisodeModal(state, val) {
    state.showEditPodcastEpisode = val
  },
+  setShowViewPodcastEpisodeModal(state, val) {
+    state.showViewPodcastEpisodeModal = val
+  },
  setEditCollection(state, collection) {
    state.selectedCollection = collection
    state.showEditCollectionModal = true
@@ -60,9 +63,6 @@ export const mutations = {
  setSelectedEpisode(state, episode) {
    state.selectedEpisode = episode
  },
-  setShowBookshelfTextureModal(state, val) {
-    state.showBookshelfTextureModal = val
-  },
  showEditAuthorModal(state, author) {
    state.selectedAuthor = author
    state.showEditAuthorModal = true
@@ -1,4 +1,4 @@
-import { checkForUpdate } from '@/plugins/version'
+import { checkForUpdate, currentVersion } from '@/plugins/version'
 import Vue from 'vue'

 export const state = () => ({
@@ -8,6 +8,7 @@ export const state = () => ({
  streamLibraryItem: null,
  streamEpisodeId: null,
  streamIsPlaying: false,
+  playerIsFullscreen: false,
  editModalTab: 'details',
  showEditModal: false,
  showEReader: false,
@@ -20,7 +21,7 @@ export const state = () => ({
  backups: [],
  bookshelfBookIds: [],
  openModal: null,
-  selectedBookshelfTexture: '/textures/wood_default.jpg',
+  innerModalOpen: false,
  lastBookshelfScrollData: {}
 })

@@ -64,20 +65,44 @@ export const actions = {
    })
  },
  checkForUpdate({ commit }) {
-    return checkForUpdate()
-      .then((res) => {
-        commit('setVersionData', res)
-        return res
-      })
-      .catch((error) => {
-        console.error('Update check failed', error)
-        return false
-      })
-  },
-  setBookshelfTexture({ commit, state }, img) {
-    let root = document.documentElement;
-    commit('setBookshelfTexture', img)
-    root.style.setProperty('--bookshelf-texture-img', `url(${img})`);
+    const VERSION_CHECK_BUFF = 1000 * 60 * 5 // 5 minutes
+    var lastVerCheck = localStorage.getItem('lastVerCheck') || 0
+    var savedVersionData = localStorage.getItem('versionData')
+    if (savedVersionData) {
+      try {
+        savedVersionData = JSON.parse(localStorage.getItem('versionData'))
+      } catch (error) {
+        console.error('Failed to parse version data', error)
+        savedVersionData = null
+        localStorage.removeItem('versionData')
+      }
+    }
+
+    var shouldCheckForUpdate = Date.now() - Number(lastVerCheck) > VERSION_CHECK_BUFF
+    if (!shouldCheckForUpdate && savedVersionData && savedVersionData.version !== currentVersion) {
+      // Version mismatch between saved data so check for update anyway
+      shouldCheckForUpdate = true
+    }
+
+    if (shouldCheckForUpdate) {
+      return checkForUpdate()
+        .then((res) => {
+          if (res) {
+            localStorage.setItem('lastVerCheck', Date.now())
+            localStorage.setItem('versionData', JSON.stringify(res))
+
+            commit('setVersionData', res)
+          }
+          return res && res.hasUpdate
+        })
+        .catch((error) => {
+          console.error('Update check failed', error)
+          return false
+        })
+    } else if (savedVersionData) {
+      commit('setVersionData', savedVersionData)
+    }
+    return null
  }
 }

@@ -85,6 +110,9 @@ export const mutations = {
  setSource(state, source) {
    state.Source = source
  },
+  setPlayerIsFullscreen(state, val) {
+    state.playerIsFullscreen = val
+  },
  setLastBookshelfScrollData(state, { scrollTop, path, name }) {
    state.lastBookshelfScrollData[name] = { scrollTop, path }
  },
@@ -177,7 +205,7 @@ export const mutations = {
  setOpenModal(state, val) {
    state.openModal = val
  },
-  setBookshelfTexture(state, val) {
-    state.selectedBookshelfTexture = val
+  setInnerModalOpen(state, val) {
+    state.innerModalOpen = val
  }
 }
@@ -8,7 +8,8 @@ module.exports = {
        'bg-red-600',
        'text-green-500',
        'py-1.5',
-        'bg-info'
+        'bg-info',
+        'px-1.5'
      ]
    }
  },
@@ -37,6 +38,8 @@ module.exports = {
      minWidth: {
        '6': '1.5rem',
        '12': '3rem',
+        '16': '4rem',
+        '20': '5rem',
        '24': '6rem',
        '32': '8rem',
        '48': '12rem',
@@ -75,6 +78,9 @@ module.exports = {
        mono: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono],
        book: ['Gentium Book Basic', 'serif']
      },
+      fontSize: {
+        xxs: '0.625rem'
+      },
      zIndex: {
        '50': 50
      }
@@ -1,6 +1,6 @@
 {
  "name": "audiobookshelf",
-  "version": "2.0.16",
+  "version": "2.0.21",
  "description": "Self-hosted audiobook and podcast server",
  "main": "index.js",
  "scripts": {
@@ -35,22 +35,15 @@
    "express": "^4.17.1",
    "express-fileupload": "^1.2.1",
    "express-rate-limit": "^5.3.0",
-    "fast-sort": "^3.1.1",
    "fluent-ffmpeg": "^2.1.2",
    "fs-extra": "^10.0.0",
-    "image-type": "^4.1.0",
+    "htmlparser2": "^8.0.1",
    "jsonwebtoken": "^8.5.1",
    "libgen": "^2.1.0",
-    "node-cron": "^3.0.0",
    "node-ffprobe": "^3.0.0",
    "node-stream-zip": "^1.15.0",
-    "podcast": "^2.0.0",
-    "proper-lockfile": "^4.1.2",
-    "read-chunk": "^3.1.0",
    "recursive-readdir-async": "^1.1.8",
    "socket.io": "^4.4.1",
-    "string-strip-html": "^8.3.0",
-    "watcher": "^1.2.0",
    "xml2js": "^0.4.23"
  }
 }
@@ -69,7 +69,7 @@ docker run -d \
  -e AUDIOBOOKSHELF_GID=100 \
  -p 13378:80 \
  -v </path/to/audiobooks>:/audiobooks \
-  -v </path/to/your/podcasts>:/podcasts \
+  -v </path/to/podcasts>:/podcasts \
  -v </path/to/config>:/config \
  -v </path/to/metadata>:/metadata \
  --name audiobookshelf \
@@ -90,6 +90,7 @@ docker start audiobookshelf
 ### docker-compose.yml ###
 services:
  audiobookshelf:
+    container_name: audiobookshelf
    image: ghcr.io/advplyr/audiobookshelf:latest
    environment:
      - AUDIOBOOKSHELF_UID=99
@@ -97,8 +98,8 @@ services:
    ports:
      - 13378:80
    volumes:
-      - </path/to/your/audiobooks>:/audiobooks
-      - </path/to/your/podcasts>:/podcasts
+      - </path/to/audiobooks>:/audiobooks
+      - </path/to/podcasts>:/podcasts
      - </path/to/config>:/config
      - </path/to/metadata>:/metadata
 ```
@@ -195,7 +196,7 @@ server
                     proxy_redirect                      http:// https://;
                   }
 }
-``` 
+```

 ### Apache Reverse Proxy

@@ -104,7 +104,6 @@ class Auth {
  async login(req, res) {
    var username = (req.body.username || '').toLowerCase()
    var password = req.body.password || ''
-    Logger.debug('Check Auth', username, !!password)

    var user = this.users.find(u => u.username.toLowerCase() === username)

@@ -1,6 +1,5 @@
 const Path = require('path')
-const njodb = require('./njodb')
-const jwt = require('jsonwebtoken')
+const njodb = require('./libs/njodb')
 const Logger = require('./Logger')
 const { version } = require('../package.json')
 const LibraryItem = require('./objects/LibraryItem')
@@ -11,6 +10,7 @@ const Author = require('./objects/entities/Author')
 const Series = require('./objects/entities/Series')
 const ServerSettings = require('./objects/settings/ServerSettings')
 const PlaybackSession = require('./objects/PlaybackSession')
+const Feed = require('./objects/Feed')

 class Db {
  constructor() {
@@ -22,6 +22,7 @@ class Db {
    this.CollectionsPath = Path.join(global.ConfigPath, 'collections')
    this.AuthorsPath = Path.join(global.ConfigPath, 'authors')
    this.SeriesPath = Path.join(global.ConfigPath, 'series')
+    this.FeedsPath = Path.join(global.ConfigPath, 'feeds')

    this.libraryItemsDb = new njodb.Database(this.LibraryItemsPath)
    this.usersDb = new njodb.Database(this.UsersPath)
@@ -31,6 +32,7 @@ class Db {
    this.collectionsDb = new njodb.Database(this.CollectionsPath, { datastores: 2 })
    this.authorsDb = new njodb.Database(this.AuthorsPath)
    this.seriesDb = new njodb.Database(this.SeriesPath, { datastores: 2 })
+    this.feedsDb = new njodb.Database(this.FeedsPath, { datastores: 2 })

    this.libraryItems = []
    this.users = []
@@ -59,6 +61,7 @@ class Db {
    else if (entityName === 'collection') return this.collectionsDb
    else if (entityName === 'author') return this.authorsDb
    else if (entityName === 'series') return this.seriesDb
+    else if (entityName === 'feed') return this.feedsDb
    return null
  }

@@ -71,6 +74,7 @@ class Db {
    else if (entityName === 'collection') return 'collections'
    else if (entityName === 'author') return 'authors'
    else if (entityName === 'series') return 'series'
+    else if (entityName === 'feed') return 'feeds'
    return null
  }

@@ -83,6 +87,7 @@ class Db {
    this.collectionsDb = new njodb.Database(this.CollectionsPath, { datastores: 2 })
    this.authorsDb = new njodb.Database(this.AuthorsPath)
    this.seriesDb = new njodb.Database(this.SeriesPath, { datastores: 2 })
+    this.feedsDb = new njodb.Database(this.FeedsPath, { datastores: 2 })
    return this.init()
  }

@@ -116,21 +121,6 @@ class Db {
  async init() {
    await this.load()

-    // Insert Defaults
-    // var rootUser = this.users.find(u => u.type === 'root')
-    // if (!rootUser) {
-    //   var token = await jwt.sign({ userId: 'root' }, process.env.TOKEN_SECRET)
-    //   Logger.debug('Generated default token', token)
-    //   Logger.info('[Db] Root user created')
-    //   await this.insertEntity('user', this.getDefaultUser(token))
-    // } else {
-    //   Logger.info(`[Db] Root user exists, pw: ${rootUser.hasPw}`)
-    // }
-
-    // if (!this.libraries.length) {
-    //   await this.insertEntity('library', this.getDefaultLibrary())
-    // }
-
    if (!this.serverSettings) {
      this.serverSettings = new ServerSettings()
      await this.insertEntity('settings', this.serverSettings)
@@ -278,6 +268,14 @@ class Db {
    return this.updateEntity('settings', this.serverSettings)
  }

+  getAllEntities(entityName) {
+    var entityDb = this.getEntityDb(entityName)
+    return entityDb.select(() => true).then((results) => results.data).catch((error) => {
+      Logger.error(`[DB] Failed to get all ${entityName}`, error)
+      return null
+    })
+  }
+
  insertEntities(entityName, entities) {
    var entityDb = this.getEntityDb(entityName)
    return entityDb.insert(entities).then((results) => {
@@ -428,6 +426,15 @@ class Db {
    })
  }

+  getAllSessions() {
+    return this.sessionsDb.select(() => true).then((results) => {
+      return results.data || []
+    }).catch((error) => {
+      Logger.error('[Db] Failed to select sessions', error)
+      return []
+    })
+  }
+
  selectUserSessions(userId) {
    return this.sessionsDb.select((session) => session.userId === userId).then((results) => {
      return results.data || []
@@ -139,9 +139,11 @@ class Server {
    await this.checkUserMediaProgress() // Remove invalid user item progress
    await this.purgeMetadata() // Remove metadata folders without library item
    await this.cacheManager.ensureCachePaths()
-
+    await this.abMergeManager.ensureDownloadDirPath()
+    
    await this.backupManager.init()
    await this.logManager.init()
+    await this.rssFeedManager.init()
    this.podcastManager.init()

    if (this.db.serverSettings.scannerDisableWatcher) {
@@ -173,9 +175,6 @@ class Server {
    // Metadata folder static path
    app.use('/metadata', this.authMiddleware.bind(this), express.static(global.MetadataPath))

-    // TODO: Are these necessary?
-    // Downloads folder static path
-    // app.use('/downloads', this.authMiddleware.bind(this), express.static(this.downloadManager.downloadDirPath))
    // Static folder
    app.use(express.static(Path.join(global.appRoot, 'static')))

@@ -197,14 +196,14 @@ class Server {

    // RSS Feed temp route
    app.get('/feed/:id', (req, res) => {
-      Logger.info(`[Server] requesting rss feed ${req.params.id}`)
+      Logger.info(`[Server] Requesting rss feed ${req.params.id}`)
      this.rssFeedManager.getFeed(req, res)
    })
    app.get('/feed/:id/cover', (req, res) => {
      this.rssFeedManager.getFeedCover(req, res)
    })
-    app.get('/feed/:id/item/*', (req, res) => {
-      Logger.info(`[Server] requesting rss feed ${req.params.id}`)
+    app.get('/feed/:id/item/:episodeId/*', (req, res) => {
+      Logger.debug(`[Server] Requesting rss feed episode ${req.params.id}/${req.params.episodeId}`)
      this.rssFeedManager.getFeedItem(req, res)
    })

@@ -212,7 +211,8 @@ class Server {
    const dyanimicRoutes = [
      '/item/:id',
      '/item/:id/manage',
-      '/item/:id/chapters',
+      '/author/:id',
+      '/audiobook/:id/chapters',
      '/audiobook/:id/edit',
      '/library/:library',
      '/library/:library/search',
@@ -220,6 +220,7 @@ class Server {
      '/library/:library/authors',
      '/library/:library/series/:id?',
      '/config/users/:id',
+      '/config/users/:id/sessions',
      '/collection/:id'
    ]
    dyanimicRoutes.forEach((route) => app.get(route, (req, res) => res.sendFile(Path.join(distPath, 'index.html'))))
@@ -1,6 +1,5 @@
-const Path = require('path')
 const EventEmitter = require('events')
-const Watcher = require('watcher')
+const Watcher = require('./libs/watcher/watcher')
 const Logger = require('./Logger')

 class FolderWatcher extends EventEmitter {
@@ -1,6 +1,6 @@
 const Logger = require('../Logger')
 const { reqSupportsWebp } = require('../utils/index')
-const { createNewSortInstance } = require('fast-sort')
+const { createNewSortInstance } = require('../libs/fastSort')

 const naturalSort = createNewSortInstance({
  comparer: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare
@@ -4,7 +4,7 @@ const filePerms = require('../utils/filePerms')
 const Logger = require('../Logger')
 const Library = require('../objects/Library')
 const libraryHelpers = require('../utils/libraryHelpers')
-const { sort, createNewSortInstance } = require('fast-sort')
+const { sort, createNewSortInstance } = require('../libs/fastSort')
 const naturalSort = createNewSortInstance({
  comparer: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare
 })
@@ -485,8 +485,7 @@ class LibraryController {
  }

  middleware(req, res, next) {
-    var librariesAccessible = req.user.librariesAccessible || []
-    if (librariesAccessible && librariesAccessible.length && !librariesAccessible.includes(req.params.id)) {
+    if (!req.user.checkCanAccessLibrary(req.params.id)) {
      Logger.warn(`[LibraryController] Library ${req.params.id} not accessible to user ${req.user.username}`)
      return res.sendStatus(404)
    }
@@ -497,7 +496,7 @@ class LibraryController {
    }
    req.library = library
    req.libraryItems = this.db.libraryItems.filter(li => {
-      return li.libraryId === library.id && req.user.checkCanAccessLibraryItemWithTags(li.media.tags)
+      return li.libraryId === library.id && req.user.checkCanAccessLibraryItem(li)
    })
    next()
  }
@@ -51,7 +51,6 @@ class LibraryItemController {

    var hasUpdates = libraryItem.update(req.body)
    if (hasUpdates) {
-
      // Turn on podcast auto download cron if not already on
      if (libraryItem.mediaType == 'podcast' && req.body.media.autoDownloadEpisodes && !this.podcastManager.episodeScheduleTask) {
        this.podcastManager.schedulePodcastEpisodeCron()
@@ -185,12 +184,12 @@ class LibraryItemController {

  // POST: api/items/:id/play
  startPlaybackSession(req, res) {
-    if (!req.libraryItem.media.numTracks) {
+    if (!req.libraryItem.media.numTracks && req.libraryItem.mediaType !== 'video') {
      Logger.error(`[LibraryItemController] startPlaybackSession cannot playback ${req.libraryItem.id}`)
      return res.sendStatus(404)
    }
-    const options = req.body || {}
-    this.playbackSessionManager.startSessionRequest(req.user, req.libraryItem, null, options, res)
+
+    this.playbackSessionManager.startSessionRequest(req, res, null)
  }

  // POST: api/items/:id/play/:episodeId
@@ -206,8 +205,7 @@ class LibraryItemController {
      return res.sendStatus(404)
    }

-    const options = req.body || {}
-    this.playbackSessionManager.startSessionRequest(req.user, libraryItem, episodeId, options, res)
+    this.playbackSessionManager.startSessionRequest(req, res, episodeId)
  }

  // PATCH: api/items/:id/tracks
@@ -380,7 +378,7 @@ class LibraryItemController {
      return res.sendStatus(500)
    }

-    const feedData = this.rssFeedManager.openFeedForItem(req.user, req.libraryItem, req.body)
+    const feedData = await this.rssFeedManager.openFeedForItem(req.user, req.libraryItem, req.body)
    if (feedData.error) {
      return res.json({
        success: false,
@@ -400,7 +398,7 @@ class LibraryItemController {
      return res.sendStatus(500)
    }

-    this.rssFeedManager.closeFeedForItem(req.params.id)
+    await this.rssFeedManager.closeFeedForItem(req.params.id)

    res.sendStatus(200)
  }
@@ -1,5 +1,5 @@
 const Logger = require('../Logger')
-const { isObject } = require('../utils/index')
+const { isObject, toNumber } = require('../utils/index')

 class MeController {
  constructor() { }
@@ -7,7 +7,22 @@ class MeController {
  // GET: api/me/listening-sessions
  async getListeningSessions(req, res) {
    var listeningSessions = await this.getUserListeningSessionsHelper(req.user.id)
-    res.json(listeningSessions.slice(0, 10))
+
+    const itemsPerPage = toNumber(req.query.itemsPerPage, 10) || 10
+    const page = toNumber(req.query.page, 0)
+
+    const start = page * itemsPerPage
+    const sessions = listeningSessions.slice(start, start + itemsPerPage)
+
+    const payload = {
+      total: listeningSessions.length,
+      numPages: Math.ceil(listeningSessions.length / itemsPerPage),
+      page,
+      itemsPerPage,
+      sessions
+    }
+
+    res.json(payload)
  }

  // GET: api/me/listening-stats
@@ -16,6 +31,15 @@ class MeController {
    res.json(listeningStats)
  }

+  // GET: api/me/progress/:id/:episodeId?
+  async getMediaProgress(req, res) {
+    const mediaProgress = req.user.getMediaProgress(req.id, req.episodeId || null)
+    if (!mediaProgress) {
+      return res.sendStatus(404)
+    }
+    res.json(mediaProgress)
+  }
+
  // DELETE: api/me/progress/:id
  async removeMediaProgress(req, res) {
    var wasRemoved = req.user.removeMediaProgress(req.params.id)
@@ -104,15 +104,13 @@ class PodcastController {
        return res.status(500).send('Bad response from feed request')
      }
      Logger.debug(`[PdocastController] Podcast feed size ${(data.data.length / 1024 / 1024).toFixed(2)}MB`)
-      var payload = await parsePodcastRssFeedXml(data.data, includeRaw)
+      var payload = await parsePodcastRssFeedXml(data.data, false, includeRaw)
      if (!payload) {
        return res.status(500).send('Invalid podcast RSS feed')
      }

-      if (!payload.podcast.metadata.feedUrl) {
-        // Not every RSS feed will put the feed url in their metadata
-        payload.podcast.metadata.feedUrl = url
-      }
+      // RSS feed may be a private RSS feed
+      payload.podcast.metadata.feedUrl = url

      res.json(payload)
    }).catch((error) => {
@@ -121,6 +119,15 @@ class PodcastController {
    })
  }

+  async getOPMLFeeds(req, res) {
+    if (!req.body.opmlText) {
+      return res.sendStatus(400)
+    }
+
+    const rssFeedsData = await this.podcastManager.getOPMLFeeds(req.body.opmlText)
+    res.json(rssFeedsData)
+  }
+
  async checkNewEpisodes(req, res) {
    if (!req.user.isAdminOrUp) {
      Logger.error(`[PodcastController] Non-admin user attempted to check/download episodes`, req.user)
@@ -212,7 +219,11 @@ class PodcastController {
      })
    }

-    libraryItem.media.removeEpisode(episodeId)
+    // Remove episode from Podcast and library file
+    const episodeRemoved = libraryItem.media.removeEpisode(episodeId)
+    if (episodeRemoved && episodeRemoved.audioFile) {
+      libraryItem.removeLibraryFile(episodeRemoved.audioFile.ino)
+    }

    await this.db.updateLibraryItem(libraryItem)
    this.emitter('item_updated', libraryItem.toJSONExpanded())
@@ -227,13 +238,8 @@ class PodcastController {
      return res.sendStatus(500)
    }

-    // Check user can access this library
-    if (!req.user.checkCanAccessLibrary(item.libraryId)) {
-      return res.sendStatus(403)
-    }
-
    // Check user can access this library item
-    if (!req.user.checkCanAccessLibraryItemWithTags(item.media.tags)) {
+    if (!req.user.checkCanAccessLibraryItem(item)) {
      return res.sendStatus(403)
    }

@@ -1,4 +1,5 @@
 const Logger = require('../Logger')
+const { toNumber } = require('../utils/index')

 class SessionController {
  constructor() { }
@@ -7,6 +8,46 @@ class SessionController {
    return res.json(req.session)
  }

+  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)
+    }
+
+    var listeningSessions = []
+    if (req.query.user) {
+      listeningSessions = await this.getUserListeningSessionsHelper(req.query.user)
+    } else {
+      listeningSessions = await this.getAllSessionsWithUserData()
+    }
+
+    const itemsPerPage = toNumber(req.query.itemsPerPage, 10) || 10
+    const page = toNumber(req.query.page, 0)
+
+    const start = page * itemsPerPage
+    const sessions = listeningSessions.slice(start, start + itemsPerPage)
+
+    const payload = {
+      total: listeningSessions.length,
+      numPages: Math.ceil(listeningSessions.length / itemsPerPage),
+      page,
+      itemsPerPage,
+      sessions
+    }
+
+    if (req.query.user) {
+      payload.userFilter = req.query.user
+    }
+
+    res.json(payload)
+  }
+
+  getSession(req, res) {
+    var libraryItem = this.db.getLibraryItem(req.session.libraryItemId)
+    var sessionForClient = req.session.toJSONForClient(libraryItem)
+    res.json(sessionForClient)
+  }
+
  // POST: api/session/:id/sync
  sync(req, res) {
    this.playbackSessionManager.syncSessionRequest(req.user, req.session, req.body, res)
@@ -1,7 +1,7 @@
 const Logger = require('../Logger')
 const User = require('../objects/user/User')

-const { getId } = require('../utils/index')
+const { getId, toNumber } = require('../utils/index')

 class UserController {
  constructor() { }
@@ -142,8 +142,24 @@ class UserController {
    if (!req.user.isAdminOrUp && req.user.id !== req.params.id) {
      return res.sendStatus(403)
    }
+
    var listeningSessions = await this.getUserListeningSessionsHelper(req.params.id)
-    res.json(listeningSessions.slice(0, 10))
+
+    const itemsPerPage = toNumber(req.query.itemsPerPage, 10) || 10
+    const page = toNumber(req.query.page, 0)
+
+    const start = page * itemsPerPage
+    const sessions = listeningSessions.slice(start, start + itemsPerPage)
+
+    const payload = {
+      total: listeningSessions.length,
+      numPages: Math.ceil(listeningSessions.length / itemsPerPage),
+      page,
+      itemsPerPage,
+      sessions
+    }
+
+    res.json(payload)
  }

  // GET: api/users/:id/listening-stats
@@ -166,14 +166,14 @@ class BookFinder {
    return this.iTunesApi.searchAudiobooks(title)
  }

-  async getAudibleResults(title, author) {
-    var books = await this.audible.search(title, author);
+  async getAudibleResults(title, author, asin) {
+    var books = await this.audible.search(title, author, asin);
    if (this.verbose) Logger.debug(`Audible Book Search Results: ${books.length || 0}`)
    if (!books) return []
    return books
  }

-  async search(provider, title, author, options = {}) {
+  async search(provider, title, author, isbn, asin, options = {}) {
    var books = []
    var maxTitleDistance = !isNaN(options.titleDistance) ? Number(options.titleDistance) : 4
    var maxAuthorDistance = !isNaN(options.authorDistance) ? Number(options.authorDistance) : 4
@@ -182,7 +182,7 @@ class BookFinder {
    if (provider === 'google') {
      return this.getGoogleBooksResults(title, author)
    } else if (provider === 'audible') {
-      return this.getAudibleResults(title, author)
+      return this.getAudibleResults(title, author, asin)
    } else if (provider === 'itunes') {
      return this.getiTunesAudiobooksResults(title, author)
    } else if (provider === 'libgen') {
@@ -0,0 +1,131 @@
+// SOURCE: https://github.com/snovakovic/fast-sort
+// LICENSE: https://github.com/snovakovic/fast-sort/blob/master/LICENSE
+
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+        typeof define === 'function' && define.amd ? define(['exports'], factory) :
+            (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['fast-sort'] = {}));
+}(this, (function (exports) {
+    'use strict';
+
+    // >>> INTERFACES <<<
+    // >>> HELPERS <<<
+    var castComparer = function (comparer) { return function (a, b, order) { return comparer(a, b, order) * order; }; };
+    var throwInvalidConfigErrorIfTrue = function (condition, context) {
+        if (condition)
+            throw Error("Invalid sort config: " + context);
+    };
+    var unpackObjectSorter = function (sortByObj) {
+        var _a = sortByObj || {}, asc = _a.asc, desc = _a.desc;
+        var order = asc ? 1 : -1;
+        var sortBy = (asc || desc);
+        // Validate object config
+        throwInvalidConfigErrorIfTrue(!sortBy, 'Expected `asc` or `desc` property');
+        throwInvalidConfigErrorIfTrue(asc && desc, 'Ambiguous object with `asc` and `desc` config properties');
+        var comparer = sortByObj.comparer && castComparer(sortByObj.comparer);
+        return { order: order, sortBy: sortBy, comparer: comparer };
+    };
+    // >>> SORTERS <<<
+    var multiPropertySorterProvider = function (defaultComparer) {
+        return function multiPropertySorter(sortBy, sortByArr, depth, order, comparer, a, b) {
+            var valA;
+            var valB;
+            if (typeof sortBy === 'string') {
+                valA = a[sortBy];
+                valB = b[sortBy];
+            }
+            else if (typeof sortBy === 'function') {
+                valA = sortBy(a);
+                valB = sortBy(b);
+            }
+            else {
+                var objectSorterConfig = unpackObjectSorter(sortBy);
+                return multiPropertySorter(objectSorterConfig.sortBy, sortByArr, depth, objectSorterConfig.order, objectSorterConfig.comparer || defaultComparer, a, b);
+            }
+            var equality = comparer(valA, valB, order);
+            if ((equality === 0 || (valA == null && valB == null)) &&
+                sortByArr.length > depth) {
+                return multiPropertySorter(sortByArr[depth], sortByArr, depth + 1, order, comparer, a, b);
+            }
+            return equality;
+        };
+    };
+    function getSortStrategy(sortBy, comparer, order) {
+        // Flat array sorter
+        if (sortBy === undefined || sortBy === true) {
+            return function (a, b) { return comparer(a, b, order); };
+        }
+        // Sort list of objects by single object key
+        if (typeof sortBy === 'string') {
+            throwInvalidConfigErrorIfTrue(sortBy.includes('.'), 'String syntax not allowed for nested properties.');
+            return function (a, b) { return comparer(a[sortBy], b[sortBy], order); };
+        }
+        // Sort list of objects by single function sorter
+        if (typeof sortBy === 'function') {
+            return function (a, b) { return comparer(sortBy(a), sortBy(b), order); };
+        }
+        // Sort by multiple properties
+        if (Array.isArray(sortBy)) {
+            var multiPropSorter_1 = multiPropertySorterProvider(comparer);
+            return function (a, b) { return multiPropSorter_1(sortBy[0], sortBy, 1, order, comparer, a, b); };
+        }
+        // Unpack object config to get actual sorter strategy
+        var objectSorterConfig = unpackObjectSorter(sortBy);
+        return getSortStrategy(objectSorterConfig.sortBy, objectSorterConfig.comparer || comparer, objectSorterConfig.order);
+    }
+    var sortArray = function (order, ctx, sortBy, comparer) {
+        var _a;
+        if (!Array.isArray(ctx)) {
+            return ctx;
+        }
+        // Unwrap sortBy if array with only 1 value to get faster sort strategy
+        if (Array.isArray(sortBy) && sortBy.length < 2) {
+            _a = sortBy, sortBy = _a[0];
+        }
+        return ctx.sort(getSortStrategy(sortBy, comparer, order));
+    };
+    function createNewSortInstance(opts) {
+        var comparer = castComparer(opts.comparer);
+        return function (_ctx) {
+            var ctx = Array.isArray(_ctx) && !opts.inPlaceSorting
+                ? _ctx.slice()
+                : _ctx;
+            return {
+                asc: function (sortBy) {
+                    return sortArray(1, ctx, sortBy, comparer);
+                },
+                desc: function (sortBy) {
+                    return sortArray(-1, ctx, sortBy, comparer);
+                },
+                by: function (sortBy) {
+                    return sortArray(1, ctx, sortBy, comparer);
+                },
+            };
+        };
+    }
+    var defaultComparer = function (a, b, order) {
+        if (a == null)
+            return order;
+        if (b == null)
+            return -order;
+        if (a < b)
+            return -1;
+        if (a > b)
+            return 1;
+        return 0;
+    };
+    var sort = createNewSortInstance({
+        comparer: defaultComparer,
+    });
+    var inPlaceSort = createNewSortInstance({
+        comparer: defaultComparer,
+        inPlaceSorting: true,
+    });
+
+    exports.createNewSortInstance = createNewSortInstance;
+    exports.inPlaceSort = inPlaceSort;
+    exports.sort = sort;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
@@ -0,0 +1,953 @@
+'use strict';
+const toBytes = s => [...s].map(c => c.charCodeAt(0));
+const xpiZipFilename = toBytes('META-INF/mozilla.rsa');
+const oxmlContentTypes = toBytes('[Content_Types].xml');
+const oxmlRels = toBytes('_rels/.rels');
+
+function readUInt64LE(buf, offset = 0) {
+  let n = buf[offset];
+  let mul = 1;
+  let i = 0;
+  while (++i < 8) {
+    mul *= 0x100;
+    n += buf[offset + i] * mul;
+  }
+
+  return n;
+}
+
+const fileType = input => {
+  if (!(input instanceof Uint8Array || input instanceof ArrayBuffer || Buffer.isBuffer(input))) {
+    throw new TypeError(`Expected the \`input\` argument to be of type \`Uint8Array\` or \`Buffer\` or \`ArrayBuffer\`, got \`${typeof input}\``);
+  }
+
+  const buf = input instanceof Uint8Array ? input : new Uint8Array(input);
+
+  if (!(buf && buf.length > 1)) {
+    return null;
+  }
+
+  const check = (header, options) => {
+    options = Object.assign({
+      offset: 0
+    }, options);
+
+    for (let i = 0; i < header.length; i++) {
+      // If a bitmask is set
+      if (options.mask) {
+        // If header doesn't equal `buf` with bits masked off
+        if (header[i] !== (options.mask[i] & buf[i + options.offset])) {
+          return false;
+        }
+      } else if (header[i] !== buf[i + options.offset]) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  const checkString = (header, options) => check(toBytes(header), options);
+
+  if (check([0xFF, 0xD8, 0xFF])) {
+    return {
+      ext: 'jpg',
+      mime: 'image/jpeg'
+    };
+  }
+
+  if (check([0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A])) {
+    return {
+      ext: 'png',
+      mime: 'image/png'
+    };
+  }
+
+  if (check([0x47, 0x49, 0x46])) {
+    return {
+      ext: 'gif',
+      mime: 'image/gif'
+    };
+  }
+
+  if (check([0x57, 0x45, 0x42, 0x50], { offset: 8 })) {
+    return {
+      ext: 'webp',
+      mime: 'image/webp'
+    };
+  }
+
+  if (check([0x46, 0x4C, 0x49, 0x46])) {
+    return {
+      ext: 'flif',
+      mime: 'image/flif'
+    };
+  }
+
+  // Needs to be before `tif` check
+  if (
+    (check([0x49, 0x49, 0x2A, 0x0]) || check([0x4D, 0x4D, 0x0, 0x2A])) &&
+    check([0x43, 0x52], { offset: 8 })
+  ) {
+    return {
+      ext: 'cr2',
+      mime: 'image/x-canon-cr2'
+    };
+  }
+
+  if (
+    check([0x49, 0x49, 0x2A, 0x0]) ||
+    check([0x4D, 0x4D, 0x0, 0x2A])
+  ) {
+    return {
+      ext: 'tif',
+      mime: 'image/tiff'
+    };
+  }
+
+  if (check([0x42, 0x4D])) {
+    return {
+      ext: 'bmp',
+      mime: 'image/bmp'
+    };
+  }
+
+  if (check([0x49, 0x49, 0xBC])) {
+    return {
+      ext: 'jxr',
+      mime: 'image/vnd.ms-photo'
+    };
+  }
+
+  if (check([0x38, 0x42, 0x50, 0x53])) {
+    return {
+      ext: 'psd',
+      mime: 'image/vnd.adobe.photoshop'
+    };
+  }
+
+  // Zip-based file formats
+  // Need to be before the `zip` check
+  if (check([0x50, 0x4B, 0x3, 0x4])) {
+    if (
+      check([0x6D, 0x69, 0x6D, 0x65, 0x74, 0x79, 0x70, 0x65, 0x61, 0x70, 0x70, 0x6C, 0x69, 0x63, 0x61, 0x74, 0x69, 0x6F, 0x6E, 0x2F, 0x65, 0x70, 0x75, 0x62, 0x2B, 0x7A, 0x69, 0x70], { offset: 30 })
+    ) {
+      return {
+        ext: 'epub',
+        mime: 'application/epub+zip'
+      };
+    }
+
+    // Assumes signed `.xpi` from addons.mozilla.org
+    if (check(xpiZipFilename, { offset: 30 })) {
+      return {
+        ext: 'xpi',
+        mime: 'application/x-xpinstall'
+      };
+    }
+
+    if (checkString('mimetypeapplication/vnd.oasis.opendocument.text', { offset: 30 })) {
+      return {
+        ext: 'odt',
+        mime: 'application/vnd.oasis.opendocument.text'
+      };
+    }
+
+    if (checkString('mimetypeapplication/vnd.oasis.opendocument.spreadsheet', { offset: 30 })) {
+      return {
+        ext: 'ods',
+        mime: 'application/vnd.oasis.opendocument.spreadsheet'
+      };
+    }
+
+    if (checkString('mimetypeapplication/vnd.oasis.opendocument.presentation', { offset: 30 })) {
+      return {
+        ext: 'odp',
+        mime: 'application/vnd.oasis.opendocument.presentation'
+      };
+    }
+
+    // The docx, xlsx and pptx file types extend the Office Open XML file format:
+    // https://en.wikipedia.org/wiki/Office_Open_XML_file_formats
+    // We look for:
+    // - one entry named '[Content_Types].xml' or '_rels/.rels',
+    // - one entry indicating specific type of file.
+    // MS Office, OpenOffice and LibreOffice may put the parts in different order, so the check should not rely on it.
+    const findNextZipHeaderIndex = (arr, startAt = 0) => arr.findIndex((el, i, arr) => i >= startAt && arr[i] === 0x50 && arr[i + 1] === 0x4B && arr[i + 2] === 0x3 && arr[i + 3] === 0x4);
+
+    let zipHeaderIndex = 0; // The first zip header was already found at index 0
+    let oxmlFound = false;
+    let type = null;
+
+    do {
+      const offset = zipHeaderIndex + 30;
+
+      if (!oxmlFound) {
+        oxmlFound = (check(oxmlContentTypes, { offset }) || check(oxmlRels, { offset }));
+      }
+
+      if (!type) {
+        if (checkString('word/', { offset })) {
+          type = {
+            ext: 'docx',
+            mime: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+          };
+        } else if (checkString('ppt/', { offset })) {
+          type = {
+            ext: 'pptx',
+            mime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+          };
+        } else if (checkString('xl/', { offset })) {
+          type = {
+            ext: 'xlsx',
+            mime: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+          };
+        }
+      }
+
+      if (oxmlFound && type) {
+        return type;
+      }
+
+      zipHeaderIndex = findNextZipHeaderIndex(buf, offset);
+    } while (zipHeaderIndex >= 0);
+
+    // No more zip parts available in the buffer, but maybe we are almost certain about the type?
+    if (type) {
+      return type;
+    }
+  }
+
+  if (
+    check([0x50, 0x4B]) &&
+    (buf[2] === 0x3 || buf[2] === 0x5 || buf[2] === 0x7) &&
+    (buf[3] === 0x4 || buf[3] === 0x6 || buf[3] === 0x8)
+  ) {
+    return {
+      ext: 'zip',
+      mime: 'application/zip'
+    };
+  }
+
+  if (check([0x75, 0x73, 0x74, 0x61, 0x72], { offset: 257 })) {
+    return {
+      ext: 'tar',
+      mime: 'application/x-tar'
+    };
+  }
+
+  if (
+    check([0x52, 0x61, 0x72, 0x21, 0x1A, 0x7]) &&
+    (buf[6] === 0x0 || buf[6] === 0x1)
+  ) {
+    return {
+      ext: 'rar',
+      mime: 'application/x-rar-compressed'
+    };
+  }
+
+  if (check([0x1F, 0x8B, 0x8])) {
+    return {
+      ext: 'gz',
+      mime: 'application/gzip'
+    };
+  }
+
+  if (check([0x42, 0x5A, 0x68])) {
+    return {
+      ext: 'bz2',
+      mime: 'application/x-bzip2'
+    };
+  }
+
+  if (check([0x37, 0x7A, 0xBC, 0xAF, 0x27, 0x1C])) {
+    return {
+      ext: '7z',
+      mime: 'application/x-7z-compressed'
+    };
+  }
+
+  if (check([0x78, 0x01])) {
+    return {
+      ext: 'dmg',
+      mime: 'application/x-apple-diskimage'
+    };
+  }
+
+  if (check([0x33, 0x67, 0x70, 0x35]) || // 3gp5
+    (
+      check([0x0, 0x0, 0x0]) && check([0x66, 0x74, 0x79, 0x70], { offset: 4 }) &&
+      (
+        check([0x6D, 0x70, 0x34, 0x31], { offset: 8 }) || // MP41
+        check([0x6D, 0x70, 0x34, 0x32], { offset: 8 }) || // MP42
+        check([0x69, 0x73, 0x6F, 0x6D], { offset: 8 }) || // ISOM
+        check([0x69, 0x73, 0x6F, 0x32], { offset: 8 }) || // ISO2
+        check([0x6D, 0x6D, 0x70, 0x34], { offset: 8 }) || // MMP4
+        check([0x4D, 0x34, 0x56], { offset: 8 }) || // M4V
+        check([0x64, 0x61, 0x73, 0x68], { offset: 8 }) // DASH
+      )
+    )) {
+    return {
+      ext: 'mp4',
+      mime: 'video/mp4'
+    };
+  }
+
+  if (check([0x4D, 0x54, 0x68, 0x64])) {
+    return {
+      ext: 'mid',
+      mime: 'audio/midi'
+    };
+  }
+
+  // https://github.com/threatstack/libmagic/blob/master/magic/Magdir/matroska
+  if (check([0x1A, 0x45, 0xDF, 0xA3])) {
+    const sliced = buf.subarray(4, 4 + 4096);
+    const idPos = sliced.findIndex((el, i, arr) => arr[i] === 0x42 && arr[i + 1] === 0x82);
+
+    if (idPos !== -1) {
+      const docTypePos = idPos + 3;
+      const findDocType = type => [...type].every((c, i) => sliced[docTypePos + i] === c.charCodeAt(0));
+
+      if (findDocType('matroska')) {
+        return {
+          ext: 'mkv',
+          mime: 'video/x-matroska'
+        };
+      }
+
+      if (findDocType('webm')) {
+        return {
+          ext: 'webm',
+          mime: 'video/webm'
+        };
+      }
+    }
+  }
+
+  if (check([0x0, 0x0, 0x0, 0x14, 0x66, 0x74, 0x79, 0x70, 0x71, 0x74, 0x20, 0x20]) ||
+    check([0x66, 0x72, 0x65, 0x65], { offset: 4 }) || // Type: `free`
+    check([0x66, 0x74, 0x79, 0x70, 0x71, 0x74, 0x20, 0x20], { offset: 4 }) ||
+    check([0x6D, 0x64, 0x61, 0x74], { offset: 4 }) || // MJPEG
+    check([0x6D, 0x6F, 0x6F, 0x76], { offset: 4 }) || // Type: `moov`
+    check([0x77, 0x69, 0x64, 0x65], { offset: 4 })) {
+    return {
+      ext: 'mov',
+      mime: 'video/quicktime'
+    };
+  }
+
+  // RIFF file format which might be AVI, WAV, QCP, etc
+  if (check([0x52, 0x49, 0x46, 0x46])) {
+    if (check([0x41, 0x56, 0x49], { offset: 8 })) {
+      return {
+        ext: 'avi',
+        mime: 'video/vnd.avi'
+      };
+    }
+
+    if (check([0x57, 0x41, 0x56, 0x45], { offset: 8 })) {
+      return {
+        ext: 'wav',
+        mime: 'audio/vnd.wave'
+      };
+    }
+
+    // QLCM, QCP file
+    if (check([0x51, 0x4C, 0x43, 0x4D], { offset: 8 })) {
+      return {
+        ext: 'qcp',
+        mime: 'audio/qcelp'
+      };
+    }
+  }
+
+  // ASF_Header_Object first 80 bytes
+  if (check([0x30, 0x26, 0xB2, 0x75, 0x8E, 0x66, 0xCF, 0x11, 0xA6, 0xD9])) {
+    // Search for header should be in first 1KB of file.
+
+    let offset = 30;
+    do {
+      const objectSize = readUInt64LE(buf, offset + 16);
+      if (check([0x91, 0x07, 0xDC, 0xB7, 0xB7, 0xA9, 0xCF, 0x11, 0x8E, 0xE6, 0x00, 0xC0, 0x0C, 0x20, 0x53, 0x65], { offset })) {
+        // Sync on Stream-Properties-Object (B7DC0791-A9B7-11CF-8EE6-00C00C205365)
+        if (check([0x40, 0x9E, 0x69, 0xF8, 0x4D, 0x5B, 0xCF, 0x11, 0xA8, 0xFD, 0x00, 0x80, 0x5F, 0x5C, 0x44, 0x2B], { offset: offset + 24 })) {
+          // Found audio:
+          return {
+            ext: 'wma',
+            mime: 'audio/x-ms-wma'
+          };
+        }
+
+        if (check([0xC0, 0xEF, 0x19, 0xBC, 0x4D, 0x5B, 0xCF, 0x11, 0xA8, 0xFD, 0x00, 0x80, 0x5F, 0x5C, 0x44, 0x2B], { offset: offset + 24 })) {
+          // Found video:
+          return {
+            ext: 'wmv',
+            mime: 'video/x-ms-asf'
+          };
+        }
+
+        break;
+      }
+
+      offset += objectSize;
+    } while (offset + 24 <= buf.length);
+
+    // Default to ASF generic extension
+    return {
+      ext: 'asf',
+      mime: 'application/vnd.ms-asf'
+    };
+  }
+
+  if (
+    check([0x0, 0x0, 0x1, 0xBA]) ||
+    check([0x0, 0x0, 0x1, 0xB3])
+  ) {
+    return {
+      ext: 'mpg',
+      mime: 'video/mpeg'
+    };
+  }
+
+  if (check([0x66, 0x74, 0x79, 0x70, 0x33, 0x67], { offset: 4 })) {
+    return {
+      ext: '3gp',
+      mime: 'video/3gpp'
+    };
+  }
+
+  // Check for MPEG header at different starting offsets
+  for (let start = 0; start < 2 && start < (buf.length - 16); start++) {
+    if (
+      check([0x49, 0x44, 0x33], { offset: start }) || // ID3 header
+      check([0xFF, 0xE2], { offset: start, mask: [0xFF, 0xE2] }) // MPEG 1 or 2 Layer 3 header
+    ) {
+      return {
+        ext: 'mp3',
+        mime: 'audio/mpeg'
+      };
+    }
+
+    if (
+      check([0xFF, 0xE4], { offset: start, mask: [0xFF, 0xE4] }) // MPEG 1 or 2 Layer 2 header
+    ) {
+      return {
+        ext: 'mp2',
+        mime: 'audio/mpeg'
+      };
+    }
+
+    if (
+      check([0xFF, 0xF8], { offset: start, mask: [0xFF, 0xFC] }) // MPEG 2 layer 0 using ADTS
+    ) {
+      return {
+        ext: 'mp2',
+        mime: 'audio/mpeg'
+      };
+    }
+
+    if (
+      check([0xFF, 0xF0], { offset: start, mask: [0xFF, 0xFC] }) // MPEG 4 layer 0 using ADTS
+    ) {
+      return {
+        ext: 'mp4',
+        mime: 'audio/mpeg'
+      };
+    }
+  }
+
+  if (
+    check([0x66, 0x74, 0x79, 0x70, 0x4D, 0x34, 0x41], { offset: 4 })
+  ) {
+    return { // MPEG-4 layer 3 (audio)
+      ext: 'm4a',
+      mime: 'audio/mp4' // RFC 4337
+    };
+  }
+
+  // Needs to be before `ogg` check
+  if (check([0x4F, 0x70, 0x75, 0x73, 0x48, 0x65, 0x61, 0x64], { offset: 28 })) {
+    return {
+      ext: 'opus',
+      mime: 'audio/opus'
+    };
+  }
+
+  // If 'OggS' in first  bytes, then OGG container
+  if (check([0x4F, 0x67, 0x67, 0x53])) {
+    // This is a OGG container
+
+    // If ' theora' in header.
+    if (check([0x80, 0x74, 0x68, 0x65, 0x6F, 0x72, 0x61], { offset: 28 })) {
+      return {
+        ext: 'ogv',
+        mime: 'video/ogg'
+      };
+    }
+
+    // If '\x01video' in header.
+    if (check([0x01, 0x76, 0x69, 0x64, 0x65, 0x6F, 0x00], { offset: 28 })) {
+      return {
+        ext: 'ogm',
+        mime: 'video/ogg'
+      };
+    }
+
+    // If ' FLAC' in header  https://xiph.org/flac/faq.html
+    if (check([0x7F, 0x46, 0x4C, 0x41, 0x43], { offset: 28 })) {
+      return {
+        ext: 'oga',
+        mime: 'audio/ogg'
+      };
+    }
+
+    // 'Speex  ' in header https://en.wikipedia.org/wiki/Speex
+    if (check([0x53, 0x70, 0x65, 0x65, 0x78, 0x20, 0x20], { offset: 28 })) {
+      return {
+        ext: 'spx',
+        mime: 'audio/ogg'
+      };
+    }
+
+    // If '\x01vorbis' in header
+    if (check([0x01, 0x76, 0x6F, 0x72, 0x62, 0x69, 0x73], { offset: 28 })) {
+      return {
+        ext: 'ogg',
+        mime: 'audio/ogg'
+      };
+    }
+
+    // Default OGG container https://www.iana.org/assignments/media-types/application/ogg
+    return {
+      ext: 'ogx',
+      mime: 'application/ogg'
+    };
+  }
+
+  if (check([0x66, 0x4C, 0x61, 0x43])) {
+    return {
+      ext: 'flac',
+      mime: 'audio/x-flac'
+    };
+  }
+
+  if (check([0x4D, 0x41, 0x43, 0x20])) { // 'MAC '
+    return {
+      ext: 'ape',
+      mime: 'audio/ape'
+    };
+  }
+
+  if (check([0x77, 0x76, 0x70, 0x6B])) { // 'wvpk'
+    return {
+      ext: 'wv',
+      mime: 'audio/wavpack'
+    };
+  }
+
+  if (check([0x23, 0x21, 0x41, 0x4D, 0x52, 0x0A])) {
+    return {
+      ext: 'amr',
+      mime: 'audio/amr'
+    };
+  }
+
+  if (check([0x25, 0x50, 0x44, 0x46])) {
+    return {
+      ext: 'pdf',
+      mime: 'application/pdf'
+    };
+  }
+
+  if (check([0x4D, 0x5A])) {
+    return {
+      ext: 'exe',
+      mime: 'application/x-msdownload'
+    };
+  }
+
+  if (
+    (buf[0] === 0x43 || buf[0] === 0x46) &&
+    check([0x57, 0x53], { offset: 1 })
+  ) {
+    return {
+      ext: 'swf',
+      mime: 'application/x-shockwave-flash'
+    };
+  }
+
+  if (check([0x7B, 0x5C, 0x72, 0x74, 0x66])) {
+    return {
+      ext: 'rtf',
+      mime: 'application/rtf'
+    };
+  }
+
+  if (check([0x00, 0x61, 0x73, 0x6D])) {
+    return {
+      ext: 'wasm',
+      mime: 'application/wasm'
+    };
+  }
+
+  if (
+    check([0x77, 0x4F, 0x46, 0x46]) &&
+    (
+      check([0x00, 0x01, 0x00, 0x00], { offset: 4 }) ||
+      check([0x4F, 0x54, 0x54, 0x4F], { offset: 4 })
+    )
+  ) {
+    return {
+      ext: 'woff',
+      mime: 'font/woff'
+    };
+  }
+
+  if (
+    check([0x77, 0x4F, 0x46, 0x32]) &&
+    (
+      check([0x00, 0x01, 0x00, 0x00], { offset: 4 }) ||
+      check([0x4F, 0x54, 0x54, 0x4F], { offset: 4 })
+    )
+  ) {
+    return {
+      ext: 'woff2',
+      mime: 'font/woff2'
+    };
+  }
+
+  if (
+    check([0x4C, 0x50], { offset: 34 }) &&
+    (
+      check([0x00, 0x00, 0x01], { offset: 8 }) ||
+      check([0x01, 0x00, 0x02], { offset: 8 }) ||
+      check([0x02, 0x00, 0x02], { offset: 8 })
+    )
+  ) {
+    return {
+      ext: 'eot',
+      mime: 'application/vnd.ms-fontobject'
+    };
+  }
+
+  if (check([0x00, 0x01, 0x00, 0x00, 0x00])) {
+    return {
+      ext: 'ttf',
+      mime: 'font/ttf'
+    };
+  }
+
+  if (check([0x4F, 0x54, 0x54, 0x4F, 0x00])) {
+    return {
+      ext: 'otf',
+      mime: 'font/otf'
+    };
+  }
+
+  if (check([0x00, 0x00, 0x01, 0x00])) {
+    return {
+      ext: 'ico',
+      mime: 'image/x-icon'
+    };
+  }
+
+  if (check([0x00, 0x00, 0x02, 0x00])) {
+    return {
+      ext: 'cur',
+      mime: 'image/x-icon'
+    };
+  }
+
+  if (check([0x46, 0x4C, 0x56, 0x01])) {
+    return {
+      ext: 'flv',
+      mime: 'video/x-flv'
+    };
+  }
+
+  if (check([0x25, 0x21])) {
+    return {
+      ext: 'ps',
+      mime: 'application/postscript'
+    };
+  }
+
+  if (check([0xFD, 0x37, 0x7A, 0x58, 0x5A, 0x00])) {
+    return {
+      ext: 'xz',
+      mime: 'application/x-xz'
+    };
+  }
+
+  if (check([0x53, 0x51, 0x4C, 0x69])) {
+    return {
+      ext: 'sqlite',
+      mime: 'application/x-sqlite3'
+    };
+  }
+
+  if (check([0x4E, 0x45, 0x53, 0x1A])) {
+    return {
+      ext: 'nes',
+      mime: 'application/x-nintendo-nes-rom'
+    };
+  }
+
+  if (check([0x43, 0x72, 0x32, 0x34])) {
+    return {
+      ext: 'crx',
+      mime: 'application/x-google-chrome-extension'
+    };
+  }
+
+  if (
+    check([0x4D, 0x53, 0x43, 0x46]) ||
+    check([0x49, 0x53, 0x63, 0x28])
+  ) {
+    return {
+      ext: 'cab',
+      mime: 'application/vnd.ms-cab-compressed'
+    };
+  }
+
+  // Needs to be before `ar` check
+  if (check([0x21, 0x3C, 0x61, 0x72, 0x63, 0x68, 0x3E, 0x0A, 0x64, 0x65, 0x62, 0x69, 0x61, 0x6E, 0x2D, 0x62, 0x69, 0x6E, 0x61, 0x72, 0x79])) {
+    return {
+      ext: 'deb',
+      mime: 'application/x-deb'
+    };
+  }
+
+  if (check([0x21, 0x3C, 0x61, 0x72, 0x63, 0x68, 0x3E])) {
+    return {
+      ext: 'ar',
+      mime: 'application/x-unix-archive'
+    };
+  }
+
+  if (check([0xED, 0xAB, 0xEE, 0xDB])) {
+    return {
+      ext: 'rpm',
+      mime: 'application/x-rpm'
+    };
+  }
+
+  if (
+    check([0x1F, 0xA0]) ||
+    check([0x1F, 0x9D])
+  ) {
+    return {
+      ext: 'Z',
+      mime: 'application/x-compress'
+    };
+  }
+
+  if (check([0x4C, 0x5A, 0x49, 0x50])) {
+    return {
+      ext: 'lz',
+      mime: 'application/x-lzip'
+    };
+  }
+
+  if (check([0xD0, 0xCF, 0x11, 0xE0, 0xA1, 0xB1, 0x1A, 0xE1])) {
+    return {
+      ext: 'msi',
+      mime: 'application/x-msi'
+    };
+  }
+
+  if (check([0x06, 0x0E, 0x2B, 0x34, 0x02, 0x05, 0x01, 0x01, 0x0D, 0x01, 0x02, 0x01, 0x01, 0x02])) {
+    return {
+      ext: 'mxf',
+      mime: 'application/mxf'
+    };
+  }
+
+  if (check([0x47], { offset: 4 }) && (check([0x47], { offset: 192 }) || check([0x47], { offset: 196 }))) {
+    return {
+      ext: 'mts',
+      mime: 'video/mp2t'
+    };
+  }
+
+  if (check([0x42, 0x4C, 0x45, 0x4E, 0x44, 0x45, 0x52])) {
+    return {
+      ext: 'blend',
+      mime: 'application/x-blender'
+    };
+  }
+
+  if (check([0x42, 0x50, 0x47, 0xFB])) {
+    return {
+      ext: 'bpg',
+      mime: 'image/bpg'
+    };
+  }
+
+  if (check([0x00, 0x00, 0x00, 0x0C, 0x6A, 0x50, 0x20, 0x20, 0x0D, 0x0A, 0x87, 0x0A])) {
+    // JPEG-2000 family
+
+    if (check([0x6A, 0x70, 0x32, 0x20], { offset: 20 })) {
+      return {
+        ext: 'jp2',
+        mime: 'image/jp2'
+      };
+    }
+
+    if (check([0x6A, 0x70, 0x78, 0x20], { offset: 20 })) {
+      return {
+        ext: 'jpx',
+        mime: 'image/jpx'
+      };
+    }
+
+    if (check([0x6A, 0x70, 0x6D, 0x20], { offset: 20 })) {
+      return {
+        ext: 'jpm',
+        mime: 'image/jpm'
+      };
+    }
+
+    if (check([0x6D, 0x6A, 0x70, 0x32], { offset: 20 })) {
+      return {
+        ext: 'mj2',
+        mime: 'image/mj2'
+      };
+    }
+  }
+
+  if (check([0x46, 0x4F, 0x52, 0x4D])) {
+    return {
+      ext: 'aif',
+      mime: 'audio/aiff'
+    };
+  }
+
+  if (checkString('<?xml ')) {
+    return {
+      ext: 'xml',
+      mime: 'application/xml'
+    };
+  }
+
+  if (check([0x42, 0x4F, 0x4F, 0x4B, 0x4D, 0x4F, 0x42, 0x49], { offset: 60 })) {
+    return {
+      ext: 'mobi',
+      mime: 'application/x-mobipocket-ebook'
+    };
+  }
+
+  // File Type Box (https://en.wikipedia.org/wiki/ISO_base_media_file_format)
+  if (check([0x66, 0x74, 0x79, 0x70], { offset: 4 })) {
+    if (check([0x6D, 0x69, 0x66, 0x31], { offset: 8 })) {
+      return {
+        ext: 'heic',
+        mime: 'image/heif'
+      };
+    }
+
+    if (check([0x6D, 0x73, 0x66, 0x31], { offset: 8 })) {
+      return {
+        ext: 'heic',
+        mime: 'image/heif-sequence'
+      };
+    }
+
+    if (check([0x68, 0x65, 0x69, 0x63], { offset: 8 }) || check([0x68, 0x65, 0x69, 0x78], { offset: 8 })) {
+      return {
+        ext: 'heic',
+        mime: 'image/heic'
+      };
+    }
+
+    if (check([0x68, 0x65, 0x76, 0x63], { offset: 8 }) || check([0x68, 0x65, 0x76, 0x78], { offset: 8 })) {
+      return {
+        ext: 'heic',
+        mime: 'image/heic-sequence'
+      };
+    }
+  }
+
+  if (check([0xAB, 0x4B, 0x54, 0x58, 0x20, 0x31, 0x31, 0xBB, 0x0D, 0x0A, 0x1A, 0x0A])) {
+    return {
+      ext: 'ktx',
+      mime: 'image/ktx'
+    };
+  }
+
+  if (check([0x44, 0x49, 0x43, 0x4D], { offset: 128 })) {
+    return {
+      ext: 'dcm',
+      mime: 'application/dicom'
+    };
+  }
+
+  // Musepack, SV7
+  if (check([0x4D, 0x50, 0x2B])) {
+    return {
+      ext: 'mpc',
+      mime: 'audio/x-musepack'
+    };
+  }
+
+  // Musepack, SV8
+  if (check([0x4D, 0x50, 0x43, 0x4B])) {
+    return {
+      ext: 'mpc',
+      mime: 'audio/x-musepack'
+    };
+  }
+
+  if (check([0x42, 0x45, 0x47, 0x49, 0x4E, 0x3A])) {
+    return {
+      ext: 'ics',
+      mime: 'text/calendar'
+    };
+  }
+
+  if (check([0x67, 0x6C, 0x54, 0x46, 0x02, 0x00, 0x00, 0x00])) {
+    return {
+      ext: 'glb',
+      mime: 'model/gltf-binary'
+    };
+  }
+
+  if (check([0xD4, 0xC3, 0xB2, 0xA1]) || check([0xA1, 0xB2, 0xC3, 0xD4])) {
+    return {
+      ext: 'pcap',
+      mime: 'application/vnd.tcpdump.pcap'
+    };
+  }
+
+  return null;
+};
+
+module.exports = fileType;
+// TODO: Remove this for the next major release
+module.exports.default = fileType;
+
+Object.defineProperty(fileType, 'minimumBytes', { value: 4100 });
+
+module.exports.stream = readableStream => new Promise((resolve, reject) => {
+  // Using `eval` to work around issues when bundling with Webpack
+  const stream = eval('require')('stream'); // eslint-disable-line no-eval
+
+  readableStream.once('readable', () => {
+    const pass = new stream.PassThrough();
+    const chunk = readableStream.read(module.exports.minimumBytes) || readableStream.read();
+    try {
+      pass.fileType = fileType(chunk);
+    } catch (error) {
+      reject(error);
+    }
+
+    readableStream.unshift(chunk);
+
+    if (stream.pipeline) {
+      resolve(stream.pipeline(readableStream, pass, () => { }));
+    } else {
+      resolve(readableStream.pipe(pass));
+    }
+  });
+});
@@ -0,0 +1,34 @@
+'use strict';
+const fileType = require('./fileType');
+
+const imageExts = new Set([
+  'jpg',
+  'png',
+  'gif',
+  'webp',
+  'flif',
+  'cr2',
+  'tif',
+  'bmp',
+  'jxr',
+  'psd',
+  'ico',
+  'bpg',
+  'jp2',
+  'jpm',
+  'jpx',
+  'heic',
+  'cur',
+  'dcm'
+]);
+
+const imageType = input => {
+  const ret = fileType(input);
+  return imageExts.has(ret && ret.ext) ? ret : null;
+};
+
+module.exports = imageType;
+// TODO: Remove this for the next major release
+module.exports.default = imageType;
+
+Object.defineProperty(imageType, 'minimumBytes', { value: fileType.minimumBytes });
@@ -27,7 +27,7 @@ const {
    checkSync,
    lock,
    lockSync
-} = require("proper-lockfile");
+} = require("../properLockfile");

 const {
    deleteFile,
@@ -0,0 +1,19 @@
+const ScheduledTask = require('../scheduled-task');
+
+let scheduledTask;
+
+function register(message){
+    const script = require(message.path);
+    scheduledTask = new ScheduledTask(message.cron, script.task, message.options);
+    scheduledTask.on('task-done', (result) => {
+        process.send({ type: 'task-done', result});
+    });
+    process.send({ type: 'registred' });
+}
+
+process.on('message', (message) => {
+    switch(message.type){
+    case 'register':
+        return register(message);
+    }
+});
@@ -0,0 +1,67 @@
+const EventEmitter = require('events');
+const path = require('path');
+const { fork } = require('child_process');
+const { getId } = require('../../../utils/index')
+
+const daemonPath = `${__dirname}/daemon.js`;
+
+class BackgroundScheduledTask extends EventEmitter {
+    constructor(cronExpression, taskPath, options) {
+        super();
+        if (!options) {
+            options = {
+                scheduled: true,
+                recoverMissedExecutions: false,
+            };
+        }
+        this.cronExpression = cronExpression;
+        this.taskPath = taskPath;
+        this.options = options;
+        this.options.name = this.options.name || getId()
+
+        if (options.scheduled) {
+            this.start();
+        }
+    }
+
+    start() {
+        this.stop();
+        this.forkProcess = fork(daemonPath);
+
+        this.forkProcess.on('message', (message) => {
+            switch (message.type) {
+                case 'task-done':
+                    this.emit('task-done', message.result);
+                    break;
+            }
+        });
+
+        let options = this.options;
+        options.scheduled = true;
+
+        this.forkProcess.send({
+            type: 'register',
+            path: path.resolve(this.taskPath),
+            cron: this.cronExpression,
+            options: options
+        });
+    }
+
+    stop() {
+        if (this.forkProcess) {
+            this.forkProcess.kill();
+        }
+    }
+
+    pid() {
+        if (this.forkProcess) {
+            return this.forkProcess.pid;
+        }
+    }
+
+    isRunning() {
+        return !this.forkProcess.killed;
+    }
+}
+
+module.exports = BackgroundScheduledTask;
@@ -0,0 +1,21 @@
+'use strict';
+module.exports = (() => {
+    function convertAsterisk(expression, replecement){
+        if(expression.indexOf('*') !== -1){
+            return expression.replace('*', replecement);
+        }
+        return expression;
+    }
+
+    function convertAsterisksToRanges(expressions){
+        expressions[0] = convertAsterisk(expressions[0], '0-59');
+        expressions[1] = convertAsterisk(expressions[1], '0-59');
+        expressions[2] = convertAsterisk(expressions[2], '0-23');
+        expressions[3] = convertAsterisk(expressions[3], '1-31');
+        expressions[4] = convertAsterisk(expressions[4], '1-12');
+        expressions[5] = convertAsterisk(expressions[5], '0-6');
+        return expressions;
+    }
+
+    return convertAsterisksToRanges;
+})();
@@ -0,0 +1,69 @@
+'use strict';
+
+// SOURCE: https://github.com/node-cron/node-cron
+// LICENSE: https://github.com/node-cron/node-cron/blob/master/LICENSE.md
+
+const monthNamesConversion = require('./month-names-conversion');
+const weekDayNamesConversion = require('./week-day-names-conversion');
+const convertAsterisksToRanges = require('./asterisk-to-range-conversion');
+const convertRanges = require('./range-conversion');
+const convertSteps = require('./step-values-conversion');
+
+module.exports = (() => {
+
+    function appendSeccondExpression(expressions) {
+        if (expressions.length === 5) {
+            return ['0'].concat(expressions);
+        }
+        return expressions;
+    }
+
+    function removeSpaces(str) {
+        return str.replace(/\s{2,}/g, ' ').trim();
+    }
+
+    // Function that takes care of normalization.
+    function normalizeIntegers(expressions) {
+        for (let i = 0; i < expressions.length; i++) {
+            const numbers = expressions[i].split(',');
+            for (let j = 0; j < numbers.length; j++) {
+                numbers[j] = parseInt(numbers[j]);
+            }
+            expressions[i] = numbers;
+        }
+        return expressions;
+    }
+
+    /*
+   * The node-cron core allows only numbers (including multiple numbers e.g 1,2).
+   * This module is going to translate the month names, week day names and ranges
+   * to integers relatives.
+   *
+   * Month names example:
+   *  - expression 0 1 1 January,Sep *
+   *  - Will be translated to 0 1 1 1,9 *
+   *
+   * Week day names example:
+   *  - expression 0 1 1 2 Monday,Sat
+   *  - Will be translated to 0 1 1 1,5 *
+   *
+   * Ranges example:
+   *  - expression 1-5 * * * *
+   *  - Will be translated to 1,2,3,4,5 * * * *
+   */
+    function interprete(expression) {
+        let expressions = removeSpaces(expression).split(' ');
+        expressions = appendSeccondExpression(expressions);
+        expressions[4] = monthNamesConversion(expressions[4]);
+        expressions[5] = weekDayNamesConversion(expressions[5]);
+        expressions = convertAsterisksToRanges(expressions);
+        expressions = convertRanges(expressions);
+        expressions = convertSteps(expressions);
+
+        expressions = normalizeIntegers(expressions);
+
+        return expressions.join(' ');
+    }
+
+    return interprete;
+})();
@@ -0,0 +1,22 @@
+'use strict';
+module.exports = (() => {
+    const months = ['january','february','march','april','may','june','july',
+        'august','september','october','november','december'];
+    const shortMonths = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug',
+        'sep', 'oct', 'nov', 'dec'];
+
+    function convertMonthName(expression, items){
+        for(let i = 0; i < items.length; i++){
+            expression = expression.replace(new RegExp(items[i], 'gi'), parseInt(i, 10) + 1);
+        }
+        return expression;
+    }
+
+    function interprete(monthExpression){
+        monthExpression = convertMonthName(monthExpression, months);
+        monthExpression = convertMonthName(monthExpression, shortMonths);
+        return monthExpression;
+    }
+
+    return interprete;
+})();
@@ -0,0 +1,39 @@
+'use strict';
+module.exports = ( () => {
+    function replaceWithRange(expression, text, init, end) {
+
+        const numbers = [];
+        let last = parseInt(end);
+        let first = parseInt(init);
+
+        if(first > last){
+            last = parseInt(init);
+            first = parseInt(end);
+        }
+
+        for(let i = first; i <= last; i++) {
+            numbers.push(i);
+        }
+
+        return expression.replace(new RegExp(text, 'i'), numbers.join());
+    }
+
+    function convertRange(expression){
+        const rangeRegEx = /(\d+)-(\d+)/;
+        let match = rangeRegEx.exec(expression);
+        while(match !== null && match.length > 0){
+            expression = replaceWithRange(expression, match[0], match[1], match[2]);
+            match = rangeRegEx.exec(expression);
+        }
+        return expression;
+    }
+
+    function convertAllRanges(expressions){
+        for(let i = 0; i < expressions.length; i++){
+            expressions[i] = convertRange(expressions[i]);
+        }
+        return expressions;
+    }
+
+    return convertAllRanges;
+})();
@@ -0,0 +1,30 @@
+'use strict';
+
+module.exports = (() => {
+    function convertSteps(expressions){
+        var stepValuePattern = /^(.+)\/(\w+)$/;
+        for(var i = 0; i < expressions.length; i++){
+            var match = stepValuePattern.exec(expressions[i]);
+            var isStepValue = match !== null && match.length > 0;
+            if(isStepValue){
+                var baseDivider = match[2];
+                if(isNaN(baseDivider)){
+                    throw baseDivider + ' is not a valid step value';
+                }
+                var values = match[1].split(',');
+                var stepValues = [];
+                var divider = parseInt(baseDivider, 10);
+                for(var j = 0; j <= values.length; j++){
+                    var value = parseInt(values[j], 10);
+                    if(value % divider === 0){
+                        stepValues.push(value);
+                    }
+                }
+                expressions[i] = stepValues.join(',');
+            }
+        }
+        return expressions;
+    }
+
+    return convertSteps;
+})();
@@ -0,0 +1,21 @@
+'use strict';
+module.exports = (() => {
+    const weekDays = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday',
+        'friday', 'saturday'];
+    const shortWeekDays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+
+    function convertWeekDayName(expression, items){
+        for(let i = 0; i < items.length; i++){
+            expression = expression.replace(new RegExp(items[i], 'gi'), parseInt(i, 10));
+        }
+        return expression;
+    }
+  
+    function convertWeekDays(expression){
+        expression = expression.replace('7', '0');
+        expression = convertWeekDayName(expression, weekDays);
+        return convertWeekDayName(expression, shortWeekDays);
+    }
+
+    return convertWeekDays;
+})();
@@ -0,0 +1,64 @@
+'use strict';
+
+const ScheduledTask = require('./scheduled-task');
+const BackgroundScheduledTask = require('./background-scheduled-task');
+const validation = require('./pattern-validation');
+const storage = require('./storage');
+
+/**
+ * @typedef {Object} CronScheduleOptions
+ * @prop {boolean} [scheduled] if a scheduled task is ready and running to be
+ *  performed when the time matches the cron expression.
+ * @prop {string} [timezone] the timezone to execute the task in.
+ */
+
+/**
+ * Creates a new task to execute the given function when the cron
+ *  expression ticks.
+ *
+ * @param {string} expression The cron expression.
+ * @param {Function} func The task to be executed.
+ * @param {CronScheduleOptions} [options] A set of options for the scheduled task.
+ * @returns {ScheduledTask} The scheduled task.
+ */
+function schedule(expression, func, options) {
+    const task = createTask(expression, func, options);
+
+    storage.save(task);
+
+    return task;
+}
+
+function createTask(expression, func, options) {
+    if (typeof func === 'string')
+        return new BackgroundScheduledTask(expression, func, options);
+
+    return new ScheduledTask(expression, func, options);
+}
+
+/**
+ * Check if a cron expression is valid.
+ *
+ * @param {string} expression The cron expression.
+ * @returns {boolean} Whether the expression is valid or not.
+ */
+function validate(expression) {
+    try {
+        validation(expression);
+
+        return true;
+    } catch (_) {
+        return false;
+    }
+}
+
+/**
+ * Gets the scheduled tasks.
+ *
+ * @returns {ScheduledTask[]} The scheduled tasks.
+ */
+function getTasks() {
+    return storage.getTasks();
+}
+
+module.exports = { schedule, validate, getTasks };
@@ -0,0 +1,124 @@
+'use strict';
+
+const convertExpression = require('./convert-expression');
+
+const validationRegex = /^(?:\d+|\*|\*\/\d+)$/;
+
+/**
+ * @param {string} expression The Cron-Job expression.
+ * @param {number} min The minimum value.
+ * @param {number} max The maximum value.
+ * @returns {boolean}
+ */
+function isValidExpression(expression, min, max) {
+    const options = expression.split(',');
+
+    for (const option of options) {
+        const optionAsInt = parseInt(option, 10);
+
+        if (
+            (!Number.isNaN(optionAsInt) &&
+                (optionAsInt < min || optionAsInt > max)) ||
+            !validationRegex.test(option)
+        )
+            return false;
+    }
+
+    return true;
+}
+
+/**
+ * @param {string} expression The Cron-Job expression.
+ * @returns {boolean}
+ */
+function isInvalidSecond(expression) {
+    return !isValidExpression(expression, 0, 59);
+}
+
+/**
+ * @param {string} expression The Cron-Job expression.
+ * @returns {boolean}
+ */
+function isInvalidMinute(expression) {
+    return !isValidExpression(expression, 0, 59);
+}
+
+/**
+ * @param {string} expression The Cron-Job expression.
+ * @returns {boolean}
+ */
+function isInvalidHour(expression) {
+    return !isValidExpression(expression, 0, 23);
+}
+
+/**
+ * @param {string} expression The Cron-Job expression.
+ * @returns {boolean}
+ */
+function isInvalidDayOfMonth(expression) {
+    return !isValidExpression(expression, 1, 31);
+}
+
+/**
+ * @param {string} expression The Cron-Job expression.
+ * @returns {boolean}
+ */
+function isInvalidMonth(expression) {
+    return !isValidExpression(expression, 1, 12);
+}
+
+/**
+ * @param {string} expression The Cron-Job expression.
+ * @returns {boolean}
+ */
+function isInvalidWeekDay(expression) {
+    return !isValidExpression(expression, 0, 7);
+}
+
+/**
+ * @param {string[]} patterns The Cron-Job expression patterns.
+ * @param {string[]} executablePatterns The executable Cron-Job expression
+ * patterns.
+ * @returns {void}
+ */
+function validateFields(patterns, executablePatterns) {
+    if (isInvalidSecond(executablePatterns[0]))
+        throw new Error(`${patterns[0]} is a invalid expression for second`);
+
+    if (isInvalidMinute(executablePatterns[1]))
+        throw new Error(`${patterns[1]} is a invalid expression for minute`);
+
+    if (isInvalidHour(executablePatterns[2]))
+        throw new Error(`${patterns[2]} is a invalid expression for hour`);
+
+    if (isInvalidDayOfMonth(executablePatterns[3]))
+        throw new Error(
+            `${patterns[3]} is a invalid expression for day of month`
+        );
+
+    if (isInvalidMonth(executablePatterns[4]))
+        throw new Error(`${patterns[4]} is a invalid expression for month`);
+
+    if (isInvalidWeekDay(executablePatterns[5]))
+        throw new Error(`${patterns[5]} is a invalid expression for week day`);
+}
+
+/**
+ * Validates a Cron-Job expression pattern.
+ *
+ * @param {string} pattern The Cron-Job expression pattern.
+ * @returns {void}
+ */
+function validate(pattern) {
+    if (typeof pattern !== 'string')
+        throw new TypeError('pattern must be a string!');
+
+    const patterns = pattern.split(' ');
+    const executablePatterns = convertExpression(pattern).split(' ');
+
+    if (patterns.length === 5) patterns.unshift('0');
+
+    validateFields(patterns, executablePatterns);
+}
+
+module.exports = validate;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
advplyr	a97c102369	Version bump 2.0.21	2022-06-09 18:24:03 -05:00
advplyr	745a491f90	Merge branch 'master' of https://github.com/advplyr/audiobookshelf	2022-06-09 17:56:22 -05:00
advplyr	b2880ab0a9	Fix:Match tab #708	2022-06-09 17:56:16 -05:00
advplyr	f916454c55	Merge pull request #707 from jmt-gh/fix_library_scanning Fix library scanning failing	2022-06-09 04:54:08 -05:00
jmt-gh	701b8ea12e	Fix bug with library scanning introduced in #697 Looks like #697 missed a reference update that caused scanning libraries to fail. This fixes that	2022-06-08 19:15:35 -07:00
advplyr	2079942ccd	Merge pull request #697 from jvanbruegge/patch-1 Use `show` and `episode_id` tags for audiobook series	2022-06-08 16:10:28 -05:00
advplyr	140b718592	Merge pull request #699 from jmt-gh/698_metadata_downloads_not_created Update some instances of mkdir to ensureDir (#698)	2022-06-08 16:05:19 -05:00
Jan van Brügge	2de8c72131	Allow `show` and `episode_id` tags for audiobook series FFmpeg only supports a very limited number of tags for m4b files (see https://wiki.multimedia.cx/index.php?title=FFmpeg_Metadata) by default. `series` and `series-part` are only possible by enabling custom tags with `-movflags use_metadata_tags`. To work around that, `show` and `episode_id` are added as second option.	2022-06-08 11:11:17 +02:00
advplyr	089d4b5cee	Update:Remove fast-sort dependency	2022-06-07 20:22:23 -05:00
advplyr	e06a015d6e	Update:Remove proper-lockfile dependency	2022-06-07 20:15:00 -05:00
advplyr	b7e546f2f5	Update:Remove node-cron dependency	2022-06-07 20:04:51 -05:00
advplyr	26ef275ab4	Update:Remove image-type dependency	2022-06-07 19:53:05 -05:00
advplyr	416db7c981	Update:Remove read-chunk dependency	2022-06-07 19:44:38 -05:00
advplyr	78079b2e60	Merge branch 'master' of https://github.com/advplyr/audiobookshelf	2022-06-07 19:25:28 -05:00
advplyr	03bffb725a	Update:Remove rss feed dependencies add node-xml lib	2022-06-07 19:25:14 -05:00
advplyr	46fc89e247	Update:Cache feed xml	2022-06-07 18:37:37 -05:00
advplyr	fbbceaa642	Add:Persist RSS feeds in db #696 , Update:RSS feed data model	2022-06-07 18:29:43 -05:00
jmt-gh	f5aae25cc8	remove random character	2022-06-06 18:52:08 -07:00
jmt-gh	8d03943acb	remove extra debug log	2022-06-06 18:51:49 -07:00
jmt-gh	853513b926	update approach for ensuring download directory always exists	2022-06-06 18:51:08 -07:00
jmt-gh	c606a41314	update Cache folder creation to leverage ensureDirs	2022-06-06 08:18:15 -07:00
jmt-gh	35f29ca22b	Use ensureDir instead of mkdir to fix 698 This commit updates the mkdir for creating the download location to ensureDir, which is an alias for mkdirs and mkdirp, meaning they will create the entire path of the directory if it does not exist. https://github.com/jprichardson/node-fs-extra/blob/master/docs/ensureDir.md	2022-06-06 08:12:58 -07:00
advplyr	ac00f3ebe7	Merge pull request #692 from cassieesposito/getBookDataFromDir-refactor Fixed bugs that caused getSequence to run twice and broke year recognition	2022-06-05 18:02:39 -05:00
Cassie Esposito	6846de98f8	Fixed bugs that caused getSequence to run twice and broke year recognition	2022-06-05 15:52:18 -07:00
advplyr	881baa818d	Fix:Progress filter	2022-06-05 15:26:27 -05:00
advplyr	b671145e73	Merge pull request #682 from jmt-gh/update_cover_on_merge Support embedding cover art metadata in the embed metadata tool	2022-06-05 13:04:12 -05:00
jmt-gh	8809c7b900	Handle null and delete cover cases This commit adds in supporting if a cover path is null. If this is the case, we completely remove the video stream from the file, as the user either: a) uploaded a file with no video stream (so removing it is a no-op) b) removed the cover in ABS, so we should respect that on merge	2022-06-05 10:36:42 -07:00
advplyr	ae8f3aa918	Version bump 2.0.20	2022-06-05 10:59:01 -05:00
advplyr	5d4047c171	Merge branch 'master' of https://github.com/advplyr/audiobookshelf	2022-06-05 10:16:19 -05:00
advplyr	6f80591afd	Fix:Switching to next track pausing player #685	2022-06-05 10:06:07 -05:00
jmt-gh	9b6fa8fe8c	Merge branch 'advplyr:master' into update_cover_on_merge	2022-06-04 19:00:41 -07:00
jmt-gh	d6c02ebb2c	Support embedding cover art metadata Added support for chapter metadata in #678, but completely missed that coverart wasn't getting embedded in the embed metadata tool. This commit adds that in	2022-06-04 18:56:55 -07:00
advplyr	788d867ec3	Merge pull request #681 from jmt-gh/m4b_no_coverart Fix cover art not being generated for M4B export	2022-06-04 20:56:04 -05:00
jmt-gh	3bc3914fd9	Fix cover art not being generated for m4b export This commit fixes an issue where cover art was not being generated properly when creating an M4B audiobook. More context can be found in discord: https://discord.com/channels/942908292873723984/981321213882282035/982777444631195681	2022-06-04 17:50:26 -07:00
advplyr	3d821dacb7	Fix:Sessions table cleanup	2022-06-04 15:51:00 -05:00
advplyr	e0546c6164	Version bump 2.0.19	2022-06-04 14:42:36 -05:00
advplyr	be7ccfb209	Merge pull request #678 from jmt-gh/issue_676_chapter_metadata Support embedding updated chapter metadata (issue #676)	2022-06-04 14:02:44 -05:00
advplyr	938a8c6f80	Fix:Casing typo in LibraryItem	2022-06-04 13:00:51 -05:00
advplyr	5cd343cb01	Add:All listening sessions config page	2022-06-04 12:44:42 -05:00
jmt-gh	ab0094a53b	Support embedding updated chapter metadata (676) This commit resolves issue #676. The embed metadata tool was missing the flag that tells ffmpeg to not only update the "top" metadata, but also the chapter metadata.	2022-06-04 10:17:42 -07:00
advplyr	2d5e4ebcf0	Add:Audio player next/prev chapter buttons	2022-06-04 12:07:38 -05:00
advplyr	3171ce5aba	Update:Paginated listening sessions	2022-06-04 10:52:37 -05:00
advplyr	0e1692d26b	Fix:Matching authors with multiple authors split by comma #667	2022-06-03 19:21:31 -05:00
advplyr	e8cd18eac2	Add:Alert when progress is not syncing	2022-06-03 19:11:13 -05:00
advplyr	bf928692d5	Update:API route for getting playback session and getting media progress	2022-06-03 18:59:42 -05:00
advplyr	792490b629	Merge pull request #664 from bskrtich/docker_updates feat: Updates to docker file and gh action	2022-06-03 05:02:11 -05:00
advplyr	0d1ff35c5e	Add:Not Finished progress filter #650	2022-06-02 18:20:18 -05:00
advplyr	67e02fddbd	Comment out expand on player ui	2022-06-02 17:54:07 -05:00
advplyr	09beb6a2ae	Merge branch 'master' of https://github.com/advplyr/audiobookshelf	2022-06-02 16:32:42 -05:00
advplyr	1bd657f07d	Fix:Mark as finished once media has ended #635	2022-06-02 16:31:52 -05:00
advplyr	2dba17a7ae	Merge pull request #651 from selfhost-alt/handle-another-backup-parse-error Gracefully handle unexpected end of file when listing backup files	2022-06-02 07:26:42 -05:00
Brandon Skrtich	4900649908	feat: Updates to docker file and gh action * Clean up Dockerfile * Add health check to Dockerfile * Update gh action versions	2022-06-02 05:55:01 +00:00
advplyr	c3b33ea37a	Fix:Sanitize filename to remove line breaks and check filename length is not too long #663	2022-06-01 20:14:10 -05:00
advplyr	36bd6e649a	Fix:Remove podcast episode to also remove library file #636	2022-06-01 17:45:52 -05:00
advplyr	4621c78573	Update:Show version number in bottom of siderail #660 and save previous version data to continue showing if update is available	2022-06-01 17:15:13 -05:00
advplyr	c88bbf1ce4	Fix:Authors landing page available on refresh #659	2022-06-01 16:29:29 -05:00
advplyr	d37b25a6f6	Update audio player to player ui and separate out components	2022-05-31 20:13:46 -05:00
advplyr	792268f5ee	Merge branch 'master' into video	2022-05-31 18:53:30 -05:00
advplyr	5f2d6f4d5e	Add:Support for wav #652	2022-05-31 18:45:40 -05:00
Selfhost Alt	1350a91fba	Handle another type of corrupted backup file	2022-05-30 23:53:00 -07:00
advplyr	acf22ca4fa	Testing video media type	2022-05-30 19:26:53 -05:00
advplyr	705aac40d7	Remove experimental set bookshelf texture	2022-05-30 09:58:02 -05:00
advplyr	7456052620	Fix:Match update cover image #648	2022-05-30 09:52:42 -05:00
advplyr	6cd4ec7fce	Version bump v2.0.18	2022-05-29 13:18:31 -05:00
advplyr	93b8e11378	Fix:Mark media as finished if less than 5 seconds remain on a sync and call progress sync again when last track ends #635	2022-05-29 12:55:14 -05:00
advplyr	6161daeef0	Fix:OPML file upload reset	2022-05-29 12:22:16 -05:00
advplyr	cfcd351570	Add:Match All Authors button #642	2022-05-29 12:15:39 -05:00
advplyr	514893646a	Add:OPML Upload for bulk adding podcasts #588	2022-05-29 11:46:45 -05:00
advplyr	e5469cc0f8	Update:Podcast library items do not show incomplete error when it doesnt have audio files #636	2022-05-29 07:25:30 -05:00
advplyr	ec6e70725c	Fix:Include Watcher as lib with no dependencies and fix tiny-readdir bug #610	2022-05-28 20:01:20 -05:00
advplyr	160dac109d	Add:User permission restrict explicit content #637	2022-05-28 16:53:03 -05:00
advplyr	6be741045f	Merge pull request #622 from kaldigo/master Updated matching	2022-05-28 15:56:27 -05:00
advplyr	f41d6d5c77	Update multi-series edit for match and make into separate component with inner modal	2022-05-28 15:54:04 -05:00
advplyr	a5dacd7821	Merge master	2022-05-28 13:58:52 -05:00
advplyr	8b12508b0c	Add:Rich text editor for podcast episode description	2022-05-28 13:36:58 -05:00
advplyr	a394f38fe9	Add:Full podcast episode description parsed and viewable in modal #492	2022-05-28 11:38:51 -05:00
advplyr	c4bfa266b0	Add:HTML sanitizer lib to support html in podcasts and replace strip html lib	2022-05-27 19:41:40 -05:00
advplyr	96232676cb	Fix:Save RSS feed url passed in by user instead of using the RSS feed returned from the request #634	2022-05-27 17:50:56 -05:00
advplyr	b2aab06e01	Add:Listening session modal with all details	2022-05-27 17:39:24 -05:00
advplyr	f002532c1e	Add:User listening sessions page, Update:Listening sessions to save media times and device info	2022-05-26 19:09:46 -05:00
advplyr	54663f0f01	Fix:Listening stats on users page and user listening-sessions api endpoint	2022-05-26 15:10:12 -05:00
advplyr	d8df9a9dff	Update dockerfile for generating client	2022-05-25 10:26:21 -05:00
advplyr	68efd30a54	Merge branch 'master' of https://github.com/advplyr/audiobookshelf	2022-05-24 21:44:15 -05:00
advplyr	27407d49dd	Version bump 2.0.17	2022-05-24 21:44:11 -05:00
advplyr	97d4330cda	Merge pull request #632 from cassieesposito/getBookDataFromDir-refactor URGENT: Fix to serious bug	2022-05-24 21:33:40 -05:00
Cassie Esposito	3153bdc5bb	Fixed bug that caused scanner to fail to get title when subtitle parsing is off, refactored possibly confusing variable declarations.	2022-05-24 19:04:51 -07:00
Cassie Esposito	31fd75a895	Merge branch 'getBookDataFromDir-refactor' of github.com:cassieesposito/audiobookshelf into getBookDataFromDir-refactor	2022-05-24 18:43:20 -07:00
Cassie Esposito	b22173a631	Undoing changes caused by linter run amok	2022-05-24 17:30:16 -07:00
Kaldigo	aeb87c81a1	Fix missed preferMatchedMetadata rename	2022-05-24 01:29:43 +01:00
Kaldigo	ce88ebb55b	Removed response groups in Audible query and limited to 10 results	2022-05-23 22:48:11 +01:00
Kaldigo	c7e3f08d39	Merge branch 'advplyr:master' into master	2022-05-23 22:46:17 +01:00
Kaldigo	d15264832d	Updated matching with latest changes, Added override toggle for quickmatch, added asin and isbn to quickmatch query, updated audible provider to use audnexus	2022-05-23 03:56:51 +01:00