Make sure CC icon/badge is shown

Also, always compress images, even if smaller than 640 pixels. For issue #680.

src/assets/css/sendattachments.scss

@@ -107,6 +107,16 @@ $hiliteColor: #4642f1;
       align-items: end;
       justify-content: end;
     }
+
+    .send-attachments__selecting__current-item__cc {
+      position: absolute;
+      right: 12px;
+      bottom: 12px;
+      display: flex;
+      flex-direction: column;
+      align-items: end;
+      justify-content: end;
+    }
   }
 
   .file-drop-thumbnail-container,

src/components/file_mode/SendAttachmentsLayout.vue

@@ -28,6 +28,10 @@
             <v-progress-circular indeterminate class="mb-0"></v-progress-circular>
           </div>
         </div>
+        <div v-else-if="showCCIcon" class="send-attachments__selecting__current-item__cc">
+          <v-icon style="width:24px;height:24px">$vuetify.icons.ic_cr</v-icon>
+        </div>
+
       </div>
       <div class="file-drop-thumbnail-container">
         <v-tooltip location="top" v-for="(attachment, index) in batch.attachments" :key="index">
@@ -85,15 +89,17 @@
             :disabled="sendButtonDisabled"
           ></v-btn>
         </div>
-        <v-btn
+        <v-badge location="top right" color="#ff3300" dot class="cc-badge" :model-value="anyContainsCC">
-          class="info-button clickable"
+          <v-btn
-          icon="$vuetify.icons.ic_share_settings"
+            class="info-button clickable"
-          size="44"
+            icon="$vuetify.icons.ic_share_settings"
-          elevation="0"
+            size="44"
-          color="black"
+            elevation="0"
-          @click.stop="showInformation"
+            color="black"
-          :disabled="currentAttachment?.status !== 'loaded'"
+            @click.stop="showInformation"
-        ></v-btn>
+            :disabled="currentAttachment?.status !== 'loaded'"
+          ></v-btn>
+        </v-badge>
       </div>
     </template>
 
@@ -283,6 +289,12 @@ export default defineComponent({
       }
       return undefined;
     },
+    anyContainsCC(): boolean {
+      return this.batch.attachments.some((a: Attachment) => a.proof?.integrity?.c2pa !== undefined);
+    },
+    showCCIcon(): boolean {
+      return this.currentAttachment && this.currentAttachment.proof?.integrity?.c2pa !== undefined && !this.currentAttachment.useScaled;
+    }
   },
   watch: {
     "batch.attachments": {
@@ -360,4 +372,10 @@ export default defineComponent({
 <style lang="scss">
 @use "@/assets/css/chat.scss" as *;
 @use "@/assets/css/sendattachments.scss" as *;
+
+.cc-badge.v-badge--dot .v-badge__badge {
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+}
 </style>

src/models/attachmentManager.ts

@@ -94,25 +94,24 @@ export class AttachmentManager {
           // Need to resize?
           const w = attachment.dimensions?.width ?? 0;
           const h = attachment.dimensions?.height ?? 0;
-          if (w > 640 || h > 640) {
+          const sizeDown = (w > 640 || h > 640);
-            var aspect = w / h;
+          var aspect = w / h;
-            var newWidth = parseInt((w > h ? 640 : 640 * aspect).toFixed());
+          var newWidth = sizeDown ? parseInt((w > h ? 640 : 640 * aspect).toFixed()) : w;
-            var newHeight = parseInt((w > h ? 640 / aspect : 640).toFixed());
+          var newHeight = sizeDown ? parseInt((w > h ? 640 / aspect : 640).toFixed()) : h;
-            const img = await imageResize(file, {
+          const compressedImg = await imageResize(file, {
-              format: "webp",
+            format: "webp",
-              width: newWidth,
+            width: newWidth,
-              height: newHeight,
+            height: newHeight,
-              outputType: "blob",
+            outputType: "blob",
-            });
+          });
-            attachment.scaledFile = new File([img as BlobPart], file.name, {
+          attachment.scaledFile = new File([compressedImg as BlobPart], file.name, {
-              type: "image/webp",
+            type: "image/webp",
-              lastModified: Date.now(),
+            lastModified: Date.now(),
-            });
+          });
-            attachment.scaledDimensions = {
+          attachment.scaledDimensions = {
-              width: newWidth,
+            width: newWidth,
-              height: newHeight,
+            height: newHeight,
-            };
+          };
-          }
         } catch (error) {
           console.error("Failed to get image dimensions: " + error);
         }
@@ -478,7 +477,10 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
 
   const removeAttachment = (attachment: Attachment) => {
     if (sendingStatus.value == "initial") {
-      attachments.value = attachments.value.filter((a) => a !== attachment);
+      const index = attachments.value.indexOf(attachment);
+      if (index > -1) {
+        attachments.value.splice(index, 1);
+      }
     }
   };