Merge pull request #1434 from lbryio/viewer-fix

Fix files don't display correctly in-app anymore

CHANGELOG.md

@@ -27,7 +27,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
    * Fix alternate row shading for transactions on dark theme ([#1355](https://github.com/lbryio/lbry-app/issues/#1355))
    * Fix Description box on Publish (dark theme) ([#1356](https://github.com/lbryio/lbry-app/issues/#1356))
    * Fix spacing in search suggestions ([#1422])(https://github.com/lbryio/lbry-app/pull/1422))
-
+   * Fix text/HTML files don't display correctly in-app anymore ([#1379])(https://github.com/lbryio/lbry-app/issues/1379)
 
 ## [0.21.3] - 2018-04-23
 

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

@@ -165,6 +165,7 @@ class VideoPlayer extends React.PureComponent {
     const { hasMetadata, unplayable } = this.state;
     const noMetadataMessage = 'Waiting for metadata.';
     const unplayableMessage = "Sorry, looks like we can't play this file.";
+    const hideMedia = this.playableType() && !hasMetadata && !unplayable;
 
     return (
       <React.Fragment>
@@ -176,6 +177,8 @@ class VideoPlayer extends React.PureComponent {
           !unplayable && <LoadingScreen status={noMetadataMessage} />}
         {unplayable && <LoadingScreen status={unplayableMessage} spinner={false} />}
         <div
+          className={'content__view--container'}
+          style={{ opacity: hideMedia ? 0 : 1 }}
           ref={container => {
             this.media = container;
           }}

src/renderer/modal/modalAffirmPurchase/view.jsx

@@ -9,7 +9,11 @@ class ModalAffirmPurchase extends React.PureComponent {
   }
 
   render() {
-    const { cancelPurchase, metadata: { title }, uri } = this.props;
+    const {
+      cancelPurchase,
+      metadata: { title },
+      uri,
+    } = this.props;
 
     return (
       <Modal

src/renderer/modal/modalFileTimeout/view.jsx

@@ -3,7 +3,9 @@ import { Modal } from 'modal/modal';
 
 class ModalFileTimeout extends React.PureComponent {
   render() {
-    const { metadata: { title } } = this.props;
+    const {
+      metadata: { title },
+    } = this.props;
 
     return (
       <Modal isOpen contentLabel={__('Download failed')} onConfirmed={closeModal}>

src/renderer/scss/component/_content.scss

@@ -35,8 +35,24 @@
   }
 }
 
-.content__view {
+.content__view,
-  margin-top: -56.25%;
+.content__view--container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content__view--container {
+  iframe {
+    background: #fff;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .content__loading {