diff --git a/src/renderer/component/video/internal/player.jsx b/src/renderer/component/video/internal/player.jsx index 51a39fc2c..ed5a2339e 100644 --- a/src/renderer/component/video/internal/player.jsx +++ b/src/renderer/component/video/internal/player.jsx @@ -84,7 +84,11 @@ class VideoPlayer extends React.PureComponent { componentWillReceiveProps(next) { const el = this.media.children[0]; - if (!this.props.paused && next.paused && !el.paused) el.pause(); + if (!this.props.paused && next.paused && !el.paused) { + el.pause(); + } else if (this.props.paused && !next.paused && el.paused) { + el.play(); + } } componentDidUpdate() { diff --git a/src/renderer/component/videoOverlay/index.js b/src/renderer/component/videoOverlay/index.js index c6ad66ceb..f78d70399 100644 --- a/src/renderer/component/videoOverlay/index.js +++ b/src/renderer/component/videoOverlay/index.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import { selectPlayingUri } from 'redux/selectors/content'; -import { doSetPlayingUri, doPlayUri } from 'redux/actions/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'; @@ -14,7 +14,7 @@ const select = state => ({ const perform = dispatch => ({ navigate: (path, params) => dispatch(doNavigate(path, params)), cancelPlay: () => dispatch(doSetPlayingUri(null)), - play: uri => dispatch(doPlayUri(uri)), + doPlay: () => dispatch(doPlay()), doPause: () => dispatch(doPause()), }); diff --git a/src/renderer/component/videoOverlay/view.jsx b/src/renderer/component/videoOverlay/view.jsx index 1bc7eb9da..1cd3c6c14 100644 --- a/src/renderer/component/videoOverlay/view.jsx +++ b/src/renderer/component/videoOverlay/view.jsx @@ -7,40 +7,45 @@ import Button from 'component/button'; import * as icons from 'constants/icons'; type Props = { - play: () => void, cancelPlay: () => void, navigate: (string, ?{}) => void, - playingUri: ?string, - play: (string) => void, + doPlay: () => void, doPause: () => void, + playingUri: ?string, mediaPaused: boolean, }; class VideoOverlay extends React.Component<Props> { renderPlayOrPauseButton() { - const { mediaPaused, doPause, play, playingUri } = this.props; + const { mediaPaused, doPause, doPlay } = this.props; if (mediaPaused) { - return <Button noPadding button="secondary" icon={icons.PLAY} onClick={() => play(playingUri)} />; - } else { - return <Button noPadding button="secondary" icon={icons.PAUSE} onClick={() => doPause()} />; + return <Button noPadding button="secondary" icon={icons.PLAY} onClick={() => doPlay()} />; } + return <Button noPadding button="secondary" icon={icons.PAUSE} onClick={() => doPause()} />; } render() { const { playingUri, cancelPlay, navigate } = this.props; if (!playingUri) return ''; const returnToMedia = () => navigate('/show', { uri: playingUri }); - return <Overlay> + return ( + <Overlay> <VideoOverlayHeader uri={playingUri} onClose={cancelPlay} /> <div className="video__overlay"> <Video className="content__embedded" uri={playingUri} overlayed hiddenControls /> <div className="video__mask"> {this.renderPlayOrPauseButton()} - <Button noPadding button="secondary" icon={icons.MAXIMIZE} onClick={() => returnToMedia()}/> + <Button + noPadding + button="secondary" + icon={icons.MAXIMIZE} + onClick={() => returnToMedia()} + /> </div> </div> - </Overlay>; + </Overlay> + ); } }