@stream-io/video-react-sdk 1.5.0 → 1.6.0

package/dist/src/core/components/CallLayout/LivestreamLayout.d.ts

@@ -26,6 +26,11 @@ export type LivestreamLayoutProps = {
      * Whether to show the speaker name. Defaults to `false`.
      */
     showSpeakerName?: boolean;
+    /**
+     * When set to `false` disables mirroring of the local partipant's video.
+     * @default true
+     */
+    mirrorLocalParticipantVideo?: boolean;
     /**
      * The props to pass to the floating participant element.
      */

package/dist/src/core/components/CallLayout/PaginatedGridLayout.d.ts

@@ -9,6 +9,11 @@ export type PaginatedGridLayoutProps = {
      * @default false
      */
     excludeLocalParticipant?: boolean;
+    /**
+     * When set to `false` disables mirroring of the local partipant's video.
+     * @default true
+     */
+    mirrorLocalParticipantVideo?: boolean;
     /**
      * Turns on/off the pagination arrows.
      * @default true

package/dist/src/core/components/CallLayout/SpeakerLayout.d.ts

@@ -23,6 +23,11 @@ export type SpeakerLayoutProps = {
      * @default false
      */
     excludeLocalParticipant?: boolean;
+    /**
+     * When set to `false` disables mirroring of the local partipant's video.
+     * @default true
+     */
+    mirrorLocalParticipantVideo?: boolean;
     /**
      * Turns on/off the pagination arrows.
      * @default true
@@ -30,6 +35,6 @@ export type SpeakerLayoutProps = {
     pageArrowsVisible?: boolean;
 } & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
 export declare const SpeakerLayout: {
-    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition, participantsBarLimit, excludeLocalParticipant, pageArrowsVisible, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ ParticipantViewUIBar, ParticipantViewUISpotlight, VideoPlaceholder, participantsBarPosition, participantsBarLimit, mirrorLocalParticipantVideo, excludeLocalParticipant, pageArrowsVisible, }: SpeakerLayoutProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/dist/src/core/components/ParticipantView/ParticipantView.d.ts

@@ -18,6 +18,11 @@ export type ParticipantViewProps = {
      * You can use `none` if you're building an audio-only call.
      */
     trackType?: VideoTrackType | 'none';
+    /**
+     * Forces participant's video to be mirrored or unmirrored. By default, video track
+     * from the local participant is mirrored, and all other videos are not mirrored.
+     */
+    mirror?: boolean;
     /**
      * This prop is only useful for advanced use-cases (for example, building your own layout).
      * When set to `true` it will mute the give participant's audio stream on the client side.
@@ -54,6 +59,11 @@ export declare const ParticipantView: import("react").ForwardRefExoticComponent<
      * You can use `none` if you're building an audio-only call.
      */
     trackType?: VideoTrackType | "none";
+    /**
+     * Forces participant's video to be mirrored or unmirrored. By default, video track
+     * from the local participant is mirrored, and all other videos are not mirrored.
+     */
+    mirror?: boolean;
     /**
      * This prop is only useful for advanced use-cases (for example, building your own layout).
      * When set to `true` it will mute the give participant's audio stream on the client side.

package/dist/src/core/components/Video/Video.d.ts

@@ -7,6 +7,11 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
      * even if the participant has published video.
      */
     enabled?: boolean;
+    /**
+     * Forces the video to be mirrored or unmirrored. By default, video track
+     * from the local participant is mirrored, and all other videos are not mirrored.
+     */
+    mirror?: boolean;
     /**
      * The track type to display.
      */
@@ -40,6 +45,6 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
     };
 };
 export declare const Video: {
-    ({ enabled, trackType, participant, className, VideoPlaceholder, refs, ...rest }: VideoProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ enabled, mirror, trackType, participant, className, VideoPlaceholder, refs, ...rest }: VideoProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

package/src/core/components/CallLayout/LivestreamLayout.tsx

@@ -44,6 +44,12 @@ export type LivestreamLayoutProps = {
    */
   showSpeakerName?: boolean;
 
+  /**
+   * When set to `false` disables mirroring of the local partipant's video.
+   * @default true
+   */
+  mirrorLocalParticipantVideo?: boolean;
+
   /**
    * The props to pass to the floating participant element.
    */
@@ -116,6 +122,9 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
           )}
           participant={currentSpeaker}
           ParticipantViewUI={FloatingParticipantOverlay || Overlay}
+          mirror={
+            props.mirrorLocalParticipantVideo !== false ? undefined : false
+          }
           muteAudio // audio is rendered by ParticipantsAudio
         />
       )}

package/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -20,11 +20,12 @@ type PaginatedGridLayoutGroupProps = {
    * The group of participants to render.
    */
   group: Array<StreamVideoParticipant>;
-} & Pick<ParticipantViewProps, 'VideoPlaceholder'> &
+} & Pick<ParticipantViewProps, 'VideoPlaceholder' | 'mirror'> &
   Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;
 
 const PaginatedGridLayoutGroup = ({
   group,
+  mirror,
   VideoPlaceholder,
   ParticipantViewUI,
 }: PaginatedGridLayoutGroupProps) => {
@@ -43,6 +44,7 @@ const PaginatedGridLayoutGroup = ({
           key={participant.sessionId}
           participant={participant}
           muteAudio
+          mirror={mirror}
           VideoPlaceholder={VideoPlaceholder}
           ParticipantViewUI={ParticipantViewUI}
         />
@@ -63,6 +65,12 @@ export type PaginatedGridLayoutProps = {
    */
   excludeLocalParticipant?: boolean;
 
+  /**
+   * When set to `false` disables mirroring of the local partipant's video.
+   * @default true
+   */
+  mirrorLocalParticipantVideo?: boolean;
+
   /**
    * Turns on/off the pagination arrows.
    * @default true
@@ -76,6 +84,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
       ? props.groupSize || GROUP_SIZE
       : GROUP_SIZE,
     excludeLocalParticipant = false,
+    mirrorLocalParticipantVideo = true,
     pageArrowsVisible = true,
     VideoPlaceholder,
     ParticipantViewUI = DefaultParticipantViewUI,
@@ -121,6 +130,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
   }, [page, pageCount]);
 
   const selectedGroup = participantGroups[page];
+  const mirror = mirrorLocalParticipantVideo ? undefined : false;
 
   if (!call) return null;
 
@@ -143,6 +153,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
         {selectedGroup && (
           <PaginatedGridLayoutGroup
             group={selectedGroup}
+            mirror={mirror}
             VideoPlaceholder={VideoPlaceholder}
             ParticipantViewUI={ParticipantViewUI}
           />

package/src/core/components/CallLayout/SpeakerLayout.tsx

@@ -41,6 +41,11 @@ export type SpeakerLayoutProps = {
    * @default false
    */
   excludeLocalParticipant?: boolean;
+  /**
+   * When set to `false` disables mirroring of the local partipant's video.
+   * @default true
+   */
+  mirrorLocalParticipantVideo?: boolean;
   /**
    * Turns on/off the pagination arrows.
    * @default true
@@ -58,6 +63,7 @@ export const SpeakerLayout = ({
   VideoPlaceholder,
   participantsBarPosition = 'bottom',
   participantsBarLimit,
+  mirrorLocalParticipantVideo = true,
   excludeLocalParticipant = false,
   pageArrowsVisible = true,
 }: SpeakerLayoutProps) => {
@@ -117,6 +123,8 @@ export const SpeakerLayout = ({
     );
   }
 
+  const mirror = mirrorLocalParticipantVideo ? undefined : false;
+
   if (!call) return null;
 
   return (
@@ -134,6 +142,7 @@ export const SpeakerLayout = ({
             <ParticipantView
               participant={participantInSpotlight}
               muteAudio={true}
+              mirror={mirror}
               trackType={
                 isSpeakerScreenSharing ? 'screenShareTrack' : 'videoTrack'
               }
@@ -164,6 +173,7 @@ export const SpeakerLayout = ({
                       participant={participantInSpotlight}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      mirror={mirror}
                       muteAudio={true}
                     />
                   </div>
@@ -177,6 +187,7 @@ export const SpeakerLayout = ({
                       participant={participant}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      mirror={mirror}
                       muteAudio={true}
                     />
                   </div>

package/src/core/components/ParticipantView/ParticipantView.tsx

@@ -42,6 +42,12 @@ export type ParticipantViewProps = {
    */
   trackType?: VideoTrackType | 'none';
 
+  /**
+   * Forces participant's video to be mirrored or unmirrored. By default, video track
+   * from the local participant is mirrored, and all other videos are not mirrored.
+   */
+  mirror?: boolean;
+
   /**
    * This prop is only useful for advanced use-cases (for example, building your own layout).
    * When set to `true` it will mute the give participant's audio stream on the client side.
@@ -69,6 +75,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
     {
       participant,
       trackType = 'videoTrack',
+      mirror,
       muteAudio,
       refs: { setVideoElement, setVideoPlaceholderElement } = {},
       className,
@@ -176,6 +183,7 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
               trackType !== 'videoTrack' ||
               isParticipantVideoEnabled(participant.sessionId)
             }
+            mirror={mirror}
             autoPlay
           />
           {isComponentType(ParticipantViewUI) ? (

package/src/core/components/Video/Video.tsx

@@ -25,7 +25,11 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
    * even if the participant has published video.
    */
   enabled?: boolean;
-
+  /**
+   * Forces the video to be mirrored or unmirrored. By default, video track
+   * from the local participant is mirrored, and all other videos are not mirrored.
+   */
+  mirror?: boolean;
   /**
    * The track type to display.
    */
@@ -61,6 +65,7 @@ export type VideoProps = ComponentPropsWithoutRef<'video'> & {
 
 export const Video = ({
   enabled,
+  mirror,
   trackType,
   participant,
   className,
@@ -147,7 +152,10 @@ export const Video = ({
     viewportVisibilityState?.[trackType] === VisibilityState.INVISIBLE;
 
   const hasNoVideoOrInvisible = !enabled || !isPublishingTrack || isInvisible;
-  const mirrorVideo = isLocalParticipant && trackType === 'videoTrack';
+  const mirrorVideo =
+    mirror === undefined
+      ? isLocalParticipant && trackType === 'videoTrack'
+      : mirror;
   const isScreenShareTrack = trackType === 'screenShareTrack';
   return (
     <>