Thumb: make CDN limit an env so we can change easily

.env.defaults

@@ -21,6 +21,7 @@ THUMBNAIL_CARDS_CDN_URL=https://cards.odysee.com/
 THUMBNAIL_HEIGHT=220
 THUMBNAIL_WIDTH=390
 THUMBNAIL_QUALITY=85
+THUMBNAIL_CDN_SIZE_LIMIT_BYTES=2097152
 WELCOME_VERSION=1.0
 
 # STRIPE

config.js

@@ -26,6 +26,7 @@ const config = {
   THUMBNAIL_HEIGHT: process.env.THUMBNAIL_HEIGHT,
   THUMBNAIL_WIDTH: process.env.THUMBNAIL_WIDTH,
   THUMBNAIL_QUALITY: process.env.THUMBNAIL_QUALITY,
+  THUMBNAIL_CDN_SIZE_LIMIT_BYTES: process.env.THUMBNAIL_CDN_SIZE_LIMIT_BYTES,
   SITE_TITLE: process.env.SITE_TITLE,
   SITE_NAME: process.env.SITE_NAME,
   SITE_DESCRIPTION: process.env.SITE_DESCRIPTION,

static/app-strings.json

@@ -317,7 +317,6 @@
   "No tags added": "No tags added",
   "Choose an enticing thumbnail": "Choose an enticing thumbnail",
   "Take a snapshot from your video": "Take a snapshot from your video",
-  "Upload your thumbnail to": "Upload your thumbnail to",
   "Add a price to this file": "Add a price to this file",
   "All content fees are charged in LBRY Credits. For alternative payment methods, the number of LBRY Credits charged will be adjusted based on the value of LBRY Credits at the time of purchase.": "All content fees are charged in LBRY Credits. For alternative payment methods, the number of LBRY Credits charged will be adjusted based on the value of LBRY Credits at the time of purchase.",
   "Additional Options": "Additional Options",
@@ -1204,8 +1203,8 @@
   "Use a URL": "Use a URL",
   "Edit Cover Image": "Edit Cover Image",
   "Cover Image": "Cover Image",
-  "(6.25:1)": "(6.25:1)",
-  "(1:1)": "(1:1)",
+  "(6.25:1 ratio, %max_size%MB max)": "(6.25:1 ratio, %max_size%MB max)",
+  "(1:1 ratio, %max_size%MB max)": "(1:1 ratio, %max_size%MB max)",
   "You Followed Your First Channel!": "You Followed Your First Channel!",
   "You followed %CHANNEL_NAME%!": "You followed %CHANNEL_NAME%!",
   "Unfollowed %CHANNEL_NAME%.": "Unfollowed %CHANNEL_NAME%.",
@@ -1234,7 +1233,8 @@
   "LBRY Status": "LBRY Status",
   "Check the status of various LBRY services.": "Check the status of various LBRY services.",
   "Check Status": "Check Status",
-  "Upload your thumbnail to %domain%. Recommended size is 16:9.": "Upload your thumbnail to %domain%. Recommended size is 16:9.",
+  "Upload your thumbnail to %domain%. Recommended ratio is 16:9, %max_size%MB max.": "Upload your thumbnail to %domain%. Recommended ratio is 16:9, %max_size%MB max.",
+  "Thumbnail size over %max_size%MB, please edit and reupload.": "Thumbnail size over %max_size%MB, please edit and reupload.",
   "(16:9)": "(16:9)",
   "Are you sure you want to upload this thumbnail to %domain%": "Are you sure you want to upload this thumbnail to %domain%",
   "View thumbnail": "View thumbnail",
@@ -2156,6 +2156,4 @@
   "Chat as": "Chat as",
   "Streamer": "Streamer",
   "Pinned": "Pinned",
-  "Upload your thumbnail to %domain%. Recommended ratio is 16:9, 2MB max.": "Upload your thumbnail to %domain%. Recommended ratio is 16:9, 2MB max.",
-  "Thumbnail size over 2MB, please edit and reupload.": "Thumbnail size over 2MB, please edit and reupload."
 }

ui/component/channelEdit/view.jsx

@@ -20,7 +20,7 @@ import analytics from 'analytics';
 import LbcSymbol from 'component/common/lbc-symbol';
 import SUPPORTED_LANGUAGES from 'constants/supported_languages';
 import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
-import { SIMPLE_SITE } from 'config';
+import { SIMPLE_SITE, THUMBNAIL_CDN_SIZE_LIMIT_BYTES } from 'config';
 import { sortLanguageMap } from 'util/default-languages';
 import ThumbnailBrokenImage from 'component/selectThumbnail/thumbnail-broken.png';
 import Gerbil from 'component/channelThumbnail/gerbil.png';
@@ -282,7 +282,9 @@ function ChannelForm(props: Props) {
                 openModal(MODALS.IMAGE_UPLOAD, {
                   onUpdate: (coverUrl, isUpload) => handleCoverChange(coverUrl, isUpload),
                   title: __('Edit Cover Image'),
-                  helpText: __('(6.25:1 ratio, 2MB max)'),
+                  helpText: __('(6.25:1 ratio, %max_size%MB max)', {
+                    max_size: THUMBNAIL_CDN_SIZE_LIMIT_BYTES / (1024 * 1024),
+                  }),
                   assetName: __('Cover Image'),
                   currentValue: params.coverUrl,
                 })
@@ -308,7 +310,9 @@ function ChannelForm(props: Props) {
                   openModal(MODALS.IMAGE_UPLOAD, {
                     onUpdate: (thumbnailUrl, isUpload) => handleThumbnailChange(thumbnailUrl, isUpload),
                     title: __('Edit Thumbnail Image'),
-                    helpText: __('(1:1 ratio, 2MB max)'),
+                    helpText: __('(1:1 ratio, %max_size%MB max)', {
+                      max_size: THUMBNAIL_CDN_SIZE_LIMIT_BYTES / (1024 * 1024),
+                    }),
                     assetName: __('Thumbnail'),
                     currentValue: params.thumbnailUrl,
                   })

ui/component/selectThumbnail/view.jsx

@@ -2,7 +2,7 @@
 import * as MODALS from 'constants/modal_types';
 import * as THUMBNAIL_STATUSES from 'constants/thumbnail_upload_statuses';
 import Lbry from 'lbry';
-import { DOMAIN } from 'config';
+import { DOMAIN, THUMBNAIL_CDN_SIZE_LIMIT_BYTES } from 'config';
 import * as React from 'react';
 import { FormField } from 'component/common/form';
 import FileSelector from 'component/common/file-selector';
@@ -188,7 +188,10 @@ function SelectThumbnail(props: Props) {
         <p className="help">
           {manualInput
             ? __('Enter a URL for your thumbnail.')
-            : __('Upload your thumbnail to %domain%. Recommended ratio is 16:9, 2MB max.', { domain: DOMAIN })}
+            : __('Upload your thumbnail to %domain%. Recommended ratio is 16:9, %max_size%MB max.', {
+                domain: DOMAIN,
+                max_size: THUMBNAIL_CDN_SIZE_LIMIT_BYTES / (1024 * 1024),
+              })}
         </p>
       )}
     </>

ui/modal/modalAutoGenerateThumbnail/view.jsx

@@ -2,8 +2,7 @@
 import React, { useRef } from 'react';
 import { Modal } from 'modal/modal';
 import { formatFileSystemPath } from 'util/url';
-
-const VANWA_SIZE_LIMIT = 2 * 1024 * 1024;
+import { THUMBNAIL_CDN_SIZE_LIMIT_BYTES } from 'config';
 
 type Props = {
   upload: (WebFile) => void,
@@ -31,7 +30,7 @@ function ModalAutoGenerateThumbnail(props: Props) {
     };
 
     let img = generateImg(1.0);
-    if (img.file && img.file.size > VANWA_SIZE_LIMIT) {
+    if (img.file && img.file.size > THUMBNAIL_CDN_SIZE_LIMIT_BYTES) {
       img = generateImg(0.8);
     }
 

ui/redux/actions/publish.js

@@ -3,6 +3,7 @@ import * as MODALS from 'constants/modal_types';
 import * as ACTIONS from 'constants/action_types';
 import * as PAGES from 'constants/pages';
 import { batchActions } from 'util/batch-actions';
+import { THUMBNAIL_CDN_SIZE_LIMIT_BYTES } from 'config';
 import { doCheckPendingClaims } from 'redux/actions/claims';
 import {
   makeSelectClaimForUri,
@@ -476,8 +477,10 @@ export const doUploadThumbnail = (
         }
 
         const userInput = [fileName, fileExt, fileType, thumbnail, size];
-        if (size >= 2097152) {
-          message = __('Thumbnail size over 2MB, please edit and reupload.');
+        if (size >= THUMBNAIL_CDN_SIZE_LIMIT_BYTES) {
+          message = __('Thumbnail size over %max_size%MB, please edit and reupload.', {
+            max_size: THUMBNAIL_CDN_SIZE_LIMIT_BYTES / (1024 * 1024),
+          });
         }
 
         uploadError({ message, cause: `${userInput.join(' | ')}` });