From aff0c25a8b6178f8c10d4c3a4d57755fc8f62b81 Mon Sep 17 00:00:00 2001
From: Daniel Dominguez <danielfromarg@gmail.com>
Date: Mon, 4 Jun 2018 15:06:55 -0300
Subject: [PATCH] Fix issue when videoplayer sound was being repeated. 	- Do
 not show overlay when video is paused.

---
 src/renderer/component/overlay/index.js       | 10 +++---
 .../component/video/internal/player.jsx       |  5 ---
 src/renderer/component/video/view.jsx         |  4 +--
 src/renderer/component/videoOverlay/index.js  | 13 +++++---
 src/renderer/component/videoOverlay/view.jsx  | 33 +++++++++++++++----
 5 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/renderer/component/overlay/index.js b/src/renderer/component/overlay/index.js
index 4e1ed7e64..b35797aca 100644
--- a/src/renderer/component/overlay/index.js
+++ b/src/renderer/component/overlay/index.js
@@ -1,14 +1,12 @@
 import { connect } from 'react-redux';
 import { selectShowOverlay } from 'redux/selectors/media';
-import { doHideOverlay } from 'redux/actions/media';
 import Overlay from './view';
 
 const select = state => ({
   showOverlay: selectShowOverlay(state),
 });
 
-const perform = dispatch => ({
-  doCloseOverlay: dispatch(doHideOverlay()),
-});
-
-export default connect(select, perform)(Overlay);
+export default connect(
+  select,
+  null
+)(Overlay);
diff --git a/src/renderer/component/video/internal/player.jsx b/src/renderer/component/video/internal/player.jsx
index ed5a2339e..2c1657945 100644
--- a/src/renderer/component/video/internal/player.jsx
+++ b/src/renderer/component/video/internal/player.jsx
@@ -22,11 +22,6 @@ class VideoPlayer extends React.PureComponent {
     this.toggleFullScreenVideo = this.toggleFullScreen.bind(this);
   }
 
-  // componentWillReceiveProps(nextProps) {
-  //   const el = this.refs.media.children[0];
-  //   if (!this.props.paused && nextProps.paused && !el.paused) el.pause();
-  // }
-
   componentDidMount() {
     const container = this.media;
     const { contentType, changeVolume, volume, position, claim, hiddenControls } = this.props;
diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx
index 5fabd3171..ae3bf070f 100644
--- a/src/renderer/component/video/view.jsx
+++ b/src/renderer/component/video/view.jsx
@@ -76,8 +76,8 @@ class Video extends React.PureComponent<Props> {
   }
 
   componentWillUnmount() {
-    const { overlayed, doShowOverlay } = this.props;
-    if (!overlayed) {
+    const { overlayed, doShowOverlay, mediaPaused } = this.props;
+    if (!overlayed && !mediaPaused) {
       doShowOverlay();
     }
     window.removeEventListener('keydown', this.handleKeyDown);
diff --git a/src/renderer/component/videoOverlay/index.js b/src/renderer/component/videoOverlay/index.js
index f78d70399..3e2c47d81 100644
--- a/src/renderer/component/videoOverlay/index.js
+++ b/src/renderer/component/videoOverlay/index.js
@@ -2,20 +2,25 @@ import { connect } from 'react-redux';
 import { selectPlayingUri } from 'redux/selectors/content';
 import { doSetPlayingUri } from 'redux/actions/content';
 import { doNavigate } from 'redux/actions/navigation';
-import { doPlay, doPause } from 'redux/actions/media';
-import { selectMediaPaused } from 'redux/selectors/media';
+import { doPlay, doPause, doHideOverlay } from 'redux/actions/media';
+import { selectMediaPaused, selectShowOverlay } from 'redux/selectors/media';
 import VideoOverlay from './view';
 
 const select = state => ({
   playingUri: selectPlayingUri(state),
   mediaPaused: selectMediaPaused(state),
+  showOverlay: selectShowOverlay(state),
 });
 
 const perform = dispatch => ({
   navigate: (path, params) => dispatch(doNavigate(path, params)),
-  cancelPlay: () => dispatch(doSetPlayingUri(null)),
+  doCancelPlay: () => dispatch(doSetPlayingUri(null)),
+  doHideOverlay: () => dispatch(doHideOverlay()),
   doPlay: () => dispatch(doPlay()),
   doPause: () => dispatch(doPause()),
 });
 
-export default connect(select, perform)(VideoOverlay);
+export default connect(
+  select,
+  perform
+)(VideoOverlay);
diff --git a/src/renderer/component/videoOverlay/view.jsx b/src/renderer/component/videoOverlay/view.jsx
index 1cd3c6c14..33b703ef4 100644
--- a/src/renderer/component/videoOverlay/view.jsx
+++ b/src/renderer/component/videoOverlay/view.jsx
@@ -7,15 +7,36 @@ import Button from 'component/button';
 import * as icons from 'constants/icons';
 
 type Props = {
-  cancelPlay: () => void,
+  doCancelPlay: () => void,
+  doHideOverlay: () => void,
   navigate: (string, ?{}) => void,
   doPlay: () => void,
   doPause: () => void,
   playingUri: ?string,
   mediaPaused: boolean,
+  showOverlay: boolean,
 };
 
 class VideoOverlay extends React.Component<Props> {
+  constructor() {
+    super();
+
+    (this: any).closeVideo = this.closeVideo.bind(this);
+    (this: any).returnToMedia = this.returnToMedia.bind(this);
+  }
+
+  closeVideo() {
+    const { doCancelPlay, doHideOverlay } = this.props;
+    doCancelPlay();
+    doHideOverlay();
+  }
+
+  returnToMedia() {
+    const { navigate, playingUri, doHideOverlay } = this.props;
+    doHideOverlay();
+    navigate('/show', { uri: playingUri });
+  }
+
   renderPlayOrPauseButton() {
     const { mediaPaused, doPause, doPlay } = this.props;
     if (mediaPaused) {
@@ -25,12 +46,12 @@ class VideoOverlay extends React.Component<Props> {
   }
 
   render() {
-    const { playingUri, cancelPlay, navigate } = this.props;
-    if (!playingUri) return '';
-    const returnToMedia = () => navigate('/show', { uri: playingUri });
+    const { playingUri, showOverlay } = this.props;
+    if (!showOverlay) return '';
+
     return (
       <Overlay>
-        <VideoOverlayHeader uri={playingUri} onClose={cancelPlay} />
+        <VideoOverlayHeader uri={playingUri} onClose={this.closeVideo} />
 
         <div className="video__overlay">
           <Video className="content__embedded" uri={playingUri} overlayed hiddenControls />
@@ -40,7 +61,7 @@ class VideoOverlay extends React.Component<Props> {
               noPadding
               button="secondary"
               icon={icons.MAXIMIZE}
-              onClick={() => returnToMedia()}
+              onClick={() => this.returnToMedia()}
             />
           </div>
         </div>