quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
JSC
2025-09-03 20:22:59 +02:00
parent 1ba6f23999
commit 37c932fe75
3 changed files with 47 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/sequencer/SequencerCanvas.tsx
View File

@@ -54,8 +54,8 @@ function PlacedSoundItem({ sound, zoom, trackId, onRemove }: PlacedSoundItemProp
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
} : undefined
const width = sound.duration * zoom
const left = sound.startTime * zoom
const width = (sound.duration / 1000) * zoom // Convert ms to seconds for zoom calculation
const left = (sound.startTime / 1000) * zoom // Convert ms to seconds for zoom calculation
const formatTime = (seconds: number): string => {
const mins = Math.floor(seconds / 60)
@@ -84,7 +84,7 @@ function PlacedSoundItem({ sound, zoom, trackId, onRemove }: PlacedSoundItemProp
group transition-colors
${isDragging ? 'opacity-50 z-10' : 'z-0'}
`}
title={`${sound.name} (${formatTime(sound.duration)})`}
title={`${sound.name} (${formatTime(sound.duration / 1000)})`}
>
<div className="flex items-center gap-1 min-w-0 flex-1">
<Volume2 className="h-3 w-3 flex-shrink-0 text-primary" />
@@ -110,8 +110,8 @@ function PlacedSoundItem({ sound, zoom, trackId, onRemove }: PlacedSoundItemProp
}
function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem, dragOverInfo, onRemoveSound }: TrackRowProps) {
const totalWidth = duration * zoom
const playheadPosition = currentTime * zoom
const totalWidth = (duration / 1000) * zoom // Convert ms to seconds for zoom calculation
const playheadPosition = (currentTime / 1000) * zoom // Convert ms to seconds for zoom calculation
const { isOver, setNodeRef: setDropRef } = useDroppable({
id: `track-${track.id}`,
@@ -139,7 +139,7 @@ function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem,
>
{/* Grid lines for time markers */}
<div className="absolute inset-0 pointer-events-none">
{Array.from({ length: Math.ceil(duration) + 1 }).map((_, i) => (
{Array.from({ length: Math.ceil(duration / 1000) + 1 }).map((_, i) => (
<div
key={i}
className="absolute top-0 bottom-0 w-px bg-border/30"
@@ -147,7 +147,7 @@ function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem,
/>
))}
{/* Major grid lines every 10 seconds */}
{Array.from({ length: Math.floor(duration / 10) + 1 }).map((_, i) => (
{Array.from({ length: Math.floor(duration / 10000) + 1 }).map((_, i) => (
<div
key={`major-${i}`}
className="absolute top-0 bottom-0 w-px bg-border/60"
@@ -158,12 +158,14 @@ function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem,
{/* Precise drag preview */}
{draggedItem && dragOverInfo && dragOverInfo.trackId === track.id && (() => {
const soundDuration = draggedItem.type === 'sound'
? draggedItem.sound.duration / 1000 // Convert ms to seconds
: draggedItem.duration
const startTime = dragOverInfo.x / zoom
const endTime = startTime + soundDuration
const isValidPosition = startTime >= 0 && endTime <= duration
const soundDurationMs = draggedItem.type === 'sound'
? draggedItem.sound.duration // Already in ms
: draggedItem.duration // Already in ms
const soundDurationSeconds = soundDurationMs / 1000
const startTimeSeconds = dragOverInfo.x / zoom
const endTimeSeconds = startTimeSeconds + soundDurationSeconds
const durationSeconds = duration / 1000
const isValidPosition = startTimeSeconds >= 0 && endTimeSeconds <= durationSeconds
return (
<div
@@ -174,7 +176,7 @@ function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem,
}`}
style={{
left: `${Math.max(0, dragOverInfo.x)}px`,
width: `${Math.max(60, soundDuration * zoom)}px`,
width: `${Math.max(60, soundDurationSeconds * zoom)}px`,
}}
>
<div className={`text-xs truncate font-medium ${
@@ -224,7 +226,7 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
dragOverInfo,
onRemoveSound,
}, ref) => {
const totalWidth = duration * zoom
const totalWidth = (duration / 1000) * zoom // Convert ms to seconds for zoom calculation
const timelineRef = useRef<HTMLDivElement>(null)
const containerRef = useRef<HTMLDivElement>(null)
@@ -262,7 +264,7 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
}}
>
<div className="relative h-full" style={{ width: `${totalWidth}px` }}>
{Array.from({ length: Math.ceil(duration) + 1 }).map((_, i) => (
{Array.from({ length: Math.ceil(duration / 1000) + 1 }).map((_, i) => (
<div key={i} className="absolute top-0 bottom-0" style={{ left: `${i * zoom}px` }}>
{/* Time markers */}
{i % 5 === 0 && (
@@ -283,7 +285,7 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
{isPlaying && (
<div
className="absolute top-0 bottom-0 w-0.5 bg-red-500 z-30"
style={{ left: `${currentTime * zoom}px` }}
style={{ left: `${(currentTime / 1000) * zoom}px` }}
/>
)}
</div>

27
src/components/sequencer/TimelineControls.tsx
View File

@@ -6,9 +6,9 @@ import { Minus, Plus, ZoomIn, ZoomOut } from 'lucide-react'
import { useState } from 'react'
interface TimelineControlsProps {
duration: number
duration: number // in milliseconds
zoom: number
onDurationChange: (duration: number) => void
onDurationChange: (duration: number) => void // expects milliseconds
onZoomChange: (zoom: number) => void
minZoom: number
maxZoom: number
@@ -22,33 +22,34 @@ export function TimelineControls({
minZoom,
maxZoom,
}: TimelineControlsProps) {
const [durationInput, setDurationInput] = useState(duration.toString())
const durationInSeconds = duration / 1000
const [durationInput, setDurationInput] = useState(durationInSeconds.toString())
const handleDurationInputChange = (value: string) => {
setDurationInput(value)
const numValue = parseFloat(value)
if (!isNaN(numValue) && numValue > 0 && numValue <= 600) { // Max 10 minutes
onDurationChange(numValue)
onDurationChange(numValue * 1000) // Convert to milliseconds
}
}
const handleDurationInputBlur = () => {
const numValue = parseFloat(durationInput)
if (isNaN(numValue) || numValue <= 0) {
setDurationInput(duration.toString())
setDurationInput(durationInSeconds.toString())
}
}
const increaseDuration = () => {
const newDuration = Math.min(600, duration + 10)
onDurationChange(newDuration)
setDurationInput(newDuration.toString())
const newDurationSeconds = Math.min(600, durationInSeconds + 10)
onDurationChange(newDurationSeconds * 1000) // Convert to milliseconds
setDurationInput(newDurationSeconds.toString())
}
const decreaseDuration = () => {
const newDuration = Math.max(10, duration - 10)
onDurationChange(newDuration)
setDurationInput(newDuration.toString())
const newDurationSeconds = Math.max(5, durationInSeconds - 10)
onDurationChange(newDurationSeconds * 1000) // Convert to milliseconds
setDurationInput(newDurationSeconds.toString())
}
const increaseZoom = () => {
@@ -102,7 +103,7 @@ export function TimelineControls({
</Button>
</div>
<span className="text-sm text-muted-foreground">
seconds ({formatTime(duration)})
seconds ({formatTime(duration / 1000)})
</span>
</div>
@@ -148,7 +149,7 @@ export function TimelineControls({
{/* Timeline Info */}
<div className="flex items-center gap-4 ml-auto text-sm text-muted-foreground">
<div>
Total width: {Math.round(duration * zoom)}px
Total width: {Math.round((duration / 1000) * zoom)}px
</div>
</div>
</div>

28
src/pages/SequencerPage.tsx
View File

@@ -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 }
}