mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
fix(site): restore react demos for ssr-safe media elements (#1867)
This commit is contained in:
Darius Cepulis
@@ -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 <Demo> with <BasicUsageDemoReact client:idle /> afterward. */}
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="Basic usage source code">
|
||||
<Tab client:idle value="App.tsx" initial>App.tsx</Tab>
|
||||
<Tab client:idle value="App.css">App.css</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="App.tsx" initial>
|
||||
<ServerCode code={basicUsageReactTsx} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="App.css">
|
||||
<ServerCode code={basicUsageReactCss} lang="css" />
|
||||
</TabsPanel>
|
||||
</TabsRoot>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: basicUsageReactCss, lang: "css" },
|
||||
]}>
|
||||
<BasicUsageDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
|
||||
@@ -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 <Demo> with <BasicUsageDemoReact client:idle /> afterward. */}
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="Basic usage source code">
|
||||
<Tab client:idle value="App.tsx" initial>App.tsx</Tab>
|
||||
<Tab client:idle value="App.css">App.css</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="App.tsx" initial>
|
||||
<ServerCode code={basicUsageReactTsx} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="App.css">
|
||||
<ServerCode code={basicUsageReactCss} lang="css" />
|
||||
</TabsPanel>
|
||||
</TabsRoot>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: basicUsageReactCss, lang: "css" },
|
||||
]}>
|
||||
<BasicUsageDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
|
||||
@@ -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 <Demo> with <BasicUsageDemoReact client:idle /> afterward. */}
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="Basic usage source code">
|
||||
<Tab client:idle value="App.tsx" initial>App.tsx</Tab>
|
||||
<Tab client:idle value="App.css">App.css</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="App.tsx" initial>
|
||||
<ServerCode code={basicUsageReactTsx} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="App.css">
|
||||
<ServerCode code={basicUsageReactCss} lang="css" />
|
||||
</TabsPanel>
|
||||
</TabsRoot>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: basicUsageReactCss, lang: "css" },
|
||||
]}>
|
||||
<BasicUsageDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
|
||||
@@ -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 <Demo> with <BasicUsageDemoReact client:idle /> afterward. */}
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="Basic usage source code">
|
||||
<Tab client:idle value="App.tsx" initial>App.tsx</Tab>
|
||||
<Tab client:idle value="App.css">App.css</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="App.tsx" initial>
|
||||
<ServerCode code={basicUsageReactTsx} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="App.css">
|
||||
<ServerCode code={basicUsageReactCss} lang="css" />
|
||||
</TabsPanel>
|
||||
</TabsRoot>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: basicUsageReactCss, lang: "css" },
|
||||
]}>
|
||||
<BasicUsageDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
|
||||
@@ -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 <Demo> with <BasicUsageDemoReact client:idle /> afterward. */}
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="Basic usage source code">
|
||||
<Tab client:idle value="App.tsx" initial>App.tsx</Tab>
|
||||
<Tab client:idle value="App.css">App.css</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="App.tsx" initial>
|
||||
<ServerCode code={basicUsageReactTsx} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="App.css">
|
||||
<ServerCode code={basicUsageReactCss} lang="css" />
|
||||
</TabsPanel>
|
||||
</TabsRoot>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: basicUsageReactCss, lang: "css" },
|
||||
]}>
|
||||
<BasicUsageDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
|
||||
@@ -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 <Demo> with <BasicUsageDemoReact client:idle /> afterward. */}
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="Basic usage source code">
|
||||
<Tab client:idle value="App.tsx" initial>App.tsx</Tab>
|
||||
<Tab client:idle value="App.css">App.css</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="App.tsx" initial>
|
||||
<ServerCode code={basicUsageReactTsx} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="App.css">
|
||||
<ServerCode code={basicUsageReactCss} lang="css" />
|
||||
</TabsPanel>
|
||||
</TabsRoot>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: basicUsageReactCss, lang: "css" },
|
||||
]}>
|
||||
<BasicUsageDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user