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>