Added actors and movies to global search results.

pages/search/+Page.vue

@@ -1,11 +1,184 @@
 <template>
-	<div>
-		<Scenes
-			default-scope="results"
-		/>
+	<div class="page">
+		<div class="row">
+			<div
+				v-if="actors.length > 0"
+				class="results"
+			>
+				<span class="results-meta">
+					Found {{ actorTotal }} {{ actorTotal > 1 ? 'actors' : 'actor' }}
+
+					<a
+						:href="`/actors/?q=${query}&order=results.desc`"
+						class="link"
+					>Full actor results</a>
+				</span>
+
+				<div class="results-container">
+					<div class="actors">
+						<ActorTile
+							v-for="actor in actors"
+							:key="`actor-${actor.id}`"
+							:actor="actor"
+						/>
+					</div>
+				</div>
+			</div>
+
+			<div
+				v-if="movies.length > 0"
+				class="results"
+			>
+				<span class="results-meta">
+					Found {{ movieTotal }} {{ movieTotal > 1 ? 'movies' : 'movie' }}
+
+					<a
+						:href="`/movies/results/?q=${query}`"
+						class="link"
+					>Full movie results</a>
+				</span>
+
+				<div class="results-container">
+					<div class="movies">
+						<MovieTile
+							v-for="movie in movies"
+							:key="`movie-${movie.id}`"
+							:movie="movie"
+							:show-details="false"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div
+			v-if="scenes.length > 0"
+			class="results"
+		>
+			<span class="results-meta">
+				Found {{ sceneTotal }} {{ sceneTotal > 1 ? 'scenes' : 'scene' }}
+
+				<a
+					:href="`/updates/results/?q=${query}`"
+					class="link"
+				>Full scene results</a>
+			</span>
+
+			<div class="scenes">
+				<SceneTile
+					v-for="scene in scenes"
+					:key="`scene-${scene.id}`"
+					:scene="scene"
+				/>
+			</div>
+		</div>
+
+		<span
+			v-if="actors.length === 0 && scenes.length === 0"
+			class="results-meta"
+		>No results for '{{ query }}'</span>
 	</div>
 </template>
 
 <script setup>
-import Scenes from '#/components/scenes/scenes.vue';
+import { inject } from 'vue';
+
+import ActorTile from '#/components/actors/tile.vue';
+import SceneTile from '#/components/scenes/tile.vue';
+import MovieTile from '#/components/movies/tile.vue';
+
+const pageContext = inject('pageContext');
+
+const {
+	actors,
+	scenes,
+	movies,
+	actorTotal,
+	sceneTotal,
+	movieTotal,
+} = pageContext.pageProps;
+
+const query = pageContext.urlParsed.search.q;
 </script>
+
+<style scoped>
+.page {
+	display: flex;
+	flex-direction: column;
+}
+
+.row {
+	width: 100%;
+	display: flex;
+	overflow: hidden;
+}
+
+.results {
+	display: flex;
+	flex: auto;
+	flex-direction: column;
+}
+
+.results-container {
+	max-height: 19rem;
+	overflow-y: auto;
+}
+
+.actors {
+	min-width: 10rem;
+	display: grid;
+	flex-grow: 1;
+	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+	gap: .25rem;
+	padding: 1rem;
+}
+
+.movies {
+	min-width: 15rem;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+	gap: 1rem;
+	padding: 1rem;
+}
+
+.scenes {
+	display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+	gap: .5rem;
+	padding: 1rem;
+}
+
+.results-meta {
+	box-sizing: border-box;
+	padding: 1rem 1rem 0 1rem;
+	color: var(--shadow);
+	font-weight: bold;
+
+	.link {
+		margin-left: .5rem;
+		font-weight: normal;
+	}
+}
+
+@media(--small-10) {
+	.row {
+		flex-direction: column;
+	}
+
+	.scenes {
+		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+	}
+
+	.actors,
+	.movies {
+		display: flex;
+		overflow-x: auto;
+
+		.tile,
+		.movie-tile {
+			width: 9rem;
+			min-width: 9rem;
+		}
+	}
+}
+</style>

pages/search/+onBeforeRender.js

@@ -1,36 +1,66 @@
 import { fetchScenes } from '#/src/scenes.js';
+import { fetchActors } from '#/src/actors.js';
+import { fetchMovies } from '#/src/movies.js';
 import { curateScenesQuery } from '#/src/web/scenes.js';
+import { curateActorsQuery } from '#/src/web/actors.js';
+import { curateMoviesQuery } from '#/src/web/movies.js';
 
 export async function onBeforeRender(pageContext) {
-	const searchScenes = await fetchScenes(await curateScenesQuery({
-		...pageContext.urlQuery,
-		query: pageContext.urlParsed.search.q,
-		scope: pageContext.urlParsed.search.scope || 'results',
-		tagFilter: pageContext.tagFilter,
-	}), {
-		page: Number(pageContext.routeParams.page) || 1,
-		limit: Number(pageContext.urlParsed.search.limit) || 30,
-	}, pageContext.user);
+	const [searchScenes, searchActors, searchMovies] = await Promise.all([
+		fetchScenes(await curateScenesQuery({
+			...pageContext.urlQuery,
+			query: pageContext.urlParsed.search.q,
+			scope: pageContext.urlParsed.search.scope || 'results',
+			tagFilter: pageContext.tagFilter,
+		}), {
+			page: Number(pageContext.routeParams.page) || 1,
+			limit: Number(pageContext.urlParsed.search.limit) || 15,
+		}, pageContext.user),
+		fetchActors(curateActorsQuery(pageContext.urlQuery), {
+			page: Number(pageContext.routeParams.page) || 1,
+			limit: Number(pageContext.urlParsed.search.limit) || 10,
+			order: ['results', 'desc'],
+		}, pageContext.user),
+		fetchMovies(await curateMoviesQuery({
+			...pageContext.urlQuery,
+			scope: pageContext.routeParams.scope || 'results',
+		}), {
+			page: Number(pageContext.routeParams.page) || 1,
+			limit: Number(pageContext.urlParsed.search.limit) || 5,
+		}, pageContext.user),
+	]);
 
 	const {
 		scenes,
 		aggActors,
 		aggTags,
 		aggChannels,
-		total,
-		limit,
+		total: sceneTotal,
 	} = searchScenes;
 
+	const {
+		actors,
+		total: actorTotal,
+	} = searchActors;
+
+	const {
+		movies,
+		total: movieTotal,
+	} = searchMovies;
+
 	return {
 		pageContext: {
 			title: `Search '${pageContext.urlParsed.search.q || ''}'`,
 			pageProps: {
+				actors,
 				scenes,
+				movies,
 				aggActors,
 				aggTags,
 				aggChannels,
-				limit,
-				total,
+				sceneTotal,
+				actorTotal,
+				movieTotal,
 			},
 		},
 	};