Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-28 06:50:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: auto-hide controls in fullscreen mode

Browse source
This commit is contained in:
Phan An 2023-12-22 15:53:29 +01:00
parent 3650bc1fd9
commit a9f1e629e8
1 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
resources/assets/js/components/layout/app-footer/index.vue
View file

@ -1,5 +1,10 @@
<template>
<footer id="mainFooter" ref="root" @contextmenu.prevent="requestContextMenu">
<footer
id="mainFooter"
ref="root"
@contextmenu.prevent="requestContextMenu"
@mousemove="showControls"
>
<AudioPlayer v-show="song" />
<div class="fullscreen-backdrop" :style="styles" />
@ -13,6 +18,7 @@
</template>
<script lang="ts" setup>
import { throttle } from 'lodash'
import { computed, nextTick, ref, watch } from 'vue'
import { eventBus, isAudioContextSupported, requireInjection } from '@/utils'
import { CurrentSongKey } from '@/symbols'
@ -25,11 +31,13 @@ import ExtraControls from '@/components/layout/app-footer/FooterExtraControls.vu
import PlaybackControls from '@/components/layout/app-footer/FooterPlaybackControls.vue'
const song = requireInjection(CurrentSongKey, ref())
let hideControlsTimeout: number
const root = ref<HTMLElement>()
const artist = ref<Artist>()
const requestContextMenu = (event: MouseEvent) => {
if (document.fullscreenElement) return
song.value && eventBus.emit('SONG_CONTEXT_MENU_REQUESTED', event, song.value)
}
@ -66,11 +74,25 @@ watch(preferenceStore.initialized, async initialized => {
await initPlaybackRelatedServices()
}, { immediate: true })
const setupControlHidingTimer = () => {
hideControlsTimeout = window.setTimeout(() => root.value?.classList.add('hide-controls'), 5000)
}
const showControls = throttle(() => {
if (!document.fullscreenElement) return
root.value?.classList.remove('hide-controls')
window.clearTimeout(hideControlsTimeout)
setupControlHidingTimer()
}, 100)
eventBus.on('FULLSCREEN_TOGGLE', () => {
if (document.fullscreenElement) {
document.exitFullscreen()
root.value?.classList.remove('hide-controls')
} else {
root.value?.requestFullscreen()
setupControlHidingTimer()
}
})
</script>
@ -100,6 +122,11 @@ footer {
padding: calc(100vh - 9rem) 5vw 0;
background: none;
&.hide-controls :not(.fullscreen-backdrop) {
transition: opacity 2s ease-in-out;
opacity: 0;
}
.wrapper {
z-index: 3;
}