网络直播源页面

package.json

@@ -37,6 +37,7 @@
     "cheerio": "^1.1.2",
     "clsx": "^2.0.0",
     "crypto-js": "^4.2.0",
+    "flv.js": "^1.6.2",
     "framer-motion": "^12.18.1",
     "he": "^1.2.0",
     "hls.js": "^1.6.10",

pnpm-lock.yaml

@@ -59,6 +59,9 @@ importers:
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
+      flv.js:
+        specifier: ^1.6.2
+        version: 1.6.2
       framer-motion:
         specifier: ^12.18.1
         version: 12.23.26(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -3186,6 +3189,9 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
+  es6-promise@4.2.8:
+    resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==}
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -3455,6 +3461,9 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
+  flv.js@1.6.2:
+    resolution: {integrity: sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==}
+
   for-each@0.3.5:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
@@ -6158,6 +6167,9 @@ packages:
       webpack-cli:
         optional: true
 
+  webworkify-webpack@2.1.5:
+    resolution: {integrity: sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==}
+
   whatwg-encoding@1.0.5:
     resolution: {integrity: sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==}
 
@@ -10176,6 +10188,8 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
+  es6-promise@4.2.8: {}
+
   escalade@3.2.0: {}
 
   escape-string-regexp@2.0.0: {}
@@ -10527,6 +10541,11 @@ snapshots:
 
   flatted@3.3.3: {}
 
+  flv.js@1.6.2:
+    dependencies:
+      es6-promise: 4.2.8
+      webworkify-webpack: 2.1.5
+
   for-each@0.3.5:
     dependencies:
       is-callable: 1.2.7
@@ -13960,6 +13979,8 @@ snapshots:
       - esbuild
       - uglify-js
 
+  webworkify-webpack@2.1.5: {}
+
   whatwg-encoding@1.0.5:
     dependencies:
       iconv-lite: 0.4.24

src/app/web-live/page.tsx

@@ -2,35 +2,50 @@
 
 import { useEffect, useRef, useState } from 'react';
 import PageLayout from '@/components/PageLayout';
+import { Radio } from 'lucide-react';
 
 let Artplayer: any = null;
 let Hls: any = null;
+let flvjs: any = null;
 
 export default function WebLivePage() {
   const artRef = useRef<HTMLDivElement | null>(null);
   const artPlayerRef = useRef<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [loadingStage, setLoadingStage] = useState<'loading' | 'fetching' | 'ready'>('loading');
+  const [loadingMessage, setLoadingMessage] = useState('正在加载直播源...');
   const [sources, setSources] = useState<any[]>([]);
   const [currentSource, setCurrentSource] = useState<any | null>(null);
   const [videoUrl, setVideoUrl] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
+  const [activeTab, setActiveTab] = useState<'rooms' | 'platforms'>('rooms');
+  const [isChannelListCollapsed, setIsChannelListCollapsed] = useState(false);
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
       import('artplayer').then(mod => { Artplayer = mod.default; });
       import('hls.js').then(mod => { Hls = mod.default; });
+      import('flv.js').then(mod => { flvjs = mod.default; });
     }
     fetchSources();
   }, []);
 
   const fetchSources = async () => {
     try {
+      setLoading(true);
+      setLoadingStage('loading');
+      setLoadingMessage('正在加载直播源...');
       const res = await fetch('/api/web-live/sources');
       if (res.ok) {
+        setLoadingStage('fetching');
         const data = await res.json();
         setSources(data);
+        setLoadingStage('ready');
+        await new Promise(resolve => setTimeout(resolve, 500));
       }
     } catch (err) {
       console.error('获取直播源失败:', err);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -42,8 +57,16 @@ export default function WebLivePage() {
     (video as any).hls = hls;
   }
 
+  function flvLoader(video: HTMLVideoElement, url: string) {
+    if (!flvjs) return;
+    const flvPlayer = flvjs.createPlayer({ type: 'flv', url, isLive: true });
+    flvPlayer.attachMediaElement(video);
+    flvPlayer.load();
+    (video as any).flvPlayer = flvPlayer;
+  }
+
   useEffect(() => {
-    if (!Artplayer || !Hls || !videoUrl || !artRef.current) return;
+    if (!Artplayer || !Hls || !flvjs || !videoUrl || !artRef.current) return;
 
     if (artPlayerRef.current) {
       artPlayerRef.current.destroy();
@@ -54,7 +77,10 @@ export default function WebLivePage() {
       url: videoUrl,
       isLive: true,
       autoplay: true,
-      customType: { m3u8: m3u8Loader },
+      customType: {
+        m3u8: m3u8Loader,
+        flv: flvLoader
+      },
       icons: { loading: '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100"><circle cx="50" cy="50" fill="none" stroke="currentColor" stroke-width="4" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"/></circle></svg>' }
     });
 
@@ -68,7 +94,6 @@ export default function WebLivePage() {
 
   const handleSourceClick = async (source: any) => {
     setCurrentSource(source);
-    setIsLoading(true);
     try {
       const res = await fetch(`/api/web-live/stream?platform=${source.platform}&roomId=${source.roomId}`);
       if (res.ok) {
@@ -77,33 +102,200 @@ export default function WebLivePage() {
       }
     } catch (err) {
       console.error('获取直播流失败:', err);
-    } finally {
-      setIsLoading(false);
     }
   };
 
+  const platforms = Array.from(new Set(sources.map(s => s.platform)));
+
+  if (loading) {
+    return (
+      <PageLayout activePath='/web-live'>
+        <div className='flex items-center justify-center min-h-screen bg-transparent'>
+          <div className='text-center max-w-md mx-auto px-6'>
+            {/* 动画直播图标 */}
+            <div className='relative mb-8'>
+              <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl shadow-2xl flex items-center justify-center transform hover:scale-105 transition-transform duration-300'>
+                <div className='text-white text-4xl'>📺</div>
+                {/* 旋转光环 */}
+                <div className='absolute -inset-2 bg-gradient-to-r from-green-500 to-emerald-600 rounded-2xl opacity-20 animate-spin'></div>
+              </div>
+
+              {/* 浮动粒子效果 */}
+              <div className='absolute top-0 left-0 w-full h-full pointer-events-none'>
+                <div className='absolute top-2 left-2 w-2 h-2 bg-green-400 rounded-full animate-bounce'></div>
+                <div
+                  className='absolute top-4 right-4 w-1.5 h-1.5 bg-emerald-400 rounded-full animate-bounce'
+                  style={{ animationDelay: '0.5s' }}
+                ></div>
+                <div
+                  className='absolute bottom-3 left-6 w-1 h-1 bg-lime-400 rounded-full animate-bounce'
+                  style={{ animationDelay: '1s' }}
+                ></div>
+              </div>
+            </div>
+
+            {/* 进度指示器 */}
+            <div className='mb-6 w-80 mx-auto'>
+              <div className='flex justify-center space-x-2 mb-4'>
+                <div
+                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'loading' ? 'bg-green-500 scale-125' : 'bg-green-500'}`}
+                ></div>
+                <div
+                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'fetching' ? 'bg-green-500 scale-125' : 'bg-green-500'}`}
+                ></div>
+                <div
+                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'ready' ? 'bg-green-500 scale-125' : 'bg-gray-300'}`}
+                ></div>
+              </div>
+
+              {/* 进度条 */}
+              <div className='w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden'>
+                <div
+                  className='h-full bg-gradient-to-r from-green-500 to-emerald-600 rounded-full transition-all duration-1000 ease-out'
+                  style={{
+                    width: loadingStage === 'loading' ? '33%' : loadingStage === 'fetching' ? '66%' : '100%',
+                  }}
+                ></div>
+              </div>
+            </div>
+
+            {/* 加载消息 */}
+            <div className='space-y-2'>
+              <p className='text-xl font-semibold text-gray-800 dark:text-gray-200 animate-pulse'>
+                {loadingMessage}
+              </p>
+            </div>
+          </div>
+        </div>
+      </PageLayout>
+    );
+  }
+
   return (
     <PageLayout activePath='/web-live'>
-      <div className='flex flex-col gap-4 p-5'>
-        <h1 className='text-2xl font-bold text-gray-900 dark:text-gray-100'>网络直播</h1>
-        <div className='grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-4'>
-          <div ref={artRef} className='w-full aspect-video bg-black rounded-lg' />
-          <div className='flex flex-col gap-2 max-h-[600px] overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-lg p-4'>
-            <h2 className='text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2'>直播列表</h2>
-            {sources.map((source) => (
-              <button
-                key={source.key}
-                onClick={() => handleSourceClick(source)}
-                className={`p-3 rounded-lg text-left transition-colors ${
-                  currentSource?.key === source.key
-                    ? 'bg-blue-600 text-white'
-                    : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700'
-                }`}
+      <div className='flex flex-col gap-3 py-4 px-5 lg:px-[3rem] 2xl:px-20'>
+        <div className='py-1'>
+          <h1 className='text-xl font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2 max-w-[80%]'>
+            <Radio className='w-5 h-5 text-blue-500 flex-shrink-0' />
+            <div className='min-w-0 flex-1'>
+              <div className='truncate'>
+                {currentSource?.name || '网络直播'}
+              </div>
+            </div>
+          </h1>
+        </div>
+
+        <div className='space-y-2'>
+          <div className='hidden lg:flex justify-end'>
+            <button
+              onClick={() => setIsChannelListCollapsed(!isChannelListCollapsed)}
+              className='group relative flex items-center space-x-1.5 px-3 py-1.5 rounded-full bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 shadow-sm hover:shadow-md transition-all duration-200'
+            >
+              <svg
+                className={`w-3.5 h-3.5 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${isChannelListCollapsed ? 'rotate-180' : 'rotate-0'}`}
+                fill='none'
+                stroke='currentColor'
+                viewBox='0 0 24 24'
               >
-                <div className='font-medium'>{source.name}</div>
-                <div className='text-sm opacity-75'>{source.platform === 'huya' ? '虎牙' : source.platform}</div>
-              </button>
-            ))}
+                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M9 5l7 7-7 7' />
+              </svg>
+              <span className='text-xs font-medium text-gray-600 dark:text-gray-300'>
+                {isChannelListCollapsed ? '显示' : '隐藏'}
+              </span>
+              <div className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full transition-all duration-200 ${isChannelListCollapsed ? 'bg-orange-400 animate-pulse' : 'bg-green-400'}`}></div>
+            </button>
+          </div>
+
+          <div className={`grid gap-4 lg:h-[500px] xl:h-[650px] 2xl:h-[750px] transition-all duration-300 ease-in-out ${isChannelListCollapsed ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-4'}`}>
+            <div className={`h-full transition-all duration-300 ease-in-out ${isChannelListCollapsed ? 'col-span-1' : 'md:col-span-3'}`}>
+              <div className='relative w-full h-[300px] lg:h-full'>
+                <div ref={artRef} className='bg-black w-full h-full rounded-xl overflow-hidden shadow-lg border border-white/0 dark:border-white/30'></div>
+              </div>
+            </div>
+
+            <div className={`h-[300px] lg:h-full md:overflow-hidden transition-all duration-300 ease-in-out ${isChannelListCollapsed ? 'md:col-span-1 lg:hidden lg:opacity-0 lg:scale-95' : 'md:col-span-1 lg:opacity-100 lg:scale-100'}`}>
+              <div className='md:ml-2 px-4 py-0 h-full rounded-xl bg-black/10 dark:bg-white/5 flex flex-col border border-white/0 dark:border-white/30 overflow-hidden'>
+                <div className='flex mb-1 -mx-6 flex-shrink-0'>
+                  <div
+                    onClick={() => setActiveTab('rooms')}
+                    className={`flex-1 py-3 px-6 text-center cursor-pointer transition-all duration-200 font-medium ${activeTab === 'rooms' ? 'text-green-600 dark:text-green-400' : 'text-gray-700 hover:text-green-600 bg-black/5 dark:bg-white/5 dark:text-gray-300 dark:hover:text-green-400 hover:bg-black/3 dark:hover:bg-white/3'}`}
+                  >
+                    房间
+                  </div>
+                  <div
+                    onClick={() => setActiveTab('platforms')}
+                    className={`flex-1 py-3 px-6 text-center cursor-pointer transition-all duration-200 font-medium ${activeTab === 'platforms' ? 'text-green-600 dark:text-green-400' : 'text-gray-700 hover:text-green-600 bg-black/5 dark:bg-white/5 dark:text-gray-300 dark:hover:text-green-400 hover:bg-black/3 dark:hover:bg-white/3'}`}
+                  >
+                    平台
+                  </div>
+                </div>
+
+                {activeTab === 'rooms' && (
+                  <div className='flex-1 overflow-y-auto space-y-2 pb-4 mt-4'>
+                    {sources.length > 0 ? (
+                      sources.map((source) => {
+                        const isActive = source.key === currentSource?.key;
+                        return (
+                          <button
+                            key={source.key}
+                            onClick={() => handleSourceClick(source)}
+                            className={`w-full p-3 rounded-lg text-left transition-all duration-200 ${isActive ? 'bg-green-100 dark:bg-green-900/30 border border-green-300 dark:border-green-700' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}`}
+                          >
+                            <div className='flex items-center gap-3'>
+                              <div className='w-10 h-10 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center flex-shrink-0'>
+                                <Radio className='w-5 h-5 text-gray-500' />
+                              </div>
+                              <div className='flex-1 min-w-0'>
+                                <div className='text-sm font-medium text-gray-900 dark:text-gray-100 truncate'>{source.name}</div>
+                                <div className='text-xs text-gray-500 dark:text-gray-400 mt-1'>房间ID: {source.roomId}</div>
+                              </div>
+                            </div>
+                          </button>
+                        );
+                      })
+                    ) : (
+                      <div className='flex flex-col items-center justify-center py-12 text-center'>
+                        <div className='w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4'>
+                          <Radio className='w-8 h-8 text-gray-400 dark:text-gray-600' />
+                        </div>
+                        <p className='text-gray-500 dark:text-gray-400 font-medium'>暂无可用房间</p>
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {activeTab === 'platforms' && (
+                  <div className='flex flex-col h-full mt-4'>
+                    <div className='flex-1 overflow-y-auto space-y-2 pb-20'>
+                      {platforms.length > 0 ? (
+                        platforms.map((platform) => (
+                          <div key={platform} className='flex items-start gap-3 px-2 py-3 rounded-lg bg-gray-200/50 dark:bg-white/10'>
+                            <div className='w-12 h-12 bg-gray-200 dark:bg-gray-600 rounded-lg flex items-center justify-center flex-shrink-0'>
+                              <Radio className='w-6 h-6 text-gray-500' />
+                            </div>
+                            <div className='flex-1 min-w-0'>
+                              <div className='text-sm font-medium text-gray-900 dark:text-gray-100 truncate'>
+                                {platform === 'huya' ? '虎牙' : platform}
+                              </div>
+                              <div className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+                                {sources.filter(s => s.platform === platform).length} 个房间
+                              </div>
+                            </div>
+                          </div>
+                        ))
+                      ) : (
+                        <div className='flex flex-col items-center justify-center py-12 text-center'>
+                          <div className='w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4'>
+                            <Radio className='w-8 h-8 text-gray-400 dark:text-gray-600' />
+                          </div>
+                          <p className='text-gray-500 dark:text-gray-400 font-medium'>暂无可用平台</p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </div>