完善tv电视直播
This commit is contained in:
mtvpls
@@ -9,7 +9,7 @@ export const runtime = 'nodejs';
|
||||
export async function GET(request: Request) {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const imageUrl = searchParams.get('url');
|
||||
const source = searchParams.get('moontv-source');
|
||||
const source = searchParams.get('moontv-source') || searchParams.get('source');
|
||||
|
||||
if (!imageUrl) {
|
||||
return NextResponse.json({ error: 'Missing image URL' }, { status: 400 });
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { AlertTriangle, Loader2, Radio, Search } from 'lucide-react';
|
||||
import { AlertTriangle, Loader2, Play, Radio, Search } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
@@ -10,6 +10,16 @@ import TVLayout from '@/components/tv/TVLayout';
|
||||
|
||||
type LiveSource = { key: string; name: string };
|
||||
type LiveChannel = { id: string; name: string; group?: string; logo?: string };
|
||||
type LastLiveChannel = { source: string; sourceName?: string; id: string; title: string; group?: string; logo?: string; updatedAt?: number };
|
||||
|
||||
const TV_LIVE_LAST_CHANNEL_KEY = 'tv_live_last_channel';
|
||||
|
||||
function getLogoUrl(logo?: string, source?: string) {
|
||||
if (!logo) return '';
|
||||
if (logo.startsWith('/api/proxy/logo')) return logo;
|
||||
const sourceParam = source ? `&source=${encodeURIComponent(source)}` : '';
|
||||
return `/api/proxy/logo?url=${encodeURIComponent(logo)}${sourceParam}`;
|
||||
}
|
||||
|
||||
export default function TVLivePage() {
|
||||
const router = useRouter();
|
||||
@@ -22,8 +32,29 @@ export default function TVLivePage() {
|
||||
const [query, setQuery] = useState('');
|
||||
const [visibleCount, setVisibleCount] = useState(120);
|
||||
const [quickChannels, setQuickChannels] = useState<Array<{ source: string; id: string; title: string; cover?: string; type: '最近' | '收藏' }>>([]);
|
||||
const [lastChannel, setLastChannel] = useState<LastLiveChannel | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem(TV_LIVE_LAST_CHANNEL_KEY);
|
||||
if (saved) {
|
||||
const parsed = JSON.parse(saved) as Partial<LastLiveChannel>;
|
||||
if (parsed.source && parsed.id && parsed.title) {
|
||||
setLastChannel({
|
||||
source: parsed.source,
|
||||
sourceName: parsed.sourceName || '',
|
||||
id: parsed.id,
|
||||
title: parsed.title,
|
||||
group: parsed.group || '',
|
||||
logo: parsed.logo || '',
|
||||
updatedAt: parsed.updatedAt,
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
setLastChannel(null);
|
||||
}
|
||||
|
||||
fetch('/api/live/sources')
|
||||
.then((r) => {
|
||||
if (!r.ok) throw new Error('获取直播源失败');
|
||||
@@ -108,6 +139,28 @@ export default function TVLivePage() {
|
||||
|
||||
return (
|
||||
<TVLayout>
|
||||
{lastChannel && (
|
||||
<section className='mb-8 rounded-[34px] border border-rose-400/30 bg-rose-950/30 p-7 shadow-2xl shadow-black/50'>
|
||||
<button
|
||||
onClick={() => router.push(`/tv/live/play?source=${encodeURIComponent(lastChannel.source)}&id=${encodeURIComponent(lastChannel.id)}`)}
|
||||
className='tv-focusable flex w-full cursor-pointer items-center justify-between gap-6 rounded-3xl bg-white/10 p-6 text-left outline-none transition hover:bg-white/14 focus:ring-4 focus:ring-rose-300'
|
||||
>
|
||||
<div className='flex min-w-0 items-center gap-5'>
|
||||
{lastChannel.logo ? <img src={getLogoUrl(lastChannel.logo, lastChannel.source)} alt='' className='h-20 w-20 rounded-2xl object-contain' /> : <Radio className='h-16 w-16 shrink-0 text-rose-400' />}
|
||||
<div className='min-w-0'>
|
||||
<div className='mb-2 flex items-center gap-3 text-2xl font-black text-rose-100'>
|
||||
<Play className='h-7 w-7 fill-current' />
|
||||
开始观看
|
||||
</div>
|
||||
<div className='line-clamp-1 text-4xl font-black text-white'>{lastChannel.title}</div>
|
||||
<div className='mt-2 text-xl text-slate-300'>{lastChannel.sourceName || lastChannel.source}{lastChannel.group ? ` · ${lastChannel.group}` : ''}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='shrink-0 rounded-2xl bg-rose-600 px-7 py-4 text-2xl font-black text-white'>播放</div>
|
||||
</button>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className='rounded-[42px] border border-white/10 bg-slate-950/70 p-10 shadow-2xl shadow-black/60'>
|
||||
<div className='flex items-center gap-4'>
|
||||
<Radio className='h-14 w-14 text-rose-500' />
|
||||
@@ -163,7 +216,7 @@ export default function TVLivePage() {
|
||||
<div className='grid grid-cols-2 gap-4 lg:grid-cols-4'>
|
||||
{visibleChannels.map((channel, index) => (
|
||||
<button key={channel.id} onClick={() => router.push(`/tv/live/play?source=${encodeURIComponent(source)}&id=${encodeURIComponent(channel.id)}`)} className='tv-focusable flex min-h-28 cursor-pointer items-center gap-4 rounded-3xl border border-white/10 bg-white/[0.06] p-5 text-left outline-none transition hover:bg-white/12 focus:ring-4 focus:ring-rose-300'>
|
||||
{channel.logo ? <img src={channel.logo} alt='' className='h-14 w-14 rounded-xl object-contain' /> : <Radio className='h-12 w-12 text-rose-400' />}
|
||||
{channel.logo ? <img src={getLogoUrl(channel.logo, source)} alt='' className='h-14 w-14 rounded-xl object-contain' /> : <Radio className='h-12 w-12 text-rose-400' />}
|
||||
<div><div className='line-clamp-1 text-2xl font-black'>{channel.name}</div><div className='mt-1 text-lg text-slate-400'>#{index + 1} · {channel.group || '直播频道'}</div></div>
|
||||
</button>
|
||||
))}
|
||||
|
||||
+141
-20
@@ -14,10 +14,13 @@ type LiveChannel = { id: string; tvgId?: string; name: string; logo?: string; gr
|
||||
type EpgProgram = { start: string; end: string; title: string };
|
||||
type TVPlayerSourceType = 'm3u8' | 'flv' | 'native';
|
||||
|
||||
const TV_LIVE_LAST_CHANNEL_KEY = 'tv_live_last_channel';
|
||||
const REMOTE_KEY_DEDUPE_MS = 350;
|
||||
|
||||
function getLogoUrl(logo?: string, source?: string) {
|
||||
if (!logo) return '';
|
||||
if (!source) return logo;
|
||||
return `/api/proxy/logo?url=${encodeURIComponent(logo)}&source=${encodeURIComponent(source)}`;
|
||||
const sourceParam = source ? `&source=${encodeURIComponent(source)}` : '';
|
||||
return `/api/proxy/logo?url=${encodeURIComponent(logo)}${sourceParam}`;
|
||||
}
|
||||
|
||||
function getUrlSourceType(rawUrl: string): TVPlayerSourceType | 'unknown' {
|
||||
@@ -38,7 +41,7 @@ async function resolveLiveUrl(rawUrl: string, source?: LiveSource | null): Promi
|
||||
type: 'm3u8',
|
||||
url: proxyMode === 'direct'
|
||||
? rawUrl
|
||||
: `/api/proxy/m3u8?url=${encodeURIComponent(rawUrl)}&moontv-source=${encodeURIComponent(source?.key || '')}`,
|
||||
: `/api/proxy/m3u8?url=${encodeURIComponent(rawUrl)}&moontv-source=${encodeURIComponent(source?.key || '')}${proxyMode === 'm3u8-only' ? '&allowCORS=true' : ''}`,
|
||||
};
|
||||
}
|
||||
if (sourceType === 'flv') return { type: 'flv', url: rawUrl };
|
||||
@@ -60,7 +63,7 @@ async function resolveLiveUrl(rawUrl: string, source?: LiveSource | null): Promi
|
||||
type: 'm3u8',
|
||||
url: proxyMode === 'direct'
|
||||
? rawUrl
|
||||
: `/api/proxy/m3u8?url=${encodeURIComponent(rawUrl)}&moontv-source=${encodeURIComponent(source.key)}`,
|
||||
: `/api/proxy/m3u8?url=${encodeURIComponent(rawUrl)}&moontv-source=${encodeURIComponent(source.key)}${proxyMode === 'm3u8-only' ? '&allowCORS=true' : ''}`,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -82,7 +85,7 @@ function TVLivePlayClient() {
|
||||
const [unsupportedError, setUnsupportedError] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [showPanel, setShowPanel] = useState(true);
|
||||
const [showPanel, setShowPanel] = useState(false);
|
||||
const [selectedGroup, setSelectedGroup] = useState('');
|
||||
const [query, setQuery] = useState('');
|
||||
const [digitBuffer, setDigitBuffer] = useState('');
|
||||
@@ -93,8 +96,14 @@ function TVLivePlayClient() {
|
||||
const [epgLoading, setEpgLoading] = useState(false);
|
||||
const [muted, setMuted] = useState(false);
|
||||
const [volume, setVolume] = useState(1);
|
||||
const [showVolumeHint, setShowVolumeHint] = useState(false);
|
||||
const [channelHint, setChannelHint] = useState<{ number: number; name: string } | null>(null);
|
||||
const channelButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});
|
||||
const digitTimerRef = useRef<number | null>(null);
|
||||
const volumeHintTimerRef = useRef<number | null>(null);
|
||||
const channelHintTimerRef = useRef<number | null>(null);
|
||||
const menuKeyTimeRef = useRef(0);
|
||||
const backKeyTimeRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
@@ -194,6 +203,26 @@ function TVLivePlayClient() {
|
||||
return () => { alive = false; };
|
||||
}, [channel?.tvgId, source]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!source || !channel) return;
|
||||
try {
|
||||
localStorage.setItem(
|
||||
TV_LIVE_LAST_CHANNEL_KEY,
|
||||
JSON.stringify({
|
||||
source: source.key,
|
||||
sourceName: source.name,
|
||||
id: channel.id,
|
||||
title: channel.name,
|
||||
group: channel.group || '',
|
||||
logo: channel.logo || '',
|
||||
updatedAt: Date.now(),
|
||||
})
|
||||
);
|
||||
} catch {
|
||||
// ignore storage failures
|
||||
}
|
||||
}, [channel, source]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!playbackError || !channel || retryCount >= 3) return;
|
||||
const timer = window.setTimeout(() => {
|
||||
@@ -231,12 +260,15 @@ function TVLivePlayClient() {
|
||||
}
|
||||
};
|
||||
|
||||
const switchChannel = (next: LiveChannel) => {
|
||||
const switchChannel = (next: LiveChannel, revealControls = true) => {
|
||||
precheckChannel(next);
|
||||
setChannel(next);
|
||||
setSelectedGroup(next.group || '其他');
|
||||
setShowPanel(true);
|
||||
if (source) router.replace(`/tv/live/play?source=${encodeURIComponent(source.key)}&id=${encodeURIComponent(next.id)}`);
|
||||
if (revealControls) setShowPanel(true);
|
||||
const number = channels.findIndex((item) => item.id === next.id) + 1;
|
||||
setChannelHint({ number: number > 0 ? number : 1, name: next.name });
|
||||
if (channelHintTimerRef.current) window.clearTimeout(channelHintTimerRef.current);
|
||||
channelHintTimerRef.current = window.setTimeout(() => setChannelHint(null), 5000);
|
||||
};
|
||||
|
||||
const switchSource = (next: LiveSource) => {
|
||||
@@ -278,6 +310,9 @@ function TVLivePlayClient() {
|
||||
}
|
||||
setVolume(safe);
|
||||
setMuted(safe <= 0);
|
||||
setShowVolumeHint(true);
|
||||
if (volumeHintTimerRef.current) window.clearTimeout(volumeHintTimerRef.current);
|
||||
volumeHintTimerRef.current = window.setTimeout(() => setShowVolumeHint(false), 1200);
|
||||
};
|
||||
|
||||
const toggleMute = () => {
|
||||
@@ -305,7 +340,31 @@ function TVLivePlayClient() {
|
||||
}, [muted, videoUrl, volume]);
|
||||
|
||||
useEffect(() => {
|
||||
const togglePanelByRemoteKey = (event: { preventDefault: () => void }) => {
|
||||
const now = Date.now();
|
||||
if (now - menuKeyTimeRef.current < REMOTE_KEY_DEDUPE_MS) return;
|
||||
menuKeyTimeRef.current = now;
|
||||
event.preventDefault();
|
||||
setShowPanel((value) => !value);
|
||||
};
|
||||
|
||||
const onKey = (event: KeyboardEvent) => {
|
||||
const isMenuKey =
|
||||
event.key === 'ContextMenu' ||
|
||||
event.key === 'Menu' ||
|
||||
event.key === 'BrowserContextMenu' ||
|
||||
event.code === 'ContextMenu' ||
|
||||
event.code === 'Menu' ||
|
||||
event.keyCode === 93 ||
|
||||
event.keyCode === 82;
|
||||
if (isMenuKey) {
|
||||
event.stopImmediatePropagation();
|
||||
togglePanelByRemoteKey(event);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.type === 'keyup') return;
|
||||
|
||||
if (/^[0-9]$/.test(event.key) && channels.length) {
|
||||
event.preventDefault();
|
||||
const nextBuffer = `${digitBuffer}${event.key}`.slice(-4);
|
||||
@@ -321,15 +380,47 @@ function TVLivePlayClient() {
|
||||
if (event.key === 'Enter') {
|
||||
const active = document.activeElement;
|
||||
const isControlFocused = active instanceof HTMLElement && Boolean(active.closest('[data-tv-live-control]'));
|
||||
if (!showPanel) {
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
setShowPanel(true);
|
||||
return;
|
||||
}
|
||||
if (!isControlFocused) {
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
setShowPanel((v) => !v);
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (!showPanel && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
const currentIndex = channels.findIndex((item) => item.id === channel?.id);
|
||||
if (currentIndex >= 0) {
|
||||
const nextIndex = event.key === 'ArrowUp' ? currentIndex - 1 : currentIndex + 1;
|
||||
const next = channels[Math.max(0, Math.min(channels.length - 1, nextIndex))];
|
||||
if (next && next.id !== channel?.id) switchChannel(next, false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!showPanel && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
setVideoVolume(volume + (event.key === 'ArrowRight' ? 0.05 : -0.05));
|
||||
return;
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
if (showPanel) setShowPanel(false);
|
||||
else router.back();
|
||||
event.stopImmediatePropagation();
|
||||
const now = Date.now();
|
||||
if (showPanel) {
|
||||
backKeyTimeRef.current = now;
|
||||
setShowPanel(false);
|
||||
} else if (now - backKeyTimeRef.current >= 250) {
|
||||
router.back();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (event.key === 'PageUp' || event.key === 'PageDown') {
|
||||
const currentIndex = channels.findIndex((item) => item.id === channel?.id);
|
||||
@@ -340,9 +431,13 @@ function TVLivePlayClient() {
|
||||
}
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', onKey);
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, [channel?.id, channels, digitBuffer, router, showPanel, source]);
|
||||
window.addEventListener('keydown', onKey, true);
|
||||
window.addEventListener('keyup', onKey, true);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', onKey, true);
|
||||
window.removeEventListener('keyup', onKey, true);
|
||||
};
|
||||
}, [channel?.id, channels, digitBuffer, router, showPanel, source, volume]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showPanel || !channel?.id) return;
|
||||
@@ -372,7 +467,18 @@ function TVLivePlayClient() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main data-tv-player-root className='fixed inset-0 overflow-hidden bg-black text-white' onMouseMove={() => setShowPanel(true)}>
|
||||
<main
|
||||
data-tv-player-root
|
||||
data-tv-controls-open={showPanel ? 'true' : 'false'}
|
||||
className='fixed inset-0 overflow-hidden bg-black text-white'
|
||||
onContextMenu={(event) => {
|
||||
const now = Date.now();
|
||||
if (now - menuKeyTimeRef.current < REMOTE_KEY_DEDUPE_MS) return;
|
||||
menuKeyTimeRef.current = now;
|
||||
event.preventDefault();
|
||||
setShowPanel((value) => !value);
|
||||
}}
|
||||
>
|
||||
{unsupportedError ? (
|
||||
<div role='alert' className='flex h-full items-center justify-center bg-black p-10 text-center text-white'>
|
||||
<section className='max-w-3xl rounded-[36px] border border-amber-500/40 bg-slate-950/92 p-9 shadow-2xl shadow-black/70'>
|
||||
@@ -404,7 +510,7 @@ function TVLivePlayClient() {
|
||||
</div>
|
||||
|
||||
<div className={`absolute left-8 right-8 top-8 flex items-center justify-between transition-opacity duration-300 ${showPanel ? 'opacity-100' : 'opacity-0'}`}>
|
||||
<button onClick={() => router.back()} data-tv-live-control className='tv-focusable flex cursor-pointer items-center gap-3 rounded-2xl bg-black/70 px-5 py-4 text-2xl font-black outline-none backdrop-blur focus:ring-4 focus:ring-rose-300'><ArrowLeft className='h-7 w-7' />返回</button>
|
||||
<button onClick={() => { if (showPanel) setShowPanel(false); else router.back(); }} data-tv-live-control className='tv-focusable flex cursor-pointer items-center gap-3 rounded-2xl bg-black/70 px-5 py-4 text-2xl font-black outline-none backdrop-blur focus:ring-4 focus:ring-rose-300'><ArrowLeft className='h-7 w-7' />返回</button>
|
||||
<div className='flex items-center gap-4 rounded-2xl bg-black/70 px-6 py-4 backdrop-blur'>
|
||||
{channel.logo ? <img src={getLogoUrl(channel.logo, source?.key)} alt='' className='h-12 w-12 rounded-xl object-contain' /> : <Radio className='h-10 w-10 text-rose-500' />}
|
||||
<div><div className='text-3xl font-black'>{channel.name}</div><div className='text-xl text-slate-300'>{source?.name} · {channel.group}</div></div>
|
||||
@@ -419,21 +525,21 @@ function TVLivePlayClient() {
|
||||
|
||||
{showPanel && (
|
||||
<aside data-tv-live-control className='absolute bottom-8 left-8 top-28 grid w-[720px] grid-cols-[220px_1fr] gap-4 rounded-[34px] border border-white/10 bg-slate-950/88 p-5 shadow-2xl shadow-black/70 backdrop-blur-2xl'>
|
||||
<div className='overflow-y-auto pr-2'>
|
||||
<div className='overflow-y-auto px-2 py-2'>
|
||||
{sources.length > 1 && (
|
||||
<>
|
||||
<h2 className='mb-3 text-2xl font-black'>直播源</h2>
|
||||
<div className='mb-5 space-y-3'>
|
||||
{sources.map((item) => <button key={item.key} onClick={() => switchSource(item)} className={`tv-focusable w-full cursor-pointer rounded-2xl px-4 py-4 text-left text-xl font-black outline-none focus:ring-4 focus:ring-rose-300 ${source?.key === item.key ? 'bg-rose-600' : 'bg-white/10'}`}>{item.name}</button>)}
|
||||
{sources.map((item) => <button key={item.key} onClick={() => switchSource(item)} className={`tv-focusable w-full cursor-pointer rounded-2xl px-4 py-4 text-left text-xl font-black outline-none focus:ring-4 focus:ring-inset focus:ring-rose-300 ${source?.key === item.key ? 'bg-rose-600' : 'bg-white/10'}`}>{item.name}</button>)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<h2 className='mb-4 text-2xl font-black'>分类</h2>
|
||||
<div className='space-y-3'>
|
||||
{groups.map((group) => <button key={group} onClick={() => setSelectedGroup(group)} className={`tv-focusable w-full cursor-pointer rounded-2xl px-4 py-4 text-left text-xl font-black outline-none focus:ring-4 focus:ring-rose-300 ${selectedGroup === group ? 'bg-rose-600' : 'bg-white/10'}`}>{group}</button>)}
|
||||
{groups.map((group) => <button key={group} onClick={() => setSelectedGroup(group)} className={`tv-focusable w-full cursor-pointer rounded-2xl px-4 py-4 text-left text-xl font-black outline-none focus:ring-4 focus:ring-inset focus:ring-rose-300 ${selectedGroup === group ? 'bg-rose-600' : 'bg-white/10'}`}>{group}</button>)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='overflow-y-auto pr-2'>
|
||||
<div className='overflow-y-auto px-2 py-2'>
|
||||
<h2 className='mb-4 flex items-center gap-2 text-2xl font-black'><Star className='h-6 w-6 text-rose-500' />频道</h2>
|
||||
<section className='mb-4 rounded-2xl bg-white/[0.06] p-4'>
|
||||
<h3 className='mb-3 flex items-center gap-2 text-xl font-black text-slate-100'><Clock className='h-5 w-5 text-rose-400' />节目单</h3>
|
||||
@@ -450,13 +556,28 @@ function TVLivePlayClient() {
|
||||
<div className='grid grid-cols-1 gap-3'>
|
||||
{filteredChannels.map((item) => {
|
||||
const absoluteIndex = channels.findIndex((c) => c.id === item.id) + 1;
|
||||
return <button key={item.id} ref={(el) => { channelButtonRefs.current[item.id] = el; }} onClick={() => switchChannel(item)} className={`tv-focusable flex min-h-16 cursor-pointer items-center gap-3 rounded-2xl px-4 py-3 text-left text-xl font-black outline-none focus:ring-4 focus:ring-rose-300 ${item.id === channel.id ? 'bg-rose-600' : 'bg-white/10'}`}>{item.logo ? <img src={getLogoUrl(item.logo, source?.key)} alt='' className='h-9 w-9 rounded-lg object-contain' /> : <Radio className='h-8 w-8 text-rose-400' />}<span className='min-w-12 text-slate-300'>#{absoluteIndex}</span><span className='line-clamp-1'>{item.name}</span></button>;
|
||||
return <button key={item.id} ref={(el) => { channelButtonRefs.current[item.id] = el; }} onClick={() => switchChannel(item)} className={`tv-focusable flex min-h-16 cursor-pointer items-center gap-3 rounded-2xl px-4 py-3 text-left text-xl font-black outline-none focus:ring-4 focus:ring-inset focus:ring-rose-300 ${item.id === channel.id ? 'bg-rose-600' : 'bg-white/10'}`}>{item.logo ? <img src={getLogoUrl(item.logo, source?.key)} alt='' className='h-9 w-9 rounded-lg object-contain' /> : <Radio className='h-8 w-8 text-rose-400' />}<span className='min-w-12 text-slate-300'>#{absoluteIndex}</span><span className='line-clamp-1'>{item.name}</span></button>;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
)}
|
||||
{digitBuffer && <div className='absolute right-10 top-32 rounded-3xl bg-black/75 px-7 py-5 text-5xl font-black text-white shadow-2xl'>频道 {digitBuffer}</div>}
|
||||
{channelHint && (
|
||||
<div className='absolute right-20 top-24 max-w-[520px] rounded-3xl bg-black/80 px-7 py-5 text-right text-white shadow-2xl backdrop-blur'>
|
||||
<div className='text-2xl font-black text-rose-200'>#{channelHint.number}</div>
|
||||
<div className='mt-1 line-clamp-1 text-4xl font-black'>{channelHint.name}</div>
|
||||
</div>
|
||||
)}
|
||||
{showVolumeHint && !showPanel && (
|
||||
<div className='absolute right-10 top-1/2 flex -translate-y-1/2 flex-col items-center gap-4 rounded-3xl bg-black/80 px-6 py-7 text-3xl font-black text-white shadow-2xl backdrop-blur'>
|
||||
{muted || volume <= 0 ? <VolumeX className='h-10 w-10' /> : <Volume2 className='h-10 w-10' />}
|
||||
<div className='relative h-56 w-4 overflow-hidden rounded-full bg-white/20'>
|
||||
<div className='absolute bottom-0 left-0 right-0 rounded-full bg-rose-600' style={{ height: `${Math.round((muted ? 0 : volume) * 100)}%` }} />
|
||||
</div>
|
||||
<div className='min-w-16 text-center'>{Math.round((muted ? 0 : volume) * 100)}</div>
|
||||
</div>
|
||||
)}
|
||||
<TVVirtualRemote />
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -44,6 +44,53 @@ function getFocusableElements() {
|
||||
.filter(isVisible);
|
||||
}
|
||||
|
||||
function getScrollableParent(element: HTMLElement) {
|
||||
let current = element.parentElement;
|
||||
while (current && current !== document.body) {
|
||||
const style = window.getComputedStyle(current);
|
||||
const canScrollY = /(auto|scroll)/.test(style.overflowY) && current.scrollHeight > current.clientHeight;
|
||||
const canScrollX = /(auto|scroll)/.test(style.overflowX) && current.scrollWidth > current.clientWidth;
|
||||
if (canScrollY || canScrollX) return current;
|
||||
current = current.parentElement;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function scrollIntoScrollableParent(element: HTMLElement) {
|
||||
const parent = getScrollableParent(element);
|
||||
if (!parent) return false;
|
||||
|
||||
const elementRect = element.getBoundingClientRect();
|
||||
const parentRect = parent.getBoundingClientRect();
|
||||
const padding = 16;
|
||||
|
||||
if (elementRect.top < parentRect.top + padding) {
|
||||
parent.scrollBy({
|
||||
top: elementRect.top - parentRect.top - padding,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
} else if (elementRect.bottom > parentRect.bottom - padding) {
|
||||
parent.scrollBy({
|
||||
top: elementRect.bottom - parentRect.bottom + padding,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
|
||||
if (elementRect.left < parentRect.left + padding) {
|
||||
parent.scrollBy({
|
||||
left: elementRect.left - parentRect.left - padding,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
} else if (elementRect.right > parentRect.right - padding) {
|
||||
parent.scrollBy({
|
||||
left: elementRect.right - parentRect.right + padding,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function focusElement(element: HTMLElement) {
|
||||
element.focus({ preventScroll: true });
|
||||
|
||||
@@ -67,6 +114,8 @@ function focusElement(element: HTMLElement) {
|
||||
window.scrollBy({ top: rect.bottom - safeBottom, behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
} else {
|
||||
scrollIntoScrollableParent(element);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user