77 lines
2.4 KiB
JavaScript
77 lines
2.4 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 } from 'UI';
|
|
import { connectPlayer } from 'Player/store';
|
|
import { Controls as PlayerControls } from 'Player';
|
|
import { Tooltip } from 'react-tippy';
|
|
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-1">
|
|
<Toggler
|
|
name="sessionsLive"
|
|
onChange={ props.toggleAutoplay }
|
|
checked={ autoplay }
|
|
/>
|
|
<span className="ml-2">Auto-Play</span>
|
|
</div>
|
|
|
|
<Tooltip
|
|
delay={0}
|
|
arrow
|
|
animation="fade"
|
|
position="bottom center"
|
|
title="Play Previous Session"
|
|
disabled={!previousId}
|
|
className={cn(
|
|
"p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium",
|
|
previousId && 'cursor-pointer',
|
|
!disabled && nextId&& 'hover:bg-bg-blue'
|
|
)}
|
|
>
|
|
<Link to={ sessionRoute(previousId) } disabled={!previousId}>
|
|
<Icon name="prev1" className="group-hover:fill-main" color="inherit" size="16" />
|
|
</Link>
|
|
</Tooltip>
|
|
|
|
<Tooltip
|
|
delay={0}
|
|
arrow
|
|
animation="fade"
|
|
position="bottom center"
|
|
title="Play Next Session"
|
|
disabled={!nextId}
|
|
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',
|
|
)}
|
|
>
|
|
<Link to={ sessionRoute(nextId) } disabled={!nextId} >
|
|
<Icon name="next1" className="group-hover:fill-main" color="inherit" size="16" />
|
|
</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))
|