More work on CC display

src/components/content-credentials/C2PAInfo.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-if="props.flags">
     <div class="detail-title">
-      {{ t("file_mode.content_credentials") }}
+      {{ t("cc.content_credentials") }}
       <v-icon>$vuetify.icons.ic_cr</v-icon>
     </div>
-    <div class="detail-subtitle">
-      {{ t("file_mode.content_credentials_info") }}
+    <div class="detail-subtitle" v-if="hasC2PA">
+      {{ t("cc.content_credentials_info") }}
     </div>
 
     <div class="cc-detail-info" v-if="infoText !== undefined">
@@ -29,8 +29,8 @@
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-import { ProofHintFlags } from "../../models/proof";
-import { ref, Ref, watch } from "vue";
+import { Proof, ProofHintFlags } from "../../models/proof";
+import { computed, ref, Ref, watch } from "vue";
 import dayjs from "dayjs";
 import CCProperty from "./CCProperty.vue";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -40,6 +40,7 @@ dayjs.extend(relativeTime);
 const { t } = useI18n();
 
 const props = defineProps<{
+  proof?: Proof;
   flags?: ProofHintFlags;
 }>();
 
@@ -47,6 +48,10 @@ const infoText: Ref<string | undefined> = ref(undefined);
 const creationDate: Ref<string | undefined> = ref(undefined);
 const valid: Ref<boolean> = ref(false);
 
+  const hasC2PA = computed(() => {
+    return props.proof?.integrity?.c2pa !== undefined;
+  });
+
 watch(
   props,
   () => {

src/components/content-credentials/CCSummary.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cc-summary" v-if="props.flags.length > 0 && infoText.length > 0">
+  <div class="cc-summary" v-if="flags.length > 0 && infoText.length > 0">
     <v-icon class="intervention-icon">{{
       showCheck ? "$vuetify.icons.ic_intervention_check" : "$vuetify.icons.ic_intervention"
     }}</v-icon
@@ -11,18 +11,30 @@
 import { computed } from "vue";
 import { ProofHintFlags } from "../../models/proof";
 
-const props = defineProps<{
+const { multiple, flags } = defineProps<{
+  multiple: boolean;
   flags: ProofHintFlags[];
 }>();
 
 const showCheck = computed(() => {
-  return props.flags.some((f) => f?.valid);
+  if (!multiple && flags.length == 1) {
+    return flags[0].generatorSource === "c2pa";
+  } else if (multiple) {
+    return flags.some((f) => f.generatorSource === "c2pa")
+  }
+  return false;
 });
 
 const infoText = computed(() => {
-  if (props.flags.some((f) => f.generator === "ai")) {
+  if (!multiple && flags.length == 1) {
+    if (flags[0].generator === "ai") {
+      return "<b>This image is generated by AI.</b> Take a closer look at the file details.";
+    } else if (flags[0].generator === "screenshot") {
+      return "<b>This is a screenshot.</b> Take a closer look at the file details.";
+    }
+  } else if (flags.some((f) => f.generator === "ai")) {
     return "<b>Contains AI generated media.</b> Take a closer look at the file details for each.";
-  } else if (props.flags.some((f) => f.generator === "screenshot")) {
+  } else if (flags.some((f) => f.generator === "screenshot")) {
     return "<b>Contains screenshots.</b> Take a closer look at the file details for each.";
   }
   return "TODO - Content Credentials Info";