diff --git a/.github/workflows/component-tests.yml b/.github/workflows/component-tests.yml new file mode 100644 index 00000000..fcc2c213 --- /dev/null +++ b/.github/workflows/component-tests.yml @@ -0,0 +1,48 @@ +name: Run Component Tests + +on: + workflow_dispatch: + inputs: + ref: + description: 'Branch/Tag/SHA to test' + required: true + pull_request: + paths: + - 'client/**' + - '.github/workflows/component-tests.yml' + push: + paths: + - 'client/**' + - '.github/workflows/component-tests.yml' + +jobs: + run-component-tests: + name: Run Component Tests + runs-on: ubuntu-latest + + steps: + - name: Checkout (push/pull request) + uses: actions/checkout@v4 + if: github.event_name != 'workflow_dispatch' + + - name: Checkout (workflow_dispatch) + uses: actions/checkout@v4 + with: + ref: ${{ inputs.ref }} + if: github.event_name == 'workflow_dispatch' + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: 'npm' + + - name: Install dependencies + run: | + cd client + npm ci + + - name: Run tests + run: | + cd client + npm test diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml index f93853f9..fdb57fbc 100644 --- a/.github/workflows/docker-build.yml +++ b/.github/workflows/docker-build.yml @@ -23,7 +23,7 @@ on: jobs: build: if: ${{ !contains(github.event.head_commit.message, 'skip ci') && github.repository == 'advplyr/audiobookshelf' }} - runs-on: ubuntu-20.04 + runs-on: ubuntu-24.04 steps: - name: Check out diff --git a/.gitignore b/.gitignore index d375bae0..12ebec1c 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ sw.* .DS_STORE .idea/* tailwind.compiled.css +tailwind.config.js diff --git a/Dockerfile b/Dockerfile index 4e110a61..816bdd3c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,34 +1,32 @@ +ARG NUSQLITE3_DIR="/usr/local/lib/nusqlite3" +ARG NUSQLITE3_PATH="${NUSQLITE3_DIR}/libnusqlite3.so" + ### STAGE 0: Build client ### -FROM node:20-alpine AS build +FROM node:20-alpine AS build-client + WORKDIR /client COPY /client /client RUN npm ci && npm cache clean --force RUN npm run generate ### STAGE 1: Build server ### -FROM node:20-alpine +FROM node:20-alpine AS build-server + +ARG NUSQLITE3_DIR +ARG TARGETPLATFORM ENV NODE_ENV=production -RUN apk update && \ - apk add --no-cache --update \ +RUN apk add --no-cache --update \ curl \ - tzdata \ - ffmpeg \ make \ python3 \ g++ \ - tini \ unzip -COPY --from=build /client/dist /client/dist -COPY index.js package* / -COPY server server - -ARG TARGETPLATFORM - -ENV NUSQLITE3_DIR="/usr/local/lib/nusqlite3" -ENV NUSQLITE3_PATH="${NUSQLITE3_DIR}/libnusqlite3.so" +WORKDIR /server +COPY index.js package* /server +COPY /server /server/server RUN case "$TARGETPLATFORM" in \ "linux/amd64") \ @@ -42,14 +40,34 @@ RUN case "$TARGETPLATFORM" in \ RUN npm ci --only=production -RUN apk del make python3 g++ +### STAGE 2: Create minimal runtime image ### +FROM node:20-alpine + +ARG NUSQLITE3_DIR +ARG NUSQLITE3_PATH + +# Install only runtime dependencies +RUN apk add --no-cache --update \ + tzdata \ + ffmpeg \ + tini + +WORKDIR /app + +# Copy compiled frontend and server from build stages +COPY --from=build-client /client/dist /app/client/dist +COPY --from=build-server /server /app +COPY --from=build-server ${NUSQLITE3_PATH} ${NUSQLITE3_PATH} EXPOSE 80 ENV PORT=80 +ENV NODE_ENV=production ENV CONFIG_PATH="/config" ENV METADATA_PATH="/metadata" ENV SOURCE="docker" +ENV NUSQLITE3_DIR=${NUSQLITE3_DIR} +ENV NUSQLITE3_PATH=${NUSQLITE3_PATH} ENTRYPOINT ["tini", "--"] CMD ["node", "index.js"] diff --git a/client/assets/tailwind.css b/client/assets/tailwind.css index bd6213e1..7883f32f 100644 --- a/client/assets/tailwind.css +++ b/client/assets/tailwind.css @@ -1,3 +1,85 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; \ No newline at end of file +@import 'tailwindcss'; + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } + + [role='button'], + button { + cursor: pointer; + } +} + +@theme { + --spacing-0\.5e: 0.125em; + --spacing-1e: 0.25em; + --spacing-1\.5e: 0.375em; + --spacing-2e: 0.5em; + --spacing-2\.5e: 0.625em; + --spacing-3e: 0.75em; + --spacing-3\.5e: 0.875em; + --spacing-4e: 1em; + --spacing-5e: 1.25em; + --spacing-6e: 1.5em; + --spacing-7e: 1.75em; + --spacing-8e: 2em; + --spacing-9e: 2.25em; + --spacing-10e: 2.5em; + --spacing-11e: 2.75em; + --spacing-12e: 3em; + --spacing-14e: 3.5em; + --spacing-16e: 4em; + --spacing-20e: 5em; + --spacing-24e: 6em; + --spacing-28e: 7em; + --spacing-32e: 8em; + --spacing-36e: 9em; + --spacing-40e: 10em; + --spacing-44e: 11em; + --spacing-48e: 12em; + --spacing-52e: 13em; + --spacing-56e: 14em; + --spacing-60e: 15em; + --spacing-64e: 16em; + --spacing-72e: 18em; + --spacing-80e: 20em; + --spacing-96e: 24em; + + --color-bg: #373838; + --color-primary: #232323; + --color-accent: #1ad691; + --color-error: #ff5252; + --color-info: #2196f3; + --color-success: #4caf50; + --color-warning: #fb8c00; + --color-darkgreen: rgb(34, 127, 35); + --color-black-50: #bbbbbb; + --color-black-100: #666666; + --color-black-200: #555555; + --color-black-300: #444444; + --color-black-400: #333333; + --color-black-500: #222222; + --color-black-600: #111111; + --color-black-700: #101010; + + --font-sans: 'Source Sans Pro'; + --font-mono: 'Ubuntu Mono'; + + --text-xxs: 0.625rem; + --text-1\.5xl: 1.375rem; + --text-2\.5xl: 1.6875rem; + --text-4\.5xl: 2.625rem; +} diff --git a/client/components/app/Appbar.vue b/client/components/app/Appbar.vue index bb452526..f7413404 100644 --- a/client/components/app/Appbar.vue +++ b/client/components/app/Appbar.vue @@ -13,10 +13,10 @@ -
+
- cast + cast
@@ -42,7 +42,7 @@ - + @@ -53,8 +53,8 @@

{{ $getString('MessageItemsSelected', [numMediaItemsSelected]) }}

-
- +
+ play_arrow {{ $strings.ButtonPlay }} @@ -66,11 +66,11 @@ - + @@ -180,6 +180,15 @@ export default { action: 'rescan' }) + // The limit of 50 is introduced because of the URL length. Each id has 36 chars, so 36 * 40 = 1440 + // + 40 , separators = 1480 chars + base path 280 chars = 1760 chars. This keeps the URL under 2000 chars even with longer domains + if (this.selectedMediaItems.length <= 40) { + options.push({ + text: this.$strings.LabelDownload, + action: 'download' + }) + } + return options } }, @@ -215,6 +224,8 @@ export default { this.batchAutoMatchClick() } else if (action === 'rescan') { this.batchRescan() + } else if (action === 'download') { + this.batchDownload() } }, async batchRescan() { @@ -241,6 +252,11 @@ export default { } this.$store.commit('globals/setConfirmPrompt', payload) }, + async batchDownload() { + const libraryItemIds = this.selectedMediaItems.map((i) => i.id) + console.log('Downloading library items', libraryItemIds) + this.$downloadFile(`/api/libraries/${this.$store.state.libraries.currentLibraryId}/download?token=${this.$store.getters['user/getToken']}&ids=${libraryItemIds.join(',')}`) + }, async playSelectedItems() { this.$store.commit('setProcessingBatch', true) diff --git a/client/components/app/BookShelfCategorized.vue b/client/components/app/BookShelfCategorized.vue index 94b2e4ba..4bf8cfbb 100644 --- a/client/components/app/BookShelfCategorized.vue +++ b/client/components/app/BookShelfCategorized.vue @@ -6,8 +6,8 @@

{{ $getString('MessageXLibraryIsEmpty', [libraryName]) }}

- {{ $strings.ButtonConfigureScanner }} - {{ $strings.ButtonScanLibrary }} + {{ $strings.ButtonConfigureScanner }} + {{ $strings.ButtonScanLibrary }}
@@ -217,6 +217,16 @@ export default { }) } + if (this.results.episodes?.length) { + shelves.push({ + id: 'episodes', + label: 'Episodes', + labelStringKey: 'LabelEpisodes', + type: 'episode', + entities: this.results.episodes.map((res) => res.libraryItem) + }) + } + if (this.results.series?.length) { shelves.push({ id: 'series', diff --git a/client/components/app/BookShelfRow.vue b/client/components/app/BookShelfRow.vue index 97d64d86..082f9fe3 100644 --- a/client/components/app/BookShelfRow.vue +++ b/client/components/app/BookShelfRow.vue @@ -36,7 +36,7 @@
-
+

{{ $strings[shelf.labelStringKey] }}

diff --git a/client/components/app/BookShelfToolbar.vue b/client/components/app/BookShelfToolbar.vue index 74157b18..95e7c378 100644 --- a/client/components/app/BookShelfToolbar.vue +++ b/client/components/app/BookShelfToolbar.vue @@ -1,36 +1,36 @@