Update jump label to only show on fullscreen audio player

This commit is contained in:
advplyr
2026-01-29 17:08:12 -06:00
parent f548163689
commit f63b04451b
2 changed files with 8 additions and 38 deletions
+7 -23
View File
@@ -70,14 +70,9 @@
<div id="playerControls" class="absolute right-0 bottom-0 mx-auto" style="max-width: 414px">
<div class="flex items-center max-w-full" :class="playerSettings.lockUi ? 'justify-center' : 'justify-between'">
<span v-show="showFullscreen && !playerSettings.lockUi" class="material-symbols next-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
<div
v-show="!playerSettings.lockUi"
class="jump-icon text-fg cursor-pointer flex flex-col items-center"
:class="isLoading ? 'text-opacity-10' : 'text-opacity-75'"
@click.stop="jumpBackwards"
>
<span class="material-symbols text-3xl leading-none">{{ jumpBackwardsItem.icon }}</span>
<span class="jump-label text-[10px] font-semibold leading-tight">{{ jumpBackwardsLabel }}</span>
<div v-show="!playerSettings.lockUi" class="jump-icon text-fg cursor-pointer flex flex-col items-center" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">
<span class="material-symbols text-3xl leading-none">replay</span>
<span v-if="showFullscreen" class="jump-label text-[10px] font-semibold leading-tight">{{ jumpBackwardsLabel }}</span>
</div>
<div class="play-btn cursor-pointer shadow-sm flex items-center justify-center rounded-full text-primary mx-4 relative overflow-hidden" :style="{ backgroundColor: coverRgb }" :class="{ 'animate-spin': seekLoading }" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
<div v-if="!coverBgIsLight" class="absolute top-0 left-0 w-full h-full bg-white bg-opacity-20 pointer-events-none" />
@@ -85,14 +80,9 @@
<span v-if="!isLoading" class="material-symbols fill" :class="{ 'text-white': coverRgb && !coverBgIsLight }">{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}</span>
<widgets-spinner-icon v-else class="h-8 w-8" />
</div>
<div
v-show="!playerSettings.lockUi"
class="jump-icon text-fg cursor-pointer flex flex-col items-center"
:class="isLoading ? 'text-opacity-10' : 'text-opacity-75'"
@click.stop="jumpForward"
>
<span class="material-symbols text-3xl leading-none">{{ jumpForwardItem.icon }}</span>
<span class="jump-label text-[10px] font-semibold leading-tight">{{ jumpForwardLabel }}</span>
<div v-show="!playerSettings.lockUi" class="jump-icon text-fg cursor-pointer flex flex-col items-center" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">
<span class="material-symbols text-3xl leading-none">forward_media</span>
<span v-if="showFullscreen" class="jump-label text-[10px] font-semibold leading-tight">{{ jumpForwardLabel }}</span>
</div>
<span v-show="showFullscreen && !playerSettings.lockUi" class="material-symbols next-icon text-fg cursor-pointer" :class="nextChapter && !isLoading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
</div>
@@ -239,12 +229,6 @@ export default {
return items
},
jumpForwardItem() {
return this.$store.getters['globals/getJumpForwardItem'](this.jumpForwardTime)
},
jumpBackwardsItem() {
return this.$store.getters['globals/getJumpBackwardsItem'](this.jumpBackwardsTime)
},
jumpForwardLabel() {
return this.getJumpLabel(this.jumpForwardTime)
},
@@ -967,7 +951,7 @@ export default {
},
showProgressSyncSuccess() {
this.syncStatus = this.$constants.SyncStatus.SUCCESS
},
}
},
mounted() {
this.updateScreenSize()
+1 -15
View File
@@ -143,21 +143,7 @@ export const getters = {
if (episodeId != null && lmp.episodeId != episodeId) return false
return lmp.libraryItemId == libraryItemId
})
},
getJumpForwardIcon: (state) => (jumpForwardTime) => {
const item = state.jumpForwardItems.find((i) => i.value == jumpForwardTime)
return item ? item.icon : 'forward_10'
},
getJumpBackwardsIcon: (state) => (jumpBackwardsTime) => {
const item = state.jumpBackwardsItems.find((i) => i.value == jumpBackwardsTime)
return item ? item.icon : 'replay_10'
},
getJumpForwardItem: (state) => (jumpForwardTime) => {
return state.jumpForwardItems.find((i) => i.value == jumpForwardTime) || state.jumpForwardItems[1]
},
getJumpBackwardsItem: (state) => (jumpBackwardsTime) => {
return state.jumpBackwardsItems.find((i) => i.value == jumpBackwardsTime) || state.jumpBackwardsItems[1]
}
}
}
export const actions = {