fix(frontend): fix LivePlayer & Timeline components

frontend/app/components/Session/LivePlayer.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { toggleFullscreen, closeBottomBlock } from 'Duck/components/player';
-import { withRequest } from 'HOCs';
+import withRequest from 'HOCs/withRequest';
 import withPermissions from 'HOCs/withPermissions';
 import { PlayerContext, defaultContextValue } from './playerContext';
 import { makeAutoObservable } from 'mobx';
+import { createLiveWebPlayer } from 'Player'
+import type { IWebPlayer } from 'Player'
 
 import PlayerBlockHeader from '../Session_/PlayerBlockHeader';
 import PlayerBlock from '../Session_/PlayerBlock';
@@ -23,28 +25,25 @@ function LivePlayer ({
   userEmail,
   userName,
 }) {
-  const [contextValue, setContextValue] = useState<IPlayerContext>(defaultContextValue);
+  const [contextValue, setContextValue] = useState(defaultContextValue);
   const [fullView, setFullView] = useState(false);
   useEffect(() => {
-    if (!loadingCredentials) {
-      const sessionWithAgentData = {
-        ...session.toJS(),
-        agentInfo: {
-          email: userEmail,
-          name: userName,
-        },
-      }
-      // initPlayer(sessionWithAgentData, assistCredendials, true);
-      const [LivePlayer, LivePlayerStore] = createLiveWebPlayer(
-        sessionWithAgentData,
-        assistCredendials,
-        (state) => makeAutoObservable(state)
-        )
-      setContextValue({ player: LivePlayer, store: LivePlayerStore });
-
+    if (loadingCredentials) { return }
+    const sessionWithAgentData = {
+      ...session.toJS(),
+      agentInfo: {
+        email: userEmail,
+        name: userName,
+      },
     }
-    return () => LivePlayer.clean()
-  }, [ session.sessionId, loadingCredentials, assistCredendials ]);
+    const [player, store] = createLiveWebPlayer(
+      sessionWithAgentData,
+      assistCredendials,
+      (state) => makeAutoObservable(state)
+    )
+    setContextValue({ player, store })
+    return () => player.clean()
+  }, [ session.sessionId, assistCredendials ])
 
   // LAYOUT (TODO: local layout state - useContext or something..)
   useEffect(() => {
@@ -83,7 +82,6 @@ function LivePlayer ({
 export default withRequest({
   initialData: null,
   endpoint: '/assist/credentials',
-  dataWrapper: (data) => data,
   dataName: 'assistCredendials',
   loadingName: 'loadingCredentials',
 })(

frontend/app/components/Session_/Player/Controls/DraggableCircle.tsx

@@ -31,24 +31,27 @@ const ItemTypes = {
 }
 
 interface Props {
-    left: number;
-    top: number;
-    onDrop?: (item, monitor) => void;
+    left: number
+    live: boolean
+    onDrop?: () => void
 }
 
-const DraggableCircle: FC<Props> = memo(function DraggableCircle(props) {
-    const { left, top, live } = props
+const DraggableCircle: FC<Props> = memo(function DraggableCircle({ 
+    left,
+    live,
+    onDrop,
+}) {
     const [{ isDragging, item }, dragRef, preview] = useDrag(
         () => ({
             type: ItemTypes.BOX,
-            item: { left, top },
-            end: props.onDrop,
+            item: { left },
+            end: onDrop,
             collect: (monitor: DragSourceMonitor) => ({
                 isDragging: monitor.isDragging(),
                 item: monitor.getItem(),
             }),
         }),
-        [left, top],
+        [left],
     )
 
     useEffect(() => {

frontend/app/components/Session_/Player/Controls/Timeline.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useMemo, useContext, useState, useRef } from 'react';
 import { connect } from 'react-redux';
 import { Icon } from 'UI'
 import TimeTracker from './TimeTracker';
@@ -14,19 +14,15 @@ import { useStore } from 'App/mstore';
 
 const BOUNDRY = 0;
 
-function getTimelinePosition(value, scale) {
+function getTimelinePosition(value: number, scale: number) {
   const pos = value * scale;
 
   return pos > 100 ? 99 : pos;
 }
 
-let deboucneJump = () => null;
-let debounceTooltipChange = () => null;
-
-
 function Timeline(props) {
-  const { player, store } = React.useContext(PlayerContext)
-  const [wasPlaying, setWasPlaying] = React.useState(false);
+  const { player, store } = useContext(PlayerContext)
+  const [wasPlaying, setWasPlaying] = useState(false)
   const { notesStore } = useStore();
   const {
     playing,
@@ -35,29 +31,31 @@ function Timeline(props) {
     eventList: events,
     skip,
     skipToIssue,
-    disabled,
+    ready,
     endTime,
     live,
+    liveTimeTravel,
   } = store.get()
   const notes = notesStore.sessionNotes
 
-  const progressRef = React.useRef();
-  const timelineRef = React.useRef();
+  const progressRef = useRef()
+  const timelineRef = useRef()
 
 
   const scale = 100 / endTime;
 
-  React.useEffect(() => {
+  useEffect(() => {
     const { issues } = props;
     const firstIssue = issues.get(0);
-    deboucneJump = debounce(player.jump, 500);
-    debounceTooltipChange = debounce(props.setTimelineHoverTime, 50);
 
     if (firstIssue && skipToIssue) {
       player.jump(firstIssue.time);
     }
   }, [])
 
+  const debouncedJump = useMemo(() => debounce(player.jump, 500), [])
+  const debouncedTooltipChange = useMemo(() => debounce(props.setTimelineHoverTime, 50), [])
+
   const onDragEnd = () => {
     if (live && !liveTimeTravel) return;
 
@@ -71,7 +69,7 @@ function Timeline(props) {
 
     const p = (offset.x - BOUNDRY) / progressRef.current.offsetWidth;
     const time = Math.max(Math.round(p * endTime), 0);
-    deboucneJump(time);
+    debouncedJump(time);
     hideTimeTooltip();
     if (playing) {
       setWasPlaying(true)
@@ -80,7 +78,7 @@ function Timeline(props) {
   };
 
   const getLiveTime = (e) => {
-    const duration = new Date().getTime() - startedAt;
+    const duration = new Date().getTime() - props.startedAt;
     const p = e.nativeEvent.offsetX / e.target.offsetWidth;
     const time = Math.max(Math.round(p * duration), 0);
 
@@ -111,12 +109,12 @@ function Timeline(props) {
       };
     }
 
-    debounceTooltipChange(timeLineTooltip);
-  };
+    debouncedTooltipChange(timeLineTooltip);
+  }
 
   const hideTimeTooltip = () => {
     const timeLineTooltip = { isVisible: false };
-    debounceTooltipChange(timeLineTooltip);
+    debouncedTooltipChange(timeLineTooltip);
   };
 
   const seekProgress = (e) => {
@@ -127,14 +125,14 @@ function Timeline(props) {
 
   const loadAndSeek = async (e) => {
     e.persist();
-    await toggleTimetravel();
+    await player.toggleTimetravel();
 
     setTimeout(() => {
       seekProgress(e);
     });
   };
 
-  const jumpToTime = (e) => {
+  const jumpToTime: React.MouseEventHandler = (e) => {
     if (live && !liveTimeTravel) {
       loadAndSeek(e);
     } else {
@@ -142,7 +140,7 @@ function Timeline(props) {
     }
   };
 
-  const getTime = (e, customEndTime) => {
+  const getTime = (e: React.MouseEvent, customEndTime?: number) => {
     const p = e.nativeEvent.offsetX / e.target.offsetWidth;
     const targetTime = customEndTime || endTime;
     const time = Math.max(Math.round(p * targetTime), 0);
@@ -163,7 +161,7 @@ function Timeline(props) {
       >
         <div
           className={stl.progress}
-          onClick={disabled ? null : jumpToTime}
+          onClick={ready ? jumpToTime : null }
           ref={progressRef}
           role="button"
           onMouseMoveCapture={showTimeTooltip}