- {ffmpegProgressInfo[streamConfig.title] && (
+ {ffmpegProgressInfo[streamConfig.id] && (
<>
-
{ffmpegProgressInfo[streamConfig.title]?.timemark}
+
{ffmpegProgressInfo[streamConfig.id]?.timemark}
{(streamConfig.segmentTime === '0' || streamConfig.segmentTime === '') &&
- ffmpegProgressInfo[streamConfig.title].targetSize / 1024 + 'M'}
+ ffmpegProgressInfo[streamConfig.id].targetSize / 1024 + 'M'}
)}
diff --git a/src/renderer/src/components/StreamConfigSheet.tsx b/src/renderer/src/components/StreamConfigSheet.tsx
index 21f7bd0..f7ef686 100644
--- a/src/renderer/src/components/StreamConfigSheet.tsx
+++ b/src/renderer/src/components/StreamConfigSheet.tsx
@@ -18,8 +18,10 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shad
import { useStreamConfigStore } from '@renderer/store/useStreamConfigStore'
import { useDefaultSettingsStore } from '@renderer/store/useDefaultSettingsStore'
import { checkUrlValid } from '@renderer/lib/utils'
+import { nanoid } from 'nanoid'
const formSchema = z.object({
+ id: z.string(),
title: z.string(),
roomUrl: z.string(),
filename: z.string(),
@@ -36,6 +38,7 @@ const formSchema = z.object({
})
const defaultStreamConfig: IStreamConfig = {
+ id: '',
title: '',
roomUrl: '',
filename: '',
@@ -245,8 +248,10 @@ export default function StreamConfigSheet(props: StreamConfigSheetProps) {
}
formValues.liveUrls = liveUrls
if (type === 'edit') {
- await updateStreamConfig(formValues, formValues.title)
+ await updateStreamConfig(formValues, formValues.id)
} else {
+ // 创建时，id为空
+ formValues.id = nanoid()
await addStreamConfig(formValues)
}
}
diff --git a/src/renderer/src/components/UseThemeIcon.tsx b/src/renderer/src/components/UseThemeIcon.tsx
index 373510a..cb9de89 100644
--- a/src/renderer/src/components/UseThemeIcon.tsx
+++ b/src/renderer/src/components/UseThemeIcon.tsx
@@ -8,11 +8,12 @@ interface UseThemeIconProps {
light: string
handleClick?: () => void
className?: string
+ id?: string
tooltipContent?: string
}
export default function UseThemeIcon(props: UseThemeIconProps) {
- const { dark, light, handleClick, className = '', tooltipContent } = props
+ const { dark, light, handleClick, className = '', tooltipContent, id } = props
const [localTheme] = useLocalStorage('theme', 'light')
const theme = useThemeStore((state) => state.theme || (localTheme as 'dark' | 'light'))
@@ -24,6 +25,7 @@ export default function UseThemeIcon(props: UseThemeIconProps) {
@@ -35,6 +37,7 @@ export default function UseThemeIcon(props: UseThemeIconProps) {
src={theme === 'dark' ? dark : light}
className={className ? className : 'w-[24px] h-[24px] cursor-pointer select-none'}
onClick={handleClick}
+ id={id}
/>
)
}
diff --git a/src/renderer/src/hooks/useToast.ts b/src/renderer/src/hooks/useToast.ts
index f680fcc..fafbe8c 100644
--- a/src/renderer/src/hooks/useToast.ts
+++ b/src/renderer/src/hooks/useToast.ts
@@ -1,4 +1,6 @@
import { useToast as _useToast } from '@/shadcn/ui/use-toast'
+import { sendMessage } from '@/lib/websocket'
+import { WEBSOCKET_MESSAGE_TYPE } from '../../../const'
export function useToast() {
const { toast: _toast } = _useToast()
@@ -13,7 +15,15 @@ export function useToast() {
variant?: 'default' | 'destructive' | null
}) {
const isHide = document.hidden
- // const isHide = true
+
+ sendMessage({
+ type: WEBSOCKET_MESSAGE_TYPE.SHOW_TOAST,
+ data: {
+ title,
+ description,
+ variant
+ }
+ })
if (!isHide) {
_toast({
diff --git a/src/renderer/src/lib/utils.ts b/src/renderer/src/lib/utils.ts
index 4bac1bd..68f70cd 100644
--- a/src/renderer/src/lib/utils.ts
+++ b/src/renderer/src/lib/utils.ts
@@ -1,5 +1,3 @@
-
-
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
@@ -34,4 +32,3 @@ export function useXizhiToPushNotification(options: {
const titleAndContent = options.content ? `${options.title} - ${options.content}` : options.title
fetch(`${options.key}?title=${encodeURIComponent(titleAndContent)}`)
}
-
diff --git a/src/renderer/src/lib/websocket.ts b/src/renderer/src/lib/websocket.ts
new file mode 100644
index 0000000..b4fd23f
--- /dev/null
+++ b/src/renderer/src/lib/websocket.ts
@@ -0,0 +1,56 @@
+let websocket: WebSocket | null = null
+
+export function getWebsocket() {
+ return websocket
+}
+
+interface IMessage {
+ type: string
+ data: any
+}
+const messageQueue: IMessage[] = []
+export function sendMessage(message: IMessage) {
+ if (!websocket) {
+ messageQueue.push(message)
+ return
+ }
+ if (websocket.readyState === WebSocket.OPEN) {
+ websocket.send(JSON.stringify(message))
+ } else {
+ messageQueue.push(message)
+ }
+}
+
+export function createWebSocket(
+ port: number,
+ code: string,
+ onMessage: (event: MessageEvent) => void
+) {
+ websocket = new WebSocket(`ws://localhost:${port}/${code}`)
+
+ websocket.onopen = () => {
+ while (messageQueue.length) {
+ const message = messageQueue.shift()
+ if (message) {
+ websocket!.send(JSON.stringify(message))
+ }
+ }
+ }
+
+ websocket.onmessage = onMessage
+
+ websocket.onclose = (event) => {
+ if (event.code === 1000) {
+ websocket = null
+ } else {
+ createWebSocket(port, code, onMessage)
+ }
+ }
+}
+
+export function closeWebSocket() {
+ if (websocket) {
+ websocket.close(1000)
+ websocket = null
+ }
+}
diff --git a/src/renderer/src/locales/locales.js b/src/renderer/src/locales/locales.js
index a28527d..a963404 100644
--- a/src/renderer/src/locales/locales.js
+++ b/src/renderer/src/locales/locales.js
@@ -20,6 +20,20 @@ export default {
logs_dir: 'Logs Directory',
logs_dir_placeholder: 'Open Logs Directory'
},
+ web_control_setting: {
+ title: 'Web Control Setting',
+ web_control_path: 'Activation Code',
+ web_control_path_required: 'Activation Code cannot be empty',
+ web_control_path_placeholder: 'Can be obtained by clicking the get button',
+ get_web_control_path: 'Get',
+ email: 'Email',
+ email_placeholder: 'Please enter the email (for receiving activation code)',
+ email_required: 'Email cannot be empty',
+ email_invalid: 'Email is invalid',
+ enable_web_control: 'Enable Web Control',
+ confirm_force_close_window_with_web_control:
+ 'Web control is running, do you want to force close the window?'
+ },
stream_config: {
confirm: 'Confirm',
confirm_delete: 'Are you sure you want to delete this recording item? ({{title}})',
@@ -121,7 +135,7 @@ export default {
get_update_detail: 'View Update Details'
},
downloading_dep: {
- downloading_title: 'Downloading Dependencies. . .',
+ downloading_title: 'Downloading {{title}}. . .',
retry_title: 'Download Dependencies Failed',
confirm_force_close_window_with_downloading_dep:
'Dependencies are being downloaded, force close the window?',
@@ -137,7 +151,36 @@ export default {
toggle_theme: '切换主题',
qq: '加入QQ群',
discord: '加入Discord',
- go_to_website: '前往官网'
+ go_to_website: '前往官网',
+ web_control: '网页操作'
+ },
+ web_control_setting: {
+ title: '网页操作配置',
+ web_control_path: '激活码',
+ web_control_path_required: '激活码不能为空',
+ web_control_path_placeholder: '可通过点击获取按钮获取',
+ get_web_control_path: '获取',
+ email: '邮箱',
+ email_placeholder: '请输入邮箱(用于接收激活码)',
+ email_required: '邮箱不能为空',
+ email_invalid: '邮箱不合法',
+ enable_web_control: '开启网页访问功能',
+ enable_web_control_tooltip: '启用后可在手机通过网页操作录制',
+ get_web_control_path_success: '获取激活码成功',
+ get_web_control_path_success_desc: '激活码已发送至邮箱, 请注意查收',
+ get_web_control_path_failed: '获取激活码失败',
+ get_web_control_path_failed_desc: '请稍后重试',
+ start_web_control_success: '网页访问功能已开启',
+ start_web_control_success_desc: '你可以使用浏览器访问对应地址进行操作',
+ start_web_control_failed: '开启网页访问功能失败',
+ start_web_control_failed_desc: '请稍后重试',
+ frpc_process_error: 'frpc进程发生错误',
+ stop_web_control_success: '网页访问功能已关闭',
+ stop_web_control_success_desc: '你可以再次点击开启按钮开启',
+ stop_web_control_failed: '网页访问功能失败',
+ web_control_address: '网页访问地址',
+ confirm_force_close_window_with_web_control: '网页访问功能正在运行, 是否强制关闭窗口?',
+ will_retry: '将会在{{time}}秒后重试'
},
default_settings: {
title: '默认配置',
@@ -246,7 +289,7 @@ export default {
get_update_detail: '查看更新详情'
},
downloading_dep: {
- downloading_title: '正在下载依赖中. . .',
+ downloading_title: '正在下载 {{title}} 中. . .',
retry_title: '下载依赖失败',
confirm_force_close_window_with_downloading_dep: '当前正在下载依赖，是否强制关闭窗口?',
retry: '重试'
diff --git a/src/renderer/src/store/useConfettiStore.ts b/src/renderer/src/store/useConfettiStore.ts
new file mode 100644
index 0000000..aebb3f1
--- /dev/null
+++ b/src/renderer/src/store/useConfettiStore.ts
@@ -0,0 +1,29 @@
+import { create } from 'zustand'
+
+interface ConfettiStore {
+ showConfetti: boolean
+ numberOfPieces: number
+ setShowConfetti: (showConfetti: boolean) => void
+ setNumberOfPieces: (numberOfPieces: number) => void
+}
+
+export const useConfettiStore = create
((set) => ({
+ showConfetti: false,
+ numberOfPieces: 500,
+ setShowConfetti: (showConfetti) => {
+ set({ showConfetti })
+ let numberOfPieces = 500
+ let timer: NodeJS.Timeout
+ if (showConfetti) {
+ timer = setInterval(() => {
+ numberOfPieces -= 10
+ set({ numberOfPieces })
+ if (numberOfPieces <= 0) {
+ clearInterval(timer)
+ set({ showConfetti: false, numberOfPieces: 500 })
+ }
+ }, 100)
+ }
+ },
+ setNumberOfPieces: (numberOfPieces) => set({ numberOfPieces })
+}))
diff --git a/src/renderer/src/store/useDownloadDepStore.ts b/src/renderer/src/store/useDownloadDepStore.ts
index e671312..3c5f467 100644
--- a/src/renderer/src/store/useDownloadDepStore.ts
+++ b/src/renderer/src/store/useDownloadDepStore.ts
@@ -7,6 +7,7 @@ interface IDownloadDepStore {
export const useDownloadDepInfoStore = create((set) => ({
downloadDepProgressInfo: {
+ title: '',
showRetry: false,
downloading: false,
progress: 0
diff --git a/src/renderer/src/store/useFfmpegProgressInfoStore.ts b/src/renderer/src/store/useFfmpegProgressInfoStore.ts
index 52a613a..dc40afb 100644
--- a/src/renderer/src/store/useFfmpegProgressInfoStore.ts
+++ b/src/renderer/src/store/useFfmpegProgressInfoStore.ts
@@ -1,11 +1,26 @@
import { create } from 'zustand'
+import { sendMessage } from '@/lib/websocket'
+import { WEBSOCKET_MESSAGE_TYPE } from '../../../const'
interface IRecordingProgressInfoStore {
ffmpegProgressInfo: IFfmpegProgressInfo
updateFfmpegProgressInfo: (newInfo: IFfmpegProgressInfo) => void
}
-export const useFfmpegProgressInfoStore = create((set) => ({
+export const useFfmpegProgressInfoStore = create((set, get) => ({
ffmpegProgressInfo: {},
- updateFfmpegProgressInfo: (newInfo) => set({ ffmpegProgressInfo: newInfo })
+ updateFfmpegProgressInfo: (newInfo) => {
+ const raw = get().ffmpegProgressInfo
+
+ if (Object.keys(raw).length === 0 && Object.keys(newInfo).length === 0) {
+ return
+ }
+
+ sendMessage({
+ type: WEBSOCKET_MESSAGE_TYPE.UPDATE_FFMPEG_PROGRESS_INFO,
+ data: newInfo
+ })
+
+ set({ ffmpegProgressInfo: newInfo })
+ }
}))
diff --git a/src/renderer/src/store/useLoadingStore.ts b/src/renderer/src/store/useLoadingStore.ts
new file mode 100644
index 0000000..c89b766
--- /dev/null
+++ b/src/renderer/src/store/useLoadingStore.ts
@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+
+interface LoadingState {
+ loading: boolean
+ setLoading: (value: boolean) => void
+}
+
+export const useLoadingStore = create((set) => ({
+ loading: false,
+ setLoading: (value: boolean) => set({ loading: value })
+}))
diff --git a/src/renderer/src/store/useStreamConfigStore.ts b/src/renderer/src/store/useStreamConfigStore.ts
index 727c856..fb043ed 100644
--- a/src/renderer/src/store/useStreamConfigStore.ts
+++ b/src/renderer/src/store/useStreamConfigStore.ts
@@ -1,6 +1,10 @@
import { create } from 'zustand'
import localForage from 'localforage'
+import { sendMessage } from '@/lib/websocket'
+import { WEBSOCKET_MESSAGE_TYPE } from '../../../const'
+
+import { nanoid } from 'nanoid'
interface IStreamConfigStore {
streamConfigList: IStreamConfig[]
@@ -8,45 +12,79 @@ interface IStreamConfigStore {
addStreamConfig: (streamConfig: IStreamConfig) => Promise
updateStreamConfig: (streamConfig: IStreamConfig, title: string) => Promise
removeStreamConfig: (title: string) => Promise
- replaceStreamConfig: (newStreamConfigList: IStreamConfig[]) => Promise
+ replaceStreamConfigList: (newStreamConfigList: IStreamConfig[]) => Promise
}
export const useStreamConfigStore = create((set, get) => ({
streamConfigList: [],
streamConfigSheetOpen: false,
initialData: async () => {
- const streamConfigList = await localForage.getItem('streamConfigList')
- if (streamConfigList) {
- set(() => ({ streamConfigList }))
+ let streamConfigList = await localForage.getItem('streamConfigList')
+
+ if (!streamConfigList) return
+
+ let shouldUpdate = false
+ streamConfigList = streamConfigList.map((streamConfig) => {
+ if (!streamConfig.id) {
+ shouldUpdate = true
+ streamConfig.id = nanoid()
+ }
+ return streamConfig
+ })
+
+ if (shouldUpdate) {
+ await localForage.setItem('streamConfigList', streamConfigList)
}
+
+ sendMessage({
+ type: WEBSOCKET_MESSAGE_TYPE.UPDATE_STREAM_CONFIG_LIST,
+ data: streamConfigList
+ })
+ set(() => ({ streamConfigList: streamConfigList! }))
},
addStreamConfig: async (streamConfig: IStreamConfig) => {
const newStreamConfigList = [streamConfig, ...get().streamConfigList]
await localForage.setItem('streamConfigList', newStreamConfigList)
+ sendMessage({
+ type: WEBSOCKET_MESSAGE_TYPE.ADD_STREAM_CONFIG,
+ data: streamConfig
+ })
set(() => {
return { streamConfigList: newStreamConfigList }
})
},
- updateStreamConfig: async (newStreamConfig: IStreamConfig, title: string) => {
+ updateStreamConfig: async (newStreamConfig: IStreamConfig, id: string) => {
const newStreamConfigList = get().streamConfigList.map((streamConfig) =>
- streamConfig.title === title ? newStreamConfig : streamConfig
+ streamConfig.id === id ? newStreamConfig : streamConfig
)
await localForage.setItem('streamConfigList', newStreamConfigList)
+ sendMessage({
+ type: WEBSOCKET_MESSAGE_TYPE.UPDATE_STREAM_CONFIG,
+ data: newStreamConfig
+ })
set(() => {
return { streamConfigList: newStreamConfigList }
})
},
- replaceStreamConfig: async (newStreamConfigList: IStreamConfig[]) => {
+ replaceStreamConfigList: async (newStreamConfigList: IStreamConfig[]) => {
await localForage.setItem('streamConfigList', newStreamConfigList)
+ sendMessage({
+ type: WEBSOCKET_MESSAGE_TYPE.UPDATE_STREAM_CONFIG_LIST,
+ data: newStreamConfigList
+ })
set(() => {
return { streamConfigList: newStreamConfigList }
})
},
- removeStreamConfig: async (title: string) => {
+ removeStreamConfig: async (id: string) => {
const newStreamConfigList = get().streamConfigList.filter(
- (streamConfig) => streamConfig.title !== title
+ (streamConfig) => streamConfig.id !== id
)
await localForage.setItem('streamConfigList', newStreamConfigList)
+ sendMessage({
+ type: WEBSOCKET_MESSAGE_TYPE.REMOVE_STREAM_CONFIG,
+ data: id
+ })
set(() => {
return { streamConfigList: newStreamConfigList }
})
diff --git a/src/renderer/src/store/useWebControlSettingStore.ts b/src/renderer/src/store/useWebControlSettingStore.ts
new file mode 100644
index 0000000..9605281
--- /dev/null
+++ b/src/renderer/src/store/useWebControlSettingStore.ts
@@ -0,0 +1,36 @@
+import { create } from 'zustand'
+import localForage from 'localforage'
+
+import emitter from '@renderer/lib/bus'
+import { START_WEB_CONTROL } from '../../../const'
+
+interface IWebControlSettingStore {
+ webControlSetting: IWebControlSetting
+ setWebControlSetting: (setting: IWebControlSetting) => Promise
+ initData: () => void
+}
+
+export const useWebControlSettingStore = create((set) => ({
+ webControlSetting: {
+ webControlPath: '',
+ enableWebControl: false,
+ email: ''
+ },
+ initData: async () => {
+ const webControlSetting = await localForage.getItem('webControlSetting')
+
+ if (webControlSetting) {
+ const { enableWebControl, webControlPath } = webControlSetting
+ if (enableWebControl && webControlPath) {
+ emitter.emit(START_WEB_CONTROL, webControlPath)
+ }
+ set(() => ({ webControlSetting }))
+ }
+ },
+ setWebControlSetting: async (setting: IWebControlSetting) => {
+ await localForage.setItem('webControlSetting', setting)
+ set(() => {
+ return { webControlSetting: setting }
+ })
+ }
+}))
diff --git a/type.d.ts b/type.d.ts
index a830ea6..dd90626 100644
--- a/type.d.ts
+++ b/type.d.ts
@@ -1,4 +1,5 @@
interface IStreamConfig {
+ id: string
title: string
roomUrl: string
filename: string
@@ -23,17 +24,20 @@ interface IDefaultDefaultSettingsConfig {
type IFfmpegProgressInfo = Record<
string,
{
- frames: number
- currentFps: number
- currentKbps: number
targetSize: number
timemark: string
- percent?: number
}
>
interface IDownloadDepProgressInfo {
+ title: string
showRetry: boolean
downloading: boolean
progress: number
}
+
+interface IWebControlSetting {
+ webControlPath: string
+ enableWebControl: boolean
+ email: string
+}
+ 
+ 
+ 
+ 
+