@mediafox/react 1.0.0

package/README.md

@@ -0,0 +1,110 @@
+# @mediafox/react
+
+React hooks for [MediaFox](https://github.com/wiedymi/mediafox) Media Player.
+
+## Installation
+
+```bash
+npm install @mediafox/react @mediafox/core
+# or
+bun add @mediafox/react @mediafox/core
+# or
+yarn add @mediafox/react @mediafox/core
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { useRef, useEffect } from 'react';
+import { useMediaFox } from '@mediafox/react';
+
+function VideoPlayer() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const { state, play, pause, load } = useMediaFox({
+    renderTarget: canvasRef.current,
+    onError: (error) => console.error('Player error:', error),
+  });
+
+  useEffect(() => {
+    load('/path/to/video.mp4');
+  }, [load]);
+
+  return (
+    <div>
+      <canvas ref={canvasRef} />
+      <div>
+        <button onClick={play} disabled={!state?.canPlay}>
+          Play
+        </button>
+        <button onClick={pause}>Pause</button>
+        <p>
+          {state?.currentTime.toFixed(2)}s / {state?.duration.toFixed(2)}s
+        </p>
+      </div>
+    </div>
+  );
+}
+```
+
+### With Event Handlers
+
+```tsx
+import { useMediaFox } from '@mediafox/react';
+
+function VideoPlayer() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const { state, play, pause, seek, load } = useMediaFox({
+    renderTarget: canvasRef.current,
+    volume: 0.8,
+    onPlay: () => console.log('Playing'),
+    onPause: () => console.log('Paused'),
+    onEnded: () => console.log('Ended'),
+    onTimeUpdate: ({ currentTime }) => console.log('Time:', currentTime),
+  });
+
+  // ... rest of component
+}
+```
+
+## API
+
+### `useMediaFox(options?)`
+
+Returns an object with:
+
+- `player` - The MediaFox instance (or null if not initialized)
+- `state` - Current player state (reactive)
+- `load(source, options?)` - Load a media source
+- `play()` - Start playback
+- `pause()` - Pause playback
+- `seek(time, options?)` - Seek to time in seconds
+- `stop()` - Stop playback and reset to start
+- `screenshot(options?)` - Capture current frame
+- `setRenderTarget(canvas)` - Update render target
+
+### Options
+
+All `PlayerOptions` from `@mediafox/core` plus event handlers:
+
+- `onLoadStart`, `onLoadedMetadata`, `onLoadedData`
+- `onCanPlay`, `onCanPlayThrough`
+- `onPlay`, `onPause`, `onPlaying`, `onEnded`
+- `onTimeUpdate`, `onDurationChange`
+- `onVolumeChange`, `onRateChange`
+- `onSeeking`, `onSeeked`, `onWaiting`
+- `onProgress`, `onError`, `onWarning`
+- `onTrackChange`, `onStateChange`
+
+## Features
+
+- ✅ Automatic cleanup on unmount
+- ✅ Optimized with `useSyncExternalStore` for React 18+
+- ✅ SSR safe (lazy loads MediaFox)
+- ✅ Fully typed with TypeScript
+- ✅ Framework-agnostic core
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export type { AudioTrackInfo, LoadOptions, MediaInfo, MediaSource, PlayerEventListener, PlayerEventMap, PlayerOptions, PlayerState, PlayerStateData, QualityLevel, ScreenshotOptions, SeekOptions, SubtitleTrackInfo, TimeRange, VideoTrackInfo, } from '@mediafox/core';
+export type { UseMediaFoxOptions, UseMediaFoxReturn } from './useMediaFox';
+export { useMediaFox } from './useMediaFox';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,cAAc,EACd,WAAW,EACX,SAAS,EACT,WAAW,EACX,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,WAAW,EACX,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,SAAS,EACT,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+var m=Object.create;var{getPrototypeOf:E,defineProperty:B,getOwnPropertyNames:w}=Object;var O=Object.prototype.hasOwnProperty;var v=(x,I,F)=>{F=x!=null?m(E(x)):{};let U=I||!x||!x.__esModule?B(F,"default",{value:x,enumerable:!0}):F;for(let V of w(x))if(!O.call(U,V))B(U,V,{get:()=>x[V],enumerable:!0});return U};var S=((x)=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(x,{get:(I,F)=>(typeof require<"u"?require:I)[F]}):x)(function(x){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+x+'" is not supported')});import{useCallback as T,useEffect as G,useMemo as k,useRef as j,useSyncExternalStore as C}from"react";function h(x={}){let I=j(null),F=j(null),U=j(new Set),V=k(()=>({renderTarget:x.renderTarget,audioContext:x.audioContext,volume:x.volume,muted:x.muted,playbackRate:x.playbackRate,autoplay:x.autoplay,preload:x.preload,crossOrigin:x.crossOrigin,maxCacheSize:x.maxCacheSize,renderer:x.renderer}),[x.renderTarget,x.audioContext,x.volume,x.muted,x.playbackRate,x.autoplay,x.preload,x.crossOrigin,x.maxCacheSize,x.renderer]);G(()=>{import("@mediafox/core").then(({MediaFox:L})=>{let M=new L(V);I.current=M;let P=M.subscribe((D)=>{F.current=D;for(let Q of U.current)Q()});F.current=M.getState();for(let D of U.current)D();return()=>{P.unsubscribe(),M.destroy(),I.current=null,F.current=null}})},[V]),G(()=>{let L=I.current;if(!L)return;let M=[],P=(D,Q)=>{if(Q)L.on(D,Q),M.push([D,Q])};return P("loadstart",x.onLoadStart),P("loadedmetadata",x.onLoadedMetadata),P("loadeddata",x.onLoadedData),P("canplay",x.onCanPlay),P("canplaythrough",x.onCanPlayThrough),P("play",x.onPlay),P("pause",x.onPause),P("playing",x.onPlaying),P("ended",x.onEnded),P("timeupdate",x.onTimeUpdate),P("durationchange",x.onDurationChange),P("volumechange",x.onVolumeChange),P("ratechange",x.onRateChange),P("seeking",x.onSeeking),P("seeked",x.onSeeked),P("waiting",x.onWaiting),P("progress",x.onProgress),P("error",x.onError),P("warning",x.onWarning),P("trackchange",x.onTrackChange),P("statechange",x.onStateChange),P("rendererchange",x.onRendererChange),P("rendererfallback",x.onRendererFallback),()=>{for(let[D,Q]of M)L.off(D,Q)}},[x.onLoadStart,x.onLoadedMetadata,x.onLoadedData,x.onCanPlay,x.onCanPlayThrough,x.onPlay,x.onPause,x.onPlaying,x.onEnded,x.onTimeUpdate,x.onDurationChange,x.onVolumeChange,x.onRateChange,x.onSeeking,x.onSeeked,x.onWaiting,x.onProgress,x.onError,x.onWarning,x.onTrackChange,x.onStateChange,x.onRendererChange,x.onRendererFallback]);let J=T((L)=>{return U.current.add(L),()=>{U.current.delete(L)}},[]),q=T(()=>F.current,[]),A=C(J,q,q),K=T(async(L,M)=>{if(!I.current)throw Error("Player not initialized");return I.current.load(L,M)},[]),N=T(async()=>{if(!I.current)throw Error("Player not initialized");return I.current.play()},[]),W=T(()=>{if(!I.current)throw Error("Player not initialized");I.current.pause()},[]),X=T(async(L,M)=>{if(!I.current)throw Error("Player not initialized");return I.current.seek(L,M)},[]),Y=T(async()=>{if(!I.current)throw Error("Player not initialized");return I.current.stop()},[]),Z=T(async(L)=>{if(!I.current)throw Error("Player not initialized");return I.current.screenshot(L)},[]),_=T(async(L)=>{if(!I.current)throw Error("Player not initialized");return I.current.setRenderTarget(L)},[]),$=T(async(L)=>{if(!I.current)throw Error("Player not initialized");return I.current.switchRenderer(L)},[]),z=A?.rendererType??null;return{player:I.current,state:A,load:K,play:N,pause:W,seek:X,stop:Y,screenshot:Z,setRenderTarget:_,switchRenderer:$,rendererType:z}}export{h as useMediaFox};

package/dist/useMediaFox.d.ts

@@ -0,0 +1,68 @@
+import type { LoadOptions, MediaFox, MediaSource, PlayerEventListener, PlayerOptions, PlayerStateData, RendererType, ScreenshotOptions, SeekOptions } from '@mediafox/core';
+export interface UseMediaFoxOptions extends PlayerOptions {
+    onLoadStart?: PlayerEventListener<'loadstart'>;
+    onLoadedMetadata?: PlayerEventListener<'loadedmetadata'>;
+    onLoadedData?: PlayerEventListener<'loadeddata'>;
+    onCanPlay?: PlayerEventListener<'canplay'>;
+    onCanPlayThrough?: PlayerEventListener<'canplaythrough'>;
+    onPlay?: PlayerEventListener<'play'>;
+    onPause?: PlayerEventListener<'pause'>;
+    onPlaying?: PlayerEventListener<'playing'>;
+    onEnded?: PlayerEventListener<'ended'>;
+    onTimeUpdate?: PlayerEventListener<'timeupdate'>;
+    onDurationChange?: PlayerEventListener<'durationchange'>;
+    onVolumeChange?: PlayerEventListener<'volumechange'>;
+    onRateChange?: PlayerEventListener<'ratechange'>;
+    onSeeking?: PlayerEventListener<'seeking'>;
+    onSeeked?: PlayerEventListener<'seeked'>;
+    onWaiting?: PlayerEventListener<'waiting'>;
+    onProgress?: PlayerEventListener<'progress'>;
+    onError?: PlayerEventListener<'error'>;
+    onWarning?: PlayerEventListener<'warning'>;
+    onTrackChange?: PlayerEventListener<'trackchange'>;
+    onStateChange?: PlayerEventListener<'statechange'>;
+    onRendererChange?: PlayerEventListener<'rendererchange'>;
+    onRendererFallback?: PlayerEventListener<'rendererfallback'>;
+}
+export interface UseMediaFoxReturn {
+    player: MediaFox | null;
+    state: PlayerStateData | null;
+    load: (source: MediaSource, options?: LoadOptions) => Promise<void>;
+    play: () => Promise<void>;
+    pause: () => void;
+    seek: (time: number, options?: SeekOptions) => Promise<void>;
+    stop: () => Promise<void>;
+    screenshot: (options?: ScreenshotOptions) => Promise<Blob | null>;
+    setRenderTarget: (canvas: HTMLCanvasElement | OffscreenCanvas) => Promise<void>;
+    switchRenderer: (type: RendererType) => Promise<void>;
+    rendererType: RendererType | null;
+}
+/**
+ * React hook for MediaFox media player.
+ * Creates and manages a MediaFox instance with automatic cleanup.
+ *
+ * @example
+ * ```tsx
+ * function VideoPlayer() {
+ *   const canvasRef = useRef<HTMLCanvasElement>(null);
+ *   const { player, state, play, pause, load } = useMediaFox({
+ *     renderTarget: canvasRef.current,
+ *     onError: (error) => console.error(error)
+ *   });
+ *
+ *   useEffect(() => {
+ *     load('/video.mp4');
+ *   }, [load]);
+ *
+ *   return (
+ *     <div>
+ *       <canvas ref={canvasRef} />
+ *       <button onClick={play}>Play</button>
+ *       <button onClick={pause}>Pause</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useMediaFox(options?: UseMediaFoxOptions): UseMediaFoxReturn;
+//# sourceMappingURL=useMediaFox.d.ts.map

package/dist/useMediaFox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaFox.d.ts","sourceRoot":"","sources":["../src/useMediaFox.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@mediafox/react",
+  "version": "1.0.0",
+  "description": "React hooks for MediaFox media player",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "bun run --watch src/index.ts",
+    "build": "bun run build:js && bun run build:types",
+    "build:js": "bun build src/index.ts --outdir=dist --target=browser --format=esm --minify --external react --external @mediafox/core",
+    "build:types": "tsc --emitDeclarationOnly",
+    "test": "bun test",
+    "lint": "biome lint ./src",
+    "format": "biome format ./src",
+    "check": "biome check ./src",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@mediafox/core": "^1.0.0",
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": "^18.3.18"
+  },
+  "keywords": [
+    "react",
+    "hooks",
+    "video",
+    "player",
+    "mediafox",
+    "mediabunny"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wiedymi/mediafox.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/wiedymi/mediafox/issues"
+  },
+  "homepage": "https://github.com/wiedymi/mediafox#readme"
+}