DE-6820: Re-enable basic interactivity

Basic interactivity via hover and keys was likely disabled by mistake. Re-enable it.
castlabs · Dec 12, 2023 · 60e2af5 · 60e2af5
1 parent 977055d
commit 60e2af5
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# 0.7.3 (Beta)
+
+## Fixes
+
+* Show UI controls on mouse move.
+* Add basic keyboard shortcuts (Fast-forward, Rewind, Pause/Play).
+
 # 0.7.2 (Beta)
 
 ## Fixes

diff --git a/src/components/PlayerSurface.tsx b/src/components/PlayerSurface.tsx
@@ -88,7 +88,7 @@ export const PlayerSurface = (props: PlayerProps) => {
 
   const createVideo = async (video: HTMLVideoElement|null) => {
     if (!video || context) {return}
-    
+
     await props.player.init(video, props.baseConfig)
     const presto = await props.player.presto()
 
@@ -137,11 +137,11 @@ export const PlayerSurface = (props: PlayerProps) => {
     }
   }, [], props.player)
 
-  // const mouseMove = () => {
-  //   if (!props.player.controlsVisible && !props.player.slideInMenuVisible) {
-  //     props.player.surfaceInteraction()
-  //   }
-  // }
+  const mouseMove = () => {
+    if (!props.player.controlsVisible && !props.player.slideInMenuVisible) {
+      props.player.surfaceInteraction()
+    }
+  }
 
   const mouseClick = (e: React.MouseEvent) => {
     if (!e.defaultPrevented) {
@@ -192,29 +192,28 @@ export const PlayerSurface = (props: PlayerProps) => {
       }
     }
 
-    // let player = props.player;
-    // switch (e.code) {
-    //   case "ArrowRight":
-    //     player.position += 10
-    //     break
-    //   case "ArrowLeft":
-    //     player.position -= 10
-    //     break
-    //   case "Space":
-    //     player.playing = !player.playing
-    //     e.preventDefault()
-    //     break
-    //   case "Escape":
-    //     if (props.player.slideInMenuVisible) {
-    //       console.log('>>> ESCAPE, close menu and register interaction')
-    //       props.player.slideInMenuVisible = false
-    //       setTimeout(() => {
-    //         props.player.surfaceInteraction()
-    //       }, 100)
-    //       e.preventDefault()
-    //     }
-    //     break
-    // }
+    const player = props.player
+    switch (e.code) {
+      case 'ArrowRight':
+        player.position += 10
+        break
+      case 'ArrowLeft':
+        player.position -= 10
+        break
+      case 'Space':
+        player.playing = !player.playing
+        e.preventDefault()
+        break
+      case 'Escape':
+        if (props.player.slideInMenuVisible) {
+          props.player.slideInMenuVisible = false
+          setTimeout(() => {
+            props.player.surfaceInteraction()
+          }, 100)
+          e.preventDefault()
+        }
+        break
+    }
   }
 
   useEffect(() => {
@@ -250,11 +249,11 @@ export const PlayerSurface = (props: PlayerProps) => {
 
   return (
     <div ref={handleContainerRef}
-      data-testid="pp-ui-surface" 
+      data-testid="pp-ui-surface"
       className={`pp-ui pp-ui-surface ${isIpadOS() ? 'pp-ui-ipad' : ''} ${props.className || ''}`}
       style={props.style}
       onClick={mouseClick}
-      // onMouseMove={mouseMove}
+      onMouseMove={mouseMove}
       onKeyDown={onKeyDown}
       tabIndex={0}
     >
@@ -263,7 +262,7 @@ export const PlayerSurface = (props: PlayerProps) => {
         tabIndex={-1}
         playsInline={props.playsInline}>
       </video>
-      {context && 
+      {context &&
         <PrestoContext.Provider value={context}>
           <div className={`pp-ui pp-ui-overlay ${isIpadOS() ? 'pp-ui-ipad' : ''}`}>
             {props.children}