Added WIP campaigns. Fixed entity tiles using full logo.

components/actors/tile.vue

@@ -104,6 +104,7 @@ const favorited = ref(props.actor.stashes.some((actorStash) => actorStash.id ===
 	border-radius: .25rem;
 	box-shadow: 0 0 3px var(--shadow-weak-30);
 	overflow: hidden;
+	background: var(--background);
 
 	&:hover {
 		box-shadow: 0 0 3px var(--shadow-weak-20);

components/campaigns/campaign.vue

@@ -0,0 +1,51 @@
+<template>
+	<div class="campaign">
+		<a
+			:href="campaign.url"
+			target="_blank"
+			class="campaign-link"
+		>
+			<img
+				v-if="campaign.banner"
+				:src="getBanner(campaign)"
+				class="campaign-banner"
+			>
+		</a>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	campaign: {
+		type: Object,
+		default: null,
+	},
+});
+
+console.log(props.campaign?.banner);
+
+function getBanner(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;
+}
+</script>
+
+<style scoped>
+.campaign {
+	height: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+.campaign-banner {
+	max-height: 100%;
+	max-width: 100%;
+}
+</style>

components/entities/tile.vue

@@ -5,7 +5,7 @@
 	>
 		<img
 			v-if="entity.hasLogo"
-			:src="entity.type === 'network' || entity.isIndependent ? `/logos/${entity.slug}/network.png` : `/logos/${entity.parent?.slug}/${entity.slug}.png`"
+			:src="entity.type === 'network' || entity.isIndependent ? `/logos/${entity.slug}/thumbs/network.png` : `/logos/${entity.parent?.slug}/thumbs/${entity.slug}.png`"
 			:alt="entity.name"
 			class="logo"
 		>
@@ -33,7 +33,7 @@ defineProps({
 	box-sizing: border-box;
 	padding: 1rem;
 	border-radius: .5rem;
-	background: var(--shadow-strong-40);
+	background: var(--shadow-strong-30);
 	color: var(--text-light);
 	font-size: 1.25rem;
 	font-weight: bold;

components/header/header.vue

@@ -438,7 +438,7 @@ function blurSearch(event) {
 	width: 1.25rem;
 	padding-left: 1rem;
 	height: 100%;
-	fill: var(--glass-strong-20);
+	fill: var(--glass);
 }
 
 .notifs-trigger {

components/scenes/scenes.vue

@@ -105,12 +105,21 @@
 			<ul
 				class="scenes nolist"
 			>
-				<li
-					v-for="scene in scenes"
-					:key="`scene-${scene.id}`"
-				>
-					<SceneTile :scene="scene" />
-				</li>
+				<template v-for="item in campaignScenes">
+					<li
+						v-if="item === 'campaign' && campaign"
+						:key="`campaign-${item.id}`"
+					>
+						<Campaign :campaign="campaign" />
+					</li>
+
+					<li
+						v-else
+						:key="`scene-${item.id}`"
+					>
+						<SceneTile :scene="item" />
+					</li>
+				</template>
 			</ul>
 
 			<Pagination
@@ -140,6 +149,7 @@ import ActorsFilter from '#/components/filters/actors.vue';
 import TagsFilter from '#/components/filters/tags.vue';
 import ChannelsFilter from '#/components/filters/channels.vue';
 import SceneTile from '#/components/scenes/tile.vue';
+import Campaign from '#/components/campaigns/campaign.vue';
 import Pagination from '#/components/pagination/pagination.vue';
 import Ellipsis from '#/components/loading/ellipsis.vue';
 
@@ -196,6 +206,10 @@ const filters = ref({
 	actors: queryActors,
 });
 
+const campaign = pageProps.campaigns?.scenes;
+const campaignIndex = pageProps.campaigns?.index;
+const campaignScenes = scenes.value.flatMap((scene, index) => (index === campaignIndex ? ['campaign', scene] : scene));
+
 function getPath(targetScope, preserveQuery) {
 	const path = parse(routeParams.path).map((segment) => {
 		if (segment.name === 'scope') {