From c35b0122509ce3230dcfce4a0acf0d315ba5f0ee Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 10 Dec 2025 09:27:38 +1100 Subject: [PATCH] feat(example/react): improvements to react examples (#210) --- cspell.json | 5 +- examples/html/index.html | 4 +- examples/html/package.json | 4 +- examples/html/src/frosted.ts | 2 +- examples/html/src/minimal.ts | 2 +- examples/next/package.json | 18 +- examples/react/index.html | 2 +- examples/react/package.json | 24 +- examples/react/src/App.tsx | 269 +- examples/react/src/components/CodeBlock.tsx | 27 + examples/react/src/components/SkinLayout.tsx | 29 + examples/react/src/components/Tabs/Tab.tsx | 18 + .../src/components/Tabs/TabIndicator.tsx | 16 + .../react/src/components/Tabs/TabList.tsx | 13 + .../react/src/components/Tabs/TabPanel.tsx | 16 + examples/react/src/components/Tabs/index.tsx | 14 + .../react/src/components/VideoElement.tsx | 12 + examples/react/src/components/index.ts | 4 + examples/react/src/globals.css | 35 + examples/react/src/hooks/index.ts | 2 + examples/react/src/hooks/useColorScheme.ts | 28 + .../src/hooks/useIsomorphicLayoutEffect.ts | 4 + examples/react/src/hooks/useMediaQuery.ts | 53 + .../skins/custom/base-ui/CustomBaseUISkin.tsx | 366 ++ .../skins/custom/native/CustomNativeSkin.tsx | 90 + .../{minimal => custom/native}/styles.ts | 81 +- .../skins/{minimal => custom/native}/types.ts | 17 +- .../frosted}/FrostedSkin.tsx | 17 +- .../frosted}/frosted.css | 0 .../minimal}/MinimalSkin.tsx | 17 +- .../minimal}/minimal.css | 2 +- .../react/src/skins/frosted/FrostedSkin.tsx | 130 - examples/react/src/skins/frosted/styles.ts | 171 - examples/react/src/skins/frosted/types.ts | 32 - .../react/src/skins/imported/FrostedSkin.tsx | 3 + .../react/src/skins/imported/MinimalSkin.tsx | 3 + .../react/src/skins/minimal/MinimalSkin.tsx | 75 - examples/react/tsconfig.json | 7 +- examples/react/vite-env.d.ts | 1 + examples/react/vite.config.ts | 9 +- package.json | 18 +- packages/core/package.json | 2 +- packages/html/package.json | 2 +- packages/icons/package.json | 2 +- packages/react/package.json | 6 +- .../src/components/CurrentTimeDisplay.tsx | 2 +- .../react/src/components/FullscreenButton.tsx | 2 +- packages/react/src/components/MuteButton.tsx | 2 +- packages/react/src/components/PlayButton.tsx | 2 +- packages/react/src/components/TimeSlider.tsx | 4 +- .../react/src/components/VolumeSlider.tsx | 4 +- packages/react/src/index.ts | 12 +- packages/react/src/skins/frosted/styles.ts | 4 +- packages/react/src/skins/minimal/styles.ts | 8 +- packages/utils/package.json | 2 +- pnpm-lock.yaml | 3326 +++++++++-------- site/package.json | 4 +- 57 files changed, 2886 insertions(+), 2138 deletions(-) create mode 100644 examples/react/src/components/CodeBlock.tsx create mode 100644 examples/react/src/components/SkinLayout.tsx create mode 100644 examples/react/src/components/Tabs/Tab.tsx create mode 100644 examples/react/src/components/Tabs/TabIndicator.tsx create mode 100644 examples/react/src/components/Tabs/TabList.tsx create mode 100644 examples/react/src/components/Tabs/TabPanel.tsx create mode 100644 examples/react/src/components/Tabs/index.tsx create mode 100644 examples/react/src/components/VideoElement.tsx create mode 100644 examples/react/src/components/index.ts create mode 100644 examples/react/src/hooks/index.ts create mode 100644 examples/react/src/hooks/useColorScheme.ts create mode 100644 examples/react/src/hooks/useIsomorphicLayoutEffect.ts create mode 100644 examples/react/src/hooks/useMediaQuery.ts create mode 100644 examples/react/src/skins/custom/base-ui/CustomBaseUISkin.tsx create mode 100644 examples/react/src/skins/custom/native/CustomNativeSkin.tsx rename examples/react/src/skins/{minimal => custom/native}/styles.ts (59%) rename examples/react/src/skins/{minimal => custom/native}/types.ts (64%) rename examples/react/src/skins/{frosted-eject => ejected/frosted}/FrostedSkin.tsx (93%) rename examples/react/src/skins/{frosted-eject => ejected/frosted}/frosted.css (100%) rename examples/react/src/skins/{minimal-eject => ejected/minimal}/MinimalSkin.tsx (93%) rename examples/react/src/skins/{minimal-eject => ejected/minimal}/minimal.css (99%) delete mode 100644 examples/react/src/skins/frosted/FrostedSkin.tsx delete mode 100644 examples/react/src/skins/frosted/styles.ts delete mode 100644 examples/react/src/skins/frosted/types.ts create mode 100644 examples/react/src/skins/imported/FrostedSkin.tsx create mode 100644 examples/react/src/skins/imported/MinimalSkin.tsx delete mode 100644 examples/react/src/skins/minimal/MinimalSkin.tsx create mode 100644 examples/react/vite-env.d.ts diff --git a/cspell.json b/cspell.json index 2bb6306a..1475b798 100644 --- a/cspell.json +++ b/cspell.json @@ -20,7 +20,10 @@ "Plyr", "rahim", "segoe", - "videojs" + "shiki", + "videojs", + "vitesse", + "wouter" ], "ignoreWords": [], "import": [] diff --git a/examples/html/index.html b/examples/html/index.html index d714eb37..da048e07 100644 --- a/examples/html/index.html +++ b/examples/html/index.html @@ -3,10 +3,10 @@ - VJS HTML Demo + Video.js - HTML -

Video.js 10 HTML Demos

+

Video.js - HTML