Merge pull request #63 from zoom/1.11.0-2

1.11.0 update demo use https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#attachVideo

package.json

@@ -49,6 +49,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@types/classnames": "^2.2.11",
     "@types/crypto-js": "^4.0.1",
     "@types/jest": "^26.0.21",

src/App.tsx

@@ -30,7 +30,6 @@ interface AppProps {
     enforceVB?: string;
     customerJoinId?: string;
     lang?: string;
-
     useVideoPlayer?: string;
   };
 }
@@ -128,6 +127,20 @@ function App(props: AppProps) {
   const galleryViewWithoutSAB = Number(enforceGalleryView) === 1 && !window.crossOriginIsolated;
   const vbWithoutSAB = Number(enforceVB) === 1 && !window.crossOriginIsolated;
   const galleryViewWithAttach = Number(useVideoPlayer) === 1 && (window.crossOriginIsolated || galleryViewWithoutSAB);
+
+  if (galleryViewWithAttach) {
+    console.log({
+      galleryViewWithAttach,
+      use: '<video-player-container> video tag render video',
+      doc: 'https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#attachVideo'
+    });
+  } else {
+    console.log({
+      galleryViewWithAttach,
+      use: '<canvas>',
+      doc: 'https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#startVideo'
+    });
+  }
   useEffect(() => {
     const init = async () => {
       await zmClient.init('en-US', `${window.location.origin}/lib`, {
@@ -228,6 +241,7 @@ function App(props: AppProps) {
       zmClient.off('media-sdk-change', onMediaSDKChange);
     };
   }, [zmClient, onConnectionChange, onMediaSDKChange]);
+  console.log({ isSupportGalleryView, galleryViewWithAttach });
   return (
     <div className="App">
       {loading && <LoadingLayer content={loadingText} />}

src/component/audio-animation-icon.tsx

@@ -0,0 +1,69 @@
+import Icon from '@ant-design/icons';
+import { useState, useCallback, useRef } from 'react';
+import { ReactComponent as AudioPlayingStep1 } from './svgs/audio-animate/audio_playing_step1.svg';
+import { ReactComponent as AudioPlayingStep2 } from './svgs/audio-animate/audio_playing_step2.svg';
+import { ReactComponent as AudioPlayingStep3 } from './svgs/audio-animate/audio_playing_step3.svg';
+import { ReactComponent as AudioPlayingStep4 } from './svgs/audio-animate/audio_playing_step4.svg';
+import { ReactComponent as AudioPlayingStep5 } from './svgs/audio-animate/audio_playing_step5.svg';
+import { ReactComponent as AudioPlayingStep6 } from './svgs/audio-animate/audio_playing_step6.svg';
+import { ReactComponent as AudioPlayingStep7 } from './svgs/audio-animate/audio_playing_step7.svg';
+import { ReactComponent as AudioPlayingStep8 } from './svgs/audio-animate/audio_playing_step8.svg';
+import { ReactComponent as AudioPlayingStep9 } from './svgs/audio-animate/audio_playing_step9.svg';
+import { useAnimationFrame } from '../hooks/useAnimationFrame';
+interface IconFontProps {
+  className?: string;
+  style?: object;
+  level?: number;
+}
+
+const audioPlayingStepMap: { [key: string]: React.FC<React.SVGProps<SVGSVGElement>> } = {
+  'icon-audio-playing-step1': AudioPlayingStep1,
+  'icon-audio-playing-step2': AudioPlayingStep2,
+  'icon-audio-playing-step3': AudioPlayingStep3,
+  'icon-audio-playing-step4': AudioPlayingStep4,
+  'icon-audio-playing-step5': AudioPlayingStep5,
+  'icon-audio-playing-step6': AudioPlayingStep6,
+  'icon-audio-playing-step7': AudioPlayingStep7,
+  'icon-audio-playing-step8': AudioPlayingStep8,
+  'icon-audio-playing-step9': AudioPlayingStep9
+};
+export const AudoiAnimationIcon = (props: IconFontProps) => {
+  const { className, style, level } = props;
+  const [step, setStep] = useState({ value: 1, ascending: true });
+  const stopRef = useRef(0);
+  const maxStep = level || 9;
+  const rafCallback = useCallback(() => {
+    if (stopRef.current === 0) {
+      setStep((step) => {
+        if (step.value === maxStep) {
+          return {
+            value: step.value - 1,
+            ascending: false
+          };
+        } else if (step.value === 1) {
+          return {
+            value: step.value + 1,
+            ascending: true
+          };
+        } else {
+          return {
+            value: step.ascending ? step.value + 1 : step.value - 1,
+            ascending: step.ascending
+          };
+        }
+      });
+      stopRef.current = 6;
+    } else {
+      stopRef.current = stopRef.current - 1;
+    }
+  }, [maxStep]);
+  useAnimationFrame(rafCallback);
+  return (
+    <Icon
+      className={className}
+      component={audioPlayingStepMap[`icon-audio-playing-step${step.value}`]}
+      viewBox="0 0 24 24"
+      style={{ ...(style || {}) }}
+    />
+  );
+};

src/component/icon-font.tsx

@@ -50,6 +50,15 @@ import { ReactComponent as IconPenddingCircle } from './svgs/icon-pending-circle
 import { ReactComponent as IconWarningCircle } from './svgs/icon-warning-circle.svg';
 import { ReactComponent as IconCorrect } from './svgs/icon-correct.svg';
 import { ReactComponent as IconLoading } from './svgs/icon-loading.svg';
+
+import { ReactComponent as IconParticipantAudioMuted } from './svgs/participants/audio-muted.svg';
+import { ReactComponent as IconParticipantAudioUnmuted } from './svgs/participants/audio-unmuted.svg';
+import { ReactComponent as IconParticipantAudioUnmutedAnimated } from './svgs/participants/audio-unmuted-animated.svg';
+import { ReactComponent as IconParticipantSharingDesktopAudio } from './svgs/participants/sharing-desktop-audio.svg';
+import { ReactComponent as IconParticipantSharingScreen } from './svgs/participants/sharing-screen.svg';
+import { ReactComponent as IconParticipantVideoOff } from './svgs/participants/video-off.svg';
+import { ReactComponent as IconParticipantVideoOn } from './svgs/participants/video-on.svg';
+
 const iconComponentMap: { [key: string]: any } = {
   'icon-advanced': IconAdvanced,
   'icon-chat': IconChat,
@@ -98,7 +107,14 @@ const iconComponentMap: { [key: string]: any } = {
   'icon-pendding-circle': IconPenddingCircle,
   'icon-warning-circle': IconWarningCircle,
   'icon-correct': IconCorrect,
-  'icon-loading': IconLoading
+  'icon-loading': IconLoading,
+  'icon-participant-audio-muted': IconParticipantAudioMuted,
+  'icon-participant-audio-unmuted': IconParticipantAudioUnmuted,
+  'icon-participant-audio-unmuted-animated': IconParticipantAudioUnmutedAnimated,
+  'icon-participant-sharing-desktop-audio': IconParticipantSharingDesktopAudio,
+  'icon-participant-sharing-screen': IconParticipantSharingScreen,
+  'icon-participant-video-off': IconParticipantVideoOff,
+  'icon-participant-video-on': IconParticipantVideoOn
 };
 interface IconFontProps {
   type: string;