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 {