ts-video-player 0.1.8 → 0.1.9

package/dist/{chunk-hvjcmbfn.js → chunk-fvxawgp5.js}

@@ -16,7 +16,7 @@ import {
   detectPipAvailability2,
   enterPiP2,
   exitPiP2
-} from "./chunk-rhykj0qy.js";
+} from "./chunk-pvq6e7gz.js";
 
 // src/core/media-session.ts
 function isMediaSessionSupported2() {
@@ -2848,6 +2848,8 @@ class Player2 {
       toggleCaptions: () => this.toggleCaptions(),
       seekBackward: () => this.seekBy(-5),
       seekForward: () => this.seekBy(5),
+      seekBackwardLong: () => this.seekBy(-10),
+      seekForwardLong: () => this.seekBy(10),
       volumeUp: () => this.setVolume(Math.min(1, this.state.volume + 0.1)),
       volumeDown: () => this.setVolume(Math.max(0, this.state.volume - 0.1)),
       speedUp: () => this.setPlaybackRate(Math.min(4, this.state.playbackRate + 0.25)),
@@ -3088,7 +3090,7 @@ class Player2 {
       this.announce(label(this._el, "playing"));
     });
     provider.on("pause", () => {
-      this._store.set("paused", true);
+      this._store.batch({ paused: true, playing: false, playbackState: "paused" });
       this._events.emit("pause");
       this.announce(label(this._el, "paused"));
     });
@@ -3357,7 +3359,7 @@ class VideoPlayerElement2 extends HTMLElementBase {
     this._disconnectId++;
     if (this._player)
       return;
-    const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+    const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open", delegatesFocus: true });
     this._container = document.createElement("div");
     this._container.setAttribute("part", "container");
     this._container.style.cssText = "position:relative;width:100%;height:100%;";
@@ -3643,6 +3645,8 @@ class MediaPlayButton2 extends HTMLElementBase {
             background: transparent; border: none; color: inherit; cursor: pointer;
           }
           button:hover { opacity: 0.8; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "play")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
@@ -3704,6 +3708,8 @@ class MediaMuteButton2 extends HTMLElementBase {
             background: transparent; border: none; color: inherit; cursor: pointer;
           }
           button:hover { opacity: 0.8; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "mute")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
@@ -3753,6 +3759,8 @@ class MediaFullscreenButton2 extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "enterFullscreen")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
@@ -3808,6 +3816,8 @@ class MediaPipButton2 extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "enterPiP")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
@@ -4068,6 +4078,8 @@ class MediaProgressBar2 extends HTMLElementBase {
             border-top-color: rgba(0,0,0,0.85);
           }
           .container:hover .tooltip { opacity: 1; }
+          /* A finger needs more than the 20px a mouse does. */
+          @media (pointer: coarse) { .container { height: 36px; } .thumb { width: 18px; height: 18px; } }
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
@@ -4216,6 +4228,8 @@ class MediaVolumeSlider2 extends HTMLElementBase {
             transition: transform 0.1s;
           }
           .container:hover .thumb { transform: translate(-50%, -50%) scale(1.2); }
+          /* A finger needs more than the 20px a mouse does. */
+          @media (pointer: coarse) { .container { height: 36px; } .thumb { width: 18px; height: 18px; } }
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"
@@ -4412,6 +4426,8 @@ class MediaSettingsMenu2 extends HTMLElementBase {
           .item[aria-checked="true"]::before { content: '\\2713'; }
           .item[aria-checked="false"]::before { content: ''; min-width: 12px; display: inline-block; }
           .back { font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.2); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button class="trigger" part="trigger" type="button"
                 aria-label="${label(this, "settings")}" aria-haspopup="true" aria-expanded="false">
@@ -4641,6 +4657,8 @@ class MediaSeekButton2 extends HTMLElementBase {
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
           button:disabled { cursor: default; opacity: .45; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button"></button>
       `;
@@ -4686,6 +4704,8 @@ class MediaPlaybackRateButton2 extends HTMLElementBase {
           button { min-width: 42px; height: 40px; padding: 0 8px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; }
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "speed")}"></button>
       `;
@@ -4736,6 +4756,8 @@ class MediaAirplayButton2 extends HTMLElementBase {
           button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-airplay-active-color, #38bdf8); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "airPlayPlay")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${AIRPLAY_ICON}"/></svg>
@@ -4795,6 +4817,8 @@ class MediaLiveButton2 extends HTMLElementBase {
           button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
           i { width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; }
           :host(:not([at-live-edge])) button { opacity: 0.72; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "seekToLive")}"><i aria-hidden="true"></i><span>${label(this, "live")}</span></button>
       `;
@@ -4891,6 +4915,8 @@ class MediaRemotePlaybackButton2 extends HTMLElementBase {
           button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-remote-active-color, #38bdf8); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, "remotePlayback")}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${REMOTE_ICON}"/></svg>

package/dist/{chunk-ds1nj487.js → chunk-ndbfytd6.js}

@@ -8,7 +8,7 @@ import {
   probeVolumeAvailability2,
   detectFullscreenAvailability2,
   detectPipAvailability2
-} from "./chunk-rhykj0qy.js";
+} from "./chunk-pvq6e7gz.js";
 
 // src/features/playback.ts
 var playback2 = {

package/dist/{chunk-rhykj0qy.js → chunk-pvq6e7gz.js}

@@ -383,7 +383,9 @@ class MediaEventsNormalizer2 {
 }
 function onFullscreenChange2(handler) {
   const events = ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"];
-  const listener = () => {
+  const listener = (event) => {
+    if (event && typeof CustomEvent !== "undefined" && event instanceof CustomEvent)
+      return;
     const fullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
     handler(fullscreen);
   };
@@ -411,8 +413,8 @@ var DEFAULT_KEYBOARD_SHORTCUTS2 = {
   c: "toggleCaptions",
   ArrowLeft: "seekBackward",
   ArrowRight: "seekForward",
-  j: "seekBackward",
-  l: "seekForward",
+  j: "seekBackwardLong",
+  l: "seekForwardLong",
   ArrowUp: "volumeUp",
   ArrowDown: "volumeDown",
   ">": "speedUp",
@@ -463,6 +465,18 @@ function createKeyboardHandler2(actions, options = {}) {
       case "seekForward":
         actions.seekForward();
         break;
+      case "seekBackwardLong":
+        if (actions.seekBackwardLong)
+          actions.seekBackwardLong();
+        else
+          actions.seekBackward();
+        break;
+      case "seekForwardLong":
+        if (actions.seekForwardLong)
+          actions.seekForwardLong();
+        else
+          actions.seekForward();
+        break;
       case "volumeUp":
         actions.volumeUp();
         break;

package/dist/core/events.d.ts

@@ -78,6 +78,9 @@ export interface KeyboardActions {
     toggleCaptions(): void;
     seekBackward(): void;
     seekForward(): void;
+    /** J and L: ten seconds, as YouTube's keys go (the arrows are five). Falls back to seekBackward/seekForward. */
+    seekBackwardLong?(): void;
+    seekForwardLong?(): void;
     volumeUp(): void;
     volumeDown(): void;
     speedUp(): void;

package/dist/elements/index.js

@@ -23,7 +23,7 @@ import {
   MediaErrorDisplay2,
   MediaRemotePlaybackButton2,
   registerElements2
-} from "../chunk-hvjcmbfn.js";
+} from "../chunk-fvxawgp5.js";
 export {
   MediaAirplayButton2 as MediaAirplayButton,
   MediaErrorDisplay2 as MediaErrorDisplay,

package/dist/features/index.js

@@ -11,7 +11,7 @@ import {
   videoFeatures2,
   audioFeatures2,
   minimalFeatures2
-} from "../chunk-ds1nj487.js";
+} from "../chunk-ndbfytd6.js";
 export {
   audioFeatures2 as audioFeatures,
   captions2 as captions,

package/dist/index.js

@@ -63,7 +63,7 @@ import {
   applyPosition2,
   MediaSettingsMenu2,
   registerElements2
-} from "./chunk-hvjcmbfn.js";
+} from "./chunk-fvxawgp5.js";
 import {
   playback2,
   volume2,
@@ -77,7 +77,7 @@ import {
   videoFeatures2,
   audioFeatures2,
   minimalFeatures2
-} from "./chunk-ds1nj487.js";
+} from "./chunk-ndbfytd6.js";
 import {
   shallowEqual2,
   createSignal2,
@@ -118,7 +118,7 @@ import {
   enterPiP2,
   exitPiP2,
   detectAllFeatures2
-} from "./chunk-rhykj0qy.js";
+} from "./chunk-pvq6e7gz.js";
 // src/core/audio-gain.ts
 class AudioGain {
   media;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-video-player",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A modern, framework-agnostic video player with deep stx integration",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",

package/src/core/events.ts

@@ -208,7 +208,12 @@ export class MediaEventsNormalizer {
 export function onFullscreenChange(handler: (fullscreen: boolean) => void): () => void {
   const events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']
 
-  const listener = () => {
+  const listener = (event?: Event) => {
+    // The browser's own change only. <video-player> re-dispatches the player's
+    // events on itself, bubbling and composed, under the same names; its
+    // "fullscreenchange" reached this document listener, which announced it
+    // again, and the two fed each other until the stack overflowed.
+    if (event && typeof CustomEvent !== 'undefined' && event instanceof CustomEvent) return
     const fullscreen = !!(
       document.fullscreenElement ||
       (document as any).webkitFullscreenElement ||
@@ -261,8 +266,8 @@ export const DEFAULT_KEYBOARD_SHORTCUTS: Record<string, string> = {
   c: 'toggleCaptions',
   ArrowLeft: 'seekBackward',
   ArrowRight: 'seekForward',
-  j: 'seekBackward',
-  l: 'seekForward',
+  j: 'seekBackwardLong',
+  l: 'seekForwardLong',
   ArrowUp: 'volumeUp',
   ArrowDown: 'volumeDown',
   '>': 'speedUp',
@@ -292,6 +297,9 @@ export interface KeyboardActions {
   toggleCaptions(): void
   seekBackward(): void
   seekForward(): void
+  /** J and L: ten seconds, as YouTube's keys go (the arrows are five). Falls back to seekBackward/seekForward. */
+  seekBackwardLong?(): void
+  seekForwardLong?(): void
   volumeUp(): void
   volumeDown(): void
   speedUp(): void
@@ -351,6 +359,14 @@ export function createKeyboardHandler(
       case 'seekForward':
         actions.seekForward()
         break
+      case 'seekBackwardLong':
+        if (actions.seekBackwardLong) actions.seekBackwardLong()
+        else actions.seekBackward()
+        break
+      case 'seekForwardLong':
+        if (actions.seekForwardLong) actions.seekForwardLong()
+        else actions.seekForward()
+        break
       case 'volumeUp':
         actions.volumeUp()
         break

package/src/elements/media-airplay-button.ts

@@ -27,6 +27,8 @@ export class MediaAirplayButton extends HTMLElementBase {
           button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-airplay-active-color, #38bdf8); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'airPlayPlay')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${AIRPLAY_ICON}"/></svg>

package/src/elements/media-fullscreen-button.ts

@@ -28,6 +28,8 @@ export class MediaFullscreenButton extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'enterFullscreen')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">

package/src/elements/media-live-button.ts

@@ -20,6 +20,8 @@ export class MediaLiveButton extends HTMLElementBase {
           button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
           i { width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; }
           :host(:not([at-live-edge])) button { opacity: 0.72; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'seekToLive')}"><i aria-hidden="true"></i><span>${label(this, 'live')}</span></button>
       `

package/src/elements/media-mute-button.ts

@@ -33,6 +33,8 @@ export class MediaMuteButton extends HTMLElementBase {
             background: transparent; border: none; color: inherit; cursor: pointer;
           }
           button:hover { opacity: 0.8; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'mute')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">

package/src/elements/media-pip-button.ts

@@ -27,6 +27,8 @@ export class MediaPipButton extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'enterPiP')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">

package/src/elements/media-play-button.ts

@@ -27,6 +27,8 @@ export class MediaPlayButton extends HTMLElementBase {
             background: transparent; border: none; color: inherit; cursor: pointer;
           }
           button:hover { opacity: 0.8; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'play')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">

package/src/elements/media-playback-rate-button.ts

@@ -18,6 +18,8 @@ export class MediaPlaybackRateButton extends HTMLElementBase {
           button { min-width: 42px; height: 40px; padding: 0 8px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; }
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'speed')}"></button>
       `

package/src/elements/media-progress-bar.ts

@@ -65,6 +65,8 @@ export class MediaProgressBar extends HTMLElementBase {
             border-top-color: rgba(0,0,0,0.85);
           }
           .container:hover .tooltip { opacity: 1; }
+          /* A finger needs more than the 20px a mouse does. */
+          @media (pointer: coarse) { .container { height: 36px; } .thumb { width: 18px; height: 18px; } }
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"

package/src/elements/media-remote-playback-button.ts

@@ -32,6 +32,8 @@ export class MediaRemotePlaybackButton extends HTMLElementBase {
           button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-remote-active-color, #38bdf8); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button" aria-label="${label(this, 'remotePlayback')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${REMOTE_ICON}"/></svg>

package/src/elements/media-seek-button.ts

@@ -17,6 +17,8 @@ export class MediaSeekButton extends HTMLElementBase {
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
           button:disabled { cursor: default; opacity: .45; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button"></button>
       `

package/src/elements/media-settings-menu.ts

@@ -54,6 +54,8 @@ export class MediaSettingsMenu extends HTMLElementBase {
           .item[aria-checked="true"]::before { content: '\\2713'; }
           .item[aria-checked="false"]::before { content: ''; min-width: 12px; display: inline-block; }
           .back { font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.2); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button class="trigger" part="trigger" type="button"
                 aria-label="${say(this, 'settings')}" aria-haspopup="true" aria-expanded="false">

package/src/elements/media-volume-slider.ts

@@ -42,6 +42,8 @@ export class MediaVolumeSlider extends HTMLElementBase {
             transition: transform 0.1s;
           }
           .container:hover .thumb { transform: translate(-50%, -50%) scale(1.2); }
+          /* A finger needs more than the 20px a mouse does. */
+          @media (pointer: coarse) { .container { height: 36px; } .thumb { width: 18px; height: 18px; } }
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"

package/src/elements/video-player.ts

@@ -31,7 +31,9 @@ export class VideoPlayerElement extends HTMLElementBase {
     if (this._player) return
 
     // Create shadow DOM
-    const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open' })
+    // delegatesFocus: focusing <video-player> (a dialog's first focus, an
+    // `autofocus`) puts focus on the player itself, where its keys work.
+    const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open', delegatesFocus: true })
 
     // Container
     this._container = document.createElement('div')

package/src/player.ts

@@ -263,6 +263,8 @@ export class Player implements IPlayer {
       toggleCaptions: () => this.toggleCaptions(),
       seekBackward: () => this.seekBy(-5),
       seekForward: () => this.seekBy(5),
+      seekBackwardLong: () => this.seekBy(-10),
+      seekForwardLong: () => this.seekBy(10),
       volumeUp: () => this.setVolume(Math.min(1, this.state.volume + 0.1)),
       volumeDown: () => this.setVolume(Math.max(0, this.state.volume - 0.1)),
       speedUp: () => this.setPlaybackRate(Math.min(4, this.state.playbackRate + 0.25)),
@@ -599,7 +601,10 @@ export class Player implements IPlayer {
     })
 
     provider.on('pause', () => {
-      this._store.set('paused', true)
+      // Not playing any more either: the controls hide only while playing,
+      // and a paused player that still said `playing` hid them over a still
+      // frame, and told everyone reading state.playing it was still going.
+      this._store.batch({ paused: true, playing: false, playbackState: 'paused' })
       this._events.emit('pause')
       this.announce(label(this._el, 'paused'))
     })