Merge a14a1b8798 into c15ca17d2d

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) {
@@ -749,6 +778,9 @@ const Player = ({ urlParams, queryParams }) => {
                 className={styles['layer']}
                 onClick={onVideoClick}
                 onDoubleClick={onVideoDoubleClick}
+                onMouseDown={onVideoMouseDown}
+                onMouseUp={onVideoMouseUp}
+                onMouseLeave={onVideoMouseLeave}
             />
             {
                 !video.state.loaded ?

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 (
-        <div className={classnames(className, styles['video-container'])} onClick={onClick} onDoubleClick={onDoubleClick}>
+        <div className={classnames(className, styles['video-container'])} onClick={onClick} onDoubleClick={onDoubleClick} onMouseUp={onMouseUp} onMouseDown={onMouseDown} onMouseLeave={onMouseLeave}>
             <div ref={ref} className={styles['video']} />
         </div>
     );