Hide controls on overlayed videos only.

src/renderer/component/video/index.js

@@ -40,6 +40,7 @@ const select = (state, props) => ({
   searchBarFocused: selectSearchBarFocused(state),
   showOverlay: selectShowOverlay(state),
   overlayed: props.overlayed,
+  hiddenControls: props.hiddenControls,
 });
 
 const perform = dispatch => ({

src/renderer/component/video/internal/player.jsx

@@ -29,7 +29,7 @@ class VideoPlayer extends React.PureComponent {
 
   componentDidMount() {
     const container = this.media;
-    const { contentType, changeVolume, volume, position, claim } = this.props;
+    const { contentType, changeVolume, volume, position, claim, hiddenControls } = this.props;
 
     const loadedMetadata = () => {
       this.setState({ hasMetadata: true, startedPlaying: true });
@@ -55,7 +55,7 @@ class VideoPlayer extends React.PureComponent {
       player.append(
         this.file(),
         container,
-        { autoplay: true, controls: true },
+        { autoplay: true, controls: !hiddenControls },
         renderMediaCallback.bind(this)
       );
     }
@@ -88,7 +88,7 @@ class VideoPlayer extends React.PureComponent {
   }
 
   componentDidUpdate() {
-    const { contentType, downloadCompleted } = this.props;
+    const { contentType, downloadCompleted, hiddenControls } = this.props;
     const { startedPlaying } = this.state;
 
     if (this.playableType() && !startedPlaying && downloadCompleted) {
@@ -99,7 +99,7 @@ class VideoPlayer extends React.PureComponent {
       } else {
         player.render(this.file(), container, {
           autoplay: true,
-          controls: true,
+          controls: !hiddenControls,
         });
       }
     }

src/renderer/component/video/view.jsx

@@ -43,6 +43,7 @@ type Props = {
   searchBarFocused: boolean,
   showOverlay: boolean,
   overlayed: boolean,
+  hiddenControls: boolean,
 };
 
 class Video extends React.PureComponent<Props> {
@@ -148,6 +149,7 @@ class Video extends React.PureComponent<Props> {
       mediaPosition,
       className,
       obscureNsfw,
+      hiddenControls,
     } = this.props;
 
     const isPlaying = playingUri === uri;
@@ -197,6 +199,7 @@ class Video extends React.PureComponent<Props> {
                 uri={uri}
                 paused={mediaPaused}
                 position={mediaPosition}
+                hiddenControls={hiddenControls}
               />
             )}
           </div>

src/renderer/component/videoOverlay/view.jsx

@@ -16,7 +16,9 @@ class VideoOverlay extends React.Component<Props> {
     return (
       <Overlay>
         <VideoOverlayHeader uri={playingUri} onClose={cancelPlay} />
-        <Video className="content__embedded" uri={playingUri} overlayed />
+        <div className="overlayeada">
+          <Video className="content__embedded" uri={playingUri} overlayed hiddenControls />
+        </div>
       </Overlay>
     );
   }

src/renderer/scss/component/_overlay.scss

@@ -8,6 +8,19 @@
   right: 1%;
   z-index: 3;
   box-shadow: var(--box-shadow-layer);
+
+  &:hover {
+    background-color: rgba(0,0,0, .6);
+  }
+}
+
+.overlayeada {
+  z-index: 20;
+  background: transparent;
+
+  &:hover {
+    background-color: rgba(0,0,0, .9);
+  }
 }
 
 .video_overlay__header {