Merge pull request #93 from whereby/thomas/PAN-349-add-mirror-support

Add mirror support
whereby · Oct 20, 2023 · ea96fc6 · ea96fc6
2 parents 057f556 + 12d9b4f
commit ea96fc6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@whereby.com/browser-sdk",
-    "version": "2.0.0-alpha27",
+    "version": "2.0.0-alpha26",
     "description": "Modules for integration Whereby video in web apps",
     "author": "Whereby AS",
     "license": "MIT",

diff --git a/src/lib/react/VideoView.tsx b/src/lib/react/VideoView.tsx
@@ -4,14 +4,15 @@ import debounce from "../utils/debounce";
 interface VideoViewSelfProps {
     stream: MediaStream;
     muted?: boolean;
+    mirror?: boolean;
     style?: React.CSSProperties;
     onResize?: ({ width, height, stream }: { width: number; height: number; stream: MediaStream }) => void;
 }
 
 type VideoViewProps = VideoViewSelfProps &
     React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
 
-export default ({ muted, stream, onResize, ...rest }: VideoViewProps) => {
+export default ({ muted, mirror = false, stream, onResize, ...rest }: VideoViewProps) => {
     const videoEl = useRef<HTMLVideoElement>(null);
 
     useEffect(() => {
@@ -57,5 +58,13 @@ export default ({ muted, stream, onResize, ...rest }: VideoViewProps) => {
         }
     }, [muted, stream, videoEl]);
 
-    return <video ref={videoEl} autoPlay playsInline {...rest} />;
+    return (
+        <video
+            ref={videoEl}
+            autoPlay
+            playsInline
+            {...rest}
+            style={{ transform: mirror ? "scaleX(-1)" : "none", ...rest.style }}
+        />
+    );
 };