mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-15 00:33:44 +08:00
feat: integrate MobileMoreMenu into RightControls and remove standalone volume and speed menus from MobileControls.
This commit is contained in:
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user