fix: improve display VB + clear properly

Author: jibon57

src/components/footer/modals/webcam/index.tsx

@@ -7,7 +7,7 @@ import {
   updateShowVideoShareModal,
 } from '../../../../store/slices/bottomIconsActivitySlice';
 import { getInputMediaDevices } from '../../../../helpers/utils';
-import PreviewWebcam from './previewWebcam';
+import WebcamSettings from './webcamSettings';
 import { addVideoDevices } from '../../../../store/slices/roomSettingsSlice';
 import Modal from '../../../../helpers/ui/modal';
 import Dropdown from '../../../../helpers/ui/dropdown';
@@ -99,7 +99,7 @@ const ShareWebcamModal = ({
           </div>
         )}
         <div className="w-full">
-          <PreviewWebcam deviceId={selectedWebcam} />
+          <WebcamSettings deviceId={selectedWebcam} />
         </div>
       </Modal>
     )

src/components/footer/modals/webcam/previewWebcam.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  createLocalVideoTrack,
+  LocalVideoTrack,
+  VideoPresets,
+} from 'livekit-client';
+
+import { useAppSelector } from '../../../../store';
+import {
+  createVirtualBackgroundProcessor,
+  TwilioBackgroundProcessor,
+} from '../../../../helpers/libs/TrackProcessor';
+
+interface WebcamPreviewProps {
+  deviceId: string;
+}
+
+const WebcamPreview = ({ deviceId }: WebcamPreviewProps) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const localVideoTrack = useRef<LocalVideoTrack | null>(null);
+
+  const virtualBackground = useAppSelector(
+    (state) => state.bottomIconsActivity.virtualBackground,
+  );
+
+  useEffect(() => {
+    if (deviceId && videoRef.current) {
+      // stop the previous track before creating a new one
+      if (localVideoTrack.current) {
+        localVideoTrack.current.detach();
+        localVideoTrack.current.stop();
+      }
+
+      let processor: TwilioBackgroundProcessor | undefined;
+      if (virtualBackground.type !== 'none') {
+        processor = createVirtualBackgroundProcessor(virtualBackground);
+      }
+
+      createLocalVideoTrack({
+        deviceId,
+        resolution: VideoPresets.h720.resolution,
+        processor,
+      }).then((track) => {
+        localVideoTrack.current = track;
+        if (videoRef.current) {
+          localVideoTrack.current.attach(videoRef.current);
+        }
+      });
+    }
+
+    return () => {
+      // stop track on component unmount
+      if (localVideoTrack.current) {
+        localVideoTrack.current.stopProcessor(false).then(() => {
+          localVideoTrack.current?.detach();
+          localVideoTrack.current?.stop();
+        });
+      }
+    };
+  }, [deviceId, virtualBackground]);
+
+  useEffect(() => {
+    return () => {
+      if (localVideoTrack.current) {
+        localVideoTrack.current.stopProcessor(false).then(() => {
+          localVideoTrack.current?.detach();
+          localVideoTrack.current?.stop();
+        });
+      }
+    };
+  }, []);
+
+  return <video ref={videoRef} className="w-full h-full" autoPlay muted />;
+};
+
+export default WebcamPreview;

src/components/footer/modals/webcam/webcamPreview.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { isSupported } from '@twilio/video-processors';
+
+import { useAppDispatch } from '../../../../store';
+import { updateVirtualBackground } from '../../../../store/slices/bottomIconsActivitySlice';
+import { BackgroundConfig } from '../../../../helpers/libs/TrackProcessor';
+import WebcamPreview from './webcamPreview';
+import BackgroundItems from './backgroundItems';
+
+interface WebcamSettingsProps {
+  deviceId: string;
+}
+
+const WebcamSettings = ({ deviceId }: WebcamSettingsProps) => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const onSelectBg = (bg: BackgroundConfig) => {
+    dispatch(updateVirtualBackground(bg));
+  };
+
+  return (
+    <div className="">
+      <div className="w-full overflow-hidden rounded-lg relative bg-black h-64 3xl:h-80">
+        <WebcamPreview deviceId={deviceId} />
+      </div>
+      {isSupported && (
+        <>
+          <div className="title text-xs md:text-sm leading-none text-Gray-700 dark:text-dark-text px-1 md:px-3 uppercase pt-5 3x:pt-8 pb-5">
+            {t('footer.modal.chose-virtual-bg')}
+          </div>
+          <BackgroundItems onSelect={onSelectBg} />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default WebcamSettings;

src/components/footer/modals/webcam/webcamSettings.tsx

@@ -25,7 +25,7 @@ import { LoadingIcon } from '../../assets/Icons/Loading';
 
 import MicrophoneIcon from './microphone';
 import WebcamIcon from './webcam';
-import WebcamPreview from './webcamPreview';
+import WebcamPreview from '../footer/modals/webcam/webcamPreview';
 
 interface StartupJoinModalProps {
   setIsAppReady: Dispatch<boolean>;
@@ -181,7 +181,11 @@ const Landing = ({
           </div>
           <div className="wrapper bg-Gray-50 dark:bg-dark-secondary  pt-4 sm:pt-8 3xl:pt-11 pb-4 sm:pb-10 3xl:pb-14 px-4 sm:px-8 3xl:px-12 flex flex-wrap">
             <div className="left relative z-20 bg-Gray-25 dark:bg-Gray-800 shadow-box1 border border-Gray-200 dark:border-Gray-700 p-2 w-full md:w-1/2 rounded-2xl mb-5 sm:mb-0">
-              <WebcamPreview selectedVideoDevice={selectedVideoDevice} />
+              <div className="camera bg-Gray-950 rounded-lg overflow-hidden w-full h-56 sm:h-72 3xl:h-80">
+                {selectedVideoDevice !== '' && (
+                  <WebcamPreview deviceId={selectedVideoDevice} />
+                )}
+              </div>
               <div className="micro-cam-wrap flex justify-center py-5 gap-5 empty:hidden">
                 {lockMicrophone ? (
                   <div className="microphone-wrap relative cursor-not-allowed shadow-IconBox border border-Red-200 rounded-2xl h-11 w-11 flex items-center justify-center transition-all duration-300 text-Gray-950">