gg

Author: Gurdeep99

README.md

@@ -84,10 +84,16 @@ 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 (IFrame API) with YouTube's own controls and native
-fullscreen/rotation; `usePlayback`, `useVideoEvents`, `play()/pause()/seek()`
-work the same. Native (`type: 'url'`, the default) and YouTube sources are
-interchangeable. Requires `react-native-webview`.
+YouTube plays in a WebView (IFrame API) but uses the **same built-in
+`VideoControls`** (YouTube's own UI is hidden) and the same fullscreen host —
+so it looks and behaves like a native source. `usePlayback`, `useVideoEvents`,
+`play()/pause()/seek()` all work the same. Native (`type: 'url'`, the default)
+and YouTube sources are interchangeable. Requires `react-native-webview`.
+
+> YouTube can't re-parent its WebView the way the native engine re-parents its
+> view, so entering/exiting fullscreen re-creates the WebView (it resumes at
+> the current position). Cross-surface handoff (feed → detail) reloads for
+> YouTube; native video stays seamless.
 
 **3. Open a detail screen with the same video** — because the `id` matches,
 the engine is untouched and playback continues from the exact frame:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-video-provider",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "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",

src/components/FullscreenPlayer.tsx

@@ -13,6 +13,7 @@ import { useVideoManager } from '../provider/VideoContext';
 import type { OrientationLock } from '../types/video';
 import { VideoControls } from './VideoControls';
 import { VideoSurface } from './VideoSurface';
+import { YouTubeView } from './YouTubeView';
 
 type ModalOrientation =
   | 'portrait'
@@ -59,8 +60,7 @@ export function FullscreenPlayer() {
   const manager = useVideoManager();
   const fullscreen = usePlayback((s) => s.fullscreen);
   const fullscreenLock = usePlayback((s) => s.fullscreenLock);
-  // YouTube handles its own fullscreen inside the WebView (native controls).
-  const isYouTube = usePlayback((s) => s.currentVideo?.type === 'youtube');
+  const currentVideo = usePlayback((s) => s.currentVideo);
 
   // Android hardware back exits fullscreen (the iOS Modal handles its own).
   useEffect(() => {
@@ -74,18 +74,32 @@ export function FullscreenPlayer() {
     return () => sub.remove();
   }, [manager, fullscreen]);
 
-  if (!fullscreen || isYouTube) {
+  if (!fullscreen) {
     return null;
   }
 
+  const isYouTube = currentVideo?.type === 'youtube';
+  const media = isYouTube ? (
+    <YouTubeView
+      videoId={currentVideo!.uri}
+      autoplay
+      muted={manager.store.getState().muted}
+      repeat={manager.store.getState().repeat}
+      startSeconds={manager.store.getState().position}
+      style={styles.surface}
+    />
+  ) : (
+    <VideoSurface
+      surfaceId={FULLSCREEN_SURFACE_ID}
+      autoAttach
+      style={styles.surface}
+    />
+  );
+
   const content = (
     <>
       <StatusBar hidden />
-      <VideoSurface
-        surfaceId={FULLSCREEN_SURFACE_ID}
-        autoAttach
-        style={styles.surface}
-      />
+      {media}
       <VideoControls onClose={() => manager.exitFullscreen()} />
     </>
   );

src/components/VideoPlayer.tsx

@@ -152,6 +152,8 @@ export const VideoPlayer = forwardRef<VideoManager, VideoPlayerProps>(
     // Poster is shown only during the initial load — `loading` is true from
     // setSource until onLoad, and stays false for mid-stream buffering.
     const loading = usePlayback((s) => s.loading);
+    // For youtube: the inline WebView hands off to the fullscreen host.
+    const fullscreen = usePlayback((s) => s.fullscreen);
 
     // Read the latest source without retriggering effects on every render
     // (source is usually a fresh object literal each render).
@@ -296,19 +298,27 @@ export const VideoPlayer = forwardRef<VideoManager, VideoPlayerProps>(
       onError,
     });
 
-    // YouTube plays in a WebView with its own player UI (controls + native
-    // fullscreen/rotation); it can't share the native surface or overlay
-    // controls.
+    // YouTube plays in a WebView with our own <VideoControls> overlay
+    // (controls: 0 in the iframe). It can't re-parent its WebView, so
+    // fullscreen hands off to the fullscreen host: the inline view unmounts
+    // while fullscreen (avoiding double audio), resuming at the current
+    // position on either transition.
     if (source.type === 'youtube') {
       return (
         <View style={[styles.container, style]} {...rest}>
-          <YouTubeView
-            videoId={source.uri}
-            autoplay={autoplay}
-            muted={muted}
-            repeat={repeat}
-            style={styles.surface}
-          />
+          {!fullscreen ? (
+            <>
+              <YouTubeView
+                videoId={source.uri}
+                autoplay={autoplay}
+                muted={muted}
+                repeat={repeat}
+                startSeconds={manager.store.getState().position}
+                style={styles.surface}
+              />
+              {controls ? <VideoControls /> : null}
+            </>
+          ) : null}
           {thumbnail && loading ? (
             <View style={styles.surface} pointerEvents="none">
               {thumbnail()}

src/components/YouTubeView.tsx

@@ -23,6 +23,8 @@ export interface YouTubeViewProps extends ViewProps {
   autoplay?: boolean;
   muted?: boolean;
   repeat?: boolean;
+  /** Start position in seconds (captured at mount — used to resume). */
+  startSeconds?: number;
 }
 
 /**
@@ -37,16 +39,20 @@ export function YouTubeView({
   autoplay = true,
   muted = false,
   repeat = false,
+  startSeconds = 0,
   style,
   ...rest
 }: YouTubeViewProps) {
   const manager = useVideoManager();
   const ref = useRef<{ injectJavaScript: (js: string) => void } | null>(null);
   const repeatRef = useRef(repeat);
   repeatRef.current = repeat;
+  // Captured once at mount so a live position prop can't rebuild the HTML
+  // (which would reload the WebView).
+  const startRef = useRef(Math.floor(startSeconds));
 
   const html = useMemo(
-    () => buildHtml(videoId, autoplay, muted),
+    () => buildHtml(videoId, autoplay, muted, startRef.current),
     [videoId, autoplay, muted]
   );
 
@@ -133,26 +139,43 @@ export function YouTubeView({
     <View style={[styles.container, style]} {...rest}>
       <WebView
         ref={ref}
-        source={{ html }}
+        // baseUrl gives the page a real https origin — the YouTube IFrame API
+        // rejects about:blank (null origin) with a config error.
+        source={{ html, baseUrl: 'https://www.youtube.com' }}
         style={styles.web}
         originWhitelist={['*']}
         javaScriptEnabled
         domStorageEnabled
         allowsInlineMediaPlayback
-        allowsFullscreenVideo
+        allowsFullscreenVideo={false}
         mediaPlaybackRequiresUserAction={false}
+        mixedContentMode="always"
+        androidLayerType="hardware"
+        setSupportMultipleWindows={false}
+        scalesPageToFit={false}
+        scrollEnabled={false}
+        bounces={false}
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
         onMessage={onMessage}
-        // The IFrame API must load over http(s), not about:blank.
-        baseUrl="https://www.youtube.com"
       />
     </View>
   );
 }
 
-function buildHtml(videoId: string, autoplay: boolean, muted: boolean): string {
+function buildHtml(
+  videoId: string,
+  autoplay: boolean,
+  muted: boolean,
+  start: number
+): string {
+  // controls:0 → hide YouTube's own UI; the app draws <VideoControls>.
+  // origin/enablejsapi are required for the IFrame API to accept commands.
   return `<!DOCTYPE html><html><head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-<style>html,body{margin:0;padding:0;background:#000;height:100%;overflow:hidden}#p{width:100%;height:100%}</style>
+<style>html,body{margin:0;padding:0;background:#000;height:100%;overflow:hidden}#p{width:100%;height:100%}
+/* Swallow taps on the iframe so <VideoControls> gestures win. */
+#p iframe{pointer-events:none}</style>
 </head><body>
 <div id="p"></div>
 <script>
@@ -163,7 +186,8 @@ document.body.appendChild(tag);
 function onYouTubeIframeAPIReady(){
   player=new YT.Player('p',{
     videoId:'${videoId}',
-    playerVars:{autoplay:${autoplay ? 1 : 0},controls:1,playsinline:1,rel:0,modestbranding:1,fs:1,mute:${muted ? 1 : 0}},
+    host:'https://www.youtube.com',
+    playerVars:{autoplay:${autoplay ? 1 : 0},controls:0,playsinline:1,rel:0,modestbranding:1,fs:0,disablekb:1,iv_load_policy:3,enablejsapi:1,origin:'https://www.youtube.com',start:${start},mute:${muted ? 1 : 0}},
     events:{
       onReady:function(){post({type:'ready',duration:player.getDuration()});},
       onStateChange:function(e){post({type:'state',state:e.data});},