diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 563f64b..193879d 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -21,7 +21,7 @@ export default function RootLayout({ return ( - + {children} diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx index 2baf53c..4d60c22 100644 --- a/src/app/play/page.tsx +++ b/src/app/play/page.tsx @@ -16,7 +16,6 @@ import { } from '@vidstack/react/player/layouts/default'; import Hls from 'hls.js'; import { Heart } from 'lucide-react'; -import Head from 'next/head'; import { useSearchParams } from 'next/navigation'; import { Suspense } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react'; @@ -994,6 +993,30 @@ function PlayPageClient() { }; }, [playerRef.current, isLongPressing]); + /* -------------------- 设置 meta theme-color 为纯黑 -------------------- */ + useEffect(() => { + if (typeof document === 'undefined') return; + + // 查找或创建 meta[name="theme-color"] + let metaTag = document.querySelector( + 'meta[name="theme-color"]' + ) as HTMLMetaElement | null; + + if (!metaTag) { + metaTag = document.createElement('meta'); + metaTag.setAttribute('name', 'theme-color'); + document.head.appendChild(metaTag); + } + + // 记录原始颜色，并设置为纯黑 + metaTag.setAttribute('content', '#000000'); + + // 卸载时恢复 + return () => { + metaTag?.setAttribute('content', '#e6f3fb'); + }; + }, []); + if (loading) { return (
@@ -1148,232 +1171,154 @@ function PlayPageClient() { }; return ( - <> - - - -
- {/* 竖屏提示蒙层 */} - {showOrientationTip && ( -
- - - - 请横屏观看 -
- )} - - {/* 强制横屏按钮：仅在移动端竖屏时显示 */} - {isPortrait && ( - - )} + + + 请横屏观看 +
+ )} - {/* 换源加载遮罩 */} - {sourceChanging && ( -
-
-
-
换源中...
-
-
- )} - - {/* 播放器容器 */} - - - - 1 ? ( - // 下一集按钮放在时间显示前 + + + + + )} + + {/* 换源加载遮罩 */} + {sourceChanging && ( +
+
+
+
换源中...
+
+
+ )} + + {/* 播放器容器 */} + + + + 1 ? ( + // 下一集按钮放在时间显示前 + + ) : null, + beforeFullscreenButton: ( + <> + {totalEpisodes > 1 && ( - ) : null, - beforeFullscreenButton: ( - <> - {totalEpisodes > 1 && ( - - )} - - {/* 自定义 AirPlay 按钮 */} - - - - - ), - }} - /> + )} + + {/* 自定义 AirPlay 按钮 */} + + + + + ), + }} + /> - {/* 选集侧拉面板 */} - {totalEpisodes > 1 && ( -
- {/* 遮罩层 */} - {showEpisodePanel && ( -
{ - setShowEpisodePanel(false); - playerContainerRef.current?.focus(); - }} - /> - )} - - {/* 侧拉面板 */} -
-
-
-

- 选集列表 -

- -
- -
- 当前: 第 {currentEpisodeIndex + 1} 集 / 共 {totalEpisodes}{' '} - 集 -
- -
-
- {Array.from({ length: totalEpisodes }, (_, idx) => ( - - ))} -
-
-
-
-
- )} - - {/* 换源侧拉面板 */} -
+ {/* 选集侧拉面板 */} + {totalEpisodes > 1 && ( +
{/* 遮罩层 */} - {showSourcePanel && ( + {showEpisodePanel && (
{ - setShowSourcePanel(false); + setShowEpisodePanel(false); playerContainerRef.current?.focus(); }} /> @@ -1381,16 +1326,16 @@ function PlayPageClient() { {/* 侧拉面板 */}
-

播放源

+

选集列表

- {/* 搜索结果 */} +
+ 当前: 第 {currentEpisodeIndex + 1} 集 / 共 {totalEpisodes} 集 +
+
- {searchLoading && ( -
-
- 搜索中... -
- )} - - {searchError && ( -
- {searchError} -
- )} - - {!searchLoading && - !searchError && - searchResults.length === 0 && ( -
- 未找到相关视频源 -
- )} - - {!searchLoading && - !searchError && - searchResults.length > 0 && ( -
- {[ - ...searchResults.filter( - (r) => - r.source === currentSource && - String(r.id) === String(currentId) - ), - ...searchResults.filter( - (r) => - !( - r.source === currentSource && - String(r.id) === String(currentId) - ) - ), - ].map((result) => { - const isCurrentSource = - result.source === currentSource && - String(result.id) === String(currentId); - return ( -
- !isCurrentSource && - handleSourceChange( - result.source, - result.id, - result.title - ) - } - > - {/* 视频封面 */} -
- {result.title} - - {/* 集数圆形指示器 */} - {result.episodes && ( -
- - {result.episodes} - -
- )} - - {isCurrentSource && ( -
-
- 当前播放 -
-
- )} -
- - {/* 视频信息 */} -
-

- {result.title} -

-
-
- {result.source_name} -
-
-
-
- ); - })} -
- )} +
+ {Array.from({ length: totalEpisodes }, (_, idx) => ( + + ))} +
+ )} - {/* 快捷键提示 */} + {/* 换源侧拉面板 */} +
+ {/* 遮罩层 */} + {showSourcePanel && ( +
{ + setShowSourcePanel(false); + playerContainerRef.current?.focus(); + }} + /> + )} + + {/* 侧拉面板 */}
-
- - {shortcutDirection === 'left' && ( - +
+
+

播放源

+ +
+ + {/* 搜索结果 */} +
+ {searchLoading && ( +
+
+ 搜索中... +
)} - {shortcutDirection === 'right' && ( - + + {searchError && ( +
+ {searchError} +
)} - {shortcutDirection === 'up' && ( - + + {!searchLoading && + !searchError && + searchResults.length === 0 && ( +
+ 未找到相关视频源 +
+ )} + + {!searchLoading && !searchError && searchResults.length > 0 && ( +
+ {[ + ...searchResults.filter( + (r) => + r.source === currentSource && + String(r.id) === String(currentId) + ), + ...searchResults.filter( + (r) => + !( + r.source === currentSource && + String(r.id) === String(currentId) + ) + ), + ].map((result) => { + const isCurrentSource = + result.source === currentSource && + String(result.id) === String(currentId); + return ( +
+ !isCurrentSource && + handleSourceChange( + result.source, + result.id, + result.title + ) + } + > + {/* 视频封面 */} +
+ {result.title} + + {/* 集数圆形指示器 */} + {result.episodes && ( +
+ + {result.episodes} + +
+ )} + + {isCurrentSource && ( +
+
+ 当前播放 +
+
+ )} +
+ + {/* 视频信息 */} +
+

+ {result.title} +

+
+
+ {result.source_name} +
+
+
+
+ ); + })} +
)} - {shortcutDirection === 'down' && ( - - )} - {shortcutDirection === 'play' && ( - - )} - {shortcutDirection === 'pause' && ( - - )} - {shortcutDirection === 'error' && ( - - )} - - {shortcutText} +
+
- {/* 三倍速提示 */} -
-
- + {/* 快捷键提示 */} +
+
+ + {shortcutDirection === 'left' && ( - - 3x 倍速 -
+ d='M15 19l-7-7 7-7' + > + )} + {shortcutDirection === 'right' && ( + + )} + {shortcutDirection === 'up' && ( + + )} + {shortcutDirection === 'down' && ( + + )} + {shortcutDirection === 'play' && ( + + )} + {shortcutDirection === 'pause' && ( + + )} + {shortcutDirection === 'error' && ( + + )} + + {shortcutText}
- -
- +
+ + {/* 三倍速提示 */} +
+
+ + + + 3x 倍速 +
+
+ +
); } @@ -1680,13 +1693,8 @@ const FavoriteIcon = ({ filled }: { filled: boolean }) => { export default function PlayPage() { return ( - <> - - - - - - - + + + ); }