mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-07-12 15:04:43 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Fix:Cover image for 1:1.6 covers in collapsed audio player #474

Browse source
This commit is contained in:
advplyr 2023-01-08 13:50:18 -06:00
parent 83fdf4fd65
commit 34b3910ff8
2 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/app/AudioPlayer.vue
View file

@ -29,7 +29,7 @@
</div> </div>
<div class="cover-wrapper absolute z-30 pointer-events-auto" @click="clickContainer"> <div class="cover-wrapper absolute z-30 pointer-events-auto" @click="clickContainer">
<div class="cover-container bookCoverWrapper bg-black bg-opacity-75 w-full h-full"> <div class="cover-container bookCoverWrapper w-full h-full flex justify-center">
<covers-book-cover v-if="libraryItem || localLibraryItemCoverSrc" :library-item="libraryItem" :download-cover="localLibraryItemCoverSrc" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" /> <covers-book-cover v-if="libraryItem || localLibraryItemCoverSrc" :library-item="libraryItem" :download-cover="localLibraryItemCoverSrc" :width="bookCoverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" />
</div> </div>
@ -170,6 +170,9 @@ export default {
showFullscreen(val) { showFullscreen(val) {
this.updateScreenSize() this.updateScreenSize()
this.$store.commit('setPlayerFullscreen', !!val) this.$store.commit('setPlayerFullscreen', !!val)
},
bookCoverAspectRatio() {
this.updateScreenSize()
} }
}, },
computed: { computed: {
@ -786,8 +789,12 @@ export default {
this.windowHeight = window.innerHeight this.windowHeight = window.innerHeight
this.windowWidth = window.innerWidth this.windowWidth = window.innerWidth
const coverHeight = this.fullscreenBookCoverWidth * this.bookCoverAspectRatio const coverHeight = this.fullscreenBookCoverWidth * this.bookCoverAspectRatio
const coverImageWidthCollapsed = 46 / this.bookCoverAspectRatio
document.documentElement.style.setProperty('--cover-image-width', this.fullscreenBookCoverWidth + 'px') document.documentElement.style.setProperty('--cover-image-width', this.fullscreenBookCoverWidth + 'px')
document.documentElement.style.setProperty('--cover-image-height', coverHeight + 'px') document.documentElement.style.setProperty('--cover-image-height', coverHeight + 'px')
document.documentElement.style.setProperty('--cover-image-width-collapsed', coverImageWidthCollapsed + 'px')
document.documentElement.style.setProperty('--cover-image-height-collapsed', 46 + 'px')
document.documentElement.style.setProperty('--title-author-left-offset-collapsed', 24 + coverImageWidthCollapsed + 'px')
}, },
minimizePlayerEvt() { minimizePlayerEvt() {
this.showFullscreen = false this.showFullscreen = false
@ -853,6 +860,7 @@ export default {
--cover-image-height: 0px; --cover-image-height: 0px;
--cover-image-width-collapsed: 46px; --cover-image-width-collapsed: 46px;
--cover-image-height-collapsed: 46px; --cover-image-height-collapsed: 46px;
--title-author-left-offset-collapsed: 70px;
} }
.bookCoverWrapper { .bookCoverWrapper {
box-shadow: 3px -2px 5px #00000066; box-shadow: 3px -2px 5px #00000066;
@ -904,7 +912,7 @@ export default {
width: 40%; width: 40%;
bottom: 56px; bottom: 56px;
left: 70px; left: var(--title-author-left-offset-collapsed);
text-align: left; text-align: left;
} }
.title-author-texts .title-text { .title-author-texts .title-text {

4
store/libraries.js
View file

@ -15,11 +15,11 @@ export const getters = {
return state.libraries.find(lib => lib.id === state.currentLibraryId) return state.libraries.find(lib => lib.id === state.currentLibraryId)
}, },
getCurrentLibraryName: (state, getters) => { getCurrentLibraryName: (state, getters) => {
var currLib = getters.getCurrentLibrary const currLib = getters.getCurrentLibrary
return currLib ? currLib.name : null return currLib ? currLib.name : null
}, },
getCurrentLibraryMediaType: (state, getters) => { getCurrentLibraryMediaType: (state, getters) => {
var currLib = getters.getCurrentLibrary const currLib = getters.getCurrentLibrary
return currLib ? currLib.mediaType : null return currLib ? currLib.mediaType : null
}, },
getCurrentLibrarySettings: (state, getters) => { getCurrentLibrarySettings: (state, getters) => {