From 1fdd4671d075456f3cca25be4604927ebc934c2e Mon Sep 17 00:00:00 2001
From: Luckyu_js <11670186+luckyu-js@user.noreply.gitee.com>
Date: Sat, 18 Jul 2026 11:59:44 +0800
Subject: [PATCH] Adjust video history carousel controls

---
 src/components/nodes/GenerateVideoNode.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/nodes/GenerateVideoNode.tsx b/src/components/nodes/GenerateVideoNode.tsx
index 6df04247..50f442e4 100644
--- a/src/components/nodes/GenerateVideoNode.tsx
+++ b/src/components/nodes/GenerateVideoNode.tsx
@@ -681,33 +681,33 @@ export function GenerateVideoNodeView({ id, data, selected, suppressEmptyStateDe
                 </svg>
               </div>
             )}
-            {/* Carousel controls - overlaid on video bottom */}
+            {/* Carousel controls sit at the vertical center so the player toolbar remains usable. */}
             {hasCarouselVideos && (
-              <div className="absolute bottom-0 left-0 right-0 flex items-center justify-center gap-2 py-1.5 bg-neutral-900/80">
+              <>
                 <button
                   onClick={handleCarouselPrevious}
                   disabled={isLoadingCarouselVideo}
-                  className="w-5 h-5 rounded hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center text-white/70 hover:text-white transition-colors"
+                  className="nodrag nopan absolute left-2 top-1/2 z-20 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full text-white/85 drop-shadow-[0_1px_3px_rgba(0,0,0,0.75)] transition-colors hover:bg-white/15 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
                   title="Previous video"
                 >
-                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
                   </svg>
                 </button>
-                <span className="text-[10px] text-white/70 min-w-[32px] text-center">
+                <span className="pointer-events-none absolute left-1/2 top-2 z-20 min-w-[36px] -translate-x-1/2 rounded-full bg-neutral-950/55 px-2 py-0.5 text-center text-[10px] text-white/75 shadow-lg backdrop-blur-sm">
                   {(nodeData.selectedVideoHistoryIndex || 0) + 1} / {(nodeData.videoHistory || []).length}
                 </span>
                 <button
                   onClick={handleCarouselNext}
                   disabled={isLoadingCarouselVideo}
-                  className="w-5 h-5 rounded hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center text-white/70 hover:text-white transition-colors"
+                  className="nodrag nopan absolute right-2 top-1/2 z-20 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full text-white/85 drop-shadow-[0_1px_3px_rgba(0,0,0,0.75)] transition-colors hover:bg-white/15 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
                   title="Next video"
                 >
-                  <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                   </svg>
                 </button>
-              </div>
+              </>
             )}
           </>
         ) : (