@fusion.dev/helix-headless 0.2.0 → 0.4.0

package/dist/video/root/video-root.js

@@ -9,17 +9,7 @@ import { airplay, arrowClockwise, arrowCounterClockwise, closedCaptioning, corne
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
-/* Side-effect, for the menu rows this renders. Both tiers import it, because
-   this tier writes the template and the styled tier inherits it without having
-   a copy of its own to remind anyone. */
 import '../../menu/index.js';
-/**
- * Seconds as a clock, with an hour only when there is one.
- *
- * `0:42` and not `00:00:42`. A reader comparing the position to the duration is
- * reading two numbers at a glance, and leading zeroes that never change are
- * digits in the way of the ones that do.
- */
 const clock = (seconds) => {
     if (!Number.isFinite(seconds) || seconds < 0) {
         return '0:00';
@@ -33,318 +23,32 @@ const clock = (seconds) => {
         ? `${hours}:${String(minutes).padStart(2, '0')}:${padded}`
         : `${minutes}:${padded}`;
 };
-/**
- * Which player currently owns the page's one media session.
- *
- * There is exactly one `navigator.mediaSession` per page, and it decides what
- * the lock screen shows and where a headset's buttons land. Two players cannot
- * both have it, so the rule is written down rather than left to whichever
- * rendered last: **whoever played most recently owns it**, which is what a
- * reader means by "this one" when they press play on their headphones.
- *
- * Module scope, because the thing being shared is the page's and not any
- * element's. A player gives it up when it leaves the document, and only if it
- * still holds it: one that already lost the session to another must not clear
- * that other one's metadata on its way out.
- */
 let owner;
-/**
- * How far a skip control moves, in seconds.
- *
- * Ten, which is the number every player that has one uses, and the number the
- * platform names in `seekbackward` and `seekforward` when it hands over a
- * default. A different length here would be correct only on this player.
- */
 const SKIP_SECONDS = 10;
-/**
- * @summary Plays a video, with controls this library draws rather than the
- * browser's.
- *
- * @description
- * **The picture is a real `<video>`.** Decoding, buffering, captions, Picture
- * in Picture, AirPlay and the codecs a device happens to have are all the
- * platform's, and none of them can be had from anything else. What is replaced
- * is the control bar, which is the one part of a video element that cannot be
- * styled and looks different in every browser.
- *
- * **Every control is a real control.** The scrubber and the volume are
- * `<input type="range">`, so a reader gets arrow keys, Home and End, the
- * platform's own touch target and its screen reader announcement without this
- * element implementing any of it. Drawing a div and listening for pointer moves
- * is how a media player ends up unusable from a keyboard.
- *
- * **Native controls are the fallback, not the default.** Where a consumer sets
- * `controls`, the browser's bar is used and this one is not drawn: two sets of
- * controls over one video is worse than either alone, and a consumer who asked
- * for the native bar has a reason.
- *
- * The keys are the ones every player uses: Space and `k` to play or pause, the
- * arrows to seek and to change the volume, `m` to mute, `f` for fullscreen.
- * They are bound on this element rather than on the document, because a video
- * is not a palette: keys belong to it only while a reader is on it.
- *
- * **And none of them where `controls` is set.** The browser's own bar owns
- * those keys, and two handlers on one press is a video that seeks twice or
- * plays and immediately pauses. The focus stop goes with them, since the native
- * controls bring their own.
- *
- * **`<source>` and `<track>` are copied into the video, not slotted into it.**
- * A media element runs its resource selection over its own child *nodes*, and a
- * slot is one node: the sources and the caption tracks a consumer wrote were
- * assigned into the flattened tree and the video never saw any of them. It had
- * no text tracks, no current source and a `readyState` of zero, so a video
- * given sources this way did not merely lack captions, it did not play.
- *
- * They are copied rather than moved, because the consumer's light DOM is theirs
- * and a framework that re-renders it would find its children gone. The copies
- * are rebuilt whenever the slot changes and the video is asked to load again,
- * which is what makes a `<track>` added later take effect.
- *
- * **The lock screen and a headset's buttons work, and one player owns them.**
- * There is one `navigator.mediaSession` per page, so the rule is stated rather
- * than left to render order: whichever player was started last owns it, which
- * is what a reader means by "this one" when they press play on their
- * headphones. The title comes from `label` and the artwork from `poster`.
- *
- * **`remote` sends the picture somewhere else.** The Remote Playback API is
- * what Safari implements for AirPlay and Chrome for Cast, so one control covers
- * both and the platform supplies the device list. It is offered only once
- * something has answered `watchAvailability`: a button that opens an empty list
- * is worse than no button, and a consumer who wants none can set
- * `disableremoteplayback` on this element.
- *
- * The properties below are written by this component and read by whoever draws
- * it. A consumer sets none of them: they carry a number this element computed
- * and CSS cannot, which is what lets a stylesheet on this tier draw the thing
- * without measuring anything itself.
- *
- * @since 0.1.0
- * @status experimental
- * @category media
- * @aliases Player, Media, Movie
- * @documentation https://helix.fusion.dev/components/video
- *
- * @slot - `<source>` and `<track>` elements, which are copied into the video.
- * @slot back - Top left over the frame, for a way out of a set.
- * @slot controls - Added to the control bar, before fullscreen.
- * @slot poster - Shown over the video until it starts.
- *
- * @event {Event} ended - Relayed, because it does not cross a shadow boundary.
- * @event {HelixNextEvent} helix-next - Fired when the reader asks for the next item.
- * @event {HelixPreviousEvent} helix-previous - Fired when they ask for the previous one.
- * @event {Event} pause - Relayed for the same reason.
- * @event {Event} play - Relayed for the same reason.
- *
- * @csspart back - The region top left, for a way out of a set.
- * @csspart captions - Subtitles on and off.
- * @csspart captions-menu - The language menu, where there is more than one.
- * @csspart captions-menu-back - The control that returns from a submenu.
- * @csspart captions-menu-back-mark - The glyph on the back control of a submenu.
- * @csspart captions-menu-empty - Shown when there are no items to show.
- * @csspart captions-menu-header - The bar above a submenu, holding the way back and its name.
- * @csspart captions-menu-loading - Shown while the items are still on their way.
- * @csspart captions-menu-surface - The floating panel the menu is drawn on.
- * @csspart captions-menu-title - The name of the submenu that is showing.
- * @csspart controls - The bar along the bottom.
- * @csspart cue - The caption on screen now, drawn by this element.
- * @csspart download - Saves the file, where it was asked for.
- * @csspart entry - One row in a menu this player opens.
- * @csspart entry-item - The row, which is an `<a>` where `href` is set.
- * @csspart entry-mark - The trailing mark: a tick when checked, a caret when it opens.
- * @csspart entry-start - The leading column, which is a slot and is always there.
- * @csspart failure - What is said when the source will not play.
- * @csspart forward - The control that goes on ten seconds.
- * @csspart fullscreen - The whole screen, and back.
- * @csspart loading - What is said while the picture waits for more of itself.
- * @csspart loading-mark - The part of that which spins.
- * @csspart more - The button that opens it.
- * @csspart mute - Sound on and off.
- * @csspart next - Asks for the next item, where it was asked for.
- * @csspart overflow - The menu holding the controls kept off the bar.
- * @csspart overflow-back - The control that returns from a submenu.
- * @csspart overflow-back-mark - The glyph on the back control of a submenu.
- * @csspart overflow-empty - Shown when there are no items to show.
- * @csspart overflow-header - The bar above a submenu, holding the way back and its name.
- * @csspart overflow-loading - Shown while the items are still on their way.
- * @csspart overflow-surface - The floating panel the menu is drawn on.
- * @csspart overflow-title - The name of the submenu that is showing.
- * @csspart pip - Picture in picture, where it was asked for and exists.
- * @csspart play - Play and pause.
- * @csspart poster - What covers it before it plays.
- * @csspart previous - Asks for the previous one.
- * @csspart remote - Play on another device, where one is available.
- * @csspart rewind - The control that goes back ten seconds.
- * @csspart scrubber - Where it is, and where to go.
- * @csspart sound - The speaker and its level, which are one control.
- * @csspart speed - Playback speed, where it was asked for.
- * @csspart stage - The box holding the picture and its controls, and the focus
- * target the keys are bound to.
- * @csspart start - The mark over the picture before anything has played.
- * @csspart time - The position and the duration.
- * @csspart video - The video itself.
- * @csspart volume - How loud.
- *
- * @cssproperty --video-intrinsic-ratio - The media's own aspect ratio, once it is known. `--video-aspect-ratio` overrides it.
- * @cssproperty --video-level - The current volume, 0 to 1.
- * @cssproperty --video-progress - How far playback has reached, as a fraction of the duration.
- */
 let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * Whether it starts on its own, which a browser only allows while silent.
-         *
-         * Forwarded rather than acted on. Whether an unprompted play is permitted is
-         * the browser's policy and not this element's, and `play()` already swallows
-         * the refusal: what follows a refused autoplay is a paused player showing its
-         * start control, which is the correct thing to be looking at.
-         */
         this.autoplay = false;
-        /**
-         * Whether the browser draws the controls instead of this element.
-         *
-         * A fallback rather than a default. Two bars over one video is worse than
-         * either alone, so this one is not drawn at all when it is set.
-         */
         this.controls = false;
-        /**
-         * How the media is fetched across origins, which decides whether a track can
-         * be read.
-         */
         this.crossOrigin = null;
-        /**
-         * Whether it *starts* silent, which is what an autoplaying video must do.
-         *
-         * **Named for the platform's split, which is real.** The `muted` content
-         * attribute reflects to `defaultMuted`; the `muted` property is live state a
-         * reader's click moves without touching the attribute. One property called
-         * `muted` bound to the attribute answers what the author wrote rather than
-         * whether there is sound, which is a name matching the platform's while
-         * meaning something else.
-         */
         this.defaultMuted = false;
-        /**
-         * Whether the browser may offer picture in picture.
-         */
         this.disablePictureInPicture = false;
-        /**
-         * Whether the browser may offer playback on a remote device.
-         */
         this.disableRemotePlayback = false;
-        /**
-         * And what they are told when it will not play at all.
-         */
         this.errorLabel = 'This video could not be played';
-        /**
-         * Controls beyond the ones every player has, named in the order they appear.
-         *
-         * A list rather than a property apiece. A bar is a row with a budget, and a
-         * boolean per feature invites a consumer to switch all of them on: naming
-         * them makes the row a decision, and makes the order theirs. Anything
-         * unrecognized is skipped rather than throwing, since the list is markup and
-         * a typo should cost a control, not a page.
-         *
-         * `pip` is offered only where the platform has it, checked rather than
-         * assumed: it is absent on iPhone and behind a flag in Firefox, and a button
-         * that cannot work is worse than one that is not there.
-         *
-         * The names are `speed`, `pip`, `remote` and `download`.
-         *
-         * **`download` is named and never assumed.** Offering the file is a decision
-         * about the content rather than about the player, and plenty of consumers
-         * decline it deliberately. It is also the one control whose success is not
-         * ours to promise: the attribute is ignored cross-origin, so a file served
-         * from somewhere else opens rather than saves, which is the browser's rule
-         * and not something a player can work around.
-         */
         this.extraControls = '';
-        /**
-         * How long the bar waits after the pointer stops before it goes, in ms.
-         *
-         * A wait rather than leaving with the pointer, or a reader moving across the
-         * picture to reach a control watches the bar vanish under them. Zero turns
-         * the wait off and the bar goes immediately; a large number keeps it up for
-         * as long as anyone is likely to look.
-         *
-         * The wait is only ever about *idling*. A video that is paused keeps its bar
-         * regardless, because a reader who stopped it is deciding what to do next.
-         */
         this.idleDelay = 2500;
-        /**
-         * Accessible name, since a video is not described by its filename.
-         */
         this.label = '';
-        /**
-         * What a reader is told while the picture is waiting for more of itself.
-         */
         this.loadingLabel = 'Loading';
-        /**
-         * Whether it starts again at the end.
-         */
         this.loop = false;
-        /**
-         * Controls that go behind one button instead of onto the bar, named the same
-         * way.
-         *
-         * **Named rather than measured, and the reason is that a width cannot answer
-         * this.** A media query asks about the window, and the bar's problem is its
-         * own width: a video in a 320px sidebar on a desktop is cramped and a
-         * full-bleed hero on a phone is not. A container query asks the right
-         * question and still cannot answer it, because how many controls there are is
-         * the consumer's, so the threshold is not a width but a width per control,
-         * which is a guess. And a control that moves between the bar and a hidden
-         * menu as the layout shifts is a control the reader has to find twice.
-         *
-         * So the consumer says where the fold is, which they can, having already
-         * named the controls in order. A name in both lists is drawn once, on the
-         * bar: two of the same control is worse than either placement.
-         */
         this.overflowControls = '';
-        /**
-         * And while it would stop it.
-         */
         this.pauseLabel = 'Pause';
-        /**
-         * What the play control is called while it would start the video.
-         */
         this.playLabel = 'Play';
-        /**
-         * Whether it plays where it sits rather than taking over the screen.
-         */
         this.playsInline = true;
-        /**
-         * A still shown before it plays, which the platform draws itself.
-         */
         this.poster = '';
-        /**
-         * How much to fetch before anything is asked for.
-         */
         this.preload = 'metadata';
-        /**
-         * The speeds offered, slowest first, as multipliers of normal.
-         */
         this.speeds = '0.5 1 1.5 2';
-        /**
-         * Where the video is, for the common case of one file.
-         */
         this.src = '';
-        /**
-         * Whether playback has stopped to wait for data.
-         *
-         * **Only ever after somebody asked for playback**, which is what `waiting`
-         * means: the element wanted the next frame and did not have it. Before that,
-         * a video that has loaded nothing is a poster with a play control over it,
-         * which looks deliberate and is. A spinner there would say something is
-         * happening when nothing is, on every video on the page.
-         *
-         * The case this covers is the one that looks like a bug: a picture frozen
-         * mid-play, the scrubber stopped, and nothing on screen saying why.
-         */
         this.buffering = false;
-        /**
-         * Whether the source failed, which is the other thing a frozen frame can
-         * mean.
-         */
         this.failed = false;
         this.playing = false;
         this.position = 0;
@@ -353,50 +57,13 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.silent = false;
         this.full = false;
         this.captioned = false;
-        /**
-         * Which caption track is showing, or `-1` for none.
-         *
-         * `@state`, because it is read off the video rather than declared: a consumer
-         * asking for a language would be naming a track that may not have loaded, and
-         * `default` on the `<track>` is the platform's own way to say it.
-         */
         this.captionIndex = -1;
-        /**
-         * How many caption tracks there are, which decides which control is drawn.
-         *
-         * A count and not a boolean. Tracks resolve after the element renders, so
-         * this is what schedules the update that draws the control at all, and a
-         * boolean goes false to true when the first track arrives and then never
-         * moves again: a second one landing leaves the toggle in place and the
-         * language menu unreachable on exactly the videos it exists for.
-         */
         this.captionCount = 0;
         this.rate = 1;
-        /**
-         * Whether the reader has been still long enough for the bar to go.
-         */
         this.idle = false;
-        /**
-         * Whether anything on the network offers to play this.
-         */
         this.remoteAvailable = false;
-        /**
-         * Whether it is playing somewhere else right now.
-         */
         this.remoteConnected = false;
-        /**
-         * The sources and caption tracks to copy into the video, as the consumer
-         * wrote them.
-         */
         this.media = [];
-        /**
-         * Rebuilds the copies from whatever the consumer has slotted.
-         *
-         * The attribute list is explicit rather than a blind copy of every attribute:
-         * these are two elements with a known and small surface, and copying anything
-         * a consumer happened to put on one would carry their framework's own markers
-         * into a shadow root that has no use for them.
-         */
         this.handleMedia = (event) => {
             const assigned = event.target.assignedElements();
             this.media = assigned
@@ -422,41 +89,16 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
                 return;
             }
             this.knownDuration = video.duration;
-            /* The video's own shape, handed to CSS as a number.
-             *
-             * `aspect-ratio: auto` cannot be used for this, and that is the whole
-             * reason this exists: `auto` takes the element's intrinsic ratio, and a
-             * `<video>` carrying a poster reports the *poster's*. A three-by-two still
-             * over a sixteen-by-nine clip made the box three-by-two, so the poster
-             * filled it and the video letterboxed inside, standing fifty pixels
-             * shorter the moment it started. Measured at 488 by 325 where the video
-             * wanted 488 by 275.
-             *
-             * Set once the metadata is in, which is the first moment the real ratio is
-             * knowable at all. Until then the stylesheet's own default holds. */
             if (video.videoWidth > 0 && video.videoHeight > 0) {
                 this.style.setProperty('--video-intrinsic-ratio', `${video.videoWidth} / ${video.videoHeight}`);
             }
-            /* Read once the video has its tracks, not from the slot. A `<track>` is
-               only a caption once the platform has parsed it, and a consumer can add
-               one later. */
             this.captionCount = this.captionTracks.length;
-            /* And what the first one is doing, which is not always nothing: a
-               `<track default>` starts showing without anyone pressing anything, so a
-               button that began at "off" reported the opposite of what was on screen. */
             const track = video.textTracks[0];
             if (track) {
-                /* A `<track default>` arrives `showing`, which is the browser drawing it.
-                   Moved to `hidden` so the cues keep coming and we draw them instead. */
                 if (track.mode === 'showing') {
                     track.mode = 'hidden';
                 }
                 this.captioned = track.mode === 'hidden';
-                /* Taken off whatever it was on before adding it here. This runs from
-                   `loadedmetadata`, which fires again for every source a reader moves to,
-                   and a consumer adding a `<track>` later gets another. Added without
-                   removing, a playlist of six left six listeners on tracks that between
-                   them fire for every cue in the video. */
                 this.cued?.removeEventListener('cuechange', this.handleCue);
                 this.cued = track;
                 track.addEventListener('cuechange', this.handleCue);
@@ -466,24 +108,9 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.handleTime = () => {
             this.position = this.video?.currentTime ?? 0;
         };
-        /* Relayed, because none of these cross a shadow boundary on their own. The
-           video is inside this element's shadow root, so a consumer listening on the
-           element they wrote hears nothing at all without this. Input relays `change`
-           for the same reason. */
-        /* `emptied` is in the list for a reason worth keeping. Assigning `src` runs
-           the media load algorithm, which stops playback and sets `paused` without
-           firing `pause`: the only events are `emptied` and `loadstart`. Listening for
-           `play` and `pause` alone, this element went on believing it was playing
-           after a playlist pointed it at the next entry, so the start control it draws
-           only when paused stayed hidden and there was nothing at all to press.
-           Measured: `paused` true, `playing` true, no `pause` event in the log. */
         this.handleWaiting = () => {
             this.buffering = true;
         };
-        /* Anything that means the picture can move again. `loadstart` is in the list
-           because a new source clears the last one's failure: a playlist pointing the
-           player somewhere else must not keep showing the error from the entry
-           before. */
         this.handleReady = (event) => {
             this.buffering = false;
             if (event.type === 'loadstart') {
@@ -506,25 +133,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             if (owner === this && typeof navigator !== 'undefined' && navigator.mediaSession) {
                 navigator.mediaSession.playbackState = this.playing ? 'playing' : 'paused';
             }
-            /* Non-bubbling, which is what the platform sends and what makes these reach
-               a React consumer at all.
-             *
-             * `play`, `pause` and `ended` are in react-dom's `nonDelegatedEvents`, read
-             * out of the installed 19.2.8 rather than remembered: it concatenates the
-             * whole media list onto `beforetoggle cancel close invalid load scroll
-             * scrollend toggle`. React attaches those directly to `<video>`, `<audio>`
-             * and `<img>` and never to a custom element, so nothing at the root hears
-             * them. `bindReactHandler` is what closes that, and `reactPropFor` skips
-             * anything that bubbles, on the grounds that a bubbling relay is already
-             * reaching React's delegated listener and a second binding would double
-             * every call.
-             *
-             * So these three were sending `bubbles: true` into the one branch that
-             * refuses to bind, and `onPlay`, `onPause` and `onEnded` on `<helix-video>`
-             * were silent in React. The comment beside `reactPropFor` named this exact
-             * trio as fixed while this line kept it broken. Matching the platform's own
-             * propagation fixes it and is what `Image` already does with `load` and
-             * `error`. */
             this.dispatchEvent(new Event(event.type, { bubbles: false, composed: false }));
         };
         this.handleVolume = () => {
@@ -535,35 +143,11 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             this.loudness = video.volume;
             this.silent = video.muted;
         };
-        /**
-         * Draws the active cue ourselves, so it can be put where we want it.
-         *
-         * The browser renders cues inside the video's own box and there is no
-         * standard way to inset that box: a caption lands under the control bar and
-         * stays there. `::cue` styles the text and not the region, and the property
-         * that moves the region is a `-webkit-` internal that two of the three
-         * engines do not have.
-         *
-         * So the track is set to `hidden` rather than `showing`, which is the mode
-         * that keeps the cues coming without drawing them, and what it reports is
-         * rendered into a part of our own. That also makes captions styleable, which
-         * `::cue` only half allows.
-         */
         this.handleCue = () => {
-            /* The track that is showing, not the first one. With one track those are
-               the same and with two they are not, so a reader on the second language
-               was shown the first one's words. */
             const track = this.captionTracks[this.captionIndex] ?? this.video?.textTracks[0];
             const active = track?.activeCues?.[0];
             this.cue = active instanceof VTTCue ? active.getCueAsHTML() : undefined;
         };
-        /**
-         * Restarts the wait, on anything that counts as the reader being here.
-         *
-         * Pointer movement and focus both count, and both have to: a reader using the
-         * keyboard never moves a pointer, and a bar that only answered the mouse
-         * would leave them nothing to look at.
-         */
         this.stir = () => {
             this.idle = false;
             clearTimeout(this.idleTimer);
@@ -576,22 +160,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.handleFullscreenChange = () => {
             this.full = document.fullscreenElement === this;
         };
-        /**
-         * The keys every player uses, bound to this element rather than the document.
-         *
-         * A video is not a command palette: its keys belong to it while a reader is
-         * on it, and a page with two videos on it would otherwise have both answering
-         * the same press.
-         *
-         * Nothing is taken while focus is in a range. The scrubber and the volume are
-         * real inputs and the arrows are already theirs, so intercepting would mean
-         * seeking twice for one press.
-         */
         this.handleKeydown = (event) => {
-            /* Nothing at all where the browser draws the controls. Its own bar owns
-               Space, the arrows and the rest, and two handlers on one key is a video
-               that seeks twice or plays and immediately pauses. A consumer who asked
-               for the native controls asked for the native keyboard with them. */
             if (this.controls) {
                 return;
             }
@@ -651,15 +220,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             this.remoteConnected = this.video?.remote?.state === 'connected';
         };
     }
-    /**
-     * Whether the file this points at is ours to hand over.
-     *
-     * `blob:` and `data:` named rather than compared, because the rule `download`
-     * actually follows is same-origin *or one of those two*: a clip a consumer
-     * generated in the page has no origin to match and is theirs to save by
-     * definition. Comparing origins alone called both foreign, so the one case
-     * where a download certainly works was the one case it was not offered.
-     */
     get localFile() {
         if (this.src === '') {
             return false;
@@ -677,53 +237,30 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return false;
         }
     }
-    /** Whether this platform can do a named control at all. */
     offers(one) {
         if (one === 'pip') {
             return typeof document !== 'undefined' && document.pictureInPictureEnabled;
         }
-        /* Availability, not support. A device that can play this has to exist for
-           the button to mean anything: an AirPlay control with nothing to send to
-           is a control that opens an empty list, which is worse than no control.
-           `watchAvailability` is what answers that, and it answers late, so this
-           reads a flag the watch keeps rather than asking. */
         if (one === 'remote') {
             return this.remoteAvailable;
         }
-        /* A download needs something to download. `src` and not a slotted
-           `<source>`: the element chose one of those and which one is the
-           browser's business, so offering a specific file would be a guess about a
-           decision already made. */
         if (one === 'download') {
             return this.src !== '';
         }
-        /* Always offered, because there is nothing to check. Neither of these does
-           anything to the video: they say the reader asked, and whatever holds the
-           set answers. A player that hid them until it could prove a set existed
-           would be a player that cannot know. */
         if (one === 'next' || one === 'previous') {
             return true;
         }
-        /* A skip needs only a timeline, and a video that has none cannot be played
-           at all, so there is nothing here to check either. */
         if (one === 'forward' || one === 'rewind') {
             return true;
         }
         return one === 'speed';
     }
-    /** The extras asked for, in order, and only the ones this platform can do. */
     get extras() {
         return this.extraControls
             .split(/\s+/)
             .filter(Boolean)
             .filter((one) => this.offers(one));
     }
-    /**
-     * The controls asked for behind the overflow button, in order.
-     *
-     * A name in both lists is on the bar and not here. Drawing it twice is worse
-     * than either placement, and the bar is the one a reader can see.
-     */
     get overflow() {
         const onBar = new Set(this.extras);
         return this.overflowControls
@@ -731,35 +268,9 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             .filter(Boolean)
             .filter((one) => !onBar.has(one) && this.offers(one));
     }
-    /**
-     * The media's own state, under the platform's own names.
-     *
-     * **Published because there is no other way in.** The `<video>` is inside
-     * this shadow root and `querySelector` does not cross it, so a consumer
-     * asking where the video has reached has nowhere else to ask.
-     *
-     * **Read from the element, with the mirror as the fallback.** The element is
-     * the truth and the mirror is a render cache that a media event refreshes, so
-     * reading the mirror alone would answer with whatever the last `timeupdate`
-     * said rather than with where the video is now. The fallback is what answers
-     * on the server and before the first render, where there is no element and
-     * the mirror holds what markup asked for.
-     *
-     * **Accessors rather than reactive properties**, because none of these is a
-     * setting: they are the media's state, and a `@property` would give each one
-     * an attribute that a consumer could write and the element would then have to
-     * disagree with. Where the platform makes one writable this writes it
-     * through, and where the platform does not neither does this.
-     */
     get currentSrc() {
         return this.video?.currentSrc ?? '';
     }
-    /**
-     * Where playback has reached, in seconds.
-     *
-     * Writing seeks, through the same clamp `seek` uses, because a `currentTime`
-     * past the end is the one write the platform answers with an exception.
-     */
     get currentTime() {
         return this.video?.currentTime ?? this.position;
     }
@@ -767,7 +278,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.position = seconds;
         this.seek(seconds);
     }
-    /** The rate playback returns to, which `defaultPlaybackRate` names natively. */
     get defaultPlaybackRate() {
         return this.video?.defaultPlaybackRate ?? 1;
     }
@@ -777,19 +287,15 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             video.defaultPlaybackRate = rate;
         }
     }
-    /** How long the media runs, in seconds, and `NaN` until that is known. */
     get duration() {
         return this.video?.duration ?? this.knownDuration;
     }
-    /** Whether playback has run off the end. */
     get ended() {
         return this.video?.ended ?? false;
     }
-    /** Whether playback is stopped, which is the resting state and not an error. */
     get paused() {
         return this.video?.paused ?? !this.playing;
     }
-    /** How fast it plays, where 1 is the recorded speed. */
     get playbackRate() {
         return this.video?.playbackRate ?? this.rate;
     }
@@ -800,7 +306,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             video.playbackRate = rate;
         }
     }
-    /** Whether pitch is held steady when the rate changes. */
     get preservesPitch() {
         return this.video?.preservesPitch ?? true;
     }
@@ -810,25 +315,15 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             video.preservesPitch = preserve;
         }
     }
-    /** Whether it is currently moving to a new position. */
     get seeking() {
         return this.video?.seeking ?? false;
     }
-    /** The media's own height in pixels, and zero until the metadata has loaded. */
     get videoHeight() {
         return this.video?.videoHeight ?? 0;
     }
-    /** The media's own width in pixels, and zero until the metadata has loaded. */
     get videoWidth() {
         return this.video?.videoWidth ?? 0;
     }
-    /**
-     * Whether there is sound, now, which a reader's click moves.
-     *
-     * The live half of the pair above. Writing mutes or unmutes the media itself
-     * rather than the attribute, which is what the platform does and what the
-     * mute control here has always done directly.
-     */
     get muted() {
         return this.video?.muted ?? this.defaultMuted;
     }
@@ -839,7 +334,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             video.muted = quiet;
         }
     }
-    /** How loud it plays, 0 to 1. */
     get volume() {
         return this.video?.volume ?? this.loudness;
     }
@@ -853,22 +347,12 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     get video() {
         return this.renderRoot?.querySelector('[part="video"]') ?? null;
     }
-    /**
-     * Starts playing, where the platform allows it.
-     *
-     * The rejection is swallowed on purpose: a browser refuses `play()` when
-     * nothing the reader did asked for it, and that is a policy answer rather than
-     * a fault. What follows a refused play is a paused player showing its start
-     * control, which is the correct thing to be looking at.
-     */
     play() {
         void this.video?.play().catch(() => { });
     }
-    /** Stops, leaving the frame up. */
     pause() {
         this.video?.pause();
     }
-    /** Toggles playback, which is what every key and the button both come to. */
     toggle() {
         const video = this.video;
         if (!video) {
@@ -881,7 +365,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             this.pause();
         }
     }
-    /** Moves to a point in seconds, clamped to what exists. */
     seek(seconds) {
         const video = this.video;
         if (!video || !Number.isFinite(video.duration)) {
@@ -889,25 +372,10 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         video.currentTime = Math.min(Math.max(seconds, 0), video.duration);
     }
-    /**
-     * The scrubber's new position, and the reason these two are named at all.
-     *
-     * **The stop is the first line.** `input` is composed by specification, so a
-     * range inside this shadow root sends its own straight past the host to
-     * whoever is listening on it, and this component declares no `input`: a
-     * consumer binding one received the scrubber's and the volume rail's under a
-     * name Video never promised, carrying a seconds count or a level between zero
-     * and one rather than anything about the element.
-     *
-     * Every family that renders a native control needs this, not only the form
-     * controls: a media component with two rails in its chrome is neither a form
-     * control nor exempt from the mechanism.
-     */
     takeScrub(event) {
         event.stopPropagation();
         this.seek(Number(event.target.value));
     }
-    /** The volume rail's new level, stopped for the reason `takeScrub` carries. */
     takeVolume(event) {
         event.stopPropagation();
         const video = this.video;
@@ -917,19 +385,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         video.volume = Number(event.target.value);
         video.muted = false;
     }
-    /**
-     * Takes the page's media session, and tells the platform what is playing.
-     *
-     * On play rather than on render, which is the ownership rule: a page with two
-     * players gives the session to whichever one the reader started, so a
-     * headset's buttons land on what they are listening to rather than on
-     * whichever came first in the markup.
-     *
-     * The handlers are what make a headset's play, pause and skip work at all.
-     * Without them a platform falls back to guessing which element was meant,
-     * which is right often enough to hide the fault and wrong exactly when there
-     * are two.
-     */
     claimSession() {
         if (typeof navigator === 'undefined' || !navigator.mediaSession) {
             return;
@@ -947,16 +402,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
                 this.seek(details.seekTime);
             }
         });
-        /* The skip keys, and only where the consumer has said there is something to
-           skip to. A headset whose skip buttons do nothing is worse than one whose
-           skip buttons are not offered: the platform draws them from whether a
-           handler is set, so setting one unconditionally would put two dead keys on
-           every lock screen showing this video. */
         const skips = `${this.extraControls} ${this.overflowControls}`.split(/\s+/);
-        /* The platform asks for a length and we answer with ours, or with its
-           default where it did not say. A lock screen offering a skip that moves a
-           different distance than the button on the bar is one player with two
-           answers to the same gesture. */
         session.setActionHandler('seekbackward', (details) => {
             this.skipBy(-(details.seekOffset ?? SKIP_SECONDS));
         });
@@ -966,13 +412,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         session.setActionHandler('nexttrack', skips.includes('next') ? () => this.skip(false) : null);
         session.setActionHandler('previoustrack', skips.includes('previous') ? () => this.skip(true) : null);
     }
-    /**
-     * Moves by a fixed length, clamped by `seek`.
-     *
-     * Separate from the arrow keys, which move by 5 and by 10 with Shift. Those
-     * are a scrub; this is the gesture for "I missed that", and a reader who
-     * presses it twice expects twenty seconds rather than an accelerating jump.
-     */
     skipBy(seconds) {
         const video = this.video;
         if (!video) {
@@ -980,15 +419,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         this.seek(video.currentTime + seconds);
     }
-    /**
-     * The tracks a reader could choose between, in the order they were written.
-     *
-     * Filtered by kind, because `textTracks` also carries `chapters`, `metadata`
-     * and `descriptions`, and a menu offering "Chapters" as a subtitle language
-     * would be offering something that draws no words. Read off the video rather
-     * than off the slot: a `<track>` added later is in one and not the other, and
-     * the video is the one that has resolved them.
-     */
     get captionTracks() {
         const tracks = this.video?.textTracks;
         if (!tracks) {
@@ -996,18 +426,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         return [...tracks].filter((one) => one.kind === 'subtitles' || one.kind === 'captions');
     }
-    /**
-     * Shows one track and disables every other, or shows none at `-1`.
-     *
-     * Every other, rather than only the one that was on. Two tracks in `hidden`
-     * both fire `cuechange`, so the rendered cue becomes whichever fired last and
-     * a reader who switched language gets the two interleaved. Measured as two
-     * subtitles alternating line by line.
-     *
-     * `hidden`, never `showing`. Hidden is the mode where a track still fires
-     * `cuechange` and still fills `activeCues`, and the browser draws nothing,
-     * which is exactly what is wanted when something else is doing the drawing.
-     */
     showCaption(index) {
         const tracks = this.captionTracks;
         tracks.forEach((track, at) => {
@@ -1017,29 +435,15 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.captioned = index >= 0;
         this.cue = undefined;
     }
-    /** Turns captions on or off, which is what the button means with one track. */
     toggleCaptions() {
         if (this.captionTracks.length === 0) {
             return;
         }
         this.showCaption(this.captioned ? -1 : 0);
     }
-    /**
-     * Says the reader asked for another item, and does nothing else.
-     *
-     * There is nothing else it could do. A `<video>` plays one resource, so what
-     * comes before or after it is a fact this element does not hold: a playlist
-     * has it, or the consumer does. Announcing is the whole of the contribution,
-     * and the event bubbles so a wrapper hears it.
-     *
-     * The same call answers the button, the row in the overflow menu, and the
-     * skip keys on a headset, which is why the media session's handlers point
-     * here rather than at anything of their own.
-     */
     skip(back) {
         this.dispatchEvent(back ? new HelixPreviousEvent() : new HelixNextEvent());
     }
-    /** Steps through the speeds offered, which is what one button can do. */
     cycleSpeed() {
         const speeds = this.speeds
             .split(/\s+/)
@@ -1054,18 +458,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         video.playbackRate = next;
         this.rate = next;
     }
-    /**
-     * Starts watching for something to play this on, and stops on the way out.
-     *
-     * The Remote Playback API is the standard one, and it is what Safari
-     * implements for AirPlay and Chrome for Cast: one call covers both, where the
-     * older `webkitShowPlaybackTargetPicker` covers only the first. Firefox has
-     * neither, and `remote` simply being absent is what turns the control off
-     * there.
-     *
-     * `watchAvailability` returns an id that has to be canceled, or the callback
-     * outlives the element that owns it.
-     */
     async watchRemote() {
         const remote = this.video?.remote;
         if (!remote?.watchAvailability) {
@@ -1077,18 +469,13 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             });
         }
         catch {
-            /* Refused where the media is not remotable, which is a fact about the
-               source rather than an error to report: the control stays off. */
         }
     }
-    /** Opens the platform's own device picker. It has no list of its own. */
     async promptRemote() {
         try {
             await this.video?.remote?.prompt();
         }
         catch {
-            /* Dismissing the picker rejects, which is a reader saying no rather than
-               anything going wrong. */
         }
     }
     async togglePip() {
@@ -1102,21 +489,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         await video.requestPictureInPicture();
     }
-    /**
-     * Into fullscreen and back, and quiet about being refused.
-     *
-     * `requestFullscreen` rejects rather than returning false, and the two
-     * refusals a consumer will actually meet are a Permissions Policy that does
-     * not grant `fullscreen` to the frame the player is in, and a call without
-     * user activation. Both are `TypeError: Permissions check failed`, which is
-     * the same message for two different causes.
-     *
-     * Caught rather than `void`ed, or a refusal becomes an unhandled rejection
-     * naming neither the element nor the reason. The state stays honest either
-     * way, because `aria-pressed` follows `fullscreenchange` rather than this
-     * call, so a refused request leaves a button that correctly reports "not
-     * fullscreen".
-     */
     async toggleFullscreen() {
         try {
             if (document.fullscreenElement === this) {
@@ -1126,9 +498,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             await this.requestFullscreen();
         }
         catch (error) {
-            /* Reported rather than swallowed, and reported once. A player embedded in
-               a frame without the permission is the common case, and the fix is on
-               the frame rather than here, so the message has to say which. */
             console.warn(`<${this.localName}> could not enter fullscreen. If it is inside an iframe, that frame needs allow="fullscreen".`, error);
         }
     }
@@ -1142,14 +511,10 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.cued?.removeEventListener('cuechange', this.handleCue);
         this.cued = undefined;
         document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
-        /* The watch outlives the element unless it is canceled, and a callback
-           holding a removed element is a leak with a `@state` write on the end. */
         if (this.remoteWatch !== undefined) {
             void this.video?.remote?.cancelWatchAvailability?.(this.remoteWatch);
             this.remoteWatch = undefined;
         }
-        /* And the page's one media session goes back to nobody, but only if this
-           element is the one holding it. */
         if (owner === this) {
             owner = undefined;
             if (typeof navigator !== 'undefined' && navigator.mediaSession) {
@@ -1169,47 +534,16 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             void this.watchRemote();
         }
     }
-    /**
-     * Mirrors playback onto the host as `data-playing`.
-     *
-     * Because CSS cannot ask. `paused` is a property of a `<video>` and never an
-     * attribute, so `video:not([paused])` matches every video that has ever
-     * existed and a rule written on it hides the bar always, including on the
-     * paused video it was written to keep the bar up for.
-     *
-     * **A `data-` attribute is right here because of when it is written.** A fact
-     * that can be true on the first update mirrors to a custom state instead, or
-     * a consumer's server sends markup the element then grows an attribute on and
-     * React reports a mismatch it will not patch up. Nothing plays until somebody
-     * presses play, so this one is written long past hydration and there is
-     * nothing for it to disagree with. `data-closed` on `Toast.Item` and
-     * `data-scrolled` on `AppHeader` are the same case; `:state(open)` and
-     * `:state(checked)` are the other one.
-     */
     updated(changed) {
         super.updated?.(changed);
         this.toggleAttribute('data-playing', this.playing);
-        /* `data-idle` rather than a hover rule alone, so the stylesheet can say
-           "playing, and nobody has moved for a while" instead of "playing and the
-           pointer is not on it this instant". */
         this.toggleAttribute('data-idle', this.idle && this.playing);
-        /* A media element decides what to play once, when it is created or when it
-           is told to look again. Copies that arrive after that are markup it has
-           already walked past. */
         if (changed.has('media')) {
             const video = this.video;
             video?.load();
             this.captionCount = this.captionTracks.length;
         }
     }
-    /**
-     * One named control, as a button on the bar.
-     *
-     * A method rather than four branches inlined, because the same four names are
-     * asked for twice now, once for the bar and once for the menu behind it, and
-     * two lists that have to stay in step is how a control ends up offered in one
-     * place and not the other.
-     */
     renderExtra(one) {
         if (one === 'remote') {
             return html `<button
@@ -1222,9 +556,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         ${drawIcon(airplay)}
       </button>`;
         }
-        /* Two templates rather than one with the name bound in, for the reason
-           written under `previous` below: a part is read from the source as a
-           literal, so `part=${one}` is a part no check can prove anything about. */
         if (one === 'rewind') {
             return html `<button
         part="rewind"
@@ -1255,10 +586,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         ${this.rate}x
       </button>`;
         }
-        /* Two templates rather than one with the name bound in, because a part is
-           read from the source as a literal: `part=${one}` is a part no stylesheet
-           can be proved to reach, and nothing can match it against the
-           documentation either. */
         if (one === 'previous') {
             return html `<button
         part="previous"
@@ -1280,19 +607,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       </button>`;
         }
         if (one === 'download') {
-            /* A real anchor, because saving a file is the browser's job and there is
-               no scripted version of it worth having.
-             *
-             * **`download` only where it means something.** The attribute is honored
-             * for a same-origin file and ignored for any other, whatever headers come
-             * back, so on a video served from a CDN it does nothing and the press
-             * *navigates*: measured, clicking it took the whole page to the mp4, which
-             * reads as the player disappearing. Writing an attribute the browser will
-             * ignore is a lie in the markup, so it is written only when it holds.
-             *
-             * A new tab where it does not. That is the best a page can do with someone
-             * else's file, and it is the difference between handing the reader the
-             * video and taking away the one they were watching. */
             const local = this.localFile;
             return html `<a
         part="download"
@@ -1314,24 +628,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       ${drawIcon(pictureInPicture)}
     </button>`;
     }
-    /**
-     * A toggle for one track, a menu for several, and nothing for none.
-     *
-     * No menu at one, because a menu of a single language plus "Off" is a
-     * two-state control wearing a popover, and the button already says which
-     * state it is in through `aria-pressed`. The moment there are two the button
-     * cannot say which one is on, so it stops being a button.
-     *
-     * The label comes off the track: `label` where the markup gave one, and
-     * `srclang` where it did not, because a `<track>` with neither is a track
-     * nobody can choose between and that is the markup's fault to fix, not this
-     * component's to paper over with "Track 2".
-     */
     renderCaptions() {
-        /* Branched on the state rather than on the getter, so the render that draws
-           this is one the state scheduled. Reading the tracks for their labels is
-           fine either way: by the time this runs, the count that got us here was
-           taken from the same list. */
         const tracks = this.captionTracks;
         if (this.captionCount === 0) {
             return nothing;
@@ -1375,14 +672,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         </${this.tag('menu-item')}>`)}
     </${this.tag('menu')}>`;
     }
-    /*
-     * The same control as a row in the overflow menu.
-     *
-     * The label is words rather than a mark, which is the difference between a
-     * bar and a menu: a row has the width for a name and a reader scanning one is
-     * reading rather than recognizing. `download` is a linked row, which is what
-     * `Menu.Item`'s `href` is for.
-     */
     renderOverflowItem(one) {
         if (one === 'remote') {
             return html `<${this.tag('menu-item')} part="entry"
@@ -1511,16 +800,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
               </button>
               ${this.overflow.map((one) => this.renderOverflowItem(one))}
             </${this.tag('menu')}>`}
-      ${
-        /* Whatever else belongs on this bar, put here by whoever knows.
-           A playlist's dropdown is the case this was written for and the video
-           deliberately knows nothing about it: `helix-video-playlist` renders a
-           menu of its own entries into this slot, so the popover machinery and
-           the notion of a set of clips both stay in the component that is about
-           a set of clips. Before fullscreen, which is always the last thing on
-           a control bar because it is the one that changes what the bar is
-           attached to. */
-        ''}
+      ${''}
       <slot name="controls"></slot>
       <button
         part="fullscreen"
@@ -1534,11 +814,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     </div>`;
     }
     render() {
-        /* One focusable box around the lot, which is where the keys land. A video
-           without native controls is not focusable at all, and the buttons under it
-           are, so without this a reader could tab to Play and never to the picture
-           the keys are about. `role="group"` with a name so what they landed on
-           announces as something rather than as an unnamed div. */
         return html `<div
         part="stage"
         tabindex=${this.controls ? nothing : '0'}
@@ -1547,8 +822,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         @keydown=${this.handleKeydown}
         @pointermove=${this.stir}
         @pointerleave=${() => {
-            /* Leaving is the one case that does not wait: the reader has gone
-               somewhere else, and there is nothing to reach for. */
             clearTimeout(this.idleTimer);
             this.idle = true;
         }}
@@ -1604,21 +877,10 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
            the first one ends it. -->
       <span aria-hidden="true" hidden><slot @slotchange=${this.handleMedia}></slot></span>
       ${this.cue === undefined ? nothing : html `<p aria-live="off" part="cue">${this.cue}</p>`}
-      ${
-        /* Top left, over the frame, and empty unless something is slotted.
-           A player inside a set has somewhere to go back to and a player on its
-           own does not, so the video draws whatever it is handed and decides
-           nothing: a `back` property would be this component holding an opinion
-           about navigation, which is the consumer's. */
-        ''}
+      ${''}
       <div part="back"><slot name="back"></slot></div>
       <slot name="poster" part="poster"></slot>
-      ${
-        /* A live region rather than a spinning box, because the reader who most
-           needs to be told the picture is waiting is the one who cannot see it
-           spin. `polite`, so it waits its turn, and it goes when the frame moves
-           again. */
-        this.buffering && !this.failed
+      ${this.buffering && !this.failed
             ? html `<div
               part="loading"
               role="status"
@@ -1628,11 +890,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
               ${this.loadingLabel}
             </div>`
             : nothing}
-      ${
-        /* And the other thing a frozen frame can mean. `alert`, because nothing
-           further is going to happen and a reader waiting politely for a video
-           that will never load is waiting forever. */
-        this.failed
+      ${this.failed
             ? html `<div
               part="failure"
               role="alert"
@@ -1640,16 +898,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
               ${this.errorLabel}
             </div>`
             : nothing}
-      ${
-        /* Whenever it is not playing, which is what the mark means: press this
-           to play. Not only before the first play, which would make the mark
-           mean two different things at two moments that are the same state.
-           Every player a reader has used shows it on pause, and the one who
-           paused to study a frame clears it by pressing the thing in the way.
-
-           Not drawn at all where the browser draws its own controls, since that
-           bar has a play button and two would be two. */
-        this.controls ||
+      ${this.controls ||
             this.playing ||
             this.buffering ||
             this.failed ||