Hookup buttons stop/pause, and return to claim file.

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() {

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()),
 });
 

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>
+    );
   }
 }