@banou/media-player 0.8.0 → 0.8.2

package/dist/index.js

@@ -18,7 +18,7 @@ var ee = {
 	selectAudioTrack: () => {},
 	hideUI: !1,
 	setHideUI: () => {},
-	togglePictureInPicture: () => {},
+	togglePictureInPicture: null,
 	playbackError: null,
 	ready: !1,
 	setSourceState: () => {}
@@ -191,7 +191,7 @@ var ee = {
 	}, [m]), u;
 }, B = (e, t) => {
 	let n = P(), r = c(null);
-	return o(() => {
+	o(() => {
 		if (!e || !t) return;
 		let a = i({
 			video: e,
@@ -205,11 +205,13 @@ var ee = {
 		e,
 		t,
 		n
-	]), a(() => {
+	]);
+	let s = a(() => {
 		r.current?.toggle().catch((e) => {
 			console.warn("picture in picture was refused", e);
 		});
 	}, []);
+	return e && t ? s : null;
 }, V = {
 	headings: {
 		large: "\n      font-weight: 600;\n      font-size: calc(2.8 * var(--mp-unit));\n      line-height: calc(3.4 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(3.4 * var(--mp-unit));\n        line-height: calc(4.1 * var(--mp-unit));\n      }\n    ",
@@ -249,30 +251,62 @@ var ee = {
   top: 0;
   left: 0;
   width: 100%;
-  padding: calc(1.2 * var(--mp-unit)) calc(1.6 * var(--mp-unit));
-  /* clears a notch once the player is fullscreen; resolves to zero everywhere else */
-  padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
-  ${V.headings.small}
-  color: white;
-  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
+  /* the video underneath keeps the click that toggles playback; anything in the slot that needs a
+     pointer takes it back for itself */
   pointer-events: none;
 
-  /* one line with an ellipsis until there is width to wrap, since a release filename would
-     otherwise run to four lines on a phone */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex;
+  align-items: flex-start;
+  gap: calc(1.6 * var(--mp-unit));
+
+  /* longhands per breakpoint, never the shorthand: a nested at-rule is hoisted after the rule it
+     sits in, so a shorthand in a media query would override the longhands above it and silently
+     drop the safe-area insets. Those clear a notch once the player is fullscreen and resolve to
+     zero everywhere else. */
+  padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
+  padding-bottom: calc(1.2 * var(--mp-unit));
+  padding-left: calc(calc(1.6 * var(--mp-unit)) + env(safe-area-inset-left, 0px));
+  padding-right: calc(calc(1.6 * var(--mp-unit)) + env(safe-area-inset-right, 0px));
 
   @media (min-width: 768px) {
-    padding: calc(2.4 * var(--mp-unit));
     padding-top: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
-    white-space: normal;
-    overflow: visible;
+    padding-bottom: calc(2.4 * var(--mp-unit));
+    padding-left: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-left, 0px));
+    padding-right: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-right, 0px));
   }
 
   background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
-  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
+  /* visibility, not only opacity: a slot child that took pointer events back would otherwise stay
+     hoverable while faded out, popping a tooltip over nothing. It cascades where pointer-events
+     does not, and transitioning it holds the element visible for the length of the fade. */
+  transition: opacity 0.1s cubic-bezier(.4,0,1,1), visibility 0.1s;
+
+  .title {
+    ${V.headings.small}
+    color: white;
+    text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+
+    /* one line with an ellipsis until there is width to wrap, since a release filename would
+       otherwise run to four lines on a phone */
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @media (min-width: 768px) {
+      white-space: normal;
+      overflow: visible;
+    }
+  }
+
+  /* pinned right with or without a title, so an app's readout does not jump sideways when a
+     filename arrives late */
+  .app-slot {
+    margin-left: auto;
+    flex: none;
+  }
 `, oe = u`
   position: absolute;
   inset: 0;
@@ -303,21 +337,28 @@ var ee = {
   ${V.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, ce = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", le = ({ onCanvasRef: e }) => {
-	let t = P((e) => e.title), n = P((e) => e.hideUI), r = P((e) => e.playbackError), i = P((e) => e.ready), a = P((e) => e.size), o = P((e) => e.waiting);
+`, ce = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", le = ({ onCanvasRef: e, overlay: t }) => {
+	let n = P((e) => e.title), r = P((e) => e.hideUI), i = P((e) => e.playbackError), a = P((e) => e.ready), o = P((e) => e.size), s = P((e) => e.waiting);
 	return /* @__PURE__ */ y(_, { children: [
-		t ? /* @__PURE__ */ v("div", {
+		n || t ? /* @__PURE__ */ y("div", {
 			css: ae,
-			style: { ...n ? {
+			style: { ...r ? {
 				opacity: "0",
+				visibility: "hidden",
 				pointerEvents: "none"
 			} : {} },
-			children: t
+			children: [n ? /* @__PURE__ */ v("div", {
+				className: "title",
+				children: n
+			}) : void 0, t ? /* @__PURE__ */ v("div", {
+				className: "app-slot",
+				children: t
+			}) : void 0]
 		}) : void 0,
-		(a ? !i : o) && !r ? /* @__PURE__ */ v("div", { css: oe }) : void 0,
-		r ? /* @__PURE__ */ v("div", {
+		(o ? !a : s) && !i ? /* @__PURE__ */ v("div", { css: oe }) : void 0,
+		i ? /* @__PURE__ */ v("div", {
 			css: se,
-			children: ce(r)
+			children: ce(i)
 		}) : void 0,
 		/* @__PURE__ */ v("canvas", {
 			ref: e,
@@ -1384,7 +1425,7 @@ position: relative;
 				className: "right",
 				children: [
 					/* @__PURE__ */ v(ve, {}),
-					/* @__PURE__ */ v(q, {
+					c ? /* @__PURE__ */ v(q, {
 						id: "picture-in-picture",
 						text: /* @__PURE__ */ v("button", {
 							className: "picture-in-picture",
@@ -1393,7 +1434,7 @@ position: relative;
 							children: /* @__PURE__ */ v("img", { src: me })
 						}),
 						toolTipText: /* @__PURE__ */ v("span", { children: "Picture in picture" })
-					}),
+					}) : null,
 					/* @__PURE__ */ v(q, {
 						id: "full-screen",
 						tooltipPlace: "top-end",
@@ -1464,8 +1505,10 @@ position: relative;
 		},
 		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ v(le, { onCanvasRef: n }),
-			r,
+			/* @__PURE__ */ v(le, {
+				onCanvasRef: n,
+				overlay: r
+			}),
 			/* @__PURE__ */ v(Te, {}),
 			/* @__PURE__ */ y("div", {
 				className: "video",
@@ -1556,6 +1599,19 @@ position: relative;
    */
   --mp-unit: 10px;
 
+  /**
+   * The other half of owning the chrome's own scale.
+   *
+   * Every control here is authored against a border box, which this library's dev app sets globally
+   * and a host page has no reason to. Shipped without it, anything that is \`width: 100%\` AND carries
+   * padding overflows its own box: the top bar ran 32px past the player and clipped the right end of
+   * whatever the app had put there. Scoped to the player's subtree so it cannot reach the host's
+   * layout, and only \`box-sizing\`, because zeroing margins here would reach the app's own content.
+   */
+  &, & *, & *::before, & *::after {
+    box-sizing: border-box;
+  }
+
   display: flex;
   justify-content: center;
   background-color: #111;

package/dist/react/components/chrome.d.ts

@@ -4,7 +4,7 @@ export type ChromeProps = {
     /** Absent means render no video element: the media belongs to someone else and arrives as children. */
     onVideoRef?: (element: HTMLVideoElement | null) => void;
     onCanvasRef: (element: HTMLCanvasElement | null) => void;
-    /** Above the control bar and outside the click-to-pause region, unlike `children`. */
+    /** The app's own content, drawn in the top bar beside the title, unlike `children`. */
     overlay?: ReactNode;
     children?: ReactNode;
 };

package/dist/react/components/overlay.d.ts

@@ -1,4 +1,8 @@
-export declare const Overlay: ({ onCanvasRef }: {
+import type { ReactNode } from 'react';
+export type OverlayProps = {
     onCanvasRef: (element: HTMLCanvasElement | null) => void;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+    /** The app's own content, drawn at the right of the top bar next to the title. */
+    overlay?: ReactNode;
+};
+export declare const Overlay: ({ onCanvasRef, overlay }: OverlayProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Overlay;

package/dist/react/hooks/use-picture-in-picture.d.ts

@@ -1,2 +1,2 @@
 /** Picture in picture with the subtitles composited in. */
-export declare const usePictureInPicture: (video: HTMLVideoElement | null, canvas: HTMLCanvasElement | null) => () => void;
+export declare const usePictureInPicture: (video: HTMLVideoElement | null, canvas: HTMLCanvasElement | null) => (() => void) | null;

package/dist/react/player.d.ts

@@ -13,7 +13,7 @@ export declare const Player: import("@videojs/react").CreatePlayerResult<import(
     selectAudioTrack: (id: string | number) => void;
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
-    togglePictureInPicture: () => void;
+    togglePictureInPicture: (() => void) | null;
     playbackError: unknown;
     ready: boolean;
     setSourceState: (partial: Partial<import("./source-feature").SourceState>) => void;

package/dist/react/source-feature.d.ts

@@ -50,8 +50,16 @@ export type SourceState = {
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
-    /** Owned here, not by `pip`: that watches the media element, and the window holds a mirror. */
-    togglePictureInPicture: () => void;
+    /**
+     * Owned here, not by `pip`: that watches the media element, and the window holds a mirror.
+     *
+     * null means the control is not offered at all. Locally that is "no element yet". For a media the
+     * player does not own it means the source cannot do it, and the difference matters: the compositing
+     * this does needs a local element to draw, and even a source that forwards the request cannot
+     * report the resulting STATE back, since `document.pictureInPictureElement` is never a proxy. A
+     * button that toggles nothing and never lights up is worse than no button.
+     */
+    togglePictureInPicture: (() => void) | null;
     /** Set when the pipeline fails. Cleared when it recovers. */
     playbackError: unknown;
     /** Whether the engine has produced its first media segment. */
@@ -89,8 +97,16 @@ export declare const sourceFeature: import("@videojs/react").PlayerFeature<{
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
-    /** Owned here, not by `pip`: that watches the media element, and the window holds a mirror. */
-    togglePictureInPicture: () => void;
+    /**
+     * Owned here, not by `pip`: that watches the media element, and the window holds a mirror.
+     *
+     * null means the control is not offered at all. Locally that is "no element yet". For a media the
+     * player does not own it means the source cannot do it, and the difference matters: the compositing
+     * this does needs a local element to draw, and even a source that forwards the request cannot
+     * report the resulting STATE back, since `document.pictureInPictureElement` is never a proxy. A
+     * button that toggles nothing and never lights up is worse than no button.
+     */
+    togglePictureInPicture: (() => void) | null;
     /** Set when the pipeline fails. Cleared when it recovers. */
     playbackError: unknown;
     /** Whether the engine has produced its first media segment. */

package/dist/react/video-player.d.ts

@@ -17,8 +17,13 @@ type CommonOptions = {
     title?: string;
     autoplay?: boolean;
     /**
-     * Drawn above the control bar and outside the click-to-pause region, for whatever the app has to
-     * say over the video. `children` land next to the media instead, below the chrome.
+     * The app's own readout, drawn at the right of the top bar beside `title`, for whatever it has to
+     * say over the video. It shares the title's gradient and fades with the rest of the chrome, so a
+     * running counter does not sit over the picture once the controls have hidden themselves.
+     *
+     * The slot itself takes no pointer events, so a click still reaches the video and toggles
+     * playback; content that needs a pointer (a tooltip anchor, a button) sets `pointer-events: auto`
+     * on itself. `children` land next to the media instead, below the chrome.
      */
     overlay?: ReactNode;
     onSeek?: (fraction: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",

package/src/lib/react/components/chrome.tsx

@@ -49,7 +49,7 @@ export type ChromeProps = {
   /** Absent means render no video element: the media belongs to someone else and arrives as children. */
   onVideoRef?: (element: HTMLVideoElement | null) => void
   onCanvasRef: (element: HTMLCanvasElement | null) => void
-  /** Above the control bar and outside the click-to-pause region, unlike `children`. */
+  /** The app's own content, drawn in the top bar beside the title, unlike `children`. */
   overlay?: ReactNode
   children?: ReactNode
 }
@@ -116,8 +116,7 @@ export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, children }: Chro
       onMouseOut={onMouseOut}
       className={hideUI ? 'hide' : ''}
     >
-      <Overlay onCanvasRef={onCanvasRef} />
-      {overlay}
+      <Overlay onCanvasRef={onCanvasRef} overlay={overlay} />
       <ControlBar />
       <div className="video" onClick={onVideoClick}>
         {onVideoRef ? <video ref={onVideoRef} playsInline /> : null}

package/src/lib/react/components/control-bar.tsx

@@ -259,23 +259,27 @@ export const ControlBar = () => {
         </div>
         <div className='right'>
           <SettingsAction />
-          <TooltipDisplay
-            id='picture-in-picture'
-            text={
-              <button
-                className='picture-in-picture'
-                type='button'
-                onClick={togglePictureInPicture}
-              >
-                <img src={pictureInPicture}  />
-              </button>
-            }
-            toolTipText={
-              <span>
-                Picture in picture
-              </span>
-            }
-          />
+          {togglePictureInPicture
+            ? (
+              <TooltipDisplay
+                id='picture-in-picture'
+                text={
+                  <button
+                    className='picture-in-picture'
+                    type='button'
+                    onClick={togglePictureInPicture}
+                  >
+                    <img src={pictureInPicture}  />
+                  </button>
+                }
+                toolTipText={
+                  <span>
+                    Picture in picture
+                  </span>
+                }
+              />
+            )
+            : null}
           <TooltipDisplay
             id='full-screen'
             tooltipPlace='top-end'

package/src/lib/react/components/overlay.tsx

@@ -1,4 +1,6 @@
 /// <reference types="@emotion/react/types/css-prop" />
+import type { ReactNode } from 'react'
+
 import { css, keyframes } from '@emotion/react'
 
 import { usePlayer } from '../player'
@@ -13,35 +15,74 @@ const style = css`
   pointer-events: none;
 `
 
-const titleStyle = css`
+/**
+ * Title on the left, the app's own readout on the right, one gradient behind both.
+ *
+ * They share a row rather than sitting in two layers because they are the same band of screen: a
+ * filename wide enough to wrap would otherwise run under whatever the app put on the right, and two
+ * stacked gradients would double the darkening.
+ */
+const topBarStyle = css`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  padding: calc(1.2 * var(--mp-unit)) calc(1.6 * var(--mp-unit));
-  /* clears a notch once the player is fullscreen; resolves to zero everywhere else */
-  padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
-  ${fonts.headings.small}
-  color: white;
-  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
+  /* the video underneath keeps the click that toggles playback; anything in the slot that needs a
+     pointer takes it back for itself */
   pointer-events: none;
 
-  /* one line with an ellipsis until there is width to wrap, since a release filename would
-     otherwise run to four lines on a phone */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex;
+  align-items: flex-start;
+  gap: calc(1.6 * var(--mp-unit));
+
+  /* longhands per breakpoint, never the shorthand: a nested at-rule is hoisted after the rule it
+     sits in, so a shorthand in a media query would override the longhands above it and silently
+     drop the safe-area insets. Those clear a notch once the player is fullscreen and resolve to
+     zero everywhere else. */
+  padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
+  padding-bottom: calc(1.2 * var(--mp-unit));
+  padding-left: calc(calc(1.6 * var(--mp-unit)) + env(safe-area-inset-left, 0px));
+  padding-right: calc(calc(1.6 * var(--mp-unit)) + env(safe-area-inset-right, 0px));
 
   @media (min-width: 768px) {
-    padding: calc(2.4 * var(--mp-unit));
     padding-top: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
-    white-space: normal;
-    overflow: visible;
+    padding-bottom: calc(2.4 * var(--mp-unit));
+    padding-left: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-left, 0px));
+    padding-right: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-right, 0px));
   }
 
   background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
-  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
+  /* visibility, not only opacity: a slot child that took pointer events back would otherwise stay
+     hoverable while faded out, popping a tooltip over nothing. It cascades where pointer-events
+     does not, and transitioning it holds the element visible for the length of the fade. */
+  transition: opacity 0.1s cubic-bezier(.4,0,1,1), visibility 0.1s;
+
+  .title {
+    ${fonts.headings.small}
+    color: white;
+    text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+
+    /* one line with an ellipsis until there is width to wrap, since a release filename would
+       otherwise run to four lines on a phone */
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @media (min-width: 768px) {
+      white-space: normal;
+      overflow: visible;
+    }
+  }
+
+  /* pinned right with or without a title, so an app's readout does not jump sideways when a
+     filename arrives late */
+  .app-slot {
+    margin-left: auto;
+    flex: none;
+  }
 `
 
 const spin = keyframes`
@@ -86,7 +127,13 @@ const errorMessage = (error: unknown) =>
     ? error.message
     : typeof error === 'string' ? error : 'Playback failed'
 
-export const Overlay = ({ onCanvasRef }: { onCanvasRef: (element: HTMLCanvasElement | null) => void }) => {
+export type OverlayProps = {
+  onCanvasRef: (element: HTMLCanvasElement | null) => void
+  /** The app's own content, drawn at the right of the top bar next to the title. */
+  overlay?: ReactNode
+}
+
+export const Overlay = ({ onCanvasRef, overlay }: OverlayProps) => {
   const title = usePlayer((state) => state.title)
   const hideUI = usePlayer((state) => state.hideUI)
   const playbackError = usePlayer((state) => state.playbackError)
@@ -97,13 +144,14 @@ export const Overlay = ({ onCanvasRef }: { onCanvasRef: (element: HTMLCanvasElem
 
   return (
     <>
-      {title
+      {title || overlay
         ? (
           <div
-            css={titleStyle}
-            style={{ ...hideUI ? { opacity: '0', pointerEvents: 'none' } : {} }}
+            css={topBarStyle}
+            style={{ ...hideUI ? { opacity: '0', visibility: 'hidden', pointerEvents: 'none' } : {} }}
           >
-            {title}
+            {title ? <div className="title">{title}</div> : undefined}
+            {overlay ? <div className="app-slot">{overlay}</div> : undefined}
           </div>
         )
         : undefined}

package/src/lib/react/hooks/use-picture-in-picture.ts

@@ -28,9 +28,13 @@ export const usePictureInPicture = (
     }
   }, [video, canvas, player])
 
-  return useCallback(() => {
+  const toggle = useCallback(() => {
     void controller.current?.toggle().catch((error) => {
       console.warn('picture in picture was refused', error)
     })
   }, [])
+
+  // null rather than a dead callback: the chrome hides the control instead of offering one that
+  // cannot work, and there is nothing to composite without both an element and a canvas.
+  return video && canvas ? toggle : null
 }

package/src/lib/react/source-feature.ts

@@ -60,8 +60,16 @@ export type SourceState = {
   hideUI: boolean
   setHideUI: (hide: boolean) => void
 
-  /** Owned here, not by `pip`: that watches the media element, and the window holds a mirror. */
-  togglePictureInPicture: () => void
+  /**
+   * Owned here, not by `pip`: that watches the media element, and the window holds a mirror.
+   *
+   * null means the control is not offered at all. Locally that is "no element yet". For a media the
+   * player does not own it means the source cannot do it, and the difference matters: the compositing
+   * this does needs a local element to draw, and even a source that forwards the request cannot
+   * report the resulting STATE back, since `document.pictureInPictureElement` is never a proxy. A
+   * button that toggles nothing and never lights up is worse than no button.
+   */
+  togglePictureInPicture: (() => void) | null
 
   /** Set when the pipeline fails. Cleared when it recovers. */
   playbackError: unknown
@@ -89,7 +97,7 @@ const initialState: SourceState = {
   selectAudioTrack: () => {},
   hideUI: false,
   setHideUI: () => {},
-  togglePictureInPicture: () => {},
+  togglePictureInPicture: null,
   playbackError: null,
   ready: false,
   setSourceState: () => {},

package/src/lib/react/video-player.tsx

@@ -27,8 +27,13 @@ type CommonOptions = {
   autoplay?: boolean
 
   /**
-   * Drawn above the control bar and outside the click-to-pause region, for whatever the app has to
-   * say over the video. `children` land next to the media instead, below the chrome.
+   * The app's own readout, drawn at the right of the top bar beside `title`, for whatever it has to
+   * say over the video. It shares the title's gradient and fades with the rest of the chrome, so a
+   * running counter does not sit over the picture once the controls have hidden themselves.
+   *
+   * The slot itself takes no pointer events, so a click still reaches the video and toggles
+   * playback; content that needs a pointer (a tooltip anchor, a button) sets `pointer-events: auto`
+   * on itself. `children` land next to the media instead, below the chrome.
    */
   overlay?: ReactNode
 
@@ -204,6 +209,19 @@ const rootStyle = css`
    */
   --mp-unit: 10px;
 
+  /**
+   * The other half of owning the chrome's own scale.
+   *
+   * Every control here is authored against a border box, which this library's dev app sets globally
+   * and a host page has no reason to. Shipped without it, anything that is \`width: 100%\` AND carries
+   * padding overflows its own box: the top bar ran 32px past the player and clipped the right end of
+   * whatever the app had put there. Scoped to the player's subtree so it cannot reach the host's
+   * layout, and only \`box-sizing\`, because zeroing margins here would reach the app's own content.
+   */
+  &, & *, & *::before, & *::after {
+    box-sizing: border-box;
+  }
+
   display: flex;
   justify-content: center;
   background-color: #111;