softhon · obrucheoghene · Nov 17, 2025 · Nov 17, 2025 · Nov 17, 2025 · Nov 17, 2025
diff --git a/index.html b/index.html
@@ -4,8 +4,33 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Mitsi</title>
+    <meta
+      name="description"
+      content="Mitsi - Conferencing Platform to Connect and Collaborate"
+    />
+    <meta
+      name="keywords"
+      content="Mitsi, Connect, Collaborate, Conferencing Video Conferencing, audio conferencing, video and audio conferencing, WebRTC, meeting, online meetings, real-time collaboration, conferencing, virtual events, live streaming"
+    />
+    <meta name="robots" content="index, follow" />
+    <meta property="og:title" content="Mitsi - Connect and Collaborate" />
+    <meta
+      property="og:description"
+      content="Mitsi - Conferencing Platform to Connect and Collaborate"
+    />
+    <meta property="og:image" content="https://mitsi.app/logo.svg" />
+    <meta property="og:url" content="https://mitsi.app" />
+    <meta property="og:type" content="website" />
+
+    <link rel="icon" href="https://mitsi.app/favicon.ico" type="image/x-icon" />
+    <link rel="apple-touch-icon" href="https://mitsi.app/logo.svg" />
+    <title>Mitsi - Conferencing Platform to Connect and Collaborate</title>
     <script src="/config.js"></script>
+    <script
+      defer
+      src="https://cloud.umami.is/script.js"
+      data-website-id="d7d9f6dd-d496-4e34-ad16-3094126667f9"
+    ></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^7.62.0",
     "react-router-dom": "^7.8.2",
     "socket.io-client": "^4.8.1",
@@ -56,6 +57,7 @@
     "@types/node": "^24.3.0",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
+    "@types/react-helmet": "^6.1.11",
     "@types/uniqid": "^5.3.4",
     "@vitejs/plugin-react": "^5.0.1",
     "@vitest/eslint-plugin": "^1.3.4",

diff --git a/src/components/room/control-bar.tsx b/src/components/room/control-bar.tsx
@@ -10,8 +10,8 @@ import Screen from './screen';
 
 const ControlBar = () => {
   return (
-    <div className="p-2  backdrop-blur-sm  ">
-      <div className="flex items-center justify-center md:justify-between gap-2 max-w-4xl mx-auto">
+    <div className="p-2  backdrop-blur-sm flex  ">
+      <div className="flex items-center justify-center md:justify-between gap-2 max-w-4xl mx-auto ">
         {/* Left Controls */}
         <div className="flex items-center gap-2">
           {/* Microphone */}

diff --git a/src/components/room/grid/my-tile.tsx b/src/components/room/grid/my-tile.tsx
@@ -26,7 +26,6 @@ const MyTile: React.FC<PeerTileProps> = ({ layout }) => {
     if (!cameraOn || !videoRef.current) return;
     const track = getTrack('camera');
     if (!track) return;
-    console.log({ track });
     videoRef.current.srcObject = new MediaStream([track]);
   }, [cameraOn, cameraDeviceId, getTrack]);
 
@@ -41,16 +40,18 @@ const MyTile: React.FC<PeerTileProps> = ({ layout }) => {
         {cameraOn ? (
           <video
             ref={videoRef}
-            className="w-full h-full object-cover relative z-10"
+            className={cn(
+              'w-full h-full relative z-10 scale-x-[-1]',
+              !peerMe.isMobileDevice && 'object-cover'
+            )}
             autoPlay
             muted
             playsInline
             webkit-playsinline="true"
           />
         ) : (
           <Avatar className=" w-24 h-24">
-            {/* <AvatarImage src="https://github.com/shadcn.png" /> */}
-            <AvatarFallback className="text-white text-xl bg-gradient-to-bl from-white/15 to-white/1  backdrop-blur-x">
+            <AvatarFallback className="text-white text-xl bg-linear-to-bl from-white/15 to-white/1  backdrop-blur-x">
               {getInitials(peerMe.name)}
             </AvatarFallback>
           </Avatar>

diff --git a/src/components/room/grid/peer-tile.tsx b/src/components/room/grid/peer-tile.tsx
@@ -31,15 +31,18 @@ export const PeerTile: React.FC<PeerTileProps> = ({ peerId, layout }) => {
 
   return (
     <div
-      className=" bg-gradient-to-br from-white/5 to-white/2 border  border-white/10 backdrop-blur-xl rounded-lg overflow-hidden flex flex-col relative transition-all duration-300 ease-in-out"
+      className=" bg-linear-to-br from-white/5 to-white/2 border  border-white/10 backdrop-blur-xl rounded-lg overflow-hidden flex flex-col relative transition-all duration-300 ease-in-out"
       style={{ width: `${layout.width}px`, height: `${layout.height}px` }}
     >
       {/* Video/Avatar Area */}
       <div className="flex-1 relative flex items-center justify-center">
         {media?.camera ? (
           <video
             ref={videoRef}
-            className="w-full h-full object-cover relative z-10"
+            className={cn(
+              'w-full h-full relative z-10',
+              !peerData.isMobileDevice && 'object-cover'
+            )}
             autoPlay
             muted
             playsInline

diff --git a/src/components/room/join/join-camera-preview.tsx b/src/components/room/join/join-camera-preview.tsx
@@ -1,5 +1,5 @@
 import { useMedia } from '@/hooks/use-media';
-import { cn } from '@/lib/utils';
+import { cn, isMobileDevice } from '@/lib/utils';
 import { useCameraDeviceId, useCameraOn, useMicOn } from '@/store/conf/hooks';
 import { Mic, MicOff, User } from 'lucide-react';
 import { useEffect, useRef } from 'react';
@@ -10,6 +10,7 @@ const CameraPreview = () => {
   const micOn = useMicOn();
   const cameraOn = useCameraOn();
   const cameraDeviceId = useCameraDeviceId();
+  const isAMobileDevice = isMobileDevice();
 
   useEffect(() => {
     if (!cameraOn || !videoRef.current) return;
@@ -27,7 +28,10 @@ const CameraPreview = () => {
         {cameraOn ? (
           <video
             ref={videoRef}
-            className="w-full h-full object-cover relative z-10"
+            className={cn(
+              'w-full h-full relative z-10',
+              !isAMobileDevice && 'object-cover'
+            )}
             autoPlay
             muted
             playsInline
@@ -44,7 +48,7 @@ const CameraPreview = () => {
         )}
 
         {/* Mic Status Indicator with enhanced animation */}
-        <div className="absolute top-4 right-4">
+        <div className="absolute top-4 right-4 z-20">
           <div
             className={cn(
               'w-10 h-10 rounded-full flex items-center justify-center shadow-lg transition-all relative',

diff --git a/src/components/room/join/join-form.tsx b/src/components/room/join/join-form.tsx
@@ -14,7 +14,7 @@ import {
   useRoomActions,
   useRoomData,
 } from '@/store/conf/hooks';
-import { getPeerId } from '@/lib/utils';
+import { getPeerId, isMobileDevice } from '@/lib/utils';
 import { Access, type PeerData, type RoomData } from '@/types';
 import { useSignaling } from '@/hooks/use-signaling';
 import { Actions } from '@/types/actions';
@@ -57,6 +57,7 @@ const JoinForm = () => {
       const peerData: PeerData = {
         id: getPeerId(),
         name: data.name,
+        isMobileDevice: isMobileDevice(),
       };
 
       peerActions.addData(peerData, true);

diff --git a/src/components/room/join/join-header.tsx b/src/components/room/join/join-header.tsx
@@ -17,8 +17,6 @@ const Header = () => {
 
   return (
     <div className="text-center space-y-4">
-      {/* Enhanced Loading Spinner Icon */}
-
       <img src={Assets.logo} className="w-14 h-14 mx-auto" alt="Logo" />
 
       <div className="space-y-2 relative">
@@ -48,20 +46,16 @@ const Header = () => {
             </Tooltip>
           </div>
         )}
-        {/* <div className="text-gray-400 md:text-lg relative">
-          Setup your audio and video before joining
-        </div> */}
       </div>
 
-      {/* Enhanced Status Badge */}
       <div className="relative">
         <Badge
           variant="outline"
           className="bg-gray-800/50 text-gray-300 border-gray-600 relative"
         >
           {peerOthersList.length
             ? `${peerOthersList.length} people have joined`
-            : 'You are the first to join'}
+            : 'You will be the first to join'}
         </Badge>
       </div>
     </div>

diff --git a/src/pages/room/conference.tsx b/src/pages/room/conference.tsx
@@ -2,20 +2,17 @@ import React from 'react';
 
 import ControlBar from '@/components/room/control-bar';
 import Header from '@/components/room/header';
-// import { ConferenceGrid } from '@/components/room/grid/conference-grid';
 import PeerAudioList from '@/components/room/peer-audio-list';
 import Display from '@/components/room/display';
 import DynamicBg from '@/components/dynamic-bg';
 
 export const Conference: React.FC = () => {
   return (
-    <div className=" relative h-screen flex flex-col overflow-hidden justify-between">
+    <div className=" fixed h-screen w-full flex flex-col overflow-hidden justify-between">
       <DynamicBg />
       {/* Header */}
       <Header />
 
-      {/* Main Video Grid */}
-      {/* <ConferenceGrid /> */}
       <Display />
       {/* Bottom Controls */}
       <ControlBar />

diff --git a/src/pages/room/index.tsx b/src/pages/room/index.tsx
@@ -4,15 +4,25 @@ import { ServiceProvider } from '@/context/service-context';
 import { useRoomAccess } from '@/store/conf/hooks';
 import { Access } from '@/types';
 import Conference from './conference';
+import { Helmet } from 'react-helmet';
 
 const Room = () => {
   const roomAccess = useRoomAccess();
+  const description =
+    'You are invited to meeting on Mitsi conferencing platform to connect and collaborate ';
+
   return (
-    <ServiceProvider>
-      <RoomProvider>
-        {roomAccess === Access.Allowed ? <Conference /> : <JoinRoom />}
-      </RoomProvider>
-    </ServiceProvider>
+    <>
+      <Helmet>
+        <meta name="description" content={description} />
+        <meta property="og:description" content={description} />
+      </Helmet>
+      <ServiceProvider>
+        <RoomProvider>
+          {roomAccess === Access.Allowed ? <Conference /> : <JoinRoom />}
+        </RoomProvider>
+      </ServiceProvider>
+    </>
   );
 };