update publishing messages:

increase lbrytv limit until tv transcoding warn about bitrate warn about strange types more reliably convey size limit message update faq tv publish limit mention tv upload limit upfront warning text handle error case, reduce flicker appstrings fix cancelled input case console bail
lbryio · Mar 6, 2020 · 3f3680a · 3f3680a
1 parent f07182b
commit 3f3680a
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 24 deletions.
diff --git a/flow-typed/web-file.js b/flow-typed/web-file.js
@@ -2,5 +2,6 @@ declare type WebFile = {
   name: string,
   title?: string,
   path?: string,
-  size?: string,
+  size: string,
+  type: string,
 }
diff --git a/static/app-strings.json b/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."
+}
diff --git a/ui/component/publishFile/view.jsx b/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) {
-        showToast(__('File uploads currently limited to 500MB. Download the app for unlimited publishing.'));
+      if (file && file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT) {
+        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 && (
-            <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>
-          )}
+          {getMessage()}
         </React.Fragment>
       }
     />

diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
@@ -208,8 +208,8 @@ a {
 }
 
 .help--warning {
-  background-color: var(--color-warning);
-  color: var(--color-black);
+  @extend .help;
+  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);

diff --git a/ui/scss/themes/dark.scss b/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;

diff --git a/ui/scss/themes/light.scss b/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);