@banou/media-player 0.10.6 → 0.10.7

package/README.md

@@ -208,6 +208,30 @@ play/pause button.
 If anything in that path is unavailable the player falls back to handing the browser the bare video,
 which plays without subtitles rather than not at all.
 
+### Picture in picture for a media you do not own
+
+A browser opens picture in picture only for a click in the document that owns the `<video>`, so a
+remote media gets the control only when the host opts in to taking that click:
+
+```tsx
+// `.frame` sets `pointer-events: none`, so clicks reach the chrome everywhere else
+<MediaPlayer
+  media={media}
+  pictureInPicture={{ onArmedChange: (armed) => { frame.current!.style.pointerEvents = armed ? 'auto' : '' } }}
+>
+  <iframe ref={frame} className='frame' />
+</MediaPlayer>
+```
+
+While the pointer is over the control, the chrome lets a click through at the control's box and the
+host is told it is armed, so its frame takes that click and enters picture in picture from inside.
+The control follows the media's `enterpictureinpicture` and `leavepictureinpicture` events, and in
+picture in picture a click on it calls the media's `exitPictureInPicture`.
+
+A finger never rests on the control before it presses, so a tap cannot arm it. The control is offered
+only where the primary pointer hovers (`(hover: hover) and (pointer: fine)`), and a touch hides it
+until a pointer that hovers moves again.
+
 ## Layout
 
 One package. `src/` is the demo app, `src/lib` is the library it publishes, and the app imports it by

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 export { MediaPlayer, default } from './react/video-player';
 export type { MediaPlayerOptions, MediaPlayerLocalOptions, MediaPlayerRemoteOptions, MediaPlayerSource, } from './react/video-player';
 export { isDelegatedTracks, isExternalThumbnails } from './react/media';
-export type { DelegatedSelection, DelegatedTracks, ExternalThumbnails, PlayerMedia, TimeRangesLike, } from './react/media';
+export type { DelegatedSelection, DelegatedTracks, ExternalThumbnails, PassThroughPictureInPicture, PlayerMedia, TimeRangesLike, } from './react/media';
 export { Player, usePlayer } from './react/player';
 export type { PlayerStore } from './react/player';
 export { sourceFeature } from './react/source-feature';
-export type { DownloadedRange, PlaybackErrorEntry, SourceState } from './react/source-feature';
+export type { DownloadedRange, PassThroughControl, PlaybackErrorEntry, SourceState, ViewportBox, } from './react/source-feature';
 export { useSeekThumbnails } from './react/hooks/use-thumbnails';
 export { usePictureInPicture } from './react/hooks/use-picture-in-picture';
 export { inputToRemuxerInput } from './utils/source';