From 7b8af1c3f5ed99d11e4923c03e599f1d7e47050f Mon Sep 17 00:00:00 2001 From: minisailboat Date: Fri, 31 May 2024 09:43:58 +0800 Subject: [PATCH 1/4] =?UTF-8?q?fix=EF=BC=9A=E9=80=9A=E8=AF=9D=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.tsx | 2 +- src/components/call/index.tsx | 2 +- src/stores/call.ts | 96 +++++++++++++++++++++++++++++++++++ src/types/store.d.ts | 80 ++++++++++++++++++++++------- 4 files changed, 160 insertions(+), 20 deletions(-) create mode 100644 src/stores/call.ts diff --git a/src/app.tsx b/src/app.tsx index d2343ff5..48690d1d 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -45,7 +45,7 @@ const App = memo(() => { }>{useRoutes(routes)} {/* 通话组件 */} - {/* */} + ) diff --git a/src/components/call/index.tsx b/src/components/call/index.tsx index 0538826a..317581d9 100644 --- a/src/components/call/index.tsx +++ b/src/components/call/index.tsx @@ -20,7 +20,7 @@ const Call: React.FC = memo(() => { const [avatar, setAvatar] = useState('') useEffect(() => { - setOpen(true) + setOpen(false) setAvatar('https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp') return () => { setOpen(false) diff --git a/src/stores/call.ts b/src/stores/call.ts new file mode 100644 index 00000000..e18f7a2d --- /dev/null +++ b/src/stores/call.ts @@ -0,0 +1,96 @@ +import { create } from 'zustand' +import { CallStore, CallStoreMethods, CallOptions } from '@/types/store' +import { createJSONStorage, devtools, persist } from 'zustand/middleware' + +const states: CallOptions = { + callId: '', + callType: '', + callStatus: '', + isVideo: false, + isAudio: false, + isGroup: false +} + +const actions = (set: any): CallStoreMethods => ({ + update: async (options) => set(options), + create: function ( + callId: string, + callType: string, + isVideo: boolean, + isAudio: boolean, + isGroup: boolean + ): Promise> { + console.log('create', callId, callType, isVideo, isAudio, isGroup) + return Promise.resolve({ + code: 200, + data: { + callId, + callType, + isVideo, + isAudio, + isGroup + }, + msg: 'success' + }) + }, + join: function ( + callId: string, + callType: string, + isVideo: boolean, + isAudio: boolean, + isGroup: boolean + ): Promise> { + console.log('join', callId, callType, isVideo, isAudio, isGroup) + return Promise.resolve({ + code: 0, + data: { + callId: '123', + callType: 'video', + isVideo: true, + isAudio: true, + isGroup: true + }, + msg: 'success' + }) + }, + leave: function (): Promise> { + console.log('leave') + return Promise.resolve({ + code: 0, + data: {}, + msg: 'success' + }) + }, + reject: function (): Promise> { + console.log('reject') + return Promise.resolve({ + code: 0, + data: {}, + msg: 'success' + }) + }, + hangup: function (): Promise> { + console.log('hangup') + return Promise.resolve({ + code: 0, + data: {}, + msg: 'success' + }) + } +}) + +const commonStore = (set: any): CallStore => ({ + ...states, + ...actions(set) +}) + +const useCallStore = create( + devtools( + persist(commonStore, { + name: 'COSS_CALL_STORE', + storage: createJSONStorage(() => localStorage) + }) + ) +) + +export default useCallStore diff --git a/src/types/store.d.ts b/src/types/store.d.ts index 97801a42..f6505829 100644 --- a/src/types/store.d.ts +++ b/src/types/store.d.ts @@ -1,21 +1,5 @@ import { LoginParams, LogoutParams } from './api' -export interface UserOptions { - /*** @description 用户 id*/ - userId: string - /*** @description 用户所有信息*/ - userInfo: any - /** @description token */ - token: string -} - -export interface UserStoreMethods { - /** @description 更新某个值 */ - update: (options: Partial) => Promise - login: (params: LoginParams) => Promise> - logout: (params: LogoutParams) => Promise> -} - export interface CommonOptions { /** * @description 当前主题 'light' | 'dark' @@ -39,7 +23,67 @@ export interface CommonStoreMethods { update: (options: Partial) => Promise } -// 用户仓库 -export type UserStore = UserOptions & UserStoreMethods +export interface UserOptions { + /*** @description 用户 id*/ + userId: string + /*** @description 用户所有信息*/ + userInfo: any + /** @description token */ + token: string +} + +export interface UserStoreMethods { + /** @description 更新某个值 */ + update: (options: Partial) => Promise + login: (params: LoginParams) => Promise> + logout: (params: LogoutParams) => Promise> +} + +export interface CallOptions { + /** @description 当前通话 id */ + callId: string + /** @description 当前通话类型 */ + callType: string + /** @description 当前通话状态 */ + callStatus: string + /** @description 当前通话是否是视频通话 */ + isVideo: boolean + /** @description 当前通话是否是音频通话 */ + isAudio: boolean + /** @description 当前通话是否是群聊 */ + isGroup: boolean +} + +export interface CallStoreMethods { + /** @description 更新某个值 */ + update: (options: Partial) => Promise + /** @description 创建通话 */ + create: ( + callId: string, + callType: string, + isVideo: boolean, + isAudio: boolean, + isGroup: boolean + ) => Promise> + /** @description 加入通话 */ + join: ( + callId: string, + callType: string, + isVideo: boolean, + isAudio: boolean, + isGroup: boolean + ) => Promise> + /** @description 离开通话 */ + leave: () => Promise> + /** @description 拒绝通话 */ + reject: () => Promise> + /** @description 挂断通话 */ + hangup: () => Promise> +} + // 通用仓库 export type CommonStore = CommonOptions & CommonStoreMethods +// 用户仓库 +export type UserStore = UserOptions & UserStoreMethods +// 通话仓库 +export type CallStore = CallOptions & CallStoreMethods From bdd50c92f343478ff8797b7ccdc9f9a552508934 Mon Sep 17 00:00:00 2001 From: zwtesttt <107228797+zwtesttt@users.noreply.github.com> Date: Fri, 31 May 2024 09:48:37 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix:=E5=B7=A5=E4=BD=9C=E6=B5=81=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=89=8B=E5=8A=A8=E6=89=A7=E8=A1=8C=20(#19)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/build-docker.yaml | 2 ++ src/app.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/build-docker.yaml b/.github/workflows/build-docker.yaml index dab297b3..779a1e84 100644 --- a/.github/workflows/build-docker.yaml +++ b/.github/workflows/build-docker.yaml @@ -4,6 +4,8 @@ on: push: branches: - 'master' + workflow_dispatch: + jobs: build: runs-on: ubuntu-latest diff --git a/src/app.tsx b/src/app.tsx index 48690d1d..a5dfaf56 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -10,7 +10,7 @@ import enUS from 'antd/locale/en_US' import zhCN from 'antd/locale/zh_CN' import dayjs from 'dayjs' import { Locale } from 'antd/es/locale' -import Call from '@/components/call' +// import Call from '@/components/call' const App = memo(() => { const commonStore = useCommonStore() From 34b8c9060f802f273efb9746337db1ae41eee96d Mon Sep 17 00:00:00 2001 From: minisailboat Date: Fri, 31 May 2024 11:34:30 +0800 Subject: [PATCH 3/4] feat: CallStore --- src/components/call/index.tsx | 39 +++++++++++------ .../messages/message-header/index.tsx | 20 ++++++++- src/hooks/useDraggable.ts | 7 +-- src/stores/call.ts | 43 +++++++++++++++++-- 4 files changed, 86 insertions(+), 23 deletions(-) diff --git a/src/components/call/index.tsx b/src/components/call/index.tsx index 317581d9..900a2e33 100644 --- a/src/components/call/index.tsx +++ b/src/components/call/index.tsx @@ -1,9 +1,9 @@ import { PhoneFilled, RollbackOutlined } from '@ant-design/icons' import { Avatar, Flex } from 'antd' import clsx from 'clsx' -import React, { memo, useEffect, useRef, useState } from 'react' +import React, { memo, useEffect, useMemo, useState } from 'react' import useMobile from '@/hooks/useMobile' -import useDraggable from '@/hooks/useDraggable' +import useCallStore from '@/stores/call' export interface CallProps { mask?: boolean @@ -11,19 +11,21 @@ export interface CallProps { const Call: React.FC = memo(() => { const { isMobile } = useMobile() - const [open, setOpen] = useState(false) - const [runningBackground, setRunningBackground] = useState(false) + const callStore = useCallStore() - const el = useRef(null) - const { isDraggable } = useDraggable(el.current) + const open = useMemo(() => { + return callStore.isAudio || callStore.isVideo + }, [callStore.isAudio, callStore.isVideo]) + const isVideo = useMemo(() => { + return false + }, [callStore.isVideo]) + const [runningBackground, setRunningBackground] = useState(false) const [avatar, setAvatar] = useState('') useEffect(() => { - setOpen(false) setAvatar('https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp') return () => { - setOpen(false) setAvatar('') } }, []) @@ -32,13 +34,12 @@ const Call: React.FC = memo(() => { <>
setRunningBackground(false)} > - {isDraggable ? '拖动' : '未拖动'}
= memo(() => { )} > = memo(() => { {/* 圆形按钮 */} - + callStore.hangup()}> = memo(() => { 挂断 - + + callStore.join( + `${Date.now()}`, + isVideo ? 'video' : 'audio', + isVideo, + !isVideo, + false + ) + } + > diff --git a/src/components/messages/message-header/index.tsx b/src/components/messages/message-header/index.tsx index f5c8115f..e0dd6e3b 100644 --- a/src/components/messages/message-header/index.tsx +++ b/src/components/messages/message-header/index.tsx @@ -9,8 +9,16 @@ import { Flex, Typography, Dropdown, Divider } from 'antd' import { useMemo } from 'react' import IconButton from '@/components/icon/icon-button' import { $t } from '@/i18n' +import useCallStore from '@/stores/call' const MessageHeader = () => { + const callStore = useCallStore() + + const call = (video: boolean) => { + if (callStore.isAudio || callStore.isVideo) return + callStore.create(`${Date.now()}`, video ? 'video' : 'audio', video, !video, false) + } + return ( @@ -20,8 +28,16 @@ const MessageHeader = () => { - - + call(true)} + /> + call(false)} + /> { console.log('useDraggable', el) if (!el) return el.addEventListener('mousedown', handleMouseDown) - el.addEventListener('mouseup', handleMouseUp) - el.addEventListener('mousemove', (e) => { - console.log(e) - }) + document.addEventListener('mouseup', handleMouseUp) return () => { el.removeEventListener('mousedown', handleMouseDown) - el.removeEventListener('mouseup', handleMouseUp) + document.removeEventListener('mouseup', handleMouseUp) } }, [el]) diff --git a/src/stores/call.ts b/src/stores/call.ts index e18f7a2d..c029dbd2 100644 --- a/src/stores/call.ts +++ b/src/stores/call.ts @@ -11,7 +11,7 @@ const states: CallOptions = { isGroup: false } -const actions = (set: any): CallStoreMethods => ({ +const actions = (set: any, get: any): CallStoreMethods => ({ update: async (options) => set(options), create: function ( callId: string, @@ -21,6 +21,11 @@ const actions = (set: any): CallStoreMethods => ({ isGroup: boolean ): Promise> { console.log('create', callId, callType, isVideo, isAudio, isGroup) + const { update } = get() + update({ + isAudio: !isVideo, + isVideo: isVideo + }) return Promise.resolve({ code: 200, data: { @@ -41,6 +46,11 @@ const actions = (set: any): CallStoreMethods => ({ isGroup: boolean ): Promise> { console.log('join', callId, callType, isVideo, isAudio, isGroup) + const { update } = get() + update({ + isAudio: !isVideo, + isVideo: isVideo + }) return Promise.resolve({ code: 0, data: { @@ -55,6 +65,15 @@ const actions = (set: any): CallStoreMethods => ({ }, leave: function (): Promise> { console.log('leave') + const { update } = get() + update({ + callId: '', + callType: '', + callStatus: '', + isVideo: false, + isAudio: false, + isGroup: false + }) return Promise.resolve({ code: 0, data: {}, @@ -63,6 +82,15 @@ const actions = (set: any): CallStoreMethods => ({ }, reject: function (): Promise> { console.log('reject') + const { update } = get() + update({ + callId: '', + callType: '', + callStatus: '', + isVideo: false, + isAudio: false, + isGroup: false + }) return Promise.resolve({ code: 0, data: {}, @@ -71,6 +99,15 @@ const actions = (set: any): CallStoreMethods => ({ }, hangup: function (): Promise> { console.log('hangup') + const { update } = get() + update({ + callId: '', + callType: '', + callStatus: '', + isVideo: false, + isAudio: false, + isGroup: false + }) return Promise.resolve({ code: 0, data: {}, @@ -79,9 +116,9 @@ const actions = (set: any): CallStoreMethods => ({ } }) -const commonStore = (set: any): CallStore => ({ +const commonStore = (set: any, get: any): CallStore => ({ ...states, - ...actions(set) + ...actions(set, get) }) const useCallStore = create( From b732ecfba1cab6118dacde9b7df4a2a1e80c5a9d Mon Sep 17 00:00:00 2001 From: minisailboat Date: Fri, 31 May 2024 11:35:09 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix=EF=BC=9A=E5=90=AF=E7=94=A8=20Call?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.tsx b/src/app.tsx index a5dfaf56..48690d1d 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -10,7 +10,7 @@ import enUS from 'antd/locale/en_US' import zhCN from 'antd/locale/zh_CN' import dayjs from 'dayjs' import { Locale } from 'antd/es/locale' -// import Call from '@/components/call' +import Call from '@/components/call' const App = memo(() => { const commonStore = useCommonStore()