feat(react): initial skin scaffolding (#523)

Co-authored-by: Rahim <rahim.alwer@gmail.com>

packages/react/src/index.ts

@@ -9,8 +9,6 @@ export { createSelector, shallowEqual } from '@videojs/store';
 export { useSelector, useStore } from '@videojs/store/react';
 
 // Media primitives
-export { Audio, type AudioProps } from './media/audio';
-export { Video, type VideoProps } from './media/video';
 export {
   Container,
   type ContainerProps,

packages/react/src/presets/audio/index.ts

@@ -0,0 +1,3 @@
+export { Audio, type AudioProps } from '@/media/audio';
+export * from './minimal-skin';
+export * from './skin';

packages/react/src/presets/audio/minimal-skin.css

@@ -0,0 +1,3 @@
+.media-minimal-skin {
+  color: var(--media-color, red);
+}

packages/react/src/presets/audio/minimal-skin.tsx

@@ -0,0 +1,8 @@
+import type { BaseSkinProps } from '../types';
+
+export type MinimalAudioSkinProps = BaseSkinProps;
+
+export function MinimalAudioSkin(props: MinimalAudioSkinProps) {
+  const { children } = props;
+  return <div>{children}</div>;
+}

packages/react/src/presets/audio/skin.css

@@ -0,0 +1,3 @@
+.media-skin {
+  color: var(--media-color, red);
+}

packages/react/src/presets/audio/skin.tsx

@@ -0,0 +1,8 @@
+import type { BaseSkinProps } from '../types';
+
+export type AudioSkinProps = BaseSkinProps;
+
+export function AudioSkin(props: AudioSkinProps) {
+  const { children } = props;
+  return <div>{children}</div>;
+}

packages/react/src/presets/background/index.ts

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

packages/react/src/presets/background/skin.css

@@ -0,0 +1,3 @@
+.media-skin {
+  color: var(--media-color, red);
+}

packages/react/src/presets/background/skin.tsx

@@ -0,0 +1,8 @@
+import type { BaseSkinProps } from '../types';
+
+export type BackgroundVideoSkinProps = BaseSkinProps;
+
+export function BackgroundVideoSkin(props: BackgroundVideoSkinProps) {
+  const { children } = props;
+  return <div>{children}</div>;
+}

packages/react/src/presets/types.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+
+export type BaseSkinProps = PropsWithChildren;

packages/react/src/presets/video/index.ts

@@ -0,0 +1,3 @@
+export { Video, type VideoProps } from '@/media/video';
+export * from './minimal-skin';
+export * from './skin';

packages/react/src/presets/video/minimal-skin.css

@@ -0,0 +1,3 @@
+.media-minimal-skin {
+  color: var(--media-color, red);
+}

packages/react/src/presets/video/minimal-skin.tsx

@@ -0,0 +1,8 @@
+import type { BaseSkinProps } from '../types';
+
+export type MinimalVideoSkinProps = BaseSkinProps;
+
+export function MinimalVideoSkin(props: MinimalVideoSkinProps) {
+  const { children } = props;
+  return <div>{children}</div>;
+}

packages/react/src/presets/video/skin.css

@@ -0,0 +1,3 @@
+.media-skin {
+  color: var(--media-color, red);
+}

packages/react/src/presets/video/skin.tsx

@@ -0,0 +1,8 @@
+import type { BaseSkinProps } from '../types';
+
+export type VideoSkinProps = BaseSkinProps;
+
+export function VideoSkin(props: VideoSkinProps) {
+  const { children } = props;
+  return <div>{children}</div>;
+}