Switch to FontAwesome icons (#16)

gjmooney · web-flow · commit 8a403e166eb2 · 2024-05-29T12:49:58.000+02:00
diff --git a/icons/forbidden.svg b/icons/forbidden.svg
diff --git a/icons/raised_hand.svg b/icons/raised_hand.svg
diff --git a/package.json b/package.json
@@ -59,6 +59,10 @@
     "dependencies": {
         "@100mslive/react-sdk": "^0.10.3",
         "@ar-js-org/ar.js": "^3.4.5",
+        "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "@fortawesome/free-regular-svg-icons": "^6.5.2",
+        "@fortawesome/free-solid-svg-icons": "^6.5.2",
+        "@fortawesome/react-fontawesome": "latest",
         "@jupyterlab/application": "^4.1.4",
         "@jupyterlab/apputils": "^4.2.4",
         "@jupyterlab/coreutils": "^6.0.0",
diff --git a/src/components/ControlBar.tsx b/src/components/ControlBar.tsx
@@ -6,6 +6,15 @@ import {
   useHMSActions,
   useHMSStore
 } from '@100mslive/react-sdk';
+import {} from '@fortawesome/free-regular-svg-icons';
+import {
+  faMicrophone,
+  faMicrophoneSlash,
+  faPersonThroughWindow,
+  faVideo,
+  faVideoSlash
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useEffect } from 'react';
 import PluginButton from './buttons/PluginButton';
 import RaiseHandButton from './buttons/RaiseHandButton';
@@ -35,11 +44,22 @@ const ControlBar = () => {
   return (
     <div id="jlab-gather-control-bar" className="jlab-gather-control-bar">
       <button className="jlab-gather-btn-control" onClick={toggleAudio}>
-        {isLocalAudioEnabled ? 'Mute' : 'Unmute'}
+        {isLocalAudioEnabled ? (
+          <FontAwesomeIcon icon={faMicrophone} className="jlab-gather-icon" />
+        ) : (
+          <FontAwesomeIcon
+            icon={faMicrophoneSlash}
+            className="jlab-gather-icon"
+          />
+        )}
       </button>
 
       <button className="jlab-gather-btn-control" onClick={toggleVideo}>
-        {isLocalVideoEnabled ? 'Hide' : 'Unhide'}
+        {isLocalVideoEnabled ? (
+          <FontAwesomeIcon icon={faVideo} className="jlab-gather-icon" />
+        ) : (
+          <FontAwesomeIcon icon={faVideoSlash} className="jlab-gather-icon" />
+        )}
       </button>
 
       {/* <ScreenShareButton /> */}
@@ -50,10 +70,13 @@ const ControlBar = () => {
       <SettingsButton />
 
       <button
-        className="jlab-gather-btn-common jlab-gather-btn-danger"
+        className="jlab-gather-btn-control jlab-gather-btn-danger"
         onClick={handleLeave}
       >
-        Leave Room
+        <FontAwesomeIcon
+          icon={faPersonThroughWindow}
+          className="jlab-gather-icon"
+        />
       </button>
     </div>
   );
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
@@ -1,81 +1,7 @@
 import { LabIcon } from '@jupyterlab/ui-components';
-import React from 'react';
 import arSvgStr from '../../icons/ar.svg';
 import duckLogo from '../../icons/duckduck.svg';
 
-interface IIcons {
-  className?: string;
-}
-
-export const Icons = {
-  raisedHand: ({ className }: IIcons) => (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
-    >
-      <path d="M256 0c-25.3 0-47.2 14.7-57.6 36c-7-2.6-14.5-4-22.4-4c-35.3 0-64 28.7-64 64V261.5l-2.7-2.7c-25-25-65.5-25-90.5 0s-25 65.5 0 90.5L106.5 437c48 48 113.1 75 181 75H296h8c1.5 0 3-.1 4.5-.4c91.7-6.2 165-79.4 171.1-171.1c.3-1.5 .4-3 .4-4.5V160c0-35.3-28.7-64-64-64c-5.5 0-10.9 .7-16 2V96c0-35.3-28.7-64-64-64c-7.9 0-15.4 1.4-22.4 4C303.2 14.7 281.3 0 256 0zM240 96.1c0 0 0-.1 0-.1V64c0-8.8 7.2-16 16-16s16 7.2 16 16V95.9c0 0 0 .1 0 .1V232c0 13.3 10.7 24 24 24s24-10.7 24-24V96c0 0 0 0 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16v55.9c0 0 0 .1 0 .1v80c0 13.3 10.7 24 24 24s24-10.7 24-24V160.1c0 0 0-.1 0-.1c0-8.8 7.2-16 16-16s16 7.2 16 16V332.9c-.1 .6-.1 1.3-.2 1.9c-3.4 69.7-59.3 125.6-129 129c-.6 0-1.3 .1-1.9 .2H296h-8.5c-55.2 0-108.1-21.9-147.1-60.9L52.7 315.3c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L119 336.4c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2V96c0-8.8 7.2-16 16-16c8.8 0 16 7.1 16 15.9V232c0 13.3 10.7 24 24 24s24-10.7 24-24V96.1z" />
-    </svg>
-  ),
-  spinner: ({ className }: IIcons) => (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
-    >
-      <path d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z" />
-    </svg>
-  ),
-  forbidden: ({ className }: IIcons) => (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
-    >
-      <path d="M8 .5A7.77 7.77 0 0 0 0 8a7.77 7.77 0 0 0 8 7.5A7.77 7.77 0 0 0 16 8 7.77 7.77 0 0 0 8 .5zM1.25 8A6 6 0 0 1 3 3.85L12.09 13A7.12 7.12 0 0 1 8 14.25 6.52 6.52 0 0 1 1.25 8zM13 12.15 3.91 3A7.12 7.12 0 0 1 8 1.75 6.52 6.52 0 0 1 14.75 8 6 6 0 0 1 13 12.15z" />
-    </svg>
-  ),
-  settings: ({ className }: IIcons) => (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 54 54"
-    >
-      <g>
-        <path
-          d="M51.22,21h-5.052c-0.812,0-1.481-0.447-1.792-1.197s-0.153-1.54,0.42-2.114l3.572-3.571
-  c0.525-0.525,0.814-1.224,0.814-1.966c0-0.743-0.289-1.441-0.814-1.967l-4.553-4.553c-1.05-1.05-2.881-1.052-3.933,0l-3.571,3.571
-  c-0.574,0.573-1.366,0.733-2.114,0.421C33.447,9.313,33,8.644,33,7.832V2.78C33,1.247,31.753,0,30.22,0H23.78
-  C22.247,0,21,1.247,21,2.78v5.052c0,0.812-0.447,1.481-1.197,1.792c-0.748,0.313-1.54,0.152-2.114-0.421l-3.571-3.571
-  c-1.052-1.052-2.883-1.05-3.933,0l-4.553,4.553c-0.525,0.525-0.814,1.224-0.814,1.967c0,0.742,0.289,1.44,0.814,1.966l3.572,3.571
-  c0.573,0.574,0.73,1.364,0.42,2.114S8.644,21,7.832,21H2.78C1.247,21,0,22.247,0,23.78v6.439C0,31.753,1.247,33,2.78,33h5.052
-  c0.812,0,1.481,0.447,1.792,1.197s0.153,1.54-0.42,2.114l-3.572,3.571c-0.525,0.525-0.814,1.224-0.814,1.966
-  c0,0.743,0.289,1.441,0.814,1.967l4.553,4.553c1.051,1.051,2.881,1.053,3.933,0l3.571-3.572c0.574-0.573,1.363-0.731,2.114-0.42
-  c0.75,0.311,1.197,0.98,1.197,1.792v5.052c0,1.533,1.247,2.78,2.78,2.78h6.439c1.533,0,2.78-1.247,2.78-2.78v-5.052
-  c0-0.812,0.447-1.481,1.197-1.792c0.751-0.312,1.54-0.153,2.114,0.42l3.571,3.572c1.052,1.052,2.883,1.05,3.933,0l4.553-4.553
-  c0.525-0.525,0.814-1.224,0.814-1.967c0-0.742-0.289-1.44-0.814-1.966l-3.572-3.571c-0.573-0.574-0.73-1.364-0.42-2.114
-  S45.356,33,46.168,33h5.052c1.533,0,2.78-1.247,2.78-2.78V23.78C54,22.247,52.753,21,51.22,21z M52,30.22
-  C52,30.65,51.65,31,51.22,31h-5.052c-1.624,0-3.019,0.932-3.64,2.432c-0.622,1.5-0.295,3.146,0.854,4.294l3.572,3.571
-  c0.305,0.305,0.305,0.8,0,1.104l-4.553,4.553c-0.304,0.304-0.799,0.306-1.104,0l-3.571-3.572c-1.149-1.149-2.794-1.474-4.294-0.854
-  c-1.5,0.621-2.432,2.016-2.432,3.64v5.052C31,51.65,30.65,52,30.22,52H23.78C23.35,52,23,51.65,23,51.22v-5.052
-  c0-1.624-0.932-3.019-2.432-3.64c-0.503-0.209-1.021-0.311-1.533-0.311c-1.014,0-1.997,0.4-2.761,1.164l-3.571,3.572
-  c-0.306,0.306-0.801,0.304-1.104,0l-4.553-4.553c-0.305-0.305-0.305-0.8,0-1.104l3.572-3.571c1.148-1.148,1.476-2.794,0.854-4.294
-  C10.851,31.932,9.456,31,7.832,31H2.78C2.35,31,2,30.65,2,30.22V23.78C2,23.35,2.35,23,2.78,23h5.052
-  c1.624,0,3.019-0.932,3.64-2.432c0.622-1.5,0.295-3.146-0.854-4.294l-3.572-3.571c-0.305-0.305-0.305-0.8,0-1.104l4.553-4.553
-  c0.304-0.305,0.799-0.305,1.104,0l3.571,3.571c1.147,1.147,2.792,1.476,4.294,0.854C22.068,10.851,23,9.456,23,7.832V2.78
-  C23,2.35,23.35,2,23.78,2h6.439C30.65,2,31,2.35,31,2.78v5.052c0,1.624,0.932,3.019,2.432,3.64
-  c1.502,0.622,3.146,0.294,4.294-0.854l3.571-3.571c0.306-0.305,0.801-0.305,1.104,0l4.553,4.553c0.305,0.305,0.305,0.8,0,1.104
-  l-3.572,3.571c-1.148,1.148-1.476,2.794-0.854,4.294c0.621,1.5,2.016,2.432,3.64,2.432h5.052C51.65,23,52,23.35,52,23.78V30.22z"
-        />
-        <path
-          d="M27,18c-4.963,0-9,4.037-9,9s4.037,9,9,9s9-4.037,9-9S31.963,18,27,18z M27,34c-3.859,0-7-3.141-7-7s3.141-7,7-7
-  s7,3.141,7,7S30.859,34,27,34z"
-        />
-      </g>
-    </svg>
-  )
-};
-
 export const LogoIcon = new LabIcon({
   name: 'jupyterlab-gather:icon_logo',
   svgstr: duckLogo
diff --git a/src/components/Peer.tsx b/src/components/Peer.tsx
@@ -4,9 +4,10 @@ import {
   useHMSStore,
   useVideo
 } from '@100mslive/react-sdk';
+import { faHand } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import Avatar from './Avatar';
-import { Icons } from './Icons';
 
 interface IPeer {
   peer: HMSPeer;
@@ -30,7 +31,10 @@ const Peer = ({ peer, className }: IPeer) => {
   return (
     <div className={`jlab-gather-peer-tile jlab-gather-peer-tile-${className}`}>
       {peer.isHandRaised ? (
-        <Icons.raisedHand className="jlab-gather-peer-hand-raised-icon" />
+        <FontAwesomeIcon
+          icon={faHand}
+          className="jlab-gather-peer-hand-raised-icon"
+        />
       ) : (
         ''
       )}
diff --git a/src/components/buttons/PluginButton.tsx b/src/components/buttons/PluginButton.tsx
@@ -8,9 +8,10 @@ import {
   useHMSActions,
   useHMSStore
 } from '@100mslive/react-sdk';
+import { faBan, faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useEffect, useState } from 'react';
 import ArCubePlugin from '../../arCubePlugin';
-import { Icons } from '../Icons';
 
 const PluginButton = () => {
   const hmsActions = useHMSActions();
@@ -76,11 +77,11 @@ const PluginButton = () => {
       disabled={isDisabled}
     >
       {isDisabled ? (
-        <Icons.forbidden className="icon" />
+        <FontAwesomeIcon icon={faBan} className="jlab-gather-icon" />
       ) : !isPresenting && !isPluginLoaded ? (
-        'Start AR'
+        <FontAwesomeIcon icon={faEye} className="jlab-gather-icon" />
       ) : (
-        'Stop AR'
+        <FontAwesomeIcon icon={faEyeSlash} className="jlab-gather-icon" />
       )}
     </button>
   );
diff --git a/src/components/buttons/RaiseHandButton.tsx b/src/components/buttons/RaiseHandButton.tsx
@@ -4,8 +4,9 @@ import {
   useHMSActions,
   useHMSStore
 } from '@100mslive/react-sdk';
+import { faHand } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback } from 'react';
-import { Icons } from '../Icons';
 
 const RaiseHandButton = () => {
   const localPeerId = useHMSStore(selectLocalPeerID);
@@ -22,7 +23,8 @@ const RaiseHandButton = () => {
 
   return (
     <button className="jlab-gather-btn-control" onClick={toggleRaiseHand}>
-      <Icons.raisedHand
+      <FontAwesomeIcon
+        icon={faHand}
         className={`jlab-gather-icon ${isHandRaised ? 'jlab-gather-icon-breathe' : ''}`}
       />
     </button>
diff --git a/src/components/buttons/SettingsButton.tsx b/src/components/buttons/SettingsButton.tsx
@@ -1,5 +1,6 @@
+import { faGear } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useState } from 'react';
-import { Icons } from '../Icons';
 import DeviceSettingModal from '../modals/DeviceSettingModal';
 
 const SettingsButton = () => {
@@ -19,7 +20,7 @@ const SettingsButton = () => {
         className="jlab-gather-btn-control"
         onClick={handleOpenDeviceSettingsModal}
       >
-        <Icons.settings className="jlab-gather-icon" />
+        <FontAwesomeIcon icon={faGear} className="jlab-gather-icon" />
       </button>
       <DeviceSettingModal
         isOpen={isDeviceSettingsModalOpen}
diff --git a/src/layouts/PreviewView.tsx b/src/layouts/PreviewView.tsx
@@ -4,11 +4,11 @@ import {
   useHMSActions,
   useHMSStore
 } from '@100mslive/react-sdk';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useState } from 'react';
-import { Icons } from '../components/Icons';
 import Video from '../components/Video';
 import SettingsButton from '../components/buttons/SettingsButton';
-
 const PreviewView = () => {
   console.log('preview');
   const hmsActions = useHMSActions();
@@ -38,7 +38,10 @@ const PreviewView = () => {
             trackId={localPeer.videoTrack}
           />
         ) : (
-          <Icons.spinner className="jlab-gather-spinner large" />
+          <FontAwesomeIcon
+            icon={faSpinner}
+            className="jlab-gather-spinner large"
+          />
         )}
         <div className="jlab-gather-control-bar">
           <button
@@ -47,7 +50,10 @@ const PreviewView = () => {
             // disabled={!enableJoin}
           >
             {isJoining ? (
-              <Icons.spinner className="jlab-gather-spinner large" />
+              <FontAwesomeIcon
+                icon={faSpinner}
+                className="jlab-gather-spinner large"
+              />
             ) : (
               'Join'
             )}
diff --git a/src/widgets/LeftSidebar.tsx b/src/widgets/LeftSidebar.tsx
@@ -1,16 +1,17 @@
 import { selectAppData } from '@100mslive/react-sdk';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ReactWidget } from '@jupyterlab/apputils';
 import { Button, SidePanel, UseSignal } from '@jupyterlab/ui-components';
 import { ISignal } from '@lumino/signaling';
 import { Panel, Widget } from '@lumino/widgets';
 import React, { useEffect, useState } from 'react';
 import ArCube from '../arCube';
-import { Icons, arIcon } from '../components/Icons';
+import { arIcon } from '../components/Icons';
 import ModelListItem from '../components/ModelListItem';
 import AddNewModelModal from '../components/modals/AddNewModelModal';
 import { hmsActions, hmsStore } from '../hms';
 import { IModelRegistry, IModelRegistryData } from '../registry';
-
 // https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/Models/Suzanne/glTF/Suzanne.gltf'
 // https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/Models/IridescenceAbalone/glTF/IridescenceAbalone.gltf
 // https://github.khronos.org/glTF-Sample-Viewer-Release/assets/models/Models/Fox/glTF/Fox.gltf
@@ -139,7 +140,7 @@ const LeftSidebarComponent = ({ modelList, modelRegistry }: IModelInfoList) => {
           disabled={isDisabled}
         >
           {isDisabled ? (
-            <Icons.spinner className="jlab-gather-spinner" />
+            <FontAwesomeIcon icon={faSpinner} className="jlab-gather-spinner" />
           ) : isSecondScene ? (
             'Disable Second Model'
           ) : (
diff --git a/style/base.css b/style/base.css
@@ -55,8 +55,8 @@
 }
 
 .jlab-gather-btn-danger {
-  background-color: var(--jp-warn-color1);
-  color: black;
+  background-color: var(--jp-warn-color1) !important;
+  color: black !important;
 }
 
 .jlab-gather-main-grid-container {
@@ -78,7 +78,7 @@
 }
 
 .jlab-gather-peer-hand-raised-icon {
-  fill: #f37726;
+  color: #f37726;
   position: absolute;
   z-index: 40;
   top: 0.3rem;
@@ -289,12 +289,11 @@
 }
 
 .jlab-gather-icon {
-  scale: 0.8;
-  fill: whitesmoke;
+  font-size: 2rem;
 }
 
 .jlab-gather-icon-breathe {
-  fill: #f37726;
+  color: #f37726;
   animation: breathe 3s infinite alternate;
 }
 
@@ -417,13 +416,13 @@
 
 @keyframes breathe {
   0% {
-    transform: scale(0.7);
     opacity: 0.8;
+    transform: scale(0.7);
   }
 
   50% {
     opacity: 1;
-    transform: scale(1.1);
+    transform: scale(1.3);
   }
 
   100% {
diff --git a/yarn.lock b/yarn.lock
