feat(sandbox): rebuild sandbox with shell UI and expanded templates (#773)

packages/sandbox/templates/shared/html/skin-tags.ts

@@ -0,0 +1,13 @@
+import type { Skin } from '../../types';
+
+type SkinTagMap = Record<Skin, { video: string; audio: string }>;
+
+export const CSS_SKIN_TAGS: SkinTagMap = {
+  default: { video: 'video-skin', audio: 'audio-skin' },
+  minimal: { video: 'video-minimal-skin', audio: 'audio-minimal-skin' },
+};
+
+export const TAILWIND_SKIN_TAGS: SkinTagMap = {
+  default: { video: 'video-skin-tailwind', audio: 'audio-skin-tailwind' },
+  minimal: { video: 'video-minimal-skin-tailwind', audio: 'audio-minimal-skin-tailwind' },
+};

packages/sandbox/templates/shared/html/stylesheets.ts

@@ -0,0 +1,30 @@
+import type { Skin } from '../../types';
+
+const videoStylesheets: Record<Skin, string> = {
+  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 audioStylesheets: Record<Skin, string> = {
+  default: new URL('@videojs/html/audio/skin.css', import.meta.url).href,
+  minimal: new URL('@videojs/html/audio/minimal-skin.css', import.meta.url).href,
+};
+
+function loadStylesheet(url: string) {
+  // Remove any existing link for this URL to force reload
+  const existing = document.querySelector(`link[rel="stylesheet"][href="${url}"]`);
+  existing?.remove();
+
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = url;
+  document.head.appendChild(link);
+}
+
+export function loadVideoStylesheets(skin: Skin) {
+  loadStylesheet(videoStylesheets[skin]);
+}
+
+export function loadAudioStylesheets(skin: Skin) {
+  loadStylesheet(audioStylesheets[skin]);
+}

packages/sandbox/templates/shared/html/tailwind-setup.ts

@@ -0,0 +1,18 @@
+import { MinimalAudioSkinTailwindElement } from '@videojs/html/audio/minimal-skin.tailwind';
+import { AudioSkinTailwindElement } from '@videojs/html/audio/skin.tailwind';
+import { MinimalVideoSkinTailwindElement } from '@videojs/html/video/minimal-skin.tailwind';
+import { VideoSkinTailwindElement } from '@videojs/html/video/skin.tailwind';
+import tailwindCSS from '../../styles.css?inline';
+
+const tailwindStyles = new CSSStyleSheet();
+tailwindStyles.replaceSync(tailwindCSS);
+
+export function setupVideoTailwind() {
+  VideoSkinTailwindElement.styles = tailwindStyles;
+  MinimalVideoSkinTailwindElement.styles = tailwindStyles;
+}
+
+export function setupAudioTailwind() {
+  AudioSkinTailwindElement.styles = tailwindStyles;
+  MinimalAudioSkinTailwindElement.styles = tailwindStyles;
+}