add cut selection to video editor page

src/components/atoms/Button.tsx

@@ -10,7 +10,7 @@ function Button({
 }) {
   return (
     <button
-      className={`mx-2 rounded bg-gray-300 px-4 py-2 dark:bg-gray-400 hover:bg-gray-400 active:bg-gray-500 dark:hover:bg-gray-500 dark:active:bg-gray-600 hover:text-white active:text-white dark:hover:text-white dark:active:text-white ${className}`}
+      className={`mx-2 rounded bg-gray-300 px-5 py-3 dark:bg-gray-400 hover:bg-gray-400 active:bg-gray-500 dark:hover:bg-gray-500 dark:active:bg-gray-600 hover:text-white active:text-white dark:hover:text-white dark:active:text-white ${className}`}
       {...props}
     >
       {children}

src/components/atoms/IconButton.tsx

@@ -3,17 +3,22 @@ import type React from "react";
 function IconButton({
   icon,
   className,
+  text,
   ...props
 }: React.ComponentPropsWithoutRef<"button"> & {
   className?: string;
   icon: string;
+  text?: string;
 }) {
   return (
     <button
-      className={`rounded bg-gray-300 dark:bg-gray-400 hover:bg-gray-400 active:bg-gray-500 dark:hover:bg-gray-500 dark:active:bg-gray-600 hover:text-white active:text-white dark:hover:text-white dark:active:text-white ${className}`}
+      className={`flex items-center rounded bg-gray-300 dark:bg-gray-400 hover:bg-gray-400 active:bg-gray-500 dark:hover:bg-gray-500 dark:active:bg-gray-600 hover:text-white active:text-white dark:hover:text-white dark:active:text-white disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed
+
+        ${className}`}
       {...props}
     >
       <span className="material-symbols-outlined size-5 m-2">{icon}</span>
+      {text ? <span className="m-2 mr-4">{text}</span> : null}
     </button>
   );
 }

src/components/atoms/TimeSegmentMarker.tsx

@@ -1,16 +1,20 @@
+import { useState } from "react";
 import { useLens } from "../../context/TimelineContext";
 
 export default function TimeSegmentMarker({
   startMilliseconds,
   endMilliseconds,
   text,
   className,
+  onClick,
 }: {
   startMilliseconds: number;
   endMilliseconds: number | undefined;
   className: string;
   text: string;
+  onClick?: () => void;
 }) {
+  const [isClickable, setIsClickable] = useState(false);
   const { timeToRelative } = useLens();
 
   const relativeWidth =
@@ -22,14 +26,34 @@
       ? `max(${relativeWidth * 100.0}%, 0.125rem)`
       : "0.125rem";
 
+  const handleHover = (event: React.MouseEvent<HTMLDivElement>) => {
+    // Only make the marker clickable if there is an onClick handler
+    // and the user is holding down shift
+    if (onClick && event.shiftKey) {
+      setIsClickable(true);
+      return;
+    }
+
+    setIsClickable(false);
+  };
+
+  const handleClick = () => {
+    if (isClickable && onClick) {
+      onClick();
+    }
+  };
+
   return (
     <div
       title={text}
-      className={`absolute top-1/2 size-1 -translate-y-1/2 ${className}`}
+      onClick={handleClick}
+      onMouseEnter={handleHover}
+      onMouseLeave={handleHover}
+      className={`absolute top-1/2 size-1 -translate-y-1/2 ${className} ${isClickable ? "cursor-pointer" : ""}`}
       style={{
         left: `${timeToRelative(startMilliseconds) * 100.0}%`,
         width,
       }}
     />
   );
 }

src/components/atoms/VideoPlayerControls.tsx

@@ -33,6 +33,15 @@ export default function VideoPlayerControls({
     }
   }, [speed, video]);
 
+  useEffect(() => {
+    // handle events from the video element that change the state
+    const handlePlay = () => setIsPlaying(true);
+    const handlePause = () => setIsPlaying(false);
+
+    video?.addEventListener("play", handlePlay);
+    video?.addEventListener("pause", handlePause);
+  }, [video]);
+
   const play = () => {
     if (video) {
       video.play().then(() => {

src/components/molecules/SelectedCutsDialog.stories.tsx → src/components/molecules/ClipSelectionDialog.stories.tsx

@@ -1,10 +1,10 @@
 import { action } from "@storybook/addon-actions";
 
-import SelectedCutsDialog from "./SelectedCutsDialog";
+import ClipSelectionDialog from "./ClipSelectionDialog";
 
 export default {
   title: "Molecules/SelectedCutsDialog",
-  component: SelectedCutsDialog,
+  component: ClipSelectionDialog,
   tags: ["molecules"],
   decorators: [
     (story: () => React.ReactNode) => (
@@ -15,15 +15,18 @@ export default {
 
 export const Default = () => {
   return (
-    <SelectedCutsDialog
-      cuts={[
+    <ClipSelectionDialog
+      clips={[
         {
           id: "1",
           start: 0,
           end: 10,
         },
       ]}
-      onClose={action("onClose")}
+      onCopyStartTime={action("onCopyStartTime")}
+      onCopyEndTime={action("onCopyEndTime")}
+      onExport={action("onExport")}
+      show={true}
       onClear={action("onClear")}
       onRemove={action("onRemove")}
       onReorder={action("onReorder")}
@@ -33,8 +36,9 @@ export const Default = () => {
 
 export const MultipleCuts = () => {
   return (
-    <SelectedCutsDialog
-      cuts={[
+    <ClipSelectionDialog
+      show={true}
+      clips={[
         {
           id: "1",
           start: 0,
@@ -51,7 +55,9 @@ export const MultipleCuts = () => {
           end: 30,
         },
       ]}
-      onClose={action("onClose")}
+      onCopyStartTime={action("onCopyStartTime")}
+      onCopyEndTime={action("onCopyEndTime")}
+      onExport={action("onExport")}
       onClear={action("onClear")}
       onRemove={action("onRemove")}
       onReorder={action("onReorder")}

src/components/molecules/ClipSelectionDialog.tsx

@@ -0,0 +1,126 @@
+import Button from "components/atoms/Button";
+import IconButton from "components/atoms/IconButton";
+
+import DEFAULT_KEYFRAME_SRC from "assets/logo.svg";
+import { formatMs } from "utils/duration";
+
+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;
+  onClear: () => void;
+  onExport: () => void;
+  onRemove: (id: string) => void;
+  onReorder: (clips: VideoClip[]) => void;
+  onCopyStartTime: (id: string) => void;
+  onCopyEndTime: (id: string) => void;
+}
+
+export default function ClipSelectionDialog({
+  clips,
+  show,
+  onClear,
+  onExport,
+  onRemove,
+  onReorder,
+  onCopyStartTime,
+  onCopyEndTime,
+}: Props) {
+  if (!show) {
+    return null;
+  }
+
+  const handleRemove = (id: string) => {
+    onRemove(id);
+  };
+
+  const handleReorder = (index: number, direction: "up" | "down") => {
+    const newClips = [...clips];
+    const [removed] = newClips.splice(index, 1);
+    newClips.splice(direction === "up" ? index - 1 : index + 1, 0, removed);
+    onReorder(newClips);
+  };
+
+  return (
+    <div className="fixed w-96 bg-white shadow-lg p-4 flex flex-col space-y-4 right-0 bottom-0 z-50">
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-xl font-bold">Selected Clips</h2>
+        <Button
+          className="bg-red-500
+        dark:bg-red-600 hover:bg-red-600 active:bg-red-700 dark:hover:bg-red-700 dark:active:bg-red-800 hover:text-white active:text-white dark:hover:text-white dark:active:text-white
+        "
+          onClick={onClear}
+        >
+          Clear
+        </Button>
+
+        <IconButton
+          className="bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 active:bg-blue-700 dark:hover:bg-blue-700 dark:active:bg-blue-800 hover:text-white active:text-white dark:hover:text-white dark:active:text-white"
+          onClick={onExport}
+          icon="file_export"
+          text="Export"
+        />
+      </div>
+      <ul className="flex-grow overflow-y-auto space-y-1">
+        {clips.map((clip, index) => (
+          <li
+            key={clip.id}
+            className="border border-gray-200 rounded p-1 flex items-center animate-highlight-new"
+          >
+            <img
+              src={clip.keyframeSrc || DEFAULT_KEYFRAME_SRC}
+              width={48}
+              height={45}
+              alt={`Keyframe for clip ${clip.id}`}
+              className="mr-2"
+            />
+            <div className="flex-grow">
+              {formatMs(clip.start)} - {formatMs(clip.end)}
+            </div>
+            <div className="flex space-x-1">
+              <IconButton
+                onClick={() => handleRemove(clip.id)}
+                icon="close"
+                title="Remove"
+              />
+              <IconButton
+                onClick={() => handleReorder(index, "up")}
+                disabled={index === 0}
+                icon="move_up"
+                title="Move up"
+              />
+              <IconButton
+                onClick={() => handleReorder(index, "down")}
+                disabled={index === clips.length - 1}
+                icon="move_down"
+                title="Move down"
+              />
+              <IconButton
+                onClick={() => onCopyStartTime(clip.id)}
+                icon="line_start_square"
+                title="Copy start time from playhead"
+              />
+              <IconButton
+                onClick={() => onCopyEndTime(clip.id)}
+                icon="line_end_square"
+                title="Copy end time from playhead"
+              />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}