Close overlay with ESC

Author: globbertot

ui/component/viewers/videoViewer/internal/videojs-shortcuts.jsx

@@ -101,7 +101,7 @@ const VideoJsShorcuts = ({
   playNext: any, // function
   playPrevious: any, // function
   toggleVideoTheaterMode: any, // function
-  toggleKeyboardShortcutsOverlay?: () => void,
+  toggleKeyboardShortcutsOverlay?: (forceState?: boolean) => void,
   isMobile: boolean,
 }) => {
   let holding = false;
@@ -240,6 +240,7 @@ const VideoJsShorcuts = ({
       }, HOLD_SPEED_DELAY_MS);
     }
 
+    if (e.keyCode === KEYCODES.ESCAPE && toggleKeyboardShortcutsOverlay) toggleKeyboardShortcutsOverlay(false);
     if (e.keyCode === KEYCODES.F) toggleFullscreen(playerRef);
     if (e.keyCode === KEYCODES.M) toggleMute(playerRef);
     if (e.keyCode === KEYCODES.UP) volumeUp(e, playerRef);

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -230,9 +230,9 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     location: { search },
   } = useHistory();
 
-  const toggleKeyboardShortcutsOverlay = () => {
+  const toggleKeyboardShortcutsOverlay = (forceState?: boolean) => {
     if (playerRef.current && typeof playerRef.current.toggleKeyboardShortcutsOverlay === 'function') {
-      playerRef.current.toggleKeyboardShortcutsOverlay();
+      playerRef.current.toggleKeyboardShortcutsOverlay(forceState);
     }
   };