Revert "Switch thumbnail server: spee.ch --> vanwanet #497"

Reverting until vanwa can provide us failure details to handle accordingly.

static/app-strings.json

@@ -1358,7 +1358,6 @@
   "Are you sure you want to purchase %claim_title%?": "Are you sure you want to purchase %claim_title%?",
   "Discover": "Discover",
   "Thumbnail upload service may be down, try again later.": "Thumbnail upload service may be down, try again later.",
-  "There was an error in the upload. The format or extension might not be supported.": "There was an error in the upload. The format or extension might not be supported.",
   "You are currently editing your upload.": "You are currently editing your upload.",
   "You are currently editing this claim.": "You are currently editing this claim.",
   "My content for this post...": "My content for this post...",

ui/component/channelEdit/view.jsx

@@ -322,6 +322,7 @@ function ChannelForm(props: Props) {
               uri={uri}
               thumbnailPreview={thumbnailPreview}
               allowGifs
+              showDelayedMessage={isUpload.thumbnail}
               setThumbUploadError={setThumbError}
               thumbUploadError={thumbError}
             />

ui/component/channelThumbnail/view.jsx

@@ -20,8 +20,10 @@ type Props = {
   claim: ?ChannelClaim,
   doResolveUri: (string) => void,
   isResolving: boolean,
+  showDelayedMessage?: boolean,
   noLazyLoad?: boolean,
   hideStakedIndicator?: boolean,
+  xsmall?: boolean,
   noOptimization?: boolean,
   setThumbUploadError: (boolean) => void,
   ThumbUploadError: boolean,
@@ -40,6 +42,7 @@ function ChannelThumbnail(props: Props) {
     claim,
     doResolveUri,
     isResolving,
+    showDelayedMessage = false,
     noLazyLoad,
     hideStakedIndicator = false,
     setThumbUploadError,
@@ -88,6 +91,11 @@ function ChannelThumbnail(props: Props) {
         'channel-thumbnail--resolving': isResolving,
       })}
     >
+      {showDelayedMessage ? (
+        <div className="channel-thumbnail--waiting">
+          {__('This will be visible in a few minutes after you submit this form.')}
+        </div>
+      ) : (
         <OptimizedImage
           alt={__('Channel profile picture')}
           className={!channelThumbnail ? 'channel-thumbnail__default' : 'channel-thumbnail__custom'}
@@ -101,6 +109,7 @@ function ChannelThumbnail(props: Props) {
             }
           }}
         />
+      )}
       {!hideStakedIndicator && <ChannelStakedIndicator uri={uri} claim={claim} />}
     </div>
   );

ui/component/selectAsset/view.jsx

@@ -1,14 +1,16 @@
 // @flow
 import React from 'react';
 import FileSelector from 'component/common/file-selector';
-import { IMG_CDN_PUBLISH_URL } from 'constants/cdn_urls';
+import * as SPEECH_URLS from 'constants/speech_urls';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import Card from 'component/common/card';
+import { generateThumbnailName } from 'util/generate-thumbnail-name';
 import usePersistedState from 'effects/use-persisted-state';
 
 const accept = '.png, .jpg, .jpeg, .gif';
-const STATUS = { READY: 'READY', UPLOADING: 'UPLOADING' };
+const SPEECH_READY = 'READY';
+const SPEECH_UPLOADING = 'UPLOADING';
 
 type Props = {
   assetName: string,
@@ -24,7 +26,7 @@ function SelectAsset(props: Props) {
   const { onUpdate, onDone, assetName, currentValue, recommended, title, inline } = props;
   const [pathSelected, setPathSelected] = React.useState('');
   const [fileSelected, setFileSelected] = React.useState<any>(null);
-  const [uploadStatus, setUploadStatus] = React.useState(STATUS.READY);
+  const [uploadStatus, setUploadStatus] = React.useState(SPEECH_READY);
   const [useUrl, setUseUrl] = usePersistedState('thumbnail-upload:mode', false);
   const [url, setUrl] = React.useState(currentValue);
   const [error, setError] = React.useState();
@@ -35,7 +37,7 @@ function SelectAsset(props: Props) {
     };
 
     const onSuccess = (thumbnailUrl) => {
-      setUploadStatus(STATUS.READY);
+      setUploadStatus(SPEECH_READY);
       onUpdate(thumbnailUrl, !useUrl);
 
       if (onDone) {
@@ -43,27 +45,22 @@ function SelectAsset(props: Props) {
       }
     };
 
-    setUploadStatus(STATUS.UPLOADING);
+    setUploadStatus(SPEECH_UPLOADING);
 
     const data = new FormData();
-    data.append('file-input', fileSelected);
+    const name = generateThumbnailName();
-    data.append('upload', 'Upload');
+    data.append('name', name);
+    data.append('file', fileSelected);
 
-    return fetch(IMG_CDN_PUBLISH_URL, {
+    return fetch(SPEECH_URLS.SPEECH_PUBLISH, {
       method: 'POST',
       body: data,
     })
       .then((response) => response.json())
-      .then((json) => {
+      .then((json) => (json.success ? onSuccess(`${json.data.serveUrl}`) : uploadError(json.message)))
-        return json.type === 'success'
-          ? onSuccess(`${json.message}`)
-          : uploadError(
-              json.message || __('There was an error in the upload. The format or extension might not be supported.')
-            );
-      })
       .catch((err) => {
         uploadError(err.message);
-        setUploadStatus(STATUS.READY);
+        setUploadStatus(SPEECH_READY);
       });
   }
 
@@ -73,7 +70,7 @@ function SelectAsset(props: Props) {
   const selectedLabel = pathSelected ? __('URL Selected') : __('File Selected');
 
   let fileSelectorLabel;
-  if (uploadStatus === STATUS.UPLOADING) {
+  if (uploadStatus === SPEECH_UPLOADING) {
     fileSelectorLabel = __('Uploading...');
   } else {
     // Include the same label/recommendation for both 'URL' and 'UPLOAD'.
@@ -99,7 +96,7 @@ function SelectAsset(props: Props) {
         ) : (
           <FileSelector
             autoFocus
-            disabled={uploadStatus === STATUS.UPLOADING}
+            disabled={uploadStatus === SPEECH_UPLOADING}
             label={fileSelectorLabel}
             name="assetSelector"
             currentPath={pathSelected}
@@ -122,7 +119,7 @@ function SelectAsset(props: Props) {
             button="primary"
             type="submit"
             label={useUrl ? __('Done') : __('Upload')}
-            disabled={!useUrl && (uploadStatus === STATUS.UPLOADING || !pathSelected || !fileSelected)}
+            disabled={!useUrl && (uploadStatus === SPEECH_UPLOADING || !pathSelected || !fileSelected)}
             onClick={() => doUploadAsset()}
           />
         )}

ui/constants/cdn_urls.js

@@ -1,2 +0,0 @@
-export const IMG_CDN_PUBLISH_URL = 'https://thumbs.odycdn.com/upload.php';
-export const IMG_CDN_STATUS_URL = 'https://thumbs.odycdn.com/status.php';

ui/redux/actions/publish.js

@@ -18,7 +18,7 @@ import { push } from 'connected-react-router';
 import analytics from 'analytics';
 import { doOpenModal } from 'redux/actions/app';
 import { CC_LICENSES, COPYRIGHT, OTHER, NONE, PUBLIC_DOMAIN } from 'constants/licenses';
-import { IMG_CDN_PUBLISH_URL, IMG_CDN_STATUS_URL } from 'constants/cdn_urls';
+import { SPEECH_STATUS, SPEECH_PUBLISH } from 'constants/speech_urls';
 import * as THUMBNAIL_STATUSES from 'constants/thumbnail_upload_statuses';
 import { creditsToString } from 'util/format-credits';
 import Lbry from 'lbry';
@@ -355,10 +355,10 @@ export const doResetThumbnailStatus = () => (dispatch: Dispatch) => {
     },
   });
 
-  return fetch(IMG_CDN_STATUS_URL)
+  return fetch(SPEECH_STATUS)
     .then((res) => res.json())
-    .then((json) => {
+    .then((status) => {
-      if (json.status !== 'online') {
+      if (status.disabled) {
         throw Error();
       }
 
@@ -400,8 +400,16 @@ export const doUploadThumbnail = (
   path?: any,
   cb?: (string) => void
 ) => (dispatch: Dispatch) => {
+  const downMessage = __('Thumbnail upload service may be down, try again later.');
   let thumbnail, fileExt, fileName, fileType;
 
+  const makeid = () => {
+    let text = '';
+    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    for (let i = 0; i < 24; i += 1) text += possible.charAt(Math.floor(Math.random() * 62));
+    return text;
+  };
+
   const uploadError = (error = '') => {
     dispatch(
       batchActions(
@@ -420,32 +428,28 @@ export const doUploadThumbnail = (
 
   dispatch({
     type: ACTIONS.UPDATE_PUBLISH_FORM,
-    data: { thumbnailError: undefined },
+    data: {
+      thumbnailError: undefined,
+    },
   });
 
   const doUpload = (data) => {
-    return fetch(IMG_CDN_PUBLISH_URL, {
+    return fetch(SPEECH_PUBLISH, {
       method: 'POST',
       body: data,
     })
       .then((res) => res.text())
       .then((text) => (text.length ? JSON.parse(text) : {}))
       .then((json) => {
-        if (json.type !== 'success') {
+        if (!json.success) return uploadError(json.message || downMessage);
-          return uploadError(
-            json.message || __('There was an error in the upload. The format or extension might not be supported.')
-          );
-        }
-
         if (cb) {
-          cb(json.message);
+          cb(json.data.serveUrl);
         }
-
         return dispatch({
           type: ACTIONS.UPDATE_PUBLISH_FORM,
           data: {
             uploadThumbnailStatus: THUMBNAIL_STATUSES.COMPLETE,
-            thumbnail: json.message,
+            thumbnail: json.data.serveUrl,
           },
         });
       })
@@ -454,7 +458,7 @@ export const doUploadThumbnail = (
 
         // This sucks but ¯\_(ツ)_/¯
         if (message === 'Failed to fetch') {
-          message = __('Thumbnail upload service may be down, try again later.');
+          message = downMessage;
         }
 
         uploadError(message);
@@ -473,9 +477,10 @@ export const doUploadThumbnail = (
       fileType = 'image/png';
 
       const data = new FormData();
+      const name = makeid();
+      data.append('name', name);
       // $FlowFixMe
-      data.append('file-input', { uri: 'file://' + filePath, type: fileType, name: fileName });
+      data.append('file', { uri: 'file://' + filePath, type: fileType, name: fileName });
-      data.append('upload', 'Upload');
       return doUpload(data);
     });
   } else {
@@ -493,10 +498,11 @@ export const doUploadThumbnail = (
     }
 
     const data = new FormData();
+    const name = makeid();
     const file = thumbnailBlob || (thumbnail && new File([thumbnail], fileName, { type: fileType }));
+    data.append('name', name);
     // $FlowFixMe
-    data.append('file-input', file);
+    data.append('file', file);
-    data.append('upload', 'Upload');
     return doUpload(data);
   }
 };