From 0afa9b7187088b42408e6c64eff9026484473183 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Fri, 26 Sep 2025 10:52:56 +1000
Subject: [PATCH] fix: skin exports/imports

---
 examples/react-demo/src/main.tsx              |  5 +--
 package.json                                  |  2 +-
 packages/react/react/src/index.ts             |  2 +-
 .../skins/{ => default}/MediaSkinDefault.tsx  | 25 ++++++-------
 .../react/react/src/skins/default/index.ts    |  1 +
 .../src/skins/{ => default}/styles.module.css |  0
 .../react/src/skins/{ => default}/styles.ts   | 35 ++++++++++++++++---
 packages/react/react/src/skins/index.ts       |  1 +
 8 files changed, 51 insertions(+), 20 deletions(-)
 rename packages/react/react/src/skins/{ => default}/MediaSkinDefault.tsx (77%)
 create mode 100644 packages/react/react/src/skins/default/index.ts
 rename packages/react/react/src/skins/{ => default}/styles.module.css (100%)
 rename packages/react/react/src/skins/{ => default}/styles.ts (86%)
 create mode 100644 packages/react/react/src/skins/index.ts

diff --git a/examples/react-demo/src/main.tsx b/examples/react-demo/src/main.tsx
index 4f8b0e17..606c7ec7 100644
--- a/examples/react-demo/src/main.tsx
+++ b/examples/react-demo/src/main.tsx
@@ -17,7 +17,7 @@ function DemoPlayer() {
                 src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
               /> */}
               {/* @ts-ignore -- types are incorrect */}
-            <Video muted src="https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8" />
+              <Video muted src="https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8" />
             </MediaSkinDefault>
           </div>
         </MediaProvider>
@@ -26,7 +26,8 @@ function DemoPlayer() {
           <div className="w-full max-w-4xl mx-auto">
             <MediaSkinDefault className="aspect-video">
               {/* @ts-ignore -- types are incorrect */}
-            <Video muted src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8" />
+              <Video muted src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8" />
+            </MediaSkinDefault>
           </div>
         </MediaProvider>
       </div>
diff --git a/package.json b/package.json
index 0dc77cd3..867c4307 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "clean": "turbo run clean",
     "dev:html": "turbo run dev --filter=html-demo...",
     "dev:react": "turbo run dev --filter=react-demo...",
-    "dev": "turbo run dev --parallel --filter=./packages/**",
+    "dev": "turbo run dev --parallel",
     "generate:icons": "turbo run generate:icons",
     "format:check": "prettier . --check --log-level warn --cache",
     "format": "prettier . --write --log-level warn --cache",
diff --git a/packages/react/react/src/index.ts b/packages/react/react/src/index.ts
index 146ec51b..e84d5f34 100644
--- a/packages/react/react/src/index.ts
+++ b/packages/react/react/src/index.ts
@@ -1,5 +1,5 @@
 export * from '@vjs-10/react-media-store';
-export * from './skins/MediaSkinDefault';
+export * from './skins';
 export { Video, MediaElementVideo } from './components/Video';
 export { MediaContainer, useMediaContainerRef } from './components/MediaContainer';
 
diff --git a/packages/react/react/src/skins/MediaSkinDefault.tsx b/packages/react/react/src/skins/default/MediaSkinDefault.tsx
similarity index 77%
rename from packages/react/react/src/skins/MediaSkinDefault.tsx
rename to packages/react/react/src/skins/default/MediaSkinDefault.tsx
index d372c82a..fd933e7a 100644
--- a/packages/react/react/src/skins/MediaSkinDefault.tsx
+++ b/packages/react/react/src/skins/default/MediaSkinDefault.tsx
@@ -1,4 +1,4 @@
-import styles from './styles';
+import type { PropsWithChildren } from 'react';
 
 import {
   FullscreenEnterIcon,
@@ -10,23 +10,24 @@ import {
   VolumeOffIcon,
 } from '@vjs-10/react-icons';
 
-import { CurrentTimeDisplay } from '../components/CurrentTimeDisplay';
-import { DurationDisplay } from '../components/DurationDisplay';
-import { FullscreenButton } from '../components/FullscreenButton';
-import { MediaContainer } from '../components/MediaContainer';
-import MuteButton from '../components/MuteButton';
-import PlayButton from '../components/PlayButton';
-import { VolumeRange } from '../components/VolumeRange';
-import { TimeRange } from '../components/TimeRange';
-import { PropsWithChildren } from 'react';
+import { CurrentTimeDisplay } from '../../components/CurrentTimeDisplay';
+import { DurationDisplay } from '../../components/DurationDisplay';
+import { FullscreenButton } from '../../components/FullscreenButton';
+import { MediaContainer } from '../../components/MediaContainer';
+import MuteButton from '../../components/MuteButton';
+import PlayButton from '../../components/PlayButton';
+import { TimeRange } from '../../components/TimeRange';
+import { VolumeRange } from '../../components/VolumeRange';
+import styles from './styles';
+import twStyles from './styles.module.css';
 
 type SkinProps = PropsWithChildren<{
   className?: string;
 }>;
 
-export default function MediaSkinDefault({ children, className = '' }: SkinProps) {
+export default function MediaSkinDefault({ children, className = '' }: SkinProps): JSX.Element {
   return (
-    <MediaContainer className={`${styles.MediaContainer} ${className}`}>
+    <MediaContainer className={`${twStyles.Container} ${className}`}>
       {children}
 
       {/* Background gradient to help with controls contrast. */}
diff --git a/packages/react/react/src/skins/default/index.ts b/packages/react/react/src/skins/default/index.ts
new file mode 100644
index 00000000..d790012b
--- /dev/null
+++ b/packages/react/react/src/skins/default/index.ts
@@ -0,0 +1 @@
+export { default as MediaSkinDefault } from './MediaSkinDefault';
\ No newline at end of file
diff --git a/packages/react/react/src/skins/styles.module.css b/packages/react/react/src/skins/default/styles.module.css
similarity index 100%
rename from packages/react/react/src/skins/styles.module.css
rename to packages/react/react/src/skins/default/styles.module.css
diff --git a/packages/react/react/src/skins/styles.ts b/packages/react/react/src/skins/default/styles.ts
similarity index 86%
rename from packages/react/react/src/skins/styles.ts
rename to packages/react/react/src/skins/default/styles.ts
index 4160aa9f..3f5cd18a 100644
--- a/packages/react/react/src/skins/styles.ts
+++ b/packages/react/react/src/skins/default/styles.ts
@@ -1,11 +1,38 @@
-// Utility to merge class names
+// A (very crude) utility to merge class names
 // Usually I'd use something like `clsx` or `classnames` but this is ok for our simple use case.
 // It just makes the billions of Tailwind classes a little easier to read.
+const cn = (...classes: (string | undefined)[]): string => classes.filter(Boolean).join(' ');
 
-const cn = (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ');
+export interface MediaSkinStyles {
+  readonly MediaContainer: string;
+  readonly Overlay: string;
+  readonly Controls: string;
+  readonly Button: string;
+  readonly IconButton: string;
+  readonly PlayButton: string;
+  readonly PlayIcon: string;
+  readonly PauseIcon: string;
+  readonly VolumeButton: string;
+  readonly VolumeHighIcon: string;
+  readonly VolumeLowIcon: string;
+  readonly VolumeOffIcon: string;
+  readonly FullScreenButton: string;
+  readonly FullScreenEnterIcon: string;
+  readonly FullScreenExitIcon: string;
+  readonly TimeControls: string;
+  readonly TimeDisplay: string;
+  readonly TimeRangeRoot: string;
+  readonly TimeRangeTrack: string;
+  readonly TimeRangeProgress: string;
+  readonly TimeRangePointer: string;
+  readonly TimeRangeThumb: string;
+  readonly VolumeRangeRoot: string;
+  readonly VolumeRangeTrack: string;
+  readonly VolumeRangeProgress: string;
+  readonly VolumeRangeThumb: string;
+}
 
-// Improve types here to infer the keys from the object - not working with isolated declarations (rahim)
-const styles: Record<string, string> = {
+const styles: MediaSkinStyles = {
   MediaContainer: cn(
     'relative @container/root group/root overflow-clip',
     // Base typography
diff --git a/packages/react/react/src/skins/index.ts b/packages/react/react/src/skins/index.ts
new file mode 100644
index 00000000..479a9ab2
--- /dev/null
+++ b/packages/react/react/src/skins/index.ts
@@ -0,0 +1 @@
+export * from './default'
\ No newline at end of file