Skip to content

feat(timeline): implement track visibility toggle #681

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

Open
ThanhNguyxn wants to merge 3 commits into
base: main
Choose a base branch
from
+46 −13
Open

feat(timeline): implement track visibility toggle #681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
33b3e84
feat(timeline): implement track visibility toggle
ThanhNguyxn Jan 24, 2026
9ed9795
fix(a11y): wrap track controls in focusable buttons
ThanhNguyxn Jan 24, 2026
23ba85c
fix(a11y): add title elements to SVG icons
ThanhNguyxn Jan 24, 2026
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
46 changes: 34 additions & 12 deletions apps/web/src/components/editor/timeline/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
ZoomOut,
Bookmark,
Eye,
EyeOff,
VolumeOff,
Volume2,
} from "lucide-react";
Expand Down Expand Up @@ -84,6 +85,7 @@ export function Timeline() {
snappingEnabled,
setSelectedElements,
toggleTrackMute,
toggleTrackVisibility,
dragState,
} = useTimelineStore();
const { mediaFiles, addMediaFile } = useMediaStore();
Expand Down Expand Up @@ -777,18 +779,38 @@ export function Timeline() {
style={{ height: `${getTrackHeight(track.type)}px` }}
>
<div className="flex items-center justify-end flex-1 min-w-0 gap-2">
{track.muted ? (
<VolumeOff
className="h-4 w-4 text-destructive cursor-pointer"
onClick={() => toggleTrackMute(track.id)}
/>
) : (
<Volume2
className="h-4 w-4 text-muted-foreground cursor-pointer"
onClick={() => toggleTrackMute(track.id)}
/>
)}
<Eye className="h-4 w-4 text-muted-foreground" />
<button
type="button"
onClick={() => toggleTrackMute(track.id)}
aria-label={track.muted ? "Unmute track" : "Mute track"}
className="p-0.5 rounded hover:bg-muted/50 focus:outline-none focus:ring-1 focus:ring-ring"
>
{track.muted ? (
<VolumeOff className="h-4 w-4 text-destructive">
<title>Unmute track</title>
</VolumeOff>
) : (
<Volume2 className="h-4 w-4 text-muted-foreground">
<title>Mute track</title>
</Volume2>
)}
</button>
<button
type="button"
onClick={() => toggleTrackVisibility(track.id)}
aria-label={track.hidden ? "Show track" : "Hide track"}
className="p-0.5 rounded hover:bg-muted/50 focus:outline-none focus:ring-1 focus:ring-ring"
>
{track.hidden ? (
<EyeOff className="h-4 w-4 text-destructive">
<title>Show track</title>
</EyeOff>
) : (
<Eye className="h-4 w-4 text-muted-foreground">
<title>Hide track</title>
</Eye>
)}
</button>
<TrackIcon track={track} />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/editor/timeline/timeline-track.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1106,7 +1106,7 @@ export function TimelineTrackContent({

return (
<div
className="w-full h-full hover:bg-muted/20"
className={`w-full h-full hover:bg-muted/20 ${track.hidden ? "opacity-40" : ""}`}
onClick={(e) => {
// If clicking empty area (not on an element), deselect all elements
if (!(e.target as HTMLElement).closest(".timeline-element")) {
Expand Down
10 changes: 10 additions & 0 deletions apps/web/src/stores/timeline-store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ interface TimelineStore {
pushHistory?: boolean
) => void;
toggleTrackMute: (trackId: string) => void;
toggleTrackVisibility: (trackId: string) => void;
splitAndKeepLeft: (
trackId: string,
elementId: string,
Expand Down Expand Up @@ -871,6 +872,15 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
);
},

toggleTrackVisibility: (trackId) => {
get().pushHistory();
updateTracksAndSave(
get()._tracks.map((track) =>
track.id === trackId ? { ...track, hidden: !track.hidden } : track
)
);
},

updateTextElement: (trackId, elementId, updates) => {
get().pushHistory();
updateTracksAndSave(
Expand Down
1 change: 1 addition & 0 deletions apps/web/src/types/timeline.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ export interface TimelineTrack {
type: TrackType;
elements: TimelineElement[];
muted?: boolean;
hidden?: boolean;
isMain?: boolean;
}

Expand Down