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

player: remove theater mode, hide empty subtitle/quality selectors

Browse Source
This commit is contained in:
mkelvers
2026-05-06 14:15:52 +02:00
parent d5ee434d8e
commit d848a2f31a
2 changed files with 12 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
static/player.ts
View File

@@ -84,7 +84,6 @@ const initPlayer = (): void => {
const backwardBtn = container.querySelector('[data-backward]') as HTMLButtonElement
const forwardBtn = container.querySelector('[data-forward]') as HTMLButtonElement
const fullscreenBtn = container.querySelector('[data-fullscreen]') as HTMLButtonElement
const theaterBtn = container.querySelector('[data-theater]') as HTMLButtonElement
const skipSegmentBtn = container.querySelector('[data-skip]') as HTMLButtonElement
const autoplayBtn = document.querySelector('[data-autoplay]') as HTMLButtonElement
const subtitleText = container.querySelector('[data-subtitle-text]') as HTMLElement
@@ -186,7 +185,6 @@ const initPlayer = (): void => {
const isAutoplayEnabled = (): boolean => localStorage.getItem('mal:autoplay-enabled') !== 'false'
const isAutoSkipEnabled = (): boolean => localStorage.getItem('mal:autoskip-enabled') === 'true'
const isTheaterMode = (): boolean => localStorage.getItem('mal:theater-mode') === 'true'
const getPreferredQuality = (): string => localStorage.getItem('mal:preferred-quality') || 'best'
const updateAutoplayButton = (): void => {
@@ -664,7 +662,10 @@ const initPlayer = (): void => {
option.textContent = track.label
subtitleSelect.appendChild(option)
})
subtitleSelect.style.display = currentSubtitleTracks.length > 0 ? 'block' : 'none'
const wrapper = subtitleSelect.parentElement
if (wrapper) {
wrapper.classList.toggle('hidden', currentSubtitleTracks.length === 0)
}
activeSubtitles = []
hideSubtitleText()
}
@@ -694,7 +695,10 @@ const initPlayer = (): void => {
qualitySelect.value = 'best'
}
qualitySelect.style.display = qualities.length > 0 ? 'block' : 'none'
const wrapper = qualitySelect.parentElement
if (wrapper) {
wrapper.classList.toggle('hidden', qualities.length === 0)
}
}
const modeDub = container.querySelector('[data-mode-dub]') as HTMLButtonElement
@@ -817,25 +821,6 @@ const initPlayer = (): void => {
}
}
const toggleTheaterMode = (): void => {
const layout = document.getElementById('watch-layout')
if (!layout) return
const enabled = !isTheaterMode()
localStorage.setItem('mal:theater-mode', enabled ? 'true' : 'false')
if (enabled) {
layout.classList.remove('lg:flex-row')
layout.classList.add('lg:flex-col')
} else {
layout.classList.add('lg:flex-row')
layout.classList.remove('lg:flex-col')
}
// Smooth scroll back to player
container.scrollIntoView({ behavior: 'smooth' })
}
const switchQuality = (quality: string): void => {
const nextURL = streamUrlForMode(currentMode, quality)
if (!nextURL) return
@@ -1173,11 +1158,6 @@ const initPlayer = (): void => {
showControls()
})
theaterBtn?.addEventListener('click', () => {
toggleTheaterMode()
showControls()
})
skipSegmentBtn?.addEventListener('click', () => {
if (!activeSkipSegment) return
@@ -1351,13 +1331,6 @@ const initPlayer = (): void => {
showControls()
}
// KeyT: Toggle Theater Mode
if (code === 'KeyT') {
event.preventDefault()
toggleTheaterMode()
showControls()
}
// Numbers 0-9: Jump to percentage (0% to 90%)
if (/^\d$/.test(key)) {
const bounds = timelineBounds()

12
templates/components/video_player.gohtml
View File

@@ -78,13 +78,13 @@
<button data-mode-sub class="flex items-center justify-between px-5 py-2.5 text-left transition-colors hover:bg-white/10 text-white focus:outline-none">
<span class="text-sm font-medium">Japanese (Sub)</span>
</button>
<div class="px-5 py-2 flex flex-col gap-1">
<div class="hidden px-5 py-2 flex flex-col gap-1">
<span class="text-[10px] text-neutral-500 uppercase font-bold tracking-widest">Subtitles</span>
<select data-subtitle-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent hidden"></select>
<select data-subtitle-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent"></select>
</div>
<div class="px-5 py-2 flex flex-col gap-1">
<div class="hidden px-5 py-2 flex flex-col gap-1">
<span class="text-[10px] text-neutral-500 uppercase font-bold tracking-widest">Quality</span>
<select data-quality-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent hidden"></select>
<select data-quality-select class="w-full bg-white/5 text-white text-xs border border-white/10 px-2 py-1.5 outline-none rounded focus:border-accent"></select>
</div>
</div>
</div>
@@ -95,10 +95,6 @@
<button data-fullscreen class="flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none">
<svg class="size-6 transition-colors duration-200" viewBox="0 0 240 240" aria-hidden="true"><path d="M143.7,53.9c-1.9-1.9-1.3-4,1.4-4.4l50.6-8.4c1.8-0.5,3.7,0.6,4.2,2.4c0.2,0.6,0.2,1.2,0,1.7l-8.4,50.6c-0.4,2.7-2.4,3.4-4.4,1.4l-14.5-14.5l-28.2,28.2l-14.3-14.3l28.2-28.2L143.7,53.9z M44.2,200.9l50.6-8.4c2.7-0.4,3.4-2.4,1.4-4.4l-14.5-14.5l28.2-28.2l-14.3-14.3l-28.2,28.2l-14.5-14.5c-1.9-1.9-4-1.3-4.4,1.4l-8.4,50.6c-0.5,1.8,0.6,3.6,2.4,4.2C43,201,43.6,201,44.2,200.9L44.2,200.9z" fill="currentColor"></path></svg>
</button>
<button data-theater class="hidden lg:flex items-center justify-center text-white transition-opacity hover:opacity-80 focus:outline-none" title="Theater Mode">
<svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2" /><line x1="2" y1="15" x2="22" y2="15" /></svg>
</button>
</div>
</div>