Fix: Creating WebView Native Reference sharing like Exo Player in android and ios

Author: Gurdeep99

AGENTS.md

@@ -366,6 +366,47 @@ videoId changes
 
 replace media source.
 
+=========================================================
+YOUTUBE (DUAL ENGINE)  — IMPLEMENTED
+=========================================================
+
+The core supports TWO playback engines behind ONE surface registry:
+
+• ExoPlayer / AVPlayer   → source.type = "url"  (default; streams/files)
+• Native WebView         → source.type = "youtube"  (uri = YouTube video id)
+
+Do NOT use react-native-video OR react-native-webview OR any JS/third-party
+YouTube library for this. The YouTube engine is a NATIVE, singleton,
+re-parentable view:
+
+• Android → android.webkit.WebView
+• iOS     → WKWebView
+
+Same rules as the native player:
+
+• Created once, lives for the app lifetime.
+• Re-parented between surfaces (inline ↔ fullscreen ↔ floating) by moving the
+  WHOLE native view — never reloaded. The web page / playing video moves with
+  it, so switching to fullscreen keeps the exact same WebView reference and
+  playback position (no reload, no restart, no re-buffer).
+• attach()/detach() move whichever engine's view is active.
+
+Loading:
+
+• Runs the YouTube IFrame Player API with controls:0 (YouTube's own UI is
+  hidden — the library's <VideoControls> is used, same as native video).
+• Loaded with a youtube.com origin/referrer so referrer-restricted embeds
+  play (avoids the embed "configuration error" / Error 153).
+
+Bridge:
+
+• Native captures the IFrame API postMessage events and emits the SAME core
+  events (onStatusChange / onLoad / onProgress / onEnd / onError).
+• Commands (play/pause/seek/rate/volume/mute) are forwarded into the player
+  via evaluateJavascript / evaluateJavaScript.
+• So usePlayback, useVideoEvents and the useVideo() command API work
+  identically for url and youtube — the two source types are interchangeable.
+
 =========================================================
 PRELOAD
 =========================================================

AuVideo.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
 
   s.platforms    = { :ios => min_ios_version_supported }
-  s.source       = { :git => "https://github.com/gurdeep99/react-native-au-video.git", :tag => "#{s.version}" }
+  s.source       = { :git => "https://github.com/gurdeep99/react-native-video-provider.git", :tag => "#{s.version}" }
 
   s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
   s.private_header_files = "ios/**/*.h"

CONTRIBUTING.md

@@ -25,9 +25,9 @@ The [example app](/example/) demonstrates usage of the library. You need to run
 
 It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app.
 
-If you want to use Android Studio or Xcode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/AuVideoExample.xcworkspace` in Xcode and find the source files at `Pods > Development Pods > react-native-au-video`.
+If you want to use Android Studio or Xcode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/AuVideoExample.xcworkspace` in Xcode and find the source files at `Pods > Development Pods > react-native-video-provider`.
 
-To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `react-native-au-video` under `Android`.
+To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `react-native-video-provider` under `Android`.
 
 You can use various commands from the root directory to work with the project.
 

README.md

@@ -20,6 +20,8 @@ Feed ──▶ Detail ──▶ Fullscreen (rotation unlocked) ──▶ Floatin
   the engine; the player just re-parents to the new surface
 - 📱 **Single-engine feed** — `VideoFeed`, a TikTok/Reels-style list where
   only the scrolled-into-focus video plays, on one player, flat memory
+- ▶️ **YouTube built in** — `type: 'youtube'`; a second native, re-parentable
+  WebView engine with the same controls, fullscreen and handoff (no extra dep)
 - 📺 **Fullscreen** — built-in host that locks landscape (no accidental
   sensor rotation) and restores the previous orientation on exit
 - 🧭 **Orientation control** — force portrait/landscape (+ inverted) per
@@ -42,9 +44,8 @@ cd ios && pod install
 ```
 
 `react-native-svg` is a peer dependency (used by the built-in control icons).
-For YouTube sources add **`react-native-webview`**
-(`npm install react-native-webview`) — an optional peer dependency, only
-needed if you use `type: 'youtube'`.
+YouTube (`type: 'youtube'`) needs **no extra dependency** — it runs on a native
+WebView (Android `WebView` / iOS `WKWebView`) built into the library.
 
 Requires the New Architecture. Works on React Native **0.79+** — the
 TurboModule spec uses direct codegen-type imports so it parses on 0.79's
@@ -85,17 +86,15 @@ set `type: 'youtube'` and put the YouTube **video id** in `uri`:
 <VideoPlayer source={{ id: 'y1', uri: 'dQw4w9WgXcQ', type: 'youtube' }} style={{ aspectRatio: 16 / 9 }} />
 ```
 
-YouTube plays in a WebView (embed URL + `Referer` header — the config that
-reliably plays referrer-restricted videos) using **YouTube's own controls and
-native fullscreen**. Playback state is still bridged to `usePlayback` /
-`useVideoEvents`, and `play()/pause()/seek()` are forwarded to the player, so
-it fits the same API. Native (`type: 'url'`, the default) and YouTube sources
-are interchangeable. Requires `react-native-webview`.
-
-> YouTube uses its own player UI (not the built-in `VideoControls`) and its own
-> fullscreen — a WebView can't be re-parented like the native engine, and the
-> embed's referrer restriction requires loading it directly. Native video
-> keeps the custom controls, seamless handoff and library fullscreen.
+YouTube runs on a **native, re-parentable WebView** that is a second engine
+inside the singleton core — moved between surfaces exactly like the native
+player view. So YouTube gets the **same built-in `VideoControls`, the same
+fullscreen host, and seamless inline→fullscreen handoff with no reload**, just
+like native video. It loads the embed with a `youtube.com` referrer (which is
+what plays referrer-restricted videos) and hides YouTube's own UI; state and
+commands bridge through the IFrame API to the standard `usePlayback` /
+`useVideoEvents` / `play()/pause()/seek()`. `type: 'url'` (default) and
+`type: 'youtube'` are fully interchangeable.
 
 **3. Open a detail screen with the same video** — because the `id` matches,
 the engine is untouched and playback continues from the exact frame:

android/src/main/java/com/auvideo/AuVideoModule.kt

@@ -73,6 +73,7 @@ class AuVideoModule(reactContext: ReactApplicationContext) :
     return SourceSpec(
       id = id,
       uri = uri,
+      type = map.getString("type") ?: "url",
       headers = headers,
       title = map.getString("title"),
       artist = map.getString("artist"),