Merge pull request #57 from FrostCord/hotfix

Stan-l-e-y · web-flow · commit f3a5b6f3b842 · 2023-04-02T15:16:45.000Z
update imports for css file
diff --git a/components/forms/AddChannel.tsx b/components/forms/AddChannel.tsx
@@ -1,5 +1,5 @@
 import { Input } from './Styles';
-import styles from '@/styles/Components.module.css';
+import styles from '@/styles/Livekit.module.css';
 
 import { Dispatch, SetStateAction, useState } from 'react';
 import {
diff --git a/components/forms/AddServer.tsx b/components/forms/AddServer.tsx
@@ -1,6 +1,6 @@
 import CameraIcon from '@/components/icons/CameraIcon';
 import { Input } from './Styles';
-import styles from '@/styles/Components.module.css';
+import styles from '@/styles/Livekit.module.css';
 import PlusIcon from '@/components/icons/PlusIcon';
 import {
   useRef,
diff --git a/components/home/FloatingCallControl.tsx b/components/home/FloatingCallControl.tsx
@@ -1,9 +1,23 @@
-import { DisconnectButton, TrackToggle, useConnectionState, useLocalParticipant } from '@livekit/components-react';
+import {
+  DisconnectButton,
+  TrackToggle,
+  useConnectionState,
+  useLocalParticipant,
+} from '@livekit/components-react';
 import ScreenShareOff from '../icons/ScreenShareOff';
 import ScreenShareIcon from '../icons/ScreenShareIcon';
-import mediaStyle from '@/styles/Components.module.css';
+import mediaStyle from '@/styles/Livekit.module.css';
 import { ConnectionState, Track } from 'livekit-client';
-import { useSetConnectionState, useSetCurrentRoomId, useSetCurrentRoomName, useSetCurrentRoomServerId, useSetToken, useConnectionRef, useSetUserSettings, useUserSettings } from '@/lib/store';
+import {
+  useSetConnectionState,
+  useSetCurrentRoomId,
+  useSetCurrentRoomName,
+  useSetCurrentRoomServerId,
+  useSetToken,
+  useConnectionRef,
+  useSetUserSettings,
+  useUserSettings,
+} from '@/lib/store';
 import { Channel } from '@/types/dbtypes';
 import CameraOffIcon from '../icons/CameraOffIcon';
 import CameraIcon from '../icons/CameraIcon';
@@ -12,7 +26,13 @@ import HangUpIcon from '../icons/HangUpIcon';
 import MicrophoneIcon from '../icons/MicrophoneIcon';
 import MicrophoneOff from '../icons/MicroPhoneOff';
 
-export function FloatingCallControl({ visibleChannel, token }: { visibleChannel?: Channel, token?: string }) {
+export function FloatingCallControl({
+  visibleChannel,
+  token,
+}: {
+  visibleChannel?: Channel;
+  token?: string;
+}) {
   const connectionState = useConnectionState();
   const currentParticipant = useLocalParticipant();
   const setConnectionState = useSetConnectionState();
@@ -50,9 +70,13 @@ export function FloatingCallControl({ visibleChannel, token }: { visibleChannel?
       draggable
     >
       {connectionState !== ConnectionState.Connected ? (
-        <button disabled className='w-7 h-7 bg-grey-900 rounded-lg text-lg flex items-center justify-center'>
-          <CameraIcon className='text-grey-600'/>
-        </button>) : (
+        <button
+          disabled
+          className="w-7 h-7 bg-grey-900 rounded-lg text-lg flex items-center justify-center"
+        >
+          <CameraIcon className="text-grey-600" />
+        </button>
+      ) : (
         <TrackToggle
           showIcon={false}
           className={
@@ -61,24 +85,23 @@ export function FloatingCallControl({ visibleChannel, token }: { visibleChannel?
           source={Track.Source.Camera}
         >
           {currentParticipant.isCameraEnabled ? (
-            <CameraOffIcon
-            />
+            <CameraOffIcon />
           ) : (
-            <CameraIcon
-            />
+            <CameraIcon />
           )}
         </TrackToggle>
       )}
       {connectionState !== ConnectionState.Connected ? (
-        <button disabled
-          className={`w-7 h-7 bg-grey-900 rounded-lg text-lg flex items-center justify-center ${mediaStyle.disappear}`}>
-          <ScreenShareIcon className='text-grey-600'/>
-        </button>) : (
+        <button
+          disabled
+          className={`w-7 h-7 bg-grey-900 rounded-lg text-lg flex items-center justify-center ${mediaStyle.disappear}`}
+        >
+          <ScreenShareIcon className="text-grey-600" />
+        </button>
+      ) : (
         <TrackToggle
           showIcon={false}
-          className={
-            `w-7 h-7 bg-grey-900 hover:bg-grey-800 rounded-lg text-lg flex items-center justify-center ${mediaStyle.disappear}`
-          }
+          className={`w-7 h-7 bg-grey-900 hover:bg-grey-800 rounded-lg text-lg flex items-center justify-center ${mediaStyle.disappear}`}
           source={Track.Source.ScreenShare}
           disabled={true}
         >
@@ -95,14 +118,18 @@ export function FloatingCallControl({ visibleChannel, token }: { visibleChannel?
           {userSettings ? (
             <button
               onClick={() => settingsRef(false)}
-              className={'w-7 h-7 rounded-lg p-1 bg-grey-900 hover:bg-grey-800 flex items-center justify-center'}
+              className={
+                'w-7 h-7 rounded-lg p-1 bg-grey-900 hover:bg-grey-800 flex items-center justify-center'
+              }
             >
-              <MicrophoneIcon width={6} height={6}/>
+              <MicrophoneIcon width={6} height={6} />
             </button>
           ) : (
             <button
               onClick={() => settingsRef(true)}
-              className={'w-7 h-7 rounded-lg p-1 bg-grey-900 hover:bg-grey-800 flex items-center justify-center'}
+              className={
+                'w-7 h-7 rounded-lg p-1 bg-grey-900 hover:bg-grey-800 flex items-center justify-center'
+              }
             >
               <MicrophoneOff width={6} height={6} />
             </button>
@@ -112,11 +139,11 @@ export function FloatingCallControl({ visibleChannel, token }: { visibleChannel?
         <TrackToggle
           showIcon={false}
           source={Track.Source.Microphone}
-          onClick={() => settingsRef(false)} 
-          className='w-7 h-7 rounded-lg p-1 bg-grey-900 hover:bg-grey-800 flex items-center justify-center'
+          onClick={() => settingsRef(false)}
+          className="w-7 h-7 rounded-lg p-1 bg-grey-900 hover:bg-grey-800 flex items-center justify-center"
         >
           {currentParticipant.isMicrophoneEnabled ? (
-            <MicrophoneIcon width={6} height={6}/>
+            <MicrophoneIcon width={6} height={6} />
           ) : (
             <MicrophoneOff width={6} height={6} />
           )}
diff --git a/components/home/MediaChat.tsx b/components/home/MediaChat.tsx
@@ -7,7 +7,7 @@ import {
   useUserRef,
 } from '@/lib/store';
 import styles from '@/styles/Chat.module.css';
-import mediaStyle from '@/styles/Components.module.css';
+import mediaStyle from '@/styles/Livekit.module.css';
 import { ChannelMediaIcon } from '../icons/ChannelMediaIcon';
 import ChannelMessageIcon from '../icons/ChannelMessageIcon';
 import { useUser } from '@supabase/auth-helpers-react';
@@ -27,7 +27,11 @@ import { useEffect, useRef, useState } from 'react';
 import LoadingIcon from '../icons/LoadingIcon';
 import { MediaPlaceholderTrack } from './MediaPlaceholderTrack';
 
-export default function MediaChat({ channel: visibleChannel }: { channel: Channel }) {
+export default function MediaChat({
+  channel: visibleChannel,
+}: {
+  channel: Channel;
+}) {
   const channel = useChannel();
   const userID: User | any = useUser();
   const user = useUserRef();
@@ -37,8 +41,8 @@ export default function MediaChat({ channel: visibleChannel }: { channel: Channe
   const setRoomName = useSetCurrentRoomName();
   const currentRoom = useCurrentRoomRef();
   const tracks = useTracks([
-    {source: Track.Source.Camera, withPlaceholder: true },
-    {source: Track.Source.ScreenShare, withPlaceholder: false }
+    { source: Track.Source.Camera, withPlaceholder: true },
+    { source: Track.Source.ScreenShare, withPlaceholder: false },
   ]);
 
   const modalRef = useRef<HTMLDialogElement>(null);
@@ -56,9 +60,9 @@ export default function MediaChat({ channel: visibleChannel }: { channel: Channe
 
   useEffect(() => {
     if (
-      !modalRef.current?.open
-      && currentRoom.channel_id !== channel?.channel_id
-      && connectionState === ConnectionState.Connected
+      !modalRef.current?.open &&
+      currentRoom.channel_id !== channel?.channel_id &&
+      connectionState === ConnectionState.Connected
     ) {
       modalRef.current?.showModal();
     }
@@ -102,7 +106,9 @@ export default function MediaChat({ channel: visibleChannel }: { channel: Channe
           <p>
             {`Looks like you're already connected to ${currentRoom.name}...`}
 
-            {'You\'ll need to end your current call before you can join another.'}
+            {
+              'You\'ll need to end your current call before you can join another.'
+            }
           </p>
         </div>
       </Modal>
@@ -124,28 +130,33 @@ export default function MediaChat({ channel: visibleChannel }: { channel: Channe
       <div className={`${mediaStyle.gridContainer} overflow-y-auto`}>
         <div className={'bg-grey-800'}>
           {connectionState === ConnectionState.Connecting ? (
-            <div className={`flex flex-row items-center relative top-11 mx-auto h-auto ${mediaStyle.channelLoad}`}>
-              <LoadingIcon className='w-7 h-7 stroke-frost-300 mr-2' />
+            <div
+              className={`flex flex-row items-center relative top-11 mx-auto h-auto ${mediaStyle.channelLoad}`}
+            >
+              <LoadingIcon className="w-7 h-7 stroke-frost-300 mr-2" />
               <span>Connecting...</span>
             </div>
           ) : (
-            <div
-              className={`grid ${mediaStyle.mediaGrid}`}
-            >
-              { currentRoom.channel_id === channel?.channel_id && connectionState === ConnectionState.Connected && (
+            <div className={`grid ${mediaStyle.mediaGrid}`}>
+              {currentRoom.channel_id === channel?.channel_id &&
+                connectionState === ConnectionState.Connected &&
                 tracks.map((track) => {
                   if (
-                    (
-                      // @ts-expect-error Fck you livekit
-                      !!track.publication
-                      // @ts-expect-error Fck you livekit
-                      && track.publication.source == Track.Source.Camera
-                      && !track.participant.isCameraEnabled
+                    // @ts-expect-error Fck you livekit
+                    (!!track.publication &&
                       // @ts-expect-error Fck you livekit
-                    ) || track.publication === undefined) {
+                      track.publication.source == Track.Source.Camera &&
+                      !track.participant.isCameraEnabled) ||
+                    // @ts-expect-error Fck you livekit
+                    track.publication === undefined
+                  ) {
                     return (
                       <>
-                        {connectionState === ConnectionState.Connected && <MediaPlaceholderTrack participant={track.participant}/>}
+                        {connectionState === ConnectionState.Connected && (
+                          <MediaPlaceholderTrack
+                            participant={track.participant}
+                          />
+                        )}
                       </>
                     );
                   }
@@ -157,13 +168,13 @@ export default function MediaChat({ channel: visibleChannel }: { channel: Channe
                       />
                     );
                   }
-                }))}
+                })}
             </div>
           )}
         </div>
       </div>
-      <div className='w-full h-auto mb-1'>
-        <FloatingCallControl visibleChannel={visibleChannel} token={token}/>
+      <div className="w-full h-auto mb-1">
+        <FloatingCallControl visibleChannel={visibleChannel} token={token} />
       </div>
     </>
   );
diff --git a/components/home/Modal.tsx b/components/home/Modal.tsx
@@ -1,5 +1,5 @@
 import { useEffect, RefObject } from 'react';
-import styles from '@/styles/Components.module.css';
+import styles from '@/styles/Livekit.module.css';
 import { KeyboardEventHandler } from 'react';
 
 export default function Modal({
diff --git a/components/home/ServerList.tsx b/components/home/ServerList.tsx
@@ -1,6 +1,6 @@
 import AddServerIcon from '@/components/icons/AddServerIcon';
 import { SearchBar } from '@/components/forms/Styles';
-import mediaStyle from '@/styles/Components.module.css';
+import mediaStyle from '@/styles/Livekit.module.css';
 import { useEffect, useState } from 'react';
 import Server from '@/components/home/Server';
 import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react';
@@ -31,7 +31,7 @@ export default function ServerList() {
   const supabase = useSupabaseClient();
 
   const servers = useServers();
-  const [ filteredServers, setFilteredServers ] = useState(servers);
+  const [filteredServers, setFilteredServers] = useState(servers);
   const getServers = useGetServers();
 
   const getUserServerPerms = useGetUserPermsForServer();
@@ -49,6 +49,13 @@ export default function ServerList() {
     }
   }, [getServers, supabase, user, getUserServerPerms, expanded]);
 
+  // HACK: At the time of component render, the servers are not yet loaded into the store.
+  useEffect(() => {
+    if (servers) {
+      setFilteredServers(servers);
+    }
+  }, [servers]);
+
   //TODO: add isServer check
 
   return (
@@ -102,7 +109,9 @@ export default function ServerList() {
 
             // Filter servers
             const filteredServers = servers.filter((server) => {
-              return server.servers.name.toLowerCase().includes(value.toLowerCase());
+              return server.servers.name
+                .toLowerCase()
+                .includes(value.toLowerCase());
             });
 
             setFilteredServers(filteredServers);
@@ -140,8 +149,8 @@ export default function ServerList() {
               }
             })}
       </div>
-      { isInVoice && (
-        <div className={`w-full self-end mb-7 ${mediaStyle.disappear}` }>
+      {isInVoice && (
+        <div className={`w-full self-end mb-7 ${mediaStyle.disappear}`}>
           <SidebarCallControl />
         </div>
       )}
diff --git a/components/home/mobile/MobileCallControls.tsx b/components/home/mobile/MobileCallControls.tsx
