Skip to content

Commit 6fd216c

Browse files
jjensen-aijjensen-ai
committed
added mic control
1 parent 7e32262 commit 6fd216c

2 files changed

Lines changed: 84 additions & 6 deletions

File tree

‎components/home/FloatingCallControl.tsx‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import ScreenShareOff from '../icons/ScreenShareOff';
33
import ScreenShareIcon from '../icons/ScreenShareIcon';
44
import mediaStyle from '@/styles/Components.module.css';
55
import { ConnectionState, Track } from 'livekit-client';
6-
import { useSetConnectionState, useSetCurrentRoomId, useSetCurrentRoomName, useSetCurrentRoomServerId, useSetToken, useConnectionRef } from '@/lib/store';
6+
import { useSetConnectionState, useSetCurrentRoomId, useSetCurrentRoomName, useSetCurrentRoomServerId, useSetToken, useConnectionRef, useSetUserSettings, useUserSettings } from '@/lib/store';
77
import { Channel } from '@/types/dbtypes';
88
import CameraOffIcon from '../icons/CameraOffIcon';
99
import CameraIcon from '../icons/CameraIcon';
1010
import JoinCallIcon from '../icons/JoinCallIcon';
1111
import HangUpIcon from '../icons/HangUpIcon';
12+
import MicrophoneIcon from '../icons/MicrophoneIcon';
13+
import MicrophoneOff from '../icons/MicroPhoneOff';
1214

1315
export function FloatingCallControl({ visibleChannel, token }: { visibleChannel?: Channel, token?: string }) {
1416
const connectionState = useConnectionState();
@@ -18,6 +20,8 @@ export function FloatingCallControl({ visibleChannel, token }: { visibleChannel?
1820
const setRoomServerId = useSetCurrentRoomServerId();
1921
const setRoomIdRef = useSetCurrentRoomId();
2022
const setRoomName = useSetCurrentRoomName();
23+
const settingsRef = useSetUserSettings();
24+
const userSettings = useUserSettings();
2125

2226
const handleConnect = () => {
2327
setConnectionState(true),
@@ -85,6 +89,39 @@ export function FloatingCallControl({ visibleChannel, token }: { visibleChannel?
8589
)}
8690
</TrackToggle>
8791
)}
92+
{connectionState !== ConnectionState.Connected ? (
93+
<div className={`${mediaStyle.appear}`}>
94+
{' '}
95+
{userSettings ? (
96+
<button
97+
onClick={() => settingsRef(false)}
98+
className={`w-7 h-7 rounded-lg p-1 bg-frost-600 flex items-center justify-center ${mediaStyle.appear}`}
99+
>
100+
<MicrophoneIcon width={5} height={5}/>
101+
</button>
102+
) : (
103+
<button
104+
onClick={() => settingsRef(true)}
105+
className={`w-7 h-7 rounded-lg p-1 bg-frost-600 flex items-center justify-center ${mediaStyle.appear}`}
106+
>
107+
<MicrophoneOff width={5} height={5} />
108+
</button>
109+
)}
110+
</div>
111+
) : (
112+
<TrackToggle
113+
showIcon={false}
114+
source={Track.Source.Microphone}
115+
onClick={() => settingsRef(false)}
116+
className={`w-7 h-7 rounded-lg p-1 bg-frost-600 flex items-center justify-center ${mediaStyle.appear}`}
117+
>
118+
{currentParticipant.isMicrophoneEnabled ? (
119+
<MicrophoneIcon width={6} height={6}/>
120+
) : (
121+
<MicrophoneOff width={6} height={6} />
122+
)}
123+
</TrackToggle>
124+
)}
88125
{connectionState !== ConnectionState.Connected ? (
89126
<button
90127
className="w-7 h-7 bg-green-500 hover:bg-green-700 rounded-lg font-bold text-md flex items-center justify-center"
@@ -97,7 +134,7 @@ export function FloatingCallControl({ visibleChannel, token }: { visibleChannel?
97134
) : (
98135
<DisconnectButton
99136
className={
100-
'w-7 h-7 bg-red-500 hover:bg-red-700 rounded-lg font-bold text-xl flex items-center justify-center'
137+
'w-7 h-7 bg-red-500 hover:bg-red-700 rounded-lg flex items-center justify-center'
101138
}
102139
onClick={() => {
103140
setConnectionState(false);

‎components/home/mobile/MobileCallControls.tsx‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {
44
useServers,
55
useSetConnectionState,
66
useConnectionRef,
7+
useSetUserSettings,
8+
useUserSettings,
79
} from '@/lib/store';
810
import {
911
DisconnectButton,
@@ -19,6 +21,8 @@ import ConnectionIcon from '../../icons/ConnectionIcon';
1921
import CameraOffIcon from '../../icons/CameraOffIcon';
2022
import CameraIcon from '../../icons/CameraIcon';
2123
import HangUpIcon from '../../icons/HangUpIcon';
24+
import MicrophoneIcon from '@/components/icons/MicrophoneIcon';
25+
import MicrophoneOff from '@/components/icons/MicroPhoneOff';
2226

2327
export default function MobileCallControls() {
2428
const currentParticipant = useLocalParticipant();
@@ -27,6 +31,10 @@ export default function MobileCallControls() {
2731
const setServerName = useSetRoomServerName();
2832
const currentRoom = useCurrentRoomRef();
2933
const connectionState = useConnectionState();
34+
const settingsRef = useSetUserSettings();
35+
const userSettings = useUserSettings();
36+
37+
3038

3139
const connectionQualityColor = () => {
3240
if (connectionState === ConnectionState.Connecting || connectionState === ConnectionState.Reconnecting) {
@@ -59,21 +67,54 @@ export default function MobileCallControls() {
5967
<div className={`h-auto rounded-b-lg bottom-8 bg-grey-950 w-full mx-auto py-1 ${mediaStyle.appear}`}>
6068
<div className="flex flex-row items-center justify-between py-1">
6169
<div className="flex flex-col">
62-
<div className=" flex flex-row ml-3 items-center">
70+
<div className=" flex flex-row ml-2 items-center">
6371
<ConnectionIcon
6472
width={5}
6573
height={5}
6674
className={`${connectionQualityColor()} `}
6775
/>
68-
<span className={`${connectionQualityColor()} text-md font-semibold mx-2`}>
76+
<span className={`${connectionQualityColor()} text-md font-semibold mx-1`}>
6977
{ connectionState.charAt(0).toUpperCase() + connectionState.slice(1) }
7078
</span>
71-
<span className="text-xs text-grey-300 italic ml-2">
79+
<span className="text-xs text-grey-300 italic ml-1">
7280
{currentRoom.server_name}/{currentRoom.name}
7381
</span>
7482
</div>
7583
</div>
76-
<div className='flex flex-row justify-evenly items-center h-auto w-10'>
84+
<div className='flex flex-row justify-between items-center h-auto w-10 mr-4'>
85+
{connectionState !== ConnectionState.Connected ? (
86+
<>
87+
{' '}
88+
{userSettings ? (
89+
<button
90+
onClick={() => settingsRef(false)}
91+
className='w-auto h-6 p-1 rounded-full bg-frost-600'
92+
>
93+
<MicrophoneIcon width={5} height={5}/>
94+
</button>
95+
) : (
96+
<button
97+
onClick={() => settingsRef(true)}
98+
className='w-auto h-6 p-1 rounded-full bg-frost-600'
99+
>
100+
<MicrophoneOff width={5} height={5} />
101+
</button>
102+
)}
103+
</>
104+
) : (
105+
<TrackToggle
106+
showIcon={false}
107+
source={Track.Source.Microphone}
108+
onClick={() => settingsRef(false)}
109+
className='w-auto h-6 p-1 rounded-full bg-frost-600'
110+
>
111+
{currentParticipant.isMicrophoneEnabled ? (
112+
<MicrophoneIcon width={5} height={5}/>
113+
) : (
114+
<MicrophoneOff width={5} height={5} />
115+
)}
116+
</TrackToggle>
117+
)}
77118
<TrackToggle
78119
showIcon={false}
79120
className={

0 commit comments

Comments
 (0)