Merge remote-tracking branch 'origin/develop' into customizable-post-actions

changelog.d/upload-resizing.add

@@ -0,0 +1 @@
+Resize most kinds of images on upload.

changelog.d/vue.change

@@ -0,0 +1 @@
+Upgraded Vue to version 3.5

package.json

@@ -30,7 +30,7 @@
     "body-scroll-lock": "3.1.5",
     "chromatism": "3.0.0",
     "click-outside-vue3": "4.0.1",
-    "cropperjs": "1.5.13",
+    "cropperjs": "1.6.2",
     "escape-html": "1.0.3",
     "hash-sum": "^2.0.0",
     "js-cookie": "3.0.5",
@@ -43,10 +43,9 @@
     "querystring-es3": "0.2.1",
     "url": "0.11.4",
     "utf8": "3.0.0",
-    "vue": "3.2.45",
+    "vue": "3.5.13",
     "vue-i18n": "10",
-    "vue-router": "4.1.6",
-    "vue-template-compiler": "2.7.14",
+    "vue-router": "4.5.0",
     "vue-virtual-scroller": "^2.0.0-beta.7",
     "vuex": "4.1.0"
   },
@@ -60,21 +59,21 @@
     "@ungap/event-target": "0.2.4",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
     "@vue/babel-plugin-jsx": "1.2.5",
-    "@vue/compiler-sfc": "3.2.45",
-    "@vue/test-utils": "2.2.8",
+    "@vue/compiler-sfc": "3.5.13",
+    "@vue/test-utils": "2.4.6",
     "autoprefixer": "10.4.20",
-    "babel-loader": "9.1.3",
+    "babel-loader": "9.2.1",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "4.3.7",
+    "chai": "4.5.0",
     "chalk": "1.1.3",
     "chromedriver": "108.0.0",
     "connect-history-api-fallback": "2.0.0",
     "copy-webpack-plugin": "11.0.0",
     "cross-spawn": "7.0.6",
-    "css-loader": "6.10.0",
+    "css-loader": "6.11.0",
     "css-minimizer-webpack-plugin": "4.2.2",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "8.33.0",
+    "eslint": "8.57.1",
     "eslint-config-standard": "17.0.0",
     "eslint-formatter-friendly": "7.0.0",
     "eslint-plugin-import": "2.27.5",

src/components/media_upload/media_upload.js

@@ -28,7 +28,81 @@ const mediaUpload = {
         this.$refs.input.click()
       }
     },
-    uploadFile (file) {
+    async resizeImage (file) {
+      // Skip if not an image or if it's a GIF
+      if (!file.type.startsWith('image/') || file.type === 'image/gif') {
+        return file
+      }
+
+      // For PNGs, check if animated
+      if (file.type === 'image/png') {
+        const isAnimated = await this.isAnimatedPng(file)
+        if (isAnimated) {
+          return file
+        }
+      }
+
+      return new Promise((resolve) => {
+        const img = new Image()
+        img.onload = () => {
+          // Calculate new dimensions
+          let width = img.width
+          let height = img.height
+          const maxSize = 2048
+
+          if (width > maxSize || height > maxSize) {
+            if (width > height) {
+              height = Math.round((height * maxSize) / width)
+              width = maxSize
+            } else {
+              width = Math.round((width * maxSize) / height)
+              height = maxSize
+            }
+          }
+
+          // Create canvas and resize
+          const canvas = document.createElement('canvas')
+          canvas.width = width
+          canvas.height = height
+          const ctx = canvas.getContext('2d')
+          ctx.drawImage(img, 0, 0, width, height)
+
+          // Check WebP support by trying to create a WebP canvas
+          const testCanvas = document.createElement('canvas')
+          const supportsWebP = testCanvas.toDataURL('image/webp').startsWith('data:image/webp')
+
+          // Convert to WebP if supported, otherwise JPEG
+          const type = supportsWebP ? 'image/webp' : 'image/jpeg'
+          const extension = supportsWebP ? '.webp' : '.jpg'
+
+          // Remove the original extension and add new one
+          const newFileName = file.name.replace(/\.[^/.]+$/, '') + extension
+
+          canvas.toBlob((blob) => {
+            resolve(new File([blob], newFileName, {
+              type: type,
+              lastModified: Date.now()
+            }))
+          }, type, 0.85)
+        }
+        img.src = URL.createObjectURL(file)
+      })
+    },
+    async isAnimatedPng (file) {
+      const buffer = await file.arrayBuffer()
+      const view = new Uint8Array(buffer)
+      // Look for animated PNG chunks (acTL)
+      for (let i = 0; i < view.length - 8; i++) {
+        if (view[i] === 0x61 && // a
+            view[i + 1] === 0x63 && // c
+            view[i + 2] === 0x54 && // T
+            view[i + 3] === 0x4C) { // L
+          return true
+        }
+      }
+      return false
+    },
+    async uploadFile (file) {
       const self = this
       const store = this.$store
       if (file.size > store.state.instance.uploadlimit) {
@@ -37,8 +111,11 @@ const mediaUpload = {
         self.$emit('upload-failed', 'file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
         return
       }
+
+      // Resize image if needed
+      const processedFile = await this.resizeImage(file)
       const formData = new FormData()
-      formData.append('file', file)
+      formData.append('file', processedFile)
 
       self.$emit('uploading')
       self.uploadCount++

src/components/pinch_zoom/pinch_zoom.vue

@@ -2,7 +2,6 @@
   <pinch-zoom
     class="pinch-zoom-parent"
     v-bind="$attrs"
-    v-on="$listeners"
   >
     <slot />
   </pinch-zoom>