Web implementation

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.github/actions/setup-bun/action.yml

@@ -13,7 +13,7 @@ runs:
     - name: Setup Bun
       uses: oven-sh/setup-bun@v2
       with:
-        bun-version: 1.2.19
+        bun-version: 1.3.0
 
     - name: Cache dependencies
       id: bun-cache
@@ -30,4 +30,4 @@ runs:
       working-directory: ${{ inputs.working-directory }}
       run: bun install
       shell: bash
-
+

bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+linker = "hoisted"

config/tsconfig.json

@@ -16,7 +16,7 @@
     "allowUnusedLabels": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "lib": ["ESNext"],
+    "lib": ["ESNext", "dom"],
     "module": "ESNext",
     "moduleResolution": "bundler",
     "noEmit": true,
@@ -33,4 +33,4 @@
     "target": "ESNext",
     "verbatimModuleSyntax": true
   }
-}
+}

package.json

@@ -34,6 +34,7 @@
     "@release-it/conventional-changelog": "^8.0.2",
     "@tsconfig/react-native": "^2.0.2",
     "@types/eslint__js": "^8.42.3",
+    "@types/node": "^24.9.1",
     "@types/react": "^18.2.44",
     "commitlint": "^17.0.2",
     "eslint": "^8.51.0",

packages/react-native-video/package.json

@@ -75,7 +75,9 @@
   },
   "devDependencies": {
     "@expo/config-plugins": "^10.0.2",
+    "@react-native/eslint-config": "^0.77.0",
     "@types/react": "^18.2.44",
+    "@types/react-native-web": "^0.19.2",
     "del-cli": "^5.1.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
@@ -84,10 +86,10 @@
     "prettier": "^3.0.3",
     "react": "18.3.1",
     "react-native": "^0.77.0",
-    "@react-native/eslint-config": "^0.77.0",
     "react-native-builder-bob": "^0.40.0",
     "react-native-nitro-modules": "^0.30.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "video.js": "^8.23.4"
   },
   "peerDependencies": {
     "react": "*",

packages/react-native-video/src/core/VideoPlayer.ts

@@ -1,21 +1,24 @@
-import { Platform } from 'react-native';
-import { NitroModules } from 'react-native-nitro-modules';
-import { type VideoPlayer as VideoPlayerImpl } from '../spec/nitro/VideoPlayer.nitro';
-import type { VideoPlayerSource } from '../spec/nitro/VideoPlayerSource.nitro';
-import type { IgnoreSilentSwitchMode } from './types/IgnoreSilentSwitchMode';
-import type { MixAudioMode } from './types/MixAudioMode';
-import type { TextTrack } from './types/TextTrack';
-import type { NoAutocomplete } from './types/Utils';
-import type { VideoConfig, VideoSource } from './types/VideoConfig';
+import { Platform } from "react-native";
+import { NitroModules } from "react-native-nitro-modules";
+import type { VideoPlayer as VideoPlayerImpl } from "../spec/nitro/VideoPlayer.nitro";
+import type { VideoPlayerSource } from "../spec/nitro/VideoPlayerSource.nitro";
+import type { IgnoreSilentSwitchMode } from "./types/IgnoreSilentSwitchMode";
+import type { MixAudioMode } from "./types/MixAudioMode";
+import type { TextTrack } from "./types/TextTrack";
+import type { NoAutocomplete } from "./types/Utils";
+import type { VideoConfig, VideoSource } from "./types/VideoConfig";
 import {
   tryParseNativeVideoError,
   VideoRuntimeError,
-} from './types/VideoError';
-import type { VideoPlayerBase } from './types/VideoPlayerBase';
-import type { VideoPlayerStatus } from './types/VideoPlayerStatus';
-import { createPlayer } from './utils/playerFactory';
-import { createSource } from './utils/sourceFactory';
-import { VideoPlayerEvents } from './VideoPlayerEvents';
+} from "./types/VideoError";
+import type { VideoPlayerBase } from "./types/VideoPlayerBase";
+import type { VideoPlayerStatus } from "./types/VideoPlayerStatus";
+import { createPlayer } from "./utils/playerFactory";
+import { createSource } from "./utils/sourceFactory";
+import { VideoPlayerEvents } from "./VideoPlayerEvents";
+import type { AudioTrack } from "./types/AudioTrack";
+import type { VideoTrack } from "./types/VideoTrack";
+import type { QualityLevel } from "./types/QualityLevel";
 
 class VideoPlayer extends VideoPlayerEvents implements VideoPlayerBase {
   protected player: VideoPlayerImpl;
@@ -57,7 +60,7 @@ class VideoPlayer extends VideoPlayerEvents implements VideoPlayerBase {
 
     if (
       parsedError instanceof VideoRuntimeError &&
-      this.triggerEvent('onError', parsedError)
+      this.triggerEvent("onError", parsedError)
     ) {
       // We don't throw errors if onError is provided
       return;
@@ -153,9 +156,9 @@ class VideoPlayer extends VideoPlayerEvents implements VideoPlayerBase {
   }
 
   set ignoreSilentSwitchMode(value: IgnoreSilentSwitchMode) {
-    if (__DEV__ && !['ios'].includes(Platform.OS)) {
+    if (__DEV__ && !["ios"].includes(Platform.OS)) {
       console.warn(
-        'ignoreSilentSwitchMode is not supported on this platform, it wont have any effect'
+        "ignoreSilentSwitchMode is not supported on this platform, it wont have any effect",
       );
     }
 
@@ -248,12 +251,16 @@ class VideoPlayer extends VideoPlayerEvents implements VideoPlayerBase {
   }
 
   async replaceSourceAsync(
-    source: VideoSource | VideoConfig | NoAutocomplete<VideoPlayerSource> | null
+    source:
+      | VideoSource
+      | VideoConfig
+      | NoAutocomplete<VideoPlayerSource>
+      | null,
   ): Promise<void> {
     await this.wrapPromise(
       this.player.replaceSourceAsync(
-        source === null ? null : createSource(source)
-      )
+        source === null ? null : createSource(source),
+      ),
     );
 
     NitroModules.updateMemorySize(this.player);
@@ -281,6 +288,43 @@ class VideoPlayer extends VideoPlayerEvents implements VideoPlayerBase {
   get selectedTrack(): TextTrack | undefined {
     return this.player.selectedTrack;
   }
+
+  // TODO: implement this
+  getAvailableAudioTracks(): AudioTrack[] {
+    return [];
+  }
+
+  selectAudioTrack(_: AudioTrack | null): void {}
+
+  get selectedAudioTrack(): AudioTrack | undefined {
+    return undefined;
+  }
+
+  getAvailableVideoTracks(): VideoTrack[] {
+    return [];
+  }
+
+  selectVideoTrack(_: VideoTrack | null): void {}
+
+  get selectedVideoTrack(): VideoTrack | undefined {
+    return undefined;
+  }
+
+  // quality
+
+  getAvailableQualities(): QualityLevel[] {
+    return [];
+  }
+
+  selectQuality(_: QualityLevel | null): void {}
+
+  get currentQuality(): QualityLevel | undefined {
+    return undefined;
+  }
+
+  get autoQualityEnabled(): boolean {
+    return true;
+  }
 }
 
 export { VideoPlayer };