From 7d9e8bffae118b8e13775385e2c78aa30a26418a Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Thu, 16 Dec 2021 16:16:16 +0800 Subject: [PATCH 1/2] Revert "Remove the delayed thumbnail message for ChannelEdit" This reverts commit a7e571c3b9616d3e7c23dc9e83b37c6b19eb699e. --- ui/component/channelEdit/view.jsx | 1 + ui/component/channelThumbnail/view.jsx | 35 ++++++++++++++++---------- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx index c2ddd6c53..124bdef46 100644 --- a/ui/component/channelEdit/view.jsx +++ b/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} /> diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx index b8858593f..a5ce4cd4b 100644 --- a/ui/component/channelThumbnail/view.jsx +++ b/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,19 +91,25 @@ function ChannelThumbnail(props: Props) { 'channel-thumbnail--resolving': isResolving, })} > - { - if (setThumbUploadError) { - setThumbUploadError(true); - } else { - setThumbLoadError(true); - } - }} - /> + {showDelayedMessage ? ( +
+ {__('This will be visible in a few minutes after you submit this form.')} +
+ ) : ( + { + if (setThumbUploadError) { + setThumbUploadError(true); + } else { + setThumbLoadError(true); + } + }} + /> + )} {!hideStakedIndicator && } ); From 50d1d062ad857c480412235a69feb0d954faa354 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Thu, 16 Dec 2021 16:16:22 +0800 Subject: [PATCH 2/2] Revert "Switch thumbnail server: spee.ch --> vanwanet" This reverts commit 1a0a62058c1b8d6f39e66a04b99cd7aedf6253ec. --- static/app-strings.json | 1 - ui/component/selectAsset/view.jsx | 35 +++++++++++------------ ui/constants/cdn_urls.js | 2 -- ui/redux/actions/publish.js | 46 +++++++++++++++++-------------- 4 files changed, 42 insertions(+), 42 deletions(-) delete mode 100644 ui/constants/cdn_urls.js diff --git a/static/app-strings.json b/static/app-strings.json index 82fa27166..129edbb33 100644 --- a/static/app-strings.json +++ b/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...", diff --git a/ui/component/selectAsset/view.jsx b/ui/component/selectAsset/view.jsx index 06435be47..817f58980 100644 --- a/ui/component/selectAsset/view.jsx +++ b/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(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); - data.append('upload', 'Upload'); + const name = generateThumbnailName(); + 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) => { - 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.') - ); - }) + .then((json) => (json.success ? onSuccess(`${json.data.serveUrl}`) : uploadError(json.message))) .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) { ) : ( doUploadAsset()} /> )} diff --git a/ui/constants/cdn_urls.js b/ui/constants/cdn_urls.js deleted file mode 100644 index 771a900c2..000000000 --- a/ui/constants/cdn_urls.js +++ /dev/null @@ -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'; diff --git a/ui/redux/actions/publish.js b/ui/redux/actions/publish.js index d6a22fc63..591abac2c 100644 --- a/ui/redux/actions/publish.js +++ b/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) => { - if (json.status !== 'online') { + .then((status) => { + 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') { - return uploadError( - json.message || __('There was an error in the upload. The format or extension might not be supported.') - ); - } - + if (!json.success) return uploadError(json.message || downMessage); 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('upload', 'Upload'); + data.append('file', { uri: 'file://' + filePath, type: fileType, name: fileName }); 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('upload', 'Upload'); + data.append('file', file); return doUpload(data); } };