Rename ProofHintFlags to MediaMetadata

Also, introduce the MediaInterventionFlags class to not send all metadata across, just the info needed for showing the intervention flags.

src/components/content-credentials/C2PAInfo.vue

@@ -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 }

src/components/content-credentials/MediaIntervention.vue

@@ -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");

src/components/content-credentials/intervention.ts

@@ -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) {