Added movie page. Added stash button to movies.

assets/css/theme.css

@@ -62,7 +62,7 @@
 
 	--error: #f66;
     --alert: #f00;
-    --warn: #fa0;
+    --warn: #e80;
     --success: #5c2;
     --notice: #25c;
 

components/movies/movies.vue

@@ -66,91 +66,8 @@
 				<li
 					v-for="movie in movies"
 					:key="`movie-${movie.id}`"
-					class="movie"
 				>
-					<a
+					<MovieTile :movie="movie" />
-						:href="`/movie/${movie.id}/${movie.slug}`"
-						:title="movie.title"
-						class="cover-container"
-					>
-						<img
-							v-if="movie.covers[0]"
-							:src="movie.covers[0].isS3 ? `https://cdndev.traxxx.me/${movie.covers[0].thumbnail}` : `/media/${movie.covers[0].thumbnail}`"
-							:style="{ 'background-image': movie.covers[0].isS3 ? `url(https://cdndev.traxxx.me/${movie.covers[0].lazy})` : `url(/media/${movie.covers[0].lazy})` }"
-							class="cover"
-							loading="lazy"
-						>
-
-						<img
-							v-else
-							src="/public/img/icons/movie.svg"
-							class="nocover"
-						>
-					</a>
-
-					<div class="tile-info">
-						<div class="tile-meta">
-							<div class="channel">
-								<Link
-									:href="movie.channel.isIndependent || !movie.network ? `/${movie.channel.type}/${movie.channel.slug}` : `/${movie.network.type}/${movie.network.slug}`"
-									class="favicon-link"
-								>
-									<img
-										:src="movie.channel.isIndependent || !movie.network ? `/logos/${movie.channel.slug}/favicon.png` : `/logos/${movie.network.slug}/favicon.png`"
-										class="favicon"
-									>
-								</Link>
-
-								<Link
-									:href="`/${movie.channel.type}/${movie.channel.slug}`"
-									class="nolink channel-link"
-								>{{ movie.channel.name }}</Link>
-							</div>
-
-							<time
-								:datetime="movie.effectiveDate.toISOString()"
-								class="date"
-								:class="{ nodate: !movie.date }"
-							>{{ format(movie.effectiveDate, movie.effectiveDate.getFullYear() === currentYear ? 'MMM d' : 'MMM d, y') }}</time>
-						</div>
-
-						<a
-							:href="`/movie/${movie.id}/${movie.slug}`"
-							:title="movie.title"
-							class="title nolink"
-						>{{ movie.title }}</a>
-
-						<ul
-							:title="movie.actors.map((actor) => actor.name).join(', ')"
-							class="actors nolist"
-						>
-							<li
-								v-for="actor in movie.actors"
-								:key="`actor-${movie.id}-${actor.slug}`"
-								class="actor-item"
-							>
-								<a
-									:href="`/actor/${actor.id}/${actor.slug}`"
-									class="actor nolink"
-								>{{ actor.name }}</a>
-							</li>
-						</ul>
-
-						<ul
-							:title="movie.tags.map((tag) => tag.name).join(', ')"
-							class="tags nolist"
-						>
-							<li
-								v-for="tag in movie.tags"
-								:key="`tag-${movie.id}-${tag.slug}`"
-							>
-								<a
-									:href="`/tag/${tag.slug}`"
-									class="tag nolink"
-								>{{ tag.name }}</a>
-							</li>
-						</ul>
-					</div>
 				</li>
 			</ul>
 
@@ -164,7 +81,6 @@
 
 <script setup>
 import { ref, inject } from 'vue';
-import { format } from 'date-fns';
 import { parse } from 'path-to-regexp';
 
 import navigate from '#/src/navigate.js';
@@ -172,6 +88,7 @@ import { get } from '#/src/api.js';
 import { getActorIdentifier, parseActorIdentifier } from '#/src/query.js';
 import events from '#/src/events.js';
 
+import MovieTile from '#/components/movies/tile.vue';
 import Filters from '#/components/filters/filters.vue';
 import ActorsFilter from '#/components/filters/actors.vue';
 import TagsFilter from '#/components/filters/tags.vue';
@@ -200,8 +117,6 @@ const loading = ref(false);
 
 const showFilters = ref(true);
 
-const currentYear = new Date().getFullYear();
-
 const actorIds = urlParsed.search.actors?.split(',').map((identifier) => parseActorIdentifier(identifier)?.id).filter(Boolean) || [];
 const queryActors = actorIds.map((urlActorId) => aggActors.value.find((aggActor) => aggActor.id === urlActorId)).filter(Boolean);
 
@@ -330,143 +245,6 @@ function updateFilter(prop, value, reload = true) {
 	padding: .5rem 1rem 1rem 1rem;
 }
 
-.movie {
-	display: flex;
-	flex-direction: column;
-	box-shadow: 0 0 3px var(--shadow-weak-30);
-	border-radius: .25rem;
-	overflow: hidden;
-	background: var(--background-base);
-
-	&:hover {
-		box-shadow: 0 0 3px var(--shadow-weak-20);
-	}
-}
-
-.cover-container {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-grow: 1;
-	background: var(--shadow-weak-30);
-	aspect-ratio: 5/7;
-}
-
-.cover {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	background-size: cover;
-	background-position: center;
-}
-
-.nocover {
-	width: 25%;
-	opacity: .1;
-}
-
-.tile-info {
-	flex-shrink: 0;
-	font-size: 0;
-}
-
-.tile-meta {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: .4rem .5rem;
-	border-radius: 0 0 .25rem .25rem;
-	margin-bottom: .5rem;
-	background: var(--shadow-strong-30);
-	color: var(--text-light);
-	font-size: .8rem;
-}
-
-.channel {
-	display: inline-flex;
-	align-items: center;
-	margin-right: .5rem;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
-.channel-link {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-weight: bold;
-}
-
-.favicon-link {
-	display: inline-flex;
-}
-
-.favicon {
-	width: 1rem;
-	height: 1rem;
-	margin-right: .5rem;
-	object-fit: contain;
-}
-
-.date {
-	flex-shrink: 0;
-}
-
-.nodate {
-	color: var(--highlight-strong-10);
-}
-
-.title {
-	display: block;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-weight: bold;
-	padding: 0 .5rem;
-	margin-bottom: .25rem;
-	font-size: 1rem;
-}
-
-.actors {
-	height: 2.4rem;
-	display: flex;
-	flex-wrap: wrap;
-	overflow: hidden;
-	font-size: .9rem;
-	padding: 0 .5rem;
-	margin-bottom: .35rem;
-	line-height: 1.35;
-}
-
-.actor-item:not(:last-child):after {
-	content: ',\00a0';
-}
-
-.actor {
-	&:hover {
-		color: var(--primary);
-	}
-}
-
-.tags {
-	height: 1rem;
-	display: flex;
-	flex-wrap: wrap;
-	gap: .5rem;
-	overflow: hidden;
-	padding: 0 .5rem;
-	margin-bottom: .25rem;
-	color: var(--shadow-strong-10);
-	font-size: .75rem;
-}
-
-.tag {
-	flex-shrink: 0;
-
-	&:hover {
-		color: var(--primary);
-	}
-}
-
 @media(--compact) {
 	.movies {
 		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));

components/movies/tile.vue

@@ -0,0 +1,349 @@
+<template>
+	<div
+		class="movie-tile"
+		:class="{ unstashed: !favorited && pageStash && user && pageStash.id === user.primaryStash?.id }"
+	>
+		<div
+			class="cover-container"
+			:title="movie.title"
+		>
+			<a
+				:href="`/movie/${movie.id}/${movie.slug}`"
+				class="cover-link"
+			>
+				<img
+					v-if="movie.covers[0]"
+					:src="movie.covers[0].isS3 ? `https://cdndev.traxxx.me/${movie.covers[0].thumbnail}` : `/media/${movie.covers[0].thumbnail}`"
+					:style="{ 'background-image': movie.covers[0].isS3 ? `url(https://cdndev.traxxx.me/${movie.covers[0].lazy})` : `url(/media/${movie.covers[0].lazy})` }"
+					class="thumbnail"
+					loading="lazy"
+				>
+
+				<img
+					v-else
+					src="/public/img/icons/movie.svg"
+					class="nocover"
+				>
+			</a>
+
+			<Icon
+				v-show="favorited"
+				icon="heart7"
+				class="heart favorited"
+				@click.native.stop="unstash"
+			/>
+
+			<Icon
+				v-show="!favorited && user"
+				icon="heart8"
+				class="heart"
+				@click.native.stop="stash"
+			/>
+		</div>
+
+		<div class="tile-info">
+			<div class="tile-meta">
+				<div class="channel">
+					<Link
+						:href="movie.channel.isIndependent || !movie.network ? `/${movie.channel.type}/${movie.channel.slug}` : `/${movie.network.type}/${movie.network.slug}`"
+						class="favicon-link"
+					>
+						<img
+							:src="movie.channel.isIndependent || !movie.network ? `/logos/${movie.channel.slug}/favicon.png` : `/logos/${movie.network.slug}/favicon.png`"
+							class="favicon"
+						>
+					</Link>
+
+					<Link
+						:href="`/${movie.channel.type}/${movie.channel.slug}`"
+						class="nolink channel-link"
+					>{{ movie.channel.name }}</Link>
+				</div>
+
+				<time
+					:datetime="movie.effectiveDate.toISOString()"
+					class="date"
+					:class="{ nodate: !movie.date }"
+				>{{ format(movie.effectiveDate, movie.effectiveDate.getFullYear() === currentYear ? 'MMM d' : 'MMM d, y') }}</time>
+			</div>
+
+			<a
+				:href="`/movie/${movie.id}/${movie.slug}`"
+				:title="movie.title"
+				class="title nolink"
+			>{{ movie.title }}</a>
+
+			<ul
+				:title="movie.actors.map((actor) => actor.name).join(', ')"
+				class="actors nolist"
+			>
+				<li
+					v-for="actor in movie.actors"
+					:key="`actor-${movie.id}-${actor.slug}`"
+					class="actor-item"
+				>
+					<a
+						:href="`/actor/${actor.id}/${actor.slug}`"
+						class="actor nolink"
+					>{{ actor.name }}</a>
+				</li>
+			</ul>
+
+			<ul
+				:title="movie.tags.map((tag) => tag.name).join(', ')"
+				class="tags nolist"
+			>
+				<li
+					v-for="tag in movie.tags"
+					:key="`tag-${movie.id}-${tag.slug}`"
+				>
+					<a
+						:href="`/tag/${tag.slug}`"
+						class="tag nolink"
+					>{{ tag.name }}</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+import { format } from 'date-fns';
+
+import { post, del } from '#/src/api.js';
+import events from '#/src/events.js';
+import ellipsis from '#/utils/ellipsis.js';
+
+const props = defineProps({
+	movie: {
+		type: Object,
+		default: null,
+	},
+});
+
+const pageContext = inject('pageContext');
+const user = pageContext.user;
+const pageStash = pageContext.pageProps.stash;
+
+const currentYear = new Date().getFullYear();
+const fbCutoff = 20;
+
+const favorited = ref(props.movie.stashes.some((sceneStash) => sceneStash.primary));
+
+async function stash() {
+	try {
+		favorited.value = true;
+
+		await post(`/stashes/${user.primaryStash.id}/movies`, { movieId: props.movie.id });
+
+		events.emit('feedback', {
+			type: 'success',
+			message: `"${ellipsis(props.movie.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
+		});
+	} catch (error) {
+		favorited.value = false;
+
+		events.emit('feedback', {
+			type: 'error',
+			message: `Failed to stash "${ellipsis(props.movie.title, fbCutoff)}" to ${user.primaryStash.name}`,
+		});
+	}
+}
+
+async function unstash() {
+	try {
+		favorited.value = false;
+
+		await del(`/stashes/${user.primaryStash.id}/movies/${props.movie.id}`);
+
+		events.emit('feedback', {
+			type: 'remove',
+			message: `"${ellipsis(props.movie.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
+		});
+	} catch (error) {
+		favorited.value = true;
+
+		console.error(error);
+
+		events.emit('feedback', {
+			type: 'error',
+			message: `Failed to unstash "${ellipsis(props.movie.title, fbCutoff)}" from ${user.primaryStash.name}`,
+		});
+	}
+}
+</script>
+
+<style scoped>
+.movie-tile {
+	display: flex;
+	flex-direction: column;
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+	border-radius: .25rem;
+	overflow: hidden;
+	background: var(--background-base);
+
+	&:hover {
+		box-shadow: 0 0 3px var(--shadow-weak-20);
+
+		.heart {
+			fill: var(--text-light);
+		}
+	}
+
+	&.unstashed {
+		opacity: .5;
+	}
+}
+
+.cover-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 1;
+	position: relative;
+	background: var(--shadow-weak-30);
+	aspect-ratio: 5/7;
+}
+
+.cover-link {
+	width: 100%;
+	height: 100%;
+	font-size: 0;
+}
+
+.thumbnail {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	background-size: cover;
+	background-position: center;
+}
+
+.nocover {
+	width: 25%;
+	opacity: .1;
+}
+
+.tile-info {
+	flex-shrink: 0;
+	font-size: 0;
+}
+
+.tile-meta {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: .4rem .5rem;
+	border-radius: 0 0 .25rem .25rem;
+	margin-bottom: .5rem;
+	background: var(--shadow-strong-30);
+	color: var(--text-light);
+	font-size: .8rem;
+}
+
+.channel {
+	display: inline-flex;
+	align-items: center;
+	margin-right: .5rem;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.channel-link {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-weight: bold;
+}
+
+.favicon-link {
+	display: inline-flex;
+}
+
+.favicon {
+	width: 1rem;
+	height: 1rem;
+	margin-right: .5rem;
+	object-fit: contain;
+}
+
+.date {
+	flex-shrink: 0;
+}
+
+.nodate {
+	color: var(--highlight-strong-10);
+}
+
+.title {
+	display: block;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-weight: bold;
+	padding: 0 .5rem;
+	margin-bottom: .25rem;
+	font-size: 1rem;
+}
+
+.actors {
+	height: 2.4rem;
+	display: flex;
+	flex-wrap: wrap;
+	overflow: hidden;
+	font-size: .9rem;
+	padding: 0 .5rem;
+	margin-bottom: .35rem;
+	line-height: 1.35;
+}
+
+.actor-item:not(:last-child):after {
+	content: ',\00a0';
+}
+
+.actor {
+	&:hover {
+		color: var(--primary);
+	}
+}
+
+.tags {
+	height: 1rem;
+	display: flex;
+	flex-wrap: wrap;
+	gap: .5rem;
+	overflow: hidden;
+	padding: 0 .5rem;
+	margin-bottom: .25rem;
+	color: var(--shadow-strong-10);
+	font-size: .75rem;
+}
+
+.tag {
+	flex-shrink: 0;
+
+	&:hover {
+		color: var(--primary);
+	}
+}
+
+.icon.heart {
+	width: 2rem;
+	height: 1.5rem;
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: .5rem .5rem 1rem 1rem;
+	fill: var(--highlight-strong-10);
+	filter: drop-shadow(0 0 3px var(--shadow));
+
+	&:hover {
+		cursor: pointer;
+		fill: var(--primary);
+	}
+
+	&.favorited {
+		fill: var(--primary);
+	}
+}
+</style>

components/scenes/scenes.vue

@@ -102,7 +102,7 @@
 					v-for="scene in scenes"
 					:key="`scene-${scene.id}`"
 				>
-					<Scene :scene="scene" />
+					<SceneTile :scene="scene" />
 				</li>
 			</ul>
 
@@ -132,7 +132,7 @@ import Filters from '#/components/filters/filters.vue';
 import ActorsFilter from '#/components/filters/actors.vue';
 import TagsFilter from '#/components/filters/tags.vue';
 import ChannelsFilter from '#/components/filters/channels.vue';
-import Scene from '#/components/scenes/tile.vue';
+import SceneTile from '#/components/scenes/tile.vue';
 import Pagination from '#/components/pagination/pagination.vue';
 import Ellipsis from '#/components/loading/ellipsis.vue';
 

components/scenes/tile.vue

@@ -9,6 +9,7 @@
 		<div class="poster-container">
 			<Link
 				:href="`/scene/${scene.id}/${scene.slug}`"
+				:title="scene.title"
 				target="_blank"
 				class="poster"
 			>

pages/actors/@actorId/+onBeforeRender.js

@@ -1,3 +1,5 @@
+import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
+
 import { fetchActorsById } from '#/src/actors.js';
 import { fetchScenes } from '#/src/scenes.js';
 import { curateScenesQuery } from '#/src/web/scenes.js';
@@ -16,6 +18,10 @@ export async function onBeforeRender(pageContext) {
 		}, pageContext.user),
 	]);
 
+	if (!actor) {
+		throw render(404, `Cannot find actor '${pageContext.routeParams.actorId}'.`);
+	}
+
 	const {
 		scenes,
 		aggActors,

pages/movies/+onBeforeRender.js

@@ -8,7 +8,7 @@ export async function onBeforeRender(pageContext) {
 	}), {
 		page: Number(pageContext.routeParams.page) || 1,
 		limit: Number(pageContext.urlParsed.search.limit) || 50,
-	});
+	}, pageContext.user);
 
 	const {
 		movies,

pages/movies/@movieId/+Page.vue

@@ -0,0 +1,683 @@
+<template>
+	<div class="page">
+		<div class="content">
+			<div
+				class="banner-container"
+				:style="{ 'background-image': `url(${getPath(movie.poster || movie.covers[0])})` }"
+			>
+				<div class="banner">
+					<div
+						v-if="movie.trailer"
+						class="trailer"
+					>
+						<Player
+							:video="movie.trailer"
+							:poster="poster"
+							class="item"
+							:class="{ playing }"
+							@play="playing = true; paused = false;"
+							@pause="playing = false; paused = true;"
+						/>
+					</div>
+
+					<img
+						v-for="cover in movie.covers"
+						:key="`cover-${cover.id}`"
+						:src="getPath(cover, 'thumbnail')"
+						class="cover"
+					>
+
+					<div
+						v-if="movie.photos.length > 0"
+						class="album"
+						:class="{ single: movie.photos.length === 1 }"
+					>
+						<div
+							v-for="photo in movie.photos"
+							:key="`photo-${photo.id}`"
+							class="photo-container"
+						>
+							<a
+								:href="getPath(photo)"
+								target="_blank"
+								class="photo-link"
+							>
+								<img
+									:src="getPath(photo, 'thumbnail')"
+									:style="{ 'background-image': getPath(photo, 'lazy') }"
+									:width="photo.width"
+									:height="photo.height"
+									class="photo"
+								>
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="meta">
+				<div class="entity">
+					<Link
+						v-if="movie.channel"
+						:href="`/${movie.channel.type}/${movie.channel.slug}`"
+						class="channel-link entity-link"
+					>
+						<img
+							v-if="movie.channel.hasLogo"
+							:src="movie.channel.isIndependent || !movie.network ? `/logos/${movie.channel.slug}/network.png` : `/logos/${movie.network.slug}/${movie.channel.slug}.png`"
+							class="channel-logo entity-logo"
+						>
+					</Link>
+
+					<span
+						v-if="!movie.channel.isIndependent && movie.network"
+						class="network-container"
+					>
+						by
+						<Link
+							:href="`/${movie.network.type}/${movie.network.slug}`"
+							class="network-link entity-link"
+						>
+							<img
+								v-if="movie.network.hasLogo"
+								:src="`/logos/${movie.network.slug}/network.png`"
+								class="network-logo entity-logo"
+							>
+						</Link>
+					</span>
+				</div>
+
+				<time
+					:datetime="movie.effectiveDate.toISOString()"
+					class="date ellipsis"
+				>{{ formatDate(movie.effectiveDate, 'MMMM d, y') }}</time>
+			</div>
+
+			<div class="header">
+				<h2
+					v-if="movie.title"
+					:title="movie.title"
+					class="title"
+				>{{ movie.title }}</h2>
+
+				<h2
+					v-else-if="movie.actors.length > 0"
+					class="title notitle"
+				>movie featuring {{ movie.actors.map((actor) => actor.name).join(', ') }}</h2>
+
+				<h2
+					v-else
+					class="title notitle"
+				>No title</h2>
+
+				<div class="actions">
+					<div
+						v-if="user"
+						class="bookmarks"
+					>
+						<Icon icon="folder-heart" />
+
+						<Icon
+							v-show="favorited"
+							icon="heart7"
+							class="heart favorited"
+							@click.native.stop="unstash"
+						/>
+
+						<Icon
+							v-show="!favorited"
+							icon="heart8"
+							class="heart"
+							@click.native.stop="stash"
+						/>
+					</div>
+
+					<div class="view">
+						<button
+							v-if="movie.photos.length > 0"
+							class="button view nolink"
+						>View photos</button>
+
+						<Link
+							v-if="movie.url"
+							:href="movie.url"
+							target="_blank"
+							class="button watch nolink"
+						>Watch movie</Link>
+					</div>
+				</div>
+			</div>
+
+			<div class="info">
+				<ul class="actors nolist">
+					<li
+						v-for="actor in movie.actors"
+						:key="`actor-${actor.id}`"
+						class="actor"
+					>
+						<ActorTile :actor="actor" />
+					</li>
+				</ul>
+
+				<ul class="tags nolist">
+					<li
+						v-for="tag in movie.tags"
+						:key="`tag-${tag.id}`"
+					>
+						<Link
+							:href="`/tag/${tag.slug}`"
+							class="tag nolink"
+						>{{ tag.name }}</Link>
+					</li>
+				</ul>
+
+				<div
+					v-if="movie.description"
+					class="section"
+				>
+					<h3 class="heading">Description</h3>
+
+					<p class="description">{{ movie.description }}</p>
+				</div>
+
+				<div class="section details">
+					<div
+						v-if="movie.duration"
+						class="detail"
+					>
+						<h3 class="heading">Duration</h3>
+						{{ formatDuration(movie.duration) }}
+					</div>
+
+					<div
+						v-if="movie.directors.length > 0"
+						class="detail"
+					>
+						<h3 class="heading">Director</h3>
+						{{ movie.directors.map((director) => director.name).join(', ') }}
+					</div>
+
+					<div
+						v-if="movie.shootId"
+						class="detail"
+					>
+						<h3 class="heading">Shoot</h3>
+						{{ movie.shootId }}
+					</div>
+				</div>
+
+				<div class="section ">
+					<h3 class="heading">Scenes</h3>
+
+					<ul class="scenes nolist">
+						<li
+							v-for="scene in scenes"
+							:key="`scene-${scene.id}`"
+						>
+							<sceneTile :scene="scene" />
+						</li>
+					</ul>
+				</div>
+
+				<div class="section details">
+					<div class="detail">
+						<h3 class="heading">Added</h3>
+						<span class="added-date">{{ formatDate(movie.createdAt, 'yyyy-MM-dd') }}</span>
+						<span
+							:title="`Batch ${movie.createdBatchId}`"
+							class="added-batch"
+						>#{{ movie.createdBatchId }}</span>
+					</div>
+
+					<div
+						v-if="movie.comment"
+						class="detail"
+					>
+						<h3 class="heading">Comment</h3>
+						{{ movie.comment }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+
+import { post, del } from '#/src/api.js';
+import events from '#/src/events.js';
+import { formatDate, formatDuration } from '#/utils/format.js';
+import getPath from '#/src/get-path.js';
+import ellipsis from '#/utils/ellipsis.js';
+
+import ActorTile from '#/components/actors/tile.vue';
+import SceneTile from '#/components/scenes/tile.vue';
+import Player from '#/components/video/player.vue';
+
+const pageContext = inject('pageContext');
+
+const movie = pageContext.pageProps.movie;
+const scenes = pageContext.pageProps.scenes;
+const user = pageContext.user;
+
+const fbCutoff = 20;
+
+const favorited = ref(movie.stashes.some((sceneStash) => sceneStash.primary));
+
+async function stash() {
+	try {
+		favorited.value = true;
+
+		await post(`/stashes/${user.primaryStash.id}/movies`, { movieId: movie.id });
+
+		events.emit('feedback', {
+			type: 'success',
+			message: `"${ellipsis(movie.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
+		});
+	} catch (error) {
+		favorited.value = false;
+
+		events.emit('feedback', {
+			type: 'error',
+			message: `Failed to stash "${ellipsis(movie.title, fbCutoff)}" to ${user.primaryStash.name}`,
+		});
+	}
+}
+
+async function unstash() {
+	try {
+		favorited.value = false;
+
+		await del(`/stashes/${user.primaryStash.id}/movies/${movie.id}`);
+
+		events.emit('feedback', {
+			type: 'remove',
+			message: `"${ellipsis(movie.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
+		});
+	} catch (error) {
+		favorited.value = true;
+
+		console.error(error);
+
+		events.emit('feedback', {
+			type: 'error',
+			message: `Failed to unstash "${ellipsis(movie.title, fbCutoff)}" from ${user.primaryStash.name}`,
+		});
+	}
+}
+</script>
+
+<style scoped>
+.page {
+	display: flex;
+	justify-content: center;
+	background: var(--background-base-10);
+}
+
+.content {
+	width: 100%;
+	max-width: 1200px;
+	margin: 0 .5rem;
+	display: flex;
+	flex-direction: column;
+}
+
+.banner-container {
+	background-position: center;
+	background-size: cover;
+	border-radius: .5rem .5rem 0 0;
+	margin-top: .5rem;
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+}
+
+.banner {
+	max-height: 21rem;
+	border-radius: .5rem 0 0 0;
+	display: flex;
+	font-size: 0;
+	backdrop-filter: brightness(150%) blur(1rem);
+	overflow: hidden;
+}
+
+.poster-container {
+	flex-shrink: 0;
+	margin-right: .5rem;
+}
+
+.poster {
+	height: 100%;
+	width: 100%;
+	border-radius: .25rem 0 0 0;
+}
+
+.poster,
+.photo {
+	object-fit: cover;
+	background-size: cover;
+	background-position: center;
+	box-shadow: 0 0 3px var(--shadow-weak-10);
+}
+
+.trailer {
+	max-width: 100%;
+	width: calc(21/9 * 16rem);
+	margin-right: .5rem;
+	flex-shrink: 0;
+	aspect-ratio: 16/9;
+}
+
+:deep(.player) {
+	width: 100%;
+	height: 100%;
+	flex-shrink: 0;
+
+	&:not(.playing) {
+		&[poster],
+		.vjs-tech[poster],
+		.vjs-poster img {
+			object-fit: cover;
+		}
+	}
+}
+
+.album {
+	height: auto;
+	flex-grow: 1;
+	display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+	gap: .25rem;
+	box-sizing: border-box;
+	padding: .5rem .5rem .5rem 0;
+	overflow-y: auto;
+	scrollbar-width: 0;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+
+	&.single .photo {
+		max-height: calc(100% - 1.5rem);
+	}
+}
+
+.photo-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-grow: 1;
+}
+
+.photo-link {
+	width: 100%;
+	height: 100%;
+}
+
+.photo {
+	width: 100%;
+	height: 100%;
+	border-radius: .25rem;
+}
+
+.meta {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--grey-dark-40);
+	border-radius: 0 0 .5rem .5rem;
+	color: var(--text-light);
+}
+
+.entity {
+	display: flex;
+	align-items: center;
+	font-weight: bold;
+	color: var(--highlight);
+}
+
+.entity-link {
+	padding: .5rem 1rem;
+}
+
+.entity-logo {
+	width: 10rem;
+	max-height: 100%;
+	object-fit: contain;
+}
+
+.network-container {
+	display: flex;
+	align-items: center;
+}
+
+.date {
+	padding: 1rem;
+	font-weight: bold;
+}
+
+.info,
+.header {
+	border-top: none;
+	border-bottom: none;
+}
+
+.info {
+	padding: 0;
+}
+
+.header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	padding: 1rem .5rem .5rem .5rem;
+}
+
+.title {
+	margin: 0 .5rem 1rem 0;
+	line-height: 1.25;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+}
+
+.notitle {
+	color: var(--grey-dark-10);
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-shrink: 0;
+
+	.icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		fill: var(--shadow);
+	}
+
+	.button {
+		flex-shrink: 0;
+		padding: .75rem;
+	}
+
+	.button:not(:last-child) {
+		margin-right: .5rem;
+	}
+}
+
+.view {
+	display: flex;
+}
+
+.watch {
+	background: var(--primary);
+	color: var(--text-light);
+}
+
+.bookmarks {
+	display: flex;
+	margin-right: .75rem;
+
+	.icon {
+		padding: .5rem .5rem;
+	}
+
+	.icon.heart:hover,
+	.icon.heart.favorited {
+		cursor: pointer;
+		fill: var(--primary);
+	}
+}
+
+.cover {
+	height: 20rem;
+}
+
+.actors,
+.tags {
+	margin-bottom: 1rem;
+}
+
+.section {
+	margin-bottom: 1rem;
+}
+
+.heading {
+	color: var(--primary);
+	margin: 0 0 .5rem 0;
+	font-size: .9rem;
+}
+
+.details {
+	display: flex;
+	gap: 1rem;
+}
+
+.description {
+	font-size: 1rem;
+	line-height: 1.5;
+	text-align: justify;
+	margin: 0;
+}
+
+.added-batch {
+	color: var(--shadow-weak-10);
+	margin-left: .25rem;
+}
+
+.actors {
+	display: grid;
+	flex-grow: 1;
+	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	gap: .25rem;
+}
+
+.tag {
+	padding: .5rem;
+	border-radius: .25rem;
+	margin: 0 .25rem .25rem 0;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+
+	&:hover {
+		color: var(--primary);
+		box-shadow: 0 0 3px var(--shadow-weak-20);
+		cursor: pointer;
+	}
+}
+
+.scenes {
+	display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+	gap: .5rem;
+	margin-bottom: 1rem;
+}
+
+@media(--small) {
+	.content {
+		margin: 0;
+	}
+
+	.info {
+		margin: 0 .5rem;
+	}
+
+	.banner-container {
+		border-radius: 0;
+		margin-top: 0;
+	}
+
+	.network-container {
+		display: none;
+	}
+
+	.header {
+		flex-direction: column-reverse;
+	}
+
+	.actions {
+		width: 100%;
+		justify-content: space-between;
+		margin-bottom: 1.5rem;
+	}
+
+	.title {
+		width: 100%;
+		margin-left: .5rem;
+		white-space: wrap;
+	}
+
+	.meta {
+		border-radius: 0;
+	}
+
+	.entity-logo {
+		width: 7.5rem;
+	}
+}
+
+@media(--small-10) {
+	.banner {
+		justify-content: center;
+		border-radius: 0;
+	}
+
+	.poster-container {
+		margin: 0;
+		flex-shrink: 1;
+	}
+
+	.trailer {
+		margin: 0;
+		flex-shrink: 1;
+	}
+
+	.poster {
+		border-radius: 0;
+	}
+
+	.album {
+		display: none;
+	}
+
+	.header {
+		padding: 1rem .5rem 1.5rem .5rem;
+	}
+
+	.info {
+		padding: 0 .5rem;
+	}
+
+	.actors {
+		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+	}
+}
+
+@media(--small-60) {
+	.actors {
+		grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
+	}
+}
+</style>

pages/movies/@movieId/+onBeforeRender.js

@@ -0,0 +1,60 @@
+import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
+
+import { fetchMoviesById } from '#/src/movies.js';
+import { fetchScenes } from '#/src/scenes.js';
+import { curateScenesQuery } from '#/src/web/scenes.js';
+
+function getTitle(movie) {
+	if (movie.title) {
+		return movie.title;
+	}
+
+	if (movie.actors.length > 0) {
+		return `Movie with ${movie.actors.map((actor) => actor.name).join(', ')}`;
+	}
+
+	return 'Movie';
+}
+
+export async function onBeforeRender(pageContext) {
+	const [[movie], movieScenes] = await Promise.all([
+		fetchMoviesById([Number(pageContext.routeParams.movieId)], pageContext.user),
+		fetchScenes(await curateScenesQuery({
+			...pageContext.urlQuery,
+			scope: pageContext.routeParams.scope || 'latest',
+			movieId: Number(pageContext.routeParams.movieId),
+		}), {
+			page: Number(pageContext.routeParams.page) || 1,
+			limit: Number(pageContext.urlParsed.search.limit) || 30,
+			aggregate: true,
+		}, pageContext.user),
+	]);
+
+	if (!movie) {
+		throw render(404, `Cannot find movie '${pageContext.routeParams.movieId}'.`);
+	}
+
+	const {
+		scenes,
+		aggActors,
+		aggTags,
+		aggChannels,
+		total,
+		limit,
+	} = movieScenes;
+
+	return {
+		pageContext: {
+			title: getTitle(movie),
+			pageProps: {
+				movie,
+				scenes,
+				aggActors,
+				aggTags,
+				aggChannels,
+				total,
+				limit,
+			},
+		},
+	};
+}

pages/movies/@movieId/+route.js

@@ -0,0 +1 @@
+export default '/movie/@movieId/*';

pages/scene/+Page.vue

@@ -3,7 +3,7 @@
 		<div class="content">
 			<div
 				class="banner-container"
-				:style="{ 'background-image': scene.poster.isS3 ? `url('https://cdndev.traxxx.me/${scene.poster.thumbnail}')` : `url('/media/${scene.poster.thumbnail}')` }"
+				:style="{ 'background-image': `url(${getPath(scene.poster, 'thumbnail')})` }"
 			>
 				<div class="banner">
 					<div
@@ -246,7 +246,9 @@ import { ref, computed, inject } from 'vue';
 
 import { post, del } from '#/src/api.js';
 import { formatDate, formatDuration } from '#/utils/format.js';
+import events from '#/src/events.js';
 import getPath from '#/src/get-path.js';
+import ellipsis from '#/utils/ellipsis.js';
 
 import Icon from '#/components/icon/icon.vue';
 import ActorTile from '#/components/actors/tile.vue';
@@ -260,6 +262,8 @@ const favorited = ref(scene.stashes.some((sceneStash) => sceneStash.primary));
 const playing = ref(false);
 const paused = ref(false);
 
+const fbCutoff = 20;
+
 const poster = computed(() => {
 	if (scene.poster) {
 		return getPath(scene.poster, 'thumbnail');
@@ -279,19 +283,42 @@ const poster = computed(() => {
 async function stash() {
 	try {
 		favorited.value = true;
+
 		await post(`/stashes/${user.primaryStash.id}/scenes`, { sceneId: scene.id });
+
+		events.emit('feedback', {
+			type: 'success',
+			message: `"${ellipsis(scene.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
+		});
 	} catch (error) {
 		favorited.value = false;
+
+		events.emit('feedback', {
+			type: 'error',
+			message: `Failed to stash "${ellipsis(scene.title, fbCutoff)}" to ${user.primaryStash.name}`,
+		});
 	}
 }
 
 async function unstash() {
 	try {
 		favorited.value = false;
+
 		await del(`/stashes/${user.primaryStash.id}/scenes/${scene.id}`);
+
+		events.emit('feedback', {
+			type: 'remove',
+			message: `"${ellipsis(scene.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
+		});
 	} catch (error) {
-		console.error(error);
 		favorited.value = true;
+
+		console.error(error);
+
+		events.emit('feedback', {
+			type: 'error',
+			message: `Failed to unstash "${ellipsis(scene.title, fbCutoff)}" from ${user.primaryStash.name}`,
+		});
 	}
 }
 </script>

pages/scene/+onBeforeRender.js

@@ -1,5 +1,17 @@
 import { fetchScenesById } from '#/src/scenes.js';
 
+function getTitle(scene) {
+	if (scene.title) {
+		return scene.title;
+	}
+
+	if (scene.actors.length > 0) {
+		return `Scene with ${scene.actors.map((actor) => actor.name).join(', ')}`;
+	}
+
+	return 'Scene';
+}
+
 export async function onBeforeRender(pageContext) {
 	const [scene] = await fetchScenesById([Number(pageContext.routeParams.sceneId)], {
 		reqUser: pageContext.user,
@@ -8,7 +20,7 @@ export async function onBeforeRender(pageContext) {
 
 	return {
 		pageContext: {
-			title: scene.title,
+			title: getTitle(scene),
 			pageProps: {
 				scene,
 			},

pages/stashes/@username/@stashSlug/movies/+onBeforeRender.js

@@ -16,7 +16,7 @@ export async function onBeforeRender(pageContext) {
 		}), {
 			page: Number(pageContext.routeParams.page) || 1,
 			limit: Number(pageContext.urlParsed.search.limit) || 50,
-		});
+		}, pageContext.user);
 
 		const {
 			movies,

renderer/container.vue

@@ -142,7 +142,7 @@ onMounted(() => {
 	display: flex;
 	justify-content: center;
 	position: fixed;
-	bottom: 1rem;;
+	bottom: 2rem;
 	z-index: 1000;
 	pointer-events: none;
 }
@@ -177,7 +177,7 @@ onMounted(() => {
 	}
 
 	.feedback-container {
-		bottom: 4rem;
+		bottom: 5rem;
 	}
 }
 </style>

src/movies.js

@@ -1,11 +1,13 @@
 import config from 'config';
 
-import { knexQuery as knex, knexManticore } from './knex.js';
+import { knexQuery as knex, knexOwner, knexManticore } from './knex.js';
 import { utilsApi } from './manticore.js';
 import { HttpError } from './errors.js';
 import { fetchActorsById, curateActor, sortActorsByGender } from './actors.js';
 import { fetchTagsById } from './tags.js';
 import { fetchEntitiesById } from './entities.js';
+import { curateStash } from './stashes.js';
+import promiseProps from '../utils/promise-props.js';
 
 function curateMedia(media) {
 	if (!media) {
@@ -23,21 +25,21 @@ function curateMedia(media) {
 	};
 }
 
-function curateMovie(rawScene, assets) {
+function curateMovie(rawMovie, assets) {
-	if (!rawScene) {
+	if (!rawMovie) {
 		return null;
 	}
 
 	return {
-		id: rawScene.id,
+		id: rawMovie.id,
-		title: rawScene.title,
+		title: rawMovie.title,
-		slug: rawScene.slug,
+		slug: rawMovie.slug,
-		url: rawScene.url,
+		url: rawMovie.url,
-		date: rawScene.date,
+		date: rawMovie.date,
-		createdAt: rawScene.created_at,
+		createdAt: rawMovie.created_at,
-		effectiveDate: rawScene.effective_date,
+		effectiveDate: rawMovie.effective_date,
-		description: rawScene.description,
+		description: rawMovie.description,
-		duration: rawScene.duration,
+		duration: rawMovie.duration,
 		channel: {
 			id: assets.channel.id,
 			slug: assets.channel.slug,
@@ -53,7 +55,7 @@ function curateMovie(rawScene, assets) {
 			type: assets.channel.network_type,
 			hasLogo: assets.channel.has_logo,
 		} : null,
-		actors: sortActorsByGender(assets.actors.map((actor) => curateActor(actor, { sceneDate: rawScene.effective_date }))),
+		actors: sortActorsByGender(assets.actors.map((actor) => curateActor(actor, { sceneDate: rawMovie.effective_date }))),
 		directors: assets.directors.map((director) => ({
 			id: director.id,
 			slug: director.slug,
@@ -67,23 +69,36 @@ function curateMovie(rawScene, assets) {
 		poster: curateMedia(assets.poster),
 		covers: assets.covers.map((cover) => curateMedia(cover)),
 		photos: assets.photos.map((photo) => curateMedia(photo)),
-		createdBatchId: rawScene.created_batch_id,
+		stashes: assets.stashes?.map((stash) => curateStash(stash)) || [],
-		updatedBatchId: rawScene.updated_batch_id,
+		createdBatchId: rawMovie.created_batch_id,
+		updatedBatchId: rawMovie.updated_batch_id,
 	};
 }
 
-export async function fetchMoviesById(movieIds) {
+export async function fetchMoviesById(movieIds, reqUser) {
-	const [movies, channels, actors, directors, tags, covers, photos] = await Promise.all([
+	const {
-		knex('movies').whereIn('id', movieIds),
+		movies,
-		// channels
+		channels,
-		knex('movies')
+		actors,
+		directors,
+		tags,
+		covers,
+		photos,
+		stashes,
+	} = await promiseProps({
+		movies: knex('movies')
+			.select('movies.*', knex.raw('sum(releases.duration) as duration'))
+			.leftJoin('movies_scenes', 'movies_scenes.movie_id', 'movies.id')
+			.leftJoin('releases', 'releases.id', 'movies_scenes.scene_id')
+			.whereIn('movies.id', movieIds)
+			.groupBy('movies.id'),
+		channels: knex('movies')
 			.select('channels.*', 'networks.id as network_id', 'networks.slug as network_slug', 'networks.name as network_name', 'networks.type as network_type')
 			.whereIn('movies.id', movieIds)
 			.leftJoin('entities as channels', 'channels.id', 'movies.entity_id')
 			.leftJoin('entities as networks', 'networks.id', 'channels.parent_id')
 			.groupBy('channels.id', 'networks.id'),
-		// actors
+		actors: knex('movies')
-		knex('movies')
 			.select(
 				'actors.*',
 				'actors_meta.*',
@@ -97,14 +112,12 @@ export async function fetchMoviesById(movieIds) {
 			.leftJoin('releases_actors', 'releases_actors.release_id', 'movies_scenes.scene_id')
 			.leftJoin('actors', 'actors.id', 'releases_actors.actor_id')
 			.leftJoin('actors_meta', 'actors_meta.actor_id', 'actors.id'),
-		// directors
+		directors: knex('movies')
-		knex('movies')
 			.whereIn('movies.id', movieIds)
 			.leftJoin('movies_scenes', 'movies_scenes.movie_id', 'movies.id')
 			.leftJoin('releases_directors', 'releases_directors.release_id', 'movies_scenes.scene_id')
 			.leftJoin('actors as directors', 'directors.id', 'releases_directors.director_id'),
-		// tags
+		tags: knex('movies')
-		knex('movies')
 			.select('tags.id', 'tags.slug', 'tags.name', 'tags.priority', 'movies.id as movie_id')
 			.distinct()
 			.whereIn('movies.id', movieIds)
@@ -113,17 +126,21 @@ export async function fetchMoviesById(movieIds) {
 			.leftJoin('releases_tags', 'releases_tags.release_id', 'movies_scenes.scene_id')
 			.leftJoin('tags', 'tags.id', 'releases_tags.tag_id')
 			.orderBy('priority', 'desc'),
-		// covers
+		covers: knex('movies_covers')
-		knex('movies_covers')
 			.whereIn('movie_id', movieIds)
 			.leftJoin('media', 'media.id', 'movies_covers.media_id'),
-		// photos
+		photos: knex('movies')
-		knex('movies')
 			.whereIn('movies.id', movieIds)
 			.leftJoin('movies_scenes', 'movies_scenes.movie_id', 'movies.id')
 			.leftJoin('releases_photos', 'releases_photos.release_id', 'movies_scenes.scene_id')
 			.leftJoin('media', 'media.id', 'releases_photos.media_id'),
-	]);
+		stashes: reqUser
+			? knexOwner('stashes_movies')
+				.leftJoin('stashes', 'stashes.id', 'stashes_movies.stash_id')
+				.where('stashes.user_id', reqUser.id)
+				.whereIn('stashes_movies.movie_id', movieIds)
+			: [],
+	});
 
 	return movieIds.map((movieId) => {
 		const movie = movies.find((movieEntry) => movieEntry.id === movieId);
@@ -139,6 +156,7 @@ export async function fetchMoviesById(movieIds) {
 		const movieTags = tags.filter((tag) => tag.movie_id === movieId);
 		const movieCovers = covers.filter((cover) => cover.movie_id === movieId);
 		const moviePhotos = photos.filter((photo) => photo.release_id === movieId);
+		const movieStashes = stashes.filter((stash) => stash.movie_id === movieId);
 
 		return curateMovie(movie, {
 			channel: movieChannel,
@@ -147,6 +165,7 @@ export async function fetchMoviesById(movieIds) {
 			tags: movieTags,
 			covers: movieCovers,
 			photos: moviePhotos,
+			stashes: movieStashes,
 		});
 	}).filter(Boolean);
 }
@@ -499,7 +518,7 @@ function countAggregations(buckets) {
 	return Object.fromEntries(buckets.map((bucket) => [bucket.key, { count: bucket.doc_count }]));
 }
 
-export async function fetchMovies(filters, rawOptions) {
+export async function fetchMovies(filters, rawOptions, reqUser) {
 	const options = curateOptions(rawOptions);
 
 	console.log(options);
@@ -517,11 +536,8 @@ export async function fetchMovies(filters, rawOptions) {
 		options.aggregateChannels ? fetchEntitiesById(result.aggregations.channelIds.map((bucket) => bucket.key), { order: ['name', 'asc'], append: channelCounts }) : [],
 	]);
 
-	console.log(result.aggregations);
-	console.log(aggActors);
-
 	const movieIds = result.movies.map((movie) => Number(movie.id));
-	const movies = await fetchMoviesById(movieIds);
+	const movies = await fetchMoviesById(movieIds, reqUser);
 
 	return {
 		movies,

src/scenes.js

@@ -442,7 +442,7 @@ async function queryManticoreSql(filters, options, _reqUser) {
 				if (filters.entityId) {
 					builder.whereRaw('any(entity_ids) = ?', filters.entityId);
 
-					/* manticore does not support OR if both left and right table are queried https://github.com/manticoresoftware/manticoresearch/issues/1978#issuecomment-2010470068
+					/* manticore does not currently support OR if both left and right table are queried https://github.com/manticoresoftware/manticoresearch/issues/1978#issuecomment-2010470068
 					builder.where((whereBuilder) => {
 						whereBuilder
 							.where('scenes.channel_id', filters.entityId)
@@ -451,6 +451,10 @@ async function queryManticoreSql(filters, options, _reqUser) {
 					*/
 				}
 
+				if (filters.movieId) {
+					builder.whereRaw('any(movie_ids) = ?', filters.movieId);
+				}
+
 				if (typeof filters.isShowcased === 'boolean') {
 					builder.where('is_showcased', filters.isShowcased);
 				}

src/stashes.js

@@ -289,12 +289,26 @@ export async function unstashScene(sceneId, stashId, sessionUser) {
 export async function stashMovie(movieId, stashId, sessionUser) {
 	const stash = await fetchStashById(stashId, sessionUser);
 
-	await knex('stashes_movies')
+	const [stashed] = await knex('stashes_movies')
 		.insert({
 			stash_id: stash.id,
 			movie_id: movieId,
+		})
+		.returning(['id', 'created_at']);
+
+	await indexApi.replace({
+		index: 'movies_stashed',
+		id: stashed.id,
+		doc: {
+			movie_id: movieId,
+			user_id: sessionUser.id,
+			stash_id: stashId,
+			created_at: Math.round(stashed.created_at.getTime() / 1000),
+		},
 	});
 
+	logger.verbose(`${sessionUser.username} (${sessionUser.id}) stashed movie ${movieId} to stash ${stash.id} (${stash.name})`);
+
 	return fetchStashes('movie', movieId, sessionUser);
 }
 
@@ -309,5 +323,20 @@ export async function unstashMovie(movieId, stashId, sessionUser) {
 			.where('stashes.user_id', sessionUser.id))
 		.delete();
 
+	await indexApi.callDelete({
+		index: 'movies_stashed',
+		query: {
+			bool: {
+				must: [
+					{ equals: { movie_id: movieId } },
+					{ equals: { stash_id: stashId } },
+					{ equals: { user_id: sessionUser.id } },
+				],
+			},
+		},
+	});
+
+	logger.verbose(`${sessionUser.username} (${sessionUser.id}) unstashed movie ${movieId} from stash ${stashId}`);
+
 	return fetchStashes('movie', movieId, sessionUser);
 }

src/web/movies.js

@@ -27,7 +27,7 @@ export async function fetchMoviesApi(req, res) {
 	} = await fetchMovies(await curateMoviesQuery(req.query), {
 		page: Number(req.query.page) || 1,
 		limit: Number(req.query.limit) || 30,
-	});
+	}, req.user);
 
 	res.send(stringify({
 		movies,

src/web/scenes.js

@@ -11,6 +11,7 @@ export async function curateScenesQuery(query) {
 		actorIds: [query.actorId, ...(query.actors?.split(',') || []).map((identifier) => parseActorIdentifier(identifier)?.id)].filter(Boolean),
 		tagIds: await getIdsBySlug([query.tagSlug, ...(query.tags?.split(',') || [])], 'tags'),
 		entityId: query.e ? await getIdsBySlug([query.e], 'entities').then(([id]) => id) : query.entityId,
+		movieId: Number(query.movieId) || null,
 		stashId: Number(query.stashId) || null,
 	};
 }