Reduce whitespace

src/components/Peer.tsx

@@ -18,14 +18,16 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import Avatar from './Avatar';
 
-export type Location = 'grid' | 'sidepane' | 'preview';
+export type Location = 'grid' | 'sidepane' | 'preview' | 'presenter';
 
 interface IPeer {
   peer: HMSPeer;
   location: Location;
+  width?: number;
+  height?: number;
 }
 
-const Peer = ({ peer, location }: IPeer) => {
+const Peer = ({ peer, location, height, width }: IPeer) => {
   // TODO: Use peer id instead of Peer
   const { videoRef } = useVideo({
     trackId: peer.videoTrack
@@ -88,7 +90,13 @@ const Peer = ({ peer, location }: IPeer) => {
   };
 
   return (
-    <div className={`jlab-gather-peer-tile jlab-gather-peer-tile-${location}`}>
+    <div
+      className={`jlab-gather-peer-tile jlab-gather-peer-tile-${location} 
+      ${peer.isHandRaised ? 'jlab-gather-peer-hand-raised' : ''}
+      ${peer.id === dominantSpeaker?.id ? 'jlab-gather-active-speaker' : ''}
+      `}
+      style={{ height: height, width: width }}
+    >
       {location === 'grid' && getConnectionQualityIcon()}
       {peer.isHandRaised ? (
         <FontAwesomeIcon
@@ -103,9 +111,8 @@ const Peer = ({ peer, location }: IPeer) => {
           <video
             ref={videoRef}
             className={`jlab-gather-peer-video jlab-gather-peer-video-${location} 
-            ${peer.isHandRaised ? 'jlab-gather-peer-hand-raised' : ''}
             ${peer.isLocal ? 'jlab-gather-local' : ''}
-            ${peer.id === dominantSpeaker?.id ? 'jlab-gather-active-speaker' : ''}
+
             `}
             autoPlay
             muted

src/constants.ts

@@ -0,0 +1,14 @@
+export const ASPECT_RATIO_BREAKPOINT = 885;
+export const TILE_ASPECT_RATIO = 16 / 9;
+export const TILE_PORTRAIT_ASPECT_RATIO = 1 / 1.3;
+export const TILE_MIN_HEIGHT_SMALL = 150;
+export const TILE_MIN_HEIGHT_LARGE = 200;
+export const TILE_HORIZONTAL_MARGIN = 5;
+export const TILE_VERTICAL_MARGIN = 5;
+export const TILE_VIEW_GRID_VERTICAL_MARGIN = 13;
+export const TILE_VIEW_GRID_HORIZONTAL_MARGIN = 13;
+export const TILE_VIEW_DEFAULT_NUMBER_OF_VISIBLE_TILES = 25;
+export const SCROLL_BAR_WIDTH = 6;
+export const SIDEPANE_PEER_LIST_TILE = 128;
+export const SIDEPANE_PEER_LIST_PADDING = 3;
+export const SIDEPANE_PEER_LIST_MARGIN = 13;

src/hooks/useResizeObserver.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useResizeObserver() {
+  const [rootDimensions, setRootDimensions] = useState({ width: 0, height: 0 });
+
+  const widget = document.getElementById('jlab-gather-root-id');
+  const widgetRef = useRef(widget);
+
+  useEffect(() => {
+    if (!widgetRef.current) {
+      return;
+    }
+
+    const observer = new ResizeObserver(entries => {
+      setRootDimensions({
+        width: entries[0].contentBoxSize[0].inlineSize,
+        height: entries[0].contentBoxSize[0].blockSize
+      });
+    });
+
+    observer.observe(widgetRef.current);
+
+    return () => observer.disconnect();
+  }, []);
+
+  return rootDimensions;
+}

src/layouts/GridView.tsx

@@ -1,18 +1,44 @@
-import { selectPeers, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectPeerCount,
+  selectPeers,
+  useHMSStore
+} from '@100mslive/react-sdk';
 import React from 'react';
 import Peer from '../components/Peer';
+import { useResizeObserver } from '../hooks/useResizeObserver';
+import {
+  calculateResponsiveTileViewDimensions,
+  getMaxColumnCount
+} from '../utils/gridViewHelpers';
 
 const GridView = () => {
   const peers = useHMSStore(selectPeers);
-  // const isScreenShareOn = useHMSStore(selectIsSomeoneScreenSharing);
+  const peerCount = useHMSStore(selectPeerCount);
+
+  const rootDimensions = useResizeObserver();
+
+  const maxColumns = getMaxColumnCount(rootDimensions.width);
+
+  const { height, width } = calculateResponsiveTileViewDimensions({
+    clientWidth: rootDimensions.width,
+    clientHeight: rootDimensions.height,
+    maxColumns,
+    numberOfParticipants: peerCount,
+    desiredNumberOfVisibleTiles: 25
+  });
 
   return (
-    <div className="jlab-gather-main-grid-container">
-      <div className="jlab-gather-main-grid-view">
-        {peers.map(peer => (
-          <Peer key={peer.id} peer={peer} location="grid" />
-        ))}
-      </div>
+    <div className="jlab-gather-grid-container">
+      {peers.map(peer => (
+        <Peer
+          key={peer.id}
+          location="grid"
+          peer={peer}
+          height={height}
+          width={width}
+        />
+      ))}
+      {/* {fakePeers} */}
     </div>
   );
 };

src/layouts/PresenterView.tsx

@@ -4,12 +4,27 @@ import {
   useHMSStore
 } from '@100mslive/react-sdk';
 import React, { useEffect } from 'react';
+import Peer from '../components/Peer';
 import PeerSidePane from '../components/PeerSidePane';
-import Presenter from '../components/PresenterTile';
+import {
+  SIDEPANE_PEER_LIST_MARGIN,
+  SIDEPANE_PEER_LIST_PADDING,
+  SIDEPANE_PEER_LIST_TILE,
+  TILE_HORIZONTAL_MARGIN,
+  TILE_VIEW_GRID_VERTICAL_MARGIN
+} from '../constants';
+import { useResizeObserver } from '../hooks/useResizeObserver';
 
 const PresenterView = () => {
   const peers = useHMSStore(selectPeers);
   const presenter = useHMSStore(selectSessionStore('presenterId'));
+  const rootDimensions = useResizeObserver();
+
+  const sidepaneWidth =
+    SIDEPANE_PEER_LIST_TILE +
+    SIDEPANE_PEER_LIST_PADDING * 2 +
+    SIDEPANE_PEER_LIST_MARGIN +
+    TILE_HORIZONTAL_MARGIN;
 
   useEffect(() => {
     const controlBar = document.getElementById('jlab-gather-control-bar');
@@ -21,20 +36,18 @@ const PresenterView = () => {
   }, []);
 
   return (
-    <div className="jlab-gather-presenter-container-main">
-      <div className="jlab-gather-presenter-container">
-        {presenter ? (
-          <>
-            <Presenter
-              peer={presenter}
-              className="jlab-gather-presenter-video"
-            />
-          </>
-        ) : (
-          <div>Waiting...</div>
-        )}
-      </div>
-      <PeerSidePane peers={peers.filter(peer => peer.id !== presenter?.id)} />
+    <div className="jlab-gather-presenter-container">
+      {presenter ? (
+        <Peer
+          location="presenter"
+          peer={presenter}
+          height={rootDimensions.height - TILE_VIEW_GRID_VERTICAL_MARGIN}
+          width={rootDimensions.width - sidepaneWidth}
+        />
+      ) : (
+        <div>Waiting...</div>
+      )}
+      <PeerSidePane peers={peers} />
     </div>
   );
 };

src/layouts/PreviewView.tsx

@@ -11,13 +11,20 @@ import Peer from '../components/Peer';
 import AudioToggleButton from '../components/buttons/AudioToggleButton';
 import SettingsButton from '../components/buttons/SettingsButton';
 import VideoToggleButton from '../components/buttons/VideoToggleButton';
+import {
+  TILE_VIEW_GRID_HORIZONTAL_MARGIN,
+  TILE_VIEW_GRID_VERTICAL_MARGIN
+} from '../constants';
+import { useResizeObserver } from '../hooks/useResizeObserver';
+
 const PreviewView = () => {
   console.log('preview');
   const hmsActions = useHMSActions();
   const [isJoining, setIsJoining] = useState(false);
 
   const localPeer = useHMSStore(selectLocalPeer);
   const config = useHMSStore(selectAppData('config'));
+  const rootDimensions = useResizeObserver();
 
   const handleClick = () => {
     setIsJoining(true);
@@ -30,47 +37,48 @@ const PreviewView = () => {
   };
 
   return (
-    <div className="jlab-gather-preview-container-main">
-      <div className="jlab-gather-preview-container">
-        <h2>Get Started</h2>
-        <div>Setup audio and video</div>
-        {localPeer ? (
-          <Peer peer={localPeer} location="preview" />
-        ) : (
-          <FontAwesomeIcon
-            icon={faSpinner}
-            className="jlab-gather-spinner large"
-          />
-        )}
-        <div className="jlab-gather-control-bar">
-          <button
-            className="jlab-gather-btn-common jlab-gather-btn-primary"
-            onClick={handleClick}
-            // disabled={!enableJoin}
-          >
-            {isJoining ? (
-              <FontAwesomeIcon
-                icon={faSpinner}
-                className="jlab-gather-spinner large"
-              />
-            ) : (
-              'Join'
-            )}
-          </button>
+    <div className="jlab-gather-preview-container">
+      {localPeer ? (
+        <Peer
+          peer={localPeer}
+          location="preview"
+          height={rootDimensions.height - TILE_VIEW_GRID_VERTICAL_MARGIN}
+          width={rootDimensions.width - TILE_VIEW_GRID_HORIZONTAL_MARGIN}
+        />
+      ) : (
+        <FontAwesomeIcon
+          icon={faSpinner}
+          className="jlab-gather-spinner large"
+        />
+      )}
+      <div className="jlab-gather-control-bar">
+        <button
+          className="jlab-gather-btn-common jlab-gather-btn-primary"
+          onClick={handleClick}
+          disabled={!localPeer}
+        >
+          {isJoining ? (
+            <FontAwesomeIcon
+              icon={faSpinner}
+              className="jlab-gather-spinner large"
+            />
+          ) : (
+            'Join'
+          )}
+        </button>
 
-          <AudioToggleButton />
+        <AudioToggleButton />
 
-          <VideoToggleButton />
+        <VideoToggleButton />
 
-          <SettingsButton />
+        <SettingsButton />
 
-          <button
-            className="jlab-gather-btn-common jlab-gather-btn-danger"
-            onClick={handleBack}
-          >
-            Back
-          </button>
-        </div>
+        <button
+          className="jlab-gather-btn-common jlab-gather-btn-danger"
+          onClick={handleBack}
+        >
+          Back
+        </button>
       </div>
     </div>
   );