Enable controlling local stream mirroring by introducing isMirrored…

…-prop (#82) * Simplify code, reduce duplication, express intent clearer * the `isLocal &&` logic was effectively duplicated in `isFrontFacing`, but does not semantically answer this yes/no question * `isFrontFacing` was not the most appropriate name so far, as it is also `true` when `facingMode` or `mediaStreamTrack` are undefined, hence this is a better name * Add `isMirrored`-prop to enable overriding the default behaviour Closes #29 * Create wild-otters-complain.md Co-authored-by: David Zhao <[email protected]>
livekit · Aug 6, 2022 · d94b678 · d94b678
1 parent 7a2a96f
commit d94b678
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/.changeset/wild-otters-complain.md b/.changeset/wild-otters-complain.md
@@ -0,0 +1,5 @@
+---
+"@livekit/react-core": patch
+---
+
+Enable controlling local stream mirroring by introducing `isMirrored`-prop
diff --git a/packages/core/src/components/VideoRenderer.tsx b/packages/core/src/components/VideoRenderer.tsx
@@ -5,6 +5,11 @@ import React, { CSSProperties, useCallback, useEffect, useRef } from 'react';
 export interface VideoRendererProps {
   track: Track;
   isLocal: boolean;
+  /**
+   * Mirror the video on the y axis.
+   * Is `true` by default for local, front-facing (and undetermined facing) media tracks,
+   * unless overriden by this setting */
+  isMirrored?: boolean;
   objectFit?: Property.ObjectFit;
   className?: string;
   width?: Property.Width;
@@ -15,6 +20,7 @@ export interface VideoRendererProps {
 export const VideoRenderer = ({
   track,
   isLocal,
+  isMirrored,
   objectFit,
   className,
   onSizeChanged,
@@ -53,13 +59,16 @@ export const VideoRenderer = ({
     };
   }, [ref]);
 
-  const isFrontFacing =
-    isLocal && track.mediaStreamTrack?.getSettings().facingMode !== 'environment';
   const style: CSSProperties = {
-    transform: isLocal && isFrontFacing ? 'rotateY(180deg)' : '',
     width: width,
     height: height,
   };
+
+  const isFrontFacingOrUnknown = track.mediaStreamTrack?.getSettings().facingMode !== 'environment';
+  if (isMirrored || (isMirrored === undefined && isLocal && isFrontFacingOrUnknown)) {
+    style.transform = 'rotateY(180deg)';
+  }
+
   if (objectFit) {
     style.objectFit = objectFit;
   }