@banou/media-player 0.8.0 → 0.8.1

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    ",
@@ -1384,7 +1386,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 +1395,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",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "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/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/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: () => {},