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

static/player.ts

@@ -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()

templates/components/video_player.gohtml

@@ -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>