fix: skin exports/imports

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>

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",

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';
 

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. */}

packages/react/react/src/skins/default/index.ts

@@ -0,0 +1 @@
+export { default as MediaSkinDefault } from './MediaSkinDefault';

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

packages/react/react/src/skins/index.ts

@@ -0,0 +1 @@
+export * from './default'