Fixed paly video time ui optimize

web/Dockerfile

@@ -1,5 +1,18 @@
+FROM node:16-alpine AS build
+
+WORKDIR /web
+
+COPY package.json ./
+
+RUN yarn install
+
+COPY . .
+
+RUN yarn build
+
 FROM nginx:stable-alpine
-COPY /build /usr/share/nginx/html
+
+COPY --from=build /web/build /usr/share/nginx/html
 
 RUN  sed -i '12a error_page 404 /index.html;' /etc/nginx/conf.d/default.conf
 
@@ -8,4 +21,5 @@ RUN sed -i '/^http {/a \
     gzip_static on;' /etc/nginx/nginx.conf
 
 EXPOSE 80
+
 CMD ["nginx", "-g", "daemon off;"]

web/src/pages/components/video-playback/index.tsx

@@ -425,13 +425,13 @@ export const VideoPlayback = (props: {
                   </div>
                   <div className="w-full flex">
                     {item.timeList.map((item, i) => {
-                      const startTime = dayjs(warningDetails.startTime).utc();
+                      const startTime = dayjs(warningDetails.startTime);
 
                       const endTime = startTime
                         .add(Number(warningDetails.duration ?? 0), "second")
                         .add(5, "minute");
 
-                      return endTime < dayjs(item[0]).utc() ? (
+                      return endTime < dayjs(item[0]) ? (
                         <div className="w-1/4 flex flex-col" key={i} />
                       ) : (
                         <div className="w-1/4 flex flex-col" key={i}>
@@ -458,15 +458,13 @@ export const VideoPlayback = (props: {
                                   className={`w-1/5 h-max relative`}
                                 >
                                   <div className="text-start text-[#5F6279] font-semibold text-[0.875rem] text-nowrap absolute top-[-16px]">
-                                    {index === 0 || index === 4
+                                    {index / 4 === 0
                                       ? dayjs(time).format("hh:mm A")
                                       : ""}
                                   </div>
                                   <div
                                     className={`relative h-2 w-px bg-[#ccc] ${
-                                      index === 0 || index === 4
-                                        ? "h-3"
-                                        : "h-2 "
+                                      index / 4 === 0 ? "h-3" : "h-2 "
                                     }`}
                                   />
                                   <span
@@ -478,8 +476,8 @@ export const VideoPlayback = (props: {
                                 </div>
                               );
 
-                              return endTimeIndex ? (
-                                index <= endTimeIndex ? (
+                              return endTimeIndex >= 0 ? (
+                                index <= endTimeIndex + 2 ? (
                                   node
                                 ) : (
                                   <div

web/src/pages/warning/component/equipment/hook.ts

@@ -93,6 +93,8 @@ export const useAction = () => {
   // 回調獲取導出視頻url
 
   const handelGetVideoPlayBackData = (id: string) => {
+    let playbackTimer: NodeJS.Timeout | null = null;
+
     if (isPlayBackCallBackData) return;
 
     id &&
@@ -104,12 +106,12 @@ export const useAction = () => {
             handelDownloadUrl(generateUrl);
             setIsPlayBackCallBackData(true);
 
-            return;
+            playbackTimer && clearTimeout(playbackTimer);
           }
         })
         .catch(() => {});
 
-    setTimeout(() => {
+    playbackTimer = setTimeout(() => {
       handelGetVideoPlayBackData(id);
     }, 5000);
   };