summaryrefslogtreecommitdiff
path: root/apps/web/src/components/editor/panels/assets/views/assets.tsx
diff options
context:
space:
mode:
authorcashmere <cashmere@autistici.org>2026-08-09 02:37:37 +0200
committercashmere <cashmere@autistici.org>2026-08-09 02:37:37 +0200
commitc555f1eaebff90749bdc543592cfa80a060b29e2 (patch)
treee6a04adb212871063653b66c17eb1b8c17c7d22f /apps/web/src/components/editor/panels/assets/views/assets.tsx
parentdf82306a86d14bca0149e6d756ba82b75659af43 (diff)
downloadopencut-c555f1eaebff90749bdc543592cfa80a060b29e2.tar.gz
feat: lens effects tab, standalone motion effects, clip/asset rename, preview popout
- New Lens category in the assets panel: Blur, Motion Blur, Zoom In/Out, Pan x4, Shake, Pulse, Spin, Custom Zoom. EffectDefinition gains a category field; tabs with an empty category are hidden, and the properties-panel 'Open effects' button opens the first non-empty one. - Motion effects work standalone: dropping them on the timeline creates an effect-track element that animates (scale/translate/rotate) every track below it, computed purely in the TS frame descriptor - no wasm changes, identical in preview and export. supportsStandalone removed. - Motion Blur: directional gaussian smear (amount + angle) reusing the existing WGSL shader with arbitrary u_direction. - Custom Zoom: start/end scale params (keyframable clip-level). - MotionOffset gains optional rotate, accumulated clip-level and applied to standalone layer quads via rotationDegrees. - Rename clips (timeline context menu) and media assets (media panel context menu) via a shared RenameDialog; asset rename persists through storageService with rollback on error. - Preview pops out into a Document Picture-in-Picture window and docks back; button hidden where the API is unsupported. - Export keeps running when the export popover is closed; only the explicit Cancel button aborts. - Captions and Adjustment tabs removed from the assets panel.
Diffstat (limited to 'apps/web/src/components/editor/panels/assets/views/assets.tsx')
-rw-r--r--apps/web/src/components/editor/panels/assets/views/assets.tsx59
1 files changed, 45 insertions, 14 deletions
diff --git a/apps/web/src/components/editor/panels/assets/views/assets.tsx b/apps/web/src/components/editor/panels/assets/views/assets.tsx
index 4dbed41e..049cb5f4 100644
--- a/apps/web/src/components/editor/panels/assets/views/assets.tsx
+++ b/apps/web/src/components/editor/panels/assets/views/assets.tsx
@@ -48,8 +48,10 @@ import {
import { MASKABLE_ELEMENT_TYPES } from "@/timeline";
import type { MediaAsset } from "@/media/types";
import { cn } from "@/utils/ui";
+import { RenameDialog } from "@/components/editor/rename-dialog";
import {
CloudUploadIcon,
+ Edit02Icon,
GridViewIcon,
LeftToRightListDashIcon,
SortingOneNineIcon,
@@ -316,25 +318,54 @@ function MediaItemWithContextMenu({
}) => void;
}) {
const { isSelected, selectedIds } = useSelection();
+ const editor = useEditor();
+ const activeProject = useEditor((e) => e.project.getActive());
+ const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
const idsToDelete = isSelected(item.id) ? selectedIds : [item.id];
const deleteLabel =
idsToDelete.length > 1 ? `Delete ${idsToDelete.length} items` : "Delete";
return (
- <ContextMenu>
- <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
- <ContextMenuContent>
- <ContextMenuItem>Export clips</ContextMenuItem>
- <ContextMenuItem
- variant="destructive"
- onClick={(event: React.MouseEvent<HTMLDivElement>) =>
- onRemove({ event, ids: idsToDelete })
- }
- >
- {deleteLabel}
- </ContextMenuItem>
- </ContextMenuContent>
- </ContextMenu>
+ <>
+ <ContextMenu>
+ <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+ <ContextMenuContent>
+ <ContextMenuItem
+ icon={<HugeiconsIcon icon={Edit02Icon} />}
+ onClick={(event: React.MouseEvent<HTMLDivElement>) => {
+ event.stopPropagation();
+ setIsRenameDialogOpen(true);
+ }}
+ >
+ Rename
+ </ContextMenuItem>
+ <ContextMenuItem>Export clips</ContextMenuItem>
+ <ContextMenuItem
+ variant="destructive"
+ onClick={(event: React.MouseEvent<HTMLDivElement>) =>
+ onRemove({ event, ids: idsToDelete })
+ }
+ >
+ {deleteLabel}
+ </ContextMenuItem>
+ </ContextMenuContent>
+ </ContextMenu>
+ <RenameDialog
+ isOpen={isRenameDialogOpen}
+ onOpenChange={setIsRenameDialogOpen}
+ currentName={item.name}
+ title="Rename asset"
+ onConfirm={(newName) => {
+ if (!activeProject) return;
+ editor.media.renameMediaAsset({
+ projectId: activeProject.metadata.id,
+ id: item.id,
+ name: newName,
+ });
+ setIsRenameDialogOpen(false);
+ }}
+ />
+ </>
);
}