From cc76fd03f5e9ff624548d14468cfc6d614b49d62 Mon Sep 17 00:00:00 2001 From: Darius Cepulis Date: Fri, 24 Jul 2026 15:28:22 -0700 Subject: [PATCH] fix(site): restore react demos for ssr-safe media elements (#1867) --- .../content/docs/reference/hlsjs-video.mdx | 24 +++++++------------ site/src/content/docs/reference/mux-audio.mdx | 24 +++++++------------ site/src/content/docs/reference/mux-video.mdx | 24 +++++++------------ .../docs/reference/native-hls-video.mdx | 24 +++++++------------ .../docs/reference/simple-hls-audio-only.mdx | 24 +++++++------------ .../docs/reference/simple-hls-video.mdx | 24 +++++++------------ 6 files changed, 48 insertions(+), 96 deletions(-) diff --git a/site/src/content/docs/reference/hlsjs-video.mdx b/site/src/content/docs/reference/hlsjs-video.mdx index ae0957a9..daa4d981 100644 --- a/site/src/content/docs/reference/hlsjs-video.mdx +++ b/site/src/content/docs/reference/hlsjs-video.mdx @@ -10,9 +10,8 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro"; import StyleCase from "@/components/docs/StyleCase.astro"; import Demo from "@/components/docs/demos/Demo.astro"; -{/* React live demo disabled until #1343 (SSR-breaking media imports) is fixed; show source instead. */} -import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; -import ServerCode from "@/components/Code/ServerCode.astro"; +{/* React demos */} +import BasicUsageDemoReact from "@/components/docs/demos/hlsjs-video/react/css/BasicUsage"; 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"; @@ -28,21 +27,14 @@ HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for ### Basic Usage -{/* React: source-only until #1343 is fixed. Restore with afterward. */} - - - App.tsx - App.css - - - - - - - - + + + diff --git a/site/src/content/docs/reference/mux-audio.mdx b/site/src/content/docs/reference/mux-audio.mdx index e4504830..43cbb4a9 100644 --- a/site/src/content/docs/reference/mux-audio.mdx +++ b/site/src/content/docs/reference/mux-audio.mdx @@ -10,9 +10,8 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro"; import StyleCase from "@/components/docs/StyleCase.astro"; import Demo from "@/components/docs/demos/Demo.astro"; -{/* React live demo disabled until #1343 (SSR-breaking media imports) is fixed; show source instead. */} -import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; -import ServerCode from "@/components/Code/ServerCode.astro"; +{/* React demos */} +import BasicUsageDemoReact from "@/components/docs/demos/mux-audio/react/css/BasicUsage"; 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"; @@ -28,21 +27,14 @@ Audio element for playing Mux-hosted HLS streams. Built on hls.js with Mux-speci ### Basic Usage -{/* React: source-only until #1343 is fixed. Restore with afterward. */} - - - App.tsx - App.css - - - - - - - - + + + diff --git a/site/src/content/docs/reference/mux-video.mdx b/site/src/content/docs/reference/mux-video.mdx index 7c93cf22..e4376826 100644 --- a/site/src/content/docs/reference/mux-video.mdx +++ b/site/src/content/docs/reference/mux-video.mdx @@ -10,9 +10,8 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro"; import StyleCase from "@/components/docs/StyleCase.astro"; import Demo from "@/components/docs/demos/Demo.astro"; -{/* React live demo disabled until #1343 (SSR-breaking media imports) is fixed; show source instead. */} -import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; -import ServerCode from "@/components/Code/ServerCode.astro"; +{/* React demos */} +import BasicUsageDemoReact from "@/components/docs/demos/mux-video/react/css/BasicUsage"; 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"; @@ -28,21 +27,14 @@ Video element for playing Mux-hosted HLS streams. Built on hls.js with Mux-speci ### Basic Usage -{/* React: source-only until #1343 is fixed. Restore with afterward. */} - - - App.tsx - App.css - - - - - - - - + + + diff --git a/site/src/content/docs/reference/native-hls-video.mdx b/site/src/content/docs/reference/native-hls-video.mdx index 2bae7ea5..cdbb34e6 100644 --- a/site/src/content/docs/reference/native-hls-video.mdx +++ b/site/src/content/docs/reference/native-hls-video.mdx @@ -10,9 +10,8 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro"; import StyleCase from "@/components/docs/StyleCase.astro"; import Demo from "@/components/docs/demos/Demo.astro"; -{/* React live demo disabled until #1343 (SSR-breaking media imports) is fixed; show source instead. */} -import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; -import ServerCode from "@/components/Code/ServerCode.astro"; +{/* React demos */} +import BasicUsageDemoReact from "@/components/docs/demos/native-hls-video/react/css/BasicUsage"; 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"; @@ -28,21 +27,14 @@ HLS video element that relies on the browser's native HLS support. Works on Safa ### Basic Usage -{/* React: source-only until #1343 is fixed. Restore with afterward. */} - - - App.tsx - App.css - - - - - - - - + + + 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..272144c7 100644 --- a/site/src/content/docs/reference/simple-hls-audio-only.mdx +++ b/site/src/content/docs/reference/simple-hls-audio-only.mdx @@ -10,9 +10,8 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro"; import StyleCase from "@/components/docs/StyleCase.astro"; import Demo from "@/components/docs/demos/Demo.astro"; -{/* React live demo disabled until #1343 (SSR-breaking media imports) is fixed; show source instead. */} -import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; -import ServerCode from "@/components/Code/ServerCode.astro"; +{/* React demos */} +import BasicUsageDemoReact from "@/components/docs/demos/simple-hls-audio-only/react/css/BasicUsage"; 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"; @@ -28,21 +27,14 @@ Audio-only HLS element that plays just the audio rendition of an HLS stream — ### Basic Usage -{/* React: source-only until #1343 is fixed. Restore with afterward. */} - - - App.tsx - App.css - - - - - - - - + + + diff --git a/site/src/content/docs/reference/simple-hls-video.mdx b/site/src/content/docs/reference/simple-hls-video.mdx index b84a2b79..c03ad772 100644 --- a/site/src/content/docs/reference/simple-hls-video.mdx +++ b/site/src/content/docs/reference/simple-hls-video.mdx @@ -10,9 +10,8 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro"; import StyleCase from "@/components/docs/StyleCase.astro"; import Demo from "@/components/docs/demos/Demo.astro"; -{/* React live demo disabled until #1343 (SSR-breaking media imports) is fixed; show source instead. */} -import { TabsRoot, TabsList, Tab, TabsPanel } from "@/components/Tabs"; -import ServerCode from "@/components/Code/ServerCode.astro"; +{/* React demos */} +import BasicUsageDemoReact from "@/components/docs/demos/simple-hls-video/react/css/BasicUsage"; 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"; @@ -28,21 +27,14 @@ Lightweight HLS video element optimized for minimal bundle size. For full hls.js ### Basic Usage -{/* React: source-only until #1343 is fixed. Restore with afterward. */} - - - App.tsx - App.css - - - - - - - - + + +