diff --git a/ui/dist/index.html b/ui/dist/index.html
index 8fbf0b5b6..d951dddd1 100644
--- a/ui/dist/index.html
+++ b/ui/dist/index.html
@@ -7,7 +7,6 @@
-
diff --git a/ui/js/component/video/internal/play-button.jsx b/ui/js/component/video/internal/play-button.jsx
index aa352ddf7..d104fcdeb 100644
--- a/ui/js/component/video/internal/play-button.jsx
+++ b/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();
}
diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx
index bf2a6dcc3..1ab3550b1 100644
--- a/ui/js/component/video/internal/player.jsx
+++ b/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;
diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss
index 745b2d494..aff720a7b 100644
--- a/ui/scss/component/_video.scss
+++ b/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
{