@videojs/react 10.0.0-beta.25 → 10.0.0-beta.27

package/docs/reference/player-container.md

@@ -1,33 +1,33 @@
-# Player.Container
+# Container
 
 The player's interaction surface — handles layout, fullscreen, media attachment, and user activity detection.
 
-The `Player.Container` is the player’s physical surface. It defines the visual boundary, attaches the media element, and detects user interaction like activity and (eventually) gestures and keyboard input. It lives inside a [`Player.Provider`](./player-provider.md).
+The `Container` is the player’s physical surface. It defines the visual boundary, attaches the media element, and detects user interaction like activity and (eventually) gestures and keyboard input. It lives inside a [`Player`](./player-provider.md).
 
 tsx
 
 ```
-<Player.Provider>
-  <Player.Container>
+<Player>
+  <Container>
     <video src="video.mp4" />
     <Controls.Root>
       {/* ... */}
     </Controls.Root>
-  </Player.Container>
-</Player.Provider>
+  </Container>
+</Player>
 ```
 
 ## How it’s created
 
-The `Player.Container` comes from the same `createPlayer()` call that creates the `Player.Provider`. They’re a matched pair wired to the same feature set.
+Import `Container` from the main React package. It connects to whichever `Player` contains it, so it does not need to be created for a specific feature set.
 
 tsx
 
 ```
-import { createPlayer } from '@videojs/react';
+import { Container, createPlayer } from '@videojs/react';
 import { videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 ```
 
 [`createPlayer` reference](./create-player.md)
@@ -36,24 +36,24 @@ const Player = createPlayer({ features: videoFeatures });
 
 ### Layout & fullscreen
 
-The container is the visual box around your media and controls. Sizing, aspect ratio, and visual boundaries all go here — on the container, not the provider.
+The container is the visual box around your media and controls. Sizing, aspect ratio, and visual boundaries all go here — on `Container`, not `Player`.
 
 tsx
 
 ```
-<Player.Container style={{ width: 640, aspectRatio: '16/9' }}>
+<Container style={{ width: 640, aspectRatio: '16/9' }}>
   <video src="video.mp4" />
   <Controls.Root>
     {/* ... */}
   </Controls.Root>
-</Player.Container>
+</Container>
 ```
 
 When the user goes fullscreen, the **container** goes fullscreen — not the video element. This keeps controls and other UI visible on top of the video, since they’re children of the container.
 
 ### Media attachment
 
-Media discovery is handled by the provider, not the container. When a media component like `<Video>` registers itself via context, the provider wires it to the store and all of the player’s features.
+Media discovery is handled by `Player`, not `Container`. When a media component like `<Video>` registers itself via context, `Player` wires it to the store and all of the player’s features.
 
 ### Interaction surface
 
@@ -71,39 +71,39 @@ tsx
 
 ```
 {/* Packaged skin — container is inside VideoSkin */}
-<Player.Provider>
+<Player>
   <VideoSkin>
     <Video src="video.mp4" />
   </VideoSkin>
-</Player.Provider>
+</Player>
 
-{/* Custom UI — you use Player.Container directly */}
-<Player.Provider>
-  <Player.Container>
+{/* Custom UI — you use Container directly */}
+<Player>
+  <Container>
     <video src="video.mp4" />
     <PlayButton />
-  </Player.Container>
-</Player.Provider>
+  </Container>
+</Player>
 ```
 
 ## Inside vs. outside the container
 
-The [provider](./player-provider.md) gives components access to state and actions. The container layers on physical behaviors — fullscreen, activity detection, gesture handling. Components work in both places; the container just adds those extras.
+[`Player`](./player-provider.md) gives components access to state and actions. `Container` layers on physical behaviors — fullscreen, activity detection, and gesture handling. Components work in both places; the container just adds those extras.
 
 tsx
 
 ```
-<Player.Provider>
-  <Player.Container>
+<Player>
+  <Container>
     <video src="video.mp4" />
     <Controls.Root>          {/* fullscreen, activity detection, gestures */}
       {/* ... */}
     </Controls.Root>
-  </Player.Container>
+  </Container>
 
   <Transcript />          {/* state & actions, but no container behaviors */}
   <PlaylistSidebar />     {/* state & actions, but no container behaviors */}
-</Player.Provider>
+</Player>
 ```
 
 A play button outside the container still reads playback state and can toggle play/pause — it just won’t go fullscreen with the player or respond to the container’s idle state.

package/docs/reference/player-provider.md

@@ -1,40 +1,40 @@
-# Player.Provider
+# Player
 
 The state boundary — creates a store and broadcasts it to all descendants.
 
-The `Player.Provider` is the state boundary of your player. It creates a store and makes it available to every component inside it via context. Every player needs exactly one.
+The `Player` is the state boundary of your player. It creates a store and makes it available to every component inside it via context. Every player needs exactly one.
 
 App.tsx
 
 ```
 import { videoFeatures } from '@videojs/react/video';
-import { createPlayer } from '@videojs/react';
+import { Container, createPlayer } from '@videojs/react';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 
 function App() {
   return (
-    <Player.Provider>
+    <Player>
       {/* Everything inside can access the player store */}
-      <Player.Container>
+      <Container>
         <video src="video.mp4" />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
 
 ## How it’s created
 
-Call `createPlayer()` with a `features` array. The returned object contains `Provider`, `Container`, `usePlayer`, and `useMedia` — everything you need for one player instance.
+Call `createPlayer()` with a `features` array. It returns `Player`, `usePlayer`, and `useMedia`. Import the shared `Container` separately when building a custom layout.
 
 tsx
 
 ```
-import { createPlayer } from '@videojs/react';
+import { Container, createPlayer } from '@videojs/react';
 import { videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({
+const { Player, usePlayer, useMedia } = createPlayer({
   features: videoFeatures,
 });
 ```
@@ -45,33 +45,33 @@ The [features](../concepts/features.md) you pass determine what state is availab
 
 ## What lives inside it
 
-Everything that needs player state goes inside the provider: skins, containers, UI components, and your own custom components. Anything inside can access the store.
+Everything that needs player state goes inside `Player`: skins, containers, UI components, and your own custom components. Anything inside can access the store.
 
 tsx
 
 ```
-<Player.Provider>
+<Player>
   <VideoSkin>           {/* skin — includes container + controls */}
     <Video src="..." /> {/* media element */}
   </VideoSkin>
-  <MyCustomOverlay />   {/* your own component — can use Player.usePlayer() */}
-</Player.Provider>
+  <MyCustomOverlay />   {/* your own component — can use usePlayer() */}
+</Player>
 ```
 
 ## No visual presence
 
-The `Provider` renders no visible element of its own — it’s purely a state wrapper. Sizing, borders, and background go on the [`Container`](./player-container.md), not the Provider.
+`Player` renders no visible element of its own — it’s purely a state wrapper. Sizing, borders, and background go on the [`Container`](./player-container.md), not `Player`.
 
 ## Accessing state
 
-Use `Player.usePlayer` to read state or call actions from any component inside the Provider:
+Use `usePlayer` to read state or call actions from any component inside `Player`:
 
 PlayPauseButton.tsx
 
 ```
 function PlayPauseButton() {
-  const paused = Player.usePlayer(selectPlayback).paused;
-  const store = Player.usePlayer();
+  const paused = usePlayer(selectPlayback).paused;
+  const store = usePlayer();
 
   return (
     <button onClick={() => store.dispatch('toggle-playback')}>
@@ -85,20 +85,20 @@ function PlayPauseButton() {
 
 ## Extended player layouts
 
-The provider’s scope can extend beyond the fullscreen target. Playlists, transcripts, sidebars, and other supplementary UI can live inside the provider but outside the container. They still have full access to the store, they just won’t go fullscreen with the video.
+The player’s scope can extend beyond the fullscreen target. Playlists, transcripts, sidebars, and other supplementary UI can live inside `Player` but outside `Container`. They still have full access to the store, but they won’t go fullscreen with the video.
 
 tsx
 
 ```
-<Player.Provider>
-  <Player.Container>
+<Player>
+  <Container>
     <video src="video.mp4" />
     <Controls.Root>          {/* goes fullscreen with the video */}
       {/* ... */}
     </Controls.Root>
-  </Player.Container>
+  </Container>
 
   <Transcript />          {/* outside container — still has store access */}
   <PlaylistSidebar />     {/* outside container — still has store access */}
-</Player.Provider>
+</Player>
 ```

package/docs/reference/popover.md

@@ -22,7 +22,7 @@ Displays contextual content anchored to a trigger element. By default, opens on
 
 Set `openOnHover` to open on pointer hover instead of click. Use `delay` and `closeDelay` to control timing for hover interactions.
 
-The `side` and `align` props control popup placement relative to the trigger. The popup repositions automatically to stay within viewport bounds.
+The `side` and `align` props control the preferred popup placement relative to the trigger. When the preferred side overflows the positioning boundary, the popup uses the opposite side if it has more space.
 
 In React, the component is composed from four parts: `Root` manages state, `Trigger` toggles the popover, `Popup` contains the content, and `Arrow` renders a directional arrow.
 
@@ -38,10 +38,11 @@ css
 .popover {
   --media-popover-side-offset: 8px;
   --media-popover-align-offset: 0px;
+  --media-popover-boundary-offset: 8px;
 }
 ```
 
-Style based on open state and transition phases:
+Style based on open state, rendered side, and transition phases. `data-side` reflects the rendered side and can differ from the preferred `side` prop after collision handling:
 
 css
 
@@ -55,6 +56,12 @@ css
 .popover[data-ending-style] .popup {
   opacity: 0;
 }
+.popover[data-side="top"] {
+  transform-origin: bottom center;
+}
+.popover[data-side="bottom"] {
+  transform-origin: top center;
+}
 ```
 
 ## Accessibility
@@ -72,22 +79,16 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, Popover } from '@videojs/react';
+import { Container, createPlayer, Popover } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 
 export default function BasicUsage() {
   return (
-    <Player.Provider>
-      <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
+    <Player>
+      <Container className="media-container">
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <div className="bar">
           <Popover.Root>
             <Popover.Trigger className="trigger">Settings</Popover.Trigger>
@@ -97,8 +98,8 @@ export default function BasicUsage() {
             </Popover.Popup>
           </Popover.Root>
         </div>
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -286,7 +287,7 @@ Open the popup on pointer hover instead of click.
 
 Description
 
-Which side of the trigger the popup appears on.
+Preferred side of the trigger for the popup.
 
 #### State
 
@@ -310,6 +311,12 @@ Details
 
 `'top' | 'bottom' | 'left' | 'right'`
 
+▸
+
+Description
+
+Preferred side of the trigger for the popup.
+
 `align`
 
 `'start' | 'center' | 'end'`
@@ -362,7 +369,7 @@ Present when the popover is open.
 
 Description
 
-Indicates which side the popover is positioned relative to the trigger.
+Indicates the rendered side of the popover after collision handling.
 
 `data-align`
 
@@ -472,7 +479,7 @@ Present when the popover is open.
 
 Description
 
-Indicates which side the popover is positioned relative to the trigger.
+Indicates the rendered side of the popover after collision handling.
 
 `data-align`
 
@@ -514,7 +521,7 @@ Present when the popover is open.
 
 Description
 
-Indicates which side the popover is positioned relative to the trigger.
+Indicates the rendered side of the popover after collision handling.
 
 `data-align`
 

package/docs/reference/poster.md

@@ -47,28 +47,25 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, PlayButton, Poster } from '@videojs/react';
+import { Container, createPlayer, PlayButton, Poster } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 
 export default function BasicUsage() {
   return (
-    <Player.Provider>
-      <Player.Container className="media-container">
+    <Player>
+      <Container className="media-container">
         <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsInline />
 
-        <Poster
-          className="media-poster"
-          src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg"
-        />
+        <Poster className="media-poster" src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg" />
 
         <PlayButton
           className="media-play-button"
           render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
         />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```