Skip to content

desktop: multi-select in clip and scenes track & more #1295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ameer2468 merged 6 commits into from
Oct 27, 2025
Merged

desktop: multi-select in clip and scenes track & more #1295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e73ecc5
support for multi clip selection and open editor when pressing on pre…
ameer2468 Oct 27, 2025
380bad1
Update ClipTrack.tsx
ameer2468 Oct 27, 2025
2a153d0
cleanup
ameer2468 Oct 27, 2025
ca6ead2
add range selection for zoom
ameer2468 Oct 27, 2025
4ecff30
make sure status is complete before opening
ameer2468 Oct 27, 2025
a8cd0ba
improve check
ameer2468 Oct 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ export default function Recordings() {
No {activeTab()} recordings
</p>
</Show>
<ul class="p-4 flex flex-col gap-5 w-full text-[--text-primary]">
<ul class="flex flex-col w-full text-[--text-primary]">
<For each={filteredRecordings()}>
{(recording) => (
<RecordingItem
Expand Down Expand Up @@ -219,9 +219,23 @@ function RecordingItem(props: {
mode().charAt(0).toUpperCase() + mode().slice(1);

const queryClient = useQueryClient();
const studioCompleteCheck = () =>
mode() === "studio" && props.recording.meta.status.status === "Complete";

return (
<li class="flex flex-row justify-between [&:not(:last-child)]:border-b [&:not(:last-child)]:pb-5 [&:not(:last-child)]:border-gray-3 items-center w-full transition-colors duration-200 hover:bg-gray-2">
<li
onClick={() => {
if (studioCompleteCheck()) {
props.onOpenEditor();
}
}}
class={cx(
"flex flex-row justify-between p-3 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-gray-3 items-center w-full transition-colors duration-200",
studioCompleteCheck()
? "cursor-pointer hover:bg-gray-3"
: "cursor-default",
)}
>
<div class="flex gap-5 items-center">
<Show
when={imageExists()}
Expand All @@ -242,7 +256,7 @@ function RecordingItem(props: {
<div
class={cx(
"px-2 py-0.5 flex items-center gap-1.5 font-medium text-[11px] text-gray-12 rounded-full w-fit",
mode() === "instant" ? "bg-blue-100" : "bg-gray-3",
mode() === "instant" ? "bg-blue-100" : "bg-gray-4",
)}
>
{mode() === "instant" ? (
Expand Down
134 changes: 114 additions & 20 deletions apps/desktop/src/routes/editor/ConfigSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,8 +487,8 @@ export function ConfigSidebar() {
}
/>
<Show when={project.cursor.hideWhenIdle}>
<Subfield name="Inactivity Delay" class="items-center gap-4">
<div class="flex items-center gap-3 flex-1">
<Subfield name="Inactivity Delay" class="gap-4 items-center">
<div class="flex flex-1 gap-3 items-center">
<Slider
class="flex-1"
value={[cursorIdleDelay()]}
Expand Down Expand Up @@ -734,37 +734,131 @@ export function ConfigSidebar() {
const sceneSelection = selection();
if (sceneSelection.type !== "scene") return;

const segment =
project.timeline?.sceneSegments?.[sceneSelection.index];
if (!segment) return;
const segments = sceneSelection.indices
.map((idx) => ({
segment: project.timeline?.sceneSegments?.[idx],
index: idx,
}))
.filter((s) => s.segment !== undefined);

return { selection: sceneSelection, segment };
if (segments.length === 0) return;
return { selection: sceneSelection, segments };
})()}
>
{(value) => (
<SceneSegmentConfig
segment={value().segment}
segmentIndex={value().selection.index}
/>
<Show
when={value().segments.length > 1}
fallback={
<SceneSegmentConfig
segment={value().segments[0].segment!}
segmentIndex={value().segments[0].index}
/>
}
>
<div class="space-y-4">
<div class="flex flex-row justify-between items-center">
<div class="flex gap-2 items-center">
<EditorButton
onClick={() =>
setEditorState("timeline", "selection", null)
}
leftIcon={<IconLucideCheck />}
>
Done
</EditorButton>
<span class="text-sm text-gray-10">
{value().segments.length} scene{" "}
{value().segments.length === 1
? "segment"
: "segments"}{" "}
selected
</span>
</div>
<EditorButton
variant="danger"
onClick={() => {
const indices = value().selection.indices;

// Delete segments in reverse order to maintain indices
[...indices]
.sort((a, b) => b - a)
.forEach((idx) => {
projectActions.deleteSceneSegment(idx);
});
}}
leftIcon={<IconCapTrash />}
>
Delete
</EditorButton>
</div>
</div>
</Show>
)}
</Show>
<Show
when={(() => {
const clipSegment = selection();
if (clipSegment.type !== "clip") return;
const clipSelection = selection();
if (clipSelection.type !== "clip") return;

const segment =
project.timeline?.segments?.[clipSegment.index];
if (!segment) return;
const segments = clipSelection.indices
.map((idx) => ({
segment: project.timeline?.segments?.[idx],
index: idx,
}))
.filter((s) => s.segment !== undefined);

return { selection: clipSegment, segment };
if (segments.length === 0) return;
return { selection: clipSelection, segments };
})()}
>
{(value) => (
<ClipSegmentConfig
segment={value().segment}
segmentIndex={value().selection.index}
/>
<Show
when={value().segments.length > 1}
fallback={
<ClipSegmentConfig
segment={value().segments[0].segment!}
segmentIndex={value().segments[0].index}
/>
}
>
<div class="space-y-4">
<div class="flex flex-row justify-between items-center">
<div class="flex gap-2 items-center">
<EditorButton
onClick={() =>
setEditorState("timeline", "selection", null)
}
leftIcon={<IconLucideCheck />}
>
Done
</EditorButton>
<span class="text-sm text-gray-10">
{value().segments.length} clip{" "}
{value().segments.length === 1
? "segment"
: "segments"}{" "}
selected
</span>
</div>
<EditorButton
variant="danger"
onClick={() => {
const indices = value().selection.indices;

// Delete segments in reverse order to maintain indices
[...indices]
.sort((a, b) => b - a)
.forEach((idx) => {
projectActions.deleteClipSegment(idx);
});
}}
leftIcon={<IconCapTrash />}
>
Delete
</EditorButton>
</div>
</div>
</Show>
)}
</Show>
</Suspense>
Expand Down
85 changes: 76 additions & 9 deletions apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,9 @@ export function ClipTrack(
(s) => s.start === segment.start && s.end === segment.end,
);

return segmentIndex === selection.index;
if (segmentIndex === undefined || segmentIndex === -1) return false;

return selection.indices.includes(segmentIndex);
});

const micWaveform = () => {
Expand Down Expand Up @@ -371,16 +373,81 @@ export function ClipTrack(
projectActions.splitClipSegment(prevDuration() + splitTime);
} else {
createRoot((dispose) => {
createEventListener(e.currentTarget, "mouseup", (e) => {
dispose();
createEventListener(
e.currentTarget,
"mouseup",
(upEvent) => {
dispose();

setEditorState("timeline", "selection", {
type: "clip",
index: i(),
});
const currentIndex = i();
const selection = editorState.timeline.selection;
const isMac =
navigator.platform.toUpperCase().indexOf("MAC") >=
0;
const isMultiSelect = isMac
? upEvent.metaKey
: upEvent.ctrlKey;
const isRangeSelect = upEvent.shiftKey;

props.handleUpdatePlayhead(e);
});
if (
isRangeSelect &&
selection &&
selection.type === "clip"
) {
// Range selection: select from last selected to current
const existingIndices = selection.indices;
const lastIndex =
existingIndices[existingIndices.length - 1];
const start = Math.min(lastIndex, currentIndex);
const end = Math.max(lastIndex, currentIndex);
const rangeIndices = Array.from(
{ length: end - start + 1 },
(_, idx) => start + idx,
);

setEditorState("timeline", "selection", {
type: "clip" as const,
indices: rangeIndices,
});
} else if (
isMultiSelect &&
selection &&
selection.type === "clip"
) {
// Multi-select: toggle current index
const existingIndices = selection.indices;

if (existingIndices.includes(currentIndex)) {
// Remove from selection
const newIndices = existingIndices.filter(
(idx) => idx !== currentIndex,
);
if (newIndices.length > 0) {
setEditorState("timeline", "selection", {
type: "clip" as const,
indices: newIndices,
});
} else {
setEditorState("timeline", "selection", null);
}
} else {
// Add to selection
setEditorState("timeline", "selection", {
type: "clip" as const,
indices: [...existingIndices, currentIndex],
});
}
} else {
// Normal single selection
setEditorState("timeline", "selection", {
type: "clip" as const,
indices: [currentIndex],
});
}

props.handleUpdatePlayhead(upEvent);
},
);
});
}
}}
Expand Down
Loading