src/ui/component/fileRender/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import type { Claim } from 'types/claim';
 import { remote } from 'electron';
 import React from 'react';
 import LoadingScreen from 'component/common/loading-screen';
@@ -14,6 +15,7 @@ import ThreeViewer from 'component/viewers/threeViewer';
 type Props = {
   mediaType: string,
   poster?: string,
+  claim: Claim,
   source: {
     stream: string => void,
     fileName: string,
@@ -150,7 +152,9 @@ class FileRender extends React.PureComponent<Props> {
     if (!viewer && readableFiles.includes(mediaType)) {
       viewer = <DocumentViewer source={{ stream, fileType, contentType }} theme={currentTheme} />;
     }
-    // temp workaround
+
+    // @if TARGET='web'
+    // temp workaround to disabled paid content on web
     if (claim && claim.value.stream.metadata.fee && claim.value.stream.metadata.fee.amount > 0) {
       const paidMessage = __(
         'Currently, only free content is available on lbry.tv. Try viewing it in the desktop app.'
@@ -158,6 +162,8 @@ class FileRender extends React.PureComponent<Props> {
       const paid = <LoadingScreen status={paidMessage} spinner={false} />;
       return paid;
     }
+    // @endif
+
     // Message Error
     const unsupportedMessage = __("Sorry, looks like we can't preview this file.");
     const unsupported = <LoadingScreen status={unsupportedMessage} spinner={false} />;

src/ui/component/fileViewer/internal/player.jsx

@@ -1,4 +1,5 @@
 // @flow
+import 'babel-polyfill';
 import type { Claim } from 'types/claim';
 import * as React from 'react';
 // @if TARGET='app'
@@ -107,7 +108,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     }
   }
 
-  playMedia() {
+  async playMedia() {
     const container = this.mediaContainer.current;
     const {
       downloadCompleted,
@@ -121,7 +122,6 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     } = this.props;
 
     // @if TARGET='app'
-
     const renderMediaCallback = error => {
       if (error) this.setState({ unplayable: true });
     };
@@ -147,6 +147,10 @@ class MediaPlayer extends React.PureComponent<Props, State> {
         currentMediaContainer.removeChild(currentMediaContainer.firstChild);
       }
 
+      // A slight delay is a hacky way to improve support for videos that aren't web-optimized
+      // Works... slightly better than not having it ¯\_(ツ)_/¯
+      await this.sleep(400);
+
       player.append(
         {
           name: fileName,
@@ -195,6 +199,10 @@ class MediaPlayer extends React.PureComponent<Props, State> {
   }
 
   // @if TARGET='app'
+  sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
   refreshMetadata() {
     const { onStartCb } = this.props;
     this.setState({ hasMetadata: true });
@@ -354,7 +362,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
         {loadingStatus && <LoadingScreen status={loadingStatus} spinner={isLoading} />}
         {isFileReady && <FileRender claim={claim} source={fileSource} mediaType={mediaType} />}
         <div
-          className='content__view--container'
+          className="content__view--container"
           style={{ opacity: isLoading ? 0 : 1 }}
           ref={this.mediaContainer}
         />

src/ui/component/viewers/documentViewer.jsx

@@ -32,21 +32,24 @@ class DocumentViewer extends React.PureComponent<Props, State> {
 
   componentDidMount() {
     const { source } = this.props;
-    const stream = source.stream('utf8');
 
-    let data = '';
+    if (source && source.stream) {
+      const stream = source.stream('utf8');
 
-    stream.on('data', chunk => {
+      let data = '';
-      data += chunk;
-    });
 
-    stream.on('end', () => {
+      stream.on('data', chunk => {
-      this.setState({ content: data, loading: false });
+        data += chunk;
-    });
+      });
 
-    stream.on('error', () => {
+      stream.on('end', () => {
-      this.setState({ error: true, loading: false });
+        this.setState({ content: data, loading: false });
-    });
+      });
+
+      stream.on('error', () => {
+        this.setState({ error: true, loading: false });
+      });
+    }
   }
 
   renderDocument() {