Fix issue when videoplayer sound was being repeated.

- Do not show overlay when video is paused.

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 => ({
+export default connect(
-  doCloseOverlay: dispatch(doHideOverlay()),
+  select,
-});
+  null
-
+)(Overlay);
-export default connect(select, perform)(Overlay);

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;

src/renderer/component/video/view.jsx

@@ -76,8 +76,8 @@ class Video extends React.PureComponent<Props> {
   }
 
   componentWillUnmount() {
-    const { overlayed, doShowOverlay } = this.props;
+    const { overlayed, doShowOverlay, mediaPaused } = this.props;
-    if (!overlayed) {
+    if (!overlayed && !mediaPaused) {
       doShowOverlay();
     }
     window.removeEventListener('keydown', this.handleKeyDown);

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 { doPlay, doPause, doHideOverlay } from 'redux/actions/media';
-import { selectMediaPaused } from 'redux/selectors/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);

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;
+    const { playingUri, showOverlay } = this.props;
-    if (!playingUri) return '';
+    if (!showOverlay) return '';
-    const returnToMedia = () => navigate('/show', { uri: playingUri });
+
     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>