Finalized changes and renamed certain CSS elements

src/renderer/js/component/media/index.js

@@ -13,7 +13,7 @@ import {
 import { makeSelectCostInfoForUri } from "redux/selectors/cost_info";
 import { selectShowNsfw } from "redux/selectors/settings";
 import Media from "./view";
-import { selectPlayingUri } from "redux/selectors/content";
+import { selectPlayingUri, selectOverlayable } from "redux/selectors/content";
 
 const select = (state, props) => ({
   costInfo: makeSelectCostInfoForUri(props.uri)(state),
@@ -23,6 +23,7 @@ const select = (state, props) => ({
   isLoading: makeSelectLoadingForUri(props.uri)(state),
   isDownloading: makeSelectDownloadingForUri(props.uri)(state),
   playingUri: selectPlayingUri(state),
+  overlayable: selectOverlayable(state),
   contentType: makeSelectContentTypeForUri(props.uri)(state),
 });
 

src/renderer/js/component/media/view.jsx

@@ -54,27 +54,43 @@ class Media extends React.PureComponent {
   }
 
   determineClasses(isPlaying, mediaType) {
-    const { isLoading, isDownloading } = this.props;
+    const { isLoading, isDownloading, overlay, overlayable } = this.props;
 
     let classes = [];
     classes.push(this.isNSFW() ? "video--obscured " : "");
 
-    if (isLoading || isDownloading) classes.push("video-embedded", "video");
+    if (isLoading || isDownloading) classes.push("media-embedded", "video");
 
     if (mediaType === "video") {
-      classes.push("video-embedded", "video");
+      classes.push("media-embedded", "video");
       classes.push(isPlaying ? "video--active" : "video--hidden");
     } else if (mediaType === "application") {
-      classes.push("video-embedded");
-    } else {
-      if (!isPlaying) classes.push("video-embedded");
+      classes.push("media-embedded");
+    } else if (!isPlaying) {
+      classes.push("media-embedded");
     }
+    if (overlay && overlayable) {
+      classes.push("overlay");
 
-    return classes.join(" ");
+      // We remove media-embedded on the overlay
+      if (classes.indexOf("media-embedded") != -1) {
+        classes.splice(classes.indexOf("media-embedded"), 1);
+      }
+    }
+
+    return classes.join(" ").trim();
   }
 
   render() {
-    const { metadata, playingUri, fileInfo, contentType, uri } = this.props;
+    const {
+      metadata,
+      playingUri,
+      fileInfo,
+      contentType,
+      uri,
+      overlay,
+      overlayable,
+    } = this.props;
 
     const isPlaying = playingUri === uri;
     const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
@@ -83,6 +99,10 @@ class Media extends React.PureComponent {
       fileInfo && fileInfo.file_name
     );
 
+    if (overlay && !overlayable) {
+      return null;
+    }
+
     return (
       <div
         className={this.determineClasses(isPlaying, mediaType)}
@@ -93,7 +113,7 @@ class Media extends React.PureComponent {
           (!isReadyToPlay ? (
             <LoadingScreen status={this.determineLoadStatusMessage()} />
           ) : (
-            <VideoPlayer overlay={false} uri={uri} />
+            <VideoPlayer overlay={overlay} uri={uri} />
           ))}
         {!isPlaying && (
           <div

src/renderer/js/component/videoOverlay/view.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import VideoPlayer from "component/videoPlayer";
+import Media from "component/media";
 
 class VideoOverlay extends React.PureComponent {
   render() {
@@ -13,7 +13,7 @@ class VideoOverlay extends React.PureComponent {
     const isReadyToPlay = (haveFileInfo || isDownloading) && !isLoading;
 
     if (isReadyToPlay && playingUri !== null && currentPage !== "show") {
-      return <VideoPlayer overlay={true} uri={playingUri} />;
+      return <Media overlay={true} uri={playingUri} />;
     }
 
     return null;

src/renderer/js/component/videoPlayer/index.js

@@ -2,7 +2,11 @@ import React from "react";
 import { connect } from "react-redux";
 import { doChangeVolume } from "redux/actions/app";
 import { doNavigate } from "redux/actions/navigation";
-import { doSetPlayingUri, doSetTime } from "redux/actions/content";
+import {
+  doSetPlayingUri,
+  doSetTime,
+  doSetOverlayable,
+} from "redux/actions/content";
 import {
   makeSelectMetadataForUri,
   makeSelectContentTypeForUri,
@@ -25,6 +29,7 @@ const perform = dispatch => ({
   setTime: currentTime => dispatch(doSetTime(currentTime)),
   changeVolume: volume => dispatch(doChangeVolume(volume)),
   cancelPlay: () => dispatch(doSetPlayingUri(null)),
+  setOverlayable: overlayable => dispatch(doSetOverlayable(overlayable)),
 });
 
 export default connect(select, perform)(VideoPlayer);

src/renderer/js/component/videoPlayer/view.jsx

@@ -31,7 +31,6 @@ class VideoPlayer extends React.PureComponent {
       filename: _filename,
       downloadPath: _downloadPath,
       completed: _completed,
-      overlayable: false,
     };
 
     this.togglePlayListener = this.togglePlay.bind(this);
@@ -47,10 +46,8 @@ class VideoPlayer extends React.PureComponent {
     };
     const renderMediaCallback = err => {
       if (err) {
-        this.setState({
-          unplayable: true,
-          overlayable: false,
-        });
+        this.setState({ unplayable: true });
+        this.props.setOverlayable(false);
       }
     };
     // Handle fullscreen change for the Windows platform
@@ -66,9 +63,9 @@ class VideoPlayer extends React.PureComponent {
     // not all media is "overlayable" so this has to manually set/unset for such media
     // by default it is true for A/V, but it is set to false if the player errs
     if (["video", "audio"].indexOf(mediaType) !== -1) {
-      this.setState({ overlayable: true });
+      this.props.setOverlayable(true);
     } else {
-      this.setState({ overlayable: false });
+      this.props.setOverlayable(false);
     }
 
     // use renderAudio override for mp3
@@ -124,7 +121,7 @@ class VideoPlayer extends React.PureComponent {
       mediaElement.removeEventListener("click", this.togglePlayListener);
       const currentTime = mediaElement.currentTime;
       if (currentTime) {
-        this.props.setTime(mediaElement.currentTime);
+        this.props.setTime(currentTime);
       }
     }
   }
@@ -140,6 +137,7 @@ class VideoPlayer extends React.PureComponent {
     audio.autoplay = autoplay;
     audio.controls = true;
     audio.src = downloadPath;
+    audio.style = "width: 100%;";
     container.appendChild(audio);
   }
 
@@ -197,46 +195,47 @@ class VideoPlayer extends React.PureComponent {
     return ["audio", "video"].indexOf(mediaType) !== -1;
   }
 
+  displayOverlayButtons() {
+    const { uri, navigate, cancelPlay } = this.props;
+    return (
+      <div>
+        <Link
+          className="button-close"
+          icon="icon-times"
+          onClick={() => cancelPlay()}
+        />
+        <Link
+          className="button-open-page"
+          icon="icon-expand"
+          onClick={() => navigate("/show", { uri })}
+        />
+      </div>
+    );
+  }
+
   render() {
-    const { metadata, overlay, uri, cancelPlay, navigate } = this.props;
-    const { mediaType } = this.state;
-    const { hasMetadata, unplayable, overlayable } = this.state;
+    const { metadata, overlay } = this.props;
+    const { hasMetadata, unplayable, mediaType } = this.state;
     const noMetadataMessage = "Waiting for metadata.";
     const unplayableMessage = "Sorry, looks like we can't play this file.";
 
     const poster = metadata.thumbnail;
     const needsMetadata = this.isPlayableType();
-    const displayOverlay = overlay && overlayable;
 
     return (
-      <div className={displayOverlay ? "overlay" : ""}>
+      <div>
         {["audio", "application"].indexOf(mediaType) !== -1 &&
-          !displayOverlay &&
           (!this.isPlayableType() || hasMetadata) &&
-          !unplayable && <Thumbnail src={poster} className="video-embedded" />}
+          !unplayable && <Thumbnail src={poster} className="media-embedded" />}
         {this.isPlayableType() &&
-          !displayOverlay &&
           !hasMetadata &&
-          !unplayable && <LoadingScreen status={noMetadataMessage} />}
+          !unplayable &&
+          !overlay && <LoadingScreen status={noMetadataMessage} />}
         {unplayable &&
-          (!displayOverlay && (
+          !overlay && (
             <LoadingScreen status={unplayableMessage} spinner={false} />
-          ))}
-
-        {displayOverlay && (
-          <Link
-            className="button-close"
-            icon="icon-times"
-            onClick={() => cancelPlay()}
-          />
-        )}
-        {displayOverlay && (
-          <Link
-            className="button-open-page"
-            icon="icon-expand"
-            onClick={() => navigate("/show", { uri })}
-          />
-        )}
+          )}
+        {overlay && this.displayOverlayButtons()}
 
         <div ref={ref => (this.media = ref)} className="media" />
       </div>

src/renderer/js/constants/action_types.js

@@ -8,6 +8,7 @@ export const DAEMON_VERSION_MATCH = "DAEMON_VERSION_MATCH";
 export const DAEMON_VERSION_MISMATCH = "DAEMON_VERSION_MISMATCH";
 export const VOLUME_CHANGED = "VOLUME_CHANGED";
 export const SET_CURRENT_TIME = "SET_CURRENT_TIME";
+export const SET_OVERLAYABLE = "SET_OVERLAYABLE";
 
 // Navigation
 export const CHANGE_AFTER_AUTH_PATH = "CHANGE_AFTER_AUTH_PATH";

src/renderer/js/page/file/view.jsx

@@ -66,7 +66,7 @@ class FilePage extends React.PureComponent {
       <section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
         <div className="show-page-media">
           {isPlayable ? (
-            <Media className="video-embedded" uri={uri} />
+            <Media className="media-embedded" uri={uri} overlay={false} />
           ) : metadata && metadata.thumbnail ? (
             <Thumbnail src={metadata.thumbnail} />
           ) : (

src/renderer/js/redux/actions/content.js

@@ -547,3 +547,12 @@ export function doSetTime(currentTime) {
     });
   };
 }
+
+export function doSetOverlayable(overlayable) {
+  return function(dispatch, getState) {
+    dispatch({
+      type: types.SET_OVERLAYABLE,
+      data: { overlayable },
+    });
+  };
+}

src/renderer/js/redux/reducers/content.js

@@ -89,6 +89,12 @@ reducers[types.SET_CURRENT_TIME] = function(state, action) {
   });
 };
 
+reducers[types.SET_OVERLAYABLE] = function(state, action) {
+  return Object.assign({}, state, {
+    overlayable: action.data.overlayable,
+  });
+};
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

src/renderer/js/redux/selectors/content.js

@@ -54,3 +54,8 @@ export const selectCurrentTime = createSelector(
   _selectState,
   state => state.currentTime
 );
+
+export const selectOverlayable = createSelector(
+  _selectState,
+  state => state.overlayable
+);

src/renderer/scss/_vars.scss

@@ -27,7 +27,7 @@ $text-color: #000;
   /* Misc */
   --content-max-width: 1000px;
   --nsfw-blur-intensity: 20px;
-  --height-video-embedded: $width-page-constrained * 9 / 16 ;
+  --height-media-embedded: $width-page-constrained * 9 / 16 ;
 
   /* Font */
   --font-size: 16px;