refactor(ui/player): refactor notes popup, time comp

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 => {

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']) }),