react-native-video-provider 0.2.1 → 0.2.3

package/lib/typescript/src/core/VideoManager.d.ts

@@ -25,8 +25,6 @@ export declare class VideoManager {
     private lastInlineSurfaceId;
     /** Per-player default for `enterFullscreen()` (VideoPlayer's prop). */
     private fullscreenOrientationDefault;
-    /** True while a fullscreen-scoped lock is applied, so exit restores it. */
-    private fullscreenLockApplied;
     private constructor();
     get providerConfig(): Required<VideoProviderConfig>;
     /**
@@ -86,11 +84,14 @@ export declare 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;
-    /** 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;
     toggleFullscreen(orientation?: OrientationLock): void;
     showFloating(): void;

package/lib/typescript/src/core/VideoManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoManager.d.ts","sourceRoot":"","sources":["../../../../src/core/VideoManager.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"VideoManager.d.ts","sourceRoot":"","sources":["../../../../src/core/VideoManager.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-video-provider",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "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",
@@ -75,6 +75,7 @@
     "react": "19.2.3",
     "react-native": "0.85.0",
     "react-native-builder-bob": "^0.43.0",
+    "react-native-svg": "15.15.5",
     "turbo": "^2.9.16",
     "typescript": "^6.0.3"
   },
@@ -83,7 +84,8 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-svg": ">=13.0.0"
   },
   "workspaces": [
     "example"

package/src/NativeAuVideo.ts

@@ -81,10 +81,14 @@ export interface Spec extends TurboModule {
   attach(surfaceId: string): void;
   detach(): void;
 
-  /** Unlock rotation + immersive mode. Does not move the player. */
-  enterFullscreen(): void;
-  /** Restore the previous orientation lock. */
-  exitFullscreen(): void;
+  /**
+   * Enter fullscreen (immersive mode). `orientation` is applied in the same
+   * native call — no intermediate unlocked frame before a lock takes effect.
+   * auto | portrait | inverted-portrait | landscape | inverted-landscape
+   */
+  enterFullscreen(orientation: string): void;
+  /** Exit fullscreen, restoring `orientation` (same value semantics) atomically. */
+  exitFullscreen(orientation: string): void;
 
   /**
    * Force a screen orientation, overriding the app's own lock and the

package/src/components/FloatingPlayer.tsx

@@ -4,12 +4,12 @@ import {
   PanResponder,
   Pressable,
   StyleSheet,
-  Text,
   useWindowDimensions,
 } from 'react-native';
 import { FLOATING_SURFACE_ID } from '../core/VideoManager';
 import { usePlayback } from '../hooks/usePlayback';
 import { useVideoManager } from '../provider/VideoContext';
+import { CloseIcon, EnterFullscreenIcon } from './icons';
 import { VideoSurface } from './VideoSurface';
 
 export interface FloatingPlayerProps {
@@ -74,7 +74,7 @@ export function FloatingPlayer({ width = 200 }: FloatingPlayerProps) {
         hitSlop={8}
         onPress={() => manager.hideFloating()}
       >
-        <Text style={styles.icon}>✕</Text>
+        <CloseIcon size={12} color="#fff" />
       </Pressable>
       <Pressable
         style={[styles.button, styles.expandButton]}
@@ -84,7 +84,7 @@ export function FloatingPlayer({ width = 200 }: FloatingPlayerProps) {
           manager.enterFullscreen();
         }}
       >
-        <Text style={styles.icon}>⤢</Text>
+        <EnterFullscreenIcon size={12} color="#fff" />
       </Pressable>
     </Animated.View>
   );
@@ -123,8 +123,4 @@ const styles = StyleSheet.create({
   expandButton: {
     left: 4,
   },
-  icon: {
-    color: '#fff',
-    fontSize: 12,
-  },
 });

package/src/components/MiniPlayer.tsx

@@ -7,6 +7,7 @@ import {
 } from 'react-native';
 import { usePlayback } from '../hooks/usePlayback';
 import { useVideoManager } from '../provider/VideoContext';
+import { CloseIcon, PauseIcon, PlayIcon } from './icons';
 import { VideoSurface } from './VideoSurface';
 
 export interface MiniPlayerProps extends ViewProps {
@@ -47,11 +48,15 @@ export function MiniPlayer({
         hitSlop={8}
         onPress={() => manager.toggle()}
       >
-        <Text style={styles.icon}>{playing ? '❙❙' : '▶'}</Text>
+        {playing ? (
+          <PauseIcon size={16} color="#fff" />
+        ) : (
+          <PlayIcon size={16} color="#fff" />
+        )}
       </Pressable>
       {onClose ? (
         <Pressable style={styles.button} hitSlop={8} onPress={onClose}>
-          <Text style={styles.icon}>✕</Text>
+          <CloseIcon size={16} color="#fff" />
         </Pressable>
       ) : null}
     </View>
@@ -86,8 +91,4 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 8,
   },
-  icon: {
-    color: '#fff',
-    fontSize: 16,
-  },
 });

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. */
@@ -35,13 +37,19 @@ export function VideoControls({
   onClose,
 }: VideoControlsProps) {
   const manager = useVideoManager();
+  const status = usePlayback((s) => s.status);
   const playing = usePlayback((s) => s.playing);
   const buffering = usePlayback((s) => s.buffering);
+  const loading = usePlayback((s) => s.loading);
   const position = usePlayback((s) => s.position);
   const duration = usePlayback((s) => s.duration);
   const muted = usePlayback((s) => s.muted);
   const fullscreen = usePlayback((s) => s.fullscreen);
 
+  // No known duration once loaded — a live stream or a video with no fixed
+  // end. There's nothing to seek, so hide the seek bar entirely.
+  const live = status !== 'idle' && !loading && duration <= 0;
+
   const [visible, setVisible] = useState(true);
   const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const trackWidth = useRef(0);
@@ -83,6 +91,34 @@ export function VideoControls({
 
   const progress = duration > 0 ? Math.min(position / duration, 1) : 0;
 
+  const muteButton = (
+    <Pressable
+      style={styles.button}
+      onPress={() => (muted ? manager.unmute() : manager.mute())}
+      hitSlop={8}
+    >
+      {muted ? (
+        <SvgIcons icon="muteUnmute" size={18} fill="#fff" />
+      ) : (
+        <SvgIcons icon="muteUnmute" type="mute" size={18} fill="#fff" />
+      )}
+    </Pressable>
+  );
+
+  const fullscreenButton = showFullscreenButton ? (
+    <Pressable
+      style={styles.button}
+      onPress={() => manager.toggleFullscreen()}
+      hitSlop={8}
+    >
+      {fullscreen ? (
+        <SvgIcons icon="fullScreen" size={18} fill="#fff" />
+      ) : (
+        <SvgIcons icon="fullScreen" type="full" size={18} fill="#fff" />
+      )}
+    </Pressable>
+  ) : null;
+
   return (
     <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
       <GestureOverlay
@@ -95,18 +131,12 @@ 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 />
             )}
-            <Pressable
-              style={styles.button}
-              onPress={() => (muted ? manager.unmute() : manager.mute())}
-              hitSlop={8}
-            >
-              <Text style={styles.icon}>{muted ? '🔇' : '🔊'}</Text>
-            </Pressable>
+            {!live ? muteButton : <View />}
           </View>
 
           <Pressable
@@ -117,33 +147,39 @@ 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}>
-            <Text style={styles.time}>{formatTime(position)}</Text>
-            <Pressable
-              style={styles.track}
-              onLayout={onTrackLayout}
-              onPress={onTrackPress}
-            >
-              <View style={styles.trackBg} />
-              <View
-                style={[styles.trackFill, { width: `${progress * 100}%` }]}
-              />
-            </Pressable>
-            <Text style={styles.time}>{formatTime(duration)}</Text>
-            {showFullscreenButton ? (
-              <Pressable
-                style={styles.button}
-                onPress={() => manager.toggleFullscreen()}
-                hitSlop={8}
-              >
-                <Text style={styles.icon}>{fullscreen ? '⤡' : '⤢'}</Text>
-              </Pressable>
-            ) : null}
+            {live ? (
+              <>
+                {muteButton}
+                <View style={styles.spacer} />
+                {fullscreenButton}
+              </>
+            ) : (
+              <>
+                <Text style={styles.time}>{formatTime(position)}</Text>
+                <Pressable
+                  style={styles.track}
+                  onLayout={onTrackLayout}
+                  onPress={onTrackPress}
+                >
+                  <View style={styles.trackBg} />
+                  <View
+                    style={[styles.trackFill, { width: `${progress * 100}%` }]}
+                  />
+                </Pressable>
+                <Text style={styles.time}>{formatTime(duration)}</Text>
+                {fullscreenButton}
+              </>
+            )}
           </View>
         </View>
       ) : null}
@@ -190,6 +226,9 @@ const styles = StyleSheet.create({
     height: 24,
     justifyContent: 'center',
   },
+  spacer: {
+    flex: 1,
+  },
   trackBg: {
     position: 'absolute',
     left: 0,
@@ -206,8 +245,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>
+  );
+}