Improved scenes and movies meta header layout and responsiveness.

pages/movies/+onBeforeRender.js

@@ -1,17 +1,30 @@
+import { getRandomCampaigns } from '#/src/campaigns.js';
 import { fetchMovies } from '#/src/movies.js';
 import { curateMoviesQuery } from '#/src/web/movies.js';
 
 export async function onBeforeRender(pageContext) {
-	const movieResults = await fetchMovies(await curateMoviesQuery({
-		...pageContext.urlQuery,
-		scope: pageContext.routeParams.scope || 'latest',
-	}), {
-		page: Number(pageContext.routeParams.page) || 1,
-		limit: Number(pageContext.urlParsed.search.limit) || 50,
-		dedupe: true,
-	}, pageContext.user, {
-		restriction: pageContext.geo.restriction,
-	});
+	const [
+		movieResults,
+		campaigns,
+	] = await Promise.all([
+		fetchMovies(await curateMoviesQuery({
+			...pageContext.urlQuery,
+			scope: pageContext.routeParams.scope || 'latest',
+		}), {
+			page: Number(pageContext.routeParams.page) || 1,
+			limit: Number(pageContext.urlParsed.search.limit) || 50,
+			dedupe: true,
+		}, pageContext.user, {
+			restriction: pageContext.geo.restriction,
+		}),
+		// same banner shapes as the scenes page header and footer
+		getRandomCampaigns([
+			{ minRatio: 3 },
+			{ minRatio: 1.5 },
+		], { tagFilter: pageContext.tagFilter }),
+	]);
+
+	const [metaCampaign, paginationCampaign] = campaigns;
 
 	return {
 		pageContext: {
@@ -19,6 +32,10 @@ export async function onBeforeRender(pageContext) {
 			pageProps: {
 				...movieResults,
 			},
+			campaigns: {
+				meta: metaCampaign,
+				pagination: paginationCampaign,
+			},
 		},
 	};
 }

pages/scenes/+onBeforeRender.js

@@ -21,6 +21,7 @@ export async function onBeforeRender(pageContext) {
 			restriction: pageContext.geo.restriction,
 		}),
 		getRandomCampaigns([
+			{ minRatio: 3 },
 			{ minRatio: 0.75, maxRatio: 1.25 },
 			{ minRatio: 1.5 },
 		], { tagFilter: pageContext.tagFilter }),
@@ -31,7 +32,7 @@ export async function onBeforeRender(pageContext) {
 	} = sceneResults;
 
 	const campaignIndex = getCampaignIndex(scenes.length);
-	const [sceneCampaign, paginationCampaign] = campaigns;
+	const [metaCampaign, sceneCampaign, paginationCampaign] = campaigns;
 
 	return {
 		pageContext: {
@@ -41,6 +42,7 @@ export async function onBeforeRender(pageContext) {
 			},
 			campaigns: {
 				index: campaignIndex,
+				meta: metaCampaign,
 				scenes: scenes.length > 5 && sceneCampaign,
 				pagination: paginationCampaign,
 			},