From b00bc4fe9ae3c718695d2090bce82127c4e1e5b0 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Tue, 22 Nov 2022 17:29:10 +0100
Subject: [PATCH] refactor(ui/player): refactor notes popup, time comp

---
 .../components/Session_/Player/Controls/Time.js | 13 ++++++++-----
 .../Session_/components/NotePopup.tsx           | 17 ++++++++---------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Controls/Time.js b/frontend/app/components/Session_/Player/Controls/Time.js
index e8221b5b8..ab6f5e6b8 100644
--- a/frontend/app/components/Session_/Player/Controls/Time.js
+++ b/frontend/app/components/Session_/Player/Controls/Time.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Duration } from 'luxon';
-import { connectPlayer } from 'Player';
 import styles from './time.module.css';
+import { PlayerContext } from 'App/components/Session/playerContext';
+import { observer } from 'mobx-react-lite';
 
 const Time = ({ time, isCustom, format = 'm:ss', }) => (
   <div className={ !isCustom ? styles.time : undefined }>
@@ -11,10 +12,12 @@ const Time = ({ time, isCustom, format = 'm:ss', }) => (
 
 Time.displayName = "Time";
 
-const ReduxTime = connectPlayer((state, { name, format }) => ({
-  time: state[ name ],
-  format,
-}))(Time);
+const ReduxTime = observer(({ format, name }) => {
+  const { store } = React.useContext(PlayerContext)
+  const time = store.get()[name]
+
+  return <Time format={format} time={time} />
+})
 
 const AssistDurationCont = connectPlayer(
   state => {
diff --git a/frontend/app/components/Session_/components/NotePopup.tsx b/frontend/app/components/Session_/components/NotePopup.tsx
index 7c5ea49f4..e229d534b 100644
--- a/frontend/app/components/Session_/components/NotePopup.tsx
+++ b/frontend/app/components/Session_/components/NotePopup.tsx
@@ -1,22 +1,24 @@
 import React from 'react';
 import { Button } from 'UI';
-import { connectPlayer, pause } from 'Player';
 import { connect } from 'react-redux';
 import { setCreateNoteTooltip } from 'Duck/sessions';
-import GuidePopup, { FEATURE_KEYS } from 'Shared/GuidePopup';
+import GuidePopup from 'Shared/GuidePopup';
+import { PlayerContext } from 'App/components/Session/playerContext';
+import { observer } from 'mobx-react-lite';
 
 function NotePopup({
   setCreateNoteTooltip,
-  time,
   tooltipActive,
 }: {
   setCreateNoteTooltip: (args: any) => void;
-  time: number;
   tooltipActive: boolean;
 }) {
+  const { player, store } = React.useContext(PlayerContext)
+  const { time } = store.get();
+
   const toggleNotePopup = () => {
     if (tooltipActive) return;
-    pause();
+    player.pause();
     setCreateNoteTooltip({ time: time, isVisible: true });
   };
 
@@ -40,10 +42,7 @@ function NotePopup({
   );
 }
 
-const NotePopupPl = connectPlayer(
-  // @ts-ignore
-  (state) => ({ time: state.time })
-)(React.memo(NotePopup));
+const NotePopupPl = observer(NotePopup);
 
 const NotePopupComp = connect(
   (state: any) => ({ tooltipActive: state.getIn(['sessions', 'createNoteTooltip', 'isVisible']) }),