{{ t("cc.details") }}
$vuetify.icons.ic_cr
diff --git a/src/components/file_mode/SendAttachmentsLayout.vue b/src/components/file_mode/SendAttachmentsLayout.vue
index 9374014..3b72436 100644
--- a/src/components/file_mode/SendAttachmentsLayout.vue
+++ b/src/components/file_mode/SendAttachmentsLayout.vue
@@ -24,16 +24,16 @@
-
-
-
- $vuetify.icons.ic_cr
-
+
+
+
+
+
+
+
+ $vuetify.icons.ic_cr
+
+
@@ -68,7 +68,7 @@
-
+
@@ -228,11 +228,17 @@ export default defineComponent({
}
return undefined;
},
- anyContainsCC(): boolean {
- return this.batch.attachments.some((a: Attachment) => a.proof?.integrity?.c2pa !== undefined);
+ showRedDotBadge(): boolean {
+ return this.currentAttachment && this.currentAttachment.proof?.integrity?.c2pa !== undefined && !this.currentAttachment.detailsViewed;
},
showCCIcon(): boolean {
return this.currentAttachment && this.currentAttachment.proof?.integrity?.c2pa !== undefined && !this.currentAttachment.useScaled;
+ },
+ currentlyViewedItem(): Attachment | undefined {
+ if (this.showAttachmentInformation) {
+ return this.currentAttachment;
+ }
+ return undefined;
}
},
watch: {
@@ -247,6 +253,11 @@ export default defineComponent({
},
deep: 1,
},
+ currentlyViewedItem(newVal) {
+ if (newVal) {
+ newVal.detailsViewed = true; // We have seen this now
+ }
+ }
},
methods: {
showInformation() {
diff --git a/src/components/file_mode/ThumbnailView.vue b/src/components/file_mode/ThumbnailView.vue
index 16dc2d9..2334231 100644
--- a/src/components/file_mode/ThumbnailView.vue
+++ b/src/components/file_mode/ThumbnailView.vue
@@ -13,6 +13,8 @@
:contain="!previewOnly"
:cover="previewOnly"
:loadingProgress="loadingProgress"
+ ref="imageRef"
+ v-on:loaded="imageLoaded"
/>
@@ -34,6 +36,10 @@
{{ fileSize }}
+
+
+
+
@@ -58,6 +64,7 @@ function isAttachment(source: EventAttachment | Attachment | undefined): source
const $$sanitize: any = inject("globalSanitize");
const thumbnailRef = useTemplateRef("thumbnailRef");
+const imageRef = useTemplateRef("imageRef");
interface ThumbnailProps {
item?: EventAttachment | Attachment;
@@ -78,6 +85,7 @@ let { isVideo, isImage, fileTypeIcon, fileTypeIconClass, fileName, fileSize, isP
const fileURL: Ref = ref(undefined);
const source: Ref = ref(undefined);
const poster: Ref = ref(undefined);
+const decoratorStyle: Ref = ref(undefined);
const updateSource = () => {
if (isEventAttachment(props.item)) {
@@ -130,6 +138,33 @@ const updatePoster = () => {
updateSource();
updatePoster();
+const imageLoaded = (image: any) => {
+ if (imageRef.value) {
+ const rect = image.$el.getBoundingClientRect();
+ const nw = image.naturalWidth;
+ const nh = image.naturalHeight;
+
+ let t = 0;
+ let l = 0;
+ let w = 0;
+ let h = 0;
+
+ const wRatio = rect.width / rect.height;
+ const iRatio = nw / nh;
+ if (iRatio > wRatio) {
+ w = rect.width;
+ h = rect.width / iRatio;
+ } else {
+ w = rect.height * iRatio;
+ h = rect.height;
+ }
+
+ l = (rect.width - w) / 2;
+ t = (rect.height -h) / 2;
+
+ decoratorStyle.value = `position:absolute;top:${t}px;left:${l}px;width:${w}px;height:${h}px;display:flex;align-items:end;justify-content:end;padding:10px`;
+ }
+}
watch(props, (props: ThumbnailProps) => {
const updates = useThumbnail(isEventAttachment(props.item) ? props.item.event : isAttachment(props.item) ? props.item.file : undefined);
diff --git a/src/models/attachment.ts b/src/models/attachment.ts
index 94e1c49..2fa4f9a 100644
--- a/src/models/attachment.ts
+++ b/src/models/attachment.ts
@@ -60,6 +60,7 @@ export type Attachment = {
proof?: Proof;
mediaMetadata?: MediaMetadata;
thumbnail?: AttachmentThumbnail;
+ detailsViewed: boolean;
sendInfo: AttachmentSendInfo;
};
diff --git a/src/models/attachmentManager.ts b/src/models/attachmentManager.ts
index 6ad6f32..abbb79d 100644
--- a/src/models/attachmentManager.ts
+++ b/src/models/attachmentManager.ts
@@ -58,6 +58,7 @@ export class AttachmentManager {
status: "loading",
file: file,
useCompressed: false,
+ detailsViewed: false,
sendInfo: {
status: "initial",
statusDate: 0,
@@ -438,7 +439,7 @@ export class AttachmentManager {
}
}
-export const createUploadBatch = (manager: AttachmentManager | null, room: Room | null): AttachmentBatch => {
+export const createUploadBatch = (manager: AttachmentManager | null, room: KeanuRoom | null): AttachmentBatch => {
const matrixClient = manager?.matrixClient;
const maxSizeUploads = manager?.maxSizeUploads ?? 0;