Updated Jules Jordan scraper.

assets/components/campaigns/campaign.vue

@@ -1,21 +1,23 @@
 <template>
+	<iframe
+		v-if="campaign?.banner?.type === 'html'"
+		:width="campaign.banner.width"
+		:height="campaign.banner.height"
+		:src="getSource(campaign)"
+		scrolling="none"
+		marginwidth="0"
+		marginheight="0"
+		class="campaign frame"
+	/>
+
 	<a
-		v-if="campaign"
+		v-else-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'}`"
+			:src="getSource(campaign)"
 			:width="campaign.banner.width"
 			:height="campaign.banner.height"
 			class="campaign-banner"
@@ -37,6 +39,12 @@ function ratioFilter(banner) {
 		return false;
 	}
 
+	if (banner.type === 'html' && banner.width > window.innerWidth) {
+		// usually non-scalable iframes
+		console.log('TOO WIDE');
+		return false;
+	}
+
 	if (this.minRatio && banner.ratio < this.minRatio) {
 		return false;
 	}
@@ -48,6 +56,18 @@ function ratioFilter(banner) {
 	return true;
 }
 
+function getSource(campaign) {
+	if (campaign.banner.entity.type === 'network' || !campaign.banner.entity.parent) {
+		return `/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`;
+	}
+
+	if (campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network') {
+		return `/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`;
+	}
+
+	return null;
+}
+
 function entityCampaign() {
 	const bannerCampaigns = this.entity.campaigns
 		.concat(this.entity.children?.flatMap((child) => child.campaigns))
@@ -106,7 +126,21 @@ async function genericCampaign() {
 	return randomCampaign;
 }
 
+async function specificCampaign(campaignId) {
+	const campaign = await this.$store.dispatch('fetchCampaign', campaignId);
+
+	this.campaign = campaign;
+	this.$emit('campaign', campaign);
+
+	return campaign;
+}
+
 async function mounted() {
+	if (this.$route.query.campaign) {
+		await this.specificCampaign(this.$route.query.campaign);
+		return;
+	}
+
 	if (this.entity) {
 		await this.entityCampaign();
 		return;
@@ -161,7 +195,9 @@ export default {
 	methods: {
 		entityCampaign,
 		genericCampaign,
+		getSource,
 		ratioFilter,
+		specificCampaign,
 		tagCampaign,
 	},
 };
@@ -169,10 +205,10 @@ export default {
 
 <style lang="scss" scoped>
 .campaign {
-	height: 100%;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
+	border: none;
 }
 
 .campaign-banner {