traxxx-web/components/campaigns/campaign.vue

77 lines
1.7 KiB
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%;
}
</style>