diff options
Diffstat (limited to 'apps/web/src/timeline')
| -rw-r--r-- | apps/web/src/timeline/components/timeline-element.tsx | 35 | ||||
| -rw-r--r-- | apps/web/src/timeline/controllers/drag-drop-controller.ts | 5 |
2 files changed, 34 insertions, 6 deletions
diff --git a/apps/web/src/timeline/components/timeline-element.tsx b/apps/web/src/timeline/components/timeline-element.tsx index 5c412435..70161054 100644 --- a/apps/web/src/timeline/components/timeline-element.tsx +++ b/apps/web/src/timeline/components/timeline-element.tsx @@ -68,6 +68,7 @@ import { ScissorIcon, Delete02Icon, Copy01Icon, + Edit02Icon, ViewIcon, ViewOffSlashIcon, VolumeHighIcon, @@ -80,7 +81,7 @@ import { } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { uppercase } from "@/utils/string"; -import { useMemo, type ComponentProps, type ReactNode } from "react"; +import { useMemo, useState, type ComponentProps, type ReactNode } from "react"; import type { SelectedKeyframeRef, ElementKeyframe } from "@/animation/types"; import { cn } from "@/utils/ui"; import { usePropertiesStore } from "@/components/editor/panels/properties/stores/properties-store"; @@ -92,6 +93,7 @@ import { getExpansionHeight, type ExpandedRow, } from "./expanded-layout"; +import { RenameDialog } from "@/components/editor/rename-dialog"; const KEYFRAME_INDICATOR_MIN_WIDTH_PX = 40; const ELEMENT_RING_WIDTH_PX = 1.5; @@ -233,7 +235,9 @@ export function TimelineElement({ isDropTarget = false, }: TimelineElementProps) { const mediaAssets = useEditor((e) => e.media.getAssets()); + const editor = useEditor(); const { selectedElements } = useElementSelection(); + const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false); const requestRevealMedia = useAssetsPanelStore((s) => s.requestRevealMedia); const { renderElement } = useElementPreview({ trackId: track.id, @@ -348,6 +352,19 @@ export function TimelineElement({ : "Extract audio"; const isElementSourceAudioSeparated = element.type === "video" && isSourceAudioSeparated({ element }); + const handleRenameConfirm = (newName: string) => { + editor.timeline.updateElements({ + updates: [ + { + trackId: track.id, + elementId: element.id, + patch: { name: newName }, + }, + ], + }); + setIsRenameDialogOpen(false); + }; + const hasKeyframes = elementKeyframes.length > 0; const expansionHeight = getExpansionHeight({ rows: expandedRows }); const baseTrackHeight = getTrackHeight({ type: track.type }); @@ -425,6 +442,15 @@ export function TimelineElement({ </div> </ContextMenuTrigger> <ContextMenuContent className="w-64"> + <ContextMenuItem + icon={<HugeiconsIcon icon={Edit02Icon} />} + onClick={(event: React.MouseEvent) => { + event.stopPropagation(); + setIsRenameDialogOpen(true); + }} + > + Rename + </ContextMenuItem> <ActionMenuItem action="split" icon={<HugeiconsIcon icon={ScissorIcon} />} @@ -509,6 +535,13 @@ export function TimelineElement({ /> </ContextMenuContent> </ContextMenu> + <RenameDialog + isOpen={isRenameDialogOpen} + onOpenChange={setIsRenameDialogOpen} + onConfirm={handleRenameConfirm} + currentName={element.name} + title="Rename clip" + /> </PixelsPerSecondContext.Provider> ); } diff --git a/apps/web/src/timeline/controllers/drag-drop-controller.ts b/apps/web/src/timeline/controllers/drag-drop-controller.ts index 6c48428a..a419101f 100644 --- a/apps/web/src/timeline/controllers/drag-drop-controller.ts +++ b/apps/web/src/timeline/controllers/drag-drop-controller.ts @@ -15,7 +15,6 @@ import { buildEffectElement, } from "@/timeline/element-utils"; import { AddTrackCommand, InsertElementCommand } from "@/commands/timeline"; -import { effectsRegistry } from "@/effects"; import { BatchCommand } from "@/commands"; import type { Command } from "@/commands/base-command"; import { computeDropTarget } from "@/timeline/components/drop-target"; @@ -471,10 +470,6 @@ export class DragDropController { return; } - if (effectsRegistry.get(dragData.effectType).supportsStandalone === false) { - return; - } - const element = buildEffectElement({ effectType: dragData.effectType, startTime: target.xPosition, |