www

Author: Gurdeep99

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-video-provider",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "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/VideoControls.tsx

@@ -124,13 +124,6 @@ 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}>
@@ -188,6 +181,14 @@ export function VideoControls({
           </View>
         </View>
       ) : null}
+      {/* Live badge: top-left, above the controls, always visible while live —
+          it does NOT hide with the auto-hiding chrome (rendered last + high
+          zIndex so it stays on top). */}
+      {live && liveIcon ? (
+        <View style={styles.liveBadge} pointerEvents="none">
+          {liveIcon()}
+        </View>
+      ) : null}
     </View>
   );
 }
@@ -204,8 +205,10 @@ const styles = StyleSheet.create({
   },
   liveBadge: {
     position: 'absolute',
-    top: 12,
-    right: 12,
+    top: 10,
+    left: 10,
+    zIndex: 10,
+    elevation: 10,
   },
   topRow: {
     flexDirection: 'row',

src/core/VideoManager.ts

@@ -403,17 +403,20 @@ export class VideoManager {
     if (this.store.getState().fullscreen) {
       return;
     }
-    this.set({ fullscreen: true, floating: false });
-    this.setMode('fullscreen');
     // `enter` is often passed straight to onPress, so the argument may be a
     // press event — only honor real orientation values.
     const explicit = ORIENTATION_LOCKS.includes(orientation as OrientationLock)
       ? (orientation as OrientationLock)
       : undefined;
     // Explicit arg (incl. 'auto' for sensor-follow) > prop > locked landscape.
     const lock = explicit ?? this.fullscreenOrientationDefault ?? 'landscape';
-    // Stored so the iOS fullscreen host can lock the Modal's supportedOrientations.
-    this.set({ fullscreenLock: lock });
+    // CRITICAL: set `fullscreen` and `fullscreenLock` in ONE update so the iOS
+    // fullscreen Modal mounts with the right `supportedOrientations` from the
+    // first render. If the Modal mounted with the default first and the lock
+    // arrived a render later, iOS would present it portrait and never
+    // re-rotate an already-presented modal.
+    this.set({ fullscreen: true, floating: false, fullscreenLock: lock });
+    this.setMode('fullscreen');
     NativeAuVideo.enterFullscreen(lock);
     this.events.emit('onEnterFullscreen', undefined);
   }