Add max bitrate messaging

Disable form on error

Fix resetting

ui/component/publishFile/view.jsx

@@ -52,6 +52,7 @@ type Props = {
   channelSignature: { signature?: string, signing_ts?: string },
   isCheckingLivestreams: boolean,
   setWaitForFile: (boolean) => void,
+  setOverMaxBitrate: (boolean) => void,
   fileSource: string,
   changeFileSource: (string) => void,
   inEditMode: boolean,
@@ -88,12 +89,14 @@ function PublishFile(props: Props) {
     channelSignature,
     isCheckingLivestreams,
     setWaitForFile,
+    setOverMaxBitrate,
     fileSource,
     changeFileSource,
     inEditMode,
   } = props;
 
   const RECOMMENDED_BITRATE = 6000000;
+  const MAX_BITRATE = 12000000;
   const TV_PUBLISH_SIZE_LIMIT_BYTES = WEB_PUBLISH_SIZE_LIMIT_GB * 1073741824;
   const TV_PUBLISH_SIZE_LIMIT_GB_STR = String(WEB_PUBLISH_SIZE_LIMIT_GB);
 
@@ -191,6 +194,7 @@ function PublishFile(props: Props) {
     if (!filePath || filePath === '') {
       setCurrentFile('');
       setOversized(false);
+      setOverMaxBitrate(false);
       updateFileInfo(0, 0, false);
     } else if (typeof filePath !== 'string') {
       // Update currentFile file
@@ -260,10 +264,24 @@ function PublishFile(props: Props) {
       );
     }
     // @endif
-    if (isVid && duration && getBitrate(size, duration) > RECOMMENDED_BITRATE) {
+    let bitRate = getBitrate(size, duration);
+    let overMaxBitrate = bitRate > MAX_BITRATE;
+    if (overMaxBitrate) {
+      setOverMaxBitrate(true);
+    } else {
+      setOverMaxBitrate(false);
+    }
+
+    if (isVid && duration && bitRate > RECOMMENDED_BITRATE) {
       return (
         <p className="help--warning">
-          {__('Your video has a bitrate over 5 Mbps. We suggest transcoding to provide viewers the best experience.')}{' '}
+          {overMaxBitrate
+            ? __(
+                'Your video has a bitrate over ~12 Mbps and cannot be processed at this time. 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.'
+              )}{' '}
           <Button
             button="link"
             label={__('Upload Guide')}
@@ -377,6 +395,7 @@ function PublishFile(props: Props) {
     const { showToast } = props;
     window.URL = window.URL || window.webkitURL;
     setOversized(false);
+    setOverMaxBitrate(false);
 
     // select file, start to select a new one, then cancel
     if (!file) {
@@ -441,7 +460,7 @@ function PublishFile(props: Props) {
     if (file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT_BYTES) {
       setOversized(true);
       showToast(__(UPLOAD_SIZE_MESSAGE));
-      updatePublishForm({ filePath: '', name: '' });
+      updatePublishForm({ filePath: '' });
       return;
     }
     // @endif

ui/component/publishForm/view.jsx

@@ -210,6 +210,7 @@ function PublishForm(props: Props) {
   const [prevFileText, setPrevFileText] = React.useState('');
 
   const [waitForFile, setWaitForFile] = useState(false);
+  const [overMaxBitrate, setOverMaxBitrate] = useState(false);
   const [livestreamData, setLivestreamData] = React.useState([]);
   const [signedMessage, setSignedMessage] = React.useState({ signature: undefined, signing_ts: undefined });
   const signedMessageStr = JSON.stringify(signedMessage);
@@ -238,6 +239,7 @@ function PublishForm(props: Props) {
     name &&
     isNameValid(name) &&
     title &&
+    !overMaxBitrate &&
     bid &&
     thumbnail &&
     !bidError &&
@@ -598,6 +600,7 @@ function PublishForm(props: Props) {
         livestreamData={livestreamData}
         subtitle={customSubtitle}
         setWaitForFile={setWaitForFile}
+        setOverMaxBitrate={setOverMaxBitrate}
         isCheckingLivestreams={isCheckingLivestreams}
         checkLivestreams={fetchLivestreams}
         channelId={claimChannelId}
@@ -682,7 +685,7 @@ function PublishForm(props: Props) {
         </div>
         <p className="help">
           {!formDisabled && !formValid ? (
-            <PublishFormErrors mode={mode} waitForFile={waitingForFile} />
+            <PublishFormErrors mode={mode} waitForFile={waitingForFile} overMaxBitrate={overMaxBitrate} />
           ) : (
             <I18nMessage
               tokens={{

ui/component/publishFormErrors/view.jsx

@@ -16,6 +16,7 @@ type Props = {
   thumbnail: string,
   thumbnailError: boolean,
   waitForFile: boolean,
+  overMaxBitrate: boolean,
 };
 
 function PublishFormErrors(props: Props) {
@@ -31,6 +32,7 @@ function PublishFormErrors(props: Props) {
     thumbnail,
     thumbnailError,
     waitForFile,
+    overMaxBitrate,
   } = props;
   // These are extra help
   // If there is an error it will be presented as an inline error as well
@@ -41,6 +43,7 @@ function PublishFormErrors(props: Props) {
   return (
     <div className="error__text">
       {waitForFile && <div>{__('Choose a replay file, or select None')}</div>}
+      {overMaxBitrate && <div>{__('Bitrate is over the max, please transcode or choose another file.')}</div>}
       {!title && <div>{__('A title is required')}</div>}
       {!name && <div>{__('A URL is required')}</div>}
       {name && !isNameValid(name) && INVALID_NAME_ERROR}