diff --git a/site/src/content/docs/reference/popover.mdx b/site/src/content/docs/reference/popover.mdx index 82e438ab..75dff996 100644 --- a/site/src/content/docs/reference/popover.mdx +++ b/site/src/content/docs/reference/popover.mdx @@ -73,6 +73,7 @@ Use [CSS custom properties](#root-css-custom-properties) for positioning offsets media-popover { --media-popover-side-offset: 8px; --media-popover-align-offset: 0px; + --media-popover-boundary-offset: 8px; } ``` @@ -84,6 +85,7 @@ React renders standard DOM elements. Add a `className` to style them: .popover { --media-popover-side-offset: 8px; --media-popover-align-offset: 0px; + --media-popover-boundary-offset: 8px; } ``` diff --git a/site/src/content/docs/reference/tooltip.mdx b/site/src/content/docs/reference/tooltip.mdx index e171feb3..383eeb7a 100644 --- a/site/src/content/docs/reference/tooltip.mdx +++ b/site/src/content/docs/reference/tooltip.mdx @@ -92,6 +92,7 @@ Use [CSS custom properties](#root-css-custom-properties) for positioning offsets media-tooltip { --media-tooltip-side-offset: 8px; --media-tooltip-align-offset: 0px; + --media-tooltip-boundary-offset: 8px; } ``` @@ -103,6 +104,7 @@ React renders standard DOM elements. Add a `className` to style them: .tooltip-popup { --media-tooltip-side-offset: 8px; --media-tooltip-align-offset: 0px; + --media-tooltip-boundary-offset: 8px; } ``` diff --git a/site/src/content/docs/reference/use-player-context.mdx b/site/src/content/docs/reference/use-player-context.mdx index 695840a3..4bbc5608 100644 --- a/site/src/content/docs/reference/use-player-context.mdx +++ b/site/src/content/docs/reference/use-player-context.mdx @@ -1,18 +1,18 @@ --- title: usePlayerContext -description: Hook to access the full player context including store, media element, and media setter +description: Hook to access the full player context value --- import UtilReference from "@/components/docs/api-reference/UtilReference.astro"; import DocsLink from "@/components/docs/DocsLink.astro"; -`usePlayerContext` returns the full `PlayerContextValue` object, which includes the store, the current media element, and the media setter. +`usePlayerContext` returns the full `PlayerContextValue` object for lower-level integrations that need direct access to player context fields. ```tsx title="DebugPanel.tsx" import { usePlayerContext } from "@videojs/react"; function DebugPanel() { - const { store, media, setMedia } = usePlayerContext(); + const { store, media, container, popupGroup } = usePlayerContext(); return (
@@ -20,6 +20,8 @@ function DebugPanel() {
{
hasStore: !!store,
hasMedia: !!media,
+ hasContainer: !!container,
+ hasPopupGroup: !!popupGroup,
tagName: media?.tagName,
},
null,