From fe56d8ca6522296c015c7b7aa2546a4349d14a5c Mon Sep 17 00:00:00 2001 From: Darius Cepulis Date: Mon, 9 Feb 2026 14:38:01 -0600 Subject: [PATCH] feat(site): simple api reference examples (#472) --- pnpm-lock.yaml | 6 + site/CLAUDE.md | 102 ++++++++++- site/astro.config.mjs | 2 +- site/package.json | 2 + site/src/components/docs/demos/Demo.astro | 38 ++++ site/src/components/docs/demos/HtmlDemo.astro | 8 + .../html/css/BasicUsage.astro | 9 + .../html/css/BasicUsage.html | 41 +++++ .../fullscreen-button/html/css/BasicUsage.ts | 2 + .../react/css/BasicUsage.css | 19 ++ .../react/css/BasicUsage.tsx | 25 +++ .../mute-button/html/css/BasicUsage.astro | 9 + .../mute-button/html/css/BasicUsage.html | 40 +++++ .../demos/mute-button/html/css/BasicUsage.ts | 2 + .../mute-button/react/css/BasicUsage.css | 19 ++ .../mute-button/react/css/BasicUsage.tsx | 25 +++ .../play-button/html/css/BasicUsage.astro | 9 + .../play-button/html/css/BasicUsage.html | 40 +++++ .../demos/play-button/html/css/BasicUsage.ts | 2 + .../play-button/react/css/BasicUsage.css | 19 ++ .../play-button/react/css/BasicUsage.tsx | 25 +++ .../demos/time/html/css/CurrentDuration.astro | 9 + .../demos/time/html/css/CurrentDuration.html | 29 ++++ .../demos/time/html/css/CurrentDuration.ts | 2 + .../demos/time/html/css/CurrentTime.astro | 9 + .../docs/demos/time/html/css/CurrentTime.html | 25 +++ .../docs/demos/time/html/css/CurrentTime.ts | 2 + .../time/html/css/CustomNegativeSign.astro | 9 + .../time/html/css/CustomNegativeSign.html | 25 +++ .../demos/time/html/css/CustomNegativeSign.ts | 2 + .../demos/time/html/css/CustomSeparator.astro | 9 + .../demos/time/html/css/CustomSeparator.html | 29 ++++ .../demos/time/html/css/CustomSeparator.ts | 2 + .../docs/demos/time/html/css/Remaining.astro | 9 + .../docs/demos/time/html/css/Remaining.html | 25 +++ .../docs/demos/time/html/css/Remaining.ts | 2 + .../demos/time/react/css/CurrentDuration.css | 12 ++ .../demos/time/react/css/CurrentDuration.tsx | 26 +++ .../docs/demos/time/react/css/CurrentTime.css | 12 ++ .../docs/demos/time/react/css/CurrentTime.tsx | 22 +++ .../time/react/css/CustomNegativeSign.css | 12 ++ .../time/react/css/CustomNegativeSign.tsx | 22 +++ .../demos/time/react/css/CustomSeparator.css | 12 ++ .../demos/time/react/css/CustomSeparator.tsx | 26 +++ .../docs/demos/time/react/css/Remaining.css | 12 ++ .../docs/demos/time/react/css/Remaining.tsx | 22 +++ .../docs/reference/fullscreen-button.mdx | 38 ++++ .../content/docs/reference/mute-button.mdx | 38 ++++ .../content/docs/reference/play-button.mdx | 38 ++++ site/src/content/docs/reference/time.mdx | 162 ++++++++++++++++++ 50 files changed, 1084 insertions(+), 2 deletions(-) create mode 100644 site/src/components/docs/demos/Demo.astro create mode 100644 site/src/components/docs/demos/HtmlDemo.astro create mode 100644 site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro create mode 100644 site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html create mode 100644 site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.ts create mode 100644 site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css create mode 100644 site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/mute-button/html/css/BasicUsage.astro create mode 100644 site/src/components/docs/demos/mute-button/html/css/BasicUsage.html create mode 100644 site/src/components/docs/demos/mute-button/html/css/BasicUsage.ts create mode 100644 site/src/components/docs/demos/mute-button/react/css/BasicUsage.css create mode 100644 site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/play-button/html/css/BasicUsage.astro create mode 100644 site/src/components/docs/demos/play-button/html/css/BasicUsage.html create mode 100644 site/src/components/docs/demos/play-button/html/css/BasicUsage.ts create mode 100644 site/src/components/docs/demos/play-button/react/css/BasicUsage.css create mode 100644 site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/time/html/css/CurrentDuration.astro create mode 100644 site/src/components/docs/demos/time/html/css/CurrentDuration.html create mode 100644 site/src/components/docs/demos/time/html/css/CurrentDuration.ts create mode 100644 site/src/components/docs/demos/time/html/css/CurrentTime.astro create mode 100644 site/src/components/docs/demos/time/html/css/CurrentTime.html create mode 100644 site/src/components/docs/demos/time/html/css/CurrentTime.ts create mode 100644 site/src/components/docs/demos/time/html/css/CustomNegativeSign.astro create mode 100644 site/src/components/docs/demos/time/html/css/CustomNegativeSign.html create mode 100644 site/src/components/docs/demos/time/html/css/CustomNegativeSign.ts create mode 100644 site/src/components/docs/demos/time/html/css/CustomSeparator.astro create mode 100644 site/src/components/docs/demos/time/html/css/CustomSeparator.html create mode 100644 site/src/components/docs/demos/time/html/css/CustomSeparator.ts create mode 100644 site/src/components/docs/demos/time/html/css/Remaining.astro create mode 100644 site/src/components/docs/demos/time/html/css/Remaining.html create mode 100644 site/src/components/docs/demos/time/html/css/Remaining.ts create mode 100644 site/src/components/docs/demos/time/react/css/CurrentDuration.css create mode 100644 site/src/components/docs/demos/time/react/css/CurrentDuration.tsx create mode 100644 site/src/components/docs/demos/time/react/css/CurrentTime.css create mode 100644 site/src/components/docs/demos/time/react/css/CurrentTime.tsx create mode 100644 site/src/components/docs/demos/time/react/css/CustomNegativeSign.css create mode 100644 site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx create mode 100644 site/src/components/docs/demos/time/react/css/CustomSeparator.css create mode 100644 site/src/components/docs/demos/time/react/css/CustomSeparator.tsx create mode 100644 site/src/components/docs/demos/time/react/css/Remaining.css create mode 100644 site/src/components/docs/demos/time/react/css/Remaining.tsx diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d6f3b0b..a3a9946e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -397,9 +397,15 @@ importers: '@tailwindcss/vite': specifier: ^4.1.17 version: 4.1.18(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2)) + '@videojs/html': + specifier: workspace:* + version: link:../packages/html '@videojs/html-preview': specifier: workspace:* version: link:../packages/__tech-preview__/html + '@videojs/react': + specifier: workspace:* + version: link:../packages/react '@videojs/react-preview': specifier: workspace:* version: link:../packages/__tech-preview__/react diff --git a/site/CLAUDE.md b/site/CLAUDE.md index f55d7aaf..06b98ed0 100644 --- a/site/CLAUDE.md +++ b/site/CLAUDE.md @@ -141,7 +141,9 @@ This limits the classnames Tailwind must generate. site/ ├── src/ │ ├── components/ # Astro + React components -│ │ └── docs/api-reference/ # API reference Astro components +│ │ └── docs/ +│ │ ├── api-reference/ # API reference Astro components +│ │ └── demos/ # Interactive component demos (see below) │ ├── content/ # Content collections (blog/, docs/, authors.json) │ ├── layouts/ # Page layouts (Base, Blog, Docs, Markdown) │ ├── pages/ # Route pages (file-based routing) @@ -168,6 +170,104 @@ site/ └── vitest.config.ts # Test configuration ``` +## Interactive Demos + +Reference pages include live, interactive demos for each component. Demos are framework-specific (React, HTML) and style-specific (CSS). + +### Directory Structure + +``` +src/components/docs/demos/ +├── Demo.astro # Shared shell (live preview + tabbed source code) +├── HtmlDemo.astro # Renders raw HTML via set:html +└── {component}/{framework}/{style}/ + ├── BasicUsage.tsx # React: component (+ .css) + ├── BasicUsage.astro # HTML: Astro wrapper (renders HTML + bundles script) + ├── BasicUsage.html # HTML: markup + + + + + + Exit Fullscreen + Fullscreen + + diff --git a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.ts b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.ts new file mode 100644 index 00000000..8bd9b818 --- /dev/null +++ b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/video/player'; +import '@videojs/html/ui/fullscreen-button'; diff --git a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css new file mode 100644 index 00000000..4e2bfa70 --- /dev/null +++ b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.css @@ -0,0 +1,19 @@ +.fullscreen-button-basic { + position: relative; +} + +.fullscreen-button-basic video { + width: 100%; + border-radius: 0.5rem; +} + +.fullscreen-button-basic__button { + height: 50px; + position: absolute; + bottom: 10px; + right: 10px; + padding-inline: 12px; + background-color: black; + color: white; + cursor: pointer; +} diff --git a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx new file mode 100644 index 00000000..3e22c055 --- /dev/null +++ b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx @@ -0,0 +1,25 @@ +import { createPlayer, FullscreenButton, features, Video } from '@videojs/react'; + +import './BasicUsage.css'; + +const Player = createPlayer({ features: [...features.video] }); + +export default function BasicUsage() { + return ( + + + + + ); +} diff --git a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.astro b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.astro new file mode 100644 index 00000000..6ac802df --- /dev/null +++ b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './BasicUsage.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html new file mode 100644 index 00000000..c4f91808 --- /dev/null +++ b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html @@ -0,0 +1,40 @@ + + + + + + Unmute + Mute + + diff --git a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.ts b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.ts new file mode 100644 index 00000000..5c81c0a9 --- /dev/null +++ b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/video/player'; +import '@videojs/html/ui/mute-button'; diff --git a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.css b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.css new file mode 100644 index 00000000..6fac9655 --- /dev/null +++ b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.css @@ -0,0 +1,19 @@ +.mute-button-basic { + position: relative; +} + +.mute-button-basic video { + width: 100%; + border-radius: 0.5rem; +} + +.mute-button-basic__button { + height: 50px; + position: absolute; + bottom: 10px; + left: 10px; + padding-inline: 12px; + background-color: black; + color: white; + cursor: pointer; +} diff --git a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx new file mode 100644 index 00000000..cdd3150e --- /dev/null +++ b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx @@ -0,0 +1,25 @@ +import { createPlayer, features, MuteButton, Video } from '@videojs/react'; + +import './BasicUsage.css'; + +const Player = createPlayer({ features: [...features.video] }); + +export default function BasicUsage() { + return ( + + + + + ); +} diff --git a/site/src/components/docs/demos/play-button/html/css/BasicUsage.astro b/site/src/components/docs/demos/play-button/html/css/BasicUsage.astro new file mode 100644 index 00000000..6ac802df --- /dev/null +++ b/site/src/components/docs/demos/play-button/html/css/BasicUsage.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './BasicUsage.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/play-button/html/css/BasicUsage.html b/site/src/components/docs/demos/play-button/html/css/BasicUsage.html new file mode 100644 index 00000000..240cdc5e --- /dev/null +++ b/site/src/components/docs/demos/play-button/html/css/BasicUsage.html @@ -0,0 +1,40 @@ + + + + + + Play + Pause + + diff --git a/site/src/components/docs/demos/play-button/html/css/BasicUsage.ts b/site/src/components/docs/demos/play-button/html/css/BasicUsage.ts new file mode 100644 index 00000000..6c7c5cd8 --- /dev/null +++ b/site/src/components/docs/demos/play-button/html/css/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/video/player'; +import '@videojs/html/ui/play-button'; diff --git a/site/src/components/docs/demos/play-button/react/css/BasicUsage.css b/site/src/components/docs/demos/play-button/react/css/BasicUsage.css new file mode 100644 index 00000000..3cd77b42 --- /dev/null +++ b/site/src/components/docs/demos/play-button/react/css/BasicUsage.css @@ -0,0 +1,19 @@ +.play-button-basic { + position: relative; +} + +.play-button-basic video { + width: 100%; + border-radius: 0.5rem; +} + +.play-button-basic__button { + height: 50px; + position: absolute; + bottom: 10px; + left: 10px; + padding-inline: 12px; + background-color: black; + color: white; + cursor: pointer; +} diff --git a/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx new file mode 100644 index 00000000..0b70faa8 --- /dev/null +++ b/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx @@ -0,0 +1,25 @@ +import { createPlayer, features, PlayButton, Video } from '@videojs/react'; + +import './BasicUsage.css'; + +const Player = createPlayer({ features: [...features.video] }); + +export default function BasicUsage() { + return ( + + + + + ); +} diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.astro b/site/src/components/docs/demos/time/html/css/CurrentDuration.astro new file mode 100644 index 00000000..bc11338d --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './CurrentDuration.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.html b/site/src/components/docs/demos/time/html/css/CurrentDuration.html new file mode 100644 index 00000000..2861903e --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.html @@ -0,0 +1,29 @@ + + + + + + + + + + diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.ts b/site/src/components/docs/demos/time/html/css/CurrentDuration.ts new file mode 100644 index 00000000..8555624a --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.ts @@ -0,0 +1,2 @@ +import '@videojs/html/video/player'; +import '@videojs/html/ui/time'; diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.astro b/site/src/components/docs/demos/time/html/css/CurrentTime.astro new file mode 100644 index 00000000..ea664651 --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CurrentTime.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './CurrentTime.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.html b/site/src/components/docs/demos/time/html/css/CurrentTime.html new file mode 100644 index 00000000..43f4883b --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CurrentTime.html @@ -0,0 +1,25 @@ + + + + + + diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.ts b/site/src/components/docs/demos/time/html/css/CurrentTime.ts new file mode 100644 index 00000000..8555624a --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CurrentTime.ts @@ -0,0 +1,2 @@ +import '@videojs/html/video/player'; +import '@videojs/html/ui/time'; diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.astro b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.astro new file mode 100644 index 00000000..011f1703 --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './CustomNegativeSign.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html new file mode 100644 index 00000000..5cd69ce3 --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html @@ -0,0 +1,25 @@ + + + + + + diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.ts b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.ts new file mode 100644 index 00000000..8555624a --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.ts @@ -0,0 +1,2 @@ +import '@videojs/html/video/player'; +import '@videojs/html/ui/time'; diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.astro b/site/src/components/docs/demos/time/html/css/CustomSeparator.astro new file mode 100644 index 00000000..aaa95e1d --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './CustomSeparator.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.html b/site/src/components/docs/demos/time/html/css/CustomSeparator.html new file mode 100644 index 00000000..aae4e520 --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.html @@ -0,0 +1,29 @@ + + + + + + + of + + + diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.ts b/site/src/components/docs/demos/time/html/css/CustomSeparator.ts new file mode 100644 index 00000000..8555624a --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.ts @@ -0,0 +1,2 @@ +import '@videojs/html/video/player'; +import '@videojs/html/ui/time'; diff --git a/site/src/components/docs/demos/time/html/css/Remaining.astro b/site/src/components/docs/demos/time/html/css/Remaining.astro new file mode 100644 index 00000000..9ab3123a --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/Remaining.astro @@ -0,0 +1,9 @@ +--- +import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro'; +import html from './Remaining.html?raw'; +--- + + + diff --git a/site/src/components/docs/demos/time/html/css/Remaining.html b/site/src/components/docs/demos/time/html/css/Remaining.html new file mode 100644 index 00000000..bed6dfa9 --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/Remaining.html @@ -0,0 +1,25 @@ + + + + + + diff --git a/site/src/components/docs/demos/time/html/css/Remaining.ts b/site/src/components/docs/demos/time/html/css/Remaining.ts new file mode 100644 index 00000000..8555624a --- /dev/null +++ b/site/src/components/docs/demos/time/html/css/Remaining.ts @@ -0,0 +1,2 @@ +import '@videojs/html/video/player'; +import '@videojs/html/ui/time'; diff --git a/site/src/components/docs/demos/time/react/css/CurrentDuration.css b/site/src/components/docs/demos/time/react/css/CurrentDuration.css new file mode 100644 index 00000000..d9645a91 --- /dev/null +++ b/site/src/components/docs/demos/time/react/css/CurrentDuration.css @@ -0,0 +1,12 @@ +.time-current-duration { + position: relative; +} + +.time-current-duration video { + width: 100%; + border-radius: 0.5rem; +} + +.time-current-duration__group { + font-variant-numeric: tabular-nums; +} diff --git a/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx b/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx new file mode 100644 index 00000000..ea1557e0 --- /dev/null +++ b/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx @@ -0,0 +1,26 @@ +import { createPlayer, features, Time, Video } from '@videojs/react'; + +import './CurrentDuration.css'; + +const Player = createPlayer({ features: [...features.video] }); + +export default function CurrentDuration() { + return ( + + + + + ); +} diff --git a/site/src/components/docs/demos/time/react/css/CurrentTime.css b/site/src/components/docs/demos/time/react/css/CurrentTime.css new file mode 100644 index 00000000..df1f212c --- /dev/null +++ b/site/src/components/docs/demos/time/react/css/CurrentTime.css @@ -0,0 +1,12 @@ +.time-current-time { + position: relative; +} + +.time-current-time video { + width: 100%; + border-radius: 0.5rem; +} + +.time-current-time__value { + font-variant-numeric: tabular-nums; +} diff --git a/site/src/components/docs/demos/time/react/css/CurrentTime.tsx b/site/src/components/docs/demos/time/react/css/CurrentTime.tsx new file mode 100644 index 00000000..25c990d8 --- /dev/null +++ b/site/src/components/docs/demos/time/react/css/CurrentTime.tsx @@ -0,0 +1,22 @@ +import { createPlayer, features, Time, Video } from '@videojs/react'; + +import './CurrentTime.css'; + +const Player = createPlayer({ features: [...features.video] }); + +export default function CurrentTime() { + return ( + + + + + ); +} diff --git a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css new file mode 100644 index 00000000..4b03bb51 --- /dev/null +++ b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.css @@ -0,0 +1,12 @@ +.time-custom-negative-sign { + position: relative; +} + +.time-custom-negative-sign video { + width: 100%; + border-radius: 0.5rem; +} + +.time-custom-negative-sign__value { + font-variant-numeric: tabular-nums; +} diff --git a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx new file mode 100644 index 00000000..1e18b79f --- /dev/null +++ b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx @@ -0,0 +1,22 @@ +import { createPlayer, features, Time, Video } from '@videojs/react'; + +import './CustomNegativeSign.css'; + +const Player = createPlayer({ features: [...features.video] }); + +export default function CustomNegativeSign() { + return ( + + + + + ); +} diff --git a/site/src/components/docs/demos/time/react/css/CustomSeparator.css b/site/src/components/docs/demos/time/react/css/CustomSeparator.css new file mode 100644 index 00000000..71e1bbcb --- /dev/null +++ b/site/src/components/docs/demos/time/react/css/CustomSeparator.css @@ -0,0 +1,12 @@ +.time-custom-separator { + position: relative; +} + +.time-custom-separator video { + width: 100%; + border-radius: 0.5rem; +} + +.time-custom-separator__group { + font-variant-numeric: tabular-nums; +} diff --git a/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx b/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx new file mode 100644 index 00000000..524ac64a --- /dev/null +++ b/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx @@ -0,0 +1,26 @@ +import { createPlayer, features, Time, Video } from '@videojs/react'; + +import './CustomSeparator.css'; + +const Player = createPlayer({ features: [...features.video] }); + +export default function CustomSeparator() { + return ( + + + + + ); +} diff --git a/site/src/components/docs/demos/time/react/css/Remaining.css b/site/src/components/docs/demos/time/react/css/Remaining.css new file mode 100644 index 00000000..91b11592 --- /dev/null +++ b/site/src/components/docs/demos/time/react/css/Remaining.css @@ -0,0 +1,12 @@ +.time-remaining { + position: relative; +} + +.time-remaining video { + width: 100%; + border-radius: 0.5rem; +} + +.time-remaining__value { + font-variant-numeric: tabular-nums; +} diff --git a/site/src/components/docs/demos/time/react/css/Remaining.tsx b/site/src/components/docs/demos/time/react/css/Remaining.tsx new file mode 100644 index 00000000..8389c16b --- /dev/null +++ b/site/src/components/docs/demos/time/react/css/Remaining.tsx @@ -0,0 +1,22 @@ +import { createPlayer, features, Time, Video } from '@videojs/react'; + +import './Remaining.css'; + +const Player = createPlayer({ features: [...features.video] }); + +export default function Remaining() { + return ( + + + + + ); +} diff --git a/site/src/content/docs/reference/fullscreen-button.mdx b/site/src/content/docs/reference/fullscreen-button.mdx index 1455f8e4..ab0c2f5b 100644 --- a/site/src/content/docs/reference/fullscreen-button.mdx +++ b/site/src/content/docs/reference/fullscreen-button.mdx @@ -7,6 +7,18 @@ description: A button component for entering and exiting fullscreen mode import ApiReference from "@/components/docs/api-reference/ApiReference.astro"; import FrameworkCase from "@/components/docs/FrameworkCase.astro"; +import StyleCase from "@/components/docs/StyleCase.astro"; +import Demo from "@/components/docs/demos/Demo.astro"; + +{/* React demos */} +import BasicUsageDemoReact from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage"; +import basicUsageReactTsx from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx?raw"; +import basicUsageReactCss from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage.css?raw"; + +{/* HTML demos */} +import BasicUsageDemoHtml from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro"; +import basicUsageHtml from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.html?raw"; +import basicUsageHtmlTs from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.ts?raw"; ## Anatomy @@ -22,4 +34,30 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro"; ``` +## Examples + +### Basic Usage + + + + + + + + + + + + + + + + + diff --git a/site/src/content/docs/reference/mute-button.mdx b/site/src/content/docs/reference/mute-button.mdx index 82b41062..6a9a9e52 100644 --- a/site/src/content/docs/reference/mute-button.mdx +++ b/site/src/content/docs/reference/mute-button.mdx @@ -7,6 +7,18 @@ description: A button component for muting and unmuting audio playback import ApiReference from "@/components/docs/api-reference/ApiReference.astro"; import FrameworkCase from "@/components/docs/FrameworkCase.astro"; +import StyleCase from "@/components/docs/StyleCase.astro"; +import Demo from "@/components/docs/demos/Demo.astro"; + +{/* React demos */} +import BasicUsageDemoReact from "@/components/docs/demos/mute-button/react/css/BasicUsage"; +import basicUsageReactTsx from "@/components/docs/demos/mute-button/react/css/BasicUsage.tsx?raw"; +import basicUsageReactCss from "@/components/docs/demos/mute-button/react/css/BasicUsage.css?raw"; + +{/* HTML demos */} +import BasicUsageDemoHtml from "@/components/docs/demos/mute-button/html/css/BasicUsage.astro"; +import basicUsageHtml from "@/components/docs/demos/mute-button/html/css/BasicUsage.html?raw"; +import basicUsageHtmlTs from "@/components/docs/demos/mute-button/html/css/BasicUsage.ts?raw"; ## Anatomy @@ -22,4 +34,30 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro"; ``` +## Examples + +### Basic Usage + + + + + + + + + + + + + + + + + diff --git a/site/src/content/docs/reference/play-button.mdx b/site/src/content/docs/reference/play-button.mdx index e39f4b8c..747afe4a 100644 --- a/site/src/content/docs/reference/play-button.mdx +++ b/site/src/content/docs/reference/play-button.mdx @@ -7,6 +7,18 @@ description: A button component for playing and pausing media playback import ApiReference from "@/components/docs/api-reference/ApiReference.astro"; import FrameworkCase from "@/components/docs/FrameworkCase.astro"; +import StyleCase from "@/components/docs/StyleCase.astro"; +import Demo from "@/components/docs/demos/Demo.astro"; + +{/* React demos */} +import BasicUsageDemoReact from "@/components/docs/demos/play-button/react/css/BasicUsage"; +import basicUsageReactTsx from "@/components/docs/demos/play-button/react/css/BasicUsage.tsx?raw"; +import basicUsageReactCss from "@/components/docs/demos/play-button/react/css/BasicUsage.css?raw"; + +{/* HTML demos */} +import BasicUsageDemoHtml from "@/components/docs/demos/play-button/html/css/BasicUsage.astro"; +import basicUsageHtml from "@/components/docs/demos/play-button/html/css/BasicUsage.html?raw"; +import basicUsageHtmlTs from "@/components/docs/demos/play-button/html/css/BasicUsage.ts?raw"; ## Anatomy @@ -22,4 +34,30 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro"; ``` +## Examples + +### Basic Usage + + + + + + + + + + + + + + + + + diff --git a/site/src/content/docs/reference/time.mdx b/site/src/content/docs/reference/time.mdx index 03b1b170..86f20f41 100644 --- a/site/src/content/docs/reference/time.mdx +++ b/site/src/content/docs/reference/time.mdx @@ -7,6 +7,46 @@ description: Components for displaying and composing media time information import ApiReference from "@/components/docs/api-reference/ApiReference.astro"; import FrameworkCase from "@/components/docs/FrameworkCase.astro"; +import StyleCase from "@/components/docs/StyleCase.astro"; +import Demo from "@/components/docs/demos/Demo.astro"; + +{/* React demos */} +import CurrentTimeDemoReact from "@/components/docs/demos/time/react/css/CurrentTime"; +import currentTimeReactTsx from "@/components/docs/demos/time/react/css/CurrentTime.tsx?raw"; +import currentTimeReactCss from "@/components/docs/demos/time/react/css/CurrentTime.css?raw"; + +import CurrentDurationDemoReact from "@/components/docs/demos/time/react/css/CurrentDuration"; +import currentDurationReactTsx from "@/components/docs/demos/time/react/css/CurrentDuration.tsx?raw"; +import currentDurationReactCss from "@/components/docs/demos/time/react/css/CurrentDuration.css?raw"; + +import RemainingDemoReact from "@/components/docs/demos/time/react/css/Remaining"; +import remainingReactTsx from "@/components/docs/demos/time/react/css/Remaining.tsx?raw"; +import remainingReactCss from "@/components/docs/demos/time/react/css/Remaining.css?raw"; + +import CustomSeparatorDemoReact from "@/components/docs/demos/time/react/css/CustomSeparator"; +import customSeparatorReactTsx from "@/components/docs/demos/time/react/css/CustomSeparator.tsx?raw"; +import customSeparatorReactCss from "@/components/docs/demos/time/react/css/CustomSeparator.css?raw"; + +import CustomNegativeSignDemoReact from "@/components/docs/demos/time/react/css/CustomNegativeSign"; +import customNegativeSignReactTsx from "@/components/docs/demos/time/react/css/CustomNegativeSign.tsx?raw"; +import customNegativeSignReactCss from "@/components/docs/demos/time/react/css/CustomNegativeSign.css?raw"; + +{/* HTML demos */} +import CurrentTimeDemoHtml from "@/components/docs/demos/time/html/css/CurrentTime.astro"; +import currentTimeHtml from "@/components/docs/demos/time/html/css/CurrentTime.html?raw"; +import currentTimeHtmlTs from "@/components/docs/demos/time/html/css/CurrentTime.ts?raw"; +import CurrentDurationDemoHtml from "@/components/docs/demos/time/html/css/CurrentDuration.astro"; +import currentDurationHtml from "@/components/docs/demos/time/html/css/CurrentDuration.html?raw"; +import currentDurationHtmlTs from "@/components/docs/demos/time/html/css/CurrentDuration.ts?raw"; +import RemainingDemoHtml from "@/components/docs/demos/time/html/css/Remaining.astro"; +import remainingHtml from "@/components/docs/demos/time/html/css/Remaining.html?raw"; +import remainingHtmlTs from "@/components/docs/demos/time/html/css/Remaining.ts?raw"; +import CustomSeparatorDemoHtml from "@/components/docs/demos/time/html/css/CustomSeparator.astro"; +import customSeparatorHtml from "@/components/docs/demos/time/html/css/CustomSeparator.html?raw"; +import customSeparatorHtmlTs from "@/components/docs/demos/time/html/css/CustomSeparator.ts?raw"; +import CustomNegativeSignDemoHtml from "@/components/docs/demos/time/html/css/CustomNegativeSign.astro"; +import customNegativeSignHtml from "@/components/docs/demos/time/html/css/CustomNegativeSign.html?raw"; +import customNegativeSignHtmlTs from "@/components/docs/demos/time/html/css/CustomNegativeSign.ts?raw"; ## Anatomy @@ -30,4 +70,126 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro"; ``` +## Examples + +### Current Time + + + + + + + + + + + + + + + + + +### Current / Duration + + + + + + + + + + + + + + + + + +### Remaining + + + + + + + + + + + + + + + + + +### Custom Separator + + + + + + + + + + + + + + + + + +### Custom Negative Sign + + + + + + + + + + + + + + + + +