From 573a9e57ed8c4f7ec578a6bff925d36657e5bd2f Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Fri, 6 Mar 2026 18:01:39 -0600 Subject: [PATCH] chore: update examples to have sidebar and more examples link on non (#767) --- package.json | 1 + packages/sandbox/src/index.html | 123 ++++++++++++++++-- packages/sandbox/templates/core/index.html | 13 -- packages/sandbox/templates/core/main.ts | 3 - .../templates/html-background/index.html | 16 ++- .../sandbox/templates/html-background/main.ts | 18 ++- .../templates/html-tailwind/index.html | 13 ++ .../sandbox/templates/html-tailwind/main.ts | 58 +++++---- packages/sandbox/templates/html/index.html | 12 ++ packages/sandbox/templates/html/main.ts | 92 ++++++------- packages/sandbox/templates/index.html | 123 ++++++++++++++++-- .../templates/react-background/index.html | 13 +- .../templates/react-tailwind/index.html | 12 ++ .../sandbox/templates/react-tailwind/main.tsx | 3 +- packages/sandbox/templates/react/index.html | 13 ++ packages/sandbox/templates/react/main.tsx | 3 +- packages/sandbox/vite.config.ts | 1 - 17 files changed, 392 insertions(+), 125 deletions(-) delete mode 100644 packages/sandbox/templates/core/index.html delete mode 100644 packages/sandbox/templates/core/main.ts diff --git a/package.json b/package.json index 42e7e653..8dcfdb70 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "dev:site": "turbo run dev --filter=site", "dev": "turbo run dev --parallel", "dev:packages": "turbo run dev --parallel --filter='./packages/*'", + "dev:sandbox": "turbo run dev --filter=@videojs/sandbox", "lint": "biome check .", "lint:fix": "biome check . --write", "lint:fix:file": "biome check --write", diff --git a/packages/sandbox/src/index.html b/packages/sandbox/src/index.html index 6f15c774..c4295447 100644 --- a/packages/sandbox/src/index.html +++ b/packages/sandbox/src/index.html @@ -6,16 +6,117 @@ Sandbox - -

Sandbox

- + +
+ Video.js v10 + + + +
+
+ +
+ +
+
+ diff --git a/packages/sandbox/templates/core/index.html b/packages/sandbox/templates/core/index.html deleted file mode 100644 index b90c8272..00000000 --- a/packages/sandbox/templates/core/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - Sandbox — Core - - - -
- - - diff --git a/packages/sandbox/templates/core/main.ts b/packages/sandbox/templates/core/main.ts deleted file mode 100644 index df3154ac..00000000 --- a/packages/sandbox/templates/core/main.ts +++ /dev/null @@ -1,3 +0,0 @@ -// http://localhost:5173/core/ - -// import { } from '@videojs/core'; diff --git a/packages/sandbox/templates/html-background/index.html b/packages/sandbox/templates/html-background/index.html index 580c367b..119c3d25 100644 --- a/packages/sandbox/templates/html-background/index.html +++ b/packages/sandbox/templates/html-background/index.html @@ -4,10 +4,22 @@ Sandbox — HTML Background - + -
+ + +
diff --git a/packages/sandbox/templates/html-background/main.ts b/packages/sandbox/templates/html-background/main.ts index 1c65ceec..91a597a3 100644 --- a/packages/sandbox/templates/html-background/main.ts +++ b/packages/sandbox/templates/html-background/main.ts @@ -8,10 +8,14 @@ import '@videojs/html/background/video'; const html = String.raw; -document.getElementById('root')!.innerHTML = html` - - - - - -`; +const root = document.getElementById('root'); + +if (root) { + root.innerHTML = html` + + + + + + `; +} diff --git a/packages/sandbox/templates/html-tailwind/index.html b/packages/sandbox/templates/html-tailwind/index.html index 3df8c266..2ce1b0dc 100644 --- a/packages/sandbox/templates/html-tailwind/index.html +++ b/packages/sandbox/templates/html-tailwind/index.html @@ -7,6 +7,19 @@ + +
diff --git a/packages/sandbox/templates/html-tailwind/main.ts b/packages/sandbox/templates/html-tailwind/main.ts index dce2c1a0..cb66acc3 100644 --- a/packages/sandbox/templates/html-tailwind/main.ts +++ b/packages/sandbox/templates/html-tailwind/main.ts @@ -7,36 +7,38 @@ import '@videojs/html/video/minimal-skin.tailwind'; import { SKINS } from '../constants'; import type { Skin } from '../types'; -const html = String.raw; +const player = document.getElementById('player'); +const select = document.getElementById('skin-select') as HTMLSelectElement | null; -const VIDEO_SRC = 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4'; +if (player && select) { + const html = String.raw; -const skinTags: Record = { - default: 'video-skin-tailwind', - minimal: 'video-minimal-skin-tailwind', -}; + const VIDEO_SRC = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4'; -function render(skin: Skin) { - const tag = skinTags[skin]; + const skinTags: Record = { + default: 'video-skin-tailwind', + minimal: 'video-minimal-skin-tailwind', + }; - document.getElementById('player')!.innerHTML = html` - - <${tag}> - - - - `; + function render(skin: Skin) { + const tag = skinTags[skin]; + + player!.innerHTML = html` + + <${tag}> + + + + `; + } + + for (const skin of SKINS) { + const option = document.createElement('option'); + option.value = skin; + option.textContent = skin; + select.appendChild(option); + } + select.addEventListener('change', () => render(select.value as Skin)); + + render('default'); } - -// Skin switcher -const select = document.getElementById('skin-select') as HTMLSelectElement; -for (const skin of SKINS) { - const option = document.createElement('option'); - option.value = skin; - option.textContent = skin; - select.appendChild(option); -} -select.addEventListener('change', () => render(select.value as Skin)); - -// Initial render -render('default'); diff --git a/packages/sandbox/templates/html/index.html b/packages/sandbox/templates/html/index.html index 08c45443..12510f47 100644 --- a/packages/sandbox/templates/html/index.html +++ b/packages/sandbox/templates/html/index.html @@ -7,6 +7,18 @@ + +
diff --git a/packages/sandbox/templates/html/main.ts b/packages/sandbox/templates/html/main.ts index 86c5d9e0..2f3518d3 100644 --- a/packages/sandbox/templates/html/main.ts +++ b/packages/sandbox/templates/html/main.ts @@ -7,54 +7,56 @@ import '@videojs/html/video/minimal-skin'; import { SKINS } from '../constants'; import type { Skin } from '../types'; -const html = String.raw; +const player = document.getElementById('player'); +const select = document.getElementById('skin-select') as HTMLSelectElement | null; -const VIDEO_SRC = 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4'; +if (player && select) { + const html = String.raw; -const skinTags: Record = { - default: 'video-skin', - minimal: 'video-minimal-skin', -}; + const VIDEO_SRC = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4'; -const stylesheets: Record = { - default: new URL('@videojs/html/video/skin.css', import.meta.url).href, - minimal: new URL('@videojs/html/video/minimal-skin.css', import.meta.url).href, -}; + const skinTags: Record = { + default: 'video-skin', + minimal: 'video-minimal-skin', + }; -let currentLink: HTMLLinkElement | null = null; + const stylesheets: Record = { + default: new URL('@videojs/html/video/skin.css', import.meta.url).href, + minimal: new URL('@videojs/html/video/minimal-skin.css', import.meta.url).href, + }; -function loadStylesheet(url: string) { - currentLink?.remove(); - const link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = url; - document.head.appendChild(link); - currentLink = link; + let currentLink: HTMLLinkElement | null = null; + + function loadStylesheet(url: string) { + currentLink?.remove(); + const link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = url; + document.head.appendChild(link); + currentLink = link; + } + + function render(skin: Skin) { + const tag = skinTags[skin]; + + loadStylesheet(stylesheets[skin]); + + player!.innerHTML = html` + + <${tag}> + + + + `; + } + + for (const skin of SKINS) { + const option = document.createElement('option'); + option.value = skin; + option.textContent = skin; + select.appendChild(option); + } + select.addEventListener('change', () => render(select.value as Skin)); + + render('default'); } - -function render(skin: Skin) { - const tag = skinTags[skin]; - - loadStylesheet(stylesheets[skin]); - - document.getElementById('player')!.innerHTML = html` - - <${tag}> - - - - `; -} - -// Skin switcher -const select = document.getElementById('skin-select') as HTMLSelectElement; -for (const skin of SKINS) { - const option = document.createElement('option'); - option.value = skin; - option.textContent = skin; - select.appendChild(option); -} -select.addEventListener('change', () => render(select.value as Skin)); - -// Initial render -render('default'); diff --git a/packages/sandbox/templates/index.html b/packages/sandbox/templates/index.html index 6f15c774..c4295447 100644 --- a/packages/sandbox/templates/index.html +++ b/packages/sandbox/templates/index.html @@ -6,16 +6,117 @@ Sandbox - -

Sandbox

- + +
+ Video.js v10 + + + +
+
+ +
+ +
+
+ diff --git a/packages/sandbox/templates/react-background/index.html b/packages/sandbox/templates/react-background/index.html index 93884a53..24649407 100644 --- a/packages/sandbox/templates/react-background/index.html +++ b/packages/sandbox/templates/react-background/index.html @@ -4,10 +4,19 @@ Sandbox — React Background - + -
+ + +
diff --git a/packages/sandbox/templates/react-tailwind/index.html b/packages/sandbox/templates/react-tailwind/index.html index bd39b8b5..7ea6512c 100644 --- a/packages/sandbox/templates/react-tailwind/index.html +++ b/packages/sandbox/templates/react-tailwind/index.html @@ -7,6 +7,18 @@ + +
diff --git a/packages/sandbox/templates/react-tailwind/main.tsx b/packages/sandbox/templates/react-tailwind/main.tsx index 050055a1..3b474810 100644 --- a/packages/sandbox/templates/react-tailwind/main.tsx +++ b/packages/sandbox/templates/react-tailwind/main.tsx @@ -49,4 +49,5 @@ function App() { ); } -createRoot(document.getElementById('root')!).render(); +const root = document.getElementById('root'); +if (root) createRoot(root).render(); diff --git a/packages/sandbox/templates/react/index.html b/packages/sandbox/templates/react/index.html index 72bb6f58..93733687 100644 --- a/packages/sandbox/templates/react/index.html +++ b/packages/sandbox/templates/react/index.html @@ -7,6 +7,19 @@ + +
diff --git a/packages/sandbox/templates/react/main.tsx b/packages/sandbox/templates/react/main.tsx index bd395693..e2cc2a5a 100644 --- a/packages/sandbox/templates/react/main.tsx +++ b/packages/sandbox/templates/react/main.tsx @@ -50,4 +50,5 @@ function App() { ); } -createRoot(document.getElementById('root')!).render(); +const root = document.getElementById('root'); +if (root) createRoot(root).render(); diff --git a/packages/sandbox/vite.config.ts b/packages/sandbox/vite.config.ts index 2e72bc07..93399ed4 100644 --- a/packages/sandbox/vite.config.ts +++ b/packages/sandbox/vite.config.ts @@ -18,7 +18,6 @@ export default defineConfig({ rollupOptions: { input: { main: resolve(__dirname, 'src/index.html'), - core: resolve(__dirname, 'src/core/index.html'), html: resolve(__dirname, 'src/html/index.html'), 'html-background': resolve(__dirname, 'src/html-background/index.html'), 'html-tailwind': resolve(__dirname, 'src/html-tailwind/index.html'),