Added rudimentary affiliate banner setup. Separated login and signup disable. Added various tag photos.

assets/components/auth/login.vue

@@ -36,6 +36,7 @@
 			>Log in</button>
 
 			<router-link
+				v-if="$store.state.auth.signup"
 				:to="{ name: 'signup', query: { ref: $route.query.ref } }"
 				class="link link-external signup"
 			>Sign up</router-link>
@@ -65,7 +66,7 @@ async function login() {
 }
 
 function mounted() {
-	if (!this.$store.state.auth.enabled) {
+	if (!this.$store.state.auth.login) {
 		this.$router.replace({ name: 'not-found' });
 	}
 }

assets/components/auth/signup.vue

@@ -44,6 +44,7 @@
 			>Sign up</button>
 
 			<router-link
+				v-if="$store.state.auth.login"
 				:to="{ name: 'login', query: { ref: $route.query.ref } }"
 				class="link link-external login"
 			>Log in</router-link>
@@ -74,7 +75,7 @@ async function signup() {
 }
 
 function mounted() {
-	if (!this.$store.state.auth.enabled) {
+	if (!this.$store.state.auth.signup) {
 		this.$router.replace({ name: 'not-found' });
 	}
 }

assets/components/entities/entity.vue

@@ -5,7 +5,7 @@
 	>
 		<div class="info">
 			<a
-				:href="entity.url"
+				:href="entityUrl"
 				target="_blank"
 				rel="noopener"
 				class="link link-child"
@@ -41,6 +41,25 @@
 				/>
 			</a>
 
+			<a
+				v-if="campaign"
+				:href="campaign.affiliate.url"
+				target="_blank"
+				class="campaign"
+			>
+				<img
+					v-if="campaign.banner.entity.type === 'network'"
+					:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
+					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}.jpeg`"
+					class="campaign-banner"
+				>
+			</a>
+
 			<ul
 				v-if="entity.tags.length > 0"
 				class="tags"
@@ -72,6 +91,8 @@
 					v-else
 					class="name parent-name"
 				>{{ entity.parent.name }}</h3>
+
+				<Icon icon="device_hub" />
 			</router-link>
 		</div>
 
@@ -124,6 +145,9 @@ import Children from './children.vue';
 import Scroll from '../scroll/scroll.vue';
 
 async function fetchEntity(scroll = true) {
+	this.campaign = null;
+	this.entityUrl = null;
+
 	const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
 		entitySlug: this.$route.params.entitySlug,
 		entityType: this.$route.name,
@@ -137,6 +161,16 @@ async function fetchEntity(scroll = true) {
 
 	this.pageTitle = entity.name;
 
+	const channelBannerCampaigns = entity.campaigns.filter(campaign => campaign.banner);
+	const networkBannerCampaigns = entity.parent?.campaigns.filter(campaign => campaign.banner);
+	const bannerCampaigns = channelBannerCampaigns.length > 0 ? channelBannerCampaigns : networkBannerCampaigns;
+
+	if (bannerCampaigns.length > 0) {
+		this.campaign = bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
+	}
+
+	this.entityUrl = entity.campaigns.find(campaign => !campaign.banner)?.affiliate.url || entity.url;
+
 	if (scroll && this.$refs.filter?.$el) {
 		this.$refs.filter.$el.scrollIntoView();
 	}
@@ -168,6 +202,8 @@ export default {
 			totalCount: null,
 			limit: Number(this.$route.query.limit) || 20,
 			expanded: false,
+			campaign: null,
+			entityUrl: null,
 		};
 	},
 	watch: {
@@ -185,6 +221,7 @@ export default {
 @import 'breakpoints';
 
 .info {
+	height: 6rem;
 	display: flex;
 	justify-content: space-between;
 	background: var(--profile);
@@ -214,6 +251,13 @@ export default {
 .link-parent {
 	flex-direction: row-reverse;
 	margin: 0 0 0 3rem;
+
+	.icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		fill: var(--lighten);
+		margin: 0 .5rem 0 0;
+	}
 }
 
 .logo {
@@ -223,7 +267,7 @@ export default {
 }
 
 .logo-child {
-	height: 2rem;
+	height: 3rem;
 }
 
 .logo-parent {
@@ -234,6 +278,14 @@ export default {
 	height: 1rem;
 }
 
+.campaign {
+	height: 100%;
+}
+
+.campaign-banner {
+	height: 100%;
+}
+
 .content-inner {
 	display: flex;
 	flex-direction: column;

assets/components/header/menu.vue

@@ -2,13 +2,13 @@
 	<div class="menu">
 		<ul class="menu-items noselect">
 			<router-link
-				v-if="auth && me"
+				v-if="login && me"
 				:to="{ name: 'user', params: { username: me.username } }"
 				class="menu-username"
 			>{{ me.username }}</router-link>
 
 			<router-link
-				v-else-if="auth"
+				v-else-if="login"
 				:to="{ name: 'login', query: { ref: $route.path } }"
 				class="menu-item"
 				@click.stop
@@ -17,7 +17,7 @@
 			</router-link>
 
 			<li
-				v-if="auth && me"
+				v-if="login && me"
 				class="menu-item"
 				@click.stop="$store.dispatch('logout')"
 			>
@@ -89,8 +89,12 @@ function theme(state) {
 	return state.ui.theme;
 }
 
-function auth(state) {
-	return state.auth.enabled;
+function login(state) {
+	return state.auth.login;
+}
+
+function signup(state) {
+	return state.auth.signup;
 }
 
 function me(state) {
@@ -108,7 +112,8 @@ function setSfw(enabled) {
 export default {
 	computed: {
 		...mapState({
-			auth,
+			login,
+			signup,
 			sfw,
 			theme,
 			me,

assets/components/tags/tag.vue

@@ -47,6 +47,27 @@
 				@close="$router.replace({ hash: undefined })"
 			/>
 
+			<div class="campaign-container">
+				<a
+					v-if="campaign"
+					:href="campaign.affiliate.url"
+					target="_blank"
+					class="campaign"
+				>
+					<img
+						v-if="campaign.banner.entity.type === 'network'"
+						:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
+						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}.jpeg`"
+						class="campaign-banner"
+					>
+				</a>
+			</div>
+
 			<FilterBar
 				ref="filter"
 				:fetch-releases="fetchReleases"
@@ -94,6 +115,15 @@ async function fetchReleases(scroll = true) {
 	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
 	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
 
+	if (tag.banners.length > 0) {
+		const banner = tag.banners[Math.floor(Math.random() * tag.banners.length)];
+
+		this.campaign = {
+			...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)],
+			banner,
+		};
+	}
+
 	if (scroll && this.$refs.filter) {
 		this.$refs.filter.$el.scrollIntoView();
 	}
@@ -133,6 +163,7 @@ export default {
 			pageTitle: null,
 			hasMedia: false,
 			expanded: false,
+			campaign: null,
 		};
 	},
 	computed: {
@@ -172,12 +203,14 @@ export default {
 @import 'theme';
 
 .header {
+	display: flex;
     background: var(--profile);
     color: var(--text-light);
     justify-content: space-between;
 }
 
 .title {
+	display: inline-block;
     padding: .5rem 1rem;
     margin: 0;
     flex-shrink: 0;
@@ -200,4 +233,21 @@ export default {
 .scroll {
 	background: var(--background-dim);
 }
+
+.campaign-container {
+	max-height: 90px;
+	padding: .5rem 1rem 0 1rem;
+	background: var(--background-dim);
+	text-align: center;
+}
+
+.campaign {
+	display: inline-block;
+	height: 100%;
+
+	.campaign-banner {
+		max-height: 100%;
+		max-width: 100%;
+	}
+}
 </style>