UI patch 3 (#2569)

* ui: use enum state for spot ready checker

* ui: fix jump for gql

frontend/app/components/Session_/GraphQL/GraphQL.tsx

@@ -1,12 +1,14 @@
-import {Duration} from "luxon";
-import React, { useEffect } from 'react';
-import { NoContent, Input, SlideModal, CloseButton, Button } from 'UI';
-import { getRE } from 'App/utils';
-import BottomBlock from '../BottomBlock';
-import TimeTable from 'Components/shared/DevTools/TimeTable'
-import GQLDetails from './GQLDetails';
-import { PlayerContext } from 'App/components/Session/playerContext';
+import { Duration } from 'luxon';
 import { observer } from 'mobx-react-lite';
+import React, { useEffect } from 'react';
+
+import { PlayerContext } from 'App/components/Session/playerContext';
+import { getRE } from 'App/utils';
+import TimeTable from 'Components/shared/DevTools/TimeTable';
+import { CloseButton, Input, NoContent, SlideModal } from 'UI';
+
+import BottomBlock from '../BottomBlock';
+import GQLDetails from './GQLDetails';
 
 export function renderStart(r) {
   return (
@@ -26,17 +28,15 @@ export function renderStart(r) {
   );
 }
 
-
 function renderDefaultStatus() {
   return '2xx-3xx';
 }
 
-function GraphQL({
-  panelHeight
-}: { panelHeight: number }) {
+function GraphQL({ panelHeight }: { panelHeight: number }) {
   const { player, store } = React.useContext(PlayerContext);
   const { time, livePlay, tabStates, currentTab } = store.get();
-  const { graphqlList: list = [], graphqlListNow: listNow = [] } = tabStates[currentTab]
+  const { graphqlList: list = [], graphqlListNow: listNow = [] } =
+    tabStates[currentTab];
 
   const defaultState = {
     filter: '',
@@ -74,7 +74,9 @@ function GraphQL({
       : list;
   };
 
-  const onFilterChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
+  const onFilterChange = ({
+    target: { value },
+  }: React.ChangeEvent<HTMLInputElement>) => {
     const filtered = filterList(list, value);
     setState((prevState) => ({
       ...prevState,
@@ -85,23 +87,34 @@ function GraphQL({
   };
 
   const setCurrent = (item: any, index: number) => {
-    setState((prevState) => ({ ...prevState, current: item, currentIndex: index }));
+    setState((prevState) => ({
+      ...prevState,
+      current: item,
+      currentIndex: index,
+    }));
   };
 
-  const onJump = (time: number) => {
+  const onJump = ({ time }: { time: number }) => {
     if (!livePlay) {
       player.pause();
       player.jump(time);
     }
-  }
+  };
 
   const closeModal = () =>
-    setState((prevState) => ({ ...prevState, current: null, showFetchDetails: false }));
+    setState((prevState) => ({
+      ...prevState,
+      current: null,
+      showFetchDetails: false,
+    }));
 
   useEffect(() => {
     const filtered = filterList(listNow, state.filter);
     if (filtered.length !== lastActiveItem) {
-      setState((prevState) => ({ ...prevState, lastActiveItem: listNow.length }));
+      setState((prevState) => ({
+        ...prevState,
+        lastActiveItem: listNow.length,
+      }));
     }
   }, [time]);
 
@@ -146,7 +159,11 @@ function GraphQL({
           </div>
         </BottomBlock.Header>
         <BottomBlock.Content>
-          <NoContent size="small" title="No recordings found" show={filteredList.length === 0}>
+          <NoContent
+            size="small"
+            title="No recordings found"
+            show={filteredList.length === 0}
+          >
             <TimeTable
               rows={filteredList}
               onRowClick={setCurrent}

frontend/app/components/Spots/SpotPlayer/components/SpotVideoContainer.tsx

@@ -3,9 +3,6 @@ import { observer } from 'mobx-react-lite';
 import React from 'react';
 import {Alert, Button} from 'antd';
 import {PlayCircleOutlined, InfoCircleOutlined} from '@ant-design/icons';
-
-import { useStore } from 'App/mstore';
-
 import spotPlayerStore from '../spotPlayerStore';
 
 const base64toblob = (str: string) => {
@@ -18,6 +15,12 @@ const base64toblob = (str: string) => {
   return new Blob([byteArray]);
 };
 
+enum ProcessingState {
+  Unchecked,
+  Processing,
+  Ready,
+}
+
 function SpotVideoContainer({
   videoURL,
   streamFile,
@@ -30,7 +33,7 @@ function SpotVideoContainer({
   checkReady: () => Promise<boolean>;
 }) {
   const [prevIsProcessing, setPrevIsProcessing] = React.useState(false);
-  const [isProcessing, setIsProcessing] = React.useState(false);
+  const [processingState, setProcessingState] = React.useState<ProcessingState>(ProcessingState.Unchecked);
   const [isLoaded, setLoaded] = React.useState(false);
   const videoRef = React.useRef<HTMLVideoElement>(null);
   const playbackTime = React.useRef(0);
@@ -57,16 +60,18 @@ function SpotVideoContainer({
     };
     checkReady().then((isReady) => {
       if (!isReady) {
-        setIsProcessing(true);
+        setProcessingState(ProcessingState.Processing);
         setPrevIsProcessing(true);
         const int = setInterval(() => {
           checkReady().then((r) => {
             if (r) {
-              setIsProcessing(false);
+              setProcessingState(ProcessingState.Ready);
               clearInterval(int);
             }
           });
         }, 5000)
+      } else {
+        setProcessingState(ProcessingState.Ready);
       }
       import('hls.js').then(({ default: Hls }) => {
         if (Hls.isSupported() && videoRef.current) {
@@ -185,7 +190,7 @@ function SpotVideoContainer({
   return (
     <>
       <div className="absolute z-20 left-2/4 -top-6" style={{ transform: 'translate(-50%, 0)' }}>
-          {isProcessing ? (
+          {processingState === ProcessingState.Processing ? (
             <Alert
               className='trimIsProcessing rounded-lg shadow-sm border-indigo-500 bg-indigo-50'
               message="You’re viewing the original recording. Processed Spot will be available here shortly."

frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx

@@ -71,7 +71,7 @@ type Props = {
   additionalHeight?: number;
   hoverable?: boolean;
   onRowClick?: (row: any, index: number) => void;
-  onJump?: (time: number) => void;
+  onJump?: (obj: { time: number }) => void;
 };
 
 type TimeLineInfo = {