Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-01-22 00:07:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3842 from mikiher/dynamic-episode-row-height

Browse Source 
Dynamically calculate episode row height on LazyEpisodeTable init
This commit is contained in:
advplyr 2025-01-15 13:47:56 -06:00 committed by GitHub
commit 6057930507
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/components/tables/podcast/LazyEpisodesTable.vue
View File

@ -30,7 +30,7 @@
<ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" /> <ui-text-input v-model="search" @input="inputUpdate" type="search" :placeholder="$strings.PlaceholderSearchEpisode" class="flex-grow mr-2 text-sm md:text-base" />
</form> </form>
</div> </div>
<div class="relative min-h-[176px]"> <div class="relative min-h-44">
<template v-for="episode in totalEpisodes"> <template v-for="episode in totalEpisodes">
<div :key="episode" :id="`episode-${episode - 1}`" class="w-full h-44 px-2 py-3 overflow-hidden relative border-b border-white/10"> <div :key="episode" :id="`episode-${episode - 1}`" class="w-full h-44 px-2 py-3 overflow-hidden relative border-b border-white/10">
<!-- episode is mounted here --> <!-- episode is mounted here -->
@ -39,7 +39,7 @@
<div v-if="isSearching" class="w-full h-full absolute inset-0 flex justify-center py-12" :class="{ 'bg-black/50': totalEpisodes }"> <div v-if="isSearching" class="w-full h-full absolute inset-0 flex justify-center py-12" :class="{ 'bg-black/50': totalEpisodes }">
<ui-loading-indicator /> <ui-loading-indicator />
</div> </div>
<div v-else-if="!totalEpisodes" class="h-44 flex items-center justify-center"> <div v-else-if="!totalEpisodes" id="no-episodes" class="h-44 flex items-center justify-center">
<p class="text-lg">{{ $strings.MessageNoEpisodes }}</p> <p class="text-lg">{{ $strings.MessageNoEpisodes }}</p>
</div> </div>
</div> </div>
@ -80,7 +80,7 @@ export default {
episodeComponentRefs: {}, episodeComponentRefs: {},
windowHeight: 0, windowHeight: 0,
episodesTableOffsetTop: 0, episodesTableOffsetTop: 0,
episodeRowHeight: 176, episodeRowHeight: 44 * 4, // h-44,
currScrollTop: 0 currScrollTop: 0
} }
}, },
@ -538,9 +538,10 @@ export default {
this.episodesTableOffsetTop = (lazyEpisodesTableEl?.offsetTop || 0) + 64 this.episodesTableOffsetTop = (lazyEpisodesTableEl?.offsetTop || 0) + 64
this.windowHeight = window.innerHeight this.windowHeight = window.innerHeight
this.episodesPerPage = Math.ceil(this.windowHeight / this.episodeRowHeight)
this.$nextTick(() => { this.$nextTick(() => {
this.recalcEpisodeRowHeight()
this.episodesPerPage = Math.ceil(this.windowHeight / this.episodeRowHeight)
// Maybe update currScrollTop if items were removed // Maybe update currScrollTop if items were removed
const itemPageWrapper = document.getElementById('item-page-wrapper') const itemPageWrapper = document.getElementById('item-page-wrapper')
const { scrollHeight, clientHeight } = itemPageWrapper const { scrollHeight, clientHeight } = itemPageWrapper
@ -548,6 +549,13 @@ export default {
this.currScrollTop = Math.min(this.currScrollTop, maxScrollTop) this.currScrollTop = Math.min(this.currScrollTop, maxScrollTop)
this.handleScroll() this.handleScroll()
}) })
},
recalcEpisodeRowHeight() {
const episodeRowEl = document.getElementById('episode-0') || document.getElementById('no-episodes')
if (episodeRowEl) {
const height = getComputedStyle(episodeRowEl).height
this.episodeRowHeight = parseInt(height) || this.episodeRowHeight
}
} }
}, },
mounted() { mounted() {