feat: added an option to control playhead animation fps

public/config.json

@@ -58,6 +58,9 @@
             "qua_len_1_16": "0"
         }
     },
+    "editor": {
+        "playhead_update_frequency": 10
+    },
     "chatbox": {
         "default_open": true
     },

src/components/settings/sections/BehaviorSettings.tsx

@@ -3,6 +3,7 @@ import { ConfigManager } from '../../../core/config/ConfigManager';
 import { KGAudioInterface } from '../../../core/audio-interface/KGAudioInterface';
 
 const BehaviorSettings: React.FC = () => {
+  const [playheadUpdateFrequency, setPlayheadUpdateFrequency] = useState<number>(10);
   const [chatboxDefaultOpen, setChatboxDefaultOpen] = useState<boolean>(true);
   const [audioLookaheadTime, setAudioLookaheadTime] = useState<string>('50');
   const [playbackDelay, setPlaybackDelay] = useState<string>('200');
@@ -19,6 +20,7 @@ const BehaviorSettings: React.FC = () => {
         await configManager.initialize();
       }
 
+      setPlayheadUpdateFrequency((configManager.get('editor.playhead_update_frequency') as number) ?? 10);
       setChatboxDefaultOpen((configManager.get('chatbox.default_open') as boolean) ?? true);
       const lookaheadTimeSeconds = (configManager.get('audio.lookahead_time') as number) ?? 0.05;
       setAudioLookaheadTime(((lookaheadTimeSeconds * 1000).toFixed(0)));
@@ -31,6 +33,13 @@ const BehaviorSettings: React.FC = () => {
   }, [configManager]);
 
   // Save configuration when values change
+  const handlePlayheadUpdateFrequencyChange = async (value: string) => {
+    const numValue = parseInt(value, 10);
+    setPlayheadUpdateFrequency(numValue);
+    await configManager.set('editor.playhead_update_frequency', numValue);
+    console.log(`Playhead update frequency changed to: ${numValue} fps`);
+  };
+
   const handleChatboxDefaultOpenChange = async (value: string) => {
     const boolValue = value === 'yes';
     setChatboxDefaultOpen(boolValue);
@@ -104,8 +113,30 @@ const BehaviorSettings: React.FC = () => {
       <div className="settings-section-header">
         <h3>Behavior</h3>
       </div>
-      
+
       <div className="settings-section-content">
+        <div className="settings-group">
+          <h4>Editor</h4>
+
+          <div className="settings-item">
+            <label className="settings-label">
+              Playhead Update Frequency (fps)
+            </label>
+            <select
+              className="settings-select"
+              value={playheadUpdateFrequency}
+              onChange={(e) => handlePlayheadUpdateFrequencyChange(e.target.value)}
+            >
+              <option value="10">10</option>
+              <option value="30">30</option>
+              <option value="60">60</option>
+            </select>
+            <div className="settings-help" style={{ fontSize: '12px', color: '#888', marginTop: '4px' }}>
+              Update frequency for the playhead animation during playback. Higher values (60 fps) provide smoother animation but use more CPU. Lower values (10 fps) are more efficient. Changes apply immediately without restart.
+            </div>
+          </div>
+        </div>
+
         <div className="settings-group">
           <h4>Chat Box</h4>
           

src/core/KGCore.ts

@@ -1,6 +1,5 @@
 import type { Selectable } from '../components/interfaces';
 import { KGProject } from './KGProject';
-import { PLAYING_CONSTANTS } from '../constants/uiConstants';
 import { KGAudioInterface } from './audio-interface/KGAudioInterface';
 import { ConfigManager } from './config/ConfigManager';
 import { KGMidiRegion } from './region/KGMidiRegion';
@@ -298,10 +297,15 @@ export class KGCore {
     if (this.playbackIntervalId !== null) {
       this.stopPlaybackUpdates(); // Clear any existing timer
     }
-    
+
+    // Get playhead update frequency from config (in fps)
+    const configManager = ConfigManager.instance();
+    const updateFrequency = (configManager.get('editor.playhead_update_frequency') as number) ?? 10;
+    const updateIntervalMs = 1000 / updateFrequency; // Convert fps to milliseconds
+
     this.playbackIntervalId = window.setInterval(() => {
       this.onPlaybackUpdate();
-    }, PLAYING_CONSTANTS.UPDATE_INTERVAL_MS);
+    }, updateIntervalMs);
   }
 
   private stopPlaybackUpdates(): void {

src/core/config/ConfigManager.ts

@@ -64,6 +64,9 @@ interface AppConfig {
       qua_len_1_16: string;
     };
   };
+  editor: {
+    playhead_update_frequency: number;
+  };
   chatbox: {
     default_open: boolean;
   };
@@ -225,6 +228,9 @@ export class ConfigManager {
             qua_len_1_16: '0'
           },
         },
+        editor: {
+          playhead_update_frequency: 10
+        },
         chatbox: {
           default_open: true
         },