Improved campaign component, added various banners.

assets/components/campaigns/campaign.vue

@@ -7,43 +7,79 @@
 	>
 		<img
 			v-if="campaign.banner.entity.type === 'network'"
-			:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
+			:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpg`"
+			:width="campaign.banner.width"
+			:height="campaign.banner.height"
 			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`"
+			:src="`/img/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.jpg`"
+			:width="campaign.banner.width"
+			:height="campaign.banner.height"
 			class="campaign-banner"
 		>
 	</a>
 </template>
 
 <script>
+function ratioFilter(banner) {
+	if (!banner) {
+		return false;
+	}
+
+	if (this.minHeight && banner.height < this.minHeight) {
+		return false;
+	}
+
+	if (this.maxHeight && banner.height > this.minHeight) {
+		return false;
+	}
+
+	if (this.minRatio && banner.ratio < this.minRatio) {
+		return false;
+	}
+
+	if (this.maxRatio && banner.ratio > this.maxRatio) {
+		return false;
+	}
+
+	return true;
+}
+
 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);
+		.filter(campaignX => campaignX && this.ratioFilter(campaignX.banner));
 
 	if (bannerCampaigns.length > 0) {
-		return bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
+		const randomCampaign = bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
+
+		this.$emit('campaign', randomCampaign);
+		return randomCampaign;
 	}
 
+	this.$emit('campaign', null);
 	return null;
 }
 
 function tagCampaign() {
-	const campaignBanners = this.tag.banners.filter(banner => banner.campaigns.length > 0 && banner.ratio > 3);
+	const campaignBanners = this.tag.banners.filter(banner => banner.campaigns.length > 0 && this.ratioFilter(banner));
 	const banner = campaignBanners[Math.floor(Math.random() * campaignBanners.length)];
 
 	if (banner?.campaigns.length > 0) {
-		return {
+		const randomCampaign = {
 			...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)],
 			banner,
 		};
+
+		this.$emit('campaign', randomCampaign);
+		return randomCampaign;
 	}
 
+	this.$emit('campaign', null);
 	return null;
 }
 
@@ -56,6 +92,7 @@ function campaign() {
 		return this.tagCampaign();
 	}
 
+	this.$emit('campaign', null); // allow parent to toggle campaigns depending on availability
 	return null;
 }
 
@@ -69,12 +106,22 @@ export default {
 			type: Object,
 			default: null,
 		},
+		minRatio: {
+			type: Number,
+			default: null,
+		},
+		maxRatio: {
+			type: Number,
+			default: null,
+		},
 	},
+	emits: ['campaign'],
 	computed: {
 		campaign,
 	},
 	methods: {
 		entityCampaign,
+		ratioFilter,
 		tagCampaign,
 	},
 };
@@ -90,6 +137,7 @@ export default {
 }
 
 .campaign-banner {
+	height: auto;
 	max-height: 100%;
 	max-width: 100%;
 }