Hide Controlls and loader in full screen blur

Author: Gurdeep99

package.json

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

@@ -33,11 +33,12 @@ export interface VideoControlsProps {
    */
   offlineMessage?: string;
   /**
-   * Suppress the center loading/buffering spinner — e.g. while `isBlur` is
-   * active on the player: a spinner over a blurred picture reads as broken
-   * rather than intentional. Default false.
+   * Mirrors the player's `isBlur` prop: while true, hides the loading/
+   * buffering spinner (in every case, not just while offline — a spinner
+   * over a blurred picture reads as broken rather than intentional) and the
+   * mute and fullscreen buttons. Default false.
    */
-  hideLoader?: boolean;
+  isBlur?: boolean;
 }
 
 /**
@@ -53,7 +54,7 @@ export function VideoControls({
   showFullscreenButton = true,
   onClose,
   offlineMessage = 'No Internet Connection',
-  hideLoader = false,
+  isBlur = false,
 }: VideoControlsProps) {
   const manager = useVideoManager();
   const playing = usePlayback((s) => s.playing);
@@ -70,7 +71,7 @@ export function VideoControls({
 
   const feedArriving = playing || buffered > 0 || position > 0;
   const showLoader =
-    !hideLoader &&
+    !isBlur &&
     (live ? (loading || buffering) && !feedArriving : loading || buffering);
   const showOffline = !online && (loading || buffering);
 
@@ -128,7 +129,7 @@ export function VideoControls({
 
   const progress = duration > 0 ? Math.min(position / duration, 1) : 0;
 
-  const muteButton = (
+  const muteButton = isBlur ? null : (
     <Pressable
       style={styles.button}
       onPress={() => (muted ? manager.unmute() : manager.mute())}
@@ -142,7 +143,7 @@ export function VideoControls({
     </Pressable>
   );
 
-  const fullscreenButton = showFullscreenButton ? (
+  const fullscreenButton = showFullscreenButton && !isBlur ? (
     <Pressable
       style={styles.button}
       onPress={() => manager.toggleFullscreen()}

src/components/VideoPlayer.tsx

@@ -417,7 +417,7 @@ export const VideoPlayer = forwardRef<VideoManager, VideoPlayerProps>(
             {thumbnail()}
           </View>
         ) : null}
-        {controls ? <VideoControls hideLoader={isBlur} /> : null}
+        {controls ? <VideoControls isBlur={isBlur} /> : null}
       </View>
     );
   }