src/renderer/component/video/index.js

@@ -39,8 +39,8 @@ const select = (state, props) => ({
   autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
   searchBarFocused: selectSearchBarFocused(state),
   showOverlay: selectShowOverlay(state),
-  overlayed: props.overlayed,
   hiddenControls: props.hiddenControls,
+  fromOverlay: props.fromOverlay,
 });
 
 const perform = dispatch => ({

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

@@ -47,7 +47,6 @@ class VideoPlayer extends React.PureComponent {
     const ended = () => {
       this.props.doPause();
       this.props.savePosition(claim.claim_id, 0);
-      if (this.props.overlayed) this.props.doHideOverlay();
     };
 
     // use renderAudio override for mp3

src/renderer/component/video/view.jsx

@@ -43,8 +43,10 @@ type Props = {
   play: string => void,
   searchBarFocused: boolean,
   showOverlay: boolean,
-  overlayed: boolean,
   hiddenControls: boolean,
+  fromOverlay: boolean,
+  overlayed: boolean,
+  fromOverlay: boolean,
 };
 
 class Video extends React.PureComponent<Props> {
@@ -59,8 +61,8 @@ class Video extends React.PureComponent<Props> {
     this.handleAutoplay(this.props);
     window.addEventListener('keydown', this.handleKeyDown);
 
-    const { showOverlay, doHideOverlay, uri, playingUri, overlayed } = this.props;
+    const { showOverlay, doHideOverlay, uri, playingUri } = this.props;
-    if (showOverlay && uri === playingUri && !overlayed) {
+    if (showOverlay && uri === playingUri) {
       doHideOverlay();
     }
   }
@@ -74,6 +76,11 @@ class Video extends React.PureComponent<Props> {
     ) {
       this.handleAutoplay(nextProps);
     }
+    if (nextProps.fromOverlay) {
+      this.moveVideoFromOverlayToNormal();
+      this.destroyVideoOnOverlay();
+      this.props.doHideOverlay();
+    }
   }
 
   componentWillUnmount() {
@@ -88,9 +95,24 @@ class Video extends React.PureComponent<Props> {
   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];
+    const videoContainer = this.mediaContainer.media ? this.mediaContainer.media : document.getElementById('insert_video');
-    topContainer.classList.remove('hiddenContainer');
+    const video = videoContainer.getElementsByTagName('video')[0];
-    container.appendChild(video);
+    if (video) {
+      topContainer.classList.remove('hiddenContainer');
+      container.appendChild(video);
+      video.controls = false;
+      video.play();
+    }
+  }
+
+  moveVideoFromOverlayToNormal() {
+    const videoContainer = document.getElementById('video__overlay_id');
+    if (!videoContainer) return;
+    const video = videoContainer.getElementsByTagName('video')[0];
+    if (!video) return;
+    const filePageVideoContainer = document.getElementById('insert_video');
+    filePageVideoContainer.appendChild(video);
+    video.controls = true;
     video.play();
   }
 
@@ -141,12 +163,16 @@ class Video extends React.PureComponent<Props> {
   }
 
   playContent() {
-    const { play, uri, showOverlay, playingUri, doHideOverlay } = this.props;
+    const { play, uri, playingUri, doHideOverlay } = this.props;
-    if (playingUri && showOverlay) {
+    if (playingUri) {
+      if (playingUri === uri) {
+        this.moveVideoFromOverlayToNormal();
+      }
       this.destroyVideoOnOverlay();
       doHideOverlay();
+    } else {
+      play(uri);
     }
-    play(uri);
   }
 
   render() {
@@ -169,8 +195,9 @@ class Video extends React.PureComponent<Props> {
       className,
       obscureNsfw,
       hiddenControls,
-      overlayed,
       doHideOverlay,
+      showOverlay,
+      fromOverlay,
     } = this.props;
 
     const isPlaying = playingUri === uri;
@@ -195,6 +222,7 @@ class Video extends React.PureComponent<Props> {
     const layoverStyle =
       !shouldObscureNsfw && poster ? { backgroundImage: `url("${poster}")` } : {};
 
+    const commingFromOverlay = playingUri === uri;
     return (
       <div className={classnames('video', {}, className)}>
         {isPlaying && (
@@ -203,7 +231,7 @@ class Video extends React.PureComponent<Props> {
               <div className={layoverClass} style={layoverStyle}>
                 <LoadingScreen status={loadStatusMessage} />
               </div>
-            ) : (
+            ) : (commingFromOverlay && fromOverlay ? <div id="insert_video" ref={mediaContainer => this.mediaContainer = mediaContainer} /> :
               <VideoPlayer
                 filename={fileInfo.file_name}
                 poster={poster}
@@ -221,7 +249,6 @@ class Video extends React.PureComponent<Props> {
                 paused={mediaPaused}
                 position={mediaPosition}
                 hiddenControls={hiddenControls}
-                overlayed={overlayed}
                 doHideOverlay={doHideOverlay}
                 ref={mediaContainer => this.mediaContainer = mediaContainer }
               />

src/renderer/component/videoOverlay/view.jsx

@@ -35,8 +35,8 @@ class VideoOverlay extends React.Component<Props> {
   returnToMedia() {
     const { navigate, playingUri, doHideOverlay } = this.props;
     doHideOverlay();
-    this.destroyMediaPlayer();
+    this.destroyMediaPlayer(false);
-    navigate('/show', { uri: playingUri });
+    navigate('/show', { uri: playingUri, fromOverlay: true });
   }
 
   renderPlayOrPauseButton() {
@@ -51,11 +51,11 @@ class VideoOverlay extends React.Component<Props> {
     return document.getElementById('video__overlay_id').getElementsByTagName("video")[0];
   }
 
-  destroyMediaPlayer(){
+  destroyMediaPlayer(clearVideo = true){
     const topContainer = document.getElementById('video__overlay_id_top_container')
     const videoContainer = document.getElementById('video__overlay_id');
     topContainer.classList.add('hiddenContainer');
-    videoContainer.innerHTML = '';
+    if (clearVideo) videoContainer.innerHTML = '';
   }
 
   render() {

src/renderer/page/file/index.js

@@ -33,7 +33,8 @@ const select = (state, props) => ({
   playingUri: selectPlayingUri(state),
   isPaused: selectMediaPaused(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state)
+  autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
+  fromOverlay: Boolean(props.fromOverlay),
 });
 
 const perform = dispatch => ({

src/renderer/page/file/view.jsx

@@ -43,6 +43,7 @@ type Props = {
   setClientSetting: (string, boolean | string) => void,
   checkSubscription: ({ channelName: string, uri: string }) => void,
   subscriptions: Array<{}>,
+  fromOverlay: boolean,
 };
 
 class FilePage extends React.Component<Props> {
@@ -112,6 +113,7 @@ class FilePage extends React.Component<Props> {
       prepareEdit,
       navigate,
       autoplay,
+      fromOverlay,
     } = this.props;
 
     // File info
@@ -139,7 +141,7 @@ class FilePage extends React.Component<Props> {
         ) : (
           <section className="card">
             {isPlayable ? (
-              <Video className="content__embedded" uri={uri} />
+              <Video className="content__embedded" uri={uri} fromOverlay={fromOverlay} />
             ) : (
               <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
             )}

src/renderer/page/show/index.js

@@ -11,6 +11,7 @@ const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
   isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
+  fromOverlay: props.fromOverlay,
 });
 
 const perform = dispatch => ({

src/renderer/page/show/view.jsx

@@ -12,6 +12,7 @@ type Props = {
   resolveUri: string => void,
   uri: string,
   claim: Claim,
+  fromOverlay: boolean,
   blackListedOutpoints: Array<{
     txid: string,
     nout: number,
@@ -34,7 +35,7 @@ class ShowPage extends React.PureComponent<Props> {
   }
 
   render() {
-    const { claim, isResolvingUri, uri, blackListedOutpoints } = this.props;
+    const { claim, isResolvingUri, uri, blackListedOutpoints, fromOverlay } = this.props;
 
     let innerContent = '';
 
@@ -85,7 +86,7 @@ class ShowPage extends React.PureComponent<Props> {
           </Page>
         );
       } else {
-        innerContent = <FilePage uri={uri} />;
+        innerContent = <FilePage uri={uri} fromOverlay={fromOverlay} />;
       }
     }
 

src/renderer/scss/component/_overlay.scss

@@ -17,7 +17,7 @@
 
     .video__mask {
       opacity: 0;
-      background-color: rgba(0,0,8, 0.7); 
+      background-color: rgba(0, 0, 8, 0.7);
       transition: all 0.4s ease-in-out;
       width: 100%;
       height: 100%;