3 camera design fix on smaller desktop

mynaparrot · Feb 13, 2025 · edffc40 · edffc40
1 parent 6b73c07
commit edffc40
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 22 deletions.
diff --git a/src/components/media-elements/videos/index.tsx b/src/components/media-elements/videos/index.tsx
@@ -90,31 +90,31 @@ const VideosComponent = ({ isVertical }: IVideosComponentProps) => {
           displaySwitchCamIcon = false;
         }
 
-        //for (let i = 0; i < 2; i++) {
-        totalNumWebcams++;
-        const elm = (
-          <VideoParticipant
-            key={participant.sid}
-            //key={participant.sid + '_' + i}
-            participantType={participantType}
-            participant={participant}
-            displayPinIcon={displayPinIcon}
-            displaySwitchCamIcon={displaySwitchCamIcon}
-          />
-        );
-
-        if (pinCamUserId && participant.identity === pinCamUserId) {
-          pinSubscribers = elm;
-        } else if (isAdmin) {
-          adminSubscribers.push(elm);
-        } else if (participant instanceof LocalParticipant) {
-          localSubscribers.push(elm);
-        } else {
-          otherSubscribers.push(elm);
+        for (let i = 0; i < 3; i++) {
+          totalNumWebcams++;
+          const elm = (
+            <VideoParticipant
+              // key={participant.sid}
+              key={participant.sid + '_' + i}
+              participantType={participantType}
+              participant={participant}
+              displayPinIcon={displayPinIcon}
+              displaySwitchCamIcon={displaySwitchCamIcon}
+            />
+          );
+
+          if (pinCamUserId && participant.identity === pinCamUserId) {
+            pinSubscribers = elm;
+          } else if (isAdmin) {
+            adminSubscribers.push(elm);
+          } else if (participant instanceof LocalParticipant) {
+            localSubscribers.push(elm);
+          } else {
+            otherSubscribers.push(elm);
+          }
         }
       }
     }
-    //}
 
     const allParticipants = concat(
       adminSubscribers,

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -23,3 +23,4 @@
 @use 'media_screens/min_1800';
 @use 'media_screens/max_1025';
 @use 'media_screens/min_641_max_1025';
+@use 'media_screens/h-max-800.scss';
diff --git a/src/styles/media_screens/h-max-800.scss b/src/styles/media_screens/h-max-800.scss
@@ -0,0 +1,18 @@
+@media screen and (max-height: 800px) {
+  .all-webcam-wrapper.total-cam-3 .all-webcam-wrapper-inner {
+    @apply w-full flex;
+  }
+
+  .all-webcam-wrapper.total-cam-3 .all-webcam-wrapper-inner .camera-row-0 {
+    @apply w-8/12;
+  }
+  .all-webcam-wrapper.total-cam-3 .all-webcam-wrapper-inner .camera-row-1 {
+    @apply w-4/12;
+  }
+  .all-webcam-wrapper.total-cam-3
+    .all-webcam-wrapper-inner
+    .camera-row-1
+    .video-camera-item {
+    @apply w-full;
+  }
+}