add unsupported messages

.eslintrc.json

@@ -18,7 +18,8 @@
     "i18n": true,
     "__": true,
     "__n": true,
-    "app": true
+    "app": true,
+    "IS_WEB": true
   },
   "rules": {
     "no-multi-spaces": 0,

src/ui/component/common/file-selector.jsx

@@ -35,7 +35,6 @@ class FileSelector extends React.PureComponent<Props> {
 
   constructor() {
     super();
-    this.input = null;
     // @if TARGET='web'
     this.fileInput = React.createRef();
     // @endif
@@ -67,19 +66,20 @@ class FileSelector extends React.PureComponent<Props> {
     );
   }
 
-  handleFileInputSelection() {
+  // TODO: Add this back for web publishing
-    const { files } = this.fileInput.current;
+  // handleFileInputSelection() {
-    if (!files) {
+  //   const { files } = this.fileInput.current;
-      return;
+  //   if (!files) {
-    }
+  //     return;
+  //   }
 
-    const filePath = files[0];
+  //   const filePath = files[0];
-    const fileName = filePath.name;
+  //   const fileName = filePath.name;
 
-    if (this.props.onFileChosen) {
+  //   if (this.props.onFileChosen) {
-      this.props.onFileChosen(filePath, fileName);
+  //     this.props.onFileChosen(filePath, fileName);
-    }
+  //   }
-  }
+  // }
 
   input: ?HTMLInputElement;
 
@@ -91,27 +91,18 @@ class FileSelector extends React.PureComponent<Props> {
 
     return (
       <React.Fragment>
-        {/* @if TARGET='app' */}
         <FormField
-          webkitdirectory='true'
+          webkitdirectory="true"
-          className='form-field--copyable'
+          className="form-field--copyable"
-          type='text'
+          type="text"
-          ref={input => {
+          ref={this.fileInput}
-            if (this.input) this.input = input;
-          }}
           onFocus={() => {
-            if (this.input) this.input.select();
+            if (this.fileInput) this.fileInput.current.select();
           }}
-          readOnly='readonly'
+          readOnly="readonly"
           value={currentPath || __('No File Chosen')}
-          inputButton={
+          inputButton={<Button button="primary" label={label} onClick={this.handleButtonClick} />}
-            <Button button='primary' onClick={() => this.handleButtonClick()} label={label} />
-          }
         />
-        {/* @endif */}
-        {/* @if TARGET='web' */}
-        <input type='file' ref={this.fileInput} onChange={() => this.handleFileInputSelection()} />
-        {/* @endif */}
       </React.Fragment>
     );
   }

src/ui/component/common/unsupported-on-web.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Button from 'component/button';
+
+export default function UnsupportedOnWeb() {
+  return (
+    <div className="card__content help help--warning">
+      This page is not currently supported on the web.{' '}
+      <Button button="link" label={__('Download the desktop app')} href="https://lbry.com/get" />{' '}
+      for full feature support.
+    </div>
+  );
+}

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

@@ -144,7 +144,6 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     else {
       // Temp hack to help in some metadata loading cases
       setTimeout(() => {
-
         const currentMediaContainer = this.mediaContainer.current;
 
         // Clean any potential rogue instances
@@ -210,7 +209,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     }
     const playerElement = this.mediaContainer.current;
     if (playerElement) {
-      if(playerElement.children && playerElement.children[0]) {
+      if (playerElement.children && playerElement.children[0]) {
         playerElement.children[0].play();
       }
     }
@@ -291,6 +290,15 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     const { mediaType, contentType } = this.props;
     const { unplayable, fileSource, hasMetadata } = this.state;
 
+    if (['audio', 'video'].indexOf(mediaType) === -1) {
+      return {
+        isLoading: false,
+        loadingStatus: __(
+          'This file type is not currently supported on lbry.tv. Try viewing it in the desktop app.'
+        ),
+      };
+    }
+
     const loader: { isLoading: boolean, loadingStatus: ?string } = {
       isLoading: false,
       loadingStatus: null,

src/ui/component/publishForm/view.jsx

@@ -12,6 +12,7 @@ import ChannelSection from 'component/selectChannel';
 import classnames from 'classnames';
 import FileSelector from 'component/common/file-selector';
 import SelectThumbnail from 'component/selectThumbnail';
+import UnsupportedOnWeb from 'component/common/unsupported-on-web';
 import BidHelpText from './internal/bid-help-text';
 import NameHelpText from './internal/name-help-text';
 import LicenseType from './internal/license-type';
@@ -346,8 +347,14 @@ class PublishForm extends React.PureComponent<Props> {
     const shortUri = buildURI({ contentName: name });
 
     return (
+      <React.Fragment>
+        {IS_WEB && <UnsupportedOnWeb />}
         <Form onSubmit={this.handlePublish}>
-        <section className={classnames('card card--section', { 'card--disabled': publishing })}>
+          <section
+            className={classnames('card card--section', {
+              'card--disabled': IS_WEB || publishing,
+            })}
+          >
             <header className="card__header">
               <h2 className="card__title card__title--flex-between">
                 {__('Content')}
@@ -495,7 +502,11 @@ class PublishForm extends React.PureComponent<Props> {
                   {__(
                     'The LBRY URL is the exact address where people find your content (ex. lbry://myvideo).'
                   )}{' '}
-                <Button button="link" label={__('Learn more')} href="https://lbry.io/faq/naming" />
+                  <Button
+                    button="link"
+                    label={__('Learn more')}
+                    href="https://lbry.io/faq/naming"
+                  />
                 </p>
               </header>
 
@@ -637,6 +648,7 @@ class PublishForm extends React.PureComponent<Props> {
 
           {!formDisabled && !formValid && this.renderFormErrors()}
         </Form>
+      </React.Fragment>
     );
   }
 }

src/ui/modal/modalRouter/view.jsx

@@ -95,6 +95,8 @@ class ModalRouter extends React.PureComponent<Props, State> {
   }
 
   checkShowCreditIntro(props: Props) {
+    // @if TARGET='app'
+    // This doesn't make sense to show until the web has wallet support
     const { balance, page, isCreditIntroAcknowledged } = props;
 
     if (
@@ -104,6 +106,7 @@ class ModalRouter extends React.PureComponent<Props, State> {
     ) {
       return MODALS.INSUFFICIENT_CREDITS;
     }
+    // @endif
 
     return undefined;
   }

src/ui/page/report/view.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import Button from 'component/button';
 import { FormField } from 'component/common/form';
-import { Lbry, doToast } from 'lbry-redux';
+import { doToast } from 'lbry-redux';
+import { Lbryio } from 'lbryinc';
 import Page from 'component/page';
 
 class ReportPage extends React.Component {
@@ -26,7 +27,7 @@ class ReportPage extends React.Component {
       this.setState({
         submitting: true,
       });
-      Lbry.report_bug({ message }).then(() => {
+      Lbryio.call('event', 'desktop_error', { error_message }).then(() => {
         this.setState({
           submitting: false,
         });

src/ui/page/settings/view.jsx

@@ -2,10 +2,12 @@
 import * as ICONS from 'constants/icons';
 import * as SETTINGS from 'constants/settings';
 import * as React from 'react';
+import classnames from 'classnames';
 import { FormField, FormFieldPrice, Form } from 'component/common/form';
 import Button from 'component/button';
 import Page from 'component/page';
 import FileSelector from 'component/common/file-selector';
+import UnsupportedOnWeb from 'component/common/unsupported-on-web';
 
 export type Price = {
   currency: string,
@@ -147,12 +149,13 @@ class SettingsPage extends React.PureComponent<Props, State> {
 
     return (
       <Page>
+        {IS_WEB && <UnsupportedOnWeb />}
         {noDaemonSettings ? (
           <section className="card card--section">
             <div className="card__title">{__('Failed to load settings.')}</div>
           </section>
         ) : (
-          <React.Fragment>
+          <div className={classnames({ 'card--disabled': IS_WEB })}>
             <section className="card card--section">
               <header className="card__header">
                 <h2 className="card__title">{__('Download Directory')}</h2>
@@ -430,7 +433,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                 />
               </div>
             </section>
-          </React.Fragment>
+          </div>
         )}
       </Page>
     );

webpack.web.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const merge = require('webpack-merge');
 const baseConfig = require('./webpack.base.config.js');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { DefinePlugin } = require('webpack');
 
 const STATIC_ROOT = path.resolve(__dirname, 'static/');
 const DIST_ROOT = path.resolve(__dirname, 'dist/');
@@ -55,6 +56,9 @@ const webConfig = {
         to: `${DIST_ROOT}/web/server.js`,
       },
     ]),
+    new DefinePlugin({
+      IS_WEB: JSON.stringify(true),
+    }),
   ],
 };