From f9a3edb832ff4e77fae496b2e0cba06f645fcb4a Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <xiaohan.tian@gmail.com>
Date: Thu, 14 May 2026 21:55:59 -0700
Subject: [PATCH] fix: update default playhead fps to 30

---
 public/config.json                                    |  2 +-
 src/components/settings/Settings.css                  | 10 +++++-----
 src/components/settings/sections/BehaviorSettings.tsx |  4 ++--
 src/core/KGCore.ts                                    |  2 +-
 src/core/config/ConfigManager.ts                      |  2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/config.json b/public/config.json
index 015918a..88226c1 100644
--- a/public/config.json
+++ b/public/config.json
@@ -69,7 +69,7 @@
         }
     },
     "editor": {
-        "playhead_update_frequency": 10,
+        "playhead_update_frequency": 30,
         "spectrogram_height_resolution": 3
     },
     "chatbox": {
diff --git a/src/components/settings/Settings.css b/src/components/settings/Settings.css
index bf85606..03c66ce 100644
--- a/src/components/settings/Settings.css
+++ b/src/components/settings/Settings.css
@@ -299,17 +299,17 @@
 
 .settings-progress-track {
   width: 100%;
-  height: 10px;
+  height: 8px;
   border-radius: 999px;
   overflow: hidden;
-  background-color: #3a3a3a;
-  border: 1px solid #4a4a4a;
+  background-color: #1d1d1d;
+  border: 1px solid #3a3a3a;
 }
 
 .settings-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #5a9fd4 0%, #76c28f 100%);
-  transition: width 0.2s ease;
+  background: linear-gradient(90deg, #5a9fd4 0%, #7cc2f1 100%);
+  transition: width 0.15s linear;
 }
 
 /* Settings Help Links */
diff --git a/src/components/settings/sections/BehaviorSettings.tsx b/src/components/settings/sections/BehaviorSettings.tsx
index 892a30b..88f6d05 100644
--- a/src/components/settings/sections/BehaviorSettings.tsx
+++ b/src/components/settings/sections/BehaviorSettings.tsx
@@ -7,7 +7,7 @@ import {
 } from '../../../util/spectrogramUtil';
 
 const BehaviorSettings: React.FC = () => {
-  const [playheadUpdateFrequency, setPlayheadUpdateFrequency] = useState<number>(10);
+  const [playheadUpdateFrequency, setPlayheadUpdateFrequency] = useState<number>(30);
   const [spectrogramHeightResolution, setSpectrogramHeightResolution] = useState<SpectrogramHeightResolution>(3);
   const [chatboxDefaultOpen, setChatboxDefaultOpen] = useState<boolean>(true);
   const [audioLookaheadTime, setAudioLookaheadTime] = useState<string>('50');
@@ -28,7 +28,7 @@ const BehaviorSettings: React.FC = () => {
         await configManager.initialize();
       }
 
-      setPlayheadUpdateFrequency((configManager.get('editor.playhead_update_frequency') as number) ?? 10);
+      setPlayheadUpdateFrequency((configManager.get('editor.playhead_update_frequency') as number) ?? 30);
       setSpectrogramHeightResolution(
         normalizeSpectrogramHeightResolution(configManager.get('editor.spectrogram_height_resolution'))
       );
diff --git a/src/core/KGCore.ts b/src/core/KGCore.ts
index 43eabf0..06dbfe8 100644
--- a/src/core/KGCore.ts
+++ b/src/core/KGCore.ts
@@ -367,7 +367,7 @@ export class KGCore {
 
     // Get playhead update frequency from config (in fps)
     const configManager = ConfigManager.instance();
-    const updateFrequency = (configManager.get('editor.playhead_update_frequency') as number) ?? 10;
+    const updateFrequency = (configManager.get('editor.playhead_update_frequency') as number) ?? 30;
     const updateIntervalMs = 1000 / updateFrequency; // Convert fps to milliseconds
 
     this.playbackIntervalId = window.setInterval(() => {
diff --git a/src/core/config/ConfigManager.ts b/src/core/config/ConfigManager.ts
index 88d50b2..0b6a102 100644
--- a/src/core/config/ConfigManager.ts
+++ b/src/core/config/ConfigManager.ts
@@ -253,7 +253,7 @@ export class ConfigManager {
           },
         },
         editor: {
-          playhead_update_frequency: 10,
+          playhead_update_frequency: 30,
           spectrogram_height_resolution: 3
         },
         chatbox: {