From fd7d4c80831dc67c18098fcf2b5c0bcb69c1820e Mon Sep 17 00:00:00 2001
From: kuekhaoyang <kuekhaoyang@Gmail.com>
Date: Sat, 22 Nov 2025 11:45:45 +0800
Subject: [PATCH] feat: integrate MobileMoreMenu into RightControls and remove
 standalone volume and speed menus from MobileControls.

---
 components/player/mobile/FullControls.tsx     |  9 +++
 components/player/mobile/MobileControls.tsx   | 21 ------
 .../player/mobile/controls/RightControls.tsx  | 67 ++++++++++++++-----
 3 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/components/player/mobile/FullControls.tsx b/components/player/mobile/FullControls.tsx
index 5d1ae6d..ceac33d 100644
--- a/components/player/mobile/FullControls.tsx
+++ b/components/player/mobile/FullControls.tsx
@@ -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}
diff --git a/components/player/mobile/MobileControls.tsx b/components/player/mobile/MobileControls.tsx
index 32a9e6e..9cba182 100644
--- a/components/player/mobile/MobileControls.tsx
+++ b/components/player/mobile/MobileControls.tsx
@@ -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>
     );
diff --git a/components/player/mobile/controls/RightControls.tsx b/components/player/mobile/controls/RightControls.tsx
index 45ef73a..382c75c 100644
--- a/components/player/mobile/controls/RightControls.tsx
+++ b/components/player/mobile/controls/RightControls.tsx
@@ -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) => {