diff --git a/frontend/app/components/Session_/GraphQL/GraphQL.tsx b/frontend/app/components/Session_/GraphQL/GraphQL.tsx index b8df15441..cc5c24b88 100644 --- a/frontend/app/components/Session_/GraphQL/GraphQL.tsx +++ b/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) => { + const onFilterChange = ({ + target: { value }, + }: React.ChangeEvent) => { 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({ - + { @@ -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; }) { const [prevIsProcessing, setPrevIsProcessing] = React.useState(false); - const [isProcessing, setIsProcessing] = React.useState(false); + const [processingState, setProcessingState] = React.useState(ProcessingState.Unchecked); const [isLoaded, setLoaded] = React.useState(false); const videoRef = React.useRef(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 ( <>
- {isProcessing ? ( + {processingState === ProcessingState.Processing ? ( void; - onJump?: (time: number) => void; + onJump?: (obj: { time: number }) => void; }; type TimeLineInfo = {