zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): tailwind demo variants for remaining component references

Browse Source 
Covers airplay-button, buffering-indicator, captions-button, controls,
playback-rate-button, poster, and popover.

Refs #840

https://claude.ai/code/session_01LUcwUd8E4Ekakp7NTFb6c5
This commit is contained in:
Claude
2026-06-11 22:57:09 +00:00
parent 18ad240660
commit c4af9832e8
35 changed files with 589 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.astro
+9
View File
@@ -0,0 +1,9 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './BasicUsage.html?raw';
---
<HtmlDemo html={html} />
<script>
import "./BasicUsage.ts";
</script>
site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.html
+20
View File
@@ -0,0 +1,20 @@
<video-player class="relative block">
<media-container>
<video
class="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-airplay-button
class="absolute right-2.5 bottom-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px] data-[availability=unavailable]:cursor-not-allowed data-[availability=unavailable]:opacity-50 data-[availability=unavailable]:grayscale data-[availability=unsupported]:cursor-not-allowed data-[availability=unsupported]:opacity-50 data-[availability=unsupported]:grayscale"
>
<span class="hidden in-data-[airplay-state=connected]:inline">Stop AirPlay</span>
<span class="hidden in-data-[availability=available]:not-in-data-[airplay-state=connected]:inline">Start AirPlay</span>
<span class="hidden in-data-[availability=unavailable]:inline">No AirPlay devices found</span>
<span class="hidden in-data-[availability=unsupported]:inline">AirPlay not supported</span>
</media-airplay-button>
</media-container>
</video-player>
site/src/components/docs/demos/airplay-button/html/tailwind/BasicUsage.ts
+2
View File
@@ -0,0 +1,2 @@
import '@videojs/html/video/player';
import '@videojs/html/ui/airplay-button';
site/src/components/docs/demos/airplay-button/react/tailwind/BasicUsage.tsx
+35
View File
@@ -0,0 +1,35 @@
import { AirPlayButton, createPlayer } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const Player = createPlayer({ features: videoFeatures });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="relative">
<Video
className="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoPlay
muted
playsInline
loop
/>
<AirPlayButton
className="absolute right-2.5 bottom-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px] data-[availability=unavailable]:cursor-not-allowed data-[availability=unavailable]:opacity-50 data-[availability=unavailable]:grayscale data-[availability=unsupported]:cursor-not-allowed data-[availability=unsupported]:opacity-50 data-[availability=unsupported]:grayscale"
render={(props, state) => {
const label =
state.availability === 'unsupported'
? 'AirPlay not supported'
: state.state === 'connected'
? 'Stop AirPlay'
: state.availability === 'unavailable'
? 'No AirPlay devices found'
: 'Start AirPlay';
return <button {...props}>{label}</button>;
}}
/>
</Player.Container>
</Player.Provider>
);
}
site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.astro
+9
View File
@@ -0,0 +1,9 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './BasicUsage.html?raw';
---
<HtmlDemo html={html} />
<script>
import "./BasicUsage.ts";
</script>
site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.html
+14
View File
@@ -0,0 +1,14 @@
<video-player class="relative flex h-full w-full">
<media-container>
<video
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-buffering-indicator class="pointer-events-none absolute inset-0 z-30 flex items-center justify-center">
<div class="hidden size-12 animate-spin rounded-full border-4 border-white/30 border-t-white [animation-duration:0.8s] in-data-visible:block"></div>
</media-buffering-indicator>
</media-container>
</video-player>
site/src/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.ts
+2
View File
@@ -0,0 +1,2 @@
import '@videojs/html/video/player';
import '@videojs/html/ui/buffering-indicator';
site/src/components/docs/demos/buffering-indicator/react/tailwind/BasicUsage.tsx
+30
View File
@@ -0,0 +1,30 @@
import { BufferingIndicator, createPlayer } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const Player = createPlayer({ features: videoFeatures });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="relative flex h-full w-full">
<Video
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoPlay
muted
playsInline
loop
/>
<BufferingIndicator
className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center"
render={(props, state) => (
<div {...props}>
{state.visible && (
<div className="hidden size-12 animate-spin rounded-full border-4 border-white/30 border-t-white [animation-duration:0.8s] in-data-visible:block" />
)}
</div>
)}
/>
</Player.Container>
</Player.Provider>
);
}
site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.astro
+9
View File
@@ -0,0 +1,9 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './BasicUsage.html?raw';
---
<HtmlDemo html={html} />
<script>
import "./BasicUsage.ts";
</script>
site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.html
+20
View File
@@ -0,0 +1,20 @@
<video-player class="relative">
<media-container>
<video
class="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoplay
muted
playsinline
loop
>
<track kind="captions" src="/docs/demos/captions-button/captions.vtt" srclang="en" label="English" />
</video>
<media-captions-button
class="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
>
<span class="hidden in-data-active:inline">Captions Off</span>
<span class="hidden not-in-data-active:inline">Captions On</span>
</media-captions-button>
</media-container>
</video-player>
site/src/components/docs/demos/captions-button/html/tailwind/BasicUsage.ts
+2
View File
@@ -0,0 +1,2 @@
import '@videojs/html/video/player';
import '@videojs/html/ui/captions-button';
site/src/components/docs/demos/captions-button/react/tailwind/BasicUsage.tsx
+29
View File
@@ -0,0 +1,29 @@
import { CaptionsButton, createPlayer } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const Player = createPlayer({ features: videoFeatures });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="relative">
<Video
className="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoPlay
muted
playsInline
loop
>
<track kind="captions" src="/docs/demos/captions-button/captions.vtt" srcLang="en" label="English" />
</Video>
<CaptionsButton
className="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
render={(props, state) => (
<button {...props}>{state.subtitlesShowing ? 'Captions Off' : 'Captions On'}</button>
)}
/>
</Player.Container>
</Player.Provider>
);
}
site/src/components/docs/demos/controls/html/tailwind/BasicUsage.astro
+9
View File
@@ -0,0 +1,9 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './BasicUsage.html?raw';
---
<HtmlDemo html={html} />
<script>
import "./BasicUsage.ts";
</script>
site/src/components/docs/demos/controls/html/tailwind/BasicUsage.html
+32
View File
@@ -0,0 +1,32 @@
<video-player class="relative block">
<media-container>
<video
class="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-controls
class="pointer-events-none absolute inset-0 flex items-end bg-linear-to-t from-black/45 to-transparent to-45% p-3 transition-opacity duration-250 not-data-visible:opacity-0"
>
<media-controls-group
class="pointer-events-auto flex w-full items-center justify-between"
aria-label="Playback controls"
>
<media-play-button
class="cursor-pointer rounded-full border border-white/25 bg-white/75 px-4 py-2 text-sm text-black backdrop-blur-[10px]"
>
<span class="hidden in-data-paused:inline">Play</span>
<span class="hidden not-in-data-paused:inline">Pause</span>
</media-play-button>
<media-time
class="inline-flex items-center gap-1 rounded-full border border-white/25 bg-white/75 px-4 py-2 text-sm text-black backdrop-blur-[10px]"
type="current"
></media-time>
</media-controls-group>
</media-controls>
</media-container>
</video-player>
site/src/components/docs/demos/controls/html/tailwind/BasicUsage.ts
+4
View File
@@ -0,0 +1,4 @@
import '@videojs/html/video/player';
import '@videojs/html/ui/controls';
import '@videojs/html/ui/play-button';
import '@videojs/html/ui/time';
site/src/components/docs/demos/controls/react/tailwind/BasicUsage.tsx
+38
View File
@@ -0,0 +1,38 @@
import { Controls, createPlayer, PlayButton, Time } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const Player = createPlayer({ features: videoFeatures });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="relative">
<Video
className="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoPlay
muted
playsInline
loop
/>
<Controls.Root className="pointer-events-none absolute inset-0 flex items-end bg-linear-to-t from-black/45 to-transparent to-45% p-3 transition-opacity duration-250 not-data-visible:opacity-0">
<Controls.Group
className="pointer-events-auto flex w-full items-center justify-between"
aria-label="Playback controls"
>
<PlayButton
className="cursor-pointer rounded-full border border-white/25 bg-white/75 px-4 py-2 text-sm text-black backdrop-blur-[10px]"
render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
/>
<Time.Value
type="current"
className="inline-flex items-center gap-1 rounded-full border border-white/25 bg-white/75 px-4 py-2 text-sm text-black backdrop-blur-[10px]"
/>
</Controls.Group>
</Controls.Root>
</Player.Container>
</Player.Provider>
);
}
site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.astro
+9
View File
@@ -0,0 +1,9 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './BasicUsage.html?raw';
---
<HtmlDemo html={html} />
<script>
import "./BasicUsage.ts";
</script>
site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.html
+14
View File
@@ -0,0 +1,14 @@
<video-player class="relative">
<video
class="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-playback-rate-button
class="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px] after:content-[attr(data-rate)_'×']"
>
</media-playback-rate-button>
</video-player>
site/src/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.ts
+2
View File
@@ -0,0 +1,2 @@
import '@videojs/html/video/player';
import '@videojs/html/ui/playback-rate-button';
site/src/components/docs/demos/playback-rate-button/react/tailwind/BasicUsage.tsx
+25
View File
@@ -0,0 +1,25 @@
import { createPlayer, PlaybackRateButton } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const Player = createPlayer({ features: videoFeatures });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="relative">
<Video
className="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoPlay
muted
playsInline
loop
/>
<PlaybackRateButton
className="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/30 bg-white/70 px-5 py-2 text-black backdrop-blur-[10px]"
render={(props, state) => <button {...props}>{Math.round(state.rate * 10) / 10}&times;</button>}
/>
</Player.Container>
</Player.Provider>
);
}
site/src/components/docs/demos/popover/html/tailwind/BasicUsage.astro
+9
View File
@@ -0,0 +1,9 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './BasicUsage.html?raw';
---
<HtmlDemo html={html} />
<script>
import "./BasicUsage.ts";
</script>
site/src/components/docs/demos/popover/html/tailwind/BasicUsage.html
+27
View File
@@ -0,0 +1,27 @@
<video-player class="relative block">
<media-container class="relative block">
<video
class="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<div class="absolute bottom-2.5 left-2.5">
<button
type="button"
commandfor="popover-demo"
class="cursor-pointer rounded-full border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]"
>Settings</button>
<media-popover
id="popover-demo"
class="rounded-lg bg-black/85 px-4 py-3 text-sm whitespace-nowrap text-white backdrop-blur-[10px]"
>
<div>
Popover content
</div>
</media-popover>
</div>
</media-container>
</video-player>
site/src/components/docs/demos/popover/html/tailwind/BasicUsage.ts
+2
View File
@@ -0,0 +1,2 @@
import '@videojs/html/video/player';
import '@videojs/html/ui/popover';
site/src/components/docs/demos/popover/react/tailwind/BasicUsage.tsx
+32
View File
@@ -0,0 +1,32 @@
import { createPlayer, Popover } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const Player = createPlayer({ features: videoFeatures });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="relative">
<Video
className="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
autoPlay
muted
playsInline
loop
/>
<div className="absolute bottom-2.5 left-2.5">
<Popover.Root>
<Popover.Trigger className="cursor-pointer rounded-full border border-white/30 bg-white/70 px-4 py-1.5 text-black backdrop-blur-[10px]">
Settings
</Popover.Trigger>
<Popover.Popup className="m-0 rounded-lg border-0 bg-black/85 px-4 py-3 text-sm text-white backdrop-blur-[10px] [--media-popover-side-offset:8px]">
<Popover.Arrow className="fill-black/85" />
<div className="whitespace-nowrap">Popover content</div>
</Popover.Popup>
</Popover.Root>
</div>
</Player.Container>
</Player.Provider>
);
}
site/src/components/docs/demos/poster/html/tailwind/BasicUsage.astro
+9
View File
@@ -0,0 +1,9 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './BasicUsage.html?raw';
---
<HtmlDemo html={html} />
<script>
import "./BasicUsage.ts";
</script>
site/src/components/docs/demos/poster/html/tailwind/BasicUsage.html
+25
View File
@@ -0,0 +1,25 @@
<!-- biome-ignore-all lint/a11y/useMediaCaption: TODO -->
<video-player class="relative block">
<media-container>
<video
class="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
playsinline
></video>
<media-poster class="pointer-events-none absolute inset-0 transition-opacity duration-250 not-data-visible:opacity-0">
<img
class="h-full w-full object-cover"
src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg"
alt="Video thumbnail"
/>
</media-poster>
<media-play-button
class="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/25 bg-white/75 px-4 py-2 text-black backdrop-blur-[10px]"
>
<span class="hidden in-data-paused:inline">Play</span>
<span class="hidden not-in-data-paused:inline">Pause</span>
</media-play-button>
</media-container>
</video-player>
site/src/components/docs/demos/poster/html/tailwind/BasicUsage.ts
+3
View File
@@ -0,0 +1,3 @@
import '@videojs/html/video/player';
import '@videojs/html/ui/play-button';
import '@videojs/html/ui/poster';
site/src/components/docs/demos/poster/react/tailwind/BasicUsage.tsx
+28
View File
@@ -0,0 +1,28 @@
import { createPlayer, PlayButton, Poster } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
const Player = createPlayer({ features: videoFeatures });
export default function BasicUsage() {
return (
<Player.Provider>
<Player.Container className="relative">
<Video
className="w-full"
src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
playsInline
/>
<Poster
className="pointer-events-none absolute inset-0 h-full w-full object-cover transition-opacity duration-250 not-data-visible:opacity-0"
src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg"
/>
<PlayButton
className="absolute bottom-2.5 left-2.5 cursor-pointer rounded-full border border-white/25 bg-white/75 px-4 py-2 text-black backdrop-blur-[10px]"
render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
/>
</Player.Container>
</Player.Provider>
);
}
site/src/content/docs/reference/airplay-button.mdx
+20
View File
@@ -15,12 +15,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
import BasicUsageDemoReact from "@/components/docs/demos/airplay-button/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/airplay-button/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/airplay-button/react/css/BasicUsage.css?raw";
import BasicUsageDemoReactTailwind from "@/components/docs/demos/airplay-button/react/tailwind/BasicUsage";
import basicUsageReactTailwindTsx from "@/components/docs/demos/airplay-button/react/tailwind/BasicUsage.tsx?raw";
{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/airplay-button/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/airplay-button/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/airplay-button/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/airplay-button/html/css/BasicUsage.ts?raw";
import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/airplay-button/html/tailwind/BasicUsage.astro";
import basicUsageTailwindHtml from "@/components/docs/demos/airplay-button/html/tailwind/BasicUsage.html?raw";
import basicUsageTailwindHtmlTs from "@/components/docs/demos/airplay-button/html/tailwind/BasicUsage.ts?raw";
## Anatomy
@@ -110,6 +115,13 @@ Renders a `<button>` with an automatic `aria-label`: "Start AirPlay" when discon
<BasicUsageDemoReact client:idle />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
]}>
<BasicUsageDemoReactTailwind client:idle />
</Demo>
</StyleCase>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
@@ -122,6 +134,14 @@ Renders a `<button>` with an automatic `aria-label`: "Start AirPlay" when discon
<BasicUsageDemoHtml />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
{ title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
]}>
<BasicUsageDemoHtmlTailwind />
</Demo>
</StyleCase>
</FrameworkCase>
<ComponentReference component="AirPlayButton" />
site/src/content/docs/reference/buffering-indicator.mdx
+20
View File
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
import BasicUsageDemoReact from "@/components/docs/demos/buffering-indicator/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/buffering-indicator/react/css/BasicUsage.css?raw";
import BasicUsageDemoReactTailwind from "@/components/docs/demos/buffering-indicator/react/tailwind/BasicUsage";
import basicUsageReactTailwindTsx from "@/components/docs/demos/buffering-indicator/react/tailwind/BasicUsage.tsx?raw";
{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/buffering-indicator/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/buffering-indicator/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/buffering-indicator/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/buffering-indicator/html/css/BasicUsage.ts?raw";
import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.astro";
import basicUsageTailwindHtml from "@/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.html?raw";
import basicUsageTailwindHtmlTs from "@/components/docs/demos/buffering-indicator/html/tailwind/BasicUsage.ts?raw";
## Anatomy
@@ -56,6 +61,13 @@ Hide and show the indicator based on the `data-visible` attribute.
<BasicUsageDemoReact client:idle />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
]}>
<BasicUsageDemoReactTailwind client:idle />
</Demo>
</StyleCase>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
@@ -68,6 +80,14 @@ Hide and show the indicator based on the `data-visible` attribute.
<BasicUsageDemoHtml />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
{ title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
]}>
<BasicUsageDemoHtmlTailwind />
</Demo>
</StyleCase>
</FrameworkCase>
<ComponentReference component="BufferingIndicator" />
site/src/content/docs/reference/captions-button.mdx
+20
View File
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
import BasicUsageDemoReact from "@/components/docs/demos/captions-button/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/captions-button/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/captions-button/react/css/BasicUsage.css?raw";
import BasicUsageDemoReactTailwind from "@/components/docs/demos/captions-button/react/tailwind/BasicUsage";
import basicUsageReactTailwindTsx from "@/components/docs/demos/captions-button/react/tailwind/BasicUsage.tsx?raw";
{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/captions-button/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/captions-button/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/captions-button/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/captions-button/html/css/BasicUsage.ts?raw";
import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/captions-button/html/tailwind/BasicUsage.astro";
import basicUsageTailwindHtml from "@/components/docs/demos/captions-button/html/tailwind/BasicUsage.html?raw";
import basicUsageTailwindHtmlTs from "@/components/docs/demos/captions-button/html/tailwind/BasicUsage.ts?raw";
## Anatomy
@@ -75,6 +80,13 @@ Renders a `<button>` with an automatic `aria-label`: "Disable captions" when act
<BasicUsageDemoReact client:idle />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
]}>
<BasicUsageDemoReactTailwind client:idle />
</Demo>
</StyleCase>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
@@ -87,6 +99,14 @@ Renders a `<button>` with an automatic `aria-label`: "Disable captions" when act
<BasicUsageDemoHtml />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
{ title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
]}>
<BasicUsageDemoHtmlTailwind />
</Demo>
</StyleCase>
</FrameworkCase>
<ComponentReference component="CaptionsButton" />
site/src/content/docs/reference/controls.mdx
+20
View File
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
import BasicUsageDemoReact from "@/components/docs/demos/controls/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/controls/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/controls/react/css/BasicUsage.css?raw";
import BasicUsageDemoReactTailwind from "@/components/docs/demos/controls/react/tailwind/BasicUsage";
import basicUsageReactTailwindTsx from "@/components/docs/demos/controls/react/tailwind/BasicUsage.tsx?raw";
{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/controls/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/controls/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/controls/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/controls/html/css/BasicUsage.ts?raw";
import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/controls/html/tailwind/BasicUsage.astro";
import basicUsageTailwindHtml from "@/components/docs/demos/controls/html/tailwind/BasicUsage.html?raw";
import basicUsageTailwindHtmlTs from "@/components/docs/demos/controls/html/tailwind/BasicUsage.ts?raw";
## Anatomy
@@ -121,6 +126,13 @@ No ARIA role is applied to `Controls.Root` — it is a layout wrapper, not a lan
<BasicUsageDemoReact client:idle />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
]}>
<BasicUsageDemoReactTailwind client:idle />
</Demo>
</StyleCase>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
@@ -135,6 +147,14 @@ No ARIA role is applied to `Controls.Root` — it is a layout wrapper, not a lan
<BasicUsageDemoHtml />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
{ title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
]}>
<BasicUsageDemoHtmlTailwind />
</Demo>
</StyleCase>
</FrameworkCase>
<ComponentReference component="Controls" />
site/src/content/docs/reference/playback-rate-button.mdx
+20
View File
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
import BasicUsageDemoReact from "@/components/docs/demos/playback-rate-button/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/playback-rate-button/react/css/BasicUsage.css?raw";
import BasicUsageDemoReactTailwind from "@/components/docs/demos/playback-rate-button/react/tailwind/BasicUsage";
import basicUsageReactTailwindTsx from "@/components/docs/demos/playback-rate-button/react/tailwind/BasicUsage.tsx?raw";
{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/playback-rate-button/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/playback-rate-button/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/playback-rate-button/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/playback-rate-button/html/css/BasicUsage.ts?raw";
import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.astro";
import basicUsageTailwindHtml from "@/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.html?raw";
import basicUsageTailwindHtmlTs from "@/components/docs/demos/playback-rate-button/html/tailwind/BasicUsage.ts?raw";
## Anatomy
@@ -78,6 +83,13 @@ Renders a `<button>` with an automatic `aria-label` of `"Playback rate {rate}"`
<BasicUsageDemoReact client:idle />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
]}>
<BasicUsageDemoReactTailwind client:idle />
</Demo>
</StyleCase>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
@@ -90,6 +102,14 @@ Renders a `<button>` with an automatic `aria-label` of `"Playback rate {rate}"`
<BasicUsageDemoHtml />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
{ title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
]}>
<BasicUsageDemoHtmlTailwind />
</Demo>
</StyleCase>
</FrameworkCase>
<ComponentReference component="PlaybackRateButton" />
site/src/content/docs/reference/popover.mdx
+20
View File
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
import BasicUsageDemoReact from "@/components/docs/demos/popover/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/popover/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/popover/react/css/BasicUsage.css?raw";
import BasicUsageDemoReactTailwind from "@/components/docs/demos/popover/react/tailwind/BasicUsage";
import basicUsageReactTailwindTsx from "@/components/docs/demos/popover/react/tailwind/BasicUsage.tsx?raw";
{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/popover/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/popover/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/popover/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/popover/html/css/BasicUsage.ts?raw";
import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/popover/html/tailwind/BasicUsage.astro";
import basicUsageTailwindHtml from "@/components/docs/demos/popover/html/tailwind/BasicUsage.html?raw";
import basicUsageTailwindHtmlTs from "@/components/docs/demos/popover/html/tailwind/BasicUsage.ts?raw";
## Anatomy
@@ -137,6 +142,13 @@ The trigger receives `aria-expanded` reflecting the open state. When `modal` is
<BasicUsageDemoReact client:idle />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
]}>
<BasicUsageDemoReactTailwind client:idle />
</Demo>
</StyleCase>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
@@ -151,6 +163,14 @@ The trigger receives `aria-expanded` reflecting the open state. When `modal` is
<BasicUsageDemoHtml />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
{ title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
]}>
<BasicUsageDemoHtmlTailwind />
</Demo>
</StyleCase>
</FrameworkCase>
<ComponentReference component="Popover" />
site/src/content/docs/reference/poster.mdx
+20
View File
@@ -14,12 +14,17 @@ import Demo from "@/components/docs/demos/Demo.astro";
import BasicUsageDemoReact from "@/components/docs/demos/poster/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/poster/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/poster/react/css/BasicUsage.css?raw";
import BasicUsageDemoReactTailwind from "@/components/docs/demos/poster/react/tailwind/BasicUsage";
import basicUsageReactTailwindTsx from "@/components/docs/demos/poster/react/tailwind/BasicUsage.tsx?raw";
{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/poster/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/poster/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/poster/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/poster/html/css/BasicUsage.ts?raw";
import BasicUsageDemoHtmlTailwind from "@/components/docs/demos/poster/html/tailwind/BasicUsage.astro";
import basicUsageTailwindHtml from "@/components/docs/demos/poster/html/tailwind/BasicUsage.html?raw";
import basicUsageTailwindHtmlTs from "@/components/docs/demos/poster/html/tailwind/BasicUsage.ts?raw";
## Anatomy
@@ -86,6 +91,13 @@ Unlike the native `<video poster>` attribute, this component allows you to provi
<BasicUsageDemoReact client:idle />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "App.tsx", code: basicUsageReactTailwindTsx, lang: "tsx" },
]}>
<BasicUsageDemoReactTailwind client:idle />
</Demo>
</StyleCase>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
@@ -100,6 +112,14 @@ Unlike the native `<video poster>` attribute, this component allows you to provi
<BasicUsageDemoHtml />
</Demo>
</StyleCase>
<StyleCase styles={["tailwind"]}>
<Demo files={[
{ title: "index.html", code: basicUsageTailwindHtml, lang: "html" },
{ title: "index.ts", code: basicUsageTailwindHtmlTs, lang: "ts" },
]}>
<BasicUsageDemoHtmlTailwind />
</Demo>
</StyleCase>
</FrameworkCase>
<ComponentReference component="Poster" />