Merge branch 'main' into mgamis/horizontal-gallery-ui-tests

Author: mgamis-msft

change/@internal-react-components-d1a4dd6d-0a5d-4430-b2a9-6fba219cc527.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Logic introduced to cause local camera switcher to appear on mobile.",
+  "packageName": "@internal/react-components",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@internal-react-composites-4cba40c4-0e66-45b4-9ec3-c580777b3188.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Logic introduced to media gallery to allow for mobile detection for local camera switcher.",
+  "packageName": "@internal/react-composites",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@internal-storybook-2aa0bca5-d4af-4a23-8f20-4bb03f9250c1.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Remove safari from android listing",
+  "packageName": "@internal/storybook",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/communication-react/review/communication-react.api.md

@@ -47,6 +47,8 @@ import { LocalScreenShare } from './VideoGallery/LocalScreenShare';
 import { RemoteScreenShare } from './VideoGallery/RemoteScreenShare';
 import { VideoTile } from './VideoTile';
 import { useId } from '@fluentui/react-hooks';
+/* @conditional-compile-remove-from(stable) Local_Camera_switcher */
+import { LocalVideoCameraCycleButton } from './VideoGallery/LocalVideoCameraCycleButton';
 
 // Currently the Calling JS SDK supports up to 4 remote video streams
 const DEFAULT_MAX_REMOTE_VIDEO_STREAMS = 4;
@@ -121,7 +123,11 @@ export interface VideoGalleryProps {
   onDisposeRemoteStreamView?: (userId: string) => Promise<void>;
   /** Callback to render a particpant avatar */
   onRenderAvatar?: OnRenderAvatarCallback;
-
+  /* @conditional-compile-remove-from(stable) Local_Camera_switcher */
+  /**
+   * Whether to display the local video camera switcher button
+   */
+  showCamerSwitcherInLocalPreview?: boolean;
   /**
    * Whether to display a mute icon beside the user's display name.
    * @defaultValue `true`
@@ -165,7 +171,9 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
     layout,
     onRenderAvatar,
     showMuteIndicator,
-    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS
+    maxRemoteVideoStreams = DEFAULT_MAX_REMOTE_VIDEO_STREAMS,
+    /* @conditional-compile-remove-from(stable) Local_Camera_switcher */
+    showCamerSwitcherInLocalPreview
   } = props;
 
   const ids = useIdentifiers();
@@ -227,7 +235,13 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
         userId={localParticipant.userId}
         renderElement={
           localVideoStream?.renderElement ? (
-            <StreamMedia videoStreamElement={localVideoStream.renderElement} />
+            <>
+              {
+                /* @conditional-compile-remove-from(stable) Local_Camera_switcher */
+                showCamerSwitcherInLocalPreview && <LocalVideoCameraCycleButton />
+              }
+              <StreamMedia videoStreamElement={localVideoStream.renderElement} />
+            </>
           ) : undefined
         }
         showLabel={!(shouldFloatLocalVideo && isNarrow)}

packages/react-components/review/react-components.api.md

@@ -3,18 +3,18 @@
 
 import { IButtonStyles, IconButton } from '@fluentui/react';
 import React from 'react';
-import { OptionsDevice } from '@internal/react-components/src/components/DevicesButton';
+import { OptionsDevice } from '../DevicesButton';
 
 /**
  * @internal
  */
-export interface LocalVideoCameraButtonProps {
+export interface LocalVideoCameraCycleButtonProps {
   /** Array of cameras available to the user. */
-  cameras: OptionsDevice[];
+  cameras?: OptionsDevice[];
   /** Currently selected camera in the local video stream. */
-  currentCamera: OptionsDevice;
+  currentCamera?: OptionsDevice;
   /** callback function to change video feed. */
-  setCamera: (device: OptionsDevice) => Promise<void>;
+  setCamera?: (device: OptionsDevice) => Promise<void>;
 }
 
 const localVideoCameraCycleButtonStyles: IButtonStyles = {
@@ -29,7 +29,7 @@ const localVideoCameraCycleButtonStyles: IButtonStyles = {
  * local video tile camera cycle button - for use on mobile screens only.
  * @private
  */
-export const LocalVideoCameraCycleButton = (props: LocalVideoCameraButtonProps): JSX.Element => {
+export const LocalVideoCameraCycleButton = (props: LocalVideoCameraCycleButtonProps): JSX.Element => {
   const { cameras, currentCamera, setCamera } = props;
 
   return (
@@ -41,7 +41,9 @@ export const LocalVideoCameraCycleButton = (props: LocalVideoCameraButtonProps):
         if (cameras && currentCamera !== undefined) {
           const index = cameras.indexOf(currentCamera);
           const newCamera = cameras[(index + 1) % cameras.length];
-          setCamera(newCamera);
+          if (setCamera !== undefined) {
+            setCamera(newCamera);
+          }
         }
       }}
     />

packages/react-components/src/components/VideoGallery.tsx

@@ -36,16 +36,15 @@ export interface MediaGalleryProps {
   onStartLocalVideo: () => Promise<void>;
   onRenderAvatar?: OnRenderAvatarCallback;
   onFetchAvatarPersonaData?: AvatarPersonaDataCallback;
+  isMobile?: boolean;
 }
 
 /**
  * @private
  */
 export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
   const videoGalleryProps = usePropsFor(VideoGallery);
-
   useLocalVideoStartTrigger(!!props.isVideoStreamOn);
-
   const VideoGalleryMemoized = useMemo(() => {
     return (
       <VideoGallery
@@ -54,14 +53,16 @@ export const MediaGallery = (props: MediaGalleryProps): JSX.Element => {
         remoteVideoViewOptions={remoteVideoViewOptions}
         styles={VideoGalleryStyles}
         layout="floatingLocalVideo"
+        /* @conditional-compile-remove-from(stable) */
+        showCamerSwitcherInLocalPreview={props.isMobile}
         onRenderAvatar={(userId, options) => (
           <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>
             <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />
           </Stack>
         )}
       />
     );
-  }, [props.onFetchAvatarPersonaData, videoGalleryProps]);
+  }, [props.isMobile, props.onFetchAvatarPersonaData, videoGalleryProps]);
 
   return VideoGalleryMemoized;
 };

…te/components/LocalVideoCameraButton.tsx …oGallery/LocalVideoCameraCycleButton.tsxpackages/react-composites/src/composites/CallComposite/components/LocalVideoCameraButton.tsx renamed to packages/react-components/src/components/VideoGallery/LocalVideoCameraCycleButton.tsx packages/react-composites/src/composites/CallComposite/components/LocalVideoCameraButton.tsx renamed to packages/react-components/src/components/VideoGallery/LocalVideoCameraCycleButton.tsx

@@ -73,6 +73,7 @@ export const CallPage = (props: CallPageProps): JSX.Element => {
         callStatus === 'Connected' ? (
           isNetworkHealthy(networkReconnectTileProps.networkReconnectValue) ? (
             <MediaGallery
+              isMobile={mobileView}
               {...mediaGalleryProps}
               {...mediaGalleryHandlers}
               onRenderAvatar={onRenderAvatar}