@banou/media-player 0.8.1 → 0.8.2

package/dist/index.js

@@ -251,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;
@@ -305,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,
@@ -1466,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",
@@ -1558,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/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.1",
+  "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/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/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;