@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/media/media.ts

@@ -1,5 +1,14 @@
 import { Input as UiInput } from "@foldkit/ui";
-import { Array, Effect, Match, Number, Option, Queue, Schema, Stream } from "effect";
+import {
+  Array,
+  Effect,
+  Match,
+  Number,
+  Option,
+  Queue,
+  Schema,
+  Stream,
+} from "effect";
 import * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import type { Html, HtmlBuilder } from "foldkit/html";
@@ -11,29 +20,20 @@ import type * as Update from "foldkit/update";
 
 import * as Button from "../button/button.ts";
 import { UNKNOWN_CLOCK, formatClock } from "../format/format.ts";
-import * as IconButton from "../iconButton/iconButton.ts";
+import * as IconButton from "../icon-button/icon-button.ts";
 import { isPlain } from "../keys/keys.ts";
 import { slotView } from "../slot/slot.ts";
 
-// NOTE: what ImageFrame, VideoFrame and AudioFrame share: the space a frame keeps, its
-// caption, and a player's state read from the media element's own events. The package
-// exports the player as `Media`, and VideoFrame and AudioFrame are its two views; the parts
-// of a frame's view kept here (the caption, the play and mute buttons, the seek cells, the
-// time, a failed player's retry) are theirs alone.
-
-// FRAME
-
 /** The space a frame keeps before its picture arrives, so nothing moves when it does: the
  *  picture's own size in CSS pixels (it prints at that width and shrinks to fit, never grows),
  *  or a ratio of width to height (16 / 9) that fills the width it is given. */
 export const FrameSize = defineTaggedUnion({
-  Pixels: { width: Schema.Number, height: Schema.Number },
-  Ratio: { ratio: Schema.Number },
+  Pixels: { width: Schema.Finite, height: Schema.Finite },
+  Ratio: { ratio: Schema.Finite },
 });
+
 export type FrameSize = typeof FrameSize.Type;
 
-/** A frame's ratio as the `--ratio` its CSS reads, and its width when it has one: the
- *  picture's, inside the 2px border, so a pixel drawing prints cell for cell. */
 export const frameStyle = (size: FrameSize): Record<string, string> =>
   FrameSize.match(size, {
     Pixels: ({ width, height }) => ({
@@ -43,8 +43,10 @@ export const frameStyle = (size: FrameSize): Record<string, string> =>
     Ratio: ({ ratio }) => ({ "--ratio": `${ratio}` }),
   });
 
-/** A frame's width and height attributes, when it has a size in pixels. */
-export const sizeAttributes = <Message>(size: FrameSize, h: HtmlBuilder<Message>) =>
+export const sizeAttributes = <Message>(
+  size: FrameSize,
+  h: HtmlBuilder<Message>
+) =>
   FrameSize.match(size, {
     Pixels: ({ width, height }) => [h.Width(`${width}`), h.Height(`${height}`)],
     Ratio: () => [],
@@ -53,51 +55,51 @@ export const sizeAttributes = <Message>(size: FrameSize, h: HtmlBuilder<Message>
 /** What a frame holds whatever its source does: a specimen, or a source the product already
  *  knows is gone. */
 export const Held = Schema.Literals(["Loading", "Broken"]);
+
 export type Held = typeof Held.Type;
 
-/** A figure's caption in the sans, its credit in the meta register at the right. */
 export const captionView = <Message>(
   caption: ReadonlyArray<Html | string>,
   credit: ReadonlyArray<Html | string>,
-  h: HtmlBuilder<Message>,
-): ReadonlyArray<Html> =>
+  h: HtmlBuilder<Message>
+): readonly Html[] =>
   Array.match(
     [
-      ...Array.match(caption, { onEmpty: () => [], onNonEmpty: (words) => [h.span([], words)] }),
+      ...Array.match(caption, {
+        onEmpty: () => [],
+        onNonEmpty: (words) => [h.span([], words)],
+      }),
       ...slotView("span", "meta", credit, h),
     ],
     {
       onEmpty: () => [],
       onNonEmpty: (lines) => [h.figcaption([h.Class("media-caption")], lines)],
-    },
+    }
   );
 
-// MODEL
-
 /** Schema for a player: the element's state as its events last said it. */
 export const Model = Schema.Struct({
   id: Schema.String,
   isPlaying: Schema.Boolean,
-  time: Schema.Number,
-  maybeDuration: Schema.Option(Schema.Number),
+  time: Schema.Finite,
+  maybeDuration: Schema.Option(Schema.Finite),
   isMuted: Schema.Boolean,
   isWaiting: Schema.Boolean,
-  maybeErrorCode: Schema.Option(Schema.Number),
+  maybeErrorCode: Schema.Option(Schema.Finite),
   isShowingCaptions: Schema.Boolean,
 });
+
 export type Model = typeof Model.Type;
 
-/** The media element's state at one moment, as `ReadMedia` reads it. */
 export const Reading = Schema.Struct({
   isPlaying: Schema.Boolean,
-  time: Schema.Number,
-  maybeDuration: Schema.Option(Schema.Number),
+  time: Schema.Finite,
+  maybeDuration: Schema.Option(Schema.Finite),
   isMuted: Schema.Boolean,
-  maybeErrorCode: Schema.Option(Schema.Number),
+  maybeErrorCode: Schema.Option(Schema.Finite),
 });
-export type Reading = typeof Reading.Type;
 
-// MESSAGE
+export type Reading = typeof Reading.Type;
 
 /** Union of all Messages a player can produce. */
 export const Message = defineMessageUnion({
@@ -106,9 +108,9 @@ export const Message = defineMessageUnion({
   ClickedMute: {},
   ClickedCaptions: {},
   ClickedRetry: {},
-  UpdatedSeek: { to: Schema.Number },
+  UpdatedSeek: { to: Schema.Finite },
   PressedPlaybackKey: {},
-  PressedSeekKey: { by: Schema.Number },
+  PressedSeekKey: { by: Schema.Finite },
   UpdatedMediaState: { reading: Reading },
   UpdatedWaiting: { isWaiting: Schema.Boolean },
   CompletedPlayMedia: {},
@@ -117,18 +119,16 @@ export const Message = defineMessageUnion({
   CompletedReloadMedia: {},
   CompletedShowCaptions: {},
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /** Union of OutMessages a player reports to its parent: the reader asked to load the source
  *  again, and it is loading. */
 export const OutMessage = defineMessageUnion({
   Retried: {},
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating a player with `init`. The `id` must be unique in the document:
  *  it is the media element's. */
@@ -146,16 +146,16 @@ export const init = (config: InitConfig): Model => ({
   isShowingCaptions: false,
 });
 
-// ACCESSORS
-
 /** The media element's id, unique in the document. */
 export const id = (model: Model): string => model.id;
 
-// COMMAND
-
-const withMedia = (mediaId: string, act: (media: HTMLMediaElement) => void): Effect.Effect<void> =>
+const withMedia = (
+  mediaId: string,
+  act: (media: HTMLMediaElement) => void
+): Effect.Effect<void> =>
   Effect.sync(() => {
-    const element = document.getElementById(mediaId);
+    const element = document.querySelector(`#${CSS.escape(mediaId)}`);
+
     if (element instanceof HTMLMediaElement) {
       act(element);
     }
@@ -167,9 +167,12 @@ export const PlayMedia = Command.define("PlayMedia", {
   messages: [Message.CompletedPlayMedia],
   execute: ({ mediaId }) =>
     Effect.suspend(() => {
-      const element = document.getElementById(mediaId);
+      const element = document.querySelector(`#${CSS.escape(mediaId)}`);
+
       return element instanceof HTMLMediaElement
-        ? Effect.tryPromise(() => element.play())
+        ? Effect.tryPromise(async () => {
+            await element.play();
+          })
         : Effect.void;
     }).pipe(Effect.ignore, Effect.as(Message.CompletedPlayMedia())),
 });
@@ -179,12 +182,14 @@ export const PauseMedia = Command.define("PauseMedia", {
   args: { mediaId: Schema.String },
   messages: [Message.CompletedPauseMedia],
   execute: ({ mediaId }) =>
-    withMedia(mediaId, (media) => media.pause()).pipe(Effect.as(Message.CompletedPauseMedia())),
+    withMedia(mediaId, (media) => {
+      media.pause();
+    }).pipe(Effect.as(Message.CompletedPauseMedia())),
 });
 
 /** Moves the media element to a place, in seconds. */
 export const SeekMedia = Command.define("SeekMedia", {
-  args: { mediaId: Schema.String, to: Schema.Number },
+  args: { mediaId: Schema.String, to: Schema.Finite },
   messages: [Message.CompletedSeekMedia],
   execute: ({ mediaId, to }) =>
     withMedia(mediaId, (media) => {
@@ -197,26 +202,26 @@ export const ReloadMedia = Command.define("ReloadMedia", {
   args: { mediaId: Schema.String },
   messages: [Message.CompletedReloadMedia],
   execute: ({ mediaId }) =>
-    withMedia(mediaId, (media) => media.load()).pipe(Effect.as(Message.CompletedReloadMedia())),
+    withMedia(mediaId, (media) => {
+      media.load();
+    }).pipe(Effect.as(Message.CompletedReloadMedia())),
 });
 
-const captionsMode = (isShowing: boolean): TextTrackMode => (isShowing ? "showing" : "hidden");
+const captionsMode = (isShowing: boolean): TextTrackMode =>
+  isShowing ? "showing" : "hidden";
 
 /** Shows or hides the media element's caption tracks. */
 export const ShowCaptions = Command.define("ShowCaptions", {
   args: { mediaId: Schema.String, isShowing: Schema.Boolean },
   messages: [Message.CompletedShowCaptions],
   execute: ({ mediaId, isShowing }) =>
-    withMedia(mediaId, (media) =>
-      Array.forEach(Array.fromIterable(media.textTracks), (track) => {
+    withMedia(mediaId, (media) => {
+      for (const track of media.textTracks) {
         track.mode = captionsMode(isShowing);
-      }),
-    ).pipe(Effect.as(Message.CompletedShowCaptions())),
+      }
+    }).pipe(Effect.as(Message.CompletedShowCaptions())),
 });
 
-// UPDATE
-
-/** How far a seek key moves, in seconds. */
 export const SEEK_STEP = 5;
 
 type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
@@ -236,6 +241,7 @@ const seek = (model: Model, to: number): UpdateReturn =>
     onNone: () => ({ model }),
     onSome: (duration) => {
       const clamped = Number.clamp(to, { minimum: 0, maximum: duration });
+
       return {
         model: modifyFields(model, { time: () => clamped }),
         commands: [SeekMedia({ mediaId: model.id, to: clamped })],
@@ -243,9 +249,9 @@ const seek = (model: Model, to: number): UpdateReturn =>
     },
   });
 
-const playOrPause = (model: Model): UpdateReturn => (model.isPlaying ? pause(model) : play(model));
+const playOrPause = (model: Model): UpdateReturn =>
+  model.isPlaying ? pause(model) : play(model);
 
-// NOTE: a failed element takes no keys: its frame prints broken, its controls held.
 const isFailed = (model: Model): boolean => Option.isSome(model.maybeErrorCode);
 
 /** Processes a player Message and returns the next Model, Commands and OutMessage. */
@@ -253,10 +259,19 @@ export const update = (model: Model, message: Message) =>
   Message.match<UpdateReturn>(message, {
     ClickedPlay: () => play(model),
     ClickedPause: () => pause(model),
-    ClickedMute: () => ({ model: modifyFields(model, { isMuted: (isMuted) => !isMuted }) }),
+    ClickedMute: () => ({
+      model: modifyFields(model, { isMuted: (isMuted) => !isMuted }),
+    }),
     ClickedCaptions: () => ({
-      model: modifyFields(model, { isShowingCaptions: (isShowing) => !isShowing }),
-      commands: [ShowCaptions({ mediaId: model.id, isShowing: !model.isShowingCaptions })],
+      model: modifyFields(model, {
+        isShowingCaptions: (isShowing) => !isShowing,
+      }),
+      commands: [
+        ShowCaptions({
+          mediaId: model.id,
+          isShowing: !model.isShowingCaptions,
+        }),
+      ],
     }),
     ClickedRetry: () => ({
       model: modifyFields(model, { maybeErrorCode: () => Option.none() }),
@@ -264,8 +279,10 @@ export const update = (model: Model, message: Message) =>
       outMessage: OutMessage.Retried(),
     }),
     UpdatedSeek: ({ to }) => seek(model, to),
-    PressedPlaybackKey: () => (isFailed(model) ? { model } : playOrPause(model)),
-    PressedSeekKey: ({ by }) => (isFailed(model) ? { model } : seek(model, model.time + by)),
+    PressedPlaybackKey: () =>
+      isFailed(model) ? { model } : playOrPause(model),
+    PressedSeekKey: ({ by }) =>
+      isFailed(model) ? { model } : seek(model, model.time + by),
     UpdatedMediaState: ({ reading }) => ({
       model: modifyFields(model, {
         isPlaying: () => reading.isPlaying,
@@ -285,17 +302,22 @@ export const update = (model: Model, message: Message) =>
     CompletedShowCaptions: () => ({ model }),
   });
 
-// READING THE ELEMENT
-
 const readMedia = (media: HTMLMediaElement): Reading => ({
   isPlaying: !media.paused,
   time: media.currentTime,
-  maybeDuration: Option.liftPredicate(media.duration, globalThis.Number.isFinite),
+  maybeDuration: Option.liftPredicate(
+    media.duration,
+    globalThis.Number.isFinite
+  ),
   isMuted: media.muted,
-  maybeErrorCode: Option.map(Option.fromNullishOr(media.error), ({ code }) => code),
+  maybeErrorCode: Option.map(
+    Option.fromNullishOr(media.error),
+    ({ code }) => code
+  ),
 });
 
 const MediaEvent = Schema.Literals(["Read", "Wait", "Settle"]);
+
 type MediaEvent = typeof MediaEvent.Type;
 
 const MEDIA_EVENTS: ReadonlyArray<readonly [string, MediaEvent]> = [
@@ -314,18 +336,25 @@ const MEDIA_EVENTS: ReadonlyArray<readonly [string, MediaEvent]> = [
   ["emptied", "Settle"],
 ];
 
-type ElementMessage = typeof Message.UpdatedMediaState.Type | typeof Message.UpdatedWaiting.Type;
+type ElementMessage =
+  | typeof Message.UpdatedMediaState.Type
+  | typeof Message.UpdatedWaiting.Type;
 
-const toMessages = (media: HTMLMediaElement, event: MediaEvent): ReadonlyArray<ElementMessage> =>
+const toMessages = (
+  media: HTMLMediaElement,
+  event: MediaEvent
+): readonly ElementMessage[] =>
   Match.value(event).pipe(
-    Match.withReturnType<ReadonlyArray<ElementMessage>>(),
-    Match.when("Read", () => [Message.UpdatedMediaState({ reading: readMedia(media) })]),
+    Match.withReturnType<readonly ElementMessage[]>(),
+    Match.when("Read", () => [
+      Message.UpdatedMediaState({ reading: readMedia(media) }),
+    ]),
     Match.when("Wait", () => [Message.UpdatedWaiting({ isWaiting: true })]),
     Match.when("Settle", () => [
       Message.UpdatedWaiting({ isWaiting: false }),
       Message.UpdatedMediaState({ reading: readMedia(media) }),
     ]),
-    Match.exhaustive,
+    Match.exhaustive
   );
 
 /** Reads a media element's state from its own events, and once when it mounts, for whatever
@@ -340,65 +369,90 @@ export const ReadMedia = Mount.defineStream("ReadMedia", {
         if (!(element instanceof HTMLMediaElement)) {
           return yield* Effect.never;
         }
-        const offer = (event: MediaEvent) => (): void =>
-          Array.forEach(toMessages(element, event), (message) => {
+
+        const offer = (event: MediaEvent) => (): void => {
+          for (const message of toMessages(element, event)) {
             Queue.offerUnsafe(queue, message);
-          });
+          }
+        };
+
         yield* Effect.acquireRelease(
           Effect.sync(() => {
             const listeners = Array.map(MEDIA_EVENTS, ([type, event]) => {
               const listener = offer(event);
               element.addEventListener(type, listener);
+
               return [type, listener] as const;
             });
-            Array.forEach(Array.fromIterable(element.textTracks), (track) => {
+
+            for (const track of element.textTracks) {
               track.mode = captionsMode(false);
-            });
+            }
+
             offer("Read")();
+
             return listeners;
           }),
           (listeners) =>
-            Effect.sync(() =>
-              Array.forEach(listeners, ([type, listener]) =>
-                element.removeEventListener(type, listener),
-              ),
-            ),
+            Effect.sync(() => {
+              for (const [type, listener] of listeners) {
+                element.removeEventListener(type, listener);
+              }
+            })
         );
+
         return yield* Effect.never;
-      }),
+      })
     ),
 });
 
-// KEYS
-
-type KeyMessage = typeof Message.PressedPlaybackKey.Type | typeof Message.PressedSeekKey.Type;
+type KeyMessage =
+  | typeof Message.PressedPlaybackKey.Type
+  | typeof Message.PressedSeekKey.Type;
 
 const toKeyMessage = (event: KeyboardEvent): Option.Option<KeyMessage> => {
-  const target = Option.liftPredicate(event.target, (target) => target instanceof Element);
-  const isOnSeek = Option.exists(target, (element) => element.matches("input[type=range]"));
-  const isOnButton = Option.exists(target, (element) => element.tagName === "BUTTON");
+  const target = Option.liftPredicate(
+    event.target,
+    (eventTarget) => eventTarget instanceof Element
+  );
+
+  const isOnSeek = Option.exists(target, (element) =>
+    element.matches("input[type=range]")
+  );
+
+  const isOnButton = Option.exists(
+    target,
+    (element) => element.tagName === "BUTTON"
+  );
 
   return Match.value(event.key).pipe(
     Match.withReturnType<Option.Option<KeyMessage>>(),
     Match.when("k", () => Option.some(Message.PressedPlaybackKey())),
-    Match.when(" ", () => Option.liftPredicate(Message.PressedPlaybackKey(), () => !isOnButton)),
-    Match.when("ArrowLeft", () => Option.some(Message.PressedSeekKey({ by: -SEEK_STEP }))),
-    Match.when("ArrowRight", () => Option.some(Message.PressedSeekKey({ by: SEEK_STEP }))),
+    Match.when(" ", () =>
+      Option.liftPredicate(Message.PressedPlaybackKey(), () => !isOnButton)
+    ),
+    Match.when("ArrowLeft", () =>
+      Option.some(Message.PressedSeekKey({ by: -SEEK_STEP }))
+    ),
+    Match.when("ArrowRight", () =>
+      Option.some(Message.PressedSeekKey({ by: SEEK_STEP }))
+    ),
     Match.when("ArrowDown", () =>
-      Option.liftPredicate(Message.PressedSeekKey({ by: -SEEK_STEP }), () => isOnSeek),
+      Option.liftPredicate(
+        Message.PressedSeekKey({ by: -SEEK_STEP }),
+        () => isOnSeek
+      )
     ),
     Match.when("ArrowUp", () =>
-      Option.liftPredicate(Message.PressedSeekKey({ by: SEEK_STEP }), () => isOnSeek),
+      Option.liftPredicate(
+        Message.PressedSeekKey({ by: SEEK_STEP }),
+        () => isOnSeek
+      )
     ),
-    Match.orElse(() => Option.none()),
+    Match.orElse(() => Option.none())
   );
 };
 
-/** The player's key for one keydown inside its frame: Space or k plays and pauses, the arrows
- *  seek five seconds. A button keeps its own Space, and the seek bar its Home and End. A key
- *  an IME is composing, one someone already handled and one with a modifier are left alone;
- *  `BindPlayerKeys` prevents the default only for a key the player takes. A failed player's
- *  update ignores the keys. */
 export const playerKey = (event: KeyboardEvent): Option.Option<KeyMessage> =>
   event.isComposing || event.defaultPrevented || !isPlain(event)
     ? Option.none()
@@ -416,47 +470,72 @@ export const BindPlayerKeys = Mount.defineStream("BindPlayerKeys", {
     }),
 });
 
-// SHARED VIEWS
-
-// NOTE: `MediaError`'s codes, written out because the view renders on the server too, where
-// there is no `MediaError` to read them from.
 const MEDIA_ERR_ABORTED = 1;
 const MEDIA_ERR_NETWORK = 2;
 const MEDIA_ERR_DECODE = 3;
 
-/** Why it cannot play, by `MediaError` code, in the reader's words. */
 export const failureReason = (maybeErrorCode: Option.Option<number>): string =>
   Match.value(maybeErrorCode).pipe(
     Match.withReturnType<string>(),
     Match.when(
       Option.contains(MEDIA_ERR_ABORTED),
-      () => "Loading was stopped before it could play.",
+      () => "Loading was stopped before it could play."
     ),
-    Match.when(Option.contains(MEDIA_ERR_NETWORK), () => "The connection dropped while it loaded."),
-    Match.when(Option.contains(MEDIA_ERR_DECODE), () => "The file is damaged or cut short."),
-    Match.orElse(() => "The source is missing, or in a format this browser cannot play."),
+    Match.when(
+      Option.contains(MEDIA_ERR_NETWORK),
+      () => "The connection dropped while it loaded."
+    ),
+    Match.when(
+      Option.contains(MEDIA_ERR_DECODE),
+      () => "The file is damaged or cut short."
+    ),
+    Match.orElse(
+      () => "The source is missing, or in a format this browser cannot play."
+    )
   );
 
-/** Whether the player prints broken: held so, or failed while not held loading. */
-export const isBroken = (model: Model, maybeHeld: Option.Option<Held>): boolean =>
+export const isBroken = (
+  model: Model,
+  maybeHeld: Option.Option<Held>
+): boolean =>
   Option.contains(maybeHeld, "Broken") ||
-  (!Option.contains(maybeHeld, "Loading") && Option.isSome(model.maybeErrorCode));
+  (!Option.contains(maybeHeld, "Loading") &&
+    Option.isSome(model.maybeErrorCode));
 
-/** Whether the player prints waiting: held loading, or waiting for data while not broken. */
-export const isWaiting = (model: Model, maybeHeld: Option.Option<Held>): boolean =>
-  Option.contains(maybeHeld, "Loading") || (!isBroken(model, maybeHeld) && model.isWaiting);
+export const isWaiting = (
+  model: Model,
+  maybeHeld: Option.Option<Held>
+): boolean =>
+  Option.contains(maybeHeld, "Loading") ||
+  (!isBroken(model, maybeHeld) && model.isWaiting);
 
-/** The play button, which pauses while it plays. */
-export const playButtonView = (model: Model, isDisabled: boolean, h: HtmlBuilder<Message>): Html =>
+export const playButtonView = (
+  model: Model,
+  isDisabled: boolean,
+  h: HtmlBuilder<Message>
+): Html =>
   IconButton.view(
     model.isPlaying
-      ? { glyph: "pause", label: "Pause", onClick: Message.ClickedPause(), isDisabled }
-      : { glyph: "play", label: "Play", onClick: Message.ClickedPlay(), isDisabled },
-    h,
+      ? {
+          glyph: "pause",
+          label: "Pause",
+          onClick: Message.ClickedPause(),
+          isDisabled,
+        }
+      : {
+          glyph: "play",
+          label: "Play",
+          onClick: Message.ClickedPlay(),
+          isDisabled,
+        },
+    h
   );
 
-/** The mute toggle, which says whether it is pressed. */
-export const muteButtonView = (model: Model, isDisabled: boolean, h: HtmlBuilder<Message>): Html =>
+export const muteButtonView = (
+  model: Model,
+  isDisabled: boolean,
+  h: HtmlBuilder<Message>
+): Html =>
   IconButton.view(
     {
       glyph: model.isMuted ? "volume-off" : "volume",
@@ -465,44 +544,55 @@ export const muteButtonView = (model: Model, isDisabled: boolean, h: HtmlBuilder
       isDisabled,
       attributes: [Button.pressedAttribute(model.isMuted, h)],
     },
-    h,
+    h
   );
 
-/** A failed player's actions: its retry button, when it has one. */
-export const retryActions = (hasRetry: boolean, h: HtmlBuilder<Message>): ReadonlyArray<Html> =>
+export const retryActions = (
+  hasRetry: boolean,
+  h: HtmlBuilder<Message>
+): readonly Html[] =>
   hasRetry
-    ? [Button.view({ label: "retry", isSmall: true, onClick: Message.ClickedRetry() }, h)]
+    ? [
+        Button.view(
+          { label: "retry", isSmall: true, onClick: Message.ClickedRetry() },
+          h
+        ),
+      ]
     : [];
 
 const SEEK_CELLS = 24;
 
-/** Where it is, as a row of cells lit up to the place: the cells are what shows, and a native
- *  range over them (unseen) is what the pointer, the keyboard and a screen reader use. The
- *  range is natively disabled only while the source is broken (`isNativeDisabled`); while the
- *  length is unknown (before the metadata, and always for a stream) it is held, aria-disabled
- *  with no handler, and stays in the keyboard. */
 export const seekView = (
   model: Model,
   isNativeDisabled: boolean,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
-  const maybeKnown = Option.filter(model.maybeDuration, (duration) => duration > 0);
-  const place = Option.match(maybeKnown, {
+  const maybeKnownLength = Option.filter(
+    model.maybeDuration,
+    (duration) => duration > 0
+  );
+
+  const place = Option.match(maybeKnownLength, {
     onNone: () => 0,
     onSome: (duration) => Math.min(model.time, duration),
   });
-  const lit = Option.match(maybeKnown, {
+
+  const lit = Option.match(maybeKnownLength, {
     onNone: () => 0,
     onSome: (duration) => Math.floor((place / duration) * SEEK_CELLS),
   });
-  const isHeld = !isNativeDisabled && Option.isNone(maybeKnown);
+
+  const isHeldUntilLengthKnown =
+    !isNativeDisabled && Option.isNone(maybeKnownLength);
 
   return h.span(
     [h.Class("media-seek")],
     [
       h.span(
         [h.Class("cells"), h.AriaHidden(true)],
-        Array.makeBy(SEEK_CELLS, (index) => h.span([h.Class(index < lit ? "cell on" : "cell")])),
+        Array.makeBy(SEEK_CELLS, (index) =>
+          h.span([h.Class(index < lit ? "cell on" : "cell")])
+        )
       ),
       UiInput.view(
         {
@@ -510,43 +600,48 @@ export const seekView = (
           type: "range",
           value: `${place}`,
           isDisabled: isNativeDisabled,
-          ...(isHeld
+          ...(isHeldUntilLengthKnown
             ? {}
             : {
-                onInput: (value: string) => Message.UpdatedSeek({ to: globalThis.Number(value) }),
+                onInput: (value: string) =>
+                  Message.UpdatedSeek({ to: globalThis.Number(value) }),
               }),
           toView: (groups) =>
             h.input([
               ...groups.input,
-              ...(isHeld ? [h.AriaDisabled(true)] : []),
+              ...(isHeldUntilLengthKnown ? [h.AriaDisabled(true)] : []),
               h.AriaLabel("Seek"),
               h.AriaValuetext(
                 Option.match(model.maybeDuration, {
                   onNone: () => `${formatClock(model.time)}, length unknown`,
-                  onSome: (duration) => `${formatClock(model.time)} of ${formatClock(duration)}`,
-                }),
+                  onSome: (duration) =>
+                    `${formatClock(model.time)} of ${formatClock(duration)}`,
+                })
               ),
               h.Min("0"),
-              h.Max(`${Option.getOrElse(maybeKnown, () => 0)}`),
+              h.Max(`${Option.getOrElse(maybeKnownLength, () => 0)}`),
               h.Step("any"),
             ]),
         },
-        h,
+        h
       ),
-    ],
+    ]
   );
 };
 
-/** The time, as the place and the length in tabular pixel figures; while the element waits
- *  for data (where nothing else says so), the word and the working cursor instead. The word
- *  is said by a status that stays in place, its words swapped, so a screen reader hears it. */
-export const timeView = (model: Model, isTimeWaiting: boolean, h: HtmlBuilder<Message>): Html =>
+export const timeView = (
+  model: Model,
+  isTimeWaiting: boolean,
+  h: HtmlBuilder<Message>
+): Html =>
   h.span(
     [h.Class(isTimeWaiting ? "media-time waiting" : "media-time")],
     [
       h.span(
         [h.Role("status")],
-        isTimeWaiting ? ["loading", h.span([h.Class("cursor"), h.AriaHidden(true)])] : [],
+        isTimeWaiting
+          ? ["loading", h.span([h.Class("cursor"), h.AriaHidden(true)])]
+          : []
       ),
       ...(isTimeWaiting
         ? []
@@ -554,12 +649,15 @@ export const timeView = (model: Model, isTimeWaiting: boolean, h: HtmlBuilder<Me
             h.span(
               [h.AriaHidden(true)],
               [
-                `${formatClock(model.time)} / ${Option.match(model.maybeDuration, {
-                  onNone: () => UNKNOWN_CLOCK,
-                  onSome: formatClock,
-                })}`,
-              ],
+                `${formatClock(model.time)} / ${Option.match(
+                  model.maybeDuration,
+                  {
+                    onNone: () => UNKNOWN_CLOCK,
+                    onSome: formatClock,
+                  }
+                )}`,
+              ]
             ),
           ]),
-    ],
+    ]
   );