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

refactor: close episode dropdown on range selection

Browse Source
This commit is contained in:
mkelvers
2026-05-24 20:30:44 +02:00
parent ae0ac66c2a
commit bdf09ccdb7
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
static/player/episodes/ui.ts
View File

@@ -1,4 +1,5 @@
import { state } from '../state'; import { state } from '../state';
import { qs } from '../../q';
/** /**
* Syncs autoplay checkbox with localStorage on init. * 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. * Updates dropdown label and hides/shows episode cards.
*/ */
export const switchEpisodeRange = (idx: number): void => { export const switchEpisodeRange = (idx: number): void => {
const dropdown = state.container.querySelector('[data-episode-dropdown]') as HTMLElement | null; const dropdown = qs<HTMLElement>('[data-episode-dropdown]');
if (!dropdown) return; if (!dropdown) return;
const btns = Array.from(dropdown.querySelectorAll('.episode-range-btn')) as HTMLButtonElement[]; const btns = Array.from(dropdown.querySelectorAll('.episode-range-btn')) as HTMLButtonElement[];
const target = btns[idx]; const target = btns[idx];

12
static/player/main.ts
View File

@@ -22,6 +22,14 @@ import { formatTime } from './controls';
let initialized = false; // prevent double init on htmx swaps 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 => { const hidePreviewPopover = (): void => {
if (!state.previewPopover) return; if (!state.previewPopover) return;
state.previewPopover.classList.add('opacity-0'); state.previewPopover.classList.add('opacity-0');
@@ -221,7 +229,7 @@ const initPlayer = (): void => {
state.video.addEventListener('click', showControls); state.video.addEventListener('click', showControls);
const searchInput = document.querySelector('[data-episode-search]') as HTMLInputElement | null; 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; let searchDebounce: number | undefined;
if (searchInput) { if (searchInput) {
@@ -256,6 +264,8 @@ const initPlayer = (): void => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
const idx = Number.parseInt((btn as HTMLElement).dataset.rangeIndex ?? '0', 10); const idx = Number.parseInt((btn as HTMLElement).dataset.rangeIndex ?? '0', 10);
switchEpisodeRange(idx); switchEpisodeRange(idx);
const dd = btn.closest('ui-dropdown');
if (isClosableDropdown(dd)) dd.close();
}); });
}); });
} }