From dcc9186c20133ffaa42500377acc5104615224a2 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 6 Apr 2022 15:30:14 +0800
Subject: [PATCH] feat: timeline change widget

---
 src/timeline/index.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/timeline/index.tsx b/src/timeline/index.tsx
index b065aff..22cb11f 100644
--- a/src/timeline/index.tsx
+++ b/src/timeline/index.tsx
@@ -81,9 +81,9 @@ export default function Timeline() {
     // setVideoDur(store.video.duration);
   }, [store.widgetList]);
 
-  console.log(videoDur);
-  console.log(layout);
-  console.log(widgetArr);
+  // console.log(videoDur);
+  // console.log(layout);
+  // console.log(widgetArr);
 
   const formatTime = (time: any) => {
     if (typeof time == "number") {
@@ -126,6 +126,12 @@ export default function Timeline() {
     });
     setIsModalVisible(false);
   };
+  const changeStoreCurrentId = (id: number) => {
+    setStore({
+      ...store,
+      currentWidgetId: id,
+    });
+  };
   return (
     <div className="timeline-container">
       <div className="timeline-container-des">
@@ -202,10 +208,16 @@ export default function Timeline() {
                         props: widget.id,
                       });
                     }}
+                    onClick={() => {
+                      changeStoreCurrentId(widget.id);
+                    }}
                     title={`start:${formatTime(
                       widget.start
                     )} - end:${formatTime(widget.end)}`}
-                    className="current timeline-container-des-part-widget"
+                    className={
+                      "timeline-container-des-part-widget" +
+                      (store.currentWidgetId == widget.id ? " current" : "")
+                    }
                     key={String(widget.id)}
                   >
                     <p>{widget.name}</p>