src/renderer/component/videoOverlay/index.js

@@ -1,14 +1,21 @@
 import { connect } from 'react-redux';
 import { selectPlayingUri } from 'redux/selectors/content';
-import { doSetPlayingUri } from 'redux/actions/content';
+import { doSetPlayingUri, doPlayUri } from 'redux/actions/content';
+import { doNavigate } from 'redux/actions/navigation';
+import { doPlay, doPause } from 'redux/actions/media';
+import { selectMediaPaused } from 'redux/selectors/media';
 import VideoOverlay from './view';
 
 const select = state => ({
   playingUri: selectPlayingUri(state),
+  mediaPaused: selectMediaPaused(state),
 });
 
 const perform = dispatch => ({
+  navigate: (path, params) => dispatch(doNavigate(path, params)),
   cancelPlay: () => dispatch(doSetPlayingUri(null)),
+  play: uri => dispatch(doPlayUri(uri)),
+  doPause: () => dispatch(doPause()),
 });
 
 export default connect(select, perform)(VideoOverlay);

src/renderer/component/videoOverlay/view.jsx

@@ -2,25 +2,45 @@
 import React from 'react';
 import Video from 'component/video';
 import Overlay from 'component/overlay';
-import VideoOverlayHeader from '../videoOverlayHeader';
+import VideoOverlayHeader from 'component/videoOverlayHeader';
+import Button from 'component/button';
+import * as icons from 'constants/icons';
 
 type Props = {
+  play: () => void,
   cancelPlay: () => void,
+  navigate: (string, ?{}) => void,
   playingUri: ?string,
+  play: (string) => void,
+  doPause: () => void,
+  mediaPaused: boolean,
 };
 
 class VideoOverlay extends React.Component<Props> {
+  renderPlayOrPauseButton() {
+    const { mediaPaused, doPause, play, playingUri } = this.props;
+    if (mediaPaused) {
+      return <Button noPadding button="secondary" icon={icons.PLAY} onClick={() => play(playingUri)} />;
+    } else {
+      return <Button noPadding button="secondary" icon={icons.PAUSE} onClick={() => doPause()} />;
+    }
+  }
+
   render() {
-    const { playingUri, cancelPlay } = this.props;
+    const { playingUri, cancelPlay, navigate } = this.props;
     if (!playingUri) return '';
-    return (
+    const returnToMedia = () => navigate('/show', { uri: playingUri });
-      <Overlay>
+    return <Overlay>
         <VideoOverlayHeader uri={playingUri} onClose={cancelPlay} />
-        <div className="overlayeada">
+
+        <div className="video__overlay">
           <Video className="content__embedded" uri={playingUri} overlayed hiddenControls />
+          <div className="video__mask">
+            {this.renderPlayOrPauseButton()}
+            <Button noPadding button="secondary" icon={icons.MAXIMIZE} onClick={() => returnToMedia()}/>
           </div>
-      </Overlay>
+        </div>
-    );
+      </Overlay>;
   }
 }
 

src/renderer/constants/icons.js

@@ -25,3 +25,6 @@ export const CHECK = 'CheckCircle';
 export const HEART = 'Heart';
 export const UNLOCK = 'Unlock';
 export const CHECK_SIMPLE = 'Check';
+export const PLAY = 'Play';
+export const MAXIMIZE = 'Maximize2';
+export const PAUSE = 'Pause';

src/renderer/scss/component/_overlay.scss

@@ -9,17 +9,30 @@
   z-index: 3;
   box-shadow: var(--box-shadow-layer);
 
-  &:hover {
+  .video__overlay {
-    background-color: rgba(0,0,0, .6);
+    position: relative;
+
+    .video__mask {
+      opacity: 0;
+      background-color: rgba(0,0,8, 0.7); 
+      transition: all 0.4s ease-in-out;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      top: 0;
+      left: 0;
+      position: absolute;
+      display: flex;
+      flex-direction: row;
+
+      .btn {
+        margin: auto;
+      }
     }
-}
 
-.overlayeada {
+    &:hover .video__mask { 
-  z-index: 20;
+      opacity: 1;
-  background: transparent;
+    }
-
-  &:hover {
-    background-color: rgba(0,0,0, .9);
   }
 }