83 lines
2.5 KiB
JavaScript
83 lines
2.5 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { setAutoplayValues } from 'Duck/sessions';
|
|
import { session as sessionRoute } from 'App/routes';
|
|
import { Link, Icon, Toggler, Tooltip } from 'UI';
|
|
import { connectPlayer } from 'Player/store';
|
|
import { Controls as PlayerControls } from 'Player';
|
|
import cn from 'classnames';
|
|
|
|
function Autoplay(props) {
|
|
const { previousId, nextId, autoplay, disabled } = props;
|
|
|
|
useEffect(() => {
|
|
props.setAutoplayValues();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
<div
|
|
onClick={props.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} />
|
|
<span className="ml-2 whitespace-nowrap">Auto-Play</span>
|
|
</div>
|
|
|
|
<Tooltip
|
|
placement="bottom"
|
|
title={<div className="whitespace-nowrap">Play Previous Session</div>}
|
|
disabled={!previousId}
|
|
>
|
|
<Link to={sessionRoute(previousId)} disabled={!previousId}>
|
|
<div
|
|
className={cn(
|
|
'p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium',
|
|
previousId && 'cursor-pointer',
|
|
!disabled && nextId && 'hover:bg-bg-blue'
|
|
)}
|
|
>
|
|
<Icon name="prev1" className="group-hover:fill-main" color="inherit" size="16" />
|
|
</div>
|
|
</Link>
|
|
</Tooltip>
|
|
|
|
<Tooltip
|
|
placement="bottom"
|
|
title={<div className="whitespace-nowrap">Play Next Session</div>}
|
|
disabled={!nextId}
|
|
>
|
|
<Link to={sessionRoute(nextId)} disabled={!nextId}>
|
|
<div
|
|
className={cn(
|
|
'p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium',
|
|
nextId && 'cursor-pointer',
|
|
!disabled && nextId && 'hover:bg-bg-blue'
|
|
)}
|
|
>
|
|
<Icon name="next1" className="group-hover:fill-main" color="inherit" size="16" />
|
|
</div>
|
|
</Link>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const connectAutoplay = connect(
|
|
(state) => ({
|
|
previousId: state.getIn(['sessions', 'previousId']),
|
|
nextId: state.getIn(['sessions', 'nextId']),
|
|
}),
|
|
{ setAutoplayValues }
|
|
);
|
|
|
|
export default connectAutoplay(
|
|
connectPlayer(
|
|
(state) => ({
|
|
autoplay: state.autoplay,
|
|
}),
|
|
{
|
|
toggleAutoplay: PlayerControls.toggleAutoplay,
|
|
}
|
|
)(Autoplay)
|
|
);
|