Ma/LunaTV
1
0
Fork 0
mirror of https://github.com/MoonTechLab/LunaTV.git synced 2026-02-22 02:24:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: use native seek button style

Browse Source
This commit is contained in:
shinya
2025-07-03 18:42:54 +08:00
parent a618ecd99c
commit f946b6e265
1 changed files with 18 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,8 +8,13 @@ import {
isHLSProvider,
MediaPlayer,
MediaProvider,
SeekButton,
} from '@vidstack/react';
import { AirPlayIcon } from '@vidstack/react/icons';
import {
AirPlayIcon,
SeekBackward10Icon,
SeekForward10Icon,
} from '@vidstack/react/icons';
import {
defaultLayoutIcons,
DefaultVideoLayout,
@@ -1389,34 +1394,6 @@ function PlayPageClient() {
airPlayButton: null, // 隐藏默认 AirPlay 按钮
beforeCurrentTime: (
<>
{/* 快进 10 秒按钮 - 根据播放器尺寸决定显隐 */}
{showSkipButtons && (
<button
className='vds-button mr-2'
onClick={() => {
if (playerRef.current) {
const p = playerRef.current;
const newTime = Math.min(
(p.currentTime || 0) + 10,
p.duration || 0
);
p.currentTime = newTime;
}
}}
aria-label='Fast Forward 10 Seconds'
>
<svg
className='vds-icon'
viewBox='0 0 32 32'
xmlns='http://www.w3.org/2000/svg'
>
{/* 双三角快进图标 */}
<path d='M6 24l10-8L6 8v16z' fill='currentColor' />
<path d='M18 24l10-8-10-8v16z' fill='currentColor' />
</svg>
</button>
)}
{totalEpisodes > 1 && (
// 下一集按钮放在时间显示前
<button
@@ -1467,27 +1444,18 @@ function PlayPageClient() {
beforePlayButton: (
<>
{showSkipButtons && (
<button
className='vds-button mr-2'
onClick={() => {
if (playerRef.current) {
const p = playerRef.current;
const newTime = Math.max(0, (p.currentTime || 0) - 10);
p.currentTime = newTime;
}
}}
aria-label='Rewind 10 Seconds'
>
<svg
className='vds-icon'
viewBox='0 0 32 32'
xmlns='http://www.w3.org/2000/svg'
>
{/* 双三角快退图标 */}
<path d='M26 24l-10-8 10-8v16z' fill='currentColor' />
<path d='M14 24l-10-8 10-8v16z' fill='currentColor' />
</svg>
</button>
<SeekButton className='vds-button' seconds={10}>
<SeekBackward10Icon className='vds-icon' />
</SeekButton>
)}
</>
),
afterPlayButton: (
<>
{showSkipButtons && (
<SeekButton className='vds-button' seconds={10}>
<SeekForward10Icon className='vds-icon' />
</SeekButton>
)}
</>
),