diff --git a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
index 8ae307d215b..4490a4126c1 100644
--- a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
+++ b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
@@ -25,10 +25,24 @@
>{{ $t(`collection.link.${collection}`) }}
{{ resultsLabel }}
+
+
+ {{ resultsLabel[0]
+ }}{{
+ source.name
+ }}{{ resultsLabel[1] }}
+
@@ -48,6 +62,7 @@ import { useMediaStore } from "~/stores/media"
import VIcon from "~/components/VIcon/VIcon.vue"
import VButton from "~/components/VButton.vue"
+import VLink from "~/components/VLink.vue"
const icons = {
tag: "tag",
@@ -60,7 +75,7 @@ const icons = {
*/
export default defineComponent({
name: "VCollectionHeader",
- components: { VIcon, VButton },
+ components: { VLink, VIcon, VButton },
props: {
collectionParams: {
type: Object as PropType,
@@ -82,14 +97,23 @@ export default defineComponent({
const iconName = computed(() => icons[props.collectionParams.collection])
const collection = computed(() => props.collectionParams.collection)
- const sourceName = computed(() => {
+ const source = computed(() => {
if (props.collectionParams.collection === "tag") {
- return ""
+ return {
+ name: "",
+ link: "",
+ }
+ }
+ return {
+ name: providerStore.getProviderName(
+ props.collectionParams.source,
+ props.mediaType
+ ),
+ link: providerStore.getSourceUrl(
+ props.collectionParams.source,
+ props.mediaType
+ ),
}
- return providerStore.getProviderName(
- props.collectionParams.source,
- props.mediaType
- )
})
const title = computed(() => {
@@ -98,7 +122,7 @@ export default defineComponent({
} else if (props.collectionParams.collection === "creator") {
return props.collectionParams.creator
}
- return sourceName.value
+ return source.value.name
})
const url = computed(() => {
@@ -107,10 +131,7 @@ export default defineComponent({
} else if (props.collectionParams.collection === "creator") {
return props.creatorUrl
}
- return providerStore.getSourceUrl(
- props.collectionParams.source,
- props.mediaType
- )
+ return source.value.link
})
const { getI18nCollectionResultCountLabel } = useI18nResultsCount()
@@ -119,19 +140,22 @@ export default defineComponent({
return ""
}
const resultsCount = mediaStore.results[props.mediaType].count
- if (props.collectionParams.collection === "creator") {
- return getI18nCollectionResultCountLabel(
- resultsCount,
- props.mediaType,
- "creator",
- { source: sourceName.value }
- )
- }
- return getI18nCollectionResultCountLabel(
+ const params =
+ props.collectionParams.collection === "creator"
+ ? { source: source.value.name }
+ : undefined
+
+ const label = getI18nCollectionResultCountLabel(
resultsCount,
props.mediaType,
- props.collectionParams.collection
+ props.collectionParams.collection,
+ params
)
+ if (props.collectionParams.collection === "creator") {
+ const splitLabel = label.split(source.value.name)
+ return splitLabel.length === 2 ? splitLabel : ["", ""]
+ }
+ return label
})
const isMd = computed(() => uiStore.isBreakpoint("md"))
@@ -157,6 +181,7 @@ export default defineComponent({
collection,
title,
resultsLabel,
+ source,
url,
iconName,
isMd,
@@ -167,6 +192,15 @@ export default defineComponent({