Skip to content

Commit 9ee7bf2

Browse files
multimokiamultimokia
authored
Merge pull request #54 from FrostCord/FROS-Stream-Implement
Fros stream implement
2 parents 25110af + 528bfd5 commit 9ee7bf2

40 files changed

Lines changed: 1551 additions & 190 deletions

‎components/home/ChannelName.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Channel } from '@/types/dbtypes';
2+
import { useState } from 'react';
3+
import Marquee from 'react-fast-marquee';
4+
5+
export default function ChannelName(channel: Channel) {
6+
7+
const [isChannelHovered, setIsChannelHovered] = useState(false);
8+
9+
return(
10+
11+
<div className="ml-2 text-sm font-semibold tracking-wide text-grey-200 max-w-[10ch] overflow-hidden hover:overflow-visible">
12+
{channel.name.length > 10 ? (
13+
<span
14+
onMouseEnter={() => setIsChannelHovered(true)}
15+
onMouseLeave={() => setIsChannelHovered(false)}
16+
>
17+
{isChannelHovered ? (
18+
<Marquee
19+
play={isChannelHovered}
20+
direction={'left'}
21+
gradient={false}
22+
>
23+
{`${channel.name}\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0`}
24+
</Marquee>
25+
) : (
26+
`${channel.name.slice(0, 9)}...`
27+
)}
28+
</span>
29+
) : (
30+
channel.name
31+
)}
32+
</div>
33+
);
34+
}

‎components/home/Chat.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import { useChannel, useMessages, useUserPerms } from '@/lib/store';
1313
import { Channel } from '@/types/dbtypes';
1414
import { ChannelMediaIcon } from '@/components/icons/ChannelMediaIcon';
1515
import { ChannelPermissions } from '@/types/permissions';
16+
import MobileCallControls from './mobile/MobileCallControls';
17+
import { useConnectionState } from '@livekit/components-react';
18+
import { ConnectionState } from 'livekit-client';
1619

1720
export default function Chat() {
1821
const supabase = useSupabaseClient();
@@ -21,6 +24,7 @@ export default function Chat() {
2124
const messages = useMessages();
2225
const channel = useChannel();
2326
const userPerms = useUserPerms();
27+
const connectionState = useConnectionState();
2428

2529
useEffect(() => {
2630
if (newestMessageRef && messages) {
@@ -48,7 +52,7 @@ export default function Chat() {
4852
</div>
4953
</div>
5054
<div className="border-t-2 mx-5 border-grey-700 flex "></div>
51-
55+
{connectionState === ConnectionState.Connected && <MobileCallControls />}
5256
<div
5357
className={`${styles.messagesParent} flex flex-col p-5 bg-grey-800 overflow-y-auto`}
5458
>

‎components/home/DMessageList.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { Channel, DMChannelWithRecipient } from '@/types/dbtypes';
22
import UserIcon from '../icons/UserIcon';
33
import styles from '@/styles/Chat.module.css';
4-
import { useDMChannels, useSetChannel } from '@/lib/store';
4+
import { useConnectionRef, useDMChannels, useSetChannel } from '@/lib/store';
5+
import SidebarCallControl from '@/components/home/SidebarCallControl';
56
import { SearchBar } from '@/components/forms/Styles';
67
import { useState } from 'react';
78

@@ -38,18 +39,19 @@ function mapToComponentArray(
3839
export default function DMessageList() {
3940
const setChannel = useSetChannel();
4041
const dmChannels = useDMChannels();
42+
const isInVoice = useConnectionRef();
4143
const [ filteredDMs, setFilteredDMs ] = useState(dmChannels);
4244

4345
return (
44-
<>
46+
<div className="flex flex-col h-full">
4547
<div className={`${styles.chatHeader} px-5 pt-5 mb-3`}>
4648
<div className="flex flex-row items-center space-x-3">
4749
<h1 className="text-3xl font-semibold tracking-wide">
4850
Directs
4951
</h1>
5052
</div>
5153
</div>
52-
<div className="border-t-2 mx-5 border-grey-700 flex flex-col pt-3">
54+
<div className="border-t-2 mx-5 border-grey-700 flex-grow pt-3">
5355
<div className="pt-4 pb-4">
5456
<input
5557
type="text"
@@ -74,6 +76,11 @@ export default function DMessageList() {
7476
</div>
7577
{ mapToComponentArray(filteredDMs, setChannel) }
7678
</div>
77-
</>
79+
{ isInVoice && (
80+
<div className="w-full self-end p-4 mb-7">
81+
<SidebarCallControl />
82+
</div>
83+
)}
84+
</div>
7885
);
7986
}

‎components/home/FloatingCallControl.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import { DisconnectButton, TrackToggle, useConnectionState, useLocalParticipant } from '@livekit/components-react';
2+
import ScreenShareOff from '../icons/ScreenShareOff';
3+
import ScreenShareIcon from '../icons/ScreenShareIcon';
4+
import mediaStyle from '@/styles/Components.module.css';
5+
import { ConnectionState, Track } from 'livekit-client';
6+
import { useSetConnectionState, useSetCurrentRoomId, useSetCurrentRoomName, useSetCurrentRoomServerId, useSetToken, useConnectionRef, useSetUserSettings, useUserSettings } from '@/lib/store';
7+
import { Channel } from '@/types/dbtypes';
8+
import CameraOffIcon from '../icons/CameraOffIcon';
9+
import CameraIcon from '../icons/CameraIcon';
10+
import JoinCallIcon from '../icons/JoinCallIcon';
11+
import HangUpIcon from '../icons/HangUpIcon';
12+
import MicrophoneIcon from '../icons/MicrophoneIcon';
13+
import MicrophoneOff from '../icons/MicroPhoneOff';
14+
15+
export function FloatingCallControl({ visibleChannel, token }: { visibleChannel?: Channel, token?: string }) {
16+
const connectionState = useConnectionState();
17+
const currentParticipant = useLocalParticipant();
18+
const setConnectionState = useSetConnectionState();
19+
const setToken = useSetToken();
20+
const setRoomServerId = useSetCurrentRoomServerId();
21+
const setRoomIdRef = useSetCurrentRoomId();
22+
const setRoomName = useSetCurrentRoomName();
23+
const settingsRef = useSetUserSettings();
24+
const userSettings = useUserSettings();
25+
26+
const handleConnect = () => {
27+
setConnectionState(true),
28+
setToken(token),
29+
setRoomIdRef(visibleChannel?.channel_id);
30+
setRoomName(visibleChannel?.name);
31+
setRoomServerId(visibleChannel?.server_id);
32+
};
33+
34+
return (
35+
<div
36+
className={`
37+
flex
38+
flex-row
39+
justify-evenly
40+
${mediaStyle.mediaControls}
41+
min-w-0
42+
bg-grey-950
43+
items-center
44+
rounded-xl
45+
inset-x-1
46+
mx-auto
47+
py-3
48+
z-10
49+
`}
50+
draggable
51+
>
52+
{connectionState !== ConnectionState.Connected ? (
53+
<button disabled className='w-7 h-7 bg-grey-900 rounded-lg text-lg flex items-center justify-center'>
54+
<CameraIcon className='text-grey-600'/>
55+
</button>) : (
56+
<TrackToggle
57+
showIcon={false}
58+
className={
59+
'w-7 h-7 bg-grey-900 hover:bg-grey-800 rounded-lg text-lg flex items-center justify-center'
60+
}
61+
source={Track.Source.Camera}
62+
>
63+
{currentParticipant.isCameraEnabled ? (
64+
<CameraOffIcon
65+
/>
66+
) : (
67+
<CameraIcon
68+
/>
69+
)}
70+
</TrackToggle>
71+
)}
72+
{connectionState !== ConnectionState.Connected ? (
73+
<button disabled
74+
className={`w-7 h-7 bg-grey-900 rounded-lg text-lg flex items-center justify-center ${mediaStyle.disappear}`}>
75+
<ScreenShareIcon className='text-grey-600'/>
76+
</button>) : (
77+
<TrackToggle
78+
showIcon={false}
79+
className={
80+
`w-7 h-7 bg-grey-900 hover:bg-grey-800 rounded-lg text-lg flex items-center justify-center ${mediaStyle.disappear}`
81+
}
82+
source={Track.Source.ScreenShare}
83+
disabled={true}
84+
>
85+
{currentParticipant.isScreenShareEnabled ? (
86+
<ScreenShareOff />
87+
) : (
88+
<ScreenShareIcon />
89+
)}
90+
</TrackToggle>
91+
)}
92+
{connectionState !== ConnectionState.Connected ? (
93+
<>
94+
{' '}
95+
{userSettings ? (
96+
<button
97+
onClick={() => settingsRef(false)}
98+
className={'w-7 h-7 rounded-lg p-1 bg-grey-900 hover:bg-grey-800 flex items-center justify-center'}
99+
>
100+
<MicrophoneIcon width={6} height={6}/>
101+
</button>
102+
) : (
103+
<button
104+
onClick={() => settingsRef(true)}
105+
className={'w-7 h-7 rounded-lg p-1 bg-grey-900 hover:bg-grey-800 flex items-center justify-center'}
106+
>
107+
<MicrophoneOff width={6} height={6} />
108+
</button>
109+
)}
110+
</>
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-grey-900 hover:bg-grey-800 flex items-center justify-center'
117+
>
118+
{currentParticipant.isMicrophoneEnabled ? (
119+
<MicrophoneIcon width={6} height={6}/>
120+
) : (
121+
<MicrophoneOff width={6} height={6} />
122+
)}
123+
</TrackToggle>
124+
)}
125+
{connectionState !== ConnectionState.Connected ? (
126+
<button
127+
className="w-7 h-7 bg-green-500 hover:bg-green-700 rounded-lg font-bold text-md flex items-center justify-center"
128+
onClick={() => {
129+
handleConnect();
130+
}}
131+
>
132+
<JoinCallIcon width={6} height={6} />
133+
</button>
134+
) : (
135+
<DisconnectButton
136+
className={
137+
'w-7 h-7 bg-red-500 hover:bg-red-700 rounded-lg flex items-center justify-center'
138+
}
139+
onClick={() => {
140+
setConnectionState(false);
141+
}}
142+
>
143+
<HangUpIcon width={6} height={6} />
144+
</DisconnectButton>
145+
)}
146+
</div>
147+
);
148+
}

‎components/home/FriendsList.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,16 @@ import { DetailedProfileRelation, ProfileRelationshipType } from '@/types/dbtype
44
import { useEffect, useState } from 'react';
55
import { FriendRequestItem } from './FriendRequestItem';
66
import { FriendsListItem } from './FriendsListItem';
7+
import { ConnectionState } from 'livekit-client';
8+
import MobileCallControls from './mobile/MobileCallControls';
9+
import { useConnectionState } from '@livekit/components-react';
710

811
export default function FriendsList() {
912
const [ activeCategory, setActiveCategory ] = useState<ProfileRelationshipType>('friends');
1013
const relationships = useRelations();
1114
const [ dispRelations, setDispRelations ] = useState<DetailedProfileRelation[]>([]);
15+
const connectionState = useConnectionState();
16+
1217

1318
useEffect(() => {
1419
console.log(activeCategory);
@@ -60,6 +65,8 @@ export default function FriendsList() {
6065
</div>
6166
</div>
6267
<div className="border-t-2 mx-5 border-grey-700 flex flex-col">
68+
{connectionState === ConnectionState.Connected && <MobileCallControls />}
69+
6370
{dispRelations.map((relation) => (
6471
relation.relationship === 'friends' ?
6572
<FriendsListItem key={relation.id} relation={relation} /> : <FriendRequestItem key={relation.id} relation={relation} />

0 commit comments

Comments
 (0)