Fix:Mark as finished once media has ended #635

Updated matching

.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"
+	]
+}

.github/ISSUE_TEMPLATE/bug.yaml

@@ -0,0 +1,43 @@
+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: 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
+      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/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,76 @@
+---
+
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches: [master]
+    tags:
+      - 'v*.*.*'
+    # Only build when files in these directories have been changed
+    paths:
+      - client/**
+      - server/**
+      - index.js
+      - package.json
+  # Allows you to run workflow manually from Actions tab
+  workflow_dispatch:
+
+jobs:
+  build:
+    if: "!contains(github.event.head_commit.message, 'skip ci')"
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out
+        uses: actions/checkout@v2
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v3
+        with:
+          images: advplyr/audiobookshelf,ghcr.io/${{ github.repository_owner }}/audiobookshelf
+          tags: |
+            type=edge,branch=master
+            type=semver,pattern={{version}}
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+        
+      - name: Cache Docker layers
+        uses: actions/cache@v2
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
+      - name: Login to Dockerhub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_PASSWORD }}
+      
+      - name: Login to ghcr
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GHCR_PASSWORD }}
+
+      - name: Build image
+        uses: docker/build-push-action@v2
+        with:
+          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,13 @@ node_modules/
 /config/
 /audiobooks/
 /audiobooks2/
+/podcasts/
 /media/
 /metadata/
 test/
 /client/.nuxt/
 /client/dist/
-/dist/
+/dist/
+
+sw.*
+.DS_STORE

Dockerfile

@@ -1,18 +1,19 @@
 ### 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
+FROM node:16-alpine
 RUN apk update && apk add --no-cache --update ffmpeg
 ENV NODE_ENV=production
 COPY --from=build /client/dist /client/dist
 COPY index.js index.js
+COPY package-lock.json package-lock.json
 COPY package.json package.json
 COPY server server
-RUN npm install --production
+RUN npm ci --only=production
 EXPOSE 80
 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,105 @@
 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=7331
+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/"
 
-  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"
-
   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
-}
-
 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
+  else
 
-    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"
+    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
 
-    DATA_PATH=""
-    read -p "
-    Enter path for data files, i.e. streams, downloads, database [Default: $DEFAULT_DATA_PATH]:" DATA_PATH
+    echo "Creating default config."
 
-    if [[ -z "$DATA_PATH" ]]; then
-      DATA_PATH="$DEFAULT_DATA_PATH"
-    fi
-
-    PORT=""
-    read -p "
-    Port for the web ui [Default: $DEFAULT_PORT]:" PORT
-
-    if [[ -z "$PORT" ]]; then
-      PORT="$DEFAULT_PORT"
-    fi
-
-    config_text="AUDIOBOOK_PATH=$AUDIOBOOK_PATH
-  METADATA_PATH=$DATA_PATH/metadata
-  CONFIG_PATH=$DATA_PATH/config
+    config_text="METADATA_PATH=$DEFAULT_DATA_DIR/metadata
+  CONFIG_PATH=$DEFAULT_DATA_DIR/config
   FFMPEG_PATH=/usr/lib/audiobookshelf-ffmpeg/ffmpeg
-  PORT=$PORT"
+  FFPROBE_PATH=/usr/lib/audiobookshelf-ffmpeg/ffprobe
+  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/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/app.css

@@ -1,51 +1,71 @@
 @import './fonts.css';
 @import './transitions.css';
 @import './draggable.css';
+@import './defaultStyles.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);
+}
+
+.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 +73,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 +98,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 +127,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 +173,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 +184,45 @@ 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;
+}

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

@@ -14,6 +14,9 @@
 #librariesTable .item {
   cursor: n-resize;
 }
+.drag-handle {
+  cursor: n-resize;
+}
 .list-group-item:not(.exclude) {
   cursor: n-resize;
 }

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(/fonts/MaterialIcons.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/MaterialIconsOutlined.woff2) format('woff2');
 }
 
 .material-icons {
@@ -17,10 +23,28 @@
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
-  -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
 }
-.material-icons: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(.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):not(.text-7xl):not(.text-8xl) {
+  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(.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):not(.text-7xl):not(.text-8xl) {
   font-size: 1.5rem;
 }
 
@@ -33,6 +57,7 @@
   src: url(/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';
@@ -41,4 +66,274 @@
   font-display: swap;
   src: url(/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(/fonts/Source_Sans_Pro/SourceSansPro-Light.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: 300;
+  font-display: swap;
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  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(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  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(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  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(/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf) format('ttf');
+  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(/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(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  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(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  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(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  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(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  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(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.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: 600;
+  font-display: swap;
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  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(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  unicode-range: U+0370-03FF;
+}
+
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  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(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  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(/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf) format('ttf');
+  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(/fonts/Ubuntu_Mono/UbuntuMono-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: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
+  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(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
+  unicode-range: U+0370-03FF;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
+  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(/fonts/Ubuntu_Mono/UbuntuMono-Regular.ttf) format('ttf');
+  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/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,581 +0,0 @@
-<template>
-  <div class="w-full">
-    <div class="w-full relative mb-4">
-      <div class="absolute left-2 top-0 bottom-0 h-full flex items-center">
-        <p ref="currentTimestamp" class="font-mono text-sm">00:00:00</p>
-      </div>
-      <div class="absolute right-2 top-0 bottom-0 h-full flex items-center">
-        <p class="font-mono text-sm">{{ totalDurationPretty }}</p>
-      </div>
-
-      <div class="absolute right-20 top-0 bottom-0">
-        <div v-if="chapters.length" class="cursor-pointer flex items-center justify-center text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
-          <span class="material-icons text-3xl">format_list_bulleted</span>
-        </div>
-      </div>
-
-      <div class="absolute right-32 top-0 bottom-0">
-        <controls-volume-control ref="volumeControl" v-model="volume" @input="updateVolume" />
-      </div>
-      <div class="flex my-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: () => []
-    }
-  },
-  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)
-    },
-    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)
-    }
-  },
-  methods: {
-    selectChapter(chapter) {
-      this.seek(chapter.start)
-      this.showChaptersModal = false
-    },
-    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)
-    },
-    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()
-      this.sendStreamUpdate()
-      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()
-
-      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
-    },
-    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
-    },
-    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 === 'Space') this.playPauseClick()
-      else if (action === 'ArrowRight') this.forward10()
-      else if (action === 'ArrowLeft') this.backward10()
-      else if (action === 'ArrowUp') this.volumeUp()
-      else if (action === 'ArrowDown') this.volumeDown()
-      else if (action === 'KeyM') this.toggleMute()
-      else if (action === 'KeyL') this.showChapters()
-      else if (action === 'Shift-ArrowUp') this.increasePlaybackRate()
-      else if (action === 'Shift-ArrowDown') this.decreasePlaybackRate()
-      else if (action === 'Escape') 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,71 @@
 <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="/icon48.png" class="w-10 h-10 md:w-12 md:h-12 mr-4" />
+        </nuxt-link>
+
+        <nuxt-link to="/">
+          <h1 class="text-2xl font-book mr-6 hidden lg:block hover:underline">audiobookshelf</h1>
+        </nuxt-link>
 
         <ui-libraries-dropdown />
 
-        <controls-global-search />
+        <controls-global-search v-if="currentLibrary" class="hidden md:block" />
         <div class="flex-grow" />
 
-        <span v-if="showExperimentalFeatures" class="material-icons text-4xl text-warning pr-4">logo_dev</span>
+        <span v-if="showExperimentalFeatures" class="material-icons text-4xl text-warning pr-0 sm:pr-2 md:pr-4">logo_dev</span>
 
-        <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-warning text-opacity-50"> cast </span>
+        </ui-tooltip>
+        <div v-if="isChromecastInitialized" class="w-6 h-6 mr-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 flex items-center justify-center mx-1">
+          <span class="material-icons" 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" 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" 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="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-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-2xl px-4">{{ numLibraryItemsSelected }} Selected</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-tooltip v-if="!isPodcastLibrary" :text="`Mark as ${selectedIsFinished ? 'Not Finished' : 'Finished'}`" direction="bottom">
+          <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsFinished" @click="toggleBatchRead" 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 v-if="userCanUpdate && !isPodcastLibrary" text="Add to Collection" direction="bottom">
+          <ui-icon-btn :disabled="processingBatch" icon="collections_bookmark" @click="batchAddToCollectionClick" class="mx-1.5" />
+        </ui-tooltip>
+        <template v-if="userCanUpdate && numLibraryItemsSelected < 50">
+          <ui-tooltip text="Edit" direction="bottom">
+            <ui-icon-btn v-show="!processingBatchDelete" 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="Delete" direction="bottom">
+          <ui-icon-btn :disabled="processingBatchDelete" icon="delete" bg-color="error" class="mx-1.5" @click="batchDeleteClick" />
+        </ui-tooltip>
+        <ui-tooltip text="Deselect All" direction="bottom">
+          <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>
       </div>
     </div>
   </div>
@@ -58,7 +75,9 @@
 export default {
   data() {
     return {
-      processingBatchDelete: false
+      processingBatchDelete: false,
+      totalEntities: 0,
+      isAllSelected: false
     }
   },
   computed: {
@@ -68,39 +87,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 +123,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 +135,41 @@ 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)
-    },
     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)
-      }
+      this.$store.commit('setSelectedLibraryItems', [])
+      this.$eventBus.$emit('bookshelf-clear-selection')
+      this.isAllSelected = false
     },
     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
+          id: 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,20 +178,21 @@ 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')
@@ -191,9 +204,20 @@ export default {
     },
     batchEditClick() {
       this.$router.push('/batch')
+    },
+    batchAddToCollectionClick() {
+      this.$store.commit('globals/setShowBatchUserCollectionsModal', true)
+    },
+    setBookshelfTotalEntities(totalEntities) {
+      this.totalEntities = totalEntities
     }
   },
-  mounted() {}
+  mounted() {
+    this.$eventBus.$on('bookshelf-total-entities', this.setBookshelfTotalEntities)
+  },
+  beforeDestroy() {
+    this.$eventBus.$off('bookshelf-total-entities', this.setBookshelfTotalEntities)
+  }
 }
 </script>
 
@@ -201,4 +225,4 @@ export default {
 #appbar {
   box-shadow: 0px 5px 5px #11111155;
 }
-</style>
+</style>

client/components/app/BookShelf.vue

@@ -1,359 +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 })
-      }
-    }
-  },
-  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'" :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' }">{{ shelf.label }}</p>
+        </widgets-item-slider>
+        <widgets-episode-slider v-else-if="shelf.type === 'episode'" :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' }">{{ shelf.label }}</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' }">{{ shelf.label }}</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' }">{{ shelf.label }}</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="bookCoverAspectRatio" />
       </template>
     </div>
   </div>
@@ -26,134 +41,274 @@
 
 <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: []
     }
   },
   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']
+    },
+    bookshelfView() {
+      return this.$store.getters['getServerSetting']('bookshelfView')
+    },
+    isAlternativeBookshelfView() {
+      return this.bookshelfView === this.$constants.BookshelfView.TITLES
     },
     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['getServerSetting']('coverAspectRatio')
+    },
+    isCoverSquareAspectRatio() {
+      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
+    },
+    bookCoverAspectRatio() {
+      return this.isCoverSquareAspectRatio ? 1 : 1.6
     },
     sizeMultiplier() {
-      return this.bookCoverWidth / 120
-    },
-    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
+      var baseSize = this.isCoverSquareAspectRatio ? 192 : 120
+      return this.bookCoverWidth / baseSize
     }
   },
   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 })
-    },
     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')
+      if (this.search) {
+        this.setShelvesFromSearch()
+      } else {
+        await this.fetchCategories()
+      }
+      this.loaded = true
     },
-    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()
-        }
+    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 []
+        })
+      this.shelves = categories
+    },
+    async setShelvesFromSearch() {
+      var shelves = []
+      if (this.results.books && this.results.books.length) {
+        shelves.push({
+          id: 'books',
+          label: 'Books',
+          type: 'book',
+          entities: this.results.books.map((res) => res.libraryItem)
+        })
+      }
+
+      if (this.results.podcasts && this.results.podcasts.length) {
+        shelves.push({
+          id: 'podcasts',
+          label: 'Podcasts',
+          type: 'podcast',
+          entities: this.results.podcasts.map((res) => res.libraryItem)
+        })
+      }
+
+      if (this.results.series && this.results.series.length) {
+        shelves.push({
+          id: 'series',
+          label: 'Series',
+          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',
+          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',
+          type: 'authors',
+          entities: this.results.authors.map((a) => {
+            return {
+              ...a,
+              type: 'author'
+            }
+          })
+        })
+      }
+      this.shelves = shelves
+    },
+    settingsUpdated(settings) {},
+    scan() {
+      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')
+        })
+    },
+    libraryItemAdded(libraryItem) {
+      console.log('libraryItem added', libraryItem)
+      // TODO: Check if libraryItem would be on this shelf
+      if (!this.search) {
+        this.fetchCategories()
       }
     },
-    scan() {
-      this.$root.socket.emit('scan', this.$store.state.libraries.currentLibraryId)
+    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)
+      })
+    },
+    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() {
+      this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })
+
+      if (this.$root.socket) {
+        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('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,28 +1,31 @@
 <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" 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" 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 === '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-0.5 left-4 md:left-8 w-36 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>
       </div>
@@ -30,11 +33,11 @@
 
     <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 +51,8 @@ export default {
       default: () => {}
     },
     sizeMultiplier: Number,
-    bookCoverWidth: Number
+    bookCoverWidth: Number,
+    bookCoverAspectRatio: Number
   },
   data() {
     return {
@@ -60,15 +64,68 @@ 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(libraryItem) {
+      this.$store.commit('toggleLibraryItemSelected', libraryItem.id)
+      this.$nextTick(() => {
+        this.$eventBus.$emit('item-selected', libraryItem)
+      })
+    },
+    itemSelectedEvt() {
+      this.updateSelectionMode(this.isSelectionMode)
     },
     scrolled() {
       clearTimeout(this.scrollTimer)
@@ -112,34 +169,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,70 @@
 <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 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="homePage ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p>Home</p>
+      </nuxt-link>
+      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf`" class="flex-grow h-full flex justify-center items-center" :class="showLibrary ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p>Library</p>
+      </nuxt-link>
+      <nuxt-link :to="`/library/${currentLibraryId}/bookshelf/series`" class="flex-grow h-full flex justify-center items-center" :class="paramId === 'series' ? 'bg-primary bg-opacity-80' : 'bg-primary bg-opacity-40'">
+        <p>Series</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">
+      <template v-if="page !== 'search' && page !== 'podcast-search' && !isHome">
+        <p v-if="!selectedSeries" class="font-book hidden md:block">{{ numShowing }} {{ entityName }}</p>
+        <div v-else class="items-center hidden md:flex w-full">
           <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 }}
+            {{ 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-btn color="primary" small :loading="processingSeries" class="flex items-center" @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"> Mark Series {{ isSeriesFinished ? 'Not Finished' : 'Finished' }}</span></ui-btn
+          >
         </div>
-        <div class="flex-grow" />
+        <div class="flex-grow hidden sm:inline-block" />
 
-        <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-show="showSortFilters && !isPodcast" v-model="settings.collapseSeries" label="Collapse Series" checkbox-bg="bg" check-color="white" small class="mr-2" @input="updateCollapseSeries" />
+        <controls-filter-select v-show="showSortFilters" v-model="settings.filterBy" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateFilter" />
+        <controls-order-select v-show="showSortFilters" 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" />
+        <!-- <div v-show="showSortFilters" class="h-7 ml-4 flex border border-white border-opacity-25 rounded-md">
+          <div class="h-full px-2 text-white flex items-center rounded-l-md hover:bg-primary hover:bg-opacity-75 cursor-pointer" :class="isGridMode ? 'bg-primary' : 'text-opacity-70'" @click="$emit('update:viewMode', 'grid')">
+            <span class="material-icons" style="font-size: 1.4rem">view_module</span>
+          </div>
+          <div class="h-full px-2 text-white flex items-center rounded-r-md hover:bg-primary hover:bg-opacity-75 cursor-pointer" :class="!isGridMode ? 'bg-primary' : 'text-opacity-70'" @click="$emit('update:viewMode', 'list')">
+            <span class="material-icons" style="font-size: 1.4rem">view_list</span>
+          </div>
+        </div> -->
+
+        <ui-btn v-if="isIssuesFilter && userCanDelete" :loading="processingIssues" color="error" small class="ml-4" @click="removeAllIssues">Remove All {{ numShowing }} {{ entityName }}</ui-btn>
       </template>
-      <template v-else-if="!isHome">
+      <template v-else-if="page === 'search'">
         <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> -->
         <div class="flex-grow" />
         <p>Search results for "{{ searchQuery }}"</p>
         <div class="flex-grow" />
       </template>
+      <template v-else-if="page === 'authors'">
+        <div class="flex-grow" />
+        <ui-btn v-if="userCanUpdate && authors && authors.length" :loading="processingAuthors" color="primary" small @click="matchAllAuthors">Match All Authors</ui-btn>
+      </template>
     </div>
   </div>
 </template>
@@ -39,64 +74,165 @@ export default {
   props: {
     page: String,
     isHome: Boolean,
-    selectedSeries: String,
-    searchResults: {
+    selectedSeries: {
       type: Object,
-      default: () => {}
+      default: () => null
     },
-    searchQuery: String
+    searchQuery: String,
+    viewMode: String,
+    authors: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {
       settings: {},
-      hasInit: false
+      hasInit: false,
+      totalEntities: 0,
+      keywordFilter: null,
+      keywordTimeout: null,
+      processingSeries: false,
+      processingIssues: false,
+      processingAuthors: false
     }
   },
   computed: {
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+    },
+    isGridMode() {
+      return this.viewMode === 'grid'
+    },
     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
-        }
-        return groups.length
-      }
+      return this.totalEntities
     },
     entityName() {
-      if (!this.page) return 'Audiobooks'
+      if (this.isPodcast) return 'Podcasts'
+      if (!this.page) return 'Books'
       if (this.page === 'series') return 'Series'
       if (this.page === 'collections') return 'Collections'
       return ''
     },
-    _keywordFilter: {
-      get() {
-        return this.$store.state.audiobooks.keywordFilter
-      },
-      set(val) {
-        this.$store.commit('audiobooks/setKeywordFilter', val)
-      }
+    paramId() {
+      return this.$route.params ? this.$route.params.id || '' : ''
     },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
+    },
+    homePage() {
+      return this.$route.name === 'library-library'
+    },
+    libraryBookshelfPage() {
+      return this.$route.name === 'library-library-bookshelf-id'
+    },
+    showLibrary() {
+      return this.libraryBookshelfPage && this.paramId === '' && !this.showingIssues
+    },
+    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 || []
+    },
+    isSeriesFinished() {
+      return this.seriesProgress && !!this.seriesProgress.isFinished
+    },
+    filterBy() {
+      return this.$store.getters['user/getUserSetting']('filterBy')
+    },
+    isIssuesFilter() {
+      return this.filterBy === 'issues' && this.$route.query.filter === 'issues'
     }
   },
   methods: {
+    async matchAllAuthors() {
+      this.processingAuthors = true
+
+      for (const author of this.authors) {
+        const payload = {}
+        if (author.asin) payload.asin = author.asin
+        else payload.q = author.name
+        console.log('Payload', payload, 'author', author)
+
+        this.$eventBus.$emit(`searching-author-${author.id}`, true)
+
+        var response = await this.$axios.$post(`/api/authors/${author.id}/match`, payload).catch((error) => {
+          console.error('Failed', error)
+          return null
+        })
+        if (!response) {
+          console.error(`Author ${author.name} not found`)
+          this.$toast.error(`Author ${author.name} not found`)
+        } else if (response.updated) {
+          if (response.author.imagePath) console.log(`Author ${response.author.name} was updated`)
+          else console.log(`Author ${response.author.name} was updated (no image found)`)
+        } else {
+          console.log(`No updates were made for Author ${response.author.name}`)
+        }
+
+        this.$eventBus.$emit(`searching-author-${author.id}`, false)
+      }
+      this.processingAuthors = false
+    },
+    removeAllIssues() {
+      if (confirm(`Are you sure you want to remove all library items with issues?\n\nNote: This will not delete any files`)) {
+        this.processingIssues = true
+        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.processingIssues = false
+          })
+          .catch((error) => {
+            console.error('Failed to remove library items with issues', error)
+            this.$toast.error('Failed to remove library items with issues')
+            this.processingIssues = false
+          })
+      }
+    },
+    markSeriesFinished() {
+      var newIsFinished = !this.isSeriesFinished
+      this.processingSeries = true
+      var updateProgressPayloads = this.seriesLibraryItemIds.map((lid) => {
+        return {
+          id: 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
+        })
+    },
     searchBackArrow() {
       this.$router.replace(`/library/${this.currentLibraryId}/bookshelf`)
     },
     seriesBackArrow() {
       this.$router.replace(`/library/${this.currentLibraryId}/bookshelf/series`)
-      this.$emit('update:selectedSeries', null)
     },
     updateOrder() {
       this.saveSettings()
@@ -104,6 +240,9 @@ export default {
     updateFilter() {
       this.saveSettings()
     },
+    updateCollapseSeries() {
+      this.saveSettings()
+    },
     saveSettings() {
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },
@@ -114,14 +253,28 @@ export default {
       for (const key in settings) {
         this.settings[key] = settings[key]
       }
+    },
+    setBookshelfTotalEntities(totalEntities) {
+      this.totalEntities = totalEntities
+    },
+    keywordFilterInput() {
+      clearTimeout(this.keywordTimeout)
+      this.keywordTimeout = setTimeout(() => {
+        this.keywordUpdated(this.keywordFilter)
+      }, 1000)
+    },
+    keywordUpdated() {
+      this.$eventBus.$emit('bookshelf-keyword-filter', this.keywordFilter)
     }
   },
   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>

client/components/app/ConfigSideNav.vue

@@ -1,39 +1,114 @@
 <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-opacity-0 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="font-mono text-sm">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>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    isOpen: Boolean
+  },
   data() {
     return {}
   },
   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: 'Your Stats',
+            path: '/config/stats'
+          }
+        ]
+      }
+      const configRoutes = [
+        {
+          id: 'config',
+          title: 'Settings',
+          path: '/config'
+        },
+        {
+          id: 'config-libraries',
+          title: 'Libraries',
+          path: '/config/libraries'
+        },
+        {
+          id: 'config-users',
+          title: 'Users',
+          path: '/config/users'
+        },
+        {
+          id: 'config-backups',
+          title: 'Backups',
+          path: '/config/backups'
+        },
+        {
+          id: 'config-log',
+          title: 'Log',
+          path: '/config/log'
+        }
+      ]
+
+      if (this.currentLibraryId) {
+        configRoutes.push({
+          id: 'config-library-stats',
+          title: 'Library Stats',
+          path: '/config/library-stats'
+        })
+        configRoutes.push({
+          id: 'config-stats',
+          title: 'Your Stats',
+          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 +123,19 @@ export default {
     },
     githubTagUrl() {
       return this.versionData.githubTagUrl
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
     }
   },
-  methods: {},
-  mounted() {}
+  methods: {
+    clickOutside() {
+      if (!this.isOpen) return
+      this.closeDrawer()
+    },
+    closeDrawer() {
+      this.$emit('update:isOpen', false)
+    }
+  }
 }
 </script>

client/components/app/LazyBookshelf.vue

@@ -0,0 +1,657 @@
+<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">{{ 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-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">Clear Filter</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
+    }
+  },
+  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 'You have no series'
+      if (this.page === 'collections') return "You haven't made any collections yet"
+      if (this.hasFilter) {
+        if (this.filterName === 'Issues') return 'No Issues'
+        return `No Results for filter "${this.filterName}: ${this.filterValue}"`
+      }
+      return 'No results'
+    },
+    entityName() {
+      if (!this.page) return 'books'
+      return this.page
+    },
+    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')
+    },
+    coverAspectRatio() {
+      return this.$store.getters['getServerSetting']('coverAspectRatio')
+    },
+    bookshelfView() {
+      return this.$store.getters['getServerSetting']('bookshelfView')
+    },
+    sortingIgnorePrefix() {
+      return this.$store.getters['getServerSetting']('sortingIgnorePrefix')
+    },
+    isCoverSquareAspectRatio() {
+      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE
+    },
+    isAlternativeBookshelfView() {
+      // if (!this.isEntityBook) return false // Only used for bookshelf showing books
+      return this.bookshelfView === this.$constants.BookshelfView.TITLES
+    },
+    bookCoverAspectRatio() {
+      return this.isCoverSquareAspectRatio ? 1 : 1.6
+    },
+    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) 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)
+      }
+    },
+    clearSelectedEntities() {
+      this.updateBookSelectionMode(false)
+      this.isSelectionMode = false
+    },
+    selectEntity(entity) {
+      if (this.entityName === 'books' || this.entityName === 'series-books') {
+        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)
+        }
+      }
+    },
+    async fetchEntites(page = 0) {
+      var startIndex = page * this.booksPerFetch
+
+      this.isFetchingEntities = true
+
+      if (!this.initialized) {
+        this.currentSFQueryString = this.buildSearchParams()
+      }
+
+      var entityPath = this.entityName === 'books' || this.entityName === 'series-books' ? `items` : this.entityName
+      var sfQueryString = this.currentSFQueryString ? this.currentSFQueryString + '&' : ''
+      var fullQueryString = `?${sfQueryString}limit=${this.booksPerFetch}&page=${page}&minified=1`
+
+      var 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)
+          this.$eventBus.$emit('bookshelf-total-entities', 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])
+          }
+        }
+      }
+    },
+    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 === 'series' || this.page === 'collections') {
+        return ''
+      }
+
+      let searchParams = new URLSearchParams()
+      if (this.page === 'series-books') {
+        searchParams.set('filter', `series.${this.$encode(this.seriesId)}`)
+      } 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() {
+      if (this.page === 'series-books') return false
+
+      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
+    },
+    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
+      // clearTimeout(this.scrollTimeout)
+      // this.scrollTimeout = setTimeout(() => {
+      this.handleScroll(scrollTop)
+      // }, 250)
+    },
+    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.entities.length
+          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.entities.length
+        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('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)
+      } 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('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)
+      } 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/SideRail.vue

@@ -1,65 +1,84 @@
 <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" style="font-size: 0.9rem">Home</p>
 
       <div v-show="homePage" 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="paramId === '' && !homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+    <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" style="font-size: 0.9rem">Library</p>
 
-      <div v-show="paramId === '' && !homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+      <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" style="font-size: 0.9rem">Series</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 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>
+    <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">collections_bookmark</span>
 
-      <p class="font-book pt-1.5" style="font-size: 0.8rem">Collections</p>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">Collections</p>
 
       <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link> -->
+    </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" />
+    <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.5" style="font-size: 0.8rem">Tags</p>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">Authors</p>
 
-      <div v-show="paramId === 'tags'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link> -->
+      <div v-show="isAuthorsPage" 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>
+    <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'">
+      <icons-podcast-svg class="w-6 h-6" />
 
-      <p class="font-book pt-1.5" style="font-size: 0.8rem">Authors</p>
+      <p class="font-book pt-1.5" style="font-size: 0.9rem">Search</p>
 
-      <div v-show="paramId === 'authors'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
-    </nuxt-link> -->
+      <div v-show="isPodcastSearchPage" 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>
+
+      <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>
+
+    <div class="w-full h-12 px-1 py-2 border-t border-black border-opacity-20 absolute left-0" :style="{ bottom: streamLibraryItem ? '240px' : '65px' }">
+      <p class="font-mono text-xs text-center text-gray-300 leading-3 mb-1">v{{ $config.version }}</p>
+      <a v-if="hasUpdate" :href="githubTagUrl" target="_blank" class="text-warning text-xxs text-center block leading-3">Update</a>
+      <p v-else class="text-xxs text-gray-400 leading-3 text-center italic">{{ Source }}</p>
+    </div>
   </div>
 </template>
 
@@ -69,17 +88,76 @@ export default {
     return {}
   },
   computed: {
+    Source() {
+      return this.$store.state.Source
+    },
+    isMobileLandscape() {
+      return this.$store.state.globals.isMobileLandscape
+    },
+    isShowingBookshelfToolbar() {
+      if (!this.$route.name) return false
+      return this.$route.name.startsWith('library')
+    },
+    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'
     },
     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'
+    },
+    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.state.libraries.issues || 0
+    },
+    versionData() {
+      return this.$store.state.versionData || {}
+    },
+    hasUpdate() {
+      return !!this.versionData.hasUpdate
+    },
+    latestVersion() {
+      return this.versionData.latestVersion
+    },
+    githubTagUrl() {
+      return this.versionData.githubTagUrl
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
     }
   },
   methods: {},

client/components/app/StreamContainer.vue

@@ -1,109 +1,307 @@
 <template>
-  <div v-if="streamAudiobook" id="streamContainer" class="w-full fixed bottom-0 left-0 right-0 h-40 z-40 bg-primary p-4">
-    <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-4 cursor-pointer" :style="{ top: bookCoverPosTop + 'px' }">
+      <covers-book-cover :library-item="streamLibraryItem" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     </nuxt-link>
-    <div class="flex items-center pl-24">
+    <div class="flex items-start mb-6 md:mb-0" :class="playerHandler.isVideo ? 'ml-4 pl-96' : 'pl-24'">
       <div>
-        <nuxt-link :to="`/audiobook/${streamAudiobook.id}`" class="hover:underline cursor-pointer">
-          {{ 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-base sm:text-lg">
+          {{ title }}
         </nuxt-link>
-        <p class="text-gray-400 text-sm hover:underline cursor-pointer" @click="filterByAuthor">by {{ author }}</p>
+        <div v-if="!playerHandler.isVideo" class="text-gray-400 flex items-center">
+          <span class="material-icons text-sm">person</span>
+          <p v-if="podcastAuthor">{{ podcastAuthor }}</p>
+          <p v-else-if="authors.length" class="pl-1.5 text-sm sm:text-base">
+            <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-sm sm:text-base cursor-pointer pl-2">Unknown</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>
+        </div>
       </div>
       <div class="flex-grow" />
-      <span v-if="stream" class="material-icons px-4 cursor-pointer" @click="cancelStream">close</span>
+      <span class="material-icons px-2 py-1 md:p-4 cursor-pointer" @click="closePlayer">close</span>
     </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"
+    />
 
-    <audio-player ref="audioPlayer" :chapters="chapters" :loading="isLoading" @close="cancelStream" @updateTime="updateTime" @hook:mounted="audioPlayerMounted" />
+    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :library-item-id="libraryItemId" @select="selectBookmark" />
+
+    <modals-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-time="sleepTimerTime" :remaining="sleepTimerRemaining" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />
   </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,
+      playerLoading: false,
+      isPlaying: false,
+      currentTime: 0,
+      showSleepTimerModal: false,
+      sleepTimerSet: false,
+      sleepTimerTime: 0,
+      sleepTimerRemaining: 0,
+      sleepTimer: null,
+      displayTitle: null,
+      initialPlaybackRate: 1
     }
   },
   computed: {
+    coverAspectRatio() {
+      return this.$store.getters['getServerSetting']('coverAspectRatio')
+    },
+    bookCoverAspectRatio() {
+      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+    },
+    bookCoverWidth() {
+      return 88
+    },
+    bookCoverPosTop() {
+      if (this.bookCoverAspectRatio === 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
     },
-    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
+    userMediaProgress() {
+      if (!this.libraryItemId) return
+      return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
     },
-    streamAudiobook() {
-      return this.$store.state.streamAudiobook
+    userItemCurrentTime() {
+      return this.userMediaProgress ? this.userMediaProgress.currentTime || 0 : 0
     },
-    book() {
-      return this.streamAudiobook ? this.streamAudiobook.book || {} : {}
+    bookmarks() {
+      if (!this.libraryItemId) return []
+      return this.$store.getters['user/getUserBookmarksForItem'](this.libraryItemId)
+    },
+    streamLibraryItem() {
+      return this.$store.state.streamLibraryItem
+    },
+    libraryItemId() {
+      return this.streamLibraryItem ? this.streamLibraryItem.id : null
+    },
+    media() {
+      return this.streamLibraryItem ? this.streamLibraryItem.media || {} : {}
+    },
+    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'
     }
   },
   methods: {
-    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)
+    setPlaying(isPlaying) {
+      this.isPlaying = isPlaying
+      this.$store.commit('setIsPlaying', isPlaying)
+      this.updateMediaSessionPlaybackState()
     },
-    audioPlayerMounted() {
-      this.audioPlayerReady = true
-      if (this.stream) {
-        console.log('[STREAM-CONTAINER] audioPlayerMounted w/ Stream', this.stream)
-        this.openStream()
-      }
+    setSleepTimer(seconds) {
+      this.sleepTimerSet = true
+      this.sleepTimerTime = seconds
+      this.sleepTimerRemaining = seconds
+      this.runSleepTimer()
+      this.showSleepTimerModal = false
     },
-    cancelStream() {
-      this.$root.socket.emit('close_stream')
+    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)
     },
-    terminateStream() {
-      if (this.$refs.audioPlayer) {
-        this.$refs.audioPlayer.terminateStream()
-      }
+    cancelSleepTimer() {
+      this.showSleepTimerModal = false
+      this.clearSleepTimer()
     },
-    openStream() {
-      var playOnLoad = this.$store.state.playOnLoad
-      console.log(`[StreamContainer] openStream PlayOnLoad`, playOnLoad)
-      if (!this.$refs.audioPlayer) {
-        console.error('NO Audio Player')
+    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
       }
-      var currentTime = this.stream.clientCurrentTime || 0
-      this.$refs.audioPlayer.set(this.playlistUrl, currentTime, playOnLoad)
-      if (this.stream.isTranscodeComplete) {
-        this.$refs.audioPlayer.setStreamReady()
+      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)
+      }
+    },
+    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')
+        // navigator.mediaSession.setActionHandler('nexttrack')
+      } else {
+        console.warn('Media session not available')
       }
     },
     streamProgress(data) {
@@ -116,20 +314,21 @@ 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) {
+      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() {
@@ -140,27 +339,58 @@ export default {
         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) {
+        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
+      })
+      this.playerHandler.load(libraryItem, episodeId, true, this.initialPlaybackRate)
+    },
+    pauseItem() {
+      this.playerHandler.pause()
     }
+  },
+  mounted() {
+    this.$eventBus.$on('cast-session-active', this.castSessionActive)
+    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('play-item', this.playLibraryItem)
+    this.$eventBus.$off('pause-item', this.pauseItem)
   }
 }
 </script>

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 not found')
+      } else if (response.updated) {
+        if (response.author.imagePath) this.$toast.success('Author was updated')
+        else this.$toast.success('Author was updated (no image found)')
+      } else {
+        this.$toast.info('No updates were made for Author')
+      }
+      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,26 @@
 <template>
   <div 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="h-24 bg-primary" :style="{ minWidth: 96 / bookCoverAspectRatio + 'px' }">
+        <img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
+      </div>
+      <div v-if="!isPodcast" class="px-4 flex-grow">
         <div class="flex items-center">
           <h1>{{ book.title }}</h1>
           <div class="flex-grow" />
-          <p>{{ book.year || book.first_publish_date }}</p>
+          <p>{{ book.publishedYear }}</p>
         </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 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 +38,9 @@ export default {
     book: {
       type: Object,
       default: () => {}
-    }
+    },
+    isPodcast: Boolean,
+    bookCoverAspectRatio: Number
   },
   data() {
     return {
@@ -53,7 +63,7 @@ export default {
     }
   },
   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,23 +1,26 @@
 <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="{ padding: `0px ${paddingX}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'" :style="{ height: coverHeight + 'px', width: coverWidth + 'px' }">
+          <covers-group-cover ref="groupcover" :id="seriesId" :name="groupName" :group-to="groupTo" :type="groupType" :book-items="bookItems" :width="coverWidth" :height="coverHeight" :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` }">
+          <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: 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">
+          <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 z-40">
             <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>
       </nuxt-link>
     </div>
+
+    <div v-if="!isCategorized" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto bottom-0 h-6 rounded-md font-book text-center" :style="{ width: Math.min(160, coverWidth) + 'px' }">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border" :style="{ padding: `0rem ${1 * sizeMultiplier}rem` }">
+        <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ groupName }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -31,7 +34,9 @@ export default {
     width: {
       type: Number,
       default: 120
-    }
+    },
+    isCategorized: Boolean,
+    bookCoverAspectRatio: Number
   },
   data() {
     return {
@@ -48,6 +53,13 @@ export default {
     }
   },
   computed: {
+    seriesId() {
+      return this.groupEncode
+    },
+    labelFontSize() {
+      if (this.coverWidth < 160) return 0.75
+      return 0.875
+    },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
@@ -59,16 +71,25 @@ export default {
     },
     groupTo() {
       if (this.groupType === 'series') {
-        return `/library/${this.currentLibraryId}/bookshelf/series?series=${this.groupEncode}`
+        return `/library/${this.currentLibraryId}/series/${this._group.id}`
+      } else if (this.groupType === 'collection') {
+        return `/collection/${this._group.id}`
       } else {
         return `/library/${this.currentLibraryId}/bookshelf?filter=tags.${this.groupEncode}`
       }
     },
-    height() {
-      return this.width * 1.6
+    squareAspectRatio() {
+      return this.bookCoverAspectRatio === 1
+    },
+    coverWidth() {
+      return this.width * 2
+    },
+    coverHeight() {
+      return this.width * this.bookCoverAspectRatio
     },
     sizeMultiplier() {
-      return this.width / 120
+      var baseSize = this.squareAspectRatio ? 192 : 120
+      return this.width / baseSize
     },
     paddingX() {
       return 16 * this.sizeMultiplier
@@ -76,21 +97,9 @@ export default {
     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 +107,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

@@ -1,16 +1,16 @@
 <template>
-  <div class="flex h-full px-1 overflow-hidden">
-    <cards-book-cover :audiobook="audiobook" :width="50" />
+  <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 !== 'authorFL'" class="text-xs text-gray-200 truncate">by {{ authorFL }}</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'" class="m-0 p-0 truncate" 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>
@@ -18,7 +18,7 @@
 <script>
 export default {
   props: {
-    audiobook: {
+    libraryItem: {
       type: Object,
       default: () => {}
     },
@@ -30,17 +30,34 @@ export default {
     return {}
   },
   computed: {
-    book() {
-      return this.audiobook ? this.audiobook.book || {} : {}
+    bookCoverAspectRatio() {
+      return this.$store.getters['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.book ? this.book.title : 'No Title'
+      return this.mediaMetadata.title || 'No Title'
     },
     subtitle() {
-      return this.book ? this.book.subtitle : ''
+      return this.mediaMetadata.subtitle || ''
     },
-    authorFL() {
-      return this.book ? this.book.authorFL : 'Unknown'
+    authorName() {
+      if (this.isPodcast) return this.mediaMetadata.author || 'Unknown'
+      return this.mediaMetadata.authorName || 'Unknown'
     },
     matchHtml() {
       if (!this.matchText || !this.search) return ''
@@ -62,7 +79,9 @@ export default {
       html += lastPart
 
       if (this.matchKey === 'tags') return `<p class="truncate">Tags: ${html}</p>`
-      if (this.matchKey === 'authorFL') return `by ${html}`
+      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}`
     }

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="Title" @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="Author" />
+          <div v-else class="w-full">
+            <p class="px-1 text-sm font-semibold">Directory <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="Series" note="(optional)" />
+        </div>
+        <div class="w-1/2 px-2">
+          <div class="w-full">
+            <p class="px-1 text-sm font-semibold">Directory <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="Item Files" class="mt-8" />
+      <tables-uploaded-files-table v-if="item.otherFiles.length" title="Other Files" :files="item.otherFiles" />
+      <tables-uploaded-files-table v-if="item.ignoredFiles.length" title="Ignored Files" :files="item.ignoredFiles" />
+    </template>
+    <widgets-alert v-if="uploadSuccess" type="success">
+      <p class="text-base">Successfully Uploaded!</p>
+    </widgets-alert>
+    <widgets-alert v-if="uploadFailed" type="error">
+      <p class="text-base">Failed to upload</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="Uploading..." />
+    </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,675 @@
+<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="booksInSeries" class="absolute z-20 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ booksInSeries }}</div>
+
+    <div 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>
+
+    <!-- Overlay is not shown if collapsing series in library -->
+    <div v-show="!booksInSeries && libraryItem && (isHovering || isSelectionMode || isMoreMenuOpen)" 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>
+
+    <!-- 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>
+
+    <!-- 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" 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
+  },
+  data() {
+    return {
+      isHovering: false,
+      isMoreMenuOpen: false,
+      isProcessingReadUpdate: false,
+      libraryItem: null,
+      imageReady: false,
+      rescanning: false,
+      selected: false,
+      isSelectionMode: false,
+      showCoverBg: false
+    }
+  },
+  watch: {
+    bookMount: {
+      handler(newVal) {
+        if (newVal) {
+          this.libraryItem = newVal
+        }
+      }
+    }
+  },
+  computed: {
+    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() {
+      return '/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
+    },
+    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.orderBy === 'media.metadata.title' && this.sortingIgnorePrefix) {
+        return this.mediaMetadata.titleIgnorePrefix
+      }
+      return this.title
+    },
+    displayLineTwo() {
+      if (this.isPodcast) return this.author
+      if (this.isAuthorBookshelfView) {
+        return this.mediaMetadata.publishedYear || ''
+      }
+      if (this.orderBy === 'media.metadata.authorNameLF') return this.authorLF
+      return this.author
+    },
+    displaySortLine() {
+      if (this.orderBy === 'mtimeMs') return 'Modified ' + this.$formatDate(this._libraryItem.mtimeMs)
+      if (this.orderBy === 'birthtimeMs') return 'Born ' + this.$formatDate(this._libraryItem.birthtimeMs)
+      if (this.orderBy === 'addedAt') return 'Added ' + this.$formatDate(this._libraryItem.addedAt)
+      if (this.orderBy === 'media.duration') return 'Duration: ' + this.$elapsedPrettyExtended(this.media.duration, false)
+      if (this.orderBy === 'size') return 'Size: ' + this.$bytesPretty(this._libraryItem.size)
+      if (this.orderBy === 'media.numTracks') return `${this.numEpisodes} Episodes`
+      return null
+    },
+    episodeProgress() {
+      // 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
+    },
+    showError() {
+      if (this.recentEpisode) return false // Dont show podcast error on episode card
+      return this.numInvalidAudioFiles || this.numMissingParts || this.isMissing || this.isInvalid
+    },
+    isStreaming() {
+      return this.store.getters['getlibraryItemIdStreaming'] === this.libraryItemId
+    },
+    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) {
+        return [
+          {
+            func: 'editPodcast',
+            text: 'Edit Podcast'
+          },
+          {
+            func: 'toggleFinished',
+            text: `Mark as ${this.itemIsFinished ? 'Not Finished' : 'Finished'}`
+          }
+        ]
+      }
+
+      var items = []
+      if (!this.isPodcast) {
+        items = [
+          {
+            func: 'toggleFinished',
+            text: `Mark as ${this.itemIsFinished ? 'Not Finished' : 'Finished'}`
+          },
+          {
+            func: 'openCollections',
+            text: 'Add to Collection'
+          }
+        ]
+      }
+      if (this.userCanUpdate) {
+        items.push({
+          func: 'showEditModalFiles',
+          text: 'Files'
+        })
+        items.push({
+          func: 'showEditModalMatch',
+          text: 'Match'
+        })
+      }
+      if (this.userIsAdminOrUp && !this.isFile) {
+        items.push({
+          func: 'rescan',
+          text: 'Re-Scan'
+        })
+      }
+      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.TITLES
+    },
+    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
+    }
+  },
+  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) {
+          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.isSelectionMode) {
+        e.stopPropagation()
+        e.preventDefault()
+        this.selectBtnClick()
+      } 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() {
+      var updatePayload = {
+        isFinished: !this.itemIsFinished
+      }
+      this.isProcessingReadUpdate = 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.isProcessingReadUpdate = false
+          toast.success(`Item marked as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.isProcessingReadUpdate = false
+          toast.error(`Failed to mark as ${updatePayload.isFinished ? 'Finished' : 'Not Finished'}`)
+        })
+    },
+    editPodcast() {
+      this.$emit('editPodcast', this.libraryItem)
+    },
+    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
+        })
+    },
+    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' })
+    },
+    openCollections() {
+      this.store.commit('setSelectedLibraryItem', this.libraryItem)
+      this.store.commit('globals/setShowUserCollectionsModal', 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() {
+      if (this.processingBatch) return
+      this.selected = !this.selected
+      this.$emit('select', this.libraryItem)
+    },
+    play() {
+      var eventBus = this.$eventBus || this.$nuxt.$eventBus
+      eventBus.$emit('play-item', {
+        libraryItemId: this.libraryItemId,
+        episodeId: this.recentEpisode ? this.recentEpisode.id : null
+      })
+    },
+    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,104 @@
+<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" 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
+    }
+  },
+  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.TITLES
+    }
+  },
+  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() {}
+}
+</script>

client/components/cards/LazySeriesCard.vue

@@ -0,0 +1,145 @@
+<template>
+  <div ref="card" :id="`series-card-${index}`" :style="{ width: width + 'px', height: height + 'px' }" class="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 z-0">
+      <covers-group-cover v-if="series" ref="cover" :id="seriesId" :name="title" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" :group-to="seriesBooksRoute" />
+    </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' }">{{ title }}</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' }">{{ 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
+    },
+    isCategorized: Boolean,
+    seriesMount: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      series: null,
+      isSelectionMode: false,
+      selected: false,
+      isHovering: false,
+      imageReady: 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
+    },
+    seriesId() {
+      return this.series ? this.series.id : ''
+    },
+    title() {
+      return this.series ? this.series.name : ''
+    },
+    books() {
+      return this.series ? this.series.books || [] : []
+    },
+    addedAt() {
+      return this.series ? this.series.addedAt : 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.TITLES
+    }
+  },
+  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/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 }} Episodes</p>
+      </div>
+      <div class="flex-grow pl-2" :style="{ maxWidth: detailsWidth + 'px' }">
+        <p class="mb-1">{{ title }}</p>
+        <p class="text-xs mb-1 text-gray-300">{{ author }}</p>
+        <p class="text-xs mb-2 text-gray-200">{{ description }}</p>
+        <p class="text-xs truncate text-blue-200">
+          Folder: <span class="font-mono">{{ folderPath }}</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    feed: {
+      type: Object,
+      default: () => {}
+    },
+    libraryFolderPath: String
+  },
+  data() {
+    return {
+      width: 900
+    }
+  },
+  computed: {
+    title() {
+      return this.metadata.title || 'No Title'
+    },
+    image() {
+      return this.metadata.imageUrl
+    },
+    description() {
+      return this.metadata.description || ''
+    },
+    author() {
+      return this.metadata.author || ''
+    },
+    metadata() {
+      return this.feed || {}
+    },
+    numEpisodes() {
+      return this.feed.numEpisodes || 0
+    },
+    folderPath() {
+      if (!this.libraryFolderPath) return ''
+      return `${this.libraryFolderPath}\\${this.$sanitizeFilename(this.title)}`
+    },
+    detailsWidth() {
+      return this.width - 85
+    }
+  },
+  methods: {},
+  updated() {
+    this.width = this.$refs.wrapper.clientWidth
+  },
+  mounted() {
+    this.width = this.$refs.wrapper.clientWidth
+  }
+}
+</script>

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['getBookCoverAspectRatio']
+    },
+    name() {
+      return this.series.name
+    }
+  },
   methods: {},
   mounted() {}
 }

client/components/controls/EpisodeSortSelect.vue

@@ -0,0 +1,94 @@
+<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-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">
+            <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,
+      items: [
+        {
+          text: 'Pub Date',
+          value: 'publishedAt'
+        },
+        {
+          text: 'Title',
+          value: 'title'
+        },
+        {
+          text: 'Season',
+          value: 'season'
+        },
+        {
+          text: 'Episode',
+          value: 'episode'
+        }
+      ]
+    }
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selectedDesc: {
+      get() {
+        return this.descending
+      },
+      set(val) {
+        this.$emit('update:descending', val)
+      }
+    },
+    selectedText() {
+      var _selected = this.selected
+      if (!_selected) return ''
+      var _sel = this.items.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
+      }
+      this.showMenu = false
+      this.$nextTick(() => this.$emit('change', val))
+    }
+  }
+}
+</script>

client/components/controls/FilterSelect.vue

@@ -14,12 +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">
+    <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 items">
+        <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">{{ item.text }}</span>
+              <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">arrow_right</span>
@@ -67,7 +67,7 @@ export default {
     return {
       showMenu: false,
       sublist: null,
-      items: [
+      bookItems: [
         {
           text: 'All',
           value: 'all'
@@ -97,10 +97,46 @@ export default {
           value: 'narrators',
           sublist: true
         },
+        {
+          text: 'Language',
+          value: 'languages',
+          sublist: true
+        },
         {
           text: 'Progress',
           value: 'progress',
           sublist: true
+        },
+        {
+          text: 'Missing',
+          value: 'missing',
+          sublist: true
+        },
+        {
+          text: 'Issues',
+          value: 'issues',
+          sublist: false
+        }
+      ],
+      podcastItems: [
+        {
+          text: 'All',
+          value: 'all'
+        },
+        {
+          text: 'Genre',
+          value: 'genres',
+          sublist: true
+        },
+        {
+          text: 'Tag',
+          value: 'tags',
+          sublist: true
+        },
+        {
+          text: 'Issues',
+          value: 'issues',
+          sublist: false
         }
       ]
     }
@@ -122,44 +158,84 @@ export default {
         this.$emit('input', val)
       }
     },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+    },
+    selectItems() {
+      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) {
-        return this.$decode(parts[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 ''
       }
-      var _sel = this.items.find((i) => i.value === this.selected)
-      if (!_sel) return ''
-      return _sel.text
     },
     genres() {
-      return this.$store.getters['audiobooks/getGenresUsed']
+      return this.filterData.genres || []
     },
     tags() {
-      return this.$store.state.audiobooks.tags
+      return this.filterData.tags || []
     },
     series() {
-      return this.$store.state.audiobooks.series
+      return this.filterData.series || []
     },
     authors() {
-      return this.$store.getters['audiobooks/getUniqueAuthors']
+      return this.filterData.authors || []
     },
     narrators() {
-      return this.$store.getters['audiobooks/getUniqueNarrators']
+      return this.filterData.narrators || []
+    },
+    languages() {
+      return this.filterData.languages || []
     },
     progress() {
-      return ['Read', 'Unread', 'In Progress']
+      return ['Finished', 'In Progress', 'Not Started']
+    },
+    missing() {
+      return ['ASIN', 'ISBN', 'Subtitle', 'Author', 'Publish Year', 'Series', 'Description', 'Genres', 'Tags', 'Narrator', 'Publisher', 'Language']
     },
     sublistItems() {
       return (this[this.sublist] || []).map((item) => {
-        return {
-          text: item,
-          value: this.$encode(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: {

client/components/controls/GlobalSearch.vue

@@ -19,38 +19,47 @@
           <p>No Results</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">Books</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">
+              <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="podcastResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">Podcasts</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">
+              <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>
           <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">
+              <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>
           <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">
+              <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>
           <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">
+              <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,14 +89,11 @@ 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: {
@@ -94,12 +101,13 @@ export default {
       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 +139,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 +147,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/OrderSelect.vue

@@ -7,8 +7,8 @@
       </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">
-      <template v-for="item in items">
+    <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 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>
@@ -31,34 +31,68 @@ export default {
   data() {
     return {
       showMenu: false,
-      items: [
+      bookItems: [
         {
           text: 'Title',
-          value: 'book.title'
+          value: 'media.metadata.title'
         },
         {
           text: 'Author (First Last)',
-          value: 'book.authorFL'
+          value: 'media.metadata.authorName'
         },
         {
           text: 'Author (Last, First)',
-          value: 'book.authorLF'
+          value: 'media.metadata.authorNameLF'
         },
         {
           text: 'Added At',
           value: 'addedAt'
         },
         {
-          text: 'Volume #',
-          value: 'book.volumeNumber'
+          text: 'Size',
+          value: 'size'
         },
         {
           text: 'Duration',
-          value: 'duration'
+          value: 'media.duration'
+        },
+        {
+          text: 'File Birthtime',
+          value: 'birthtimeMs'
+        },
+        {
+          text: 'File Modified',
+          value: 'mtimeMs'
+        }
+      ],
+      podcastItems: [
+        {
+          text: 'Title',
+          value: 'media.metadata.title'
+        },
+        {
+          text: 'Author',
+          value: 'media.metadata.author'
+        },
+        {
+          text: 'Added At',
+          value: 'addedAt'
         },
         {
           text: 'Size',
           value: 'size'
+        },
+        {
+          text: '# of Episodes',
+          value: 'media.numTracks'
+        },
+        {
+          text: 'File Birthtime',
+          value: 'birthtimeMs'
+        },
+        {
+          text: 'File Modified',
+          value: 'mtimeMs'
         }
       ]
     }
@@ -80,9 +114,18 @@ export default {
         this.$emit('update:descending', val)
       }
     },
+    isPodcast() {
+      return this.$store.getters['libraries/getCurrentLibraryMediaType'] == 'podcast'
+    },
+    selectItems() {
+      if (this.isPodcast) return this.podcastItems
+      return this.bookItems
+    },
     selectedText() {
-      var _selected = this.selected === 'book.author' ? 'book.authorFL' : this.selected
-      var _sel = this.items.find((i) => i.value === _selected)
+      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
     }
@@ -96,6 +139,9 @@ export default {
         this.selectedDesc = !this.selectedDesc
       } else {
         this.selected = val
+        if (val == 'media.metadata.title' || val == 'media.metadata.author' || val == 'media.metadata.authorName' || val == 'media.metadata.authorNameLF') {
+          this.selectedDesc = false
+        }
       }
       this.showMenu = false
       this.$nextTick(() => this.$emit('change', val))

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">
+    <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">{{ playbackRate.toFixed(1) }}<span class="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 v-show="showMenu" class="absolute -top-20 left-0 z-20 bg-bg border-black-200 border shadow-xl rounded-lg" style="left: -92px">
       <div class="absolute -bottom-2 left-0 right-0 w-full flex justify-center">
         <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-3xl">{{ playbackRate }}<span class="text-2xl">⨯</span></p>
+          <ui-icon-btn :disabled="!canIncrement" icon="add" @click="increment" />
         </div>
       </div>
     </div>
@@ -42,8 +38,9 @@ export default {
   data() {
     return {
       showMenu: false,
-      rateIndex: 1,
-      numVisible: 5
+      currentPlaybackRate: 0,
+      MIN_SPEED: 0.5,
+      MAX_SPEED: 3
     }
   },
   computed: {
@@ -56,30 +53,44 @@ 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))
+    },
+    setShowMenu(val) {
+      if (val) {
+        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/VolumeControl.vue

@@ -51,11 +51,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 +141,11 @@ export default {
     if (this.value === 0) {
       this.isMute = true
     }
+  },
+  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/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) {
@@ -76,16 +97,19 @@ export default {
       return '/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
@@ -107,18 +131,18 @@ export default {
     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 +154,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,212 @@
+<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,
+    groupTo: String,
+    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/HoverBookCover.vue

@@ -0,0 +1,41 @@
+<template>
+  <div ref="container" @mouseover="mouseover" @mouseleave="mouseleave" class="relative">
+    <covers-book-cover :width="24" :audiobook="audiobook" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audiobook: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      isHovering: false
+    }
+  },
+  computed: {
+    placeholderUrl() {
+      return '/book_placeholder.jpg'
+    },
+    fullCoverUrl() {
+      return this.$store.getters['globals/getLibraryItemCoverSrc'](this.audiobook, this.placeholderUrl)
+    },
+    hasCover() {
+      return !!this.audiobook.book.cover
+    }
+  },
+  methods: {
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/covers/PreviewCover.vue

@@ -1,8 +1,8 @@
 <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="relative rounded-sm overflow-hidden" :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">
-      <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 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'" />
 
@@ -28,7 +28,8 @@ export default {
       type: Number,
       default: 120
     },
-    showOpenNewTab: Boolean
+    showOpenNewTab: Boolean,
+    bookCoverAspectRatio: Number
   },
   data() {
     return {
@@ -59,10 +60,6 @@ export default {
     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() {
@@ -72,7 +69,7 @@ export default {
         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/icons/audiobook-svg.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg fill="currentColor" class="h-full w-full p-px" viewBox="0 0 1978.03 2349.44">
+    <path
+      d="M2519.5,1438.39c-12.13-10.1-31-25-56.57-42.62V1197.31c0-505.94-410.15-916.09-916.1-916.09h0c-505.94,0-916.09,410.15-916.09,916.09v198.46c-25.57,17.66-44.44,32.52-56.57,42.62a45.45,45.45,0,0,0-16.35,34.95v237.74a45.45,45.45,0,0,0,16.35,35c28.28,23.54,93.18,72.92,194.22,123.55v23.11c0,62.32,40.21,112.85,89.8,112.85h0c49.59,0,89.8-50.53,89.8-112.85V1322.51c0-62.33-40.21-112.86-89.8-112.86h0c-47.51,0-86.4,46.38-89.58,105.07l-.22.11V1197.31c0-429.92,348.52-778.43,778.44-778.43h0c429.92,0,778.44,348.51,778.44,778.43v117.52l-.22-.11c-3.18-58.69-42.06-105.07-89.58-105.07h0c-49.59,0-89.79,50.53-89.79,112.86v570.18c0,62.32,40.2,112.85,89.79,112.85h0c49.6,0,89.8-50.53,89.8-112.85v-23.11c101.05-50.63,165.95-100,194.23-123.55a45.48,45.48,0,0,0,16.35-35V1473.34A45.48,45.48,0,0,0,2519.5,1438.39Z"
+      transform="translate(-557.82 -281.22)"
+    />
+    <path d="M1227.4,2429.63a108.47,108.47,0,0,0,108.47-108.47V1106.56A108.47,108.47,0,0,0,1227.4,998.08H1115.33a108.48,108.48,0,0,0-108.48,108.48v1214.6a108.47,108.47,0,0,0,108.48,108.47ZM1047.75,1289.38H1295v25.83H1047.75Z" transform="translate(-557.82 -281.22)" />
+    <path d="M1602.87,2429.63a108.47,108.47,0,0,0,108.47-108.47V1106.56a108.47,108.47,0,0,0-108.47-108.48H1490.8a108.48,108.48,0,0,0-108.48,108.48v1214.6a108.47,108.47,0,0,0,108.48,108.47ZM1423.22,1289.38h247.22v25.83H1423.22Z" transform="translate(-557.82 -281.22)" />
+    <path d="M1978.34,2429.63a108.47,108.47,0,0,0,108.47-108.47V1106.56a108.47,108.47,0,0,0-108.47-108.48H1866.27a108.48,108.48,0,0,0-108.48,108.48v1214.6a108.47,108.47,0,0,0,108.48,108.47ZM1798.69,1289.38h247.22v25.83H1798.69Z" transform="translate(-557.82 -281.22)" />
+    <rect x="180.05" y="2185.95" width="1617.93" height="163.49" rx="81.74" />
+  </svg>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/icons/book-svg.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg fill="currentColor" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
+  </svg>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/icons/comic-svg.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M6,19L9,15.14L11.14,17.72L14.14,13.86L18,19H6M6,4H11V12L8.5,10.5L6,12M18,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V4A2,2 0 0,0 18,2Z" />
+  </svg>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/icons/database-svg.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg class="p-px" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+  </svg>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/icons/podcast-svg.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg class="p-px" viewBox="0 0 122.877 120.596">
+    <path
+      fill="currentColor"
+      d="M68.925,69.906v50.689H53.953V69.906c-4.918-2.662-8.259-7.867-8.259-13.854 c0-8.694,7.05-15.744,15.745-15.744c8.694,0,15.745,7.05,15.745,15.744C77.184,62.039,73.843,67.244,68.925,69.906L68.925,69.906z M39.32,11.165c2.916-1.438,4.111-4.969,2.673-7.882c-1.438-2.914-4.966-4.111-7.88-2.674C22.213,6.479,12.958,16.19,7.11,27.625 c-4.32,8.445-6.783,17.842-7.08,27.325c-0.299,9.563,1.587,19.223,5.973,28.114c5.401,10.953,14.558,20.695,28.039,27.592 c2.889,1.477,6.429,0.33,7.905-2.559c1.477-2.889,0.331-6.428-2.558-7.904c-11.037-5.645-18.486-13.525-22.833-22.334 c-3.506-7.111-5.014-14.857-4.774-22.539c0.243-7.757,2.256-15.442,5.79-22.348C22.304,23.721,29.76,15.879,39.32,11.165 L39.32,11.165z M88.765,0.608c-2.914-1.438-6.443-0.24-7.881,2.674c-1.438,2.914-0.242,6.445,2.674,7.882 c9.561,4.715,17.017,12.556,21.747,21.808c3.533,6.905,5.547,14.59,5.789,22.348c0.24,7.682-1.268,15.428-4.773,22.539 c-4.347,8.809-11.796,16.689-22.833,22.334c-2.889,1.477-4.034,5.016-2.558,7.904c1.476,2.889,5.016,4.035,7.905,2.559 c13.48-6.896,22.638-16.639,28.039-27.592c4.386-8.891,6.272-18.551,5.973-28.114c-0.297-9.483-2.76-18.88-7.079-27.325 C109.919,16.19,100.665,6.479,88.765,0.608L88.765,0.608z M82.791,26.505c-2.195-1.581-5.256-1.082-6.837,1.113 c-1.58,2.195-1.082,5.256,1.113,6.837c0.885,0.637,1.753,1.352,2.604,2.134c4.971,4.583,7.919,10.694,8.538,17.16 c0.626,6.524-1.111,13.437-5.518,19.552c-0.748,1.039-1.61,2.092-2.585,3.15c-1.835,1.992-1.708,5.098,0.287,6.932 c1.994,1.834,5.099,1.705,6.933-0.287c1.18-1.279,2.286-2.641,3.315-4.072c5.862-8.139,8.166-17.4,7.322-26.197 c-0.848-8.853-4.871-17.208-11.648-23.457C85.249,28.387,84.074,27.431,82.791,26.505L82.791,26.505z M45.81,34.458 c2.195-1.581,2.694-4.642,1.113-6.837c-1.581-2.195-4.642-2.694-6.837-1.114c-1.284,0.926-2.458,1.882-3.524,2.864 c-6.778,6.25-10.801,14.604-11.649,23.457c-0.844,8.796,1.46,18.06,7.323,26.199c1.031,1.43,2.136,2.791,3.315,4.07 c1.834,1.992,4.939,2.121,6.932,0.287c1.996-1.834,2.123-4.939,0.288-6.932c-0.975-1.059-1.837-2.111-2.585-3.15 c-4.406-6.115-6.144-13.027-5.518-19.551c0.619-6.465,3.567-12.577,8.538-17.16C44.058,35.81,44.926,35.095,45.81,34.458 L45.81,34.458z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>

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,20 +8,20 @@
     <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="Username" />
             </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 ? 'Password' : 'Change Password'" 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="Account Type" :disabled="isEditingRoot" :items="accountTypes" @input="userTypeUpdated" />
             </div>
             <div class="flex-grow" />
-            <div v-show="!isEditingRoot" class="flex items-center pt-4 px-2">
+            <div class="flex items-center pt-4 px-2">
               <p class="px-3 font-semibold" :class="isEditingRoot ? 'text-gray-300' : ''">Is Active</p>
               <ui-toggle-switch v-model="newUser.isActive" :disabled="isEditingRoot" />
             </div>
@@ -65,6 +65,15 @@
               </div>
             </div>
 
+            <div class="flex items-center my-2 max-w-md">
+              <div class="w-1/2">
+                <p>Can Access Explicit Content</p>
+              </div>
+              <div class="w-1/2">
+                <ui-toggle-switch v-model="newUser.permissions.accessExplicitContent" />
+              </div>
+            </div>
+
             <div class="flex items-center my-2 max-w-md">
               <div class="w-1/2">
                 <p>Can Access All Libraries</p>
@@ -77,9 +86,22 @@
             <div v-if="!newUser.permissions.accessAllLibraries" class="my-4">
               <ui-multi-select-dropdown v-model="newUser.librariesAccessible" :items="libraryItems" label="Libraries Accessible to User" />
             </div>
+
+            <div class="flex items-cen~ter my-2 max-w-md">
+              <div class="w-1/2">
+                <p>Can Access All Tags</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="Tags Accessible to User" />
+            </div>
           </div>
 
-          <div class="flex pt-4">
+          <div class="flex pt-4 px-2">
+            <ui-btn v-if="isEditingRoot" to="/account">Change Root Password</ui-btn>
             <div class="flex-grow" />
             <ui-btn color="success" type="submit">Submit</ui-btn>
           </div>
@@ -103,12 +125,28 @@ export default {
       processing: false,
       newUser: {},
       isNew: true,
-      accountTypes: ['guest', 'user', 'admin']
+      accountTypes: [
+        {
+          text: 'Guest',
+          value: 'guest'
+        },
+        {
+          text: 'User',
+          value: 'user'
+        },
+        {
+          text: 'Admin',
+          value: 'admin'
+        }
+      ],
+      tags: [],
+      loadingTags: false
     }
   },
   watch: {
     show: {
       handler(newVal) {
+        console.log('accoutn modal show change', newVal)
         if (newVal) {
           this.init()
         }
@@ -125,7 +163,7 @@ export default {
       }
     },
     title() {
-      return this.isNew ? 'Add New Account' : `Update Account: ${(this.account || {}).username}`
+      return this.isNew ? 'Add New Account' : `Update ${(this.account || {}).username}`
     },
     isEditingRoot() {
       return this.account && this.account.type === 'root'
@@ -135,9 +173,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 +222,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,7 +243,7 @@ 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) {
@@ -198,7 +270,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 +295,25 @@ 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 || []
+        console.log(this.account)
         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 +326,8 @@ export default {
             update: false,
             delete: false,
             upload: false,
-            accessAllLibraries: true
+            accessAllLibraries: true,
+            accessAllTags: true
           },
           librariesAccessible: []
         }

client/components/modals/BookmarksModal.vue

@@ -0,0 +1,131 @@
+<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 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" @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 class="w-full h-px bg-white bg-opacity-10" />
+        <form @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 -mt-px">add</span></ui-btn>
+          </div>
+        </form>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    bookmarks: {
+      type: Array,
+      default: () => []
+    },
+    currentTime: {
+      type: Number,
+      default: 0
+    },
+    libraryItemId: String
+  },
+  data() {
+    return {
+      selectedBookmark: null,
+      showBookmarkTitleInput: false,
+      newBookmarkTitle: ''
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        this.showBookmarkTitleInput = false
+        this.newBookmarkTitle = ''
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    canCreateBookmark() {
+      return !this.bookmarks.find((bm) => bm.time === this.currentTime)
+    }
+  },
+  methods: {
+    editBookmark(bm) {
+      this.selectedBookmark = bm
+      this.newBookmarkTitle = bm.title
+      this.showBookmarkTitleInput = true
+    },
+    deleteBookmark(bm) {
+      this.$axios
+        .$delete(`/api/me/item/${this.libraryItemId}/bookmark/${bm.time}`)
+        .then(() => {
+          this.$toast.success('Bookmark removed')
+        })
+        .catch((error) => {
+          this.$toast.error(`Failed to remove bookmark`)
+          console.error(error)
+        })
+      this.show = false
+    },
+    clickBookmark(bm) {
+      this.$emit('select', bm)
+    },
+    submitUpdateBookmark(updatedBookmark) {
+      var bookmark = { ...updatedBookmark }
+      this.$axios
+        .$patch(`/api/me/item/${this.libraryItemId}/bookmark`, bookmark)
+        .then(() => {
+          this.$toast.success('Bookmark updated')
+        })
+        .catch((error) => {
+          this.$toast.error(`Failed to update bookmark`)
+          console.error(error)
+        })
+      this.show = false
+    },
+    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('Bookmark added')
+        })
+        .catch((error) => {
+          this.$toast.error(`Failed to create bookmark`)
+          console.error(error)
+        })
+
+      this.newBookmarkTitle = ''
+      this.showBookmarkTitleInput = false
+
+      this.show = false
+    }
+  }
+}
+</script>

client/components/modals/ChaptersModal.vue

@@ -2,7 +2,7 @@
   <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">
       <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)">
+        <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)">
           {{ chap.title }}
           <span class="flex-grow" />
           <span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }}</span>
@@ -46,6 +46,9 @@ export default {
     },
     currentChapterId() {
       return this.currentChapter ? this.currentChapter.id : null
+    },
+    currentChapterStart() {
+      return this.currentChapter ? this.currentChapter.start : 0
     }
   },
   methods: {

client/components/modals/EditCollectionModal.vue

@@ -0,0 +1,145 @@
+<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">Collection</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="Name" class="mb-2" />
+
+              <ui-textarea-with-label v-model="newCollectionDescription" label="Description" />
+            </div>
+          </div>
+          <div class="absolute bottom-0 left-0 right-0 w-full py-2 px-4 flex">
+            <ui-btn small color="error" type="button" @click.stop="removeClick">Remove</ui-btn>
+            <div class="flex-grow" />
+            <ui-btn color="success" type="submit">Save</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['getBookCoverAspectRatio']
+    },
+    collection() {
+      return this.$store.state.globals.selectedCollection || {}
+    },
+    collectionName() {
+      return this.collection.name
+    },
+    books() {
+      return this.collection.books || []
+    }
+  },
+  methods: {
+    init() {
+      this.newCollectionName = this.collectionName
+      this.newCollectionDescription = this.collection.description || ''
+    },
+    removeClick() {
+      if (confirm(`Are you sure you want to remove collection "${this.collectionName}"?`)) {
+        this.processing = true
+        var collectionName = this.collectionName
+        this.$axios
+          .$delete(`/api/collections/${this.collection.id}`)
+          .then(() => {
+            this.processing = false
+            this.show = false
+            this.$toast.success(`Collection "${collectionName}" Removed`)
+          })
+          .catch((error) => {
+            console.error('Failed to remove collection', error)
+            this.processing = false
+            this.$toast.error(`Failed to remove collection`)
+          })
+      }
+    },
+    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(`Collection "${collection.name}" Updated`)
+        })
+        .catch((error) => {
+          console.error('Failed to update collection', error)
+          this.processing = false
+          this.$toast.error(`Failed to update collection`)
+        })
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</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/EditSeriesInputInnerModal.vue

@@ -0,0 +1,120 @@
+<template>
+  <div ref="wrapper" class="hidden absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 rounded-lg items-center justify-center" style="z-index: 51" @click="clickClose">
+    <div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300">
+      <span class="material-icons text-4xl">close</span>
+    </div>
+    <div ref="content" class="text-white">
+      <form v-if="selectedSeries" @submit.prevent="submitSeriesForm">
+        <div class="bg-bg rounded-lg p-8" @click.stop>
+          <div class="flex">
+            <div class="flex-grow p-1 min-w-80">
+              <ui-input-dropdown ref="newSeriesSelect" v-model="selectedSeries.name" :items="existingSeriesNames" :disabled="!selectedSeries.id.startsWith('new')" label="Series Name" />
+            </div>
+            <div class="w-40 p-1">
+              <ui-text-input-with-label v-model="selectedSeries.sequence" label="Sequence" />
+            </div>
+          </div>
+          <div class="flex justify-end mt-2 p-1">
+            <ui-btn type="submit">Save</ui-btn>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    selectedSeries: {
+      type: Object,
+      default: () => {}
+    },
+    existingSeriesNames: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      el: null,
+      content: null
+    }
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        this.$nextTick(this.setShow)
+      } else {
+        this.setHide()
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    }
+  },
+  methods: {
+    submitSeriesForm() {
+      if (this.$refs.newSeriesSelect) {
+        this.$refs.newSeriesSelect.blur()
+      }
+
+      this.$emit('submit')
+    },
+    clickClose() {
+      this.show = false
+    },
+    hotkey(action) {
+      if (action === this.$hotkeys.Modal.CLOSE) {
+        this.show = false
+      }
+    },
+    setShow() {
+      if (!this.el || !this.content) {
+        this.init()
+      }
+      if (!this.el || !this.content) {
+        return
+      }
+
+      document.body.appendChild(this.el)
+      setTimeout(() => {
+        this.content.style.transform = 'scale(1)'
+      }, 10)
+      document.documentElement.classList.add('modal-open')
+
+      this.$store.commit('setInnerModalOpen', true)
+      this.$eventBus.$on('modal-hotkey', this.hotkey)
+    },
+    setHide() {
+      if (this.content) this.content.style.transform = 'scale(0)'
+      if (this.el) this.el.remove()
+      document.documentElement.classList.remove('modal-open')
+
+      this.$store.commit('setInnerModalOpen', false)
+      this.$eventBus.$off('modal-hotkey', this.hotkey)
+    },
+    init() {
+      this.el = this.$refs.wrapper
+      this.content = this.$refs.content
+      if (this.content && this.el) {
+        this.el.classList.remove('hidden')
+        this.el.classList.add('flex')
+        this.content.style.transform = 'scale(0)'
+        this.content.style.transition = 'transform 0.25s cubic-bezier(0.16, 1, 0.3, 1)'
+        this.el.style.opacity = 1
+        this.el.remove()
+      }
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/ListeningSessionModal.vue

@@ -0,0 +1,150 @@
+<template>
+  <modals-modal v-model="show" name="listening-session-modal" :width="700" :height="'unset'">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">Session {{ _session.id }}</p>
+      </div>
+    </template>
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden p-6" style="max-height: 80vh">
+      <div class="flex items-center">
+        <p class="text-base text-gray-200">{{ _session.displayTitle }}</p>
+        <p v-if="_session.displayAuthor" class="text-xs text-gray-400 px-4">by {{ _session.displayAuthor }}</p>
+      </div>
+
+      <div class="w-full h-px bg-white bg-opacity-10 my-4" />
+
+      <div class="flex flex-wrap mb-4">
+        <div class="w-full md:w-2/3">
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2">Details</p>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Started At</div>
+            <div class="px-1">
+              {{ $formatDate(_session.startedAt, 'MMMM do, yyyy HH:mm') }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Updated At</div>
+            <div class="px-1">
+              {{ $formatDate(_session.updatedAt, 'MMMM do, yyyy HH:mm') }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Listened for</div>
+            <div class="px-1">
+              {{ $elapsedPrettyExtended(_session.timeListening) }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Start Time</div>
+            <div class="px-1">
+              {{ $secondsToTimestamp(_session.startTime) }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Last Time</div>
+            <div class="px-1">
+              {{ $secondsToTimestamp(_session.currentTime) }}
+            </div>
+          </div>
+
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Item</p>
+          <div v-if="_session.libraryId" class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Library Id</div>
+            <div class="px-1">
+              {{ _session.libraryId }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Library Item Id</div>
+            <div class="px-1">
+              {{ _session.libraryItemId }}
+            </div>
+          </div>
+          <div v-if="_session.episodeId" class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Episode Id</div>
+            <div class="px-1">
+              {{ _session.episodeId }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Media Type</div>
+            <div class="px-1">
+              {{ _session.mediaType }}
+            </div>
+          </div>
+          <div class="flex items-center -mx-1 mb-1">
+            <div class="w-40 px-1 text-gray-200">Duration</div>
+            <div class="px-1">
+              {{ $elapsedPretty(_session.duration) }}
+            </div>
+          </div>
+        </div>
+        <div class="w-full md:w-1/3">
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mb-2 mt-6 md:mt-0">User</p>
+          <p class="mb-1">{{ _session.userId }}</p>
+
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Media Player</p>
+          <p class="mb-1">{{ playMethodName }}</p>
+          <p class="mb-1">{{ _session.mediaPlayer }}</p>
+
+          <p class="font-semibold uppercase text-xs text-gray-400 tracking-wide mt-6 mb-2">Device</p>
+          <p v-if="deviceInfo.ipAddress" class="mb-1">{{ deviceInfo.ipAddress }}</p>
+          <p v-if="osDisplayName" class="mb-1">{{ osDisplayName }}</p>
+          <p v-if="deviceInfo.browserName" class="mb-1">{{ deviceInfo.browserName }}</p>
+          <p v-if="clientDisplayName" class="mb-1">{{ clientDisplayName }}</p>
+          <p v-if="deviceInfo.sdkVersion" class="mb-1">SDK Version: {{ deviceInfo.sdkVersion }}</p>
+          <p v-if="deviceInfo.deviceType" class="mb-1">Type: {{ deviceInfo.deviceType }}</p>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    session: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    _session() {
+      return this.session || {}
+    },
+    deviceInfo() {
+      return this._session.deviceInfo || {}
+    },
+    osDisplayName() {
+      if (!this.deviceInfo.osName) return null
+      return `${this.deviceInfo.osName} ${this.deviceInfo.osVersion}`
+    },
+    clientDisplayName() {
+      if (!this.deviceInfo.manufacturer || !this.deviceInfo.model) return null
+      return `${this.deviceInfo.manufacturer} ${this.deviceInfo.model}`
+    },
+    playMethodName() {
+      const playMethod = this._session.playMethod
+      if (playMethod === this.$constants.PlayMethod.DIRECTPLAY) return 'Direct Play'
+      else if (playMethod === this.$constants.PlayMethod.TRANSCODE) return 'Transcode'
+      else if (playMethod === this.$constants.PlayMethod.DIRECTSTREAM) return 'Direct Stream'
+      else if (playMethod === this.$constants.PlayMethod.LOCAL) return 'Local'
+      return 'Unknown'
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

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>
     <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: 400px; min-height: 200px" 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,27 @@ 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
     }
   },
   watch: {
     show(newVal) {
       if (newVal) {
-        this.setShow()
+        this.$nextTick(this.setShow)
       } else {
         this.setHide()
       }
@@ -74,21 +83,40 @@ export default {
     }
   },
   methods: {
+    mousedownModal() {
+      this.preventClickoutside = true
+    },
+    mouseupModal() {
+      this.preventClickoutside = false
+    },
     clickClose() {
       this.show = false
     },
-    clickBg(vm, ev) {
+    clickBg(ev) {
+      if (!this.show) 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 (action === 'Escape') {
+      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 +127,28 @@ 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)
+      }
     }
   },
-  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()
-  }
+  mounted() {}
 }
 </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">Sleep Timer</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')">Cancel</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/UserCollectionsModal.vue

@@ -0,0 +1,233 @@
+<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">
+        <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="!showBatchUserCollectionModal" class="text-2xl">Add to Collection</h1>
+          <h1 v-else class="text-2xl">Add {{ selectedBookIds.length }} Books to Collection</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-user-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">No Collections</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="New Collection" class="w-full" />
+            </div>
+            <ui-btn type="submit" color="success" :padding-x="4" class="h-10">Create</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.showUserCollectionsModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowUserCollectionsModal', val)
+      }
+    },
+    title() {
+      if (this.showBatchUserCollectionModal) {
+        return `${this.selectedBookIds.length} Items Selected`
+      }
+      return this.selectedLibraryItem ? this.selectedLibraryItem.media.metadata.title : ''
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    },
+    selectedLibraryItem() {
+      return this.$store.state.selectedLibraryItem
+    },
+    selectedLibraryItemId() {
+      return this.selectedLibraryItem ? this.selectedLibraryItem.id : null
+    },
+    collections() {
+      return this.$store.state.user.collections || []
+    },
+    sortedCollections() {
+      return this.collections
+        .map((c) => {
+          var includesBook = false
+          if (this.showBatchUserCollectionModal) {
+            // 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))
+    },
+    showBatchUserCollectionModal() {
+      return this.$store.state.globals.showBatchUserCollectionModal
+    },
+    selectedBookIds() {
+      return this.$store.state.selectedLibraryItems || []
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    }
+  },
+  methods: {
+    loadCollections() {
+      this.$store.dispatch('user/loadUserCollections')
+    },
+    removeFromCollection(collection) {
+      if (!this.selectedLibraryItemId && !this.selectedBookIds.length) return
+      this.processing = true
+
+      if (this.showBatchUserCollectionModal) {
+        // 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('Books removed from collection')
+            this.processing = false
+          })
+          .catch((error) => {
+            console.error('Failed to remove books from collection', error)
+            this.$toast.error('Failed to remove books from collection')
+            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('Book removed from collection')
+            this.processing = false
+          })
+          .catch((error) => {
+            console.error('Failed to remove book from collection', error)
+            this.$toast.error('Failed to remove book from collection')
+            this.processing = false
+          })
+      }
+    },
+    addToCollection(collection) {
+      if (!this.selectedLibraryItemId && !this.selectedBookIds.length) return
+      this.processing = true
+
+      if (this.showBatchUserCollectionModal) {
+        // 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.showBatchUserCollectionModal ? 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>
+
+<style>
+.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;
+}
+</style>

client/components/modals/authors/EditModal.vue

@@ -0,0 +1,170 @@
+<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="Name" />
+              </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-textarea-with-label v-model="authorCopy.description" :disabled="processing" label="Description" :rows="8" />
+            </div>
+
+            <div class="flex pt-2 px-2">
+              <ui-btn type="button" @click="searchAuthor">Quick Match</ui-btn>
+              <div class="flex-grow" />
+              <ui-btn type="submit">Submit</ui-btn>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  // props: {
+  //   value: Boolean,
+  //   author: {
+  //     type: Object,
+  //     default: () => {}
+  //   }
+  // },
+  data() {
+    return {
+      authorCopy: {
+        name: '',
+        asin: '',
+        description: ''
+      },
+      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 'Edit Author'
+    }
+  },
+  methods: {
+    init() {
+      this.authorCopy.name = this.author.name
+      this.authorCopy.asin = this.author.asin
+      this.authorCopy.description = this.author.description
+    },
+    async submitForm() {
+      var keysToCheck = ['name', 'asin', 'description']
+      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('No updates are necessary')
+        return
+      }
+      this.processing = true
+      var result = await this.$axios.$patch(`/api/authors/${this.authorId}`, updatePayload).catch((error) => {
+        console.error('Failed', error)
+        this.$toast.error('Failed to update author')
+        return null
+      })
+      if (result) {
+        if (result.updated) {
+          this.$toast.success('Author updated')
+          this.show = false
+        } else this.$toast.info('No updates were needed')
+      }
+      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('Failed to remove image')
+        return null
+      })
+      if (result && result.updated) {
+        this.$toast.success('Author image removed')
+      }
+      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('Author was updated')
+        else this.$toast.success('Author was updated (no image found)')
+      } else {
+        this.$toast.info('No updates were made for Author')
+      }
+      this.processing = false
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>

client/components/modals/bookmarks/BookmarkItem.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="flex items-center px-4 py-4 justify-start relative hover:bg-bg" :class="wrapperClass" @click="click" @mouseover="mouseover" @mouseleave="mouseleave">
+    <!-- <span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-80'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span> -->
+    <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="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 -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 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>
+
+<script>
+export default {
+  props: {
+    bookmark: {
+      type: Object,
+      default: () => {}
+    },
+    highlight: Boolean
+  },
+  data() {
+    return {
+      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(' ')
+    }
+  },
+  methods: {
+    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.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() {}
+}
+</script>

client/components/modals/collections/UserCollectionItem.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="flex items-center px-4 py-2 justify-start relative hover:bg-bg" :class="wrapperClass" @mouseover="mouseover" @mouseleave="mouseleave">
+    <div v-if="isBookIncluded" class="absolute top-0 left-0 h-full w-1 bg-success z-10" />
+    <!-- <span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-80'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span> -->
+    <div class="w-20 max-w-20 text-center">
+      <!-- <img src="/Logo.png" /> -->
+      <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">
+      <!-- <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 -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> -->
+      <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 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'">
+      <ui-btn v-if="!isBookIncluded" color="success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-icons 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 pt-px">remove</span></ui-btn>
+      <!-- <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>
+
+<script>
+export default {
+  props: {
+    collection: {
+      type: Object,
+      default: () => {}
+    },
+    highlight: Boolean,
+    bookCoverAspectRatio: Number
+  },
+  data() {
+    return {
+      isHovering: false,
+      isEditing: false
+    }
+  },
+  computed: {
+    isBookIncluded() {
+      return !!this.collection.isBookIncluded
+    },
+    wrapperClass() {
+      var classes = []
+      if (this.highlight) classes.push('bg-bg bg-opacity-60')
+      if (!this.isEditing) classes.push('cursor-pointer')
+      return classes.join(' ')
+    },
+    books() {
+      return this.collection.books || []
+    }
+  },
+  methods: {
+    clickNuxtLink() {
+      this.$emit('close')
+    },
+    mouseover() {
+      if (this.isEditing) return
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    },
+    clickAdd() {
+      this.$emit('add', this.collection)
+    },
+    clickRem() {
+      this.$emit('remove', this.collection)
+    },
+    deleteClick() {
+      if (this.isEditing) return
+      this.$emit('delete', this.collection)
+    },
+    editClick() {
+      this.isEditing = true
+      this.isHovering = false
+    },
+    cancelEditing() {
+      this.isEditing = false
+    }
+  },
+  mounted() {}
+}
+</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/Details.vue

@@ -1,288 +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 px-4">
-          <ui-btn v-if="userCanDelete" color="error" type="button" small @click.stop.prevent="deleteAudiobook">Remove</ui-btn>
-
-          <ui-tooltip text="(Root User Only) Save a NFO metadata file in your audiobooks directory" direction="bottom" class="ml-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="ml-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>
-
-          <div class="flex-grow" />
-          <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']
-    },
-    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

@@ -1,13 +1,13 @@
 <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 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">{{ title }}</p>
       </div>
     </template>
-    <div class="absolute -top-10 left-0 w-full flex">
+    <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-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>
+        <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 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>
 
@@ -18,10 +18,8 @@
       <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 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>
@@ -31,43 +29,42 @@ export default {
   data() {
     return {
       processing: false,
-      audiobook: null,
-      fetchOnShow: false,
+      libraryItem: null,
       tabs: [
         {
           id: 'details',
           title: 'Details',
-          component: 'modals-edit-tabs-details'
+          component: 'modals-item-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'
+          component: 'modals-item-tabs-cover'
         },
         {
           id: 'chapters',
           title: 'Chapters',
-          component: 'modals-edit-tabs-chapters'
+          component: 'modals-item-tabs-chapters'
+        },
+        {
+          id: 'episodes',
+          title: 'Episodes',
+          component: 'modals-item-tabs-episodes'
         },
         {
           id: 'files',
           title: 'Files',
-          component: 'modals-edit-tabs-files'
+          component: 'modals-item-tabs-files'
         },
         {
-          id: 'download',
-          title: 'Download',
-          component: 'modals-edit-tabs-download'
+          id: 'match',
+          title: 'Match',
+          component: 'modals-item-tabs-match'
+        },
+        {
+          id: 'manage',
+          title: 'Manage',
+          component: 'modals-item-tabs-manage'
         }
       ]
     }
@@ -86,12 +83,7 @@ export default {
             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.libraryItem = null
           this.init()
           this.registerListeners()
         } else {
@@ -117,6 +109,9 @@ export default {
         this.$store.commit('setEditModalTab', val)
       }
     },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },
@@ -126,9 +121,14 @@ export default {
     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
+        if (tab.experimental && !this.showExperimentalFeatures) return false
+        if (tab.id === 'manage' && (this.isMissing || this.mediaType !== 'book')) return false
+        if (this.mediaType == 'podcast' && tab.id == 'chapters') return false
+        if (this.mediaType == 'book' && tab.id == 'episodes') return false
+
+        if ((tab.id === 'manage' || tab.id === 'files') && this.userCanDownload) return true
+        if (tab.id !== 'manage' && tab.id !== 'files' && this.userCanUpdate) return true
+        if (tab.id === 'match' && this.userCanUpdate) return true
         return false
       })
     },
@@ -141,26 +141,32 @@ export default {
       return _tab ? _tab.component : ''
     },
     isMissing() {
-      return this.selectedAudiobook.isMissing
+      return this.selectedLibraryItem.isMissing
     },
-    selectedAudiobook() {
-      return this.$store.state.selectedAudiobook || {}
+    selectedLibraryItem() {
+      return this.$store.state.selectedLibraryItem || {}
     },
-    selectedAudiobookId() {
-      return this.selectedAudiobook.id
+    selectedLibraryItemId() {
+      return this.selectedLibraryItem.id
     },
-    book() {
-      return this.audiobook ? this.audiobook.book || {} : {}
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    mediaType() {
+      return this.libraryItem ? this.libraryItem.mediaType : null
     },
     title() {
-      return this.book.title || 'No 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.selectedAudiobookId)
+      return this.bookshelfBookIds.findIndex((bid) => bid === this.selectedLibraryItemId)
     },
     canGoPrev() {
       return this.bookshelfBookIds.length && this.currentBookshelfIndex > 0
@@ -170,65 +176,82 @@ export default {
     }
   },
   methods: {
-    goPrevBook() {
+    async goPrevBook() {
       if (this.currentBookshelfIndex - 1 < 0) return
       var prevBookId = this.bookshelfBookIds[this.currentBookshelfIndex - 1]
-      var prevBook = this.$store.getters['audiobooks/getAudiobook'](prevBookId)
+      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.$store.commit('showEditModalOnTab', { audiobook: prevBook, tab: this.selectedTab })
-        this.$nextTick(this.init)
+        this.unregisterListeners()
+        this.libraryItem = prevBook
+        this.selectedTab = 'details'
+        this.$store.commit('setSelectedLibraryItem', prevBook)
+        this.$nextTick(this.registerListeners)
       } else {
         console.error('Book not found', prevBookId)
       }
     },
-    goNextBook() {
+    async goNextBook() {
       if (this.currentBookshelfIndex >= this.bookshelfBookIds.length - 1) return
-
+      this.processing = true
       var nextBookId = this.bookshelfBookIds[this.currentBookshelfIndex + 1]
-      var nextBook = this.$store.getters['audiobooks/getAudiobook'](nextBookId)
+      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.$store.commit('showEditModalOnTab', { audiobook: nextBook, tab: this.selectedTab })
-        this.$nextTick(this.init)
+        this.unregisterListeners()
+        this.libraryItem = nextBook
+        this.selectedTab = 'details'
+        this.$store.commit('setSelectedLibraryItem', nextBook)
+        this.$nextTick(this.registerListeners)
       } else {
         console.error('Book not found', nextBookId)
       }
     },
     selectTab(tab) {
-      this.selectedTab = tab
-    },
-    audiobookUpdated() {
-      if (!this.show) this.fetchOnShow = true
-      else {
-        this.fetchFull()
+      if (this.availableTabs.find((t) => t.id === tab)) {
+        this.selectedTab = tab
       }
     },
+    libraryItemUpdated(expandedLibraryItem) {
+      this.libraryItem = expandedLibraryItem
+    },
     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.libraryItem = await this.$axios.$get(`/api/items/${this.selectedLibraryItemId}?expanded=1`)
         this.processing = false
       } catch (error) {
-        console.error('Failed to fetch audiobook', this.selectedAudiobookId, error)
+        console.error('Failed to fetch audiobook', this.selectedLibraryItemId, error)
         this.processing = false
         this.show = false
       }
     },
     hotkey(action) {
-      if (action === 'ArrowRight') {
+      if (action === this.$hotkeys.Modal.NEXT_PAGE) {
         this.goNextBook()
-      } else if (action === 'ArrowLeft') {
+      } else if (action === this.$hotkeys.Modal.PREV_PAGE) {
         this.goPrevBook()
       }
     },
     registerListeners() {
       this.$eventBus.$on('modal-hotkey', this.hotkey)
+      this.$eventBus.$on(`${this.selectedLibraryItemId}_updated`, this.libraryItemUpdated)
     },
     unregisterListeners() {
       this.$eventBus.$off('modal-hotkey', this.hotkey)
+      this.$eventBus.$off(`${this.selectedLibraryItemId}_updated`, this.libraryItemUpdated)
     }
   },
   mounted() {},
@@ -238,7 +261,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .tab {
   height: 40px;
 }

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">No Chapters</p>
+        <ui-btn v-if="userCanUpdate" :to="`/audiobook/${libraryItem.id}/chapters`">Add Chapters</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

@@ -2,9 +2,9 @@
   <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" />
+        <covers-book-cover :library-item="libraryItem" :book-cover-aspect-ratio="bookCoverAspectRatio" />
         <!-- 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 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">
             <span class="material-icons">delete</span>
@@ -31,44 +31,44 @@
 
           <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">
+              <div :key="cover.path" class="m-0.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' }">
                   <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>
+    <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="Provider" small />
+        </div>
+        <div class="w-72 px-1">
+          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" placeholder="Search" />
+        </div>
+        <div v-show="provider != 'itunes'" class="w-72 px-1">
+          <ui-text-input-with-label v-model="searchAuthor" label="Author" />
+        </div>
+        <ui-btn class="mt-5 ml-1" type="submit">Search</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">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)">
+          <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">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" />
+        <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">Clear</ui-btn>
@@ -82,7 +82,7 @@
 export default {
   props: {
     processing: Boolean,
-    audiobook: {
+    libraryItem: {
       type: Object,
       default: () => {}
     }
@@ -97,11 +97,12 @@ export default {
       hasSearched: false,
       showLocalCovers: false,
       previewUpload: null,
-      selectedFile: null
+      selectedFile: null,
+      provider: 'google'
     }
   },
   watch: {
-    audiobook: {
+    libraryItem: {
       immediate: true,
       handler(newVal) {
         if (newVal) {
@@ -119,17 +120,41 @@ export default {
         this.$emit('update:processing', val)
       }
     },
-    audiobookId() {
-      return this.audiobook ? this.audiobook.id : null
+    providers() {
+      if (this.isPodcast) return this.$store.state.scanners.podcastProviders
+      return this.$store.state.scanners.providers
     },
-    book() {
-      return this.audiobook ? this.audiobook.book || {} : {}
+    searchTitleLabel() {
+      if (this.provider == 'audible') return 'Search Title or ASIN'
+      else if (this.provider == 'itunes') return 'Search Term'
+      return 'Search Title'
     },
-    audiobookPath() {
-      return this.audiobook ? this.audiobook.path : null
+    coverAspectRatio() {
+      return this.$store.getters['getServerSetting']('coverAspectRatio')
     },
-    otherFiles() {
-      return this.audiobook ? this.audiobook.otherFiles || [] : []
+    bookCoverAspectRatio() {
+      return this.coverAspectRatio === this.$constants.BookCoverAspectRatio.SQUARE ? 1 : 1.6
+    },
+    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']
@@ -138,12 +163,11 @@ export default {
       return this.$store.getters['user/getToken']
     },
     localCovers() {
-      return this.otherFiles
-        .filter((f) => f.filetype === 'image')
+      return this.libraryFiles
+        .filter((f) => f.fileType === 'image')
         .map((file) => {
           var _file = { ...file }
-          var imgRelPath = _file.path.replace(this.audiobookPath, '')
-          _file.localPath = `/s/book/${this.audiobookId}${imgRelPath}`
+          _file.localPath = `/s/item/${this.libraryItemId}/${this.$encodeUriPath(file.metadata.relPath).replace(/^\//, '')}`
           return _file
         })
     }
@@ -155,7 +179,7 @@ export default {
       form.set('cover', this.selectedFile)
 
       this.$axios
-        .$post(`/api/audiobook/${this.audiobook.id}/cover`, form)
+        .$post(`/api/items/${this.libraryItemId}/cover`, form)
         .then((data) => {
           if (data.error) {
             this.$toast.error(data.error)
@@ -188,16 +212,18 @@ export default {
     },
     init() {
       this.showLocalCovers = false
-      if (this.coversFound.length && (this.searchTitle !== this.book.title || this.searchAuthor !== this.book.authorFL)) {
+      if (this.coversFound.length && (this.searchTitle !== this.mediaMetadata.title || this.searchAuthor !== this.mediaMetadata.authorName)) {
         this.coversFound = []
         this.hasSearched = false
       }
-      this.imageUrl = this.book.cover || ''
-      this.searchTitle = this.book.title || ''
-      this.searchAuthor = this.book.authorFL || ''
+      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.book.cover) {
+      if (!this.media.coverPath) {
         this.imageUrl = ''
         return
       }
@@ -207,7 +233,7 @@ export default {
       this.updateCover(this.imageUrl)
     },
     async updateCover(cover) {
-      if (cover === this.book.cover) {
+      if (cover === this.coverPath) {
         console.warn('Cover has not changed..', cover)
         return
       }
@@ -215,9 +241,21 @@ export default {
       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) => {
+      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)
@@ -227,11 +265,9 @@ export default {
       } else {
         // Update local cover url
         const updatePayload = {
-          book: {
-            cover: cover
-          }
+          cover
         }
-        success = await this.$axios.$patch(`/api/audiobook/${this.audiobook.id}`, updatePayload).catch((error) => {
+        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)
@@ -241,21 +277,32 @@ export default {
       }
       if (success) {
         this.$toast.success('Update Successful')
-        this.$emit('close')
+        // this.$emit('close')
       } else {
-        this.imageUrl = this.book.cover || ''
+        this.imageUrl = this.media.coverPath || ''
       }
       this.isProcessing = false
     },
     getSearchQuery() {
-      var searchQuery = `provider=openlibrary&title=${this.searchTitle}`
+      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/find/covers?${searchQuery}`).catch((error) => {
+      var results = await this.$axios.$get(`/api/search/covers?${searchQuery}`).catch((error) => {
         console.error('Failed', error)
         return []
       })
@@ -264,23 +311,7 @@ export default {
       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
-        })
+      this.updateCover(coverFile.metadata.path)
     }
   }
 }

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

@@ -0,0 +1,240 @@
+<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-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" :padding-x="3" small @click.stop.prevent="removeItem">Remove</ui-btn>
+
+        <div class="flex-grow" />
+
+        <ui-tooltip v-if="mediaType == 'book'" :disabled="!!quickMatching" :text="`(Root User Only) Populate empty book details & cover with first book result from '${libraryProvider}'. Does not overwrite details.`" direction="bottom" class="mr-4">
+          <ui-btn v-if="userIsAdminOrUp" :loading="quickMatching" color="bg" type="button" class="h-full" small @click.stop.prevent="quickMatch">Quick Match</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="userIsAdminOrUp && !isFile" :loading="rescanning" :disabled="!!libraryScan" color="bg" type="button" class="h-full" small @click.stop.prevent="rescan">Re-Scan</ui-btn>
+        </ui-tooltip>
+
+        <ui-btn @click="save" class="mx-2">Save</ui-btn>
+
+        <ui-btn @click="saveAndClose">Save & Close</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('No updates were necessary')
+        }
+      }
+      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,130 @@
+<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">
+        <!-- <p v-if="autoDownloadEpisodes">Last new episode check {{ $formatDate(lastEpisodeCheck) }}</p> -->
+        <ui-text-input-with-label ref="lastCheckInput" v-model="lastEpisodeCheckInput" :disabled="checkingNewEpisodes" type="datetime-local" label="Look for new episodes after this date" class="max-w-xs mr-2" />
+        <ui-btn :loading="checkingNewEpisodes" @click="checkForNewEpisodes">Check & Download New Episodes</ui-btn>
+      </div>
+
+      <div v-if="episodes.length" class="w-full p-4 bg-primary">
+        <p>Podcast Episodes</p>
+      </div>
+      <div v-if="!episodes.length" class="flex my-4 text-center justify-center text-xl">No Episodes</div>
+      <table v-else class="text-sm tracksTable">
+        <tr class="font-book">
+          <th class="text-left">Sort #</th>
+          <th class="text-left whitespace-nowrap">Episode #</th>
+          <th class="text-left">Title</th>
+          <th class="text-center w-28">Duration</th>
+          <th class="text-center w-28">Size</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
+    }
+  },
+  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()
+      }
+      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`)
+        .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/Manage.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6">
+    <!-- Merge to m4b -->
+    <div v-if="showM4bDownload" class="w-full border border-black-200 p-4 my-8">
+      <div class="flex items-center">
+        <div>
+          <p class="text-lg">Make M4B Audiobook File <span class="text-error">*</span></p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">Generate a .M4B audiobook file with embedded metadata, cover image, and chapters. <br /><span class="text-warning">*</span> Does not delete existing audio files.</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <p v-if="abmergeStatus === $constants.DownloadStatus.FAILED" class="text-error mb-2">Download Failed</p>
+          <p v-if="abmergeStatus === $constants.DownloadStatus.READY" class="text-success mb-2">Download Ready!</p>
+          <p v-if="abmergeStatus === $constants.DownloadStatus.EXPIRED" class="text-error mb-2">Download Expired</p>
+
+          <ui-btn v-if="abmergeStatus !== $constants.DownloadStatus.READY" :loading="abmergeStatus === $constants.DownloadStatus.PENDING" :disabled="tempDisable" @click="startAudiobookMerge">Start Merge</ui-btn>
+          <div v-else>
+            <div class="flex">
+              <ui-btn @click="downloadWithProgress(abmergeDownload)">Download</ui-btn>
+              <ui-icon-btn small icon="delete" bg-color="error" class="ml-2" @click="removeDownload" />
+            </div>
+            <p class="px-0.5 py-1 text-sm font-mono text-center">Size: {{ $bytesPretty(abmergeDownload.size) }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Split to mp3 -->
+    <div v-if="showMp3Split && showExperimentalFeatures" class="w-full border border-black-200 p-4 my-8">
+      <div class="flex items-center">
+        <div>
+          <p class="text-lg">Split M4B to MP3's</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">Generate multiple MP3's split by chapters with embedded metadata, cover image, and chapters. <br /><span class="text-warning">*</span> Does not delete existing audio files.</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <p v-if="abmergeStatus === $constants.DownloadStatus.FAILED" class="text-error mb-2">Download Failed</p>
+          <p v-if="abmergeStatus === $constants.DownloadStatus.READY" class="text-success mb-2">Download Ready!</p>
+          <p v-if="abmergeStatus === $constants.DownloadStatus.EXPIRED" class="text-error mb-2">Download Expired</p>
+
+          <ui-btn v-if="abmergeStatus !== $constants.DownloadStatus.READY" :loading="abmergeStatus === $constants.DownloadStatus.PENDING" :disabled="true" @click="startAudiobookMerge">Not yet implemented</ui-btn>
+          <div v-else>
+            <div class="flex">
+              <ui-btn @click="downloadWithProgress(abmergeDownload)">Download</ui-btn>
+              <ui-icon-btn small icon="delete" bg-color="error" class="ml-2" @click="removeDownload" />
+            </div>
+            <p class="px-0.5 py-1 text-sm font-mono text-center">Size: {{ $bytesPretty(abmergeDownload.size) }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Embed Metadata -->
+    <div v-if="mediaTracks.length && showExperimentalFeatures" class="w-full border border-black-200 p-4 my-8">
+      <div class="flex items-center">
+        <div>
+          <p class="text-lg">Embed Metadata</p>
+          <p class="max-w-sm text-sm pt-2 text-gray-300">Embed metadata into audio files including cover image and chapters. <br /><span class="text-warning">*</span> Modifies audio files.</p>
+        </div>
+        <div class="flex-grow" />
+        <div>
+          <ui-btn :to="`/item/${libraryItemId}/manage`" class="flex items-center"
+            >Open Manager
+            <span class="material-icons text-lg ml-2">launch</span>
+          </ui-btn>
+        </div>
+      </div>
+    </div>
+
+    <p v-if="showM4bDownload" class="text-left text-base mb-4 py-4">
+      <span class="text-error">* <strong>Experimental</strong></span
+      >&nbsp;-&nbsp;M4b merge 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. Download will timeout after 20 minutes.
+    </p>
+
+    <!-- <p v-if="isSingleM4b" class="text-lg text-center my-8">Audiobook is already a single m4b!</p> -->
+    <p v-if="!mediaTracks.length" class="text-lg text-center my-8">No audio tracks to merge</p>
+
+    <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,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      tempDisable: false,
+      isDownloading: false,
+      downloadPercent: '0',
+      downloadAmount: '0 KB'
+    }
+  },
+  watch: {
+    abmergeStatus(newVal) {
+      if (newVal) {
+        this.tempDisable = false
+      }
+    }
+  },
+  computed: {
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
+    libraryItemId() {
+      return this.libraryItem ? this.libraryItem.id : null
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    downloads() {
+      return this.$store.getters['downloads/getDownloads'](this.libraryItemId)
+    },
+    abmergeDownload() {
+      return this.downloads.find((d) => d.type === 'abmerge')
+    },
+    abmergeStatus() {
+      return this.abmergeDownload ? this.abmergeDownload.status : false
+    },
+    libraryFiles() {
+      return this.libraryItem.libraryFiles
+    },
+    totalFiles() {
+      return this.libraryFiles.length
+    },
+    mediaTracks() {
+      return this.media.tracks || []
+    },
+    isSingleM4b() {
+      return this.mediaTracks.length === 1 && this.mediaTracks[0].metadata.ext.toLowerCase() === '.m4b'
+    },
+    chapters() {
+      return this.media.chapters || []
+    },
+    showM4bDownload() {
+      if (!this.mediaTracks.length) return false
+      return !this.isSingleM4b
+    },
+    showMp3Split() {
+      if (!this.mediaTracks.length) return false
+      return this.isSingleM4b && this.chapters.length
+    }
+  },
+  methods: {
+    removeDownload() {
+      if (!this.abmergeDownload) return
+      if (!confirm(`Are you sure you want to remove this merge download?`)) return
+
+      var downloadId = this.abmergeDownload.id
+
+      this.tempDisable = true
+      this.$axios
+        .$delete(`/api/download/${downloadId}`)
+        .then(() => {
+          this.tempDisable = false
+          this.$toast.success('Merge download deleted')
+          this.$store.commit('downloads/removeDownload', { id: downloadId })
+        })
+        .catch((error) => {
+          var errorMsg = error.response ? error.response.data || 'Unknown Error' : 'Unknown Error'
+          this.$toast.error(errorMsg)
+          this.tempDisable = false
+        })
+    },
+    startAudiobookMerge() {
+      this.tempDisable = true
+
+      this.$axios
+        .$get(`/api/audiobook-merge/${this.libraryItemId}`)
+        .then(() => {
+          this.tempDisable = false
+        })
+        .catch((error) => {
+          var errorMsg = error.response ? error.response.data || 'Unknown Error' : 'Unknown Error'
+          this.$toast.error(errorMsg)
+          this.tempDisable = false
+        })
+    },
+    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`)
+      }
+    },
+    loadDownloads() {
+      this.$axios
+        .$get(`/api/downloads`)
+        .then((data) => {
+          var pendingDownloads = data.pendingDownloads.map((pd) => {
+            pd.download.status = this.$constants.DownloadStatus.PENDING
+            return pd.download
+          })
+          var downloads = data.downloads.map((d) => {
+            d.status = this.$constants.DownloadStatus.READY
+            return d
+          })
+          var allDownloads = downloads.concat(pendingDownloads)
+          this.$store.commit('downloads/setDownloads', allDownloads)
+        })
+        .catch((error) => {
+          console.error('Failed to load downloads', error)
+        })
+    }
+  },
+  mounted() {
+    this.loadDownloads()
+  }
+}
+</script>

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

@@ -0,0 +1,487 @@
+<template>
+  <div id="match-wrapper" class="w-full h-full overflow-hidden px-4 py-6 relative">
+    <form @submit.prevent="submitSearch">
+      <div class="flex items-center justify-start -mx-1 h-20">
+        <div class="w-40 px-1">
+          <ui-dropdown v-model="provider" :items="providers" label="Provider" small />
+        </div>
+        <div class="w-72 px-1">
+          <ui-text-input-with-label v-model="searchTitle" :label="searchTitleLabel" placeholder="Search" />
+        </div>
+        <div v-show="provider != 'itunes'" class="w-72 px-1">
+          <ui-text-input-with-label v-model="searchAuthor" label="Author" />
+        </div>
+        <ui-btn class="mt-5 ml-1" type="submit">Search</ui-btn>
+      </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" :is-podcast="isPodcast" :book-cover-aspect-ratio="bookCoverAspectRatio" @select="selectMatch" />
+      </template>
+    </div>
+    <div v-if="selectedMatch" class="absolute top-0 left-0 w-full bg-bg h-full p-8 max-h-full overflow-y-auto overflow-x-hidden">
+      <div class="flex mb-2">
+        <div class="w-8 h-8 rounded-full hover:bg-white hover:bg-opacity-10 flex items-center justify-center cursor-pointer" @click="selectedMatch = null">
+          <span class="material-icons text-3xl">arrow_back</span>
+        </div>
+        <p class="text-xl pl-3">Update Book Details</p>
+      </div>
+      <form @submit.prevent="submitMatchUpdate">
+        <div v-if="selectedMatch.cover" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.cover" />
+          <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" label="Cover" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.title" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.title" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.title" :disabled="!selectedMatchUsage.title" label="Title" />
+            <p v-if="mediaMetadata.title" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.title || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.subtitle" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.subtitle" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.subtitle" :disabled="!selectedMatchUsage.subtitle" label="Subtitle" />
+            <p v-if="mediaMetadata.subtitle" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.subtitle || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.author" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.author" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" label="Author" />
+            <p v-if="mediaMetadata.authorName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.authorName || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.narrator" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.narrator" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.narrator" :disabled="!selectedMatchUsage.narrator" label="Narrator" />
+            <p v-if="mediaMetadata.narratorName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.narratorName || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.description" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.description" />
+          <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" label="Description" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.publisher" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.publisher" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.publisher" :disabled="!selectedMatchUsage.publisher" label="Publisher" />
+            <p v-if="mediaMetadata.publisher" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.publisher || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.publishedYear" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.publishedYear" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.publishedYear" :disabled="!selectedMatchUsage.publishedYear" label="Published Year" />
+            <p v-if="mediaMetadata.publishedYear" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.publishedYear || '' }}</p>
+          </div>
+        </div>
+
+        <div v-if="selectedMatch.series" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.series" />
+          <div class="flex-grow ml-4">
+            <widgets-series-input-widget v-model="selectedMatch.series" />
+            <p v-if="mediaMetadata.seriesName" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.seriesName || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.volumeNumber" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.volumeNumber" />
+          <ui-text-input-with-label v-model="selectedMatch.volumeNumber" :disabled="!selectedMatchUsage.volumeNumber" label="Volume Number" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.genres" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.genres" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.genres" :disabled="!selectedMatchUsage.genres" label="Genres" />
+            <p v-if="mediaMetadata.genresList" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.genresList || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.tags" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.tags" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.tags" :disabled="!selectedMatchUsage.tags" label="Tags" />
+            <p v-if="mediaMetadata.tagsList" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.tagsList || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.language" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.language" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.language" :disabled="!selectedMatchUsage.language" label="Language" />
+            <p v-if="mediaMetadata.language" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.language || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.isbn" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.isbn" />
+          <div class="flex-grow ml-4">
+            <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">Currently: {{ mediaMetadata.isbn || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.asin" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.asin" />
+          <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">Currently: {{ mediaMetadata.asin || '' }}</p>
+          </div>
+        </div>
+
+        <div v-if="selectedMatch.itunesId" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.itunesId" />
+          <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">Currently: {{ mediaMetadata.itunesId || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.feedUrl" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.feedUrl" />
+          <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">Currently: {{ mediaMetadata.feedUrl || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.itunesPageUrl" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.itunesPageUrl" />
+          <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">Currently: {{ mediaMetadata.itunesPageUrl || '' }}</p>
+          </div>
+        </div>
+        <div v-if="selectedMatch.releaseDate" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.releaseDate" />
+          <div class="flex-grow ml-4">
+            <ui-text-input-with-label v-model="selectedMatch.releaseDate" :disabled="!selectedMatchUsage.releaseDate" label="Release Date" />
+            <p v-if="mediaMetadata.releaseDate" class="text-xs ml-1 text-white text-opacity-60">Currently: {{ mediaMetadata.releaseDate || '' }}</p>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-end py-2">
+          <ui-btn color="success" type="submit">Update</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,
+      selectedMatchUsage: {
+        title: true,
+        subtitle: true,
+        cover: true,
+        author: true,
+        narrator: true,
+        description: true,
+        publisher: true,
+        publishedYear: true,
+        series: true,
+        volumeNumber: true,
+        genres: true,
+        tags: true,
+        language: true,
+        explicit: true,
+        asin: true,
+        isbn: true,
+        // Podcast specific
+        itunesPageUrl: true,
+        itunesId: true,
+        feedUrl: true,
+        releaseDate: 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.volumeNumber ? `${se.series} #${se.volumeNumber}` : se.series,
+            name: se.series,
+            sequence: se.volumeNumber || ''
+          }
+        })
+      },
+      set(val) {
+        console.log('set series items', val)
+        this.selectedMatch.series = val
+      }
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    },
+    providers() {
+      if (this.isPodcast) return this.$store.state.scanners.podcastProviders
+      return this.$store.state.scanners.providers
+    },
+    searchTitleLabel() {
+      if (this.provider == 'audible') return 'Search Title or ASIN'
+      else if (this.provider == 'itunes') return 'Search Term'
+      return 'Search Title'
+    },
+    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: {
+    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}`).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.selectedMatch = null
+      this.selectedMatchUsage = {
+        title: true,
+        subtitle: true,
+        cover: true,
+        author: true,
+        narrator: true,
+        description: true,
+        publisher: true,
+        publishedYear: true,
+        series: true,
+        volumeNumber: 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'
+    },
+    selectMatch(match) {
+      if (match && match.series) {
+        match.series = match.series.map((se) => {
+          return {
+            id: `new-${Math.floor(Math.random() * 10000)}`,
+            displayName: se.volumeNumber ? `${se.series} #${se.volumeNumber}` : se.series,
+            name: se.series,
+            sequence: se.volumeNumber || ''
+          }
+        })
+      }
+
+      this.selectedMatch = match
+    },
+    buildMatchUpdatePayload() {
+      var updatePayload = {}
+      updatePayload.metadata = {}
+
+      var volumeNumber = this.selectedMatchUsage.volumeNumber ? this.selectedMatch.volumeNumber || null : null
+      for (const key in this.selectedMatchUsage) {
+        if (this.selectedMatchUsage[key] && this.selectedMatch[key]) {
+          if (key === 'series') {
+            var seriesPayload = []
+            if (!Array.isArray(this.selectedMatch[key])) {
+              seriesPayload.push({
+                id: `new-${Math.floor(Math.random() * 10000)}`,
+                name: this.selectedMatch[key],
+                sequence: volumeNumber
+              })
+            } else {
+              this.selectedMatch[key].forEach((seriesItem) =>
+                seriesPayload.push({
+                  id: seriesItem.id,
+                  name: seriesItem.name,
+                  sequence: seriesItem.sequence
+                })
+              )
+            }
+
+            updatePayload.metadata.series = seriesPayload
+          } else if (key === 'author' && !this.isPodcast) {
+            if (!Array.isArray(this.selectedMatch[key])) this.selectedMatch[key] = [this.selectedMatch[key]]
+            var authorPayload = []
+            this.selectedMatch[key].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]]
+          } else if (key === 'genres') {
+            updatePayload.metadata.genres = this.selectedMatch[key].split(',')
+          } else if (key === 'tags') {
+            updatePayload.tags = this.selectedMatch[key].split(',')
+          } 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
+      }
+      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('Item Cover Updated')
+        } else {
+          this.$toast.error('Item Cover Failed to Update')
+        }
+        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('Item details updated')
+          } else {
+            this.$toast.info('No detail updates were necessary')
+          }
+          this.selectedMatch = null
+          this.$emit('selectTab', 'details')
+        } else {
+          this.$toast.error('Item Details Failed to Update')
+        }
+      } else {
+        this.selectedMatch = null
+      }
+      this.isProcessing = false
+    }
+  }
+}
+</script>
+
+<style>
+.matchListWrapper {
+  height: calc(100% - 80px);
+}
+</style>

client/components/modals/libraries/EditLibrary.vue

@@ -1,38 +1,44 @@
 <template>
-  <div class="w-full h-full px-4 py-2 mb-12">
-    <div class="flex items-center py-1 mb-2">
-      <span v-show="showDirectoryPicker" class="material-icons text-3xl cursor-pointer hover:text-gray-300" @click="backArrowPress">arrow_back</span>
-      <p class="px-4 text-xl">{{ title }}</p>
-    </div>
-
+  <div class="w-full h-full px-4 py-2 mb-4">
     <div v-if="!showDirectoryPicker" class="w-full h-full py-4">
-      <ui-text-input-with-label v-model="name" label="Library Name" />
+      <div class="flex flex-wrap md:flex-nowrap -mx-1">
+        <div class="w-2/5 md:w-72 px-1 py-1 md:py-0">
+          <ui-dropdown v-model="mediaType" :items="mediaTypes" label="Media Type" :disabled="!isNew" small @input="changedMediaType" />
+        </div>
+        <div class="w-full md:flex-grow px-1 py-1 md:py-0">
+          <ui-text-input-with-label v-model="name" label="Library Name" @blur="nameBlurred" />
+        </div>
+        <div class="w-1/5 md:w-18 px-1 py-1 md:py-0">
+          <ui-media-icon-picker v-model="icon" @input="iconChanged" />
+        </div>
+        <div class="w-2/5 md:w-72 px-1 py-1 md:py-0">
+          <ui-dropdown v-model="provider" :items="providers" label="Metadata Provider" small @input="formUpdated" />
+        </div>
+      </div>
 
       <div class="w-full py-4">
         <p class="px-1 text-sm font-semibold">Folders</p>
         <div v-for="(folder, index) in folders" :key="index" class="w-full flex items-center py-1 px-2">
-          <!-- <ui-text-input :value="folder.fullPath" type="text" class="w-full" /> -->
           <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
-          <ui-editable-text v-model="folder.fullPath" type="text" class="w-full" />
+          <ui-editable-text v-model="folder.fullPath" readonly type="text" class="w-full" />
           <span v-show="folders.length > 1" class="material-icons ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span>
         </div>
-        <p v-if="!folders.length" class="text-sm text-gray-300 px-1 py-2">No folders</p>
-        <ui-btn class="w-full mt-2" color="primary" @click="showDirectoryPicker = true">Browse for Folder</ui-btn>
-      </div>
-      <div class="absolute bottom-0 left-0 w-full py-4 px-4">
-        <div class="flex items-center">
-          <div class="flex-grow" />
-          <ui-btn v-show="!disableSubmit" color="success" :disabled="disableSubmit" @click="submit">{{ library ? 'Update Library' : 'Create Library' }}</ui-btn>
+        <div class="flex py-1 px-2 items-center w-full">
+          <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
+          <ui-editable-text v-model="newFolderPath" placeholder="New folder path" type="text" class="w-full" @blur="newFolderInputBlurred" />
         </div>
+
+        <ui-btn class="w-full mt-2" color="primary" @click="browseForFolder">Browse for Folder</ui-btn>
       </div>
     </div>
-    <modals-libraries-folder-chooser v-else :paths="folderPaths" @select="selectFolder" />
+    <modals-libraries-folder-chooser v-else :paths="folderPaths" @back="showDirectoryPicker = false" @select="selectFolder" />
   </div>
 </template>
 
 <script>
 export default {
   props: {
+    isNew: Boolean,
     library: {
       type: Object,
       default: () => null
@@ -42,34 +48,76 @@ export default {
   data() {
     return {
       name: '',
+      provider: 'google',
+      icon: '',
       folders: [],
-      showDirectoryPicker: false
+      showDirectoryPicker: false,
+      newFolderPath: '',
+      mediaType: null,
+      mediaTypes: [
+        {
+          value: 'book',
+          text: 'Books'
+        },
+        {
+          value: 'podcast',
+          text: 'Podcasts'
+        }
+      ]
     }
   },
   computed: {
-    title() {
-      if (this.showDirectoryPicker) return 'Choose a Folder'
-      return ''
-    },
     folderPaths() {
       return this.folders.map((f) => f.fullPath)
     },
-    disableSubmit() {
-      if (!this.library) {
-        return false
-      }
-      var newfolderpaths = this.folderPaths.join(',')
-      var origfolderpaths = this.library.folders.map((f) => f.fullPath).join(',')
-      console.log(newfolderpaths)
-      console.log(origfolderpaths)
-      console.log(newfolderpaths === origfolderpaths)
-
-      return newfolderpaths === origfolderpaths && this.name === this.library.name
+    providers() {
+      if (this.mediaType === 'podcast') return this.$store.state.scanners.podcastProviders
+      return this.$store.state.scanners.providers
     }
   },
   methods: {
+    browseForFolder() {
+      this.showDirectoryPicker = true
+    },
+    getLibraryData() {
+      return {
+        name: this.name,
+        provider: this.provider,
+        folders: this.folders,
+        icon: this.icon,
+        mediaType: this.mediaType
+      }
+    },
+    formUpdated() {
+      this.$emit('update', this.getLibraryData())
+    },
+    newFolderInputBlurred() {
+      if (this.newFolderPath) {
+        this.folders.push({ fullPath: this.newFolderPath })
+        this.newFolderPath = ''
+        this.formUpdated()
+      }
+    },
+    iconChanged() {
+      this.formUpdated()
+    },
+    nameBlurred() {
+      if (this.name !== this.library.name) {
+        this.formUpdated()
+      }
+    },
+    changedMediaType() {
+      this.provider = this.providers[0].value
+      this.formUpdated()
+    },
+    selectFolder(fullPath) {
+      this.folders.push({ fullPath })
+      this.showDirectoryPicker = false
+      this.formUpdated()
+    },
     removeFolder(folder) {
       this.folders = this.folders.filter((f) => f.fullPath !== folder.fullPath)
+      this.formUpdated()
     },
     backArrowPress() {
       if (this.showDirectoryPicker) {
@@ -78,87 +126,14 @@ export default {
     },
     init() {
       this.name = this.library ? this.library.name : ''
+      this.provider = this.library ? this.library.provider : 'google'
       this.folders = this.library ? this.library.folders.map((p) => ({ ...p })) : []
+      this.icon = this.library ? this.library.icon : 'default'
+      this.mediaType = this.library ? this.library.mediaType : 'book'
       this.showDirectoryPicker = false
-    },
-    selectFolder(fullPath) {
-      this.folders.push({ fullPath })
-      this.showDirectoryPicker = false
-    },
-    submit() {
-      if (this.library) {
-        this.updateLibrary()
-      } else {
-        this.createLibrary()
-      }
-    },
-    updateLibrary() {
-      if (!this.name) {
-        this.$toast.error('Library must have a name')
-        return
-      }
-      if (!this.folders.length) {
-        this.$toast.error('Library must have at least 1 path')
-        return
-      }
-      var newLibraryPayload = {
-        name: this.name,
-        folders: this.folders
-      }
-
-      this.$emit('update:processing', true)
-      this.$axios
-        .$patch(`/api/library/${this.library.id}`, newLibraryPayload)
-        .then((res) => {
-          this.$emit('update:processing', false)
-          this.$emit('close')
-          this.$toast.success(`Library "${res.name}" updated successfully`)
-        })
-        .catch((error) => {
-          console.error(error)
-          if (error.response && error.response.data) {
-            this.$toast.error(error.response.data)
-          } else {
-            this.$toast.error('Failed to update library')
-          }
-          this.$emit('update:processing', false)
-        })
-    },
-    createLibrary() {
-      if (!this.name) {
-        this.$toast.error('Library must have a name')
-        return
-      }
-      if (!this.folders.length) {
-        this.$toast.error('Library must have at least 1 path')
-        return
-      }
-      var newLibraryPayload = {
-        name: this.name,
-        folders: this.folders
-      }
-
-      this.$emit('update:processing', true)
-      this.$axios
-        .$post('/api/library', newLibraryPayload)
-        .then((res) => {
-          this.$emit('update:processing', false)
-          this.$emit('close')
-          this.$toast.success(`Library "${res.name}" created successfully`)
-        })
-        .catch((error) => {
-          console.error(error)
-          if (error.response && error.response.data) {
-            this.$toast.error(error.response.data)
-          } else {
-            this.$toast.error('Failed to create library')
-          }
-          this.$emit('update:processing', false)
-        })
     }
   },
   mounted() {
-    console.log('Mounted edit library')
     this.init()
   }
 }

client/components/modals/libraries/EditModal.vue

@@ -0,0 +1,225 @@
+<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="absolute -top-10 left-0 z-10 w-full flex">
+      <template v-for="tab in tabs">
+        <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 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 class="px-4 w-full text-sm pt-6 pb-20 rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
+      <component v-if="libraryCopy && show" :is="tabName" :is-new="!library" :library="libraryCopy" :processing.sync="processing" @update="updateLibrary" @close="show = false" />
+
+      <div class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-opacity-10">
+        <div class="flex justify-end">
+          <ui-btn @click="submit">{{ buttonText }}</ui-btn>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    library: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      selectedTab: 'details',
+      tabs: [
+        {
+          id: 'details',
+          title: 'Details',
+          component: 'modals-libraries-edit-library'
+        },
+        {
+          id: 'settings',
+          title: 'Settings',
+          component: 'modals-libraries-library-settings'
+        }
+      ],
+      libraryCopy: null
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    title() {
+      return this.library ? 'Update Library' : 'New Library'
+    },
+    buttonText() {
+      return this.library ? 'Update Library' : 'Create New Library'
+    },
+    tabName() {
+      var _tab = this.tabs.find((t) => t.id === this.selectedTab)
+      return _tab ? _tab.component : ''
+    }
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) this.init()
+      }
+    }
+  },
+  methods: {
+    selectTab(tab) {
+      this.selectedTab = tab
+    },
+    updateLibrary(library) {
+      this.mapLibraryToCopy(library)
+    },
+    getNewLibraryData() {
+      return {
+        name: '',
+        provider: 'google',
+        folders: [],
+        icon: 'database',
+        mediaType: 'book',
+        settings: {
+          disableWatcher: false,
+          skipMatchingMediaWithAsin: false,
+          skipMatchingMediaWithIsbn: false
+        }
+      }
+    },
+    init() {
+      this.selectedTab = 'details'
+      this.libraryCopy = this.getNewLibraryData()
+      if (this.library) {
+        this.mapLibraryToCopy(this.library)
+      }
+    },
+    mapLibraryToCopy(library) {
+      for (const key in this.libraryCopy) {
+        if (library[key] !== undefined) {
+          if (key === 'folders') {
+            this.libraryCopy.folders = library.folders.map((f) => ({ ...f }))
+          } else if (key === 'settings') {
+            this.libraryCopy.settings = { ...library.settings }
+          } else {
+            this.libraryCopy[key] = library[key]
+          }
+        }
+      }
+    },
+    validate() {
+      if (!this.libraryCopy.name) {
+        this.$toast.error('Library must have a name')
+        return false
+      }
+      if (!this.libraryCopy.folders.length) {
+        this.$toast.error('Library must have at least 1 path')
+        return false
+      }
+
+      return true
+    },
+    submit() {
+      if (!this.validate()) return
+
+      if (this.library) {
+        this.submitUpdateLibrary()
+      } else {
+        this.submitCreateLibrary()
+      }
+    },
+    getLibraryUpdatePayload() {
+      var updatePayload = {}
+      for (const key in this.libraryCopy) {
+        if (key === 'folders') {
+          if (this.libraryCopy.folders.map((f) => f.fullPath).join(',') !== this.library.folders.map((f) => f.fullPath).join(',')) {
+            updatePayload.folders = [...this.libraryCopy.folders]
+          }
+        } else if (key === 'settings') {
+          for (const settingsKey in this.libraryCopy.settings) {
+            if (this.libraryCopy.settings[settingsKey] !== this.library.settings[settingsKey]) {
+              if (!updatePayload.settings) updatePayload.settings = {}
+              updatePayload.settings[settingsKey] = this.libraryCopy.settings[settingsKey]
+            }
+          }
+        } else if (key !== 'mediaType' && this.libraryCopy[key] !== this.library[key]) {
+          updatePayload[key] = this.libraryCopy[key]
+        }
+      }
+      return updatePayload
+    },
+    submitUpdateLibrary() {
+      var newLibraryPayload = this.getLibraryUpdatePayload()
+      if (!Object.keys(newLibraryPayload).length) {
+        this.$toast.info('No updates are necessary')
+        return
+      }
+
+      this.processing = true
+      this.$axios
+        .$patch(`/api/libraries/${this.library.id}`, newLibraryPayload)
+        .then((res) => {
+          this.processing = false
+          this.show = false
+          this.$toast.success(`Library "${res.name}" updated successfully`)
+        })
+        .catch((error) => {
+          console.error(error)
+          if (error.response && error.response.data) {
+            this.$toast.error(error.response.data)
+          } else {
+            this.$toast.error('Failed to update library')
+          }
+          this.processing = false
+        })
+    },
+    submitCreateLibrary() {
+      this.processing = true
+      this.$axios
+        .$post('/api/libraries', this.libraryCopy)
+        .then((res) => {
+          this.processing = false
+          this.show = false
+          this.$toast.success(`Library "${res.name}" created successfully`)
+          if (!this.$store.state.libraries.currentLibraryId) {
+            console.log('Setting initially library id', res.id)
+            // First library added
+            this.$store.dispatch('libraries/fetch', res.id)
+          }
+        })
+        .catch((error) => {
+          console.error(error)
+          if (error.response && error.response.data) {
+            this.$toast.error(error.response.data)
+          } else {
+            this.$toast.error('Failed to create library')
+          }
+          this.processing = false
+        })
+    }
+  },
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>
+
+<style scoped>
+.tab {
+  height: 40px;
+}
+.tab.tab-selected {
+  height: 41px;
+}
+</style>

client/components/modals/libraries/FolderChooser.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="w-full h-full">
+  <div class="w-full h-full bg-bg absolute top-0 left-0 px-4 py-4 z-10">
+    <div class="flex items-center py-1 mb-2">
+      <span class="material-icons text-3xl cursor-pointer hover:text-gray-300" @click="$emit('back')">arrow_back</span>
+      <p class="px-4 text-xl">Choose a Folder</p>
+    </div>
     <div v-if="allFolders.length" class="w-full bg-primary bg-opacity-70 py-1 px-4 mb-2">
       <p class="font-mono truncate">{{ selectedPath || '\\' }}</p>
     </div>
-    <div v-if="allFolders.length" class="flex bg-primary bg-opacity-50 p-4">
-      <div class="w-1/2 border-r border-bg">
+    <div v-if="allFolders.length" class="flex bg-primary bg-opacity-50 p-4 folder-container">
+      <div class="w-1/2 border-r border-bg h-full overflow-y-auto">
         <div v-if="level > 0" class="w-full p-1 cursor-pointer flex items-center" @click="goBack">
           <span class="material-icons bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <p class="text-base font-mono px-2">..</p>
@@ -15,7 +19,7 @@
           <span v-if="dir.dirs && dir.dirs.length && dir.path === selectedPath" class="material-icons" style="font-size: 1.1rem">arrow_right</span>
         </div>
       </div>
-      <div class="w-1/2">
+      <div class="w-1/2 h-full overflow-y-auto">
         <div v-for="dir in _subdirs" :key="dir.path" :class="dir.className" class="dir-item w-full p-1 cursor-pointer flex items-center hover:text-white text-gray-200" @click="selectSubDir(dir)">
           <span class="material-icons bg-opacity-50 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <p class="text-base font-mono px-2 truncate">{{ dir.dirname }}</p>
@@ -30,12 +34,8 @@
       <p class="text-gray-300">Note: folders already mapped will not be shown</p>
     </div>
 
-    <div class="absolute bottom-0 left-0 w-full py-4 px-8">
+    <div class="w-full py-2">
       <ui-btn :disabled="!selectedPath" color="primary" class="w-full mt-2" @click="selectFolder">Select Folder Path</ui-btn>
-      <!-- <div class="flex items-center">
-        <div class="flex-grow" />
-        <ui-btn color="success" @click="selectFolder">Select</ui-btn>
-      </div> -->
     </div>
   </div>
 </template>
@@ -64,7 +64,6 @@ export default {
   computed: {
     _directories() {
       return this.directories.map((d) => {
-        console.log('Directories', d)
         var isUsed = !!this.paths.find((path) => path.endsWith(d.path))
         var isSelected = d.path === this.selectedPath
         var classes = []
@@ -148,7 +147,6 @@ export default {
     }
   },
   mounted() {
-    console.log('folder chooser mounted')
     this.init()
   }
 }
@@ -163,4 +161,9 @@ export default {
 .dir-item.dir-used {
   background-color: rgba(255, 25, 0, 0.1);
 }
+.folder-container {
+  max-height: calc(100% - 130px);
+  height: calc(100% - 130px);
+  min-height: calc(100% - 130px);
+}
 </style>

client/components/modals/libraries/LibraryItem.vue

@@ -1,94 +0,0 @@
-<template>
-  <div class="w-full px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
-    <div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
-    <svg v-if="!libraryScan" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-    </svg>
-    <svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white text-opacity-50 animate-spin">
-      <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
-    </svg>
-    <p class="text-xl font-book pl-4 hover:underline cursor-pointer" @click.stop="$emit('click', library)">{{ library.name }}</p>
-    <div class="flex-grow" />
-    <ui-btn v-show="isHovering && !libraryScan && canScan" small color="bg" @click.stop="scan">Scan</ui-btn>
-    <span v-show="isHovering && !libraryScan && showEdit && canEdit" class="material-icons text-xl text-gray-300 hover:text-gray-50 ml-4 cursor-pointer" @click.stop="editClick">edit</span>
-    <span v-show="!libraryScan && isHovering && showEdit && canDelete && !isDeleting" class="material-icons text-xl text-gray-300 ml-3" :class="isMain ? 'text-opacity-5 cursor-not-allowed' : 'hover:text-gray-50 cursor-pointer'" @click.stop="deleteClick">delete</span>
-    <div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin">
-      <svg viewBox="0 0 24 24" class="w-6 h-6">
-        <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
-      </svg>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    library: {
-      type: Object,
-      default: () => {}
-    },
-    selected: Boolean,
-    showEdit: Boolean,
-    dragging: Boolean
-  },
-  data() {
-    return {
-      mouseover: false,
-      isDeleting: false
-    }
-  },
-  computed: {
-    isHovering() {
-      return this.mouseover && !this.dragging
-    },
-    isMain() {
-      return this.library.id === 'main'
-    },
-    libraryScan() {
-      return this.$store.getters['scanners/getLibraryScan'](this.library.id)
-    },
-    canEdit() {
-      return this.$store.getters['user/getIsRoot']
-    },
-    canDelete() {
-      return this.$store.getters['user/getIsRoot']
-    },
-    canScan() {
-      return this.$store.getters['user/getIsRoot']
-    }
-  },
-  methods: {
-    itemClicked() {
-      // this.$emit('click', this.library)
-    },
-    editClick() {
-      this.$emit('edit', this.library)
-    },
-    scan() {
-      this.$root.socket.emit('scan', this.library.id)
-    },
-    deleteClick() {
-      if (this.isMain) return
-      if (confirm(`Are you sure you want to permanently delete library "${this.library.name}"?`)) {
-        this.isDeleting = true
-        this.$axios
-          .$delete(`/api/library/${this.library.id}`)
-          .then((data) => {
-            this.isDeleting = false
-            if (data.error) {
-              this.$toast.error(data.error)
-            } else {
-              this.$toast.success('Library deleted')
-            }
-          })
-          .catch((error) => {
-            console.error('Failed to delete library', error)
-            this.$toast.error('Failed to delete library')
-            this.isDeleting = false
-          })
-      }
-    }
-  },
-  mounted() {}
-}
-</script>

client/components/modals/libraries/LibrarySettings.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="w-full h-full px-4 py-1 mb-4">
+    <div class="py-3">
+      <div class="flex items-center">
+        <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="disableWatcher" @input="formUpdated" />
+        <ui-toggle-switch v-else disabled :value="false" />
+        <p class="pl-4 text-lg">Disable folder watcher for library</p>
+      </div>
+      <p v-if="globalWatcherDisabled" class="text-xs text-warning">*Watcher is disabled globally in server settings</p>
+    </div>
+    <div v-if="mediaType == 'book'" class="py-3">
+      <div class="flex items-center">
+        <ui-toggle-switch v-model="skipMatchingMediaWithAsin" @input="formUpdated" />
+        <p class="pl-4 text-lg">Skip matching books that already have an ASIN</p>
+      </div>
+    </div>
+    <div v-if="mediaType == 'book'" class="py-3">
+      <div class="flex items-center">
+        <ui-toggle-switch v-model="skipMatchingMediaWithIsbn" @input="formUpdated" />
+        <p class="pl-4 text-lg">Skip matching books that already have an ISBN</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    library: {
+      type: Object,
+      default: () => null
+    },
+    processing: Boolean
+  },
+  data() {
+    return {
+      provider: null,
+      disableWatcher: false,
+      skipMatchingMediaWithAsin: false,
+      skipMatchingMediaWithIsbn: false
+    }
+  },
+  computed: {
+    librarySettings() {
+      return this.library.settings || {}
+    },
+    globalWatcherDisabled() {
+      return this.$store.getters['getServerSetting']('scannerDisableWatcher')
+    },
+    mediaType() {
+      return this.library.mediaType
+    },
+    providers() {
+      if (this.mediaType === 'podcast') return this.$store.state.scanners.podcastProviders
+      return this.$store.state.scanners.providers
+    }
+  },
+  methods: {
+    getLibraryData() {
+      return {
+        settings: {
+          disableWatcher: !!this.disableWatcher,
+          skipMatchingMediaWithAsin: !!this.skipMatchingMediaWithAsin,
+          skipMatchingMediaWithIsbn: !!this.skipMatchingMediaWithIsbn
+        }
+      }
+    },
+    formUpdated() {
+      this.$emit('update', this.getLibraryData())
+    },
+    init() {
+      this.disableWatcher = !!this.librarySettings.disableWatcher
+      this.skipMatchingMediaWithAsin = !!this.librarySettings.skipMatchingMediaWithAsin
+      this.skipMatchingMediaWithIsbn = !!this.librarySettings.skipMatchingMediaWithIsbn
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>

client/components/modals/podcast/EditEpisode.vue

@@ -0,0 +1,143 @@
+<template>
+  <modals-modal v-model="show" name="podcast-episode-edit-modal" :width="800" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <div ref="wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-auto" style="max-height: 80vh">
+      <div class="flex flex-wrap">
+        <div class="w-1/5 p-1">
+          <ui-text-input-with-label v-model="newEpisode.season" label="Season" />
+        </div>
+        <div class="w-1/5 p-1">
+          <ui-text-input-with-label v-model="newEpisode.episode" label="Episode" />
+        </div>
+        <div class="w-1/5 p-1">
+          <ui-text-input-with-label v-model="newEpisode.episodeType" label="Episode Type" />
+        </div>
+        <div class="w-2/5 p-1">
+          <ui-text-input-with-label v-model="pubDateInput" @input="updatePubDate" type="datetime-local" label="Pub Date" />
+        </div>
+        <div class="w-full p-1">
+          <ui-text-input-with-label v-model="newEpisode.title" label="Title" />
+        </div>
+        <div class="w-full p-1">
+          <ui-textarea-with-label v-model="newEpisode.subtitle" label="Subtitle" :rows="3" />
+        </div>
+        <div class="w-full p-1 default-style">
+          <ui-rich-text-editor v-if="show" label="Description" v-model="newEpisode.description" />
+        </div>
+      </div>
+      <div class="flex justify-end pt-4">
+        <ui-btn @click="submit">Submit</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      processing: false,
+      newEpisode: {
+        season: null,
+        episode: null,
+        episodeType: null,
+        title: null,
+        subtitle: null,
+        description: null,
+        pubDate: null,
+        publishedAt: null
+      },
+      pubDateInput: null
+    }
+  },
+  watch: {
+    episode: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.init()
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showEditPodcastEpisode
+      },
+      set(val) {
+        this.$store.commit('globals/setShowEditPodcastEpisodeModal', val)
+      }
+    },
+    libraryItem() {
+      return this.$store.state.selectedLibraryItem
+    },
+    episode() {
+      return this.$store.state.globals.selectedEpisode
+    },
+    episodeId() {
+      return this.episode ? this.episode.id : null
+    },
+    title() {
+      if (!this.libraryItem) return ''
+      return this.libraryItem.media.metadata.title || 'Unknown'
+    }
+  },
+  methods: {
+    updatePubDate(val) {
+      if (val) {
+        this.newEpisode.pubDate = this.$formatJsDate(new Date(val), 'E, d MMM yyyy HH:mm:ssxx')
+        this.newEpisode.publishedAt = new Date(val).valueOf()
+      } else {
+        this.newEpisode.pubDate = null
+        this.newEpisode.publishedAt = null
+      }
+    },
+    init() {
+      this.newEpisode.season = this.episode.season || ''
+      this.newEpisode.episode = this.episode.episode || ''
+      this.newEpisode.episodeType = this.episode.episodeType || ''
+      this.newEpisode.title = this.episode.title || ''
+      this.newEpisode.subtitle = this.episode.subtitle || ''
+      this.newEpisode.description = this.episode.description || ''
+      this.newEpisode.pubDate = this.episode.pubDate || ''
+      this.newEpisode.publishedAt = this.episode.publishedAt
+
+      this.pubDateInput = this.episode.pubDate ? this.$formatJsDate(new Date(this.episode.pubDate), "yyyy-MM-dd'T'HH:mm") : null
+    },
+    getUpdatePayload() {
+      var updatePayload = {}
+      for (const key in this.newEpisode) {
+        if (this.newEpisode[key] != this.episode[key]) {
+          updatePayload[key] = this.newEpisode[key]
+        }
+      }
+      return updatePayload
+    },
+    submit() {
+      const payload = this.getUpdatePayload()
+      if (!Object.keys(payload).length) {
+        return this.$toast.info('No updates were made')
+      }
+
+      this.processing = true
+      this.$axios
+        .$patch(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}`, payload)
+        .then(() => {
+          this.processing = false
+          this.$toast.success('Podcast episode updated')
+          this.show = false
+        })
+        .catch((error) => {
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed update episode'
+          console.error('Failed update episode', error)
+          this.processing = false
+          this.$toast.error(errorMsg)
+        })
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/podcast/EpisodeFeed.vue

@@ -0,0 +1,173 @@
+<template>
+  <modals-modal v-model="show" name="podcast-episodes-modal" :width="1200" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <div ref="wrapper" id="podcast-wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
+      <div ref="episodeContainer" id="episodes-scroll" class="w-full overflow-x-hidden overflow-y-auto">
+        <div
+          v-for="(episode, index) in episodes"
+          :key="index"
+          class="relative"
+          :class="episode.enclosure && itemEpisodeMap[episode.enclosure.url] ? 'bg-primary bg-opacity-40' : selectedEpisodes[String(index)] ? 'cursor-pointer bg-success bg-opacity-10' : index % 2 == 0 ? 'cursor-pointer bg-primary bg-opacity-25 hover:bg-opacity-40' : 'cursor-pointer bg-primary bg-opacity-5 hover:bg-opacity-25'"
+          @click="toggleSelectEpisode(index)"
+        >
+          <div class="absolute top-0 left-0 h-full flex items-center p-2">
+            <span v-if="episode.enclosure && itemEpisodeMap[episode.enclosure.url]" class="material-icons text-success text-xl">download_done</span>
+            <ui-checkbox v-else v-model="selectedEpisodes[String(index)]" small checkbox-bg="primary" border-color="gray-600" />
+          </div>
+          <div class="px-8 py-2">
+            <p v-if="episode.episode" class="font-semibold text-gray-200">#{{ episode.episode }}</p>
+            <p class="break-words mb-1">{{ episode.title }}</p>
+            <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
+            <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
+            <!-- <span class="material-icons cursor-pointer text-lg hover:text-success" @click="saveEpisode(episode)">save</span> -->
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-end pt-4">
+        <div class="relative">
+          <div class="absolute top-0 left-0 h-full flex items-center p-2">
+            <ui-checkbox v-model="selectAll" small checkbox-bg="primary" border-color="gray-600" :disabled="allDownloaded" />
+          </div>
+          <div class="px-8 py-2">
+            <p :class="!allDownloaded ? 'font-semibold text-gray-200' : 'text-gray-400'">Select all episodes</p>
+          </div>
+        </div>
+        <ui-btn :disabled="!episodesSelected.length" @click="submit">{{ buttonText }}</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    },
+    episodes: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      selectedEpisodes: {}
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) this.init()
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    selectAll: {
+      get() {
+        return this.episodesSelected.length == this.episodes.filter((_, index) => !(this.episodes[index].enclosure && this.itemEpisodeMap[this.episodes[index].enclosure.url])).length
+      },
+      set(val) {
+        for (const key in this.selectedEpisodes) {
+          this.selectedEpisodes[key] = val
+        }
+      }
+    },
+    title() {
+      if (!this.libraryItem) return ''
+      return this.libraryItem.media.metadata.title || 'Unknown'
+    },
+    allDownloaded() {
+      return Object.values(this.episodes).filter((episode) => !(episode.enclosure && this.itemEpisodeMap[episode.enclosure.url])).length === 0
+    },
+    episodesSelected() {
+      return Object.keys(this.selectedEpisodes).filter((key) => !!this.selectedEpisodes[key])
+    },
+    buttonText() {
+      if (!this.episodesSelected.length) return 'No Episodes Selected'
+      return `Download ${this.episodesSelected.length} Episode${this.episodesSelected.length > 1 ? 's' : ''}`
+    },
+    itemEpisodes() {
+      if (!this.libraryItem) return []
+      return this.libraryItem.media.episodes || []
+    },
+    itemEpisodeMap() {
+      var map = {}
+      this.itemEpisodes.forEach((item) => {
+        if (item.enclosure) map[item.enclosure.url] = true
+      })
+      return map
+    }
+  },
+  methods: {
+    toggleSelectEpisode(index) {
+      this.$set(this.selectedEpisodes, String(index), !this.selectedEpisodes[String(index)])
+    },
+    submit() {
+      var episodesToDownload = []
+      if (this.episodesSelected.length) {
+        episodesToDownload = this.episodesSelected.map((episodeIndex) => this.episodes[Number(episodeIndex)])
+      }
+
+      var payloadSize = JSON.stringify(episodesToDownload).length
+      var sizeInMb = payloadSize / 1024 / 1024
+      var sizeInMbPretty = sizeInMb.toFixed(2) + 'MB'
+      console.log('Request size', sizeInMb)
+      if (sizeInMb > 4.99) {
+        return this.$toast.error(`Request is too large (${sizeInMbPretty}) should be < 5Mb`)
+      }
+
+      this.processing = true
+      this.$axios
+        .$post(`/api/podcasts/${this.libraryItem.id}/download-episodes`, episodesToDownload)
+        .then(() => {
+          this.processing = false
+          this.$toast.success('Started downloading episodes')
+          this.show = false
+        })
+        .catch((error) => {
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to download episodes'
+          console.error('Failed to download episodes', error)
+          this.processing = false
+          this.$toast.error(errorMsg)
+        })
+    },
+    init() {
+      this.episodes.sort((a, b) => (a.publishedAt < b.publishedAt) ? 1 : -1)
+      for (let i = 0; i < this.episodes.length; i++) {
+        var episode = this.episodes[i]
+        if (episode.enclosure && !this.itemEpisodeMap[episode.enclosure.url]) {
+          // Do not include episodes already downloaded
+          this.$set(this.selectedEpisodes, String(i), false)
+        }
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+#podcast-wrapper {
+  min-height: 400px;
+  max-height: 80vh;
+}
+#episodes-scroll {
+  max-height: calc(80vh - 200px);
+}
+</style>

client/components/modals/podcast/NewModal.vue

@@ -0,0 +1,229 @@
+<template>
+  <modals-modal v-model="show" name="new-podcast-modal" :width="1000" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <div ref="wrapper" id="podcast-wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
+      <div class="w-full p-4">
+        <p class="text-lg font-semibold mb-2">Details</p>
+
+        <div v-if="podcast.imageUrl" class="p-1 w-full">
+          <img :src="podcast.imageUrl" class="h-16 w-16 object-contain" />
+        </div>
+        <div class="flex">
+          <div class="w-full md:w-1/2 p-2">
+            <ui-text-input-with-label v-model="podcast.title" label="Title" @input="titleUpdated" />
+          </div>
+          <div class="w-full md:w-1/2 p-2">
+            <ui-text-input-with-label v-model="podcast.author" label="Author" />
+          </div>
+        </div>
+        <div class="flex">
+          <div class="w-full md:w-1/2 p-2">
+            <ui-text-input-with-label v-model="podcast.feedUrl" label="Feed URL" readonly />
+          </div>
+          <div class="w-full md:w-1/2 p-2">
+            <ui-multi-select v-model="podcast.genres" :items="podcast.genres" label="Genres" />
+          </div>
+        </div>
+        <div class="p-2 w-full">
+          <ui-textarea-with-label v-model="podcast.description" label="Description" :rows="3" />
+        </div>
+        <div class="flex">
+          <div class="w-full md:w-1/2 p-2">
+            <ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="processing" label="Folder" @input="folderUpdated" />
+          </div>
+          <div class="w-full md:w-1/2 p-2">
+            <ui-text-input-with-label v-model="fullPath" label="Podcast Path" readonly />
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center py-4">
+        <div class="flex-grow" />
+        <div class="px-4">
+          <ui-checkbox v-model="podcast.autoDownloadEpisodes" label="Auto Download Episodes" checkbox-bg="primary" border-color="gray-600" label-class="pl-2 text-base font-semibold" />
+        </div>
+        <ui-btn color="success" @click="submit">Add Podcast</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+import Path from 'path'
+
+export default {
+  props: {
+    value: Boolean,
+    podcastData: {
+      type: Object,
+      default: () => null
+    },
+    podcastFeedData: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      selectedFolderId: null,
+      fullPath: null,
+      podcast: {
+        title: '',
+        author: '',
+        description: '',
+        releaseDate: '',
+        genres: [],
+        feedUrl: '',
+        feedImageUrl: '',
+        itunesPageUrl: '',
+        itunesId: '',
+        itunesArtistId: '',
+        autoDownloadEpisodes: false
+      }
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    title() {
+      return this._podcastData.title
+    },
+    currentLibrary() {
+      return this.$store.getters['libraries/getCurrentLibrary']
+    },
+    folders() {
+      if (!this.currentLibrary) return []
+      return this.currentLibrary.folders || []
+    },
+    folderItems() {
+      return this.folders.map((fold) => {
+        return {
+          value: fold.id,
+          text: fold.fullPath
+        }
+      })
+    },
+    _podcastData() {
+      return this.podcastData || {}
+    },
+    feedMetadata() {
+      if (!this.podcastFeedData) return {}
+      return this.podcastFeedData.metadata || {}
+    },
+    episodes() {
+      if (!this.podcastFeedData) return []
+      return this.podcastFeedData.episodes || []
+    },
+    selectedFolder() {
+      return this.folders.find((f) => f.id === this.selectedFolderId)
+    },
+    selectedFolderPath() {
+      if (!this.selectedFolder) return ''
+      return this.selectedFolder.fullPath
+    }
+  },
+  methods: {
+    titleUpdated() {
+      this.folderUpdated()
+    },
+    folderUpdated() {
+      if (!this.selectedFolderPath || !this.podcast.title) {
+        this.fullPath = ''
+        return
+      }
+      this.fullPath = Path.join(this.selectedFolderPath, this.$sanitizeFilename(this.podcast.title))
+    },
+    submit() {
+      const podcastPayload = {
+        path: this.fullPath,
+        folderId: this.selectedFolderId,
+        libraryId: this.currentLibrary.id,
+        media: {
+          metadata: {
+            title: this.podcast.title,
+            author: this.podcast.author,
+            description: this.podcast.description,
+            releaseDate: this.podcast.releaseDate,
+            genres: [...this.podcast.genres],
+            feedUrl: this.podcast.feedUrl,
+            imageUrl: this.podcast.imageUrl,
+            itunesPageUrl: this.podcast.itunesPageUrl,
+            itunesId: this.podcast.itunesId,
+            itunesArtistId: this.podcast.itunesArtistId,
+            language: this.podcast.language
+          },
+          autoDownloadEpisodes: this.podcast.autoDownloadEpisodes
+        }
+      }
+      console.log('Podcast payload', podcastPayload)
+
+      this.processing = true
+      this.$axios
+        .$post('/api/podcasts', podcastPayload)
+        .then((libraryItem) => {
+          this.processing = false
+          this.$toast.success('Podcast created successfully')
+          this.show = false
+          this.$router.push(`/item/${libraryItem.id}`)
+        })
+        .catch((error) => {
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to create podcast'
+          console.error('Failed to create podcast', error)
+          this.processing = false
+          this.$toast.error(errorMsg)
+        })
+    },
+    init() {
+      // Prefer using itunes podcast data but not always passed in if manually entering rss feed
+      this.podcast.title = this._podcastData.title || this.feedMetadata.title || ''
+      this.podcast.author = this._podcastData.artistName || this.feedMetadata.author || ''
+      this.podcast.description = this._podcastData.description || this.feedMetadata.descriptionPlain || ''
+      this.podcast.releaseDate = this._podcastData.releaseDate || ''
+      this.podcast.genres = this._podcastData.genres || this.feedMetadata.categories || []
+      this.podcast.feedUrl = this._podcastData.feedUrl || this.feedMetadata.feedUrl || ''
+      this.podcast.imageUrl = this._podcastData.cover || this.feedMetadata.image || ''
+      this.podcast.itunesPageUrl = this._podcastData.pageUrl || ''
+      this.podcast.itunesId = this._podcastData.id || ''
+      this.podcast.itunesArtistId = this._podcastData.artistId || ''
+      this.podcast.language = this._podcastData.language || ''
+      this.podcast.autoDownloadEpisodes = false
+
+      if (this.folderItems[0]) {
+        this.selectedFolderId = this.folderItems[0].value
+        this.folderUpdated()
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+#podcast-wrapper {
+  min-height: 400px;
+  max-height: 80vh;
+}
+#episodes-scroll {
+  max-height: calc(80vh - 200px);
+}
+</style>

client/components/modals/podcast/OpmlFeedsModal.vue

@@ -0,0 +1,168 @@
+<template>
+  <modals-modal v-model="show" name="opml-feeds-modal" :width="1000" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <div ref="wrapper" class="p-4 w-full text-sm py-2 rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
+      <div class="w-full p-4">
+        <div class="flex items-center -mx-2 mb-2">
+          <div class="w-full md:w-2/3 p-2">
+            <ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="processing" label="Folder" />
+          </div>
+          <div class="w-full md:w-1/3 p-2 pt-6">
+            <ui-checkbox v-model="autoDownloadEpisodes" label="Auto Download New Episodes" checkbox-bg="primary" border-color="gray-600" label-class="text-sm font-semibold pl-2" />
+          </div>
+        </div>
+
+        <p class="text-lg font-semibold mb-2">Podcasts to Add</p>
+
+        <div class="w-full overflow-y-auto" style="max-height: 50vh">
+          <template v-for="(feed, index) in feedMetadata">
+            <cards-podcast-feed-summary-card :key="index" :feed="feed" :library-folder-path="selectedFolderPath" class="my-1" />
+          </template>
+        </div>
+      </div>
+      <div class="flex items-center py-4">
+        <div class="flex-grow" />
+        <ui-btn color="success" @click="submit">Add Podcasts</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    feeds: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      selectedFolderId: null,
+      fullPath: null,
+      autoDownloadEpisodes: false,
+      feedMetadata: []
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    title() {
+      return 'OPML Feeds'
+    },
+    currentLibrary() {
+      return this.$store.getters['libraries/getCurrentLibrary']
+    },
+    folders() {
+      if (!this.currentLibrary) return []
+      return this.currentLibrary.folders || []
+    },
+    folderItems() {
+      return this.folders.map((fold) => {
+        return {
+          value: fold.id,
+          text: fold.fullPath
+        }
+      })
+    },
+    selectedFolder() {
+      return this.folders.find((f) => f.id === this.selectedFolderId)
+    },
+    selectedFolderPath() {
+      if (!this.selectedFolder) return ''
+      return this.selectedFolder.fullPath
+    }
+  },
+  methods: {
+    toFeedMetadata(feed) {
+      var metadata = feed.metadata
+      return {
+        title: metadata.title,
+        author: metadata.author,
+        description: metadata.description,
+        releaseDate: '',
+        genres: [...metadata.categories],
+        feedUrl: metadata.feedUrl,
+        imageUrl: metadata.image,
+        itunesPageUrl: '',
+        itunesId: '',
+        itunesArtistId: '',
+        language: '',
+        numEpisodes: feed.numEpisodes
+      }
+    },
+    init() {
+      this.feedMetadata = this.feeds.map(this.toFeedMetadata)
+
+      if (this.folderItems[0]) {
+        this.selectedFolderId = this.folderItems[0].value
+      }
+    },
+    async submit() {
+      this.processing = true
+      var newFeedPayloads = this.feedMetadata.map((metadata) => {
+        return {
+          path: `${this.selectedFolderPath}\\${this.$sanitizeFilename(metadata.title)}`,
+          folderId: this.selectedFolderId,
+          libraryId: this.currentLibrary.id,
+          media: {
+            metadata: {
+              ...metadata
+            },
+            autoDownloadEpisodes: this.autoDownloadEpisodes
+          }
+        }
+      })
+      console.log('New feed payloads', newFeedPayloads)
+
+      for (const podcastPayload of newFeedPayloads) {
+        await this.$axios
+          .$post('/api/podcasts', podcastPayload)
+          .then(() => {
+            this.$toast.success(`${podcastPayload.media.metadata.title}: Podcast created successfully`)
+          })
+          .catch((error) => {
+            var errorMsg = error.response && error.response.data ? error.response.data : 'Failed to create podcast'
+            console.error('Failed to create podcast', podcastPayload, error)
+            this.$toast.error(`${podcastPayload.media.metadata.title}: ${errorMsg}`)
+          })
+      }
+      this.processing = false
+      this.show = false
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style scoped>
+#podcast-wrapper {
+  min-height: 400px;
+  max-height: 80vh;
+}
+#episodes-scroll {
+  max-height: calc(80vh - 200px);
+}
+</style>

client/components/modals/podcast/RemoveEpisode.vue

@@ -0,0 +1,90 @@
+<template>
+  <modals-modal v-model="show" name="podcast-episode-remove-modal" :width="500" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <div ref="wrapper" class="px-8 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
+      <div class="mb-4">
+        <p class="text-lg text-gray-200 mb-4">
+          Are you sure you want to remove episode<br /><span class="text-base">{{ episodeTitle }}</span
+          >?
+        </p>
+        <p class="text-xs font-semibold text-warning text-opacity-90">Note: This does not delete the audio file unless toggling "Hard delete file"</p>
+      </div>
+      <div class="flex justify-between items-center pt-4">
+        <ui-checkbox v-model="hardDeleteFile" label="Hard delete file" check-color="error" checkbox-bg="bg" small label-class="text-base text-gray-200 pl-3" />
+
+        <ui-btn @click="submit">{{ hardDeleteFile ? 'Delete episode' : 'Remove episode' }}</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => {}
+    },
+    episode: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      hardDeleteFile: false,
+      processing: false
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (newVal) this.hardDeleteFile = false
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    title() {
+      return 'Remove Episode'
+    },
+    episodeId() {
+      return this.episode ? this.episode.id : null
+    },
+    episodeTitle() {
+      return this.episode ? this.episode.title : null
+    }
+  },
+  methods: {
+    submit() {
+      this.processing = true
+
+      var queryString = this.hardDeleteFile ? '?hard=1' : ''
+      this.$axios
+        .$delete(`/api/podcasts/${this.libraryItem.id}/episode/${this.episodeId}${queryString}`)
+        .then(() => {
+          this.processing = false
+          this.$toast.success('Podcast episode removed')
+          this.show = false
+        })
+        .catch((error) => {
+          var errorMsg = error.response && error.response.data ? error.response.data : 'Failed remove episode'
+          console.error('Failed update episode', error)
+          this.processing = false
+          this.$toast.error(errorMsg)
+        })
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/podcast/ViewEpisode.vue

@@ -0,0 +1,75 @@
+<template>
+  <modals-modal v-model="show" name="podcast-episode-view-modal" :width="800" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">Episode</p>
+      </div>
+    </template>
+    <div ref="wrapper" class="p-4 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-auto" style="max-height: 80vh">
+      <div class="flex mb-4">
+        <div class="w-12 h-12">
+          <covers-book-cover :library-item="libraryItem" :width="48" :book-cover-aspect-ratio="bookCoverAspectRatio" />
+        </div>
+        <div class="flex-grow px-2">
+          <p class="text-base mb-1">{{ podcastTitle }}</p>
+          <p class="text-xs text-gray-300">{{ podcastAuthor }}</p>
+        </div>
+      </div>
+      <p class="text-lg font-semibold mb-6">{{ title }}</p>
+      <div v-if="description" class="default-style" v-html="description" />
+      <p v-else class="mb-2">No description</p>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      processing: false
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.globals.showViewPodcastEpisodeModal
+      },
+      set(val) {
+        this.$store.commit('globals/setShowViewPodcastEpisodeModal', val)
+      }
+    },
+    libraryItem() {
+      return this.$store.state.selectedLibraryItem
+    },
+    episode() {
+      return this.$store.state.globals.selectedEpisode || {}
+    },
+    episodeId() {
+      return this.episode.id
+    },
+    title() {
+      return this.episode.title || 'No Episode Title'
+    },
+    description() {
+      return this.episode.description || ''
+    },
+    media() {
+      return this.libraryItem ? this.libraryItem.media || {} : {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    podcastTitle() {
+      return this.mediaMetadata.title
+    },
+    podcastAuthor() {
+      return this.mediaMetadata.author
+    },
+    bookCoverAspectRatio() {
+      return this.$store.getters['getBookCoverAspectRatio']
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/modals/rssfeed/ViewModal.vue

@@ -0,0 +1,166 @@
+<template>
+  <modals-modal v-model="show" name="rss-feed-modal" :width="600" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <div ref="wrapper" class="px-8 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
+      <div v-if="currentFeedUrl" class="w-full">
+        <p class="text-lg font-semibold mb-4">Podcast RSS Feed is Open</p>
+
+        <div class="w-full relative">
+          <ui-text-input v-model="currentFeedUrl" readonly />
+
+          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(currentFeedUrl)">content_copy</span>
+        </div>
+      </div>
+      <div v-else class="w-full">
+        <p class="text-lg font-semibold mb-4">Open RSS Feed</p>
+
+        <div class="w-full relative mb-2">
+          <ui-text-input-with-label v-model="newFeedSlug" label="RSS Feed Slug" />
+          <p class="text-xs text-gray-400 py-0.5 px-1">Feed will be {{ demoFeedUrl }}</p>
+        </div>
+
+        <p v-if="isHttp" class="w-full pt-2 text-warning text-xs">Warning: Most podcast apps will require the RSS feed URL is using HTTPS</p>
+        <p v-if="hasEpisodesWithoutPubDate" class="w-full pt-2 text-warning text-xs">Warning: 1 or more of your episodes do not have a Pub Date. Some podcast apps require this.</p>
+      </div>
+      <div v-show="userIsAdminOrUp" class="flex items-center pt-6">
+        <p class="text-xs text-gray-300">Note: RSS feed URLs are not authenticated</p>
+        <div class="flex-grow" />
+        <ui-btn v-if="currentFeedUrl" color="error" small @click="closeFeed">Close RSS Feed</ui-btn>
+        <ui-btn v-else color="success" small @click="openFeed">Open RSS Feed</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    libraryItem: {
+      type: Object,
+      default: () => null
+    },
+    feedUrl: String
+  },
+  data() {
+    return {
+      processing: false,
+      newFeedSlug: null,
+      currentFeedUrl: null
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    libraryItemId() {
+      return this.libraryItem.id
+    },
+    media() {
+      return this.libraryItem.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
+    },
+    title() {
+      return this.mediaMetadata.title
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    demoFeedUrl() {
+      return `${window.origin}/feed/${this.newFeedSlug}`
+    },
+    isHttp() {
+      return window.origin.startsWith('http://')
+    },
+    episodes() {
+      return this.media.episodes || []
+    },
+    hasEpisodesWithoutPubDate() {
+      return this.episodes.some((ep) => !ep.pubDate)
+    }
+  },
+  methods: {
+    openFeed() {
+      if (!this.newFeedSlug) {
+        this.$toast.error('Must set a feed slug')
+        return
+      }
+
+      var sanitized = this.$sanitizeSlug(this.newFeedSlug)
+      if (this.newFeedSlug !== sanitized) {
+        this.newFeedSlug = sanitized
+        this.$toast.warning('Slug had to be modified - Run again')
+        return
+      }
+
+      const payload = {
+        serverAddress: window.origin,
+        slug: this.newFeedSlug
+      }
+      if (this.$isDev) payload.serverAddress = 'http://localhost:3333'
+
+      console.log('Payload', payload)
+      this.$axios
+        .$post(`/api/items/${this.libraryItemId}/open-feed`, payload)
+        .then((data) => {
+          if (data.success) {
+            console.log('Opened RSS Feed', data)
+            this.currentFeedUrl = data.feedUrl
+          } else {
+            const errorMsg = data.error || 'Unknown error'
+            this.$toast.error(errorMsg)
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to open RSS Feed', error)
+          this.$toast.error()
+        })
+    },
+    copyToClipboard(str) {
+      this.$copyToClipboard(str, this)
+    },
+    closeFeed() {
+      this.processing = true
+      this.$axios
+        .$post(`/api/items/${this.libraryItem.id}/close-feed`)
+        .then(() => {
+          this.$toast.success('RSS Feed Closed')
+          this.show = false
+          this.processing = false
+        })
+        .catch((error) => {
+          console.error('Failed to close RSS feed', error)
+          this.processing = false
+          this.$toast.error()
+        })
+    },
+    init() {
+      if (!this.libraryItem) return
+      this.newFeedSlug = this.libraryItem.id
+      this.currentFeedUrl = this.feedUrl
+    }
+  },
+  mounted() {}
+}
+</script>