Ma/LunaTV
1
0
Fork 0
mirror of https://github.com/MoonTechLab/LunaTV.git synced 2026-05-13 07:57:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: change manifest theme color

Browse Source
This commit is contained in:
shinya
2025-06-25 22:33:44 +08:00
parent dbbed5e38f
commit c14cd4022b
2 changed files with 425 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@@ -21,7 +21,7 @@ export default function RootLayout({
return ( return (
<html lang='zh-CN'> <html lang='zh-CN'>
<head> <head>
<meta name='theme-color' content='#ffffffb3' /> <meta name='theme-color' content='#e6f3fb' />
</head> </head>
<body className={`${inter.className} min-h-screen text-gray-900`}> <body className={`${inter.className} min-h-screen text-gray-900`}>
<AuthProvider>{children}</AuthProvider> <AuthProvider>{children}</AuthProvider>

46
src/app/play/page.tsx
View File

@@ -16,7 +16,6 @@ import {
} from '@vidstack/react/player/layouts/default'; } from '@vidstack/react/player/layouts/default';
import Hls from 'hls.js'; import Hls from 'hls.js';
import { Heart } from 'lucide-react'; import { Heart } from 'lucide-react';
import Head from 'next/head';
import { useSearchParams } from 'next/navigation'; import { useSearchParams } from 'next/navigation';
import { Suspense } from 'react'; import { Suspense } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
@@ -994,6 +993,30 @@ function PlayPageClient() {
}; };
}, [playerRef.current, isLongPressing]); }, [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) { if (loading) {
return ( return (
<div className='min-h-[100dvh] bg-black flex items-center justify-center overflow-hidden overscroll-contain'> <div className='min-h-[100dvh] bg-black flex items-center justify-center overflow-hidden overscroll-contain'>
@@ -1148,10 +1171,6 @@ function PlayPageClient() {
}; };
return ( return (
<>
<Head>
<meta name='theme-color' content='#000000' />
</Head>
<div <div
ref={playerContainerRef} ref={playerContainerRef}
tabIndex={-1} tabIndex={-1}
@@ -1313,9 +1332,7 @@ function PlayPageClient() {
> >
<div className='p-6 h-full flex flex-col'> <div className='p-6 h-full flex flex-col'>
<div className='flex items-center justify-between mb-6'> <div className='flex items-center justify-between mb-6'>
<h3 className='text-white text-xl font-semibold'> <h3 className='text-white text-xl font-semibold'>选集列表</h3>
选集列表
</h3>
<button <button
onClick={() => { onClick={() => {
setShowEpisodePanel(false); setShowEpisodePanel(false);
@@ -1340,8 +1357,7 @@ function PlayPageClient() {
</div> </div>
<div className='text-gray-300 text-sm mb-4'> <div className='text-gray-300 text-sm mb-4'>
当前: 第 {currentEpisodeIndex + 1} 集 / 共 {totalEpisodes}{' '} 当前: 第 {currentEpisodeIndex + 1} 集 / 共 {totalEpisodes} 集
集
</div> </div>
<div className='flex-1 overflow-y-auto'> <div className='flex-1 overflow-y-auto'>
@@ -1434,9 +1450,7 @@ function PlayPageClient() {
</div> </div>
)} )}
{!searchLoading && {!searchLoading && !searchError && searchResults.length > 0 && (
!searchError &&
searchResults.length > 0 && (
<div className='grid grid-cols-2 gap-4'> <div className='grid grid-cols-2 gap-4'>
{[ {[
...searchResults.filter( ...searchResults.filter(
@@ -1619,7 +1633,6 @@ function PlayPageClient() {
</div> </div>
</MediaPlayer> </MediaPlayer>
</div> </div>
</>
); );
} }
@@ -1680,13 +1693,8 @@ const FavoriteIcon = ({ filled }: { filled: boolean }) => {
export default function PlayPage() { export default function PlayPage() {
return ( return (
<>
<Head>
<meta name='theme-color' content='#000000' />
</Head>
<Suspense> <Suspense>
<PlayPageClient /> <PlayPageClient />
</Suspense> </Suspense>
</>
); );
} }