react-native-video-provider 0.2.1 → 0.2.2

package/src/components/SvgIcons.tsx

@@ -0,0 +1,169 @@
+import Svg, { G, Path } from 'react-native-svg';
+
+const SvgIcons = ({
+  icon,
+  type,
+  fill,
+  size = 24,
+}: {
+  icon: string;
+  type?: string;
+  fill?: string;
+  size?: number;
+}) => {
+  switch (icon) {
+    case 'fullScreen':
+      return type === 'full' ? (
+        <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+          <G id="SVGRepo_bgCarrier" strokeWidth={0} />
+          <G
+            id="SVGRepo_tracerCarrier"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <G id="SVGRepo_iconCarrier">
+            <Path
+              d="M4 1.5C2.61929 1.5 1.5 2.61929 1.5 4V8.5C1.5 9.05228 1.94772 9.5 2.5 9.5H3.5C4.05228 9.5 4.5 9.05228 4.5 8.5V4.5H8.5C9.05228 4.5 9.5 4.05228 9.5 3.5V2.5C9.5 1.94772 9.05228 1.5 8.5 1.5H4Z"
+              fill={fill || '#fff'}
+            />
+            <Path
+              d="M20 1.5C21.3807 1.5 22.5 2.61929 22.5 4V8.5C22.5 9.05228 22.0523 9.5 21.5 9.5H20.5C19.9477 9.5 19.5 9.05228 19.5 8.5V4.5H15.5C14.9477 4.5 14.5 4.05228 14.5 3.5V2.5C14.5 1.94772 14.9477 1.5 15.5 1.5H20Z"
+              fill={fill || '#fff'}
+            />
+            <Path
+              d="M20 22.5C21.3807 22.5 22.5 21.3807 22.5 20V15.5C22.5 14.9477 22.0523 14.5 21.5 14.5H20.5C19.9477 14.5 19.5 14.9477 19.5 15.5V19.5H15.5C14.9477 19.5 14.5 19.9477 14.5 20.5V21.5C14.5 22.0523 14.9477 22.5 15.5 22.5H20Z"
+              fill={fill || '#fff'}
+            />
+            <Path
+              d="M1.5 20C1.5 21.3807 2.61929 22.5 4 22.5H8.5C9.05228 22.5 9.5 22.0523 9.5 21.5V20.5C9.5 19.9477 9.05228 19.5 8.5 19.5H4.5V15.5C4.5 14.9477 4.05228 14.5 3.5 14.5H2.5C1.94772 14.5 1.5 14.9477 1.5 15.5V20Z"
+              fill={fill || '#fff'}
+            />
+          </G>
+        </Svg>
+      ) : (
+        <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+          <G id="SVGRepo_bgCarrier" strokeWidth={0} />
+          <G
+            id="SVGRepo_tracerCarrier"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <G id="SVGRepo_iconCarrier">
+            <Path
+              d="M7 9.5C8.38071 9.5 9.5 8.38071 9.5 7V2.5C9.5 1.94772 9.05228 1.5 8.5 1.5H7.5C6.94772 1.5 6.5 1.94772 6.5 2.5V6.5H2.5C1.94772 6.5 1.5 6.94772 1.5 7.5V8.5C1.5 9.05228 1.94772 9.5 2.5 9.5H7Z"
+              fill={fill || '#fff'}
+            />
+            <Path
+              d="M17 9.5C15.6193 9.5 14.5 8.38071 14.5 7V2.5C14.5 1.94772 14.9477 1.5 15.5 1.5H16.5C17.0523 1.5 17.5 1.94772 17.5 2.5V6.5H21.5C22.0523 6.5 22.5 6.94772 22.5 7.5V8.5C22.5 9.05228 22.0523 9.5 21.5 9.5H17Z"
+              fill={fill || '#fff'}
+            />
+            <Path
+              d="M17 14.5C15.6193 14.5 14.5 15.6193 14.5 17V21.5C14.5 22.0523 14.9477 22.5 15.5 22.5H16.5C17.0523 22.5 17.5 22.0523 17.5 21.5V17.5H21.5C22.0523 17.5 22.5 17.0523 22.5 16.5V15.5C22.5 14.9477 22.0523 14.5 21.5 14.5H17Z"
+              fill={fill || '#fff'}
+            />
+            <Path
+              d="M9.5 17C9.5 15.6193 8.38071 14.5 7 14.5H2.5C1.94772 14.5 1.5 14.9477 1.5 15.5V16.5C1.5 17.0523 1.94772 17.5 2.5 17.5H6.5V21.5C6.5 22.0523 6.94772 22.5 7.5 22.5H8.5C9.05228 22.5 9.5 22.0523 9.5 21.5V17Z"
+              fill={fill || '#fff'}
+            />
+          </G>
+        </Svg>
+      );
+
+    case 'muteUnmute':
+      return type === 'mute' ? (
+        <Svg
+          fill={fill || '#000000'}
+          viewBox="0 0 24 24"
+          width={size || 24}
+          height={size || 24}
+        >
+          <G id="SVGRepo_bgCarrier" strokeWidth={0} />
+          <G
+            id="SVGRepo_tracerCarrier"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <G id="SVGRepo_iconCarrier">
+            <Path
+              fillRule="evenodd"
+              d="M11.553 3.064A.75.75 0 0112 3.75v16.5a.75.75 0 01-1.255.555L5.46 16H2.75A1.75 1.75 0 011 14.25v-4.5C1 8.784 1.784 8 2.75 8h2.71l5.285-4.805a.75.75 0 01.808-.13zM10.5 5.445l-4.245 3.86a.75.75 0 01-.505.195h-3a.25.25 0 00-.25.25v4.5c0 .138.112.25.25.25h3a.75.75 0 01.505.195l4.245 3.86V5.445z"
+            />
+            <Path d="M18.718 4.222a.75.75 0 011.06 0c4.296 4.296 4.296 11.26 0 15.556a.75.75 0 01-1.06-1.06 9.5 9.5 0 000-13.436.75.75 0 010-1.06z" />
+            <Path d="M16.243 7.757a.75.75 0 10-1.061 1.061 4.5 4.5 0 010 6.364.75.75 0 001.06 1.06 6 6 0 000-8.485z" />
+          </G>
+        </Svg>
+      ) : (
+        <Svg
+          fill={fill || '#000000'}
+          viewBox="0 0 16 16"
+          width={size || 16}
+          height={size || 16}
+        >
+          <G id="SVGRepo_bgCarrier" strokeWidth={0} />
+          <G
+            id="SVGRepo_tracerCarrier"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <G id="SVGRepo_iconCarrier">
+            <Path
+              d="M14.266 1.264l-13 13 .47.472 3.239-3.238L8 14.666V8.473l2.312-2.313c.467.542.737 1.227.737 1.947 0 .796-.316 1.559-.88 2.122l-.353.353.707.707.354-.353a4 4 0 0 0 1.172-2.829c0-.985-.377-1.923-1.03-2.654l1.422-1.422a5.994 5.994 0 0 1 1.608 4.076 5.999 5.999 0 0 1-1.758 4.243l-.354.353.707.707.354-.353a7 7 0 0 0 2.05-4.95 6.994 6.994 0 0 0-1.9-4.783l1.588-1.588zM8 1.334L4.5 5H1.871S1 5.894 1 8.002C1 10.11 1.871 11 1.871 11h1.422L8 6.293z"
+              opacity={1}
+              fill={fill || 'white'}
+            />
+          </G>
+        </Svg>
+      );
+
+    case 'playPause':
+      return type === 'play' ? (
+        <Svg
+          viewBox="0 0 24 24"
+          fill="none"
+          width={size || 24}
+          height={size || 24}
+        >
+          <G id="SVGRepo_bgCarrier" strokeWidth={0} />
+          <G
+            id="SVGRepo_tracerCarrier"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <G id="SVGRepo_iconCarrier">
+            <Path
+              d="M21.4086 9.35258C23.5305 10.5065 23.5305 13.4935 21.4086 14.6474L8.59662 21.6145C6.53435 22.736 4 21.2763 4 18.9671L4 5.0329C4 2.72368 6.53435 1.26402 8.59661 2.38548L21.4086 9.35258Z"
+              fill={fill || '#1C274C'}
+            />
+          </G>
+        </Svg>
+      ) : (
+        <Svg
+          viewBox="0 0 24 24"
+          fill="none"
+          width={size || 24}
+          height={size || 24}
+        >
+          <G id="SVGRepo_bgCarrier" strokeWidth={0} />
+          <G
+            id="SVGRepo_tracerCarrier"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <G id="SVGRepo_iconCarrier">
+            <Path
+              d="M2 6C2 4.11438 2 3.17157 2.58579 2.58579C3.17157 2 4.11438 2 6 2C7.88562 2 8.82843 2 9.41421 2.58579C10 3.17157 10 4.11438 10 6V18C10 19.8856 10 20.8284 9.41421 21.4142C8.82843 22 7.88562 22 6 22C4.11438 22 3.17157 22 2.58579 21.4142C2 20.8284 2 19.8856 2 18V6Z"
+              fill={fill || '#1C274C'}
+            />
+            <Path
+              d="M14 6C14 4.11438 14 3.17157 14.5858 2.58579C15.1716 2 16.1144 2 18 2C19.8856 2 20.8284 2 21.4142 2.58579C22 3.17157 22 4.11438 22 6V18C22 19.8856 22 20.8284 21.4142 21.4142C20.8284 22 19.8856 22 18 22C16.1144 22 15.1716 22 14.5858 21.4142C14 20.8284 14 19.8856 14 18V6Z"
+              fill={fill || '#1C274C'}
+            />
+          </G>
+        </Svg>
+      );
+    default:
+      return null;
+  }
+};
+
+export default SvgIcons;

package/src/components/VideoControls.tsx

@@ -11,6 +11,8 @@ import { useVideoManager } from '../provider/VideoContext';
 import { usePlayback } from '../hooks/usePlayback';
 import { formatTime } from '../utils/formatTime';
 import { GestureOverlay } from './GestureOverlay';
+import { CloseIcon } from './icons';
+import SvgIcons from './SvgIcons';
 
 export interface VideoControlsProps {
   /** Seconds jumped by double-tap. Default 10. */
@@ -95,7 +97,7 @@ export function VideoControls({
           <View style={styles.topRow}>
             {onClose ? (
               <Pressable style={styles.button} onPress={onClose} hitSlop={8}>
-                <Text style={styles.icon}>✕</Text>
+                <CloseIcon size={18} color="#fff" />
               </Pressable>
             ) : (
               <View />
@@ -105,7 +107,16 @@ export function VideoControls({
               onPress={() => (muted ? manager.unmute() : manager.mute())}
               hitSlop={8}
             >
-              <Text style={styles.icon}>{muted ? '🔇' : '🔊'}</Text>
+              {muted ? (
+                <SvgIcons icon="muteUnmute" type="mute" size={18} fill="#fff" />
+              ) : (
+                <SvgIcons
+                  icon="muteUnmute"
+                  type="unmute"
+                  size={18}
+                  fill="#fff"
+                />
+              )}
             </Pressable>
           </View>
 
@@ -117,9 +128,13 @@ export function VideoControls({
             }}
             hitSlop={16}
           >
-            <Text style={styles.playIcon}>
-              {buffering ? '…' : playing ? '❙❙' : '▶'}
-            </Text>
+            {buffering ? (
+              <Text style={styles.playIcon}>…</Text>
+            ) : playing ? (
+              <SvgIcons icon="playPause" type="pause" size={34} fill="#fff" />
+            ) : (
+              <SvgIcons icon="playPause" type="play" size={34} fill="#fff" />
+            )}
           </Pressable>
 
           <View style={styles.bottomRow}>
@@ -141,7 +156,16 @@ export function VideoControls({
                 onPress={() => manager.toggleFullscreen()}
                 hitSlop={8}
               >
-                <Text style={styles.icon}>{fullscreen ? '⤡' : '⤢'}</Text>
+                {fullscreen ? (
+                  <SvgIcons icon="fullScreen" size={18} fill="#fff" />
+                ) : (
+                  <SvgIcons
+                    icon="fullScreen"
+                    type="full"
+                    size={18}
+                    fill="#fff"
+                  />
+                )}
               </Pressable>
             ) : null}
           </View>
@@ -206,8 +230,4 @@ const styles = StyleSheet.create({
   button: {
     padding: 4,
   },
-  icon: {
-    color: '#fff',
-    fontSize: 18,
-  },
 });

package/src/components/icons.tsx

@@ -0,0 +1,117 @@
+import Svg, { Line, Path, Polygon, Rect } from 'react-native-svg';
+
+interface IconProps {
+  size: number;
+  color: string;
+}
+
+export function PlayIcon({ size, color }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Polygon points="6 3 20 12 6 21 6 3" />
+    </Svg>
+  );
+}
+
+export function PauseIcon({ size, color }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Rect x="6" y="4" width="4" height="16" />
+      <Rect x="14" y="4" width="4" height="16" />
+    </Svg>
+  );
+}
+
+export function CloseIcon({ size, color }: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+    >
+      <Line x1="18" y1="6" x2="6" y2="18" />
+      <Line x1="6" y1="6" x2="18" y2="18" />
+    </Svg>
+  );
+}
+
+export function VolumeOnIcon({ size, color }: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill={color} />
+      <Path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
+    </Svg>
+  );
+}
+
+export function VolumeOffIcon({ size, color }: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill={color} />
+      <Line x1="23" y1="9" x2="17" y2="15" />
+      <Line x1="17" y1="9" x2="23" y2="15" />
+    </Svg>
+  );
+}
+
+export function EnterFullscreenIcon({ size, color }: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Path d="M8 3H5a2 2 0 0 0-2 2v3" />
+      <Path d="M16 3h3a2 2 0 0 1 2 2v3" />
+      <Path d="M21 16v3a2 2 0 0 1-2 2h-3" />
+      <Path d="M3 16v3a2 2 0 0 0 2 2h3" />
+    </Svg>
+  );
+}
+
+export function ExitFullscreenIcon({ size, color }: IconProps) {
+  return (
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Path d="M8 3v3a2 2 0 0 1-2 2H3" />
+      <Path d="M16 3v3a2 2 0 0 0 2 2h3" />
+      <Path d="M21 16h-3a2 2 0 0 0-2 2v3" />
+      <Path d="M3 16h3a2 2 0 0 1 2 2v3" />
+    </Svg>
+  );
+}

package/src/core/VideoManager.ts

@@ -77,8 +77,6 @@ export class VideoManager {
 
   /** Per-player default for `enterFullscreen()` (VideoPlayer's prop). */
   private fullscreenOrientationDefault: OrientationLock | null = null;
-  /** True while a fullscreen-scoped lock is applied, so exit restores it. */
-  private fullscreenLockApplied = false;
 
   private constructor() {}
 
@@ -375,8 +373,11 @@ export class VideoManager {
   /**
    * Show the built-in fullscreen host. Rotation unlocks by default; pass an
    * orientation (or set VideoPlayer's `fullscreenOrientation` prop) to force
-   * one for the fullscreen session only — it is restored on exit, so the
-   * rest of the app never sees the lock.
+   * one for the fullscreen session only. That scoped orientation is the
+   * highest priority — it's applied in the SAME native call as entering
+   * fullscreen (never as a separate follow-up call), so there is no
+   * unlocked frame where the sensor could win before the lock takes effect.
+   * Restored on exit; the rest of the app never sees the lock.
    */
   enterFullscreen(orientation?: OrientationLock): void {
     if (this.store.getState().fullscreen) {
@@ -384,30 +385,31 @@ export class VideoManager {
     }
     this.set({ fullscreen: true, floating: false });
     this.setMode('fullscreen');
-    NativeAuVideo.enterFullscreen();
     // `enter` is often passed straight to onPress, so the argument may be a
     // press event — only honor real orientation values.
     const requested = ORIENTATION_LOCKS.includes(orientation as OrientationLock)
       ? (orientation as OrientationLock)
       : this.fullscreenOrientationDefault;
-    if (requested && requested !== 'auto') {
-      this.fullscreenLockApplied = true;
-      NativeAuVideo.setOrientation(requested);
-    }
+    // A scoped override wins outright; otherwise carry any standing
+    // setOrientation() lock through fullscreen unchanged (still higher
+    // priority than the sensor unlock — 'auto' just means neither applies).
+    const lock =
+      requested && requested !== 'auto'
+        ? requested
+        : this.store.getState().orientationLock;
+    NativeAuVideo.enterFullscreen(lock);
     this.events.emit('onEnterFullscreen', undefined);
   }
 
-  /** Restore the previous orientation lock and re-attach the previous surface. */
+  /** Restore the standing orientation lock (if any) and re-attach the previous surface. */
   exitFullscreen(): void {
     if (!this.store.getState().fullscreen) {
       return;
     }
-    if (this.fullscreenLockApplied) {
-      this.fullscreenLockApplied = false;
-      // Drop the fullscreen-only lock, restoring any explicit setOrientation.
-      NativeAuVideo.setOrientation(this.store.getState().orientationLock);
-    }
-    NativeAuVideo.exitFullscreen();
+    // Always restore the standing lock (or 'auto' if none) — a
+    // fullscreen-scoped override was never written to state, so this
+    // naturally drops it without needing to track whether one was applied.
+    NativeAuVideo.exitFullscreen(this.store.getState().orientationLock);
     this.set({ fullscreen: false });
     this.events.emit('onExitFullscreen', undefined);
     this.restoreInlineSurface();
@@ -482,7 +484,6 @@ export class VideoManager {
     this.initialized = false;
     this.lastInlineSurfaceId = null;
     this.fullscreenOrientationDefault = null;
-    this.fullscreenLockApplied = false;
     NativeAuVideo.setOrientation('auto');
     NativeAuVideo.releasePlayer();
     this.store.setState({ ...initialVideoState }, true);