增加网络直播

This commit is contained in:
mtvpls
2026-01-20 11:48:41 +08:00
parent 5e9ecc20f0
commit 78f7c68ef5
8 changed files with 585 additions and 0 deletions
+269
View File
@@ -10715,6 +10715,262 @@ const LiveSourceConfig = ({
);
};
// 网络直播配置组件
const WebLiveConfig = ({
config,
refreshConfig,
}: {
config: AdminConfig | null;
refreshConfig: () => Promise<void>;
}) => {
const { alertModal, showAlert, hideAlert } = useAlertModal();
const { isLoading, withLoading } = useLoadingState();
const [webLiveSources, setWebLiveSources] = useState<any[]>([]);
const [showAddForm, setShowAddForm] = useState(false);
const [editingSource, setEditingSource] = useState<any | null>(null);
const [newSource, setNewSource] = useState({
name: '',
platform: 'huya',
roomId: '',
});
useEffect(() => {
if (config?.WebLiveConfig) {
setWebLiveSources(config.WebLiveConfig);
}
}, [config]);
const callApi = async (body: Record<string, any>) => {
try {
const resp = await fetch('/api/admin/web-live', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
if (!resp.ok) {
const data = await resp.json().catch(() => ({}));
throw new Error(data.error || `操作失败: ${resp.status}`);
}
await refreshConfig();
} catch (err) {
showError(err instanceof Error ? err.message : '操作失败', showAlert);
throw err;
}
};
const handleAdd = () => {
if (!newSource.name || !newSource.platform || !newSource.roomId) return;
withLoading('addWebLive', async () => {
await callApi({
action: 'add',
name: newSource.name,
platform: newSource.platform,
roomId: newSource.roomId,
});
setNewSource({ name: '', platform: 'huya', roomId: '' });
setShowAddForm(false);
}).catch(() => {});
};
const handleEdit = () => {
if (!editingSource || !editingSource.name || !editingSource.roomId) return;
withLoading('editWebLive', async () => {
await callApi({
action: 'edit',
key: editingSource.key,
name: editingSource.name,
platform: editingSource.platform,
roomId: editingSource.roomId,
});
setEditingSource(null);
}).catch(() => {});
};
const handleToggle = (key: string) => {
const target = webLiveSources.find((s) => s.key === key);
if (!target) return;
const action = target.disabled ? 'enable' : 'disable';
withLoading(`toggleWebLive_${key}`, () => callApi({ action, key })).catch(() => {});
};
const handleDelete = (key: string) => {
withLoading(`deleteWebLive_${key}`, () => callApi({ action: 'delete', key })).catch(() => {});
};
if (!config) {
return <div className='text-center text-gray-500 dark:text-gray-400'>...</div>;
}
return (
<div className='space-y-6'>
<div className='flex items-center justify-between'>
<h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'></h4>
<button
onClick={() => setShowAddForm(!showAddForm)}
className={showAddForm ? buttonStyles.secondary : buttonStyles.success}
>
{showAddForm ? '取消' : '添加网络直播'}
</button>
</div>
{showAddForm && (
<div className='p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 space-y-4'>
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<input
type='text'
placeholder='名称'
value={newSource.name}
onChange={(e) => setNewSource((prev) => ({ ...prev, name: e.target.value }))}
className='px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
/>
<select
value={newSource.platform}
onChange={(e) => setNewSource((prev) => ({ ...prev, platform: e.target.value }))}
className='px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
>
<option value='huya'></option>
</select>
<input
type='text'
placeholder='房间ID'
value={newSource.roomId}
onChange={(e) => setNewSource((prev) => ({ ...prev, roomId: e.target.value }))}
className='px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
/>
</div>
<div className='flex justify-end'>
<button
onClick={handleAdd}
disabled={!newSource.name || !newSource.platform || !newSource.roomId || isLoading('addWebLive')}
className={`w-full sm:w-auto px-4 py-2 ${
!newSource.name || !newSource.platform || !newSource.roomId || isLoading('addWebLive')
? buttonStyles.disabled
: buttonStyles.success
}`}
>
{isLoading('addWebLive') ? '添加中...' : '添加'}
</button>
</div>
</div>
)}
{editingSource && (
<div className='p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 space-y-4'>
<div className='flex items-center justify-between'>
<h5 className='text-sm font-medium text-gray-700 dark:text-gray-300'>: {editingSource.name}</h5>
<button onClick={() => setEditingSource(null)} className='text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'></button>
</div>
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<div>
<label className='block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1'></label>
<input
type='text'
value={editingSource.name}
onChange={(e) => setEditingSource((prev: any) => prev ? { ...prev, name: e.target.value } : null)}
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
/>
</div>
<div>
<label className='block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1'></label>
<select
value={editingSource.platform}
onChange={(e) => setEditingSource((prev: any) => prev ? { ...prev, platform: e.target.value } : null)}
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
>
<option value='huya'></option>
</select>
</div>
<div>
<label className='block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1'>ID</label>
<input
type='text'
value={editingSource.roomId}
onChange={(e) => setEditingSource((prev: any) => prev ? { ...prev, roomId: e.target.value } : null)}
className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
/>
</div>
</div>
<div className='flex justify-end space-x-2'>
<button onClick={() => setEditingSource(null)} className={buttonStyles.secondary}></button>
<button
onClick={handleEdit}
disabled={!editingSource.name || !editingSource.roomId || isLoading('editWebLive')}
className={`${!editingSource.name || !editingSource.roomId || isLoading('editWebLive') ? buttonStyles.disabled : buttonStyles.success}`}
>
{isLoading('editWebLive') ? '保存中...' : '保存'}
</button>
</div>
</div>
)}
<div className='border border-gray-200 dark:border-gray-700 rounded-lg overflow-auto'>
<table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
<thead className='bg-gray-50 dark:bg-gray-900'>
<tr>
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase'></th>
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase'></th>
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase'>ID</th>
<th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase'></th>
<th className='px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase'></th>
</tr>
</thead>
<tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
{webLiveSources.map((source) => (
<tr key={source.key} className='hover:bg-gray-50 dark:hover:bg-gray-800'>
<td className='px-6 py-4 text-sm text-gray-900 dark:text-gray-100'>{source.name}</td>
<td className='px-6 py-4 text-sm text-gray-900 dark:text-gray-100'>{source.platform === 'huya' ? '虎牙' : source.platform}</td>
<td className='px-6 py-4 text-sm text-gray-900 dark:text-gray-100'>{source.roomId}</td>
<td className='px-6 py-4'>
<span className={`px-2 py-1 text-xs rounded-full ${!source.disabled ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300' : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'}`}>
{!source.disabled ? '启用中' : '已禁用'}
</span>
</td>
<td className='px-6 py-4 text-right text-sm space-x-2'>
<button
onClick={() => handleToggle(source.key)}
disabled={isLoading(`toggleWebLive_${source.key}`)}
className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${!source.disabled ? buttonStyles.roundedDanger : buttonStyles.roundedSuccess} ${isLoading(`toggleWebLive_${source.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
>
{!source.disabled ? '禁用' : '启用'}
</button>
{source.from !== 'config' && (
<>
<button
onClick={() => setEditingSource(source)}
disabled={isLoading(`editWebLive_${source.key}`)}
className={`${buttonStyles.roundedPrimary} ${isLoading(`editWebLive_${source.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
>
</button>
<button
onClick={() => handleDelete(source.key)}
disabled={isLoading(`deleteWebLive_${source.key}`)}
className={`${buttonStyles.roundedSecondary} ${isLoading(`deleteWebLive_${source.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
>
</button>
</>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
<AlertModal
isOpen={alertModal.isOpen}
onClose={hideAlert}
type={alertModal.type}
title={alertModal.title}
message={alertModal.message}
timer={alertModal.timer}
showConfirm={alertModal.showConfirm}
/>
</div>
);
};
function AdminPageClient() {
const { alertModal, showAlert, hideAlert } = useAlertModal();
const { isLoading, withLoading } = useLoadingState();
@@ -10732,6 +10988,7 @@ function AdminPageClient() {
xiaoyaConfig: false,
aiConfig: false,
liveSource: false,
webLive: false,
siteConfig: false,
registrationConfig: false,
categoryConfig: false,
@@ -11057,6 +11314,18 @@ function AdminPageClient() {
<LiveSourceConfig config={config} refreshConfig={fetchConfig} />
</CollapsibleTab>
{/* 网络直播配置标签 */}
<CollapsibleTab
title='网络直播配置'
icon={
<Tv size={20} className='text-gray-600 dark:text-gray-400' />
}
isExpanded={expandedTabs.webLive}
onToggle={() => toggleTab('webLive')}
>
<WebLiveConfig config={config} refreshConfig={fetchConfig} />
</CollapsibleTab>
{/* 私人影库大类 */}
<CollapsibleTab
title='私人影库'
+124
View File
@@ -0,0 +1,124 @@
import { NextRequest, NextResponse } from 'next/server';
import { getAuthInfoFromCookie } from '@/lib/auth';
import { getConfig } from '@/lib/config';
import { db } from '@/lib/db';
export async function POST(request: NextRequest) {
try {
const authInfo = getAuthInfoFromCookie(request);
const username = authInfo?.username;
const config = await getConfig();
if (username !== process.env.USERNAME) {
const userInfo = await db.getUserInfoV2(username || '');
if (!userInfo || userInfo.role !== 'admin' || userInfo.banned) {
return NextResponse.json({ error: '权限不足' }, { status: 401 });
}
}
const body = await request.json();
const { action } = body;
if (!config) {
return NextResponse.json({ error: '配置不存在' }, { status: 404 });
}
if (!config.WebLiveConfig) {
config.WebLiveConfig = [];
}
switch (action) {
case 'add': {
const { name, platform, roomId } = body;
if (!name || !platform || !roomId) {
return NextResponse.json({ error: '缺少必要参数' }, { status: 400 });
}
const key = `web_${Date.now()}`;
if (config.WebLiveConfig.some((s) => s.key === key)) {
return NextResponse.json({ error: 'Key已存在' }, { status: 400 });
}
config.WebLiveConfig.push({
key,
name,
platform,
roomId,
from: 'custom',
disabled: false,
});
break;
}
case 'delete': {
const { key } = body;
const source = config.WebLiveConfig.find((s) => s.key === key);
if (!source) {
return NextResponse.json({ error: '源不存在' }, { status: 404 });
}
if (source.from === 'config') {
return NextResponse.json({ error: '无法删除配置文件中的源' }, { status: 400 });
}
config.WebLiveConfig = config.WebLiveConfig.filter((s) => s.key !== key);
break;
}
case 'enable': {
const { key } = body;
const source = config.WebLiveConfig.find((s) => s.key === key);
if (!source) {
return NextResponse.json({ error: '源不存在' }, { status: 404 });
}
source.disabled = false;
break;
}
case 'disable': {
const { key } = body;
const source = config.WebLiveConfig.find((s) => s.key === key);
if (!source) {
return NextResponse.json({ error: '源不存在' }, { status: 404 });
}
source.disabled = true;
break;
}
case 'edit': {
const { key, name, platform, roomId } = body;
const source = config.WebLiveConfig.find((s) => s.key === key);
if (!source) {
return NextResponse.json({ error: '源不存在' }, { status: 404 });
}
if (source.from === 'config') {
return NextResponse.json({ error: '无法编辑配置文件中的源' }, { status: 400 });
}
source.name = name;
source.platform = platform;
source.roomId = roomId;
break;
}
case 'sort': {
const { keys } = body;
if (!Array.isArray(keys)) {
return NextResponse.json({ error: '无效的排序数据' }, { status: 400 });
}
const sortedSources = keys
.map((key) => config.WebLiveConfig!.find((s) => s.key === key))
.filter((s) => s !== undefined);
config.WebLiveConfig = sortedSources;
break;
}
default:
return NextResponse.json({ error: '未知操作' }, { status: 400 });
}
await db.saveAdminConfig(config);
return NextResponse.json({ success: true });
} catch (error) {
return NextResponse.json(
{ error: error instanceof Error ? error.message : '操作失败' },
{ status: 500 }
);
}
}
+19
View File
@@ -0,0 +1,19 @@
import { NextRequest, NextResponse } from 'next/server';
import { getConfig } from '@/lib/config';
export async function GET(request: NextRequest) {
try {
const config = await getConfig();
if (!config?.WebLiveConfig) {
return NextResponse.json([]);
}
const sources = config.WebLiveConfig.filter(s => !s.disabled);
return NextResponse.json(sources);
} catch (error) {
return NextResponse.json(
{ error: error instanceof Error ? error.message : '获取失败' },
{ status: 500 }
);
}
}
+33
View File
@@ -0,0 +1,33 @@
import { NextRequest, NextResponse } from 'next/server';
export async function GET(request: NextRequest) {
try {
const { searchParams } = new URL(request.url);
const platform = searchParams.get('platform');
const roomId = searchParams.get('roomId');
if (!platform || !roomId) {
return NextResponse.json({ error: '缺少参数' }, { status: 400 });
}
if (platform === 'huya') {
const res = await fetch(`https://mp.huya.com/cache.php?m=Live&do=profileRoom&roomid=${roomId}`);
const data = await res.json();
if (data.status === 200 && data.data?.liveStatus === 'ON') {
const stream = data.data.stream;
const url = `${stream.flv.multiLine[0].url}/${stream.flv.streamName}.${stream.flv.sFlvUrlSuffix}?${stream.flv.sFlvAntiCode}`;
return NextResponse.json({ url });
}
return NextResponse.json({ error: '直播未开启' }, { status: 404 });
}
return NextResponse.json({ error: '不支持的平台' }, { status: 400 });
} catch (error) {
return NextResponse.json(
{ error: error instanceof Error ? error.message : '获取失败' },
{ status: 500 }
);
}
}
+112
View File
@@ -0,0 +1,112 @@
'use client';
import { useEffect, useRef, useState } from 'react';
import PageLayout from '@/components/PageLayout';
let Artplayer: any = null;
let Hls: any = null;
export default function WebLivePage() {
const artRef = useRef<HTMLDivElement | null>(null);
const artPlayerRef = useRef<any>(null);
const [sources, setSources] = useState<any[]>([]);
const [currentSource, setCurrentSource] = useState<any | null>(null);
const [videoUrl, setVideoUrl] = useState('');
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (typeof window !== 'undefined') {
import('artplayer').then(mod => { Artplayer = mod.default; });
import('hls.js').then(mod => { Hls = mod.default; });
}
fetchSources();
}, []);
const fetchSources = async () => {
try {
const res = await fetch('/api/web-live/sources');
if (res.ok) {
const data = await res.json();
setSources(data);
}
} catch (err) {
console.error('获取直播源失败:', err);
}
};
function m3u8Loader(video: HTMLVideoElement, url: string) {
if (!Hls) return;
const hls = new Hls({ debug: false, enableWorker: true, lowLatencyMode: true });
hls.loadSource(url);
hls.attachMedia(video);
(video as any).hls = hls;
}
useEffect(() => {
if (!Artplayer || !Hls || !videoUrl || !artRef.current) return;
if (artPlayerRef.current) {
artPlayerRef.current.destroy();
}
artPlayerRef.current = new Artplayer({
container: artRef.current,
url: videoUrl,
isLive: true,
autoplay: true,
customType: { m3u8: m3u8Loader },
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>' }
});
return () => {
if (artPlayerRef.current) {
artPlayerRef.current.destroy();
artPlayerRef.current = null;
}
};
}, [videoUrl]);
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) {
const data = await res.json();
setVideoUrl(data.url);
}
} catch (err) {
console.error('获取直播流失败:', err);
} finally {
setIsLoading(false);
}
};
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='font-medium'>{source.name}</div>
<div className='text-sm opacity-75'>{source.platform === 'huya' ? '虎牙' : source.platform}</div>
</button>
))}
</div>
</div>
</div>
</PageLayout>
);
}
+10
View File
@@ -55,6 +55,11 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
label: '电视直播',
href: '/live',
},
{
icon: Radio,
label: '网络直播',
href: '/web-live',
},
]);
useEffect(() => {
@@ -88,6 +93,11 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
label: '电视直播',
href: '/live',
},
{
icon: Radio,
label: '网络直播',
href: '/web-live',
},
];
// 如果配置了 OpenList 或 Emby,添加私人影库入口
+10
View File
@@ -147,6 +147,11 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
label: '电视直播',
href: '/live',
},
{
icon: Radio,
label: '网络直播',
href: '/web-live',
},
]);
useEffect(() => {
@@ -179,6 +184,11 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
label: '电视直播',
href: '/live',
},
{
icon: Radio,
label: '网络直播',
href: '/web-live',
},
];
// 如果配置了 OpenList 或 Emby,添加私人影库入口
+8
View File
@@ -95,6 +95,14 @@ export interface AdminConfig {
channelNumber?: number;
disabled?: boolean;
}[];
WebLiveConfig?: {
key: string;
name: string;
platform: string; // 直播平台类型,如 'huya'
roomId: string; // 房间ID
from: 'config' | 'custom';
disabled?: boolean;
}[];
ThemeConfig?: {
enableBuiltInTheme: boolean; // 是否启用内置主题
builtInTheme: string; // 内置主题名称