Create /chat page with existing social features (#8195)

* added route for chat * created home page for chat * Completed chat UI * Resolved onclick event and added scroll for chat user * Added chat page in ui/src/components/ * New routing for chat page. * Add back missing things? * fix deps * fix deps * cleanup after merge * cleanup after merge * populate party and friend lists with real data * refactor lists * add friends list * chat almost works, start refactoring chat and channels * migrate most channel usage * location world and media instances work * more message stuff * stuff * channels are handled properly, messages populate in real time * fix db association * Custom figbird (#8332) * migrate most of figbird to typescript and hyperflux * format * finalize figbird into FeathersHooks * cleanup and docs * figbird mutation types, channel state refactoring * feathers hooks tests pass * refactoring channels, tests for channels and channel users * fix auth issue * detangle channel list from client-core channels service entirely * license * parties menu uses figbird and works correctly with channels * fix tests * replace parties menu with messages menu, populate it and add media calls * add startMediaCall to chat route * polish message UIs on location * refactor channels in admin, reactivity issues in feathers hooks * rewrite feathers hooks * add logging * update invites * fixed Ui and added Video UI section * fixed chat UI and added Video Call UI section * fix recursive rerender issue with feathers hooks * hook up media to new UI * bug and css tweak * fix bugs finding and creating channels * fix bug with channel create and friend reactivity * stop creating message for new friend automatically * cleanup channels after world instance server closes * bug fixes, channel name fix, cleanup fixes * remove world list * fix check-errors failing * update xru ifor chat * rework global typings * fix tests * Fixed Ui and added some extra features * fix up mic button for other peers * cleanup logs --------- Co-authored-by: usaurabh02 <saurabhu154@gmail.com> Co-authored-by: jerknose <travis@travisbennett.com> Co-authored-by: HexaField <joshfield999@gmail.com>
EtherealEngine · Jul 27, 2023 · c43b98e · c43b98e
1 parent 8234aac
commit c43b98e
Show file tree

Hide file tree

Showing 238 changed files with 4,679 additions and 8,480 deletions.
diff --git a/__global.d.ts b/__global.d.ts
@@ -26,40 +26,17 @@ Ethereal Engine. All Rights Reserved.
 
 
 /* eslint-disable no-unused-vars */
-declare module '*.jpg' {
-  const value: any
-  export default value
-}
-
-declare module '*.png' {
-  const value: any
-  export default value
-}
-
-declare module '*.json' {
-  const value: any
-  export default value
-}
-
-declare module '*.wav' {
-  const value: any
-  export default value
-}
-
-declare module '*.glb' {
-  const value: any
-  export default value
-}
-
-declare module '*.frag' {
-  const value: any
-  export default value
-}
-
-declare module '*.vert' {
-  const value: any
-  export default value
-}
+declare module '*.jpg'
+declare module '*.png'
+declare module '*.svg'
+declare module '*.scss'
+declare module '*.scss?inline'
+declare module '*.css'
+declare module '*.json'
+declare module '*.wav'
+declare module '*.glb'
+declare module '*.frag'
+declare module '*.vert'
 
 declare interface Element {
   setAttribute(qualifiedName: string, value: Object): void

diff --git a/packages/client-core/i18n/en/admin.json b/packages/client-core/i18n/en/admin.json
@@ -120,15 +120,13 @@
       "spawnPoint": "Spawn Point",
       "deleteSelected": "Delete selected invites"
     },
-    "party": {
-      "maxMembersRequired": "Atleast 2 members requires",
+    "channel": {
       "instanceRequired": "Instance is required",
       "instanceCantEmpty": "Instance can't be empty",
       "instance": "Instance",
-      "maxMembers": "Max Members",
       "createOne": "Create One",
-      "createParty": "Create Party",
-      "confirmPartyDelete": "Do you want to delete party?"
+      "createChannel": "Create Channel",
+      "confirmChannelDelete": "Do you want to delete channel?"
     },
     "project": {
       "addProject": "Add Project",

diff --git a/packages/client-core/i18n/en/user.json b/packages/client-core/i18n/en/user.json
@@ -383,9 +383,11 @@
   "friends": {
     "find": "Find",
     "friends": "Friends",
+    "messages": "Messages",
     "blocked": "Blocked",
     "message": "Message",
     "profile": "Profile",
+    "call": "Call",
     "accept": "Accept",
     "decline": "Decline",
     "unblock": "Unblock",

diff --git a/packages/client-core/src/admin/adminRoutes.tsx b/packages/client-core/src/admin/adminRoutes.tsx
@@ -54,8 +54,7 @@ const AdminRoutes = () => {
     user: false,
     bot: false,
     scene: false,
-    party: false,
-    groups: false,
+    channel: false,
     instance: false,
     invite: false,
     globalAvatars: false,

diff --git a/packages/client-core/src/admin/allowedRoutes.tsx b/packages/client-core/src/admin/allowedRoutes.tsx
@@ -32,11 +32,10 @@ import { LoadingCircle } from '../components/LoadingCircle'
 const Avatars = lazy(() => import('./components/Avatars'))
 const Benchmarking = lazy(() => import('./components/Benchmarking'))
 const BotSetting = lazy(() => import('./components/Bots'))
-const Groups = lazy(() => import('./components/Group'))
 const Instance = lazy(() => import('./components/Instance'))
 const Invites = lazy(() => import('./components/Invite'))
 const Locations = lazy(() => import('./components/Location'))
-const Party = lazy(() => import('./components/Party'))
+const Channels = lazy(() => import('./components/Channels'))
 const Projects = lazy(() => import('./components/Project'))
 const Recordings = lazy(() => import('./components/Recordings'))
 const Resources = lazy(() => import('./components/Resources'))
@@ -48,12 +47,11 @@ const Users = lazy(() => import('./components/Users'))
 const availableRoutes = [
   { route: '/avatars', key: 'globalAvatars', component: Avatars, props: {} },
   { route: '/benchmarking', key: 'benchmarking', component: Benchmarking, props: {} },
-  { route: '/groups', key: 'groups', component: Groups, props: {} },
   { route: '/instance', key: 'instance', component: Instance, props: {} },
   { route: '/invites', key: 'invite', component: Invites, props: {} },
   { route: '/locations', key: 'location', component: Locations, props: {} },
   { route: '/routes', key: 'routes', component: RoutesComp, props: {} },
-  { route: '/parties', key: 'party', component: Party, props: {} },
+  { route: '/channel', key: 'channel', component: Channels, props: {} },
   { route: '/bots', key: 'bot', component: BotSetting, props: {} },
   { route: '/projects', key: 'projects', component: Projects, props: {} },
   { route: '/server', key: 'server', component: Server, props: {} },

diff --git a/...-core/src/admin/common/variables/party.ts → ...ore/src/admin/common/variables/channel.ts b/...-core/src/admin/common/variables/party.ts → ...ore/src/admin/common/variables/channel.ts
@@ -23,21 +23,21 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-export interface PartyPropsTable {
+export interface ChannelPropsTable {
   className?: string
   search: string
 }
 
-export interface PartyColumn {
-  id: 'id' | 'maxMembers' | 'action'
+export interface ChannelColumn {
+  id: 'id' | 'action' | 'name'
   label: string
   minWidth?: number
   align?: 'right'
 }
 
-export const partyColumns: PartyColumn[] = [
+export const channelColumns: ChannelColumn[] = [
   { id: 'id', label: 'ID', minWidth: 65 },
-  { id: 'maxMembers', label: 'Max Members', minWidth: 65 },
+  { id: 'name', label: 'Name', minWidth: 65 },
   {
     id: 'action',
     label: 'Action',
@@ -46,10 +46,10 @@ export const partyColumns: PartyColumn[] = [
   }
 ]
 
-export interface PartyData {
+export interface ChannelData {
   el: any
   id: string
   instance?: string
-  maxMembers: number
+  name: string
   action: any
 }
diff --git a/...rc/admin/components/Party/PartyDrawer.tsx → ...min/components/Channels/ChannelDrawer.tsx b/...rc/admin/components/Party/PartyDrawer.tsx → ...min/components/Channels/ChannelDrawer.tsx
@@ -28,7 +28,7 @@ import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import InputText from '@etherealengine/client-core/src/common/components/InputText'
-import { Party } from '@etherealengine/common/src/interfaces/Party'
+import { Channel } from '@etherealengine/common/src/interfaces/Channel'
 import { getMutableState } from '@etherealengine/hyperflux'
 import Button from '@etherealengine/ui/src/primitives/mui/Button'
 import Container from '@etherealengine/ui/src/primitives/mui/Container'
@@ -39,54 +39,54 @@ import { NotificationService } from '../../../common/services/NotificationServic
 import { AuthState } from '../../../user/services/AuthService'
 import DrawerView from '../../common/DrawerView'
 import { validateForm } from '../../common/validation/formValidation'
-import { AdminPartyService } from '../../services/PartyService'
+import { AdminChannelService } from '../../services/ChannelService'
 import styles from '../../styles/admin.module.scss'
 
-export enum PartyDrawerMode {
+export enum ChannelDrawerMode {
   Create,
   ViewEdit
 }
 
 interface Props {
   open: boolean
-  mode: PartyDrawerMode
-  selectedParty?: Party
+  mode: ChannelDrawerMode
+  selectedChannel?: Channel
   onClose: () => void
 }
 
 const defaultState = {
-  maxMembers: 10,
+  name: '',
   formErrors: {
-    maxMembers: ''
+    name: ''
   }
 }
 
-const PartyDrawer = ({ open, mode, selectedParty, onClose }: Props) => {
+const ChannelDrawer = ({ open, mode, selectedChannel, onClose }: Props) => {
   const { t } = useTranslation()
   const [editMode, setEditMode] = useState(false)
   const [state, setState] = useState({ ...defaultState })
 
   const user = useHookstate(getMutableState(AuthState)).user.value
 
-  const hasWriteAccess = user.scopes && user.scopes.find((item) => item.type === 'party:write')
-  const viewMode = mode === PartyDrawerMode.ViewEdit && !editMode
+  const hasWriteAccess = user.scopes && user.scopes.find((item) => item.type === 'channel:write')
+  const viewMode = mode === ChannelDrawerMode.ViewEdit && !editMode
 
   useEffect(() => {
-    loadSelectedParty()
-  }, [selectedParty])
+    loadSelectedChannel()
+  }, [selectedChannel])
 
-  const loadSelectedParty = () => {
-    if (selectedParty) {
+  const loadSelectedChannel = () => {
+    if (selectedChannel) {
       setState({
         ...defaultState,
-        maxMembers: selectedParty.maxMembers ?? 0
+        name: selectedChannel.name ?? 0
       })
     }
   }
 
   const handleCancel = () => {
     if (editMode) {
-      loadSelectedParty()
+      loadSelectedChannel()
       setEditMode(false)
     } else handleClose()
   }
@@ -102,8 +102,8 @@ const PartyDrawer = ({ open, mode, selectedParty, onClose }: Props) => {
     let tempErrors = { ...state.formErrors }
 
     switch (name) {
-      case 'maxMembers':
-        tempErrors.maxMembers = value < 2 ? t('admin:components.party.maxMembersRequired') : ''
+      case 'name':
+        tempErrors.name = value < 2 ? t('admin:components.channel.nameRequired') : ''
         break
       default:
         break
@@ -114,21 +114,21 @@ const PartyDrawer = ({ open, mode, selectedParty, onClose }: Props) => {
 
   const handleSubmit = async () => {
     const data = {
-      maxMembers: state.maxMembers
+      name: state.name
     }
 
     let tempErrors = {
       ...state.formErrors,
-      maxMembers: state.maxMembers ? '' : t('admin:components.party.maxMembersRequired')
+      name: state.name ? '' : t('admin:components.channel.nameRequired')
     }
 
     setState({ ...state, formErrors: tempErrors })
 
     if (validateForm(state, tempErrors)) {
-      if (mode === PartyDrawerMode.Create) {
-        await AdminPartyService.createAdminParty(data)
-      } else if (selectedParty) {
-        await AdminPartyService.patchParty(selectedParty.id!, data)
+      if (mode === ChannelDrawerMode.Create) {
+        await AdminChannelService.createAdminChannel(data)
+      } else if (selectedChannel) {
+        await AdminChannelService.patchChannel(selectedChannel.id!, data)
         setEditMode(false)
       }
 
@@ -142,18 +142,18 @@ const PartyDrawer = ({ open, mode, selectedParty, onClose }: Props) => {
     <DrawerView open={open} onClose={onClose}>
       <Container maxWidth="sm" className={styles.mt20}>
         <DialogTitle className={styles.textAlign}>
-          {mode === PartyDrawerMode.Create && t('admin:components.party.createParty')}
-          {mode === PartyDrawerMode.ViewEdit &&
+          {mode === ChannelDrawerMode.Create && t('admin:components.channel.createChannel')}
+          {mode === ChannelDrawerMode.ViewEdit &&
             editMode &&
-            `${t('admin:components.common.update')} ${selectedParty?.id}`}
-          {mode === PartyDrawerMode.ViewEdit && !editMode && `${selectedParty?.id}`}
+            `${t('admin:components.common.update')} ${selectedChannel?.id}`}
+          {mode === ChannelDrawerMode.ViewEdit && !editMode && `${selectedChannel?.id}`}
         </DialogTitle>
 
         <InputText
-          name="maxMembers"
-          label={t('admin:components.party.maxMembers')}
-          value={state.maxMembers}
-          error={state.formErrors.maxMembers}
+          name="name"
+          label={t('admin:components.channel.name')}
+          value={state.name}
+          error={state.formErrors.name}
           disabled={viewMode}
           onChange={handleChange}
         />
@@ -162,12 +162,12 @@ const PartyDrawer = ({ open, mode, selectedParty, onClose }: Props) => {
           <Button className={styles.outlinedButton} onClick={handleCancel}>
             {t('admin:components.common.cancel')}
           </Button>
-          {(mode === PartyDrawerMode.Create || editMode) && (
+          {(mode === ChannelDrawerMode.Create || editMode) && (
             <Button className={styles.gradientButton} onClick={handleSubmit}>
               {t('admin:components.common.submit')}
             </Button>
           )}
-          {mode === PartyDrawerMode.ViewEdit && !editMode && (
+          {mode === ChannelDrawerMode.ViewEdit && !editMode && (
             <Button className={styles.gradientButton} disabled={!hasWriteAccess} onClick={() => setEditMode(true)}>
               {t('admin:components.common.edit')}
             </Button>
@@ -178,4 +178,4 @@ const PartyDrawer = ({ open, mode, selectedParty, onClose }: Props) => {
   )
 }
 
-export default PartyDrawer
+export default ChannelDrawer