Merge remote-tracking branch 'origin/develop' into migrate/vuex-to-pinia

build/build.js

@@ -1,5 +1,5 @@
 // https://github.com/shelljs/shelljs
-require('./check-versions')()
+import('./check-versions.mjs').then(m => m.default())
 require('shelljs/global')
 env.NODE_ENV = 'production'
 

build/check-versions.mjs

@@ -1,10 +1,7 @@
-var semver = require('semver')
+import semver from 'semver'
-var chalk = require('chalk')
+import chalk from 'chalk'
-var packageConfig = require('../package.json')
+
-var exec = function (cmd) {
+import packageConfig from '../package.json' with { type: 'json' }
-  return require('child_process')
-    .execSync(cmd).toString().trim()
-}
 
 var versionRequirements = [
   {
@@ -14,10 +11,10 @@ var versionRequirements = [
   }
 ]
 
-module.exports = function () {
+export default function () {
-  var warnings = []
+  const warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
+  for (let i = 0; i < versionRequirements.length; i++) {
-    var mod = versionRequirements[i]
+    const mod = versionRequirements[i]
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
       warnings.push(mod.name + ': ' +
         chalk.red(mod.currentVersion) + ' should be ' +
@@ -28,8 +25,8 @@ module.exports = function () {
 
   if (warnings.length) {
     console.warn(chalk.yellow('\nTo use this template, you must update following to modules:\n'))
-    for (var i = 0; i < warnings.length; i++) {
+    for (let i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
+      const warning = warnings[i]
       console.warn('  ' + warning)
     }
     console.warn()

build/dev-server.js

@@ -1,4 +1,4 @@
-require('./check-versions')()
+import('./check-versions.mjs').then(m => m.default())
 var config = require('../config')
 if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env
 var path = require('path')

changelog.d/always-jpeg.add

@@ -0,0 +1 @@
+Added option to always convert images to JPEG format instead of using WebP when compressing images. 

package.json

@@ -37,7 +37,7 @@
     "localforage": "1.10.0",
     "pako": "^2.1.0",
     "parse-link-header": "2.0.0",
-    "phoenix": "1.7.18",
+    "phoenix": "1.7.19",
     "pinia": "^2.0.33",
     "punycode.js": "2.3.1",
     "qrcode": "1.5.4",
@@ -66,13 +66,13 @@
     "babel-loader": "9.2.1",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.5.0",
-    "chalk": "1.1.3",
+    "chalk": "5.4.1",
-    "chromedriver": "108.0.0",
+    "chromedriver": "132.0.2",
     "connect-history-api-fallback": "2.0.0",
-    "copy-webpack-plugin": "11.0.0",
+    "copy-webpack-plugin": "12.0.2",
     "cross-spawn": "7.0.6",
-    "css-loader": "6.11.0",
+    "css-loader": "7.1.2",
-    "css-minimizer-webpack-plugin": "4.2.2",
+    "css-minimizer-webpack-plugin": "7.0.0",
     "custom-event-polyfill": "1.0.7",
     "eslint": "8.57.1",
     "eslint-config-standard": "17.1.0",
@@ -106,12 +106,12 @@
     "ora": "0.4.1",
     "postcss": "8.5.1",
     "postcss-html": "^1.5.0",
-    "postcss-loader": "7.0.2",
+    "postcss-loader": "7.3.4",
     "postcss-scss": "^4.0.6",
-    "sass": "1.60.0",
+    "sass": "1.83.4",
     "sass-loader": "13.3.3",
     "selenium-server": "3.141.59",
-    "semver": "7.6.3",
+    "semver": "7.7.0",
     "serviceworker-webpack5-plugin": "2.0.0",
     "shelljs": "0.8.5",
     "sinon": "15.2.0",
@@ -123,11 +123,11 @@
     "stylelint-config-standard": "29.0.0",
     "stylelint-rscss": "0.4.0",
     "stylelint-webpack-plugin": "^3.3.0",
-    "vue-loader": "17.0.1",
+    "vue-loader": "17.4.2",
     "vue-style-loader": "4.1.3",
-    "webpack": "5.75.0",
+    "webpack": "5.97.1",
     "webpack-dev-middleware": "3.7.3",
-    "webpack-hot-middleware": "2.25.3",
+    "webpack-hot-middleware": "2.26.1",
     "webpack-merge": "0.20.0"
   },
   "engines": {

src/components/media_upload/media_upload.js

@@ -76,9 +76,9 @@ const mediaUpload = {
           const testCanvas = document.createElement('canvas')
           const supportsWebP = testCanvas.toDataURL('image/webp').startsWith('data:image/webp')
 
-          // Convert to WebP if supported, otherwise JPEG
+          // Convert to WebP if supported and alwaysUseJpeg is false, otherwise JPEG
-          const type = supportsWebP ? 'image/webp' : 'image/jpeg'
+          const type = (!this.$store.getters.mergedConfig.alwaysUseJpeg && supportsWebP) ? 'image/webp' : 'image/jpeg'
-          const extension = supportsWebP ? '.webp' : '.jpg'
+          const extension = type === 'image/webp' ? '.webp' : '.jpg'
 
           // Remove the original extension and add new one
           const newFileName = file.name.replace(/\.[^/.]+$/, '') + extension

src/components/settings_modal/tabs/general_tab.vue

@@ -269,6 +269,14 @@
             {{ $t('settings.image_compression') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="alwaysUseJpeg"
+            expert="1"
+          >
+            {{ $t('settings.always_use_jpeg') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="useContainFit"

src/i18n/en.json

@@ -440,6 +440,7 @@
     "attachmentRadius": "Attachments",
     "attachments": "Attachments",
     "image_compression": "Compress images before uploading",
+    "always_use_jpeg": "Always convert images to JPEG format",
     "avatar": "Avatar",
     "avatarAltRadius": "Avatars (notifications)",
     "avatarRadius": "Avatars",

src/modules/config.js

@@ -36,8 +36,6 @@ export const multiChoiceProperties = [
   'unsavedPostAction' // save | discard | confirm
 ]
 
-console.log('TEST', defaultState)
-
 // caching the instance default properties
 export const instanceDefaultProperties = Object.entries(defaultState)
   .filter(([key, value]) => value === undefined)

src/modules/default_config_state.js

@@ -160,5 +160,6 @@ export const defaultState = {
   useAbsoluteTimeFormat: undefined, // instance default
   absoluteTimeFormatMinAge: undefined, // instance default
   absoluteTime12h: undefined, // instance default
-  imageCompression: true
+  imageCompression: true,
+  alwaysUseJpeg: false
 }

src/modules/serverSideStorage.js

@@ -125,6 +125,7 @@ export const _getRecentData = (cache, live, isTest) => {
   }
 
   const merge = (a, b) => ({
+    _user: a._user ?? b._user,
     _version: a._version ?? b._version,
     _timestamp: a._timestamp ?? b._timestamp,
     needUpload: b.needUpload ?? a.needUpload,