Playlist and collections cleanup

Implement a Settings Content component

.devcontainer/Dockerfile

@@ -0,0 +1,4 @@
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:16
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get install ffmpeg gnupg2 -y
+ENV NODE_ENV=development

.devcontainer/devcontainer.json

@@ -0,0 +1,12 @@
+{
+    "build": { "dockerfile": "Dockerfile" },
+    "mounts": [
+        "source=abs-node-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
+    ],
+    "features": {
+        "fish": "latest"
+	},
+	"extensions": [
+		"eamodio.gitlens"
+	]
+}

.dockerignore

@@ -12,4 +12,5 @@ dev.js
 test/
 /client/.nuxt/
 /client/dist/
-/dist/
+/dist/
+/deploy/

.github/ISSUE_TEMPLATE/bug.yaml

@@ -0,0 +1,50 @@
+name: 🐞 Bug Report
+description: File a bug/issue
+title: "[Bug]: "
+labels: ["bug", "triage"]
+body:
+  - type: markdown
+    attributes:
+      value: "### Please first search for your issue and check the [docs](https://audiobookshelf.org/docs)."
+  - type: markdown
+    attributes:
+      value: "### Mobile app issues report [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)."
+  - type: markdown
+    attributes:
+      value: "### Join the [discord server](https://discord.gg/pJsjuNCKRq) for questions or if you are not sure about a bug."
+  - type: markdown
+    attributes:
+      value: "## Be as descriptive as you can. Include screenshots, error logs, browser, file types, everything you can think of that might be relevant."
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: Describe the issue
+      description: What happened & what did you expect to happen
+    validations:
+      required: true
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to reproduce the issue
+      value: "1. "
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: Audiobookshelf version
+      description: Do not put 'Latest version', please put the actual version here
+      placeholder: "e.g. v1.6.60"
+    validations:
+      required: true
+  - type: dropdown
+    id: install
+    attributes:
+      label: How are you running audiobookshelf?
+      options:
+        - Docker
+        - Debian/PPA
+        - Built from source
+        - Other
+    validations:
+     required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Discord
+    url: https://discord.gg/pJsjuNCKRq
+    about: Ask questions, get help troubleshooting, and join the Abs community here.
+  - name: Matrix
+    url: https://matrix.to/#/#audiobookshelf:matrix.org
+    about: Ask questions, get help troubleshooting, and join the Abs community here.

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,17 @@
+name: 🚀 Feature Request
+description: Request a feature/enhancement
+title: "[Enhancement]: "
+labels: ["enhancement"]
+body:
+  - type: markdown
+    attributes:
+      value: "### Please first search in both issues & discussions for your enhancement."
+  - type: markdown
+    attributes:
+      value: "### Mobile app features should be requested [here](https://github.com/advplyr/audiobookshelf-app/issues/new/choose)."
+  - type: textarea
+    id: describe
+    attributes:
+      label: Describe the feature/enhancement
+    validations:
+      required: true

.github/workflows/docker-build.yml

@@ -0,0 +1,82 @@
+---
+
+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: [main,master]
+    tags:
+      - 'v*.*.*'
+    # Only build when files in these directories have been changed
+    paths:
+      - client/**
+      - server/**
+      - index.js
+      - package.json
+
+jobs:
+  build:
+    if: "!contains(github.event.head_commit.message, 'skip ci')"
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out
+        uses: actions/checkout@v3
+
+      - name: Docker meta
+        id: meta
+        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@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Cache Docker layers
+        uses: actions/cache@v3
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
+      - name: Login to Dockerhub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_PASSWORD }}
+
+      - name: Login to ghcr
+        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@v3
+        with:
+          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
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache

.gitignore

@@ -4,9 +4,14 @@ node_modules/
 /config/
 /audiobooks/
 /audiobooks2/
+/podcasts/
 /media/
 /metadata/
 test/
 /client/.nuxt/
 /client/dist/
-/dist/
+/dist/
+/deploy/
+
+sw.*
+.DS_STORE

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "vetur.format.defaultFormatterOptions": {
+    "prettier": {
+      "semi": false,
+      "singleQuote": true,
+      "printWidth": 400,
+      "proseWrap": "never",
+      "trailingComma": "none"
+    },
+    "prettyhtml": {
+      "printWidth": 400,
+      "singleQuote": false,
+      "wrapAttributes": false,
+      "sortAttributes": false
+    }
+  },
+  "editor.formatOnSave": true,
+  "editor.detectIndentation": true,
+  "editor.tabSize": 2
+}

Dockerfile

@@ -1,18 +1,32 @@
 ### STAGE 0: Build client ###
-FROM node:12-alpine AS build
+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:12-alpine
-RUN apk update && apk add --no-cache --update ffmpeg
+FROM sandreas/tone:v0.1.2 AS tone
+FROM node:16-alpine
+
 ENV NODE_ENV=production
+RUN apk update && \
+    apk add --no-cache --update \
+    curl \
+    tzdata \
+    ffmpeg
+
+COPY --from=tone /usr/local/bin/tone /usr/local/bin/
 COPY --from=build /client/dist /client/dist
-COPY index.js index.js
-COPY package.json package.json
+COPY index.js package* /
 COPY server server
-RUN npm install --production
+
+RUN npm ci --only=production
+
 EXPOSE 80
+HEALTHCHECK \
+    --interval=30s \
+    --timeout=3s \
+    --start-period=10s \
+    CMD curl -f http://127.0.0.1/healthcheck || exit 1
 CMD ["npm", "start"]

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    Audiobookshelf  Self-hosted audiobook server
+    Copyright (C) 2021  advplyr
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    Audiobookshelf  Copyright (C) 2021  advplyr
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

build/debian/DEBIAN/control

@@ -1,5 +1,5 @@
 Package: audiobookshelf
-Version: 1.2.1
+Version: 1.6.41
 Section: base
 Priority: optional
 Architecture: amd64

build/debian/DEBIAN/postinst

@@ -2,47 +2,11 @@
 set -e
 set -o pipefail
 
+ABS_LOG_DIR="/var/log/audiobookshelf"
+
 declare -r init_type='auto'
 declare -ri no_rebuild='0'
 
-add_user() {
-  : "${1:?'User was not defined'}"
-  declare -r user="$1"
-  declare -r uid="$2"
-
-  if [ -z "$uid" ]; then
-    declare -r uid_flags=""
-  else
-    declare -r uid_flags="--uid $uid"
-  fi
-
-  declare -r group="${3:-$user}"
-  declare -r descr="${4:-No description}"
-  declare -r shell="${5:-/bin/false}"
-
-  if ! getent passwd | grep -q "^$user:"; then
-    echo "Creating system user: $user in $group with $descr and shell $shell"
-    useradd $uid_flags --gid $group --no-create-home --system --shell $shell -c "$descr" $user
-  fi
-}
-
-add_group() {
-  : "${1:?'Group was not defined'}"
-  declare -r group="$1"
-  declare -r gid="$2"
-
-  if [ -z "$gid" ]; then
-    declare -r gid_flags=""
-  else
-    declare -r gid_flags="--gid $gid"
-  fi
-
-  if ! getent group | grep -q "^$group:" ; then
-    echo "Creating system group: $group"
-    groupadd $gid_flags --system $group
-  fi
-}
-
 start_service () {
   : "${1:?'Service name was not defined'}"
   declare -r service_name="$1"
@@ -74,12 +38,10 @@ start_service () {
   fi
 }
 
-
-add_group 'audiobookshelf' ''
-add_user 'audiobookshelf' '' 'audiobookshelf' 'audiobookshelf user-daemon' '/bin/false'
-
-mkdir -p '/var/log/audiobookshelf'
-chown -R 'audiobookshelf:audiobookshelf' '/var/log/audiobookshelf'
-chown -R 'audiobookshelf:audiobookshelf' '/usr/share/audiobookshelf'
+# Create log directory if not there and set ownership
+if [ ! -d "$ABS_LOG_DIR" ]; then
+  mkdir -p "$ABS_LOG_DIR"
+  chown -R 'audiobookshelf:audiobookshelf' "$ABS_LOG_DIR"
+fi
 
 start_service 'audiobookshelf'

build/debian/DEBIAN/preinst

@@ -2,98 +2,118 @@
 set -e
 set -o pipefail
 
-DEFAULT_AUDIOBOOK_PATH="/usr/share/audiobookshelf/audiobooks"
-DEFAULT_DATA_PATH="/usr/share/audiobookshelf"
-DEFAULT_PORT=7331
-
+FFMPEG_INSTALL_DIR="/usr/lib/audiobookshelf-ffmpeg"
+DEFAULT_DATA_DIR="/usr/share/audiobookshelf"
 CONFIG_PATH="/etc/default/audiobookshelf"
+DEFAULT_PORT=13378
+DEFAULT_HOST="0.0.0.0"
+
+add_user() {
+  : "${1:?'User was not defined'}"
+  declare -r user="$1"
+  declare -r uid="$2"
+
+  if [ -z "$uid" ]; then
+    declare -r uid_flags=""
+  else
+    declare -r uid_flags="--uid $uid"
+  fi
+
+  declare -r group="${3:-$user}"
+  declare -r descr="${4:-No description}"
+  declare -r shell="${5:-/bin/false}"
+
+  if ! getent passwd | grep -q "^$user:"; then
+    echo "Creating system user: $user in $group with $descr and shell $shell"
+    useradd $uid_flags --gid $group --no-create-home --system --shell $shell -c "$descr" $user
+  fi
+}
+
+add_group() {
+  : "${1:?'Group was not defined'}"
+  declare -r group="$1"
+  declare -r gid="$2"
+
+  if [ -z "$gid" ]; then
+    declare -r gid_flags=""
+  else
+    declare -r gid_flags="--gid $gid"
+  fi
+
+  if ! getent group | grep -q "^$group:" ; then
+    echo "Creating system group: $group"
+    groupadd $gid_flags --system $group
+  fi
+}
 
 install_ffmpeg() {
   echo "Starting FFMPEG Install"
 
-  WGET="wget https://johnvansickle.com/ffmpeg/builds/ffmpeg-git-amd64-static.tar.xz"
-  TARGET_DIR="/usr/lib/audiobookshelf-ffmpeg/"
+  WGET="wget https://johnvansickle.com/ffmpeg/builds/ffmpeg-git-amd64-static.tar.xz --output-document=ffmpeg-git-amd64-static.tar.xz"
+  WGET_TONE="wget https://github.com/sandreas/tone/releases/download/v0.1.2/tone-0.1.2-linux-x64.tar.gz --output-document=tone-0.1.2-linux-x64.tar.gz"
 
-  if ! cd "$TARGET_DIR"; then
-    echo "WARNING: can't access working directory ($TARGET_DIR) creating it" >&2
-    mkdir "$TARGET_DIR"
-    cd "$TARGET_DIR"
+  if ! cd "$FFMPEG_INSTALL_DIR"; then
+    echo "Creating ffmpeg install dir at $FFMPEG_INSTALL_DIR"
+    mkdir "$FFMPEG_INSTALL_DIR"
+    chown -R 'audiobookshelf:audiobookshelf' "$FFMPEG_INSTALL_DIR"
+    cd "$FFMPEG_INSTALL_DIR"
   fi
 
   $WGET
   tar xvf ffmpeg-git-amd64-static.tar.xz --strip-components=1
   rm ffmpeg-git-amd64-static.tar.xz
 
-  chown -R 'audiobookshelf:audiobookshelf' "$TARGET_DIR"
+  # Temp downloading tone library to the ffmpeg dir
+  echo "Getting tone.."
+  $WGET_TONE
+  tar xvf tone-0.1.2-linux-x64.tar.gz --strip-components=1
+  rm tone-0.1.2-linux-x64.tar.gz
 
-  echo "Good to go on Ffmpeg... hopefully"
-}
-
-should_build_config() {
-  if [ -f "$CONFIG_PATH" ]; then
-    echo "You already have a config file. Do you want to use it?"
-
-    options=("Yes" "No")
-    select yn in "${options[@]}"
-    do
-      case $yn in
-          "Yes") 
-            false; return
-            ;;
-          "No")
-            true; return
-            ;;
-      esac
-    done
-  else 
-    echo "No existing config found in $CONFIG_PATH"
-    true; return
-  fi
+  echo "Good to go on Ffmpeg (& tone)... hopefully"
 }
 
 setup_config() {
-  if should_build_config; then
-    echo "Okay, let's setup a new config."
+  if [ -f "$CONFIG_PATH" ]; then
+    echo "Existing config found."
+    cat $CONFIG_PATH
 
-    AUDIOBOOK_PATH=""
-    read -p "
-    Enter path for your audiobooks [Default: $DEFAULT_AUDIOBOOK_PATH]:" AUDIOBOOK_PATH
-
-    if [[ -z "$AUDIOBOOK_PATH" ]]; then
-      AUDIOBOOK_PATH="$DEFAULT_AUDIOBOOK_PATH"
+    # TONE_PATH variable added in 2.1.6, if it doesnt exist then add it
+    if ! grep -q "TONE_PATH" "$CONFIG_PATH"; then
+      echo "Adding TONE_PATH to existing config"
+      echo "TONE_PATH=$FFMPEG_INSTALL_DIR/tone" >> "$CONFIG_PATH"
     fi
 
-    DATA_PATH=""
-    read -p "
-    Enter path for data files, i.e. streams, downloads, database [Default: $DEFAULT_DATA_PATH]:" DATA_PATH
+  else
 
-    if [[ -z "$DATA_PATH" ]]; then
-      DATA_PATH="$DEFAULT_DATA_PATH"
+    if [ ! -d "$DEFAULT_DATA_DIR" ]; then
+      # Create directory and set permissions
+      echo "Creating default data dir at $DEFAULT_DATA_DIR"
+      mkdir "$DEFAULT_DATA_DIR"
+      chown -R 'audiobookshelf:audiobookshelf' "$DEFAULT_DATA_DIR"
     fi
 
-    PORT=""
-    read -p "
-    Port for the web ui [Default: $DEFAULT_PORT]:" PORT
+    echo "Creating default config."
 
-    if [[ -z "$PORT" ]]; then
-      PORT="$DEFAULT_PORT"
-    fi
-
-    config_text="AUDIOBOOK_PATH=$AUDIOBOOK_PATH
-  METADATA_PATH=$DATA_PATH/metadata
-  CONFIG_PATH=$DATA_PATH/config
-  FFMPEG_PATH=/usr/lib/audiobookshelf-ffmpeg/ffmpeg
-  PORT=$PORT"
+    config_text="METADATA_PATH=$DEFAULT_DATA_DIR/metadata
+CONFIG_PATH=$DEFAULT_DATA_DIR/config
+FFMPEG_PATH=$FFMPEG_INSTALL_DIR/ffmpeg
+FFPROBE_PATH=$FFMPEG_INSTALL_DIR/ffprobe
+TONE_PATH=$FFMPEG_INSTALL_DIR/tone
+PORT=$DEFAULT_PORT
+HOST=$DEFAULT_HOST"
 
     echo "$config_text"
 
     echo "$config_text" > /etc/default/audiobookshelf;
 
     echo "Config created"
-
   fi
 }
 
+add_group 'audiobookshelf' ''
+
+add_user 'audiobookshelf' '' 'audiobookshelf' 'audiobookshelf user-daemon' '/bin/false'
+
 setup_config
 
 install_ffmpeg

build/debian/lib/systemd/system/audiobookshelf.service

@@ -10,6 +10,7 @@ ExecStart=/usr/share/audiobookshelf/audiobookshelf
 ExecReload=/bin/kill -HUP $MAINPID
 Restart=always
 User=audiobookshelf
+Group=audiobookshelf
 PermissionsStartOnly=true
 
 [Install]

build/linuxpackager

@@ -32,6 +32,7 @@ echo "--------------------"
 # Create debian control file
 
 mkdir -p dist
+rm -rf dist/debian
 cp -R build/debian dist/debian
 chmod -R 775 dist/debian
 
@@ -47,7 +48,7 @@ Description: $DESCRIPTION"
 echo "$controlfile" > dist/debian/DEBIAN/control;
 
 # Package debian
-pkg -t node12-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .
+pkg -t node16-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .
 
 fakeroot dpkg-deb --build dist/debian
 

client/assets/absicons.css

@@ -0,0 +1,106 @@
+@font-face {
+  font-family: 'absicons';
+  src: url('~static/fonts/absicons/absicons.eot?2jfq33');
+  src: url('~static/fonts/absicons/absicons.eot?2jfq33#iefix') format('embedded-opentype'),
+    url('~static/fonts/absicons/absicons.ttf?2jfq33') format('truetype'),
+    url('~static/fonts/absicons/absicons.woff?2jfq33') format('woff'),
+    url('~static/fonts/absicons/absicons.svg?2jfq33#absicons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.abs-icons {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'absicons' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-books-1:before {
+  content: "\e905";
+}
+
+.icon-microphone-1:before {
+  content: "\e902";
+}
+
+.icon-radio:before {
+  content: "\e903";
+}
+
+.icon-podcast:before {
+  content: "\e904";
+}
+
+.icon-audiobookshelf:before {
+  content: "\e900";
+}
+
+.icon-database:before {
+  content: "\e906";
+}
+
+.icon-microphone-2:before {
+  content: "\e901";
+}
+
+.icon-headphones:before {
+  content: "\e910";
+}
+
+.icon-music:before {
+  content: "\e911";
+}
+
+.icon-video:before {
+  content: "\e914";
+}
+
+.icon-microphone-3:before {
+  content: "\e91e";
+}
+
+.icon-book-1:before {
+  content: "\e91f";
+}
+
+.icon-books-2:before {
+  content: "\e920";
+}
+
+.icon-file-picture:before {
+  content: "\e927";
+}
+
+.icon-database-1:before {
+  content: "\e964";
+}
+
+.icon-rocket:before {
+  content: "\e9a5";
+}
+
+.icon-power:before {
+  content: "\e9b5";
+}
+
+.icon-star:before {
+  content: "\e9d9";
+}
+
+.icon-heart:before {
+  content: "\e9da";
+}
+
+.icon-rss:before {
+  content: "\ea9b";
+}

client/assets/app.css

@@ -1,51 +1,76 @@
 @import './fonts.css';
 @import './transitions.css';
 @import './draggable.css';
+@import './defaultStyles.css';
+@import './absicons.css';
+
+:root {
+  --bookshelf-texture-img: url(/textures/wood_default.jpg);
+  --bookshelf-divider-bg: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
+}
 
 .page {
   width: 100%;
   height: calc(100% - 64px);
   max-height: calc(100% - 64px);
 }
+
 .page.streaming {
   height: calc(100% - 64px - 165px);
   max-height: calc(100% - 64px - 165px);
 }
+
 #bookshelf {
   height: calc(100% - 40px);
+  background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);
+
+  /* For Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: #855620 rgba(0, 0, 0, 0);
+}
+
+.bookshelf-row {
+  /* Sidebar width + scrollbar width */
+  width: calc(100vw - 88px);
+}
+
+@media (max-width: 768px) {
+  #bookshelf {
+    height: calc(100% - 80px);
+  }
+
+  .bookshelf-row {
+    width: 100vw;
+  }
+}
+
+#page-wrapper {
+  background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);
 }
 
 /* width */
 ::-webkit-scrollbar {
   width: 8px;
 }
-/* ::-webkit-scrollbar:horizontal { */
-  /* height: 16px; */
-  /* height: 24px;
-} */
+
+::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
+
 /* Track */
 ::-webkit-scrollbar-track {
-  background-color: rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
 }
-/* ::-webkit-scrollbar-track:horizontal { */
-  /* background: rgb(149, 119, 90); */
-  /* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
-  /* background: linear-gradient(180deg, rgb(117, 88, 60) 0%, rgb(65, 41, 17) 17%, rgb(71, 43, 15) 88%, rgb(3, 2, 1) 100%);
-  box-shadow: 2px 14px 8px #111111aa;
-} */
+
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #855620; 
+  background: #855620;
   border-radius: 4px;
 }
-/* ::-webkit-scrollbar-thumb:horizontal { */
-  /* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
-  /* box-shadow: 2px 14px 8px #111111aa; 
-  border-radius: 4px;
-} */
+
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #704922; 
+  background: #704922;
 }
 
 .no-scroll::-webkit-scrollbar {
@@ -53,6 +78,13 @@
   opacity: 0;
 }
 
+.no-scroll {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
 /* Chrome, Safari, Edge, Opera */
 .no-spinner::-webkit-outer-spin-button,
 .no-spinner::-webkit-inner-spin-button {
@@ -71,18 +103,23 @@ input[type=number] {
   width: 100%;
   border: 1px solid #474747;
 }
+
 .tracksTable tr:nth-child(even) {
   background-color: #2e2e2e;
 }
+
 .tracksTable tr {
   background-color: #373838;
 }
+
 .tracksTable tr:hover {
   background-color: #474747;
 }
+
 .tracksTable td {
   padding: 4px 8px;
 }
+
 .tracksTable th {
   padding: 4px 8px;
   font-size: 0.75rem;
@@ -95,23 +132,28 @@ input[type=number] {
   border-right: 6px solid transparent;
   border-top: 6px solid white;
 }
+
+.arrow-down-small {
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid currentColor;
+}
+
 .triangle-right {
   width: 0;
   height: 0;
   border-left: 8px solid transparent;
   border-bottom: 8px solid transparent;
-  border-top: 8px solid rgb(34,127,35);
-  border-right: 8px solid rgb(34,127,35);
+  border-top: 8px solid rgb(34, 127, 35);
+  border-right: 8px solid rgb(34, 127, 35);
 }
 
 .icon-text {
   font-size: 1.1rem;
 }
 
-#page-wrapper {
-  background-image: linear-gradient(to right bottom, #2e2e2e, #303030, #313131, #333333, #353535, #343434, #323232, #313131, #2c2c2c, #282828, #232323, #1f1f1f);
-}
-
 .box-shadow-md {
   box-shadow: 2px 8px 6px #111111aa;
 }
@@ -136,6 +178,10 @@ input[type=number] {
   box-shadow: 4px 1px 8px #11111166, -4px 1px 8px #11111166, 1px -4px 8px #11111166;
 }
 
+.shadow-height {
+  height: calc(100% - 4px);
+}
+
 .box-shadow-book3d {
   box-shadow: 4px 1px 8px #11111166, 1px -4px 8px #11111166;
 }
@@ -143,3 +189,59 @@ input[type=number] {
 .box-shadow-side {
   box-shadow: 5px 0px 5px #11111166;
 }
+
+/*
+Bookshelf Label
+*/
+.categoryPlacard {
+  letter-spacing: 1px;
+}
+
+.shinyBlack {
+  background-color: #2d3436;
+  background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
+  border-color: rgba(255, 244, 182, 0.6);
+  border-style: solid;
+  color: #fce3a6;
+}
+
+
+.cover-bg {
+  width: calc(100% + 40px);
+  height: calc(100% + 40px);
+  top: -20px;
+  left: -20px;
+  background-size: 100% 100%;
+  background-position: center;
+  opacity: 1;
+  filter: blur(20px);
+}
+
+
+.episode-subtitle {
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-height: 16px;
+  /* fallback */
+  max-height: 32px;
+  /* fallback */
+  -webkit-line-clamp: 2;
+  /* number of lines to show */
+  -webkit-box-orient: vertical;
+}
+
+
+/* Padding for toastification toasts in the top right to not cover appbar/toolbar */
+.app-bar-and-toolbar .Vue-Toastification__container.top-right {
+  padding-top: 104px;
+}
+
+.app-bar .Vue-Toastification__container.top-right {
+  padding-top: 64px;
+}
+
+.no-bars .Vue-Toastification__container.top-right {
+  padding-top: 8px;
+}

client/assets/defaultStyles.css

@@ -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;
+}

client/assets/draggable.css

@@ -1,31 +1,40 @@
 .flip-list-move {
   transition: transform 0.5s;
 }
+
 .no-move {
   transition: transform 0s;
 }
+
 .ghost {
   opacity: 0.5;
   background-color: rgba(255, 255, 255, 0.25);
 }
+
 .list-group {
   min-height: 30px;
 }
-#librariesTable .item {
+
+.drag-handle {
   cursor: n-resize;
 }
+
 .list-group-item:not(.exclude) {
   cursor: n-resize;
 }
+
 .list-group-item.exclude {
   cursor: not-allowed;
 }
+
 .list-group-item:not(.ghost):not(.exclude):hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
+
 .list-group-item:nth-child(even):not(.ghost):not(.exclude) {
   background-color: rgba(0, 0, 0, 0.25);
 }
+
 .list-group-item:nth-child(even):not(.ghost):not(.exclude):hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
@@ -33,6 +42,7 @@
 .list-group-item.exclude:not(.ghost) {
   background-color: rgba(255, 0, 0, 0.25);
 }
+
 .list-group-item.exclude:not(.ghost):hover {
   background-color: rgba(223, 0, 0, 0.25);
 }

client/assets/fastSort.js

@@ -1,158 +0,0 @@
-(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));
-  };
-  // >>> Public <<<
-  var createNewSortInstance = function (opts) {
-    var comparer = castComparer(opts.comparer);
-    return function (_ctx) {
-      var ctx = Array.isArray(_ctx) && !opts.inPlaceSorting
-        ? _ctx.slice()
-        : _ctx;
-      return {
-        /**
-         * Sort array in ascending order.
-         * @example
-         * sort([3, 1, 4]).asc();
-         * sort(users).asc(u => u.firstName);
-         * sort(users).asc([
-         *   U => u.firstName
-         *   u => u.lastName,
-         * ]);
-         */
-        asc: function (sortBy) {
-          return sortArray(1, ctx, sortBy, comparer);
-        },
-        /**
-         * Sort array in descending order.
-         * @example
-         * sort([3, 1, 4]).desc();
-         * sort(users).desc(u => u.firstName);
-         * sort(users).desc([
-         *   U => u.firstName
-         *   u => u.lastName,
-         * ]);
-         */
-        desc: function (sortBy) {
-          return sortArray(-1, ctx, sortBy, comparer);
-        },
-        /**
-         * Sort array in ascending or descending order. It allows sorting on multiple props
-         * in different order for each of them.
-         * @example
-         * sort(users).by([
-         *  { asc: u => u.score }
-         *  { desc: u => u.age }
-         * ]);
-         */
-        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 0;
-    return 1;
-  };
-  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 });
-
-})));

client/assets/fonts.css

@@ -1,9 +1,15 @@
-/* fallback */
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url(/fonts/material-icons.woff2) format('woff2');
+  src: url(~static/fonts/MaterialIcons.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-weight: 400;
+  src: url(~static/fonts/MaterialIconsOutlined.woff2) format('woff2');
 }
 
 .material-icons {
@@ -17,28 +23,316 @@
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
-  -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
 }
-.material-icons:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl) {
+
+.material-icons:not([class*="text-"]) {
   font-size: 1.5rem;
 }
 
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-icons-outlined:not([class*="text-"]) {
+  font-size: 1.5rem;
+}
 
 @font-face {
   font-family: 'Gentium Book Basic';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/GentiumBookBasic.woff2) format('woff2');
+  src: url(~static/fonts/GentiumBookBasic.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
+
 /* latin */
 @font-face {
   font-family: 'Gentium Book Basic';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(/fonts/GentiumBookBasic.woff2) format('woff2');
+  src: url(~static/fonts/GentiumBookBasic.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(~static/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('truetype');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  unicode-range: U+0370-03FF;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(~static/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

client/assets/transitions.css

@@ -20,42 +20,67 @@
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
 }
 
-.slide-enter-to, .slide-leave {
+.slide-enter-to,
+.slide-leave {
   max-height: 600px;
   overflow: hidden;
 }
 
-.slide-enter, .slide-leave-to {
+.slide-enter,
+.slide-leave-to {
   overflow: hidden;
   max-height: 0;
 }
 
 
 
-.menu-enter, .menu-leave-active {
+.menu-enter,
+.menu-leave-active {
   transform: translateY(-15px);
 }
+
 .menu-enter-active {
   transition: all 0.2s;
 }
+
 .menu-leave-active {
   transition: all 0.1s;
 }
+
 .menu-enter,
 .menu-leave-active {
   opacity: 0;
 }
 
-.menux-enter, .menux-leave-active {
+.menux-enter,
+.menux-leave-active {
   transform: translateX(15px);
 }
+
 .menux-enter-active {
   transition: all 0.2s;
 }
+
 .menux-leave-active {
   transition: all 0.1s;
 }
+
 .menux-enter,
 .menux-leave-active {
   opacity: 0;
+}
+
+
+.list-complete-item {
+  transition: all 0.8s ease;
+}
+
+.list-complete-enter-from,
+.list-complete-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.list-complete-leave-active {
+  position: absolute;
 }

client/assets/trix.css

@@ -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%;
+}

client/components/AudioPlayer.vue

@@ -1,620 +0,0 @@
-<template>
-  <div class="w-full -mt-4">
-    <div class="w-full relative mb-2">
-      <div class="absolute top-0 left-0 w-full h-full bg-red flex items-end pointer-events-none">
-        <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>
-        <div class="flex-grow" />
-        <p class="font-mono text-sm text-gray-100 pointer-events-auto">{{ timeRemainingPretty }}</p>
-      </div>
-
-      <div v-if="chapters.length" class="absolute right-20 top-0 bottom-0 h-full flex items-end">
-        <div class="cursor-pointer text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
-          <span class="material-icons text-3xl">format_list_bulleted</span>
-        </div>
-      </div>
-      <div v-if="showExperimentalFeatures" class="absolute top-0 bottom-0 h-full flex items-end" :class="chapters.length ? ' right-32' : 'right-20'">
-        <div class="cursor-pointer text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="showBookmarks">
-          <span class="material-icons" style="font-size: 1.7rem">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
-        </div>
-      </div>
-      <div class="absolute top-0 bottom-0 h-full flex items-end" :class="!showExperimentalFeatures ? (chapters.length ? ' right-32' : 'right-20') : chapters.length ? ' right-44' : 'right-32'">
-        <controls-volume-control ref="volumeControl" v-model="volume" @input="updateVolume" />
-      </div>
-
-      <div class="flex 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="backward10">
-            <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="playPauseClick">
-            <span class="material-icons">{{ seekLoading ? 'autorenew' : isPaused ? 'play_arrow' : 'pause' }}</span>
-          </div>
-          <div class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="forward10">
-            <span class="material-icons text-3xl">forward_10</span>
-          </div>
-          <controls-playback-speed-control v-model="playbackRate" @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>
-    </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-50 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>
-
-    <audio ref="audio" @pause="paused" @playing="playing" @progress="progress" @timeupdate="timeupdate" @loadeddata="audioLoadedData" />
-
-    <modals-chapters-modal v-model="showChaptersModal" :current-chapter="currentChapter" :chapters="chapters" @select="selectChapter" />
-  </div>
-</template>
-
-<script>
-import Hls from 'hls.js'
-
-export default {
-  props: {
-    loading: Boolean,
-    chapters: {
-      type: Array,
-      default: () => []
-    },
-    bookmarks: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      hlsInstance: null,
-      staleHlsInstance: null,
-      volume: 1,
-      playbackRate: 1,
-      trackWidth: 0,
-      isPaused: true,
-      url: null,
-      src: null,
-      playedTrackWidth: 0,
-      bufferTrackWidth: 0,
-      readyTrackWidth: 0,
-      audioEl: null,
-      totalDuration: 0,
-      seekedTime: 0,
-      seekLoading: false,
-      showChaptersModal: false,
-      currentTime: 0,
-      trackOffsetLeft: 16 // Track is 16px from edge
-    }
-  },
-  computed: {
-    token() {
-      return this.$store.getters['user/getToken']
-    },
-    totalDurationPretty() {
-      return this.$secondsToTimestamp(this.totalDuration)
-    },
-    timeRemaining() {
-      if (!this.audioEl) return 0
-      return this.totalDuration - this.currentTime
-    },
-    timeRemainingPretty() {
-      return '-' + this.$secondsToTimestamp(this.timeRemaining)
-    },
-    progressPercent() {
-      if (!this.totalDuration) return 0
-      return Math.round((100 * this.currentTime) / this.totalDuration)
-    },
-    chapterTicks() {
-      return this.chapters.map((chap) => {
-        var perc = chap.start / this.totalDuration
-        return {
-          title: chap.title,
-          left: perc * this.trackWidth
-        }
-      })
-    },
-    currentChapter() {
-      return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
-    },
-    showExperimentalFeatures() {
-      return this.$store.state.showExperimentalFeatures
-    }
-  },
-  methods: {
-    selectChapter(chapter) {
-      this.seek(chapter.start)
-      this.showChaptersModal = false
-    },
-    selectBookmark(bookmark) {
-      if (bookmark) {
-        this.seek(bookmark.time)
-      }
-    },
-    seek(time) {
-      if (this.loading) {
-        return
-      }
-      if (this.seekLoading) {
-        console.error('Already seek loading', this.seekedTime)
-        return
-      }
-      if (!this.audioEl) {
-        console.error('No Audio el for seek', time)
-        return
-      }
-      this.seekedTime = time
-      this.seekLoading = true
-
-      this.audioEl.currentTime = time
-
-      if (this.$refs.playedTrack) {
-        var perc = time / this.audioEl.duration
-        var ptWidth = Math.round(perc * this.trackWidth)
-        this.$refs.playedTrack.style.width = ptWidth + 'px'
-        this.playedTrackWidth = ptWidth
-
-        this.$refs.playedTrack.classList.remove('bg-gray-200')
-        this.$refs.playedTrack.classList.add('bg-yellow-300')
-      }
-    },
-    updateVolume(volume) {
-      if (this.audioEl) {
-        this.audioEl.volume = volume
-      }
-    },
-    updatePlaybackRate(playbackRate) {
-      if (this.audioEl) {
-        try {
-          this.audioEl.playbackRate = playbackRate
-          this.audioEl.defaultPlaybackRate = playbackRate
-        } catch (error) {
-          console.error('Update playback rate failed', error)
-        }
-      } else {
-        console.error('No Audio El updatePlaybackRate')
-      }
-    },
-    playbackRateChanged(playbackRate) {
-      this.updatePlaybackRate(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.totalDuration
-      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)
-      this.$nextTick(this.sendStreamUpdate)
-    },
-    backward10() {
-      var newTime = this.audioEl.currentTime - 10
-      newTime = Math.max(0, newTime)
-      this.seek(newTime)
-    },
-    forward10() {
-      var newTime = this.audioEl.currentTime + 10
-      newTime = Math.min(this.audioEl.duration, newTime)
-      this.seek(newTime)
-    },
-    sendStreamUpdate() {
-      if (!this.audioEl) return
-      this.$emit('updateTime', this.audioEl.currentTime)
-    },
-    setStreamReady() {
-      this.readyTrackWidth = this.trackWidth
-      this.$refs.readyTrack.style.width = this.trackWidth + 'px'
-    },
-    setChunksReady(chunks, numSegments) {
-      var largestSeg = 0
-      for (let i = 0; i < chunks.length; i++) {
-        var chunk = chunks[i]
-        if (typeof chunk === 'string') {
-          var chunkRange = chunk.split('-').map((c) => Number(c))
-          if (chunkRange.length < 2) continue
-          if (chunkRange[1] > largestSeg) largestSeg = chunkRange[1]
-        } else if (chunk > largestSeg) {
-          largestSeg = chunk
-        }
-      }
-      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'
-    },
-    updateTimestamp() {
-      var ts = this.$refs.currentTimestamp
-      if (!ts) {
-        console.error('No timestamp el')
-        return
-      }
-      if (!this.audioEl) {
-        console.error('No Audio El')
-        return
-      }
-      var currTimeClean = this.$secondsToTimestamp(this.audioEl.currentTime)
-      ts.innerText = currTimeClean
-    },
-    clickTrack(e) {
-      var offsetX = e.offsetX
-      var perc = offsetX / this.trackWidth
-      var time = perc * this.audioEl.duration
-      if (isNaN(time) || time === null) {
-        console.error('Invalid time', perc, time)
-        return
-      }
-      this.seek(time)
-    },
-    playPauseClick() {
-      if (this.isPaused) {
-        this.play()
-      } else {
-        this.pause()
-      }
-    },
-    isValidDuration(duration) {
-      if (duration && !isNaN(duration) && duration !== Number.POSITIVE_INFINITY && duration !== Number.NEGATIVE_INFINITY) {
-        return true
-      }
-      return false
-    },
-    getBufferedRanges() {
-      if (!this.audioEl) return []
-
-      const ranges = []
-      const seekable = this.audioEl.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.audioEl.currentTime && buff.end > this.audioEl.currentTime)
-      if (buff) return buff.end
-
-      var last = bufferedRanges[bufferedRanges.length - 1]
-      return last.end
-    },
-    progress() {
-      if (!this.audioEl) {
-        return
-      }
-      var lastbuff = this.getLastBufferedTime()
-
-      var bufferlen = (lastbuff / this.audioEl.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
-    },
-    timeupdate() {
-      if (!this.$refs.playedTrack) {
-        console.error('Invalid no played track ref')
-        return
-      }
-      if (!this.audioEl) {
-        console.error('No Audio El')
-        return
-      }
-
-      if (this.seekLoading) {
-        this.seekLoading = false
-        if (this.$refs.playedTrack) {
-          this.$refs.playedTrack.classList.remove('bg-yellow-300')
-          this.$refs.playedTrack.classList.add('bg-gray-200')
-        }
-      }
-
-      this.updateTimestamp()
-
-      // Send update to server when currentTime > 0
-      //   this prevents errors when seeking to position not yet transcoded
-      //   seeking to position not yet transcoded will cause audio element to set currentTime to 0
-      if (this.audioEl.currentTime) {
-        this.sendStreamUpdate()
-      }
-
-      this.currentTime = this.audioEl.currentTime
-
-      var perc = this.audioEl.currentTime / this.audioEl.duration
-      var ptWidth = Math.round(perc * this.trackWidth)
-      if (this.playedTrackWidth === ptWidth) {
-        return
-      }
-      this.$refs.playedTrack.style.width = ptWidth + 'px'
-      this.playedTrackWidth = ptWidth
-    },
-    paused() {
-      if (!this.$refs.audio) {
-        console.error('No audio on paused()')
-        return
-      }
-      this.isPaused = this.$refs.audio.paused
-    },
-    playing() {
-      if (!this.$refs.audio) {
-        console.error('No audio on playing()')
-        return
-      }
-      this.isPaused = this.$refs.audio.paused
-    },
-    audioLoadedData() {
-      this.totalDuration = this.audioEl.duration
-      this.$emit('loaded', this.totalDuration)
-    },
-    set(url, currentTime, playOnLoad = false) {
-      if (this.hlsInstance) {
-        this.terminateStream()
-      }
-      if (!this.$refs.audio) {
-        console.error('No audio widget')
-        return
-      }
-      this.url = url
-      if (process.env.NODE_ENV === 'development') {
-        url = `${process.env.serverUrl}${url}`
-      }
-      this.src = url
-      console.log('[AudioPlayer-Set] Set url', url)
-
-      var hlsOptions = {
-        startPosition: currentTime || -1,
-        xhrSetup: (xhr) => {
-          xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
-        }
-      }
-      // console.log('[AudioPlayer-Set] HLS Config', hlsOptions)
-      this.hlsInstance = new Hls(hlsOptions)
-      var audio = this.$refs.audio
-      audio.volume = this.volume
-      audio.defaultPlaybackRate = this.playbackRate
-
-      this.hlsInstance.attachMedia(audio)
-      this.hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
-        // console.log('[HLS] MEDIA ATTACHED')
-        this.hlsInstance.loadSource(url)
-
-        this.hlsInstance.on(Hls.Events.MANIFEST_PARSED, function () {
-          console.log('[HLS] Manifest Parsed')
-          if (playOnLoad) {
-            audio.play()
-          }
-        })
-
-        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')
-        })
-      })
-    },
-    showChapters() {
-      if (!this.chapters.length) return
-      this.showChaptersModal = !this.showChaptersModal
-    },
-    showBookmarks() {
-      this.$emit('showBookmarks', this.currentTime)
-    },
-    play() {
-      if (!this.$refs.audio) {
-        console.error('No Audio ref')
-        return
-      }
-      this.$refs.audio.play()
-    },
-    pause() {
-      if (!this.$refs.audio) return
-      this.$refs.audio.pause()
-    },
-    terminateStream() {
-      if (this.hlsInstance) {
-        if (!this.hlsInstance.destroy) {
-          console.error('HLS Instance has no destroy property', this.hlsInstance)
-          return
-        }
-        this.staleHlsInstance = this.hlsInstance
-        this.staleHlsInstance.destroy()
-        this.hlsInstance = null
-      }
-    },
-    async resetStream(startTime) {
-      if (this.$refs.audio) this.$refs.audio.pause()
-      this.terminateStream()
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-      console.log('Waited 1 second after terminating stream to start again')
-      this.set(this.url, startTime, true)
-    },
-    init() {
-      this.playbackRate = this.$store.getters['user/getUserSetting']('playbackRate') || 1
-
-      this.audioEl = this.$refs.audio
-      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) {
-        this.updatePlaybackRate(settings.playbackRate)
-      }
-    },
-    volumeUp() {
-      if (this.volume >= 1) return
-      this.volume = Math.min(1, this.volume + 0.1)
-      this.updateVolume(this.volume)
-    },
-    volumeDown() {
-      if (this.volume <= 0) return
-      this.volume = Math.max(0, this.volume - 0.1)
-      this.updateVolume(this.volume)
-    },
-    toggleMute() {
-      if (this.$refs.volumeControl && this.$refs.volumeControl.toggleMute) {
-        this.$refs.volumeControl.toggleMute()
-      }
-    },
-    increasePlaybackRate() {
-      var rates = [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
-      var currentRateIndex = rates.findIndex((r) => r === this.playbackRate)
-      if (currentRateIndex >= rates.length - 1) return
-      this.playbackRate = rates[currentRateIndex + 1] || 1
-      this.playbackRateChanged(this.playbackRate)
-    },
-    decreasePlaybackRate() {
-      var rates = [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
-      var currentRateIndex = rates.findIndex((r) => r === this.playbackRate)
-      if (currentRateIndex <= 0) return
-      this.playbackRate = rates[currentRateIndex - 1] || 1
-      this.playbackRateChanged(this.playbackRate)
-    },
-    closePlayer() {
-      if (this.loading) return
-      this.$emit('close')
-    },
-    hotkey(action) {
-      if (action === this.$hotkeys.AudioPlayer.PLAY_PAUSE) this.playPauseClick()
-      else if (action === this.$hotkeys.AudioPlayer.JUMP_FORWARD) this.forward10()
-      else if (action === this.$hotkeys.AudioPlayer.JUMP_BACKWARD) this.backward10()
-      else if (action === this.$hotkeys.AudioPlayer.VOLUME_UP) this.volumeUp()
-      else if (action === this.$hotkeys.AudioPlayer.VOLUME_DOWN) this.volumeDown()
-      else if (action === this.$hotkeys.AudioPlayer.MUTE_UNMUTE) this.toggleMute()
-      else if (action === this.$hotkeys.AudioPlayer.SHOW_CHAPTERS) this.showChapters()
-      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)
-  }
-}
-</script>
-
-<style>
-.loadingTrack {
-  animation-name: loadingTrack;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-}
-@keyframes loadingTrack {
-  0% {
-    left: -25%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-</style>

client/components/app/Appbar.vue

@@ -1,54 +1,77 @@
 <template>
   <div class="w-full h-16 bg-primary relative">
-    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-6 py-1 z-40">
+    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-50">
       <div class="flex h-full items-center">
-        <img v-if="!showBack" src="/Logo48.png" class="w-12 h-12 mr-4" />
-        <a v-if="showBack" @click="back" class="rounded-full h-12 w-12 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-4 cursor-pointer">
-          <span class="material-icons text-4xl text-white">arrow_back</span>
-        </a>
-        <h1 class="text-2xl font-book mr-6">AudioBookshelf</h1>
+        <nuxt-link to="/">
+          <img src="~static/icon.svg" class="w-8 min-w-8 h-8 mr-2 sm:w-12 sm:min-w-12 sm:h-12 sm:mr-4" />
+        </nuxt-link>
 
-        <ui-libraries-dropdown />
+        <nuxt-link to="/">
+          <h1 class="text-2xl font-book mr-6 hidden lg:block hover:underline">audiobookshelf <span v-if="showExperimentalFeatures" class="material-icons text-lg text-warning pr-1">logo_dev</span></h1>
+        </nuxt-link>
 
-        <controls-global-search />
+        <ui-libraries-dropdown class="mr-2" />
+
+        <controls-global-search v-if="currentLibrary" class="mr-1 sm:mr-0" />
         <div class="flex-grow" />
 
-        <span v-if="showExperimentalFeatures" class="material-icons text-4xl text-warning pr-4">logo_dev</span>
+        <widgets-notification-widget class="hidden md:block" />
 
-        <nuxt-link v-if="userCanUpload" to="/upload" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center">
-          <span class="material-icons">upload</span>
+        <ui-tooltip v-if="isChromecastInitialized && !isHttps" direction="bottom" text="Casting requires a secure connection" class="flex items-center">
+          <span class="material-icons-outlined text-2xl text-warning text-opacity-50"> cast </span>
+        </ui-tooltip>
+        <div v-if="isChromecastInitialized" class="w-6 min-w-6 h-6 ml-2 mr-1 sm:mx-2 cursor-pointer">
+          <google-cast-launcher></google-cast-launcher>
+        </div>
+
+        <nuxt-link v-if="currentLibrary" to="/config/stats" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 hidden sm:flex items-center justify-center mx-1">
+          <span class="material-icons text-2xl" aria-label="User Stats" role="button">equalizer</span>
         </nuxt-link>
 
-        <nuxt-link v-if="isRootUser" to="/config" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center ml-4">
-          <span class="material-icons">settings</span>
+        <nuxt-link v-if="userCanUpload && currentLibrary" to="/upload" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
+          <span class="material-icons text-2xl" aria-label="Upload Media" role="button">upload</span>
         </nuxt-link>
 
-        <nuxt-link to="/account" class="relative w-32 bg-fg border border-gray-500 rounded shadow-sm ml-5 pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer hover:bg-bg hover:bg-opacity-40" aria-haspopup="listbox" aria-expanded="true">
-          <span class="flex items-center">
+        <nuxt-link v-if="userIsAdminOrUp" to="/config" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center mx-1">
+          <span class="material-icons text-2xl" aria-label="System Settings" role="button">settings</span>
+        </nuxt-link>
+
+        <nuxt-link to="/account" class="relative w-9 h-9 md:w-32 bg-fg border border-gray-500 rounded shadow-sm ml-1.5 sm:ml-3 md:ml-5 md:pl-3 md:pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer hover:bg-bg hover:bg-opacity-40" aria-haspopup="listbox" aria-expanded="true">
+          <span class="items-center hidden md:flex">
             <span class="block truncate">{{ username }}</span>
           </span>
-          <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-            <span class="material-icons text-gray-100">person</span>
+          <span class="h-full md:ml-3 md:absolute inset-y-0 md:right-0 flex items-center justify-center md:pr-2 pointer-events-none">
+            <span class="material-icons text-xl text-gray-100">person</span>
           </span>
         </nuxt-link>
       </div>
-
-      <div v-show="numAudiobooksSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
-        <h1 class="text-2xl px-4">{{ numAudiobooksSelected }} Selected</h1>
-        <ui-btn v-show="!isHome" small class="text-sm mx-2" @click="toggleSelectAll"
-          >{{ isAllSelected ? 'Select None' : 'Select All' }}<span class="pl-2">({{ audiobooksShowing.length }})</span></ui-btn
-        >
-
+      <div v-show="numLibraryItemsSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
+        <h1 class="text-lg md:text-2xl px-4">{{ $getString('MessageItemsSelected', [numLibraryItemsSelected]) }}</h1>
         <div class="flex-grow" />
-
-        <ui-tooltip :text="`Mark as ${selectedIsRead ? 'Not Read' : 'Read'}`" direction="bottom">
-          <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsRead" @click="toggleBatchRead" class="mx-1.5" />
+        <ui-btn v-if="!isPodcastLibrary" color="success" :padding-x="4" small class="flex items-center h-9 mr-2" @click="playSelectedItems">
+          <span class="material-icons text-2xl -ml-2 pr-1 text-white">play_arrow</span>
+          {{ $strings.ButtonPlay }}
+        </ui-btn>
+        <ui-tooltip v-if="userIsAdminOrUp && !isPodcastLibrary" :text="$strings.ButtonQuickMatch" direction="bottom">
+          <ui-icon-btn :disabled="processingBatch" icon="auto_awesome" @click="batchAutoMatchClick" class="mx-1.5" />
+        </ui-tooltip>
+        <ui-tooltip v-if="!isPodcastLibrary" :text="selectedIsFinished ? $strings.MessageMarkAsNotFinished : $strings.MessageMarkAsFinished" direction="bottom">
+          <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsFinished" @click="toggleBatchRead" class="mx-1.5" />
+        </ui-tooltip>
+        <ui-tooltip v-if="userCanUpdate && !isPodcastLibrary" :text="$strings.LabelAddToCollection" direction="bottom">
+          <ui-icon-btn :disabled="processingBatch" icon="collections_bookmark" @click="batchAddToCollectionClick" class="mx-1.5" />
         </ui-tooltip>
         <template v-if="userCanUpdate">
-          <ui-icon-btn v-show="!processingBatchDelete" icon="edit" bg-color="warning" class="mx-1.5" @click="batchEditClick" />
+          <ui-tooltip text="Edit" direction="bottom">
+            <ui-icon-btn :disabled="processingBatch" icon="edit" bg-color="warning" class="mx-1.5" @click="batchEditClick" />
+          </ui-tooltip>
         </template>
-        <ui-icon-btn v-show="userCanDelete" :disabled="processingBatchDelete" icon="delete" bg-color="error" class="mx-1.5" @click="batchDeleteClick" />
-        <span class="material-icons text-4xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatchDelete ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
+        <ui-tooltip v-if="userCanDelete" :text="$strings.ButtonRemove" direction="bottom">
+          <ui-icon-btn :disabled="processingBatch" icon="delete" bg-color="error" class="mx-1.5" @click="batchDeleteClick" />
+        </ui-tooltip>
+        <ui-tooltip :text="$strings.LabelDeselectAll" direction="bottom">
+          <span class="material-icons text-4xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatch ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
+        </ui-tooltip>
       </div>
     </div>
   </div>
@@ -58,7 +81,7 @@
 export default {
   data() {
     return {
-      processingBatchDelete: false
+      totalEntities: 0
     }
   },
   computed: {
@@ -68,39 +91,32 @@ export default {
     libraryName() {
       return this.currentLibrary ? this.currentLibrary.name : 'unknown'
     },
+    libraryMediaType() {
+      return this.currentLibrary ? this.currentLibrary.mediaType : null
+    },
+    isPodcastLibrary() {
+      return this.libraryMediaType === 'podcast'
+    },
     isHome() {
       return this.$route.name === 'library-library'
     },
-    showBack() {
-      return this.$route.name !== 'library-library-bookshelf-id' && !this.isHome
-    },
     user() {
       return this.$store.state.user.user
     },
-    isRootUser() {
-      return this.$store.getters['user/getIsRoot']
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
     },
     username() {
       return this.user ? this.user.username : 'err'
     },
-    numAudiobooksSelected() {
-      return this.selectedAudiobooks.length
+    numLibraryItemsSelected() {
+      return this.selectedLibraryItems.length
     },
-    selectedAudiobooks() {
-      return this.$store.state.selectedAudiobooks
+    selectedLibraryItems() {
+      return this.$store.state.selectedLibraryItems
     },
-    isAllSelected() {
-      return this.audiobooksShowing.length === this.selectedAudiobooks.length
-    },
-    userAudiobooks() {
-      return this.$store.state.user.user.audiobooks || {}
-    },
-    audiobooksShowing() {
-      // return this.$store.getters['audiobooks/getFiltered']()
-      return this.$store.getters['audiobooks/getEntitiesShowing']()
-    },
-    selectedSeries() {
-      return this.$store.state.audiobooks.selectedSeries
+    userMediaProgress() {
+      return this.$store.state.user.user.mediaProgress || []
     },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
@@ -111,11 +127,11 @@ export default {
     userCanUpload() {
       return this.$store.getters['user/getUserCanUpload']
     },
-    selectedIsRead() {
-      // Find an audiobook that is not read, if none then all audiobooks read
-      return !this.selectedAudiobooks.find((ab) => {
-        var userAb = this.userAudiobooks[ab]
-        return !userAb || !userAb.isRead
+    selectedIsFinished() {
+      // Find an item that is not finished, if none then all items finished
+      return !this.selectedLibraryItems.find((libraryItemId) => {
+        var itemProgress = this.userMediaProgress.find((lip) => lip.libraryItemId === libraryItemId)
+        return !itemProgress || !itemProgress.isFinished
       })
     },
     processingBatch() {
@@ -123,41 +139,77 @@ export default {
     },
     showExperimentalFeatures() {
       return this.$store.state.showExperimentalFeatures
+    },
+    isChromecastEnabled() {
+      return this.$store.getters['getServerSetting']('chromecastEnabled')
+    },
+    isChromecastInitialized() {
+      return this.$store.state.globals.isChromecastInitialized
+    },
+    isHttps() {
+      return location.protocol === 'https:' || process.env.NODE_ENV === 'development'
     }
   },
   methods: {
-    async back() {
-      var popped = await this.$store.dispatch('popRoute')
-      var backTo = popped || '/'
-      this.$router.push(backTo)
+    async playSelectedItems() {
+      this.$store.commit('setProcessingBatch', true)
+
+      var libraryItems = await this.$axios.$post(`/api/items/batch/get`, { libraryItemIds: this.selectedLibraryItems }).catch((error) => {
+        var errorMsg = error.response.data || 'Failed to get items'
+        console.error(errorMsg, error)
+        this.$toast.error(errorMsg)
+        return []
+      })
+
+      if (!libraryItems.length) {
+        this.$store.commit('setProcessingBatch', false)
+        return
+      }
+
+      const queueItems = []
+      libraryItems.forEach((item) => {
+        queueItems.push({
+          libraryItemId: item.id,
+          libraryId: item.libraryId,
+          episodeId: null,
+          title: item.media.metadata.title,
+          subtitle: item.media.metadata.authors.map((au) => au.name).join(', '),
+          caption: '',
+          duration: item.media.duration || null,
+          coverPath: item.media.coverPath || null
+        })
+      })
+
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: queueItems[0].libraryItemId,
+        queueItems
+      })
+      this.$store.commit('setProcessingBatch', false)
+      this.$store.commit('setSelectedLibraryItems', [])
+      this.$eventBus.$emit('bookshelf_clear_selection')
     },
     cancelSelectionMode() {
-      if (this.processingBatchDelete) return
-      this.$store.commit('setSelectedAudiobooks', [])
-    },
-    toggleSelectAll() {
-      if (this.isAllSelected) {
-        this.cancelSelectionMode()
-      } else {
-        var audiobookIds = this.audiobooksShowing.map((a) => a.id)
-        this.$store.commit('setSelectedAudiobooks', audiobookIds)
-      }
+      if (this.processingBatch) return
+      this.$store.commit('setSelectedLibraryItems', [])
+      this.$eventBus.$emit('bookshelf_clear_selection')
     },
     toggleBatchRead() {
       this.$store.commit('setProcessingBatch', true)
-      var newIsRead = !this.selectedIsRead
-      var updateProgressPayloads = this.selectedAudiobooks.map((ab) => {
+      var newIsFinished = !this.selectedIsFinished
+      var updateProgressPayloads = this.selectedLibraryItems.map((lid) => {
         return {
-          audiobookId: ab,
-          isRead: newIsRead
+          libraryItemId: lid,
+          isFinished: newIsFinished
         }
       })
+      console.log('Progress payloads', updateProgressPayloads)
       this.$axios
-        .patch(`/api/user/audiobooks`, updateProgressPayloads)
+        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
         .then(() => {
           this.$toast.success('Batch update success!')
           this.$store.commit('setProcessingBatch', false)
-          this.$store.commit('setSelectedAudiobooks', [])
+          this.$store.commit('setSelectedLibraryItems', [])
+          this.$eventBus.$emit('bookshelf_clear_selection')
         })
         .catch((error) => {
           this.$toast.error('Batch update failed')
@@ -166,34 +218,46 @@ export default {
         })
     },
     batchDeleteClick() {
-      var audiobookText = this.numAudiobooksSelected > 1 ? `these ${this.numAudiobooksSelected} audiobooks` : 'this audiobook'
-      var confirmMsg = `Are you sure you want to remove ${audiobookText}?\n\n*Does not delete your files, only removes the audiobooks from AudioBookshelf`
+      var audiobookText = this.numLibraryItemsSelected > 1 ? `these ${this.numLibraryItemsSelected} items` : 'this item'
+      var confirmMsg = `Are you sure you want to remove ${audiobookText}?\n\n*Does not delete your files, only removes the items from Audiobookshelf`
       if (confirm(confirmMsg)) {
-        this.processingBatchDelete = true
         this.$store.commit('setProcessingBatch', true)
         this.$axios
-          .$post(`/api/audiobooks/delete`, {
-            audiobookIds: this.selectedAudiobooks
+          .$post(`/api/items/batch/delete`, {
+            libraryItemIds: this.selectedLibraryItems
           })
           .then(() => {
             this.$toast.success('Batch delete success!')
-            this.processingBatchDelete = false
             this.$store.commit('setProcessingBatch', false)
-            this.$store.commit('setSelectedAudiobooks', [])
+            this.$store.commit('setSelectedLibraryItems', [])
+            this.$eventBus.$emit('bookshelf_clear_selection')
           })
           .catch((error) => {
             this.$toast.error('Batch delete failed')
             console.error('Failed to batch delete', error)
-            this.processingBatchDelete = false
             this.$store.commit('setProcessingBatch', false)
           })
       }
     },
     batchEditClick() {
       this.$router.push('/batch')
+    },
+    batchAddToCollectionClick() {
+      this.$store.commit('globals/setShowBatchCollectionsModal', true)
+    },
+    setBookshelfTotalEntities(totalEntities) {
+      this.totalEntities = totalEntities
+    },
+    batchAutoMatchClick() {
+      this.$store.commit('globals/setShowBatchQuickMatchModal', true)
     }
   },
-  mounted() {}
+  mounted() {
+    this.$eventBus.$on('bookshelf-total-entities', this.setBookshelfTotalEntities)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('bookshelf-total-entities', this.setBookshelfTotalEntities)
+  }
 }
 </script>
 
@@ -201,4 +265,4 @@ export default {
 #appbar {
   box-shadow: 0px 5px 5px #11111155;
 }
-</style>
+</style>

client/components/app/BookShelf.vue

@@ -1,361 +0,0 @@
-<template>
-  <div id="bookshelf" ref="wrapper" class="w-full h-full overflow-y-scroll relative">
-    <!-- Cover size widget -->
-    <div v-show="!isSelectionMode" class="fixed bottom-2 right-4 z-30">
-      <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
-        <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize">remove</span>
-        <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
-        <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize">add</span>
-      </div>
-    </div>
-
-    <div v-if="!audiobooks.length" class="w-full flex flex-col items-center justify-center py-12">
-      <p class="text-center text-2xl font-book mb-4 py-4">Your Audiobookshelf is empty!</p>
-      <div class="flex">
-        <ui-btn to="/config" color="primary" class="w-52 mr-2" @click="scan">Configure Scanner</ui-btn>
-        <ui-btn color="success" class="w-52" @click="scan">Scan Audiobooks</ui-btn>
-      </div>
-    </div>
-    <div v-else-if="page === 'search'" id="bookshelf-categorized" class="w-full flex flex-col items-center">
-      <template v-for="(shelf, index) in categorizedShelves">
-        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" />
-      </template>
-      <div v-show="!categorizedShelves.length" class="w-full py-16 text-center text-xl">
-        <div class="py-4 mb-6"><p class="text-2xl">No Results</p></div>
-      </div>
-    </div>
-    <div v-else id="bookshelf" class="w-full flex flex-col items-center">
-      <template v-for="(shelf, index) in shelves">
-        <div :key="index" class="w-full bookshelfRow relative">
-          <div class="flex justify-center items-center">
-            <template v-for="entity in shelf">
-              <cards-group-card v-if="showGroups" :key="entity.id" :width="bookCoverWidth" :group="entity" @click="clickGroup" />
-              <!-- <cards-book-3d :key="entity.id" v-else :width="100" :src="$store.getters['audiobooks/getBookCoverSrc'](entity.book)" /> -->
-              <cards-book-card v-else :key="entity.id" :show-volume-number="!!selectedSeries" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" @edit="editBook" />
-            </template>
-          </div>
-          <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
-        </div>
-      </template>
-      <div v-show="!shelves.length" class="w-full py-16 text-center text-xl">
-        <div v-if="page === 'search'" class="py-4 mb-6"><p class="text-2xl">No Results</p></div>
-        <div v-else class="py-4">No {{ showGroups ? 'Series' : 'Audiobooks' }}</div>
-        <ui-btn v-if="!showGroups && (filterBy !== 'all' || keywordFilter)" @click="clearFilter">Clear Filter</ui-btn>
-        <ui-btn v-else-if="page === 'search'" to="/library">Back to Library</ui-btn>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    page: String,
-    selectedSeries: String,
-    searchResults: {
-      type: Object,
-      default: () => {}
-    },
-    searchQuery: String
-  },
-  data() {
-    return {
-      shelves: [],
-      currSearchParams: null,
-      availableSizes: [60, 80, 100, 120, 140, 160, 180, 200, 220],
-      selectedSizeIndex: 3,
-      rowPaddingX: 40,
-      keywordFilterTimeout: null,
-      scannerParseSubtitle: false,
-      wrapperClientWidth: 0
-    }
-  },
-  watch: {
-    keywordFilter() {
-      this.checkKeywordFilter()
-    },
-    selectedSeries() {
-      this.$nextTick(() => {
-        this.$store.commit('audiobooks/setSelectedSeries', this.selectedSeries)
-        this.setBookshelfEntities()
-      })
-    },
-    searchResults() {
-      this.$nextTick(() => {
-        // this.$store.commit('audiobooks/setSearchResults', this.searchResults)
-        this.setBookshelfEntities()
-      })
-    },
-    '$route.query.filter'() {
-      if (this.$route.query.filter && this.$route.query.filter !== this.filterBy) {
-        this.$store.dispatch('user/updateUserSettings', { filterBy: this.$route.query.filter })
-      } else if (!this.$route.query.filter && this.filterBy) {
-        this.$store.dispatch('user/updateUserSettings', { filterBy: 'all' })
-      }
-    }
-  },
-  computed: {
-    keywordFilter() {
-      return this.$store.state.audiobooks.keywordFilter
-    },
-    userAudiobooks() {
-      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
-    },
-    audiobooks() {
-      return this.$store.state.audiobooks.audiobooks
-    },
-    sizeMultiplier() {
-      return this.bookCoverWidth / 120
-    },
-    bookCoverWidth() {
-      return this.availableSizes[this.selectedSizeIndex]
-    },
-    sizeMultiplier() {
-      return this.bookCoverWidth / 120
-    },
-    paddingX() {
-      return 16 * this.sizeMultiplier
-    },
-    bookWidth() {
-      var _width = this.bookCoverWidth + this.paddingX * 2
-      return this.showGroups ? _width * 1.6 : _width
-    },
-    isSelectionMode() {
-      return this.$store.getters['getNumAudiobooksSelected']
-    },
-    filterBy() {
-      return this.$store.getters['user/getUserSetting']('filterBy')
-    },
-    orderBy() {
-      return this.$store.getters['user/getUserSetting']('orderBy')
-    },
-    orderDesc() {
-      return this.$store.getters['user/getUserSetting']('orderDesc')
-    },
-    showGroups() {
-      return this.page !== '' && this.page !== 'search' && !this.selectedSeries
-    },
-    categorizedShelves() {
-      if (this.page !== 'search') return []
-      var audiobookSearchResults = this.searchResults ? this.searchResults.audiobooks || [] : []
-      const shelves = []
-
-      if (audiobookSearchResults.length) {
-        shelves.push({
-          label: 'Books',
-          books: audiobookSearchResults.map((absr) => absr.audiobook)
-        })
-      }
-
-      if (this.searchResults.series && this.searchResults.series.length) {
-        var seriesGroups = this.searchResults.series.map((seriesResult) => {
-          return {
-            type: 'series',
-            name: seriesResult.series || '',
-            books: seriesResult.audiobooks || []
-          }
-        })
-        shelves.push({
-          label: 'Series',
-          series: seriesGroups
-        })
-      }
-
-      if (this.searchResults.tags && this.searchResults.tags.length) {
-        var tagGroups = this.searchResults.tags.map((tagResult) => {
-          return {
-            type: 'tags',
-            name: tagResult.tag || '',
-            books: tagResult.audiobooks || []
-          }
-        })
-        shelves.push({
-          label: 'Tags',
-          series: tagGroups
-        })
-      }
-
-      return shelves
-    },
-    entities() {
-      if (this.page === '') {
-        return this.$store.getters['audiobooks/getFilteredAndSorted']()
-      } else if (this.page === 'search') {
-        var audiobookSearchResults = this.searchResults ? this.searchResults.audiobooks || [] : []
-        return audiobookSearchResults.map((absr) => absr.audiobook)
-      } else {
-        var seriesGroups = this.$store.getters['audiobooks/getSeriesGroups']()
-        if (this.selectedSeries) {
-          var group = seriesGroups.find((group) => group.name === this.selectedSeries)
-          return group.books
-        }
-        return seriesGroups
-      }
-    }
-  },
-  methods: {
-    editBook(audiobook) {
-      var bookIds = this.entities.map((e) => e.id)
-      this.$store.commit('setBookshelfBookIds', bookIds)
-      this.$store.commit('showEditModal', audiobook)
-    },
-    clickGroup(group) {
-      this.$emit('update:selectedSeries', group.name)
-    },
-    clearFilter() {
-      this.$store.commit('audiobooks/setKeywordFilter', null)
-      if (this.filterBy !== 'all') {
-        this.$store.dispatch('user/updateUserSettings', {
-          filterBy: 'all'
-        })
-      } else {
-        this.setBookshelfEntities()
-      }
-    },
-    checkKeywordFilter() {
-      clearTimeout(this.keywordFilterTimeout)
-      this.keywordFilterTimeout = setTimeout(() => {
-        this.setBookshelfEntities()
-      }, 500)
-    },
-    increaseSize() {
-      this.selectedSizeIndex = Math.min(this.availableSizes.length - 1, this.selectedSizeIndex + 1)
-      this.resize()
-      this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
-    },
-    decreaseSize() {
-      this.selectedSizeIndex = Math.max(0, this.selectedSizeIndex - 1)
-      this.resize()
-      this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
-    },
-    setBookshelfEntities() {
-      this.wrapperClientWidth = this.$refs.wrapper.clientWidth
-      var width = Math.max(0, this.wrapperClientWidth - this.rowPaddingX * 2)
-
-      var booksPerRow = Math.floor(width / this.bookWidth)
-
-      this.currSearchParams = this.buildSearchParams()
-
-      var entities = this.entities
-
-      var groups = []
-      var currentRow = 0
-      var currentGroup = []
-
-      for (let i = 0; i < entities.length; i++) {
-        var row = Math.floor(i / booksPerRow)
-        if (row > currentRow) {
-          groups.push([...currentGroup])
-          currentRow = row
-          currentGroup = []
-        }
-        currentGroup.push(entities[i])
-      }
-      if (currentGroup.length) {
-        groups.push([...currentGroup])
-      }
-      this.shelves = groups
-    },
-    async init() {
-      this.checkUpdateSearchParams()
-
-      this.wrapperClientWidth = this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0
-
-      var bookshelfCoverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
-      var sizeIndex = this.availableSizes.findIndex((s) => s === bookshelfCoverSize)
-      if (!isNaN(sizeIndex)) this.selectedSizeIndex = sizeIndex
-
-      var isLoading = await this.$store.dispatch('audiobooks/load')
-      if (!isLoading) {
-        this.setBookshelfEntities()
-      }
-    },
-    resize() {
-      this.$nextTick(this.setBookshelfEntities)
-    },
-    audiobooksUpdated() {
-      console.log('[AudioBookshelf] Audiobooks Updated')
-      this.setBookshelfEntities()
-    },
-    buildSearchParams() {
-      if (this.page === 'search' || this.page === 'series') {
-        return ''
-      }
-
-      let searchParams = new URLSearchParams()
-      if (this.filterBy && this.filterBy !== 'all') {
-        searchParams.set('filter', this.filterBy)
-      }
-      if (this.orderBy) {
-        searchParams.set('order', this.orderBy)
-        searchParams.set('orderdesc', this.orderDesc ? 1 : 0)
-      }
-      return searchParams.toString()
-    },
-    checkUpdateSearchParams() {
-      var newSearchParams = this.buildSearchParams()
-      var currentQueryString = window.location.search
-
-      if (newSearchParams === '') {
-        return false
-      }
-
-      if (newSearchParams !== this.currSearchParams || newSearchParams !== currentQueryString) {
-        let newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + newSearchParams
-        window.history.replaceState({ path: newurl }, '', newurl)
-        return true
-      }
-
-      return false
-    },
-    settingsUpdated(settings) {
-      var wasUpdated = this.checkUpdateSearchParams()
-      if (wasUpdated) this.setBookshelfEntities()
-
-      if (settings.bookshelfCoverSize !== this.bookCoverWidth && settings.bookshelfCoverSize !== undefined) {
-        var index = this.availableSizes.indexOf(settings.bookshelfCoverSize)
-        if (index >= 0) {
-          this.selectedSizeIndex = index
-          this.resize()
-        }
-      }
-    },
-    scan() {
-      this.$root.socket.emit('scan', this.$store.state.libraries.currentLibraryId)
-    }
-  },
-  updated() {
-    if (this.$refs.wrapper) {
-      if (this.wrapperClientWidth !== this.$refs.wrapper.clientWidth) {
-        this.$nextTick(this.setBookshelfEntities)
-      }
-    }
-  },
-  mounted() {
-    window.addEventListener('resize', this.resize)
-    this.$store.commit('audiobooks/addListener', { id: 'bookshelf', meth: this.audiobooksUpdated })
-    this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })
-
-    this.init()
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.resize)
-    this.$store.commit('audiobooks/removeListener', 'bookshelf')
-    this.$store.commit('user/removeSettingsListener', 'bookshelf')
-  }
-}
-</script>
-
-<style>
-#bookshelf {
-  height: calc(100% - 40px);
-}
-.bookshelfRow {
-  background-image: url(/wood_panels.jpg);
-}
-.bookshelfDivider {
-  background: rgb(149, 119, 90);
-  background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%);
-  box-shadow: 2px 14px 8px #111111aa;
-}
-</style>

client/components/app/BookShelfCategorized.vue

@@ -1,24 +1,39 @@
 <template>
-  <div id="bookshelf" ref="wrapper" class="w-full h-full overflow-y-scroll relative">
+  <div id="bookshelf" ref="wrapper" class="w-full max-w-full h-full overflow-y-scroll relative">
     <!-- Cover size widget -->
-    <div class="fixed bottom-2 right-4 z-40">
-      <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
-        <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize">remove</span>
-        <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
-        <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize">add</span>
-      </div>
-    </div>
+    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-30" />
 
-    <div v-if="!audiobooks.length" class="w-full flex flex-col items-center justify-center py-12">
-      <p class="text-center text-2xl font-book mb-4 py-4">Your Audiobookshelf is empty!</p>
-      <div class="flex">
-        <ui-btn to="/config" color="primary" class="w-52 mr-2" @click="scan">Configure Scanner</ui-btn>
-        <ui-btn color="success" class="w-52" @click="scan">Scan Audiobooks</ui-btn>
+    <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>
+      <div v-if="userIsAdminOrUp" class="flex">
+        <ui-btn to="/config" color="primary" class="w-52 mr-2">Configure Scanner</ui-btn>
+        <ui-btn color="success" class="w-52" @click="scan">Scan Library</ui-btn>
       </div>
     </div>
-    <div v-else id="bookshelf" class="w-full flex flex-col items-center">
+    <div v-else-if="loaded && !shelves.length && search" class="w-full h-40 flex items-center justify-center">
+      <p class="text-center text-xl font-book py-4">No results for query</p>
+    </div>
+    <!-- Alternate plain view -->
+    <div v-else-if="isAlternativeBookshelfView" class="w-full mb-24">
       <template v-for="(shelf, index) in shelves">
-        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" />
+        <widgets-item-slider v-if="shelf.type === 'book' || shelf.type === 'podcast'" :shelf-id="shelf.id" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+        </widgets-item-slider>
+        <widgets-episode-slider v-else-if="shelf.type === 'episode'" :key="index + '.'" :items="shelf.entities" :continue-listening-shelf="shelf.id === 'continue-listening'" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6" @selectEntity="(payload) => selectEntity(payload, index)">
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+        </widgets-episode-slider>
+        <widgets-series-slider v-else-if="shelf.type === 'series'" :key="index + '.'" :items="shelf.entities" :height="232 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+        </widgets-series-slider>
+        <widgets-authors-slider v-else-if="shelf.type === 'authors'" :key="index + '.'" :items="shelf.entities" :height="192 * sizeMultiplier" class="bookshelf-row pl-8 my-6">
+          <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ $strings[shelf.labelStringKey] }}</p>
+        </widgets-authors-slider>
+      </template>
+    </div>
+    <!-- Regular bookshelf view -->
+    <div v-else class="w-full">
+      <template v-for="(shelf, index) in shelves">
+        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" :continue-listening-shelf="shelf.id === 'continue-listening'" @selectEntity="(payload) => selectEntity(payload, index)" />
       </template>
     </div>
   </div>
@@ -26,134 +41,382 @@
 
 <script>
 export default {
+  props: {
+    search: Boolean,
+    results: {
+      type: Object,
+      default: () => {}
+    }
+  },
   data() {
     return {
-      availableSizes: [60, 80, 100, 120, 140, 160, 180, 200, 220],
-      selectedSizeIndex: 3,
-      rowPaddingX: 40,
+      loaded: false,
       keywordFilterTimeout: null,
       scannerParseSubtitle: false,
       wrapperClientWidth: 0,
-      overflowingShelvesRight: {},
-      overflowingShelvesLeft: {}
+      shelves: [],
+      lastItemIndexSelected: -1
     }
   },
   computed: {
-    userAudiobooks() {
-      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
     },
-    audiobooks() {
-      return this.$store.state.audiobooks.audiobooks
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    libraryName() {
+      return this.$store.getters['libraries/getCurrentLibraryName']
+    },
+    isAlternativeBookshelfView() {
+      return this.$store.getters['getHomeBookshelfView'] === this.$constants.BookshelfView.DETAIL
     },
     bookCoverWidth() {
-      return this.availableSizes[this.selectedSizeIndex]
+      var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
+      if (this.isCoverSquareAspectRatio) return coverSize * 1.6
+      return coverSize
+    },
+    coverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    isCoverSquareAspectRatio() {
+      return this.coverAspectRatio == 1
     },
     sizeMultiplier() {
-      return this.bookCoverWidth / 120
+      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
+      return this.bookCoverWidth / baseSize
     },
-    paddingX() {
-      return 16 * this.sizeMultiplier
-    },
-    bookWidth() {
-      return this.bookCoverWidth + this.paddingX * 2
-    },
-    mostRecentPlayed() {
-      var audiobooks = this.audiobooks.filter((ab) => this.userAudiobooks[ab.id] && this.userAudiobooks[ab.id].lastUpdate > 0 && this.userAudiobooks[ab.id].progress > 0 && !this.userAudiobooks[ab.id].isRead).map((ab) => ({ ...ab }))
-      audiobooks.sort((a, b) => {
-        return this.userAudiobooks[b.id].lastUpdate - this.userAudiobooks[a.id].lastUpdate
-      })
-      return audiobooks.slice(0, 10)
-    },
-    mostRecentAdded() {
-      var audiobooks = this.audiobooks.map((ab) => ({ ...ab })).sort((a, b) => b.addedAt - a.addedAt)
-      return audiobooks.slice(0, 10)
-    },
-    seriesGroups() {
-      return this.$store.getters['audiobooks/getSeriesGroups']()
-    },
-    recentlyUpdatedSeries() {
-      var mostRecentTime = 0
-      var mostRecentSeries = null
-      this.seriesGroups.forEach((series) => {
-        if ((series.books.length && mostRecentSeries === null) || series.lastUpdate > mostRecentTime) {
-          mostRecentTime = series.lastUpdate
-          mostRecentSeries = series
-        }
-      })
-      if (!mostRecentSeries) return null
-      return mostRecentSeries.books
-    },
-    booksRecentlyRead() {
-      var audiobooks = this.audiobooks.filter((ab) => this.userAudiobooks[ab.id] && this.userAudiobooks[ab.id].isRead).map((ab) => ({ ...ab }))
-      audiobooks.sort((a, b) => {
-        return this.userAudiobooks[b.id].finishedAt - this.userAudiobooks[a.id].finishedAt
-      })
-      return audiobooks.slice(0, 10)
-    },
-    shelves() {
-      var shelves = []
-      if (this.mostRecentPlayed.length) {
-        shelves.push({ books: this.mostRecentPlayed, label: 'Continue Reading' })
-      }
-
-      shelves.push({ books: this.mostRecentAdded, label: 'Recently Added' })
-
-      if (this.recentlyUpdatedSeries) {
-        shelves.push({ books: this.recentlyUpdatedSeries, label: 'Newest Series' })
-      }
-
-      if (this.booksRecentlyRead.length) {
-        shelves.push({ books: this.booksRecentlyRead, label: 'Read Again' })
-      }
-      return shelves
+    selectedLibraryItems() {
+      return this.$store.state.selectedLibraryItems || []
     }
   },
   methods: {
-    increaseSize() {
-      this.selectedSizeIndex = Math.min(this.availableSizes.length - 1, this.selectedSizeIndex + 1)
-      this.resize()
-      this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
-    },
-    decreaseSize() {
-      this.selectedSizeIndex = Math.max(0, this.selectedSizeIndex - 1)
-      this.resize()
-      this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
+    selectEntity({ entity, shiftKey }, shelfIndex) {
+      const shelf = this.shelves[shelfIndex]
+      const entityShelfIndex = shelf.entities.findIndex((ent) => ent.id === entity.id)
+      const indexOf = shelf.shelfStartIndex + entityShelfIndex
+
+      const lastLastItemIndexSelected = this.lastItemIndexSelected
+      if (!this.selectedLibraryItems.includes(entity.id)) {
+        this.lastItemIndexSelected = indexOf
+      } else {
+        this.lastItemIndexSelected = -1
+      }
+
+      if (shiftKey && lastLastItemIndexSelected >= 0) {
+        var loopStart = indexOf
+        var loopEnd = lastLastItemIndexSelected
+        if (indexOf > lastLastItemIndexSelected) {
+          loopStart = lastLastItemIndexSelected
+          loopEnd = indexOf
+        }
+
+        const flattenedEntitiesArray = []
+        this.shelves.map((s) => flattenedEntitiesArray.push(...s.entities))
+
+        var isSelecting = false
+        // If any items in this range is not selected then select all otherwise unselect all
+        for (let i = loopStart; i <= loopEnd; i++) {
+          const thisEntity = flattenedEntitiesArray[i]
+          if (thisEntity) {
+            if (!this.selectedLibraryItems.includes(thisEntity.id)) {
+              isSelecting = true
+              break
+            }
+          }
+        }
+        if (isSelecting) this.lastItemIndexSelected = indexOf
+
+        for (let i = loopStart; i <= loopEnd; i++) {
+          const thisEntity = flattenedEntitiesArray[i]
+          if (thisEntity) {
+            this.$store.commit('setLibraryItemSelected', { libraryItemId: thisEntity.id, selected: isSelecting })
+          } else {
+            console.error('Invalid entity index', i)
+          }
+        }
+      } else {
+        this.$store.commit('toggleLibraryItemSelected', entity.id)
+      }
+
+      this.$nextTick(() => {
+        this.$eventBus.$emit('item-selected', entity)
+      })
     },
     async init() {
       this.wrapperClientWidth = this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0
 
-      var bookshelfCoverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
-      var sizeIndex = this.availableSizes.findIndex((s) => s === bookshelfCoverSize)
-      if (!isNaN(sizeIndex)) this.selectedSizeIndex = sizeIndex
-
-      await this.$store.dispatch('audiobooks/load')
-    },
-    resize() {},
-    audiobooksUpdated() {},
-    settingsUpdated(settings) {
-      if (settings.bookshelfCoverSize !== this.bookCoverWidth && settings.bookshelfCoverSize !== undefined) {
-        var index = this.availableSizes.indexOf(settings.bookshelfCoverSize)
-        if (index >= 0) {
-          this.selectedSizeIndex = index
-          this.resize()
-        }
+      if (this.search) {
+        this.setShelvesFromSearch()
+      } else {
+        await this.fetchCategories()
       }
+      this.loaded = true
+    },
+    async fetchCategories() {
+      var categories = await this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/personalized`)
+        .then((data) => {
+          return data
+        })
+        .catch((error) => {
+          console.error('Failed to fetch categories', error)
+          return []
+        })
+
+      let totalEntityCount = 0
+      for (const shelf of categories) {
+        shelf.shelfStartIndex = totalEntityCount
+        totalEntityCount += shelf.entities.length
+      }
+      this.shelves = categories
+    },
+    async setShelvesFromSearch() {
+      var shelves = []
+      if (this.results.books && this.results.books.length) {
+        shelves.push({
+          id: 'books',
+          label: 'Books',
+          labelStringKey: 'LabelBooks',
+          type: 'book',
+          entities: this.results.books.map((res) => res.libraryItem)
+        })
+      }
+
+      if (this.results.podcasts && this.results.podcasts.length) {
+        shelves.push({
+          id: 'podcasts',
+          label: 'Podcasts',
+          labelStringKey: 'LabelPodcasts',
+          type: 'podcast',
+          entities: this.results.podcasts.map((res) => res.libraryItem)
+        })
+      }
+
+      if (this.results.series && this.results.series.length) {
+        shelves.push({
+          id: 'series',
+          label: 'Series',
+          labelStringKey: 'LabelSeries',
+          type: 'series',
+          entities: this.results.series.map((seriesObj) => {
+            return {
+              ...seriesObj.series,
+              books: seriesObj.books,
+              type: 'series'
+            }
+          })
+        })
+      }
+      if (this.results.tags && this.results.tags.length) {
+        shelves.push({
+          id: 'tags',
+          label: 'Tags',
+          labelStringKey: 'LabelTags',
+          type: 'tags',
+          entities: this.results.tags.map((tagObj) => {
+            return {
+              name: tagObj.name,
+              books: tagObj.books || [],
+              type: 'tags'
+            }
+          })
+        })
+      }
+      if (this.results.authors && this.results.authors.length) {
+        shelves.push({
+          id: 'authors',
+          label: 'Authors',
+          labelStringKey: 'LabelAuthors',
+          type: 'authors',
+          entities: this.results.authors.map((a) => {
+            return {
+              ...a,
+              type: 'author'
+            }
+          })
+        })
+      }
+      this.shelves = shelves
     },
     scan() {
-      this.$root.socket.emit('scan', this.$store.state.libraries.currentLibraryId)
+      this.$store
+        .dispatch('libraries/requestLibraryScan', { libraryId: this.$store.state.libraries.currentLibraryId })
+        .then(() => {
+          this.$toast.success('Library scan started')
+        })
+        .catch((error) => {
+          console.error('Failed to start scan', error)
+          this.$toast.error('Failed to start scan')
+        })
+    },
+    userUpdated(user) {
+      if (user.seriesHideFromContinueListening && user.seriesHideFromContinueListening.length) {
+        this.removeAllSeriesFromContinueSeries(user.seriesHideFromContinueListening)
+      }
+      if (user.mediaProgress.length) {
+        const mediaProgressToHide = user.mediaProgress.filter((mp) => mp.hideFromContinueListening)
+        this.removeItemsFromContinueListening(mediaProgressToHide)
+      }
+    },
+    libraryItemAdded(libraryItem) {
+      console.log('libraryItem added', libraryItem)
+      // TODO: Check if libraryItem would be on this shelf
+      if (!this.search) {
+        this.fetchCategories()
+      }
+    },
+    libraryItemUpdated(libraryItem) {
+      console.log('libraryItem updated', libraryItem)
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'book' || shelf.type == 'podcast') {
+          shelf.entities = shelf.entities.map((ent) => {
+            if (ent.id === libraryItem.id) {
+              return libraryItem
+            }
+            return ent
+          })
+        } else if (shelf.type === 'series') {
+          shelf.entities.forEach((ent) => {
+            ent.books = ent.books.map((book) => {
+              if (book.id === libraryItem.id) return libraryItem
+              return book
+            })
+          })
+        }
+      })
+    },
+    removeBookFromShelf(libraryItem) {
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'book' || shelf.type == 'podcast') {
+          shelf.entities = shelf.entities.filter((ent) => {
+            return ent.id !== libraryItem.id
+          })
+        } else if (shelf.type === 'series') {
+          shelf.entities.forEach((ent) => {
+            ent.books = ent.books.filter((book) => {
+              return book.id !== libraryItem.id
+            })
+          })
+        }
+      })
+    },
+    libraryItemRemoved(libraryItem) {
+      this.removeBookFromShelf(libraryItem)
+    },
+    libraryItemsAdded(libraryItems) {
+      console.log('libraryItems added', libraryItems)
+      // TODO: Check if audiobook would be on this shelf
+      if (!this.search) {
+        this.fetchCategories()
+      }
+    },
+    libraryItemsUpdated(items) {
+      items.forEach((li) => {
+        this.libraryItemUpdated(li)
+      })
+    },
+    removeAllSeriesFromContinueSeries(seriesIds) {
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'book' && shelf.id == 'continue-series') {
+          // Filter out series books from continue series shelf
+          shelf.entities = shelf.entities.filter((ent) => {
+            if (ent.media.metadata.series && seriesIds.includes(ent.media.metadata.series.id)) return false
+            return true
+          })
+        }
+      })
+    },
+    removeItemsFromContinueListening(mediaProgressItems) {
+      const continueListeningShelf = this.shelves.find((s) => s.id === 'continue-listening')
+      if (continueListeningShelf) {
+        if (continueListeningShelf.type === 'book') {
+          continueListeningShelf.entities = continueListeningShelf.entities.filter((ent) => {
+            if (mediaProgressItems.some((mp) => mp.libraryItemId === ent.id)) return false
+            return true
+          })
+        } else if (continueListeningShelf.type === 'episode') {
+          continueListeningShelf.entities = continueListeningShelf.entities.filter((ent) => {
+            if (!ent.recentEpisode) return true // Should always have this here
+            if (mediaProgressItems.some((mp) => mp.libraryItemId === ent.id && mp.episodeId === ent.recentEpisode.id)) return false
+            return true
+          })
+        }
+      }
+      // this.shelves.forEach((shelf) => {
+      //   if (shelf.id == 'continue-listening') {
+      //     if (shelf.type == 'book') {
+      //       // Filter out books from continue listening shelf
+      //       shelf.entities = shelf.entities.filter((ent) => {
+      //         if (mediaProgressItems.some(mp => mp.libraryItemId === ent.id)) return false
+      //         return true
+      //       })
+      //     }
+      //   }
+      // })
+    },
+    authorUpdated(author) {
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'authors') {
+          shelf.entities = shelf.entities.map((ent) => {
+            if (ent.id === author.id) {
+              return {
+                ...ent,
+                ...author
+              }
+            }
+            return ent
+          })
+        }
+      })
+    },
+    authorRemoved(author) {
+      this.shelves.forEach((shelf) => {
+        if (shelf.type == 'authors') {
+          shelf.entities = shelf.entities.filter((ent) => ent.id != author.id)
+        }
+      })
+    },
+    initListeners() {
+      if (this.$root.socket) {
+        this.$root.socket.on('user_updated', this.userUpdated)
+        this.$root.socket.on('author_updated', this.authorUpdated)
+        this.$root.socket.on('author_removed', this.authorRemoved)
+        this.$root.socket.on('item_updated', this.libraryItemUpdated)
+        this.$root.socket.on('item_added', this.libraryItemAdded)
+        this.$root.socket.on('item_removed', this.libraryItemRemoved)
+        this.$root.socket.on('items_updated', this.libraryItemsUpdated)
+        this.$root.socket.on('items_added', this.libraryItemsAdded)
+      } else {
+        console.error('Error socket not initialized')
+      }
+    },
+    removeListeners() {
+      this.$store.commit('user/removeSettingsListener', 'bookshelf')
+
+      if (this.$root.socket) {
+        this.$root.socket.off('user_updated', this.userUpdated)
+        this.$root.socket.off('author_updated', this.authorUpdated)
+        this.$root.socket.off('author_removed', this.authorRemoved)
+        this.$root.socket.off('item_updated', this.libraryItemUpdated)
+        this.$root.socket.off('item_added', this.libraryItemAdded)
+        this.$root.socket.off('item_removed', this.libraryItemRemoved)
+        this.$root.socket.off('items_updated', this.libraryItemsUpdated)
+        this.$root.socket.off('items_added', this.libraryItemsAdded)
+      } else {
+        console.error('Error socket not initialized')
+      }
     }
   },
   mounted() {
-    window.addEventListener('resize', this.resize)
-    this.$store.commit('audiobooks/addListener', { id: 'bookshelf', meth: this.audiobooksUpdated })
-    this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })
-
+    this.initListeners()
     this.init()
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.resize)
-    this.$store.commit('audiobooks/removeListener', 'bookshelf')
-    this.$store.commit('user/removeSettingsListener', 'bookshelf')
+    this.removeListeners()
   }
 }
 </script>

client/components/app/BookShelfRow.vue

@@ -1,40 +1,62 @@
 <template>
   <div class="relative">
-    <div ref="shelf" class="w-full max-w-full bookshelfRowCategorized relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: 2.5 * sizeMultiplier + 'rem' }" @scroll="scrolled">
-      <div class="w-full h-full" :style="{ marginTop: sizeMultiplier + 'rem' }">
-        <div v-if="shelf.books" class="flex items-center -mb-2">
-          <template v-for="entity in shelf.books">
-            <cards-book-card :key="entity.id" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" @hook:updated="updatedBookCard" @edit="editBook" />
+    <div ref="shelf" class="w-full max-w-full bookshelf-row categorizedBookshelfRow relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: paddingLeft * sizeMultiplier + 'rem', height: shelfHeight + 'px' }" @scroll="scrolled">
+      <div class="w-full h-full pt-6">
+        <div v-if="shelf.type === 'book' || shelf.type === 'podcast'" class="flex items-center">
+          <template v-for="(entity, index) in shelf.entities">
+            <cards-lazy-book-card :key="entity.id" :ref="`shelf-book-${entity.id}`" :index="index" :width="bookCoverWidth" :height="bookCoverHeight" :book-cover-aspect-ratio="bookCoverAspectRatio" :book-mount="entity" :continue-listening-shelf="continueListeningShelf" class="relative mx-2" @hook:updated="updatedBookCard" @select="selectItem" @edit="editItem" />
           </template>
         </div>
-        <div v-else-if="shelf.series" class="flex items-center -mb-2">
-          <template v-for="entity in shelf.series">
-            <cards-group-card :key="entity.name" :width="bookCoverWidth" :group="entity" @click="$emit('clickSeries', entity)" />
+        <div v-if="shelf.type === 'episode'" class="flex items-center">
+          <template v-for="(entity, index) in shelf.entities">
+            <cards-lazy-book-card
+              :key="entity.recentEpisode.id"
+              :ref="`shelf-episode-${entity.recentEpisode.id}`"
+              :index="index"
+              :width="bookCoverWidth"
+              :height="bookCoverHeight"
+              :book-cover-aspect-ratio="bookCoverAspectRatio"
+              :book-mount="entity"
+              :continue-listening-shelf="continueListeningShelf"
+              class="relative mx-2"
+              @hook:updated="updatedBookCard"
+              @select="selectItem"
+              @editPodcast="editItem"
+              @edit="editEpisode"
+            />
           </template>
         </div>
-        <div v-else-if="shelf.tags" class="flex items-center -mb-2">
-          <template v-for="entity in shelf.tags">
-            <nuxt-link :key="entity.name" :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(entity.name)}`">
-              <cards-group-card :width="bookCoverWidth" :group="entity" />
-            </nuxt-link>
+        <div v-if="shelf.type === 'series'" class="flex items-center">
+          <template v-for="entity in shelf.entities">
+            <cards-lazy-series-card :key="entity.name" :series-mount="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
+          </template>
+        </div>
+        <div v-if="shelf.type === 'tags'" class="flex items-center">
+          <template v-for="entity in shelf.entities">
+            <cards-group-card :key="entity.name" :group="entity" :height="bookCoverHeight" :width="bookCoverWidth * 2" :book-cover-aspect-ratio="bookCoverAspectRatio" class="relative mx-2" @hook:updated="updatedBookCard" />
+          </template>
+        </div>
+        <div v-if="shelf.type === 'authors'" class="flex items-center">
+          <template v-for="entity in shelf.entities">
+            <cards-author-card :key="entity.id" :width="bookCoverWidth / 1.25" :height="bookCoverWidth" :author="entity" :size-multiplier="sizeMultiplier" @hook:updated="updatedBookCard" class="pb-6 mx-2" @edit="editAuthor" />
           </template>
         </div>
       </div>
     </div>
 
-    <div class="absolute text-center categoryPlacard font-book transform z-30 bottom-0.5 left-8 w-36 rounded-md" style="height: 22px">
+    <div class="absolute text-center categoryPlacard font-book transform z-30 bottom-px left-4 md:left-8 w-44 rounded-md" style="height: 22px">
       <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
-        <p class="transform text-sm">{{ shelf.label }}</p>
+        <p class="transform text-sm">{{ $strings[shelf.labelStringKey] }}</p>
       </div>
     </div>
 
     <div class="bookshelfDividerCategorized h-6 w-full absolute bottom-0 left-0 right-0 z-20"></div>
 
-    <div v-show="canScrollLeft && !isScrolling" class="absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left flex items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollLeft">
-      <span class="material-icons text-8xl text-white">chevron_left</span>
+    <div v-show="canScrollLeft && !isScrolling" class="hidden sm:flex absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollLeft">
+      <span class="material-icons text-6xl text-white">chevron_left</span>
     </div>
-    <div v-show="canScrollRight && !isScrolling" class="absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right flex items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollRight">
-      <span class="material-icons text-8xl text-white">chevron_right</span>
+    <div v-show="canScrollRight && !isScrolling" class="hidden sm:flex absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollRight">
+      <span class="material-icons text-6xl text-white">chevron_right</span>
     </div>
   </div>
 </template>
@@ -48,7 +70,9 @@ export default {
       default: () => {}
     },
     sizeMultiplier: Number,
-    bookCoverWidth: Number
+    bookCoverWidth: Number,
+    bookCoverAspectRatio: Number,
+    continueListeningShelf: Boolean
   },
   data() {
     return {
@@ -60,15 +84,65 @@ export default {
     }
   },
   computed: {
-    userAudiobooks() {
-      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
+    bookCoverHeight() {
+      return this.bookCoverWidth * this.bookCoverAspectRatio
+    },
+    shelfHeight() {
+      return this.bookCoverHeight + 48
+    },
+    paddingLeft() {
+      if (window.innerWidth < 768) return 1
+      return 2.5
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    isSelectionMode() {
+      return this.$store.getters['getNumLibraryItemsSelected'] > 0
     }
   },
   methods: {
-    editBook(audiobook) {
-      var bookIds = this.shelf.books.map((e) => e.id)
-      this.$store.commit('setBookshelfBookIds', bookIds)
-      this.$store.commit('showEditModal', audiobook)
+    clearSelectedEntities() {
+      this.updateSelectionMode(false)
+    },
+    editAuthor(author) {
+      this.$store.commit('globals/showEditAuthorModal', author)
+    },
+    editItem(libraryItem) {
+      var itemIds = this.shelf.entities.map((e) => e.id)
+      this.$store.commit('setBookshelfBookIds', itemIds)
+      this.$store.commit('showEditModal', libraryItem)
+    },
+    editEpisode({ libraryItem, episode }) {
+      this.$store.commit('setSelectedLibraryItem', libraryItem)
+      this.$store.commit('globals/setSelectedEpisode', episode)
+      this.$store.commit('globals/setShowEditPodcastEpisodeModal', true)
+    },
+    updateSelectionMode(val) {
+      var selectedLibraryItems = this.$store.state.selectedLibraryItems
+      if (this.shelf.type === 'book' || this.shelf.type === 'podcast') {
+        this.shelf.entities.forEach((ent) => {
+          var component = this.$refs[`shelf-book-${ent.id}`]
+          if (!component || !component.length) return
+          component = component[0]
+          component.setSelectionMode(val)
+          component.selected = selectedLibraryItems.includes(ent.id)
+        })
+      } else if (this.shelf.type === 'episode') {
+        this.shelf.entities.forEach((ent) => {
+          var component = this.$refs[`shelf-episode-${ent.recentEpisode.id}`]
+          if (!component || !component.length) return
+          component = component[0]
+          component.setSelectionMode(val)
+          component.selected = selectedLibraryItems.includes(ent.id)
+        })
+      }
+    },
+    selectItem(payload) {
+      this.$emit('selectEntity', payload)
+    },
+    itemSelectedEvt() {
+      this.updateSelectionMode(this.isSelectionMode)
     },
     scrolled() {
       clearTimeout(this.scrollTimer)
@@ -112,34 +186,31 @@ export default {
         this.canScrollLeft = false
       }
     }
+  },
+  mounted() {
+    this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
+    this.$eventBus.$on('item-selected', this.itemSelectedEvt)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
+    this.$eventBus.$off('item-selected', this.itemSelectedEvt)
   }
 }
 </script>
 
 <style>
-.bookshelfRowCategorized {
+.categorizedBookshelfRow {
   scroll-behavior: smooth;
-  width: calc(100vw - 80px);
-  background-image: url(/wood_panels.jpg);
+  background-image: var(--bookshelf-texture-img);
+  background-repeat: repeat-x;
 }
+
 .bookshelfDividerCategorized {
   background: rgb(149, 119, 90);
-  /* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
   background: linear-gradient(180deg, rgb(122, 94, 68) 0%, rgb(92, 62, 31) 17%, rgb(82, 54, 26) 88%, rgba(71, 48, 25, 1) 100%);
-  /* background: linear-gradient(180deg, rgb(114, 85, 59) 0%, rgb(73, 48, 22) 17%, rgb(71, 43, 15) 88%, rgb(61, 41, 20) 100%); */
   box-shadow: 2px 14px 8px #111111aa;
 }
-.categoryPlacard {
-  background-image: url(https://image.freepik.com/free-photo/brown-wooden-textured-flooring-background_53876-128537.jpg);
-  letter-spacing: 1px;
-}
-.shinyBlack {
-  background-color: #2d3436;
-  background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
-  border-color: rgba(255, 244, 182, 0.6);
-  border-style: solid;
-  color: #fce3a6;
-}
+
 .book-shelf-arrow-right {
   height: calc(100% - 24px);
   background: rgb(48, 48, 48);

client/components/app/BookShelfToolbar.vue

@@ -1,35 +1,93 @@
 <template>
-  <div class="w-full h-10 relative">
-    <div id="toolbar" class="absolute top-0 left-0 w-full h-full z-20 flex items-center px-8">
-      <template v-if="page !== 'search' && !isHome">
-        <p v-if="!selectedSeries" class="font-book">{{ numShowing }} {{ entityName }}</p>
-        <div v-else class="flex items-center">
-          <div @click="seriesBackArrow" class="rounded-full h-9 w-9 flex items-center justify-center hover:bg-white hover:bg-opacity-10 cursor-pointer">
-            <span class="material-icons text-2xl text-white">west</span>
-          </div>
-          <!-- <span class="material-icons text-2xl cursor-pointer" @click="seriesBackArrow">west</span> -->
-          <p class="pl-4 font-book text-lg">
-            {{ selectedSeries }}
-          </p>
-          <div class="w-6 h-6 rounded-full bg-black bg-opacity-30 flex items-center justify-center ml-3">
-            <span class="font-mono">{{ numShowing }}</span>
-          </div>
+  <div class="w-full h-20 md:h-10 relative">
+    <div class="flex md:hidden h-10 items-center">
+      <nuxt-link :to="`/library/${currentLibraryId}`" class="flex-grow h-full flex justify-center items-center" :class="isHomePage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p v-if="isHomePage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonHome }}</p>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+        </svg>
+      </nuxt-link>
+      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="flex-grow h-full flex justify-center items-center" :class="isLibraryPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p v-if="isLibraryPage || isPodcastLibrary" class="text-sm">{{ $strings.ButtonLibrary }}</p>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+        </svg>
+      </nuxt-link>
+      <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p class="text-sm">{{ $strings.ButtonLatest }}</p>
+      </nuxt-link>
+      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p v-if="isSeriesPage" class="text-sm">{{ $strings.ButtonSeries }}</p>
+        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+        </svg>
+      </nuxt-link>
+      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="flex-grow h-full flex justify-center items-center" :class="isCollectionsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p v-if="isCollectionsPage" class="text-sm">{{ $strings.ButtonCollections }}</p>
+        <span v-else class="material-icons-outlined text-lg">collections_bookmark</span>
+      </nuxt-link>
+      <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/authors`" class="flex-grow h-full flex justify-center items-center" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p v-if="isAuthorsPage" class="text-sm">{{ $strings.ButtonAuthors }}</p>
+        <svg v-else class="w-5 h-5" viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
+          />
+        </svg>
+      </nuxt-link>
+      <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="flex-grow h-full flex justify-center items-center" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p class="text-sm">{{ $strings.ButtonSearch }}</p>
+      </nuxt-link>
+    </div>
+    <div id="toolbar" class="absolute top-10 md:top-0 left-0 w-full h-10 md:h-full z-30 flex items-center justify-end md:justify-start px-2 md:px-8">
+      <!-- Series books page -->
+      <template v-if="selectedSeries">
+        <p class="pl-2 font-book text-base md:text-lg">
+          {{ seriesName }}
+        </p>
+        <div class="w-6 h-6 rounded-full bg-black bg-opacity-30 flex items-center justify-center ml-3">
+          <span class="font-mono">{{ numShowing }}</span>
         </div>
         <div class="flex-grow" />
-
-        <ui-text-input v-show="!selectedSeries" v-model="_keywordFilter" placeholder="Keyword Filter" :padding-y="1.5" clearable class="text-xs w-40" />
-        <controls-filter-select v-show="showSortFilters" v-model="settings.filterBy" class="w-48 h-7.5 ml-4" @change="updateFilter" />
-        <controls-order-select v-show="showSortFilters" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-48 h-7.5 ml-4" @change="updateOrder" />
+        <ui-checkbox v-if="!isBatchSelecting" v-model="settings.collapseBookSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseBookSeries" />
+        <ui-btn v-if="!isBatchSelecting" color="primary" small :loading="processingSeries" class="items-center ml-1 sm:ml-4 hidden md:flex" @click="markSeriesFinished">
+          <div class="h-5 w-5">
+            <svg v-if="isSeriesFinished" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgb(63, 181, 68)">
+              <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-9 15l-5-5 1.41-1.41L10 13.17l7.59-7.59L19 7l-9 9z" />
+            </svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M19 1H5c-1.1 0-1.99.9-1.99 2L3 15.93c0 .69.35 1.3.88 1.66L12 23l8.11-5.41c.53-.36.88-.97.88-1.66L21 3c0-1.1-.9-2-2-2zm-7 19.6l-7-4.66V3h14v12.93l-7 4.67zm-2.01-7.42l-2.58-2.59L6 12l4 4 8-8-1.42-1.42z" />
+            </svg>
+          </div>
+          <span class="pl-2"> {{ $strings.LabelMarkSeries }} {{ isSeriesFinished ? $strings.LabelNotFinished : $strings.LabelFinished }}</span>
+        </ui-btn>
+        <ui-btn v-if="isSeriesRemovedFromContinueListening && !isBatchSelecting" small :loading="processingSeries" @click="reAddSeriesToContinueListening" class="hidden md:block ml-2"> Re-Add Series to Continue Listening </ui-btn>
       </template>
-      <template v-else-if="!isHome">
-        <div @click="searchBackArrow" class="rounded-full h-10 w-10 flex items-center justify-center hover:bg-white hover:bg-opacity-10 cursor-pointer">
-          <span class="material-icons text-3xl text-white">west</span>
-        </div>
-        <!-- <p class="font-book pl-4">{{ numShowing }} showing</p> -->
+      <!-- library & collections page -->
+      <template v-else-if="page !== 'search' && page !== 'podcast-search' && page !== 'recent-episodes' && !isHome">
+        <p class="font-book hidden md:block">{{ numShowing }} {{ entityName }}</p>
+
+        <div class="flex-grow hidden sm:inline-block" />
+
+        <ui-checkbox v-if="isLibraryPage && !isPodcastLibrary && !isBatchSelecting" v-model="settings.collapseSeries" :label="$strings.LabelCollapseSeries" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
+        <controls-library-filter-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
+        <controls-library-sort-select v-if="isLibraryPage && !isBatchSelecting" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateOrder" />
+        <controls-library-filter-select v-if="isSeriesPage && !isBatchSelecting" v-model="seriesFilterBy" is-series class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesFilter" />
+        <controls-sort-select v-if="isSeriesPage && !isBatchSelecting" v-model="seriesSortBy" :descending.sync="seriesSortDesc" :items="seriesSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateSeriesSort" />
+
+        <ui-btn v-if="isIssuesFilter && userCanDelete && !isBatchSelecting" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">{{ $strings.ButtonRemoveAll }} {{ numShowing }} {{ entityName }}</ui-btn>
+      </template>
+      <!-- search page -->
+      <template v-else-if="page === 'search'">
         <div class="flex-grow" />
-        <p>Search results for "{{ searchQuery }}"</p>
+        <p>{{ $strings.MessageSearchResultsFor }} "{{ searchQuery }}"</p>
         <div class="flex-grow" />
       </template>
+      <!-- authors page -->
+      <template v-else-if="page === 'authors'">
+        <div class="flex-grow" />
+        <ui-btn v-if="userCanUpdate && authors && authors.length && !isBatchSelecting" :loading="processingAuthors" color="primary" small @click="matchAllAuthors">{{ $strings.ButtonMatchAllAuthors }}</ui-btn>
+      </template>
     </div>
   </div>
 </template>
@@ -39,64 +97,240 @@ export default {
   props: {
     page: String,
     isHome: Boolean,
-    selectedSeries: String,
-    searchResults: {
+    selectedSeries: {
       type: Object,
-      default: () => {}
+      default: () => null
     },
-    searchQuery: String
+    searchQuery: String,
+    authors: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {
       settings: {},
-      hasInit: false
+      hasInit: false,
+      totalEntities: 0,
+      processingSeries: false,
+      processingIssues: false,
+      processingAuthors: false
     }
   },
   computed: {
-    showSortFilters() {
-      return this.page === ''
-    },
-    numShowing() {
-      if (this.page === '') {
-        return this.$store.getters['audiobooks/getFiltered']().length
-      } else if (this.page === 'search') {
-        var audiobookSearchResults = this.searchResults ? this.searchResults.audiobooks || [] : []
-        return audiobookSearchResults.length
-      } else {
-        var groups = this.$store.getters['audiobooks/getSeriesGroups']()
-        if (this.selectedSeries) {
-          var group = groups.find((g) => g.name === this.selectedSeries)
-          if (group) return group.books.length
-          return 0
+    seriesSortItems() {
+      return [
+        {
+          text: this.$strings.LabelName,
+          value: 'name'
+        },
+        {
+          text: this.$strings.LabelNumberOfBooks,
+          value: 'numBooks'
+        },
+        {
+          text: this.$strings.LabelAddedAt,
+          value: 'addedAt'
+        },
+        {
+          text: this.$strings.LabelTotalDuration,
+          value: 'totalDuration'
         }
-        return groups.length
-      }
+      ]
     },
-    entityName() {
-      if (!this.page) return 'Audiobooks'
-      if (this.page === 'series') return 'Series'
-      if (this.page === 'collections') return 'Collections'
-      return ''
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
     },
-    _keywordFilter: {
-      get() {
-        return this.$store.state.audiobooks.keywordFilter
-      },
-      set(val) {
-        this.$store.commit('audiobooks/setKeywordFilter', val)
-      }
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
     },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
+    },
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isPodcastLibrary() {
+      return this.currentLibraryMediaType === 'podcast'
+    },
+    isLibraryPage() {
+      return this.page === ''
+    },
+    isSeriesPage() {
+      return this.page === 'series'
+    },
+    isCollectionsPage() {
+      return this.page === 'collections'
+    },
+    isPlaylistsPage() {
+      return this.page === 'playlists'
+    },
+    isHomePage() {
+      return this.$route.name === 'library-library'
+    },
+    isPodcastSearchPage() {
+      return this.$route.name === 'library-library-podcast-search'
+    },
+    isPodcastLatestPage() {
+      return this.$route.name === 'library-library-podcast-latest'
+    },
+    isAuthorsPage() {
+      return this.$route.name === 'library-library-authors'
+    },
+    numShowing() {
+      return this.totalEntities
+    },
+    entityName() {
+      if (this.isPodcastLibrary) return this.$strings.LabelPodcasts
+      if (!this.page) return this.$strings.LabelBooks
+      if (this.isSeriesPage) return this.$strings.LabelSeries
+      if (this.isCollectionsPage) return this.$strings.LabelCollections
+      if (this.isPlaylistsPage) return this.$strings.LabelPlaylists
+      return ''
+    },
+    seriesId() {
+      return this.selectedSeries ? this.selectedSeries.id : null
+    },
+    seriesName() {
+      return this.selectedSeries ? this.selectedSeries.name : null
+    },
+    seriesProgress() {
+      return this.selectedSeries ? this.selectedSeries.progress : null
+    },
+    seriesLibraryItemIds() {
+      if (!this.seriesProgress) return []
+      return this.seriesProgress.libraryItemIds || []
+    },
+    isBatchSelecting() {
+      return this.$store.state.selectedLibraryItems.length
+    },
+    isSeriesFinished() {
+      return this.seriesProgress && !!this.seriesProgress.isFinished
+    },
+    isSeriesRemovedFromContinueListening() {
+      if (!this.seriesId) return false
+      return this.$store.getters['user/getIsSeriesRemovedFromContinueListening'](this.seriesId)
+    },
+    filterBy() {
+      return this.$store.getters['user/getUserSetting']('filterBy')
+    },
+    isIssuesFilter() {
+      return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
+    },
+    seriesSortBy: {
+      get() {
+        return this.$store.state.libraries.seriesSortBy
+      },
+      set(val) {
+        this.$store.commit('libraries/setSeriesSortBy', val)
+      }
+    },
+    seriesSortDesc: {
+      get() {
+        return this.$store.state.libraries.seriesSortDesc
+      },
+      set(val) {
+        this.$store.commit('libraries/setSeriesSortDesc', val)
+      }
+    },
+    seriesFilterBy: {
+      get() {
+        return this.$store.state.libraries.seriesFilterBy
+      },
+      set(val) {
+        this.$store.commit('libraries/setSeriesFilterBy', val)
+      }
     }
   },
   methods: {
-    searchBackArrow() {
-      this.$router.replace(`/library/${this.currentLibraryId}/bookshelf`)
+    reAddSeriesToContinueListening() {
+      this.processingSeries = true
+      this.$axios
+        .$get(`/api/me/series/${this.seriesId}/readd-to-continue-listening`)
+        .then(() => {
+          this.$toast.success('Series re-added to continue listening')
+        })
+        .catch((error) => {
+          console.error('Failed to re-add series to continue listening', error)
+          this.$toast.error('Failed to re-add series to continue listening')
+        })
+        .finally(() => {
+          this.processingSeries = false
+        })
     },
-    seriesBackArrow() {
-      this.$router.replace(`/library/${this.currentLibraryId}/bookshelf/series`)
-      this.$emit('update:selectedSeries', null)
+    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
+        this.$axios
+          .$delete(`/api/libraries/${this.currentLibraryId}/issues`)
+          .then(() => {
+            this.$toast.success('Removed library items with issues')
+            this.$router.push(`/library/${this.currentLibraryId}/bookshelf`)
+            this.$store.dispatch('libraries/fetch', this.currentLibraryId)
+          })
+          .catch((error) => {
+            console.error('Failed to remove library items with issues', error)
+            this.$toast.error('Failed to remove library items with issues')
+          })
+          .finally(() => {
+            this.processingIssues = false
+          })
+      }
+    },
+    markSeriesFinished() {
+      var newIsFinished = !this.isSeriesFinished
+      this.processingSeries = true
+      var updateProgressPayloads = this.seriesLibraryItemIds.map((lid) => {
+        return {
+          libraryItemId: lid,
+          isFinished: newIsFinished
+        }
+      })
+      console.log('Progress payloads', updateProgressPayloads)
+      this.$axios
+        .patch(`/api/me/progress/batch/update`, updateProgressPayloads)
+        .then(() => {
+          this.$toast.success('Series update success')
+          this.selectedSeries.progress.isFinished = newIsFinished
+          this.processingSeries = false
+        })
+        .catch((error) => {
+          this.$toast.error('Series update failed')
+          console.error('Failed to batch update read/not read', error)
+          this.processingSeries = false
+        })
     },
     updateOrder() {
       this.saveSettings()
@@ -104,6 +338,18 @@ export default {
     updateFilter() {
       this.saveSettings()
     },
+    updateSeriesSort() {
+      this.$eventBus.$emit('series-sort-updated')
+    },
+    updateSeriesFilter() {
+      this.$eventBus.$emit('series-sort-updated')
+    },
+    updateCollapseSeries() {
+      this.saveSettings()
+    },
+    updateCollapseBookSeries() {
+      this.saveSettings()
+    },
     saveSettings() {
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },
@@ -114,14 +360,19 @@ export default {
       for (const key in settings) {
         this.settings[key] = settings[key]
       }
+    },
+    setBookshelfTotalEntities(totalEntities) {
+      this.totalEntities = totalEntities
     }
   },
   mounted() {
     this.init()
     this.$store.commit('user/addSettingsListener', { id: 'bookshelftoolbar', meth: this.settingsUpdated })
+    this.$eventBus.$on('bookshelf-total-entities', this.setBookshelfTotalEntities)
   },
   beforeDestroy() {
     this.$store.commit('user/removeSettingsListener', 'bookshelftoolbar')
+    this.$eventBus.$off('bookshelf-total-entities', this.setBookshelfTotalEntities)
   }
 }
 </script>
@@ -131,4 +382,4 @@ export default {
 #toolbar {
   box-shadow: 0px 8px 6px #111111aa;
 }
-</style>
+</style>

client/components/app/ConfigSideNav.vue

@@ -1,39 +1,128 @@
 <template>
-  <div class="w-44 fixed left-0 top-16 z-40 h-full bg-bg bg-opacity-70 shadow-lg border-r border-white border-opacity-5 py-4">
-    <nuxt-link to="/config" class="w-full px-4 h-12 border-b border-opacity-0 flex items-center cursor-pointer relative" :class="routeName === 'config' ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
-      <p>Settings</p>
-      <div v-show="routeName === 'config'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
-    <nuxt-link to="/config/libraries" class="w-full px-4 h-12 border-b border-opacity-0 flex items-center cursor-pointer relative" :class="routeName === 'config-libraries' ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
-      <p>Libraries</p>
-      <div v-show="routeName === 'config-libraries'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
-    <nuxt-link to="/config/users" class="w-full px-4 h-12 border-b border-opacity-0 flex items-center cursor-pointer relative" :class="routeName === 'config-users' ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
-      <p>Users</p>
-      <div v-show="routeName === 'config-users'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
-    <nuxt-link to="/config/backups" class="w-full px-4 h-12 border-b border-opacity-0 flex items-center cursor-pointer relative" :class="routeName === 'config-backups' ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
-      <p>Backups</p>
-      <div v-show="routeName === 'config-backups'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link>
-    <nuxt-link to="/config/log" class="w-full px-4 h-12 border-b border-opacity-0 flex items-center cursor-pointer relative" :class="routeName === 'config-log' ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
-      <p>Log</p>
-      <div v-show="routeName === 'config-log'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+  <div class="w-44 fixed left-0 top-16 h-full bg-bg bg-opacity-100 md:bg-opacity-70 shadow-lg border-r border-white border-opacity-5 py-3 transform transition-transform" :class="wrapperClass" v-click-outside="clickOutside">
+    <div class="md:hidden flex items-center justify-end pb-2 px-4 mb-1" @click="closeDrawer">
+      <span class="material-icons text-2xl">arrow_back</span>
+    </div>
+
+    <nuxt-link v-for="route in configRoutes" :key="route.id" :to="route.path" class="w-full px-4 h-12 border-b border-primary border-opacity-30 flex items-center cursor-pointer relative" :class="routeName === route.id ? 'bg-primary bg-opacity-70' : 'hover:bg-primary hover:bg-opacity-30'">
+      <p>{{ route.title }}</p>
+      <div v-show="routeName === route.iod" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
-    <div class="w-full h-12 px-4 border-t border-black border-opacity-20 absolute bottom-20 left-0 flex flex-col justify-center">
-      <p class="font-mono text-sm">v{{ $config.version }}</p>
-      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-sm">Update available: {{ latestVersion }}</a>
+    <div class="w-full h-12 px-4 border-t border-black border-opacity-20 absolute left-0 flex flex-col justify-center" :style="{ bottom: streamLibraryItem && isMobileLandscape ? '300px' : '65px' }">
+      <div class="flex justify-between">
+        <p class="underline font-mono text-sm" @click="clickChangelog">v{{ $config.version }}</p>
+
+        <p class="font-mono text-xs text-gray-300 italic">{{ Source }}</p>
+      </div>
+      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xs">Latest: {{ latestVersion }}</a>
     </div>
+
+    <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version" />
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    isOpen: Boolean
+  },
   data() {
-    return {}
+    return {
+      showChangelogModal: false
+    }
   },
   computed: {
+    Source() {
+      return this.$store.state.Source
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    configRoutes() {
+      if (!this.userIsAdminOrUp) {
+        return [
+          {
+            id: 'config-stats',
+            title: this.$strings.HeaderYourStats,
+            path: '/config/stats'
+          }
+        ]
+      }
+      const configRoutes = [
+        {
+          id: 'config',
+          title: this.$strings.HeaderSettings,
+          path: '/config'
+        },
+        {
+          id: 'config-libraries',
+          title: this.$strings.HeaderLibraries,
+          path: '/config/libraries'
+        },
+        {
+          id: 'config-users',
+          title: this.$strings.HeaderUsers,
+          path: '/config/users'
+        },
+        {
+          id: 'config-sessions',
+          title: this.$strings.HeaderListeningSessions,
+          path: '/config/sessions'
+        },
+        {
+          id: 'config-backups',
+          title: this.$strings.HeaderBackups,
+          path: '/config/backups'
+        },
+        {
+          id: 'config-log',
+          title: this.$strings.HeaderLogs,
+          path: '/config/log'
+        },
+        {
+          id: 'config-notifications',
+          title: this.$strings.HeaderNotifications,
+          path: '/config/notifications'
+        }
+      ]
+
+      if (this.currentLibraryId) {
+        configRoutes.push({
+          id: 'config-library-stats',
+          title: this.$strings.HeaderLibraryStats,
+          path: '/config/library-stats'
+        })
+        configRoutes.push({
+          id: 'config-stats',
+          title: this.$strings.HeaderYourStats,
+          path: '/config/stats'
+        })
+      }
+
+      return configRoutes
+    },
+    wrapperClass() {
+      var classes = []
+      if (this.drawerOpen) classes.push('translate-x-0')
+      else classes.push('-translate-x-44')
+      if (this.isMobile) classes.push('z-50')
+      else classes.push('z-40')
+      return classes.join(' ')
+    },
+    isMobile() {
+      return this.$store.state.globals.isMobile
+    },
+    isMobileLandscape() {
+      return this.$store.state.globals.isMobileLandscape
+    },
+    drawerOpen() {
+      if (this.isMobile) return this.isOpen
+      return true
+    },
     routeName() {
       return this.$route.name
     },
@@ -48,9 +137,25 @@ export default {
     },
     githubTagUrl() {
       return this.versionData.githubTagUrl
+    },
+    currentVersionChangelog() {
+      return this.versionData.currentVersionChangelog || 'No Changelog Available'
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
     }
   },
-  methods: {},
-  mounted() {}
+  methods: {
+    clickChangelog() {
+      this.showChangelogModal = true
+    },
+    clickOutside() {
+      if (!this.isOpen) return
+      this.closeDrawer()
+    },
+    closeDrawer() {
+      this.$emit('update:isOpen', false)
+    }
+  }
 }
 </script>

client/components/app/LazyBookshelf.vue

@@ -0,0 +1,765 @@
+<template>
+  <div id="bookshelf" class="w-full overflow-y-auto">
+    <template v-for="shelf in totalShelves">
+      <div :key="shelf" :id="`shelf-${shelf - 1}`" class="w-full px-4 sm:px-8 relative" :class="{ bookshelfRow: !isAlternativeBookshelfView }" :style="{ height: shelfHeight + 'px' }">
+        <div v-if="!isAlternativeBookshelfView" class="bookshelfDivider w-full absolute bottom-0 left-0 right-0 z-20" :class="`h-${shelfDividerHeightIndex}`" />
+      </div>
+    </template>
+
+    <div v-if="initialized && !totalShelves && !hasFilter && entityName === 'books'" class="w-full flex flex-col items-center justify-center py-12">
+      <p class="text-center text-2xl font-book mb-4 py-4">{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}</p>
+      <div v-if="userIsAdminOrUp" class="flex">
+        <ui-btn to="/config" color="primary" class="w-52 mr-2">{{ $strings.ButtonConfigureScanner }}</ui-btn>
+        <ui-btn color="success" class="w-52" @click="scan">{{ $strings.ButtonScanLibrary }}</ui-btn>
+      </div>
+    </div>
+    <div v-else-if="!totalShelves && initialized" class="w-full py-16">
+      <p class="text-xl text-center">{{ emptyMessage }}</p>
+      <!-- Clear filter only available on Library bookshelf -->
+      <div v-if="entityName === 'books'" class="flex justify-center mt-2">
+        <ui-btn v-if="hasFilter" color="primary" @click="clearFilter">{{ $strings.ButtonClearFilter }}</ui-btn>
+      </div>
+    </div>
+
+    <widgets-cover-size-widget class="fixed bottom-4 right-4 z-30" />
+  </div>
+</template>
+
+<script>
+import bookshelfCardsHelpers from '@/mixins/bookshelfCardsHelpers'
+
+export default {
+  props: {
+    page: String,
+    seriesId: String
+  },
+  mixins: [bookshelfCardsHelpers],
+  data() {
+    return {
+      routeFullPath: null,
+      initialized: false,
+      bookshelfHeight: 0,
+      bookshelfWidth: 0,
+      shelvesPerPage: 0,
+      entitiesPerShelf: 8,
+      currentPage: 0,
+      totalEntities: 0,
+      entities: [],
+      pagesLoaded: {},
+      entityIndexesMounted: [],
+      entityComponentRefs: {},
+      currentBookWidth: 0,
+      pageLoadQueue: [],
+      isFetchingEntities: false,
+      scrollTimeout: null,
+      booksPerFetch: 100,
+      totalShelves: 0,
+      bookshelfMarginLeft: 0,
+      isSelectionMode: false,
+      currentSFQueryString: null,
+      pendingReset: false,
+      keywordFilter: null,
+      currScrollTop: 0,
+      resizeTimeout: null,
+      mountWindowWidth: 0,
+      lastItemIndexSelected: -1
+    }
+  },
+  watch: {
+    '$route.query.filter'() {
+      if (this.$route.query.filter && this.$route.query.filter !== this.filterBy) {
+        this.$store.dispatch('user/updateUserSettings', { filterBy: this.$route.query.filter })
+      } else if (!this.$route.query.filter && this.filterBy) {
+        this.$store.dispatch('user/updateUserSettings', { filterBy: 'all' })
+      }
+    }
+  },
+  computed: {
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+    },
+    emptyMessage() {
+      if (this.page === 'series') return this.$strings.MessageBookshelfNoSeries
+      if (this.page === 'collections') return this.$strings.MessageBookshelfNoCollections
+      if (this.page === 'playlists') return this.$strings.MessageNoUserPlaylists
+      if (this.hasFilter) {
+        if (this.filterName === 'Issues') return this.$strings.MessageNoIssues
+        else if (this.filterName === 'Feed-open') return this.$strings.MessageBookshelfNoRSSFeeds
+        return this.$getString('MessageBookshelfNoResultsForFilter', [this.filterName, this.filterValue])
+      }
+      return this.$strings.MessageNoResults
+    },
+    entityName() {
+      if (!this.page) return 'books'
+      return this.page
+    },
+    seriesSortBy() {
+      return this.$store.state.libraries.seriesSortBy
+    },
+    seriesSortDesc() {
+      return this.$store.state.libraries.seriesSortDesc
+    },
+    seriesFilterBy() {
+      return this.$store.state.libraries.seriesFilterBy
+    },
+    orderBy() {
+      return this.$store.getters['user/getUserSetting']('orderBy')
+    },
+    orderDesc() {
+      return this.$store.getters['user/getUserSetting']('orderDesc')
+    },
+    filterBy() {
+      return this.$store.getters['user/getUserSetting']('filterBy')
+    },
+    collapseSeries() {
+      return this.$store.getters['user/getUserSetting']('collapseSeries')
+    },
+    collapseBookSeries() {
+      return this.$store.getters['user/getUserSetting']('collapseBookSeries')
+    },
+    coverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    sortingIgnorePrefix() {
+      return this.$store.getters['getServerSetting']('sortingIgnorePrefix')
+    },
+    isCoverSquareAspectRatio() {
+      return this.coverAspectRatio == 1
+    },
+    bookshelfView() {
+      return this.$store.getters['getBookshelfView']
+    },
+    isAlternativeBookshelfView() {
+      return this.bookshelfView === this.$constants.BookshelfView.DETAIL
+    },
+    hasFilter() {
+      return this.filterBy && this.filterBy !== 'all'
+    },
+    filterName() {
+      if (!this.filterBy) return ''
+      var filter = this.filterBy.split('.')[0]
+      filter = filter.substr(0, 1).toUpperCase() + filter.substr(1)
+      return filter
+    },
+    filterValue() {
+      if (!this.filterBy) return ''
+      if (!this.filterBy.includes('.')) return ''
+      return this.$decode(this.filterBy.split('.')[1])
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    libraryName() {
+      return this.$store.getters['libraries/getCurrentLibraryName']
+    },
+    isEntityBook() {
+      return this.entityName === 'series-books' || this.entityName === 'books'
+    },
+    bookWidth() {
+      var coverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
+      if (this.isCoverSquareAspectRatio) return coverSize * 1.6
+      return coverSize
+    },
+    bookHeight() {
+      if (this.isCoverSquareAspectRatio || this.entityName === 'playlists') return this.bookWidth
+      return this.bookWidth * 1.6
+    },
+    shelfPadding() {
+      if (this.bookshelfWidth < 640) return 32
+      return 64
+    },
+    totalPadding() {
+      return this.shelfPadding * 2
+    },
+    entityWidth() {
+      if (this.entityName === 'series' || this.entityName === 'collections') {
+        if (this.bookWidth * 2 > this.bookshelfWidth - this.shelfPadding) return this.bookWidth * 1.6
+        return this.bookWidth * 2
+      }
+      return this.bookWidth
+    },
+    entityHeight() {
+      return this.bookHeight
+    },
+    shelfDividerHeightIndex() {
+      return 6
+    },
+    shelfHeight() {
+      if (this.isAlternativeBookshelfView) {
+        var extraTitleSpace = this.isEntityBook ? 80 : 40
+        return this.entityHeight + extraTitleSpace * this.sizeMultiplier
+      }
+      return this.entityHeight + 40
+    },
+    totalEntityCardWidth() {
+      // Includes margin
+      return this.entityWidth + 24
+    },
+    selectedLibraryItems() {
+      return this.$store.state.selectedLibraryItems || []
+    },
+    sizeMultiplier() {
+      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
+      return this.entityWidth / baseSize
+    }
+  },
+  methods: {
+    clearFilter() {
+      this.$store.dispatch('user/updateUserSettings', { filterBy: 'all' })
+    },
+    editEntity(entity) {
+      if (this.entityName === 'books' || this.entityName === 'series-books') {
+        var bookIds = this.entities.map((e) => e.id)
+        this.$store.commit('setBookshelfBookIds', bookIds)
+        this.$store.commit('showEditModal', entity)
+      } else if (this.entityName === 'collections') {
+        this.$store.commit('globals/setEditCollection', entity)
+      } else if (this.entityName === 'playlists') {
+        this.$store.commit('globals/setEditPlaylist', entity)
+      }
+    },
+    clearSelectedEntities() {
+      this.updateBookSelectionMode(false)
+      this.isSelectionMode = false
+    },
+    selectEntity(entity, shiftKey) {
+      if (this.entityName === 'books' || this.entityName === 'series-books') {
+        var indexOf = this.entities.findIndex((ent) => ent && ent.id === entity.id)
+        const lastLastItemIndexSelected = this.lastItemIndexSelected
+        if (!this.selectedLibraryItems.includes(entity.id)) {
+          this.lastItemIndexSelected = indexOf
+        } else {
+          this.lastItemIndexSelected = -1
+        }
+
+        if (shiftKey && lastLastItemIndexSelected >= 0) {
+          var loopStart = indexOf
+          var loopEnd = lastLastItemIndexSelected
+          if (indexOf > lastLastItemIndexSelected) {
+            loopStart = lastLastItemIndexSelected
+            loopEnd = indexOf
+          }
+
+          var isSelecting = false
+          // If any items in this range is not selected then select all otherwise unselect all
+          for (let i = loopStart; i <= loopEnd; i++) {
+            const thisEntity = this.entities[i]
+            if (thisEntity && !thisEntity.collapsedSeries) {
+              if (!this.selectedLibraryItems.includes(thisEntity.id)) {
+                isSelecting = true
+                break
+              }
+            }
+          }
+          if (isSelecting) this.lastItemIndexSelected = indexOf
+
+          for (let i = loopStart; i <= loopEnd; i++) {
+            const thisEntity = this.entities[i]
+            if (thisEntity.collapsedSeries) {
+              console.warn('Ignoring collapsed series')
+              continue
+            }
+
+            const entityComponentRef = this.entityComponentRefs[i]
+            if (thisEntity && entityComponentRef) {
+              entityComponentRef.selected = isSelecting
+              this.$store.commit('setLibraryItemSelected', { libraryItemId: thisEntity.id, selected: isSelecting })
+            } else {
+              console.error('Invalid entity index', i)
+            }
+          }
+        } else {
+          this.$store.commit('toggleLibraryItemSelected', entity.id)
+        }
+
+        var newIsSelectionMode = !!this.selectedLibraryItems.length
+        if (this.isSelectionMode !== newIsSelectionMode) {
+          this.isSelectionMode = newIsSelectionMode
+          this.updateBookSelectionMode(newIsSelectionMode)
+        }
+      }
+    },
+    updateBookSelectionMode(isSelectionMode) {
+      for (const key in this.entityComponentRefs) {
+        if (this.entityIndexesMounted.includes(Number(key))) {
+          this.entityComponentRefs[key].setSelectionMode(isSelectionMode)
+        }
+      }
+      if (!isSelectionMode) {
+        this.lastItemIndexSelected = -1
+      }
+    },
+    async fetchEntites(page = 0) {
+      var startIndex = page * this.booksPerFetch
+
+      this.isFetchingEntities = true
+
+      if (!this.initialized) {
+        this.currentSFQueryString = this.buildSearchParams()
+      }
+
+      const entityPath = this.entityName === 'books' || this.entityName === 'series-books' ? 'items' : this.entityName
+      const sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
+      const fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1`
+
+      const payload = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/${entityPath}${fullQueryString}`).catch((error) => {
+        console.error('failed to fetch books', error)
+        return null
+      })
+
+      this.isFetchingEntities = false
+      if (this.pendingReset) {
+        this.pendingReset = false
+        this.resetEntities()
+        return
+      }
+      if (payload) {
+        if (!this.initialized) {
+          this.initialized = true
+          this.totalEntities = payload.total
+          this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
+          this.entities = new Array(this.totalEntities)
+        }
+
+        for (let i = 0; i < payload.results.length; i++) {
+          var index = i + startIndex
+          this.entities[index] = payload.results[i]
+          if (this.entityComponentRefs[index]) {
+            this.entityComponentRefs[index].setEntity(this.entities[index])
+          }
+        }
+
+        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+      }
+    },
+    loadPage(page) {
+      this.pagesLoaded[page] = true
+      this.fetchEntites(page)
+    },
+    showHideBookPlaceholder(index, show) {
+      var el = document.getElementById(`book-${index}-placeholder`)
+      if (el) el.style.display = show ? 'flex' : 'none'
+    },
+    mountEntites(fromIndex, toIndex) {
+      for (let i = fromIndex; i < toIndex; i++) {
+        if (!this.entityIndexesMounted.includes(i)) {
+          this.cardsHelpers.mountEntityCard(i)
+        }
+      }
+    },
+    handleScroll(scrollTop) {
+      this.currScrollTop = scrollTop
+      var firstShelfIndex = Math.floor(scrollTop / this.shelfHeight)
+      var lastShelfIndex = Math.ceil((scrollTop + this.bookshelfHeight) / this.shelfHeight)
+      lastShelfIndex = Math.min(this.totalShelves - 1, lastShelfIndex)
+
+      var firstBookIndex = firstShelfIndex * this.entitiesPerShelf
+      var lastBookIndex = lastShelfIndex * this.entitiesPerShelf + this.entitiesPerShelf
+      lastBookIndex = Math.min(this.totalEntities, lastBookIndex)
+
+      var firstBookPage = Math.floor(firstBookIndex / this.booksPerFetch)
+      var lastBookPage = Math.floor(lastBookIndex / this.booksPerFetch)
+      if (!this.pagesLoaded[firstBookPage]) {
+        // console.log('Must load next batch', firstBookPage, 'book index', firstBookIndex)
+        this.loadPage(firstBookPage)
+      }
+      if (!this.pagesLoaded[lastBookPage]) {
+        // console.log('Must load last next batch', lastBookPage, 'book index', lastBookIndex)
+        this.loadPage(lastBookPage)
+      }
+
+      this.entityIndexesMounted = this.entityIndexesMounted.filter((_index) => {
+        if (_index < firstBookIndex || _index >= lastBookIndex) {
+          var el = document.getElementById(`book-card-${_index}`)
+          if (el) el.remove()
+          return false
+        }
+        return true
+      })
+      this.mountEntites(firstBookIndex, lastBookIndex)
+    },
+    async resetEntities() {
+      if (this.isFetchingEntities) {
+        this.pendingReset = true
+        return
+      }
+      this.destroyEntityComponents()
+      this.entityIndexesMounted = []
+      this.entityComponentRefs = {}
+      this.pagesLoaded = {}
+      this.entities = []
+      this.totalShelves = 0
+      this.totalEntities = 0
+      this.currentPage = 0
+      this.isSelectionMode = false
+      this.initialized = false
+
+      this.initSizeData()
+      this.pagesLoaded[0] = true
+      await this.fetchEntites(0)
+      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+      this.mountEntites(0, lastBookIndex)
+    },
+    remountEntities() {
+      for (const key in this.entityComponentRefs) {
+        if (this.entityComponentRefs[key]) {
+          this.entityComponentRefs[key].destroy()
+        }
+      }
+      this.entityComponentRefs = {}
+      this.entityIndexesMounted.forEach((i) => {
+        this.cardsHelpers.mountEntityCard(i)
+      })
+    },
+    rebuild() {
+      this.initSizeData()
+
+      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+      this.entityIndexesMounted = []
+      for (let i = 0; i < lastBookIndex; i++) {
+        this.entityIndexesMounted.push(i)
+      }
+      var bookshelfEl = document.getElementById('bookshelf')
+      if (bookshelfEl) {
+        bookshelfEl.scrollTop = 0
+      }
+
+      this.$nextTick(this.remountEntities)
+    },
+    buildSearchParams() {
+      if (this.page === 'search' || this.page === 'collections') {
+        return ''
+      }
+
+      let searchParams = new URLSearchParams()
+      if (this.page === 'series') {
+        searchParams.set('sort', this.seriesSortBy)
+        searchParams.set('desc', this.seriesSortDesc ? 1 : 0)
+        searchParams.set('filter', this.seriesFilterBy)
+      } else if (this.page === 'series-books') {
+        searchParams.set('filter', `series.${this.$encode(this.seriesId)}`)
+        if (this.collapseBookSeries) {
+          searchParams.set('collapseseries', 1)
+        }
+      } else {
+        if (this.filterBy && this.filterBy !== 'all') {
+          searchParams.set('filter', this.filterBy)
+        }
+        if (this.orderBy) {
+          searchParams.set('sort', this.orderBy)
+          searchParams.set('desc', this.orderDesc ? 1 : 0)
+        }
+        if (this.collapseSeries && !this.isPodcast) {
+          searchParams.set('collapseseries', 1)
+        }
+      }
+      return searchParams.toString()
+    },
+    checkUpdateSearchParams() {
+      var newSearchParams = this.buildSearchParams()
+      var currentQueryString = window.location.search
+      if (currentQueryString && currentQueryString.startsWith('?')) currentQueryString = currentQueryString.slice(1)
+
+      if (newSearchParams === '') {
+        return false
+      }
+      if (newSearchParams !== this.currentSFQueryString || newSearchParams !== currentQueryString) {
+        let newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + newSearchParams
+        window.history.replaceState({ path: newurl }, '', newurl)
+
+        this.routeFullPath = window.location.pathname + (window.location.search || '') // Update for saving scroll position
+        return true
+      }
+
+      return false
+    },
+    seriesSortUpdated() {
+      var wasUpdated = this.checkUpdateSearchParams()
+      if (wasUpdated) {
+        this.resetEntities()
+      }
+    },
+    settingsUpdated(settings) {
+      var wasUpdated = this.checkUpdateSearchParams()
+      if (wasUpdated) {
+        this.resetEntities()
+      } else if (settings.bookshelfCoverSize !== this.currentBookWidth) {
+        this.executeRebuild()
+      }
+    },
+    scroll(e) {
+      if (!e || !e.target) return
+      var { scrollTop } = e.target
+      this.handleScroll(scrollTop)
+    },
+    libraryItemAdded(libraryItem) {
+      console.log('libraryItem added', libraryItem)
+      // TODO: Check if audiobook would be on this shelf
+      this.resetEntities()
+    },
+    libraryItemUpdated(libraryItem) {
+      console.log('Item updated', libraryItem)
+      if (this.entityName === 'books' || this.entityName === 'series-books') {
+        var indexOf = this.entities.findIndex((ent) => ent && ent.id === libraryItem.id)
+        if (indexOf >= 0) {
+          this.entities[indexOf] = libraryItem
+          if (this.entityComponentRefs[indexOf]) {
+            this.entityComponentRefs[indexOf].setEntity(libraryItem)
+          }
+        }
+      }
+    },
+    libraryItemRemoved(libraryItem) {
+      if (this.entityName === 'books' || this.entityName === 'series-books') {
+        var indexOf = this.entities.findIndex((ent) => ent && ent.id === libraryItem.id)
+        if (indexOf >= 0) {
+          this.entities = this.entities.filter((ent) => ent.id !== libraryItem.id)
+          this.totalEntities--
+          this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+          this.executeRebuild()
+        }
+      }
+    },
+    libraryItemsAdded(libraryItems) {
+      console.log('items added', libraryItems)
+      // TODO: Check if audiobook would be on this shelf
+      this.resetEntities()
+    },
+    libraryItemsUpdated(libraryItems) {
+      libraryItems.forEach((ab) => {
+        this.libraryItemUpdated(ab)
+      })
+    },
+    collectionAdded(collection) {
+      if (this.entityName !== 'collections') return
+      console.log(`[LazyBookshelf] collectionAdded ${collection.id}`, collection)
+      this.resetEntities()
+    },
+    collectionUpdated(collection) {
+      if (this.entityName !== 'collections') return
+      console.log(`[LazyBookshelf] collectionUpdated ${collection.id}`, collection)
+      var indexOf = this.entities.findIndex((ent) => ent && ent.id === collection.id)
+      if (indexOf >= 0) {
+        this.entities[indexOf] = collection
+        if (this.entityComponentRefs[indexOf]) {
+          this.entityComponentRefs[indexOf].setEntity(collection)
+        }
+      }
+    },
+    collectionRemoved(collection) {
+      if (this.entityName !== 'collections') return
+      console.log(`[LazyBookshelf] collectionRemoved ${collection.id}`, collection)
+      var indexOf = this.entities.findIndex((ent) => ent && ent.id === collection.id)
+      if (indexOf >= 0) {
+        this.entities = this.entities.filter((ent) => ent.id !== collection.id)
+        this.totalEntities--
+        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+        this.executeRebuild()
+      }
+    },
+    playlistAdded(playlist) {
+      if (this.entityName !== 'playlists') return
+      console.log(`[LazyBookshelf] playlistAdded ${playlist.id}`, playlist)
+      this.resetEntities()
+    },
+    playlistUpdated(playlist) {
+      if (this.entityName !== 'playlists') return
+      console.log(`[LazyBookshelf] playlistUpdated ${playlist.id}`, playlist)
+      var indexOf = this.entities.findIndex((ent) => ent && ent.id === playlist.id)
+      if (indexOf >= 0) {
+        this.entities[indexOf] = playlist
+        if (this.entityComponentRefs[indexOf]) {
+          this.entityComponentRefs[indexOf].setEntity(playlist)
+        }
+      }
+    },
+    playlistRemoved(playlist) {
+      if (this.entityName !== 'playlists') return
+      console.log(`[LazyBookshelf] playlistRemoved ${playlist.id}`, playlist)
+      var indexOf = this.entities.findIndex((ent) => ent && ent.id === playlist.id)
+      if (indexOf >= 0) {
+        this.entities = this.entities.filter((ent) => ent.id !== playlist.id)
+        this.totalEntities--
+        this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
+        this.executeRebuild()
+      }
+    },
+    initSizeData(_bookshelf) {
+      var bookshelf = _bookshelf || document.getElementById('bookshelf')
+      if (!bookshelf) {
+        console.error('Failed to init size data')
+        return
+      }
+      var entitiesPerShelfBefore = this.entitiesPerShelf
+
+      var { clientHeight, clientWidth } = bookshelf
+      // console.log('Init bookshelf width', clientWidth, 'window width', window.innerWidth)
+      this.mountWindowWidth = window.innerWidth
+      this.bookshelfHeight = clientHeight
+      this.bookshelfWidth = clientWidth
+      this.entitiesPerShelf = Math.max(1, Math.floor((this.bookshelfWidth - this.shelfPadding) / this.totalEntityCardWidth))
+      this.shelvesPerPage = Math.ceil(this.bookshelfHeight / this.shelfHeight) + 2
+      this.bookshelfMarginLeft = (this.bookshelfWidth - this.entitiesPerShelf * this.totalEntityCardWidth) / 2
+
+      this.currentBookWidth = this.bookWidth
+      if (this.totalEntities) {
+        this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
+      }
+      return entitiesPerShelfBefore < this.entitiesPerShelf // Books per shelf has changed
+    },
+    async init(bookshelf) {
+      this.checkUpdateSearchParams()
+      this.initSizeData(bookshelf)
+
+      this.pagesLoaded[0] = true
+      await this.fetchEntites(0)
+      var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
+      this.mountEntites(0, lastBookIndex)
+
+      // Set last scroll position for this bookshelf page
+      if (this.$store.state.lastBookshelfScrollData[this.page] && window.bookshelf) {
+        const { path, scrollTop } = this.$store.state.lastBookshelfScrollData[this.page]
+        if (path === this.routeFullPath) {
+          // Exact path match with query so use scroll position
+          window.bookshelf.scrollTop = scrollTop
+        }
+      }
+    },
+    executeRebuild() {
+      clearTimeout(this.resizeTimeout)
+      this.resizeTimeout = setTimeout(() => {
+        this.rebuild()
+      }, 200)
+    },
+    windowResize() {
+      this.executeRebuild()
+    },
+    socketInit() {
+      // Server settings are set on socket init
+      this.executeRebuild()
+    },
+    initListeners() {
+      window.addEventListener('resize', this.windowResize)
+
+      this.$nextTick(() => {
+        var bookshelf = document.getElementById('bookshelf')
+        if (bookshelf) {
+          this.init(bookshelf)
+          bookshelf.addEventListener('scroll', this.scroll)
+        }
+      })
+
+      this.$eventBus.$on('series-sort-updated', this.seriesSortUpdated)
+      this.$eventBus.$on('bookshelf_clear_selection', this.clearSelectedEntities)
+      this.$eventBus.$on('socket_init', this.socketInit)
+
+      this.$store.commit('user/addSettingsListener', { id: 'lazy-bookshelf', meth: this.settingsUpdated })
+
+      if (this.$root.socket) {
+        this.$root.socket.on('item_updated', this.libraryItemUpdated)
+        this.$root.socket.on('item_added', this.libraryItemAdded)
+        this.$root.socket.on('item_removed', this.libraryItemRemoved)
+        this.$root.socket.on('items_updated', this.libraryItemsUpdated)
+        this.$root.socket.on('items_added', this.libraryItemsAdded)
+        this.$root.socket.on('collection_added', this.collectionAdded)
+        this.$root.socket.on('collection_updated', this.collectionUpdated)
+        this.$root.socket.on('collection_removed', this.collectionRemoved)
+        this.$root.socket.on('playlist_added', this.playlistAdded)
+        this.$root.socket.on('playlist_updated', this.playlistUpdated)
+        this.$root.socket.on('playlist_removed', this.playlistRemoved)
+      } else {
+        console.error('Bookshelf - Socket not initialized')
+      }
+    },
+    removeListeners() {
+      window.removeEventListener('resize', this.windowResize)
+      var bookshelf = document.getElementById('bookshelf')
+      if (bookshelf) {
+        bookshelf.removeEventListener('scroll', this.scroll)
+      }
+
+      this.$eventBus.$off('series-sort-updated', this.seriesSortUpdated)
+      this.$eventBus.$off('bookshelf_clear_selection', this.clearSelectedEntities)
+      this.$eventBus.$off('socket_init', this.socketInit)
+
+      this.$store.commit('user/removeSettingsListener', 'lazy-bookshelf')
+
+      if (this.$root.socket) {
+        this.$root.socket.off('item_updated', this.libraryItemUpdated)
+        this.$root.socket.off('item_added', this.libraryItemAdded)
+        this.$root.socket.off('item_removed', this.libraryItemRemoved)
+        this.$root.socket.off('items_updated', this.libraryItemsUpdated)
+        this.$root.socket.off('items_added', this.libraryItemsAdded)
+        this.$root.socket.off('collection_added', this.collectionAdded)
+        this.$root.socket.off('collection_updated', this.collectionUpdated)
+        this.$root.socket.off('collection_removed', this.collectionRemoved)
+        this.$root.socket.off('playlist_added', this.playlistAdded)
+        this.$root.socket.off('playlist_updated', this.playlistUpdated)
+        this.$root.socket.off('playlist_removed', this.playlistRemoved)
+      } else {
+        console.error('Bookshelf - Socket not initialized')
+      }
+    },
+    destroyEntityComponents() {
+      for (const key in this.entityComponentRefs) {
+        if (this.entityComponentRefs[key] && this.entityComponentRefs[key].destroy) {
+          this.entityComponentRefs[key].destroy()
+        }
+      }
+    },
+    scan() {
+      this.$store
+        .dispatch('libraries/requestLibraryScan', { libraryId: this.currentLibraryId })
+        .then(() => {
+          this.$toast.success('Library scan started')
+        })
+        .catch((error) => {
+          console.error('Failed to start scan', error)
+          this.$toast.error('Failed to start scan')
+        })
+    }
+  },
+  mounted() {
+    this.initListeners()
+
+    this.routeFullPath = window.location.pathname + (window.location.search || '')
+  },
+  updated() {
+    this.routeFullPath = window.location.pathname + (window.location.search || '')
+
+    setTimeout(() => {
+      if (window.innerWidth > 0 && window.innerWidth !== this.mountWindowWidth) {
+        console.log('Updated window width', window.innerWidth, 'from', this.mountWindowWidth)
+        this.executeRebuild()
+      }
+    }, 50)
+  },
+  beforeDestroy() {
+    this.destroyEntityComponents()
+    this.removeListeners()
+
+    // Set bookshelf scroll position for specific bookshelf page and query
+    if (window.bookshelf) {
+      this.$store.commit('setLastBookshelfScrollData', { scrollTop: window.bookshelf.scrollTop || 0, path: this.routeFullPath, name: this.page })
+    }
+  }
+}
+</script>
+
+<style>
+.bookshelfRow {
+  background-image: var(--bookshelf-texture-img);
+}
+
+.bookshelfDivider {
+  background: rgb(149, 119, 90);
+  background: var(--bookshelf-divider-bg);
+  box-shadow: 2px 14px 8px #111111aa;
+}
+</style>

client/components/app/SettingsContent.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
+    <div class="flex items-center mb-2">
+      <h1 class="text-xl">{{ headerText }}</h1>
+
+      <div v-if="showAddButton" class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clicked">
+        <span class="material-icons" style="font-size: 1.4rem">add</span>
+      </div>
+    </div>
+
+    <p v-if="description" id="settings-description" class="mb-6 text-gray-200" v-html="description" />
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headerText: String,
+    description: String,
+    note: String,
+    showAddButton: Boolean
+  },
+  methods: {
+    clicked() {
+      this.$emit('clicked')
+    }
+  }
+}
+</script>
+
+<style>
+#settings-description a {
+  color: rgb(96 165 250);
+}
+#settings-description a:hover {
+  color: rgb(147 197 253);
+  text-decoration-line: underline;
+}
+#settings-description code {
+  font-size: 0.875rem;
+  border-radius: 6px;
+  background-color: rgb(82, 82, 82);
+  color: white;
+  padding: 2px 4px;
+}
+</style>

client/components/app/SideRail.vue

@@ -1,111 +1,199 @@
 <template>
-  <div class="w-20 bg-bg h-full relative box-shadow-side z-30" style="min-width: 80px">
-    <div class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
+  <!-- <div class="w-20 bg-bg h-full relative box-shadow-side z-40" style="min-width: 80px"> -->
+  <div class="w-20 bg-bg h-full fixed left-0 box-shadow-side z-40" style="min-width: 80px" :style="{ top: offsetTop + 'px' }">
+    <!-- ugly little workaround to cover up the shadow overlapping the bookshelf toolbar -->
+    <div v-if="isShowingBookshelfToolbar" class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
+
     <nuxt-link :to="`/library/${currentLibraryId}`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
       </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 1rem">Home</p>
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonHome }}</p>
 
       <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
+    <nuxt-link v-if="isPodcastLibrary" :to="`/library/${currentLibraryId}/podcast/latest`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastLatestPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons text-2xl">format_list_bulleted</span>
+
+      <p class="font-book pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLatest }}</p>
+
+      <div v-show="isPodcastLatestPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
     <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
       </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 1rem">Library</p>
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonLibrary }}</p>
 
       <div v-show="showLibrary" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
-    <nuxt-link :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'series' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+    <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/series`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isSeriesPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
       </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 1rem">Series</p>
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSeries }}</p>
 
-      <div v-show="paramId === 'series'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      <div v-show="isSeriesPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
+    <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/bookshelf/collections`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons-outlined text-2xl">collections_bookmark</span>
+
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonCollections }}</p>
+
+      <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
+    <nuxt-link v-if="!isPodcastLibrary" :to="`/library/${currentLibraryId}/authors`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isAuthorsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg class="w-6 h-6" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"
+        />
+      </svg>
+
+      <p class="font-book pt-1 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonAuthors }}</p>
+
+      <div v-show="isAuthorsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
+    <nuxt-link v-if="isPodcastLibrary && userIsAdminOrUp" :to="`/library/${currentLibraryId}/podcast/search`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPodcastSearchPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="abs-icons icon-podcast text-xl"></span>
+
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonSearch }}</p>
+
+      <div v-show="isPodcastSearchPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
+    <nuxt-link v-if="showPlaylists" :to="`/library/${currentLibraryId}/bookshelf/playlists`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="isPlaylistsPage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <span class="material-icons text-2.5xl">queue_music</span>
+
+      <p class="font-book pt-0.5 text-center leading-4" style="font-size: 0.9rem">{{ $strings.ButtonPlaylists }}</p>
+
+      <div v-show="isPlaylistsPage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
     </nuxt-link>
 
     <nuxt-link v-if="numIssues" :to="`/library/${currentLibraryId}/bookshelf?filter=issues`" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-opacity-40 cursor-pointer relative" :class="showingIssues ? 'bg-error bg-opacity-40' : ' bg-error bg-opacity-20'">
       <span class="material-icons text-2xl">warning</span>
 
-      <p class="font-book pt-1.5" style="font-size: 1rem">Issues</p>
+      <p class="font-book pt-1.5 text-center leading-4" style="font-size: 1rem">{{ $strings.ButtonIssues }}</p>
 
       <div v-show="showingIssues" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
       <div class="absolute top-1 right-1 w-4 h-4 rounded-full bg-white bg-opacity-30 flex items-center justify-center">
         <p class="text-xs font-mono pb-0.5">{{ numIssues }}</p>
       </div>
     </nuxt-link>
-    <!-- <nuxt-link to="/library/collections" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-      </svg>
 
-      <p class="font-book pt-1.5" style="font-size: 0.8rem">Collections</p>
+    <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="underline font-mono text-xs text-center text-gray-300 leading-3 mb-1" @click="clickChangelog">v{{ $config.version }}</p>
+      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xxs text-center block leading-3">Update</a>
+      <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
+    </div>
 
-      <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link> -->
-
-    <!-- <nuxt-link to="/library/tags" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'tags' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-      </svg>
-
-      <p class="font-book pt-1.5" style="font-size: 0.8rem">Tags</p>
-
-      <div v-show="paramId === 'tags'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link> -->
-
-    <!-- <nuxt-link to="/library/authors" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'authors' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
-      </svg>
-
-      <p class="font-book pt-1.5" style="font-size: 0.8rem">Authors</p>
-
-      <div v-show="paramId === 'authors'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link> -->
+    <modals-changelog-view-modal v-model="showChangelogModal" :changelog="currentVersionChangelog" :currentVersion="$config.version" />
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      showChangelogModal: false
+    }
   },
   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')
+    },
+    offsetTop() {
+      return 64
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
     paramId() {
       return this.$route.params ? this.$route.params.id || '' : ''
     },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
-    selectedClassName() {
-      return ''
+    currentLibraryMediaType() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType']
+    },
+    isPodcastLibrary() {
+      return this.currentLibraryMediaType === 'podcast'
+    },
+    isPodcastSearchPage() {
+      return this.$route.name === 'library-library-podcast-search'
+    },
+    isPodcastLatestPage() {
+      return this.$route.name === 'library-library-podcast-latest'
     },
     homePage() {
       return this.$route.name === 'library-library'
     },
+    isSeriesPage() {
+      return this.$route.name === 'library-library-series-id' || this.paramId === 'series'
+    },
+    isAuthorsPage() {
+      return this.$route.name === 'library-library-authors'
+    },
+    isPlaylistsPage() {
+      return this.paramId === 'playlists'
+    },
     libraryBookshelfPage() {
       return this.$route.name === 'library-library-bookshelf-id'
     },
     showLibrary() {
       return this.libraryBookshelfPage && this.paramId === '' && !this.showingIssues
     },
+    filterBy() {
+      return this.$store.getters['user/getUserSetting']('filterBy')
+    },
     showingIssues() {
       if (!this.$route.query) return false
       return this.libraryBookshelfPage && this.$route.query.filter === 'issues'
     },
     numIssues() {
-      return this.$store.getters['audiobooks/getAudiobooksWithIssues'].length
+      return this.$store.state.libraries.issues || 0
+    },
+    versionData() {
+      return this.$store.state.versionData || {}
+    },
+    hasUpdate() {
+      return !!this.versionData.hasUpdate
+    },
+    githubTagUrl() {
+      return this.versionData.githubTagUrl
+    },
+    currentVersionChangelog() {
+      return this.versionData.currentVersionChangelog || 'No Changelog Available'
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    showPlaylists() {
+      return this.$store.state.libraries.numUserPlaylists > 0
+    }
+  },
+  methods: {
+    clickChangelog() {
+      this.showChangelogModal = true
     }
   },
-  methods: {},
   mounted() {}
 }
 </script>

client/components/app/StreamContainer.vue

@@ -1,174 +1,352 @@
 <template>
-  <div v-if="streamAudiobook" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-40 z-40 bg-primary px-4 pb-4 pt-2">
-    <nuxt-link :to="`/audiobook/${streamAudiobook.id}`" class="absolute -top-16 left-4 cursor-pointer">
-      <cards-book-cover :audiobook="streamAudiobook" :width="88" />
+  <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">
+    <div id="videoDock" />
+    <nuxt-link v-if="!playerHandler.isVideo" :to="`/item/${streamLibraryItem.id}`" class="absolute left-1 sm:left-4 cursor-pointer" :style="{ top: bookCoverPosTop + 'px' }">
+      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="coverAspectRatio" />
     </nuxt-link>
-    <div class="flex items-center pl-24">
+    <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : 'pl-20 sm:pl-24'">
       <div>
-        <nuxt-link :to="`/audiobook/${streamAudiobook.id}`" class="hover:underline cursor-pointer text-lg">
-          {{ title }} <span v-if="stream && $isDev" class="text-xs text-gray-400">({{ stream.id }})</span>
+        <nuxt-link :to="`/item/${streamLibraryItem.id}`" class="hover:underline cursor-pointer text-sm 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 class="text-base hover:underline cursor-pointer pl-2" @click="filterByAuthor">{{ author }}</p>
+          <p v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</p>
+          <p v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base">
+            <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="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</p>
         </div>
 
         <div class="text-gray-400 flex items-center">
           <span class="material-icons text-xs">schedule</span>
-          <p class="font-mono text-sm pl-2 pb-px">{{ totalDurationPretty }}</p>
+          <p class="font-mono text-xs sm:text-sm pl-1 sm:pl-1.5 pb-px">{{ totalDurationPretty }}</p>
         </div>
       </div>
       <div class="flex-grow" />
-      <span v-if="stream" class="material-icons px-4 cursor-pointer" @click="cancelStream">close</span>
+      <ui-tooltip direction="top" :text="$strings.LabelClosePlayer">
+        <span class="material-icons sm:px-2 py-1 md:p-4 cursor-pointer text-xl sm:text-2xl" @click="closePlayer">close</span>
+      </ui-tooltip>
     </div>
+    <player-ui
+      ref="audioPlayer"
+      :chapters="chapters"
+      :paused="!isPlaying"
+      :loading="playerLoading"
+      :bookmarks="bookmarks"
+      :sleep-timer-set="sleepTimerSet"
+      :sleep-timer-remaining="sleepTimerRemaining"
+      :is-podcast="isPodcast"
+      @playPause="playPause"
+      @jumpForward="jumpForward"
+      @jumpBackward="jumpBackward"
+      @setVolume="setVolume"
+      @setPlaybackRate="setPlaybackRate"
+      @seek="seek"
+      @close="closePlayer"
+      @showBookmarks="showBookmarks"
+      @showSleepTimer="showSleepTimerModal = true"
+      @showPlayerQueueItems="showPlayerQueueItemsModal = true"
+    />
 
-    <audio-player ref="audioPlayer" :chapters="chapters" :loading="isLoading" :bookmarks="bookmarks" @close="cancelStream" @updateTime="updateTime" @loaded="(d) => (totalDuration = d)" @showBookmarks="showBookmarks" @hook:mounted="audioPlayerMounted" />
+    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :library-item-id="libraryItemId" @select="selectBookmark" />
 
-    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :audiobook-id="bookmarkAudiobookId" :current-time="bookmarkCurrentTime" @select="selectBookmark" @create="createBookmark" @update="updateBookmark" @delete="deleteBookmark" />
+    <modals-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-time="sleepTimerTime" :remaining="sleepTimerRemaining" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />
+
+    <modals-player-queue-items-modal v-model="showPlayerQueueItemsModal" :library-item-id="libraryItemId" />
   </div>
 </template>
 
 <script>
+import PlayerHandler from '@/players/PlayerHandler'
+
 export default {
   data() {
     return {
-      audioPlayerReady: false,
-      lastServerUpdateSentSeconds: 0,
-      stream: null,
+      playerHandler: new PlayerHandler(this),
       totalDuration: 0,
       showBookmarksModal: false,
       bookmarkCurrentTime: 0,
-      bookmarkAudiobookId: null
+      playerLoading: false,
+      isPlaying: false,
+      currentTime: 0,
+      showSleepTimerModal: false,
+      showPlayerQueueItemsModal: false,
+      sleepTimerSet: false,
+      sleepTimerTime: 0,
+      sleepTimerRemaining: 0,
+      sleepTimer: null,
+      displayTitle: null,
+      initialPlaybackRate: 1,
+      syncFailedToast: null
     }
   },
   computed: {
+    coverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    bookCoverWidth() {
+      return 88
+    },
+    bookCoverPosTop() {
+      if (this.coverAspectRatio == 1) return -10
+      return -64
+    },
     cover() {
-      if (this.streamAudiobook && this.streamAudiobook.cover) return this.streamAudiobook.cover
+      if (this.media.coverPath) return this.media.coverPath
       return 'Logo.png'
     },
     user() {
       return this.$store.state.user.user
     },
-    userAudiobook() {
-      if (!this.audiobookId) return
-      return this.$store.getters['user/getUserAudiobook'](this.audiobookId)
+    userMediaProgress() {
+      if (!this.libraryItemId) return
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
+    },
+    userItemCurrentTime() {
+      return this.userMediaProgress ? this.userMediaProgress.currentTime || 0 : 0
     },
     bookmarks() {
-      if (!this.userAudiobook) return []
-      return this.userAudiobook.bookmarks || []
+      if (!this.libraryItemId) return []
+      return this.$store.getters['user/getUserBookmarksForItem'](this.libraryItemId)
     },
-    isLoading() {
-      if (!this.streamAudiobook) return false
-      if (this.stream) {
-        // IF Stream exists, set loading if stream is diff from next stream
-        return this.stream.audiobook.id !== this.streamAudiobook.id
-      }
-      return true
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
     },
-    streamAudiobook() {
-      return this.$store.state.streamAudiobook
+    libraryItemId() {
+      return this.streamLibraryItem ? this.streamLibraryItem.id : null
     },
-    audiobookId() {
-      return this.streamAudiobook ? this.streamAudiobook.id : null
+    media() {
+      return this.streamLibraryItem ? this.streamLibraryItem.media || {} : {}
     },
-    book() {
-      return this.streamAudiobook ? this.streamAudiobook.book || {} : {}
+    isPodcast() {
+      return this.streamLibraryItem ? this.streamLibraryItem.mediaType === 'podcast' : false
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
     },
     chapters() {
-      return this.streamAudiobook ? this.streamAudiobook.chapters || [] : []
+      return this.media.chapters || []
     },
     title() {
-      return this.book.title || 'No Title'
+      if (this.playerHandler.displayTitle) return this.playerHandler.displayTitle
+      return this.mediaMetadata.title || 'No Title'
     },
-    author() {
-      return this.book.author || 'Unknown'
-    },
-    streamId() {
-      return this.stream ? this.stream.id : null
-    },
-    playlistUrl() {
-      return this.stream ? this.stream.clientPlaylistUri : null
+    authors() {
+      return this.mediaMetadata.authors || []
     },
     libraryId() {
-      return this.streamAudiobook ? this.streamAudiobook.libraryId : null
+      return this.streamLibraryItem ? this.streamLibraryItem.libraryId : null
     },
     totalDurationPretty() {
       return this.$secondsToTimestamp(this.totalDuration)
+    },
+    podcastAuthor() {
+      if (!this.isPodcast) return null
+      return this.mediaMetadata.author || 'Unknown'
+    },
+    playerQueueItems() {
+      return this.$store.state.playerQueueItems || []
     }
   },
   methods: {
-    showBookmarks(currentTime) {
-      this.bookmarkAudiobookId = this.audiobookId
-      this.bookmarkCurrentTime = currentTime
-      this.showBookmarksModal = true
-    },
-    // bookmarkCreated(time) {
-    //   if (time === this.bookmarkTimeProcessing) {
-    //     this.bookmarkTimeProcessing = 0
-    //     this.$toast.success(`${this.$secondsToTimestamp(time)} Bookmarked`)
-    //   }
-    // },
-    createBookmark(bookmark) {
-      // this.bookmarkTimeProcessing = bookmark.time
-      this.$root.socket.emit('create_bookmark', bookmark)
-      this.showBookmarksModal = false
-    },
-    // bookmarkUpdated(time) {
-    //   if (time === this.bookmarkTimeProcessing) {
-    //     this.bookmarkTimeProcessing = 0
-    //     this.$toast.success(`Bookmark @${this.$secondsToTimestamp(time)} Updated`)
-    //   }
-    // },
-    updateBookmark(bookmark) {
-      // this.bookmarkTimeProcessing = bookmark.time
-      this.$root.socket.emit('update_bookmark', bookmark)
-      this.showBookmarksModal = false
-    },
-    selectBookmark(bookmark) {
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.selectBookmark(bookmark)
-      }
-      this.showBookmarksModal = false
-    },
-    deleteBookmark(bookmark) {
-      this.$root.socket.emit('delete_bookmark', bookmark)
-      this.showBookmarksModal = false
-    },
-    filterByAuthor() {
-      if (this.$route.name !== 'index') {
-        this.$router.push(`/library/${this.libraryId || this.$store.state.libraries.currentLibraryId}/bookshelf`)
-      }
-      var settingsUpdate = {
-        filterBy: `authors.${this.$encode(this.author)}`
-      }
-      this.$store.dispatch('user/updateUserSettings', settingsUpdate)
-    },
-    audioPlayerMounted() {
-      this.audioPlayerReady = true
-      if (this.stream) {
-        console.log('[STREAM-CONTAINER] audioPlayerMounted w/ Stream', this.stream)
-        this.openStream()
-      }
-    },
-    cancelStream() {
-      this.$root.socket.emit('close_stream')
-    },
-    terminateStream() {
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.terminateStream()
-      }
-    },
-    openStream() {
-      var playOnLoad = this.$store.state.playOnLoad
-      console.log(`[StreamContainer] openStream PlayOnLoad`, playOnLoad)
-      if (!this.$refs.audioPlayer) {
-        console.error('NO Audio Player')
+    mediaFinished(libraryItemId, episodeId) {
+      // Play next item in queue
+      if (!this.playerQueueItems.length || !this.$store.state.playerQueueAutoPlay) {
+        // TODO: Set media finished flag so play button will play next queue item
         return
       }
-      var currentTime = this.stream.clientCurrentTime || 0
-      this.$refs.audioPlayer.set(this.playlistUrl, currentTime, playOnLoad)
-      if (this.stream.isTranscodeComplete) {
-        this.$refs.audioPlayer.setStreamReady()
+      var currentQueueIndex = this.playerQueueItems.findIndex((i) => {
+        if (episodeId) return i.libraryItemId === libraryItemId && i.episodeId === episodeId
+        return i.libraryItemId === libraryItemId
+      })
+      if (currentQueueIndex < 0) {
+        console.error('Media finished not found in queue - using first in queue', this.playerQueueItems)
+        currentQueueIndex = -1
+      }
+      if (currentQueueIndex === this.playerQueueItems.length - 1) {
+        console.log('Finished last item in queue')
+        return
+      }
+      const nextItemInQueue = this.playerQueueItems[currentQueueIndex + 1]
+      if (nextItemInQueue) {
+        this.playLibraryItem({
+          libraryItemId: nextItemInQueue.libraryItemId,
+          episodeId: nextItemInQueue.episodeId || null,
+          queueItems: this.playerQueueItems
+        })
+      }
+    },
+    setPlaying(isPlaying) {
+      this.isPlaying = isPlaying
+      this.$store.commit('setIsPlaying', isPlaying)
+      this.updateMediaSessionPlaybackState()
+    },
+    setSleepTimer(seconds) {
+      this.sleepTimerSet = true
+      this.sleepTimerTime = seconds
+      this.sleepTimerRemaining = seconds
+      this.runSleepTimer()
+      this.showSleepTimerModal = false
+    },
+    runSleepTimer() {
+      var lastTick = Date.now()
+      clearInterval(this.sleepTimer)
+      this.sleepTimer = setInterval(() => {
+        var elapsed = Date.now() - lastTick
+        lastTick = Date.now()
+        this.sleepTimerRemaining -= elapsed / 1000
+
+        if (this.sleepTimerRemaining <= 0) {
+          this.clearSleepTimer()
+          this.playerHandler.pause()
+          this.$toast.info('Sleep Timer Done.. zZzzZz')
+        }
+      }, 1000)
+    },
+    cancelSleepTimer() {
+      this.showSleepTimerModal = false
+      this.clearSleepTimer()
+    },
+    clearSleepTimer() {
+      clearInterval(this.sleepTimer)
+      this.sleepTimerRemaining = 0
+      this.sleepTimer = null
+      this.sleepTimerSet = false
+    },
+    incrementSleepTimer(amount) {
+      if (!this.sleepTimerSet) return
+      this.sleepTimerRemaining += amount
+    },
+    decrementSleepTimer(amount) {
+      if (this.sleepTimerRemaining < amount) {
+        this.sleepTimerRemaining = 3
+        return
+      }
+      this.sleepTimerRemaining = Math.max(0, this.sleepTimerRemaining - amount)
+    },
+    playPause() {
+      this.playerHandler.playPause()
+    },
+    jumpForward() {
+      this.playerHandler.jumpForward()
+    },
+    jumpBackward() {
+      this.playerHandler.jumpBackward()
+    },
+    setVolume(volume) {
+      this.playerHandler.setVolume(volume)
+    },
+    setPlaybackRate(playbackRate) {
+      this.initialPlaybackRate = playbackRate
+      this.playerHandler.setPlaybackRate(playbackRate)
+    },
+    seek(time) {
+      this.playerHandler.seek(time)
+    },
+    setCurrentTime(time) {
+      this.currentTime = time
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setCurrentTime(time)
+      }
+    },
+    setDuration(duration) {
+      this.totalDuration = duration
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setDuration(duration)
+      }
+    },
+    setBufferTime(buffertime) {
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.setBufferTime(buffertime)
+      }
+    },
+    showBookmarks() {
+      this.bookmarkCurrentTime = this.currentTime
+      this.showBookmarksModal = true
+    },
+    selectBookmark(bookmark) {
+      this.seek(bookmark.time)
+      this.showBookmarksModal = false
+    },
+    closePlayer() {
+      this.playerHandler.closePlayer()
+      this.$store.commit('setMediaPlaying', null)
+    },
+    mediaSessionPlay() {
+      console.log('Media session play')
+      this.playerHandler.play()
+    },
+    mediaSessionPause() {
+      console.log('Media session pause')
+      this.playerHandler.pause()
+    },
+    mediaSessionStop() {
+      console.log('Media session stop')
+      this.playerHandler.pause()
+    },
+    mediaSessionSeekBackward() {
+      console.log('Media session seek backward')
+      this.playerHandler.jumpBackward()
+    },
+    mediaSessionSeekForward() {
+      console.log('Media session seek forward')
+      this.playerHandler.jumpForward()
+    },
+    mediaSessionSeekTo(e) {
+      console.log('Media session seek to', e)
+      if (e.seekTime !== null && !isNaN(e.seekTime)) {
+        this.playerHandler.seek(e.seekTime)
+      }
+    },
+    mediaSessionPreviousTrack() {
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.prevChapter()
+      }
+    },
+    mediaSessionNextTrack() {
+      if (this.$refs.audioPlayer) {
+        this.$refs.audioPlayer.nextChapter()
+      }
+    },
+    updateMediaSessionPlaybackState() {
+      if ('mediaSession' in navigator) {
+        navigator.mediaSession.playbackState = this.isPlaying ? 'playing' : 'paused'
+      }
+    },
+    setMediaSession() {
+      if (!this.streamLibraryItem) {
+        console.error('setMediaSession: No library item set')
+        return
+      }
+
+      if ('mediaSession' in navigator) {
+        var coverImageSrc = this.$store.getters['globals/getLibraryItemCoverSrc'](this.streamLibraryItem, '/Logo.png')
+        const artwork = [
+          {
+            src: coverImageSrc
+          }
+        ]
+
+        navigator.mediaSession.metadata = new MediaMetadata({
+          title: this.title,
+          artist: this.playerHandler.displayAuthor || this.mediaMetadata.authorName || 'Unknown',
+          album: this.mediaMetadata.seriesName || '',
+          artwork
+        })
+        console.log('Set media session metadata', navigator.mediaSession.metadata)
+
+        navigator.mediaSession.setActionHandler('play', this.mediaSessionPlay)
+        navigator.mediaSession.setActionHandler('pause', this.mediaSessionPause)
+        navigator.mediaSession.setActionHandler('stop', this.mediaSessionStop)
+        navigator.mediaSession.setActionHandler('seekbackward', this.mediaSessionSeekBackward)
+        navigator.mediaSession.setActionHandler('seekforward', this.mediaSessionSeekForward)
+        navigator.mediaSession.setActionHandler('seekto', this.mediaSessionSeekTo)
+        navigator.mediaSession.setActionHandler('previoustrack', this.mediaSessionPreviousTrack)
+        const hasNextChapter = this.$refs.audioPlayer && this.$refs.audioPlayer.hasNextChapter
+        navigator.mediaSession.setActionHandler('nexttrack', hasNextChapter ? this.mediaSessionNextTrack : null)
+      } else {
+        console.warn('Media session not available')
       }
     },
     streamProgress(data) {
@@ -181,51 +359,99 @@ export default {
         console.error('No Audio Ref')
       }
     },
-    streamOpen(stream) {
-      this.stream = stream
-      if (this.$refs.audioPlayer) {
-        console.log('[StreamContainer] streamOpen', stream)
-        this.openStream()
-      } else if (this.audioPlayerReady) {
-        console.error('No Audio Ref')
-      }
+    sessionOpen(session) {
+      // For opening session on init (temporarily unused)
+      this.$store.commit('setMediaPlaying', {
+        libraryItem: session.libraryItem,
+        episodeId: session.episodeId
+      })
+      this.playerHandler.prepareOpenSession(session, this.initialPlaybackRate)
+    },
+    streamOpen(session) {
+      console.log(`[StreamContainer] Stream session open`, session)
     },
     streamClosed(streamId) {
-      if (this.stream && (this.stream.id === streamId || streamId === 'n/a')) {
-        this.terminateStream()
-        this.$store.commit('clearStreamAudiobook', this.stream.audiobook.id)
-        this.stream = null
+      // Stream was closed from the server
+      if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === streamId) {
+        console.warn('[StreamContainer] Closing stream due to request from server')
+        this.playerHandler.closePlayer()
       }
     },
     streamReady() {
-      console.log(`[STREAM-CONTAINER] Stream Ready`)
+      console.log(`[StreamContainer] Stream Ready`)
       if (this.$refs.audioPlayer) {
         this.$refs.audioPlayer.setStreamReady()
       } else {
         console.error('No Audio Ref')
       }
     },
-    updateTime(currentTime) {
-      var diff = currentTime - this.lastServerUpdateSentSeconds
-      if (diff > 4 || diff < 0) {
-        this.lastServerUpdateSentSeconds = currentTime
-        var updatePayload = {
-          currentTime,
-          streamId: this.streamId
-        }
-        this.$root.socket.emit('stream_update', updatePayload)
+    streamError(streamId) {
+      // Stream had critical error from the server
+      if (this.playerHandler.isPlayingLocalItem && this.playerHandler.currentStreamId === streamId) {
+        console.warn('[StreamContainer] Closing stream due to stream error from server')
+        this.playerHandler.closePlayer()
       }
     },
     streamReset({ startTime, streamId }) {
-      if (streamId !== this.streamId) {
-        console.error('resetStream StreamId Mismatch', streamId, this.streamId)
+      this.playerHandler.resetStream(startTime, streamId)
+    },
+    castSessionActive(isActive) {
+      if (isActive && this.playerHandler.isPlayingLocalItem) {
+        // Cast session started switch to cast player
+        this.playerHandler.switchPlayer()
+      } else if (!isActive && this.playerHandler.isPlayingCastedItem) {
+        // Cast session ended switch to local player
+        this.playerHandler.switchPlayer()
+      }
+    },
+    async playLibraryItem(payload) {
+      var libraryItemId = payload.libraryItemId
+      var episodeId = payload.episodeId || null
+
+      if (this.playerHandler.libraryItemId == libraryItemId && this.playerHandler.episodeId == episodeId) {
+        if (payload.startTime !== null && !isNaN(payload.startTime)) {
+          this.seek(payload.startTime)
+        } else {
+          this.playerHandler.play()
+        }
         return
       }
-      if (this.$refs.audioPlayer) {
-        console.log(`[STREAM-CONTAINER] streamReset Received for time ${startTime}`)
-        this.$refs.audioPlayer.resetStream(startTime)
-      }
+
+      var libraryItem = await this.$axios.$get(`/api/items/${libraryItemId}?expanded=1`).catch((error) => {
+        console.error('Failed to fetch full item', error)
+        return null
+      })
+      if (!libraryItem) return
+      this.$store.commit('setMediaPlaying', {
+        libraryItem,
+        episodeId,
+        queueItems: payload.queueItems || []
+      })
+      this.$nextTick(() => {
+        if (this.$refs.audioPlayer) this.$refs.audioPlayer.checkUpdateChapterTrack()
+      })
+
+      this.playerHandler.load(libraryItem, episodeId, true, this.initialPlaybackRate, payload.startTime)
+    },
+    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() {
+    this.$eventBus.$on('cast-session-active', this.castSessionActive)
+    this.$eventBus.$on('playback-seek', this.seek)
+    this.$eventBus.$on('play-item', this.playLibraryItem)
+    this.$eventBus.$on('pause-item', this.pauseItem)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('cast-session-active', this.castSessionActive)
+    this.$eventBus.$off('playback-seek', this.seek)
+    this.$eventBus.$off('play-item', this.playLibraryItem)
+    this.$eventBus.$off('pause-item', this.pauseItem)
   }
 }
 </script>

client/components/cards/AudiobookSearchCard.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="flex h-full px-1 overflow-hidden">
-    <cards-book-cover :audiobook="audiobook" :width="50" />
-    <div class="flex-grow px-2 audiobookSearchCardContent">
-      <p v-if="matchKey !== 'title'" class="truncate text-sm">{{ title }}</p>
-      <p v-else class="truncate text-sm" v-html="matchHtml" />
-
-      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300">{{ matchHtml }}</p>
-
-      <p v-if="matchKey !== 'authorFL'" class="text-xs text-gray-200 truncate">by {{ authorFL }}</p>
-      <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
-
-      <div v-if="matchKey === 'series' || matchKey === 'tags'" class="m-0 p-0 truncate" v-html="matchHtml" />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    audiobook: {
-      type: Object,
-      default: () => {}
-    },
-    search: String,
-    matchKey: String,
-    matchText: String
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    book() {
-      return this.audiobook ? this.audiobook.book || {} : {}
-    },
-    title() {
-      return this.book ? this.book.title : 'No Title'
-    },
-    subtitle() {
-      return this.book ? this.book.subtitle : ''
-    },
-    authorFL() {
-      return this.book ? this.book.authorFL : 'Unknown'
-    },
-    matchHtml() {
-      if (!this.matchText || !this.search) return ''
-      if (this.matchKey === 'subtitle') return ''
-      var matchSplit = this.matchText.toLowerCase().split(this.search.toLowerCase().trim())
-      if (matchSplit.length < 2) return ''
-
-      var html = ''
-      var totalLenSoFar = 0
-      for (let i = 0; i < matchSplit.length - 1; i++) {
-        var indexOf = matchSplit[i].length
-        var firstPart = this.matchText.substr(totalLenSoFar, indexOf)
-        var actualWasThere = this.matchText.substr(totalLenSoFar + indexOf, this.search.length)
-        totalLenSoFar += indexOf + this.search.length
-
-        html += `${firstPart}<strong class="text-warning">${actualWasThere}</strong>`
-      }
-      var lastPart = this.matchText.substr(totalLenSoFar)
-      html += lastPart
-
-      if (this.matchKey === 'tags') return `<p class="truncate">Tags: ${html}</p>`
-      if (this.matchKey === 'authorFL') return `by ${html}`
-      if (this.matchKey === 'series') return `<p class="truncate">Series: ${html}</p>`
-      return `${html}`
-    }
-  },
-  methods: {},
-  mounted() {}
-}
-</script>
-
-<style>
-.audiobookSearchCardContent {
-  width: calc(100% - 80px);
-  height: 75px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-</style>

client/components/cards/AuthorCard.vue

@@ -0,0 +1,116 @@
+<template>
+  <nuxt-link :to="`/author/${author.id}`">
+    <div @mouseover="mouseover" @mouseleave="mouseleave">
+      <div :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden">
+        <!-- Image or placeholder -->
+        <covers-author-image :author="author" />
+
+        <!-- Author name & num books overlay -->
+        <div v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
+          <p class="text-center font-semibold truncate" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
+          <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} Book{{ numBooks === 1 ? '' : 's' }}</p>
+        </div>
+
+        <!-- Search icon btn -->
+        <div v-show="!searching && isHovering && userCanUpdate" class="absolute top-0 left-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="searchAuthor">
+          <span class="material-icons text-lg">search</span>
+        </div>
+        <div v-show="isHovering && !searching && userCanUpdate" class="absolute top-0 right-0 p-2 cursor-pointer hover:text-white text-gray-200 transform hover:scale-125 duration-150" @click.prevent.stop="$emit('edit', author)">
+          <span class="material-icons text-lg">edit</span>
+        </div>
+
+        <!-- Loading spinner -->
+        <div v-show="searching" class="absolute top-0 left-0 z-10 w-full h-full bg-black bg-opacity-50 flex items-center justify-center">
+          <widgets-loading-spinner size="" />
+        </div>
+      </div>
+      <div v-show="nameBelow" class="w-full py-1 px-2">
+        <p class="text-center font-semibold truncate text-gray-200" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
+      </div>
+    </div>
+  </nuxt-link>
+</template>
+
+<script>
+export default {
+  props: {
+    author: {
+      type: Object,
+      default: () => {}
+    },
+    width: Number,
+    height: Number,
+    sizeMultiplier: {
+      type: Number,
+      default: 1
+    },
+    nameBelow: Boolean
+  },
+  data() {
+    return {
+      searching: false,
+      isHovering: false
+    }
+  },
+  computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
+    _author() {
+      return this.author || {}
+    },
+    authorId() {
+      return this._author.id
+    },
+    name() {
+      return this._author.name || ''
+    },
+    asin() {
+      return this._author.asin || ''
+    },
+    numBooks() {
+      return this._author.numBooks || 0
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    }
+  },
+  methods: {
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    async searchAuthor() {
+      this.searching = true
+      const payload = {}
+      if (this.asin) payload.asin = this.asin
+      else payload.q = this.name
+
+      var response = await this.$axios.$post(`/api/authors/${this.authorId}/match`, payload).catch((error) => {
+        console.error('Failed', error)
+        return null
+      })
+      if (!response) {
+        this.$toast.error(`Author ${this.name} not found`)
+      } else if (response.updated) {
+        if (response.author.imagePath) this.$toast.success(`Author ${response.author.name} was updated`)
+        else this.$toast.success(`Author ${response.author.name} was updated (no image found)`)
+      } else {
+        this.$toast.info(`No updates were made for Author ${response.author.name}`)
+      }
+      this.searching = false
+    },
+    setSearching(isSearching) {
+      this.searching = isSearching
+    }
+  },
+  mounted() {
+    this.$eventBus.$on(`searching-author-${this.authorId}`, this.setSearching)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off(`searching-author-${this.authorId}`, this.setSearching)
+  }
+}
+</script>

client/components/cards/AuthorSearchCard.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="flex h-full px-1 overflow-hidden">
-    <img src="/icons/NoUserPhoto.png" class="w-40 h-40 max-h-40 object-contain" style="max-height: 40px; max-width: 40px" />
+    <div class="overflow-hidden bg-primary rounded" style="height: 50px; width: 40px">
+      <covers-author-image :author="author" />
+    </div>
     <div class="flex-grow px-2 authorSearchCardContent h-full">
-      <p class="truncate text-sm">{{ author }}</p>
+      <p class="truncate text-sm">{{ name }}</p>
     </div>
   </div>
 </template>
@@ -10,12 +12,19 @@
 <script>
 export default {
   props: {
-    author: String
+    author: {
+      type: Object,
+      default: () => {}
+    }
   },
   data() {
     return {}
   },
-  computed: {},
+  computed: {
+    name() {
+      return this.author.name
+    }
+  },
   methods: {},
   mounted() {}
 }

client/components/cards/BookCard.vue

@@ -1,249 +0,0 @@
-<template>
-  <div class="relative">
-    <!-- New Book Flag -->
-    <div v-show="isNew" class="absolute top-4 left-0 w-4 h-10 pr-2 bg-darkgreen box-shadow-xl z-20">
-      <div class="absolute top-0 left-0 w-full h-full transform -rotate-90 flex items-center justify-center">
-        <p class="text-center text-sm">New</p>
-      </div>
-      <div class="absolute -bottom-4 left-0 triangle-right" />
-    </div>
-
-    <div class="rounded-sm h-full overflow-hidden relative" :style="{ padding: `16px ${paddingX}px` }" @click.stop>
-      <nuxt-link :to="isSelectionMode ? '' : `/audiobook/${audiobookId}`" class="cursor-pointer">
-        <div class="w-full relative box-shadow-book" :style="{ height: height + 'px' }" @click="clickCard" @mouseover="isHovering = true" @mouseleave="isHovering = false">
-          <cards-book-cover :audiobook="audiobook" :author-override="authorFormat" :width="width" />
-
-          <div v-show="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black rounded" :class="overlayWrapperClasslist">
-            <div v-show="showPlayButton" class="h-full flex items-center justify-center">
-              <div class="hover:text-gray-200 hover:scale-110 transform duration-200" @click.stop.prevent="play">
-                <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
-              </div>
-            </div>
-            <div v-show="showReadButton" class="h-full flex items-center justify-center">
-              <div class="hover:text-gray-200 hover:scale-110 transform duration-200" @click.stop.prevent="clickReadEBook">
-                <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">auto_stories</span>
-              </div>
-            </div>
-
-            <div v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-50" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
-              <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
-            </div>
-
-            <div class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
-              <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
-            </div>
-          </div>
-
-          <div v-if="volumeNumber && showVolumeNumber && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-            <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ volumeNumber }}</p>
-          </div>
-
-          <!-- EBook Icon -->
-          <div
-            v-if="showSmallEBookIcon"
-            class="absolute rounded-full bg-blue-500 flex items-center justify-center bg-opacity-90 hover:scale-125 transform duration-200"
-            :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem`, width: 1.5 * sizeMultiplier + 'rem', height: 1.5 * sizeMultiplier + 'rem' }"
-            @click.stop.prevent="clickReadEBook"
-          >
-            <!-- <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">EBook</p> -->
-            <span class="material-icons text-white" :style="{ fontSize: sizeMultiplier * 1 + 'rem' }">auto_stories</span>
-          </div>
-
-          <div v-show="!isSelectionMode" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
-
-          <ui-tooltip v-if="showError" :text="errorText" class="absolute bottom-4 left-0">
-            <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
-              <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
-            </div>
-          </ui-tooltip>
-        </div>
-      </nuxt-link>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    audiobook: {
-      type: Object,
-      default: () => null
-    },
-    userProgress: {
-      type: Object,
-      default: () => null
-    },
-    width: {
-      type: Number,
-      default: 120
-    },
-    showVolumeNumber: Boolean
-  },
-  data() {
-    return {
-      isHovering: false
-    }
-  },
-  computed: {
-    showExperimentalFeatures() {
-      return this.$store.state.showExperimentalFeatures
-    },
-    isNew() {
-      return this.tags.includes('New')
-    },
-    tags() {
-      return this.audiobook.tags || []
-    },
-    audiobookId() {
-      return this.audiobook.id
-    },
-    hasEbook() {
-      return this.audiobook.numEbooks
-    },
-    hasTracks() {
-      return this.audiobook.numTracks
-    },
-    isSelectionMode() {
-      return !!this.selectedAudiobooks.length
-    },
-    selectedAudiobooks() {
-      return this.$store.state.selectedAudiobooks
-    },
-    selected() {
-      return this.$store.getters['getIsAudiobookSelected'](this.audiobookId)
-    },
-    processingBatch() {
-      return this.$store.state.processingBatch
-    },
-    book() {
-      return this.audiobook.book || {}
-    },
-    height() {
-      return this.width * 1.6
-    },
-    sizeMultiplier() {
-      return this.width / 120
-    },
-    paddingX() {
-      return 16 * this.sizeMultiplier
-    },
-    title() {
-      return this.book.title
-    },
-    playIconFontSize() {
-      return Math.max(2, 3 * this.sizeMultiplier)
-    },
-    author() {
-      return this.book.author
-    },
-    authorFL() {
-      return this.book.authorFL || this.author
-    },
-    authorLF() {
-      return this.book.authorLF || this.author
-    },
-    authorFormat() {
-      if (!this.orderBy || !this.orderBy.startsWith('book.author')) return null
-      return this.orderBy === 'book.authorLF' ? this.authorLF : this.authorFL
-    },
-    volumeNumber() {
-      return this.book.volumeNumber || null
-    },
-    orderBy() {
-      return this.$store.getters['user/getUserSetting']('orderBy')
-    },
-    filterBy() {
-      return this.$store.getters['user/getUserSetting']('filterBy')
-    },
-    userProgressPercent() {
-      return this.userProgress ? this.userProgress.progress || 0 : 0
-    },
-    userIsRead() {
-      return this.userProgress ? !!this.userProgress.isRead : false
-    },
-    showError() {
-      return this.hasMissingParts || this.hasInvalidParts || this.isMissing || this.isIncomplete
-    },
-    isStreaming() {
-      return this.$store.getters['getAudiobookIdStreaming'] === this.audiobookId
-    },
-    showReadButton() {
-      return !this.isSelectionMode && this.showExperimentalFeatures && !this.showPlayButton && this.hasEbook
-    },
-    showPlayButton() {
-      return !this.isSelectionMode && !this.isMissing && !this.isIncomplete && this.hasTracks && !this.isStreaming
-    },
-    showSmallEBookIcon() {
-      return !this.isSelectionMode && this.showExperimentalFeatures && this.hasEbook
-    },
-    isMissing() {
-      return this.audiobook.isMissing
-    },
-    isIncomplete() {
-      return this.audiobook.isIncomplete
-    },
-    hasMissingParts() {
-      return this.audiobook.hasMissingParts
-    },
-    hasInvalidParts() {
-      return this.audiobook.hasInvalidParts
-    },
-    errorText() {
-      if (this.isMissing) return 'Audiobook directory is missing!'
-      else if (this.isIncomplete) return 'Audiobook has no audio tracks & ebook'
-      var txt = ''
-      if (this.hasMissingParts) {
-        txt = `${this.hasMissingParts} missing parts.`
-      }
-      if (this.hasInvalidParts) {
-        if (this.hasMissingParts) txt += ' '
-        txt += `${this.hasInvalidParts} invalid parts.`
-      }
-      return txt || 'Unknown Error'
-    },
-    overlayWrapperClasslist() {
-      var classes = []
-      if (this.isSelectionMode) classes.push('bg-opacity-60')
-      else classes.push('bg-opacity-40')
-      if (this.selected) {
-        classes.push('border-2 border-yellow-400')
-      }
-      return classes
-    },
-    userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
-    },
-    userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
-    }
-  },
-  methods: {
-    selectBtnClick() {
-      if (this.processingBatch) return
-      this.$store.commit('toggleAudiobookSelected', this.audiobookId)
-    },
-    clickError(e) {
-      e.stopPropagation()
-      this.$router.push(`/audiobook/${this.audiobookId}`)
-    },
-    play() {
-      this.$store.commit('setStreamAudiobook', this.audiobook)
-      this.$root.socket.emit('open_stream', this.audiobookId)
-    },
-    editClick() {
-      // this.$store.commit('showEditModal', this.audiobook)
-      this.$emit('edit', this.audiobook)
-    },
-    clickCard(e) {
-      if (this.isSelectionMode) {
-        e.stopPropagation()
-        e.preventDefault()
-        this.selectBtnClick()
-      }
-    },
-    clickReadEBook() {
-      this.$store.commit('showEReader', this.audiobook)
-    }
-  }
-}
-</script>

client/components/cards/BookMatchCard.vue

@@ -1,18 +1,38 @@
 <template>
-  <div class="w-full border-b border-gray-700 pb-2">
+  <div v-if="book" class="w-full border-b border-gray-700 pb-2">
     <div class="flex py-1 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer" @click="selectMatch">
-      <img :src="selectedCover || '/book_placeholder.jpg'" class="h-24 object-cover" style="width: 60px" />
-      <div class="px-4 flex-grow">
+      <div class="min-w-12 max-w-12 md:min-w-20 md:max-w-20">
+        <div class="w-full bg-primary">
+          <img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
+          <div v-else class="w-12 h-12 md:w-20 md:h-20 bg-primary" />
+        </div>
+      </div>
+      <div v-if="!isPodcast" class="px-2 md:px-4 flex-grow">
         <div class="flex items-center">
-          <h1>{{ book.title }}</h1>
+          <h1 class="text-sm md:text-base">{{ book.title }}</h1>
           <div class="flex-grow" />
-          <p>{{ book.year || book.first_publish_date }}</p>
+          <p class="text-sm md:text-base">{{ book.publishedYear }}</p>
+        </div>
+        <p v-if="book.author" class="text-gray-300 text-xs md:text-sm">by {{ book.author }}</p>
+        <p v-if="book.narrator" class="text-gray-400 text-xs">Narrated by {{ book.narrator }}</p>
+        <p v-if="book.duration" class="text-gray-400 text-xs">Runtime: {{ $elapsedPrettyExtended(book.duration * 60) }}</p>
+        <div v-if="book.series && book.series.length" class="flex py-1 -mx-1">
+          <div v-for="(series, index) in book.series" :key="index" class="bg-white bg-opacity-10 rounded-full px-1 py-0.5 mx-1">
+            <p class="leading-3 text-xs text-gray-400">
+              {{ series.series }}<span v-if="series.sequence">&nbsp;#{{ series.sequence }}</span>
+            </p>
+          </div>
         </div>
-        <p class="text-gray-400">{{ book.author }}</p>
         <div class="w-full max-h-12 overflow-hidden">
-          <p class="text-gray-500 text-xs" v-html="book.description"></p>
+          <p class="text-gray-500 text-xs">{{ book.description }}</p>
         </div>
       </div>
+      <div v-else class="px-4 flex-grow">
+        <h1>{{ book.title }}</h1>
+        <p class="text-base text-gray-300 whitespace-nowrap truncate">by {{ book.author }}</p>
+        <p v-if="book.genres" class="text-xs text-gray-400 leading-5">{{ book.genres.join(', ') }}</p>
+        <p class="text-xs text-gray-400 leading-5">{{ book.trackCount }} Episodes</p>
+      </div>
     </div>
     <div v-if="bookCovers.length > 1" class="flex">
       <template v-for="cover in bookCovers">
@@ -30,7 +50,9 @@ export default {
     book: {
       type: Object,
       default: () => {}
-    }
+    },
+    isPodcast: Boolean,
+    bookCoverAspectRatio: Number
   },
   data() {
     return {
@@ -46,14 +68,14 @@ export default {
     selectMatch() {
       var book = { ...this.book }
       book.cover = this.selectedCover
-      this.$emit('select', this.book)
+      this.$emit('select', book)
     },
     clickCover(cover) {
       this.selectedCover = cover
     }
   },
   mounted() {
-    this.selectedCover = this.bookCovers.length ? this.bookCovers[0] : null
+    this.selectedCover = this.bookCovers.length ? this.bookCovers[0] : this.book.cover || null
   }
 }
 </script>

client/components/cards/GroupCard.vue

@@ -1,20 +1,15 @@
 <template>
   <div class="relative">
-    <div class="rounded-sm h-full overflow-hidden relative" :style="{ padding: `16px ${paddingX}px` }" @mouseover="isHovering = true" @mouseleave="isHovering = false" @click="clickCard">
+    <div class="rounded-sm h-full relative" :style="{ width: width + 'px', height: height + 'px' }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
       <nuxt-link :to="groupTo" class="cursor-pointer">
-        <div class="w-full relative" :class="isHovering ? 'bg-black-400' : 'bg-primary'" :style="{ height: height + 'px', width: height + 'px' }">
-          <cards-group-cover ref="groupcover" :name="groupName" :book-items="bookItems" :width="height" :height="height" />
+        <div class="w-full h-full relative" :class="isHovering ? 'bg-black-400' : 'bg-primary'">
+          <covers-group-cover ref="groupcover" :id="groupEncode" :name="groupName" :type="groupType" :book-items="bookItems" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
 
-          <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
-            <p class="font-book" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ groupName }}</p>
+          <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity z-30" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
+            <p class="font-book" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ groupName }}</p>
           </div>
 
-          <div class="absolute top-2 right-2 w-7 h-7 rounded-lg bg-black bg-opacity-90 text-gray-300 box-shadow-book flex items-center justify-center border border-white border-opacity-25 pointer-events-none">
-            <p class="font-book text-xl">{{ bookItems.length }}</p>
-          </div>
-          <div class="absolute bottom-0 left-0 w-full h-1 flex flex-nowrap">
-            <div v-for="userProgress in userProgressItems" :key="userProgress.audiobookId" class="h-full w-full" :class="userProgress.isRead ? 'bg-success' : userProgress.progress > 0 ? 'bg-yellow-400' : ''" />
-          </div>
+          <div class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ bookItems.length }}</div>
         </div>
       </nuxt-link>
     </div>
@@ -28,25 +23,15 @@ export default {
       type: Object,
       default: () => null
     },
-    width: {
-      type: Number,
-      default: 120
-    }
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number
   },
   data() {
     return {
       isHovering: false
     }
   },
-  watch: {
-    width(newVal) {
-      this.$nextTick(() => {
-        if (this.$refs.groupcover) {
-          this.$refs.groupcover.init()
-        }
-      })
-    }
-  },
   computed: {
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
@@ -58,39 +43,18 @@ export default {
       return this._group.type
     },
     groupTo() {
-      if (this.groupType === 'series') {
-        return `/library/${this.currentLibraryId}/bookshelf/series?series=${this.groupEncode}`
-      } else {
-        return `/library/${this.currentLibraryId}/bookshelf?filter=tags.${this.groupEncode}`
-      }
-    },
-    height() {
-      return this.width * 1.6
+      return `/library/${this.currentLibraryId}/bookshelf?filter=${this.filter}`
     },
     sizeMultiplier() {
-      return this.width / 120
-    },
-    paddingX() {
-      return 16 * this.sizeMultiplier
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
     },
     bookItems() {
       return this._group.books || []
     },
-    userAudiobooks() {
-      return Object.values(this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {})
-    },
-    userProgressItems() {
-      return this.bookItems.map((item) => {
-        var userAudiobook = this.userAudiobooks.find((ab) => ab.audiobookId === item.id)
-        return userAudiobook || {}
-      })
-    },
     groupName() {
       return this._group.name || 'No Name'
     },
-    groupType() {
-      return this._group.type
-    },
     groupEncode() {
       return this.$encode(this.groupName)
     },
@@ -98,11 +62,17 @@ export default {
       return `${this.groupType}.${this.$encode(this.groupName)}`
     },
     hasValidCovers() {
-      var validCovers = this.bookItems.map((bookItem) => bookItem.book.cover)
+      var validCovers = this.bookItems.map((bookItem) => bookItem.media.coverPath)
       return !!validCovers.length
     }
   },
   methods: {
+    mouseoverCard() {
+      this.isHovering = true
+    },
+    mouseleaveCard() {
+      this.isHovering = false
+    },
     clickCard() {
       this.$emit('click', this.group)
     }

client/components/cards/GroupCover.vue

@@ -1,139 +0,0 @@
-<template>
-  <div ref="wrapper" :style="{ height: height + 'px', width: width + 'px' }" class="relative">
-    <div v-if="noValidCovers" class="absolute top-0 left-0 w-full h-full flex items-center justify-center box-shadow-book" :style="{ padding: `${sizeMultiplier}rem` }">
-      <p :style="{ fontSize: sizeMultiplier + 'rem' }">{{ name }}</p>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    name: String,
-    bookItems: {
-      type: Array,
-      default: () => []
-    },
-    width: Number,
-    height: Number
-  },
-  data() {
-    return {
-      noValidCovers: false,
-      coverDiv: null
-    }
-  },
-  watch: {
-    bookItems: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) {
-          // ensure wrapper is initialized
-          this.$nextTick(this.init)
-        }
-      }
-    }
-  },
-  computed: {
-    sizeMultiplier() {
-      return this.width / 192
-    }
-  },
-  methods: {
-    getCoverUrl(book) {
-      return this.$store.getters['audiobooks/getBookCoverSrc'](book, '')
-    },
-    async buildCoverImg(src, bgCoverWidth, offsetLeft, forceCoverBg = false) {
-      var showCoverBg =
-        forceCoverBg ||
-        (await new Promise((resolve) => {
-          var image = new Image()
-
-          image.onload = () => {
-            var { naturalWidth, naturalHeight } = image
-            var aspectRatio = naturalHeight / naturalWidth
-            var arDiff = Math.abs(aspectRatio - 1.6)
-
-            // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
-            if (arDiff > 0.15) {
-              resolve(true)
-            } else {
-              resolve(false)
-            }
-          }
-          image.onerror = (err) => {
-            console.error(err)
-            resolve(false)
-          }
-          image.src = src
-        }))
-
-      var imgdiv = document.createElement('div')
-      imgdiv.style.height = this.height + 'px'
-      imgdiv.style.width = bgCoverWidth + 'px'
-      imgdiv.style.left = offsetLeft + 'px'
-      imgdiv.className = 'absolute top-0 box-shadow-book'
-      imgdiv.style.boxShadow = '-4px 0px 4px #11111166'
-      // imgdiv.style.transform = 'skew(0deg, 15deg)'
-
-      if (showCoverBg) {
-        var coverbgwrapper = document.createElement('div')
-        coverbgwrapper.className = 'absolute top-0 left-0 w-full h-full bg-primary'
-
-        var coverbg = document.createElement('div')
-        coverbg.className = 'w-full h-full'
-        coverbg.style.backgroundImage = `url("${src}")`
-        coverbg.style.backgroundSize = 'cover'
-        coverbg.style.backgroundPosition = 'center'
-        coverbg.style.opacity = 0.25
-        coverbg.style.filter = 'blur(1px)'
-
-        coverbgwrapper.appendChild(coverbg)
-        imgdiv.appendChild(coverbgwrapper)
-      }
-
-      var img = document.createElement('img')
-      img.src = src
-      img.className = 'absolute top-0 left-0 w-full h-full'
-      img.style.objectFit = showCoverBg ? 'contain' : 'cover'
-
-      imgdiv.appendChild(img)
-      return imgdiv
-    },
-    async init() {
-      if (this.coverDiv) {
-        this.coverDiv.remove()
-        this.coverDiv = null
-      }
-      var validCovers = this.bookItems.map((bookItem) => this.getCoverUrl(bookItem)).filter((b) => b !== '')
-      if (!validCovers.length) {
-        this.noValidCovers = true
-        return
-      }
-      this.noValidCovers = false
-
-      var coverWidth = this.width
-      var widthPer = this.width
-      if (validCovers.length > 1) {
-        coverWidth = this.height / 1.6
-        widthPer = (this.width - coverWidth) / (validCovers.length - 1)
-      }
-
-      var outerdiv = document.createElement('div')
-      outerdiv.className = 'w-full h-full relative'
-
-      for (let i = 0; i < validCovers.length; i++) {
-        var offsetLeft = widthPer * i
-        var img = await this.buildCoverImg(validCovers[i], coverWidth, offsetLeft, validCovers.length === 1)
-        outerdiv.appendChild(img)
-      }
-
-      if (this.$refs.wrapper) {
-        this.coverDiv = outerdiv
-        this.$refs.wrapper.appendChild(outerdiv)
-      }
-    }
-  },
-  mounted() {}
-}
-</script>

client/components/cards/ItemSearchCard.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="flex items-center h-full px-1 overflow-hidden">
+    <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    <div class="flex-grow px-2 audiobookSearchCardContent">
+      <p v-if="matchKey !== 'title'" class="truncate text-sm">{{ title }}</p>
+      <p v-else class="truncate text-sm" v-html="matchHtml" />
+
+      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300">{{ matchHtml }}</p>
+
+      <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">by {{ authorName }}</p>
+      <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
+
+      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    },
+    search: String,
+    matchKey: String,
+    matchText: String
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    coverWidth() {
+      if (this.bookCoverAspectRatio === 1) return 50 * 1.2
+      return 50
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaType() {
+      return this.libraryItem ? this.libraryItem.mediaType : null
+    },
+    isPodcast() {
+      return this.mediaType == 'podcast'
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    title() {
+      return this.mediaMetadata.title || 'No Title'
+    },
+    subtitle() {
+      return this.mediaMetadata.subtitle || ''
+    },
+    authorName() {
+      if (this.isPodcast) return this.mediaMetadata.author || 'Unknown'
+      return this.mediaMetadata.authorName || 'Unknown'
+    },
+    matchHtml() {
+      if (!this.matchText || !this.search) return ''
+      if (this.matchKey === 'subtitle') return ''
+
+      // This used to highlight the part of the search found
+      //        but with removing commas periods etc this is no longer plausible
+      const html = this.matchText
+
+      if (this.matchKey === 'tags') return `<p class="truncate">Tags: ${html}</p>`
+      if (this.matchKey === 'authors') return `by ${html}`
+      if (this.matchKey === 'isbn') return `<p class="truncate">ISBN: ${html}</p>`
+      if (this.matchKey === 'asin') return `<p class="truncate">ASIN: ${html}</p>`
+      if (this.matchKey === 'series') return `<p class="truncate">Series: ${html}</p>`
+      return `${html}`
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.audiobookSearchCardContent {
+  width: calc(100% - 80px);
+  height: 75px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

client/components/cards/ItemUploadCard.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="relative w-full py-4 px-6 border border-white border-opacity-10 shadow-lg rounded-md my-6">
+    <div class="absolute -top-3 -left-3 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full">
+      <p class="text-base text-white text-opacity-80 font-mono">#{{ item.index }}</p>
+    </div>
+
+    <div v-if="!processing && !uploadFailed && !uploadSuccess" class="absolute -top-3 -right-3 w-8 h-8 bg-bg border border-white border-opacity-10 flex items-center justify-center rounded-full hover:bg-error cursor-pointer" @click="$emit('remove')">
+      <span class="text-base text-white text-opacity-80 font-mono material-icons">close</span>
+    </div>
+
+    <template v-if="!uploadSuccess && !uploadFailed">
+      <widgets-alert v-if="error" type="error">
+        <p class="text-base">{{ error }}</p>
+      </widgets-alert>
+
+      <div class="flex my-2 -mx-2">
+        <div class="w-1/2 px-2">
+          <ui-text-input-with-label v-model="itemData.title" :disabled="processing" :label="$strings.LabelTitle" @input="titleUpdated" />
+        </div>
+        <div class="w-1/2 px-2">
+          <ui-text-input-with-label v-if="!isPodcast" v-model="itemData.author" :disabled="processing" :label="$strings.LabelAuthor" />
+          <div v-else class="w-full">
+            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
+          </div>
+        </div>
+      </div>
+      <div v-if="!isPodcast" class="flex my-2 -mx-2">
+        <div class="w-1/2 px-2">
+          <ui-text-input-with-label v-model="itemData.series" :disabled="processing" :label="$strings.LabelSeries" note="(optional)" />
+        </div>
+        <div class="w-1/2 px-2">
+          <div class="w-full">
+            <p class="px-1 text-sm font-semibold">{{ $strings.LabelDirectory }} <em class="font-normal text-xs pl-2">(auto)</em></p>
+            <ui-text-input :value="directory" disabled class="w-full font-mono text-xs" style="height: 38px" />
+          </div>
+        </div>
+      </div>
+
+      <tables-uploaded-files-table :files="item.itemFiles" :title="$strings.HeaderItemFiles" class="mt-8" />
+      <tables-uploaded-files-table v-if="item.otherFiles.length" :title="$strings.HeaderOtherFiles" :files="item.otherFiles" />
+      <tables-uploaded-files-table v-if="item.ignoredFiles.length" :title="$strings.HeaderIgnoredFiles" :files="item.ignoredFiles" />
+    </template>
+    <widgets-alert v-if="uploadSuccess" type="success">
+      <p class="text-base">{{ $strings.MessageUploaderItemSuccess }}</p>
+    </widgets-alert>
+    <widgets-alert v-if="uploadFailed" type="error">
+      <p class="text-base">{{ $strings.MessageUploaderItemFailed }}</p>
+    </widgets-alert>
+
+    <div v-if="isUploading" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center z-20">
+      <ui-loading-indicator :text="$strings.MessageUploading" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Path from 'path'
+
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => {}
+    },
+    mediaType: String,
+    processing: Boolean
+  },
+  data() {
+    return {
+      itemData: {
+        title: '',
+        author: '',
+        series: ''
+      },
+      error: '',
+      isUploading: false,
+      uploadFailed: false,
+      uploadSuccess: false
+    }
+  },
+  computed: {
+    isPodcast() {
+      return this.mediaType === 'podcast'
+    },
+    directory() {
+      if (!this.itemData.title) return ''
+      if (this.isPodcast) return this.itemData.title
+
+      if (this.itemData.series && this.itemData.author) {
+        return Path.join(this.itemData.author, this.itemData.series, this.itemData.title)
+      } else if (this.itemData.author) {
+        return Path.join(this.itemData.author, this.itemData.title)
+      } else {
+        return this.itemData.title
+      }
+    }
+  },
+  methods: {
+    setUploadStatus(status) {
+      this.isUploading = status === 'uploading'
+      this.uploadFailed = status === 'failed'
+      this.uploadSuccess = status === 'success'
+    },
+    titleUpdated() {
+      this.error = ''
+    },
+    getData() {
+      if (!this.itemData.title) {
+        this.error = 'Must have a title'
+        return null
+      }
+      this.error = ''
+      var files = this.item.itemFiles.concat(this.item.otherFiles)
+      return {
+        index: this.item.index,
+        ...this.itemData,
+        files
+      }
+    }
+  },
+  mounted() {
+    if (this.item) {
+      this.itemData.title = this.item.title
+      this.itemData.author = this.item.author
+      this.itemData.series = this.item.series
+    }
+  }
+}
+</script>

client/components/cards/LazyBookCard.vue

@@ -0,0 +1,925 @@
+<template>
+  <div ref="card" :id="`book-card-${index}`" :style="{ minWidth: width + 'px', maxWidth: width + 'px', height: height + 'px' }" class="rounded-sm z-10 bg-primary cursor-pointer box-shadow-book" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <!-- When cover image does not fill -->
+    <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
+      <div class="absolute cover-bg" ref="coverBg" />
+    </div>
+
+    <!-- Alternative bookshelf title/author/sort -->
+    <div v-if="isAlternativeBookshelfView || isAuthorBookshelfView" class="absolute left-0 z-50 w-full" :style="{ bottom: `-${titleDisplayBottomOffset}rem` }">
+      <p class="truncate" :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
+        {{ displayTitle }}
+      </p>
+      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
+      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
+    </div>
+
+    <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #78350f">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequenceList }}</p>
+    </div>
+    <div v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #cd9d49dd">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ booksInSeries }}</p>
+    </div>
+
+    <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
+      <div v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
+        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="font-book text-gray-300 text-center">{{ title }}</p>
+      </div>
+
+      <!-- Cover Image -->
+      <img v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
+
+      <!-- Placeholder Cover Title & Author -->
+      <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
+        <div>
+          <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">
+            {{ titleCleaned }}
+          </p>
+        </div>
+      </div>
+      <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
+        <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
+      </div>
+    </div>
+
+    <!-- No progress shown for collapsed series in library and podcasts (unless showing podcast episode) -->
+    <div v-if="!booksInSeries && (!isPodcast || episodeProgress)" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b" :class="itemIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
+    <!-- Finished progress bar for collapsed series -->
+    <div v-else-if="booksInSeries && seriesIsFinished" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b bg-success" :style="{ width: width * userProgressPercent + 'px' }"></div>
+
+    <!-- Overlay is not shown if collapsing series in library -->
+    <div v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen) && !processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black rounded hidden md:block" :class="overlayWrapperClasslist">
+      <div v-show="showPlayButton" class="h-full flex items-center justify-center pointer-events-none">
+        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="play">
+          <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
+        </div>
+      </div>
+
+      <div v-show="showReadButton" class="h-full flex items-center justify-center pointer-events-none">
+        <div class="hover:text-white text-gray-200 hover:scale-110 transform duration-200 pointer-events-auto" @click.stop.prevent="clickReadEBook">
+          <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">auto_stories</span>
+        </div>
+      </div>
+
+      <div v-if="userCanUpdate" v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-150 top-0 right-0" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
+        <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
+      </div>
+
+      <div class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
+        <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
+      </div>
+
+      <!-- More Menu Icon -->
+      <div ref="moreIcon" v-show="!isSelectionMode" class="hidden md:block absolute cursor-pointer hover:text-yellow-300 300 hover:scale-125 transform duration-150" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickShowMore">
+        <span class="material-icons" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">more_vert</span>
+      </div>
+    </div>
+
+    <!-- Processing/loading spinner overlay -->
+    <div v-if="processing" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 rounded flex items-center justify-center">
+      <widgets-loading-spinner size="la-lg" />
+    </div>
+
+    <!-- Series name overlay -->
+    <div v-if="booksInSeries && libraryItem && isHovering" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-60 rounded flex items-center justify-center" :style="{ padding: sizeMultiplier + 'rem' }">
+      <p class="text-gray-200 text-center" :style="{ fontSize: 1.1 * sizeMultiplier + 'rem' }">{{ series }}</p>
+    </div>
+
+    <!-- Error widget -->
+    <ui-tooltip v-if="showError" :text="errorText" class="absolute bottom-4 left-0 z-10">
+      <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
+        <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
+      </div>
+    </ui-tooltip>
+
+    <div v-if="rssFeed && !isSelectionMode && !isHovering" class="absolute text-success top-0 left-0 z-10" :style="{ padding: 0.375 * sizeMultiplier + 'rem' }">
+      <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.5 + 'rem' }">rss_feed</span>
+    </div>
+
+    <!-- Series sequence -->
+    <div v-if="seriesSequence && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequence }}</p>
+    </div>
+
+    <!-- Podcast Episode # -->
+    <div v-if="recentEpisodeNumber && !isHovering && !isSelectionMode && !processing" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">Episode #{{ recentEpisodeNumber }}</p>
+    </div>
+
+    <!-- Podcast Num Episodes -->
+    <div v-else-if="numEpisodes && !isHovering && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
+      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodes }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import MoreMenu from '@/components/widgets/MoreMenu'
+
+export default {
+  props: {
+    index: Number,
+    width: {
+      type: Number,
+      default: 120
+    },
+    height: {
+      type: Number,
+      default: 192
+    },
+    bookCoverAspectRatio: Number,
+    bookshelfView: Number,
+    bookMount: {
+      // Book can be passed as prop or set with setEntity()
+      type: Object,
+      default: () => null
+    },
+    orderBy: String,
+    filterBy: String,
+    sortingIgnorePrefix: Boolean,
+    continueListeningShelf: Boolean
+  },
+  data() {
+    return {
+      isHovering: false,
+      isMoreMenuOpen: false,
+      processing: false,
+      libraryItem: null,
+      imageReady: false,
+      selected: false,
+      isSelectionMode: false,
+      showCoverBg: false
+    }
+  },
+  watch: {
+    bookMount: {
+      handler(newVal) {
+        if (newVal) {
+          this.libraryItem = newVal
+        }
+      }
+    }
+  },
+  computed: {
+    dateFormat() {
+      return this.store.state.serverSettings.dateFormat
+    },
+    showExperimentalFeatures() {
+      return this.store.state.showExperimentalFeatures
+    },
+    enableEReader() {
+      return this.store.getters['getServerSetting']('enableEReader')
+    },
+    _libraryItem() {
+      return this.libraryItem || {}
+    },
+    isFile() {
+      // Library item is not in a folder
+      return this._libraryItem.isFile
+    },
+    media() {
+      return this._libraryItem.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    mediaType() {
+      return this._libraryItem.mediaType
+    },
+    isPodcast() {
+      return this.mediaType === 'podcast'
+    },
+    placeholderUrl() {
+      const config = this.$config || this.$nuxt.$config
+      return `${config.routerBasePath}/book_placeholder.jpg`
+    },
+    bookCoverSrc() {
+      return this.store.getters['globals/getLibraryItemCoverSrc'](this._libraryItem, this.placeholderUrl)
+    },
+    libraryItemId() {
+      return this._libraryItem.id
+    },
+    series() {
+      // Only included when filtering by series or collapse series or Continue Series shelf on home page
+      return this.mediaMetadata.series
+    },
+    seriesSequence() {
+      return this.series ? this.series.sequence : null
+    },
+    libraryId() {
+      return this._libraryItem.libraryId
+    },
+    hasEbook() {
+      return this.media.ebookFormat
+    },
+    numTracks() {
+      if (this.media.tracks) return this.media.tracks.length
+      return this.media.numTracks || 0 // toJSONMinified
+    },
+    numEpisodes() {
+      if (!this.isPodcast) return 0
+      return this.media.numEpisodes || 0
+    },
+    processingBatch() {
+      return this.store.state.processingBatch
+    },
+    recentEpisode() {
+      // Only added to item when getting currently listening podcasts
+      return this._libraryItem.recentEpisode
+    },
+    recentEpisodeNumber() {
+      if (!this.recentEpisode) return null
+      if (this.recentEpisode.episode) {
+        return this.recentEpisode.episode.replace(/^#/, '')
+      }
+      return this.recentEpisode.index
+    },
+    collapsedSeries() {
+      // Only added to item object when collapseSeries is enabled
+      return this._libraryItem.collapsedSeries
+    },
+    booksInSeries() {
+      // Only added to item object when collapseSeries is enabled
+      return this.collapsedSeries ? this.collapsedSeries.numBooks : 0
+    },
+    seriesSequenceList() {
+      return this.collapsedSeries ? this.collapsedSeries.seriesSequenceList : null
+    },
+    libraryItemIdsInSeries() {
+      // Only added to item object when collapseSeries is enabled
+      return this.collapsedSeries ? this.collapsedSeries.libraryItemIds || [] : []
+    },
+    hasCover() {
+      return !!this.media.coverPath
+    },
+    squareAspectRatio() {
+      return this.bookCoverAspectRatio === 1
+    },
+    sizeMultiplier() {
+      var baseSize = this.squareAspectRatio ? 192 : 120
+      return this.width / baseSize
+    },
+    title() {
+      return this.mediaMetadata.title || ''
+    },
+    playIconFontSize() {
+      return Math.max(2, 3 * this.sizeMultiplier)
+    },
+    author() {
+      if (this.isPodcast) return this.mediaMetadata.author
+      return this.mediaMetadata.authorName
+    },
+    authorLF() {
+      return this.mediaMetadata.authorNameLF
+    },
+    displayTitle() {
+      if (this.recentEpisode) return this.recentEpisode.title
+      const ignorePrefix = this.orderBy === 'media.metadata.title' && this.sortingIgnorePrefix
+      if (this.collapsedSeries) return ignorePrefix ? this.collapsedSeries.nameIgnorePrefix : this.collapsedSeries.name
+      return ignorePrefix ? this.mediaMetadata.titleIgnorePrefix : this.title
+    },
+    displayLineTwo() {
+      if (this.recentEpisode) return this.title
+      if (this.isPodcast) return this.author
+      if (this.collapsedSeries) return ''
+      if (this.isAuthorBookshelfView) {
+        return this.mediaMetadata.publishedYear || ''
+      }
+      if (this.orderBy === 'media.metadata.authorNameLF') return this.authorLF
+      return this.author
+    },
+    displaySortLine() {
+      if (this.collapsedSeries) return null
+      if (this.orderBy === 'mtimeMs') return 'Modified ' + this.$formatDate(this._libraryItem.mtimeMs, this.dateFormat)
+      if (this.orderBy === 'birthtimeMs') return 'Born ' + this.$formatDate(this._libraryItem.birthtimeMs, this.dateFormat)
+      if (this.orderBy === 'addedAt') return 'Added ' + this.$formatDate(this._libraryItem.addedAt, this.dateFormat)
+      if (this.orderBy === 'media.duration') return 'Duration: ' + this.$elapsedPrettyExtended(this.media.duration, false)
+      if (this.orderBy === 'size') return 'Size: ' + this.$bytesPretty(this._libraryItem.size)
+      if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} Episodes`
+      return null
+    },
+    episodeProgress() {
+      // Only used on home page currently listening podcast shelf
+      if (!this.recentEpisode) return null
+      return this.store.getters['user/getUserMediaProgress'](this.libraryItemId, this.recentEpisode.id)
+    },
+    userProgress() {
+      if (this.episodeProgress) return this.episodeProgress
+      return this.store.getters['user/getUserMediaProgress'](this.libraryItemId)
+    },
+    userProgressPercent() {
+      return this.userProgress ? this.userProgress.progress || 0 : 0
+    },
+    itemIsFinished() {
+      return this.userProgress ? !!this.userProgress.isFinished : false
+    },
+    seriesIsFinished() {
+      return !this.libraryItemIdsInSeries.some((lid) => {
+        const progress = this.store.getters['user/getUserMediaProgress'](lid)
+        return !progress || !progress.isFinished
+      })
+    },
+    showError() {
+      if (this.recentEpisode) return false // Dont show podcast error on episode card
+      return this.numInvalidAudioFiles || this.numMissingParts || this.isMissing || this.isInvalid
+    },
+    libraryItemIdStreaming() {
+      return this.store.getters['getLibraryItemIdStreaming']
+    },
+    isStreaming() {
+      return this.libraryItemIdStreaming === this.libraryItemId
+    },
+    isQueued() {
+      const episodeId = this.recentEpisode ? this.recentEpisode.id : null
+      return this.store.getters['getIsMediaQueued'](this.libraryItemId, episodeId)
+    },
+    isStreamingFromDifferentLibrary() {
+      return this.store.getters['getIsStreamingFromDifferentLibrary']
+    },
+    showReadButton() {
+      return !this.isSelectionMode && !this.showPlayButton && this.hasEbook && (this.showExperimentalFeatures || this.enableEReader)
+    },
+    showPlayButton() {
+      return !this.isSelectionMode && !this.isMissing && !this.isInvalid && !this.isStreaming && (this.numTracks || this.recentEpisode)
+    },
+    showSmallEBookIcon() {
+      return !this.isSelectionMode && this.hasEbook && (this.showExperimentalFeatures || this.enableEReader)
+    },
+    isMissing() {
+      return this._libraryItem.isMissing
+    },
+    isInvalid() {
+      return this._libraryItem.isInvalid
+    },
+    numMissingParts() {
+      if (this.isPodcast) return 0
+      return this.media.numMissingParts
+    },
+    numInvalidAudioFiles() {
+      if (this.isPodcast) return 0
+      return this.media.numInvalidAudioFiles
+    },
+    errorText() {
+      if (this.isMissing) return 'Item directory is missing!'
+      else if (this.isInvalid) {
+        if (this.isPodcast) return 'Podcast has no episodes'
+        return 'Item has no audio tracks & ebook'
+      }
+      var txt = ''
+      if (this.numMissingParts) {
+        txt += `${this.numMissingParts} missing parts.`
+      }
+      if (this.numInvalidAudioFiles) {
+        if (txt) txt += ' '
+        txt += `${this.numInvalidAudioFiles} invalid audio files.`
+      }
+      return txt || 'Unknown Error'
+    },
+    overlayWrapperClasslist() {
+      var classes = []
+      if (this.isSelectionMode) classes.push('bg-opacity-60')
+      else classes.push('bg-opacity-40')
+      if (this.selected) {
+        classes.push('border-2 border-yellow-400')
+      }
+      return classes
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    userCanUpdate() {
+      return this.store.getters['user/getUserCanUpdate']
+    },
+    userCanDelete() {
+      return this.store.getters['user/getUserCanDelete']
+    },
+    userCanDownload() {
+      return this.store.getters['user/getUserCanDownload']
+    },
+    userIsAdminOrUp() {
+      return this.store.getters['user/getIsAdminOrUp']
+    },
+    moreMenuItems() {
+      if (this.recentEpisode) {
+        const items = [
+          {
+            func: 'editPodcast',
+            text: this.$strings.ButtonEditPodcast
+          },
+          {
+            func: 'toggleFinished',
+            text: this.itemIsFinished ? this.$strings.MessageMarkAsNotFinished : this.$strings.MessageMarkAsFinished
+          },
+          {
+            func: 'openPlaylists',
+            text: this.$strings.LabelAddToPlaylist
+          }
+        ]
+        if (this.continueListeningShelf) {
+          items.push({
+            func: 'removeFromContinueListening',
+            text: this.$strings.ButtonRemoveFromContinueListening
+          })
+        }
+        if (this.libraryItemIdStreaming && !this.isStreamingFromDifferentLibrary) {
+          if (!this.isQueued) {
+            items.push({
+              func: 'addToQueue',
+              text: this.$strings.ButtonQueueAddItem
+            })
+          } else if (!this.isStreaming) {
+            items.push({
+              func: 'removeFromQueue',
+              text: this.$strings.ButtonQueueRemoveItem
+            })
+          }
+        }
+        return items
+      }
+
+      var items = []
+      if (!this.isPodcast) {
+        items = [
+          {
+            func: 'toggleFinished',
+            text: this.itemIsFinished ? this.$strings.MessageMarkAsNotFinished : this.$strings.MessageMarkAsFinished
+          }
+        ]
+        if (this.userCanUpdate) {
+          items.push({
+            func: 'openCollections',
+            text: this.$strings.LabelAddToCollection
+          })
+        }
+        if (this.numTracks) {
+          items.push({
+            func: 'openPlaylists',
+            text: this.$strings.LabelAddToPlaylist
+          })
+        }
+      }
+      if (this.userCanUpdate) {
+        items.push({
+          func: 'showEditModalFiles',
+          text: this.$strings.HeaderFiles
+        })
+        items.push({
+          func: 'showEditModalMatch',
+          text: this.$strings.HeaderMatch
+        })
+      }
+      if (this.userIsAdminOrUp && !this.isFile) {
+        items.push({
+          func: 'rescan',
+          text: this.$strings.ButtonReScan
+        })
+      }
+      if (this.series && this.bookMount) {
+        items.push({
+          func: 'removeSeriesFromContinueListening',
+          text: this.$strings.ButtonRemoveSeriesFromContinueSeries
+        })
+      }
+      if (this.continueListeningShelf) {
+        items.push({
+          func: 'removeFromContinueListening',
+          text: this.$strings.ButtonRemoveFromContinueListening
+        })
+      }
+      if (!this.isPodcast) {
+        if (this.libraryItemIdStreaming && !this.isStreamingFromDifferentLibrary) {
+          if (!this.isQueued) {
+            items.push({
+              func: 'addToQueue',
+              text: this.$strings.ButtonQueueAddItem
+            })
+          } else if (!this.isStreaming) {
+            items.push({
+              func: 'removeFromQueue',
+              text: this.$strings.ButtonQueueRemoveItem
+            })
+          }
+        }
+      }
+      return items
+    },
+    _socket() {
+      return this.$root.socket || this.$nuxt.$root.socket
+    },
+    titleFontSize() {
+      return 0.75 * this.sizeMultiplier
+    },
+    authorFontSize() {
+      return 0.6 * this.sizeMultiplier
+    },
+    placeholderCoverPadding() {
+      return 0.8 * this.sizeMultiplier
+    },
+    authorBottom() {
+      return 0.75 * this.sizeMultiplier
+    },
+    titleCleaned() {
+      if (!this.title) return ''
+      if (this.title.length > 60) {
+        return this.title.slice(0, 57) + '...'
+      }
+      return this.title
+    },
+    authorCleaned() {
+      if (!this.author) return ''
+      if (this.author.length > 30) {
+        return this.author.slice(0, 27) + '...'
+      }
+      return this.author
+    },
+    isAlternativeBookshelfView() {
+      var constants = this.$constants || this.$nuxt.$constants
+      return this.bookshelfView === constants.BookshelfView.DETAIL
+    },
+    isAuthorBookshelfView() {
+      var constants = this.$constants || this.$nuxt.$constants
+      return this.bookshelfView === constants.BookshelfView.AUTHOR
+    },
+    titleDisplayBottomOffset() {
+      if (!this.isAlternativeBookshelfView && !this.isAuthorBookshelfView) return 0
+      else if (!this.displaySortLine) return 3 * this.sizeMultiplier
+      return 4.25 * this.sizeMultiplier
+    },
+    rssFeed() {
+      if (this.booksInSeries) return null
+      return this.store.getters['feeds/getFeedForItem'](this.libraryItemId)
+    }
+  },
+  methods: {
+    setSelectionMode(val) {
+      this.isSelectionMode = val
+      if (!val) this.selected = false
+    },
+    setEntity(_libraryItem) {
+      var libraryItem = _libraryItem
+
+      // this code block is only necessary when showing a selected series with sequence #
+      //   it will update the selected series so we get realtime updates for series sequence changes
+      if (this.series) {
+        // i know.. but the libraryItem passed to this func cannot be modified so we need to create a copy
+        libraryItem = {
+          ..._libraryItem,
+          media: {
+            ..._libraryItem.media,
+            metadata: {
+              ..._libraryItem.media.metadata
+            }
+          }
+        }
+        var mediaMetadata = libraryItem.media.metadata
+        if (mediaMetadata.series && Array.isArray(mediaMetadata.series)) {
+          var newSeries = mediaMetadata.series.find((se) => se.id === this.series.id)
+          if (newSeries) {
+            // update selected series
+            libraryItem.media.metadata.series = newSeries
+            this.libraryItem = libraryItem
+            return
+          }
+        }
+      }
+
+      this.libraryItem = libraryItem
+    },
+    clickCard(e) {
+      if (this.processing) return
+      if (this.isSelectionMode) {
+        e.stopPropagation()
+        e.preventDefault()
+        this.selectBtnClick(e)
+      } else {
+        var router = this.$router || this.$nuxt.$router
+        if (router) {
+          if (this.collapsedSeries) router.push(`/library/${this.libraryId}/series/${this.collapsedSeries.id}`)
+          else router.push(`/item/${this.libraryItemId}`)
+        }
+      }
+    },
+    editClick() {
+      if (this.recentEpisode) {
+        return this.$emit('edit', { libraryItem: this.libraryItem, episode: this.recentEpisode })
+      }
+      this.$emit('edit', this.libraryItem)
+    },
+    toggleFinished(confirmed = false) {
+      if (!this.itemIsFinished && this.userProgressPercent > 0 && !confirmed) {
+        const payload = {
+          message: `Are you sure you want to mark "${this.displayTitle}" as finished?`,
+          callback: (confirmed) => {
+            if (confirmed) {
+              this.toggleFinished(true)
+            }
+          },
+          type: 'yesNo'
+        }
+        this.store.commit('globals/setConfirmPrompt', payload)
+        return
+      }
+
+      var updatePayload = {
+        isFinished: !this.itemIsFinished
+      }
+      this.processing = true
+
+      var apiEndpoint = `/api/me/progress/${this.libraryItemId}`
+      if (this.recentEpisode) apiEndpoint += `/${this.recentEpisode.id}`
+
+      var toast = this.$toast || this.$nuxt.$toast
+      var axios = this.$axios || this.$nuxt.$axios
+      axios
+        .$patch(apiEndpoint, updatePayload)
+        .then(() => {
+          this.processing = false
+          toast.success(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedSuccess : this.$strings.ToastItemMarkedAsNotFinishedSuccess)
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.processing = false
+          toast.error(updatePayload.isFinished ? this.$strings.ToastItemMarkedAsFinishedFailed : this.$strings.ToastItemMarkedAsNotFinishedFailed)
+        })
+    },
+    editPodcast() {
+      this.$emit('editPodcast', this.libraryItem)
+    },
+    rescan() {
+      if (this.processing) return
+      const axios = this.$axios || this.$nuxt.$axios
+      this.processing = true
+      axios
+        .$get(`/api/items/${this.libraryItemId}/scan`)
+        .then((data) => {
+          var result = data.result
+          if (!result) {
+            this.$toast.error(`Re-Scan Failed for "${this.title}"`)
+          } else if (result === 'UPDATED') {
+            this.$toast.success(`Re-Scan complete item was updated`)
+          } else if (result === 'UPTODATE') {
+            this.$toast.success(`Re-Scan complete item was up to date`)
+          } else if (result === 'REMOVED') {
+            this.$toast.error(`Re-Scan complete item was removed`)
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to scan library item', error)
+          this.$toast.error('Failed to scan library item')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    showEditModalFiles() {
+      // More menu func
+      this.store.commit('showEditModalOnTab', { libraryItem: this.libraryItem, tab: 'files' })
+    },
+    showEditModalMatch() {
+      // More menu func
+      this.store.commit('showEditModalOnTab', { libraryItem: this.libraryItem, tab: 'match' })
+    },
+    removeSeriesFromContinueListening() {
+      const axios = this.$axios || this.$nuxt.$axios
+      this.processing = true
+      axios
+        .$get(`/api/me/series/${this.series.id}/remove-from-continue-listening`)
+        .then((data) => {
+          console.log('User updated', data)
+        })
+        .catch((error) => {
+          console.error('Failed to remove series from home', error)
+          this.$toast.error('Failed to update user')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    removeFromContinueListening() {
+      if (!this.userProgress) return
+
+      const axios = this.$axios || this.$nuxt.$axios
+      this.processing = true
+      axios
+        .$get(`/api/me/progress/${this.userProgress.id}/remove-from-continue-listening`)
+        .then((data) => {
+          console.log('User updated', data)
+        })
+        .catch((error) => {
+          console.error('Failed to hide item from home', error)
+          this.$toast.error('Failed to update user')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    addToQueue() {
+      var queueItem = {}
+      if (this.recentEpisode) {
+        queueItem = {
+          libraryItemId: this.libraryItemId,
+          libraryId: this.libraryId,
+          episodeId: this.recentEpisode.id,
+          title: this.recentEpisode.title,
+          subtitle: this.mediaMetadata.title,
+          caption: this.recentEpisode.publishedAt ? `Published ${this.$formatDate(this.recentEpisode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+          duration: this.recentEpisode.audioFile.duration || null,
+          coverPath: this.media.coverPath || null
+        }
+      } else {
+        queueItem = {
+          libraryItemId: this.libraryItemId,
+          libraryId: this.libraryId,
+          episodeId: null,
+          title: this.title,
+          subtitle: this.author,
+          caption: '',
+          duration: this.media.duration || null,
+          coverPath: this.media.coverPath || null
+        }
+      }
+      this.store.commit('addItemToQueue', queueItem)
+    },
+    removeFromQueue() {
+      const episodeId = this.recentEpisode ? this.recentEpisode.id : null
+      this.store.commit('removeItemFromQueue', { libraryItemId: this.libraryItemId, episodeId })
+    },
+    openCollections() {
+      this.store.commit('setSelectedLibraryItem', this.libraryItem)
+      this.store.commit('globals/setShowCollectionsModal', true)
+    },
+    openPlaylists() {
+      this.store.commit('globals/setSelectedPlaylistItems', [{ libraryItem: this.libraryItem, episode: this.recentEpisode }])
+      this.store.commit('globals/setShowPlaylistsModal', true)
+    },
+    createMoreMenu() {
+      if (!this.$refs.moreIcon) return
+
+      var ComponentClass = Vue.extend(MoreMenu)
+
+      var _this = this
+      var instance = new ComponentClass({
+        propsData: {
+          items: this.moreMenuItems
+        },
+        created() {
+          this.$on('action', (func) => {
+            if (_this[func]) _this[func]()
+          })
+          this.$on('close', () => {
+            _this.isMoreMenuOpen = false
+          })
+        }
+      })
+      instance.$mount()
+
+      var wrapperBox = this.$refs.moreIcon.getBoundingClientRect()
+      var el = instance.$el
+
+      var elHeight = this.moreMenuItems.length * 28 + 2
+      var elWidth = 130
+
+      var bottomOfIcon = wrapperBox.top + wrapperBox.height
+      var rightOfIcon = wrapperBox.left + wrapperBox.width
+
+      var elTop = bottomOfIcon
+      var elLeft = rightOfIcon
+      if (bottomOfIcon + elHeight > window.innerHeight - 100) {
+        elTop = wrapperBox.top - elHeight
+        elLeft = wrapperBox.left
+      }
+
+      if (rightOfIcon + elWidth > window.innerWidth - 100) {
+        elLeft = rightOfIcon - elWidth
+      }
+
+      el.style.top = elTop + 'px'
+      el.style.left = elLeft + 'px'
+
+      this.isMoreMenuOpen = true
+      document.body.appendChild(el)
+    },
+    clickShowMore() {
+      this.createMoreMenu()
+    },
+    async clickReadEBook() {
+      var libraryItem = await this.$axios.$get(`/api/items/${this.libraryItemId}?expanded=1`).catch((error) => {
+        console.error('Failed to get lirbary item', this.libraryItemId)
+        return null
+      })
+      if (!libraryItem) return
+      console.log('Got library itemn', libraryItem)
+      this.store.commit('showEReader', libraryItem)
+    },
+    selectBtnClick(evt) {
+      if (this.processingBatch) return
+      this.selected = !this.selected
+      this.$emit('select', { entity: this.libraryItem, shiftKey: evt.shiftKey })
+    },
+    async play() {
+      var eventBus = this.$eventBus || this.$nuxt.$eventBus
+
+      const queueItems = []
+      // Podcast episode load queue items
+      if (this.recentEpisode) {
+        const axios = this.$axios || this.$nuxt.$axios
+        this.processing = true
+        const fullLibraryItem = await axios.$get(`/api/items/${this.libraryItemId}`).catch((err) => {
+          console.error('Failed to fetch library item', err)
+          return null
+        })
+        this.processing = false
+
+        if (fullLibraryItem && fullLibraryItem.media.episodes) {
+          const episodes = fullLibraryItem.media.episodes || []
+          // Sort from least recent to most recent
+          episodes.sort((a, b) => String(a.publishedAt).localeCompare(String(b.publishedAt), undefined, { numeric: true, sensitivity: 'base' }))
+
+          const episodeIndex = episodes.findIndex((ep) => ep.id === this.recentEpisode.id)
+          if (episodeIndex >= 0) {
+            for (let i = episodeIndex; i < episodes.length; i++) {
+              const episode = episodes[i]
+              const podcastProgress = this.store.getters['user/getUserMediaProgress'](this.libraryItemId, episode.id)
+              if (!podcastProgress || !podcastProgress.isFinished) {
+                queueItems.push({
+                  libraryItemId: this.libraryItemId,
+                  libraryId: this.libraryId,
+                  episodeId: episode.id,
+                  title: episode.title,
+                  subtitle: this.mediaMetadata.title,
+                  caption: episode.publishedAt ? `Published ${this.$formatDate(episode.publishedAt, 'MMM do, yyyy')}` : 'Unknown publish date',
+                  duration: episode.audioFile.duration || null,
+                  coverPath: this.media.coverPath || null
+                })
+              }
+            }
+          }
+        }
+      } else {
+        const queueItem = {
+          libraryItemId: this.libraryItemId,
+          libraryId: this.libraryId,
+          episodeId: null,
+          title: this.title,
+          subtitle: this.author,
+          caption: '',
+          duration: this.media.duration || null,
+          coverPath: this.media.coverPath || null
+        }
+        queueItems.push(queueItem)
+      }
+
+      eventBus.$emit('play-item', {
+        libraryItemId: this.libraryItemId,
+        episodeId: this.recentEpisode ? this.recentEpisode.id : null,
+        queueItems
+      })
+    },
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    },
+    setCoverBg() {
+      if (this.$refs.coverBg) {
+        this.$refs.coverBg.style.backgroundImage = `url("${this.bookCoverSrc}")`
+      }
+    },
+    imageLoaded() {
+      this.imageReady = true
+
+      if (this.$refs.cover && this.bookCoverSrc !== this.placeholderUrl) {
+        var { naturalWidth, naturalHeight } = this.$refs.cover
+        var aspectRatio = naturalHeight / naturalWidth
+        var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
+
+        // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
+        if (arDiff > 0.15) {
+          this.showCoverBg = true
+          this.$nextTick(this.setCoverBg)
+        } else {
+          this.showCoverBg = false
+        }
+      }
+    }
+  },
+  mounted() {
+    if (this.bookMount) {
+      this.setEntity(this.bookMount)
+    }
+  }
+}
+</script>

client/components/cards/LazyCollectionCard.vue

@@ -0,0 +1,116 @@
+<template>
+  <div ref="card" :id="`collection-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+      <covers-collection-cover ref="cover" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+    <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
+      <div class="absolute pointer-events-auto" :style="{ top: 0.5 * sizeMultiplier + 'rem', right: 0.5 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickEdit">
+        <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
+      </div>
+    </div>
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      </div>
+    </div>
+    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number,
+    bookshelfView: {
+      type: Number,
+      default: 0
+    },
+    collectionMount: {
+      type: Object,
+      default: () => null
+    },
+    isTag: Boolean
+  },
+  data() {
+    return {
+      collection: null,
+      isSelectionMode: false,
+      selected: false,
+      isHovering: false
+    }
+  },
+  computed: {
+    labelFontSize() {
+      if (this.width < 160) return 0.75
+      return 0.875
+    },
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
+    },
+    title() {
+      return this.collection ? this.collection.name : ''
+    },
+    books() {
+      return this.collection ? this.collection.books || [] : []
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    currentLibraryId() {
+      return this.store.state.libraries.currentLibraryId
+    },
+    isAlternativeBookshelfView() {
+      const constants = this.$constants || this.$nuxt.$constants
+      return this.bookshelfView == constants.BookshelfView.DETAIL
+    },
+    userCanUpdate() {
+      return this.store.getters['user/getUserCanUpdate']
+    }
+  },
+  methods: {
+    setEntity(_collection) {
+      this.collection = _collection
+    },
+    setSelectionMode(val) {
+      this.isSelectionMode = val
+    },
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    clickCard() {
+      if (!this.collection) return
+      var router = this.$router || this.$nuxt.$router
+      router.push(`/collection/${this.collection.id}`)
+    },
+    clickEdit() {
+      this.$emit('edit', this.collection)
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    }
+  },
+  mounted() {
+    if (this.collectionMount) {
+      this.setEntity(this.collectionMount)
+    }
+  }
+}
+</script>

client/components/cards/LazyPlaylistCard.vue

@@ -0,0 +1,115 @@
+<template>
+  <div ref="card" :id="`playlist-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="absolute top-0 left-0 rounded-sm z-30 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <div class="w-full h-full bg-primary relative rounded overflow-hidden">
+      <covers-playlist-cover ref="cover" :items="items" :width="width" :height="height" />
+    </div>
+    <div v-show="isHovering && userCanUpdate" class="w-full h-full absolute top-0 left-0 z-10 bg-black bg-opacity-40 pointer-events-none">
+      <div class="absolute pointer-events-auto" :style="{ top: 0.5 * sizeMultiplier + 'rem', right: 0.5 * sizeMultiplier + 'rem' }" @click.stop.prevent="clickEdit">
+        <span class="material-icons text-xl text-white text-opacity-75 hover:text-opacity-100">edit</span>
+      </div>
+    </div>
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+      </div>
+    </div>
+    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number,
+    bookshelfView: {
+      type: Number,
+      default: 0
+    },
+    playlistMount: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      playlist: null,
+      isSelectionMode: false,
+      selected: false,
+      isHovering: false
+    }
+  },
+  computed: {
+    labelFontSize() {
+      if (this.width < 160) return 0.75
+      return 0.875
+    },
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
+    },
+    title() {
+      return this.playlist ? this.playlist.name : ''
+    },
+    items() {
+      return this.playlist ? this.playlist.items || [] : []
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    currentLibraryId() {
+      return this.store.state.libraries.currentLibraryId
+    },
+    isAlternativeBookshelfView() {
+      const constants = this.$constants || this.$nuxt.$constants
+      return this.bookshelfView == constants.BookshelfView.DETAIL
+    },
+    userCanUpdate() {
+      return this.store.getters['user/getUserCanUpdate']
+    }
+  },
+  methods: {
+    setEntity(playlist) {
+      this.playlist = playlist
+    },
+    setSelectionMode(val) {
+      this.isSelectionMode = val
+    },
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    clickCard() {
+      if (!this.playlist) return
+      var router = this.$router || this.$nuxt.$router
+      router.push(`/playlist/${this.playlist.id}`)
+    },
+    clickEdit() {
+      this.$emit('edit', this.playlist)
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    }
+  },
+  mounted() {
+    if (this.playlistMount) {
+      this.setEntity(this.playlistMount)
+    }
+  }
+}
+</script>

client/components/cards/LazySeriesCard.vue

@@ -0,0 +1,170 @@
+<template>
+  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="rounded-sm z-10 cursor-pointer" @mousedown.prevent @mouseup.prevent @mousemove.prevent @mouseover="mouseover" @mouseleave="mouseleave" @click="clickCard">
+    <div class="absolute top-0 left-0 w-full box-shadow-book shadow-height" />
+    <div class="w-full h-full bg-primary relative rounded overflow-hidden z-0">
+      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="displayTitle" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+
+    <div class="absolute z-10 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ books.length }}</div>
+
+    <div v-if="isSeriesFinished" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full z-10 rounded-b bg-success w-full" />
+
+    <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
+      <p class="font-book" :style="{ fontSize: 1.2 * sizeMultiplier + 'rem' }">{{ displayTitle }}</p>
+    </div>
+
+    <div v-if="!isAlternativeBookshelfView" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, width) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
+      </div>
+    </div>
+    <div v-else class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
+      <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ displayTitle }}</p>
+      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number,
+    bookshelfView: {
+      type: Number,
+      default: 0
+    },
+    isCategorized: Boolean,
+    seriesMount: {
+      type: Object,
+      default: () => null
+    },
+    sortingIgnorePrefix: Boolean,
+    orderBy: String
+  },
+  data() {
+    return {
+      series: null,
+      isSelectionMode: false,
+      selected: false,
+      isHovering: false,
+      imageReady: false
+    }
+  },
+  computed: {
+    dateFormat() {
+      return this.store.state.serverSettings.dateFormat
+    },
+    labelFontSize() {
+      if (this.width < 160) return 0.75
+      return 0.875
+    },
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
+    },
+    seriesId() {
+      return this.series ? this.series.id : ''
+    },
+    title() {
+      return this.series ? this.series.name : ''
+    },
+    nameIgnorePrefix() {
+      return this.series ? this.series.nameIgnorePrefix : ''
+    },
+    displayTitle() {
+      if (this.sortingIgnorePrefix) return this.nameIgnorePrefix || this.title
+      return this.title
+    },
+    displaySortLine() {
+      if (this.orderBy === 'addedAt') {
+        // return this.addedAt
+        return 'Added ' + this.$formatDate(this.addedAt, this.dateFormat)
+      } else if (this.orderBy === 'totalDuration') {
+        return 'Duration: ' + this.$elapsedPrettyExtended(this.totalDuration, false)
+      }
+      return null
+    },
+    books() {
+      return this.series ? this.series.books || [] : []
+    },
+    addedAt() {
+      return this.series ? this.series.addedAt : 0
+    },
+    totalDuration() {
+      return this.series ? this.series.totalDuration : 0
+    },
+    seriesBookProgress() {
+      return this.books
+        .map((libraryItem) => {
+          return this.store.getters['user/getUserMediaProgress'](libraryItem.id)
+        })
+        .filter((p) => !!p)
+    },
+    seriesBooksFinished() {
+      return this.seriesBookProgress.filter((p) => p.isFinished)
+    },
+    isSeriesFinished() {
+      return this.books.length === this.seriesBooksFinished.length
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    currentLibraryId() {
+      return this.store.state.libraries.currentLibraryId
+    },
+    seriesBooksRoute() {
+      return `/library/${this.currentLibraryId}/series/${this.seriesId}`
+    },
+    hasValidCovers() {
+      var validCovers = this.books.map((bookItem) => bookItem.media.coverPath)
+      return !!validCovers.length
+    },
+    isAlternativeBookshelfView() {
+      const constants = this.$constants || this.$nuxt.$constants
+      return this.bookshelfView == constants.BookshelfView.DETAIL
+    }
+  },
+  methods: {
+    setEntity(_series) {
+      this.series = _series
+    },
+    setSelectionMode(val) {
+      this.isSelectionMode = val
+    },
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    clickCard() {
+      if (!this.series) return
+      var router = this.$router || this.$nuxt.$router
+      router.push(`/library/${this.currentLibraryId}/series/${this.seriesId}`)
+    },
+    imageLoaded() {
+      this.imageReady = true
+    },
+    destroy() {
+      // destroy the vue listeners, etc
+      this.$destroy()
+
+      // remove the element from the DOM
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el)
+      } else if (this.$el && this.$el.remove) {
+        this.$el.remove()
+      }
+    }
+  },
+  mounted() {
+    if (this.seriesMount) {
+      this.setEntity(this.seriesMount)
+    }
+  },
+  beforeDestroy() {}
+}
+</script>

client/components/cards/NotificationCard.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="w-full border border-white border-opacity-10 rounded-xl p-4 my-2" :class="notification.enabled ? 'bg-primary bg-opacity-25' : 'bg-error bg-opacity-5'">
+    <div class="flex flex-wrap items-center">
+      <p class="text-base md:text-lg font-semibold pr-4">{{ eventName }}</p>
+      <div class="flex-grow" />
+
+      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="fireTestEventAndSucceed">Fire onTest Event</ui-btn>
+      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" color="red-600" @click.stop="fireTestEventAndFail">Fire & Fail</ui-btn>
+      <!-- <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="rapidFireTestEvents">Rapid Fire</ui-btn> -->
+      <ui-btn v-else-if="notification.enabled" :loading="sendingTest" small class="mr-2" @click.stop="sendTestClick">Test</ui-btn>
+      <ui-btn v-else :loading="enabling" small color="success" class="mr-2" @click="enableNotification">Enable</ui-btn>
+
+      <ui-icon-btn :size="7" icon-font-size="1.1rem" icon="edit" class="mr-2" @click="editNotification" />
+      <ui-icon-btn bg-color="error" :size="7" icon-font-size="1.2rem" icon="delete" @click="deleteNotificationClick" />
+    </div>
+    <div class="pt-4">
+      <p class="text-gray-300 text-xs md:text-sm mb-2">{{ notification.urls.join(', ') }}</p>
+
+      <p v-if="lastFiredAt && lastAttemptFailed" class="text-red-300 text-xs">Last attempt failed {{ $dateDistanceFromNow(lastFiredAt) }} ({{ numConsecutiveFailedAttempts }} attempt{{ numConsecutiveFailedAttempts === 1 ? '' : 's' }})</p>
+      <p v-else-if="lastFiredAt" class="text-gray-400 text-xs">Last fired {{ $dateDistanceFromNow(lastFiredAt) }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    notification: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      sendingTest: false,
+      enabling: false,
+      deleting: false,
+      testing: false
+    }
+  },
+  computed: {
+    eventName() {
+      return this.notification ? this.notification.eventName : null
+    },
+    lastFiredAt() {
+      return this.notification ? this.notification.lastFiredAt : null
+    },
+    lastAttemptFailed() {
+      return this.notification ? this.notification.lastAttemptFailed : null
+    },
+    numConsecutiveFailedAttempts() {
+      return this.notification ? this.notification.numConsecutiveFailedAttempts : null
+    }
+  },
+  methods: {
+    // For testing using the onTest event
+    fireTestEventAndFail() {
+      this.fireTestEvent(true)
+    },
+    fireTestEventAndSucceed() {
+      this.fireTestEvent(false)
+    },
+    fireTestEvent(intentionallyFail = false) {
+      this.testing = true
+      this.$axios
+        .$get(`/api/notifications/test?fail=${intentionallyFail ? 1 : 0}`)
+        .then(() => {
+          this.$toast.success('Triggered onTest Event')
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          const errorMsg = error.response ? error.response.data : null
+          this.$toast.error(`Failed: ${errorMsg}` || 'Failed to trigger onTest event')
+        })
+        .finally(() => {
+          this.testing = false
+        })
+    },
+    rapidFireTestEvents() {
+      this.testing = true
+      var numFired = 0
+      var interval = setInterval(() => {
+        this.fireTestEvent()
+        numFired++
+        if (numFired > 25) {
+          this.testing = false
+          clearInterval(interval)
+        }
+      }, 100)
+    },
+    // End testing functions
+    sendTestClick() {
+      const payload = {
+        message: `Trigger this notification with test data?`,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.sendTest()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    sendTest() {
+      this.sendingTest = true
+      this.$axios
+        .$get(`/api/notifications/${this.notification.id}/test`)
+        .then(() => {
+          this.$toast.success('Triggered test notification')
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          const errorMsg = error.response ? error.response.data : null
+          this.$toast.error(`Failed: ${errorMsg}` || 'Failed to trigger test notification')
+        })
+        .finally(() => {
+          this.sendingTest = false
+        })
+    },
+    enableNotification() {
+      this.enabling = true
+      const payload = {
+        id: this.notification.id,
+        enabled: true
+      }
+      this.$axios
+        .$patch(`/api/notifications/${this.notification.id}`, payload)
+        .then((updatedSettings) => {
+          this.$emit('update', updatedSettings)
+          this.$toast.success('Notification enabled')
+        })
+        .catch((error) => {
+          console.error('Failed to update notification', error)
+          this.$toast.error('Failed to update notification')
+        })
+        .finally(() => {
+          this.enabling = false
+        })
+    },
+    deleteNotificationClick() {
+      const payload = {
+        message: `Are you sure you want to delete this notification?`,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.deleteNotification()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    deleteNotification() {
+      this.deleting = true
+      this.$axios
+        .$delete(`/api/notifications/${this.notification.id}`)
+        .then((updatedSettings) => {
+          this.$emit('update', updatedSettings)
+          this.$toast.success('Deleted notification')
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.$toast.error('Failed to delete notification')
+        })
+        .finally(() => {
+          this.deleting = false
+        })
+    },
+    editNotification() {
+      this.$emit('edit', this.notification)
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/cards/PodcastFeedSummaryCard.vue

@@ -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 }} {{ $strings.HeaderEpisodes }}</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">
+          {{ $strings.LabelFolder }}: <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>

client/components/cards/SeriesSearchCard.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex h-full px-1 overflow-hidden">
-    <cards-group-cover :name="series" :book-items="bookItems" :width="60" :height="60" />
+    <covers-group-cover :name="name" :book-items="bookItems" :width="60" :height="60" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     <div class="flex-grow px-2 seriesSearchCardContent h-full">
-      <p class="truncate text-sm">{{ series }}</p>
+      <p class="truncate text-sm">{{ name }}</p>
     </div>
   </div>
 </template>
@@ -10,7 +10,10 @@
 <script>
 export default {
   props: {
-    series: String,
+    series: {
+      type: Object,
+      default: () => {}
+    },
     bookItems: {
       type: Array,
       default: () => []
@@ -19,7 +22,14 @@ export default {
   data() {
     return {}
   },
-  computed: {},
+  computed: {
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    name() {
+      return this.series.name
+    }
+  },
   methods: {},
   mounted() {}
 }

client/components/controls/FilterSelect.vue

@@ -1,8 +1,8 @@
 <template>
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
-        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
+        <span class="block truncate text-xs">{{ selectedText }}</span>
       </span>
       <span v-if="selected === 'all'" class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
         <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -14,42 +14,12 @@
       </div>
     </button>
 
-    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
-      <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+      <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in items">
           <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
             <div class="flex items-center justify-between">
-              <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
-            </div>
-            <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
-              <span class="material-icons">arrow_right</span>
-            </div>
-          </li>
-        </template>
-      </ul>
-      <ul v-show="sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
-        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-black-400" role="option" @click="sublist = null">
-          <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
-            <span class="material-icons">arrow_left</span>
-          </div>
-          <div class="flex items-center justify-between">
-            <span class="font-normal ml-3 block truncate">Back</span>
-          </div>
-        </li>
-        <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
-          <div class="flex items-center justify-center">
-            <span class="font-normal block truncate py-2">No {{ sublist }}</span>
-          </div>
-        </li>
-        <li v-else-if="sublist === 'series'" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" role="option" @click="clickedSublistOption($encode('No Series'))">
-          <div class="flex items-center">
-            <span class="font-normal block truncate py-2 text-xs text-white text-opacity-80">No Series</span>
-          </div>
-        </li>
-        <template v-for="item in sublistItems">
-          <li :key="item.value" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item.value}` === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item.value)">
-            <div class="flex items-center">
-              <span class="font-normal truncate py-2 text-xs">{{ item.text }}</span>
+              <span class="font-normal ml-3 block truncate text-sm md:text-base">{{ item.text }}</span>
             </div>
           </li>
         </template>
@@ -61,61 +31,15 @@
 <script>
 export default {
   props: {
-    value: String
+    value: String,
+    items: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {
-      showMenu: false,
-      sublist: null,
-      items: [
-        {
-          text: 'All',
-          value: 'all'
-        },
-        {
-          text: 'Genre',
-          value: 'genres',
-          sublist: true
-        },
-        {
-          text: 'Tag',
-          value: 'tags',
-          sublist: true
-        },
-        {
-          text: 'Series',
-          value: 'series',
-          sublist: true
-        },
-        {
-          text: 'Authors',
-          value: 'authors',
-          sublist: true
-        },
-        {
-          text: 'Narrator',
-          value: 'narrators',
-          sublist: true
-        },
-        {
-          text: 'Progress',
-          value: 'progress',
-          sublist: true
-        },
-        {
-          text: 'Issues',
-          value: 'issues',
-          sublist: false
-        }
-      ]
-    }
-  },
-  watch: {
-    showMenu(newVal) {
-      if (!newVal) {
-        if (this.sublist && !this.selectedItemSublist) this.sublist = null
-        if (!this.sublist && this.selectedItemSublist) this.sublist = this.selectedItemSublist
-      }
+      showMenu: false
     }
   },
   computed: {
@@ -127,44 +51,13 @@ export default {
         this.$emit('input', val)
       }
     },
-    selectedItemSublist() {
-      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
-    },
     selectedText() {
       if (!this.selected) return ''
-      var parts = this.selected.split('.')
-      if (parts.length > 1) {
-        return this.$decode(parts[1])
-      }
-      var _sel = this.items.find((i) => i.value === this.selected)
-      if (!_sel) return ''
-      return _sel.text
+      const filter = this.items.find((i) => i.value === this.selected)
+      return filter ? filter.text : ''
     },
-    genres() {
-      return this.$store.getters['audiobooks/getGenresUsed']
-    },
-    tags() {
-      return this.$store.state.audiobooks.tags
-    },
-    series() {
-      return this.$store.state.audiobooks.series
-    },
-    authors() {
-      return this.$store.getters['audiobooks/getUniqueAuthors']
-    },
-    narrators() {
-      return this.$store.getters['audiobooks/getUniqueNarrators']
-    },
-    progress() {
-      return ['Read', 'Unread', 'In Progress']
-    },
-    sublistItems() {
-      return (this[this.sublist] || []).map((item) => {
-        return {
-          text: item,
-          value: this.$encode(item)
-        }
-      })
+    filterData() {
+      return this.$store.state.libraries.filterData || {}
     }
   },
   methods: {
@@ -174,18 +67,9 @@ export default {
       this.$nextTick(() => this.$emit('change', 'all'))
     },
     clickOutside() {
-      if (!this.selectedItemSublist) this.sublist = null
       this.showMenu = false
     },
-    clickedSublistOption(item) {
-      this.clickedOption({ value: `${this.sublist}.${item}` })
-    },
     clickedOption(option) {
-      if (option.sublist) {
-        this.sublist = option.value
-        return
-      }
-
       var val = option.value
       if (this.selected === val) {
         this.showMenu = false

client/components/controls/GlobalSearch.vue

@@ -1,56 +1,65 @@
 <template>
-  <div class="w-80 ml-6 relative">
+  <div class="sm:w-80 w-full relative">
     <form @submit.prevent="submitSearch">
-      <ui-text-input ref="input" v-model="search" placeholder="Search.." @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
+      <ui-text-input ref="input" v-model="search" :placeholder="$strings.PlaceholderSearch" @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
     </form>
     <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
       <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
       <span v-else class="material-icons" style="font-size: 1.2rem">close</span>
     </div>
-    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu">
+    <div v-show="showMenu && (lastSearch || isTyping)" class="absolute z-40 -mt-px w-40 sm:w-full bg-bg border border-black-200 shadow-lg rounded-md py-1 px-2 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm globalSearchMenu">
       <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <li v-if="isTyping" class="py-2 px-2">
-          <p>Thinking...</p>
+          <p>{{ $strings.MessageThinking }}</p>
         </li>
         <li v-else-if="isFetching" class="py-2 px-2">
-          <p>Fetching...</p>
+          <p>{{ $strings.MessageFetching }}</p>
         </li>
         <li v-else-if="!totalResults" class="py-2 px-2">
-          <p>No Results</p>
+          <p>{{ $strings.MessageNoResults }}</p>
         </li>
         <template v-else>
-          <p class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">Books</p>
-          <template v-for="item in audiobookResults">
-            <li :key="item.audiobook.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
-              <nuxt-link :to="`/audiobook/${item.audiobook.id}`">
-                <cards-audiobook-search-card :audiobook="item.audiobook" :match-key="item.matchKey" :match-text="item.matchText" :search="lastSearch" />
+          <p v-if="bookResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelBooks }}</p>
+          <template v-for="item in bookResults">
+            <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/item/${item.libraryItem.id}`">
+                <cards-item-search-card :library-item="item.libraryItem" :match-key="item.matchKey" :match-text="item.matchText" :search="lastSearch" />
               </nuxt-link>
             </li>
           </template>
 
-          <p v-if="authorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Authors</p>
+          <p v-if="podcastResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelPodcasts }}</p>
+          <template v-for="item in podcastResults">
+            <li :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/item/${item.libraryItem.id}`">
+                <cards-item-search-card :library-item="item.libraryItem" :match-key="item.matchKey" :match-text="item.matchText" :search="lastSearch" />
+              </nuxt-link>
+            </li>
+          </template>
+
+          <p v-if="authorResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelAuthors }}</p>
           <template v-for="item in authorResults">
-            <li :key="item.author" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
-              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(item.author)}`">
-                <cards-author-search-card :author="item.author" />
+            <li :key="item.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=authors.${$encode(item.id)}`">
+                <cards-author-search-card :author="item" />
               </nuxt-link>
             </li>
           </template>
 
-          <p v-if="seriesResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Series</p>
+          <p v-if="seriesResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelSeries }}</p>
           <template v-for="item in seriesResults">
-            <li :key="item.series" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
-              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf/series?series=${$encode(item.series)}`">
-                <cards-series-search-card :series="item.series" :book-items="item.audiobooks" />
+            <li :key="item.series.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/library/${currentLibraryId}/series/${item.series.id}`">
+                <cards-series-search-card :series="item.series" :book-items="item.books" />
               </nuxt-link>
             </li>
           </template>
 
-          <p v-if="tagResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">Tags</p>
+          <p v-if="tagResults.length" class="uppercase text-xs text-gray-400 mb-1 mt-3 px-1 font-semibold">{{ $strings.LabelTags }}</p>
           <template v-for="item in tagResults">
-            <li :key="item.tag" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option">
-              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(item.tag)}`">
-                <cards-tag-search-card :tag="item.tag" />
+            <li :key="item.name" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
+              <nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(item.name)}`">
+                <cards-tag-search-card :tag="item.name" />
               </nuxt-link>
             </li>
           </template>
@@ -70,7 +79,8 @@ export default {
       isTyping: false,
       isFetching: false,
       search: null,
-      audiobookResults: [],
+      podcastResults: [],
+      bookResults: [],
       authorResults: [],
       seriesResults: [],
       tagResults: [],
@@ -79,27 +89,28 @@ export default {
     }
   },
   computed: {
-    audiobooks() {
-      return this.$store.state.audiobooks.audiobooks
-    },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
     totalResults() {
-      return this.audiobookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length
+      return this.bookResults.length + this.seriesResults.length + this.authorResults.length + this.tagResults.length + this.podcastResults.length
     }
   },
   methods: {
+    clickOption() {
+      this.clearResults()
+    },
     submitSearch() {
       if (!this.search) return
       var search = this.search
       this.clearResults()
-      this.$router.push(`/library/${this.currentLibraryId}/bookshelf/search?query=${search}`)
+      this.$router.push(`/library/${this.currentLibraryId}/search?q=${search}`)
     },
     clearResults() {
       this.search = null
       this.lastSearch = null
-      this.audiobookResults = []
+      this.podcastResults = []
+      this.bookResults = []
       this.authorResults = []
       this.seriesResults = []
       this.tagResults = []
@@ -131,7 +142,7 @@ export default {
       }
       this.isFetching = true
 
-      var searchResults = await this.$axios.$get(`/api/library/${this.currentLibraryId}/search?q=${value}`).catch((error) => {
+      var searchResults = await this.$axios.$get(`/api/libraries/${this.currentLibraryId}/search?q=${value}&limit=3`).catch((error) => {
         console.error('Search error', error)
         return []
       })
@@ -139,7 +150,8 @@ export default {
       // Search was canceled
       if (!this.isFetching) return
 
-      this.audiobookResults = searchResults.audiobooks || []
+      this.podcastResults = searchResults.podcast || []
+      this.bookResults = searchResults.book || []
       this.authorResults = searchResults.authors || []
       this.seriesResults = searchResults.series || []
       this.tagResults = searchResults.tags || []

client/components/controls/LibraryFilterSelect.vue

@@ -0,0 +1,320 @@
+<template>
+  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
+    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+      <span class="flex items-center justify-between">
+        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
+      </span>
+      <span v-if="selected === 'all'" class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+        <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+        </svg>
+      </span>
+      <div v-else class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 cursor-pointer text-gray-400 hover:text-gray-300" @mousedown.stop @mouseup.stop @click.stop.prevent="clearSelected">
+        <span class="material-icons" style="font-size: 1.1rem">close</span>
+      </div>
+    </button>
+
+    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+      <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+        <template v-for="item in selectItems">
+          <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
+            <div class="flex items-center justify-between">
+              <span class="font-normal ml-3 block truncate text-sm md:text-base">{{ item.text }}</span>
+            </div>
+            <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
+              <span class="material-icons text-2xl">arrow_right</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+      <ul v-show="sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-black-400" role="option" @click="sublist = null">
+          <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
+            <span class="material-icons text-2xl">arrow_left</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="font-normal ml-3 block truncate">Back</span>
+          </div>
+        </li>
+        <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
+          <div class="flex items-center justify-center">
+            <span class="font-normal block truncate py-2">No {{ sublist }}</span>
+          </div>
+        </li>
+        <li v-else-if="sublist === 'series'" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" role="option" @click="clickedSublistOption($encode('No Series'))">
+          <div class="flex items-center">
+            <span class="font-normal block truncate py-2 text-xs text-white text-opacity-80">No Series</span>
+          </div>
+        </li>
+        <template v-for="item in sublistItems">
+          <li :key="item.value" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item.value}` === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item.value)">
+            <div class="flex items-center">
+              <span class="font-normal truncate py-2 text-xs">{{ item.text }}</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    isSeries: Boolean
+  },
+  data() {
+    return {
+      showMenu: false,
+      sublist: null
+    }
+  },
+  watch: {
+    showMenu(newVal) {
+      if (!newVal) {
+        if (this.sublist && !this.selectedItemSublist) this.sublist = null
+        if (!this.sublist && this.selectedItemSublist) this.sublist = this.selectedItemSublist
+      }
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+    },
+    seriesItems() {
+      return [
+        {
+          text: this.$strings.LabelAll,
+          value: 'all'
+        },
+        {
+          text: this.$strings.LabelGenre,
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelTag,
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelAuthor,
+          value: 'authors',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelNarrator,
+          value: 'narrators',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelLanguage,
+          value: 'languages',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelSeriesProgress,
+          value: 'progress',
+          sublist: true
+        }
+      ]
+    },
+    bookItems() {
+      return [
+        {
+          text: this.$strings.LabelAll,
+          value: 'all'
+        },
+        {
+          text: this.$strings.LabelGenre,
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelTag,
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelSeries,
+          value: 'series',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelAuthor,
+          value: 'authors',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelNarrator,
+          value: 'narrators',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelLanguage,
+          value: 'languages',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelProgress,
+          value: 'progress',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelMissing,
+          value: 'missing',
+          sublist: true
+        },
+        {
+          text: this.$strings.ButtonIssues,
+          value: 'issues',
+          sublist: false
+        },
+        {
+          text: this.$strings.LabelRSSFeedOpen,
+          value: 'feed-open',
+          sublist: false
+        }
+      ]
+    },
+    podcastItems() {
+      return [
+        {
+          text: this.$strings.LabelAll,
+          value: 'all'
+        },
+        {
+          text: this.$strings.LabelGenre,
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: this.$strings.LabelTag,
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: this.$strings.ButtonIssues,
+          value: 'issues',
+          sublist: false
+        }
+      ]
+    },
+    selectItems() {
+      if (this.isSeries) return this.seriesItems
+      if (this.isPodcast) return this.podcastItems
+      return this.bookItems
+    },
+    selectedItemSublist() {
+      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
+    },
+    selectedText() {
+      if (!this.selected) return ''
+      var parts = this.selected.split('.')
+      var filterName = this.selectItems.find((i) => i.value === parts[0])
+      var filterValue = null
+      if (parts.length > 1) {
+        var decoded = this.$decode(parts[1])
+        if (decoded.startsWith('aut_')) {
+          var author = this.authors.find((au) => au.id == decoded)
+          if (author) filterValue = author.name
+        } else if (decoded.startsWith('ser_')) {
+          var series = this.series.find((se) => se.id == decoded)
+          if (series) filterValue = series.name
+        } else {
+          filterValue = decoded
+        }
+      }
+      if (filterName && filterValue) {
+        return `${filterName.text}: ${filterValue}`
+      } else if (filterName) {
+        return filterName.text
+      } else if (filterValue) {
+        return filterValue
+      } else {
+        return ''
+      }
+    },
+    genres() {
+      return this.filterData.genres || []
+    },
+    tags() {
+      return this.filterData.tags || []
+    },
+    series() {
+      return this.filterData.series || []
+    },
+    authors() {
+      return this.filterData.authors || []
+    },
+    narrators() {
+      return this.filterData.narrators || []
+    },
+    languages() {
+      return this.filterData.languages || []
+    },
+    progress() {
+      return [this.$strings.LabelFinished, this.$strings.LabelInProgress, this.$strings.LabelNotStarted, this.$strings.LabelNotFinished]
+    },
+    missing() {
+      return ['ASIN', 'ISBN', this.$strings.LabelSubtitle, this.$strings.LabelAuthor, this.$strings.LabelPublishYear, this.$strings.LabelSeries, this.$strings.LabelDescription, this.$strings.LabelGenres, this.$strings.LabelTags, this.$strings.LabelNarrator, this.$strings.LabelPublisher, this.$strings.LabelLanguage]
+    },
+    sublistItems() {
+      return (this[this.sublist] || []).map((item) => {
+        if (typeof item === 'string') {
+          return {
+            text: item,
+            value: this.$encode(item)
+          }
+        } else {
+          return {
+            text: item.name,
+            value: this.$encode(item.id)
+          }
+        }
+      })
+    },
+    filterData() {
+      return this.$store.state.libraries.filterData || {}
+    }
+  },
+  methods: {
+    clearSelected() {
+      this.selected = 'all'
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', 'all'))
+    },
+    clickOutside() {
+      if (!this.selectedItemSublist) this.sublist = null
+      this.showMenu = false
+    },
+    clickedSublistOption(item) {
+      this.clickedOption({ value: `${this.sublist}.${item}` })
+    },
+    clickedOption(option) {
+      if (option.sublist) {
+        this.sublist = option.value
+        return
+      }
+
+      var val = option.value
+      if (this.selected === val) {
+        this.showMenu = false
+        return
+      }
+      this.selected = val
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', val))
+    }
+  }
+}
+</script>

client/components/controls/LibrarySortSelect.vue

@@ -0,0 +1,182 @@
+<template>
+  <div ref="wrapper" class="relative" v-click-outside="clickOutside">
+    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+      <span class="flex items-center justify-between">
+        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
+        <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+      </span>
+    </button>
+
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+      <template v-for="item in selectItems">
+        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
+          <div class="flex items-center">
+            <span class="font-normal ml-3 block truncate text-xs">{{ item.text }}</span>
+          </div>
+          <span v-if="item.value === selected" class="text-yellow-400 absolute inset-y-0 right-0 flex items-center pr-4">
+            <span class="material-icons text-xl">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+          </span>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: String,
+    descending: Boolean
+  },
+  data() {
+    return {
+      showMenu: false
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selectedDesc: {
+      get() {
+        return this.descending
+      },
+      set(val) {
+        this.$emit('update:descending', val)
+      }
+    },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+    },
+    podcastItems() {
+      return [
+        {
+          text: this.$strings.LabelTitle,
+          value: 'media.metadata.title'
+        },
+        {
+          text: this.$strings.LabelAuthor,
+          value: 'media.metadata.author'
+        },
+        {
+          text: this.$strings.LabelAddedAt,
+          value: 'addedAt'
+        },
+        {
+          text: this.$strings.LabelSize,
+          value: 'size'
+        },
+        {
+          text: this.$strings.LabelNumberOfEpisodes,
+          value: 'media.numTracks'
+        },
+        {
+          text: this.$strings.LabelFileBirthtime,
+          value: 'birthtimeMs'
+        },
+        {
+          text: this.$strings.LabelFileModified,
+          value: 'mtimeMs'
+        }
+      ]
+    },
+    bookItems() {
+      return [
+        {
+          text: this.$strings.LabelTitle,
+          value: 'media.metadata.title'
+        },
+        {
+          text: this.$strings.LabelAuthorFirstLast,
+          value: 'media.metadata.authorName'
+        },
+        {
+          text: this.$strings.LabelAuthorLastFirst,
+          value: 'media.metadata.authorNameLF'
+        },
+        {
+          text: this.$strings.LabelPublishYear,
+          value: 'media.metadata.publishedYear'
+        },
+        {
+          text: this.$strings.LabelAddedAt,
+          value: 'addedAt'
+        },
+        {
+          text: this.$strings.LabelSize,
+          value: 'size'
+        },
+        {
+          text: this.$strings.LabelDuration,
+          value: 'media.duration'
+        },
+        {
+          text: this.$strings.LabelFileBirthtime,
+          value: 'birthtimeMs'
+        },
+        {
+          text: this.$strings.LabelFileModified,
+          value: 'mtimeMs'
+        }
+      ]
+    },
+    seriesItems() {
+      return [
+        ...this.bookItems,
+        {
+          text: this.$strings.LabelSequence,
+          value: 'sequence'
+        }
+      ]
+    },
+    selectItems() {
+      let items = null
+      if (this.isPodcast) {
+        items = this.podcastItems
+      } else if (this.$store.getters['user/getUserSetting']('filterBy').startsWith('series.')) {
+        items = this.seriesItems
+      } else {
+        items = this.bookItems
+      }
+
+      if (!items.some((i) => i.value === this.selected)) {
+        this.selected = items[0].value
+        this.selectedDesc = !this.defaultsToAsc(items[0].value)
+      }
+
+      return items
+    },
+    selectedText() {
+      var _selected = this.selected
+      if (!_selected) return ''
+      if (this.selected.startsWith('book.')) _selected = _selected.replace('book.', 'media.metadata.')
+      var _sel = this.selectItems.find((i) => i.value === _selected)
+      if (!_sel) return ''
+      return _sel.text
+    }
+  },
+  methods: {
+    clickOutside() {
+      this.showMenu = false
+    },
+    clickedOption(val) {
+      if (this.selected === val) {
+        this.selectedDesc = !this.selectedDesc
+      } else {
+        this.selected = val
+        if (this.defaultsToAsc(val)) this.selectedDesc = false
+      }
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', val))
+    },
+    defaultsToAsc(val) {
+      return val == 'media.metadata.title' || val == 'media.metadata.author' || val == 'media.metadata.authorName' || val == 'media.metadata.authorNameLF' || val == 'sequence'
+    }
+  }
+}
+</script>

client/components/controls/PlaybackSpeedControl.vue

@@ -1,30 +1,26 @@
 <template>
-  <div class="relative ml-8" v-click-outside="clickOutside">
-    <div class="flex items-center justify-center text-gray-300 cursor-pointer h-full" @mousedown.prevent @mouseup.prevent @click="showMenu = !showMenu">
-      <span class="font-mono uppercase text-gray-200">{{ playbackRate.toFixed(1) }}<span class="text-lg">⨯</span></span>
+  <div ref="wrapper" class="relative ml-4 sm:ml-8" v-click-outside="clickOutside">
+    <div class="flex items-center justify-center text-gray-300 cursor-pointer h-full" @mousedown.prevent @mouseup.prevent @click="setShowMenu(true)">
+      <span class="font-mono uppercase text-gray-200 text-sm sm:text-base">{{ playbackRate.toFixed(1) }}<span class="text-base sm:text-lg">⨯</span></span>
     </div>
-    <div v-show="showMenu" class="absolute -top-10 left-0 z-20 h-9 bg-bg border-black-200 border shadow-xl rounded-lg" style="left: -114px">
-      <div class="absolute -bottom-2 left-0 right-0 w-full flex justify-center">
+    <div v-show="showMenu" class="absolute -top-20 z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
+      <div class="absolute -bottom-1.5 right-0 w-full flex justify-center" :style="{ left: arrowLeft + 'px' }">
         <div class="arrow-down" />
       </div>
-
-      <div class="w-full h-full no-scroll flex px-7 relative overflow-hidden">
-        <div class="absolute left-0 top-0 h-full w-7 border-r border-black-300 bg-black-300 rounded-l-lg flex items-center justify-center cursor-pointer" :class="rateIndex === 0 ? 'bg-black-400 text-gray-400' : 'hover:bg-black-200'" @mousedown.prevent @mouseup.prevent @click="leftArrowClick">
-          <span class="material-icons" style="font-size: 1.2rem">chevron_left</span>
-        </div>
-        <div class="overflow-hidden relative" style="width: 220px">
-          <div class="flex items-center h-full absolute top-0 left-0 transition-transform duration-100" :style="{ transform: `translateX(${xPos}px)` }">
-            <template v-for="rate in rates">
-              <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border-r" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
-                <div class="w-full h-full flex justify-center items-center">
-                  <p class="text-xs text-center font-mono">{{ rate }}<span class="text-sm">⨯</span></p>
-                </div>
-              </div>
-            </template>
+      <div class="flex items-center h-9 relative overflow-hidden rounded-lg" style="width: 220px">
+        <template v-for="rate in rates">
+          <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border rounded-sm" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
+            <div class="w-full h-full flex justify-center items-center">
+              <p class="text-xs text-center font-mono">{{ rate }}<span class="text-sm">⨯</span></p>
+            </div>
           </div>
-        </div>
-        <div class="absolute top-0 right-0 h-full w-7 bg-black-300 rounded-r-lg flex items-center justify-center cursor-pointer" :class="rateIndex === rates.length - numVisible ? 'bg-black-400 text-gray-400' : 'hover:bg-black-200'" @mousedown.prevent @mouseup.prevent @click="rightArrowClick">
-          <span class="material-icons" style="font-size: 1.2rem">chevron_right</span>
+        </template>
+      </div>
+      <div class="w-full py-1 px-4">
+        <div class="flex items-center justify-between">
+          <ui-icon-btn :disabled="!canDecrement" icon="remove" @click="decrement" />
+          <p class="px-2 text-2xl sm:text-3xl">{{ playbackRate }}<span class="text-2xl">⨯</span></p>
+          <ui-icon-btn :disabled="!canIncrement" icon="add" @click="increment" />
         </div>
       </div>
     </div>
@@ -42,8 +38,11 @@ export default {
   data() {
     return {
       showMenu: false,
-      rateIndex: 1,
-      numVisible: 5
+      currentPlaybackRate: 0,
+      MIN_SPEED: 0.5,
+      MAX_SPEED: 3,
+      menuLeft: -92,
+      arrowLeft: 0
     }
   },
   computed: {
@@ -56,30 +55,58 @@ export default {
       }
     },
     rates() {
-      return [0.25, 0.5, 0.8, 1, 1.3, 1.5, 2, 2.5, 3]
+      return [0.5, 1, 1.2, 1.5, 2]
     },
-    xPos() {
-      return -1 * this.rateIndex * 44
+    canIncrement() {
+      return this.playbackRate + 0.1 <= this.MAX_SPEED
+    },
+    canDecrement() {
+      return this.playbackRate - 0.1 >= this.MIN_SPEED
     }
   },
   methods: {
     clickOutside() {
-      this.showMenu = false
+      this.setShowMenu(false)
     },
     set(rate) {
-      var newPlaybackRate = Number(rate)
-      var hasChanged = this.playbackRate !== newPlaybackRate
-      this.playbackRate = newPlaybackRate
-      if (hasChanged) this.$emit('change', newPlaybackRate)
-      this.showMenu = false
+      this.playbackRate = Number(rate)
+      this.$nextTick(() => this.setShowMenu(false))
     },
-    leftArrowClick() {
-      this.rateIndex = Math.max(0, this.rateIndex - 1)
+    increment() {
+      if (this.playbackRate + 0.1 > this.MAX_SPEED) return
+      var newPlaybackRate = this.playbackRate + 0.1
+      this.playbackRate = Number(newPlaybackRate.toFixed(1))
     },
-    rightArrowClick() {
-      this.rateIndex = Math.min(this.rates.length - this.numVisible, this.rateIndex + 1)
+    decrement() {
+      if (this.playbackRate - 0.1 < this.MIN_SPEED) return
+      var newPlaybackRate = this.playbackRate - 0.1
+      this.playbackRate = Number(newPlaybackRate.toFixed(1))
+    },
+    updateMenuPositions() {
+      if (!this.$refs.wrapper) return
+      const boundingBox = this.$refs.wrapper.getBoundingClientRect()
+
+      if (boundingBox.left + 110 > window.innerWidth - 10) {
+        this.menuLeft = window.innerWidth - 230 - boundingBox.left
+
+        this.arrowLeft = Math.abs(this.menuLeft) - 92
+      } else {
+        this.menuLeft = -92
+        this.arrowLeft = 0
+      }
+    },
+    setShowMenu(val) {
+      if (val) {
+        this.updateMenuPositions()
+        this.currentPlaybackRate = this.playbackRate
+      } else if (this.currentPlaybackRate !== this.playbackRate) {
+        this.$emit('change', this.playbackRate)
+      }
+      this.showMenu = val
     }
   },
-  mounted() {}
+  mounted() {
+    this.currentPlaybackRate = this.playbackRate
+  }
 }
 </script>

client/components/controls/SortSelect.vue

@@ -1,13 +1,13 @@
 <template>
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full h-full border border-gray-500 hover:border-gray-400 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
         <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
         <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
       </span>
     </button>
 
-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
+    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
       <template v-for="item in items">
         <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
           <div class="flex items-center">
@@ -26,41 +26,15 @@
 export default {
   props: {
     value: String,
-    descending: Boolean
+    descending: Boolean,
+    items: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {
-      showMenu: false,
-      items: [
-        {
-          text: 'Title',
-          value: 'book.title'
-        },
-        {
-          text: 'Author (First Last)',
-          value: 'book.authorFL'
-        },
-        {
-          text: 'Author (Last, First)',
-          value: 'book.authorLF'
-        },
-        {
-          text: 'Added At',
-          value: 'addedAt'
-        },
-        {
-          text: 'Volume #',
-          value: 'book.volumeNumber'
-        },
-        {
-          text: 'Duration',
-          value: 'duration'
-        },
-        {
-          text: 'Size',
-          value: 'size'
-        }
-      ]
+      showMenu: false
     }
   },
   computed: {
@@ -81,7 +55,8 @@ export default {
       }
     },
     selectedText() {
-      var _selected = this.selected === 'book.author' ? 'book.authorFL' : this.selected
+      var _selected = this.selected
+      if (!_selected) return ''
       var _sel = this.items.find((i) => i.value === _selected)
       if (!_sel) return ''
       return _sel.text

client/components/controls/VolumeControl.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative" v-click-outside="clickOutside" @mouseover="mouseover" @mouseleave="mouseleave">
-    <div class="cursor-pointer" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
-      <span class="material-icons text-3xl">{{ volumeIcon }}</span>
+    <div class="cursor-pointer text-gray-300 hover:text-white" @mousedown.prevent @mouseup.prevent @click="clickVolumeIcon">
+      <span class="material-icons text-2xl sm:text-3xl">{{ volumeIcon }}</span>
     </div>
     <transition name="menux">
       <div v-show="isOpen" class="volumeMenu h-6 absolute bottom-2 w-28 px-2 bg-bg shadow-sm rounded-lg" style="left: -116px">
@@ -37,6 +37,11 @@ export default {
         return this.value
       },
       set(val) {
+        try {
+          localStorage.setItem("volume", val);
+        } catch(error) {
+          console.error('Failed to store volume', err)
+        }
         this.$emit('input', val)
       }
     },
@@ -51,11 +56,25 @@ export default {
     }
   },
   methods: {
+    scroll(e) {
+      if (!e || !e.wheelDeltaY) return
+      if (e.wheelDeltaY > 0) {
+        this.volume = Math.min(1, this.volume + 0.1)
+      } else {
+        this.volume = Math.max(0, this.volume - 0.1)
+      }
+    },
     mouseover() {
+      if (!this.isHovering) {
+        window.addEventListener('mousewheel', this.scroll)
+      }
       this.isHovering = true
       this.setOpen()
     },
     mouseleave() {
+      if (this.isHovering) {
+        window.removeEventListener('mousewheel', this.scroll)
+      }
       this.isHovering = false
     },
     setOpen() {
@@ -127,6 +146,15 @@ export default {
     if (this.value === 0) {
       this.isMute = true
     }
+    const storageVolume = localStorage.getItem("volume")
+    if (storageVolume) {
+      this.volume = parseFloat(storageVolume)
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('mousewheel', this.scroll)
+    document.body.removeEventListener('mousemove', this.mousemove)
+    document.body.removeEventListener('mouseup', this.mouseup)
   }
 }
 </script>

client/components/covers/AuthorImage.vue

@@ -0,0 +1,87 @@
+<template>
+  <div ref="wrapper" :class="`rounded-${rounded}`" class="w-full h-full bg-primary overflow-hidden">
+    <svg v-if="!imagePath" width="140%" height="140%" style="margin-left: -20%; margin-top: -20%; opacity: 0.6" viewBox="0 0 177 266" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill="white" d="M40.7156 165.47C10.2694 150.865 -31.5407 148.629 -38.0532 155.529L63.3191 204.159L76.9443 190.899C66.828 181.394 54.006 171.846 40.7156 165.47Z" stroke="white" stroke-width="4" transform="translate(-2 -1)" />
+      <path d="M-38.0532 155.529C-31.5407 148.629 10.2694 150.865 40.7156 165.47C54.006 171.846 66.828 181.394 76.9443 190.899L95.0391 173.37C80.6681 159.403 64.7526 149.155 51.5747 142.834C21.3549 128.337 -46.2471 114.563 -60.6897 144.67L-71.5489 167.307L44.5864 223.019L63.3191 204.159L-38.0532 155.529Z" fill="white" />
+      <path
+        d="M105.87 29.6508C80.857 17.6515 50.8784 28.1923 38.879 53.2056C26.8797 78.219 37.4205 108.198 62.4338 120.197C87.4472 132.196 117.426 121.656 129.425 96.6422C141.425 71.6288 130.884 41.6502 105.87 29.6508ZM106.789 85.783C112.761 73.3329 107.461 58.2599 95.0112 52.2874C82.5611 46.3148 67.4881 51.6147 61.5156 64.0648C55.543 76.5149 60.8429 91.5879 73.293 97.5604C85.7431 103.533 100.816 98.2331 106.789 85.783Z"
+        fill="white"
+      />
+      <path
+        d="M151.336 159.01L159.048 166.762L82.7048 242.703L74.973 242.683L74.9934 234.951L151.336 159.01ZM181.725 108.497C179.624 108.491 177.436 109.326 175.835 110.918L160.415 126.257L191.848 157.856L207.268 142.517C210.554 139.248 210.568 133.954 207.299 130.667L187.685 110.95C186.009 109.264 183.91 108.502 181.725 108.497ZM151.399 135.226L58.2034 227.931L58.1203 259.447L89.6359 259.53L182.831 166.825L151.399 135.226Z"
+        fill="white"
+      />
+      <path d="M151.336 159.01L159.048 166.762L82.7048 242.703L74.973 242.683L74.9934 234.951L151.336 159.01Z" fill="white" stroke="white" stroke-width="10px" />
+    </svg>
+    <div v-else class="w-full h-full relative">
+      <div v-if="showCoverBg" class="cover-bg absolute" :style="{ backgroundImage: `url(${imgSrc})` }" />
+      <img ref="img" :src="imgSrc" @load="imageLoaded" class="absolute top-0 left-0 h-full w-full" :class="coverContain ? 'object-contain' : 'object-cover'" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    author: {
+      type: Object,
+      default: () => {}
+    },
+    rounded: {
+      type: String,
+      default: 'lg'
+    }
+  },
+  data() {
+    return {
+      showCoverBg: false,
+      coverContain: true
+    }
+  },
+  computed: {
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
+    _author() {
+      return this.author || {}
+    },
+    authorId() {
+      return this._author.id
+    },
+    imagePath() {
+      return this._author.imagePath
+    },
+    updatedAt() {
+      return this._author.updatedAt
+    },
+    imgSrc() {
+      if (!this.imagePath) return null
+      if (process.env.NODE_ENV !== 'production') {
+        // Testing
+        return `http://localhost:3333${this.$config.routerBasePath}/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
+      }
+      return `/api/authors/${this.authorId}/image?token=${this.userToken}&ts=${this.updatedAt}`
+    }
+  },
+  methods: {
+    imageLoaded() {
+      var aspectRatio = 1.25
+      if (this.$refs.wrapper) {
+        aspectRatio = this.$refs.wrapper.clientHeight / this.$refs.wrapper.clientWidth
+      }
+      if (this.$refs.img) {
+        var { naturalWidth, naturalHeight } = this.$refs.img
+        var imgAr = naturalHeight / naturalWidth
+        var arDiff = Math.abs(imgAr - aspectRatio)
+        if (arDiff > 0.15) {
+          this.showCoverBg = true
+        } else {
+          this.showCoverBg = false
+          this.coverContain = false
+        }
+      }
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/covers/BookCover.vue

@@ -1,25 +1,32 @@
 <template>
-  <div class="relative rounded-sm overflow-hidden" :style="{ height: width * 1.6 + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
-    <div class="w-full h-full relative">
-      <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
-        <div class="w-full h-full z-0" ref="coverBg" />
+  <div class="relative rounded-sm overflow-hidden" :style="{ height: height + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
+    <div class="w-full h-full relative bg-bg">
+      <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
+        <div class="absolute cover-bg" ref="coverBg" />
+      </div>
+
+      <img v-if="libraryItem" ref="cover" :src="fullCoverUrl" loading="lazy" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0 z-10 duration-300 transition-opacity" :style="{ opacity: imageReady ? '1' : '0' }" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
+      <div v-show="loading && libraryItem" class="absolute top-0 left-0 h-full w-full flex items-center justify-center">
+        <p class="font-book text-center" :style="{ fontSize: 0.75 * sizeMultiplier + 'rem' }">{{ title }}</p>
+        <div class="absolute top-2 right-2">
+          <widgets-loading-spinner />
+        </div>
       </div>
-      <img ref="cover" :src="fullCoverUrl" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
     </div>
 
     <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
-        <img src="/Logo.png" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
+        <img src="/Logo.png" loading="lazy" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
         <p class="text-center font-book text-error" :style="{ fontSize: titleFontSize + 'rem' }">Invalid Cover</p>
       </div>
     </div>
 
-    <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
+    <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem' }">
       <div>
         <p class="text-center font-book" style="color: rgb(247 223 187)" :style="{ fontSize: titleFontSize + 'rem' }">{{ titleCleaned }}</p>
       </div>
     </div>
-    <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
+    <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center z-10" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
       <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
     </div>
   </div>
@@ -28,20 +35,22 @@
 <script>
 export default {
   props: {
-    audiobook: {
+    libraryItem: {
       type: Object,
       default: () => {}
     },
-    authorOverride: String,
     width: {
       type: Number,
       default: 120
-    }
+    },
+    bookCoverAspectRatio: Number
   },
   data() {
     return {
+      loading: true,
       imageFailed: false,
-      showCoverBg: false
+      showCoverBg: false,
+      imageReady: false
     }
   },
   watch: {
@@ -50,11 +59,21 @@ export default {
     }
   },
   computed: {
-    book() {
-      return this.audiobook.book || {}
+    squareAspectRatio() {
+      return this.bookCoverAspectRatio === 1
+    },
+    height() {
+      return this.width * this.bookCoverAspectRatio
+    },
+    media() {
+      if (!this.libraryItem) return {}
+      return this.libraryItem.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
     },
     title() {
-      return this.book.title || 'No Title'
+      return this.mediaMetadata.title || 'No Title'
     },
     titleCleaned() {
       if (this.title.length > 60) {
@@ -62,9 +81,11 @@ export default {
       }
       return this.title
     },
+    authors() {
+      return this.mediaMetadata.authors || []
+    },
     author() {
-      if (this.authorOverride) return this.authorOverride
-      return this.book.author || 'Unknown'
+      return this.authors.map((au) => au.name).join(', ')
     },
     authorCleaned() {
       if (this.author.length > 30) {
@@ -73,19 +94,23 @@ export default {
       return this.author
     },
     placeholderUrl() {
-      return '/book_placeholder.jpg'
+      const config = this.$config || this.$nuxt.$config
+      return `${config.routerBasePath}/book_placeholder.jpg`
     },
     fullCoverUrl() {
-      return this.$store.getters['audiobooks/getBookCoverSrc'](this.audiobook, this.placeholderUrl)
+      if (!this.libraryItem) return null
+      var store = this.$store || this.$nuxt.$store
+      return store.getters['globals/getLibraryItemCoverSrc'](this.libraryItem, this.placeholderUrl)
     },
     cover() {
-      return this.book.cover || this.placeholderUrl
+      return this.media.coverPath || this.placeholderUrl
     },
     hasCover() {
-      return !!this.book.cover
+      return !!this.media.coverPath
     },
     sizeMultiplier() {
-      return this.width / 120
+      var baseSize = this.squareAspectRatio ? 192 : 120
+      return this.width / baseSize
     },
     titleFontSize() {
       return 0.75 * this.sizeMultiplier
@@ -101,24 +126,27 @@ export default {
     },
     userToken() {
       return this.$store.getters['user/getToken']
+    },
+    resolution() {
+      return `${this.naturalWidth}x${this.naturalHeight}px`
     }
   },
   methods: {
     setCoverBg() {
       if (this.$refs.coverBg) {
         this.$refs.coverBg.style.backgroundImage = `url("${this.fullCoverUrl}")`
-        this.$refs.coverBg.style.backgroundSize = 'cover'
-        this.$refs.coverBg.style.backgroundPosition = 'center'
-        this.$refs.coverBg.style.opacity = 0.25
-        this.$refs.coverBg.style.filter = 'blur(1px)'
       }
     },
-    hideCoverBg() {},
     imageLoaded() {
+      this.loading = false
+      this.$nextTick(() => {
+        this.imageReady = true
+      })
+
       if (this.$refs.cover && this.cover !== this.placeholderUrl) {
         var { naturalWidth, naturalHeight } = this.$refs.cover
         var aspectRatio = naturalHeight / naturalWidth
-        var arDiff = Math.abs(aspectRatio - 1.6)
+        var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
 
         // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
         if (arDiff > 0.15) {
@@ -130,10 +158,12 @@ export default {
       }
     },
     imageError(err) {
+      this.loading = false
       console.error('ImgError', err)
       this.imageFailed = true
     }
   },
   mounted() {}
 }
-</script>
+</script>
+

client/components/covers/CollectionCover.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="relative rounded-sm overflow-hidden" :style="{ width: width + 'px', height: height + 'px' }">
+    <!-- <div class="absolute top-0 left-0 w-full h-full rounded-sm overflow-hidden z-10">
+      <div class="w-full h-full border border-white border-opacity-10" />
+    </div> -->
+
+    <div v-if="hasOwnCover" class="w-full h-full relative rounded-sm">
+      <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
+        <div class="w-full h-full z-0" ref="coverBg" />
+      </div>
+      <img ref="cover" :src="fullCoverUrl" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
+    </div>
+    <div v-else-if="books.length" class="flex justify-center h-full relative bg-primary bg-opacity-95 rounded-sm">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
+
+      <covers-book-cover :library-item="books[0]" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      <covers-book-cover v-if="books.length > 1" :library-item="books[1]" :width="width / 2" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+    <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-sm">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
+
+      <p class="font-book text-white text-opacity-60 text-center" :style="{ fontSize: Math.min(1, sizeMultiplier) + 'rem' }">Empty Collection</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    bookItems: {
+      type: Array,
+      default: () => []
+    },
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      imageFailed: false,
+      showCoverBg: false
+    }
+  },
+  computed: {
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
+    },
+    hasOwnCover() {
+      return false
+    },
+    fullCoverUrl() {
+      return null
+    },
+    books() {
+      return this.bookItems || []
+    }
+  },
+  methods: {
+    imageError() {},
+    imageLoaded() {}
+  },
+  mounted() {}
+}
+</script>

client/components/covers/GroupCover.vue

@@ -0,0 +1,211 @@
+<template>
+  <div ref="wrapper" :style="{ height: height + 'px', width: width + 'px' }" class="relative">
+    <div v-if="noValidCovers" class="absolute top-0 left-0 w-full h-full flex items-center justify-center box-shadow-book" :style="{ padding: `${sizeMultiplier}rem` }">
+      <p :style="{ fontSize: sizeMultiplier + 'rem' }">{{ name }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    id: String,
+    name: String,
+    bookItems: {
+      type: Array,
+      default: () => []
+    },
+    width: Number,
+    height: Number,
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      noValidCovers: false,
+      coverDiv: null,
+      isHovering: false,
+      coverWrapperEl: null,
+      coverImageEls: [],
+      coverWidth: 0,
+      offsetIncrement: 0,
+      isFannedOut: false,
+      isDetached: false,
+      isAttaching: false,
+      isInit: false
+    }
+  },
+  watch: {
+    bookItems: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          // ensure wrapper is initialized
+          this.$nextTick(this.init)
+        }
+      }
+    },
+    width: {
+      handler(newVal) {
+        if (newVal) {
+          this.isInit = false
+          this.$nextTick(this.init)
+        }
+      }
+    }
+  },
+  computed: {
+    sizeMultiplier() {
+      if (this.bookCoverAspectRatio === 1) return this.width / (120 * 1.6 * 2)
+      return this.width / 240
+    },
+    store() {
+      return this.$store || this.$nuxt.$store
+    },
+    router() {
+      return this.$router || this.$nuxt.$router
+    }
+  },
+  methods: {
+    getCoverUrl(book) {
+      return this.store.getters['globals/getLibraryItemCoverSrc'](book, '')
+    },
+    async buildCoverImg(coverData, bgCoverWidth, offsetLeft, zIndex, forceCoverBg = false) {
+      var src = coverData.coverUrl
+
+      var showCoverBg =
+        forceCoverBg ||
+        (await new Promise((resolve) => {
+          var image = new Image()
+
+          image.onload = () => {
+            var { naturalWidth, naturalHeight } = image
+            var aspectRatio = naturalHeight / naturalWidth
+            var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
+
+            // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
+            if (arDiff > 0.15) {
+              resolve(true)
+            } else {
+              resolve(false)
+            }
+          }
+          image.onerror = (err) => {
+            console.error(err)
+            resolve(false)
+          }
+          image.src = src
+        }))
+
+      var imgdiv = document.createElement('div')
+      imgdiv.style.height = this.height + 'px'
+      imgdiv.style.width = bgCoverWidth + 'px'
+      imgdiv.style.left = offsetLeft + 'px'
+      imgdiv.style.zIndex = zIndex
+      imgdiv.dataset.audiobookId = coverData.id
+      imgdiv.dataset.volumeNumber = coverData.volumeNumber || ''
+      imgdiv.className = 'absolute top-0 box-shadow-book transition-transform'
+      imgdiv.style.boxShadow = '4px 0px 4px #11111166'
+      // imgdiv.style.transform = 'skew(0deg, 15deg)'
+
+      if (showCoverBg) {
+        var coverbgwrapper = document.createElement('div')
+        coverbgwrapper.className = 'absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary'
+
+        var coverbg = document.createElement('div')
+        coverbg.className = 'absolute cover-bg'
+        coverbg.style.backgroundImage = `url("${src}")`
+
+        coverbgwrapper.appendChild(coverbg)
+        imgdiv.appendChild(coverbgwrapper)
+      }
+
+      var img = document.createElement('img')
+      img.src = src
+      img.className = 'absolute top-0 left-0 w-full h-full'
+      img.style.objectFit = showCoverBg ? 'contain' : 'cover'
+
+      imgdiv.appendChild(img)
+      return imgdiv
+    },
+    createSeriesNameCover(offsetLeft) {
+      var imgdiv = document.createElement('div')
+      imgdiv.style.height = this.height + 'px'
+      imgdiv.style.width = this.height / this.bookCoverAspectRatio + 'px'
+      imgdiv.style.left = offsetLeft + 'px'
+      imgdiv.className = 'absolute top-0 box-shadow-book transition-transform flex items-center justify-center'
+      imgdiv.style.boxShadow = '4px 0px 4px #11111166'
+      imgdiv.style.backgroundColor = '#111'
+
+      var innerP = document.createElement('p')
+      innerP.textContent = this.name
+      innerP.className = 'text-sm font-book text-white'
+      imgdiv.appendChild(innerP)
+
+      return imgdiv
+    },
+    async init() {
+      if (this.isInit) return
+      this.isInit = true
+
+      if (this.coverDiv) {
+        this.coverDiv.remove()
+        this.coverDiv = null
+      }
+      var validCovers = this.bookItems
+        .map((bookItem) => {
+          return {
+            id: bookItem.id,
+            coverUrl: this.getCoverUrl(bookItem)
+          }
+        })
+        .filter((b) => b.coverUrl !== '')
+      if (!validCovers.length) {
+        this.noValidCovers = true
+        return
+      }
+      this.noValidCovers = false
+
+      validCovers = validCovers.slice(0, 10)
+
+      var coverWidth = this.width
+      var widthPer = this.width
+      if (validCovers.length > 1) {
+        coverWidth = this.height / this.bookCoverAspectRatio
+        widthPer = (this.width - coverWidth) / (validCovers.length - 1)
+      }
+      this.coverWidth = coverWidth
+      this.offsetIncrement = widthPer
+
+      var outerdiv = document.createElement('div')
+      outerdiv.id = `group-cover-${this.id}`
+      this.coverWrapperEl = outerdiv
+      outerdiv.className = 'w-full h-full relative box-shadow-book'
+
+      var coverImageEls = []
+      var offsetLeft = 0
+      for (let i = 0; i < validCovers.length; i++) {
+        offsetLeft = widthPer * i
+        var zIndex = validCovers.length - i
+        var img = await this.buildCoverImg(validCovers[i], coverWidth, offsetLeft, zIndex, validCovers.length === 1)
+        outerdiv.appendChild(img)
+        coverImageEls.push(img)
+      }
+
+      this.coverImageEls = coverImageEls
+
+      if (this.$refs.wrapper) {
+        this.coverDiv = outerdiv
+        this.$refs.wrapper.appendChild(outerdiv)
+      }
+    }
+  },
+  mounted() {},
+  beforeDestroy() {
+    if (this.coverWrapperEl) this.coverWrapperEl.remove()
+    if (this.coverImageEls && this.coverImageEls.length) {
+      this.coverImageEls.forEach((el) => el.remove())
+    }
+    if (this.coverDiv) this.coverDiv.remove()
+  }
+}
+</script>

client/components/covers/PlaylistCover.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="relative rounded-sm overflow-hidden" :style="{ width: width + 'px', height: height + 'px' }">
+    <div v-if="items.length" class="flex flex-wrap justify-center h-full relative bg-primary bg-opacity-95 rounded-sm">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
+      <covers-book-cover v-for="(li, index) in libraryItemCovers" :key="index" :library-item="li" :width="itemCoverWidth" :book-cover-aspect-ratio="1" />
+    </div>
+    <div v-else class="relative w-full h-full flex items-center justify-center p-2 bg-primary rounded-sm">
+      <div class="absolute top-0 left-0 w-full h-full bg-gray-400 bg-opacity-5" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    width: Number,
+    height: Number
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    sizeMultiplier() {
+      return this.width / (120 * 1.6 * 2)
+    },
+    itemCoverWidth() {
+      if (this.libraryItemCovers.length === 1) return this.width
+      return this.width / 2
+    },
+    libraryItemCovers() {
+      if (!this.items.length) return []
+      if (this.items.length === 1) return [this.items[0].libraryItem]
+
+      const covers = []
+      for (let i = 0; i < 4; i++) {
+        let index = i % this.items.length
+        if (this.items.length === 2 && i >= 2) index = (i + 1) % 2 // for playlists with 2 items show covers in checker pattern
+
+        covers.push(this.items[index].libraryItem)
+      }
+      return covers
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/covers/PreviewCover.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="relative rounded-sm overflow-hidden" :style="{ height: width * 1.6 + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }" @mouseover="isHovering = true" @mouseleave="isHovering = false">
-    <div class="w-full h-full relative">
-      <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
-        <div class="w-full h-full z-0" ref="coverBg" />
+  <div class="relative rounded-sm" :style="{ height: width * bookCoverAspectRatio + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }" @mouseover="isHovering = true" @mouseleave="isHovering = false">
+    <div class="w-full h-full relative overflow-hidden">
+      <div v-show="showCoverBg" class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-sm bg-primary">
+        <div class="absolute cover-bg" ref="coverBg" />
       </div>
-      <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
+      <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-fill'" />
 
       <a v-if="!imageFailed && showOpenNewTab && isHovering" :href="cover" @click.stop target="_blank" class="absolute bg-primary flex items-center justify-center shadow-sm rounded-full hover:scale-110 transform duration-100" :style="{ top: sizeMultiplier * 0.5 + 'rem', right: sizeMultiplier * 0.5 + 'rem', width: 2.5 * sizeMultiplier + 'rem', height: 2.5 * sizeMultiplier + 'rem' }">
         <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
@@ -17,6 +17,8 @@
         <p class="text-center font-book text-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
       </div>
     </div>
+
+    <p v-if="!imageFailed && showResolution" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
   </div>
 </template>
 
@@ -28,7 +30,12 @@ export default {
       type: Number,
       default: 120
     },
-    showOpenNewTab: Boolean
+    showOpenNewTab: Boolean,
+    bookCoverAspectRatio: Number,
+    showResolution: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -53,26 +60,28 @@ export default {
     },
     placeholderCoverPadding() {
       return 0.8 * this.sizeMultiplier
+    },
+    resolution() {
+      return `${this.naturalWidth}x${this.naturalHeight}px`
+    },
+    placeholderUrl() {
+      return `${this.$config.routerBasePath}/book_placeholder.jpg`
     }
   },
   methods: {
     setCoverBg() {
       if (this.$refs.coverBg) {
         this.$refs.coverBg.style.backgroundImage = `url("${this.src}")`
-        this.$refs.coverBg.style.backgroundSize = 'cover'
-        this.$refs.coverBg.style.backgroundPosition = 'center'
-        this.$refs.coverBg.style.opacity = 0.25
-        this.$refs.coverBg.style.filter = 'blur(1px)'
       }
     },
     imageLoaded() {
-      if (this.$refs.cover) {
+      if (this.$refs.cover && this.src !== this.placeholderUrl) {
         var { naturalWidth, naturalHeight } = this.$refs.cover
         this.naturalHeight = naturalHeight
         this.naturalWidth = naturalWidth
 
         var aspectRatio = naturalHeight / naturalWidth
-        var arDiff = Math.abs(aspectRatio - 1.6)
+        var arDiff = Math.abs(aspectRatio - this.bookCoverAspectRatio)
 
         // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
         if (arDiff > 0.15) {

client/components/modals/AccountModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <modals-modal v-model="show" name="account" :width="800" :height="'unset'" :processing="processing">
+  <modals-modal ref="modal" v-model="show" name="account" :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">{{ title }}</p>
@@ -8,30 +8,30 @@
     <form @submit.prevent="submitForm">
       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
         <div class="w-full p-8">
-          <div class="flex py-2 -mx-2">
+          <div class="flex py-2">
             <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-model="newUser.username" label="Username" class="mx-2" />
+              <ui-text-input-with-label v-model="newUser.username" :label="$strings.LabelUsername" />
             </div>
             <div class="w-1/2 px-2">
-              <ui-text-input-with-label v-if="!isEditingRoot" v-model="newUser.password" :label="isNew ? 'Password' : 'Change Password'" type="password" class="mx-2" />
+              <ui-text-input-with-label v-if="!isEditingRoot" v-model="newUser.password" :label="isNew ? $strings.LabelPassword : $strings.LabelChangePassword" type="password" />
             </div>
           </div>
-          <div class="flex py-2">
-            <div class="px-2">
-              <ui-input-dropdown v-model="newUser.type" label="Account Type" :disabled="isEditingRoot" :editable="false" :items="accountTypes" @input="userTypeUpdated" />
+          <div v-show="!isEditingRoot" class="flex py-2">
+            <div class="px-2 w-52">
+              <ui-dropdown v-model="newUser.type" :label="$strings.LabelAccountType" :disabled="isEditingRoot" :items="accountTypes" @input="userTypeUpdated" />
             </div>
             <div class="flex-grow" />
-            <div v-show="!isEditingRoot" class="flex items-center pt-4 px-2">
-              <p class="px-3 font-semibold" :class="isEditingRoot ? 'text-gray-300' : ''">Is Active</p>
+            <div class="flex items-center pt-4 px-2">
+              <p class="px-3 font-semibold" :class="isEditingRoot ? 'text-gray-300' : ''">{{ $strings.LabelEnable }}</p>
               <ui-toggle-switch v-model="newUser.isActive" :disabled="isEditingRoot" />
             </div>
           </div>
 
           <div v-if="!isEditingRoot && newUser.permissions" class="w-full border-t border-b border-black-200 py-2 px-3 mt-4">
-            <p class="text-lg mb-2 font-semibold">Permissions</p>
+            <p class="text-lg mb-2 font-semibold">{{ $strings.HeaderPermissions }}</p>
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Download</p>
+                <p>{{ $strings.LabelPermissionsDownload }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.download" />
@@ -40,7 +40,7 @@
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Update</p>
+                <p>{{ $strings.LabelPermissionsUpdate }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.update" />
@@ -49,7 +49,7 @@
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Delete</p>
+                <p>{{ $strings.LabelPermissionsDelete }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.delete" />
@@ -58,7 +58,7 @@
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Upload</p>
+                <p>{{ $strings.LabelPermissionsUpload }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.upload" />
@@ -67,7 +67,16 @@
 
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
-                <p>Can Access All Libraries</p>
+                <p>{{ $strings.LabelPermissionsAccessExplicitContent }}</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>{{ $strings.LabelPermissionsAccessAllLibraries }}</p>
               </div>
               <div class="w-1/2">
                 <ui-toggle-switch v-model="newUser.permissions.accessAllLibraries" @input="accessAllLibrariesToggled" />
@@ -75,13 +84,26 @@
             </div>
 
             <div v-if="!newUser.permissions.accessAllLibraries" class="my-4">
-              <ui-multi-select-dropdown v-model="newUser.librariesAccessible" :items="libraryItems" label="Libraries Accessible to User" />
+              <ui-multi-select-dropdown v-model="newUser.librariesAccessible" :items="libraryItems" :label="$strings.LabelLibrariesAccessibleToUser" />
+            </div>
+
+            <div class="flex items-cen~ter my-2 max-w-md">
+              <div class="w-1/2">
+                <p>{{ $strings.LabelPermissionsAccessAllTags }}</p>
+              </div>
+              <div class="w-1/2">
+                <ui-toggle-switch v-model="newUser.permissions.accessAllTags" @input="accessAllTagsToggled" />
+              </div>
+            </div>
+            <div v-if="!newUser.permissions.accessAllTags" class="my-4">
+              <ui-multi-select-dropdown v-model="newUser.itemTagsAccessible" :items="itemTags" :label="$strings.LabelTagsAccessibleToUser" />
             </div>
           </div>
 
-          <div class="flex pt-4">
+          <div class="flex pt-4 px-2">
+            <ui-btn v-if="isEditingRoot" to="/account">{{ $strings.ButtonChangeRootPassword }}</ui-btn>
             <div class="flex-grow" />
-            <ui-btn color="success" type="submit">Submit</ui-btn>
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
           </div>
         </div>
       </div>
@@ -103,7 +125,8 @@ export default {
       processing: false,
       newUser: {},
       isNew: true,
-      accountTypes: ['guest', 'user', 'admin']
+      tags: [],
+      loadingTags: false
     }
   },
   watch: {
@@ -124,8 +147,27 @@ export default {
         this.$emit('input', val)
       }
     },
+    accountTypes() {
+      return [
+        {
+          text: this.$strings.LabelAccountTypeGuest,
+          value: 'guest'
+        },
+        {
+          text: this.$strings.LabelAccountTypeUser,
+          value: 'user'
+        },
+        {
+          text: this.$strings.LabelAccountTypeAdmin,
+          value: 'admin'
+        }
+      ]
+    },
+    user() {
+      return this.$store.state.user.user
+    },
     title() {
-      return this.isNew ? 'Add New Account' : `Update Account: ${(this.account || {}).username}`
+      return this.isNew ? this.$strings.HeaderNewAccount : this.$strings.HeaderUpdateAccount
     },
     isEditingRoot() {
       return this.account && this.account.type === 'root'
@@ -135,9 +177,39 @@ export default {
     },
     libraryItems() {
       return this.libraries.map((lib) => ({ text: lib.name, value: lib.id }))
+    },
+    itemTags() {
+      return this.tags.map((t) => {
+        return {
+          text: t,
+          value: t
+        }
+      })
     }
   },
   methods: {
+    close() {
+      // Force close when navigating - used in UsersTable
+      if (this.$refs.modal) this.$refs.modal.setHide()
+    },
+    accessAllTagsToggled(val) {
+      if (val && this.newUser.itemTagsAccessible.length) {
+        this.newUser.itemTagsAccessible = []
+      }
+    },
+    fetchAllTags() {
+      this.loadingTags = true
+      this.$axios
+        .$get(`/api/tags`)
+        .then((tags) => {
+          this.tags = tags
+          this.loadingTags = false
+        })
+        .catch((error) => {
+          console.error('Failed to load tags', error)
+          this.loadingTags = false
+        })
+    },
     accessAllLibrariesToggled(val) {
       if (!val && !this.newUser.librariesAccessible.length) {
         this.newUser.librariesAccessible = this.libraries.map((l) => l.id)
@@ -154,6 +226,10 @@ export default {
         this.$toast.error('Must select at least one library')
         return
       }
+      if (!this.newUser.permissions.accessAllTags && !this.newUser.itemTagsAccessible.length) {
+        this.$toast.error('Must select at least one tag')
+        return
+      }
 
       if (this.isNew) {
         this.submitCreateAccount()
@@ -171,14 +247,20 @@ export default {
       this.processing = true
       console.log('Calling update', account)
       this.$axios
-        .$patch(`/api/user/${this.account.id}`, account)
+        .$patch(`/api/users/${this.account.id}`, account)
         .then((data) => {
           this.processing = false
           if (data.error) {
-            this.$toast.error(`Failed to update account: ${data.error}`)
+            this.$toast.error(`${this.$strings.ToastAccountUpdateFailed}: ${data.error}`)
           } else {
             console.log('Account updated', data.user)
-            this.$toast.success('Account updated')
+
+            if (data.user.id === this.user.id && data.user.token !== this.user.token) {
+              console.log('Current user token was updated')
+              this.$store.commit('user/setUserToken', data.user.token)
+            }
+
+            this.$toast.success(this.$strings.ToastAccountUpdateSuccess)
             this.show = false
           }
         })
@@ -198,7 +280,7 @@ export default {
       var account = { ...this.newUser }
       this.processing = true
       this.$axios
-        .$post('/api/user', account)
+        .$post('/api/users', account)
         .then((data) => {
           this.processing = false
           if (data.error) {
@@ -223,20 +305,24 @@ export default {
         download: type !== 'guest',
         update: type === 'admin',
         delete: type === 'admin',
-        upload: type === 'admin'
+        upload: type === 'admin',
+        accessAllLibraries: true,
+        accessAllTags: true
       }
     },
     init() {
+      this.fetchAllTags()
+
       this.isNew = !this.account
       if (this.account) {
-        var librariesAccessible = this.account.librariesAccessible || []
         this.newUser = {
           username: this.account.username,
           password: this.account.password,
           type: this.account.type,
           isActive: this.account.isActive,
           permissions: { ...this.account.permissions },
-          librariesAccessible: [...librariesAccessible]
+          librariesAccessible: [...(this.account.librariesAccessible || [])],
+          itemTagsAccessible: [...(this.account.itemTagsAccessible || [])]
         }
       } else {
         this.newUser = {
@@ -249,7 +335,8 @@ export default {
             update: false,
             delete: false,
             upload: false,
-            accessAllLibraries: true
+            accessAllLibraries: true,
+            accessAllTags: true
           },
           librariesAccessible: []
         }

client/components/modals/BackupScheduleModal.vue

@@ -0,0 +1,91 @@
+<template>
+  <modals-modal v-model="show" name="backup-scheduler" :width="700" :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">{{ $strings.HeaderSetBackupSchedule }}</p>
+      </div>
+    </template>
+    <div v-if="show && newCronExpression" class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <widgets-cron-expression-builder ref="expressionBuilder" v-model="newCronExpression" @input="expressionUpdated" />
+
+      <div class="flex items-center justify-end">
+        <ui-btn :disabled="!isUpdated" @click="submit">{{ isUpdated ? $strings.ButtonSave : $strings.MessageNoUpdateNecessary }}</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    cronExpression: {
+      type: String,
+      default: '* * * * *'
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newCronExpression: null,
+      isUpdated: false
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    expressionUpdated() {
+      this.isUpdated = this.newCronExpression !== this.cronExpression
+    },
+    init() {
+      this.newCronExpression = this.cronExpression
+      this.isUpdated = false
+    },
+    submit() {
+      // If custom expression input is focused then unfocus it instead of submitting
+      if (this.$refs.expressionBuilder && this.$refs.expressionBuilder.checkBlurExpressionInput) {
+        if (this.$refs.expressionBuilder.checkBlurExpressionInput()) {
+          return
+        }
+      }
+
+      this.processing = true
+
+      var updatePayload = {
+        backupSchedule: this.newCronExpression
+      }
+      this.$store
+        .dispatch('updateServerSettings', updatePayload)
+        .then((success) => {
+          console.log('Updated Server Settings', success)
+          this.processing = false
+          this.show = false
+          this.$emit('update:cronExpression', this.newCronExpression)
+        })
+        .catch((error) => {
+          console.error('Failed to update server settings', error)
+          this.processing = false
+        })
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>

client/components/modals/BatchQuickMatchModel.vue

@@ -0,0 +1,135 @@
+<template>
+  <modals-modal v-model="show" name="batchQuickMatch" :processing="processing" :width="500" :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">{{ title }}</p>
+      </div>
+    </template>
+
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div v-if="show" class="w-full h-full py-4">
+        <div class="w-full overflow-y-auto overflow-x-hidden max-h-96">
+          <div class="flex px-8 items-center py-2">
+            <p class="pr-4">{{ $strings.LabelProvider }}</p>
+            <ui-dropdown v-model="options.provider" :items="providers" small />
+          </div>
+          <p class="text-base px-8 py-2">{{ $strings.MessageBatchQuickMatchDescription }}</p>
+          <div class="flex px-8 items-end py-2">
+            <ui-toggle-switch v-model="options.overrideCover" />
+            <ui-tooltip :text="$strings.LabelUpdateCoverHelp">
+              <p class="pl-4">
+                {{ $strings.LabelUpdateCover }}
+                <span class="material-icons icon-text">info_outlined</span>
+              </p>
+            </ui-tooltip>
+          </div>
+          <div class="flex px-8 items-end py-2">
+            <ui-toggle-switch v-model="options.overrideDetails" />
+            <ui-tooltip :text="$strings.LabelUpdateDetailsHelp">
+              <p class="pl-4">
+                {{ $strings.LabelUpdateDetails }}
+                <span class="material-icons icon-text">info_outlined</span>
+              </p>
+            </ui-tooltip>
+          </div>
+          <div class="mt-4 pt-4 text-white text-opacity-80 border-t border-white border-opacity-5">
+            <div class="flex items-center px-4">
+              <ui-btn type="button" @click="show = false">{{ $strings.ButtonCancel }}</ui-btn>
+              <div class="flex-grow" />
+              <ui-btn color="success" @click="doBatchQuickMatch">{{ $strings.ButtonSubmit }}</ui-btn>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      processing: false,
+      lastUsedLibrary: undefined,
+      options: {
+        provider: undefined,
+        overrideDetails: true,
+        overrideCover: true,
+        overrideDefaults: true
+      }
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        this.init()
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showBatchQuickMatchModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowBatchQuickMatchModal', val)
+      }
+    },
+    title() {
+      return this.$getString('MessageItemsSelected', [this.selectedBookIds.length])
+    },
+    showBatchQuickMatchModal() {
+      return this.$store.state.globals.showBatchQuickMatchModal
+    },
+    selectedBookIds() {
+      return this.$store.state.selectedLibraryItems || []
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    providers() {
+      if (this.isPodcast) return this.$store.state.scanners.podcastProviders
+      return this.$store.state.scanners.providers
+    },
+    libraryProvider() {
+      return this.$store.getters['libraries/getLibraryProvider'](this.currentLibraryId) || 'google'
+    }
+  },
+  methods: {
+    init() {
+      // If we don't have a set provider (first open of dialog) or we've switched library, set
+      // the selected provider to the current library default provider
+      if (!this.options.provider || this.options.lastUsedLibrary != this.currentLibraryId) {
+        this.options.lastUsedLibrary = this.currentLibraryId
+        this.options.provider = this.libraryProvider
+      }
+    },
+    doBatchQuickMatch() {
+      if (!this.selectedBookIds.length) return
+      if (this.processing) return
+
+      this.processing = true
+      this.$store.commit('setProcessingBatch', true)
+      this.$axios
+        .$post(`/api/items/batch/quickmatch`, {
+          options: this.options,
+          libraryItemIds: this.selectedBookIds
+        })
+        .then(() => {
+          this.$toast.info('Batch quick match of ' + this.selectedBookIds.length + ' books started!')
+        })
+        .catch((error) => {
+          this.$toast.error('Batch quick match failed')
+          console.error('Failed to batch quick match', error)
+        })
+        .finally(() => {
+          this.processing = false
+          this.$store.commit('setProcessingBatch', false)
+          this.show = false
+        })
+    }
+  },
+  mounted() {}
+}
+</script>
+

client/components/modals/BookmarksModal.vue

@@ -1,38 +1,32 @@
 <template>
   <modals-modal v-model="show" name="bookmarks" :width="500" :height="'unset'">
-    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
-      <div class="w-full h-full px-6 py-6" v-show="showBookmarkTitleInput">
-        <div class="flex mb-4 items-center">
-          <div class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-white hover:bg-opacity-10 cursor-pointer" @click="showBookmarkTitleInput = false">
-            <span class="material-icons text-3xl">arrow_back</span>
-          </div>
-          <p class="text-xl pl-2">{{ selectedBookmark ? 'Edit Bookmark' : 'New Bookmark' }}</p>
-          <div class="flex-grow" />
-          <p class="text-xl font-mono">
-            {{ this.$secondsToTimestamp(currentTime) }}
-          </p>
-        </div>
-        <form @submit.prevent="submitBookmark">
-          <ui-text-input-with-label v-model="newBookmarkTitle" label="Note" />
-          <div class="flex justify-end mt-6">
-            <ui-btn color="success" class="w-1/2" type="submit">{{ selectedBookmark ? 'Update' : 'Create' }} Bookmark</ui-btn>
-          </div>
-        </form>
+    <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">{{ $strings.LabelYourBookmarks }}</p>
       </div>
-      <div class="w-full h-full" v-show="!showBookmarkTitleInput">
+    </template>
+    <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div v-if="show" class="w-full h-full">
         <template v-for="bookmark in bookmarks">
-          <modals-bookmarks-bookmark-item :key="bookmark.id" :highlight="currentTime === bookmark.time" :bookmark="bookmark" @click="clickBookmark" @edit="editBookmark" @delete="deleteBookmark" />
+          <modals-bookmarks-bookmark-item :key="bookmark.id" :highlight="currentTime === bookmark.time" :bookmark="bookmark" @click="clickBookmark" @update="submitUpdateBookmark" @delete="deleteBookmark" />
         </template>
         <div v-if="!bookmarks.length" class="flex h-32 items-center justify-center">
-          <p class="text-xl">No Bookmarks</p>
-        </div>
-        <div v-show="canCreateBookmark" class="flex px-4 py-2 items-center text-center justify-between border-b border-white border-opacity-10 bg-blue-500 bg-opacity-20 cursor-pointer text-white text-opacity-80 hover:bg-opacity-40 hover:text-opacity-100" @click="createBookmark">
-          <span class="material-icons">add</span>
-          <p class="text-base pl-2">Create Bookmark</p>
-          <p class="text-sm font-mono">
-            {{ this.$secondsToTimestamp(currentTime) }}
-          </p>
+          <p class="text-xl">{{ $strings.MessageNoBookmarks }}</p>
         </div>
+        <div v-if="!hideCreate" class="w-full h-px bg-white bg-opacity-10" />
+        <form v-if="!hideCreate" @submit.prevent="submitCreateBookmark">
+          <div v-show="canCreateBookmark" class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
+            <div class="w-16 max-w-16 text-center">
+              <p class="text-sm font-mono text-gray-400">
+                {{ this.$secondsToTimestamp(currentTime) }}
+              </p>
+            </div>
+            <div class="flex-grow px-2">
+              <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full" />
+            </div>
+            <ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-icons text-2xl -mt-px">add</span></ui-btn>
+          </div>
+        </form>
       </div>
     </div>
   </modals-modal>
@@ -50,7 +44,8 @@ export default {
       type: Number,
       default: 0
     },
-    audiobookId: String
+    libraryItemId: String,
+    hideCreate: Boolean
   },
   data() {
     return {
@@ -87,35 +82,55 @@ export default {
       this.showBookmarkTitleInput = true
     },
     deleteBookmark(bm) {
-      var bookmark = { ...bm, audiobookId: this.audiobookId }
-      this.$emit('delete', bookmark)
+      this.$axios
+        .$delete(`/api/me/item/${this.libraryItemId}/bookmark/${bm.time}`)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastBookmarkRemoveSuccess)
+        })
+        .catch((error) => {
+          this.$toast.error(this.$strings.ToastBookmarkRemoveFailed)
+          console.error(error)
+        })
+      this.show = false
     },
     clickBookmark(bm) {
       this.$emit('select', bm)
     },
-    createBookmark() {
-      this.selectedBookmark = null
-      this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
-      this.showBookmarkTitleInput = true
+    submitUpdateBookmark(updatedBookmark) {
+      var bookmark = { ...updatedBookmark }
+      this.$axios
+        .$patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastBookmarkUpdateSuccess)
+        })
+        .catch((error) => {
+          this.$toast.error(this.$strings.ToastBookmarkUpdateFailed)
+          console.error(error)
+        })
+      this.show = false
     },
-    submitBookmark() {
-      if (this.selectedBookmark) {
-        if (this.selectedBookmark.title !== this.newBookmarkTitle) {
-          var bookmark = { ...this.selectedBookmark }
-          bookmark.audiobookId = this.audiobookId
-          bookmark.title = this.newBookmarkTitle
-          this.$emit('update', bookmark)
-        }
-      } else {
-        var bookmark = {
-          audiobookId: this.audiobookId,
-          title: this.newBookmarkTitle,
-          time: this.currentTime
-        }
-        this.$emit('create', bookmark)
+    submitCreateBookmark() {
+      if (!this.newBookmarkTitle) {
+        this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
       }
+      var bookmark = {
+        title: this.newBookmarkTitle,
+        time: Math.floor(this.currentTime)
+      }
+      this.$axios
+        .$post(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastBookmarkCreateSuccess)
+        })
+        .catch((error) => {
+          this.$toast.error(this.$strings.ToastBookmarkCreateFailed)
+          console.error(error)
+        })
+
       this.newBookmarkTitle = ''
       this.showBookmarkTitleInput = false
+
+      this.show = false
     }
   }
 }

client/components/modals/ChaptersModal.vue

@@ -1,11 +1,14 @@
 <template>
-  <modals-modal v-model="show" name="chapters" :width="500" :height="'unset'">
-    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+  <modals-modal v-model="show" name="chapters" :width="600" :height="'unset'">
+    <div id="chapter-modal-wrapper" ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
       <template v-for="chap in chapters">
-        <div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-bg bg-opacity-80' : 'bg-opacity-20'" @click="clickChapter(chap)">
-          {{ chap.title }}
+        <div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-yellow-400 bg-opacity-10' : chap.end <= currentChapterStart ? 'bg-success bg-opacity-5' : 'bg-opacity-20'" @click="clickChapter(chap)">
+          <p class="chapter-title truncate text-sm md:text-base">
+            {{ chap.title }}
+          </p>
+          <span class="font-mono text-xxs sm:text-xs text-gray-400 pl-2 whitespace-nowrap">{{ $elapsedPrettyExtended(chap.end - chap.start) }}</span>
           <span class="flex-grow" />
-          <span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }}</span>
+          <span class="font-mono text-xs sm:text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }}</span>
 
           <div v-show="chap.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
         </div>
@@ -46,6 +49,9 @@ export default {
     },
     currentChapterId() {
       return this.currentChapter ? this.currentChapter.id : null
+    },
+    currentChapterStart() {
+      return this.currentChapter ? this.currentChapter.start : 0
     }
   },
   methods: {
@@ -67,4 +73,15 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style>
+#chapter-modal-wrapper .chapter-title {
+  max-width: calc(100% - 120px);
+}
+@media (min-width: 640px) {
+  #chapter-modal-wrapper .chapter-title {
+    max-width: calc(100% - 150px);
+  }
+}
+</style>

client/components/modals/Dialog.vue

@@ -0,0 +1,56 @@
+<template>
+  <modals-modal v-model="show" :width="300" height="100%">
+    <template #outer>
+      <div v-if="title" class="absolute top-7 left-4 z-40" style="max-width: 80%">
+        <p class="text-white text-lg truncate">{{ title }}</p>
+      </div>
+    </template>
+
+    <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
+      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+        <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+          <template v-for="item in items">
+            <li :key="item.value" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" role="option" @click="clickedOption(item.value)">
+              <div class="relative flex items-center px-3">
+                <p class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</p>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    title: String,
+    items: {
+      type: Array,
+      default: () => []
+    },
+    selected: String // optional
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    clickedOption(action) {
+      this.$emit('action', action)
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/EditLibraryModal.vue

@@ -1,45 +0,0 @@
-<template>
-  <modals-modal v-model="show" name="edit-library" :width="700" :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 class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
-      <modals-libraries-edit-library v-if="show" :library="library" :processing.sync="processing" @close="show = false" />
-    </div>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  props: {
-    value: Boolean,
-    library: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      processing: false
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.value
-      },
-      set(val) {
-        this.$emit('input', val)
-      }
-    },
-    title() {
-      return this.library ? 'Update Library' : 'New Library'
-    }
-  },
-  methods: {},
-  mounted() {},
-  beforeDestroy() {}
-}
-</script>

client/components/modals/EditModal.vue

@@ -1,248 +0,0 @@
-<template>
-  <modals-modal v-model="show" name="edit-book" :width="800" :height="height" :processing="processing" :content-margin-top="75">
-    <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 class="absolute -top-10 left-0 w-full flex">
-      <template v-for="tab in availableTabs">
-        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-1 cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300 tab" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
-      </template>
-    </div>
-
-    <div v-show="canGoPrev" class="absolute -left-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
-      <div class="material-icons text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goPrevBook" @mousedown.prevent>arrow_back_ios</div>
-    </div>
-    <div v-show="canGoNext" class="absolute -right-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
-      <div class="material-icons text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goNextBook" @mousedown.prevent>arrow_forward_ios</div>
-    </div>
-
-    <div class="w-full h-full text-sm rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300">
-      <keep-alive>
-        <component v-if="audiobook" :is="tabName" :audiobook="audiobook" :processing.sync="processing" @close="show = false" />
-      </keep-alive>
-    </div>
-  </modals-modal>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      processing: false,
-      audiobook: null,
-      fetchOnShow: false,
-      tabs: [
-        {
-          id: 'details',
-          title: 'Details',
-          component: 'modals-edit-tabs-details'
-        },
-        {
-          id: 'cover',
-          title: 'Cover',
-          component: 'modals-edit-tabs-cover'
-        },
-        // {
-        //   id: 'match',
-        //   title: 'Match',
-        //   component: 'modals-edit-tabs-match'
-        // },
-        {
-          id: 'tracks',
-          title: 'Tracks',
-          component: 'modals-edit-tabs-tracks'
-        },
-        {
-          id: 'chapters',
-          title: 'Chapters',
-          component: 'modals-edit-tabs-chapters'
-        },
-        {
-          id: 'files',
-          title: 'Files',
-          component: 'modals-edit-tabs-files'
-        },
-        {
-          id: 'download',
-          title: 'Download',
-          component: 'modals-edit-tabs-download'
-        }
-      ]
-    }
-  },
-  watch: {
-    show: {
-      handler(newVal) {
-        if (newVal) {
-          var availableTabIds = this.availableTabs.map((tab) => tab.id)
-          if (!availableTabIds.length) {
-            this.show = false
-            return
-          }
-
-          if (!availableTabIds.includes(this.selectedTab)) {
-            this.selectedTab = availableTabIds[0]
-          }
-
-          if (this.audiobook && this.audiobook.id === this.selectedAudiobookId) {
-            if (this.fetchOnShow) this.fetchFull()
-            return
-          }
-          this.fetchOnShow = false
-          this.audiobook = null
-          this.init()
-          this.registerListeners()
-        } else {
-          this.unregisterListeners()
-        }
-      }
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.$store.state.showEditModal
-      },
-      set(val) {
-        this.$store.commit('setShowEditModal', val)
-      }
-    },
-    selectedTab: {
-      get() {
-        return this.$store.state.editModalTab
-      },
-      set(val) {
-        this.$store.commit('setEditModalTab', val)
-      }
-    },
-    userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
-    },
-    userCanDownload() {
-      return this.$store.getters['user/getUserCanDownload']
-    },
-    availableTabs() {
-      if (!this.userCanUpdate && !this.userCanDownload) return []
-      return this.tabs.filter((tab) => {
-        if (tab.id === 'download' && this.isMissing) return false
-        if ((tab.id === 'download' || tab.id === 'tracks') && this.userCanDownload) return true
-        if (tab.id !== 'download' && tab.id !== 'tracks' && this.userCanUpdate) return true
-        return false
-      })
-    },
-    height() {
-      var maxHeightAllowed = window.innerHeight - 150
-      return Math.min(maxHeightAllowed, 650)
-    },
-    tabName() {
-      var _tab = this.tabs.find((t) => t.id === this.selectedTab)
-      return _tab ? _tab.component : ''
-    },
-    isMissing() {
-      return this.selectedAudiobook.isMissing
-    },
-    selectedAudiobook() {
-      return this.$store.state.selectedAudiobook || {}
-    },
-    selectedAudiobookId() {
-      return this.selectedAudiobook.id
-    },
-    book() {
-      return this.audiobook ? this.audiobook.book || {} : {}
-    },
-    title() {
-      return this.book.title || 'No Title'
-    },
-    bookshelfBookIds() {
-      return this.$store.state.bookshelfBookIds || []
-    },
-    currentBookshelfIndex() {
-      if (!this.bookshelfBookIds.length) return 0
-      return this.bookshelfBookIds.findIndex((bid) => bid === this.selectedAudiobookId)
-    },
-    canGoPrev() {
-      return this.bookshelfBookIds.length && this.currentBookshelfIndex > 0
-    },
-    canGoNext() {
-      return this.bookshelfBookIds.length && this.currentBookshelfIndex < this.bookshelfBookIds.length - 1
-    }
-  },
-  methods: {
-    goPrevBook() {
-      if (this.currentBookshelfIndex - 1 < 0) return
-      var prevBookId = this.bookshelfBookIds[this.currentBookshelfIndex - 1]
-      var prevBook = this.$store.getters['audiobooks/getAudiobook'](prevBookId)
-      if (prevBook) {
-        this.$store.commit('showEditModalOnTab', { audiobook: prevBook, tab: this.selectedTab })
-        this.$nextTick(this.init)
-      } else {
-        console.error('Book not found', prevBookId)
-      }
-    },
-    goNextBook() {
-      if (this.currentBookshelfIndex >= this.bookshelfBookIds.length - 1) return
-
-      var nextBookId = this.bookshelfBookIds[this.currentBookshelfIndex + 1]
-      var nextBook = this.$store.getters['audiobooks/getAudiobook'](nextBookId)
-      if (nextBook) {
-        this.$store.commit('showEditModalOnTab', { audiobook: nextBook, tab: this.selectedTab })
-        this.$nextTick(this.init)
-      } else {
-        console.error('Book not found', nextBookId)
-      }
-    },
-    selectTab(tab) {
-      this.selectedTab = tab
-    },
-    audiobookUpdated() {
-      if (!this.show) this.fetchOnShow = true
-      else {
-        this.fetchFull()
-      }
-    },
-    init() {
-      this.$store.commit('audiobooks/addListener', { meth: this.audiobookUpdated, id: 'edit-modal', audiobookId: this.selectedAudiobookId })
-      this.fetchFull()
-    },
-    async fetchFull() {
-      try {
-        this.processing = true
-        this.audiobook = await this.$axios.$get(`/api/audiobook/${this.selectedAudiobookId}`)
-        this.processing = false
-      } catch (error) {
-        console.error('Failed to fetch audiobook', this.selectedAudiobookId, error)
-        this.processing = false
-        this.show = false
-      }
-    },
-    hotkey(action) {
-      if (action === this.$hotkeys.Modal.NEXT_PAGE) {
-        this.goNextBook()
-      } else if (action === this.$hotkeys.Modal.PREV_PAGE) {
-        this.goPrevBook()
-      }
-    },
-    registerListeners() {
-      this.$eventBus.$on('modal-hotkey', this.hotkey)
-    },
-    unregisterListeners() {
-      this.$eventBus.$off('modal-hotkey', this.hotkey)
-    }
-  },
-  mounted() {},
-  beforeDestroy() {
-    this.unregisterListeners()
-  }
-}
-</script>
-
-<style>
-.tab {
-  height: 40px;
-}
-.tab.tab-selected {
-  height: 41px;
-}
-</style>

client/components/modals/EditSeriesInputInnerModal.vue

@@ -0,0 +1,137 @@
+<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-3 right-3 md:top-5 md:right-5 h-8 w-8 md:h-12 md:w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300">
+      <span class="material-icons text-2xl md:text-4xl">close</span>
+    </div>
+    <div ref="content" class="text-white">
+      <form v-if="selectedSeries" @submit.prevent="submitSeriesForm">
+        <div class="bg-bg rounded-lg px-2 py-6 sm:p-6 md:p-8" @click.stop>
+          <div class="flex">
+            <div class="flex-grow p-1 min-w-48 sm:min-w-64 md:min-w-80">
+              <ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!isNewSeries" :label="$strings.LabelSeriesName" />
+            </div>
+            <div class="w-24 sm:w-28 md:w-40 p-1">
+              <ui-text-input-with-label ref="sequenceInput" v-model="selectedSeries.sequence" :label="$strings.LabelSequence" />
+            </div>
+          </div>
+          <div class="flex justify-end mt-2 p-1">
+            <ui-btn type="submit">{{ $strings.ButtonSave }}</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)
+      }
+    },
+    isNewSeries() {
+      if (!this.selectedSeries || !this.selectedSeries.id) return false
+      return this.selectedSeries.id.startsWith('new')
+    }
+  },
+  methods: {
+    setInputFocus() {
+      if (this.isNewSeries) {
+        // Focus on series input if new series
+        if (this.$refs.newSeriesSelect) {
+          this.$refs.newSeriesSelect.setFocus()
+        }
+      } else {
+        // Focus on sequence input if existing series
+        if (this.$refs.sequenceInput) {
+          this.$refs.sequenceInput.setFocus()
+        }
+      }
+    },
+    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)
+
+      this.$store.commit('setInnerModalOpen', true)
+      this.$eventBus.$on('modal-hotkey', this.hotkey)
+
+      this.setInputFocus()
+    },
+    setHide() {
+      if (this.content) this.content.style.transform = 'scale(0)'
+      if (this.el) this.el.remove()
+
+      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>

client/components/modals/ListeningSessionModal.vue

@@ -0,0 +1,189 @@
+<template>
+  <modals-modal v-model="show" name="listening-session-modal" :processing="processing" :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">{{ $strings.HeaderSession }} {{ _session.id }}</p>
+      </div>
+    </template>
+    <div ref="container" class="w-full rounded-lg bg-bg 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">{{ $strings.HeaderDetails }}</p>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelStartedAt }}</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">{{ $strings.LabelUpdatedAt }}</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">{{ $strings.LabelTimeListened }}</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">{{ $strings.LabelStartTime }}</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">{{ $strings.LabelLastTime }}</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">{{ $strings.LabelItem }}</p>
+          <div v-if="_session.libraryId" class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">{{ $strings.LabelLibrary }} 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">{{ $strings.LabelLibraryItem }} 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">{{ $strings.LabelEpisode }} 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">{{ $strings.LabelMediaType }}</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">{{ $strings.LabelDuration }}</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">{{ $strings.LabelUser }}</p>
+          <p class="mb-1">{{ _session.userId }}</p>
+
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">{{ $strings.LabelMediaPlayer }}</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">{{ $strings.LabelDevice }}</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 {{ $strings.LabelVersion }}: {{ deviceInfo.sdkVersion }}</p>
+          <p v-if="deviceInfo.deviceType" class="mb-1">{{ $strings.LabelType }}: {{ deviceInfo.deviceType }}</p>
+        </div>
+      </div>
+
+      <div class="flex items-center">
+        <ui-btn small color="error" @click.stop="deleteSessionClick">{{ $strings.ButtonDelete }}</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    session: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      processing: false
+    }
+  },
+  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: {
+    deleteSessionClick() {
+      const payload = {
+        message: this.$strings.MessageConfirmDeleteSession,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.deleteSession()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    deleteSession() {
+      this.processing = true
+      this.$axios
+        .$delete(`/api/sessions/${this._session.id}`)
+        .then(() => {
+          this.processing = false
+          this.$toast.success(this.$strings.ToastSessionDeleteSuccess)
+          this.$emit('removedSession')
+          this.show = false
+        })
+        .catch((error) => {
+          this.processing = false
+          console.error('Failed to delete session', error)
+          var errMsg = error.response ? error.response.data || '' : ''
+          this.$toast.error(errMsg || this.$strings.ToastSessionDeleteFailed)
+        })
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/Modal.vue

@@ -1,12 +1,12 @@
 <template>
-  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-40 opacity-0">
+  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary items-center justify-center opacity-0 hidden" :class="`z-${zIndex} bg-opacity-${bgOpacity}`">
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
 
-    <div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="clickClose">
-      <span class="material-icons text-4xl">close</span>
+    <div class="absolute top-3 right-3 landscape:top-2 landscape:right-2 md:portrait:top-5 md:portrait:right-5 lg:top-5 lg:right-5 h-8 w-8 landscape:h-8 landscape:w-8 md:portrait:h-12 md:portrait:w-12 lg:w-12 lg:h-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="clickClose">
+      <span class="material-icons text-2xl landscape:text-2xl md:portrait:text-4xl lg:text-4xl">close</span>
     </div>
     <slot name="outer" />
-    <div ref="content" style="min-width: 400px; min-height: 200px" class="relative text-white" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" v-click-outside="clickBg">
+    <div ref="content" style="min-width: 380px; min-height: 200px; max-width: 100vw" class="relative text-white" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
       <slot />
       <div v-if="processing" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-black bg-opacity-60 rounded-lg flex items-center justify-center">
         <ui-loading-indicator />
@@ -36,18 +36,28 @@ export default {
     contentMarginTop: {
       type: Number,
       default: 50
+    },
+    zIndex: {
+      type: Number,
+      default: 50
+    },
+    bgOpacity: {
+      type: Number,
+      default: 75
     }
   },
   data() {
     return {
       el: null,
-      content: null
+      content: null,
+      preventClickoutside: false,
+      isShowingPrompt: false
     }
   },
   watch: {
     show(newVal) {
       if (newVal) {
-        this.setShow()
+        this.$nextTick(this.setShow)
       } else {
         this.setHide()
       }
@@ -74,21 +84,40 @@ export default {
     }
   },
   methods: {
+    mousedownModal() {
+      this.preventClickoutside = true
+    },
+    mouseupModal() {
+      this.preventClickoutside = false
+    },
     clickClose() {
       this.show = false
     },
-    clickBg(vm, ev) {
+    clickBg(ev) {
+      if (!this.show || this.isShowingPrompt) return
+      if (this.preventClickoutside) {
+        this.preventClickoutside = false
+        return
+      }
       if (this.processing && this.persistent) return
-      if (vm.srcElement.classList.contains('modal-bg')) {
+      if (ev.srcElement && ev.srcElement.classList.contains('modal-bg')) {
         this.show = false
       }
     },
     hotkey(action) {
+      if (this.$store.state.innerModalOpen) return
       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)'
@@ -99,21 +128,36 @@ export default {
       this.$store.commit('setOpenModal', this.name)
     },
     setHide() {
-      this.content.style.transform = 'scale(0)'
-      this.el.remove()
+      if (this.content) this.content.style.transform = 'scale(0)'
+      if (this.el) this.el.remove()
       document.documentElement.classList.remove('modal-open')
 
       this.$eventBus.$off('modal-hotkey', this.hotkey)
       this.$store.commit('setOpenModal', null)
+    },
+    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()
+      } else {
+        console.warn('Invalid modal init', this.name)
+      }
+    },
+    showingPrompt(isShowing) {
+      this.isShowingPrompt = isShowing
     }
   },
   mounted() {
-    this.el = this.$refs.wrapper
-    this.content = this.$refs.content
-    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()
+    this.$eventBus.$on('showing-prompt', this.showingPrompt)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('showing-prompt', this.showingPrompt)
   }
 }
 </script>

client/components/modals/SleepTimerModal.vue

@@ -0,0 +1,115 @@
+<template>
+  <modals-modal v-model="show" name="sleep-timer" :width="350" :height="'unset'">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden pointer-events-none">
+        <p class="font-book text-3xl text-white truncate pointer-events-none">{{ $strings.HeaderSleepTimer }}</p>
+      </div>
+    </template>
+
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div v-if="!timerSet" class="w-full">
+        <template v-for="time in sleepTimes">
+          <div :key="time.text" class="flex items-center px-6 py-3 justify-center cursor-pointer hover:bg-bg relative" @click="setTime(time)">
+            <p class="text-xl text-center">{{ time.text }}</p>
+          </div>
+        </template>
+      </div>
+      <div v-else class="w-full p-4">
+        <div class="mb-4 flex items-center justify-center">
+          <ui-btn :padding-x="2" small :disabled="remaining < 30 * 60" class="flex items-center mr-4" @click="decrement(30 * 60)">
+            <span class="material-icons text-lg">remove</span>
+            <span class="pl-1 text-base font-mono">30m</span>
+          </ui-btn>
+
+          <ui-icon-btn icon="remove" @click="decrement(60 * 5)" />
+
+          <p class="mx-6 text-2xl font-mono">{{ $secondsToTimestamp(remaining) }}</p>
+
+          <ui-icon-btn icon="add" @click="increment(60 * 5)" />
+
+          <ui-btn :padding-x="2" small class="flex items-center ml-4" @click="increment(30 * 60)">
+            <span class="material-icons text-lg">add</span>
+            <span class="pl-1 text-base font-mono">30m</span>
+          </ui-btn>
+        </div>
+        <ui-btn class="w-full" @click="$emit('cancel')">{{ $strings.ButtonCancel }}</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    timerSet: Boolean,
+    timerTime: Number,
+    remaining: Number
+  },
+  data() {
+    return {
+      sleepTimes: [
+        {
+          seconds: 10,
+          text: '10 seconds'
+        },
+        {
+          seconds: 60 * 5,
+          text: '5 minutes'
+        },
+        {
+          seconds: 60 * 30,
+          text: '30 minutes'
+        },
+        {
+          seconds: 60 * 60,
+          text: '60 minutes'
+        },
+        {
+          seconds: 60 * 90,
+          text: '90 minutes'
+        },
+        {
+          seconds: 60 * 120,
+          text: '2 hours'
+        },
+        {
+          seconds: 60 * 180,
+          text: '3 hours'
+        }
+      ]
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    setTime(time) {
+      this.$emit('set', time.seconds)
+    },
+    increment(amount) {
+      this.$emit('increment', amount)
+    },
+    decrement(amount) {
+      if (amount > this.remaining) {
+        if (this.remaining > 60) amount = 60
+        else amount = 5
+      }
+      this.$emit('decrement', amount)
+    }
+  }
+}
+</script>

client/components/modals/UploadImageModal.vue

@@ -0,0 +1,107 @@
+<template>
+  <modals-modal v-model="show" name="upload-image" :width="500" :height="'unset'">
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div class="flex items-center">
+        <div class="w-40 pr-2 pt-4" style="min-width: 160px">
+          <ui-file-input ref="fileInput" @change="fileUploadSelected">Upload Cover</ui-file-input>
+        </div>
+        <form @submit.prevent="submitForm" class="flex flex-grow">
+          <ui-text-input-with-label v-model="imageUrl" label="Cover Image URL" />
+          <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-3 w-24">Update</ui-btn>
+        </form>
+      </div>
+      <div v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
+        <p class="text-lg">Preview Cover</p>
+        <span class="absolute top-4 right-4 material-icons text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
+        <div class="flex justify-center py-4">
+          <covers-preview-cover :src="previewUpload" :width="240" />
+        </div>
+        <div class="absolute bottom-0 right-0 flex py-4 px-5">
+          <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">Clear</ui-btn>
+          <ui-btn :loading="processingUpload" color="success" @click="submitCoverUpload">Upload</ui-btn>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    entity: String,
+    entityId: String
+  },
+  data() {
+    return {
+      imageUrl: null,
+      previewUpload: null,
+      processingUpload: false
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (newVal) this.init()
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    init() {},
+    fileUploadSelected() {
+      this.previewUpload = URL.createObjectURL(file)
+      this.selectedFile = file
+    },
+    resetCoverPreview() {
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.reset()
+      }
+      this.previewUpload = null
+      this.selectedFile = null
+    },
+    submitCoverUpload() {
+      this.processingUpload = true
+      var form = new FormData()
+      form.set('cover', this.selectedFile)
+
+      this.$axios
+        .$post(`/api/${this.entity}/${this.entityId}/cover`, form)
+        .then((data) => {
+          if (data.error) {
+            this.$toast.error(data.error)
+          } else {
+            this.$toast.success('Cover Uploaded')
+            this.resetCoverPreview()
+          }
+          this.processingUpload = false
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
+          this.$toast.error(errorMsg)
+          this.processingUpload = false
+        })
+    },
+    async submitForm() {
+      this.processingUpload = true
+
+      var success = await this.$axios.$post(`/api/${this.entity}/${this.entityId}/cover`, { url: this.imageUrl }).catch((error) => {
+        console.error('Failed to download cover from url', error)
+        var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
+        this.$toast.error(errorMsg)
+        return false
+      })
+
+      this.processingUpload = false
+    }
+  }
+}
+</script>

client/components/modals/authors/EditModal.vue

@@ -0,0 +1,175 @@
+<template>
+  <modals-modal v-model="show" name="edit-author" :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">{{ title }}</p>
+      </div>
+    </template>
+    <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <form v-if="author" @submit.prevent="submitForm">
+        <div class="flex">
+          <div class="w-40 p-2">
+            <div class="w-full h-45 relative">
+              <covers-author-image :author="author" />
+              <div v-show="!processing && author.imagePath" class="absolute top-0 left-0 w-full h-full opacity-0 hover:opacity-100">
+                <span class="absolute top-2 right-2 material-icons text-error transform hover:scale-125 transition-transform cursor-pointer text-lg" @click="removeCover">delete</span>
+              </div>
+            </div>
+          </div>
+          <div class="flex-grow">
+            <div class="flex">
+              <div class="w-3/4 p-2">
+                <ui-text-input-with-label v-model="authorCopy.name" :disabled="processing" :label="$strings.LabelName" />
+              </div>
+              <div class="flex-grow p-2">
+                <ui-text-input-with-label v-model="authorCopy.asin" :disabled="processing" label="ASIN" />
+              </div>
+            </div>
+            <div class="p-2">
+              <ui-text-input-with-label v-model="authorCopy.imagePath" :disabled="processing" :label="$strings.LabelPhotoPathURL" />
+            </div>
+            <div class="p-2">
+              <ui-textarea-with-label v-model="authorCopy.description" :disabled="processing" :label="$strings.LabelDescription" :rows="8" />
+            </div>
+
+            <div class="flex pt-2 px-2">
+              <ui-btn type="button" @click="searchAuthor">{{ $strings.ButtonQuickMatch }}</ui-btn>
+              <div class="flex-grow" />
+              <ui-btn type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      authorCopy: {
+        name: '',
+        asin: '',
+        description: '',
+        imagePath: ''
+      },
+      processing: false
+    }
+  },
+  watch: {
+    author: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showEditAuthorModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowEditAuthorModal', val)
+      }
+    },
+    author() {
+      return this.$store.state.globals.selectedAuthor
+    },
+    authorId() {
+      if (!this.author) return ''
+      return this.author.id
+    },
+    title() {
+      return this.$strings.HeaderUpdateAuthor
+    }
+  },
+  methods: {
+    init() {
+      this.authorCopy.name = this.author.name
+      this.authorCopy.asin = this.author.asin
+      this.authorCopy.description = this.author.description
+      this.authorCopy.imagePath = this.author.imagePath
+    },
+    async submitForm() {
+      var keysToCheck = ['name', 'asin', 'description', 'imagePath']
+      var updatePayload = {}
+      keysToCheck.forEach((key) => {
+        if (this.authorCopy[key] !== this.author[key]) {
+          updatePayload[key] = this.authorCopy[key]
+        }
+      })
+      if (!Object.keys(updatePayload).length) {
+        this.$toast.info(this.$strings.MessageNoUpdateNecessary)
+        return
+      }
+      this.processing = true
+      var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
+        console.error('Failed', error)
+        this.$toast.error(this.$strings.ToastAuthorUpdateFailed)
+        return null
+      })
+      if (result) {
+        if (result.updated) {
+          this.$toast.success(this.$strings.ToastAuthorUpdateSuccess)
+          this.show = false
+        } else if (result.merged) {
+          this.$toast.success(this.$strings.ToastAuthorUpdateMerged)
+          this.show = false
+        } else this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+      }
+      this.processing = false
+    },
+    async removeCover() {
+      var updatePayload = {
+        imagePath: null,
+        relImagePath: null
+      }
+      this.processing = true
+      var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
+        console.error('Failed', error)
+        this.$toast.error(this.$strings.ToastAuthorImageRemoveFailed)
+        return null
+      })
+      if (result && result.updated) {
+        this.$toast.success(this.$strings.ToastAuthorImageRemoveSuccess)
+        this.$store.commit('globals/showEditAuthorModal', result.author)
+      }
+      this.processing = false
+    },
+    async searchAuthor() {
+      if (!this.authorCopy.name && !this.authorCopy.asin) {
+        this.$toast.error('Must enter an author name')
+        return
+      }
+      this.processing = true
+
+      const payload = {}
+      if (this.authorCopy.asin) payload.asin = this.authorCopy.asin
+      else payload.q = this.authorCopy.name
+
+      var response = await this.$axios.$post(`/api/authors/${this.authorId}/match`, payload).catch((error) => {
+        console.error('Failed', error)
+        return null
+      })
+      if (!response) {
+        this.$toast.error('Author not found')
+      } else if (response.updated) {
+        if (response.author.imagePath) {
+          this.$toast.success(this.$strings.ToastAuthorUpdateSuccess)
+          this.$store.commit('globals/showEditAuthorModal', response.author)
+        }
+        else this.$toast.success(this.$strings.ToastAuthorUpdateSuccessNoImageFound)
+      } else {
+        this.$toast.info('No updates were made for Author')
+      }
+      this.processing = false
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>

client/components/modals/bookmarks/BookmarkItem.vue

@@ -1,15 +1,29 @@
 <template>
-  <div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-4 py-4 justify-start cursor-pointer hover:bg-bg relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click" @mouseover="isHovering = true" @mouseleave="isHovering = false">
-    <span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-60'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span>
-    <div class="flex-grow overflow-hidden">
-      <p class="pl-2 pr-2 truncate">{{ bookmark.title }}</p>
+  <div class="flex items-center px-4 py-4 justify-start relative bg-primary hover:bg-opacity-25" :class="wrapperClass" @click.stop="click" @mouseover="mouseover" @mouseleave="mouseleave">
+    <div class="w-16 max-w-16 text-center">
+      <p class="text-sm font-mono text-gray-400">
+        {{ this.$secondsToTimestamp(bookmark.time) }}
+      </p>
     </div>
-    <div class="h-full flex items-center w-16 justify-end">
-      <span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(bookmark.time) }}</span>
+    <div class="flex-grow overflow-hidden px-2">
+      <template v-if="isEditing">
+        <form @submit.prevent="submitUpdate">
+          <div class="flex items-center">
+            <div class="flex-grow pr-2">
+              <ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full" />
+            </div>
+            <ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-icons text-2xl -mt-px">forward</span></ui-btn>
+            <div class="pl-2 flex items-center">
+              <span class="material-icons text-3xl text-white text-opacity-70 hover:text-opacity-95 cursor-pointer" @click.stop.prevent="cancelEditing">close</span>
+            </div>
+          </div>
+        </form>
+      </template>
+      <p v-else class="pl-2 pr-2 truncate">{{ bookmark.title }}</p>
     </div>
-    <div class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
-      <span class="material-icons text-lg mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
-      <span class="material-icons text-lg text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span>
+    <div v-if="!isEditing" class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
+      <span class="material-icons text-xl mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
+      <span class="material-icons text-xl text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span>
     </div>
   </div>
 </template>
@@ -25,19 +39,53 @@ export default {
   },
   data() {
     return {
-      isHovering: false
+      isHovering: false,
+      isEditing: false,
+      newBookmarkTitle: null
+    }
+  },
+  computed: {
+    wrapperClass() {
+      var classes = []
+      if (this.highlight) classes.push('bg-bg bg-opacity-60')
+      if (!this.isEditing) classes.push('cursor-pointer')
+      return classes.join(' ')
     }
   },
-  computed: {},
   methods: {
-    click() {
+    mouseover() {
+      if (this.isEditing) return
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    click(e) {
+      if (this.isEditing) {
+        if (e) e.stopPropagation()
+        return
+      }
       this.$emit('click', this.bookmark)
     },
     deleteClick() {
+      if (this.isEditing) return
       this.$emit('delete', this.bookmark)
     },
     editClick() {
-      this.$emit('edit', this.bookmark)
+      this.newBookmarkTitle = this.bookmark.title
+      this.isEditing = true
+      this.isHovering = false
+    },
+    cancelEditing() {
+      this.isEditing = false
+    },
+    submitUpdate() {
+      if (this.newBookmarkTitle === this.bookmark.title) {
+        return this.cancelEditing()
+      }
+      var bookmark = { ...this.bookmark }
+      bookmark.title = this.newBookmarkTitle
+      this.$emit('update', bookmark)
     }
   },
   mounted() {}

client/components/modals/changelog/ViewModal.vue

@@ -0,0 +1,73 @@
+<template>
+  <modals-modal v-model="show" name="changelog" :width="800" :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">Changelog</p>
+      </div>
+    </template>
+    <div class="px-8 py-6 w-full rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-scroll" style="max-height: 80vh">
+      <p class="text-xl font-bold pb-4">Changelog v{{ currentVersionNumber }}</p>
+      <div class="custom-text" v-html="compiledMarkedown" />
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+import { marked } from '@/static/libs/marked/index.js'
+
+export default {
+  props: {
+    value: Boolean,
+    changelog: String,
+    currentVersion: String
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    compiledMarkedown() {
+      return marked.parse(this.changelog, { gfm: true, breaks: true })
+    },
+    currentVersionNumber() {
+      return this.currentVersion
+    }
+  },
+  methods: {
+    init() {}
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+/*
+1. we need to manually define styles to apply to the parsed markdown elements,
+since we don't have access to the actual elements in this component 
+
+2. v-deep allows these to take effect on the content passed in to the v-html in the div above
+*/
+.custom-text ::v-deep > h2 {
+  @apply text-lg font-bold;
+}
+.custom-text ::v-deep > h3 {
+  @apply text-lg font-bold;
+}
+.custom-text ::v-deep > ul {
+  @apply list-disc list-inside pb-4;
+}
+</style>

client/components/modals/collections/AddCreateModal.vue

@@ -0,0 +1,231 @@
+<template>
+  <modals-modal v-model="show" name="collections" :processing="processing" :width="500" :height="'unset'">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden pointer-events-none">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div v-if="show" class="w-full h-full">
+        <div class="py-4 px-4">
+          <h1 v-if="!showBatchCollectionModal" class="text-2xl">{{ $strings.LabelAddToCollection }}</h1>
+          <h1 v-else class="text-2xl">{{ $getString('LabelAddToCollectionBatch', [selectedBookIds.length]) }}</h1>
+        </div>
+        <div class="w-full overflow-y-auto overflow-x-hidden max-h-96">
+          <transition-group name="list-complete" tag="div">
+            <template v-for="collection in sortedCollections">
+              <modals-collections-collection-item :key="collection.id" :collection="collection" :book-cover-aspect-ratio="bookCoverAspectRatio" class="list-complete-item" @add="addToCollection" @remove="removeFromCollection" @close="show = false" />
+            </template>
+          </transition-group>
+        </div>
+        <div v-if="!collections.length" class="flex h-32 items-center justify-center">
+          <p class="text-xl">{{ $strings.MessageNoCollections }}</p>
+        </div>
+        <div class="w-full h-px bg-white bg-opacity-10" />
+        <form @submit.prevent="submitCreateCollection">
+          <div class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
+            <div class="flex-grow px-2">
+              <ui-text-input v-model="newCollectionName" :placeholder="$strings.PlaceholderNewCollection" class="w-full" />
+            </div>
+            <ui-btn type="submit" color="success" :padding-x="4" class="h-10">{{ $strings.ButtonCreate }}</ui-btn>
+          </div>
+        </form>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      newCollectionName: '',
+      processing: false
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        this.loadCollections()
+        this.newCollectionName = ''
+      } else {
+        this.$store.commit('setSelectedLibraryItem', null)
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showCollectionsModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowCollectionsModal', val)
+      }
+    },
+    title() {
+      if (this.showBatchCollectionModal) {
+        return this.$getString('MessageItemsSelected', [this.selectedBookIds.length])
+      }
+      return this.selectedLibraryItem ? this.selectedLibraryItem.media.metadata.title : ''
+    },
+    collections() {
+      return this.$store.state.libraries.collections || []
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    selectedLibraryItem() {
+      return this.$store.state.selectedLibraryItem
+    },
+    selectedLibraryItemId() {
+      return this.selectedLibraryItem ? this.selectedLibraryItem.id : null
+    },
+    sortedCollections() {
+      return this.collections
+        .map((c) => {
+          var includesBook = false
+          if (this.showBatchCollectionModal) {
+            // Only show collection added if all books are in the collection
+            var collectionBookIds = c.books.map((b) => b.id)
+            includesBook = !this.selectedBookIds.find((id) => !collectionBookIds.includes(id))
+          } else {
+            includesBook = !!c.books.find((b) => b.id === this.selectedLibraryItemId)
+          }
+
+          return {
+            isBookIncluded: includesBook,
+            ...c
+          }
+        })
+        .sort((a, b) => (a.isBookIncluded ? -1 : 1))
+    },
+    showBatchCollectionModal() {
+      return this.$store.state.globals.showBatchCollectionModal
+    },
+    selectedBookIds() {
+      return this.$store.state.selectedLibraryItems || []
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    }
+  },
+  methods: {
+    loadCollections() {
+      this.processing = true
+      this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/collections`)
+        .then((data) => {
+          if (data.results) {
+            this.$store.commit('libraries/setCollections', data.results || [])
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to get collections', error)
+          this.$toast.error('Failed to load collections')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    removeFromCollection(collection) {
+      if (!this.selectedLibraryItemId && !this.selectedBookIds.length) return
+      this.processing = true
+
+      if (this.showBatchCollectionModal) {
+        // BATCH Remove books
+        this.$axios
+          .$post(`/api/collections/${collection.id}/batch/remove`, { books: this.selectedBookIds })
+          .then((updatedCollection) => {
+            console.log(`Books removed from collection`, updatedCollection)
+            this.$toast.success(this.$strings.ToastCollectionItemsRemoveSuccess)
+            this.processing = false
+          })
+          .catch((error) => {
+            console.error('Failed to remove books from collection', error)
+            this.$toast.error(this.$strings.ToastCollectionItemsRemoveFailed)
+            this.processing = false
+          })
+      } else {
+        // Remove single book
+        this.$axios
+          .$delete(`/api/collections/${collection.id}/book/${this.selectedLibraryItemId}`)
+          .then((updatedCollection) => {
+            console.log(`Book removed from collection`, updatedCollection)
+            this.$toast.success(this.$strings.ToastCollectionItemsRemoveSuccess)
+            this.processing = false
+          })
+          .catch((error) => {
+            console.error('Failed to remove book from collection', error)
+            this.$toast.error(this.$strings.ToastCollectionItemsRemoveFailed)
+            this.processing = false
+          })
+      }
+    },
+    addToCollection(collection) {
+      if (!this.selectedLibraryItemId && !this.selectedBookIds.length) return
+      this.processing = true
+
+      if (this.showBatchCollectionModal) {
+        // BATCH Remove books
+        this.$axios
+          .$post(`/api/collections/${collection.id}/batch/add`, { books: this.selectedBookIds })
+          .then((updatedCollection) => {
+            console.log(`Books added to collection`, updatedCollection)
+            this.$toast.success('Books added to collection')
+            this.processing = false
+          })
+          .catch((error) => {
+            console.error('Failed to add books to collection', error)
+            this.$toast.error('Failed to add books to collection')
+            this.processing = false
+          })
+      } else {
+        if (!this.selectedLibraryItemId) return
+
+        this.$axios
+          .$post(`/api/collections/${collection.id}/book`, { id: this.selectedLibraryItemId })
+          .then((updatedCollection) => {
+            console.log(`Book added to collection`, updatedCollection)
+            this.$toast.success('Book added to collection')
+            this.processing = false
+          })
+          .catch((error) => {
+            console.error('Failed to add book to collection', error)
+            this.$toast.error('Failed to add book to collection')
+            this.processing = false
+          })
+      }
+    },
+    submitCreateCollection() {
+      if (!this.newCollectionName || (!this.selectedLibraryItemId && !this.selectedBookIds.length)) {
+        return
+      }
+      this.processing = true
+
+      var books = this.showBatchCollectionModal ? this.selectedBookIds : [this.selectedLibraryItemId]
+      var newCollection = {
+        books: books,
+        libraryId: this.currentLibraryId,
+        name: this.newCollectionName
+      }
+
+      this.$axios
+        .$post('/api/collections', newCollection)
+        .then((data) => {
+          console.log('New Collection Created', data)
+          this.$toast.success(`Collection "${data.name}" created`)
+          this.processing = false
+          this.newCollectionName = ''
+        })
+        .catch((error) => {
+          console.error('Failed to create collection', error)
+          var errMsg = error.response ? error.response.data || '' : ''
+          this.$toast.error(`Failed to create collection: ${errMsg}`)
+          this.processing = false
+        })
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/collections/CollectionItem.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="flex items-center px-4 py-2 justify-start relative hover:bg-bg" @mouseover="mouseover" @mouseleave="mouseleave">
+    <div v-if="isBookIncluded" class="absolute top-0 left-0 h-full w-1 bg-success z-10" />
+    <div class="w-20 max-w-20 text-center">
+      <covers-collection-cover :book-items="books" :width="80" :height="40 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+    </div>
+    <div class="flex-grow overflow-hidden px-2">
+      <nuxt-link :to="`/collection/${collection.id}`" class="pl-2 pr-2 truncate hover:underline cursor-pointer" @click.native="clickNuxtLink">{{ collection.name }}</nuxt-link>
+    </div>
+    <div class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
+      <ui-btn v-if="!isBookIncluded" color="success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-icons text-2xl pt-px">add</span></ui-btn>
+      <ui-btn v-else color="error" :padding-x="3" class="h-9" small @click.stop="clickRem"><span class="material-icons text-2xl pt-px">remove</span></ui-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    collection: {
+      type: Object,
+      default: () => {}
+    },
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      isHovering: false
+    }
+  },
+  computed: {
+    isBookIncluded() {
+      return !!this.collection.isBookIncluded
+    },
+    books() {
+      return this.collection.books || []
+    }
+  },
+  methods: {
+    clickNuxtLink() {
+      this.$emit('close')
+    },
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    clickAdd() {
+      this.$emit('add', this.collection)
+    },
+    clickRem() {
+      this.$emit('remove', this.collection)
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/collections/EditModal.vue

@@ -0,0 +1,147 @@
+<template>
+  <modals-modal v-model="show" name="edit-collection" :width="700" :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">{{ $strings.HeaderCollection }}</p>
+      </div>
+    </template>
+    <div class="p-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <template v-if="!showImageUploader">
+        <form @submit.prevent="submitForm">
+          <div class="flex">
+            <div>
+              <covers-collection-cover :book-items="books" :width="200" :height="100 * bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+              <!-- <ui-btn type="button" @click="showImageUploader = true">Upload</ui-btn> -->
+            </div>
+            <div class="flex-grow px-4">
+              <ui-text-input-with-label v-model="newCollectionName" :label="$strings.LabelName" class="mb-2" />
+
+              <ui-textarea-with-label v-model="newCollectionDescription" :label="$strings.LabelDescription" />
+            </div>
+          </div>
+          <div class="absolute bottom-0 left-0 right-0 w-full py-2 px-4 flex">
+            <ui-btn v-if="userCanDelete" small color="error" type="button" @click.stop="removeClick">{{ $strings.ButtonRemove }}</ui-btn>
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">{{ $strings.ButtonSave }}</ui-btn>
+          </div>
+        </form>
+      </template>
+      <template v-else>
+        <div class="flex items-center mb-3">
+          <div class="hover:bg-white hover:bg-opacity-10 cursor-pointer h-11 w-11 flex items-center justify-center rounded-full" @click="showImageUploader = false">
+            <span class="material-icons text-4xl">arrow_back</span>
+          </div>
+          <p class="ml-2 text-xl mb-1">Collection Cover Image</p>
+        </div>
+        <div class="flex mb-4">
+          <ui-btn small class="mr-2">Upload</ui-btn>
+          <ui-text-input v-model="newCoverImage" class="flex-grow" placeholder="Collection Cover Image" />
+        </div>
+        <div class="flex justify-end">
+          <ui-btn color="success">Upload</ui-btn>
+        </div>
+      </template>
+      <!-- <modals-upload-image-modal v-model="showUploadImageModal" entity="collection" :entity-id="collection.id" /> -->
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      processing: false,
+      newCollectionName: null,
+      newCollectionDescription: null,
+      showImageUploader: false
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showEditCollectionModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowEditCollectionModal', val)
+      }
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    collection() {
+      return this.$store.state.globals.selectedCollection || {}
+    },
+    collectionName() {
+      return this.collection.name
+    },
+    books() {
+      return this.collection.books || []
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    }
+  },
+  methods: {
+    init() {
+      this.newCollectionName = this.collectionName
+      this.newCollectionDescription = this.collection.description || ''
+    },
+    removeClick() {
+      if (confirm(this.$getString('MessageConfirmRemoveCollection', [this.collectionName]))) {
+        this.processing = true
+        this.$axios
+          .$delete(`/api/collections/${this.collection.id}`)
+          .then(() => {
+            this.processing = false
+            this.show = false
+            this.$toast.success(this.$strings.ToastCollectionRemoveSuccess)
+          })
+          .catch((error) => {
+            console.error('Failed to remove collection', error)
+            this.processing = false
+            this.$toast.error(this.$strings.ToastCollectionRemoveFailed)
+          })
+      }
+    },
+    submitForm() {
+      if (this.newCollectionName === this.collectionName && this.newCollectionDescription === this.collection.description) {
+        return
+      }
+      if (!this.newCollectionName) {
+        return this.$toast.error('Collection must have a name')
+      }
+
+      this.processing = true
+
+      var collectionUpdate = {
+        name: this.newCollectionName,
+        description: this.newCollectionDescription || null
+      }
+      this.$axios
+        .$patch(`/api/collections/${this.collection.id}`, collectionUpdate)
+        .then((collection) => {
+          console.log('Collection Updated', collection)
+          this.processing = false
+          this.show = false
+          this.$toast.success(this.$strings.ToastCollectionUpdateSuccess)
+        })
+        .catch((error) => {
+          console.error('Failed to update collection', error)
+          this.processing = false
+          this.$toast.error(this.$strings.ToastCollectionUpdateFailed)
+        })
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>

client/components/modals/edit-tabs/Chapters.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
-    <div v-if="!chapters.length" class="flex my-4 text-center justify-center text-xl">No Chapters</div>
-    <table v-else class="text-sm tracksTable">
-      <tr class="font-book">
-        <th class="text-left w-16"><span class="px-4">Id</span></th>
-        <th class="text-left">Title</th>
-        <th class="text-center">Start</th>
-        <th class="text-center">End</th>
-      </tr>
-      <template v-for="chapter in chapters">
-        <tr :key="chapter.id">
-          <td class="text-left">
-            <p class="px-4">{{ chapter.id }}</p>
-          </td>
-          <td class="font-book">
-            {{ chapter.title }}
-          </td>
-          <td class="font-mono text-center">
-            {{ $secondsToTimestamp(chapter.start) }}
-          </td>
-          <td class="font-mono text-center">
-            {{ $secondsToTimestamp(chapter.end) }}
-          </td>
-        </tr>
-      </template>
-    </table>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    audiobook: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      chapters: []
-    }
-  },
-  watch: {
-    audiobook: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) this.init()
-      }
-    }
-  },
-  computed: {},
-  methods: {
-    init() {
-      this.chapters = this.audiobook.chapters || []
-    }
-  }
-}
-</script>

client/components/modals/edit-tabs/Cover.vue

@@ -1,287 +0,0 @@
-<template>
-  <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6 relative">
-    <div class="flex">
-      <div class="relative">
-        <cards-book-cover :audiobook="audiobook" />
-        <!-- book cover overlay -->
-        <div v-if="book.cover" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
-          <div class="absolute top-0 left-0 w-full h-16 bg-gradient-to-b from-black-600 to-transparent" />
-          <div class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-sm" @click="removeCover">
-            <span class="material-icons">delete</span>
-          </div>
-        </div>
-      </div>
-      <div class="flex-grow pl-6 pr-2">
-        <div class="flex items-center">
-          <div v-if="userCanUpload" class="w-40 pr-2 pt-4" style="min-width: 160px">
-            <ui-file-input ref="fileInput" @change="fileUploadSelected">Upload Cover</ui-file-input>
-          </div>
-          <form @submit.prevent="submitForm" class="flex flex-grow">
-            <ui-text-input-with-label v-model="imageUrl" label="Cover Image URL" />
-            <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-3 w-24">Update</ui-btn>
-          </form>
-        </div>
-
-        <div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-primary">
-          <div class="flex items-center justify-center py-2">
-            <p>{{ localCovers.length }} local image{{ localCovers.length !== 1 ? 's' : '' }}</p>
-            <div class="flex-grow" />
-            <ui-btn small @click="showLocalCovers = !showLocalCovers">{{ showLocalCovers ? 'Hide' : 'Show' }}</ui-btn>
-          </div>
-
-          <div v-if="showLocalCovers" class="flex items-center justify-center">
-            <template v-for="cover in localCovers">
-              <div :key="cover.path" class="m-0.5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.localPath === imageUrl ? 'border-yellow-300' : ''" @click="setCover(cover)">
-                <div class="h-24 bg-primary" style="width: 60px">
-                  <img :src="`${cover.localPath}?token=${userToken}`" class="h-full w-full object-contain" />
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-
-        <form @submit.prevent="submitSearchForm">
-          <div class="flex items-center justify-start -mx-1 py-2 mt-2">
-            <div class="flex-grow px-1">
-              <ui-text-input-with-label v-model="searchTitle" label="Search Title" placeholder="Search" :disabled="processing" />
-            </div>
-            <div class="flex-grow px-1">
-              <ui-text-input-with-label v-model="searchAuthor" label="Author" :disabled="processing" />
-            </div>
-            <div class="w-24 px-1">
-              <ui-btn type="submit" class="mt-5 w-full" :padding-x="0">Search</ui-btn>
-            </div>
-          </div>
-        </form>
-        <div v-if="hasSearched" class="flex items-center flex-wrap justify-center max-h-80 overflow-y-scroll mt-2 max-w-full">
-          <p v-if="!coversFound.length">No Covers Found</p>
-          <template v-for="cover in coversFound">
-            <div :key="cover" class="m-0.5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="updateCover(cover)">
-              <cards-preview-cover :src="cover" :width="80" show-open-new-tab />
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
-      <p class="text-lg">Preview Cover</p>
-      <span class="absolute top-4 right-4 material-icons text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
-      <div class="flex justify-center py-4">
-        <cards-preview-cover :src="previewUpload" :width="240" />
-      </div>
-      <div class="absolute bottom-0 right-0 flex py-4 px-5">
-        <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">Clear</ui-btn>
-        <ui-btn :loading="processingUpload" color="success" @click="submitCoverUpload">Upload</ui-btn>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    processing: Boolean,
-    audiobook: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      processingUpload: false,
-      searchTitle: null,
-      searchAuthor: null,
-      imageUrl: null,
-      coversFound: [],
-      hasSearched: false,
-      showLocalCovers: false,
-      previewUpload: null,
-      selectedFile: null
-    }
-  },
-  watch: {
-    audiobook: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) {
-          this.init()
-        }
-      }
-    }
-  },
-  computed: {
-    isProcessing: {
-      get() {
-        return this.processing
-      },
-      set(val) {
-        this.$emit('update:processing', val)
-      }
-    },
-    audiobookId() {
-      return this.audiobook ? this.audiobook.id : null
-    },
-    book() {
-      return this.audiobook ? this.audiobook.book || {} : {}
-    },
-    audiobookPath() {
-      return this.audiobook ? this.audiobook.path : null
-    },
-    otherFiles() {
-      return this.audiobook ? this.audiobook.otherFiles || [] : []
-    },
-    userCanUpload() {
-      return this.$store.getters['user/getUserCanUpload']
-    },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
-    localCovers() {
-      return this.otherFiles
-        .filter((f) => f.filetype === 'image')
-        .map((file) => {
-          var _file = { ...file }
-          var imgRelPath = _file.path.replace(this.audiobookPath, '')
-          _file.localPath = `/s/book/${this.audiobookId}${imgRelPath}`
-          return _file
-        })
-    }
-  },
-  methods: {
-    submitCoverUpload() {
-      this.processingUpload = true
-      var form = new FormData()
-      form.set('cover', this.selectedFile)
-
-      this.$axios
-        .$post(`/api/audiobook/${this.audiobook.id}/cover`, form)
-        .then((data) => {
-          if (data.error) {
-            this.$toast.error(data.error)
-          } else {
-            this.$toast.success('Cover Uploaded')
-            this.resetCoverPreview()
-          }
-          this.processingUpload = false
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-          if (error.response && error.response.data) {
-            this.$toast.error(error.response.data)
-          } else {
-            this.$toast.error('Oops, something went wrong...')
-          }
-          this.processingUpload = false
-        })
-    },
-    resetCoverPreview() {
-      if (this.$refs.fileInput) {
-        this.$refs.fileInput.reset()
-      }
-      this.previewUpload = null
-      this.selectedFile = null
-    },
-    fileUploadSelected(file) {
-      this.previewUpload = URL.createObjectURL(file)
-      this.selectedFile = file
-    },
-    init() {
-      this.showLocalCovers = false
-      if (this.coversFound.length && (this.searchTitle !== this.book.title || this.searchAuthor !== this.book.authorFL)) {
-        this.coversFound = []
-        this.hasSearched = false
-      }
-      this.imageUrl = this.book.cover || ''
-      this.searchTitle = this.book.title || ''
-      this.searchAuthor = this.book.authorFL || ''
-    },
-    removeCover() {
-      if (!this.book.cover) {
-        this.imageUrl = ''
-        return
-      }
-      this.updateCover('')
-    },
-    submitForm() {
-      this.updateCover(this.imageUrl)
-    },
-    async updateCover(cover) {
-      if (cover === this.book.cover) {
-        console.warn('Cover has not changed..', cover)
-        return
-      }
-
-      this.isProcessing = true
-      var success = false
-
-      // Download cover from url and use
-      if (cover.startsWith('http:') || cover.startsWith('https:')) {
-        success = await this.$axios.$post(`/api/audiobook/${this.audiobook.id}/cover`, { url: cover }).catch((error) => {
-          console.error('Failed to download cover from url', error)
-          if (error.response && error.response.data) {
-            this.$toast.error(error.response.data)
-          }
-          return false
-        })
-      } else {
-        // Update local cover url
-        const updatePayload = {
-          book: {
-            cover: cover
-          }
-        }
-        success = await this.$axios.$patch(`/api/audiobook/${this.audiobook.id}`, updatePayload).catch((error) => {
-          console.error('Failed to update', error)
-          if (error.response && error.response.data) {
-            this.$toast.error(error.response.data)
-          }
-          return false
-        })
-      }
-      if (success) {
-        this.$toast.success('Update Successful')
-        this.$emit('close')
-      } else {
-        this.imageUrl = this.book.cover || ''
-      }
-      this.isProcessing = false
-    },
-    getSearchQuery() {
-      var searchQuery = `provider=openlibrary&title=${this.searchTitle}`
-      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
-      return searchQuery
-    },
-    async submitSearchForm() {
-      this.isProcessing = true
-      var searchQuery = this.getSearchQuery()
-      var results = await this.$axios.$get(`/api/find/covers?${searchQuery}`).catch((error) => {
-        console.error('Failed', error)
-        return []
-      })
-      this.coversFound = results
-      this.isProcessing = false
-      this.hasSearched = true
-    },
-    setCover(coverFile) {
-      this.isProcessing = true
-      this.$axios
-        .$patch(`/api/audiobook/${this.audiobook.id}/coverfile`, coverFile)
-        .then((data) => {
-          console.log('response data', data)
-          if (data && typeof data === 'string') {
-            this.$toast.success(data)
-          }
-          this.isProcessing = false
-        })
-        .catch((error) => {
-          console.error('Failed to update', error)
-          if (error.response && error.response.data) {
-            this.$toast.error(error.response.data)
-          }
-          this.isProcessing = false
-        })
-    }
-  }
-}
-</script>

client/components/modals/edit-tabs/Details.vue

@@ -1,292 +0,0 @@
-<template>
-  <div class="w-full h-full relative">
-    <form class="w-full h-full" @submit.prevent="submitForm">
-      <div ref="formWrapper" class="px-4 py-6 details-form-wrapper w-full overflow-hidden overflow-y-auto">
-        <!-- <div v-if="userProgress" class="bg-success bg-opacity-40 rounded-md w-full px-4 py-1 mb-4 border border-success border-opacity-50">
-        <div class="w-full flex items-center">
-          <p>
-            Your progress: <span class="font-mono text-lg">{{ (userProgress * 100).toFixed(0) }}%</span>
-          </p>
-          <div class="flex-grow" />
-          <ui-btn v-if="!resettingProgress" small :padding-x="2" class="-mr-3" @click="resetProgress">Reset</ui-btn>
-        </div>
-      </div> -->
-
-        <ui-text-input-with-label v-model="details.title" label="Title" />
-
-        <ui-text-input-with-label v-model="details.subtitle" label="Subtitle" class="mt-2" />
-
-        <div class="flex mt-2 -mx-1">
-          <div class="w-3/4 px-1">
-            <ui-text-input-with-label v-model="details.author" label="Author" />
-          </div>
-          <div class="flex-grow px-1">
-            <ui-text-input-with-label v-model="details.publishYear" type="number" label="Publish Year" />
-          </div>
-        </div>
-
-        <div class="flex mt-2 -mx-1">
-          <div class="w-3/4 px-1">
-            <ui-input-dropdown v-model="details.series" label="Series" :items="series" />
-          </div>
-          <div class="flex-grow px-1">
-            <ui-text-input-with-label v-model="details.volumeNumber" label="Volume #" />
-          </div>
-        </div>
-
-        <ui-textarea-with-label v-model="details.description" :rows="3" label="Description" class="mt-2" />
-
-        <div class="flex mt-2 -mx-1">
-          <div class="w-1/2 px-1">
-            <ui-multi-select v-model="details.genres" label="Genres" :items="genres" />
-          </div>
-          <div class="flex-grow px-1">
-            <ui-multi-select v-model="newTags" label="Tags" :items="tags" />
-          </div>
-        </div>
-
-        <div class="flex mt-2 -mx-1">
-          <div class="w-1/2 px-1">
-            <ui-text-input-with-label v-model="details.narrator" label="Narrator" />
-          </div>
-        </div>
-      </div>
-
-      <div class="absolute bottom-0 left-0 w-full py-4 bg-bg" :class="isScrollable ? 'box-shadow-md-up' : 'box-shadow-sm-up border-t border-primary border-opacity-50'">
-        <div class="flex items-center px-4">
-          <ui-btn v-if="userCanDelete" color="error" type="button" class="h-8" :padding-x="3" small @click.stop.prevent="deleteAudiobook">Remove</ui-btn>
-
-          <div class="flex-grow" />
-
-          <ui-tooltip v-if="!isMissing" text="(Root User Only) Save a NFO metadata file in your audiobooks directory" direction="bottom" class="mr-4">
-            <ui-btn v-if="isRootUser" :loading="savingMetadata" color="bg" type="button" class="h-full" small @click.stop.prevent="saveMetadata">Save Metadata</ui-btn>
-          </ui-tooltip>
-
-          <ui-tooltip :disabled="!!libraryScan" text="(Root User Only) Rescan audiobook including metadata" direction="bottom" class="mr-4">
-            <ui-btn v-if="isRootUser" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">Re-Scan</ui-btn>
-          </ui-tooltip>
-
-          <ui-btn type="submit">Submit</ui-btn>
-        </div>
-      </div>
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    processing: Boolean,
-    audiobook: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      details: {
-        title: null,
-        subtitle: null,
-        description: null,
-        author: null,
-        narrator: null,
-        series: null,
-        volumeNumber: null,
-        publishYear: null,
-        genres: []
-      },
-      newTags: [],
-      resettingProgress: false,
-      isScrollable: false,
-      savingMetadata: false,
-      rescanning: false
-    }
-  },
-  watch: {
-    audiobook: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) this.init()
-      }
-    }
-  },
-  computed: {
-    isProcessing: {
-      get() {
-        return this.processing
-      },
-      set(val) {
-        this.$emit('update:processing', val)
-      }
-    },
-    isRootUser() {
-      return this.$store.getters['user/getIsRoot']
-    },
-    isMissing() {
-      return !!this.audiobook && !!this.audiobook.isMissing
-    },
-    audiobookId() {
-      return this.audiobook ? this.audiobook.id : null
-    },
-    book() {
-      return this.audiobook ? this.audiobook.book || {} : {}
-    },
-    userCanDelete() {
-      return this.$store.getters['user/getUserCanDelete']
-    },
-    genres() {
-      return this.$store.state.audiobooks.genres
-    },
-    tags() {
-      return this.$store.state.audiobooks.tags
-    },
-    series() {
-      return this.$store.state.audiobooks.series
-    },
-    libraryId() {
-      return this.audiobook ? this.audiobook.libraryId : null
-    },
-    libraryScan() {
-      if (!this.libraryId) return null
-      return this.$store.getters['scanners/getLibraryScan'](this.libraryId)
-    }
-  },
-  methods: {
-    audiobookScanComplete(result) {
-      this.rescanning = false
-      if (!result) {
-        this.$toast.error(`Re-Scan Failed for "${this.title}"`)
-      } else if (result === 'UPDATED') {
-        this.$toast.success(`Re-Scan complete audiobook was updated`)
-      } else if (result === 'UPTODATE') {
-        this.$toast.success(`Re-Scan complete audiobook was up to date`)
-      } else if (result === 'REMOVED') {
-        this.$toast.error(`Re-Scan complete audiobook was removed`)
-      }
-    },
-    rescan() {
-      this.rescanning = true
-      this.$root.socket.once('audiobook_scan_complete', this.audiobookScanComplete)
-      this.$root.socket.emit('scan_audiobook', this.audiobookId)
-    },
-    saveMetadataComplete(result) {
-      this.savingMetadata = false
-      if (result.error) {
-        this.$toast.error(result.error)
-      } else if (result.audiobookId) {
-        var { savedPath } = result
-        if (!savedPath) {
-          this.$toast.error(`Failed to save metadata file (${result.audiobookId})`)
-        } else {
-          this.$toast.success(`Metadata file saved "${result.audiobookTitle}"`)
-        }
-      }
-    },
-    saveMetadata() {
-      this.savingMetadata = true
-      this.$root.socket.once('save_metadata_complete', this.saveMetadataComplete)
-      this.$root.socket.emit('save_metadata', this.audiobookId)
-    },
-    async submitForm() {
-      if (this.isProcessing) {
-        return
-      }
-      this.isProcessing = true
-      const updatePayload = {
-        book: this.details,
-        tags: this.newTags
-      }
-
-      var updatedAudiobook = await this.$axios.$patch(`/api/audiobook/${this.audiobook.id}`, updatePayload).catch((error) => {
-        console.error('Failed to update', error)
-        return false
-      })
-      this.isProcessing = false
-      if (updatedAudiobook) {
-        this.$toast.success('Update Successful')
-        this.$emit('close')
-      }
-    },
-    init() {
-      this.details.title = this.book.title
-      this.details.subtitle = this.book.subtitle
-      this.details.description = this.book.description
-      this.details.author = this.book.author
-      this.details.narrator = this.book.narrator
-      this.details.genres = this.book.genres || []
-      this.details.series = this.book.series
-      this.details.volumeNumber = this.book.volumeNumber
-      this.details.publishYear = this.book.publishYear
-
-      this.newTags = this.audiobook.tags || []
-    },
-    resetProgress() {
-      if (confirm(`Are you sure you want to reset your progress?`)) {
-        this.resettingProgress = true
-        this.$axios
-          .$delete(`/api/user/audiobook/${this.audiobookId}`)
-          .then(() => {
-            console.log('Progress reset complete')
-            this.$toast.success(`Your progress was reset`)
-            this.resettingProgress = false
-          })
-          .catch((error) => {
-            console.error('Progress reset failed', error)
-            this.resettingProgress = false
-          })
-      }
-    },
-    deleteAudiobook() {
-      if (confirm(`Are you sure you want to remove this audiobook?\n\n*Does not delete your files, only removes the audiobook from AudioBookshelf`)) {
-        this.isProcessing = true
-        this.$axios
-          .$delete(`/api/audiobook/${this.audiobookId}`)
-          .then(() => {
-            console.log('Audiobook removed')
-            this.$toast.success('Audiobook Removed')
-            this.$emit('close')
-            this.isProcessing = false
-          })
-          .catch((error) => {
-            console.error('Remove Audiobook failed', error)
-            this.isProcessing = false
-          })
-      }
-    },
-    checkIsScrollable() {
-      this.$nextTick(() => {
-        if (this.$refs.formWrapper) {
-          if (this.$refs.formWrapper.scrollHeight > this.$refs.formWrapper.clientHeight) {
-            this.isScrollable = true
-          } else {
-            this.isScrollable = false
-          }
-        }
-      })
-    },
-    setResizeObserver() {
-      try {
-        this.$nextTick(() => {
-          const resizeObserver = new ResizeObserver(() => {
-            this.checkIsScrollable()
-          })
-          resizeObserver.observe(this.$refs.formWrapper)
-        })
-      } catch (error) {
-        console.error('Failed to set resize observer')
-      }
-    }
-  },
-  mounted() {
-    // this.init()
-    this.setResizeObserver()
-  }
-}
-</script>
-
-<style scoped>
-.details-form-wrapper {
-  height: calc(100% - 70px);
-  max-height: calc(100% - 70px);
-}
-</style>

client/components/modals/edit-tabs/Download.vue

@@ -1,215 +0,0 @@
-<template>
-  <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6">
-    <p class="text-center text-lg mb-4 py-8">Preparing downloads can take several minutes and will be stored in <span class="bg-primary bg-opacity-75 font-mono p-1 text-base">/metadata/downloads</span>. After the download is ready, it will remain available for 60 minutes, then be deleted.<br />Download will timeout after 15 minutes.</p>
-    <div v-if="showM4bDownload" class="w-full border border-black-200 p-4 my-4">
-      <div class="flex items-center">
-        <div>
-          <p class="text-lg">M4B Audiobook File <span class="text-error">*</span></p>
-          <p class="max-w-xs text-sm pt-2 text-gray-300">Generate a .M4B audiobook file with embedded cover image and chapters.</p>
-        </div>
-        <div class="flex-grow" />
-        <div>
-          <p v-if="singleDownloadStatus === $constants.DownloadStatus.FAILED" class="text-error mb-2">Download Failed</p>
-          <p v-if="singleDownloadStatus === $constants.DownloadStatus.READY" class="text-success mb-2">Download Ready!</p>
-          <p v-if="singleDownloadStatus === $constants.DownloadStatus.EXPIRED" class="text-error mb-2">Download Expired</p>
-
-          <ui-btn v-if="singleDownloadStatus !== $constants.DownloadStatus.READY" :loading="singleDownloadStatus === $constants.DownloadStatus.PENDING" :disabled="tempDisable" @click="startSingleAudioDownload">Start Download</ui-btn>
-          <div v-else>
-            <ui-btn @click="downloadWithProgress(singleAudioDownload)">Download</ui-btn>
-            <p class="px-0.5 py-1 text-sm font-mono text-center">Size: {{ $bytesPretty(singleAudioDownload.size) }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="w-full border border-black-200 p-4 my-4">
-      <div class="flex items-center">
-        <div>
-          <p v-if="totalFiles > 1" class="text-lg">Zip {{ totalFiles }} Files</p>
-          <p v-else>Zip 1 File</p>
-          <p class="max-w-xs text-sm pt-2 text-gray-300">Generate a .ZIP file from the contents of the audiobook directory.</p>
-        </div>
-
-        <div class="flex-grow" />
-        <div>
-          <p v-if="zipDownloadStatus === $constants.DownloadStatus.FAILED" class="text-error mb-2">Download Failed</p>
-          <p v-if="zipDownloadStatus === $constants.DownloadStatus.READY" class="text-success mb-2">Download Ready!</p>
-          <p v-if="zipDownloadStatus === $constants.DownloadStatus.EXPIRED" class="text-error mb-2">Download Expired</p>
-
-          <ui-btn v-if="zipDownloadStatus !== $constants.DownloadStatus.READY" :loading="zipDownloadStatus === $constants.DownloadStatus.PENDING" :disabled="tempDisable" @click="startZipDownload">Start Download</ui-btn>
-          <div v-else>
-            <ui-btn @click="downloadWithProgress(zipDownload)">Download</ui-btn>
-            <p class="px-0.5 py-1 text-sm font-mono text-center">Size: {{ $bytesPretty(zipDownload.size) }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="showM4bDownload" class="w-full flex items-center justify-center absolute bottom-4 left-0 right-0 text-center">
-      <p class="text-error text-lg">* <strong>Experimental:</strong> Merging multiple .m4b files may have issues. <a href="https://github.com/advplyr/audiobookshelf/issues" class="underline text-blue-600" target="_blank">Report issues here.</a></p>
-    </div>
-
-    <div v-if="isDownloading" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50 flex items-center justify-center">
-      <div class="w-80 border border-black-400 bg-bg rounded-xl h-20">
-        <div class="w-full h-full flex items-center justify-center">
-          <p class="text-lg">Download.... {{ downloadPercent }}%</p>
-          <p class="w-24 font-mono pl-8 text-right">
-            {{ downloadAmount }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    processing: Boolean,
-    audiobook: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      tempDisable: false,
-      isDownloading: false,
-      downloadPercent: '0',
-      downloadAmount: '0 KB'
-    }
-  },
-  watch: {
-    singleDownloadStatus(newVal) {
-      if (newVal) {
-        this.tempDisable = false
-      }
-    }
-  },
-  computed: {
-    audiobookId() {
-      return this.audiobook ? this.audiobook.id : null
-    },
-    _audiobook() {
-      return this.audiobook || {}
-    },
-    downloads() {
-      return this.$store.getters['downloads/getDownloads'](this.audiobookId)
-    },
-    singleAudioDownload() {
-      return this.downloads.find((d) => d.type === 'singleAudio')
-    },
-    singleDownloadStatus() {
-      return this.singleAudioDownload ? this.singleAudioDownload.status : false
-    },
-    zipDownload() {
-      return this.downloads.find((d) => d.type === 'zip')
-    },
-    zipDownloadStatus() {
-      return this.zipDownload ? this.zipDownload.status : false
-    },
-    isSingleTrack() {
-      if (!this.audiobook.tracks) return false
-      return this.audiobook.tracks.length === 1
-    },
-    singleTrackPath() {
-      if (!this.isSingleTrack) return null
-      return this.audiobook.tracks[0].path
-    },
-    audioFiles() {
-      return this.audiobook ? this.audiobook.audioFiles || [] : []
-    },
-    otherFiles() {
-      return this.audiobook ? this.audiobook.otherFiles || [] : []
-    },
-    totalFiles() {
-      return this.audioFiles.length + this.otherFiles.length
-    },
-    showM4bDownload() {
-      return !this._audiobook.isMissing && !this._audiobook.isIncomplete && this._audiobook.tracks.length
-    }
-  },
-  methods: {
-    startZipDownload() {
-      // console.log('Download request received', this.audiobook)
-
-      this.tempDisable = true
-      setTimeout(() => {
-        this.tempDisable = false
-      }, 1000)
-
-      var downloadPayload = {
-        audiobookId: this.audiobook.id,
-        type: 'zip'
-      }
-      this.$root.socket.emit('download', downloadPayload)
-    },
-    startSingleAudioDownload() {
-      // console.log('Download request received', this.audiobook)
-
-      this.tempDisable = true
-      setTimeout(() => {
-        this.tempDisable = false
-      }, 1000)
-
-      var downloadPayload = {
-        audiobookId: this.audiobook.id,
-        type: 'singleAudio',
-        includeMetadata: true,
-        includeCover: true
-      }
-      this.$root.socket.emit('download', downloadPayload)
-    },
-    downloadWithProgress(download) {
-      var downloadId = download.id
-      var downloadUrl = `${process.env.serverUrl}/api/download/${downloadId}`
-      var filename = download.filename
-
-      this.isDownloading = true
-
-      var request = new XMLHttpRequest()
-      request.responseType = 'blob'
-      request.open('get', downloadUrl, true)
-      request.setRequestHeader('Authorization', `Bearer ${this.$store.getters['user/getToken']}`)
-      request.send()
-
-      request.onreadystatechange = () => {
-        if (request.readyState === 4) {
-          this.isDownloading = false
-        }
-        if (request.readyState == 4 && request.status == 200) {
-          const url = window.URL.createObjectURL(request.response)
-
-          const anchor = document.createElement('a')
-          anchor.href = url
-          anchor.download = filename
-          document.body.appendChild(anchor)
-          anchor.click()
-          setTimeout(() => {
-            if (anchor) anchor.remove()
-          }, 1000)
-        }
-      }
-
-      request.onerror = (err) => {
-        console.error('Download error', err)
-        this.isDownloading = false
-      }
-
-      request.onprogress = (e) => {
-        const percent_complete = Math.floor((e.loaded / e.total) * 100)
-        this.downloadAmount = this.$bytesPretty(e.loaded)
-        this.downloadPercent = percent_complete
-
-        // const duration = (new Date().getTime() - startTime) / 1000
-        // const bps = e.loaded / duration
-        // const kbps = Math.floor(bps / 1024)
-        // const time = (e.total - e.loaded) / bps
-        // const seconds = Math.floor(time % 60)
-        // const minutes = Math.floor(time / 60)
-        // console.log(`${percent_complete}% - ${kbps} Kbps - ${minutes} min ${seconds} sec remaining`)
-      }
-    }
-  },
-  mounted() {}
-}
-</script>

client/components/modals/edit-tabs/Files.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
-    <tables-all-files-table :audiobook="audiobook" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    audiobook: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {},
-  methods: {}
-}
-</script>

client/components/modals/edit-tabs/Match.vue

@@ -1,144 +0,0 @@
-<template>
-  <div class="w-full h-full overflow-hidden px-4 py-6">
-    <form @submit.prevent="submitSearch">
-      <div class="flex items-center justify-start -mx-1 h-20">
-        <div class="w-72 px-1">
-          <ui-text-input-with-label v-model="searchTitle" label="Search Title" placeholder="Search" :disabled="processing" />
-        </div>
-        <div class="w-72 px-1">
-          <ui-text-input-with-label v-model="searchAuthor" label="Author" :disabled="processing" />
-        </div>
-        <ui-btn class="mt-5 ml-1" type="submit">Search</ui-btn>
-        <div class="flex-grow" />
-      </div>
-    </form>
-    <div v-show="processing" class="flex h-full items-center justify-center">
-      <p>Loading...</p>
-    </div>
-    <div v-show="!processing && !searchResults.length && hasSearched" class="flex h-full items-center justify-center">
-      <p>No Results</p>
-    </div>
-    <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper">
-      <template v-for="(res, index) in searchResults">
-        <cards-book-match-card :key="index" :book="res" @select="selectMatch" />
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    processing: Boolean,
-    audiobook: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      audiobookId: null,
-      searchTitle: null,
-      searchAuthor: null,
-      lastSearch: null,
-      provider: 'best',
-      searchResults: [],
-      hasSearched: false
-    }
-  },
-  watch: {
-    audiobook: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) this.init()
-      }
-    }
-  },
-  computed: {
-    isProcessing: {
-      get() {
-        return this.processing
-      },
-      set(val) {
-        this.$emit('update:processing', val)
-      }
-    }
-  },
-  methods: {
-    getSearchQuery() {
-      var searchQuery = `provider=${this.provider}&fallbackTitleOnly=1&title=${this.searchTitle}`
-      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
-      return searchQuery
-    },
-    submitSearch() {
-      if (!this.searchTitle) {
-        this.$toast.warning('Search title is required')
-        return
-      }
-      this.runSearch()
-    },
-    async runSearch() {
-      var searchQuery = this.getSearchQuery()
-      if (this.lastSearch === searchQuery) return
-      this.searchResults = []
-      this.isProcessing = true
-      this.lastSearch = searchQuery
-      var results = await this.$axios.$get(`/api/find/search?${searchQuery}`).catch((error) => {
-        console.error('Failed', error)
-        return []
-      })
-      results = results.filter((res) => {
-        return !!res.title
-      })
-      this.searchResults = results
-      this.isProcessing = false
-      this.hasSearched = true
-    },
-    init() {
-      if (this.audiobook.id !== this.audiobookId) {
-        this.searchResults = []
-        this.hasSearched = false
-        this.audiobookId = this.audiobook.id
-      }
-
-      if (!this.audiobook.book || !this.audiobook.book.title) {
-        this.searchTitle = null
-        this.searchAuthor = null
-        return
-      }
-      this.searchTitle = this.audiobook.book.title
-      this.searchAuthor = this.audiobook.book.author || ''
-    },
-    async selectMatch(match) {
-      this.isProcessing = true
-      const updatePayload = {
-        book: {}
-      }
-      if (match.cover) {
-        updatePayload.book.cover = match.cover
-      }
-      if (match.title) {
-        updatePayload.book.title = match.title
-      }
-      if (match.description) {
-        updatePayload.book.description = match.description
-      }
-      var updatedAudiobook = await this.$axios.$patch(`/api/audiobook/${this.audiobook.id}`, updatePayload).catch((error) => {
-        console.error('Failed to update', error)
-        return false
-      })
-      this.isProcessing = false
-      if (updatedAudiobook) {
-        this.$toast.success('Update Successful')
-        this.$emit('close')
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.matchListWrapper {
-  height: calc(100% - 80px);
-}
-</style>

client/components/modals/edit-tabs/Tracks.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
-    <template v-if="hasTracks">
-      <div class="w-full bg-primary px-4 py-2 flex items-center">
-        <div class="h-7 w-7 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
-          <span class="text-sm font-mono">{{ tracks.length }}</span>
-        </div>
-        <div class="flex-grow" />
-        <ui-btn small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2" @click.stop="showFullPath = !showFullPath">Full Path</ui-btn>
-        <nuxt-link v-if="userCanUpdate" :to="`/audiobook/${audiobook.id}/edit`" class="mr-4">
-          <ui-btn small color="primary">Manage Tracks</ui-btn>
-        </nuxt-link>
-      </div>
-      <table class="text-sm tracksTable">
-        <tr class="font-book">
-          <th>#</th>
-          <th class="text-left">Filename</th>
-          <th class="text-left">Size</th>
-          <th class="text-left">Duration</th>
-          <th v-if="showDownload" class="text-center">Download</th>
-        </tr>
-        <template v-for="track in tracksCleaned">
-          <tr :key="track.index">
-            <td class="text-center">
-              <p>{{ track.index }}</p>
-            </td>
-            <td class="font-sans">{{ showFullPath ? track.fullPath : track.filename }}</td>
-            <td class="font-mono">
-              {{ $bytesPretty(track.size) }}
-            </td>
-            <td class="font-mono">
-              {{ $secondsToTimestamp(track.duration) }}
-            </td>
-            <td v-if="showDownload" class="font-mono text-center">
-              <a :href="`/s/book/${audiobook.id}/${track.relativePath}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
-            </td>
-          </tr>
-        </template>
-      </table>
-    </template>
-    <div v-else class="flex my-4 text-center justify-center text-xl">No Audio Tracks</div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    audiobook: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      tracks: null,
-      showFullPath: false
-    }
-  },
-  watch: {
-    audiobook: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) this.init()
-      }
-    }
-  },
-  computed: {
-    audiobookPath() {
-      return this.audiobook.path
-    },
-    tracksCleaned() {
-      return this.tracks.map((track) => {
-        var trackPath = track.path.replace(/\\/g, '/')
-        var audiobookPath = this.audiobookPath.replace(/\\/g, '/')
-
-        return {
-          ...track,
-          relativePath: trackPath
-            .replace(audiobookPath + '/', '')
-            .replace(/%/g, '%25')
-            .replace(/#/g, '%23')
-        }
-      })
-    },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
-    userCanUpdate() {
-      return this.$store.getters['user/getUserCanUpdate']
-    },
-    userCanDownload() {
-      return this.$store.getters['user/getUserCanDownload']
-    },
-    isMissing() {
-      return this.audiobook.isMissing
-    },
-    showDownload() {
-      return this.userCanDownload && !this.isMissing
-    },
-    hasTracks() {
-      return this.audiobook.tracks.length
-    }
-  },
-  methods: {
-    init() {
-      this.tracks = this.audiobook.tracks
-    }
-  }
-}
-</script>

client/components/modals/item/EditModal.vue

@@ -0,0 +1,303 @@
+<template>
+  <modals-modal v-model="show" name="edit-book" :width="800" :height="height" :processing="processing" :content-margin-top="marginTop">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-4 landscape:px-4 landscape:py-2 md:portrait:p-5 lg:p-5 w-2/3 overflow-hidden pointer-events-none">
+        <p class="font-book text-xl md:portrait:text-3xl md:landscape:text-lg lg:text-3xl text-white truncate pointer-events-none">{{ title }}</p>
+      </div>
+    </template>
+    <div class="absolute -top-10 left-0 z-10 w-full flex">
+      <template v-for="tab in availableTabs">
+        <div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-0.5 sm:mr-1 cursor-pointer hover:bg-bg font-book border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
+      </template>
+    </div>
+
+    <div v-show="canGoPrev" class="absolute -left-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
+      <div class="material-icons text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goPrevBook" @mousedown.prevent>arrow_back_ios</div>
+    </div>
+    <div v-show="canGoNext" class="absolute -right-24 top-0 bottom-0 h-full pointer-events-none flex items-center px-6">
+      <div class="material-icons text-5xl text-white text-opacity-50 hover:text-opacity-90 cursor-pointer pointer-events-auto" @click.stop.prevent="goNextBook" @mousedown.prevent>arrow_forward_ios</div>
+    </div>
+
+    <div class="w-full h-full max-h-full text-sm rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative">
+      <component v-if="libraryItem && show" :is="tabName" :library-item="libraryItem" :processing.sync="processing" @close="show = false" @selectTab="selectTab" />
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      processing: false,
+      libraryItem: null,
+      availableHeight: 0,
+      marginTop: 0
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          var availableTabIds = this.availableTabs.map((tab) => tab.id)
+          if (!availableTabIds.length) {
+            this.show = false
+            return
+          }
+
+          if (!availableTabIds.includes(this.selectedTab)) {
+            this.selectedTab = availableTabIds[0]
+          }
+
+          this.libraryItem = null
+          this.init()
+          this.registerListeners()
+        } else {
+          this.unregisterListeners()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.showEditModal
+      },
+      set(val) {
+        this.$store.commit('setShowEditModal', val)
+      }
+    },
+    selectedTab: {
+      get() {
+        return this.$store.state.editModalTab
+      },
+      set(val) {
+        this.$store.commit('setEditModalTab', val)
+      }
+    },
+    tabs() {
+      return [
+        {
+          id: 'details',
+          title: this.$strings.HeaderDetails,
+          component: 'modals-item-tabs-details'
+        },
+        {
+          id: 'cover',
+          title: this.$strings.HeaderCover,
+          component: 'modals-item-tabs-cover'
+        },
+        {
+          id: 'chapters',
+          title: this.$strings.HeaderChapters,
+          component: 'modals-item-tabs-chapters',
+          mediaType: 'book'
+        },
+        {
+          id: 'episodes',
+          title: this.$strings.HeaderEpisodes,
+          component: 'modals-item-tabs-episodes',
+          mediaType: 'podcast'
+        },
+        {
+          id: 'files',
+          title: this.$strings.HeaderFiles,
+          component: 'modals-item-tabs-files'
+        },
+        {
+          id: 'match',
+          title: this.$strings.HeaderMatch,
+          component: 'modals-item-tabs-match'
+        },
+        {
+          id: 'tools',
+          title: this.$strings.HeaderTools,
+          component: 'modals-item-tabs-tools',
+          mediaType: 'book',
+          admin: true
+        },
+        {
+          id: 'schedule',
+          title: this.$strings.HeaderSchedule,
+          component: 'modals-item-tabs-schedule',
+          mediaType: 'podcast',
+          admin: true
+        }
+      ]
+    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    userCanDownload() {
+      return this.$store.getters['user/getUserCanDownload']
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    availableTabs() {
+      if (!this.userCanUpdate && !this.userCanDownload) return []
+      return this.tabs.filter((tab) => {
+        if (tab.experimental && !this.showExperimentalFeatures) return false
+        if (tab.mediaType && this.mediaType !== tab.mediaType) return false
+        if (tab.admin && !this.userIsAdminOrUp) return false
+
+        if (tab.id === 'tools' && this.isMissing) return false
+
+        if ((tab.id === 'tools' || tab.id === 'files') && this.userCanDownload) return true
+        if (tab.id !== 'tools' && tab.id !== 'files' && this.userCanUpdate) return true
+        if (tab.id === 'match' && this.userCanUpdate) return true
+        return false
+      })
+    },
+    height() {
+      return Math.min(this.availableHeight, 650)
+    },
+    tabName() {
+      var _tab = this.tabs.find((t) => t.id === this.selectedTab)
+      return _tab ? _tab.component : ''
+    },
+    isMissing() {
+      return this.selectedLibraryItem.isMissing
+    },
+    selectedLibraryItem() {
+      return this.$store.state.selectedLibraryItem || {}
+    },
+    selectedLibraryItemId() {
+      return this.selectedLibraryItem.id
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    mediaType() {
+      return this.libraryItem ? this.libraryItem.mediaType : null
+    },
+    title() {
+      return this.mediaMetadata.title || 'No Title'
+    },
+    bookshelfBookIds() {
+      return this.$store.state.bookshelfBookIds || []
+    },
+    currentBookshelfIndex() {
+      if (!this.bookshelfBookIds.length) return 0
+      return this.bookshelfBookIds.findIndex((bid) => bid === this.selectedLibraryItemId)
+    },
+    canGoPrev() {
+      return this.bookshelfBookIds.length && this.currentBookshelfIndex > 0
+    },
+    canGoNext() {
+      return this.bookshelfBookIds.length && this.currentBookshelfIndex < this.bookshelfBookIds.length - 1
+    }
+  },
+  methods: {
+    async goPrevBook() {
+      if (this.currentBookshelfIndex - 1 < 0) return
+      var prevBookId = this.bookshelfBookIds[this.currentBookshelfIndex - 1]
+      this.processing = true
+      var prevBook = await this.$axios.$get(`/api/items/${prevBookId}?expanded=1`).catch((error) => {
+        var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to fetch book'
+        this.$toast.error(errorMsg)
+        return null
+      })
+      this.processing = false
+      if (prevBook) {
+        this.unregisterListeners()
+        this.libraryItem = prevBook
+        this.$store.commit('setSelectedLibraryItem', prevBook)
+        this.$nextTick(this.registerListeners)
+      } else {
+        console.error('Book not found', prevBookId)
+      }
+    },
+    async goNextBook() {
+      if (this.currentBookshelfIndex >= this.bookshelfBookIds.length - 1) return
+      this.processing = true
+      var nextBookId = this.bookshelfBookIds[this.currentBookshelfIndex + 1]
+      var nextBook = await this.$axios.$get(`/api/items/${nextBookId}?expanded=1`).catch((error) => {
+        var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to fetch book'
+        this.$toast.error(errorMsg)
+        return null
+      })
+      this.processing = false
+      if (nextBook) {
+        this.unregisterListeners()
+        this.libraryItem = nextBook
+        this.$store.commit('setSelectedLibraryItem', nextBook)
+        this.$nextTick(this.registerListeners)
+      } else {
+        console.error('Book not found', nextBookId)
+      }
+    },
+    selectTab(tab) {
+      if (this.selectedTab === tab) return
+      if (this.availableTabs.find((t) => t.id === tab)) {
+        this.selectedTab = tab
+        this.processing = false
+      }
+    },
+    libraryItemUpdated(expandedLibraryItem) {
+      this.libraryItem = expandedLibraryItem
+    },
+    init() {
+      this.fetchFull()
+    },
+    async fetchFull() {
+      try {
+        this.processing = true
+        this.libraryItem = await this.$axios.$get(`/api/items/${this.selectedLibraryItemId}?expanded=1`)
+        this.processing = false
+      } catch (error) {
+        console.error('Failed to fetch audiobook', this.selectedLibraryItemId, error)
+        this.processing = false
+        this.show = false
+      }
+    },
+    hotkey(action) {
+      if (action === this.$hotkeys.Modal.NEXT_PAGE) {
+        this.goNextBook()
+      } else if (action === this.$hotkeys.Modal.PREV_PAGE) {
+        this.goPrevBook()
+      }
+    },
+    registerListeners() {
+      window.addEventListener('orientationchange', this.orientationChange)
+      this.$eventBus.$on('modal-hotkey', this.hotkey)
+      this.$eventBus.$on(`${this.selectedLibraryItemId}_updated`, this.libraryItemUpdated)
+    },
+    unregisterListeners() {
+      window.removeEventListener('orientationchange', this.orientationChange)
+      this.$eventBus.$off('modal-hotkey', this.hotkey)
+      this.$eventBus.$off(`${this.selectedLibraryItemId}_updated`, this.libraryItemUpdated)
+    },
+    orientationChange() {
+      setTimeout(this.setHeight, 50)
+    },
+    setHeight() {
+      const smAndBelow = window.innerWidth < 1024 && window.innerWidth > window.innerHeight
+
+      this.marginTop = smAndBelow ? 90 : 75
+      const heightModifier = smAndBelow ? 95 : 150
+      this.availableHeight = window.innerHeight - heightModifier
+    }
+  },
+  mounted() {
+    this.setHeight()
+  },
+  beforeDestroy() {
+    this.unregisterListeners()
+  }
+}
+</script>
+
+<style scoped>
+.tab {
+  height: 40px;
+}
+.tab.tab-selected {
+  height: 41px;
+}
+</style>

client/components/modals/item/tabs/Chapters.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
+    <div class="w-full mb-4">
+      <tables-chapters-table v-if="chapters.length" :library-item="libraryItem" keep-open />
+      <div v-if="!chapters.length" class="py-4 text-center">
+        <p class="mb-8 text-xl">{{ $strings.MessageNoChapters }}</p>
+        <ui-btn v-if="userCanUpdate" :to="`/audiobook/${libraryItem.id}/chapters`">{{ $strings.ButtonAddChapters }}</ui-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    chapters() {
+      return this.media.chapters || []
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    }
+  },
+  methods: {}
+}
+</script>

client/components/modals/item/tabs/Cover.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
+    <div class="flex flex-wrap">
+      <div class="relative">
+        <covers-book-cover :library-item="libraryItem" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        <!-- book cover overlay -->
+        <div v-if="media.coverPath" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
+          <div class="absolute top-0 left-0 w-full h-16 bg-gradient-to-b from-black-600 to-transparent" />
+          <div class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-sm" @click="removeCover">
+            <ui-tooltip direction="top" :text="$strings.LabelRemoveCover">
+              <span class="material-icons text-2xl">delete</span>
+            </ui-tooltip>
+          </div>
+        </div>
+      </div>
+      <div class="flex-grow sm:pl-2 md:pl-6 sm:pr-2 mt-2 md:mt-0">
+        <div class="flex items-center">
+          <div v-if="userCanUpload" class="w-10 md:w-40 pr-2 pt-4 md:min-w-32">
+            <ui-file-input ref="fileInput" @change="fileUploadSelected"
+              ><span class="hidden md:inline-block">{{ $strings.ButtonUploadCover }}</span
+              ><span class="material-icons text-2xl inline-block md:!hidden">upload</span></ui-file-input
+            >
+          </div>
+          <form @submit.prevent="submitForm" class="flex flex-grow">
+            <ui-text-input-with-label v-model="imageUrl" :label="$strings.LabelCoverImageURL" />
+            <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-2 sm:ml-3 w-24">{{ $strings.ButtonSave }}</ui-btn>
+          </form>
+        </div>
+
+        <div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-primary">
+          <div class="flex items-center justify-center py-2">
+            <p>{{ localCovers.length }} local image{{ localCovers.length !== 1 ? 's' : '' }}</p>
+            <div class="flex-grow" />
+            <ui-btn small @click="showLocalCovers = !showLocalCovers">{{ showLocalCovers ? $strings.ButtonHide : $strings.ButtonShow }}</ui-btn>
+          </div>
+
+          <div v-if="showLocalCovers" class="flex items-center justify-center">
+            <template v-for="cover in localCovers">
+              <div :key="cover.path" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover.metadata.path === coverPath ? 'border-yellow-300' : ''" @click="setCover(cover)">
+                <div class="h-24 bg-primary" :style="{ width: 96 / bookCoverAspectRatio + 'px' }">
+                  <covers-preview-cover :src="`${cover.localPath}?token=${userToken}`" :width="96 / bookCoverAspectRatio" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+    <form @submit.prevent="submitSearchForm">
+      <div class="flex items-center justify-start -mx-1 h-20">
+        <div class="w-40 px-1">
+          <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
+        </div>
+        <div class="w-72 px-1">
+          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" :placeholder="$strings.PlaceholderSearch" />
+        </div>
+        <div v-show="provider != 'itunes'" class="w-72 px-1">
+          <ui-text-input-with-label v-model="searchAuthor" :label="$strings.LabelAuthor" />
+        </div>
+        <ui-btn class="mt-5 ml-1" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
+      </div>
+    </form>
+    <div v-if="hasSearched" class="flex items-center flex-wrap justify-center max-h-80 overflow-y-scroll mt-2 max-w-full">
+      <p v-if="!coversFound.length">{{ $strings.MessageNoCoversFound }}</p>
+      <template v-for="cover in coversFound">
+        <div :key="cover" class="m-0.5 mb-5 border-2 border-transparent hover:border-yellow-300 cursor-pointer" :class="cover === imageUrl ? 'border-yellow-300' : ''" @click="updateCover(cover)">
+          <covers-preview-cover :src="cover" :width="80" show-open-new-tab :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        </div>
+      </template>
+    </div>
+
+    <div v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
+      <p class="text-lg">{{ $strings.HeaderPreviewCover }}</p>
+      <span class="absolute top-4 right-4 material-icons text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
+      <div class="flex justify-center py-4">
+        <covers-preview-cover :src="previewUpload" :width="240" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+      </div>
+      <div class="absolute bottom-0 right-0 flex py-4 px-5">
+        <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">{{ $strings.ButtonReset }}</ui-btn>
+        <ui-btn :loading="processingUpload" color="success" @click="submitCoverUpload">{{ $strings.ButtonUpload }}</ui-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      processingUpload: false,
+      searchTitle: null,
+      searchAuthor: null,
+      imageUrl: null,
+      coversFound: [],
+      hasSearched: false,
+      showLocalCovers: false,
+      previewUpload: null,
+      selectedFile: null,
+      provider: 'google'
+    }
+  },
+  watch: {
+    libraryItem: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    isProcessing: {
+      get() {
+        return this.processing
+      },
+      set(val) {
+        this.$emit('update:processing', val)
+      }
+    },
+    providers() {
+      if (this.isPodcast) return this.$store.state.scanners.podcastProviders
+      return this.$store.state.scanners.providers
+    },
+    searchTitleLabel() {
+      if (this.provider.startsWith('audible')) return this.$strings.LabelSearchTitleOrASIN
+      else if (this.provider == 'itunes') return this.$strings.LabelSearchTerm
+      return this.$strings.LabelSearchTitle
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    libraryItemId() {
+      return this.libraryItem ? this.libraryItem.id : null
+    },
+    mediaType() {
+      return this.libraryItem ? this.libraryItem.mediaType : null
+    },
+    isPodcast() {
+      return this.mediaType == 'podcast'
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    coverPath() {
+      return this.media.coverPath
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    libraryFiles() {
+      return this.libraryItem ? this.libraryItem.libraryFiles || [] : []
+    },
+    userCanUpload() {
+      return this.$store.getters['user/getUserCanUpload']
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
+    localCovers() {
+      return this.libraryFiles
+        .filter((f) => f.fileType === 'image')
+        .map((file) => {
+          var _file = { ...file }
+          _file.localPath = `${process.env.serverUrl}/s/item/${this.libraryItemId}/${this.$encodeUriPath(file.metadata.relPath).replace(/^\//, '')}`
+          return _file
+        })
+    }
+  },
+  methods: {
+    submitCoverUpload() {
+      this.processingUpload = true
+      var form = new FormData()
+      form.set('cover', this.selectedFile)
+
+      this.$axios
+        .$post(`/api/items/${this.libraryItemId}/cover`, form)
+        .then((data) => {
+          if (data.error) {
+            this.$toast.error(data.error)
+          } else {
+            this.$toast.success('Cover Uploaded')
+            this.resetCoverPreview()
+          }
+          this.processingUpload = false
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          if (error.response && error.response.data) {
+            this.$toast.error(error.response.data)
+          } else {
+            this.$toast.error('Oops, something went wrong...')
+          }
+          this.processingUpload = false
+        })
+    },
+    resetCoverPreview() {
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.reset()
+      }
+      this.previewUpload = null
+      this.selectedFile = null
+    },
+    fileUploadSelected(file) {
+      this.previewUpload = URL.createObjectURL(file)
+      this.selectedFile = file
+    },
+    init() {
+      this.showLocalCovers = false
+      if (this.coversFound.length && (this.searchTitle !== this.mediaMetadata.title || this.searchAuthor !== this.mediaMetadata.authorName)) {
+        this.coversFound = []
+        this.hasSearched = false
+      }
+      this.imageUrl = this.media.coverPath || ''
+      this.searchTitle = this.mediaMetadata.title || ''
+      this.searchAuthor = this.mediaMetadata.authorName || ''
+      if (this.isPodcast) this.provider = 'itunes'
+      else this.provider = localStorage.getItem('book-provider') || 'google'
+    },
+    removeCover() {
+      if (!this.media.coverPath) {
+        this.imageUrl = ''
+        return
+      }
+      this.updateCover('')
+    },
+    submitForm() {
+      this.updateCover(this.imageUrl)
+    },
+    async updateCover(cover) {
+      if (cover === this.coverPath) {
+        console.warn('Cover has not changed..', cover)
+        return
+      }
+
+      this.isProcessing = true
+      var success = false
+
+      if (!cover) {
+        // Remove cover
+        success = await this.$axios
+          .$delete(`/api/items/${this.libraryItemId}/cover`)
+          .then(() => true)
+          .catch((error) => {
+            console.error('Failed to remove cover', error)
+            if (error.response && error.response.data) {
+              this.$toast.error(error.response.data)
+            }
+            return false
+          })
+      } else if (cover.startsWith('http:') || cover.startsWith('https:')) {
+        // Download cover from url and use
+        success = await this.$axios.$post(`/api/items/${this.libraryItemId}/cover`, { url: cover }).catch((error) => {
+          console.error('Failed to download cover from url', error)
+          if (error.response && error.response.data) {
+            this.$toast.error(error.response.data)
+          }
+          return false
+        })
+      } else {
+        // Update local cover url
+        const updatePayload = {
+          cover
+        }
+        success = await this.$axios.$patch(`/api/items/${this.libraryItemId}/cover`, updatePayload).catch((error) => {
+          console.error('Failed to update', error)
+          if (error.response && error.response.data) {
+            this.$toast.error(error.response.data)
+          }
+          return false
+        })
+      }
+      if (success) {
+        this.$toast.success('Update Successful')
+        // this.$emit('close')
+      } else {
+        this.imageUrl = this.media.coverPath || ''
+      }
+      this.isProcessing = false
+    },
+    getSearchQuery() {
+      var searchQuery = `provider=${this.provider}&title=${this.searchTitle}`
+      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
+      if (this.isPodcast) searchQuery += '&podcast=1'
+      return searchQuery
+    },
+    persistProvider() {
+      try {
+        localStorage.setItem('book-provider', this.provider)
+      } catch (error) {
+        console.error('PersistProvider', error)
+      }
+    },
+    async submitSearchForm() {
+      // Store provider in local storage
+      this.persistProvider()
+
+      this.isProcessing = true
+      var searchQuery = this.getSearchQuery()
+      var results = await this.$axios.$get(`/api/search/covers?${searchQuery}`).catch((error) => {
+        console.error('Failed', error)
+        return []
+      })
+      this.coversFound = results
+      this.isProcessing = false
+      this.hasSearched = true
+    },
+    setCover(coverFile) {
+      this.updateCover(coverFile.metadata.path)
+    }
+  }
+}
+</script>

client/components/modals/item/tabs/Details.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="w-full h-full relative">
+    <div id="formWrapper" class="w-full overflow-y-auto">
+      <widgets-book-details-edit v-if="mediaType == 'book'" ref="itemDetailsEdit" :library-item="libraryItem" @submit="saveAndClose" />
+      <widgets-podcast-details-edit v-else ref="itemDetailsEdit" :library-item="libraryItem" @submit="saveAndClose" />
+    </div>
+
+    <div class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg" :class="isScrollable ? 'box-shadow-md-up' : 'border-t border-white border-opacity-5'">
+      <div class="flex items-center px-4">
+        <ui-btn v-if="userCanDelete" color="error" type="button" class="h-8 hidden md:block" :padding-x="3" small @click.stop.prevent="removeItem">{{ $strings.ButtonRemove }}</ui-btn>
+        <ui-icon-btn bg-color="error" icon="delete" class="md:hidden" :size="7" icon-font-size="1rem" @click.stop.prevent="removeItem" />
+
+        <div class="flex-grow" />
+
+        <ui-tooltip :disabled="!!quickMatching" :text="$getString('MessageQuickMatchDescription', [libraryProvider])" direction="bottom" class="mr-2 md:mr-4">
+          <ui-btn v-if="userIsAdminOrUp" :loading="quickMatching" color="bg" type="button" class="h-full" small @click.stop.prevent="quickMatch">{{ $strings.ButtonQuickMatch }}</ui-btn>
+        </ui-tooltip>
+
+        <ui-tooltip :disabled="!!libraryScan" text="Rescan library item including metadata" direction="bottom" class="mr-2 md:mr-4">
+          <ui-btn v-if="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">{{ $strings.ButtonReScan }}</ui-btn>
+        </ui-tooltip>
+
+        <!-- desktop -->
+        <ui-btn @click="save" class="mx-2 hidden md:block">{{ $strings.ButtonSave }}</ui-btn>
+        <ui-btn @click="saveAndClose" class="mx-2 hidden md:block">{{ $strings.ButtonSaveAndClose }}</ui-btn>
+        <!-- mobile -->
+        <ui-btn @click="saveAndClose" class="mx-2 md:hidden">{{ $strings.ButtonSave }}</ui-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      resettingProgress: false,
+      isScrollable: false,
+      rescanning: false,
+      quickMatching: false
+    }
+  },
+  computed: {
+    isProcessing: {
+      get() {
+        return this.processing
+      },
+      set(val) {
+        this.$emit('update:processing', val)
+      }
+    },
+    isFile() {
+      return !!this.libraryItem && this.libraryItem.isFile
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    isMissing() {
+      return !!this.libraryItem && !!this.libraryItem.isMissing
+    },
+    libraryItemId() {
+      return this.libraryItem ? this.libraryItem.id : null
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaType() {
+      return this.libraryItem ? this.libraryItem.mediaType : null
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    },
+    libraryId() {
+      return this.libraryItem ? this.libraryItem.libraryId : null
+    },
+    libraryProvider() {
+      return this.$store.getters['libraries/getLibraryProvider'](this.libraryId) || 'google'
+    },
+    libraryScan() {
+      if (!this.libraryId) return null
+      return this.$store.getters['scanners/getLibraryScan'](this.libraryId)
+    }
+  },
+  methods: {
+    quickMatch() {
+      if (this.quickMatching) return
+      if (!this.$refs.itemDetailsEdit) return
+
+      var { title, author } = this.$refs.itemDetailsEdit.getTitleAndAuthorName()
+      if (!title) {
+        this.$toast.error('Must have a title for quick match')
+        return
+      }
+      this.quickMatching = true
+      var matchOptions = {
+        provider: this.libraryProvider,
+        title: title || null,
+        author: author || null
+      }
+      this.$axios
+        .$post(`/api/items/${this.libraryItemId}/match`, matchOptions)
+        .then((res) => {
+          this.quickMatching = false
+          if (res.warning) {
+            this.$toast.warning(res.warning)
+          } else if (res.updated) {
+            this.$toast.success('Item details updated')
+          } else {
+            this.$toast.info('No updates were made')
+          }
+        })
+        .catch((error) => {
+          var errMsg = error.response ? error.response.data || '' : ''
+          console.error('Failed to match', error)
+          this.$toast.error(errMsg || 'Failed to match')
+          this.quickMatching = false
+        })
+    },
+    rescan() {
+      this.rescanning = true
+      this.$axios
+        .$get(`/api/items/${this.libraryItemId}/scan`)
+        .then((data) => {
+          this.rescanning = false
+          var result = data.result
+          if (!result) {
+            this.$toast.error(`Re-Scan Failed for "${this.title}"`)
+          } else if (result === 'UPDATED') {
+            this.$toast.success(`Re-Scan complete item was updated`)
+          } else if (result === 'UPTODATE') {
+            this.$toast.success(`Re-Scan complete item was up to date`)
+          } else if (result === 'REMOVED') {
+            this.$toast.error(`Re-Scan complete item was removed`)
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to scan library item', error)
+          this.$toast.error('Failed to scan library item')
+          this.rescanning = false
+        })
+    },
+    async saveAndClose() {
+      const wasUpdated = await this.save()
+      if (wasUpdated !== null) this.$emit('close')
+    },
+    async save() {
+      if (this.isProcessing) {
+        return null
+      }
+      if (!this.$refs.itemDetailsEdit) {
+        return null
+      }
+      var updatedDetails = this.$refs.itemDetailsEdit.getDetails()
+      if (!updatedDetails.hasChanges) {
+        this.$toast.info('No changes were made')
+        return false
+      }
+      return this.updateDetails(updatedDetails)
+    },
+    async updateDetails(updatedDetails) {
+      this.isProcessing = true
+      var updateResult = await this.$axios.$patch(`/api/items/${this.libraryItemId}/media`, updatedDetails.updatePayload).catch((error) => {
+        console.error('Failed to update', error)
+        return false
+      })
+      this.isProcessing = false
+      if (updateResult) {
+        if (updateResult.updated) {
+          this.$toast.success('Item details updated')
+          return true
+        } else {
+          this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+        }
+      }
+      return false
+    },
+    removeItem() {
+      if (confirm(`Are you sure you want to remove this item?\n\n*Does not delete your files, only removes the item from audiobookshelf`)) {
+        this.isProcessing = true
+        this.$axios
+          .$delete(`/api/items/${this.libraryItemId}`)
+          .then(() => {
+            console.log('Item removed')
+            this.$toast.success('Item Removed')
+            this.$emit('close')
+            this.isProcessing = false
+          })
+          .catch((error) => {
+            console.error('Remove item failed', error)
+            this.isProcessing = false
+          })
+      }
+    },
+    checkIsScrollable() {
+      this.$nextTick(() => {
+        var formWrapper = document.getElementById('formWrapper')
+        if (formWrapper) {
+          if (formWrapper.scrollHeight > formWrapper.clientHeight) {
+            this.isScrollable = true
+          } else {
+            this.isScrollable = false
+          }
+        }
+      })
+    },
+    setResizeObserver() {
+      try {
+        var formWrapper = document.getElementById('formWrapper')
+        if (formWrapper) {
+          this.$nextTick(() => {
+            const resizeObserver = new ResizeObserver(() => {
+              this.checkIsScrollable()
+            })
+            resizeObserver.observe(formWrapper)
+          })
+        }
+      } catch (error) {
+        console.error('Failed to set resize observer')
+      }
+    }
+  },
+  mounted() {
+    this.setResizeObserver()
+  }
+}
+</script>
+
+<style scoped>
+#formWrapper {
+  height: calc(100% - 80px);
+  max-height: calc(100% - 80px);
+}
+</style>

client/components/modals/item/tabs/Episodes.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
+    <div class="w-full mb-4">
+      <div v-if="userIsAdminOrUp" class="flex items-end justify-end mb-4">
+        <ui-text-input-with-label ref="lastCheckInput" v-model="lastEpisodeCheckInput" :disabled="checkingNewEpisodes" type="datetime-local" :label="$strings.LabelLookForNewEpisodesAfterDate" class="max-w-xs mr-2" />
+        <ui-text-input-with-label ref="maxEpisodesInput" v-model="maxEpisodesToDownload" :disabled="checkingNewEpisodes" type="number" :label="$strings.LabelLimit" class="w-16 mr-2" input-class="h-10">
+          <div class="flex -mb-0.5">
+            <p class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': checkingNewEpisodes }">{{ $strings.LabelLimit }}</p>
+            <ui-tooltip direction="top" text="Max # of episodes to download. Use 0 for unlimited.">
+              <span class="material-icons text-base">info_outlined</span>
+            </ui-tooltip>
+          </div>
+        </ui-text-input-with-label>
+        <ui-btn :loading="checkingNewEpisodes" @click="checkForNewEpisodes">{{ $strings.ButtonCheckAndDownloadNewEpisodes }}</ui-btn>
+      </div>
+
+      <div v-if="episodes.length" class="w-full p-4 bg-primary">
+        <p>{{ $strings.HeaderEpisodes }}</p>
+      </div>
+      <div v-if="!episodes.length" class="flex my-4 text-center justify-center text-xl">{{ $strings.MessageNoEpisodes }}</div>
+      <table v-else class="text-sm tracksTable">
+        <tr class="font-book">
+          <th class="text-left">Sort #</th>
+          <th class="text-left whitespace-nowrap">{{ $strings.LabelEpisode }}</th>
+          <th class="text-left">{{ $strings.EpisodeTitle }}</th>
+          <th class="text-center w-28">{{ $strings.EpisodeDuration }}</th>
+          <th class="text-center w-28">{{ $strings.EpisodeSize }}</th>
+        </tr>
+        <tr v-for="episode in episodes" :key="episode.id">
+          <td class="text-left">
+            <p class="px-4">{{ episode.index }}</p>
+          </td>
+          <td class="text-left">
+            <p class="px-4">{{ episode.episode }}</p>
+          </td>
+          <td class="font-book">
+            {{ episode.title }}
+          </td>
+          <td class="font-mono text-center">
+            {{ $secondsToTimestamp(episode.duration) }}
+          </td>
+          <td class="font-mono text-center">
+            {{ $bytesPretty(episode.size) }}
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      checkingNewEpisodes: false,
+      lastEpisodeCheckInput: null,
+      maxEpisodesToDownload: 3
+    }
+  },
+  watch: {
+    lastEpisodeCheck: {
+      handler(newVal) {
+        if (newVal) {
+          this.setLastEpisodeCheckInput()
+        }
+      }
+    }
+  },
+  computed: {
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    autoDownloadEpisodes() {
+      return !!this.media.autoDownloadEpisodes
+    },
+    lastEpisodeCheck() {
+      return this.media.lastEpisodeCheck
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    libraryItemId() {
+      return this.libraryItem ? this.libraryItem.id : null
+    },
+    episodes() {
+      return this.media.episodes || []
+    }
+  },
+  methods: {
+    async checkForNewEpisodes() {
+      if (this.$refs.lastCheckInput) {
+        this.$refs.lastCheckInput.blur()
+      }
+      if (this.$refs.maxEpisodesInput) {
+        this.$refs.maxEpisodesInput.blur()
+      }
+
+      if (this.maxEpisodesToDownload < 0) {
+        this.maxEpisodesToDownload = 3
+        this.$toast.error('Invalid max episodes to download')
+        return
+      }
+
+      this.checkingNewEpisodes = true
+      const lastEpisodeCheck = new Date(this.lastEpisodeCheckInput).valueOf()
+
+      // If last episode check changed then update it first
+      if (lastEpisodeCheck && lastEpisodeCheck !== this.lastEpisodeCheck) {
+        var updateResult = await this.$axios.$patch(`/api/items/${this.libraryItemId}/media`, { lastEpisodeCheck }).catch((error) => {
+          console.error('Failed to update', error)
+          return false
+        })
+        console.log('updateResult', updateResult)
+      }
+
+      this.$axios
+        .$get(`/api/podcasts/${this.libraryItemId}/checknew?limit=${this.maxEpisodesToDownload}`)
+        .then((response) => {
+          if (response.episodes && response.episodes.length) {
+            console.log('New episodes', response.episodes.length)
+            this.$toast.success(`${response.episodes.length} new episodes found!`)
+          } else {
+            this.$toast.info('No new episodes found')
+          }
+          this.checkingNewEpisodes = false
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
+          this.$toast.error(errorMsg)
+          this.checkingNewEpisodes = false
+        })
+    },
+    setLastEpisodeCheckInput() {
+      this.lastEpisodeCheckInput = this.lastEpisodeCheck ? this.$formatDate(this.lastEpisodeCheck, "yyyy-MM-dd'T'HH:mm") : null
+    }
+  },
+  mounted() {
+    this.setLastEpisodeCheckInput()
+  }
+}
+</script>

client/components/modals/item/tabs/Files.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
+    <tables-library-files-table expanded :files="libraryFiles" :library-item-id="libraryItem.id" :is-missing="isMissing" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      tracks: [],
+      showFullPath: false
+    }
+  },
+  watch: {
+    libraryItem: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.init()
+      }
+    }
+  },
+  computed: {
+    media() {
+      return this.libraryItem.media || {}
+    },
+    libraryFiles() {
+      return this.libraryItem.libraryFiles || []
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    userCanDownload() {
+      return this.$store.getters['user/getUserCanDownload']
+    },
+    isMissing() {
+      return this.libraryItem.isMissing
+    },
+    showDownload() {
+      return this.userCanDownload && !this.isMissing
+    }
+  },
+  methods: {
+    init() {
+      this.tracks = this.media.tracks || []
+    }
+  }
+}
+</script>

client/components/modals/item/tabs/Match.vue

@@ -0,0 +1,524 @@
+<template>
+  <div id="match-wrapper" class="w-full h-full overflow-hidden px-2 md:px-4 py-4 md:py-6 relative">
+    <form @submit.prevent="submitSearch">
+      <div class="flex flex-wrap md:flex-nowrap items-center justify-start -mx-1">
+        <div class="w-36 px-1">
+          <ui-dropdown v-model="provider" :items="providers" :label="$strings.LabelProvider" small />
+        </div>
+        <div class="flex-grow md:w-72 px-1">
+          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" :placeholder="$strings.PlaceholderSearch" />
+        </div>
+        <div v-show="provider != 'itunes'" class="w-60 md:w-72 px-1">
+          <ui-text-input-with-label v-model="searchAuthor" :label="$strings.LabelAuthor" />
+        </div>
+        <ui-btn class="mt-5 ml-1" type="submit">{{ $strings.ButtonSearch }}</ui-btn>
+      </div>
+    </form>
+    <div v-show="processing" class="flex h-full items-center justify-center">
+      <p>{{ $strings.MessageLoading }}</p>
+    </div>
+    <div v-show="!processing && !searchResults.length && hasSearched" class="flex h-full items-center justify-center">
+      <p>{{ $strings.MessageNoResults }}</p>
+    </div>
+    <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden matchListWrapper mt-4">
+      <template v-for="(res, index) in searchResults">
+        <cards-book-match-card :key="index" :book="res" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
+      </template>
+    </div>
+    <div v-if="selectedMatchOrig" class="absolute top-0 left-0 w-full bg-bg h-full px-2 py-6 md:p-8 max-h-full overflow-y-auto overflow-x-hidden">
+      <div class="flex mb-4">
+        <div class="w-8 h-8 rounded-full hover:bg-white hover:bg-opacity-10 flex items-center justify-center cursor-pointer" @click="clearSelectedMatch">
+          <span class="material-icons text-3xl">arrow_back</span>
+        </div>
+        <p class="text-xl pl-3">{{ $strings.HeaderUpdateDetails }}</p>
+      </div>
+      <ui-checkbox v-model="selectAll" checkbox-bg="bg" @input="selectAllToggled" />
+      <form @submit.prevent="submitMatchUpdate">
+        <div v-if="selectedMatchOrig.cover" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.cover" checkbox-bg="bg" @input="checkboxToggled" />
+          <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" readonly :label="$strings.LabelCover" class="flex-grow mx-4" />
+          <div class="min-w-12 max-w-12 md:min-w-16 md:max-w-16">
+            <a :href="selectedMatch.cover" target="_blank" class="w-full bg-primary">
+              <img :src="selectedMatch.cover" class="h-full w-full object-contain" />
+            </a>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.title" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.title" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.title" :disabled="!selectedMatchUsage.title" :label="$strings.LabelTitle" />
+            <p v-if="mediaMetadata.title" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.title || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.subtitle" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.subtitle" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.subtitle" :disabled="!selectedMatchUsage.subtitle" :label="$strings.LabelSubtitle" />
+            <p v-if="mediaMetadata.subtitle" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.subtitle || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.author" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.author" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" :label="$strings.LabelAuthor" />
+            <p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.authorName || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.narrator" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.narrator" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.narrator" :disabled="!selectedMatchUsage.narrator" :label="$strings.LabelNarrators" />
+            <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.narratorName || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.description" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.description" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" :label="$strings.LabelDescription" />
+            <p v-if="mediaMetadata.description" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.description.substr(0, 100) + (mediaMetadata.description.length > 100 ? '...' : '') }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.publisher" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.publisher" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.publisher" :disabled="!selectedMatchUsage.publisher" :label="$strings.LabelPublisher" />
+            <p v-if="mediaMetadata.publisher" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.publisher || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.publishedYear" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.publishedYear" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.publishedYear" :disabled="!selectedMatchUsage.publishedYear" :label="$strings.LabelPublishYear" />
+            <p v-if="mediaMetadata.publishedYear" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.publishedYear || '' }}</p>
+          </div>
+        </div>
+
+        <div v-if="selectedMatchOrig.series" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.series" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <widgets-series-input-widget v-model="selectedMatch.series" :disabled="!selectedMatchUsage.series" />
+            <p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.seriesName || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.genres && selectedMatchOrig.genres.length" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.genres" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-multi-select v-model="selectedMatch.genres" :items="selectedMatch.genres" :disabled="!selectedMatchUsage.genres" :label="$strings.LabelGenres" />
+            <p v-if="mediaMetadata.genres" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.genres.join(', ') }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.tags" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.tags" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.tags" :disabled="!selectedMatchUsage.tags" :label="$strings.LabelTags" />
+            <p v-if="media.tags" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ media.tags.join(', ') }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.language" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.language" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.language" :disabled="!selectedMatchUsage.language" :label="$strings.LabelLanguage" />
+            <p v-if="mediaMetadata.language" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.language || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.isbn" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.isbn" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.isbn" :disabled="!selectedMatchUsage.isbn" label="ISBN" />
+            <p v-if="mediaMetadata.isbn" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.isbn || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.asin" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.asin" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.asin" :disabled="!selectedMatchUsage.asin" label="ASIN" />
+            <p v-if="mediaMetadata.asin" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.asin || '' }}</p>
+          </div>
+        </div>
+
+        <div v-if="selectedMatchOrig.itunesId" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.itunesId" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.itunesId" type="number" :disabled="!selectedMatchUsage.itunesId" label="iTunes ID" />
+            <p v-if="mediaMetadata.itunesId" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.itunesId || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.feedUrl" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.feedUrl" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.feedUrl" :disabled="!selectedMatchUsage.feedUrl" label="RSS Feed URL" />
+            <p v-if="mediaMetadata.feedUrl" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.feedUrl || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.itunesPageUrl" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.itunesPageUrl" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.itunesPageUrl" :disabled="!selectedMatchUsage.itunesPageUrl" label="iTunes Page URL" />
+            <p v-if="mediaMetadata.itunesPageUrl" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.itunesPageUrl || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatchOrig.releaseDate" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.releaseDate" checkbox-bg="bg" @input="checkboxToggled" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.releaseDate" :disabled="!selectedMatchUsage.releaseDate" :label="$strings.LabelReleaseDate" />
+            <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">{{ $strings.LabelCurrently }} {{ mediaMetadata.releaseDate || '' }}</p>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-end py-2">
+          <ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      libraryItemId: null,
+      searchTitle: null,
+      searchAuthor: null,
+      lastSearch: null,
+      provider: 'google',
+      searchResults: [],
+      hasSearched: false,
+      selectedMatch: null,
+      selectedMatchOrig: null,
+      selectedMatchUsage: {
+        title: true,
+        subtitle: true,
+        cover: true,
+        author: true,
+        narrator: true,
+        description: true,
+        publisher: true,
+        publishedYear: true,
+        series: true,
+        genres: true,
+        tags: true,
+        language: true,
+        explicit: true,
+        asin: true,
+        isbn: true,
+        // Podcast specific
+        itunesPageUrl: true,
+        itunesId: true,
+        feedUrl: true,
+        releaseDate: true
+      },
+      selectAll: true
+    }
+  },
+  watch: {
+    libraryItem: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.init()
+      }
+    }
+  },
+  computed: {
+    isProcessing: {
+      get() {
+        return this.processing
+      },
+      set(val) {
+        this.$emit('update:processing', val)
+      }
+    },
+    seriesItems: {
+      get() {
+        return this.selectedMatch.series.map((se) => {
+          return {
+            id: `new-${Math.floor(Math.random() * 10000)}`,
+            displayName: se.sequence ? `${se.series} #${se.sequence}` : se.series,
+            name: se.series,
+            sequence: se.sequence || ''
+          }
+        })
+      },
+      set(val) {
+        this.selectedMatch.series = val
+      }
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['libraries/getBookCoverAspectRatio']
+    },
+    providers() {
+      if (this.isPodcast) return this.$store.state.scanners.podcastProviders
+      return this.$store.state.scanners.providers
+    },
+    searchTitleLabel() {
+      if (this.provider.startsWith('audible')) return this.$strings.LabelSearchTitleOrASIN
+      else if (this.provider == 'itunes') return this.$strings.LabelSearchTerm
+      return this.$strings.LabelSearchTitle
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    mediaType() {
+      return this.libraryItem ? this.libraryItem.mediaType : null
+    },
+    isPodcast() {
+      return this.mediaType == 'podcast'
+    }
+  },
+  methods: {
+    selectAllToggled(val) {
+      for (const key in this.selectedMatchUsage) {
+        this.selectedMatchUsage[key] = val
+      }
+    },
+    checkboxToggled() {
+      this.selectAll = Object.values(this.selectedMatchUsage).findIndex((v) => v == false) < 0
+    },
+    persistProvider() {
+      try {
+        localStorage.setItem('book-provider', this.provider)
+      } catch (error) {
+        console.error('PersistProvider', error)
+      }
+    },
+    getSearchQuery() {
+      if (this.isPodcast) return `term=${this.searchTitle}`
+      var searchQuery = `provider=${this.provider}&fallbackTitleOnly=1&title=${this.searchTitle}`
+      if (this.searchAuthor) searchQuery += `&author=${this.searchAuthor}`
+      return searchQuery
+    },
+    submitSearch() {
+      if (!this.searchTitle) {
+        this.$toast.warning('Search title is required')
+        return
+      }
+      this.persistProvider()
+      this.runSearch()
+    },
+    async runSearch() {
+      var searchQuery = this.getSearchQuery()
+      if (this.lastSearch === searchQuery) return
+      this.searchResults = []
+      this.isProcessing = true
+      this.lastSearch = searchQuery
+      var searchEntity = this.isPodcast ? 'podcast' : 'books'
+      var results = await this.$axios.$get(`/api/search/${searchEntity}?${searchQuery}`, { timeout: 20000 }).catch((error) => {
+        console.error('Failed', error)
+        return []
+      })
+      // console.log('Got search results', results)
+      results = (results || []).filter((res) => {
+        return !!res.title
+      })
+
+      if (this.isPodcast) {
+        // Map to match PodcastMetadata keys
+        results = results.map((res) => {
+          res.itunesPageUrl = res.pageUrl || null
+          res.itunesId = res.id || null
+          res.author = res.artistName || null
+          return res
+        })
+      }
+
+      this.searchResults = results || []
+      this.isProcessing = false
+      this.hasSearched = true
+    },
+    init() {
+      this.clearSelectedMatch()
+      this.selectedMatchUsage = {
+        title: true,
+        subtitle: true,
+        cover: true,
+        author: true,
+        narrator: true,
+        description: true,
+        publisher: true,
+        publishedYear: true,
+        series: true,
+        genres: true,
+        tags: true,
+        language: true,
+        explicit: true,
+        asin: true,
+        isbn: true,
+        // Podcast specific
+        itunesPageUrl: true,
+        itunesId: true,
+        feedUrl: true,
+        releaseDate: true
+      }
+
+      if (this.libraryItem.id !== this.libraryItemId) {
+        this.searchResults = []
+        this.hasSearched = false
+        this.libraryItemId = this.libraryItem.id
+      }
+
+      if (!this.libraryItem.media || !this.libraryItem.media.metadata.title) {
+        this.searchTitle = null
+        this.searchAuthor = null
+        return
+      }
+      this.searchTitle = this.libraryItem.media.metadata.title
+      this.searchAuthor = this.libraryItem.media.metadata.authorName || ''
+      if (this.isPodcast) this.provider = 'itunes'
+      else this.provider = localStorage.getItem('book-provider') || 'google'
+
+      if (this.searchTitle) {
+        this.submitSearch()
+      }
+    },
+    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.sequence ? `${se.series} #${se.sequence}` : se.series,
+                name: se.series,
+                sequence: se.sequence || ''
+              }
+            })
+          }
+        }
+        if (match.genres && !Array.isArray(match.genres)) {
+          // match.genres = match.genres.join(',')
+          match.genres = match.genres.split(',').map((g) => g.trim())
+        }
+      }
+
+      console.log('Select Match', match)
+      this.selectedMatch = match
+      this.selectedMatchOrig = JSON.parse(JSON.stringify(match))
+    },
+    buildMatchUpdatePayload() {
+      var updatePayload = {}
+      updatePayload.metadata = {}
+
+      for (const key in this.selectedMatchUsage) {
+        if (this.selectedMatchUsage[key] && this.selectedMatch[key]) {
+          if (key === 'series') {
+            if (!Array.isArray(this.selectedMatch[key])) {
+              console.error('Invalid series in selectedMatch', this.selectedMatch[key])
+            } else {
+              var seriesPayload = []
+              this.selectedMatch[key].forEach((seriesItem) =>
+                seriesPayload.push({
+                  id: seriesItem.id,
+                  name: seriesItem.name,
+                  sequence: seriesItem.sequence
+                })
+              )
+              updatePayload.metadata.series = seriesPayload
+            }
+          } else if (key === 'author' && !this.isPodcast) {
+            var authors = this.selectedMatch[key]
+            if (!Array.isArray(authors)) {
+              authors = authors.split(',').map((au) => au.trim())
+            }
+            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.metadata.narrators = this.selectedMatch[key].split(',').map((v) => v.trim())
+          } else if (key === 'genres') {
+            // updatePayload.metadata.genres = this.selectedMatch[key].split(',').map((v) => v.trim())
+            updatePayload.metadata.genres = [...this.selectedMatch[key]]
+          } else if (key === 'tags') {
+            updatePayload.tags = this.selectedMatch[key].split(',').map((v) => v.trim())
+          } else if (key === 'itunesId') {
+            updatePayload.metadata.itunesId = Number(this.selectedMatch[key])
+          } else {
+            updatePayload.metadata[key] = this.selectedMatch[key]
+          }
+        }
+      }
+
+      return updatePayload
+    },
+    async submitMatchUpdate() {
+      var updatePayload = this.buildMatchUpdatePayload()
+      if (!Object.keys(updatePayload).length) {
+        return
+      }
+
+      console.log('Match payload', updatePayload)
+      this.isProcessing = true
+
+      if (updatePayload.metadata.cover) {
+        var coverPayload = {
+          url: updatePayload.metadata.cover
+        }
+        var success = await this.$axios.$post(`/api/items/${this.libraryItemId}/cover`, coverPayload).catch((error) => {
+          console.error('Failed to update', error)
+          return false
+        })
+        if (success) {
+          this.$toast.success(this.$strings.ToastItemCoverUpdateSuccess)
+        } else {
+          this.$toast.error(this.$strings.ToastItemCoverUpdateFailed)
+        }
+        console.log('Updated cover')
+        delete updatePayload.metadata.cover
+      }
+
+      if (Object.keys(updatePayload).length) {
+        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
+        })
+        if (updateResult) {
+          if (updateResult.updated) {
+            this.$toast.success(this.$strings.ToastItemDetailsUpdateSuccess)
+          } else {
+            this.$toast.info(this.$strings.ToastItemDetailsUpdateUnneeded)
+          }
+          this.clearSelectedMatch()
+          this.$emit('selectTab', 'details')
+        } else {
+          this.$toast.error(this.$strings.ToastItemDetailsUpdateFailed)
+        }
+      } else {
+        this.clearSelectedMatch()
+      }
+      this.isProcessing = false
+    },
+    clearSelectedMatch() {
+      this.selectedMatch = null
+      this.selectedMatchOrig = null
+    }
+  }
+}
+</script>
+
+<style>
+.matchListWrapper {
+  height: calc(100% - 124px);
+}
+@media (min-width: 768px) {
+  .matchListWrapper {
+    height: calc(100% - 80px);
+  }
+}
+</style>

client/components/modals/item/tabs/Schedule.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="w-full h-full relative">
+    <div id="scheduleWrapper" class="w-full overflow-y-auto px-2 py-4 md:px-6 md:py-6">
+      <template v-if="!feedUrl">
+        <widgets-alert type="warning" class="text-base mb-4">No RSS feed URL is set for this podcast</widgets-alert>
+      </template>
+      <template v-if="feedUrl || autoDownloadEpisodes">
+        <div class="flex items-center justify-between mb-4">
+          <p class="text-base md:text-xl font-semibold">Schedule Automatic Episode Downloads</p>
+          <ui-checkbox v-model="enableAutoDownloadEpisodes" label="Enable" medium checkbox-bg="bg" label-class="pl-2 text-base md:text-lg" />
+        </div>
+
+        <div v-if="enableAutoDownloadEpisodes" class="flex items-center py-2">
+          <ui-text-input ref="maxEpisodesInput" type="number" v-model="newMaxEpisodesToKeep" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updatedMaxEpisodesToKeep" />
+          <ui-tooltip text="Value of 0 sets no max limit. After a new episode is auto-downloaded this will delete the oldest episode if you have more than X episodes. <br>This will only delete 1 episode per new download.">
+            <p class="pl-4 text-base">
+              Max episodes to keep
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
+        <div v-if="enableAutoDownloadEpisodes" class="flex items-center py-2">
+          <ui-text-input ref="maxEpisodesInput" type="number" v-model="newMaxNewEpisodesToDownload" no-spinner :padding-x="1" text-center class="w-10 text-base" @change="updateMaxNewEpisodesToDownload" />
+          <ui-tooltip text="Value of 0 sets no max limit. When checking for new episodes this is the max number of episodes that will be downloaded.">
+            <p class="pl-4 text-base">
+              Max new episodes to download per check
+              <span class="material-icons icon-text">info_outlined</span>
+            </p>
+          </ui-tooltip>
+        </div>
+
+        <widgets-cron-expression-builder ref="cronExpressionBuilder" v-if="enableAutoDownloadEpisodes" v-model="cronExpression" />
+      </template>
+    </div>
+
+    <div v-if="feedUrl || autoDownloadEpisodes" class="absolute bottom-0 left-0 w-full py-2 md:py-4 bg-bg border-t border-white border-opacity-5">
+      <div class="flex items-center px-2 md:px-4">
+        <div class="flex-grow" />
+        <ui-btn @click="save" :disabled="!isUpdated" :color="isUpdated ? 'success' : 'primary'" class="mx-2">{{ isUpdated ? 'Save' : 'No update necessary' }}</ui-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    processing: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      enableAutoDownloadEpisodes: false,
+      cronExpression: null,
+      newMaxEpisodesToKeep: 0,
+      newMaxNewEpisodesToDownload: 0
+    }
+  },
+  computed: {
+    isProcessing: {
+      get() {
+        return this.processing
+      },
+      set(val) {
+        this.$emit('update:processing', val)
+      }
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    libraryItemId() {
+      return this.libraryItem ? this.libraryItem.id : null
+    },
+    feedUrl() {
+      return this.mediaMetadata.feedUrl
+    },
+    autoDownloadEpisodes() {
+      return !!this.media.autoDownloadEpisodes
+    },
+    autoDownloadSchedule() {
+      return this.media.autoDownloadSchedule
+    },
+    maxEpisodesToKeep() {
+      return this.media.maxEpisodesToKeep
+    },
+    maxNewEpisodesToDownload() {
+      return this.media.maxNewEpisodesToDownload
+    },
+    isUpdated() {
+      return this.autoDownloadSchedule !== this.cronExpression || this.autoDownloadEpisodes !== this.enableAutoDownloadEpisodes || this.maxEpisodesToKeep !== Number(this.newMaxEpisodesToKeep) || this.maxNewEpisodesToDownload !== Number(this.newMaxNewEpisodesToDownload)
+    }
+  },
+  methods: {
+    updatedMaxEpisodesToKeep() {
+      if (isNaN(this.newMaxEpisodesToKeep) || this.newMaxEpisodesToKeep < 0) {
+        this.newMaxEpisodesToKeep = 0
+      } else {
+        this.newMaxEpisodesToKeep = Number(this.newMaxEpisodesToKeep)
+      }
+    },
+    updateMaxNewEpisodesToDownload() {
+      if (isNaN(this.newMaxNewEpisodesToDownload) || this.newMaxNewEpisodesToDownload < 0) {
+        this.newMaxNewEpisodesToDownload = 0
+      } else {
+        this.newMaxNewEpisodesToDownload = Number(this.newMaxNewEpisodesToDownload)
+      }
+    },
+    save() {
+      // If custom expression input is focused then unfocus it instead of submitting
+      if (this.$refs.cronExpressionBuilder && this.$refs.cronExpressionBuilder.checkBlurExpressionInput) {
+        if (this.$refs.cronExpressionBuilder.checkBlurExpressionInput()) {
+          return
+        }
+      }
+      if (this.$refs.maxEpisodesInput && this.$refs.maxEpisodesInput.isFocused) {
+        this.$refs.maxEpisodesInput.blur()
+        return
+      }
+
+      const updatePayload = {
+        autoDownloadEpisodes: this.enableAutoDownloadEpisodes
+      }
+      if (this.enableAutoDownloadEpisodes) {
+        updatePayload.autoDownloadSchedule = this.cronExpression
+      }
+      if (this.newMaxEpisodesToKeep !== this.maxEpisodesToKeep) {
+        updatePayload.maxEpisodesToKeep = this.newMaxEpisodesToKeep
+      }
+      if (this.newMaxNewEpisodesToDownload !== this.maxNewEpisodesToDownload) {
+        updatePayload.maxNewEpisodesToDownload = this.newMaxNewEpisodesToDownload
+      }
+
+      this.updateDetails(updatePayload)
+    },
+    async updateDetails(updatePayload) {
+      this.isProcessing = true
+      var updateResult = await this.$axios.$patch(`/api/items/${this.libraryItemId}/media`, updatePayload).catch((error) => {
+        console.error('Failed to update', error)
+        return false
+      })
+      this.isProcessing = false
+      if (updateResult) {
+        if (updateResult.updated) {
+          this.$toast.success('Item details updated')
+          return true
+        } else {
+          this.$toast.info(this.$strings.MessageNoUpdatesWereNecessary)
+        }
+      }
+      return false
+    },
+    init() {
+      this.enableAutoDownloadEpisodes = this.autoDownloadEpisodes
+      this.cronExpression = this.autoDownloadSchedule
+      this.newMaxEpisodesToKeep = this.maxEpisodesToKeep
+      this.newMaxNewEpisodesToDownload = this.maxNewEpisodesToDownload
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+#scheduleWrapper {
+  height: calc(100% - 80px);
+  max-height: calc(100% - 80px);
+}
+</style>