From ca3307be07a8f45a30dd38e29049454e791c4605 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 28 Nov 2023 17:51:08 +0300
Subject: [PATCH] Add source and provider definition

Signed-off-by: Olga Bulat <obulat@gmail.com>
---
 .../components/VIconButton/VIconButton.vue    |  2 +-
 .../src/components/VMediaInfo/VMetadata.vue   | 17 +++++-
 .../VMediaInfo/VSourceProviderPopover.vue     | 56 +++++++++++++++++++
 frontend/src/components/VPopover/VPopover.vue | 23 +++++++-
 frontend/src/locales/scripts/en.json5         |  2 +
 frontend/src/types/media.ts                   |  1 +
 frontend/src/utils/metadata.ts                |  2 +
 7 files changed, 98 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/VMediaInfo/VSourceProviderPopover.vue

diff --git a/frontend/src/components/VIconButton/VIconButton.vue b/frontend/src/components/VIconButton/VIconButton.vue
index 35c3621a3fb..2c800a78246 100644
--- a/frontend/src/components/VIconButton/VIconButton.vue
+++ b/frontend/src/components/VIconButton/VIconButton.vue
@@ -44,7 +44,7 @@ export default defineComponent({
      * The size of the button, matches the sizes of VButton component.
      */
     size: {
-      type: String as PropType<Exclude<ButtonSize, "disabled">>,
+      type: String as PropType<ButtonSize>,
       required: true,
     },
     /**
diff --git a/frontend/src/components/VMediaInfo/VMetadata.vue b/frontend/src/components/VMediaInfo/VMetadata.vue
index f072b0fccc2..50dce4c269b 100644
--- a/frontend/src/components/VMediaInfo/VMetadata.vue
+++ b/frontend/src/components/VMediaInfo/VMetadata.vue
@@ -1,7 +1,13 @@
 <template>
   <dl v-if="isSm" class="metadata grid gap-8" :style="columnCount">
     <div v-for="datum in metadata" :key="`${datum.label}`">
-      <dt class="label-regular mb-1 ps-1">{{ $t(datum.label) }}</dt>
+      <dt class="label-regular mb-1 flex flex-row ps-1">
+        {{ $t(datum.label) }}
+        <VSourceProviderPopover
+          v-if="datum.name && ['source', 'provider'].includes(datum.name)"
+          :datum="datum"
+        />
+      </dt>
       <VMetadataValue
         :datum="datum"
         @click="sendVisitSourceLinkEvent(datum.source)"
@@ -10,8 +16,12 @@
   </dl>
   <dl v-else class="grid grid-cols-[auto,1fr] gap-x-4 gap-y-2">
     <template v-for="datum in metadata">
-      <dt :key="`${datum.label}`" class="label-regular pt-1">
+      <dt :key="`${datum.label}`" class="label-regular flex flex-row pt-1">
         {{ $t(datum.label) }}
+        <VSourceProviderPopover
+          v-if="datum.name && ['source', 'provider'].includes(datum.name)"
+          :datum="datum"
+        />
       </dt>
       <VMetadataValue
         :key="`${datum.label}-value`"
@@ -30,10 +40,11 @@ import { useAnalytics } from "~/composables/use-analytics"
 import { useUiStore } from "~/stores/ui"
 
 import VMetadataValue from "~/components/VMediaInfo/VMetadataValue.vue"
+import VSourceProviderPopover from "~/components/VMediaInfo/VSourceProviderPopover.vue"
 
 export default defineComponent({
   name: "VMetadata",
-  components: { VMetadataValue },
+  components: { VSourceProviderPopover, VMetadataValue },
   props: {
     metadata: {
       type: Array as PropType<Metadata[]>,
diff --git a/frontend/src/components/VMediaInfo/VSourceProviderPopover.vue b/frontend/src/components/VMediaInfo/VSourceProviderPopover.vue
new file mode 100644
index 00000000000..0e2bbd0099d
--- /dev/null
+++ b/frontend/src/components/VMediaInfo/VSourceProviderPopover.vue
@@ -0,0 +1,56 @@
+<template>
+  <VPopover placement="top" :activate-on-hover="true">
+    <template #trigger>
+      <VIconButton
+        :label="datum.label"
+        variant="filled-white"
+        size="disabled"
+        class="ms-2 h-4 w-4"
+        :icon-props="{ name: 'info', size: 4 }"
+      />
+    </template>
+    <template #default>
+      <p
+        class="caption-regular rounded-sm bg-dark-charcoal px-2 py-1 text-white"
+        tabindex="0"
+      >
+        {{ description }}
+      </p>
+    </template>
+  </VPopover>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue"
+
+import type { Metadata } from "~/types/media"
+import { useI18n } from "~/composables/use-i18n"
+
+import VIconButton from "~/components/VIconButton/VIconButton.vue"
+import VPopover from "~/components/VPopover/VPopover.vue"
+
+export default defineComponent({
+  name: "VSourceProviderPopover",
+  components: { VIconButton, VPopover },
+  props: {
+    datum: {
+      type: Object as PropType<Metadata>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const i18n = useI18n()
+    const description = computed(() => {
+      if (!props.datum.name) return ""
+      return i18n.t(
+        props.datum.name === "source"
+          ? "mediaDetails.sourceDescription"
+          : "mediaDetails.providerDescription"
+      )
+    })
+
+    return {
+      description,
+    }
+  },
+})
+</script>
diff --git a/frontend/src/components/VPopover/VPopover.vue b/frontend/src/components/VPopover/VPopover.vue
index f6ec810858c..fdfbdb8b2ac 100644
--- a/frontend/src/components/VPopover/VPopover.vue
+++ b/frontend/src/components/VPopover/VPopover.vue
@@ -6,6 +6,10 @@
       ref="triggerContainerRef"
       class="flex w-min items-stretch whitespace-nowrap"
       @click="onTriggerClick"
+      @mouseenter="onTriggerMouseEnter"
+      @focusin="onTriggerMouseEnter"
+      @mouseleave="onTriggerMouseLeave"
+      @focusout="onTriggerMouseLeave"
     >
       <!--
         @slot The trigger, should be a button 99.99% of the time. If you need custom event handling on the trigger button, ensure bubbling is not prevented or else the popover will not open
@@ -64,6 +68,10 @@ export default defineComponent({
    * default for each of them can take over.
    */
   props: {
+    /**
+     * Whether the popover should show when the trigger is hovered on.
+     */
+    activateOnHover: { type: Boolean, default: undefined },
     /**
      * Whether the popover should hide when the <kbd>Escape</kbd> key is pressed.
      *
@@ -164,7 +172,7 @@ export default defineComponent({
      */
     "close",
   ],
-  setup(_, { emit }) {
+  setup(props, { emit }) {
     const visibleRef = ref(false)
     const triggerContainerRef = ref<HTMLElement | null>(null)
 
@@ -179,6 +187,17 @@ export default defineComponent({
       emit: emit as SetupContext["emit"],
     })
 
+    const onTriggerMouseEnter = () => {
+      if (props.activateOnHover) {
+        open()
+      }
+    }
+    const onTriggerMouseLeave = () => {
+      if (props.activateOnHover) {
+        close()
+      }
+    }
+
     return {
       open,
       close,
@@ -186,6 +205,8 @@ export default defineComponent({
       triggerContainerRef,
       triggerRef,
       onTriggerClick,
+      onTriggerMouseEnter,
+      onTriggerMouseLeave,
       triggerA11yProps,
     }
   },
diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
index deaf2a6b816..85ae100a419 100644
--- a/frontend/src/locales/scripts/en.json5
+++ b/frontend/src/locales/scripts/en.json5
@@ -541,6 +541,8 @@
     },
     providerLabel: "Provider",
     sourceLabel: "Source",
+    providerDescription: "Website where the content is hosted",
+    sourceDescription: "Organization that created or owns the original content",
     loading: "Loading...",
     relatedError: "Error fetching related media",
     aria: {
diff --git a/frontend/src/types/media.ts b/frontend/src/types/media.ts
index 416ecd0c4b7..063f68cc26c 100644
--- a/frontend/src/types/media.ts
+++ b/frontend/src/types/media.ts
@@ -131,6 +131,7 @@ export const isMediaDetail = <T extends SupportedMediaType>(
 }
 
 export type Metadata = {
+  name?: string
   label: string
   url?: string
   value: string
diff --git a/frontend/src/utils/metadata.ts b/frontend/src/utils/metadata.ts
index 70466eab139..9c5c08b9ab6 100644
--- a/frontend/src/utils/metadata.ts
+++ b/frontend/src/utils/metadata.ts
@@ -40,6 +40,7 @@ export const getMediaMetadata = (
   const metadata: Metadata[] = []
   if (media.source && media.providerName !== media.sourceName) {
     metadata.push({
+      name: "provider",
       label: "mediaDetails.providerLabel",
       value: media.providerName || media.provider,
     })
@@ -50,6 +51,7 @@ export const getMediaMetadata = (
   )
   const sourceName = media.sourceName ?? media.providerName ?? media.provider
   metadata.push({
+    name: "source",
     label: "mediaDetails.sourceLabel",
     source: media.source ?? media.provider,
     url: sourceUrl,