fixed selector; pause working; still need to call action from child component

src/renderer/component/fileDownloadLink/index.js

@@ -25,7 +25,7 @@ const perform = dispatch => ({
   openInShell: path => dispatch(doOpenFileInShell(path)),
   purchaseUri: uri => dispatch(doPurchaseUri(uri)),
   restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
-  videoPause: val => dispatch(setVideoPause(val)),
+  setVideoPause: val => dispatch(setVideoPause(val)),
 });
 
 export default connect(select, perform)(FileDownloadLink);

src/renderer/component/fileDownloadLink/view.jsx

@@ -42,13 +42,12 @@ class FileDownloadLink extends React.PureComponent {
       purchaseUri,
       costInfo,
       loading,
-      videoPause,
+      setVideoPause,
     } = this.props;
 
     const openFile = () => {
       openInShell(fileInfo.download_path);
-      console.log("FileDownloadLink view");
+      setVideoPause(true);
-      videoPause(true);
     };
 
     if (loading || downloading) {

src/renderer/component/video/index.js

@@ -35,6 +35,7 @@ const perform = dispatch => ({
   play: uri => dispatch(doPlayUri(uri)),
   cancelPlay: () => dispatch(doSetPlayingUri(null)),
   changeVolume: volume => dispatch(doChangeVolume(volume)),
+  setVideoPause: val => dispatch(setVideoPause(val)),
 });
 
 export default connect(select, perform)(Video);

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

@@ -4,9 +4,7 @@ import { Thumbnail } from "component/common";
 import player from "render-media";
 import fs from "fs";
 import LoadingScreen from "./loading-screen";
-
+import { setVideoPause } from "../../../redux/actions/video";
-// import { connect } from "react-redux";
-// import { selectVideoPause } from "redux/selectors/video";
 
 class VideoPlayer extends React.PureComponent {
   static MP3_CONTENT_TYPES = ["audio/mpeg3", "audio/mpeg"];
@@ -23,6 +21,13 @@ class VideoPlayer extends React.PureComponent {
     this.togglePlayListener = this.togglePlay.bind(this);
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.videoPause) {
+      this.refs.media.children[0].pause();
+      this.props.confirmVideoPause(false);
+    }
+  }
+
   componentDidMount() {
     const container = this.refs.media;
     const {
@@ -160,15 +165,13 @@ class VideoPlayer extends React.PureComponent {
   }
 
   render() {
-    const { mediaType, poster, videoPause } = this.props;
+    const { mediaType, poster } = this.props;
     const { hasMetadata, unplayable } = this.state;
     const noMetadataMessage = "Waiting for metadata.";
     const unplayableMessage = "Sorry, looks like we can't play this file.";
 
     const needsMetadata = this.playableType();
 
-    console.log("VideoPlayer render; videoPause:", videoPause);
-
     return (
       <div>
         {["audio", "application"].indexOf(mediaType) !== -1 &&

src/renderer/component/video/view.jsx

@@ -8,19 +8,11 @@ import NsfwOverlay from "component/nsfwOverlay";
 class Video extends React.PureComponent {
   constructor(props) {
     super(props);
-    // console.log("video view props", props);
     this.state = {
       showNsfwHelp: false,
-      // videoPause: false,
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    console.log("VIDEO COMPONENT WILL RECIEVE NEXTPROPS:", nextProps);
-    // this.setState({videoPause: nextProps.videoPause});
-    // this.refs.media.children[0].pause();
-  }
-
   componentWillUnmount() {
     this.props.cancelPlay();
   }
@@ -65,9 +57,15 @@ class Video extends React.PureComponent {
       volume,
       uri,
       videoPause,
+      // setVideoPause,
     } = this.props;
 
-    console.log("VIDEO VIEW videoPause:", videoPause);
+    // console.log("setVideoPause", setVideoPause);
+
+    const confirmVideoPause = val => {
+      console.log("this.props.setVideoPause:", this.props.setVideoPause);
+      this.props.setVideoPause(val);
+    };
 
     const isPlaying = playingUri === uri;
     const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
@@ -103,38 +101,37 @@ class Video extends React.PureComponent {
     const poster = metadata.thumbnail;
 
     return (
-      <div>
+      <div
-        <p>videoPause: {videoPause}</p>
+        className={klasses.join(" ")}
-        <div
+        onMouseEnter={this.handleMouseOver.bind(this)}
-          className={klasses.join(" ")}
+        onMouseLeave={this.handleMouseOut.bind(this)}
-          onMouseEnter={this.handleMouseOver.bind(this)}
+      >
-          onMouseLeave={this.handleMouseOut.bind(this)}
+        {isPlaying &&
-        >
+          (!isReadyToPlay ? (
-          {isPlaying &&
+            <LoadingScreen status={loadStatusMessage} />
-            (!isReadyToPlay ? (
+          ) : (
-              <LoadingScreen status={loadStatusMessage} />
+            <VideoPlayer
-            ) : (
+              filename={fileInfo.file_name}
-              <VideoPlayer
+              poster={poster}
-                filename={fileInfo.file_name}
+              downloadPath={fileInfo.download_path}
-                poster={poster}
+              mediaType={mediaType}
-                downloadPath={fileInfo.download_path}
+              contentType={contentType}
-                mediaType={mediaType}
+              downloadCompleted={fileInfo.completed}
-                contentType={contentType}
+              changeVolume={changeVolume}
-                downloadCompleted={fileInfo.completed}
+              volume={volume}
-                changeVolume={changeVolume}
+              videoPause={videoPause}
-                volume={volume}
+              confirmVideoPause={confirmVideoPause}
-              />
+            />
-            ))}
+          ))}
-          {!isPlaying && (
+        {!isPlaying && (
-            <div
+          <div
-              className="video__cover"
+            className="video__cover"
-              style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
+            style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
-            >
+          >
-              <VideoPlayButton {...this.props} mediaType={mediaType} />
+            <VideoPlayButton {...this.props} mediaType={mediaType} />
-            </div>
+          </div>
-          )}
+        )}
-          {this.state.showNsfwHelp && <NsfwOverlay />}
+        {this.state.showNsfwHelp && <NsfwOverlay />}
-        </div>
       </div>
     );
   }

src/renderer/redux/selectors/video.js

@@ -1,7 +1,7 @@
 import * as settings from "constants/settings";
 import { createSelector } from "reselect";
 
-const _selectState = state => state.video.videoPause || {};
+const _selectState = state => state.video || {};
 
 export const selectVideoPause = createSelector(_selectState, state => {
   console.log("VIDEO PAUSE SELECTOR", state);