Added secondary stash menu to stash heart.

components/stashes/heart.vue

@@ -3,73 +3,91 @@
 		v-if="user"
 		class="bookmarks"
 	>
-		<VDropdown v-if="showSecondary">
+		<VDropdown
+			v-if="showSecondary || (hasSecondaryStash && pageStash?.user.id !== user.id)"
+			:shown="showStashes"
+			@hide="showStashes = false"
+		>
 			<Icon
 				icon="folder-heart"
 				class="heart noselect"
 				:class="{ favorited: itemStashes.some((itemStash) => !itemStash.isPrimary) }"
+				@contextmenu.prevent="showStashes = true"
 			/>
 
 			<template #popper>
-				<ul class="stash-menu nolist">
+				<StashMenu
-					<li
+					:user="user"
-						v-for="userStash in user.stashes"
+					:item-stashes="itemStashes"
-						:key="`stash-${userStash.id}`"
+					@stash="(stash) => stashItem(stash)"
-						class="menu-item"
+					@unstash="(stash) => unstashItem(stash)"
-					>
+				/>
-						<label class="menu-stash">
-							<Checkbox
-								:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
-								@change="(checked) => checked ? stashItem(userStash) : unstashItem(userStash)"
-							/>{{ userStash.name }}
-						</label>
-					</li>
-				</ul>
 			</template>
 		</VDropdown>
 
-		<template v-if="pageStash?.user.id === user.id">
+		<VDropdown
-			<Icon
+			v-if="showSecondary || !hasSecondaryStash || pageStash?.user.id === user.id"
-				v-if="itemStashes.some((itemStash) => itemStash.id === pageStash.id)"
+			:triggers="[]"
-				:icon="pageStash.isPrimary ? 'heart7' : 'folder-heart'"
+			:shown="showStashes"
-				class="heart favorited noselect"
+			:disabled="showSecondary"
-				@click.native.stop="unstashItem(pageStash)"
+			@hide="showStashes = false"
-			/>
+		>
+			<template v-if="pageStash?.user.id === user.id">
+				<Icon
+					v-if="itemStashes.some((itemStash) => itemStash.id === pageStash.id)"
+					:icon="pageStash.isPrimary ? 'heart7' : 'folder-heart'"
+					class="heart favorited noselect"
+					@click.native.stop="unstashItem(pageStash)"
+					@contextmenu.prevent="toggleShowStashes(true)"
+				/>
 
-			<Icon
+				<Icon
-				v-else
+					v-else
-				:icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'"
+					:icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'"
-				class="heart noselect"
+					class="heart noselect"
-				@click.native.stop="stashItem(pageStash)"
+					@click.native.stop="stashItem(pageStash)"
-			/>
+					@contextmenu.prevent="toggleShowStashes(true)"
-		</template>
+				/>
+			</template>
 
-		<template v-else>
+			<template v-else>
-			<Icon
+				<Icon
-				v-if="itemStashes.some((itemStash) => itemStash.id === user.primaryStash.id)"
+					v-if="itemStashes.some((itemStash) => itemStash.id === user.primaryStash.id)"
-				icon="heart7"
+					icon="heart7"
-				class="heart favorited noselect"
+					class="heart favorited noselect"
-				@click.native.stop="unstashItem(user.primaryStash)"
+					@click.native.stop="unstashItem(user.primaryStash)"
-			/>
+					@contextmenu.prevent="toggleShowStashes(true)"
+				/>
 
-			<Icon
+				<Icon
-				v-else
+					v-else
-				icon="heart8"
+					icon="heart8"
-				class="heart noselect"
+					class="heart noselect"
-				@click.native.stop="stashItem(user.primaryStash)"
+					@click.native.stop="stashItem(user.primaryStash)"
-			/>
+					@contextmenu.prevent="toggleShowStashes(true)"
-		</template>
+				/>
+			</template>
+
+			<template #popper>
+				<StashMenu
+					:user="user"
+					:item-stashes="itemStashes"
+					@stash="(stash) => stashItem(stash)"
+					@unstash="(stash) => unstashItem(stash)"
+				/>
+			</template>
+		</VDropdown>
 	</div>
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
+import { ref, computed, inject } from 'vue';
 
 import { post, del } from '#/src/api.js';
 import ellipsis from '#/utils/ellipsis.js';
 
 import Icon from '#/components/icon/icon.vue';
-import Checkbox from '#/components/form/checkbox.vue';
+import StashMenu from '#/components/stashes/menu.vue';
 
 const props = defineProps({
 	domain: {
@@ -92,8 +110,10 @@ const { user, pageProps } = inject('pageContext');
 const pageStash = pageProps.stash;
 
 const itemStashes = ref(props.item.stashes);
+const hasSecondaryStash = computed(() => itemStashes.value.some((itemStash) => !itemStash.isPrimary));
 
 const done = ref(true);
+const showStashes = ref(false);
 const feedbackCutoff = 20;
 
 const itemKeys = {
@@ -149,6 +169,19 @@ async function unstashItem(stash) {
 
 	done.value = true;
 }
+
+function toggleShowStashes(state) {
+	if (props.showSecondary) {
+		return;
+	}
+
+	if (state) {
+		showStashes.value = state;
+		return;
+	}
+
+	showStashes.value = !showStashes.value;
+}
 </script>
 
 <style scoped>
@@ -183,23 +216,4 @@ async function unstashItem(stash) {
 		fill: var(--primary);
 	}
 }
-
-.menu-item {
-	display: block;
-}
-
-.menu-stash {
-	display: flex;
-	align-items: center;
-	padding: .5rem;
-
-	&:hover {
-		cursor: pointer;
-		color: var(--primary);
-	}
-
-	.check-container {
-		margin-right: .5rem;
-	}
-}
 </style>

components/stashes/menu.vue

@@ -0,0 +1,54 @@
+<template>
+	<ul class="stash-menu nolist noselect">
+		<li
+			v-for="userStash in user.stashes"
+			:key="`stash-${userStash.id}`"
+			class="menu-item"
+		>
+			<label class="menu-stash">
+				<Checkbox
+					:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
+					@change="(checked) => checked ? emit('stash', userStash) : emit('unstash', userStash)"
+				/>{{ userStash.name }}
+			</label>
+		</li>
+	</ul>
+</template>
+
+<script setup>
+import Checkbox from '#/components/form/checkbox.vue';
+
+defineProps({
+	user: {
+		type: Object,
+		default: null,
+	},
+	itemStashes: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const emit = defineEmits(['stash', 'unstash']);
+</script>
+
+<style scoped>
+.menu-item {
+	display: block;
+}
+
+.menu-stash {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+
+	&:hover {
+		cursor: pointer;
+		color: var(--primary);
+	}
+
+	.check-container {
+		margin-right: .5rem;
+	}
+}
+</style>

pages/_error/+Page.vue

@@ -32,5 +32,6 @@ const { abortReason } = pageContext;
 .page {
 	display: flex;
 	justify-content: center;
+	flex-grow: 1;
 }
 </style>

pages/entities/@entitySlug/+onBeforeRender.js

@@ -44,7 +44,6 @@ export async function onBeforeRender(pageContext) {
 		},
 		{
 			entityIds: [entity.id, entity.parent?.id].filter(Boolean),
-			parentEntityId: entity.parent?.id,
 			minRatio: 1.5,
 			allowRandomFallback: false,
 		},

pages/scene/+Page.vue

@@ -259,6 +259,15 @@
 					</div>
 				</div>
 
+				<div
+					v-if="campaigns?.scene"
+					class="section"
+				>
+					<Campaign
+						:campaign="campaigns.scene"
+					/>
+				</div>
+
 				<div class="section details">
 					<div class="detail">
 						<h3 class="heading">Added</h3>
@@ -318,10 +327,11 @@ import MovieTile from '#/components/movies/tile.vue';
 import SerieTile from '#/components/series/tile.vue';
 import Player from '#/components/video/player.vue';
 import Heart from '#/components/stashes/heart.vue';
+import Campaign from '#/components/campaigns/campaign.vue';
 
 import summaryTemplate from '#/assets/summary.yaml';
 
-const { pageProps } = inject('pageContext');
+const { pageProps, campaigns } = inject('pageContext');
 const { scene } = pageProps;
 
 const playing = ref(false);

pages/scene/+onBeforeRender.js

@@ -1,4 +1,6 @@
+import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
 import { fetchScenesById } from '#/src/scenes.js';
+import { getRandomCampaigns } from '#/src/campaigns.js';
 
 function getTitle(scene) {
 	if (scene.title) {
@@ -20,12 +22,27 @@ export async function onBeforeRender(pageContext) {
 		actorStashes: true,
 	});
 
+	const campaigns = await getRandomCampaigns([
+		{
+			minRatio: 1.5,
+			entityIds: [scene.channel.id, scene.network?.id].filter(Boolean),
+			allowRandomFallback: false,
+		},
+	], { tagFilter: pageContext.tagFilter });
+
+	if (!scene) {
+		throw render(404, `Cannot find scene '${pageContext.routeParams.sceneId}'.`);
+	}
+
 	return {
 		pageContext: {
 			title: getTitle(scene),
 			pageProps: {
 				scene,
 			},
+			campaigns: {
+				scene: campaigns[0],
+			},
 		},
 	};
 }

src/web/graphql.js

@@ -9,16 +9,14 @@ const schema = buildSchema(`
 	${scenesSchema}
 `);
 
-const rootValue = {
-	scenes: fetchScenesGraphql,
-};
-
 export async function graphqlApi(req, res) {
 	const data = await graphql({
 		schema,
 		source: req.body.query,
 		variableValues: req.body.variables,
-		rootValue,
+		rootValue: {
+			scenes: async (query) => fetchScenesGraphql(query, req),
+		},
 	});
 
 	console.log(data);

src/web/scenes.js

@@ -76,16 +76,21 @@ export const scenesSchema = `
 export async function fetchScenesGraphql(query, req) {
 	const {
 		scenes,
+		/*
 		aggActors,
 		aggTags,
 		aggChannels,
 		limit,
 		total,
+		*/
 	} = await fetchScenes({}, {
 		page: 1,
 		limit: 30,
 	}, req.user);
 
+	return scenes;
+
+	/*
 	return {
 		scenes,
 		aggActors,
@@ -94,4 +99,5 @@ export async function fetchScenesGraphql(query, req) {
 		limit,
 		total,
 	};
+	*/
 }

static

@@ -1 +1 @@
-Subproject commit 39f91b96b2bfa176a02d10c9051dd1d2f9c62b64
+Subproject commit af96f9b932db799ec8d067d4a5c9379f8363d2b0