feat(react): Implement progress bar when video-filters are being loaded (#2063)

### 💡 Overview

- Introduces isLoading flag which indicates if the video filters are
being loaded.
- Reduce blur levels for video filters 

🎫 Ticket:
https://linear.app/stream/issue/REACT-715/progress-bar-when-video-filters-are-loading

📑 Docs: GetStream/docs-content#875

Author: jdimovska

packages/react-sdk/src/components/BackgroundFilters/BackgroundFilters.tsx

@@ -119,6 +119,7 @@ export const BackgroundFiltersProvider = (
     useState(bgBlurLevelFromProps);
 
   const [showLowFpsWarning, setShowLowFpsWarning] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const fpsWarningThresholdLower =
     performanceThresholds?.fpsWarningThresholdLower ??
@@ -290,6 +291,7 @@ export const BackgroundFiltersProvider = (
     isSupported,
     performance,
     isReady,
+    isLoading,
     backgroundImage,
     backgroundBlurLevel,
     backgroundFilter,
@@ -311,6 +313,7 @@ export const BackgroundFiltersProvider = (
           tfLite={tfLite}
           engine={engine}
           onStats={handleStats}
+          setIsLoading={setIsLoading}
         />
       )}
     </ContextProvider.Provider>
@@ -322,9 +325,10 @@ const BackgroundFilters = (props: {
   tfLite?: TFLite;
   engine: FilterEngine;
   onStats: (stats: PerformanceStats) => void;
+  setIsLoading: (loading: boolean) => void;
 }) => {
   const call = useCall();
-  const { engine, api, tfLite, onStats } = props;
+  const { engine, api, tfLite, onStats, setIsLoading } = props;
   const { children, start } = useRenderer(api, tfLite, call, engine);
   const { onError, backgroundFilter } = api;
   const handleErrorRef = useRef<((error: any) => void) | undefined>(undefined);
@@ -338,17 +342,22 @@ const BackgroundFilters = (props: {
   useEffect(() => {
     if (!call || !backgroundFilter) return;
 
-    const { unregister } = call.camera.registerFilter((ms) => {
+    setIsLoading(true);
+    const { unregister, registered } = call.camera.registerFilter((ms) => {
       return start(
         ms,
         (error) => handleErrorRef.current?.(error),
         (stats: PerformanceStats) => handleStatsRef.current?.(stats),
       );
     });
+    registered.finally(() => {
+      setIsLoading(false);
+    });
+
     return () => {
       unregister().catch((err) => console.warn(`Can't unregister filter`, err));
     };
-  }, [call, start, backgroundFilter]);
+  }, [call, start, backgroundFilter, setIsLoading]);
 
   return children;
 };

packages/react-sdk/src/components/BackgroundFilters/types.ts

@@ -130,6 +130,11 @@ export type BackgroundFiltersAPI = {
    */
   isReady: boolean;
 
+  /**
+   * Indicates whether the background filter is currently being registered.
+   */
+  isLoading: boolean;
+
   /**
    * Performance information for background filters.
    */

packages/video-filters-web/src/types.ts

@@ -48,15 +48,15 @@ export const BACKGROUND_BLUR_MAP: Record<
   { bgBlur: number; bgBlurRadius: number }
 > = {
   low: {
-    bgBlur: 15,
-    bgBlurRadius: 5,
+    bgBlur: 5,
+    bgBlurRadius: 3,
   },
   medium: {
-    bgBlur: 20,
-    bgBlurRadius: 7,
+    bgBlur: 15,
+    bgBlurRadius: 4,
   },
   high: {
-    bgBlur: 25,
-    bgBlurRadius: 10,
+    bgBlur: 30,
+    bgBlurRadius: 5,
   },
 };

sample-apps/react/react-dogfood/components/Settings/VideoEffects.tsx

@@ -8,6 +8,7 @@ import {
 
 export const VideoEffectsSettings = () => {
   const {
+    isLoading,
     isSupported,
     backgroundImages,
     backgroundBlurLevel,
@@ -31,6 +32,11 @@ export const VideoEffectsSettings = () => {
     <div className="rd__video-effects">
       <div className="rd__video-effects__preview-container">
         <VideoPreview />
+        {isLoading && (
+          <div className="rd__video-effects__progress-bar">
+            <div className="rd__video-effects__progress-bar__fill" />
+          </div>
+        )}
       </div>
       <div className="rd__video-effects__container">
         <div className="rd__video-effects__card">

sample-apps/react/react-dogfood/style/SettingsTabModal.scss

@@ -126,10 +126,33 @@
         flex-direction: column;
         min-height: 320px;
         max-width: 480px;
+        position: relative;
 
         .str-video__video-preview-container {
           width: 100%;
         }
+
+        .rd__video-effects__progress-bar {
+          width: 100%;
+          height: 4px;
+          background-color: var(--str-video__base-color6);
+          border-radius: 0 0 var(--str-video__border-radius-xs);
+          overflow: hidden;
+          position: absolute;
+          bottom: -10px;
+          left: 50%;
+          transform: translateX(-50%);
+
+          &__fill {
+            height: 100%;
+            width: 20%;
+            background-color: var(--str-video__brand-color1);
+            border-radius: var(--str-video__border-radius-xs);
+            position: absolute;
+            animation: rd__video-effects__progress-bar__animation 1.5s
+              ease-in-out infinite;
+          }
+        }
       }
 
       .rd__video-effects__image {
@@ -246,3 +269,12 @@
     }
   }
 }
+
+@keyframes rd__video-effects__progress-bar__animation {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(500%);
+  }
+}