Combined scene and movie components.

assets/components/releases/media.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="media">
+	<div
+		v-lazy-container
+		class="media"
+	>
 		<div
 			v-if="release.trailer || release.teaser"
 			class="trailer-container"
@@ -30,7 +33,7 @@
 
 			<img
 				v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
-				:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
+				:data-src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
 				:alt="release.title"
 				class="item trailer"
 			>
@@ -62,7 +65,8 @@
 				rel="noopener noreferrer"
 			>
 				<img
-					:src="`/media/${cover.thumbnail}`"
+					:data-src="`/media/${cover.thumbnail}`"
+					:data-loading="`/media/${cover.lazy}`"
 					class="item cover"
 					@load="$parent.$emit('load')"
 				>
@@ -82,7 +86,8 @@
 				rel="noopener noreferrer"
 			>
 				<img
-					:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
+					:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
+					:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
 					:alt="`Photo ${photo.index + 1}`"
 					class="item"
 					@load="$parent.$emit('load')"
@@ -105,8 +110,9 @@ function sfw() {
 }
 
 function photos() {
-	const clipPostersById = (this.release.clips || []).reduce((acc, clip) => ({ ...acc, [clip.poster.id]: clip.poster }), {});
-	const uniqueClipPosters = Array.from(new Set(this.release.clips.map(clip => clip.poster.id) || [])).map(posterId => clipPostersById[posterId]);
+	const clips = this.release.clips || [];
+	const clipPostersById = clips.reduce((acc, clip) => ({ ...acc, [clip.poster.id]: clip.poster }), {});
+	const uniqueClipPosters = Array.from(new Set(clips.map(clip => clip.poster.id) || [])).map(posterId => clipPostersById[posterId]);
 	const photosWithClipPosters = (this.release.photos || []).concat(uniqueClipPosters);
 
 	if (this.release.trailer || this.release.teaser) {

assets/components/releases/movie-tile.vue

@@ -2,7 +2,7 @@
 	<div class="tile">
 		<div class="movie">
 			<router-link
-				:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
+				:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
 				class="cover"
 			>
 				<img
@@ -13,7 +13,7 @@
 
 			<div class="info">
 				<router-link
-					:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
+					:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
 					class="title-link"
 				>
 					<h3 class="title">{{ movie.title }}</h3>

assets/components/releases/movie.vue

@@ -1,107 +0,0 @@
-<template>
-	<div
-		v-if="movie"
-		class="movie"
-	>
-		<Media
-			:release="movie"
-		/>
-
-		<Details :release="movie" />
-
-		<div class="column">
-			<h2 class="title">{{ movie.title }}</h2>
-
-			<p>{{ movie.description }}</p>
-
-			<div
-				v-lazy-container="{ selector: '.lazy' }"
-				class="actors"
-			>
-				<ActorTile
-					v-for="actor in movie.actors"
-					:key="`actor-${actor.id}`"
-					:actor="actor"
-				/>
-			</div>
-
-			<Tags
-				v-if="movie.tags && movie.tags.length > 0"
-				:tags="movie.tags"
-			/>
-
-			<Releases
-				:releases="movie.scenes"
-			/>
-		</div>
-	</div>
-</template>
-
-<script>
-import Media from './media.vue';
-import Details from './details.vue';
-import Tags from './tags.vue';
-import Releases from './releases.vue';
-import ActorTile from '../actors/tile.vue';
-
-async function mounted() {
-	this.movie = await this.$store.dispatch('fetchMovieById', this.$route.params.movieId);
-}
-
-export default {
-	components: {
-		Details,
-		Tags,
-		Media,
-		ActorTile,
-		Releases,
-	},
-	data() {
-		return {
-			movie: null,
-		};
-	},
-	mounted,
-};
-</script>
-
-<style lang="scss" scoped>
-.title {
-	padding: .5rem 0;
-	margin: 0 0 1rem 0;
-	color: var(--shadow-strong);
-}
-
-.covers {
-	display: inline-block;
-	margin: 0 0 1rem 0;
-}
-
-.cover {
-	height: 20rem;
-	margin: 0 1rem 0 0;
-	box-shadow: 0 0 3px var(--shadow-weak);
-}
-
-.trailer {
-	height: 20rem;
-}
-
-.date {
-	display: inline-block;
-	padding: 1rem;
-}
-
-.content-inner {
-	padding: 1rem;
-}
-
-.actors {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    grid-gap: .5rem;
-    flex-grow: 1;
-    flex-wrap: wrap;
-	margin: 0 0 1rem 0;
-}
-</style>

assets/components/releases/release.vue

@@ -23,7 +23,7 @@
 		<Details :release="release" />
 
 		<Expand
-			v-if="release.photos.length > 0"
+			v-if="release.photos && release.photos.length > 0"
 			class="expand-bottom"
 			:expanded="expanded"
 			@expand="(state) => expanded = state"
@@ -91,6 +91,11 @@
 				</div>
 			</div>
 
+			<Releases
+				v-if="release.scenes && release.scenes.length > 0"
+				:releases="release.scenes"
+			/>
+
 			<div
 				v-if="release.description"
 				class="row"
@@ -200,6 +205,7 @@ import Details from './details.vue';
 import Tags from './tags.vue';
 import Clips from './clips.vue';
 import Actor from '../actors/tile.vue';
+import Releases from './releases.vue';
 import Scroll from '../scroll/scroll.vue';
 import Expand from '../expand/expand.vue';
 
@@ -210,7 +216,13 @@ function pageTitle() {
 }
 
 async function mounted() {
-	this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
+	if (this.$route.name === 'scene') {
+		this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
+	}
+
+	if (this.$route.name === 'movie') {
+		this.release = await this.$store.dispatch('fetchMovieById', this.$route.params.releaseId);
+	}
 }
 
 export default {
@@ -220,6 +232,7 @@ export default {
 		Media,
 		Scroll,
 		Expand,
+		Releases,
 		Clips,
 		Tags,
 	},