Compare commits

..

No commits in common. "e87825f8df3d208d237f15c795b977feec4effa4" and "7f3421f78ac47d2eb5f95f2536c7aec92ecb40a3" have entirely different histories.

11 changed files with 19 additions and 85 deletions

View file

@ -1,48 +0,0 @@
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

View file

@ -223,7 +223,8 @@ export default {
return this.mediaMetadata.explicit || false
},
placeholderUrl() {
return this.store.getters['globals/getPlaceholderCoverSrc']
const config = this.$config || this.$nuxt.$config
return `${config.routerBasePath}/book_placeholder.jpg`
},
bookCoverSrc() {
return this.store.getters['globals/getLibraryItemCoverSrc'](this._libraryItem, this.placeholderUrl)

View file

@ -96,8 +96,8 @@ export default {
return this.author
},
placeholderUrl() {
const store = this.$store || this.$nuxt.$store
return store.getters['globals/getPlaceholderCoverSrc']
const config = this.$config || this.$nuxt.$config
return `${config.routerBasePath}/book_placeholder.jpg`
},
fullCoverUrl() {
if (!this.libraryItem) return null

View file

@ -18,7 +18,7 @@
</div>
</div>
<p v-if="!imageFailed && showResolution && resolution" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
<p v-if="!imageFailed && showResolution" class="absolute -bottom-5 left-0 right-0 mx-auto text-xs text-gray-300 text-center">{{ resolution }}</p>
</div>
</template>
@ -65,12 +65,11 @@ export default {
return 0.8 * this.sizeMultiplier
},
resolution() {
if (!this.naturalWidth || !this.naturalHeight) return null
return `${this.naturalWidth}×${this.naturalHeight}px`
},
placeholderUrl() {
const store = this.$store || this.$nuxt.$store
return store.getters['globals/getPlaceholderCoverSrc']
const config = this.$config || this.$nuxt.$config
return `${config.routerBasePath}/book_placeholder.jpg`
}
},
methods: {

View file

@ -2,7 +2,7 @@
<div class="w-full h-full overflow-hidden overflow-y-auto px-2 sm:px-4 py-6 relative">
<div class="flex flex-col sm:flex-row mb-4">
<div class="relative self-center md:self-start">
<covers-preview-cover :src="coverUrl" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
<covers-preview-cover :src="$store.getters['globals/getLibraryItemCoverSrcById'](libraryItemId, libraryItemUpdatedAt, true)" :width="120" :book-cover-aspect-ratio="bookCoverAspectRatio" />
<!-- book cover overlay -->
<div v-if="media.coverPath" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
@ -157,12 +157,6 @@ export default {
coverPath() {
return this.media.coverPath
},
coverUrl() {
if (!this.coverPath) {
return this.$store.getters['globals/getPlaceholderCoverSrc']
}
return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.libraryItemId, this.libraryItemUpdatedAt, true)
},
mediaMetadata() {
return this.media.metadata || {}
},

View file

@ -55,7 +55,7 @@ export default {
return this.item.coverPath
},
coverUrl() {
if (!this.coverPath) return this.$store.getters['globals/getPlaceholderCoverSrc']
if (!this.coverPath) return `${this.$config.routerBasePath}/book_placeholder.jpg`
return this.$store.getters['globals/getLibraryItemCoverSrcById'](this.libraryItemId)
},
bookCoverAspectRatio() {

View file

@ -19,9 +19,7 @@ describe('AuthorCard', () => {
const mocks = {
$strings: {
LabelBooks: 'Books',
ButtonQuickMatch: 'Quick Match',
ToastAuthorUpdateSuccess: 'Author updated',
ToastAuthorUpdateSuccessNoImageFound: 'Author updated (no image found)'
ButtonQuickMatch: 'Quick Match'
},
$store: {
getters: {
@ -169,7 +167,7 @@ describe('AuthorCard', () => {
cy.get('&match').click()
cy.get('&spinner').should('be.hidden')
cy.get('@success').should('have.been.calledOnceWithExactly', 'Author updated (no image found)')
cy.get('@success').should('have.been.calledOnceWithExactly', 'Author John Doe was updated (no image found)')
cy.get('@error').should('not.have.been.called')
cy.get('@info').should('not.have.been.called')
})
@ -191,7 +189,7 @@ describe('AuthorCard', () => {
cy.get('&match').click()
cy.get('&spinner').should('be.hidden')
cy.get('@success').should('have.been.calledOnceWithExactly', 'Author updated')
cy.get('@success').should('have.been.calledOnceWithExactly', 'Author John Doe was updated')
cy.get('@error').should('not.have.been.called')
cy.get('@info').should('not.have.been.called')
})

View file

@ -172,7 +172,6 @@ describe('LazyBookCard', () => {
})
it('shows titleImageNotReady and sets opacity 0 on coverImage when image not ready', () => {
mountOptions.mocks.$store.getters['globals/getLibraryItemCoverSrc'] = () => 'https://my.server.com/notfound.jpg'
cy.mount(LazyBookCard, mountOptions)
cy.get('&titleImageNotReady').should('be.visible')
@ -258,7 +257,7 @@ describe('LazyBookCard', () => {
cy.get('#book-card-0').trigger('mouseover')
cy.get('&titleImageNotReady').should('be.hidden')
cy.get('&seriesNameOverlay').should('be.visible').and('have.text', 'The Lord of the Rings')
cy.get('&seriesNameOverlay').should('be.visible').and('have.text', 'Middle Earth Chronicles')
})
it('shows the seriesSequenceList when collapsed series has a sequence list', () => {

View file

@ -30,14 +30,6 @@ describe('LazySeriesCard', () => {
}
const mocks = {
$getString: (id, args) => {
switch (id) {
case 'LabelAddedDate':
return `Added ${args[0]}`
default:
return null
}
},
$store: {
getters: {
'user/getUserCanUpdate': true,

View file

@ -64,7 +64,7 @@ export default {
return this.mediaItemShare.playbackSession
},
coverUrl() {
if (!this.playbackSession.coverPath) return this.$store.getters['globals/getPlaceholderCoverSrc']
if (!this.playbackSession.coverPath) return `${this.$config.routerBasePath}/book_placeholder.jpg`
return `${this.$config.routerBasePath}/public/share/${this.mediaItemShare.slug}/cover`
},
downloadUrl() {

View file

@ -87,7 +87,7 @@ export const getters = {
getLibraryItemCoverSrc:
(state, getters, rootState, rootGetters) =>
(libraryItem, placeholder = null, raw = false) => {
if (!placeholder) placeholder = getters.getPlaceholderCoverSrc
if (!placeholder) placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
if (!libraryItem) return placeholder
const media = libraryItem.media
if (!media?.coverPath || media.coverPath === placeholder) return placeholder
@ -95,6 +95,7 @@ export const getters = {
// Absolute URL covers (should no longer be used)
if (media.coverPath.startsWith('http:') || media.coverPath.startsWith('https:')) return media.coverPath
const userToken = rootGetters['user/getToken']
const lastUpdate = libraryItem.updatedAt || Date.now()
const libraryItemId = libraryItem.libraryItemId || libraryItem.id // Workaround for /users/:id page showing media progress covers
return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?ts=${lastUpdate}${raw ? '&raw=1' : ''}`
@ -102,13 +103,11 @@ export const getters = {
getLibraryItemCoverSrcById:
(state, getters, rootState, rootGetters) =>
(libraryItemId, timestamp = null, raw = false) => {
if (!libraryItemId) return getters.getPlaceholderCoverSrc
const placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
if (!libraryItemId) return placeholder
const userToken = rootGetters['user/getToken']
return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?${raw ? '&raw=1' : ''}${timestamp ? `&ts=${timestamp}` : ''}`
},
getPlaceholderCoverSrc: (state, getters, rootState, rootGetters) => {
return `${rootState.routerBasePath}/book_placeholder.jpg`
},
getIsBatchSelectingMediaItems: (state) => {
return state.selectedMediaItems.length
}