feature: speeds up video when holding MLB

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) {
@@ -796,6 +825,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>
     );