diff --git a/frontend/app/components/Session_/Autoplay/index.ts b/frontend/app/components/Session_/Autoplay/index.ts deleted file mode 100644 index acc3d46de..000000000 --- a/frontend/app/components/Session_/Autoplay/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Autoplay' \ No newline at end of file diff --git a/frontend/app/components/Session_/Autoplay/Autoplay.tsx b/frontend/app/components/Session_/QueueControls/QueueControls.tsx similarity index 96% rename from frontend/app/components/Session_/Autoplay/Autoplay.tsx rename to frontend/app/components/Session_/QueueControls/QueueControls.tsx index 417bd384d..cbb49d02d 100644 --- a/frontend/app/components/Session_/Autoplay/Autoplay.tsx +++ b/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; } -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)) \ No newline at end of file +)(withRouter(QueueControls)) diff --git a/frontend/app/components/Session_/QueueControls/index.ts b/frontend/app/components/Session_/QueueControls/index.ts new file mode 100644 index 000000000..0d45bd91a --- /dev/null +++ b/frontend/app/components/Session_/QueueControls/index.ts @@ -0,0 +1 @@ +export { default } from './QueueControls' diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js index 5baae03a0..be7679fd5 100644 --- a/frontend/app/components/Session_/Subheader.js +++ b/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) { />
- +
) : null} @@ -114,4 +114,4 @@ function SubHeader(props) { ); } -export default observer(SubHeader); \ No newline at end of file +export default observer(SubHeader); diff --git a/frontend/app/components/shared/AutoplayToggle/AutoplayToggle.tsx b/frontend/app/components/shared/AutoplayToggle/AutoplayToggle.tsx index 3f25fd525..55bef3709 100644 --- a/frontend/app/components/shared/AutoplayToggle/AutoplayToggle.tsx +++ b/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 (
player.toggleAutoplay()} className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2" > @@ -19,11 +22,4 @@ function AutoplayToggle(props: Props) { ); } -export default connectPlayer( - (state: any) => ({ - autoplay: state.autoplay, - }), - { - toggleAutoplay: PlayerControls.toggleAutoplay, - } -)(AutoplayToggle); +export default observer(AutoplayToggle);