react-native-video-provider 0.1.1

package/lib/typescript/src/provider/VideoProvider.d.ts

@@ -0,0 +1,18 @@
+import { type PropsWithChildren } from 'react';
+import type { VideoProviderConfig } from '../types/video.js';
+export interface VideoProviderProps extends PropsWithChildren {
+    config?: VideoProviderConfig;
+}
+/**
+ * Wrap the app once. Creates the singleton native player silently and
+ * mounts the fullscreen/floating hosts above the app so `enterFullscreen()`
+ * and `showFloating()` work from any screen.
+ *
+ * ```tsx
+ * <VideoProvider>
+ *   <Navigation />
+ * </VideoProvider>
+ * ```
+ */
+export declare function VideoProvider({ children, config }: VideoProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=VideoProvider.d.ts.map

package/lib/typescript/src/provider/VideoProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoProvider.d.ts","sourceRoot":"","sources":["../../../../src/provider/VideoProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAgB,CAAC;AAK1D,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,kBAAkB,+BAkBrE"}

package/lib/typescript/src/state/createVideoStore.d.ts

@@ -0,0 +1,6 @@
+import { type StoreApi } from 'zustand/vanilla';
+import type { VideoState } from '../types/video.js';
+export declare const initialVideoState: VideoState;
+export type VideoStore = StoreApi<VideoState>;
+export declare function createVideoStore(): VideoStore;
+//# sourceMappingURL=createVideoStore.d.ts.map

package/lib/typescript/src/state/createVideoStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createVideoStore.d.ts","sourceRoot":"","sources":["../../../../src/state/createVideoStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAgB,CAAC;AAEjD,eAAO,MAAM,iBAAiB,EAAE,UAuB/B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAE9C,wBAAgB,gBAAgB,IAAI,UAAU,CAE7C"}

package/lib/typescript/src/types/events.d.ts

@@ -0,0 +1,46 @@
+import type { PlayerMode, VideoError, VideoSource } from './video.js';
+export interface VideoEventMap {
+    onLoad: {
+        videoId: string;
+        duration: number;
+        width: number;
+        height: number;
+    };
+    onReady: {
+        videoId: string;
+    };
+    onPlay: undefined;
+    onPause: undefined;
+    onBuffer: {
+        buffering: boolean;
+    };
+    onSeek: {
+        position: number;
+    };
+    onProgress: {
+        position: number;
+        duration: number;
+        buffered: number;
+    };
+    onEnd: undefined;
+    onError: VideoError;
+    onEnterFullscreen: undefined;
+    onExitFullscreen: undefined;
+    onAttach: {
+        surfaceId: string;
+    };
+    onDetach: {
+        surfaceId: string;
+    };
+    onModeChanged: {
+        mode: PlayerMode;
+    };
+    onVideoChanged: {
+        video: VideoSource | null;
+    };
+    onPipChanged: {
+        active: boolean;
+    };
+}
+export type VideoEventName = keyof VideoEventMap;
+//# sourceMappingURL=events.d.ts.map

package/lib/typescript/src/types/events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../../src/types/events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAS,CAAC;AAEnE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7E,OAAO,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;IACjC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7B,UAAU,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACrE,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,UAAU,CAAC;IACpB,iBAAiB,EAAE,SAAS,CAAC;IAC7B,gBAAgB,EAAE,SAAS,CAAC;IAC5B,QAAQ,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,QAAQ,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,aAAa,EAAE;QAAE,IAAI,EAAE,UAAU,CAAA;KAAE,CAAC;IACpC,cAAc,EAAE;QAAE,KAAK,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,CAAC;IAC9C,YAAY,EAAE;QAAE,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC;CACnC;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,aAAa,CAAC"}

package/lib/typescript/src/types/index.d.ts

@@ -0,0 +1,3 @@
+export type { VideoSource, ResizeMode, PlayerMode, PlaybackStatus, VideoError, VideoState, SetSourceOptions, VideoProviderConfig, } from './video.js';
+export type { VideoEventMap, VideoEventName } from './events.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,YAAS,CAAC;AACjB,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAU,CAAC"}

package/lib/typescript/src/types/video.d.ts

@@ -0,0 +1,70 @@
+export interface VideoSource {
+    /**
+     * Stable identity of the video. The engine uses this for same-video
+     * handoff: setting a source whose `id` matches the current one never
+     * reloads, rebuffers or resets position.
+     */
+    id: string;
+    uri: string;
+    headers?: Record<string, string>;
+    title?: string;
+    artist?: string;
+    artworkUri?: string;
+    /** Seconds. Applied only when the item is (re)loaded. */
+    startPosition?: number;
+}
+export type ResizeMode = 'contain' | 'cover' | 'stretch';
+export type PlayerMode = 'inline' | 'fullscreen' | 'floating' | 'pip' | 'background' | 'hidden';
+export type PlaybackStatus = 'idle' | 'loading' | 'ready' | 'playing' | 'paused' | 'buffering' | 'ended' | 'error';
+export interface VideoError {
+    code: string;
+    message: string;
+}
+export interface VideoState {
+    currentVideo: VideoSource | null;
+    status: PlaybackStatus;
+    playing: boolean;
+    paused: boolean;
+    buffering: boolean;
+    loading: boolean;
+    /** Seconds */
+    position: number;
+    /** Seconds. 0 until loaded. */
+    duration: number;
+    /** Seconds of buffered media ahead of position. */
+    buffered: number;
+    rate: number;
+    volume: number;
+    muted: boolean;
+    repeat: boolean;
+    resizeMode: ResizeMode;
+    fullscreen: boolean;
+    pip: boolean;
+    floating: boolean;
+    mode: PlayerMode;
+    /** Surface the player is currently requested/attached to. */
+    surfaceId: string | null;
+    videoWidth: number;
+    videoHeight: number;
+    error: VideoError | null;
+}
+export interface SetSourceOptions {
+    /** Start playing as soon as ready (or immediately on handoff). Default true. */
+    autoplay?: boolean;
+    /** Attach the player to this surface as part of setting the source. */
+    surfaceId?: string;
+}
+export interface VideoProviderConfig {
+    /**
+     * Render the built-in fullscreen host (a Modal that unlocks rotation).
+     * Set false if you render your own fullscreen surface. Default true.
+     */
+    fullscreenHost?: boolean;
+    /**
+     * Render the built-in draggable floating player host. Default true.
+     */
+    floatingHost?: boolean;
+    /** Pause playback when the active surface unmounts. Default false. */
+    pauseOnDetach?: boolean;
+}
+//# sourceMappingURL=video.d.ts.map

package/lib/typescript/src/types/video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../../src/types/video.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEzD,MAAM,MAAM,UAAU,GACpB,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,KAAK,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEzE,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,GACT,QAAQ,GACR,WAAW,GACX,OAAO,GACP,OAAO,CAAC;AAEZ,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,GAAG,EAAE,OAAO,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sEAAsE;IACtE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/lib/typescript/src/utils/Emitter.d.ts

@@ -0,0 +1,15 @@
+export type Listener<P> = (payload: P) => void;
+export interface Subscription {
+    remove(): void;
+}
+/**
+ * Minimal typed event emitter. Listener errors are isolated so one broken
+ * subscriber cannot break playback state propagation.
+ */
+export declare class Emitter<Events extends object> {
+    private listeners;
+    addListener<K extends keyof Events>(event: K, listener: Listener<Events[K]>): Subscription;
+    emit<K extends keyof Events>(event: K, payload: Events[K]): void;
+    removeAll(): void;
+}
+//# sourceMappingURL=Emitter.d.ts.map

package/lib/typescript/src/utils/Emitter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emitter.d.ts","sourceRoot":"","sources":["../../../../src/utils/Emitter.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;AAE/C,MAAM,WAAW,YAAY;IAC3B,MAAM,IAAI,IAAI,CAAC;CAChB;AAED;;;GAGG;AACH,qBAAa,OAAO,CAAC,MAAM,SAAS,MAAM;IACxC,OAAO,CAAC,SAAS,CAAiD;IAElE,WAAW,CAAC,CAAC,SAAS,MAAM,MAAM,EAChC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAC5B,YAAY;IAcf,IAAI,CAAC,CAAC,SAAS,MAAM,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI;IAiBhE,SAAS,IAAI,IAAI;CAGlB"}

package/lib/typescript/src/utils/formatTime.d.ts

@@ -0,0 +1,2 @@
+export declare function formatTime(totalSeconds: number): string;
+//# sourceMappingURL=formatTime.d.ts.map

package/lib/typescript/src/utils/formatTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatTime.d.ts","sourceRoot":"","sources":["../../../../src/utils/formatTime.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAWvD"}

package/package.json

@@ -0,0 +1,154 @@
+{
+  "name": "react-native-video-provider",
+  "version": "0.1.1",
+  "description": "Singleton-engine video library for React Native (one native player, many surfaces)",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "react-native-video-provider-source": "./src/index.ts",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-video-provider-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "test": "jest",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/grdp99/react-native-au-video.git"
+  },
+  "author": "Gurdeep Singh <grdp99@gmail.com> (https://gurdeep.net)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/grdp99/react-native-au-video/issues"
+  },
+  "homepage": "https://github.com/grdp99/react-native-au-video#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "jest": "^29.7.0",
+    "prettier": "^3.8.3",
+    "react": "19.2.3",
+    "react-native": "0.85.0",
+    "react-native-builder-bob": "^0.43.0",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
+  },
+  "dependencies": {
+    "zustand": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.test.ts"
+    ],
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+    }
+  },
+  "codegenConfig": {
+    "name": "AuVideoSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.auvideo"
+    },
+    "ios": {
+      "modulesProvider": {
+        "AuVideo": "AuVideo"
+      },
+      "componentProvider": {
+        "AuVideoSurfaceView": "AuVideoSurfaceView"
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "turbo-module",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.63.0"
+  },
+  "directories": {
+    "doc": "docs",
+    "example": "example"
+  }
+}

package/src/AuVideoSurfaceNativeComponent.ts

@@ -0,0 +1,8 @@
+import { codegenNativeComponent, type ViewProps } from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  /** Unique id this surface registers under in the native surface registry. */
+  surfaceId: string;
+}
+
+export default codegenNativeComponent<NativeProps>('AuVideoSurfaceView');

package/src/NativeAuVideo.ts

@@ -0,0 +1,106 @@
+import {
+  TurboModuleRegistry,
+  type TurboModule,
+  type CodegenTypes,
+} from 'react-native';
+
+export type NativeVideoSource = {
+  id: string;
+  uri: string;
+  /** HTTP headers, string -> string */
+  headers?: CodegenTypes.UnsafeObject;
+  title?: string;
+  artist?: string;
+  artworkUri?: string;
+  /** Seconds. Applied only when the item is (re)loaded. */
+  startPosition?: number;
+};
+
+export type NativeStatusEvent = {
+  /** idle | loading | ready | playing | paused | buffering | ended | error */
+  status: string;
+};
+
+export type NativeLoadEvent = {
+  videoId: string;
+  duration: number;
+  width: number;
+  height: number;
+};
+
+export type NativeProgressEvent = {
+  position: number;
+  duration: number;
+  buffered: number;
+};
+
+export type NativeSeekEvent = {
+  position: number;
+};
+
+export type NativeErrorEvent = {
+  code: string;
+  message: string;
+};
+
+export type NativeSurfaceEvent = {
+  surfaceId: string;
+};
+
+export type NativePipEvent = {
+  active: boolean;
+};
+
+export interface Spec extends TurboModule {
+  /** Idempotent. Creates the singleton native player if needed. */
+  nativeInit(): void;
+
+  /**
+   * Load a source into the engine. If the currently loaded source has the
+   * same `id`, this is a no-op (same-video handoff) and playback continues.
+   */
+  setSource(source: NativeVideoSource, autoplay: boolean): void;
+
+  /** Warm a source without rendering or interrupting current playback. */
+  preload(source: NativeVideoSource): void;
+
+  play(): void;
+  pause(): void;
+  stop(): void;
+  seekTo(position: number): void;
+  setRate(rate: number): void;
+  setVolume(volume: number): void;
+  setMuted(muted: boolean): void;
+  setRepeat(repeat: boolean): void;
+  /** contain | cover | stretch */
+  setResizeMode(mode: string): void;
+
+  /** Re-parent the player view into the surface registered under this id. */
+  attach(surfaceId: string): void;
+  detach(): void;
+
+  /** Unlock rotation + immersive mode. Does not move the player. */
+  enterFullscreen(): void;
+  /** Restore the previous orientation lock. */
+  exitFullscreen(): void;
+
+  enterPip(): Promise<boolean>;
+  exitPip(): void;
+
+  getPosition(): Promise<number>;
+
+  /** Tear down the native player entirely. */
+  releasePlayer(): void;
+
+  readonly onStatusChange: CodegenTypes.EventEmitter<NativeStatusEvent>;
+  readonly onLoad: CodegenTypes.EventEmitter<NativeLoadEvent>;
+  readonly onProgress: CodegenTypes.EventEmitter<NativeProgressEvent>;
+  readonly onSeek: CodegenTypes.EventEmitter<NativeSeekEvent>;
+  readonly onEnd: CodegenTypes.EventEmitter<void>;
+  readonly onError: CodegenTypes.EventEmitter<NativeErrorEvent>;
+  readonly onAttach: CodegenTypes.EventEmitter<NativeSurfaceEvent>;
+  readonly onDetach: CodegenTypes.EventEmitter<NativeSurfaceEvent>;
+  readonly onPipChange: CodegenTypes.EventEmitter<NativePipEvent>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('AuVideo');

package/src/components/FloatingPlayer.tsx

@@ -0,0 +1,130 @@
+import { useRef } from 'react';
+import {
+  Animated,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  Text,
+  useWindowDimensions,
+} from 'react-native';
+import { FLOATING_SURFACE_ID } from '../core/VideoManager';
+import { usePlayback } from '../hooks/usePlayback';
+import { useVideoManager } from '../provider/VideoContext';
+import { VideoSurface } from './VideoSurface';
+
+export interface FloatingPlayerProps {
+  /** Width of the floating window. Default 200. */
+  width?: number;
+}
+
+/**
+ * Built-in draggable in-app floating window, rendered by VideoProvider and
+ * shown by `showFloating()`. Same engine, same position — expand returns
+ * to fullscreen, ✕ hides the window (playback continues; call pause()
+ * in onModeChanged if you want otherwise).
+ */
+export function FloatingPlayer({ width = 200 }: FloatingPlayerProps) {
+  const manager = useVideoManager();
+  const floating = usePlayback((s) => s.floating);
+  const screen = useWindowDimensions();
+
+  const height = (width * 9) / 16;
+  const pan = useRef(
+    new Animated.ValueXY({
+      x: screen.width - width - 12,
+      y: screen.height - height - 96,
+    })
+  ).current;
+
+  const responder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_e, g) =>
+        Math.abs(g.dx) > 4 || Math.abs(g.dy) > 4,
+      onPanResponderGrant: () => {
+        pan.extractOffset();
+      },
+      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], {
+        useNativeDriver: false,
+      }),
+      onPanResponderRelease: () => {
+        pan.flattenOffset();
+      },
+    })
+  ).current;
+
+  if (!floating) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      style={[
+        styles.window,
+        { width, height, transform: pan.getTranslateTransform() },
+      ]}
+      {...responder.panHandlers}
+    >
+      <VideoSurface
+        surfaceId={FLOATING_SURFACE_ID}
+        autoAttach
+        style={styles.surface}
+      />
+      <Pressable
+        style={[styles.button, styles.closeButton]}
+        hitSlop={8}
+        onPress={() => manager.hideFloating()}
+      >
+        <Text style={styles.icon}>✕</Text>
+      </Pressable>
+      <Pressable
+        style={[styles.button, styles.expandButton]}
+        hitSlop={8}
+        onPress={() => {
+          manager.hideFloating();
+          manager.enterFullscreen();
+        }}
+      >
+        <Text style={styles.icon}>⤢</Text>
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  window: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#000',
+    elevation: 8,
+    shadowColor: '#000',
+    shadowOpacity: 0.4,
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 4 },
+  },
+  surface: {
+    flex: 1,
+  },
+  button: {
+    position: 'absolute',
+    top: 4,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    borderRadius: 12,
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeButton: {
+    right: 4,
+  },
+  expandButton: {
+    left: 4,
+  },
+  icon: {
+    color: '#fff',
+    fontSize: 12,
+  },
+});

package/src/components/FullscreenPlayer.tsx

@@ -0,0 +1,64 @@
+import { Modal, StatusBar, StyleSheet, View } from 'react-native';
+import { FULLSCREEN_SURFACE_ID } from '../core/VideoManager';
+import { usePlayback } from '../hooks/usePlayback';
+import { useVideoManager } from '../provider/VideoContext';
+import { VideoControls } from './VideoControls';
+import { VideoSurface } from './VideoSurface';
+
+/**
+ * Built-in fullscreen host, rendered by VideoProvider. While visible,
+ * rotation is unlocked natively (all orientations allowed); on exit the
+ * previous orientation lock is restored and the player re-attaches to the
+ * surface it came from.
+ *
+ * Rendered automatically — you normally never mount this yourself. Apps
+ * that want fullscreen "inside" a navigation screen can instead render a
+ * plain <VideoSurface> there and call attach().
+ */
+export function FullscreenPlayer() {
+  const manager = useVideoManager();
+  const fullscreen = usePlayback((s) => s.fullscreen);
+
+  if (!fullscreen) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible
+      transparent={false}
+      animationType="fade"
+      presentationStyle="fullScreen"
+      statusBarTranslucent
+      navigationBarTranslucent
+      supportedOrientations={[
+        'portrait',
+        'portrait-upside-down',
+        'landscape',
+        'landscape-left',
+        'landscape-right',
+      ]}
+      onRequestClose={() => manager.exitFullscreen()}
+    >
+      <StatusBar hidden />
+      <View style={styles.container}>
+        <VideoSurface
+          surfaceId={FULLSCREEN_SURFACE_ID}
+          autoAttach
+          style={styles.surface}
+        />
+        <VideoControls onClose={() => manager.exitFullscreen()} />
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  surface: {
+    flex: 1,
+  },
+});