From 876493f0f4fbffb1a8191cd70a7470048fb50e9a Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 3 Jul 2026 00:01:10 +0000 Subject: [PATCH] feat(site): tailwind demo variants for media element and use-media references Bring the tailwind style support up to date with demos added on main since this branch was written: - html/tailwind and react/tailwind BasicUsage variants for the new media element references (background-video, cast-button, dash-video, hlsjs-video, mux-audio, mux-video, native-hls-video, simple-hls-video, simple-hls-audio-only) and the use-media reference, mirroring their css variants 1:1 - wire the new variants into the reference pages behind (react demos on the media element pages stay source-only, matching the css variants until #1343 lands) - sync the tooltip react tailwind demos with the Tooltip.Label change the css variants picked up in the meantime Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01WD9APXrFDbbMEUZrR1imz3 --- .../html/tailwind/BasicUsage.astro | 9 ++++ .../html/tailwind/BasicUsage.html | 5 ++ .../html/tailwind/BasicUsage.ts | 1 + .../react/tailwind/BasicUsage.tsx | 9 ++++ .../html/tailwind/BasicUsage.astro | 9 ++++ .../cast-button/html/tailwind/BasicUsage.html | 18 +++++++ .../cast-button/html/tailwind/BasicUsage.ts | 3 ++ .../cast-button/react/tailwind/BasicUsage.tsx | 28 ++++++++++ .../dash-video/html/tailwind/BasicUsage.astro | 9 ++++ .../dash-video/html/tailwind/BasicUsage.html | 9 ++++ .../dash-video/html/tailwind/BasicUsage.ts | 2 + .../dash-video/react/tailwind/BasicUsage.tsx | 14 +++++ .../html/tailwind/BasicUsage.astro | 9 ++++ .../hlsjs-video/html/tailwind/BasicUsage.html | 9 ++++ .../hlsjs-video/html/tailwind/BasicUsage.ts | 2 + .../hlsjs-video/react/tailwind/BasicUsage.tsx | 14 +++++ .../mux-audio/html/tailwind/BasicUsage.astro | 9 ++++ .../mux-audio/html/tailwind/BasicUsage.html | 6 +++ .../mux-audio/html/tailwind/BasicUsage.ts | 1 + .../mux-audio/react/tailwind/BasicUsage.tsx | 12 +++++ .../mux-video/html/tailwind/BasicUsage.astro | 9 ++++ .../mux-video/html/tailwind/BasicUsage.html | 10 ++++ .../mux-video/html/tailwind/BasicUsage.ts | 2 + .../mux-video/react/tailwind/BasicUsage.tsx | 15 ++++++ .../html/tailwind/BasicUsage.astro | 9 ++++ .../html/tailwind/BasicUsage.html | 9 ++++ .../html/tailwind/BasicUsage.ts | 2 + .../react/tailwind/BasicUsage.tsx | 14 +++++ .../html/tailwind/BasicUsage.astro | 9 ++++ .../html/tailwind/BasicUsage.html | 5 ++ .../html/tailwind/BasicUsage.ts | 1 + .../react/tailwind/BasicUsage.tsx | 11 ++++ .../html/tailwind/BasicUsage.astro | 9 ++++ .../html/tailwind/BasicUsage.html | 9 ++++ .../html/tailwind/BasicUsage.ts | 2 + .../react/tailwind/BasicUsage.tsx | 14 +++++ .../tooltip/react/tailwind/BasicUsage.tsx | 2 +- .../demos/tooltip/react/tailwind/Grouping.tsx | 6 +-- .../use-media/react/tailwind/BasicUsage.tsx | 53 +++++++++++++++++++ .../docs/reference/background-video.mdx | 20 +++++++ .../content/docs/reference/cast-button.mdx | 20 +++++++ .../src/content/docs/reference/dash-video.mdx | 22 ++++++++ .../content/docs/reference/hlsjs-video.mdx | 22 ++++++++ site/src/content/docs/reference/mux-audio.mdx | 22 ++++++++ site/src/content/docs/reference/mux-video.mdx | 22 ++++++++ .../docs/reference/native-hls-video.mdx | 22 ++++++++ .../docs/reference/simple-hls-audio-only.mdx | 22 ++++++++ .../docs/reference/simple-hls-video.mdx | 22 ++++++++ site/src/content/docs/reference/use-media.mdx | 11 ++++ 49 files changed, 570 insertions(+), 4 deletions(-) create mode 100644 site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.astro create mode 100644 site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.html create mode 100644 site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.ts create mode 100644 site/src/components/docs/demos/background-video/react/tailwind/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.astro create mode 100644 site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.html create mode 100644 site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.ts create mode 100644 site/src/components/docs/demos/cast-button/react/tailwind/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.astro create mode 100644 site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.html create mode 100644 site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.ts create mode 100644 site/src/components/docs/demos/dash-video/react/tailwind/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.astro create mode 100644 site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.html create mode 100644 site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.ts create mode 100644 site/src/components/docs/demos/hlsjs-video/react/tailwind/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.astro create mode 100644 site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.html create mode 100644 site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.ts create mode 100644 site/src/components/docs/demos/mux-audio/react/tailwind/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.astro create mode 100644 site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.html create mode 100644 site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.ts create mode 100644 site/src/components/docs/demos/mux-video/react/tailwind/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.astro create mode 100644 site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.html create mode 100644 site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.ts create mode 100644 site/src/components/docs/demos/native-hls-video/react/tailwind/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.astro create mode 100644 site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.html create mode 100644 site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.ts create mode 100644 site/src/components/docs/demos/simple-hls-audio-only/react/tailwind/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.astro create mode 100644 site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.html create mode 100644 site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.ts create mode 100644 site/src/components/docs/demos/simple-hls-video/react/tailwind/BasicUsage.tsx create mode 100644 site/src/components/docs/demos/use-media/react/tailwind/BasicUsage.tsx diff --git a/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/background-video/html/tailwind/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/background-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..75e98a68 --- /dev/null +++ b/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.html @@ -0,0 +1,5 @@ +
+ +
diff --git a/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..a4c61a6a --- /dev/null +++ b/site/src/components/docs/demos/background-video/html/tailwind/BasicUsage.ts @@ -0,0 +1 @@ +import '@videojs/html/media/background-video'; diff --git a/site/src/components/docs/demos/background-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/background-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..535a7967 --- /dev/null +++ b/site/src/components/docs/demos/background-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,9 @@ +import { BackgroundVideo } from '@videojs/react/media/background-video'; + +export default function BasicUsage() { + return ( +
+ +
+ ); +} diff --git a/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/cast-button/html/tailwind/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/cast-button/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..1feb0b63 --- /dev/null +++ b/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.html @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..7d7de243 --- /dev/null +++ b/site/src/components/docs/demos/cast-button/html/tailwind/BasicUsage.ts @@ -0,0 +1,3 @@ +import '@videojs/html/video/player'; +import '@videojs/html/media/hlsjs-video'; +import '@videojs/html/ui/cast-button'; diff --git a/site/src/components/docs/demos/cast-button/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/cast-button/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..3b6dc591 --- /dev/null +++ b/site/src/components/docs/demos/cast-button/react/tailwind/BasicUsage.tsx @@ -0,0 +1,28 @@ +import { CastButton, createPlayer } from '@videojs/react'; +import { HlsJsVideo } from '@videojs/react/media/hlsjs-video'; +import { videoFeatures } from '@videojs/react/video'; + +const Player = createPlayer({ features: videoFeatures }); + +export default function BasicUsage() { + return ( + + + + ( + + )} + /> + + + ); +} diff --git a/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/dash-video/html/tailwind/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/dash-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..ec80f6b4 --- /dev/null +++ b/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.html @@ -0,0 +1,9 @@ + + + diff --git a/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..7fec108f --- /dev/null +++ b/site/src/components/docs/demos/dash-video/html/tailwind/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/media/container'; +import '@videojs/html/media/dash-video'; diff --git a/site/src/components/docs/demos/dash-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/dash-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..12529b86 --- /dev/null +++ b/site/src/components/docs/demos/dash-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,14 @@ +import { DashVideo } from '@videojs/react/media/dash-video'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/hlsjs-video/html/tailwind/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/hlsjs-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..61c40103 --- /dev/null +++ b/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.html @@ -0,0 +1,9 @@ + + + diff --git a/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..78f5bb5a --- /dev/null +++ b/site/src/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/media/container'; +import '@videojs/html/media/hlsjs-video'; diff --git a/site/src/components/docs/demos/hlsjs-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/hlsjs-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..3d97e89a --- /dev/null +++ b/site/src/components/docs/demos/hlsjs-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,14 @@ +import { HlsJsVideo } from '@videojs/react/media/hlsjs-video'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/mux-audio/html/tailwind/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/mux-audio/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..102fba90 --- /dev/null +++ b/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.html @@ -0,0 +1,6 @@ + diff --git a/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..c68a1ac5 --- /dev/null +++ b/site/src/components/docs/demos/mux-audio/html/tailwind/BasicUsage.ts @@ -0,0 +1 @@ +import '@videojs/html/media/mux-audio'; diff --git a/site/src/components/docs/demos/mux-audio/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/mux-audio/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..e7bc4fe7 --- /dev/null +++ b/site/src/components/docs/demos/mux-audio/react/tailwind/BasicUsage.tsx @@ -0,0 +1,12 @@ +import { MuxAudio } from '@videojs/react/media/mux-audio'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/mux-video/html/tailwind/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/mux-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..8ad52695 --- /dev/null +++ b/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.html @@ -0,0 +1,10 @@ + + + diff --git a/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..ab31f0a2 --- /dev/null +++ b/site/src/components/docs/demos/mux-video/html/tailwind/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/media/container'; +import '@videojs/html/media/mux-video'; diff --git a/site/src/components/docs/demos/mux-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/mux-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..2b041b1e --- /dev/null +++ b/site/src/components/docs/demos/mux-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,15 @@ +import { MuxVideo } from '@videojs/react/media/mux-video'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/native-hls-video/html/tailwind/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/native-hls-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..19e68ec0 --- /dev/null +++ b/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.html @@ -0,0 +1,9 @@ + + + diff --git a/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..2d4dbd7f --- /dev/null +++ b/site/src/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/media/container'; +import '@videojs/html/media/native-hls-video'; diff --git a/site/src/components/docs/demos/native-hls-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/native-hls-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..bc389dff --- /dev/null +++ b/site/src/components/docs/demos/native-hls-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,14 @@ +import { NativeHlsVideo } from '@videojs/react/media/native-hls-video'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/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/simple-hls-audio-only/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..586d72f9 --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.html @@ -0,0 +1,5 @@ + diff --git a/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..77d7ba4f --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.ts @@ -0,0 +1 @@ +import '@videojs/html/media/simple-hls-audio-only'; diff --git a/site/src/components/docs/demos/simple-hls-audio-only/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/simple-hls-audio-only/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..95203010 --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-audio-only/react/tailwind/BasicUsage.tsx @@ -0,0 +1,11 @@ +import { SimpleHlsAudioOnly } from '@videojs/react/media/simple-hls-audio-only'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.astro b/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.astro new file mode 100644 index 00000000..c515bacd --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-video/html/tailwind/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/simple-hls-video/html/tailwind/BasicUsage.html b/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.html new file mode 100644 index 00000000..8569d3a1 --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.html @@ -0,0 +1,9 @@ + + + diff --git a/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.ts b/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.ts new file mode 100644 index 00000000..da2c5386 --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.ts @@ -0,0 +1,2 @@ +import '@videojs/html/media/container'; +import '@videojs/html/media/simple-hls-video'; diff --git a/site/src/components/docs/demos/simple-hls-video/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/simple-hls-video/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..e79ef101 --- /dev/null +++ b/site/src/components/docs/demos/simple-hls-video/react/tailwind/BasicUsage.tsx @@ -0,0 +1,14 @@ +import { SimpleHlsVideo } from '@videojs/react/media/simple-hls-video'; + +export default function BasicUsage() { + return ( + + ); +} diff --git a/site/src/components/docs/demos/tooltip/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/tooltip/react/tailwind/BasicUsage.tsx index 8a07c620..2066612e 100644 --- a/site/src/components/docs/demos/tooltip/react/tailwind/BasicUsage.tsx +++ b/site/src/components/docs/demos/tooltip/react/tailwind/BasicUsage.tsx @@ -9,7 +9,7 @@ export default function BasicUsage() { - Tooltip content + Tooltip content diff --git a/site/src/components/docs/demos/tooltip/react/tailwind/Grouping.tsx b/site/src/components/docs/demos/tooltip/react/tailwind/Grouping.tsx index 59456098..95dd0651 100644 --- a/site/src/components/docs/demos/tooltip/react/tailwind/Grouping.tsx +++ b/site/src/components/docs/demos/tooltip/react/tailwind/Grouping.tsx @@ -10,7 +10,7 @@ export default function Grouping() { - Play video + Play video @@ -19,7 +19,7 @@ export default function Grouping() { - Mute audio + Mute audio @@ -28,7 +28,7 @@ export default function Grouping() { - Enter fullscreen + Enter fullscreen diff --git a/site/src/components/docs/demos/use-media/react/tailwind/BasicUsage.tsx b/site/src/components/docs/demos/use-media/react/tailwind/BasicUsage.tsx new file mode 100644 index 00000000..0a869b28 --- /dev/null +++ b/site/src/components/docs/demos/use-media/react/tailwind/BasicUsage.tsx @@ -0,0 +1,53 @@ +import { createPlayer, isMediaSourceCapable, isMediaVideoDimensionsCapable } from '@videojs/react'; +import { Video, videoFeatures } from '@videojs/react/video'; + +const Player = createPlayer({ + features: videoFeatures, +}); + +function MediaInfo() { + const media = Player.useMedia(); + + if (!media) return null; + + return ( +
+ {isMediaSourceCapable(media) && ( +
+
src
+
{media.currentSrc || '—'}
+
+ )} + {isMediaVideoDimensionsCapable(media) && ( + <> +
+
videoWidth
+
{media.videoWidth}px
+
+
+
videoHeight
+
{media.videoHeight}px
+
+ + )} +
+ ); +} + +export default function BasicUsage() { + return ( + + + + + ); +} diff --git a/site/src/content/docs/reference/background-video.mdx b/site/src/content/docs/reference/background-video.mdx index c54c1a08..ee5b2857 100644 --- a/site/src/content/docs/reference/background-video.mdx +++ b/site/src/content/docs/reference/background-video.mdx @@ -20,12 +20,17 @@ import Tr from "@/components/typography/Tr.astro"; import BasicUsageDemoReact from "@/components/docs/demos/background-video/react/css/BasicUsage"; import basicUsageReactTsx from "@/components/docs/demos/background-video/react/css/BasicUsage.tsx?raw"; import basicUsageReactCss from "@/components/docs/demos/background-video/react/css/BasicUsage.css?raw"; +import BasicUsageDemoReactTailwind from "@/components/docs/demos/background-video/react/tailwind/BasicUsage"; +import basicUsageReactTailwindTsx from "@/components/docs/demos/background-video/react/tailwind/BasicUsage.tsx?raw"; {/* HTML demos */} import BasicUsageDemoHtml from "@/components/docs/demos/background-video/html/css/BasicUsage.astro"; import basicUsageHtml from "@/components/docs/demos/background-video/html/css/BasicUsage.html?raw"; import basicUsageHtmlCss from "@/components/docs/demos/background-video/html/css/BasicUsage.css?raw"; import basicUsageHtmlTs from "@/components/docs/demos/background-video/html/css/BasicUsage.ts?raw"; +import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/background-video/html/tailwind/BasicUsage.astro"; +import basicUsageTailwindHtml from "@/components/docs/demos/background-video/html/tailwind/BasicUsage.html?raw"; +import basicUsageTailwindHtmlTs from "@/components/docs/demos/background-video/html/tailwind/BasicUsage.ts?raw"; Decorative background video. By default it's muted, looped, and autoplaying — use the opt-out attributes below to change that. Renders a ` + + + + + @@ -54,6 +66,14 @@ Decorative background video. By default it's muted, looped, and autoplaying — + + + + + ## API Reference diff --git a/site/src/content/docs/reference/cast-button.mdx b/site/src/content/docs/reference/cast-button.mdx index b7697fdf..f5cc159c 100644 --- a/site/src/content/docs/reference/cast-button.mdx +++ b/site/src/content/docs/reference/cast-button.mdx @@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro"; import BasicUsageDemoReact from "@/components/docs/demos/cast-button/react/css/BasicUsage"; import basicUsageReactTsx from "@/components/docs/demos/cast-button/react/css/BasicUsage.tsx?raw"; import basicUsageReactCss from "@/components/docs/demos/cast-button/react/css/BasicUsage.css?raw"; +import BasicUsageDemoReactTailwind from "@/components/docs/demos/cast-button/react/tailwind/BasicUsage"; +import basicUsageReactTailwindTsx from "@/components/docs/demos/cast-button/react/tailwind/BasicUsage.tsx?raw"; {/* HTML demos */} import BasicUsageDemoHtml from "@/components/docs/demos/cast-button/html/css/BasicUsage.astro"; import basicUsageHtml from "@/components/docs/demos/cast-button/html/css/BasicUsage.html?raw"; import basicUsageHtmlCss from "@/components/docs/demos/cast-button/html/css/BasicUsage.css?raw"; import basicUsageHtmlTs from "@/components/docs/demos/cast-button/html/css/BasicUsage.ts?raw"; +import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/cast-button/html/tailwind/BasicUsage.astro"; +import basicUsageTailwindHtml from "@/components/docs/demos/cast-button/html/tailwind/BasicUsage.html?raw"; +import basicUsageTailwindHtmlTs from "@/components/docs/demos/cast-button/html/tailwind/BasicUsage.ts?raw"; ## Anatomy @@ -100,6 +105,13 @@ Override with the `label` prop. Keyboard activation: Enter / Spa + + + + + @@ -112,6 +124,14 @@ Override with the `label` prop. Keyboard activation: Enter / Spa + + + + + diff --git a/site/src/content/docs/reference/dash-video.mdx b/site/src/content/docs/reference/dash-video.mdx index 21b47127..817b7fa8 100644 --- a/site/src/content/docs/reference/dash-video.mdx +++ b/site/src/content/docs/reference/dash-video.mdx @@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; import ServerCode from "@/components/Code/ServerCode.astro"; import basicUsageReactTsx from "@/components/docs/demos/dash-video/react/css/BasicUsage.tsx?raw"; import basicUsageReactCss from "@/components/docs/demos/dash-video/react/css/BasicUsage.css?raw"; +import basicUsageReactTailwindTsx from "@/components/docs/demos/dash-video/react/tailwind/BasicUsage.tsx?raw"; {/* HTML demos */} import BasicUsageDemoHtml from "@/components/docs/demos/dash-video/html/css/BasicUsage.astro"; import basicUsageHtml from "@/components/docs/demos/dash-video/html/css/BasicUsage.html?raw"; import basicUsageHtmlCss from "@/components/docs/demos/dash-video/html/css/BasicUsage.css?raw"; import basicUsageHtmlTs from "@/components/docs/demos/dash-video/html/css/BasicUsage.ts?raw"; +import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/dash-video/html/tailwind/BasicUsage.astro"; +import basicUsageTailwindHtml from "@/components/docs/demos/dash-video/html/tailwind/BasicUsage.html?raw"; +import basicUsageTailwindHtmlTs from "@/components/docs/demos/dash-video/html/tailwind/BasicUsage.ts?raw"; DASH video element powered by [dash.js](https://github.com/Dash-Industry-Forum/dash.js/) for MPEG-DASH adaptive bitrate streaming. @@ -44,6 +48,16 @@ DASH video element powered by [dash.js](https://github.com/Dash-Industry-Forum/d + + + + App.tsx + + + + + + @@ -56,6 +70,14 @@ DASH video element powered by [dash.js](https://github.com/Dash-Industry-Forum/d + + + + + diff --git a/site/src/content/docs/reference/hlsjs-video.mdx b/site/src/content/docs/reference/hlsjs-video.mdx index ae0957a9..5c16925d 100644 --- a/site/src/content/docs/reference/hlsjs-video.mdx +++ b/site/src/content/docs/reference/hlsjs-video.mdx @@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; import ServerCode from "@/components/Code/ServerCode.astro"; import basicUsageReactTsx from "@/components/docs/demos/hlsjs-video/react/css/BasicUsage.tsx?raw"; import basicUsageReactCss from "@/components/docs/demos/hlsjs-video/react/css/BasicUsage.css?raw"; +import basicUsageReactTailwindTsx from "@/components/docs/demos/hlsjs-video/react/tailwind/BasicUsage.tsx?raw"; {/* HTML demos */} import BasicUsageDemoHtml from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.astro"; import basicUsageHtml from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.html?raw"; import basicUsageHtmlCss from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.css?raw"; import basicUsageHtmlTs from "@/components/docs/demos/hlsjs-video/html/css/BasicUsage.ts?raw"; +import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.astro"; +import basicUsageTailwindHtml from "@/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.html?raw"; +import basicUsageTailwindHtmlTs from "@/components/docs/demos/hlsjs-video/html/tailwind/BasicUsage.ts?raw"; HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for adaptive bitrate streaming. It's the recommended choice for HLS playback: full feature support across every browser. For alternatives, see [NativeHlsVideo](/docs/framework/html/reference/native-hls-video/) (browser-native HLS) or [SimpleHlsVideo](/docs/framework/html/reference/simple-hls-video/) (lightweight HLS). @@ -44,6 +48,16 @@ HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for + + + + App.tsx + + + + + + @@ -56,6 +70,14 @@ HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for + + + + + diff --git a/site/src/content/docs/reference/mux-audio.mdx b/site/src/content/docs/reference/mux-audio.mdx index e4504830..69d21b10 100644 --- a/site/src/content/docs/reference/mux-audio.mdx +++ b/site/src/content/docs/reference/mux-audio.mdx @@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; import ServerCode from "@/components/Code/ServerCode.astro"; import basicUsageReactTsx from "@/components/docs/demos/mux-audio/react/css/BasicUsage.tsx?raw"; import basicUsageReactCss from "@/components/docs/demos/mux-audio/react/css/BasicUsage.css?raw"; +import basicUsageReactTailwindTsx from "@/components/docs/demos/mux-audio/react/tailwind/BasicUsage.tsx?raw"; {/* HTML demos */} import BasicUsageDemoHtml from "@/components/docs/demos/mux-audio/html/css/BasicUsage.astro"; import basicUsageHtml from "@/components/docs/demos/mux-audio/html/css/BasicUsage.html?raw"; import basicUsageHtmlCss from "@/components/docs/demos/mux-audio/html/css/BasicUsage.css?raw"; import basicUsageHtmlTs from "@/components/docs/demos/mux-audio/html/css/BasicUsage.ts?raw"; +import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/mux-audio/html/tailwind/BasicUsage.astro"; +import basicUsageTailwindHtml from "@/components/docs/demos/mux-audio/html/tailwind/BasicUsage.html?raw"; +import basicUsageTailwindHtmlTs from "@/components/docs/demos/mux-audio/html/tailwind/BasicUsage.ts?raw"; Audio element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations. @@ -44,6 +48,16 @@ Audio element for playing Mux-hosted HLS streams. Built on hls.js with Mux-speci + + + + App.tsx + + + + + + @@ -56,6 +70,14 @@ Audio element for playing Mux-hosted HLS streams. Built on hls.js with Mux-speci + + + + + diff --git a/site/src/content/docs/reference/mux-video.mdx b/site/src/content/docs/reference/mux-video.mdx index 7c93cf22..59c98374 100644 --- a/site/src/content/docs/reference/mux-video.mdx +++ b/site/src/content/docs/reference/mux-video.mdx @@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; import ServerCode from "@/components/Code/ServerCode.astro"; import basicUsageReactTsx from "@/components/docs/demos/mux-video/react/css/BasicUsage.tsx?raw"; import basicUsageReactCss from "@/components/docs/demos/mux-video/react/css/BasicUsage.css?raw"; +import basicUsageReactTailwindTsx from "@/components/docs/demos/mux-video/react/tailwind/BasicUsage.tsx?raw"; {/* HTML demos */} import BasicUsageDemoHtml from "@/components/docs/demos/mux-video/html/css/BasicUsage.astro"; import basicUsageHtml from "@/components/docs/demos/mux-video/html/css/BasicUsage.html?raw"; import basicUsageHtmlCss from "@/components/docs/demos/mux-video/html/css/BasicUsage.css?raw"; import basicUsageHtmlTs from "@/components/docs/demos/mux-video/html/css/BasicUsage.ts?raw"; +import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/mux-video/html/tailwind/BasicUsage.astro"; +import basicUsageTailwindHtml from "@/components/docs/demos/mux-video/html/tailwind/BasicUsage.html?raw"; +import basicUsageTailwindHtmlTs from "@/components/docs/demos/mux-video/html/tailwind/BasicUsage.ts?raw"; Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-specific optimizations. @@ -44,6 +48,16 @@ Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-speci + + + + App.tsx + + + + + + @@ -56,6 +70,14 @@ Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-speci + + + + + diff --git a/site/src/content/docs/reference/native-hls-video.mdx b/site/src/content/docs/reference/native-hls-video.mdx index 2bae7ea5..7757672b 100644 --- a/site/src/content/docs/reference/native-hls-video.mdx +++ b/site/src/content/docs/reference/native-hls-video.mdx @@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; import ServerCode from "@/components/Code/ServerCode.astro"; import basicUsageReactTsx from "@/components/docs/demos/native-hls-video/react/css/BasicUsage.tsx?raw"; import basicUsageReactCss from "@/components/docs/demos/native-hls-video/react/css/BasicUsage.css?raw"; +import basicUsageReactTailwindTsx from "@/components/docs/demos/native-hls-video/react/tailwind/BasicUsage.tsx?raw"; {/* HTML demos */} import BasicUsageDemoHtml from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.astro"; import basicUsageHtml from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.html?raw"; import basicUsageHtmlCss from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.css?raw"; import basicUsageHtmlTs from "@/components/docs/demos/native-hls-video/html/css/BasicUsage.ts?raw"; +import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.astro"; +import basicUsageTailwindHtml from "@/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.html?raw"; +import basicUsageTailwindHtmlTs from "@/components/docs/demos/native-hls-video/html/tailwind/BasicUsage.ts?raw"; HLS video element that relies on the browser's native HLS support. Works on Safari and other browsers with built-in HLS playback. For cross-browser HLS support, use [HlsJsVideo](/docs/framework/html/reference/hlsjs-video/) instead. @@ -44,6 +48,16 @@ HLS video element that relies on the browser's native HLS support. Works on Safa + + + + App.tsx + + + + + + @@ -56,6 +70,14 @@ HLS video element that relies on the browser's native HLS support. Works on Safa + + + + + diff --git a/site/src/content/docs/reference/simple-hls-audio-only.mdx b/site/src/content/docs/reference/simple-hls-audio-only.mdx index afca6b08..6eb0d518 100644 --- a/site/src/content/docs/reference/simple-hls-audio-only.mdx +++ b/site/src/content/docs/reference/simple-hls-audio-only.mdx @@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; import ServerCode from "@/components/Code/ServerCode.astro"; import basicUsageReactTsx from "@/components/docs/demos/simple-hls-audio-only/react/css/BasicUsage.tsx?raw"; import basicUsageReactCss from "@/components/docs/demos/simple-hls-audio-only/react/css/BasicUsage.css?raw"; +import basicUsageReactTailwindTsx from "@/components/docs/demos/simple-hls-audio-only/react/tailwind/BasicUsage.tsx?raw"; {/* HTML demos */} import BasicUsageDemoHtml from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.astro"; import basicUsageHtml from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.html?raw"; import basicUsageHtmlCss from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.css?raw"; import basicUsageHtmlTs from "@/components/docs/demos/simple-hls-audio-only/html/css/BasicUsage.ts?raw"; +import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.astro"; +import basicUsageTailwindHtml from "@/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.html?raw"; +import basicUsageTailwindHtmlTs from "@/components/docs/demos/simple-hls-audio-only/html/tailwind/BasicUsage.ts?raw"; Audio-only HLS element that plays just the audio rendition of an HLS stream — even when the source is a mixed audio/video manifest. Useful for audio podcast players, background audio, and bandwidth-constrained contexts where downloading video data would be wasted. For full audio/video HLS playback, see [SimpleHlsVideo](/docs/framework/html/reference/simple-hls-video/). @@ -44,6 +48,16 @@ Audio-only HLS element that plays just the audio rendition of an HLS stream — + + + + App.tsx + + + + + + @@ -56,6 +70,14 @@ Audio-only HLS element that plays just the audio rendition of an HLS stream — + + + + + diff --git a/site/src/content/docs/reference/simple-hls-video.mdx b/site/src/content/docs/reference/simple-hls-video.mdx index b84a2b79..20704ff6 100644 --- a/site/src/content/docs/reference/simple-hls-video.mdx +++ b/site/src/content/docs/reference/simple-hls-video.mdx @@ -15,12 +15,16 @@ import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; import ServerCode from "@/components/Code/ServerCode.astro"; import basicUsageReactTsx from "@/components/docs/demos/simple-hls-video/react/css/BasicUsage.tsx?raw"; import basicUsageReactCss from "@/components/docs/demos/simple-hls-video/react/css/BasicUsage.css?raw"; +import basicUsageReactTailwindTsx from "@/components/docs/demos/simple-hls-video/react/tailwind/BasicUsage.tsx?raw"; {/* HTML demos */} import BasicUsageDemoHtml from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.astro"; import basicUsageHtml from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.html?raw"; import basicUsageHtmlCss from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.css?raw"; import basicUsageHtmlTs from "@/components/docs/demos/simple-hls-video/html/css/BasicUsage.ts?raw"; +import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.astro"; +import basicUsageTailwindHtml from "@/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.html?raw"; +import basicUsageTailwindHtmlTs from "@/components/docs/demos/simple-hls-video/html/tailwind/BasicUsage.ts?raw"; Lightweight HLS video element optimized for minimal bundle size. For full hls.js feature support, use [HlsJsVideo](/docs/framework/html/reference/hlsjs-video/) instead. @@ -44,6 +48,16 @@ Lightweight HLS video element optimized for minimal bundle size. For full hls.js + + + + App.tsx + + + + + + @@ -56,6 +70,14 @@ Lightweight HLS video element optimized for minimal bundle size. For full hls.js + + + + + diff --git a/site/src/content/docs/reference/use-media.mdx b/site/src/content/docs/reference/use-media.mdx index 0c354f5b..d9f29751 100644 --- a/site/src/content/docs/reference/use-media.mdx +++ b/site/src/content/docs/reference/use-media.mdx @@ -11,6 +11,8 @@ import StyleCase from "@/components/docs/StyleCase.astro"; import BasicUsageDemoReact from "@/components/docs/demos/use-media/react/css/BasicUsage"; import basicUsageReactTsx from "@/components/docs/demos/use-media/react/css/BasicUsage.tsx?raw"; import basicUsageReactCss from "@/components/docs/demos/use-media/react/css/BasicUsage.css?raw"; +import BasicUsageDemoReactTailwind from "@/components/docs/demos/use-media/react/tailwind/BasicUsage"; +import basicUsageReactTailwindTsx from "@/components/docs/demos/use-media/react/tailwind/BasicUsage.tsx?raw"; `Player.useMedia` (from `createPlayer`) returns the current `Media` object (or `null` if no media has been registered yet). `Media` is a runtime-agnostic playback interface — any instance that conforms to it, including an `HTMLVideoElement`, can be the media. It exposes capabilities like `play()` and event subscription rather than assuming a native element. It must be called within a `Player.Provider`. The media object becomes available after a `