beenull/WebChat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop'

Browse source
This commit is contained in:
molvqingtai 2024-11-09 22:44:01 +08:00
commit 4f9c135fb9
18 changed files with 269 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/app/content/App.tsx
View file

@ -14,7 +14,7 @@ import { Toaster } from 'sonner'
import DanmakuContainer from './components/DanmakuContainer'
import DanmakuDomain from '@/domain/Danmaku'
import AppStatusDomain from '@/domain/AppStatus'
import { cn } from '@/utils'
import { checkDarkMode, cn } from '@/utils'
/**
* Fix requestAnimationFrame error in jest
@ -52,8 +52,6 @@ export default function App() {
}
}, [userInfoSetFinished, messageListLoadFinished])
const danmakuContainerRef = useRef<HTMLDivElement>(null)
useEffect(() => {
danmakuIsEnabled && send(danmakuDomain.command.MountCommand(danmakuContainerRef.current!))
return () => {
@ -61,20 +59,41 @@ export default function App() {
}
}, [danmakuIsEnabled])
const themeMode =
userInfo?.themeMode === 'system'
? checkDarkMode()
? 'dark'
: 'light'
: (userInfo?.themeMode ?? (checkDarkMode() ? 'dark' : 'light'))
const danmakuContainerRef = useRef<HTMLDivElement>(null)
return (
appStatusLoadIsFinished && (
<div id="app" className={cn('contents', userInfo?.themeMode)}>
<div id="app" className={cn('contents', themeMode)}>
{appStatusLoadIsFinished && (
<>
<AppMain>
<Header />
<Main />
<Footer />
{notUserInfo && <Setup></Setup>}
<Toaster richColors offset="70px" visibleToasts={1} position="top-center"></Toaster>
<Toaster
richColors
theme={themeMode}
offset="70px"
visibleToasts={1}
toastOptions={{
classNames: {
toast: 'dark:bg-slate-950 border dark:border-slate-600'
}
}}
position="top-center"
></Toaster>
</AppMain>
<AppButton></AppButton>
</>
)}
<DanmakuContainer ref={danmakuContainerRef} />
</div>
)
)
}

2
src/app/content/index.tsx
View file

@ -13,10 +13,10 @@ import { NotificationImpl } from '@/domain/impls/Notification'
import { ToastImpl } from '@/domain/impls/Toast'
// import { PeerRoomImpl } from '@/domain/impls/PeerRoom'
import { PeerRoomImpl } from '@/domain/impls/PeerRoom2'
import '@/assets/styles/tailwind.css'
// Remove import after merging: https://github.com/emilkowalski/sonner/pull/508
import '@/assets/styles/sonner.css'
import '@/assets/styles/overlay.css'
import '@/assets/styles/tailwind.css'
import NotificationDomain from '@/domain/Notification'
import { createElement } from '@/utils'

19
src/app/content/views/AppButton/index.tsx
View file

@ -7,7 +7,7 @@ import { Button } from '@/components/ui/Button'
import { EVENT } from '@/constants/event'
import UserInfoDomain from '@/domain/UserInfo'
import useTriggerAway from '@/hooks/useTriggerAway'
import { checkSystemDarkMode, cn } from '@/utils'
import { checkDarkMode, cn } from '@/utils'
import LogoIcon0 from '@/assets/images/logo-0.svg'
import LogoIcon1 from '@/assets/images/logo-1.svg'
import LogoIcon2 from '@/assets/images/logo-2.svg'
@ -36,8 +36,7 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {
const DayLogo = [LogoIcon0, LogoIcon1, LogoIcon2, LogoIcon3, LogoIcon4, LogoIcon5, LogoIcon6][getDay(Date())]
const isDarkMode =
userInfo?.themeMode === 'dark' ? true : userInfo?.themeMode === 'light' ? false : checkSystemDarkMode()
const isDarkMode = userInfo?.themeMode === 'dark' ? true : userInfo?.themeMode === 'light' ? false : checkDarkMode()
const [menuOpen, setMenuOpen] = useState(false)
@ -107,7 +106,7 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {
<Button
onClick={handleSwitchTheme}
variant="outline"
className="relative size-10 overflow-hidden rounded-full p-0 shadow"
className="relative size-10 overflow-hidden rounded-full p-0 shadow dark:border-slate-600"
>
<div
className={cn(
@ -121,10 +120,18 @@ const AppButton: FC<AppButtonProps> = ({ className }) => {
</div>
</Button>
<Button onClick={handleOpenOptionsPage} variant="outline" className="size-10 rounded-full p-0 shadow">
<Button
onClick={handleOpenOptionsPage}
variant="outline"
className="size-10 rounded-full p-0 shadow dark:border-slate-600"
>
<SettingsIcon size={20} />
</Button>
<Button ref={appButtonRef} variant="outline" className="size-10 cursor-grab rounded-full p-0 shadow">
<Button
ref={appButtonRef}
variant="outline"
className="size-10 cursor-grab rounded-full p-0 shadow dark:border-slate-600"
>
<HandIcon size={20} />
</Button>
</motion.div>

4
src/app/content/views/Setup/index.tsx
View file

@ -2,7 +2,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/Avatar'
import { MAX_AVATAR_SIZE } from '@/constants/config'
import MessageListDomain, { Message, MessageType } from '@/domain/MessageList'
import UserInfoDomain, { UserInfo } from '@/domain/UserInfo'
import { checkSystemDarkMode, generateRandomAvatar, generateRandomName } from '@/utils'
import { generateRandomAvatar, generateRandomName } from '@/utils'
import { UserIcon } from 'lucide-react'
import { nanoid } from 'nanoid'
import { FC, useEffect, useState } from 'react'
@ -39,7 +39,7 @@ const generateUserInfo = async (): Promise<UserInfo> => {
name: generateRandomName(),
avatar: await generateRandomAvatar(MAX_AVATAR_SIZE),
createTime: Date.now(),
themeMode: checkSystemDarkMode() ? 'dark' : 'system',
themeMode: 'system',
danmakuEnabled: true,
notificationEnabled: true,
notificationType: 'all'

10
src/app/options/App.tsx
View file

@ -16,7 +16,15 @@ function App() {
<VersionLink></VersionLink>
<Main>
<ProfileForm></ProfileForm>
<Toaster richColors position="top-center" />
<Toaster
richColors
position="top-center"
toastOptions={{
classNames: {
toast: 'dark:bg-slate-950 border dark:border-slate-600'
}
}}
/>
</Main>
<BadgeList></BadgeList>
</Layout>

4
src/app/options/components/ProfileForm.tsx
View file

@ -9,7 +9,7 @@ import { Button } from '@/components/ui/Button'
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/Form'
import { Input } from '@/components/ui/Input'
import UserInfoDomain, { type UserInfo } from '@/domain/UserInfo'
import { checkSystemDarkMode, cn, generateRandomAvatar } from '@/utils'
import { cn, generateRandomAvatar } from '@/utils'
import { RadioGroup, RadioGroupItem } from '@/components/ui/RadioGroup'
import { Label } from '@/components/ui/Label'
import { RefreshCcwIcon } from 'lucide-react'
@ -24,7 +24,7 @@ const defaultUserInfo: UserInfo = {
name: '',
avatar: '',
createTime: Date.now(),
themeMode: checkSystemDarkMode() ? 'dark' : 'system',
themeMode: 'system',
danmakuEnabled: true,
notificationEnabled: true,
notificationType: 'all'

2
src/domain/AppStatus.ts
View file

@ -40,7 +40,7 @@ const AppStatusDomain = Remesh.domain({
})
const StatusState = domain.state<AppStatus>({
name: 'AppStatus.OpenState',
name: 'AppStatus.StatusState',
default: defaultStatusState
})

97
src/domain/Room.ts
View file

@ -58,7 +58,7 @@ export interface TextMessage extends MessageUser {
export type RoomMessage = SyncUserMessage | SyncHistoryMessage | LikeMessage | HateMessage | TextMessage
export type RoomUser = MessageUser & { peerId: string; joinTime: number }
export type RoomUser = MessageUser & { peerIds: string[]; joinTime: number }
const MessageUserSchema = {
userId: v.string(),
@ -165,7 +165,7 @@ const RoomDomain = Remesh.domain({
const SelfUserQuery = domain.query({
name: 'Room.SelfUserQuery',
impl: ({ get }) => {
return get(UserListQuery()).find((user) => user.peerId === get(PeerIdQuery()))!
return get(UserListQuery()).find((user) => user.peerIds.includes(peerRoom.peerId))!
}
})
@ -185,9 +185,7 @@ const RoomDomain = Remesh.domain({
const JoinRoomCommand = domain.command({
name: 'Room.JoinRoomCommand',
impl: ({ get }) => {
peerRoom.joinRoom()
const { id: userId, name: username, avatar: userAvatar } = get(userInfoDomain.query.UserInfoQuery())!
return [
UpdateUserListCommand({
type: 'create',
@ -204,15 +202,20 @@ const RoomDomain = Remesh.domain({
receiveTime: Date.now()
}),
JoinStatusModule.command.SetFinishedCommand(),
JoinRoomEvent(peerRoom.roomId)
JoinRoomEvent(peerRoom.roomId),
SelfJoinRoomEvent(peerRoom.roomId)
]
}
})
JoinRoomCommand.after(() => {
peerRoom.joinRoom()
return null
})
const LeaveRoomCommand = domain.command({
name: 'Room.LeaveRoomCommand',
impl: ({ get }) => {
peerRoom.leaveRoom()
const { id: userId, name: username, avatar: userAvatar } = get(userInfoDomain.query.UserInfoQuery())!
return [
messageListDomain.command.CreateItemCommand({
@ -230,11 +233,17 @@ const RoomDomain = Remesh.domain({
user: { peerId: peerRoom.peerId, joinTime: Date.now(), userId, username, userAvatar }
}),
JoinStatusModule.command.SetInitialCommand(),
LeaveRoomEvent(peerRoom.roomId)
LeaveRoomEvent(peerRoom.roomId),
SelfLeaveRoomEvent(peerRoom.roomId)
]
}
})
LeaveRoomCommand.after(() => {
peerRoom.leaveRoom()
return null
})
const SendTextMessageCommand = domain.command({
name: 'Room.SendTextMessageCommand',
impl: ({ get }, message: string | { body: string; atUsers: AtUser[] }) => {
@ -314,6 +323,7 @@ const RoomDomain = Remesh.domain({
const syncUserMessage: SyncUserMessage = {
...self,
id: nanoid(),
peerId: peerRoom.peerId,
sendTime: Date.now(),
lastMessageTime,
type: SendType.SyncUser
@ -393,12 +403,32 @@ const RoomDomain = Remesh.domain({
const UpdateUserListCommand = domain.command({
name: 'Room.UpdateUserListCommand',
impl: ({ get }, action: { type: 'create' | 'delete'; user: RoomUser }) => {
impl: ({ get }, action: { type: 'create' | 'delete'; user: Omit<RoomUser, 'peerIds'> & { peerId: string } }) => {
const userList = get(UserListState())
const existUser = userList.find((user) => user.userId === action.user.userId)
if (action.type === 'create') {
return [UserListState().new(upsert(userList, action.user, 'userId'))]
return [
UserListState().new(
upsert(
userList,
{ ...action.user, peerIds: [...(existUser?.peerIds || []), action.user.peerId] },
'userId'
)
)
]
} else {
return [UserListState().new(userList.filter(({ userId }) => userId !== action.user.userId))]
return [
UserListState().new(
upsert(
userList,
{
...action.user,
peerIds: existUser?.peerIds?.filter((peerId) => peerId !== action.user.peerId) || []
},
'userId'
).filter((user) => user.peerIds.length)
)
]
}
}
})
@ -443,10 +473,18 @@ const RoomDomain = Remesh.domain({
name: 'Room.OnJoinRoomEvent'
})
const SelfJoinRoomEvent = domain.event<string>({
name: 'Room.SelfJoinRoomEvent'
})
const OnLeaveRoomEvent = domain.event<string>({
name: 'Room.OnLeaveRoomEvent'
})
const SelfLeaveRoomEvent = domain.event<string>({
name: 'Room.SelfLeaveRoomEvent'
})
const OnErrorEvent = domain.event<Error>({
name: 'Room.OnErrorEvent'
})
@ -486,22 +524,18 @@ const RoomDomain = Remesh.domain({
const messageCommand$ = (() => {
switch (message.type) {
case SendType.SyncUser: {
const userList = get(UserListQuery())
const selfUser = get(SelfUserQuery())
// If the browser has multiple tabs open, it can cause the same user to join multiple times with the same peerId but different userId
const isRepeatJoin = userList.some((user) => user.userId === message.userId)
// When a new user joins, it triggers join events for all users, i.e., newUser join event and oldUser join event
// Use joinTime to determine if it's a new user
const isNewJoinEvent = selfUser.joinTime < message.joinTime
// If a new user joins after the current user has entered the room, a join log message needs to be created.
const existUser = get(UserListQuery()).find((user) => user.userId === message.userId)
const isNewJoinUser = !existUser && message.joinTime > selfUser.joinTime
const lastMessageTime = get(LastMessageTimeQuery())
const needSyncHistory = lastMessageTime > message.lastMessageTime
return isRepeatJoin
? EMPTY
: of(
return of(
UpdateUserListCommand({ type: 'create', user: message }),
isNewJoinEvent
isNewJoinUser
? messageListDomain.command.CreateItemCommand({
...message,
id: nanoid(),
@ -574,20 +608,26 @@ const RoomDomain = Remesh.domain({
impl: ({ get }) => {
const onLeaveRoom$ = fromEventPattern<string>(peerRoom.onLeaveRoom).pipe(
map((peerId) => {
if (get(JoinStatusModule.query.IsInitialQuery())) {
return null
}
// console.log('onLeaveRoom', peerId)
const user = get(UserListQuery()).find((user) => user.peerId === peerId)
if (user) {
const existUser = get(UserListQuery()).find((user) => user.peerIds.includes(peerId))
if (existUser) {
return [
UpdateUserListCommand({ type: 'delete', user }),
messageListDomain.command.CreateItemCommand({
...user,
UpdateUserListCommand({ type: 'delete', user: { ...existUser, peerId } }),
existUser.peerIds.length === 1
? messageListDomain.command.CreateItemCommand({
...existUser,
id: nanoid(),
body: `"${user.username}" left the chat`,
body: `"${existUser.username}" left the chat`,
type: MessageType.Prompt,
sendTime: Date.now(),
receiveTime: Date.now()
}),
})
: null,
OnLeaveRoomEvent(peerId)
]
} else {
@ -612,7 +652,6 @@ const RoomDomain = Remesh.domain({
}
})
// TODO: Move this to a service worker in the future, so we don't need to send a leave room message every time the page refreshes
domain.effect({
name: 'Room.OnUnloadEffect',
impl: ({ get }) => {
@ -647,7 +686,9 @@ const RoomDomain = Remesh.domain({
SendSyncUserMessageEvent,
SendSyncHistoryMessageEvent,
JoinRoomEvent,
SelfJoinRoomEvent,
LeaveRoomEvent,
SelfLeaveRoomEvent,
OnMessageEvent,
OnTextMessageEvent,
OnJoinRoomEvent,

12
src/domain/Toast.ts
View file

@ -8,6 +8,18 @@ const ToastDomain = Remesh.domain({
impl: (domain) => {
const roomDomain = domain.getDomain(RoomDomain())
const toastModule = ToastModule(domain)
domain.effect({
name: 'Toast.OnRoomSelfJoinRoomEffect',
impl: ({ fromEvent }) => {
const onRoomJoin$ = fromEvent(roomDomain.event.SelfJoinRoomEvent).pipe(
map(() => toastModule.command.LoadingCommand({ message: 'Connected to the chat.', duration: 3000 }))
)
return onRoomJoin$
}
})
domain.effect({
name: 'Toast.OnRoomErrorEffect',
impl: ({ fromEvent }) => {

2
src/domain/externs/PeerRoom.ts
View file

@ -5,7 +5,7 @@ export interface PeerRoom {
readonly peerId: string
readonly roomId: string
joinRoom: () => PeerRoom
sendMessage: (message: RoomMessage, id?: string) => PeerRoom
sendMessage: (message: RoomMessage, id?: string | string[]) => PeerRoom
onMessage: (callback: (message: RoomMessage) => void) => PeerRoom
leaveRoom: () => PeerRoom
onJoinRoom: (callback: (id: string) => void) => PeerRoom

16
src/domain/externs/Toast.ts
View file

@ -1,10 +1,12 @@
import { Remesh } from 'remesh'
export interface Toast {
success: (message: string) => void
error: (message: string) => void
info: (message: string) => void
warning: (message: string) => void
success: (message: string, duration?: number) => number | string
error: (message: string, duration?: number) => number | string
info: (message: string, duration?: number) => number | string
warning: (message: string, duration?: number) => number | string
loading: (message: string, duration?: number) => number | string
cancel: (id: number | string) => number | string
}
export const ToastExtern = Remesh.extern<Toast>({
@ -20,6 +22,12 @@ export const ToastExtern = Remesh.extern<Toast>({
},
warning: () => {
throw new Error('"warning" not implemented.')
},
loading: () => {
throw new Error('"loading" not implemented.')
},
cancel: () => {
throw new Error('"cancel" not implemented.')
}
}
})

2
src/domain/impls/PeerRoom.ts
View file

@ -45,7 +45,7 @@ class PeerRoom extends EventHub {
return this
}
sendMessage(message: RoomMessage, id?: string) {
sendMessage(message: RoomMessage, id?: string | string[]) {
if (!this.room) {
this.once('action', () => {
if (!this.room) {

2
src/domain/impls/PeerRoom2.ts
View file

@ -46,7 +46,7 @@ class PeerRoom extends EventHub {
return this
}
sendMessage(message: RoomMessage, id?: string) {
sendMessage(message: RoomMessage, id?: string | string[]) {
if (!this.room) {
this.once('action', () => {
if (!this.room) {

24
src/domain/impls/Toast.ts
View file

@ -2,16 +2,24 @@ import { toast } from 'sonner'
import { ToastExtern } from '@/domain/externs/Toast'
export const ToastImpl = ToastExtern.impl({
success: (message: string) => {
toast.success(message)
success: (message: string, duration: number = 4000) => {
return toast.success(message, { duration })
},
error: (message: string) => {
toast.error(message)
error: (message: string, duration: number = 4000) => {
return toast.error(message, { duration })
},
info: (message: string) => {
toast.info(message)
info: (message: string, duration: number = 4000) => {
return toast.info(message, { duration })
},
warning: (message: string) => {
toast.warning(message)
warning: (message: string, duration: number = 4000) => {
return toast.warning(message, { duration })
},
loading: (message: string, duration: number = 4000) => {
const id = toast.loading(message, { duration })
setTimeout(() => toast.dismiss(id), duration)
return id
},
cancel: (id: number | string) => {
return toast.dismiss(id)
}
})

79
src/domain/modules/Toast.ts
View file

@ -8,51 +8,90 @@ export interface ToastOptions {
const ToastModule = (domain: RemeshDomainContext, options: ToastOptions = { name: 'MessageToastModule' }) => {
const toast = domain.getExtern(ToastExtern)
const SuccessEvent = domain.event({
const SuccessEvent = domain.event<number | string>({
name: `${options.name}.SuccessEvent`
})
const SuccessCommand = domain.command({
name: `${options.name}.SuccessCommand`,
impl: (_, message: string) => {
toast.success(message)
return [SuccessEvent()]
impl: (_, message: string | { message: string; duration?: number }) => {
const id = toast.success(
typeof message === 'string' ? message : message.message,
typeof message === 'string' ? undefined : message.duration
)
return [SuccessEvent(id)]
}
})
const ErrorEvent = domain.event({
const ErrorEvent = domain.event<number | string>({
name: `${options.name}.ErrorEvent`
})
const ErrorCommand = domain.command({
name: `${options.name}.ErrorCommand`,
impl: (_, message: string) => {
toast.error(message)
return [ErrorEvent()]
impl: (_, message: string | { message: string; duration?: number }) => {
const id = toast.error(
typeof message === 'string' ? message : message.message,
typeof message === 'string' ? undefined : message.duration
)
return [ErrorEvent(id)]
}
})
const InfoEvent = domain.event({
const InfoEvent = domain.event<number | string>({
name: `${options.name}.InfoEvent`
})
const InfoCommand = domain.command({
name: `${options.name}.InfoCommand`,
impl: (_, message: string) => {
toast.info(message)
return [InfoEvent()]
impl: (_, message: string | { message: string; duration?: number }) => {
const id = toast.info(
typeof message === 'string' ? message : message.message,
typeof message === 'string' ? undefined : message.duration
)
return [InfoEvent(id)]
}
})
const WarningEvent = domain.event({
const WarningEvent = domain.event<number | string>({
name: `${options.name}.WarningEvent`
})
const WarningCommand = domain.command({
name: `${options.name}.WarningCommand`,
impl: (_, message: string) => {
toast.warning(message)
return [WarningEvent()]
impl: (_, message: string | { message: string; duration?: number }) => {
const id = toast.warning(
typeof message === 'string' ? message : message.message,
typeof message === 'string' ? undefined : message.duration
)
return [WarningEvent(id)]
}
})
const LoadingEvent = domain.event<number | string>({
name: `${options.name}.LoadingEvent`
})
const LoadingCommand = domain.command({
name: `${options.name}.LoadingCommand`,
impl: (_, message: string | { message: string; duration?: number }) => {
const id = toast.loading(
typeof message === 'string' ? message : message.message,
typeof message === 'string' ? undefined : message.duration
)
return [LoadingEvent(id)]
}
})
const CancelEvent = domain.event<number | string>({
name: `${options.name}.CancelEvent`
})
const CancelCommand = domain.command({
name: `${options.name}.CancelCommand`,
impl: (_, id: number | string) => {
toast.cancel(id)
return [CancelEvent(id)]
}
})
@ -61,13 +100,17 @@ const ToastModule = (domain: RemeshDomainContext, options: ToastOptions = { name
SuccessEvent,
ErrorEvent,
InfoEvent,
WarningEvent
WarningEvent,
LoadingEvent,
CancelEvent
},
command: {
SuccessCommand,
ErrorCommand,
InfoCommand,
WarningCommand
WarningCommand,
LoadingCommand,
CancelCommand
}
}
}

11
src/utils/checkDarkMode.ts Normal file
View file

@ -0,0 +1,11 @@
const checkDarkMode = () => {
const colorScheme = document.documentElement.style.getPropertyValue('color-scheme').trim()
if (colorScheme === 'dark') {
return true // Prefer the website's color-scheme property value
}
return window.matchMedia('(prefers-color-scheme: dark)').matches // Otherwise, check the system theme
}
export default checkDarkMode

3
src/utils/checkSystemDarkMode.ts
View file

@ -1,3 +0,0 @@
const checkSystemDarkMode = () => window.matchMedia('(prefers-color-scheme: dark)').matches
export default checkSystemDarkMode

2
src/utils/index.ts
View file

@ -4,7 +4,7 @@ export { default as createElement } from './createElement'
export { default as getSiteInfo } from './getSiteInfo'
export { default as compressImage } from './compressImage'
export { default as isNullish } from './isNullish'
export { default as checkSystemDarkMode } from './checkSystemDarkMode'
export { default as checkDarkMode } from './checkDarkMode'
export { default as stringToHex } from './stringToHex'
export { default as debounce } from './debounce'
export { default as throttle } from './throttle'