mirror of
https://github.com/zoriya/v10.git
synced 2026-08-05 05:37:21 +00:00
docs(site): update stale popup docs (#1818)
This commit is contained in:
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user