From 7b0bdd320ab8323c85eccdfb528fb5638ce091a5 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 1 Nov 2024 17:26:14 -0400
Subject: [PATCH] Don't mirror rear-facing cameras in the lobby

---
 src/room/VideoPreview.module.css | 5 ++++-
 src/room/VideoPreview.tsx        | 8 +++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/room/VideoPreview.module.css b/src/room/VideoPreview.module.css
index e7aabf79..8b34b8a1 100644
--- a/src/room/VideoPreview.module.css
+++ b/src/room/VideoPreview.module.css
@@ -19,10 +19,13 @@ Please see LICENSE in the repository root for full details.
   height: 100%;
   object-fit: cover;
   background-color: black;
-  transform: scaleX(-1);
   background-color: var(--cpd-color-bg-subtle-primary);
 }
 
+video.mirror {
+  transform: scaleX(-1);
+}
+
 .avatarContainer {
   position: absolute;
   top: 0;
diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
index 80aa1069..af05369e 100644
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { useEffect, useRef, FC, ReactNode } from "react";
 import useMeasure from "react-use-measure";
-import { LocalVideoTrack } from "livekit-client";
+import { facingModeFromLocalTrack, LocalVideoTrack } from "livekit-client";
 import classNames from "classnames";
 
 import { Avatar } from "../Avatar";
@@ -56,6 +56,12 @@ export const VideoPreview: FC<Props> = ({
   return (
     <div className={classNames(styles.preview)} ref={previewRef}>
       <video
+        className={
+          videoTrack &&
+          facingModeFromLocalTrack(videoTrack).facingMode === "user"
+            ? styles.mirror
+            : undefined
+        }
         ref={videoEl}
         muted
         playsInline