feat: support preview

chenfan0 · Aug 28, 2024 · 0c9d49c · 0c9d49c
1 parent 82d3877
commit 0c9d49c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/src/renderer/src/components/StreamConfigList/components/OperationBar.tsx b/src/renderer/src/components/StreamConfigList/components/OperationBar.tsx
@@ -5,8 +5,8 @@ import UseThemeIcon from '@/components/UseThemeIcon'
 import Dialog from '@/components/Dialog'
 import { useStreamConfigStore } from '@/store/useStreamConfigStore'
 
-// import darkPreviewIcon from '@/assets/images/dark/preview.svg'
-// import lightPreviewIcon from '@/assets/images/light/preview.svg'
+import darkPreviewIcon from '@/assets/images/dark/preview.svg'
+import lightPreviewIcon from '@/assets/images/light/preview.svg'
 import darkPlayIcon from '@/assets/images/dark/play.svg'
 import lightPlayIcon from '@/assets/images/light/play.svg'
 import darkPauseIcon from '@/assets/images/dark/pause.svg'
@@ -24,7 +24,8 @@ import {
   SUCCESS_CODE,
   UNKNOWN_CODE,
   crawlerErrorCodeToI18nMessage,
-  FFMPEG_ERROR_CODE
+  FFMPEG_ERROR_CODE,
+  errorCodeToI18nMessage
 } from '../../../../../code'
 import { RECORD_END_NOT_USER_STOP } from '../../../../../const'
 import emitter from '@/lib/bus'
@@ -42,6 +43,7 @@ export default function OperationBar(props: OperationBarProps) {
   const { toast } = useToast()
   const [sheetOpen, setSheetOpen] = useState(false)
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
 
   const { removeStreamConfig, updateStreamConfig } = useStreamConfigStore((state) => ({
     streamConfigList: state.streamConfigList,
@@ -151,6 +153,29 @@ export default function OperationBar(props: OperationBarProps) {
     clearTimeout(timer.current)
   }
 
+  const handlePreviewClick = async () => {
+    setIsLoadingPreview(true)
+    const { code, liveUrls } = await window.api.getLiveUrls({
+      roomUrl: streamConfig.roomUrl,
+      cookie: streamConfig.cookie,
+      proxy: streamConfig.proxy
+    })
+    setIsLoadingPreview(false)
+
+    if (code !== SUCCESS_CODE) {
+      toast({
+        title: streamConfig.title,
+        description: t(errorCodeToI18nMessage(code, 'error.get_line.')),
+        variant: 'destructive'
+      })
+      return
+    }
+
+    window.api.navByDefaultBrowser(
+      `https://www.fideo.site/cn?streamUrl=${encodeURIComponent(liveUrls[streamConfig.line])}`
+    )
+  }
+
   useEffect(() => {
     const handleRecordEndNotUserStop = async (title: string) => {
       if (title !== streamConfig.title) return
@@ -174,12 +199,19 @@ export default function OperationBar(props: OperationBarProps) {
   return (
     <>
       <div className="flex absolute right-0 gap-2">
-        {/* <UseThemeIcon
-          className="w-[21px] cursor-pointer"
-          dark={darkPreviewIcon}
-          light={lightPreviewIcon}
-          tooltipContent={t('stream_config.preview')}
-        /> */}
+        {!isLoadingPreview && (
+          <UseThemeIcon
+            className="w-[21px] cursor-pointer"
+            dark={darkPreviewIcon}
+            light={lightPreviewIcon}
+            tooltipContent={t('stream_config.preview')}
+            handleClick={handlePreviewClick}
+          />
+        )}
+
+        {isLoadingPreview && (
+          <div className="w-[21px] h-[21px] rounded-full border-t-2 border-b-2 border-gray-300 animate-spin"></div>
+        )}
 
         {streamConfig.status === StreamStatus.NOT_STARTED ? (
           <UseThemeIcon

diff --git a/src/renderer/src/locales/locales.js b/src/renderer/src/locales/locales.js
@@ -73,7 +73,8 @@ export default {
         should_convert_to_mp4: 'Convert to MP4 after recording ends',
         should_detect_resolution: 'Detect resolution',
         should_detect_resolution_tooltip:
-          'If the resolution changes frequently during recording (e.g. YY Live), it is recommended to enable this function to detect the resolution to prevent screen tearing'
+          'If the resolution changes frequently during recording (e.g. YY Live), it is recommended to enable this function to detect the resolution to prevent screen tearing',
+        preview: 'Preview Stream'
       },
       start_record: 'Start Recording',
       user_stop_record: 'Stop Recording (User Manually Stopped)',
@@ -194,7 +195,8 @@ export default {
         should_convert_to_mp4: '录制结束后是否转为MP4',
         should_detect_resolution: '是否检测分辨率',
         should_detect_resolution_tooltip:
-          '如果录制的过程会经常出现分辨率改变的情况(例如YY直播)，建议开启该功能检测分辨率，防止出现花屏情况'
+          '如果录制的过程会经常出现分辨率改变的情况(例如YY直播)，建议开启该功能检测分辨率，防止出现花屏情况',
+        preview: '预览直播流'
       },
       start_record: '开始录制',
       user_stop_record: '停止录制(用户手动停止)',