Fix mirror in room and livestream

examples/mobile-client/fishjam-chat/app/(tabs)/livestream.tsx

@@ -1,15 +1,15 @@
-import React, { useState } from "react";
+import { router } from "expo-router";
+import { useState } from "react";
 import {
   Dimensions,
   Image,
-  KeyboardAvoidingView,
   Keyboard,
+  KeyboardAvoidingView,
   StyleSheet,
   Text,
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { router } from "expo-router";
-import { Button, TextInput, DismissKeyboard } from "../../components";
+import { Button, DismissKeyboard, TextInput } from "../../components";
 
 const FishjamLogo = require("../../assets/images/fishjam-logo.png");
 

examples/mobile-client/fishjam-chat/app/livestream/screen-sharing.tsx

@@ -1,13 +1,13 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { StyleSheet, View, Text } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { useLocalSearchParams } from "expo-router";
 import {
-  useSandbox,
+  useInitializeDevices,
   useLivestreamStreamer,
+  useSandbox,
   useScreenShare,
-  useInitializeDevices,
 } from "@fishjam-cloud/react-native-client";
+import { useLocalSearchParams } from "expo-router";
+import { useCallback, useEffect, useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 import { Button } from "../../components";
 import { BrandColors } from "../../utils/Colors";
@@ -87,7 +87,7 @@ export default function LivestreamScreenSharingScreen() {
         } catch (err) {
           console.error(
             "Failed to clean up livestream resources on unmount:",
-            err
+            err,
           );
         }
       })();

examples/mobile-client/fishjam-chat/app/livestream/viewer.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect } from "react";
-import { StyleSheet, View, Text } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { useLocalSearchParams } from "expo-router";
 import {
-  useSandbox,
-  useLivestreamViewer,
   RTCView,
+  useLivestreamViewer,
+  useSandbox,
 } from "@fishjam-cloud/react-native-client";
+import { useLocalSearchParams } from "expo-router";
+import { useEffect } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { BrandColors } from "../../utils/Colors";
 
 export default function LivestreamViewerScreen() {
@@ -51,7 +51,7 @@ export default function LivestreamViewerScreen() {
               style={styles.rtcView}
               mediaStream={stream}
               objectFit="contain"
-              mirror={true}
+              mirror={false}
             />
           ) : (
             <View style={styles.placeholder}>

examples/mobile-client/fishjam-chat/components/VideosGrid.tsx

@@ -1,20 +1,20 @@
-import React, { useCallback, useMemo } from "react";
+import {
+  type PeerWithTracks,
+  RTCView,
+  type Track,
+  usePeers,
+} from "@fishjam-cloud/react-native-client";
+import { useCallback, useMemo } from "react";
 import {
   FlatList,
   ListRenderItemInfo,
   StyleSheet,
-  View,
   Text,
+  View,
 } from "react-native";
-import {
-  RTCView,
-  type Track,
-  type PeerWithTracks,
-  usePeers,
-} from "@fishjam-cloud/react-native-client";
 
-import NoCameraView from "./NoCameraView";
 import { BrandColors } from "../utils/Colors";
+import NoCameraView from "./NoCameraView";
 
 export type GridTrack = {
   track: Track | null;
@@ -26,7 +26,7 @@ export type GridTrack = {
 
 const createGridTracksFromPeer = (
   peer: PeerWithTracks<unknown, unknown>,
-  isLocal: boolean
+  isLocal: boolean,
 ): GridTrack[] => {
   const tracks: GridTrack[] = [];
 
@@ -65,14 +65,15 @@ const createGridTracksFromPeer = (
 
 export const parsePeersToTracks = (
   localPeer: PeerWithTracks<unknown, unknown> | null,
-  remotePeers: PeerWithTracks<unknown, unknown>[]
+  remotePeers: PeerWithTracks<unknown, unknown>[],
 ): GridTrack[] => [
   ...(localPeer ? createGridTracksFromPeer(localPeer, true) : []),
   ...remotePeers.flatMap((peer) => createGridTracksFromPeer(peer, false)),
 ];
 
 const GridTrackItem = ({ peer, index }: { peer: GridTrack; index: number }) => {
   const isSelfVideo = peer.isLocal && peer.track?.metadata?.type === "camera";
+  const isCamera = peer.track?.metadata?.type === "camera";
   const mediaStream =
     peer.track?.stream && !peer.track?.metadata?.paused
       ? peer.track.stream
@@ -101,7 +102,7 @@ const GridTrackItem = ({ peer, index }: { peer: GridTrack; index: number }) => {
               stopAutomatically: true,
               allowsCameraInBackground: true,
             }}
-            mirror={true}
+            mirror={isCamera}
           />
         ) : (
           <View style={styles.noVideoContainer}>
@@ -129,12 +130,12 @@ export default function VideosGrid({ username }: VideosGridProps) {
     ({ item, index }: ListRenderItemInfo<GridTrack>) => (
       <GridTrackItem peer={item} index={index} />
     ),
-    []
+    [],
   );
 
   const ListEmptyComponent = useMemo(
     () => <NoCameraView username={username} />,
-    [username]
+    [username],
   );
 
   return (