From f88b833cbc7f15c3f3eabc5f482f206f8e83992b Mon Sep 17 00:00:00 2001 From: ShukeBta <272197458+ShukeBta@users.noreply.github.com> Date: Sat, 27 Jun 2026 15:14:24 +0800 Subject: [PATCH] refactor strm generate section --- web/src/pages/StrmGenerateSection.tsx | 189 ++------------- web/src/pages/StrmGenerateSectionParts.tsx | 259 +++++++++++++++++++++ 2 files changed, 280 insertions(+), 168 deletions(-) create mode 100644 web/src/pages/StrmGenerateSectionParts.tsx diff --git a/web/src/pages/StrmGenerateSection.tsx b/web/src/pages/StrmGenerateSection.tsx index cfe944a..600c37d 100644 --- a/web/src/pages/StrmGenerateSection.tsx +++ b/web/src/pages/StrmGenerateSection.tsx @@ -1,11 +1,18 @@ import type { FormEvent } from 'react' -import { Loader2, Save, Wand2 } from 'lucide-react' import type { GenerateSTRMResult } from '../api/strm' import type { Library } from '../types' -import { currentOrigin, type CloudPlaybackMode } from './strmPageModel' +import type { CloudPlaybackMode } from './strmPageModel' +import { + PlaybackPreferencePanel, + PlaybackTogglePanel, + StrmGenerateForm, + StrmGenerateHeader, + StrmGenerateHint, + StrmGenerateResultPanel, +} from './StrmGenerateSectionParts' -type StrmGenerateSectionProps = { +export type StrmGenerateSectionProps = { libraries: Library[] generateLibraryID: string baseURL: string @@ -31,173 +38,19 @@ type StrmGenerateSectionProps = { setOverwrite: (value: boolean) => void } -export function StrmGenerateSection({ - libraries, - generateLibraryID, - baseURL, - outputDir, - cloudPlaybackMode, - strmPlaybackEnabled, - redirectProxyEnabled, - autoGenerate, - savingSettings, - overwrite, - generating, - generateResult, - playbackStatus, - onGenerate, - saveSTRMSettings, - setGenerateLibraryID, - setBaseURL, - setOutputDir, - setCloudPlaybackMode, - setStrmPlaybackEnabled, - setRedirectProxyEnabled, - setAutoGenerate, - setOverwrite, -}: StrmGenerateSectionProps) { +export function StrmGenerateSection(props: StrmGenerateSectionProps) { return (
-
-
-

自动生成 STRM 文件

-

- 只需要填写自己的访问域名，系统会按媒体库内每个媒体批量生成可播放的 .strm 文件。 -

-
- - {playbackStatus} - -
-
- - -
-
- - - -
-
- - setBaseURL(e.target.value)} - /> - - - setOutputDir(e.target.value)} - /> - -
-

- 生成内容为 域名 + /api/stream/媒体ID?token=...；第三方客户端播放优先方式由上方「STRMURL / 302反代」模式决定。域名会同步保存到系统设置中的「公开访问域名 / STRM 域名」。 -

- {generateResult && ( -
-
- 输出目录：{generateResult.output_dir} -
-
- 新增 {generateResult.generated} · 更新 {generateResult.updated} · 跳过 {generateResult.skipped} · 清理 {generateResult.cleaned || 0} -
- {generateResult.errors && generateResult.errors.length > 0 && ( -
- 失败 {generateResult.errors.length} 条：{generateResult.errors.slice(0, 3).join('；')} -
- )} -
- )} + + + + + +
) } diff --git a/web/src/pages/StrmGenerateSectionParts.tsx b/web/src/pages/StrmGenerateSectionParts.tsx new file mode 100644 index 0000000..ebe6470 --- /dev/null +++ b/web/src/pages/StrmGenerateSectionParts.tsx @@ -0,0 +1,259 @@ +import { Loader2, Save, Wand2 } from 'lucide-react' + +import type { GenerateSTRMResult } from '../api/strm' +import type { Library } from '../types' +import { currentOrigin, type CloudPlaybackMode } from './strmPageModel' +import type { StrmGenerateSectionProps } from './StrmGenerateSection' + +type PlaybackStatusProps = Pick< + StrmGenerateSectionProps, + 'playbackStatus' | 'strmPlaybackEnabled' | 'redirectProxyEnabled' +> + +export function StrmGenerateHeader({ playbackStatus, strmPlaybackEnabled, redirectProxyEnabled }: PlaybackStatusProps) { + const enabled = strmPlaybackEnabled || redirectProxyEnabled + return ( +
+
+

自动生成 STRM 文件

+

+ 只需要填写自己的访问域名，系统会按媒体库内每个媒体批量生成可播放的 .strm 文件。 +

+
+ + {playbackStatus} + +
+ ) +} + +type PlaybackToggleProps = Pick< + StrmGenerateSectionProps, + 'strmPlaybackEnabled' | 'redirectProxyEnabled' | 'setStrmPlaybackEnabled' | 'setRedirectProxyEnabled' +> + +export function PlaybackTogglePanel({ + strmPlaybackEnabled, + redirectProxyEnabled, + setStrmPlaybackEnabled, + setRedirectProxyEnabled, +}: PlaybackToggleProps) { + return ( +
+ + +
+ ) +} + +type PlaybackToggleItemProps = { + checked: boolean + title: string + description: string + onChange: (value: boolean) => void +} + +function PlaybackToggle({ checked, title, description, onChange }: PlaybackToggleItemProps) { + return ( + + ) +} + +type PlaybackPreferenceProps = Pick< + StrmGenerateSectionProps, + | 'cloudPlaybackMode' + | 'strmPlaybackEnabled' + | 'redirectProxyEnabled' + | 'autoGenerate' + | 'savingSettings' + | 'saveSTRMSettings' + | 'setCloudPlaybackMode' + | 'setAutoGenerate' +> + +export function PlaybackPreferencePanel({ + cloudPlaybackMode, + strmPlaybackEnabled, + redirectProxyEnabled, + autoGenerate, + savingSettings, + saveSTRMSettings, + setCloudPlaybackMode, + setAutoGenerate, +}: PlaybackPreferenceProps) { + return ( +
+ + + +
+ ) +} + +type StrmGenerateFormProps = Pick< + StrmGenerateSectionProps, + | 'libraries' + | 'generateLibraryID' + | 'baseURL' + | 'outputDir' + | 'overwrite' + | 'generating' + | 'onGenerate' + | 'setGenerateLibraryID' + | 'setBaseURL' + | 'setOutputDir' + | 'setOverwrite' +> + +export function StrmGenerateForm({ + libraries, + generateLibraryID, + baseURL, + outputDir, + overwrite, + generating, + onGenerate, + setGenerateLibraryID, + setBaseURL, + setOutputDir, + setOverwrite, +}: StrmGenerateFormProps) { + return ( +
+ + setBaseURL(e.target.value)} + /> + + + setOutputDir(e.target.value)} + /> + + + ) +} + +type LibrarySelectProps = { + libraries: Library[] + value: string + onChange: (value: string) => void +} + +function LibrarySelect({ libraries, value, onChange }: LibrarySelectProps) { + return ( + + ) +} + +export function StrmGenerateHint() { + return ( +

+ 生成内容为 域名 + /api/stream/媒体ID?token=...；第三方客户端播放优先方式由上方「STRMURL / 302反代」模式决定。域名会同步保存到系统设置中的「公开访问域名 / STRM 域名」。 +

+ ) +} + +export function StrmGenerateResultPanel({ result }: { result: GenerateSTRMResult | null }) { + if (!result) { + return null + } + return ( +
+
+ 输出目录：{result.output_dir} +
+
+ 新增 {result.generated} · 更新 {result.updated} · 跳过 {result.skipped} · 清理 {result.cleaned || 0} +
+ {result.errors && result.errors.length > 0 && ( +
+ 失败 {result.errors.length} 条：{result.errors.slice(0, 3).join('；')} +
+ )} +
+ ) +}