From 12f4d9a10cca764b442d87685e97ab90dbf42b10 Mon Sep 17 00:00:00 2001
From: Sudheer Salavadi <connect.uxmaster@gmail.com>
Date: Thu, 30 Jan 2025 23:47:49 -0500
Subject: [PATCH] Highlight on timeline

---
 .../Player/ClipPlayer/ClipPlayerContent.tsx   |  3 +-
 .../Session_/EventsBlock/NoteEvent.tsx        |  2 +-
 .../Session_/Player/Controls/NotesList.tsx    | 62 +++++++++++++------
 .../Player/Controls/timeline.module.css       |  9 ++-
 4 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerContent.tsx b/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerContent.tsx
index 53837bd6a..ceee0c02b 100644
--- a/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerContent.tsx
+++ b/frontend/app/components/Session/Player/ClipPlayer/ClipPlayerContent.tsx
@@ -12,6 +12,7 @@ import styles from 'Components/Session_/playerBlock.module.css';
 import ClipPlayerOverlay from 'Components/Session/Player/ClipPlayer/ClipPlayerOverlay';
 import { observer } from 'mobx-react-lite';
 import { Icon } from 'UI';
+import { backgroundClip } from 'html2canvas/dist/types/css/property-descriptors/background-clip';
 
 
 interface Props {
@@ -74,7 +75,7 @@ function ClipPlayerContent(props: Props) {
           </div>
         </div>
         {props.isHighlight && props.message ? (
-          <div className={'shadow-inner p-3 bg-yellow flex gap-2 w-full items-center'}>
+          <div className={'shadow-inner p-3 flex gap-2 w-full items-center'}  style={{ background: 'rgba(252, 193, 0, 0.2)' }}>
             <Icon name="chat-square-quote" color="inherit" size={18} />
             <div className={'leading-none font-medium'}>
               {props.message}
diff --git a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
index 0b25c77dd..43be3718d 100644
--- a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
+++ b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
@@ -61,7 +61,7 @@ function NoteEvent(props: Props) {
     { icon: <Icon name={'trash'} />, label: 'Delete', key: '3', onClick: onDelete },
   ];
   return (
-    <div className="flex items-start flex-col p-2 border rounded ps-4" style={{ background: '#FFFEF5' }}>
+    <div className="flex items-start flex-col p-2 border rounded ps-4" style={{ background: 'rgba(252, 193, 0, 0.1)' }}>
       <div className="flex items-center w-full relative">
         <MessageSquareDot size={16} strokeWidth={1} />
         <div className="ml-2">
diff --git a/frontend/app/components/Session_/Player/Controls/NotesList.tsx b/frontend/app/components/Session_/Player/Controls/NotesList.tsx
index 8d99abd62..f95ceaf8f 100644
--- a/frontend/app/components/Session_/Player/Controls/NotesList.tsx
+++ b/frontend/app/components/Session_/Player/Controls/NotesList.tsx
@@ -3,35 +3,59 @@ import { Icon } from 'UI';
 import { useStore } from "App/mstore";
 import { observer } from 'mobx-react-lite'
 import { getTimelinePosition } from './getTimelinePosition'
+import {Tooltip} from 'antd';
 
 function NotesList({ scale }: { scale: number }) {
   const { notesStore } = useStore();
   const notes = notesStore.sessionNotes;
 
   const visibleNotes = React.useMemo(() => {
-    return notes.filter(note => note.timestamp > 0)
-  }, [notes.length])
+    return notes.filter(note => note.startAt >= 0 && note.endAt > note.startAt); // Ensure valid highlights
+  }, [notes.length]);
+
+  
 
   return (
     <>
-      {visibleNotes.map((note) => (
-        <div
-          key={note.noteId}
-          style={{
-            position: 'absolute',
-            background: 'white',
-            zIndex: 3,
-            pointerEvents: 'none',
-            height: 10,
-            width: 16,
-            left: `${getTimelinePosition(note.timestamp, scale)}%`,
-          }}
-        >
-          <Icon name="quotes" style={{ width: 16, height: 10 }} color="main" />
-        </div>
-      ))}
+      {visibleNotes.map((note) => {
+        const startPos = getTimelinePosition(note.startAt, scale);
+        const endPos = getTimelinePosition(note.endAt, scale);
+        const highlightWidth = endPos - startPos;
+        const iconPos = startPos + highlightWidth / 2;
+
+        return (
+          <React.Fragment key={note.noteId}>
+            <div
+              className="saved-highlight" 
+              style={{
+                position: 'absolute',
+                left: `${startPos}%`,
+                width: `${highlightWidth}%`,
+                height: '10px',
+                background: 'rgba(252, 193, 0, 0.4)', 
+                zIndex: 2,
+                pointerEvents: 'none',
+              }}
+            />
+            
+            <div
+              style={{
+                position: 'absolute',
+                zIndex: 3,
+                pointerEvents: 'none',
+                height: 10,
+                width: 16,
+                left: `${iconPos}%`, 
+                transform: 'translateX(-50%)',
+              }}
+            >
+              <Icon name="quotes" style={{ width: 16, height: 10 }} color="main" />
+            </div>
+          </React.Fragment>
+        );
+      })}
     </>
   );
 }
 
-export default observer(NotesList)
\ No newline at end of file
+export default observer(NotesList);
\ No newline at end of file
diff --git a/frontend/app/components/Session_/Player/Controls/timeline.module.css b/frontend/app/components/Session_/Player/Controls/timeline.module.css
index f674c1ce1..4830dac96 100644
--- a/frontend/app/components/Session_/Player/Controls/timeline.module.css
+++ b/frontend/app/components/Session_/Player/Controls/timeline.module.css
@@ -215,7 +215,6 @@
   }
 }
 
-
 .stripes {
   background-size: 30px 30px;
   width: 100%;
@@ -225,6 +224,14 @@
   animation-direction: reverse;
 }
 
+.saved-highlight {
+  position: absolute;
+  height: 10px;
+  background: rgba(252, 193, 0, 0.4); 
+  z-index: 2;
+  pointer-events: none;
+}
+
 @keyframes animate-stripes {
   0% {
     background-position: 0 0;