diff --git a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx index 4ab4faf989..434717b137 100644 --- a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx +++ b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx @@ -195,6 +195,8 @@ export function ClipTrack( const hasMultipleRecordingSegments = () => editorInstance.recordings.segments.length > 1; + const split = () => editorState.timeline.interactMode === "split"; + return ( @@ -406,6 +408,7 @@ export function ClipTrack( onMouseDown={(downEvent) => { const start = segment.start; + if (split()) return; const maxSegmentDuration = editorInstance.recordings.segments[ segment.recordingSegment ?? 0 @@ -496,6 +499,7 @@ export function ClipTrack( onMouseDown={(downEvent) => { const end = segment.end; + if (split()) return; const maxSegmentDuration = editorInstance.recordings.segments[ segment.recordingSegment ?? 0 diff --git a/apps/desktop/src/routes/editor/Timeline/Track.tsx b/apps/desktop/src/routes/editor/Timeline/Track.tsx index 293431aca5..c5581ecc94 100644 --- a/apps/desktop/src/routes/editor/Timeline/Track.tsx +++ b/apps/desktop/src/routes/editor/Timeline/Track.tsx @@ -55,6 +55,7 @@ export function SegmentRoot( ) => void; }, ) { + const { editorState } = useEditorContext(); const translateX = useSegmentTranslateX(() => props.segment); const width = useSegmentWidth(() => props.segment); @@ -64,6 +65,8 @@ export function SegmentRoot( {...props} class={cx( "absolute overflow-hidden border rounded-xl inset-y-0", + editorState.timeline.interactMode === "split" && + "timeline-scissors-cursor", props.class, )} style={{ diff --git a/apps/desktop/src/routes/editor/Timeline/index.tsx b/apps/desktop/src/routes/editor/Timeline/index.tsx index e9ec6690c2..0a2d73c94d 100644 --- a/apps/desktop/src/routes/editor/Timeline/index.tsx +++ b/apps/desktop/src/routes/editor/Timeline/index.tsx @@ -243,7 +243,7 @@ export function Timeline() { style={{ left: `${TIMELINE_PADDING}px`, transform: `translateX(${ - (time() - transform().position) / secsPerPixel() + (time() - transform().position) / secsPerPixel() - 0.5 }px)`, }} > diff --git a/apps/desktop/src/routes/editor/Timeline/styles.css b/apps/desktop/src/routes/editor/Timeline/styles.css index 191e25f0d2..fcf1312df8 100644 --- a/apps/desktop/src/routes/editor/Timeline/styles.css +++ b/apps/desktop/src/routes/editor/Timeline/styles.css @@ -12,3 +12,14 @@ animation: wobble 1s ease-in-out infinite; will-change: transform; } + +.timeline-scissors-cursor { + cursor: + url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' shape-rendering='geometricPrecision'%3E%3Cg transform='rotate(90 10 10)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 2.5C3.15905 2.5 1.66666 3.99238 1.66666 5.83333C1.66666 7.67428 3.15905 9.16667 5 9.16667C5.85421 9.16667 6.63337 8.84536 7.22322 8.317L9.74771 10L7.22322 11.683C6.63337 11.1546 5.85421 10.8333 5 10.8333C3.15905 10.8333 1.66666 12.3257 1.66666 14.1667C1.66666 16.0076 3.15905 17.5 5 17.5C6.84095 17.5 8.33333 16.0076 8.33333 14.1667C8.33333 13.7822 8.26824 13.4129 8.14846 13.0692L18.6556 6.06446C18.1451 5.29858 17.1103 5.09162 16.3444 5.60221L11.25 8.99846L8.14846 6.93075C8.26824 6.5871 8.33333 6.21782 8.33333 5.83333C8.33333 3.99238 6.84095 2.5 5 2.5ZM3.33333 5.83333C3.33333 4.91286 4.07952 4.16667 5 4.16667C5.92047 4.16667 6.66666 4.91286 6.66666 5.83333C6.66666 6.75381 5.92047 7.5 5 7.5C4.07952 7.5 3.33333 6.75381 3.33333 5.83333ZM3.33333 14.1667C3.33333 13.2462 4.07952 12.5 5 12.5C5.92047 12.5 6.66666 13.2462 6.66666 14.1667C6.66666 15.0871 5.92047 15.8333 5 15.8333C4.07952 15.8333 3.33333 15.0871 3.33333 14.1667Z' fill='%23ffffff' stroke='%23000000' stroke-width='0.6'/%3E%3Cpath d='M16.3444 14.3978L12.0012 11.5023L13.5035 10.5008L18.6556 13.9355C18.1451 14.7014 17.1103 14.9084 16.3444 14.3978Z' fill='%23ffffff' stroke='%23000000' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E") + 12 12, + crosshair; +} + +.timeline-scissors-cursor * { + cursor: inherit; +}