feat(studio): add 'delete all keyframes' to diamond context menu

Author: miguel-heygen

packages/studio/src/components/StudioPreviewArea.tsx

@@ -107,6 +107,7 @@ export function StudioPreviewArea({
     handleGsapUpdateMeta,
     handleGsapAddKeyframe,
     handleGsapConvertToKeyframes,
+    handleGsapRemoveAllKeyframes,
   } = useDomEditContext();
 
   return (
@@ -127,6 +128,10 @@ export function StudioPreviewArea({
           onResizeElement={handleTimelineElementResize}
           onBlockedEditAttempt={handleBlockedTimelineEdit}
           onSelectTimelineElement={handleTimelineElementSelect}
+          onDeleteAllKeyframes={(_elId) => {
+            const anim = selectedGsapAnimations.find((a) => a.keyframes);
+            if (anim) handleGsapRemoveAllKeyframes(anim.id);
+          }}
           onDeleteKeyframe={(_elId, pct) => {
             const anim = selectedGsapAnimations.find((a) => a.keyframes);
             if (anim) handleGsapRemoveKeyframe(anim.id, pct);

packages/studio/src/components/nle/NLELayout.tsx

@@ -71,6 +71,7 @@ interface NLELayoutProps {
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSelectTimelineElement?: (element: TimelineElement | null) => void;
   onDeleteKeyframe?: (elementId: string, percentage: number) => void;
+  onDeleteAllKeyframes?: (elementId: string) => void;
   onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
   onMoveKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
   onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
@@ -123,6 +124,7 @@ export const NLELayout = memo(function NLELayout({
   onBlockedEditAttempt,
   onSelectTimelineElement,
   onDeleteKeyframe,
+  onDeleteAllKeyframes,
   onChangeKeyframeEase,
   onMoveKeyframe,
   onToggleKeyframeAtPlayhead,
@@ -457,6 +459,7 @@ export const NLELayout = memo(function NLELayout({
                 onBlockedEditAttempt={onBlockedEditAttempt}
                 onSelectElement={onSelectTimelineElement}
                 onDeleteKeyframe={onDeleteKeyframe}
+                onDeleteAllKeyframes={onDeleteAllKeyframes}
                 onChangeKeyframeEase={onChangeKeyframeEase}
                 onMoveKeyframe={onMoveKeyframe}
                 onToggleKeyframeAtPlayhead={onToggleKeyframeAtPlayhead}

packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -13,6 +13,7 @@ interface KeyframeDiamondContextMenuProps {
   state: KeyframeDiamondContextMenuState;
   onClose: () => void;
   onDelete: (elementId: string, percentage: number) => void;
+  onDeleteAll: (elementId: string) => void;
   onChangeEase: (elementId: string, percentage: number, ease: string) => void;
   onCopyProperties: (elementId: string, percentage: number) => void;
 }
@@ -36,6 +37,7 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
   state,
   onClose,
   onDelete,
+  onDeleteAll,
   onChangeEase,
   onCopyProperties,
 }: KeyframeDiamondContextMenuProps) {
@@ -135,6 +137,17 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
         Delete Keyframe
       </button>
 
+      <button
+        type="button"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
+        onClick={() => {
+          onDeleteAll(state.elementId);
+          onClose();
+        }}
+      >
+        Delete All Keyframes
+      </button>
+
       {/* Copy Properties */}
       <button
         type="button"

packages/studio/src/player/components/Timeline.tsx

@@ -72,6 +72,7 @@ interface TimelineProps {
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSelectElement?: (element: TimelineElement | null) => void;
   onDeleteKeyframe?: (elementId: string, percentage: number) => void;
+  onDeleteAllKeyframes?: (elementId: string) => void;
   onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
   onMoveKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
   onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
@@ -92,6 +93,7 @@ export const Timeline = memo(function Timeline({
   onBlockedEditAttempt,
   onSelectElement,
   onDeleteKeyframe,
+  onDeleteAllKeyframes,
   onChangeKeyframeEase,
   onMoveKeyframe,
   onToggleKeyframeAtPlayhead,
@@ -570,6 +572,7 @@ export const Timeline = memo(function Timeline({
           state={kfContextMenu}
           onClose={() => setKfContextMenu(null)}
           onDelete={(elId, pct) => onDeleteKeyframe?.(elId, pct)}
+          onDeleteAll={(elId) => onDeleteAllKeyframes?.(elId)}
           onChangeEase={(elId, pct, ease) => onChangeKeyframeEase?.(elId, pct, ease)}
           onCopyProperties={(elId, pct) => {
             const kfData = keyframeCache.get(elId);