fix: add marker classes for the default VideoPreview components (#1172

)

Adds marker CSS classes to the default `VideoPreview` components in
order to allow easier styling.

As part of this PR, an issue in Zoom Clone is fixed too (reference:
#1169)

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

@@ -6,12 +6,20 @@ import { LoadingIndicator } from '../LoadingIndicator';
 
 const DefaultDisabledVideoPreview = () => {
   const { t } = useI18n();
-  return <div>{t('Video is disabled')}</div>;
+  return (
+    <div className="str_video__video-preview__disabled-video-preview">
+      {t('Video is disabled')}
+    </div>
+  );
 };
 
 const DefaultNoCameraPreview = () => {
   const { t } = useI18n();
-  return <div>{t('No camera found')}</div>;
+  return (
+    <div className="str_video__video-preview__no-camera-preview">
+      {t('No camera found')}
+    </div>
+  );
 };
 
 export type VideoPreviewProps = {

sample-apps/react/zoom-clone/src/components/Preview.tsx

@@ -19,7 +19,7 @@ export const Preview = {
       const disposeSoundDetector = createSoundDetector(
         mediaStream,
         ({ audioLevel }) => setPercentage(audioLevel),
-        { detectionFrequencyInMs: 80 },
+        { detectionFrequencyInMs: 80, destroyStreamOnStop: false },
       );
 
       return () => {