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

pages/movies/@movieId/+Page.vue

@@ -1,59 +1,9 @@
 <template>
 	<div class="page">
 		<div class="content">
-			<div
-				class="banner-container"
-				: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>
+			<Banner
+				:release="movie"
+			/>
 
 			<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;
 	}