Grid refactor (#15)

* Change grid layout

* Make grid look better

* Fix alignment

* Post rebase touch up

Author: gjmooney

src/components/Peer.tsx

@@ -11,10 +11,9 @@ import { Icons } from './Icons';
 interface IPeer {
   peer: HMSPeer;
   className: string;
-  dimension: number;
 }
 
-const Peer = ({ peer, className, dimension }: IPeer) => {
+const Peer = ({ peer, className }: IPeer) => {
   // TODO: Use peer id instead of Peer
   const { videoRef } = useVideo({
     trackId: peer.videoTrack
@@ -29,7 +28,7 @@ const Peer = ({ peer, className, dimension }: IPeer) => {
   };
 
   return (
-    <div className={'jlab-gather-peer-tile'}>
+    <div className={`jlab-gather-peer-tile jlab-gather-peer-tile-${className}`}>
       {peer.isHandRaised ? (
         <Icons.raisedHand className="jlab-gather-peer-hand-raised-icon" />
       ) : (
@@ -39,12 +38,12 @@ const Peer = ({ peer, className, dimension }: IPeer) => {
         <>
           <video
             ref={videoRef}
-            className={`${className} ${peer.isHandRaised ? 'jlab-gather-peer-hand-raised' : ''}`}
+            className={`jlab-gather-peer-video jlab-gather-peer-video-${className} 
+            ${peer.isHandRaised ? 'jlab-gather-peer-hand-raised' : ''}
+            ${peer.isLocal ? 'jlab-gather-local' : ''}`}
             autoPlay
             muted
             playsInline
-            height={dimension}
-            width={dimension}
           />
           <div className="jlab-gather-peer-name">{peer.name}</div>
         </>

src/components/PeerSidePane.tsx

@@ -10,12 +10,7 @@ const PeerSidePane = ({ peers }: IPeerSidePane) => {
   return (
     <div className="jlab-gather-peer-sidepane-list">
       {peers.map(peer => (
-        <Peer
-          key={peer.id}
-          peer={peer}
-          className="jlab-gather-peer-video"
-          dimension={128}
-        />
+        <Peer key={peer.id} peer={peer} className="sidepane" />
       ))}
     </div>
   );

src/layouts/GridView.tsx

@@ -10,12 +10,7 @@ const GridView = () => {
     <div className="jlab-gather-main-grid-container">
       <div className="jlab-gather-main-grid-view">
         {peers.map(peer => (
-          <Peer
-            key={peer.id}
-            peer={peer}
-            className={`jlab-gather-peer-video ${peer.isLocal ? 'jlab-gather-local' : ''}`}
-            dimension={256}
-          />
+          <Peer key={peer.id} peer={peer} className={'grid'} />
         ))}
       </div>
     </div>

style/base.css

@@ -40,7 +40,6 @@
   margin-bottom: 20px;
 }
 
-/* Common styles for.jlab-gather-btn-primary and.jlab-gather-btn-danger */
 .jlab-gather-btn-common {
   padding: 6px 14px;
   cursor: pointer;
@@ -50,62 +49,81 @@
   font-family: inherit;
 }
 
-/* Specific styles for.jlab-gather-btn-primary */
 .jlab-gather-btn-primary {
   background-color: var(--jp-brand-color1);
   color: whitesmoke;
 }
 
-/* Specific styles for.jlab-gather-btn-danger */
 .jlab-gather-btn-danger {
   background-color: var(--jp-warn-color1);
   color: black;
 }
 
 .jlab-gather-main-grid-container {
-  width: auto;
   padding: 2rem 0;
+  display: flex;
+  justify-content: center;
 }
 
 .jlab-gather-main-grid-view {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.2rem;
+  padding: 0 0.5rem;
 }
 
 .jlab-gather-overflow {
   overflow-y: auto;
 }
 
+.jlab-gather-peer-hand-raised-icon {
+  fill: #f37726;
+  position: absolute;
+  z-index: 40;
+  top: 0.3rem;
+  right: 0.3rem;
+  width: 2rem;
+  height: 2rem;
+}
+
 .jlab-gather-peer-tile {
   display: flex;
   justify-content: center;
   position: relative;
   min-width: 8rem;
+  border-radius: var(--gather-border-radius);
+}
+
+.jlab-gather-peer-tile-sidepane {
   max-width: 16rem;
   min-height: 8rem;
   max-height: 16rem;
 }
 
-.jlab-gather-peer-hand-raised-icon {
-  fill: #f37726;
-  position: absolute;
-  z-index: 40;
-  top: 0.3rem;
-  right: 0.3rem;
-  width: 2rem;
-  height: 2rem;
+.jlab-gather-peer-tile-grid {
+  flex: 1 1 20%;
+  overflow: hidden;
+  max-height: 32rem;
+  aspect-ratio: 4/3;
 }
 
 .jlab-gather-peer-video {
   object-fit: cover;
   z-index: 0;
-  max-width: 256px;
-  max-height: 256px;
   border-radius: var(--gather-border-radius);
 }
 
+.jlab-gather-peer-video-sidepane {
+  max-width: 128px;
+  max-height: 128px;
+}
+
+.jlab-gather-peer-video-grid {
+  min-width: 256px;
+  min-height: 256px;
+}
+
 .jlab-gather-local {
   transform: scaleX(-1);
 }
@@ -123,8 +141,8 @@
   font-weight: bold;
   color: whitesmoke;
   text-align: center;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .jlab-gather-control-bar {
@@ -272,8 +290,6 @@
 
 .jlab-gather-icon {
   scale: 0.8;
-
-  /* fill: var(--jp-inverse-layout-color3); */
   fill: whitesmoke;
 }