Delete video event

lightly_studio_view/src/lib/components/VideoControls/VideoControls.stories.svelte

@@ -7,18 +7,27 @@
         component: VideoControls,
         tags: ['autodocs']
     });
+<<<<<<< HEAD
+</script>
+
+<script>
+=======
 
+>>>>>>> main
     // The bar owns no state; the Playground wires local state so the scrubber
     // and transport buttons actually respond.
     let currentTimeS = $state(15);
     let durationS = $state(120);
     let isPlaying = $state(false);
     let isMuted = $state(true);
     let isFullscreen = $state(false);
+<<<<<<< HEAD
+=======
 
     // Separate state for the short-clip story so its arrow-key stepping is
     // independent of the Playground.
     let shortCurrentTimeS = $state(0);
+>>>>>>> main
 </script>
 
 <!-- Rendered on a dark backdrop since the bar is designed to overlay a video. -->

lightly_studio_view/src/lib/components/VideoDetails/VideoDetails.svelte

@@ -26,6 +26,7 @@
     import { useCreateAnnotation } from '$lib/hooks/useCreateAnnotation/useCreateAnnotation';
     import { useCreateLabel } from '$lib/hooks/useCreateLabel/useCreateLabel';
     import { useSelectClassDialog } from '$lib/hooks/useSelectClassDialog/useSelectClassDialog';
+    import { useDeleteAnnotation } from '$lib/hooks/useDeleteAnnotation/useDeleteAnnotation';
     import { onMount } from 'svelte';
     import { toast } from 'svelte-sonner';
     import { routeHelpers } from '$lib/routes';
@@ -55,6 +56,7 @@
     const { updateAnnotations } = useUpdateAnnotationsMutation({ collectionId: eventCollectionId });
     const { createAnnotation } = useCreateAnnotation({ collectionId: eventCollectionId });
     const { createLabel } = useCreateLabel({ collectionId: eventCollectionId });
+    const { deleteAnnotation } = useDeleteAnnotation({ collectionId: eventCollectionId });
     const annotationLabels = useAnnotationLabels(() => ({ collectionId: eventCollectionId }));
 
     const {
@@ -118,6 +120,17 @@
         }
     }
 
+    async function handleEventDelete(event: VideoEvent) {
+        try {
+            await deleteAnnotation(event.id);
+            onVideoUpdate();
+            toast.success('Event deleted');
+        } catch (error) {
+            toast.error('Failed to delete event. Please try again.');
+            console.error('Error deleting event:', error);
+        }
+    }
+
     const {
         currentFrame,
         frames: videoFrames,
@@ -255,6 +268,7 @@
                         editableEvents={$isEditingMode}
                         onEventResize={handleEventResize}
                         onEventAdd={handleEventAdd}
+                        onEventDelete={handleEventDelete}
                         videoProps={{
                             muted: true,
                             class: 'object-contain',

lightly_studio_view/src/lib/components/VideoDetails/VideoDetails.test.ts

@@ -57,6 +57,9 @@ vi.mock('$lib/hooks/useCreateLabel/useCreateLabel', () => ({
 vi.mock('$lib/hooks/useAnnotationLabels/useAnnotationLabels', () => ({
     useAnnotationLabels: vi.fn(() => ({ data: [] }))
 }));
+vi.mock('$lib/hooks/useDeleteAnnotation/useDeleteAnnotation', () => ({
+    useDeleteAnnotation: vi.fn(() => ({ deleteAnnotation: vi.fn() }))
+}));
 
 import VideoDetails from './VideoDetails.svelte';
 

lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.stories.svelte

@@ -41,9 +41,6 @@
     ]);
 
     const singleEvent = makeEvents([['Sprint', 3, 14]]);
-</script>
-
-<script>
     let playheadTimeS = $state(6);
 </script>
 
@@ -82,7 +79,6 @@
         currentTimeS: 5
     }}
 />
-
 <Story
     name="NoHeader"
     args={{

lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.svelte

@@ -26,7 +26,7 @@
      * />
      * ```
      */
-    import { Plus } from '@lucide/svelte';
+    import { Plus, Trash2 } from '@lucide/svelte';
     import { cn } from '$lib/utils/shadcn.js';
     import { assignEventLanes, type VideoEvent } from '$lib/utils';
 
@@ -45,6 +45,8 @@
         onResize?: (event: VideoEvent, startTimeS: number, endTimeS: number) => void;
         /** Called with a default span when the user requests a new event. */
         onAddEvent?: (startTimeS: number, endTimeS: number) => void;
+        /** Called when the user deletes an event via its trash affordance. */
+        onDelete?: (event: VideoEvent) => void;
         /** Heading shown above the timeline. */
         title?: string;
         /** Whether to render the title/count header above the track. */
@@ -61,6 +63,7 @@
         editable = false,
         onResize,
         onAddEvent,
+        onDelete,
         title = 'Events',
         showHeader = true,
         class: className
@@ -228,7 +231,7 @@
                 )}
                 {@const timeRange = `${formatTime(span.startTimeS)}–${formatTime(span.endTimeS)}`}
                 <div
-                    class="absolute"
+                    class="group absolute"
                     style={`left: ${leftPercent}%; width: ${widthPercent}%; top: ${
                         event.lane * (LANE_HEIGHT_PX + LANE_GAP_PX)
                     }px; height: ${LANE_HEIGHT_PX}px;`}
@@ -244,6 +247,21 @@
                         <span class="truncate">{event.label}</span>
                     </button>
 
+                    {#if editable && onDelete}
+                        <button
+                            type="button"
+                            class="absolute right-2.5 top-1/2 z-30 flex -translate-y-1/2 items-center rounded bg-black/60 p-1 text-white opacity-0 transition-opacity hover:bg-black/80 focus:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100"
+                            aria-label={`Delete ${event.label}`}
+                            data-testid="delete-event-button"
+                            onclick={(e) => {
+                                e.stopPropagation();
+                                onDelete?.(event);
+                            }}
+                        >
+                            <Trash2 class="size-3.5" />
+                        </button>
+                    {/if}
+
                     {#if editable}
                         {#each ['start', 'end'] as const as edge (edge)}
                             <div

lightly_studio_view/src/lib/components/VideoEventTimeline/VideoEventTimeline.test.ts

@@ -158,4 +158,33 @@ describe('VideoEventTimeline', () => {
         // A 1s span can't start at 10s in a 10s video, so it is shifted back to end at 10s.
         expect(onAddEvent).toHaveBeenCalledWith(9, 10);
     });
+
+    it('shows the delete button only when editable with an onDelete handler', () => {
+        const { queryByTestId, rerender } = render(VideoEventTimeline, {
+            props: { events: [makeEvent({ id: 'a' })], durationS: 10, onDelete: vi.fn() }
+        });
+        expect(queryByTestId('delete-event-button')).toBeFalsy();
+
+        rerender({
+            events: [makeEvent({ id: 'a' })],
+            durationS: 10,
+            editable: true,
+            onDelete: vi.fn()
+        });
+        expect(queryByTestId('delete-event-button')).toBeTruthy();
+    });
+
+    it('calls onDelete without seeking when the trash button is clicked', async () => {
+        const onDelete = vi.fn();
+        const onSeek = vi.fn();
+        const event = makeEvent({ id: 'a', label: 'Clip' });
+        const { getByTestId } = render(VideoEventTimeline, {
+            props: { events: [event], durationS: 10, editable: true, onDelete, onSeek }
+        });
+
+        await fireEvent.click(getByTestId('delete-event-button'));
+        expect(onDelete).toHaveBeenCalledWith(expect.objectContaining({ id: 'a' }));
+        // The bar's seek click must not fire when deleting.
+        expect(onSeek).not.toHaveBeenCalled();
+    });
 });

lightly_studio_view/src/lib/components/VideoPlayer/VideoPlayer.svelte

@@ -78,6 +78,9 @@
 
         /** Called with a default span when the user adds a new event. */
         onEventAdd?: (startTimeS: number, endTimeS: number) => void;
+
+        /** Called when the user deletes an event. */
+        onEventDelete?: (event: VideoEvent) => void;
     }
 
     let {
@@ -90,7 +93,8 @@
         durationS,
         editableEvents = false,
         onEventResize,
-        onEventAdd
+        onEventAdd,
+        onEventDelete
     }: VideoPlayerProps = $props();
 
     const defaultVideoProps: HTMLVideoAttributes = {
@@ -224,6 +228,7 @@
                 editable={editableEvents}
                 onResize={onEventResize}
                 onAddEvent={onEventAdd}
+                onDelete={onEventDelete}
                 showHeader={false}
             />
         {/if}

lightly_studio_view/src/lib/components/VideoPlayer/VideoPlayer.test.ts

@@ -167,4 +167,28 @@ describe('VideoPlayer', () => {
         expect(getByTestId('video-event-timeline')).toBeTruthy();
         expect(getByTestId('add-event-button')).toBeTruthy();
     });
+
+    it('renders a delete affordance on events in edit mode', () => {
+        const { getByTestId } = render(VideoPlayer, {
+            props: {
+                src: 'test-video.mp4',
+                durationS: 10,
+                editableEvents: true,
+                onEventDelete: () => {},
+                events: [
+                    {
+                        id: 'e1',
+                        annotationCollectionId: 'coll-1',
+                        label: 'Jump',
+                        startTimeS: 2,
+                        endTimeS: 4,
+                        color: 'rgba(10, 20, 30, 0.7)',
+                        contrastColor: 'rgba(245, 235, 225, 0.7)'
+                    }
+                ]
+            }
+        });
+
+        expect(getByTestId('delete-event-button')).toBeTruthy();
+    });
 });