app/enhance/podcast.ts

Functions

Imports

It imports app/lib/podcast/clock.mjs. No module of this repo imports it.

Source

1import { clockTime } from "~/lib/podcast/clock.mjs";
2
3for (const root of document.querySelectorAll<HTMLElement>("[data-podcast]")) {
4  const audio = root.querySelector<HTMLAudioElement>(".podcast-audio");
5  const controls = root.querySelector<HTMLElement>("[data-podcast-controls]");
6  const play = root.querySelector<HTMLButtonElement>("[data-podcast-play]");
7  const seek = root.querySelector<HTMLInputElement>("[data-podcast-seek]");
8  const elapsed = root.querySelector<HTMLElement>("[data-podcast-elapsed]");
9  const total = root.querySelector<HTMLElement>("[data-podcast-total]");
10  if (!audio || !controls || !play || !seek || !elapsed || !total) continue;
11
12  const duration = () =>
13    Number.isFinite(audio.duration) && audio.duration > 0 ? audio.duration : Number(seek.max) || 0;
14
15  let dragging = false;
16  /**
17   * A seek asked for before the metadata has loaded. The element cannot take a position yet, so the
18   * slider and clock show this one instead of snapping back to 0:00, and a second skip adds to it.
19   */
20  let pending: number | null = null;
21  const position = () => pending ?? audio.currentTime;
22
23  const paint = () => {
24    const now = position();
25    if (!dragging) seek.value = String(Math.floor(now));
26    elapsed.textContent = clockTime(dragging ? Number(seek.value) : now);
27    seek.setAttribute(
28      "aria-valuetext",
29      `${clockTime(dragging ? Number(seek.value) : now)} of ${clockTime(duration())}`,
30    );
31  };
32
33  const paintButton = () => {
34    play.textContent = audio.paused ? "Play" : "Pause";
35  };
36
37  /**
38   * A seek before the metadata has loaded is held and applied once it has. `preload="none"` means
39   * nothing is fetched until asked, so the first held seek asks for the metadata; a load already
40   * under way (a Play just pressed) is left alone, since `load()` would abort it.
41   */
42  const seekTo = (seconds: number) => {
43    const target = Math.min(Math.max(0, seconds), duration() || seconds);
44    if (audio.readyState >= 1) {
45      pending = null;
46      audio.currentTime = target;
47    } else {
48      if (pending === null) {
49        audio.addEventListener(
50          "loadedmetadata",
51          () => {
52            if (pending !== null) audio.currentTime = pending;
53            pending = null;
54            paint();
55          },
56          { once: true },
57        );
58        if (audio.networkState !== audio.NETWORK_LOADING) {
59          audio.preload = "metadata";
60          audio.load();
61        }
62      }
63      pending = target;
64    }
65    seek.value = String(Math.floor(target));
66    paint();
67  };
68
69  audio.controls = false;
70  controls.hidden = false;
71  paint();
72
73  play.addEventListener("click", () => {
74    if (audio.paused) void audio.play().catch(() => paintButton());
75    else audio.pause();
76  });
77  for (const button of root.querySelectorAll<HTMLButtonElement>("[data-podcast-skip]")) {
78    const delta = Number(button.dataset.podcastSkip);
79    button.addEventListener("click", () => seekTo(position() + delta));
80  }
81
82  seek.addEventListener("input", () => {
83    dragging = true;
84    paint();
85  });
86  seek.addEventListener("change", () => {
87    dragging = false;
88    seekTo(Number(seek.value));
89  });
90
91  audio.addEventListener("loadedmetadata", () => {
92    seek.max = String(Math.floor(duration()));
93    total.textContent = clockTime(duration());
94    paint();
95  });
96  audio.addEventListener("timeupdate", paint);
97  audio.addEventListener("play", paintButton);
98  audio.addEventListener("pause", paintButton);
99  audio.addEventListener("ended", paintButton);
100  audio.addEventListener("error", () => {
101    controls.hidden = true;
102    audio.controls = true;
103  });
104}