update publishing messages: (#3794)

increase lbrytv limit until tv transcoding
warn about bitrate
warn about strange types
more reliably convey size limit message

flow-typed/web-file.js

@@ -2,5 +2,6 @@ declare type WebFile = {
   name: string,
   title?: string,
   path?: string,
-  size?: string,
+  size: string,
+  type: string,
 }

static/app-strings.json

@@ -1003,7 +1003,6 @@
   "Model": "Model",
   "Binary": "Binary",
   "Other": "Other",
-  "For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.": "For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.",
   "Show reposts": "Show reposts",
   "Show reposts from the creators you follow.": "Show reposts from the creators you follow.",
   "You can try refreshing to fix it. If you still have issues, your anti-virus software or firewall may be preventing startup.": "You can try refreshing to fix it. If you still have issues, your anti-virus software or firewall may be preventing startup.",
@@ -1017,5 +1016,15 @@
   "Add tags that are relevant to your content. If mature content, ensure it is tagged mature. Tag abuse and missing mature tags will not be tolerated.": "Add tags that are relevant to your content. If mature content, ensure it is tagged mature. Tag abuse and missing mature tags will not be tolerated.",
   "%selectTagsLabel% (%number% left)": "%selectTagsLabel% (%number% left)",
   "Matching": "Matching",
-  "No matching tags": "No matching tags"
+  "No matching tags": "No matching tags",
+  "Please check your deposit amount.": "Please check your deposit amount.",
+  "For video content, use MP4s in H264/AAC format and a friendly bitrate (1080p) for more reliable streaming.": "For video content, use MP4s in H264/AAC format and a friendly bitrate (1080p) for more reliable streaming.",
+  "Checking your video...": "Checking your video...",
+  "Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (1080p) for more reliable streaming.": "Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (1080p) for more reliable streaming.",
+  "Publishing Guide": "Publishing Guide",
+  "This is equivalent to a password. Do not post or share this.": "This is equivalent to a password. Do not post or share this.",
+  "For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.": "For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.",
+  "Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.": "Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.",
+  "Your video has a bitrate over 6 mbps. We suggest transcoding to provide viewers the best experience.": "Your video has a bitrate over 6 mbps. We suggest transcoding to provide viewers the best experience.",
+  "Your video has a bitrate over 5 mbps. We suggest transcoding to provide viewers the best experience.": "Your video has a bitrate over 5 mbps. We suggest transcoding to provide viewers the best experience."
 }

ui/component/publishFile/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { regexInvalidURI } from 'lbry-redux';
 import FileSelector from 'component/common/file-selector';
 import Button from 'component/button';
@@ -33,6 +33,24 @@ function PublishFile(props: Props) {
     clearPublish,
   } = props;
 
+  const [duration, setDuration] = useState(0);
+  const [size, setSize] = useState(0);
+  const [oversized, setOversized] = useState(false);
+  const [isVid, setIsVid] = useState(false);
+  const RECOMMENDED_BITRATE = 6000000;
+  const TV_PUBLISH_SIZE_LIMIT: number = 1073741824;
+  const UPLOAD_SIZE_MESSAGE = 'Lbrytv uploads are limited to 1 GB. Download the app for unrestricted publishing.';
+
+  // clear warnings
+  useEffect(() => {
+    if (!filePath || filePath === '' || filePath.name === '') {
+      setDuration(0);
+      setSize(0);
+      setIsVid(false);
+      setOversized(false);
+    }
+  }, [filePath]);
+
   let currentFile = '';
   if (filePath) {
     if (typeof filePath === 'string') {
@@ -42,19 +60,129 @@ function PublishFile(props: Props) {
     }
   }
 
+  function getBitrate(size, duration) {
+    const s = Number(size);
+    const d = Number(duration);
+    if (s && d) {
+      return (s * 8) / d;
+    } else {
+      return 0;
+    }
+  }
+
+  function getMessage() {
+    // @if TARGET='web'
+    if (oversized) {
+      return (
+        <p className="help--error">
+          {__(UPLOAD_SIZE_MESSAGE)}{' '}
+          <Button button="link" label={__('Publishing Guide')} href="https://lbry.com/faq/video-publishing-guide" />
+        </p>
+      );
+    }
+    // @endif
+    if (isVid && duration && getBitrate(size, duration) > RECOMMENDED_BITRATE) {
+      return (
+        <p className="help--warning">
+          {__('Your video has a bitrate over 5 mbps. We suggest transcoding to provide viewers the best experience.')}{' '}
+          <Button button="link" label={__('Publishing Guide')} href="https://lbry.com/faq/video-publishing-guide" />
+        </p>
+      );
+    }
+
+    if (isVid && !duration) {
+      return (
+        <p className="help--warning">
+          {__(
+            'Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.'
+          )}{' '}
+          <Button button="link" label={__('Publishing Guide')} href="https://lbry.com/faq/video-publishing-guide" />
+        </p>
+      );
+    }
+
+    if (!!isStillEditing && name) {
+      return (
+        <p className="help">
+          {__("If you don't choose a file, the file from your existing claim %name% will be used", { name: name })}
+        </p>
+      );
+    }
+    // @if TARGET='web'
+    if (!isStillEditing) {
+      return (
+        <p className="help">
+          {__(
+            'For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming. Lbrytv uploads are restricted to 1GB.'
+          )}{' '}
+          <Button button="link" label={__('Publishing Guide')} href="https://lbry.com/faq/video-publishing-guide" />
+        </p>
+      );
+    }
+    // @endif
+
+    // @if TARGET='app'
+    if (!isStillEditing) {
+      return (
+        <p className="help">
+          {__(
+            'For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.'
+          )}{' '}
+          <Button button="link" label={__('Publishing Guide')} href="https://lbry.com/faq/video-publishing-guide" />
+        </p>
+      );
+    }
+    // @endif
+  }
+
   function handleFileChange(file: WebFile) {
     const { showToast } = props;
-
+    window.URL = window.URL || window.webkitURL;
     // if electron, we'll set filePath to the path string because SDK is handling publishing.
     // if web, we set the filePath (dumb name) to the File() object
     // File.path will be undefined from web due to browser security, so it will default to the File Object.
+    setSize(file ? file.size : 0);
+    setDuration(0);
+    setOversized(false);
+
+    // select file, start to select a new one, then cancel
+    if (!file) {
+      updatePublishForm({ filePath: '', name: '' });
+      return;
+    }
+    // if video, extract duration so we can warn about bitrate
+    const contentType = file.type.split('/');
+    const isVideo = contentType[0] === 'video';
+    const isMp4 = contentType[1] === 'mp4';
+    if (isVideo) {
+      if (isMp4) {
+        const video = document.createElement('video');
+        video.preload = 'metadata';
+        video.onloadedmetadata = function() {
+          setDuration(video.duration);
+          setSize(file.size);
+          setIsVid(isVideo);
+          window.URL.revokeObjectURL(video.src);
+        };
+        video.onerror = function() {
+          setDuration(0);
+          setSize(file.size);
+          setIsVid(isVideo);
+        };
+        video.src = window.URL.createObjectURL(file);
+      } else {
+        setSize(file.size);
+        setDuration(0);
+        setIsVid(isVideo);
+      }
+    }
 
     // @if TARGET='web'
     // we only need to enforce file sizes on 'web'
-    const PUBLISH_SIZE_LIMIT: number = 512000000;
     if (typeof file !== 'string') {
-      if (file && file.size && Number(file.size) > PUBLISH_SIZE_LIMIT) {
+      if (file && file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT) {
-        showToast(__('File uploads currently limited to 500MB. Download the app for unlimited publishing.'));
+        setOversized(true);
+        showToast(__(UPLOAD_SIZE_MESSAGE));
         updatePublishForm({ filePath: '', name: '' });
         return;
       }
@@ -103,19 +231,7 @@ function PublishFile(props: Props) {
       actions={
         <React.Fragment>
           <FileSelector disabled={disabled} currentPath={currentFile} onFileChosen={handleFileChange} />
-          {!isStillEditing && (
+          {getMessage()}
-            <p className="help">
-              {__(
-                'For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.'
-              )}{' '}
-              <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/how-to-publish" />.
-            </p>
-          )}
-          {!!isStillEditing && name && (
-            <p className="help">
-              {__("If you don't choose a file, the file from your existing claim %name% will be used", { name: name })}
-            </p>
-          )}
         </React.Fragment>
       }
     />

ui/scss/init/_gui.scss

@@ -208,8 +208,8 @@ a {
 }
 
 .help--warning {
-  background-color: var(--color-warning);
+  @extend .help;
-  color: var(--color-black);
+  color: var(--color-text-help-warning);
 }
 
 .help--inline {
@@ -246,6 +246,11 @@ a {
   color: var(--color-text-error);
 }
 
+.help--error {
+  @extend .help;
+  color: var(--color-text-error);
+}
+
 .thumbnail-preview {
   width: var(--thumbnail-preview-width);
   height: var(--thumbnail-preview-height);

ui/scss/themes/dark.scss

@@ -44,6 +44,7 @@
   // Text
   --color-text: #eeeeee;
   --color-text-error: #f5748c;
+  --color-text-help-warning: #f5ec74;
   --color-text-empty: #bbbbbb;
   --color-text-help: #bbbbbb;
   --color-text-subtitle: #9fafc0;

ui/scss/themes/light.scss

@@ -24,6 +24,7 @@
   --color-text-help: #999999;
   --color-text-subtitle: #767676;
   --color-text-warning: #212529;
+  --color-text-help-warning: #989b20;
   --color-text-warning--background: var(--lbry-yellow-1);
   --color-blockquote: var(--color-gray-3);