Connect to VC via Backend

backend/src/data/models/channel.ts

@@ -52,5 +52,9 @@ export const Channel = model<ChannelDocument>('channel', new Schema({
     type: [Object],
     default: [],
   },
+  userIds: {
+    type: [String],
+    default: [],
+  },
 }, { toJSON: { getters: true } })
 .method('toClient', useId));

backend/src/voice/voice-service.ts

@@ -3,7 +3,7 @@ export class VoiceService {
 
   public add(channelId: string, data: VoiceData) {
     const channelConnections = this.getOrCreate(channelId);
-    const doesExist = channelConnections.some(c => c.clientId === data.clientId); 
+    const doesExist = channelConnections.some(c => c.userId === data.userId); 
     if (doesExist)
       throw new TypeError('User already connected to voice');
 
@@ -11,9 +11,9 @@ export class VoiceService {
     this.connections.set(channelId, channelConnections);
   }
 
-  public remove(channelId: string, clientId: string) {
+  public remove(channelId: string, userId: string) {
     const channelConnections = this.getOrCreate(channelId);
-    const index = channelConnections.findIndex(c => c.clientId === clientId);
+    const index = channelConnections.findIndex(c => c.userId === userId);
 
     channelConnections.splice(index, 1);
     this.connections.set(channelId, channelConnections);
@@ -28,6 +28,6 @@ export class VoiceService {
 }
 
 export interface VoiceData {
-  clientId: string;
+  userId: string;
   stream: any;
 }

backend/src/ws/ws-events/channel-join.ts

@@ -13,18 +13,18 @@ export default class implements WSEvent<'CHANNEL_JOIN'> {
   constructor(
     private channels = Deps.get<Channels>(Channels),
     private guard = Deps.get<WSGuard>(WSGuard),
-    private voiceService = Deps.get<VoiceService>(VoiceService),
+    private voice = Deps.get<VoiceService>(VoiceService),
   ) {}
 
   public async invoke(ws: WebSocket, client: Socket, { channelId }: WS.Params.ChannelJoin) {
-    const userId = ws.sessions.get(channelId);
-
-    if (true)
-      throw new TypeError(`Join VC ${channelId}: Everything is working correctly;`)
-    // TODO: validate can join
+    const channel = await this.channels.get(channelId);
+    if (channel.type !== 'VOICE')
+      throw new TypeError('You cannot join a non-voice channel');
     
+    // TODO: validate can join
+    const userId = ws.sessions.get(client.id);
     await this.channels.joinVC(channelId, userId);
     // join voice server
-    // voiceService.add(channelId, {  });
+    this.voice.add(channelId, { stream: null, userId });
   }
 }

frontend/src/components/modals/create-channel.tsx

@@ -43,7 +43,7 @@ const CreateChannel: React.FunctionComponent = () => {
           className="mt-2"
           defaultValue={types[0]}
           {...register('type')}>
-          {types.map(type => <option value={type}>{type}</option>)}
+          {types.map(type => <option key={type} value={type}>{type}</option>)}
         </select>
       </div>
 

frontend/src/components/modals/user-profile.tsx

@@ -1,4 +1,4 @@
-import { faBug, faGavel, faSun } from '@fortawesome/free-solid-svg-icons';
+import { faBug, faGavel, faSun, faVideo } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FunctionComponent, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -32,12 +32,17 @@ const UserProfile: FunctionComponent = () => {
     'OG': {
       color: 'orange',
       icon: faSun,
-      title: 'Was here since the very beginning',
+      title: 'Was here since the very beginning.',
     },
     'STAFF': {
       color: 'var(--primary)',
       icon: faGavel,
-      title: 'Staff',
+      title: 'Staff.',
+    },
+    'VIEWER': {
+      color: 'var(--tertiary)',
+      icon: faVideo,
+      title: 'This user was noticed in live chat.',
     },
   };
 

frontend/src/components/pages/page-wrapper.tsx

@@ -8,6 +8,7 @@ import CreateInvite from '../modals/create-invite';
 import GuildSettings from '../modals/guild-settings/guild-settings';
 import UserProfile from '../modals/user-profile';
 import UserSettings from '../modals/user-settings/user-settings';
+import { filterProps } from '../utils/react/react-shush-error';
 import WSListener from '../ws-listener';
 
 export type PageWrapperProps = React.DetailedHTMLProps<
@@ -27,7 +28,7 @@ const PageWrapper: React.FunctionComponent<PageWrapperProps> = (props) => {
 
   return (
     <div onClick={onClick}
-      {...props}>
+      {...filterProps(props)}>
       {props.children}
       <WSListener />
       {/* modals */}

types/entity.d.ts

@@ -119,6 +119,7 @@ declare namespace UserTypes {
     | 'BUG_2'
     | 'BUG_3'
     | 'OG'
+    | 'VIEWER'
     | 'STAFF';
   export interface Ignored {
     channelIds: string[];