src/renderer/component/overlay/view.jsx

@@ -2,14 +2,12 @@
 import React from 'react';
 
 type Props = {
-  showOverlay: ?boolean,
   children: ?React.node,
 };
 
 class Overlay extends React.PureComponent<Props> {
   render() {
-    const { showOverlay, children } = this.props;
+    const { children } = this.props;
-    if (!showOverlay) return '';
     return <div className="overlay">{children}</div>;
   }
 }

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

@@ -118,7 +118,7 @@ class VideoPlayer extends React.PureComponent {
     if (mediaElement) {
       mediaElement.removeEventListener('click', this.togglePlayListener);
     }
-    this.props.doPause();
+    // this.props.doPause();
   }
 
   toggleFullScreen(event) {

src/renderer/component/video/view.jsx

@@ -6,6 +6,7 @@ import type { Claim } from 'types/claim';
 import VideoPlayer from './internal/player';
 import VideoPlayButton from './internal/play-button';
 import LoadingScreen from './internal/loading-screen';
+import ReactDOM from 'react-dom';
 
 const SPACE_BAR_KEYCODE = 32;
 
@@ -59,7 +60,6 @@ class Video extends React.PureComponent<Props> {
     window.addEventListener('keydown', this.handleKeyDown);
 
     const { showOverlay, doHideOverlay, uri, playingUri, overlayed } = this.props;
-    // debugger;
     if (showOverlay && uri === playingUri && !overlayed) {
       doHideOverlay();
     }
@@ -80,10 +80,27 @@ class Video extends React.PureComponent<Props> {
     const { overlayed, doShowOverlay, mediaPaused } = this.props;
     if (!overlayed && !mediaPaused) {
       doShowOverlay();
+      this.moveVideoToOverlay();
     }
     window.removeEventListener('keydown', this.handleKeyDown);
   }
 
+  moveVideoToOverlay() {
+    const topContainer = document.getElementById('video__overlay_id_top_container');
+    const container = document.getElementById('video__overlay_id');
+    const video = this.mediaContainer.media.getElementsByTagName("video")[0];
+    topContainer.classList.remove('hiddenContainer');
+    container.appendChild(video);
+    video.play();
+  }
+
+  destroyVideoOnOverlay() {
+    const topContainer = document.getElementById('video__overlay_id_top_container');
+    const videoContainer = document.getElementById('video__overlay_id');
+    topContainer.classList.add('hiddenContainer');
+    videoContainer.innerHTML = '';
+  }
+
   handleKeyDown(event: SyntheticKeyboardEvent<*>) {
     const { searchBarFocused } = this.props;
     if (!searchBarFocused && event.keyCode === SPACE_BAR_KEYCODE) {
@@ -126,6 +143,7 @@ class Video extends React.PureComponent<Props> {
   playContent() {
     const { play, uri, showOverlay, playingUri, doHideOverlay } = this.props;
     if (playingUri && showOverlay) {
+      this.destroyVideoOnOverlay();
       doHideOverlay();
     }
     play(uri);
@@ -205,6 +223,7 @@ class Video extends React.PureComponent<Props> {
                 hiddenControls={hiddenControls}
                 overlayed={overlayed}
                 doHideOverlay={doHideOverlay}
+                ref={mediaContainer => this.mediaContainer = mediaContainer }
               />
             )}
           </div>

src/renderer/component/videoOverlay/view.jsx

@@ -29,33 +29,52 @@ class VideoOverlay extends React.Component<Props> {
     const { doCancelPlay, doHideOverlay } = this.props;
     doCancelPlay();
     doHideOverlay();
+    this.destroyMediaPlayer();
   }
 
   returnToMedia() {
     const { navigate, playingUri, doHideOverlay } = this.props;
     doHideOverlay();
+    this.destroyMediaPlayer();
     navigate('/show', { uri: playingUri });
   }
 
   renderPlayOrPauseButton() {
     const { mediaPaused, doPause, doPlay } = this.props;
     if (mediaPaused) {
-      return <Button noPadding button="secondary" icon={icons.PLAY} onClick={() => doPlay()} />;
+      return <Button noPadding button="secondary" icon={icons.PLAY} onClick={() => this.getPlayer().play()} />;
     }
-    return <Button noPadding button="secondary" icon={icons.PAUSE} onClick={() => doPause()} />;
+    return <Button noPadding button="secondary" icon={icons.PAUSE} onClick={() => this.getPlayer().pause()} />;
+  }
+
+  getPlayer() {
+    return document.getElementById('video__overlay_id').getElementsByTagName("video")[0];
+  }
+
+  destroyMediaPlayer(){
+    const topContainer = document.getElementById('video__overlay_id_top_container')
+    const videoContainer = document.getElementById('video__overlay_id');
+    topContainer.classList.add('hiddenContainer');
+    videoContainer.innerHTML = '';
   }
 
   render() {
     const { playingUri, showOverlay } = this.props;
-    if (!showOverlay) return '';
 
     return (
       <Overlay>
-        <VideoOverlayHeader uri={playingUri} onClose={this.closeVideo} />
+        {(showOverlay && <VideoOverlayHeader uri={playingUri} onClose={this.closeVideo} />)}
 
         <div className="video__overlay">
-          <Video className="content__embedded" uri={playingUri} overlayed hiddenControls />
+          {/* <Video className="content__embedded" uri={playingUri} overlayed hiddenControls /> */}
-          <div className="video__mask">
+          {/* <div id="asdf"></div> */}
+          <div className="video content__embedded hiddenContainer" id="video__overlay_id_top_container">
+            <div className="content__view">
+              <div className="content__view--container" id="video__overlay_id">
+              </div>
+            </div>
+          </div>
+          {(showOverlay && <div className="video__mask" id="video_mask">
             {this.renderPlayOrPauseButton()}
             <Button
               noPadding
@@ -63,7 +82,7 @@ class VideoOverlay extends React.Component<Props> {
               icon={icons.MAXIMIZE}
               onClick={() => this.returnToMedia()}
             />
-          </div>
+          </div>)}
         </div>
       </Overlay>
     );

src/renderer/scss/component/_overlay.scss

@@ -1,3 +1,6 @@
+.hiddenContainer {
+  display: none;
+}
 .overlay {
   position: fixed;
   max-height: 50%;