From d982c659d3bda9dc1d437869cd810c9c6da2da8f Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sun, 12 Oct 2025 03:22:19 +0800
Subject: [PATCH] refactor(video): rename VideoPlayer to VideoViewer and
 improve layout

Move status radio group to absolute position and update background colors
---
 src/renderer/src/pages/video/VideoPanel.tsx  |  4 +-
 src/renderer/src/pages/video/VideoPlayer.tsx | 80 ------------------
 src/renderer/src/pages/video/VideoViewer.tsx | 85 ++++++++++++++++++++
 3 files changed, 87 insertions(+), 82 deletions(-)
 delete mode 100644 src/renderer/src/pages/video/VideoPlayer.tsx
 create mode 100644 src/renderer/src/pages/video/VideoViewer.tsx

diff --git a/src/renderer/src/pages/video/VideoPanel.tsx b/src/renderer/src/pages/video/VideoPanel.tsx
index 0d0bc82560..ef05def58b 100644
--- a/src/renderer/src/pages/video/VideoPanel.tsx
+++ b/src/renderer/src/pages/video/VideoPanel.tsx
@@ -8,7 +8,7 @@ import { ArrowUp } from 'lucide-react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { VideoPlayer } from './VideoPlayer'
+import { VideoViewer } from './VideoViewer'
 
 export type VideoPanelProps = {
   provider: Provider
@@ -44,7 +44,7 @@ export const VideoPanel = ({ provider, video }: VideoPanelProps) => {
     <div className="flex flex-1 flex-col p-2">
       <div className="m-8 flex-1">
         <Skeleton className="h-full w-full rounded-2xl" classNames={{ content: 'h-full w-full' }} isLoaded={true}>
-          <VideoPlayer video={video} />
+          <VideoViewer video={video} />
         </Skeleton>
       </div>
       <div className="relative">
diff --git a/src/renderer/src/pages/video/VideoPlayer.tsx b/src/renderer/src/pages/video/VideoPlayer.tsx
deleted file mode 100644
index 9aa2759760..0000000000
--- a/src/renderer/src/pages/video/VideoPlayer.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Progress, Radio, RadioGroup, Spinner } from '@heroui/react'
-import { Video, VideoStatus } from '@renderer/types/video'
-import { CheckCircleIcon, CircleXIcon } from 'lucide-react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-export interface VideoProps {
-  video?: Video
-}
-
-export const VideoPlayer = ({ video: _video }: VideoProps) => {
-  const { t } = useTranslation()
-  const [video, setVideo] = useState<Video | undefined>(_video)
-  return (
-    <div className="flex h-full w-full items-center justify-center rounded-2xl bg-foreground-200">
-      {/* For test */}
-      <RadioGroup
-        label="Status"
-        onValueChange={(v) => {
-          if (v) setVideo({ ...video, status: v as VideoStatus } as Video)
-          else setVideo(undefined)
-        }}>
-        <Radio value="undefined">undefined</Radio>
-        <Radio value="queued">queued</Radio>
-        <Radio value="in_progress">in_progress</Radio>
-        <Radio value="completed">completed</Radio>
-        <Radio value="downloading">downloading</Radio>
-        <Radio value="downloaded">downloaded</Radio>
-        <Radio value="failed">failed</Radio>
-      </RadioGroup>
-      {video === undefined && t('video.undefined')}
-      {video && video.status === 'queued' && (
-        <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl">
-          <Spinner variant="dots" />
-          <span>{t('video.status.queued')}</span>
-        </div>
-      )}
-      {video && video.status === 'in_progress' && (
-        <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl">
-          <Progress
-            label={t('video.status.in_progress')}
-            aria-label={t('video.status.in_progress')}
-            className="max-w-md"
-            color="primary"
-            showValueLabel={true}
-            size="md"
-            value={video.progress}
-          />
-        </div>
-      )}
-      {video && video.status === 'completed' && (
-        <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl bg-success-100">
-          <CheckCircleIcon size={64} className="fill-success text-success-100" />
-          <span className="font-bold text-2xl">{t('video.status.completed')}</span>
-        </div>
-      )}
-      {video && video.status === 'downloading' && (
-        <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl">
-          <Progress
-            label={t('video.status.downloading')}
-            aria-label={t('video.status.downloading')}
-            className="max-w-md"
-            color="primary"
-            showValueLabel={true}
-            size="md"
-            value={video.progress}
-          />
-        </div>
-      )}
-      {/* TODO: complete video widget */}
-      {video && video.status === 'downloaded' && <video></video>}
-      {video && video.status === 'failed' && (
-        <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl bg-danger-100">
-          <CircleXIcon size={64} className="fill-danger text-danger-100" />
-          <span className="font-bold text-2xl">{t('video.status.failed')}</span>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/src/renderer/src/pages/video/VideoViewer.tsx b/src/renderer/src/pages/video/VideoViewer.tsx
new file mode 100644
index 0000000000..611665419b
--- /dev/null
+++ b/src/renderer/src/pages/video/VideoViewer.tsx
@@ -0,0 +1,85 @@
+import { Progress, Radio, RadioGroup, Spinner } from '@heroui/react'
+import { Video, VideoStatus } from '@renderer/types/video'
+import { CheckCircleIcon, CircleXIcon } from 'lucide-react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export interface VideoProps {
+  video?: Video
+}
+
+export const VideoViewer = ({ video: _video }: VideoProps) => {
+  const { t } = useTranslation()
+  const [video, setVideo] = useState<Video | undefined>(_video)
+  return (
+    <>
+      {/* For test */}
+      <RadioGroup
+        label="Status"
+        value={video?.status}
+        onValueChange={(v) => {
+          if (v) setVideo({ ...video, status: v as VideoStatus } as Video)
+          else setVideo(undefined)
+        }}
+        orientation="horizontal"
+        className="absolute rounded-2xl bg-foreground-100 p-4">
+        <Radio value="undefined">undefined</Radio>
+        <Radio value="queued">queued</Radio>
+        <Radio value="in_progress">in_progress</Radio>
+        <Radio value="completed">completed</Radio>
+        <Radio value="downloading">downloading</Radio>
+        <Radio value="downloaded">downloaded</Radio>
+        <Radio value="failed">failed</Radio>
+      </RadioGroup>
+      <div className="flex h-full w-full items-center justify-center rounded-2xl bg-foreground-200">
+        {video === undefined && t('video.undefined')}
+        {video && video.status === 'queued' && (
+          <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl">
+            <Spinner variant="dots" />
+            <span>{t('video.status.queued')}</span>
+          </div>
+        )}
+        {video && video.status === 'in_progress' && (
+          <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl">
+            <Progress
+              label={t('video.status.in_progress')}
+              aria-label={t('video.status.in_progress')}
+              className="max-w-md"
+              color="primary"
+              showValueLabel={true}
+              size="md"
+              value={video.progress}
+            />
+          </div>
+        )}
+        {video && video.status === 'completed' && (
+          <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl bg-success-200">
+            <CheckCircleIcon size={64} className="text-success" />
+            <span className="font-bold text-2xl">{t('video.status.completed')}</span>
+          </div>
+        )}
+        {video && video.status === 'downloading' && (
+          <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl">
+            <Progress
+              label={t('video.status.downloading')}
+              aria-label={t('video.status.downloading')}
+              className="max-w-md"
+              color="primary"
+              showValueLabel={true}
+              size="md"
+              value={video.progress}
+            />
+          </div>
+        )}
+        {/* TODO: complete video widget */}
+        {video && video.status === 'downloaded' && <video></video>}
+        {video && video.status === 'failed' && (
+          <div className="flex h-full w-full flex-col items-center justify-center rounded-2xl bg-danger-200">
+            <CircleXIcon size={64} className="fill-danger text-danger-200" />
+            <span className="font-bold text-2xl">{t('video.status.failed')}</span>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}