change(player): refactor autoplay comp

frontend/app/components/Session_/Autoplay/index.ts

@@ -1 +0,0 @@
-export { default } from './Autoplay'

frontend/app/components/Session_/QueueControls/QueueControls.tsx

@@ -6,7 +6,6 @@ import { Link, Icon, Tooltip } from 'UI';;
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import cn from 'classnames';
 import { fetchAutoplaySessions } from 'Duck/search';
-import { observer } from 'mobx-react-lite';
 
 const PER_PAGE = 10;
 
@@ -21,7 +20,7 @@ interface Props extends RouteComponentProps {
   sessionIds: any;
   fetchAutoplaySessions?: (page: number) => Promise<void>;
 }
-function Autoplay(props: Props) {
+function QueueControls(props: Props) {
   const {
     previousId,
     nextId,
@@ -101,4 +100,4 @@ export default connect(
     latestRequestTime: state.getIn(['search', 'latestRequestTime']),
   }),
   { setAutoplayValues, fetchAutoplaySessions }
-)(withRouter(Autoplay))
+)(withRouter(QueueControls))

frontend/app/components/Session_/QueueControls/index.ts

@@ -0,0 +1 @@
+export { default } from './QueueControls'

frontend/app/components/Session_/Subheader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon, Tooltip, Button } from 'UI';
-import Autoplay from './Autoplay';
+import QueueControls from './QueueControls';
 import Bookmark from 'Shared/Bookmark';
 import SharePopup from '../shared/SharePopup/SharePopup';
 import copy from 'copy-to-clipboard';
@@ -106,7 +106,7 @@ function SubHeader(props) {
           />
 
           <div>
-            <Autoplay />
+            <QueueControls />
           </div>
         </div>
       ) : null}
@@ -114,4 +114,4 @@ function SubHeader(props) {
   );
 }
 
-export default observer(SubHeader);
+export default observer(SubHeader);

frontend/app/components/shared/AutoplayToggle/AutoplayToggle.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
-import { Controls as PlayerControls, connectPlayer } from 'Player';
 import { Toggler } from 'UI';
+import { PlayerContext } from 'App/components/Session/playerContext';
+import { observer } from 'mobx-react-lite';
 
 interface Props {
   toggleAutoplay: () => void;
   autoplay: boolean;
 }
 function AutoplayToggle(props: Props) {
-  const { autoplay } = props;
+  const { player, store } = React.useContext(PlayerContext)
+
+  const { autoplay } = store.get()
   return (
     <div
-      onClick={props.toggleAutoplay}
+      onClick={() => player.toggleAutoplay()}
       className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2"
     >
       <Toggler name="sessionsLive" onChange={props.toggleAutoplay} checked={autoplay} />
@@ -19,11 +22,4 @@ function AutoplayToggle(props: Props) {
   );
 }
 
-export default connectPlayer(
-  (state: any) => ({
-    autoplay: state.autoplay,
-  }),
-  {
-    toggleAutoplay: PlayerControls.toggleAutoplay,
-  }
-)(AutoplayToggle);
+export default observer(AutoplayToggle);