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

This commit is contained in:
Travis Eden 2017-12-19 13:20:53 -05:00
parent 2f409a6cbd
commit 92de445e1e
6 changed files with 52 additions and 52 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -8,19 +8,11 @@ import NsfwOverlay from "component/nsfwOverlay";
class Video extends React.PureComponent { class Video extends React.PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
// console.log("video view props", props);
this.state = { this.state = {
showNsfwHelp: false, 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() { componentWillUnmount() {
this.props.cancelPlay(); this.props.cancelPlay();
} }
@ -65,9 +57,15 @@ class Video extends React.PureComponent {
volume, volume,
uri, uri,
videoPause, videoPause,
// setVideoPause,
} = this.props; } = 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 isPlaying = playingUri === uri;
const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0; const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
@ -103,8 +101,6 @@ class Video extends React.PureComponent {
const poster = metadata.thumbnail; const poster = metadata.thumbnail;
return ( return (
<div>
<p>videoPause: {videoPause}</p>
<div <div
className={klasses.join(" ")} className={klasses.join(" ")}
onMouseEnter={this.handleMouseOver.bind(this)} onMouseEnter={this.handleMouseOver.bind(this)}
@ -123,6 +119,8 @@ class Video extends React.PureComponent {
downloadCompleted={fileInfo.completed} downloadCompleted={fileInfo.completed}
changeVolume={changeVolume} changeVolume={changeVolume}
volume={volume} volume={volume}
videoPause={videoPause}
confirmVideoPause={confirmVideoPause}
/> />
))} ))}
{!isPlaying && ( {!isPlaying && (
@ -135,7 +133,6 @@ class Video extends React.PureComponent {
)} )}
{this.state.showNsfwHelp && <NsfwOverlay />} {this.state.showNsfwHelp && <NsfwOverlay />}
</div> </div>
</div>
); );
} }
} }

View file

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