fix(frontend):autoscroll lastTime calculation fix

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

@@ -10,7 +10,7 @@ import { List, CellMeasurer, AutoSizer } from 'react-virtualized';
 import { useStore } from 'App/mstore';
 import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorDetailsModal';
 import { useModal } from 'App/components/Modal';
-import useAutoscroll from '../useAutoscroll';
+import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
 import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter'
 import useCellMeasurerCache from '../useCellMeasurerCache'
 
@@ -86,13 +86,12 @@ function ConsolePanel() {
   const onFilterChange = ({ target: { value } }: any) => devTools.update(INDEX_KEY, { filter: value })
 
   // AutoScroll 
-  const countNow = logListNow.length + exceptionsListNow.length
   const [
     timeoutStartAutoscroll,
     stopAutoscroll,
   ] = useAutoscroll(
     filteredList,
-    list[countNow].time,
+    getLastItemTime(logListNow, exceptionsListNow),
     activeIndex,
     index => devTools.update(INDEX_KEY, { index })
   )

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

@@ -14,7 +14,7 @@ import { useStore } from 'App/mstore';
 import TimeTable from '../TimeTable';
 import BottomBlock from '../BottomBlock';
 import InfoLine from '../BottomBlock/InfoLine';
-import useAutoscroll from '../useAutoscroll';
+import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
 import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter'
 
 const INDEX_KEY = 'network';
@@ -152,19 +152,16 @@ function NetworkPanel() {
   const activeTab = devTools[INDEX_KEY].activeTab;
   const activeIndex = devTools[INDEX_KEY].index;
 
-  const { list, intersectedCount } = useMemo(() => {
-    let intersectedCount = 0
-    const list = resourceList.filter(res => !fetchList.some(ft => {
+  const list = useMemo(() => 
+    resourceList.filter(res => !fetchList.some(ft => {
       if (res.url !== ft.url) { return false }
       if (Math.abs(res.time - ft.time) > 200) { return false } // TODO: find good epsilons
       if (Math.abs(res.duration - ft.duration) > 100) { return false }
-      intersectedCount++
       return true
     }))
     .concat(fetchList)
     .sort((a, b) => a.time - b.time)
-    return { list, intersectedCount }
-  }, [ resourceList.length, fetchList.length ])
+  , [ resourceList.length, fetchList.length ])
 
   let filteredList = useMemo(() => {
     if (!showOnlyErrors) { return list }
@@ -181,13 +178,12 @@ function NetworkPanel() {
   const onFilterChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => devTools.update(INDEX_KEY, { filter: value })
 
   // AutoScroll
-  const countNow = fetchListNow.length + resourceListNow.length - intersectedCount
   const [
     timeoutStartAutoscroll,
     stopAutoscroll,
   ] = useAutoscroll(
     filteredList,
-    list[countNow].time,
+    getLastItemTime(fetchListNow, resourceListNow),
     activeIndex,
     index => devTools.update(INDEX_KEY, { index })
   )

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

@@ -10,7 +10,7 @@ import { typeList } from 'Types/session/stackEvent';
 import StackEventRow from 'Shared/DevTools/StackEventRow';
 
 import StackEventModal from '../StackEventModal';
-import useAutoscroll from '../useAutoscroll';
+import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
 import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter'
 import useCellMeasurerCache from '../useCellMeasurerCache'
 
@@ -48,7 +48,7 @@ function StackEventPanel() {
     stopAutoscroll,
   ] = useAutoscroll(
     filteredList,
-    listNow[listNow.length-1].time,
+    getLastItemTime(listNow),
     activeIndex,
     index => devTools.update(INDEX_KEY, { index })
   )

frontend/app/components/shared/DevTools/useAutoscroll.ts

@@ -5,6 +5,9 @@ import useCancelableTimeout from 'App/hooks/useCancelableTimeout'
 
 const TIMEOUT_DURATION = 5000;
 
+export function getLastItemTime(...lists: Timed[][]) {
+  return Math.max(...lists.map(l => l.length ? l[l.length-1].time : 0))
+}
 
 function useAutoupdate<T>(
   savedValue: T,

frontend/app/player/player/Animator.ts

@@ -153,7 +153,7 @@ export default class Animator {
   }
 
   // jump by index?
-  jump(time: number) {
+  jump = (time: number) => {
     const { live } = this.store.get()
     if (live) return