+
-
-
-
Playground
- Test out the various skins for Video.js.
-
+
-
-
-
-
- {/* @ts-expect-error -- types are incorrect */}
-
-
-
-
+
+
+
+
+ } />
+
+
+ } />
+
+
+
+ } />
+
+
+ } />
+
+
+
+ } />
+
+
+ } />
+
+
+
+
+
+
+
);
diff --git a/examples/react/src/components/CodeBlock.tsx b/examples/react/src/components/CodeBlock.tsx
new file mode 100644
index 00000000..2a3e1004
--- /dev/null
+++ b/examples/react/src/components/CodeBlock.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { codeToHtml } from 'shiki';
+import { useColorScheme } from '@/hooks';
+
+export interface CodeBlockProps {
+ code: string;
+}
+
+export function CodeBlock(props: CodeBlockProps): JSX.Element {
+ const { code } = props;
+ const [output, setOutput] = useState
('');
+ const colorScheme = useColorScheme();
+
+ useEffect(() => {
+ codeToHtml(code, {
+ theme: colorScheme === 'light' ? 'vitesse-light' : 'vitesse-dark',
+ lang: 'javascript',
+ }).then((result) => {
+ setOutput(result);
+ });
+ }, [code, colorScheme]);
+
+ return (
+ // eslint-disable-next-line react-dom/no-dangerously-set-innerhtml
+
+ );
+}
diff --git a/examples/react/src/components/SkinLayout.tsx b/examples/react/src/components/SkinLayout.tsx
new file mode 100644
index 00000000..65c5f1b8
--- /dev/null
+++ b/examples/react/src/components/SkinLayout.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import { CodeBlock } from './CodeBlock';
+import { Tabs } from './Tabs';
+
+export interface SkinLayoutProps {
+ code: string;
+ preview: ReactNode;
+}
+
+export function SkinLayout(props: SkinLayoutProps): JSX.Element {
+ const { code, preview } = props;
+
+ return (
+
+
+ Preview
+ Source
+
+
+
+
+ {preview}
+
+
+
+
+
+ );
+}
diff --git a/examples/react/src/components/Tabs/Tab.tsx b/examples/react/src/components/Tabs/Tab.tsx
new file mode 100644
index 00000000..5543bdca
--- /dev/null
+++ b/examples/react/src/components/Tabs/Tab.tsx
@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react';
+import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
+import clsx from 'clsx';
+
+export function Tab(props: ComponentProps): JSX.Element {
+ const { className, ...rest } = props;
+ return (
+
+ );
+}
diff --git a/examples/react/src/components/Tabs/TabIndicator.tsx b/examples/react/src/components/Tabs/TabIndicator.tsx
new file mode 100644
index 00000000..e6c4a640
--- /dev/null
+++ b/examples/react/src/components/Tabs/TabIndicator.tsx
@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'react';
+import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
+import clsx from 'clsx';
+
+export function TabIndicator(props: ComponentProps): JSX.Element {
+ const { className, ...rest } = props;
+ return (
+
+ );
+}
diff --git a/examples/react/src/components/Tabs/TabList.tsx b/examples/react/src/components/Tabs/TabList.tsx
new file mode 100644
index 00000000..53ee06fa
--- /dev/null
+++ b/examples/react/src/components/Tabs/TabList.tsx
@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
+import clsx from 'clsx';
+
+export function TabList(props: ComponentProps): JSX.Element {
+ const { className, ...rest } = props;
+ return (
+
+ );
+}
diff --git a/examples/react/src/components/Tabs/TabPanel.tsx b/examples/react/src/components/Tabs/TabPanel.tsx
new file mode 100644
index 00000000..795969b8
--- /dev/null
+++ b/examples/react/src/components/Tabs/TabPanel.tsx
@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'react';
+import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
+import clsx from 'clsx';
+
+export function TabPanel(props: ComponentProps): JSX.Element {
+ const { className, ...rest } = props;
+ return (
+
+ );
+}
diff --git a/examples/react/src/components/Tabs/index.tsx b/examples/react/src/components/Tabs/index.tsx
new file mode 100644
index 00000000..c8eeb306
--- /dev/null
+++ b/examples/react/src/components/Tabs/index.tsx
@@ -0,0 +1,14 @@
+import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
+
+import { Tab } from './Tab';
+import { TabIndicator } from './TabIndicator';
+import { TabList } from './TabList';
+import { TabPanel } from './TabPanel';
+
+export const Tabs = {
+ ...TabsPrimitive,
+ Tab,
+ List: TabList,
+ Panel: TabPanel,
+ Indicator: TabIndicator,
+} as typeof TabsPrimitive;
diff --git a/examples/react/src/components/VideoElement.tsx b/examples/react/src/components/VideoElement.tsx
new file mode 100644
index 00000000..55fc338a
--- /dev/null
+++ b/examples/react/src/components/VideoElement.tsx
@@ -0,0 +1,12 @@
+import { HlsVideo } from '@videojs/react';
+
+export function VideoElement(): JSX.Element {
+ return (
+
+ );
+}
diff --git a/examples/react/src/components/index.ts b/examples/react/src/components/index.ts
new file mode 100644
index 00000000..61d57c01
--- /dev/null
+++ b/examples/react/src/components/index.ts
@@ -0,0 +1,4 @@
+export * from './CodeBlock';
+export * from './SkinLayout';
+export * from './Tabs';
+export * from './VideoElement';
diff --git a/examples/react/src/globals.css b/examples/react/src/globals.css
index 88210933..9f038740 100644
--- a/examples/react/src/globals.css
+++ b/examples/react/src/globals.css
@@ -8,3 +8,38 @@
/* Make reduced-transparency variant */
@custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce);
+
+.vjs {
+ font-family: var(--font-sans);
+}
+
+[popover].popover-from-left {
+ translate: -100% 0;
+}
+
+[popover] {
+ transition:
+ opacity 0.25s,
+ translate 0.25s,
+ overlay 0.25s allow-discrete,
+ display 0.25s allow-discrete;
+ opacity: 0;
+
+ &:popover-open {
+ opacity: 1;
+ translate: 0 0;
+ }
+}
+
+@starting-style {
+ [popover] {
+ &:popover-open {
+ opacity: 0;
+ }
+ }
+ [popover].popover-from-left {
+ &:popover-open {
+ translate: -100% 0;
+ }
+ }
+}
diff --git a/examples/react/src/hooks/index.ts b/examples/react/src/hooks/index.ts
new file mode 100644
index 00000000..47757a94
--- /dev/null
+++ b/examples/react/src/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './useColorScheme';
+export * from './useMediaQuery';
diff --git a/examples/react/src/hooks/useColorScheme.ts b/examples/react/src/hooks/useColorScheme.ts
new file mode 100644
index 00000000..975047f2
--- /dev/null
+++ b/examples/react/src/hooks/useColorScheme.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+
+type ColorScheme = 'light' | 'dark';
+
+export function useColorScheme(): ColorScheme {
+ const [colorScheme, setColorScheme] = useState(() => {
+ if (typeof window === 'undefined') {
+ return 'light';
+ }
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+ });
+
+ useEffect(() => {
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+ const handleChange = (event: MediaQueryListEvent) => {
+ setColorScheme(event.matches ? 'dark' : 'light');
+ };
+
+ mediaQuery.addEventListener('change', handleChange);
+
+ return () => {
+ mediaQuery.removeEventListener('change', handleChange);
+ };
+ }, []);
+
+ return colorScheme;
+}
diff --git a/examples/react/src/hooks/useIsomorphicLayoutEffect.ts b/examples/react/src/hooks/useIsomorphicLayoutEffect.ts
new file mode 100644
index 00000000..008f79ec
--- /dev/null
+++ b/examples/react/src/hooks/useIsomorphicLayoutEffect.ts
@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+export const useIsomorphicLayoutEffect: typeof useLayoutEffect | typeof useEffect
+ = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
diff --git a/examples/react/src/hooks/useMediaQuery.ts b/examples/react/src/hooks/useMediaQuery.ts
new file mode 100644
index 00000000..4c934538
--- /dev/null
+++ b/examples/react/src/hooks/useMediaQuery.ts
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+interface UseMediaQueryOptions {
+ defaultValue?: boolean;
+ initializeWithValue?: boolean;
+}
+
+const IS_SERVER = typeof window === 'undefined';
+
+export function useMediaQuery(
+ query: string,
+ {
+ defaultValue = false,
+ initializeWithValue = true,
+ }: UseMediaQueryOptions = {},
+): boolean {
+ const getMatches = (query: string): boolean => {
+ if (IS_SERVER) {
+ return defaultValue;
+ }
+ return window.matchMedia(query).matches;
+ };
+
+ const [matches, setMatches] = useState(() => {
+ if (initializeWithValue) {
+ return getMatches(query);
+ }
+ return defaultValue;
+ });
+
+ // Handles the change event of the media query.
+ function handleChange() {
+ // eslint-disable-next-line react-hooks-extra/no-direct-set-state-in-use-effect
+ setMatches(getMatches(query));
+ }
+
+ useIsomorphicLayoutEffect(() => {
+ const matchMedia = window.matchMedia(query);
+
+ // Triggered at the first client-side load and if query changes
+ handleChange();
+
+ matchMedia.addEventListener('change', handleChange);
+
+ return () => {
+ matchMedia.removeEventListener('change', handleChange);
+ };
+ }, [query]);
+
+ return matches;
+}
diff --git a/examples/react/src/skins/custom/base-ui/CustomBaseUISkin.tsx b/examples/react/src/skins/custom/base-ui/CustomBaseUISkin.tsx
new file mode 100644
index 00000000..865bb779
--- /dev/null
+++ b/examples/react/src/skins/custom/base-ui/CustomBaseUISkin.tsx
@@ -0,0 +1,366 @@
+import type { ButtonProps as ButtonPrimitiveProps } from '@base-ui-components/react/button';
+import type { SliderRootProps } from '@base-ui-components/react/slider';
+import type { ComponentProps, PropsWithChildren } from 'react';
+import { Button as ButtonPrimitive } from '@base-ui-components/react/button';
+import { Popover as PopoverPrimitive } from '@base-ui-components/react/popover';
+import { Slider as SliderPrimitive } from '@base-ui-components/react/slider';
+import { Tooltip as TooltipPrimitive } from '@base-ui-components/react/tooltip';
+
+import {
+ ArrowDownLeftIcon,
+ ArrowUpRightIcon,
+} from '@heroicons/react/16/solid';
+import {
+ PauseIcon,
+ PlayIcon,
+ SpeakerWaveIcon,
+ SpeakerXMarkIcon,
+ XMarkIcon,
+} from '@heroicons/react/20/solid';
+import {
+ MediaContainer,
+ useCurrentTimeDisplayState,
+ useFullscreenButtonState,
+ useMuteButtonState,
+ usePlayButtonState,
+ useTimeSliderRootState,
+ useVolumeSliderRootState,
+} from '@videojs/react';
+import { formatDisplayTime } from '@videojs/utils';
+
+import clsx from 'clsx';
+import { useCallback, useState } from 'react';
+
+type SkinProps = PropsWithChildren<{
+ className?: string;
+}>;
+
+function Surface(props: ComponentProps<'div'>) {
+ const { className, ...rest } = props;
+ return (
+
+ );
+}
+
+function Popup(props: ComponentProps) {
+ const { className, ...rest } = props;
+ return (
+
+ );
+}
+
+function TooltipPopup(props: ComponentProps) {
+ const { className, ...rest } = props;
+ return (
+ }
+ {...rest}
+ />
+ );
+}
+
+const Tooltip = {
+ ...TooltipPrimitive,
+ Popup: TooltipPopup,
+};
+
+function PopoverPopup(props: ComponentProps) {
+ const { className, ...rest } = props;
+ return (
+ }
+ {...rest}
+ />
+ );
+}
+
+const Popover = {
+ ...PopoverPrimitive,
+ Popup: PopoverPopup,
+};
+
+type ButtonProps = Omit;
+
+function Button(props: ButtonProps) {
+ return (
+
+ );
+}
+
+function PlayButton() {
+ const { paused, requestPause, requestPlay } = usePlayButtonState();
+
+ const onClick = useCallback(() => {
+ if (paused) {
+ requestPlay();
+ } else {
+ requestPause();
+ }
+ }, [paused, requestPlay, requestPause]);
+
+ const label = paused ? 'Play' : 'Pause';
+
+ return (
+
+
+ {paused ? : }
+ {label}
+
+ )}
+ />
+
+
+
+ {label}
+
+
+
+
+ );
+}
+
+function MuteButton() {
+ const { muted, requestMute, requestUnmute } = useMuteButtonState();
+ const [open, setOpen] = useState(false);
+
+ const onClick = useCallback(() => {
+ if (muted) {
+ requestUnmute();
+ } else {
+ requestMute();
+ }
+ }, [muted, requestMute, requestUnmute]);
+
+ const handleOpenChange = useCallback((isOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {
+ // Don't close when clicking the trigger button - only allow hover to control it
+ if (!isOpen && eventDetails?.reason === 'trigger-press') return;
+ setOpen(isOpen);
+ }, []);
+
+ const label = muted ? 'Unmute' : 'Mute';
+
+ return (
+
+
+ {muted ? : }
+ {label}
+
+ )}
+ />
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function FullscreenButton() {
+ const { fullscreen, requestEnterFullscreen, requestExitFullscreen } = useFullscreenButtonState();
+
+ const onClick = useCallback(() => {
+ if (fullscreen) {
+ requestExitFullscreen();
+ } else {
+ requestEnterFullscreen();
+ }
+ }, [fullscreen, requestEnterFullscreen, requestExitFullscreen]);
+
+ const label = fullscreen ? 'Exit fullscreen' : 'Enter fullscreen';
+
+ return (
+
+
+ {fullscreen
+ ?
+ : (
+
+ )}
+ {label}
+
+ )}
+ />
+
+
+
+ {label}
+
+
+
+
+ );
+}
+
+type SliderProps = Pick, 'min' | 'max' | 'step' | 'value' | 'onValueChange' | 'orientation'>;
+
+function Slider(props: SliderProps) {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+function TimeSlider() {
+ // TODO: Expose something like _fillWidth to facilitate debouncing etc.
+ const { currentTime, duration, requestSeek } = useTimeSliderRootState();
+
+ return (
+
+ );
+}
+
+function VolumeSlider() {
+ const { volume, muted, requestVolumeChange } = useVolumeSliderRootState();
+ // FIXME: If seems that volume can be undefined initially, despite the types.
+ const value = muted ? 0 : volume ?? 0;
+
+ return (
+
+ );
+}
+
+interface TimeDisplayProps {
+ type: 'current' | 'duration';
+ className?: string;
+}
+
+function TimeDisplay(props: TimeDisplayProps) {
+ const { type, className } = props;
+ const { duration, currentTime } = useCurrentTimeDisplayState();
+ const value = formatDisplayTime(type === 'current' ? currentTime : duration);
+
+ return {value};
+}
+
+export default function CustomBaseUISkin({ children, className }: SkinProps): JSX.Element {
+ return (
+
+ {/* FIXME: Mismatch between React 18 & 19 types */}
+ {children as any}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/examples/react/src/skins/custom/native/CustomNativeSkin.tsx b/examples/react/src/skins/custom/native/CustomNativeSkin.tsx
new file mode 100644
index 00000000..fd7ff2b9
--- /dev/null
+++ b/examples/react/src/skins/custom/native/CustomNativeSkin.tsx
@@ -0,0 +1,90 @@
+import type { PropsWithChildren } from 'react';
+
+import {
+ CurrentTimeDisplay,
+ DurationDisplay,
+ FullscreenButton,
+ MediaContainer,
+ MuteButton,
+ PlayButton,
+ TimeSlider,
+ VolumeSlider,
+} from '@videojs/react';
+import {
+ FullscreenEnterIcon,
+ FullscreenExitIcon,
+ PauseIcon,
+ PlayIcon,
+ VolumeHighIcon,
+ VolumeLowIcon,
+ VolumeOffIcon,
+} from '@videojs/react/icons';
+import styles from './styles';
+
+type SkinProps = PropsWithChildren<{
+ className?: string;
+}>;
+
+export default function CustomNativeSkin({ children, className = '' }: SkinProps): JSX.Element {
+ return (
+
+ {/* FIXME: Mismatch between React 18 & 19 types */}
+ {children as any}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
- Play
- Pause
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Enter Fullscreen
- Exit Fullscreen
-
-
-
-
-
-
-
-
-
-
-
- /
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-