Merged scene and movie page banner into single component. Improved movie cover display.

components/header/header.vue

@@ -168,11 +168,11 @@
 								</li>
 
 								<li
-									v-if="user?.primaryStash"
+									v-if="primaryStash"
 									class="menu-item"
 								>
 									<a
-										:href="`/stash/${user.username}/${user.primaryStash.slug}`"
+										:href="`/stash/${user.username}/${primaryStash.slug}`"
 										class="menu-button nolink favorites"
 									>
 										<Icon icon="heart7" />
@@ -257,6 +257,7 @@ const pageContext = inject('pageContext');
 const theme = ref(pageContext.env.theme);
 
 const user = pageContext.user;
+const { primaryStash } = pageContext.assets;
 const unseen = ref(pageContext.meta.unseenNotifications);
 const query = ref(pageContext.urlParsed.search.q || '');
 const allowLogin = pageContext.env.allowLogin;

pages/movies/@movieId/+Page.vue

@@ -1,59 +1,9 @@
 <template>
 	<div class="page">
 		<div class="content">
-			<div
+			<Banner
-				class="banner-container"
+				:release="movie"
-				:style="{ 'background-image': `url(${getPath(movie.poster || movie.covers[0])})` }"
+			/>
-			>
-				<div class="banner">
-					<img
-						v-for="cover in movie.covers"
-						:key="`cover-${cover.id}`"
-						:src="getPath(cover, 'thumbnail')"
-						class="cover"
-					>
-
-					<div
-						v-if="movie.trailer"
-						class="trailer"
-					>
-						<Player
-							:video="movie.trailer"
-							:poster="getPath(movie.poster || movie.covers[0])"
-							class="item"
-							:class="{ playing }"
-							@play="playing = true; paused = false;"
-							@pause="playing = false; paused = true;"
-						/>
-					</div>
-
-					<div
-						v-if="movie.photos.length > 0 || movie.caps.length > 0"
-						class="album"
-						:class="{ single: (movie.photos.length + movie.caps.length) === 1 }"
-					>
-						<div
-							v-for="photo in movie.photos.concat(movie.caps)"
-							: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">
@@ -236,11 +186,10 @@
 import { inject } from 'vue';
 
 import { formatDate, formatDuration } from '#/utils/format.js';
-import getPath from '#/src/get-path.js';
 
+import Banner from '#/components/media/banner.vue';
 import ActorTile from '#/components/actors/tile.vue';
 import SceneTile from '#/components/scenes/tile.vue';
-import Player from '#/components/video/player.vue';
 import Heart from '#/components/stashes/heart.vue';
 
 const pageContext = inject('pageContext');
@@ -265,102 +214,6 @@ const scenes = pageContext.pageProps.scenes;
 	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;
@@ -462,10 +315,6 @@ const scenes = pageContext.pageProps.scenes;
 	color: var(--text-light);
 }
 
-.cover {
-	height: 21rem;
-}
-
 .actors,
 .tags {
 	margin-bottom: 1rem;
@@ -535,11 +384,6 @@ const scenes = pageContext.pageProps.scenes;
 		margin: 0 .5rem;
 	}
 
-	.banner-container {
-		border-radius: 0;
-		margin-top: 0;
-	}
-
 	.network-container {
 		display: none;
 	}
@@ -570,29 +414,6 @@ const scenes = pageContext.pageProps.scenes;
 }
 
 @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;
 	}

pages/scene/+Page.vue

@@ -1,63 +1,9 @@
 <template>
 	<div class="page">
 		<div class="content">
-			<div
+			<Banner
-				class="banner-container"
+				:release="scene"
-				:style="{ 'background-image': `url(${getPath(scene.poster, 'thumbnail')})` }"
+			/>
-			>
-				<div class="banner">
-					<div
-						v-if="scene.trailer || scene.teaser"
-						class="trailer"
-					>
-						<Player
-							:video="scene.trailer || scene.teaser"
-							:poster="poster"
-							class="item"
-							:class="{ playing }"
-							@play="playing = true; paused = false;"
-							@pause="playing = false; paused = true;"
-						/>
-					</div>
-
-					<div
-						v-else-if="scene.poster"
-						class="poster-container"
-					>
-						<div class="poster-link">
-							<img
-								:src="getPath(scene.poster, 'thumbnail')"
-								:style="{ 'background-image': `url(${getPath(scene.poster, 'lazy')}` }"
-								:width="scene.poster.width"
-								:height="scene.poster.height"
-								class="poster"
-							>
-						</div>
-					</div>
-
-					<div
-						v-if="scene.photos.length > 0 || scene.caps.length > 0"
-						class="album"
-						:class="{ single: (scene.photos.length + scene.caps.length) === 1 }"
-					>
-						<div
-							v-for="photo in [...scene.photos, ...scene.caps]"
-							:key="`photo-${photo.id}`"
-							class="photo-container"
-						>
-							<div class="photo-link">
-								<img
-									:src="getPath(photo, 'thumbnail')"
-									:style="{ 'background-image': getPath(photo, 'lazy') }"
-									:width="photo.width"
-									:height="photo.height"
-									class="photo"
-								>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
 
 			<div class="meta">
 				<div class="entity">
@@ -359,18 +305,17 @@
 </template>
 
 <script setup>
-import { ref, computed, inject } from 'vue';
+import { ref, inject } from 'vue';
 import Cookies from 'js-cookie';
 
 import { formatDate, formatDuration } from '#/utils/format.js';
 import events from '#/src/events.js';
-import getPath from '#/src/get-path.js';
 import processSummaryTemplate from '#/utils/process-summary-template.js';
 
+import Banner from '#/components/media/banner.vue';
 import ActorTile from '#/components/actors/tile.vue';
 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 EditSummary from '#/components/scenes/edit-summary.vue';
@@ -391,9 +336,6 @@ const {
 
 const { scene } = pageProps;
 
-const playing = ref(false);
-const paused = ref(false);
-
 const showSummaryDialog = ref(false);
 
 const qualities = {
@@ -407,22 +349,6 @@ const qualities = {
 	360: 'nHD',
 };
 
-const poster = computed(() => {
-	if (scene.poster) {
-		return getPath(scene.poster, 'thumbnail');
-	}
-
-	if (scene.covers?.length > 0) {
-		return getPath(scene.covers[0], 'thumbnail');
-	}
-
-	if (scene.photos?.length > 0) {
-		return getPath(scene.photos[0], 'thumbnail');
-	}
-
-	return null;
-});
-
 const summary = ref(null);
 const selectedTemplate = ref(null);
 
@@ -483,107 +409,6 @@ function copySummary() {
 	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-link {
-	height: 100%;
-	width: calc(21/9 * 16rem);
-}
-
-.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;
 	height: 3.25rem;
@@ -836,11 +661,6 @@ function copySummary() {
 		margin: 0 .75rem;
 	}
 
-	.banner-container {
-		border-radius: 0;
-		margin-top: 0;
-	}
-
 	.network-container {
 		display: none;
 	}
@@ -871,45 +691,6 @@ function copySummary() {
 }
 
 @media(--small-10) {
-	.banner {
-		flex-direction: column;
-		align-items: center;
-		border-radius: 0;
-		max-height: none;
-	}
-
-	.poster-container {
-		margin: 0;
-		flex-shrink: 1;
-	}
-
-	.poster-link {
-		width: 100%;
-	}
-
-	.trailer {
-		margin: 0;
-		flex-shrink: 1;
-	}
-
-	.poster {
-		border-radius: 0;
-	}
-
-	.album {
-		display: flex;
-		flex-wrap: nowrap;
-		flex-shrink: 0;
-		overflow-x: auto;
-		height: 6rem;
-		padding: .5rem;
-	}
-
-	.photo-container {
-		flex-grow: 0;
-		flex-shrink: 0;
-	}
-
 	.header {
 		padding: 1rem .5rem .5rem .5rem;
 	}

src/media.js

@@ -1,4 +1,4 @@
-export function curateMedia(media) {
+export function curateMedia(media, context = {}) {
 	if (!media) {
 		return null;
 	}
@@ -13,5 +13,6 @@ export function curateMedia(media) {
 		height: media.height,
 		index: media.index,
 		credit: media.credit,
+		type: context.type || null,
 	};
 }

src/movies.js

@@ -54,10 +54,10 @@ function curateMovie(rawMovie, assets) {
 			name: tag.name,
 		})),
 		// poster: curateMedia(assets.poster),
-		covers: assets.covers.map((cover) => curateMedia(cover)),
+		covers: assets.covers.map((cover) => curateMedia(cover, { type: 'cover' })),
-		photos: assets.photos.map((photo) => curateMedia(photo)),
+		photos: assets.photos.map((photo) => curateMedia(photo, { type: 'photo' })),
-		caps: assets.caps.map((cap) => curateMedia(cap)),
+		caps: assets.caps.map((cap) => curateMedia(cap, { type: 'cap' })),
-		trailer: curateMedia(assets.trailer),
+		trailer: curateMedia(assets.trailer, { type: 'trailer' }),
 		stashes: assets.stashes?.map((stash) => curateStash(stash)) || [],
 		createdBatchId: rawMovie.created_batch_id,
 		updatedBatchId: rawMovie.updated_batch_id,

src/scenes.js

@@ -104,19 +104,19 @@ function curateScene(rawScene, assets) {
 			id: movie.id,
 			slug: movie.slug,
 			title: movie.title,
-			covers: movie.movie_covers?.map((cover) => curateMedia(cover)).toSorted((coverA, coverB) => coverA.index - coverB.index) || [],
+			covers: movie.movie_covers?.map((cover) => curateMedia(cover, { type: 'cover' })).toSorted((coverA, coverB) => coverA.index - coverB.index) || [],
 		})),
 		series: assets.series.map((serie) => ({
 			id: serie.id,
 			slug: serie.slug,
 			title: serie.title,
-			poster: curateMedia(serie.serie_poster),
+			poster: curateMedia(serie.serie_poster, { type: 'poster' }),
 		})),
-		poster: curateMedia(assets.poster),
+		poster: curateMedia(assets.poster, { type: 'poster' }),
-		trailer: curateMedia(assets.trailer),
+		trailer: curateMedia(assets.trailer, { type: 'trailer' }),
-		teaser: curateMedia(assets.teaser),
+		teaser: curateMedia(assets.teaser, { type: 'teaser' }),
-		photos: assets.photos?.map((photo) => curateMedia(photo)) || [],
+		photos: assets.photos?.map((photo) => curateMedia(photo, { type: 'photo' })) || [],
-		caps: assets.caps?.map((cap) => curateMedia(cap)) || [],
+		caps: assets.caps?.map((cap) => curateMedia(cap, { type: 'cap' })) || [],
 		stashes: assets.stashes?.map((stash) => curateStash(stash)) || [],
 		createdBatchId: rawScene.created_batch_id,
 		updatedBatchId: rawScene.updated_batch_id,