From 73efef6809e0aea35b60f41e1cb8783649db11ad Mon Sep 17 00:00:00 2001
From: saebyn <saebynx+github@gmail.com>
Date: Tue, 11 Feb 2025 16:19:08 -0800
Subject: [PATCH 1/8] refactor: remove unused copy plugin from rollup
 configuration

---
 rollup.config.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/rollup.config.mjs b/rollup.config.mjs
index 9e79408..95d8e44 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -4,7 +4,6 @@ import json from '@rollup/plugin-json';
 import postcss from 'rollup-plugin-postcss';
 import postcssImport from 'postcss-import';
 import postcssUrl from 'postcss-url';
-import copy from 'rollup-plugin-copy';
 import tailwind from 'tailwindcss';
 import nodeResolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';

From e20bf5534aa83fec9be97514057c8a0d59345270 Mon Sep 17 00:00:00 2001
From: saebyn <saebynx+github@gmail.com>
Date: Tue, 11 Feb 2025 16:19:27 -0800
Subject: [PATCH 2/8] feat: add key press handler to Button and IconButton
 components

---
 src/components/atoms/Button.tsx     | 15 +++++++++++++++
 src/components/atoms/IconButton.tsx |  1 +
 2 files changed, 16 insertions(+)

diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
index 90b0c90..246a8cb 100644
--- a/src/components/atoms/Button.tsx
+++ b/src/components/atoms/Button.tsx
@@ -4,16 +4,31 @@ function Button({
   children,
   variant = "default",
   className,
+  onClick,
   ...props
 }: React.ComponentPropsWithoutRef<"button"> & {
   children: React.ReactNode;
   className?: string;
+  onClick?: () => void;
   variant?: "primary" | "danger" | "secondary" | "default";
 }) {
   const variantClass = getVariantClass(variant);
 
+  const handleClick = () => {
+    onClick?.();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (e.key === "Enter") {
+      onClick?.();
+    }
+  };
+
   return (
     <button
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={props.tabIndex ?? 0}
       className={`mx-2 rounded px-5 py-3 max-h-12 ${variantClass} disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed disabled:hover:bg-gray-200 disabled:hover:text-gray-400 disabled:active:bg-gray-200 disabled:active:text-gray-400 disabled:dark:bg-gray-700 disabled:dark:text-gray-400 disabled:dark:hover:bg-gray-700 disabled:dark:hover:text-gray-400 disabled:dark:active:bg-gray-700 disabled:dark:active:text-gray-400 ${className}`}
       {...props}
     >
diff --git a/src/components/atoms/IconButton.tsx b/src/components/atoms/IconButton.tsx
index d9fedd0..b7aa107 100644
--- a/src/components/atoms/IconButton.tsx
+++ b/src/components/atoms/IconButton.tsx
@@ -10,6 +10,7 @@ function IconButton({
   className?: string;
   icon: string;
   text?: string;
+  onClick?: () => void;
   variant?: "primary" | "danger" | "secondary" | "default";
 }) {
   return (

From 34ff0cc93caec63cb2db042d39c7a430984c7e85 Mon Sep 17 00:00:00 2001
From: saebyn <saebynx+github@gmail.com>
Date: Tue, 11 Feb 2025 16:20:25 -0800
Subject: [PATCH 3/8] feat: implement findGaps function and corresponding tests
 to identify gaps between video sections

---
 src/utils/findGaps.test.ts | 101 +++++++++++++++++++++++++++++++++++++
 src/utils/findGaps.ts      |  37 ++++++++++++++
 2 files changed, 138 insertions(+)
 create mode 100644 src/utils/findGaps.test.ts
 create mode 100644 src/utils/findGaps.ts

diff --git a/src/utils/findGaps.test.ts b/src/utils/findGaps.test.ts
new file mode 100644
index 0000000..bc32ac3
--- /dev/null
+++ b/src/utils/findGaps.test.ts
@@ -0,0 +1,101 @@
+import type { Section } from "types";
+import { describe, expect, it } from "vitest";
+import findGaps from "./findGaps";
+
+describe("findGaps", () => {
+  it("should find gaps between sections", async () => {
+    const sections: Section[] = [
+      { timestamp: 0, timestamp_end: 10 },
+      { timestamp: 20, timestamp_end: 30 },
+      { timestamp: 40, timestamp_end: 50 },
+    ];
+    const minGapDuration = 5;
+
+    const gaps = await findGaps(sections, minGapDuration);
+
+    expect(gaps).toEqual([
+      { id: "10-20", start: 10, end: 20 },
+      { id: "30-40", start: 30, end: 40 },
+    ]);
+  });
+
+  it("should return an empty array if no gaps are found", async () => {
+    const sections: Section[] = [
+      { timestamp: 0, timestamp_end: 10 },
+      { timestamp: 11, timestamp_end: 20 },
+    ];
+    const minGapDuration = 5;
+
+    const gaps = await findGaps(sections, minGapDuration);
+
+    expect(gaps).toEqual([]);
+  });
+
+  it("should handle sections with undefined timestamp_end", async () => {
+    const sections: Section[] = [
+      { timestamp: 0, timestamp_end: 10 },
+      { timestamp: 20 },
+      { timestamp: 30, timestamp_end: 40 },
+    ];
+    const minGapDuration = 5;
+
+    const gaps = await findGaps(sections, minGapDuration);
+
+    expect(gaps).toEqual([{ id: "10-30", start: 10, end: 30 }]);
+  });
+
+  it("should ignore gaps that are less than the minimum gap duration", async () => {
+    const sections: Section[] = [
+      { timestamp: 0, timestamp_end: 10 },
+      { timestamp: 15, timestamp_end: 25 },
+    ];
+    const minGapDuration = 10;
+
+    const gaps = await findGaps(sections, minGapDuration);
+
+    expect(gaps).toEqual([]);
+  });
+
+  it("should handle an empty array of sections", async () => {
+    const sections: Section[] = [];
+    const minGapDuration = 5;
+
+    const gaps = await findGaps(sections, minGapDuration);
+
+    expect(gaps).toEqual([]);
+  });
+
+  it("should handle a single section", async () => {
+    const sections: Section[] = [{ timestamp: 0, timestamp_end: 10 }];
+    const minGapDuration = 5;
+
+    const gaps = await findGaps(sections, minGapDuration);
+
+    expect(gaps).toEqual([]);
+  });
+
+  it("should find gaps greater than or equal to the minimum gap duration but ignore gaps less than the minimum gap duration", async () => {
+    const sections: Section[] = [
+      { timestamp: 0, timestamp_end: 10 },
+      { timestamp: 15, timestamp_end: 25 },
+      { timestamp: 35, timestamp_end: 40 },
+    ];
+    const minGapDuration = 10;
+
+    const gaps = await findGaps(sections, minGapDuration);
+
+    expect(gaps).toEqual([{ id: "25-35", start: 25, end: 35 }]);
+  });
+
+  it("should handle timestamps that are floats", async () => {
+    const sections: Section[] = [
+      { timestamp: 0, timestamp_end: 10.5 },
+      { timestamp: 20.5, timestamp_end: 30.5 },
+    ];
+    const minGapDuration = 5;
+
+    const gaps = await findGaps(sections, minGapDuration);
+
+    expect(gaps).toEqual([{ id: "10.5-20.5", start: 10.5, end: 20.5 }]);
+  });
+});
diff --git a/src/utils/findGaps.ts b/src/utils/findGaps.ts
new file mode 100644
index 0000000..b9345f3
--- /dev/null
+++ b/src/utils/findGaps.ts
@@ -0,0 +1,37 @@
+import type { Section, VideoClip } from "types";
+
+/**
+ * Finds gaps between video sections that are greater than or equal to the specified minimum gap duration.
+ *
+ * @param {Section[]} sections - The list of video sections.
+ * @param {number} minGapDuration - The minimum duration of a gap to be considered.
+ * @returns {Promise<VideoClip[]>} - A promise that resolves to an array of video clips representing the gaps.
+ */
+export default async function findGaps(
+  sections: Section[],
+  minGapDuration: number,
+): Promise<VideoClip[]> {
+  const gaps: VideoClip[] = [];
+
+  const validSections = sections.filter(
+    (section): section is Section & { timestamp_end: number } =>
+      section.timestamp_end !== undefined,
+  );
+
+  for (let i = 0; i < validSections.length - 1; i++) {
+    const currentSection = validSections[i];
+    const nextSection = validSections[i + 1];
+
+    const gapDuration = nextSection.timestamp - currentSection.timestamp_end;
+
+    if (gapDuration >= minGapDuration) {
+      gaps.push({
+        id: `${currentSection.timestamp_end}-${nextSection.timestamp}`,
+        start: currentSection.timestamp_end,
+        end: nextSection.timestamp,
+      });
+    }
+  }
+
+  return gaps;
+}

From 962f51a1256c0c918e941618b189e06f0339787e Mon Sep 17 00:00:00 2001
From: saebyn <saebynx+github@gmail.com>
Date: Tue, 11 Feb 2025 16:21:17 -0800
Subject: [PATCH 4/8] feat: add onSeekToTime handler to ClipSelectionDialog and
 VideoSelectionPage components

---
 src/components/molecules/ClipSelectionDialog.tsx | 6 ++++--
 src/components/pages/VideoSelectionPage.tsx      | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/ClipSelectionDialog.tsx b/src/components/molecules/ClipSelectionDialog.tsx
index 8e38d8b..951de52 100644
--- a/src/components/molecules/ClipSelectionDialog.tsx
+++ b/src/components/molecules/ClipSelectionDialog.tsx
@@ -26,6 +26,7 @@ interface Props {
   onReorder: (clips: VideoClip[]) => void;
   onCopyStartTime: (id: string) => void;
   onCopyEndTime: (id: string) => void;
+  onSeekToTime: (milliseconds: number) => void;
 }
 
 export default function ClipSelectionDialog({
@@ -37,6 +38,7 @@ export default function ClipSelectionDialog({
   onReorder,
   onCopyStartTime,
   onCopyEndTime,
+  onSeekToTime,
 }: Props) {
   if (!show) {
     return null;
@@ -82,8 +84,8 @@ export default function ClipSelectionDialog({
               className="mr-2"
             />
             <div className="flex-grow">
-              <TimeLink milliseconds={clip.start} />-{" "}
-              <TimeLink milliseconds={clip.end} />
+              <TimeLink onClick={onSeekToTime} milliseconds={clip.start} />-{" "}
+              <TimeLink onClick={onSeekToTime} milliseconds={clip.end} />
             </div>
             <div className="flex space-x-1">
               <IconButton
diff --git a/src/components/pages/VideoSelectionPage.tsx b/src/components/pages/VideoSelectionPage.tsx
index d0c276b..3e8c9ab 100644
--- a/src/components/pages/VideoSelectionPage.tsx
+++ b/src/components/pages/VideoSelectionPage.tsx
@@ -115,6 +115,7 @@ function VideoSelectionPage({ content, onExport }: VideoSelectionPageProps) {
           }
           onCopyStartTime={handleCopyTime("start")}
           onCopyEndTime={handleCopyTime("end")}
+          onSeekToTime={handleSeekToTime}
         />
 
         <Sidebar

From 7d12004095789942562b532deeb646ca7d4f78d0 Mon Sep 17 00:00:00 2001
From: saebyn <saebynx+github@gmail.com>
Date: Tue, 11 Feb 2025 16:22:24 -0800
Subject: [PATCH 5/8] refactor: move the VideoClip interface to types.ts

---
 .../molecules/ClipSelectionDialog.tsx         | 14 +-------------
 src/components/pages/VideoSelectionPage.tsx   |  1 +
 src/types.ts                                  | 19 +++++++++++++++++++
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/molecules/ClipSelectionDialog.tsx b/src/components/molecules/ClipSelectionDialog.tsx
index 951de52..e831810 100644
--- a/src/components/molecules/ClipSelectionDialog.tsx
+++ b/src/components/molecules/ClipSelectionDialog.tsx
@@ -2,21 +2,9 @@ import Button from "components/atoms/Button";
 import IconButton from "components/atoms/IconButton";
 
 import TimeLink from "components/atoms/TimeLink";
+import type { VideoClip } from "types";
 import DEFAULT_KEYFRAME_SRC from "../../assets/logo.svg";
 
-export type VideoClip = {
-  id: string;
-  /**
-   * Start time in milliseconds
-   */
-  start: number;
-  /**
-   * End time in milliseconds
-   */
-  end: number;
-  keyframeSrc?: string;
-};
-
 interface Props {
   clips: VideoClip[];
   show: boolean;
diff --git a/src/components/pages/VideoSelectionPage.tsx b/src/components/pages/VideoSelectionPage.tsx
index 3e8c9ab..50d3978 100644
--- a/src/components/pages/VideoSelectionPage.tsx
+++ b/src/components/pages/VideoSelectionPage.tsx
@@ -19,6 +19,7 @@ import type {
   ChatMessage,
   Section,
   TranscriptSegment,
+  VideoClip,
   VideoMetadata,
 } from "types";
 
diff --git a/src/types.ts b/src/types.ts
index 3b8fa19..ee4e176 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -102,3 +102,22 @@ export interface ChatMessage extends LogEvent {
    */
   message: string;
 }
+
+/**
+ * A selection within a video.
+ */
+export type VideoClip = {
+  id: string;
+  /**
+   * Start time in milliseconds
+   */
+  start: number;
+  /**
+   * End time in milliseconds
+   */
+  end: number;
+  /**
+   * URL to the keyframe image, if available.
+   */
+  keyframeSrc?: string;
+};

From a03a08e44b853ec13f22a31c02a1ec6cc6213d9c Mon Sep 17 00:00:00 2001
From: saebyn <saebynx+github@gmail.com>
Date: Tue, 11 Feb 2025 16:22:30 -0800
Subject: [PATCH 6/8] feat: add export and clip silences buttons to
 VideoSelectionPage component

---
 src/components/pages/VideoSelectionPage.tsx | 27 ++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/VideoSelectionPage.tsx b/src/components/pages/VideoSelectionPage.tsx
index 50d3978..a829c8f 100644
--- a/src/components/pages/VideoSelectionPage.tsx
+++ b/src/components/pages/VideoSelectionPage.tsx
@@ -1,7 +1,6 @@
+import Button from "components/atoms/Button";
 import Heading from "components/atoms/Heading";
-import ClipSelectionDialog, {
-  type VideoClip,
-} from "components/molecules/ClipSelectionDialog";
+import ClipSelectionDialog, {} from "components/molecules/ClipSelectionDialog";
 import EditableTimestampedEventLog from "components/molecules/EditableTimestampedEventLog";
 import TimeTable from "components/molecules/TimeTable";
 import TimelineControls from "components/molecules/TimelineControls";
@@ -22,6 +21,7 @@ import type {
   VideoClip,
   VideoMetadata,
 } from "types";
+import findGaps from "utils/findGaps";
 
 interface VideoSelectionPageProps {
   content: VideoMetadata;
@@ -167,12 +167,15 @@ function VideoSelectionPage({ content, onExport }: VideoSelectionPageProps) {
                 <EditableTimestampedEventLog<TranscriptSegment>
                   log={content.transcript}
                   onChange={(updatedSegment) => {
+                    // TODO
                     console.log(updatedSegment);
                   }}
                   onAdd={(newSegment) => {
+                    // TODO
                     console.log(newSegment);
                   }}
                   onRemove={(segment) => {
+                    // TODO
                     console.log(segment);
                   }}
                   playheadTime={playheadTime}
@@ -189,6 +192,24 @@ function VideoSelectionPage({ content, onExport }: VideoSelectionPageProps) {
               }
             />
 
+            <div className="flex justify-end gap-2">
+              <Button
+                onClick={() => {
+                  onExport?.(selectedClips);
+                }}
+                variant="primary"
+              >
+                Export
+              </Button>
+              <Button
+                onClick={async () => {
+                  setSelectedClips(await findGaps(content.silences, 1000));
+                }}
+              >
+                Clip Silences
+              </Button>
+            </div>
+
             <Heading level={2} id="highlights">
               Highlights
             </Heading>

From 9718b02cc7ebc2ad63c3a36a7f97e60d02581a79 Mon Sep 17 00:00:00 2001
From: saebyn <saebynx+github@gmail.com>
Date: Tue, 11 Feb 2025 16:23:26 -0800
Subject: [PATCH 7/8] feat: add onSeekToTime action to ClipSelectionDialog
 stories

---
 src/components/molecules/ClipSelectionDialog.stories.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/molecules/ClipSelectionDialog.stories.tsx b/src/components/molecules/ClipSelectionDialog.stories.tsx
index 76f7455..25c5d92 100644
--- a/src/components/molecules/ClipSelectionDialog.stories.tsx
+++ b/src/components/molecules/ClipSelectionDialog.stories.tsx
@@ -30,6 +30,7 @@ export const Default = () => {
       onClear={action("onClear")}
       onRemove={action("onRemove")}
       onReorder={action("onReorder")}
+      onSeekToTime={action("onSeekToTime")}
     />
   );
 };
@@ -61,6 +62,7 @@ export const MultipleCuts = () => {
       onClear={action("onClear")}
       onRemove={action("onRemove")}
       onReorder={action("onReorder")}
+      onSeekToTime={action("onSeekToTime")}
     />
   );
 };

From 6279de88af2ab7f34cd768e9bb96b4c241b50ad9 Mon Sep 17 00:00:00 2001
From: saebyn <saebynx+github@gmail.com>
Date: Tue, 11 Feb 2025 16:28:51 -0800
Subject: [PATCH 8/8] feat: enhance Button component to support space key
 activation

---
 src/components/atoms/Button.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx
index 246a8cb..a48c618 100644
--- a/src/components/atoms/Button.tsx
+++ b/src/components/atoms/Button.tsx
@@ -19,7 +19,7 @@ function Button({
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
-    if (e.key === "Enter") {
+    if (e.key === "Enter" || e.key === " ") {
       onClick?.();
     }
   };
@@ -29,6 +29,7 @@ function Button({
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       tabIndex={props.tabIndex ?? 0}
+      type="button"
       className={`mx-2 rounded px-5 py-3 max-h-12 ${variantClass} disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed disabled:hover:bg-gray-200 disabled:hover:text-gray-400 disabled:active:bg-gray-200 disabled:active:text-gray-400 disabled:dark:bg-gray-700 disabled:dark:text-gray-400 disabled:dark:hover:bg-gray-700 disabled:dark:hover:text-gray-400 disabled:dark:active:bg-gray-700 disabled:dark:active:text-gray-400 ${className}`}
       {...props}
     >