From 82993e368b9b250c568c80ab8181e68fa157a4cb Mon Sep 17 00:00:00 2001
From: kuekhaoyang <kuekhaoyang@Gmail.com>
Date: Thu, 19 Feb 2026 21:11:19 +0800
Subject: [PATCH] feat: Improve UI responsiveness for player controls,
 settings, and import tabs, and update `lucide-react` to `0.575.0`.

---
 components/player/desktop/DesktopControls.tsx  |  7 +++++--
 components/settings/PlayerSettings.tsx         |  4 ++--
 components/settings/import/ImportModalTabs.tsx |  2 +-
 package-lock.json                              | 12 ++++++------
 package.json                                   |  4 ++--
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/components/player/desktop/DesktopControls.tsx b/components/player/desktop/DesktopControls.tsx
index 7d894d6..ace3e6f 100644
--- a/components/player/desktop/DesktopControls.tsx
+++ b/components/player/desktop/DesktopControls.tsx
@@ -48,9 +48,12 @@ export function DesktopControls(props: DesktopControlsProps) {
 
     return (
         <div
-            className={`absolute bottom-0 left-0 right-0 z-30 transition-all duration-300 ${showControls ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'
+            className={`absolute bottom-0 left-0 right-0 z-30 transition-all duration-300 ${showControls ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2 pointer-events-none'
                 }`}
-            style={{ pointerEvents: showControls ? 'auto' : 'none' }}
+            style={{
+                pointerEvents: showControls ? 'auto' : 'none',
+                visibility: showControls ? 'visible' : 'hidden',
+            }}
         >
             {/* Progress Bar */}
             <DesktopProgressBar
diff --git a/components/settings/PlayerSettings.tsx b/components/settings/PlayerSettings.tsx
index 9a51d4c..9dae988 100644
--- a/components/settings/PlayerSettings.tsx
+++ b/components/settings/PlayerSettings.tsx
@@ -182,7 +182,7 @@ export function PlayerSettings({
                             <label className="block text-sm font-medium text-[var(--text-color)] mb-2">
                                 弹幕字号
                             </label>
-                            <div className="flex gap-2">
+                            <div className="flex gap-2 flex-wrap">
                                 {DANMAKU_FONT_SIZES.map((size) => (
                                     <button
                                         key={size}
@@ -203,7 +203,7 @@ export function PlayerSettings({
                             <label className="block text-sm font-medium text-[var(--text-color)] mb-2">
                                 弹幕显示区域
                             </label>
-                            <div className="flex gap-2">
+                            <div className="flex gap-2 flex-wrap">
                                 {DANMAKU_DISPLAY_AREAS.map(({ value, label }) => (
                                     <button
                                         key={value}
diff --git a/components/settings/import/ImportModalTabs.tsx b/components/settings/import/ImportModalTabs.tsx
index 3816a3a..65b29d0 100644
--- a/components/settings/import/ImportModalTabs.tsx
+++ b/components/settings/import/ImportModalTabs.tsx
@@ -15,7 +15,7 @@ export function ImportModalTabs({ activeTab, onTabChange }: ImportModalTabsProps
 
     return (
         <div className="relative mb-6">
-            <div className="flex border-b border-[var(--glass-border)] relative">
+            <div className="flex border-b border-[var(--glass-border)] relative overflow-x-auto whitespace-nowrap scrollbar-hide w-full">
                 {tabs.map((tab) => (
                     <button
                         key={tab.id}
diff --git a/package-lock.json b/package-lock.json
index 48d9b3b..f2ae524 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,19 @@
 {
   "name": "kvideo",
-  "version": "4.4.4",
+  "version": "4.4.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kvideo",
-      "version": "4.4.4",
+      "version": "4.4.5",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@vercel/analytics": "^1.6.1",
         "hls.js": "^1.6.15",
-        "lucide-react": "^0.574.0",
+        "lucide-react": "^0.575.0",
         "next": "16.1.6",
         "react": "19.2.4",
         "react-dom": "19.2.4",
@@ -7230,9 +7230,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.574.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.574.0.tgz",
-      "integrity": "sha512-dJ8xb5juiZVIbdSn3HTyHsjjIwUwZ4FNwV0RtYDScOyySOeie1oXZTymST6YPJ4Qwt3Po8g4quhYl4OxtACiuQ==",
+      "version": "0.575.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.575.0.tgz",
+      "integrity": "sha512-VuXgKZrk0uiDlWjGGXmKV6MSk9Yy4l10qgVvzGn2AWBx1Ylt0iBexKOAoA6I7JO3m+M9oeovJd3yYENfkUbOeg==",
       "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
diff --git a/package.json b/package.json
index 3d82207..29030d7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kvideo",
-  "version": "4.4.4",
+  "version": "4.4.5",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -15,7 +15,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@vercel/analytics": "^1.6.1",
     "hls.js": "^1.6.15",
-    "lucide-react": "^0.574.0",
+    "lucide-react": "^0.575.0",
     "next": "16.1.6",
     "react": "19.2.4",
     "react-dom": "19.2.4",