traxxx/assets/components/campaigns/campaign.vue

<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}.${campaign.banner.type || '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}.${campaign.banner.type || '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 && this.ratioFilter(campaignX.banner));

	if (bannerCampaigns.length > 0) {
		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 && this.ratioFilter(banner));
	const banner = campaignBanners[Math.floor(Math.random() * campaignBanners.length)];

	if (banner?.campaigns.length > 0) {
		const randomCampaign = {
			...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)],
			banner,
		};

		this.$emit('campaign', randomCampaign);
		return randomCampaign;
	}

	this.$emit('campaign', null);
	return null;
}

function campaign() {
	if (this.entity) {
		return this.entityCampaign();
	}

	if (this.tag) {
		return this.tagCampaign();
	}

	this.$emit('campaign', null); // allow parent to toggle campaigns depending on availability
	return null;
}

export default {
	props: {
		entity: {
			type: Object,
			default: null,
		},
		tag: {
			type: Object,
			default: null,
		},
		minRatio: {
			type: Number,
			default: null,
		},
		maxRatio: {
			type: Number,
			default: null,
		},
	},
	emits: ['campaign'],
	computed: {
		campaign,
	},
	methods: {
		entityCampaign,
		ratioFilter,
		tagCampaign,
	},
};
</script>

<style lang="scss" scoped>
.campaign {
	height: 100%;
	display: inline-flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
}

.campaign-banner {
	height: auto;
	max-height: 100%;
	max-width: 100%;
}
</style>