feat: convert duration and startTime to milliseconds in Sequencer components for consistency

src/pages/SequencerPage.tsx

@@ -15,20 +15,20 @@ export interface PlacedSound {
   id: string
   soundId: number
   name: string
-  duration: number // in seconds
-  startTime: number // in seconds
+  duration: number // in milliseconds
+  startTime: number // in milliseconds
   trackId: string
 }
 
 interface SequencerState {
   tracks: Track[]
-  duration: number
-  zoom: number
-  currentTime: number
+  duration: number // in milliseconds
+  zoom: number // pixels per second
+  currentTime: number // in milliseconds
   isPlaying: boolean
 }
 
-const INITIAL_DURATION = 30 // 30 seconds
+const INITIAL_DURATION = 30000 // 30 seconds in milliseconds
 const INITIAL_ZOOM = 40 // 40 pixels per second
 const MIN_ZOOM = 10
 const MAX_ZOOM = 200
@@ -113,15 +113,15 @@ export function SequencerPage() {
 
     // Handle sound drop from library to track
     if (dragData?.type === 'sound' && overData?.type === 'track') {
-      // Use precise drop position if available
+      // Use precise drop position if available (convert from pixels to milliseconds)
       let startTime = 0
       if (dragOverInfo && dragOverInfo.trackId === overData.trackId) {
-        startTime = Math.max(0, dragOverInfo.x / state.zoom)
+        startTime = Math.max(0, (dragOverInfo.x / state.zoom) * 1000) // Convert seconds to milliseconds
       }
 
-      const soundDuration = dragData.sound.duration / 1000 // Convert from ms to seconds
+      const soundDuration = dragData.sound.duration // Already in milliseconds
       
-      // Restrict placement to within track duration
+      // Restrict placement to within track duration (all in milliseconds)
       const maxStartTime = Math.max(0, state.duration - soundDuration)
       startTime = Math.min(startTime, maxStartTime)
 
@@ -149,13 +149,13 @@ export function SequencerPage() {
 
     // Handle moving placed sounds within tracks
     if (dragData?.type === 'placed-sound' && overData?.type === 'track') {
-      // Use precise drop position if available
+      // Use precise drop position if available (convert from pixels to milliseconds)
       let startTime = dragData.startTime || 0
       if (dragOverInfo && dragOverInfo.trackId === overData.trackId) {
-        startTime = Math.max(0, dragOverInfo.x / state.zoom)
+        startTime = Math.max(0, (dragOverInfo.x / state.zoom) * 1000) // Convert seconds to milliseconds
       }
 
-      // Restrict placement to within track duration
+      // Restrict placement to within track duration (all in milliseconds)
       const maxStartTime = Math.max(0, state.duration - dragData.duration)
       startTime = Math.min(startTime, maxStartTime)
 
@@ -287,7 +287,7 @@ export function SequencerPage() {
     if (state.isPlaying) {
       const interval = setInterval(() => {
         setState(prev => {
-          const newTime = prev.currentTime + 0.1
+          const newTime = prev.currentTime + 100 // Add 100ms every 100ms
           if (newTime >= prev.duration) {
             return { ...prev, currentTime: prev.duration, isPlaying: false }
           }