Add source and provider definition

Signed-off-by: Olga Bulat <obulat@gmail.com>

Author: obulat

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,
     },
     /**

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[]>,

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>

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,13 +187,26 @@ export default defineComponent({
       emit: emit as SetupContext["emit"],
     })
 
+    const onTriggerMouseEnter = () => {
+      if (props.activateOnHover) {
+        open()
+      }
+    }
+    const onTriggerMouseLeave = () => {
+      if (props.activateOnHover) {
+        close()
+      }
+    }
+
     return {
       open,
       close,
       visibleRef,
       triggerContainerRef,
       triggerRef,
       onTriggerClick,
+      onTriggerMouseEnter,
+      onTriggerMouseLeave,
       triggerA11yProps,
     }
   },

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: {

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

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,