fix ios

Author: Gurdeep99

README.md

@@ -109,8 +109,19 @@ const { enter, toggle } = useFullscreen();
 enter('landscape');
 ```
 
-Opt in to YouTube-style auto fullscreen with `autoFullscreenOnRotate` (off by
-default): physically rotating the device to landscape enters fullscreen and
+Fullscreen **locks** orientation — it never follows the device sensor.
+Tapping the fullscreen button rotates to landscape (default) and it stays put
+however you hold the phone; tapping exit returns to portrait. To also stop the
+*inline* video from sensor-rotating with the rest of the app, set
+`lockPortrait` on the provider — the app stays portrait and only fullscreen
+rotates to landscape:
+
+```tsx
+<VideoProvider config={{ lockPortrait: true }}>
+```
+
+Opt in to YouTube-style sensor auto fullscreen with `autoFullscreenOnRotate`
+(off by default): physically rotating to landscape enters fullscreen and
 rotating back exits. Requires the app to allow landscape at the OS level:
 
 ```tsx

docs/API.md

@@ -17,6 +17,7 @@ built-in fullscreen + floating hosts above the app.
 | `fullscreenHost` | `true` | Render the built-in fullscreen host (in-window overlay) |
 | `floatingHost` | `true` | Render the built-in draggable floating host |
 | `pauseOnDetach` | `false` | Pause when the active surface unmounts (default keeps audio running) |
+| `lockPortrait` | `false` | Lock the app portrait so the video never sensor-rotates inline — only fullscreen rotates to landscape (on tap). iOS needs the AppDelegate forwarding |
 
 ### `<VideoSurface surfaceId autoAttach? …ViewProps>`
 A dumb mount point. Registers its native view under `surfaceId`; the engine
@@ -99,14 +100,16 @@ floating is a draggable 16:9 window with close/expand buttons.
 Docked bar (thumbnail surface + title + play/pause + close). Attach with
 `attach(surfaceId)` (default `"__au_mini__"`).
 
-### `<VideoControls doubleTapSeek? hideAfter? showFullscreenButton? live? liveIcon? onClose? />`
+### `<VideoControls doubleTapSeek? hideAfter? showFullscreenButton? onClose? />`
 Minimal chrome: play/pause, seek bar, times, mute, fullscreen toggle,
 tap-to-show, double-tap seek. Build your own from the hooks if you need
 custom design.
 
-Pass `live` for a live stream: the seek bar and times are hidden and mute
-moves to the bottom-left, leaving mute + fullscreen. `liveIcon: () => ReactNode`
-renders a live indicator in the bar while `live` (e.g. a Lottie badge).
+Live state comes from the store (set via `VideoPlayer`'s `live` / `liveIcon`,
+or `useVideo().setLive(live, liveIcon)`), so the same controls show it inline
+and in the fullscreen host. When live: the seek bar/times are hidden (mute +
+fullscreen remain) and the `liveIcon` badge sticks to the **top-right, always
+visible** — it does not auto-hide with the rest of the controls.
 
 ### `<GestureOverlay onSingleTap? onDoubleTapLeft? onDoubleTapRight? onLongPress?>`
 Tap-gesture layer used by VideoControls, exported as a building block.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-video-provider",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "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/__tests__/VideoManager.test.ts

@@ -176,10 +176,12 @@ describe('VideoManager', () => {
       );
     });
 
-    it('carries a standing lock through an unscoped fullscreen unchanged', () => {
+    it('defaults to landscape even with a standing portrait lock, and restores it on exit', () => {
+      // The `lockPortrait` use case: app is portrait inline, fullscreen still
+      // rotates to landscape; exiting returns to the portrait lock.
       manager.setOrientation('portrait');
       manager.enterFullscreen(); // no scoped override
-      expect(native.enterFullscreen).toHaveBeenLastCalledWith('portrait');
+      expect(native.enterFullscreen).toHaveBeenLastCalledWith('landscape');
 
       manager.exitFullscreen();
       expect(native.exitFullscreen).toHaveBeenLastCalledWith('portrait');
@@ -206,6 +208,19 @@ describe('VideoManager', () => {
       manager.enterFullscreen('auto');
       expect(native.enterFullscreen).toHaveBeenLastCalledWith('auto');
     });
+
+    it('lockPortrait config locks the app portrait on init', () => {
+      manager.destroy();
+      jest.clearAllMocks();
+      manager.init({ lockPortrait: true });
+      expect(native.setOrientation).toHaveBeenLastCalledWith('portrait');
+      expect(manager.store.getState().orientationLock).toBe('portrait');
+
+      // Reset so the leaked config doesn't affect later tests (init merges
+      // config and destroy() keeps it).
+      manager.destroy();
+      manager.init({ lockPortrait: false });
+    });
   });
 
   describe('floating', () => {

src/components/FullscreenPlayer.tsx

@@ -1,34 +1,68 @@
 import { useEffect } from 'react';
-import { BackHandler, StatusBar, StyleSheet, View } from 'react-native';
+import {
+  BackHandler,
+  Modal,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  View,
+} from 'react-native';
 import { FULLSCREEN_SURFACE_ID } from '../core/VideoManager';
 import { usePlayback } from '../hooks/usePlayback';
 import { useVideoManager } from '../provider/VideoContext';
+import type { OrientationLock } from '../types/video';
 import { VideoControls } from './VideoControls';
 import { VideoSurface } from './VideoSurface';
 
+type ModalOrientation =
+  | 'portrait'
+  | 'portrait-upside-down'
+  | 'landscape'
+  | 'landscape-left'
+  | 'landscape-right';
+
+const ALL_ORIENTATIONS: ModalOrientation[] = [
+  'portrait',
+  'portrait-upside-down',
+  'landscape',
+  'landscape-left',
+  'landscape-right',
+];
+
+/** Which orientations the iOS Modal may present — this is what locks it. */
+function modalOrientations(lock: OrientationLock): ModalOrientation[] {
+  switch (lock) {
+    case 'portrait':
+    case 'inverted-portrait':
+      return ['portrait', 'portrait-upside-down'];
+    case 'landscape':
+    case 'inverted-landscape':
+      return ['landscape', 'landscape-left', 'landscape-right'];
+    default:
+      return ALL_ORIENTATIONS; // 'auto' → follow the sensor
+  }
+}
+
 /**
- * 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.
- *
- * Implemented as an in-window absolute overlay (not a Modal). A Modal is a
- * separate Android window, and re-parenting the player's TextureView into it
- * — then rotating — drops the video surface (black screen, audio only) for
- * live streams. The floating host already proves in-window re-parenting is
- * reliable, so fullscreen uses the same approach.
+ * Built-in fullscreen host, rendered by VideoProvider.
  *
- * 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().
+ * Platform split:
+ * - iOS uses a `Modal` whose `supportedOrientations` are derived from the
+ *   locked fullscreen orientation. That's how iOS rotates a fullscreen video
+ *   (and locks out the portrait sensor) WITHOUT app-wide landscape config.
+ * - Android uses an in-window absolute overlay (a Modal is a separate window,
+ *   and re-parenting the player's TextureView into it drops the video surface
+ *   — black screen, audio only — for live streams). Rotation is driven by the
+ *   native `requestedOrientation` lock.
  */
 export function FullscreenPlayer() {
   const manager = useVideoManager();
   const fullscreen = usePlayback((s) => s.fullscreen);
+  const fullscreenLock = usePlayback((s) => s.fullscreenLock);
 
-  // Android hardware back exits fullscreen (Modal used to do this for us).
+  // Android hardware back exits fullscreen (the iOS Modal handles its own).
   useEffect(() => {
-    if (!fullscreen) {
+    if (!fullscreen || Platform.OS !== 'android') {
       return;
     }
     const sub = BackHandler.addEventListener('hardwareBackPress', () => {
@@ -42,20 +76,42 @@ export function FullscreenPlayer() {
     return null;
   }
 
-  return (
-    <View style={styles.overlay}>
+  const content = (
+    <>
       <StatusBar hidden />
       <VideoSurface
         surfaceId={FULLSCREEN_SURFACE_ID}
         autoAttach
         style={styles.surface}
       />
       <VideoControls onClose={() => manager.exitFullscreen()} />
-    </View>
+    </>
   );
+
+  if (Platform.OS === 'ios') {
+    return (
+      <Modal
+        visible
+        transparent={false}
+        animationType="fade"
+        presentationStyle="fullScreen"
+        statusBarTranslucent
+        supportedOrientations={modalOrientations(fullscreenLock)}
+        onRequestClose={() => manager.exitFullscreen()}
+      >
+        <View style={styles.container}>{content}</View>
+      </Modal>
+    );
+  }
+
+  return <View style={styles.overlay}>{content}</View>;
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
   overlay: {
     position: 'absolute',
     top: 0,

src/components/VideoControls.tsx

@@ -1,10 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Pressable,
   StyleSheet,
@@ -27,31 +21,21 @@ export interface VideoControlsProps {
   hideAfter?: number;
   /** Show the fullscreen toggle button. Default true. */
   showFullscreenButton?: boolean;
-  /**
-   * Mark this as a live stream: hides the seek bar/times and moves mute to
-   * the bottom-left. Default false.
-   */
-  live?: boolean;
-  /**
-   * Render a live indicator (e.g. a Lottie animation or a "LIVE" badge),
-   * shown in the control bar only while `live`.
-   */
-  liveIcon?: () => ReactNode;
   /** Called by the close (✕) button; button hidden when omitted. */
   onClose?: () => void;
 }
 
 /**
  * Minimal built-in chrome: play/pause, seek bar, time, mute and fullscreen
- * toggles, with tap-to-show / double-tap-to-seek gestures. Apps wanting a
- * custom design can ignore this and build on usePlayback()/useVideo().
+ * toggles, with tap-to-show / double-tap-to-seek gestures. `live` and the
+ * live badge come from the store (set via VideoPlayer's `live` / `liveIcon`),
+ * so they show inline and in the fullscreen host alike. Apps wanting a custom
+ * design can ignore this and build on usePlayback()/useVideo().
  */
 export function VideoControls({
   doubleTapSeek = 10,
   hideAfter = 3000,
   showFullscreenButton = true,
-  live = false,
-  liveIcon,
   onClose,
 }: VideoControlsProps) {
   const manager = useVideoManager();
@@ -61,6 +45,8 @@ export function VideoControls({
   const duration = usePlayback((s) => s.duration);
   const muted = usePlayback((s) => s.muted);
   const fullscreen = usePlayback((s) => s.fullscreen);
+  const live = usePlayback((s) => s.live);
+  const liveIcon = usePlayback((s) => s.liveIcon);
 
   const [visible, setVisible] = useState(true);
   const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -138,6 +124,13 @@ export function VideoControls({
         onDoubleTapLeft={() => manager.seekBy(-doubleTapSeek)}
         onDoubleTapRight={() => manager.seekBy(doubleTapSeek)}
       />
+      {/* Live badge: stuck to the top-right, always visible while live —
+          it does NOT hide with the auto-hiding controls. */}
+      {live && liveIcon ? (
+        <View style={styles.liveBadge} pointerEvents="none">
+          {liveIcon()}
+        </View>
+      ) : null}
       {visible ? (
         <View style={styles.chrome} pointerEvents="box-none">
           <View style={styles.topRow}>
@@ -171,7 +164,6 @@ export function VideoControls({
           <View style={styles.bottomRow}>
             {live ? (
               <>
-                {liveIcon ? liveIcon() : null}
                 {muteButton}
                 <View style={styles.spacer} />
                 {fullscreenButton}
@@ -210,6 +202,11 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0,0,0,0.35)',
     justifyContent: 'space-between',
   },
+  liveBadge: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+  },
   topRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',

src/components/VideoPlayer.tsx

@@ -195,6 +195,13 @@ export const VideoPlayer = forwardRef<VideoManager, VideoPlayerProps>(
       }
     }, [manager, muted]);
 
+    useEffect(() => {
+      // Publish live state + badge to the store so the built-in fullscreen
+      // host (which renders its own controls) shows them too.
+      manager.setLive(live, liveIcon ?? null);
+      return () => manager.setLive(false);
+    }, [manager, live, liveIcon]);
+
     useEffect(() => {
       if (!orientation || orientation === 'auto') {
         return;
@@ -296,7 +303,7 @@ export const VideoPlayer = forwardRef<VideoManager, VideoPlayerProps>(
             {thumbnail()}
           </View>
         ) : null}
-        {controls ? <VideoControls live={live} liveIcon={liveIcon} /> : null}
+        {controls ? <VideoControls /> : null}
       </View>
     );
   }