diff --git a/static/player/episodes/ui.ts b/static/player/episodes/ui.ts index 7e442cf..849caad 100644 --- a/static/player/episodes/ui.ts +++ b/static/player/episodes/ui.ts @@ -1,4 +1,5 @@ import { state } from '../state'; +import { qs } from '../../q'; /** * Syncs autoplay checkbox with localStorage on init. @@ -57,7 +58,7 @@ export const updateEpisodeHighlight = (num: number): void => { * Updates dropdown label and hides/shows episode cards. */ export const switchEpisodeRange = (idx: number): void => { - const dropdown = state.container.querySelector('[data-episode-dropdown]') as HTMLElement | null; + const dropdown = qs('[data-episode-dropdown]'); if (!dropdown) return; const btns = Array.from(dropdown.querySelectorAll('.episode-range-btn')) as HTMLButtonElement[]; const target = btns[idx]; diff --git a/static/player/main.ts b/static/player/main.ts index b8b3b78..294d52b 100644 --- a/static/player/main.ts +++ b/static/player/main.ts @@ -22,6 +22,14 @@ import { formatTime } from './controls'; let initialized = false; // prevent double init on htmx swaps +type ClosableDropdown = HTMLElement & { close: () => void }; +const isClosableDropdown = (el: Element | null): el is ClosableDropdown => { + if (!el) return false; + if (!(el instanceof HTMLElement)) return false; + const maybe = el as Partial<{ close: unknown }>; + return typeof maybe.close === 'function'; +}; + const hidePreviewPopover = (): void => { if (!state.previewPopover) return; state.previewPopover.classList.add('opacity-0'); @@ -221,7 +229,7 @@ const initPlayer = (): void => { state.video.addEventListener('click', showControls); const searchInput = document.querySelector('[data-episode-search]') as HTMLInputElement | null; - const dropdown = container.querySelector('[data-episode-dropdown]') as HTMLElement | null; + const dropdown = document.querySelector('[data-episode-dropdown]') as HTMLElement | null; let searchDebounce: number | undefined; if (searchInput) { @@ -256,6 +264,8 @@ const initPlayer = (): void => { btn.addEventListener('click', () => { const idx = Number.parseInt((btn as HTMLElement).dataset.rangeIndex ?? '0', 10); switchEpisodeRange(idx); + const dd = btn.closest('ui-dropdown'); + if (isClosableDropdown(dd)) dd.close(); }); }); }