refactor: group media state

static/player/skip/editor.ts

@@ -166,14 +166,14 @@ export const setupSegmentEditor = (): void => {
   resetBtn?.addEventListener("click", reset);
 
   markStartBtn?.addEventListener("click", () => {
-    startTime = Math.max(0, state.video.currentTime);
+    startTime = Math.max(0, state.elements.video.currentTime);
     if (endTime != null && startTime >= endTime) endTime = null;
     setError(null);
     updateLabels();
     showControls();
   });
   markEndBtn?.addEventListener("click", () => {
-    endTime = Math.max(0, state.video.currentTime);
+    endTime = Math.max(0, state.elements.video.currentTime);
     if (startTime != null && endTime <= startTime) {
       setError("End must be after start.");
       return;
@@ -202,8 +202,8 @@ export const setupSegmentEditor = (): void => {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          mal_id: state.malID,
-          episode: Number.parseInt(state.currentEpisode, 10),
+          mal_id: state.episode.malID,
+          episode: Number.parseInt(state.episode.current, 10),
           skip_type: skipType,
           start_time: startTime,
           end_time: endTime,
@@ -219,12 +219,12 @@ export const setupSegmentEditor = (): void => {
 
       // Update local segments immediately so UI reflects the saved data.
       const normalizedType = skipType === "ed" ? "ending" : "opening";
-      state.parsedSegments = (state.parsedSegments || []).filter((s) => {
+      state.skip.parsedSegments = state.skip.parsedSegments.filter((s) => {
         const t = (s.type || "").toLowerCase();
         if (normalizedType === "ending") return t !== "ed" && t !== "ending" && t !== "outro";
         return t !== "op" && t !== "opening" && t !== "intro";
       });
-      state.parsedSegments.push({
+      state.skip.parsedSegments.push({
         type: normalizedType,
         start: startTime,
         end: endTime,

static/player/skip/index.ts

@@ -12,17 +12,17 @@ const skipLabel = (type: string): string => (type === "ed" ? "Skip outro" : "Ski
  * Called on timeupdate. Shows button when in active segment.
  */
 export const updateSkipButton = (currentTime: number): void => {
-  const btn = state.container.querySelector("[data-skip]") as HTMLButtonElement | null;
+  const btn = state.elements.container.querySelector("[data-skip]") as HTMLButtonElement | null;
   const displayTime = displayTimeFromAbsolute(currentTime);
 
   // find segment that contains current time (with delay buffer)
-  const segment = state.activeSegments.find((s) => {
+  const segment = state.skip.activeSegments.find((s) => {
     const delay = Math.min(1, Math.max(0.25, (s.end - s.start) * 0.02));
     return displayTime >= s.start + delay && displayTime < s.end;
   });
 
   if (!segment) {
-    state.activeSkipSegment = null;
+    state.skip.activeSegment = null;
     btn?.classList.add("hidden");
     return;
   }
@@ -30,13 +30,13 @@ export const updateSkipButton = (currentTime: number): void => {
   // auto-skip: jump to end if enabled
   const autoSkip = safeLocalStorage.getItem("mal:autoskip-enabled") === "true";
   if (autoSkip && displayTime >= segment.start && displayTime < segment.end) {
-    state.video.currentTime = absoluteTimeFromDisplay(segment.end + 0.01);
+    state.elements.video.currentTime = absoluteTimeFromDisplay(segment.end + 0.01);
     void saveProgress();
     return;
   }
 
   // show skip button
-  state.activeSkipSegment = segment;
+  state.skip.activeSegment = segment;
   if (btn) {
     btn.textContent = skipLabel(segment.type);
     btn.title = skipLabel(segment.type);

static/player/skip/segments.ts

@@ -11,9 +11,9 @@ const MIN_OUTRO_START_RATIO = 0.5; // outro must start at least 50% in
  * Validates intro/outro positioning.
  */
 export const resolveActiveSegments = (): void => {
-  const bounds = state.video.duration;
+  const bounds = state.elements.video.duration;
   if (bounds <= 0) {
-    state.activeSegments = [];
+    state.skip.activeSegments = [];
     return;
   }
 
@@ -24,7 +24,7 @@ export const resolveActiveSegments = (): void => {
     return null;
   };
 
-  state.activeSegments = state.parsedSegments.filter((s) => {
+  state.skip.activeSegments = state.skip.parsedSegments.filter((s) => {
     const t = normalizeType(s.type);
     if (!t) return false;
     const isOverride = (s.source || "").toLowerCase() === "override";
@@ -54,14 +54,14 @@ export const resolveActiveSegments = (): void => {
  * Renders segment markers on the timeline progress bar.
  */
 export const renderSegments = (): void => {
-  const track = state.container.querySelector("[data-segments]") as HTMLElement | null;
+  const track = state.elements.container.querySelector("[data-segments]") as HTMLElement | null;
   if (!track) return;
   track.innerHTML = "";
 
-  const bounds = state.video.duration;
+  const bounds = state.elements.video.duration;
   if (bounds <= 0) return;
 
-  state.activeSegments.forEach((s) => {
+  state.skip.activeSegments.forEach((s) => {
     const bar = document.createElement("div");
     bar.className = "absolute opacity-95";
     bar.style.backgroundColor = "var(--player-segment)";