153 lines
3.1 KiB
Vue
153 lines
3.1 KiB
Vue
<template>
|
|
<a
|
|
v-if="campaign"
|
|
:href="campaign.url || campaign.affiliate?.url"
|
|
target="_blank"
|
|
class="campaign"
|
|
>
|
|
<img
|
|
v-if="campaign.banner.entity.type === 'network' || !campaign.banner.entity.parent"
|
|
: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,
|
|
},
|
|
minHeight: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
maxHeight: {
|
|
type: Number,
|
|
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>
|