Prevent keydown event from preventing space input in omnibar

ui/dist/index.html

@@ -7,7 +7,6 @@
         <link href='https://fonts.googleapis.com/css?family=Raleway:600,300' rel='stylesheet' type='text/css'>
         <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
         <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
-        <link rel="stylesheet" href="https://cdn.plyr.io/2.0.12/plyr.css">
         <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
         <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
         <link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">

ui/js/component/video/internal/play-button.jsx

@@ -20,7 +20,10 @@ class VideoPlayButton extends React.PureComponent {
   }
 
   onKeyDown(event) {
-    if ("Space" === event.code) {
+    if (
+      "input" !== event.target.tagName.toLowerCase() &&
+      "Space" === event.code
+    ) {
       event.preventDefault();
       this.onWatchClick();
     }

ui/js/component/video/internal/player.jsx

@@ -1,7 +1,9 @@
+const { remote } = require("electron");
 import React from "react";
 import { Thumbnail } from "component/common";
 import player from "render-media";
 import fs from "fs";
+import { setSession, getSession } from "utils";
 import LoadingScreen from "./loading-screen";
 
 class VideoPlayer extends React.PureComponent {
@@ -27,6 +29,15 @@ class VideoPlayer extends React.PureComponent {
     const renderMediaCallback = err => {
       if (err) this.setState({ unplayable: true });
     };
+    // Handle fullscreen change for the Windows platform
+    const win32FullScreenChange = e => {
+      const win = remote.BrowserWindow.getFocusedWindow();
+      if ("win32" === process.platform) {
+        win.setMenu(
+          document.webkitIsFullScreen ? null : remote.Menu.getApplicationMenu()
+        );
+      }
+    };
 
     player.append(
       this.file(),
@@ -38,6 +49,7 @@ class VideoPlayer extends React.PureComponent {
     document.addEventListener("keydown", this.togglePlayListener);
     const mediaElement = this.refs.media.children[0];
     if (mediaElement) {
+      mediaElement.addEventListener("click", this.togglePlayListener);
       mediaElement.addEventListener(
         "loadedmetadata",
         loadedMetadata.bind(this),
@@ -45,7 +57,14 @@ class VideoPlayer extends React.PureComponent {
           once: true,
         }
       );
-      mediaElement.addEventListener("click", this.togglePlayListener);
+      mediaElement.addEventListener(
+        "webkitfullscreenchange",
+        win32FullScreenChange.bind(this)
+      );
+      mediaElement.addEventListener("volumechange", () => {
+        setSession("prefs_volume", mediaElement.volume);
+      });
+      mediaElement.volume = this.getPreferredVolume();
     }
   }
 
@@ -58,8 +77,11 @@ class VideoPlayer extends React.PureComponent {
   }
 
   togglePlay(event) {
-    // ignore all events except click and spacebar keydown
-    if ("keydown" === event.type && "Space" !== event.code) {
+    // ignore all events except click and spacebar keydown, or input events in a form control
+    if (
+      "keydown" === event.type &&
+      ("Space" !== event.code || "input" === event.target.tagName.toLowerCase())
+    ) {
       return;
     }
     event.preventDefault();
@@ -73,6 +95,11 @@ class VideoPlayer extends React.PureComponent {
     }
   }
 
+  getPreferredVolume() {
+    const volumePreference = parseFloat(getSession("prefs_volume"));
+    return isNaN(volumePreference) ? 1 : volumePreference;
+  }
+
   componentDidUpdate() {
     const { mediaType, downloadCompleted } = this.props;
     const { startedPlaying } = this.state;

ui/scss/component/_video.scss

@@ -17,9 +17,12 @@ video {
   max-width: $width-page-constrained;
   max-height: $height-video-embedded;
   height: $height-video-embedded;
-  position: relative; /*for .plyr below*/
+  position: relative;
   video {
     height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
   }
   &.video--hidden {
     height: $height-video-embedded;
@@ -27,11 +30,6 @@ video {
   &.video--active {
     /*background: none;*/
   }
-
-  .plyr {
-    top: 50%;
-    transform: translateY(-50%);
-  }
 }
 .video--obscured .video__cover
 {