Removed affiliate table in favor of direct campaign URLs.

assets/components/campaigns/campaign.vue

@@ -0,0 +1,96 @@
+<template>
+	<a
+		v-if="campaign"
+		:href="campaign.url"
+		target="_blank"
+		class="campaign"
+	>
+		<img
+			v-if="campaign.banner.entity.type === 'network'"
+			:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
+			class="campaign-banner"
+		>
+
+		<img
+			v-if="campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network'"
+			:src="`/img/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
+			class="campaign-banner"
+		>
+	</a>
+</template>
+
+<script>
+function entityCampaign() {
+	const bannerCampaigns = this.entity.campaigns
+		.concat(this.entity.children?.flatMap(child => child.campaigns))
+		.concat(this.entity.parent?.campaigns)
+		.filter(campaignX => campaignX.banner?.ratio > 3);
+
+	if (bannerCampaigns.length > 0) {
+		return bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
+	}
+
+	return null;
+}
+
+function tagCampaign() {
+	const campaignBanners = this.tag.banners.filter(banner => banner.campaigns.length > 0 && banner.ratio > 3);
+	const banner = campaignBanners[Math.floor(Math.random() * campaignBanners.length)];
+
+	if (banner?.campaigns.length > 0) {
+		return {
+			...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)],
+			banner,
+		};
+	}
+
+	return null;
+}
+
+function campaign() {
+	if (this.entity) {
+		return this.entityCampaign();
+	}
+
+	if (this.tag) {
+		return this.tagCampaign();
+	}
+
+	return null;
+}
+
+export default {
+	props: {
+		entity: {
+			type: Object,
+			default: null,
+		},
+		tag: {
+			type: Object,
+			default: null,
+		},
+	},
+	computed: {
+		campaign,
+	},
+	methods: {
+		entityCampaign,
+		tagCampaign,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.campaign {
+	height: 100%;
+	display: inline-flex;
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+}
+
+.campaign-banner {
+	max-height: 100%;
+	max-width: 100%;
+}
+</style>

assets/components/entities/entity.vue

@@ -41,25 +41,6 @@
 				/>
 			</a>
 
-			<a
-				v-if="campaign"
-				:href="campaign.affiliate.url"
-				target="_blank"
-				class="campaign"
-			>
-				<img
-					v-if="campaign.banner.entity.type === 'network'"
-					:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
-					class="campaign-banner"
-				>
-
-				<img
-					v-if="campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network'"
-					:src="`/img/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
-					class="campaign-banner"
-				>
-			</a>
-
 			<ul
 				v-if="entity.tags.length > 0"
 				class="tags"
@@ -115,6 +96,10 @@
 				/>
 			</Scroll>
 
+			<div class="campaign-container">
+				<Campaign :entity="entity" />
+			</div>
+
 			<FilterBar
 				ref="filter"
 				:fetch-releases="fetchEntity"
@@ -143,9 +128,9 @@ import Pagination from '../pagination/pagination.vue';
 import Releases from '../releases/releases.vue';
 import Children from './children.vue';
 import Scroll from '../scroll/scroll.vue';
+import Campaign from '../campaigns/campaign.vue';
 
 async function fetchEntity(scroll = true) {
-	this.campaign = null;
 	this.entityUrl = null;
 
 	const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
@@ -160,16 +145,7 @@ async function fetchEntity(scroll = true) {
 	this.totalCount = totalCount;
 
 	this.pageTitle = entity.name;
-
-	const channelBannerCampaigns = entity.campaigns.filter(campaign => campaign.banner);
-	const networkBannerCampaigns = entity.parent?.campaigns.filter(campaign => campaign.banner);
-	const bannerCampaigns = channelBannerCampaigns.length > 0 ? channelBannerCampaigns : networkBannerCampaigns;
-
-	if (bannerCampaigns.length > 0) {
-		this.campaign = bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
-	}
-
-	this.entityUrl = entity.campaigns.find(campaign => !campaign.banner)?.affiliate.url || entity.url;
+	this.entityUrl = entity.campaigns.find(campaign => !campaign.banner)?.url || entity.url;
 
 	if (scroll && this.$refs.filter?.$el) {
 		this.$refs.filter.$el.scrollIntoView();
@@ -194,6 +170,7 @@ export default {
 		Children,
 		Releases,
 		Scroll,
+		Campaign,
 	},
 	data() {
 		return {
@@ -202,7 +179,6 @@ export default {
 			totalCount: null,
 			limit: Number(this.$route.query.limit) || 20,
 			expanded: false,
-			campaign: null,
 			entityUrl: null,
 		};
 	},
@@ -221,7 +197,6 @@ export default {
 @import 'breakpoints';
 
 .info {
-	height: 6rem;
 	display: flex;
 	justify-content: space-between;
 	background: var(--profile);
@@ -229,15 +204,17 @@ export default {
 }
 
 .link {
-	max-width: 20rem;
+	max-width: 15rem;
 	display: flex;
 	align-items: center;
 	box-sizing: border-box;
-	padding: 1rem;
+	padding: .5rem 1rem;
 	text-decoration: none;
 }
 
 .link-child {
+	flex-shrink: 0;
+
 	.icon {
 		fill: var(--lighten);
 		margin: 0 0 0 1rem;
@@ -250,6 +227,7 @@ export default {
 
 .link-parent {
 	flex-direction: row-reverse;
+	flex-shrink: 0;
 	margin: 0 0 0 3rem;
 
 	.icon {
@@ -276,14 +254,7 @@ export default {
 
 .favicon {
 	height: 1rem;
-}
-
-.campaign {
-	height: 100%;
-}
-
-.campaign-banner {
-	height: 100%;
+	flex-shrink: 0;
 }
 
 .content-inner {
@@ -295,6 +266,12 @@ export default {
 	background: var(--profile);
 }
 
+.campaign-container {
+	background: var(--background-dim);
+	text-align: center;
+	padding: .5rem;
+}
+
 .releases {
 	flex-grow: 1;
 }

assets/components/tags/tag.vue

@@ -48,24 +48,7 @@
 			/>
 
 			<div class="campaign-container">
-				<a
-					v-if="campaign"
-					:href="campaign.affiliate.url"
-					target="_blank"
-					class="campaign"
-				>
-					<img
-						v-if="campaign.banner.entity.type === 'network'"
-						:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
-						class="campaign-banner"
-					>
-
-					<img
-						v-if="campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network'"
-						:src="`/img/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
-						class="campaign-banner"
-					>
-				</a>
+				<Campaign :tag="tag" />
 			</div>
 
 			<FilterBar
@@ -97,6 +80,7 @@ import Album from '../album/album.vue';
 import Releases from '../releases/releases.vue';
 import Pagination from '../pagination/pagination.vue';
 import Scroll from '../scroll/scroll.vue';
+import Campaign from '../campaigns/campaign.vue';
 
 const converter = new Converter();
 
@@ -115,15 +99,6 @@ async function fetchReleases(scroll = true) {
 	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
 	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
 
-	if (tag.banners.length > 0) {
-		const banner = tag.banners[Math.floor(Math.random() * tag.banners.length)];
-
-		this.campaign = {
-			...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)],
-			banner,
-		};
-	}
-
 	if (scroll && this.$refs.filter) {
 		this.$refs.filter.$el.scrollIntoView();
 	}
@@ -152,6 +127,7 @@ export default {
 		Photos,
 		Pagination,
 		Scroll,
+		Campaign,
 	},
 	data() {
 		return {
@@ -163,7 +139,6 @@ export default {
 			pageTitle: null,
 			hasMedia: false,
 			expanded: false,
-			campaign: null,
 		};
 	},
 	computed: {
@@ -240,14 +215,4 @@ export default {
 	background: var(--background-dim);
 	text-align: center;
 }
-
-.campaign {
-	display: inline-block;
-	height: 100%;
-
-	.campaign-banner {
-		max-height: 100%;
-		max-width: 100%;
-	}
-}
 </style>

assets/js/entities/actions.js

@@ -63,6 +63,7 @@ function initEntitiesActions(store, router) {
 							priority
 							independent
 							hasLogo
+							${campaignsFragment}
 						}
                     }
 					${campaignsFragment}

assets/js/fragments.js

@@ -98,26 +98,32 @@ const actorFields = `
 
 const campaignsFragment = `
 	campaigns(filter: {
-		banner: {
-			bannersTagsConnection: {
-				none: {
-					tag: {
-						slug: {
-							in: $exclude
+		or: [
+			{
+				banner: {
+					bannersTagsConnection: {
+						none: {
+							tag: {
+								slug: {
+									in: $exclude
+								}
+							}
 						}
 					}
 				}
 			}
-		}
+			{
+				bannerExists: false
+			}
+		]
 	}) {
-		affiliate {
-			id
-			url
-		}
+		id
+		url
 		banner {
 			id
 			width
 			height
+			ratio
 			entity {
 				id
 				type

assets/js/tags/actions.js

@@ -120,6 +120,7 @@ function initTagsActions(store, _router) {
 							id
 							width
 							height
+							ratio
 							entity {
 								id
 								type
@@ -135,10 +136,8 @@ function initTagsActions(store, _router) {
 								}
 							}
 							campaigns {
-								affiliate {
-									id
-									url
-								}
+								id
+								url
 								entity {
 									id
 									type