docs(site): update stale popup docs (#1818)

This commit is contained in:
Sam Potts
2026-07-15 12:48:22 -07:00
committed by GitHub
parent 8439fd0698
commit 0a8933c425
3 changed files with 9 additions and 3 deletions
@@ -73,6 +73,7 @@ Use [CSS custom properties](#root-css-custom-properties) for positioning offsets
media-popover { media-popover {
--media-popover-side-offset: 8px; --media-popover-side-offset: 8px;
--media-popover-align-offset: 0px; --media-popover-align-offset: 0px;
--media-popover-boundary-offset: 8px;
} }
``` ```
</FrameworkCase> </FrameworkCase>
@@ -84,6 +85,7 @@ React renders standard DOM elements. Add a `className` to style them:
.popover { .popover {
--media-popover-side-offset: 8px; --media-popover-side-offset: 8px;
--media-popover-align-offset: 0px; --media-popover-align-offset: 0px;
--media-popover-boundary-offset: 8px;
} }
``` ```
</FrameworkCase> </FrameworkCase>
@@ -92,6 +92,7 @@ Use [CSS custom properties](#root-css-custom-properties) for positioning offsets
media-tooltip { media-tooltip {
--media-tooltip-side-offset: 8px; --media-tooltip-side-offset: 8px;
--media-tooltip-align-offset: 0px; --media-tooltip-align-offset: 0px;
--media-tooltip-boundary-offset: 8px;
} }
``` ```
</FrameworkCase> </FrameworkCase>
@@ -103,6 +104,7 @@ React renders standard DOM elements. Add a `className` to style them:
.tooltip-popup { .tooltip-popup {
--media-tooltip-side-offset: 8px; --media-tooltip-side-offset: 8px;
--media-tooltip-align-offset: 0px; --media-tooltip-align-offset: 0px;
--media-tooltip-boundary-offset: 8px;
} }
``` ```
</FrameworkCase> </FrameworkCase>
@@ -1,18 +1,18 @@
--- ---
title: usePlayerContext 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 UtilReference from "@/components/docs/api-reference/UtilReference.astro";
import DocsLink from "@/components/docs/DocsLink.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" ```tsx title="DebugPanel.tsx"
import { usePlayerContext } from "@videojs/react"; import { usePlayerContext } from "@videojs/react";
function DebugPanel() { function DebugPanel() {
const { store, media, setMedia } = usePlayerContext(); const { store, media, container, popupGroup } = usePlayerContext();
return ( return (
<pre> <pre>
@@ -20,6 +20,8 @@ function DebugPanel() {
{ {
hasStore: !!store, hasStore: !!store,
hasMedia: !!media, hasMedia: !!media,
hasContainer: !!container,
hasPopupGroup: !!popupGroup,
tagName: media?.tagName, tagName: media?.tagName,
}, },
null, null,