From 5c8927656aa6ca9c4bb443dff7be16b5333e09c1 Mon Sep 17 00:00:00 2001
From: "vic.yang" <vic.yang@zoom.us>
Date: Mon, 4 Nov 2024 13:41:35 +0800
Subject: [PATCH] 1.12.12 update

---
 package.json                                  |  4 +--
 src/feature/preview/preview.tsx               |  7 ++++-
 src/feature/video/components/share-bar.tsx    |  8 +++--
 src/feature/video/components/video-footer.tsx | 29 +++++++++++--------
 src/feature/video/hooks/useShare.ts           | 24 ++++++++-------
 src/feature/video/video-attach.tsx            |  2 ++
 6 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 1c673ea..076df71 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "react-video-sdk-demo",
-  "version": "1.12.10",
+  "version": "1.12.12",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "4.7.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
-    "@zoom/videosdk": "^1.12.10",
+    "@zoom/videosdk": "^1.12.12",
     "antd": "4.24.3",
     "classnames": "^2.2.6",
     "crypto-js": "^4.0.0",
diff --git a/src/feature/preview/preview.tsx b/src/feature/preview/preview.tsx
index 36c7af1..49f9ded 100644
--- a/src/feature/preview/preview.tsx
+++ b/src/feature/preview/preview.tsx
@@ -259,7 +259,12 @@ const PreviewContainer = () => {
         </span>
         <div className="container video-app">
           <div className="preview-video">
-            <video className={classNames({ 'preview-video-show': !isInVBMode })} muted={true} ref={videoRef} />
+            <video
+              className={classNames({ 'preview-video-show': !isInVBMode })}
+              muted={true}
+              playsInline
+              ref={videoRef}
+            />
             <canvas
               className={classNames({ 'preview-video-show': isInVBMode })}
               width="1280"
diff --git a/src/feature/video/components/share-bar.tsx b/src/feature/video/components/share-bar.tsx
index fd3c3b1..bb984b2 100644
--- a/src/feature/video/components/share-bar.tsx
+++ b/src/feature/video/components/share-bar.tsx
@@ -33,9 +33,13 @@ const ShareBar = forwardRef((props: ShareBarProps, ref: any) => {
   const onShareAudioClick = useCallback(() => {
     if (shareAudioStatus?.isShareAudioEnabled) {
       if (shareAudioStatus.isShareAudioMuted) {
-        mediaStream?.unmuteShareAudio();
+        mediaStream?.unmuteShareAudio().then(() => {
+          setShareAudioStatus(mediaStream.getShareAudioStatus());
+        });
       } else {
-        mediaStream?.muteShareAudio();
+        mediaStream?.muteShareAudio().then(() => {
+          setShareAudioStatus(mediaStream.getShareAudioStatus());
+        });
       }
     }
   }, [mediaStream, shareAudioStatus]);
diff --git a/src/feature/video/components/video-footer.tsx b/src/feature/video/components/video-footer.tsx
index 2fa322a..2340af9 100644
--- a/src/feature/video/components/video-footer.tsx
+++ b/src/feature/video/components/video-footer.tsx
@@ -149,7 +149,11 @@ const VideoFooter = (props: VideoFooterProps) => {
       }
     } else {
       try {
-        await mediaStream?.startAudio({ highBitrate: true });
+        if (activePlaybackUrl) {
+          await mediaStream?.startAudio({ mediaFile: { url: activePlaybackUrl, loop: true } });
+        } else {
+          await mediaStream?.startAudio({ highBitrate: true });
+        }
       } catch (e: any) {
         if (e.type === 'INSUFFICIENT_PRIVILEGES' && e.reason === 'USER_FORBIDDEN_MICROPHONE') {
           setIsMicrophoneForbidden(true);
@@ -606,17 +610,18 @@ const VideoFooter = (props: VideoFooterProps) => {
           }}
         />
       )}
-      {recordingButtons.map((button: RecordButtonProps) => {
-        return (
-          <RecordingButton
-            key={button.text}
-            onClick={() => {
-              onRecordingClick(button.text);
-            }}
-            {...button}
-          />
-        );
-      })}
+      {!zmClient?.getCurrentUserInfo()?.subsessionId &&
+        recordingButtons.map((button: RecordButtonProps) => {
+          return (
+            <RecordingButton
+              key={button.text}
+              onClick={() => {
+                onRecordingClick(button.text);
+              }}
+              {...button}
+            />
+          );
+        })}
       {liveTranscriptionClient?.getLiveTranscriptionStatus().isLiveTranscriptionEnabled && (
         <>
           <LiveTranscriptionButton
diff --git a/src/feature/video/hooks/useShare.ts b/src/feature/video/hooks/useShare.ts
index 3caf62c..ec2a3d3 100644
--- a/src/feature/video/hooks/useShare.ts
+++ b/src/feature/video/hooks/useShare.ts
@@ -41,39 +41,43 @@ export function useShare(
             if (item.sharerOn) {
               setIsReceiveSharing(false);
             }
+            if (mediaStream) {
+              setShareUserId(mediaStream.getShareUserList());
+            }
           }
         });
       }
     },
-    [zmClient]
+    [zmClient, mediaStream]
   );
   const onShareContentChange = useCallback((payload: any) => {
     setActiveSharingId(payload.userId);
   }, []);
-  const onActiveMediaFailed = useCallback(()=>{
+  const onActiveMediaFailed = useCallback(() => {
     Modal.error({
-      title:'Active media failed',
-      content:'Something went wrong. An unexpected interruption in media capture or insufficient memory occurred. Try refreshing the page to recover.',
-      okText:'Refresh',
-      onOk:()=>{
+      title: 'Active media failed',
+      content:
+        'Something went wrong. An unexpected interruption in media capture or insufficient memory occurred. Try refreshing the page to recover.',
+      okText: 'Refresh',
+      onOk: () => {
         window.location.reload();
       }
-    })
-  },[])
+    });
+  }, []);
   useEffect(() => {
     zmClient.on('active-share-change', onActiveShareChange);
     zmClient.on('share-content-dimension-change', onSharedContentDimensionChange);
     zmClient.on('user-updated', onCurrentUserUpdate);
     zmClient.on('peer-share-state-change', onPeerShareChange);
     zmClient.on('share-content-change', onShareContentChange);
-    zmClient.on('active-media-failed',onActiveMediaFailed)
+    zmClient.on('active-media-failed', onActiveMediaFailed);
     return () => {
       zmClient.off('active-share-change', onActiveShareChange);
       zmClient.off('share-content-dimension-change', onSharedContentDimensionChange);
       zmClient.off('user-updated', onCurrentUserUpdate);
       zmClient.off('peer-share-state-change', onPeerShareChange);
       zmClient.off('share-content-change', onShareContentChange);
-      zmClient.off('active-media-failed',onActiveMediaFailed)
+      zmClient.off('active-media-failed', onActiveMediaFailed);
     };
   }, [
     zmClient,
diff --git a/src/feature/video/video-attach.tsx b/src/feature/video/video-attach.tsx
index 0d8eb4c..be795b9 100644
--- a/src/feature/video/video-attach.tsx
+++ b/src/feature/video/video-attach.tsx
@@ -29,6 +29,7 @@ import { useOrientation, usePrevious } from '../../hooks';
 import { useVideoAspect } from './hooks/useVideoAspectRatio';
 import { Radio } from 'antd';
 import { useSpotlightVideo } from './hooks/useSpotlightVideo';
+import RemoteCameraControlPanel from './components/remote-camera-control';
 type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any }>;
 
 declare global {
@@ -194,6 +195,7 @@ const VideoContainer: React.FunctionComponent<RouteComponentProps> = (props) =>
                 );
               })}
             </ul>
+            <RemoteCameraControlPanel />
           </AvatarActionContext.Provider>
         </video-player-container>
       </div>