traxxx-web/components/campaigns/campaign.vue

<template>
	<iframe
		v-if="campaign?.banner?.type === 'html'"
		ref="iframe"
		:width="campaign.banner.width"
		:height="campaign.banner.height"
		:src="bannerSrc"
		scrolling="no"
		marginwidth="0"
		marginheight="0"
		class="campaign frame"
		data-umami-event="campaign-click"
		:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
	/>

	<a
		v-else-if="campaign.banner"
		:href="campaign.url || campaign.affiliate?.url"
		target="_blank"
		class="campaign"
		data-umami-event="campaign-click"
		:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
	>
		<img
			:src="bannerSrc"
			:width="campaign.banner.width"
			:height="campaign.banner.height"
			class="campaign-banner"
		>
	</a>
</template>

<script setup>
const props = defineProps({
	campaign: {
		type: Object,
		default: null,
	},
});

// console.log(props.campaign?.banner);

const bannerSrc = (() => {
	if (props.campaign.banner) {
		if (props.campaign.banner.entity.type === 'network' || !props.campaign.banner.entity.parent) {
			return `/banners/${props.campaign.banner.entity.slug}/${props.campaign.banner.id}.${props.campaign.banner.type || 'jpg'}`;
		}

		if (props.campaign.banner.entity.type === 'channel' && props.campaign.banner.entity.parent?.type === 'network') {
			return `/banners/${props.campaign.banner.entity.parent.slug}/${props.campaign.banner.entity.slug}/${props.campaign.banner.id}.${props.campaign.banner.type || 'jpg'}`;
		}
	}

	return null;
})();
</script>

<style scoped>
.campaign {
	height: 100%;
	display: flex;
	justify-content: center;
}

.frame {
	border: none;
	overflow: hidden;
}

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