butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Rename ProofHintFlags to MediaMetadata

Browse source 
Also, introduce the MediaInterventionFlags class to not send all metadata across, just the info needed for showing the intervention flags.
This commit is contained in:
N-Pex 2025-10-23 10:13:14 +02:00
parent 5fcbcb77fb
commit 1aff02c7d4
13 changed files with 101 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/content-credentials/C2PAInfo.vue
View file

@ -21,7 +21,7 @@
</template>
</i18n-t>
</div>
<div class="attachment-info__verify-info" v-else-if="flags">
<div class="attachment-info__verify-info" v-else-if="metadata">
{{ t("cc.cc_no_info") }}
</div>
<div class="attachment-info__verify-info" v-else-if="props.metaStripped">
@ -32,7 +32,7 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { Proof, ProofHintFlags } from "../../models/proof";
import { Proof, MediaMetadata, MediaInterventionFlags, mediaMetadataToMediaInterventionFlags } from "../../models/proof";
import { computed, ref, Ref, watch } from "vue";
import dayjs from "dayjs";
import CCProperty, { CCPropertyProps } from "./CCProperty.vue";
@ -45,14 +45,13 @@ const { t } = useI18n();
const props = defineProps<{
proof?: Proof;
flags?: ProofHintFlags;
metadata?: MediaMetadata;
interventionFlags?: MediaInterventionFlags;
metaStripped?: boolean;
showFlagsOnly?: boolean;
}>();
const infoText: Ref<string | undefined> = ref(undefined);
const creationDate: Ref<string | undefined> = ref(undefined);
const details: Ref<(CCPropertyProps & { link?: string })[]> = ref([]);
const hasC2PA = computed(() => {
@ -62,19 +61,19 @@ const hasC2PA = computed(() => {
const updateDetails = () => {
let d: (CCPropertyProps & { link?: string })[] = [];
if (props.flags?.device) {
if (props.metadata?.device) {
d.push({
icon: "$vuetify.icons.ic_media_camera",
title: t("file_mode.cc_source"),
value: props.flags?.device,
value: props.metadata?.device,
});
}
if (creationDate.value) {
if (props.metadata?.creationDate) {
d.push({
icon: "$vuetify.icons.ic_exif_time",
title: t("file_mode.cc_capture_timestamp"),
value: creationDate.value,
value: dayjs(props.metadata.creationDate)?.format("lll"),
});
}
@ -121,20 +120,9 @@ const updateDetails = () => {
watch(
props,
() => {
infoText.value = undefined;
creationDate.value = undefined;
try {
if (props.flags) {
let date = props.flags.creationDate ? dayjs(props.flags.creationDate) : undefined;
if (date) {
creationDate.value = date.format("lll");
}
infoText.value = interventionText(t, props.flags);
}
} catch (error) { }
infoText.value = props.metadata ?
interventionText(t, mediaMetadataToMediaInterventionFlags(props.metadata)) :
props.interventionFlags ? interventionText(t, props.interventionFlags) : undefined;
updateDetails();
},
{ immediate: true }

24
src/components/content-credentials/CCSummary.vue → src/components/content-credentials/MediaIntervention.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="cc-summary bubble-inset" v-if="flags.length > 0 && infoText.length > 0">
<div class="cc-summary bubble-inset" v-if="mediaInterventionFlags.length > 0 && infoText.length > 0">
<v-icon class="intervention-icon">{{
showCheck ? "$vuetify.icons.ic_intervention_check" : "$vuetify.icons.ic_intervention"
}}</v-icon
@ -9,32 +9,32 @@
<script setup lang="ts">
import { computed } from "vue";
import { ProofHintFlags } from "../../models/proof";
import { MediaInterventionFlags } from "../../models/proof";
import { useI18n } from "vue-i18n";
import { interventionText } from "./intervention";
const { t } = useI18n()
const { multiple, flags } = defineProps<{
const { multiple, mediaInterventionFlags } = defineProps<{
multiple: boolean;
flags: ProofHintFlags[];
mediaInterventionFlags: MediaInterventionFlags[];
}>();
const showCheck = computed(() => {
if (!multiple && flags.length == 1) {
return !!flags[0].containsC2PA;
if (!multiple && mediaInterventionFlags.length == 1) {
return !!mediaInterventionFlags[0].containsC2PA;
} else if (multiple) {
return flags.every((f) => !!f.containsC2PA)
return mediaInterventionFlags.every((f) => !!f.containsC2PA)
}
return false;
});
const infoText = computed(() => {
if (!multiple && flags.length == 1) {
return interventionText(t, flags[0]) ?? "";
} else if (multiple && flags.length >= 1) {
const modifiedMedia = flags.some((f) => f.edits?.length);
const aiGeneratedMedia = flags.some((f) => f.generator === "ai");
if (!multiple && mediaInterventionFlags.length == 1) {
return interventionText(t, mediaInterventionFlags[0]) ?? "";
} else if (multiple && mediaInterventionFlags.length >= 1) {
const modifiedMedia = mediaInterventionFlags.some((f) => f.modified);
const aiGeneratedMedia = mediaInterventionFlags.some((f) => f.generator === "ai");
if (aiGeneratedMedia && modifiedMedia) {
return "<b>" + t("cc.contains_modified_and_ai_generated") + "</b> " + t("cc.take_a_closer_look");

8
src/components/content-credentials/intervention.ts
View file

@ -1,16 +1,16 @@
import { ProofHintFlags } from "../../models/proof";
import { MediaInterventionFlags } from "../../models/proof";
import dayjs from "dayjs";
export const interventionText = (t: any, f: ProofHintFlags): string | undefined => {
export const interventionText = (t: any, f: MediaInterventionFlags): string | undefined => {
let res = "";
if (f.generator === "camera") {
res += "<b>" + t("cc.captured_with_camera") + "</b> ";
} else if (f.generator === "screenshot") {
res += "<b>" + (f.generatorSource === "c2pa" ? t("cc.screenshot_probably") : t("cc.screenshot_probably")) + "</b> ";
res += "<b>" + t("cc.screenshot_probably") + "</b> ";
} else if (f.generator === "ai") {
res += "<b>" + t("cc.generated_with_ai") + "</b> ";
}
if ((f.edits?.length ?? 0) > 0) {
if (f.modified) {
res += "<b>" + t("cc.modified") + "</b> ";
}
if (f.creationDate && dayjs().diff(f.creationDate, "month") >= 3) {

4
src/components/file_mode/AttachmentInfo.vue
View file

@ -28,7 +28,7 @@
</div>
</div>
<C2PAInfo class="attachment-info__detail-box" v-if="showC2PAInfo || hasExif" :proof="attachment.proof" :flags="attachment.proofHintFlags" :showFlagsOnly="attachment.useScaled" />
<C2PAInfo class="attachment-info__detail-box" v-if="showC2PAInfo || hasExif" :proof="attachment.proof" :metadata="attachment.mediaMetadata" :showFlagsOnly="attachment.useScaled" />
</div>
</template>
@ -48,7 +48,7 @@ const { attachment } = defineProps<{
//console.error("ATTACHMENT", attachment.proof);
const showC2PAInfo = computed(() => {
return attachment.proof?.integrity?.c2pa !== undefined || attachment.proofHintFlags !== undefined;
return attachment.proof?.integrity?.c2pa !== undefined || attachment.mediaMetadata !== undefined;
});
const hasExif = computed(() => {

19
src/components/file_mode/EventAttachmentInfo.vue
View file

@ -7,7 +7,7 @@
</div>
</div>
<div v-else>
<C2PAInfo :proof="attachment?.proof" :flags="attachment?.proofHintFlags" :metaStripped="metaStripped" />
<C2PAInfo :proof="attachment?.proof" :metadata="attachment?.mediaMetadata" :interventionFlags="attachment?.mediaInterventionFlags" :metaStripped="metaStripped" />
</div>
</div>
<v-btn variant="flat" block class="attachment-info__download-button" @click.stop="() => {}">
@ -21,7 +21,7 @@ import C2PAInfo from "../content-credentials/C2PAInfo.vue";
import { onMounted, Ref, ref } from "vue";
import { EventAttachment } from "../../models/eventAttachment";
import proofmode from "../../plugins/proofmode";
import { extractProofHintFlags } from "../../models/proof";
import { extractMediaMetadata } from "../../models/proof";
const { attachment } = defineProps<{
attachment?: EventAttachment;
@ -30,8 +30,14 @@ const { attachment } = defineProps<{
const loadingProof: Ref<boolean> = ref(false);
const metaStripped: Ref<boolean> = ref(false);
const updateMetaStripped = (a: EventAttachment | undefined) => {
const hadC2PA = a?.mediaInterventionFlags ? a.mediaInterventionFlags.containsC2PA : false;
const hadExif = a?.mediaInterventionFlags ? a.mediaInterventionFlags.containsEXIF : false;
metaStripped.value = (hadC2PA && a?.proof?.integrity?.c2pa === undefined) || (hadExif && a?.proof?.integrity?.exif === undefined);
};
onMounted(() => {
if (attachment?.proofHintFlags && attachment.proof === undefined) {
if ((attachment?.mediaMetadata || attachment?.mediaInterventionFlags) && attachment.proof === undefined) {
const a = attachment;
loadingProof.value = true;
metaStripped.value = true;
@ -42,9 +48,9 @@ onMounted(() => {
a.proof = res;
if (res?.integrity?.c2pa) {
// If we have proof, overwrite the flags
a.proofHintFlags = extractProofHintFlags(a.proof);
a.mediaMetadata = extractMediaMetadata(a.proof);
}
metaStripped.value = a?.proof?.integrity?.c2pa === undefined && a?.proof?.integrity?.exif === undefined;
updateMetaStripped(a);
});
}
})
@ -53,8 +59,7 @@ onMounted(() => {
loadingProof.value = false;
});
} else {
metaStripped.value =
attachment?.proof?.integrity?.c2pa === undefined && attachment?.proof?.integrity?.exif === undefined;
updateMetaStripped(attachment);
}
});
</script>

2
src/components/file_mode/GalleryItemsView.vue
View file

@ -84,7 +84,7 @@ const displayDate = computed(() => {
});
const showInfoButton = computed(() => {
return currentAttachment.value?.proofHintFlags !== undefined;
return currentAttachment.value?.mediaMetadata !== undefined || currentAttachment.value?.mediaInterventionFlags !== undefined;
});
const moreMenuItems = computed(() => {

4
src/components/messages/composition/MessageImage.vue
View file

@ -5,7 +5,7 @@
v-bind="{ ...$props, ...$attrs }"
>
<div class="bubble image-bubble" ref="imageRef">
<CCSummary :multiple="false" :flags="attachment?.proofHintFlags ? [attachment.proofHintFlags] : []" />
<MediaIntervention :multiple="false" :media-intervention-flags="attachment?.mediaInterventionFlags ? [attachment.mediaInterventionFlags] : []" />
<ImageWithProgress v-if="attachment"
:aspect-ratio="16 / 9"
@ -34,7 +34,7 @@ import { MessageProps, useMessage } from "./useMessage";
import { EventAttachment } from "../../../models/eventAttachment";
import { useDisplay } from "vuetify";
import Hammer from "hammerjs";
import CCSummary from "../../content-credentials/CCSummary.vue";
import MediaIntervention from "../../content-credentials/MediaIntervention.vue";
const { t } = useI18n()
const $matrix: any = inject('globalMatrix');

18
src/components/messages/composition/MessageThread.vue
View file

@ -1,7 +1,7 @@
<template>
<component :is="rootComponent" ref="root" v-bind="{ ...$props, ...$attrs }" v-if="showMultiview">
<div class="bubble">
<CCSummary :multiple="items.length > 1" :flags="proofHintFlags" />
<MediaIntervention :multiple="items.length > 1" :mediaInterventionFlags="mediaInterventionFlags" />
<div class="original-message bubble-inset" v-if="inReplyToText">
<div class="original-message-sender">{{ inReplyToSender }}</div>
<div class="original-message-text" v-html="linkify($$sanitize(inReplyToText))" />
@ -60,13 +60,13 @@ import util, { ROOM_TYPE_CHANNEL, ROOM_TYPE_FILE_MODE } from "@/plugins/utils";
import GalleryItemsView from "../../file_mode/GalleryItemsView.vue";
import ThumbnailView from "../../file_mode/ThumbnailView.vue";
import SwipeableThumbnailsView from "../channel/SwipeableThumbnailsView.vue";
import CCSummary from "@/components/content-credentials/CCSummary.vue";
import { computed, inject, onBeforeUnmount, ref, Ref, useTemplateRef, watch } from "vue";
import { EventAttachment } from "../../../models/eventAttachment";
import { useI18n } from "vue-i18n";
import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk";
import { useLazyLoad } from "./useLazyLoad";
import { ProofHintFlags } from "../../../models/proof";
import { MediaInterventionFlags } from "../../../models/proof";
import MediaIntervention from "../../content-credentials/MediaIntervention.vue";
const { t } = useI18n();
const $matrix: any = inject("globalMatrix");
@ -176,14 +176,10 @@ const showMultiview = computed((): boolean => {
);
});
const showCCSummary = computed(() => {
return items.value?.some((i) => i.proofHintFlags !== undefined);
});
const proofHintFlags = computed(() => {
return items.value.reduce((res: ProofHintFlags[], item) => {
if (item.proofHintFlags) {
res.push(item.proofHintFlags);
const mediaInterventionFlags = computed(() => {
return items.value.reduce((res: MediaInterventionFlags[], item) => {
if (item.mediaInterventionFlags) {
res.push(item.mediaInterventionFlags);
}
return res;
}, []);

4
src/models/attachment.ts
View file

@ -1,5 +1,5 @@
import { ComputedRef, Ref } from "vue";
import { Proof, ProofHintFlags } from "./proof";
import { Proof, MediaMetadata } from "./proof";
export class UploadPromise<Type> {
wrappedPromise: Promise<Type>;
@ -58,7 +58,7 @@ export type Attachment = {
useScaled: boolean;
src?: string;
proof?: Proof;
proofHintFlags?: ProofHintFlags;
mediaMetadata?: MediaMetadata;
thumbnail?: AttachmentThumbnail;
sendInfo: AttachmentSendInfo;
};

13
src/models/attachmentManager.ts
View file

@ -18,8 +18,8 @@ import {
import proofmode from "../plugins/proofmode";
import imageResize from "image-resize";
import { computed, ref, Ref, shallowReactive, unref } from "vue";
import utils, { THUMBNAIL_MAX_WIDTH, THUMBNAIL_MAX_HEIGHT, CLIENT_EVENT_PROOF_HINT } from "@/plugins/utils";
import { extractProofHintFlags } from "./proof";
import utils, { THUMBNAIL_MAX_WIDTH, THUMBNAIL_MAX_HEIGHT, CLIENT_EVENT_MEDIA_INTERVENTION_FLAGS } from "@/plugins/utils";
import { extractMediaMetadata } from "./proof";
export class AttachmentManager {
matrixClient: MatrixClient;
@ -118,7 +118,7 @@ export class AttachmentManager {
}
try {
attachment.proof = await proofmode.proofCheckFile(file);
attachment.proofHintFlags = extractProofHintFlags(attachment.proof);
attachment.mediaMetadata = extractMediaMetadata(attachment.proof);
// Default to scaled version if the image does not contain Content Credentials
//
@ -220,7 +220,7 @@ export class AttachmentManager {
const fileSize = this.getSrcFileSize(event);
let proofHintFlags = event.getContent()[CLIENT_EVENT_PROOF_HINT];
let mediaInterventionFlags = event.getContent()[CLIENT_EVENT_MEDIA_INTERVENTION_FLAGS];
const attachment: EventAttachment = {
event: event,
@ -229,7 +229,8 @@ export class AttachmentManager {
srcProgress: -1,
thumbnailProgress: -1,
autoDownloadable: fileSize <= this.maxSizeAutoDownloads,
proofHintFlags: proofHintFlags ? JSON.parse(proofHintFlags) : proofHintFlags,
mediaInterventionFlags: mediaInterventionFlags ? JSON.parse(mediaInterventionFlags) : undefined,
mediaMetadata: undefined,
proof: undefined,
loadSrc: () => Promise.reject("Not implemented"),
loadThumbnail: () => Promise.reject("Not implemented"),
@ -632,7 +633,7 @@ export const createUploadBatch = (manager: AttachmentManager | null, room: Room
eventId,
attachment.dimensions,
attachment.thumbnail,
attachment.proofHintFlags
attachment.mediaMetadata
)
.then((mediaEventId: string) => {
// Look at last item rotation, flipping the sign on this, so looks more like a true stack

5
src/models/eventAttachment.ts
View file

@ -1,6 +1,6 @@
import { MatrixEvent, Room } from "matrix-js-sdk";
import { AttachmentBatch } from "./attachment";
import { Proof, ProofHintFlags } from "./proof";
import { Proof, MediaMetadata } from "./proof";
export type KeanuEventExtension = {
isMxThread?: boolean;
@ -28,7 +28,8 @@ export type EventAttachment = {
thumbnailPromise?: Promise<EventAttachmentUrlData>;
autoDownloadable: boolean;
proof?: Proof;
proofHintFlags?: ProofHintFlags;
mediaInterventionFlags?: MediaInterventionFlags;
mediaMetadata?: MediaMetadata;
loadSrc: () => Promise<EventAttachmentUrlData>;
loadThumbnail: () => Promise<EventAttachmentUrlData>;
loadBlob: () => Promise<{data: Blob}>;

46
src/models/proof.ts
View file

@ -62,21 +62,29 @@ export type Proof = {
ai?: { inferenceResult?: AIInferenceResult };
};
export type ProofHintFlagsGenerator = "unknown" | "camera" | "screenshot" | "ai";
export type ProofHintFlagSource = "c2pa" | "exif" | "metadata";
export type MediaMetadataGenerator = "unknown" | "camera" | "screenshot" | "ai";
export type MediaMetadataPropertySource = "c2pa" | "exif" | "metadata";
export type ProofHintFlagsEdit = {
export type MediaMetadataEdit = {
editor: string;
date?: Date;
}
export type ProofHintFlags = {
export type MediaInterventionFlags = {
creationDate?: Date;
generator?: MediaMetadataGenerator;
modified?: boolean;
containsC2PA?: boolean;
containsEXIF?: boolean;
}
export type MediaMetadata = {
device?: string;
creationDate?: Date;
creationDateSource?: ProofHintFlagSource;
generator?: ProofHintFlagsGenerator;
generatorSource?: ProofHintFlagSource;
edits?: ProofHintFlagsEdit[];
creationDateSource?: MediaMetadataPropertySource;
generator?: MediaMetadataGenerator;
generatorSource?: MediaMetadataPropertySource;
edits?: MediaMetadataEdit[];
containsC2PA?: boolean;
containsEXIF?: boolean;
};
@ -371,10 +379,20 @@ const getFirstWithDataAsDate = (flagValues: FlagValue[], path: FlagMatchRulePath
return undefined;
};
export const extractProofHintFlags = (proof?: Proof): ProofHintFlags | undefined => {
export const mediaMetadataToMediaInterventionFlags = (mediaMetadata: MediaMetadata): MediaInterventionFlags => {
return {
creationDate: mediaMetadata.creationDate,
generator: mediaMetadata.generator,
modified: mediaMetadata.edits && mediaMetadata.edits.length > 0,
containsC2PA: mediaMetadata.containsC2PA,
containsEXIF: mediaMetadata.containsEXIF
}
}
export const extractMediaMetadata = (proof?: Proof): MediaMetadata | undefined => {
if (!proof) return undefined;
let edits: ProofHintFlagsEdit[] | undefined = undefined;
let edits: MediaMetadataEdit[] | undefined = undefined;
let valid = false;
try {
@ -387,7 +405,7 @@ export const extractProofHintFlags = (proof?: Proof): ProofHintFlags | undefined
let source: string | undefined = undefined;
let dateCreated: Date | undefined = undefined;
let dateCreatedSource: ProofHintFlagSource | undefined = undefined;
let dateCreatedSource: MediaMetadataPropertySource | undefined = undefined;
source = getFirstWithData(pathsC2PASource(), rootMatchPath);
if (!source) {
@ -405,8 +423,8 @@ export const extractProofHintFlags = (proof?: Proof): ProofHintFlags | undefined
}
let generator: ProofHintFlagsGenerator = "unknown";
let generatorSource: ProofHintFlagSource | undefined = undefined;
let generator: MediaMetadataGenerator = "unknown";
let generatorSource: MediaMetadataPropertySource | undefined = undefined;
let digitalSourceType = extractFlagValues("integrity/c2pa/manifest_info/manifests[]/assertions[label=c2pa.actions|c2pa.actions.v2]/data/actions[action=c2pa.created]/digitalSourceType", rootMatchPath)?.at(0)?.value as string;
if ([C2PASourceTypeScreenCapture].includes(digitalSourceType)) {
@ -460,7 +478,7 @@ export const extractProofHintFlags = (proof?: Proof): ProofHintFlags | undefined
return undefined;
}
const flags: ProofHintFlags = {
const flags: MediaMetadata = {
device: source,
creationDate: dateCreated,
creationDateSource: dateCreatedSource,

10
src/plugins/utils.js
View file

@ -14,6 +14,7 @@ import i18n from "./lang";
import { toRaw, isRef, isReactive, isProxy } from "vue";
import { UploadPromise } from "../models/attachment";
import png from "@/plugins/png.ts";
import { mediaMetadataToMediaInterventionFlags } from "../models/proof";
export const STATE_EVENT_ROOM_DELETION_NOTICE = "im.keanu.room_deletion_notice";
export const STATE_EVENT_ROOM_DELETED = "im.keanu.room_deleted";
@ -24,7 +25,7 @@ export const ROOM_TYPE_FILE_MODE = "im.keanu.room_type_file";
export const ROOM_TYPE_CHANNEL = "im.keanu.room_type_channel";
export const STATE_EVENT_ROOM_TYPE = "im.keanu.room_type";
export const CLIENT_EVENT_PROOF_HINT = "im.keanu.proof_hint";
export const CLIENT_EVENT_MEDIA_INTERVENTION_FLAGS = "im.keanu.proof_hint";
export const THUMBNAIL_MAX_WIDTH = 640;
export const THUMBNAIL_MAX_HEIGHT = 640;
@ -397,7 +398,7 @@ class Util {
return [encryptedBytes, encryptedFile];
}
sendFile(matrixClient, roomId, file, onUploadProgress, threadRoot, dimensions, thumbnail, proofHintFlags) {
sendFile(matrixClient, roomId, file, onUploadProgress, threadRoot, dimensions, thumbnail, mediaMetadata) {
const uploadPromise = new UploadPromise(undefined);
uploadPromise.wrappedPromise = new Promise((resolve, reject) => {
var reader = new FileReader();
@ -478,8 +479,9 @@ class Util {
msgtype: msgtype,
};
if (proofHintFlags) {
messageContent[CLIENT_EVENT_PROOF_HINT] = JSON.stringify(proofHintFlags);
if (mediaMetadata) {
const interventionFlags = mediaMetadataToMediaInterventionFlags(mediaMetadata);
messageContent[CLIENT_EVENT_MEDIA_INTERVENTION_FLAGS] = JSON.stringify(interventionFlags);
}
// If thread root (an eventId) is set, add that here