feat: integrate MobileMoreMenu into RightControls and remove standalone volume and speed menus from MobileControls.

This commit is contained in:
kuekhaoyang
2025-11-22 11:45:45 +08:00
parent 87ca27e16f
commit fd7d4c8083
3 changed files with 61 additions and 36 deletions
@@ -7,6 +7,7 @@ interface FullControlsProps {
isFullscreen: boolean;
showVolumeMenu: boolean;
showSpeedMenu: boolean;
showMoreMenu: boolean;
isMuted: boolean;
volume: number;
playbackRate: number;
@@ -25,6 +26,7 @@ interface FullControlsProps {
onToggleMute: () => void;
onVolumeChange: (volume: number) => void;
onSpeedChange: (speed: number) => void;
onCopyLink: () => void;
iconSize: number;
buttonPadding: string;
controlsGap: string;
@@ -36,6 +38,7 @@ export function FullControls({
isFullscreen,
showVolumeMenu,
showSpeedMenu,
showMoreMenu,
isMuted,
volume,
playbackRate,
@@ -54,6 +57,7 @@ export function FullControls({
onToggleMute,
onVolumeChange,
onSpeedChange,
onCopyLink,
iconSize,
buttonPadding,
controlsGap,
@@ -85,12 +89,17 @@ export function FullControls({
<RightControls
playbackRate={playbackRate}
showSpeedMenu={showSpeedMenu}
showMoreMenu={showMoreMenu}
onToggleSpeedMenu={onToggleSpeedMenu}
speeds={speeds}
onSpeedChange={onSpeedChange}
isPiPSupported={isPiPSupported}
onTogglePiP={onTogglePiP}
onToggleMoreMenu={onToggleMoreMenu}
onToggleVolumeMenu={onToggleVolumeMenu}
onCopyLink={onCopyLink}
isMuted={isMuted}
volume={volume}
isFullscreen={isFullscreen}
onToggleFullscreen={onToggleFullscreen}
iconSize={iconSize}
@@ -1,7 +1,5 @@
import React from 'react';
import { MobileProgressBar } from './MobileProgressBar';
import { MobileVolumeMenu } from './MobileVolumeMenu';
import { MobileSpeedMenu } from './MobileSpeedMenu';
import { CompactControls } from './CompactControls';
import { FullControls } from './FullControls';
@@ -103,25 +101,6 @@ export function MobileControls(props: MobileControlsProps) {
textSize={textSize}
/>
)}
<MobileVolumeMenu
showVolumeMenu={showVolumeMenu}
isCompactLayout={true}
isMuted={isMuted}
volume={volume}
onToggleMute={onToggleMute}
onVolumeChange={onVolumeChange}
onClose={onToggleVolumeMenu}
/>
<MobileSpeedMenu
showSpeedMenu={showSpeedMenu}
isCompactLayout={true}
playbackRate={playbackRate}
speeds={speeds}
onSpeedChange={onSpeedChange}
onClose={onToggleSpeedMenu}
/>
</div>
</div>
);
@@ -1,16 +1,22 @@
import React from 'react';
import { Icons } from '@/components/ui/Icon';
import { MobileSpeedMenu } from '../MobileSpeedMenu';
import { MobileMoreMenu } from '../MobileMoreMenu';
interface RightControlsProps {
playbackRate: number;
showSpeedMenu: boolean;
showMoreMenu: boolean;
onToggleSpeedMenu: () => void;
speeds: number[];
onSpeedChange: (speed: number) => void;
isPiPSupported: boolean;
onTogglePiP: () => void;
onToggleMoreMenu: () => void;
onToggleVolumeMenu: () => void;
onCopyLink: () => void;
isMuted: boolean;
volume: number;
isFullscreen: boolean;
onToggleFullscreen: () => void;
iconSize: number;
@@ -22,12 +28,17 @@ interface RightControlsProps {
export function RightControls({
playbackRate,
showSpeedMenu,
showMoreMenu,
onToggleSpeedMenu,
speeds,
onSpeedChange,
isPiPSupported,
onTogglePiP,
onToggleMoreMenu,
onToggleVolumeMenu,
onCopyLink,
isMuted,
volume,
isFullscreen,
onToggleFullscreen,
iconSize,
@@ -74,21 +85,47 @@ export function RightControls({
</button>
)}
<button
onClick={(e) => {
e.stopPropagation();
onToggleMoreMenu();
}}
className={`btn-icon ${buttonPadding} flex-shrink-0 touch-manipulation`}
aria-label="更多"
style={{ WebkitTapHighlightColor: 'transparent' }}
>
<svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
<div className="relative z-[60]">
<button
onClick={(e) => {
e.stopPropagation();
onToggleMoreMenu();
}}
className={`btn-icon ${buttonPadding} flex-shrink-0 touch-manipulation`}
aria-label="更多"
style={{ WebkitTapHighlightColor: 'transparent' }}
>
<svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="12" cy="12" r="1" />
<circle cx="12" cy="5" r="1" />
<circle cx="12" cy="19" r="1" />
</svg>
</button>
<MobileMoreMenu
showMoreMenu={showMoreMenu}
isMuted={isMuted}
volume={volume}
playbackRate={playbackRate}
isPiPSupported={isPiPSupported}
onCopyLink={() => {
onToggleMoreMenu();
onCopyLink();
}}
onToggleVolumeMenu={() => {
onToggleMoreMenu();
onToggleVolumeMenu();
}}
onToggleSpeedMenu={() => {
onToggleMoreMenu();
onToggleSpeedMenu();
}}
onTogglePiP={() => {
onToggleMoreMenu();
onTogglePiP();
}}
/>
</div>
<button
onClick={(e) => {