mkelvers/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: auto-hide player controls in fullscreen

Browse Source
This commit is contained in:
mkelvers
2026-05-08 09:45:57 +02:00
parent 334b05c6e0
commit af38636759
3 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
static/player.ts
View File

@@ -118,6 +118,7 @@ const initPlayer = (): void => {
let completionSent = false
let completionAttempts = 0
let playerControlsTimeout: number | undefined
let isFullscreen = false
let isScrubbing = false
let lastKnownVolume = 1
let pendingSeekTime: number | null = null
@@ -1310,6 +1311,12 @@ const initPlayer = (): void => {
updateSkipButton(video.currentTime)
})
document.addEventListener('fullscreenchange', () => {
isFullscreen = !!document.fullscreenElement
container.classList.toggle('fullscreen', isFullscreen)
if (isFullscreen) showControls()
})
container.addEventListener('mousemove', showControls)
document.addEventListener('keydown', (event) => {

17
static/style.css
View File

@@ -113,3 +113,20 @@ body {
scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}
}
.show-controls [data-video-overlay] {
opacity: 1;
}
[data-video-player].fullscreen:not(.show-controls) [data-video-overlay] {
opacity: 0 !important;
pointer-events: none;
}
[data-video-player].fullscreen:not(.show-controls) {
cursor: none;
}
[data-video-player].fullscreen:not(.show-controls) video {
cursor: none;
}

2
templates/components/video_player.gohtml
View File

@@ -118,8 +118,8 @@
<button data-backward class="hidden absolute left-1/4 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-black/40 rounded-full text-white opacity-0 transition-opacity"><svg class="size-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z" /></svg></button>
<button data-forward class="hidden absolute right-1/4 top-1/2 -translate-y-1/2 translate-x-1/2 p-4 bg-black/40 rounded-full text-white opacity-0 transition-opacity"><svg class="size-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z" /></svg></button>
<div data-subtitle-text class="absolute bottom-20 left-0 right-0 text-center pointer-events-none drop-shadow-md z-30" style="text-shadow: 0px 0px 4px black, 0px 0px 8px black; font-size: clamp(1rem, 2.5vw, 2rem); font-weight: 600; color: white;"></div>
</div>
</div>
<div data-subtitle-text class="absolute bottom-20 left-0 right-0 text-center pointer-events-none drop-shadow-md z-30" style="text-shadow: 0px 0px 4px black, 0px 0px 8px black; font-size: clamp(1rem, 2.5vw, 2rem); font-weight: 600; color: white;"></div>
</div>
{{end}}