fix: background upload, finish 7.0 translation support

src/components/modals/main/marketplace/sections/Create.jsx

@@ -207,12 +207,18 @@ export default class Create extends PureComponent {
         <div className="smallBanner">
           <div className="content">
             <span className="title" style={{ textTransform: 'capitalize' }}>
-              Create {this.state.addonMetadata.type} Pack
+              {getMessage('modals.main.addons.create.metadata.create_type', {
+                type: this.state.addonMetadata.type,
+              })}
+            </span>
+            <span className="subtitle">
+              {getMessage(
+                'modals.main.addons.create.metadata.descriptions.' + this.addonMetadata.type,
+              ) || 'marketplace'}
             </span>
-            <span className="subtitle">Description of what is being made</span>
           </div>
           <button>
-            Example
+            {getMessage('modals.main.addons.create.metadata.example')}
             <MdDownload />
           </button>
         </div>
@@ -229,8 +235,8 @@ export default class Create extends PureComponent {
             <span className="title">{getMessage('modals.main.marketplace.product.version')}</span>
             <span className="subtitle">
               <InfoTooltip
-                title="Information"
+                title={getMessage('modals.main.addons.create.information')}
-                subtitle="Running away is easy It's the leaving that's hard Running away is easy It's the leaving that's hard"
+                subtitle={getMessage('modals.main.addons.create.metadata.information_subtitle')}
               />
             </span>
           </div>
@@ -379,7 +385,7 @@ export default class Create extends PureComponent {
         <SettingsItem
           final={true}
           title={getMessage('modals.main.addons.create.photos.title')}
-          subtitle={'Import from custom settings.'}
+          subtitle={getMessage('modals.main.addons.create.import_custom')}
         >
           <div className="themesToggleArea">
             <div className="options">
@@ -411,14 +417,14 @@ export default class Create extends PureComponent {
         <div className="smallBanner">
           <div className="content">
             <span className="title" style={{ textTransform: 'capitalize' }}>
-              Next step, Publishing...
+              {getMessage('modals.main.addons.create.publishing.title')}
             </span>
             <span className="subtitle">
-              Visit the Mue Knowledgebase on information on how to publish your newly created addon.
+              {getMessage('modals.main.addons.create.publishing.subtitle')}
             </span>
           </div>
           <button>
-            Learn More
+            {getMessage('modals.main.addons.create.publishing.button')}
             <MdOpenInNew />
           </button>
         </div>

src/components/modals/main/settings/FileUpload.jsx

@@ -23,7 +23,7 @@ export default class FileUpload extends PureComponent {
         });
 
         const settingsSize = new TextEncoder().encode(JSON.stringify(settings)).length;
-        if (videoCheck(file) === true) {
+        if (videoCheck(file.type) === true) {
           if (settingsSize + file.size > 4850000) {
             return toast(this.getMessage('toasts.no_storage'));
           }
@@ -32,7 +32,7 @@ export default class FileUpload extends PureComponent {
         }
 
         // todo: change number
-        compressAccurately(file, 200).then(async (res) => {
+        compressAccurately(file, 300).then(async (res) => {
           if (settingsSize + res.size > 4850000) {
             return toast(this.getMessage('toasts.no_storage'));
           }

src/components/modals/main/settings/sections/background/Background.jsx

@@ -67,7 +67,10 @@ export default class BackgroundSettings extends PureComponent {
     const { getMessage } = this;
 
     const interval = (
-      <SettingsItem title="Interval" subtitle="Change how often the background is updated">
+      <SettingsItem
+        title={getMessage('modals.main.settings.sections.background.interval.title')}
+        subtitle={getMessage('modals.mani.settings.sections.background.intervanl.subtitle')}
+      >
         <Dropdown
           label={getMessage('modals.main.settings.sections.background.interval.title')}
           name="backgroundchange"
@@ -96,8 +99,8 @@ export default class BackgroundSettings extends PureComponent {
     const APISettings = (
       <>
         <SettingsItem
-          title="API Settings"
+          title={getMessage('modals.main.settings.sections.background.api')}
-          subtitle="Options for the getting an image from an external service (API)"
+          subtitle={getMessage('modals.main.settings.sections.background.api_subtitle')}
         >
           {this.state.backgroundCategories[0] === getMessage('modals.main.loading') ? (
             <>
@@ -244,7 +247,9 @@ export default class BackgroundSettings extends PureComponent {
                   <span className="title">
                     {getMessage('modals.main.settings.sections.background.source.title')}
                   </span>
-                  <span className="subtitle">Select where to get background images from</span>
+                  <span className="subtitle">
+                    {getMessage('modals.main.settings.sections.background.source.subtitle')}
+                  </span>
                 </div>
               </div>
               <div className="action">
@@ -284,7 +289,9 @@ export default class BackgroundSettings extends PureComponent {
                   <span className="title">
                     {getMessage('modals.main.settings.sections.background.effects.title')}
                   </span>
-                  <span className="subtitle">Add effects to the background image</span>
+                  <span className="subtitle">
+                    {getMessage('modals.main.settings.sections.background.effects.subtitle')}
+                  </span>
                 </div>
               </div>
               <div className="action">
@@ -296,8 +303,8 @@ export default class BackgroundSettings extends PureComponent {
         ) : null}
         {this.state.backgroundSettingsSection !== true && this.state.effects !== true ? (
           <SettingsItem
-            title="Display"
+            title={getMessage('modals.main.settings.sections.background.display')}
-            subtitle="Change how background and photo information are loaded"
+            subtitle={getMessage('modals.main.settings.sections.background.display_subtitle')}
             final={true}
           >
             <Checkbox
@@ -332,7 +339,7 @@ export default class BackgroundSettings extends PureComponent {
           <>
             <SettingsItem
               title={getMessage('modals.main.settings.sections.background.source.title')}
-              subtitle="Select where to get background images from"
+              subtitle={getMessage('modals.main.settings.sections.background.source.subtitle')}
             >
               <Dropdown
                 label={getMessage('modals.main.settings.sections.background.type.title')}
@@ -371,7 +378,7 @@ export default class BackgroundSettings extends PureComponent {
         this.state.effects ? (
           <SettingsItem
             title={getMessage('modals.main.settings.sections.background.effects.title')}
-            subtitle="Add effects to the background image"
+            subtitle={getMessage('modals.main.settings.sections.background.effects.subtitle')}
             final={true}
           >
             <Slider

src/components/modals/main/settings/sections/background/Custom.jsx

@@ -142,7 +142,7 @@ export default class CustomSettings extends PureComponent {
       });
 
       const settingsSize = new TextEncoder().encode(JSON.stringify(settings)).length;
-      if (videoCheck(file) === true) {
+      if (videoCheck(file.type) === true) {
         if (settingsSize + file.size > 4850000) {
           return toast(this.getMessage('toasts.no_storage'));
         }
@@ -150,7 +150,7 @@ export default class CustomSettings extends PureComponent {
         return this.customBackground(file, false, this.state.currentBackgroundIndex);
       }
 
-      compressAccurately(file, 200).then(async (res) => {
+      compressAccurately(file, 300).then(async (res) => {
         if (settingsSize + res.size > 4850000) {
           return toast(this.getMessage('toasts.no_storage'));
         }
@@ -165,7 +165,7 @@ export default class CustomSettings extends PureComponent {
     return (
       <>
         {this.props.interval}
-        <div className="settingsRow" style={{ alignItems: 'flex-start' }}>
+        <div className="settingsRow settingsNoBorder" style={{ alignItems: 'flex-start' }}>
           <div className="content">
             <div className="images-row">
               {this.state.customBackground.map((url, index) => (

src/translations/de_DE.json

@@ -180,6 +180,7 @@
             },
             "effects": {
               "title": "Effekte",
+              "subtitle": "Add effects to the background images",
               "blur": "Unschärfe anpassen",
               "brightness": "Helligkeit anpassen",
               "filters": {
@@ -202,6 +203,7 @@
             },
             "source": {
               "title": "Quelle",
+              "subtitle": "Select where to get background images from",
               "api": "Hintergrund API",
               "custom_background": "Benutzerdefinierter Hintergrund",
               "custom_colour": "Benutzerdefinierter Hintergrundfarbe",
@@ -223,8 +225,13 @@
                 "datasaver": "Datensparer"
               }
             },
+            "display": "Display",
+            "display_subtitle": "Change how background and photo information are loaded",
+            "api": "API Settings",
+            "api_subtitle": "Options for getting an image from an external service (API)",
             "interval": {
               "title": "Ändern Sie alle",
+              "subtitle": "Change how often the background is updated",
               "minute": "Minute",
               "half_hour": "Halbe Stunde",
               "hour": "Stunde",
@@ -517,7 +524,22 @@
         },
         "create": {
           "title": "Erstellen",
+          "example": "Example",
           "other_title": "Add-on erstellen",
+          "create_type": "Create {type} Pack",
+          "descriptions": {
+            "settings": "",
+            "photo_pack": "",
+            "quote_pack": ""
+          },
+          "information": "Information",
+          "information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
+          "import_custom": "Import from custom settings.",
+          "publishing": {
+            "title": "Next step, Publishing...",
+            "subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
+            "button": "Learn more"
+          },
           "metadata": {
             "name": "Name",
             "icon_url": "Icon URL",

src/translations/en_GB.json

@@ -180,6 +180,7 @@
             },
             "effects": {
               "title": "Effects",
+              "subtitle": "Add effects to the background images",
               "blur": "Adjust blur",
               "brightness": "Adjust brightness",
               "filters": {
@@ -202,6 +203,7 @@
             },
             "source": {
               "title": "Source",
+              "subtitle": "Select where to get background images from",
               "api": "Background API",
               "custom_background": "Custom background",
               "custom_colour": "Custom background colour",
@@ -223,8 +225,13 @@
                 "datasaver": "Data Saver"
               }
             },
+            "display": "Display",
+            "display_subtitle": "Change how background and photo information are loaded",
+            "api": "API Settings",
+            "api_subtitle": "Options for getting an image from an external service (API)",
             "interval": {
               "title": "Change every",
+              "subtitle": "Change how often the background is updated",
               "minute": "Minute",
               "half_hour": "Half hour",
               "hour": "Hour",
@@ -516,7 +523,22 @@
         },
         "create": {
           "title": "Create",
+          "example": "Example",
           "other_title": "Create Add-on",
+          "create_type": "Create {type} Pack",
+          "descriptions": {
+            "settings": "",
+            "photo_pack": "",
+            "quote_pack": ""
+          },
+          "information": "Information",
+          "information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
+          "import_custom": "Import from custom settings.",
+          "publishing": {
+            "title": "Next step, Publishing...",
+            "subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
+            "button": "Learn more"
+          },
           "metadata": {
             "name": "Name",
             "icon_url": "Icon URL",

src/translations/en_US.json

@@ -180,6 +180,7 @@
             },
             "effects": {
               "title": "Effects",
+              "subtitle": "Add effects to the background images",
               "blur": "Adjust blur",
               "brightness": "Adjust brightness",
               "filters": {
@@ -202,6 +203,7 @@
             },
             "source": {
               "title": "Source",
+              "subtitle": "Select where to get background images from",
               "api": "Background API",
               "custom_background": "Custom background",
               "custom_colour": "Custom background color",
@@ -223,8 +225,13 @@
                 "datasaver": "Data Saver"
               }
             },
+            "display": "Display",
+            "display_subtitle": "Change how background and photo information are loaded",
+            "api": "API Settings",
+            "api_subtitle": "Options for getting an image from an external service (API)",
             "interval": {
               "title": "Change every",
+              "subtitle": "Change how often the background is updated",
               "minute": "Minute",
               "half_hour": "Half hour",
               "hour": "Hour",
@@ -516,7 +523,22 @@
         },
         "create": {
           "title": "Create",
+          "example": "Example",
           "other_title": "Create Add-on",
+          "create_type": "Create {type} Pack",
+          "descriptions": {
+            "settings": "",
+            "photo_pack": "",
+            "quote_pack": ""
+          },
+          "information": "Information",
+          "information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
+          "import_custom": "Import from custom settings.",
+          "publishing": {
+            "title": "Next step, Publishing...",
+            "subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
+            "button": "Learn more"
+          },
           "metadata": {
             "name": "Name",
             "icon_url": "Icon URL",

src/translations/es.json

@@ -180,6 +180,7 @@
             },
             "effects": {
               "title": "Efectos",
+              "subtitle": "Add effects to the background images",
               "blur": "Ajustar difuminado",
               "brightness": "Ajustar brillo",
               "filters": {
@@ -202,6 +203,7 @@
             },
             "source": {
               "title": "Fuente",
+              "subtitle": "Select where to get background images from",
               "api": "API de fondos",
               "custom_background": "Fondo personalizado",
               "custom_colour": "Color del fondo personalizado",
@@ -223,8 +225,13 @@
                 "datasaver": "Ahorro de datos"
               }
             },
+            "display": "Display",
+            "display_subtitle": "Change how background and photo information are loaded",
+            "api": "API Settings",
+            "api_subtitle": "Options for getting an image from an external service (API)",
             "interval": {
               "title": "Cambiar cada",
+              "subtitle": "Change how often the background is updated",
               "minute": "Minuto",
               "half_hour": "Media hora",
               "hour": "Hora",
@@ -516,7 +523,22 @@
         },
         "create": {
           "title": "Crear",
+          "example": "Example",
           "other_title": "Crear complemento",
+          "create_type": "Create {type} Pack",
+          "descriptions": {
+            "settings": "",
+            "photo_pack": "",
+            "quote_pack": ""
+          },
+          "information": "Information",
+          "information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
+          "import_custom": "Import from custom settings.",
+          "publishing": {
+            "title": "Next step, Publishing...",
+            "subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
+            "button": "Learn more"
+          },
           "metadata": {
             "name": "Nombre",
             "icon_url": "URL del icono",

src/translations/fr.json

@@ -180,6 +180,7 @@
             },
             "effects": {
               "title": "Effets",
+              "subtitle": "Add effects to the background images",
               "blur": "Ajuster le flou",
               "brightness": "Ajuster la luminosité",
               "filters": {
@@ -202,6 +203,7 @@
             },
             "source": {
               "title": "Source",
+              "subtitle": "Select where to get background images from",
               "api": "Source",
               "custom_background": "Arrière-plan personnalisé",
               "custom_colour": "Couleur d'arrière-plan personnalisée",
@@ -223,8 +225,13 @@
                 "datasaver": "Data Saver"
               }
             },
+            "display": "Display",
+            "display_subtitle": "Change how background and photo information are loaded",
+            "api": "API Settings",
+            "api_subtitle": "Options for getting an image from an external service (API)",
             "interval": {
               "title": "Change every",
+              "subtitle": "Change how often the background is updated",
               "minute": "Minute",
               "half_hour": "Half hour",
               "hour": "Hour",
@@ -516,7 +523,22 @@
         },
         "create": {
           "title": "Create",
+          "example": "Example",
           "other_title": "Create Add-on",
+          "create_type": "Create {type} Pack",
+          "descriptions": {
+            "settings": "",
+            "photo_pack": "",
+            "quote_pack": ""
+          },
+          "information": "Information",
+          "information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
+          "import_custom": "Import from custom settings.",
+          "publishing": {
+            "title": "Next step, Publishing...",
+            "subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
+            "button": "Learn more"
+          },
           "metadata": {
             "name": "Name",
             "icon_url": "Icon URL",

src/translations/id_ID.json

@@ -180,6 +180,7 @@
             },
             "effects": {
               "title": "Efek",
+              "subtitle": "Add effects to the background images",
               "blur": "Sesuaikan blur",
               "brightness": "Sesuaikan kecerahan",
               "filters": {
@@ -202,6 +203,7 @@
             },
             "source": {
               "title": "Sumber",
+              "subtitle": "Select where to get background images from",
               "api": "Background API",
               "custom_background": "Background kustom",
               "custom_colour": "Background warna kustom",
@@ -223,8 +225,13 @@
                 "datasaver": "Data Saver"
               }
             },
+            "display": "Display",
+            "display_subtitle": "Change how background and photo information are loaded",
+            "api": "API Settings",
+            "api_subtitle": "Options for getting an image from an external service (API)",
             "interval": {
               "title": "Ubah setiap",
+              "subtitle": "Change how often the background is updated",
               "minute": "Menit",
               "half_hour": "Setengah jam",
               "hour": "Jam",
@@ -516,7 +523,22 @@
         },
         "create": {
           "title": "Buat",
+          "example": "Example",
           "other_title": "Buat Add-on",
+          "create_type": "Create {type} Pack",
+          "descriptions": {
+            "settings": "",
+            "photo_pack": "",
+            "quote_pack": ""
+          },
+          "information": "Information",
+          "information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
+          "import_custom": "Import from custom settings.",
+          "publishing": {
+            "title": "Next step, Publishing...",
+            "subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
+            "button": "Learn more"
+          },
           "metadata": {
             "name": "Nama",
             "icon_url": "URL Ikon",

src/translations/nl.json

@@ -180,6 +180,7 @@
             },
             "effects": {
               "title": "Effects",
+              "subtitle": "Add effects to the background images",
               "blur": "Vervaging instellen",
               "brightness": "Adjust brightness",
               "filters": {
@@ -202,6 +203,7 @@
             },
             "source": {
               "title": "Source",
+              "subtitle": "Select where to get background images from",
               "api": "Achtergrond-api",
               "custom_background": "Aangepaste achtergrond",
               "custom_colour": "Aangepaste achtergrondkleur",
@@ -223,8 +225,13 @@
                 "datasaver": "Data Saver"
               }
             },
+            "display": "Display",
+            "display_subtitle": "Change how background and photo information are loaded",
+            "api": "API Settings",
+            "api_subtitle": "Options for getting an image from an external service (API)",
             "interval": {
               "title": "Change every",
+              "subtitle": "Change how often the background is updated",
               "minute": "Minute",
               "half_hour": "Half hour",
               "hour": "Hour",
@@ -516,7 +523,22 @@
         },
         "create": {
           "title": "Create",
+          "example": "Example",
           "other_title": "Create Add-on",
+          "create_type": "Create {type} Pack",
+          "descriptions": {
+            "settings": "",
+            "photo_pack": "",
+            "quote_pack": ""
+          },
+          "information": "Information",
+          "information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
+          "import_custom": "Import from custom settings.",
+          "publishing": {
+            "title": "Next step, Publishing...",
+            "subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
+            "button": "Learn more"
+          },
           "metadata": {
             "name": "Name",
             "icon_url": "Icon URL",

src/translations/no.json

@@ -180,6 +180,7 @@
             },
             "effects": {
               "title": "Effects",
+              "subtitle": "Add effects to the background images",
               "blur": "Juster Blur",
               "brightness": "Adjust brightness",
               "filters": {
@@ -202,6 +203,7 @@
             },
             "source": {
               "title": "Source",
+              "subtitle": "Select where to get background images from",
               "api": "Bakgrunn API",
               "custom_background": "Personlig bakgrunn",
               "custom_colour": "Personlig Bakgrunn Farge",
@@ -223,8 +225,13 @@
                 "datasaver": "Data Saver"
               }
             },
+            "display": "Display",
+            "display_subtitle": "Change how background and photo information are loaded",
+            "api": "API Settings",
+            "api_subtitle": "Options for getting an image from an external service (API)",
             "interval": {
               "title": "Change every",
+              "subtitle": "Change how often the background is updated",
               "minute": "Minute",
               "half_hour": "Half hour",
               "hour": "Hour",
@@ -516,7 +523,22 @@
         },
         "create": {
           "title": "Create",
+          "example": "Example",
           "other_title": "Create Add-on",
+          "create_type": "Create {type} Pack",
+          "descriptions": {
+            "settings": "",
+            "photo_pack": "",
+            "quote_pack": ""
+          },
+          "information": "Information",
+          "information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
+          "import_custom": "Import from custom settings.",
+          "publishing": {
+            "title": "Next step, Publishing...",
+            "subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
+            "button": "Learn more"
+          },
           "metadata": {
             "name": "Name",
             "icon_url": "Icon URL",

src/translations/ru.json

@@ -180,6 +180,7 @@
             },
             "effects": {
               "title": "Effects",
+              "subtitle": "Add effects to the background images",
               "blur": "Размытие",
               "brightness": "Яркость",
               "filters": {
@@ -202,6 +203,7 @@
             },
             "source": {
               "title": "Source",
+              "subtitle": "Select where to get background images from",
               "api": "API для фона",
               "custom_background": "Пользовательский фон",
               "custom_colour": "Пользовательский цвет фон",
@@ -223,8 +225,13 @@
                 "datasaver": "Data Saver"
               }
             },
+            "display": "Display",
+            "display_subtitle": "Change how background and photo information are loaded",
+            "api": "API Settings",
+            "api_subtitle": "Options for getting an image from an external service (API)",
             "interval": {
               "title": "Change every",
+              "subtitle": "Change how often the background is updated",
               "minute": "Minute",
               "half_hour": "Half hour",
               "hour": "Hour",
@@ -516,7 +523,22 @@
         },
         "create": {
           "title": "Create",
+          "example": "Example",
           "other_title": "Create Add-on",
+          "create_type": "Create {type} Pack",
+          "descriptions": {
+            "settings": "",
+            "photo_pack": "",
+            "quote_pack": ""
+          },
+          "information": "Information",
+          "information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
+          "import_custom": "Import from custom settings.",
+          "publishing": {
+            "title": "Next step, Publishing...",
+            "subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
+            "button": "Learn more"
+          },
           "metadata": {
             "name": "Name",
             "icon_url": "Icon URL",

src/translations/zh_CN.json

@@ -180,6 +180,7 @@
             },
             "effects": {
               "title": "背景特效",
+              "subtitle": "Add effects to the background images",
               "blur": "模糊程度",
               "brightness": "更改亮度",
               "filters": {
@@ -202,6 +203,7 @@
             },
             "source": {
               "title": "来源",
+              "subtitle": "Select where to get background images from",
               "api": "背景来源",
               "custom_background": "自定义背景 (支持图片/视频)",
               "custom_colour": "自定义背景颜色",
@@ -223,8 +225,13 @@
                 "datasaver": "省流模式"
               }
             },
+            "display": "Display",
+            "display_subtitle": "Change how background and photo information are loaded",
+            "api": "API Settings",
+            "api_subtitle": "Options for getting an image from an external service (API)",
             "interval": {
               "title": "更改频率",
+              "subtitle": "Change how often the background is updated",
               "minute": "每分钟",
               "half_hour": "每半小时",
               "hour": "每小时",
@@ -516,7 +523,22 @@
         },
         "create": {
           "title": "创建",
+          "example": "Example",
           "other_title": "创建插件",
+          "create_type": "Create {type} Pack",
+          "descriptions": {
+            "settings": "",
+            "photo_pack": "",
+            "quote_pack": ""
+          },
+          "information": "Information",
+          "information_subtitle": "For example: 1.2.3 (major update, minor update, patch update)",
+          "import_custom": "Import from custom settings.",
+          "publishing": {
+            "title": "Next step, Publishing...",
+            "subtitle": "Visit the Mue Knowledgebase on information on how to publish your newly created addon.",
+            "button": "Learn more"
+          },
           "metadata": {
             "name": "名称",
             "icon_url": "图标URL",