From 1d47d77ddad64cbccb2c4282a6232f995d346dd6 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Wed, 4 Sep 2024 15:37:37 +0200
Subject: [PATCH] spot prevent empty titles

---
 spot/entrypoints/content/SavingControls.tsx | 47 ++++++++++++++-------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/spot/entrypoints/content/SavingControls.tsx b/spot/entrypoints/content/SavingControls.tsx
index b1dee10f6..7298ce534 100644
--- a/spot/entrypoints/content/SavingControls.tsx
+++ b/spot/entrypoints/content/SavingControls.tsx
@@ -18,7 +18,7 @@ interface ISavingControls {
     },
   ) => void;
   getVideoData: () => Promise<any>;
-  getErrorEvents: () => Promise<{title:string,time:number}[]>
+  getErrorEvents: () => Promise<{ title: string; time: number }[]>;
 }
 
 const base64ToBlob = (base64: string) => {
@@ -33,8 +33,12 @@ const base64ToBlob = (base64: string) => {
   return new Blob([ab], { type: "video/webm" });
 };
 
-function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingControls) {
-  const [name, setName] = createSignal(`Issues in — ${document.title}`); 
+function SavingControls({
+  onClose,
+  getVideoData,
+  getErrorEvents,
+}: ISavingControls) {
+  const [name, setName] = createSignal(`Issues in — ${document.title}`);
   const [description, setDescription] = createSignal("");
   const [currentTime, setCurrentTime] = createSignal(0);
   const [duration, setDuration] = createSignal(0);
@@ -47,13 +51,13 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
   const [endPos, setEndPos] = createSignal(100);
   const [dragging, setDragging] = createSignal<string | null>(null);
   const [isTyping, setIsTyping] = createSignal(false);
-  const [errorEvents, setErrorEvents] = createSignal([])
+  const [errorEvents, setErrorEvents] = createSignal([]);
 
   createEffect(() => {
     setTrimBounds([0, 0]);
     getErrorEvents().then((r) => {
-      setErrorEvents(r)
-    })
+      setErrorEvents(r);
+    });
   });
 
   const spacePressed = (e: KeyboardEvent) => {
@@ -64,8 +68,8 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
     ) {
       return;
     }
-    e.preventDefault()
-    e.stopPropagation()
+    e.preventDefault();
+    e.stopPropagation();
     if (e.key === " ") {
       if (playing()) {
         pause();
@@ -80,7 +84,6 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
     onCleanup(() => window.removeEventListener("keydown", spacePressed));
   });
 
-
   const convertToPercentage = (clientX: number, element: HTMLElement) => {
     const rect = element.getBoundingClientRect();
     const x = clientX - rect.left;
@@ -137,6 +140,9 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
   let videoRef: HTMLVideoElement;
 
   const onSave = async () => {
+    if (!name()) {
+      return;
+    }
     setProcessing(true);
     const thumbnail = await generateThumbnail();
     setProcessing(false);
@@ -219,7 +225,9 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
       videoDuration = await getDuration();
     }
     setDuration(videoDuration);
-    setErrorEvents(errorEvents.filter((ev: { time: number }) => ev.time < videoDuration))
+    setErrorEvents(
+      errorEvents.filter((ev: { time: number }) => ev.time < videoDuration),
+    );
     void generateThumbnail();
   };
 
@@ -325,7 +333,7 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
             </div>
             <div class={"card py-1 px-2"}>
               {errorEvents().length ? (
-                <div class={'relative w-full h-4'} />
+                <div class={"relative w-full h-4"} />
               ) : null}
               <div class={"flex items-center gap-2"}>
                 <div
@@ -366,10 +374,15 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
                     onMouseUp={endDrag}
                   >
                     <div class={"absolute h-4 w-full"} style="top:-20px;">
-                      {errorEvents().map(e => (
+                      {errorEvents().map((e) => (
                         <div
-                          class={'w-3 h-3 rounded-full bg-red-600 absolute tooltip'}
-                          style={{ top: '2px', left: `${(e.time/duration()) * 100}%` }}
+                          class={
+                            "w-3 h-3 rounded-full bg-red-600 absolute tooltip"
+                          }
+                          style={{
+                            top: "2px",
+                            left: `${(e.time / duration()) * 100}%`,
+                          }}
                           data-tip={e.title}
                         />
                       ))}
@@ -469,7 +482,11 @@ function SavingControls({ onClose, getVideoData, getErrorEvents }: ISavingContro
                 <div class="flex items-center gap-3">
                   <div
                     onClick={onSave}
-                    class={"btn btn-primary btn-sm text-white text-base"}
+                    class={
+                      name().length
+                        ? "btn btn-primary btn-sm text-white text-base"
+                        : "btn-disabled btn btn-sm text-white text-base"
+                    }
                   >
                     Save Spot
                   </div>