Tweaks (#27)

* Add mute icon to name bar and fix bg bug

* Hide peer sidepane when presenting on smaller displays

* Ensure camera is turned off when done

Author: gjmooney

src/arCubePlugin.ts

@@ -162,8 +162,16 @@ class ArCubePlugin implements HMSVideoPlugin {
 
   stop() {
     // Remove video element added by AR.js
-    const el = document.getElementById('arjs-video');
-    el?.remove();
+    const video = document.getElementById('arjs-video') as HTMLVideoElement;
+
+    if (video) {
+      for (const track of (video.srcObject as MediaStream).getTracks()) {
+        track.stop();
+      }
+      video.srcObject = null;
+
+      video.remove();
+    }
   }
 }
 

src/components/Peer.tsx

@@ -4,6 +4,7 @@ import {
   selectDominantSpeaker,
   selectIsPeerVideoEnabled,
   selectVideoTrackByPeerID,
+  useAVToggle,
   useHMSStore,
   useVideo
 } from '@100mslive/react-sdk';
@@ -13,7 +14,11 @@ import {
   faFaceSmileBeam,
   faFaceTired
 } from '@fortawesome/free-regular-svg-icons';
-import { faHand } from '@fortawesome/free-solid-svg-icons';
+import {
+  faHand,
+  faMicrophone,
+  faMicrophoneSlash
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import Avatar from './Avatar';
@@ -34,6 +39,7 @@ const Peer = ({ peer, location, height, width }: IPeer) => {
   });
   const videoTrack = useHMSStore(selectVideoTrackByPeerID(peer.id));
   const isPeerVideoEnabled = useHMSStore(selectIsPeerVideoEnabled(peer.id));
+  const { isLocalAudioEnabled } = useAVToggle();
 
   const dominantSpeaker = useHMSStore(selectDominantSpeaker);
   const downlinkQuality = useHMSStore(
@@ -94,6 +100,7 @@ const Peer = ({ peer, location, height, width }: IPeer) => {
       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' : ''}
+      ${!isPeerVideoEnabled ? 'jlab-gather-peer-tile-grid-bg' : ''}
       `}
       style={{ height: height, width: width }}
     >
@@ -111,14 +118,28 @@ const Peer = ({ peer, location, height, width }: IPeer) => {
           <video
             ref={videoRef}
             className={`jlab-gather-peer-video jlab-gather-peer-video-${location} 
-            ${peer.isLocal ? 'jlab-gather-local' : ''}
-            
-            `}
+            ${peer.isLocal ? 'jlab-gather-local' : ''}`}
             autoPlay
             muted
             playsInline
           />
-          <div className="jlab-gather-peer-name">{peer.name}</div>
+          {location !== 'presenter' && (
+            <div className="jlab-gather-peer-name">
+              {isLocalAudioEnabled ? (
+                <FontAwesomeIcon
+                  icon={faMicrophone}
+                  className="jlab-gather-icon-small"
+                />
+              ) : (
+                <FontAwesomeIcon
+                  icon={faMicrophoneSlash}
+                  className="jlab-gather-icon-small"
+                />
+              )}
+              {'  '}
+              {peer.name}
+            </div>
+          )}
         </>
       ) : (
         <Avatar

src/layouts/PresenterView.tsx

@@ -7,11 +7,13 @@ import React, { useEffect } from 'react';
 import Peer from '../components/Peer';
 import PeerSidePane from '../components/PeerSidePane';
 import {
+  ASPECT_RATIO_BREAKPOINT,
   SESSION_STORE,
   SIDEPANE_PEER_LIST_MARGIN,
   SIDEPANE_PEER_LIST_PADDING,
   SIDEPANE_PEER_LIST_TILE,
   TILE_HORIZONTAL_MARGIN,
+  TILE_VIEW_GRID_HORIZONTAL_MARGIN,
   TILE_VIEW_GRID_VERTICAL_MARGIN
 } from '../constants';
 import { useResizeObserver } from '../hooks/useResizeObserver';
@@ -21,11 +23,14 @@ const PresenterView = () => {
   const presenter = useHMSStore(selectSessionStore(SESSION_STORE.presenterId));
   const rootDimensions = useResizeObserver();
 
-  const sidepaneWidth =
-    SIDEPANE_PEER_LIST_TILE +
-    SIDEPANE_PEER_LIST_PADDING * 2 +
-    SIDEPANE_PEER_LIST_MARGIN +
-    TILE_HORIZONTAL_MARGIN;
+  const widthToUse =
+    rootDimensions.width >= ASPECT_RATIO_BREAKPOINT
+      ? rootDimensions.width -
+        SIDEPANE_PEER_LIST_TILE +
+        SIDEPANE_PEER_LIST_PADDING * 2 +
+        SIDEPANE_PEER_LIST_MARGIN +
+        TILE_HORIZONTAL_MARGIN
+      : rootDimensions.width - TILE_VIEW_GRID_HORIZONTAL_MARGIN;
 
   useEffect(() => {
     const controlBar = document.getElementById('jlab-gather-control-bar');
@@ -43,12 +48,14 @@ const PresenterView = () => {
           location="presenter"
           peer={presenter}
           height={rootDimensions.height - TILE_VIEW_GRID_VERTICAL_MARGIN}
-          width={rootDimensions.width - sidepaneWidth}
+          width={widthToUse}
         />
       ) : (
         <div>Waiting...</div>
       )}
-      <PeerSidePane peers={peers} />
+      {rootDimensions.width > ASPECT_RATIO_BREAKPOINT ? (
+        <PeerSidePane peers={peers} />
+      ) : null}
     </div>
   );
 };

style/base.css

@@ -114,6 +114,10 @@
 .jlab-gather-peer-tile-grid {
   align-items: center;
   flex-grow: 1;
+  position: relative;
+}
+
+.jlab-gather-peer-tile-grid.jlab-gather-peer-tile-grid-bg {
   background-color: var(--gather-speaker-bg);
 }
 
@@ -310,6 +314,11 @@
   font-size: 2rem;
 }
 
+.jlab-gather-icon-small {
+  width: 15px;
+  font-size: 0.75rem;
+}
+
 .jlab-gather-icon-breathe {
   animation: breathe 3s infinite alternate;
   color: #f37726;
@@ -366,7 +375,7 @@
 }
 
 .jlab-gather-avatar-grid {
-  height: 60%;
+  /* height: 60%; */
 }
 
 .jlab-gather-avatar-sidepane {