diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 3ae2f066c..c19b31f91 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -47,6 +47,10 @@ const Player = ({ urlParams, queryParams }) => { const toast = useToast(); const [seeking, setSeeking] = React.useState(false); + + const isMlbHeld = React.useRef(false); + const MlbHoldTimerRef = React.useRef(null); + const currPlaybackSpeed = React.useRef(null); const [casting, setCasting] = React.useState(() => { return services.chromecast.active && services.chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED; @@ -312,6 +316,31 @@ const Player = ({ urlParams, queryParams }) => { closeSideDrawer(); }, []); + const onVideoMouseDown = React.useCallback((event) => { + if (event.button !== 0) return; + MlbHoldTimerRef.current = setTimeout(() => { + currPlaybackSpeed.current = video.state.playbackSpeed; + isMlbHeld.current = true; + video.setProp('playbackSpeed',2.00); + }, 500); + }, [video]); + + const onVideoMouseUp = React.useCallback((event) => { + clearTimeout(MlbHoldTimerRef.current); + if (isMlbHeld.current){ + video.setProp('playbackSpeed',currPlaybackSpeed.current); + isMlbHeld.current = false; + } + }, [video]); + + const onVideoMouseLeave = React.useCallback((event) => { + clearTimeout(MlbHoldTimerRef.current); + if (isMlbHeld.current) { + video.setProp('playbackSpeed',currPlaybackSpeed.current); + isMlbHeld.current = false; + } + }, [video]); + const onContainerMouseMove = React.useCallback((event) => { setImmersed(false); if (!event.nativeEvent.immersePrevented) { @@ -753,6 +782,9 @@ const Player = ({ urlParams, queryParams }) => { className={styles['layer']} onClick={onVideoClick} onDoubleClick={onVideoDoubleClick} + onMouseDown={onVideoMouseDown} + onMouseUp={onVideoMouseUp} + onMouseLeave={onVideoMouseLeave} /> { !video.state.loaded ? diff --git a/src/routes/Player/Video/Video.js b/src/routes/Player/Video/Video.js index 78cc5c08e..49d9ec3fd 100644 --- a/src/routes/Player/Video/Video.js +++ b/src/routes/Player/Video/Video.js @@ -5,9 +5,9 @@ const PropTypes = require('prop-types'); const classnames = require('classnames'); const styles = require('./styles'); -const Video = React.forwardRef(({ className, onClick, onDoubleClick }, ref) => { +const Video = React.forwardRef(({ className, onClick, onDoubleClick, onMouseUp, onMouseDown, onMouseLeave }, ref) => { return ( -