完善tv电视直播

src/app/api/proxy/logo/route.ts

@@ -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 });

src/app/tv/live/page.tsx

@@ -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>
             ))}

src/app/tv/live/play/page.tsx

@@ -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>
   );

src/components/tv/TVVirtualRemote.tsx

@@ -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);
   }
 }