fixed selector; pause working; still need to call action from child component
This commit is contained in:
parent
2f409a6cbd
commit
92de445e1e
6 changed files with 52 additions and 52 deletions
|
@ -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);
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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 &&
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue