Modularized release component between movie and scene. Added Kink Classics channel.

assets/components/container/container.vue

@@ -111,4 +111,12 @@ export default {
 		transform: translate(-100%, 0);
 	}
 }
+
+.column {
+    width: 1200px;
+    max-width: 100%;
+    padding: 0 1rem;
+    margin: 0 auto;
+    box-sizing: border-box;
+}
 </style>

assets/components/releases/details.vue

@@ -0,0 +1,223 @@
+<template>
+	<div class="details">
+		<div class="column">
+			<div class="tidbits">
+				<a
+					v-if="release.date"
+					:title="release.url && `View scene on ${release.entity.name}`"
+					:href="release.url"
+					:class="{ link: release.url }"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="tidbit date nolink"
+				>
+					<span class="date-compact">{{ formatDate(release.date, 'MMM D, YYYY', release.datePrecision) }}</span>
+					<span class="date-full">{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</span>
+
+					<Icon
+						v-if="release.url"
+						icon="share2"
+					/>
+				</a>
+			</div>
+
+			<div class="site">
+				<template v-if="release.entity.parent && !release.entity.independent">
+					<a
+						v-if="release.entity.parent.hasLogo"
+						:href="`/network/${release.entity.parent.slug}`"
+						class="logo-link"
+					>
+						<img
+							:src="`/img/logos/${release.entity.parent.slug}/thumbs/network.png`"
+							:title="release.entity.parent.name"
+							:alt="release.entity.parent.name"
+							class="logo logo-parent"
+						>
+					</a>
+
+					<a
+						v-else
+						:href="`/network/${release.entity.parent.slug}`"
+						class="logo-link logo-name"
+					>{{ release.entity.parent.name }}</a>
+
+					<span class="chain">presents</span>
+
+					<a
+						v-if="release.entity.hasLogo"
+						:href="`/${release.entity.type}/${release.entity.slug}`"
+						class="logo-link"
+					>
+						<img
+							v-if="release.entity.type === 'network'"
+							:src="`/img/logos/${release.entity.slug}/thumbs/network.png`"
+							:title="release.entity.name"
+							class="logo logo-site"
+						>
+
+						<img
+							v-else
+							:src="`/img/logos/${release.entity.parent.slug}/thumbs/${release.entity.slug}.png`"
+							:title="release.entity.name"
+							class="logo logo-site"
+						>
+					</a>
+
+					<a
+						v-else
+						:href="`/${release.entity.type}/${release.entity.slug}`"
+						class="logo-link logo-name"
+					>{{ release.entity.name }}</a>
+				</template>
+
+				<a
+					v-else
+					:href="`/${release.entity.type}/${release.entity.slug}`"
+				>
+					<img
+						:src="`/img/logos/${release.entity.slug}/thumbs/network.png`"
+						:title="release.entity.name"
+						class="logo logo-site"
+					>
+				</a>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		release: {
+			type: Object,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.details {
+    background: var(--profile);
+    color: var(--text-light);
+    box-shadow: 0 0 3px var(--shadow-weak);
+    cursor: default;
+
+    .column {
+		height: 100%;
+        display: flex;
+		justify-content: space-between;
+        align-items: center;
+        padding: 0 1rem;
+    }
+
+    .link {
+        color: var(--text-light);
+
+		.icon {
+			fill: var(--lighten);
+		}
+
+		&:hover {
+			color: var(--text-light);
+
+			.icon {
+				fill: var(--text-light);
+			}
+		}
+    }
+}
+
+.tidbits {
+	flex-shrink: 0;
+	height: 100%;
+}
+
+.tidbit {
+    display: inline-flex;
+	align-items: center;
+    height: 100%;
+
+	&.date {
+        flex-shrink: 0;
+		font-weight: bold;
+
+		.icon {
+			fill: var(--lighten);
+			margin: -.2rem 0 0 .75rem;
+		}
+    }
+}
+
+.site {
+    display: inline-flex;
+    align-items: center;
+    padding: .25rem 0;
+    font-size: 0;
+}
+
+.logo {
+    display: inline-block;
+}
+
+.logo-link {
+	text-decoration: none;
+}
+
+.logo-site {
+    height: 2.5rem;
+    max-width: 15rem;
+	margin: .25rem 0;
+    object-fit: contain;
+    object-position: 100% 50%;
+}
+
+.logo-parent {
+    height: 1.5rem;
+    max-width: 10rem;
+    object-fit: contain;
+    object-position: 100% 50%;
+}
+
+.logo-name {
+	padding: .5rem 0;
+	color: var(--text-light);
+	font-size: 1.25rem;
+	font-weight: bold;
+}
+
+.chain {
+    color: var(--lighten);
+    padding: 0 .5rem;
+    font-weight: bold;
+    font-size: .8rem;
+}
+
+.date-compact {
+	display: none;
+}
+
+@media(max-width: $breakpoint-mega) {
+    .logo-parent,
+    .chain {
+        display: none;
+    }
+
+	.logo-site {
+		width: 100%;
+	}
+}
+
+@media(max-width: $breakpoint) {
+	.date-full {
+		display: none;
+	}
+
+	.date-compact {
+		display: inline-block;
+	}
+}
+</style>

assets/components/releases/media.vue

@@ -71,7 +71,7 @@
 
 		<div
 			v-for="photo in photos"
-			:key="`media-${photo.index}`"
+			:key="`media-${photo.id}`"
 			class="item-container"
 		>
 			<a

assets/components/releases/movie-tile.vue

@@ -12,60 +12,6 @@
 			</router-link>
 
 			<div class="info">
-				<div class="details">
-					<span
-						v-if="movie.entity.type !== 'network' && !movie.entity.independent && movie.entity.parent"
-						class="entity"
-					>
-						<router-link
-							v-tooltip.bottom="`Part of ${movie.entity.parent.name}`"
-							:title="`Part of ${movie.entity.parent.name}`"
-							:to="`/${movie.entity.parent.type}/${movie.entity.parent.slug}`"
-							class="entity-link"
-						><img
-							:src="`/img/logos/${movie.entity.parent.slug}/favicon.png`"
-							class="favicon"
-						></router-link>
-
-						<router-link
-							v-tooltip.bottom="`More from ${movie.entity.name}`"
-							:title="`More from ${movie.entity.name}`"
-							:to="`/${movie.entity.type}/${movie.entity.slug}`"
-							class="entity-link"
-						>{{ movie.entity.name }}</router-link>
-					</span>
-
-					<router-link
-						v-else
-						:to="`/${movie.entity.type}/${movie.entity.slug}`"
-						class="entity entity-link"
-					><img
-						:src="`/img/logos/${movie.entity.slug}/favicon.png`"
-						class="favicon"
-					>{{ movie.entity.name }}</router-link>
-
-					<a
-						v-if="movie.date"
-						v-tooltip.bottom="movie.url && `View movie on ${movie.entity.name}`"
-						:title="movie.url && `View movie on ${movie.entity.name}`"
-						:href="movie.url"
-						:class="{ upcoming: isAfter(movie.date, new Date()) }"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="date"
-					><Icon icon="share2" />{{ formatDate(movie.date, 'MMMM D, YYYY', movie.datePrecision) }}</a>
-
-					<a
-						v-else
-						:href="movie.url"
-						:class="{ upcoming: isAfter(movie.date, new Date()), new: movie.isNew }"
-						title="Scene date N/A, showing date added"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="date"
-					>{{ `(${formatDate(movie.dateAdded, 'MMMM D, YYYY')})` }}</a>
-				</div>
-
 				<router-link
 					:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
 					class="title-link"
@@ -102,11 +48,18 @@
 				</ul>
 			</div>
 		</div>
+
+		<Details :release="movie" />
 	</div>
 </template>
 
 <script>
+import Details from './tile-details.vue';
+
 export default {
+	components: {
+		Details,
+	},
 	props: {
 		movie: {
 			type: Object,
@@ -117,6 +70,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'breakpoints';
+
 .tile {
 	display: flex;
 	flex-direction: column;
@@ -134,41 +89,6 @@ export default {
 	text-decoration: none;
 }
 
-.details {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	color: var(--text-light);
-	background: var(--profile);
-	padding: .5rem 1rem;
-    font-size: .8rem;
-	font-weight: bold;
-}
-
-.entity-link,
-.date {
-	display: flex;
-	align-items: center;
-	color: inherit;
-	font-size: inherit;
-	text-decoration: none;
-
-	.favicon {
-		width: 1rem;
-		height: 1rem;
-		margin: 0 .5rem 0 0;
-	}
-
-	.icon {
-		fill: var(--highlight-weak);
-		margin: 0 .25rem 0 0;
-	}
-
-	&:hover .icon {
-		fill: var(--text-light);
-	}
-}
-
 .cover {
 	height: 16rem;
 	box-shadow: 0 0 3px var(--darken-weak);
@@ -242,4 +162,10 @@ export default {
 		color: var(--primary);
 	}
 }
+
+@media(max-width: $breakpoint) {
+	.cover {
+		height: 12rem;
+	}
+}
 </style>

assets/components/releases/movie.vue

@@ -0,0 +1,107 @@
+<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/movies.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="movies">
 		<div class="tiles">
-			<Movie
+			<MovieTile
 				v-for="movie in movies"
 				:key="`movie-${movie.id}`"
 				:movie="movie"
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import Movie from './tile.vue';
+import MovieTile from './movie-tile.vue';
 
 async function mounted() {
 	const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
@@ -24,7 +24,7 @@ async function mounted() {
 
 export default {
 	components: {
-		Movie,
+		MovieTile,
 	},
 	data() {
 		return {
@@ -36,7 +36,9 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@import 'breakpoints';
+
 .movies {
     padding: 1rem;
 }
@@ -46,4 +48,10 @@ export default {
 	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
 	grid-gap: 1rem;
 }
+
+@media(max-width: $breakpoint) {
+	.tiles {
+		grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+	}
+}
 </style>

assets/components/releases/releases.vue

@@ -15,7 +15,7 @@
 				v-for="(release, index) in releases"
 				:key="`release-${release.id}`"
 			>
-				<ReleaseTile
+				<SceneTile
 					:release="release"
 					:referer="referer"
 					:index="index"
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import ReleaseTile from './tile.vue';
+import SceneTile from './scene-tile.vue';
 
 function range() {
 	return this.$route.params.range;
@@ -48,7 +48,7 @@ function sfw() {
 
 export default {
 	components: {
-		ReleaseTile,
+		SceneTile,
 	},
 	props: {
 		releases: {

assets/components/releases/scene.vue

@@ -20,91 +20,7 @@
 			/>
 		</Scroll>
 
-		<div class="details">
-			<div class="column">
-				<div class="tidbits">
-					<a
-						v-if="release.date"
-						:title="release.url && `View scene on ${release.entity.name}`"
-						:href="release.url"
-						:class="{ link: release.url }"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="tidbit date"
-					>
-						<span class="showable">{{ formatDate(release.date, 'MMM D, YYYY', release.datePrecision) }}</span>
-						<span class="hideable">{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</span>
-
-						<Icon
-							v-if="release.url"
-							icon="share2"
-						/>
-					</a>
-				</div>
-
-				<div class="site">
-					<template v-if="release.entity.parent && !release.entity.independent">
-						<a
-							v-if="release.entity.parent.hasLogo"
-							:href="`/network/${release.entity.parent.slug}`"
-							class="logo-link"
-						>
-							<img
-								:src="`/img/logos/${release.entity.parent.slug}/thumbs/network.png`"
-								:title="release.entity.parent.name"
-								:alt="release.entity.parent.name"
-								class="logo logo-parent"
-							>
-						</a>
-
-						<a
-							v-else
-							:href="`/network/${release.entity.parent.slug}`"
-							class="logo-link logo-name"
-						>{{ release.entity.parent.name }}</a>
-
-						<span class="chain">presents</span>
-
-						<a
-							v-if="release.entity.hasLogo"
-							:href="`/${release.entity.type}/${release.entity.slug}`"
-							class="logo-link"
-						>
-							<img
-								v-if="release.entity.type === 'network'"
-								:src="`/img/logos/${release.entity.slug}/thumbs/network.png`"
-								:title="release.entity.name"
-								class="logo logo-site"
-							>
-
-							<img
-								v-else
-								:src="`/img/logos/${release.entity.parent.slug}/thumbs/${release.entity.slug}.png`"
-								:title="release.entity.name"
-								class="logo logo-site"
-							>
-						</a>
-
-						<a
-							v-else
-							:href="`/${release.entity.type}/${release.entity.slug}`"
-							class="logo-link logo-name"
-						>{{ release.entity.name }}</a>
-					</template>
-
-					<a
-						v-else
-						:href="`/${release.entity.type}/${release.entity.slug}`"
-					>
-						<img
-							:src="`/img/logos/${release.entity.slug}/thumbs/network.png`"
-							:title="release.entity.name"
-							class="logo logo-site"
-						>
-					</a>
-				</div>
-			</div>
-		</div>
+		<Details :release="release" />
 
 		<Expand
 			v-if="release.photos.length > 0"
@@ -136,18 +52,7 @@
 				v-if="release.tags.length > 0"
 				class="row"
 			>
-				<ul class="tags nolist">
-					<li
-						v-for="tag in release.tags"
-						:key="`tag-${tag.slug}`"
-						class="tag"
-					>
-						<a
-							:href="`/tag/${tag.slug}`"
-							class="link"
-						>{{ tag.name }}</a>
-					</li>
-				</ul>
+				<Tags :tags="release.tags" />
 			</div>
 
 			<div class="row associations">
@@ -162,24 +67,28 @@
 						<Actor :actor="actor" />
 					</li>
 				</ul>
+			</div>
 
 			<div
 				v-if="release.movies && release.movies.length > 0"
-					class="movies"
-				>
-					<Release :release="release.movies[0]" />
-				</div>
-			</div>
-
-			<div
-				v-if="release.scenes && release.scenes.length > 0"
-				class="scenes"
-			>
-				<h3>Scenes</h3>
-				<Releases
-					:releases="release.scenes"
 				class="row"
-				/>
+			>
+				<span class="row-label">Part of</span>
+
+				<div class="movies">
+					<router-link
+						v-for="movie in release.movies"
+						:key="`movie-${movie.id}`"
+						:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
+						class="movie"
+					>
+						<span class="movie-title">{{ movie.title }}</span>
+						<img
+							:src="`/media/${movie.covers[0].thumbnail}`"
+							class="movie-cover"
+						>
+					</router-link>
+				</div>
 			</div>
 
 			<div
@@ -259,9 +168,9 @@
 
 <script>
 import Media from './media.vue';
+import Details from './details.vue';
+import Tags from './tags.vue';
 import Actor from '../actors/tile.vue';
-import Release from './tile.vue';
-import Releases from './releases.vue';
 import Scroll from '../scroll/scroll.vue';
 import Expand from '../expand/expand.vue';
 
@@ -278,11 +187,11 @@ async function mounted() {
 export default {
 	components: {
 		Actor,
+		Details,
 		Media,
-		Release,
-		Releases,
 		Scroll,
 		Expand,
+		Tags,
 	},
 	data() {
 		return {
@@ -298,112 +207,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
-.column {
-    width: 1200px;
-    max-width: 100%;
-    padding: 0 1rem;
-    margin: 0 auto;
-    box-sizing: border-box;
-}
-
-.details {
-    background: var(--profile);
-    color: var(--text-light);
-    box-shadow: 0 0 3px var(--shadow-weak);
-    cursor: default;
-
-    .column {
-		height: 100%;
-        display: flex;
-		justify-content: space-between;
-        align-items: center;
-        padding: 0 1rem;
-    }
-
-    .link {
-        color: var(--text-light);
-
-		.icon {
-			fill: var(--lighten);
-		}
-
-		&:hover {
-			color: var(--text-light);
-
-			.icon {
-				fill: var(--text-light);
-			}
-		}
-    }
-}
-
-.tidbits {
-	flex-shrink: 0;
-	height: 100%;
-}
-
-.tidbit {
-    display: inline-flex;
-	align-items: center;
-    height: 100%;
-
-	&.date {
-        flex-shrink: 0;
-        padding: 0 2rem 0 0;
-		font-weight: bold;
-
-		.icon {
-			fill: var(--lighten);
-			margin: -.2rem 0 0 .75rem;
-		}
-    }
-}
-
-.site {
-    display: inline-flex;
-    align-items: center;
-    padding: .25rem 0;
-    font-size: 0;
-}
-
-.logo {
-    display: inline-block;
-}
-
-.logo-link {
-	text-decoration: none;
-}
-
-.logo-site {
-    height: 2.5rem;
-    max-width: 15rem;
-	margin: .25rem 0;
-    object-fit: contain;
-    object-position: 100% 50%;
-}
-
-.logo-parent {
-    height: 1.5rem;
-    max-width: 10rem;
-    object-fit: contain;
-    object-position: 100% 50%;
-}
-
-.logo-name {
-	padding: .5rem 0;
-	color: var(--text-light);
-	font-size: 1.25rem;
-	font-weight: bold;
-}
-
-.chain {
-    color: var(--lighten);
-    padding: 0 .5rem;
-    font-weight: bold;
-    font-size: .8rem;
-}
-
+@import 'breakpoints';
 .expand-bottom {
 	border-bottom: solid 1px var(--shadow-hint);
 }
@@ -487,6 +291,39 @@ export default {
     flex-wrap: wrap;
 }
 
+.movies {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-gap: .5rem;
+    flex-grow: 1;
+    flex-wrap: wrap;
+}
+
+.movie {
+	display: flex;
+	flex-direction: column;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak);
+	color: var(--text);
+	text-decoration: none;
+
+	&:hover .movie-title {
+		color: var(--primary);
+	}
+}
+
+.movie-cover {
+	width: 100%;
+}
+
+.movie-title {
+	padding: .5rem;
+	font-weight: bold;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .link {
     display: inline-flex;
     color: var(--link);
@@ -501,35 +338,10 @@ export default {
     }
 }
 
-.tag .link {
-    background: var(--background);
-    display: inline-block;
-    padding: .5rem;
-    margin: 0 .25rem .25rem 0;
-    box-shadow: 0 0 2px var(--shadow-weak);
-    text-decoration: none;
-    text-transform: capitalize;
-
-    &:hover {
-        color: var(--primary);
-    }
-}
-
 .showable {
     display: none;
 }
 
-@media(max-width: $breakpoint3) {
-    .logo-parent,
-    .chain {
-        display: none;
-    }
-
-	.logo-site {
-		width: 100%;
-	}
-}
-
 @media(max-width: $breakpoint) {
     .hideable {
         display: none;

assets/components/releases/tags.vue

@@ -0,0 +1,42 @@
+<template>
+	<ul class="tags nolist">
+		<li
+			v-for="tag in tags"
+			:key="`tag-${tag.slug}`"
+			class="tag"
+		>
+			<a
+				:href="`/tag/${tag.slug}`"
+				class="link"
+			>{{ tag.name }}</a>
+		</li>
+	</ul>
+</template>
+
+<script>
+export default {
+	props: {
+		tags: {
+			type: Array,
+			default: () => [],
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.tag .link {
+	color: var(--link);
+    background: var(--background);
+    display: inline-block;
+    padding: .5rem;
+    margin: 0 .25rem .25rem 0;
+    box-shadow: 0 0 2px var(--shadow-weak);
+    text-decoration: none;
+    text-transform: capitalize;
+
+    &:hover {
+        color: var(--primary);
+    }
+}
+</style>

assets/components/releases/tile-details.vue

@@ -36,8 +36,8 @@
 
 		<a
 			v-if="release.date"
-			v-tooltip.bottom="release.url && `View scene on ${release.entity.name}`"
-			:title="release.url && `View scene on ${release.entity.name}`"
+			v-tooltip.bottom="release.url && `View release on ${release.entity.name}`"
+			:title="release.url && `View release on ${release.entity.name}`"
 			:href="release.url"
 			:class="{ upcoming: isAfter(release.date, new Date()) }"
 			target="_blank"

assets/css/_states.scss

@@ -18,6 +18,12 @@
     }
 }
 
+.nolink {
+	display: inline-block;
+	color: inherit;
+	text-decoration: none;
+}
+
 :focus {
     outline: none;
 }

assets/js/fragments.js

@@ -93,6 +93,7 @@ const releaseTagsFragment = `
 const releasePosterFragment = `
     poster: releasesPosterByReleaseId {
         media {
+			id
             index
             path
             thumbnail
@@ -112,6 +113,7 @@ const releasePosterFragment = `
 const releaseCoversFragment = `
     covers: releasesCovers {
         media {
+			id
             index
             path
             thumbnail
@@ -131,6 +133,7 @@ const releaseCoversFragment = `
 const releasePhotosFragment = `
     photos: releasesPhotos {
         media {
+			id
             index
             path
             thumbnail
@@ -150,6 +153,7 @@ const releasePhotosFragment = `
 const releaseTrailerFragment = `
     trailer: releasesTrailerByReleaseId {
         media {
+			id
             index
             path
             thumbnail
@@ -249,6 +253,29 @@ const releaseFragment = `
         slug
         url
     }
+	movies: moviesScenesBySceneId {
+	    movie {
+			id
+			title
+			slug
+			covers: moviesCoversByReleaseId {
+				media {
+					index
+					path
+					thumbnail
+					lazy
+					comment
+					sfw: sfwMedia {
+						id
+						thumbnail
+						lazy
+						path
+						comment
+					}
+				}
+			}
+		}
+	}
   }
 `;
 

assets/js/releases/actions.js

@@ -1,5 +1,5 @@
 import { graphql } from '../api';
-import { releasesFragment, releaseFragment } from '../fragments';
+import { releasesFragment, releaseFragment, releaseFields } from '../fragments';
 import { curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
@@ -56,7 +56,7 @@ function initReleasesActions(store, _router) {
 				connection: moviesConnection(
 					first: $limit
 					offset: $offset
-					orderBy: DATE_ASC
+					orderBy: DATE_DESC
 				) {
 					movies: nodes {
 						id
@@ -109,10 +109,83 @@ function initReleasesActions(store, _router) {
 		};
 	}
 
+	async function fetchMovieById({ _commit }, movieId) {
+		// const release = await get(`/releases/${releaseId}`);
+
+		const { movie } = await graphql(`
+			query Movie($movieId: Int!) {
+				movie(id: $movieId) {
+					id
+					title
+					slug
+					url
+					date
+					actors {
+						id
+						name
+						age
+						dateOfBirth
+						birthCountry: countryByBirthCountryAlpha2 {
+						  alpha2
+						  name
+						  alias
+						}
+						avatar: avatarMedia {
+							id
+							path
+							thumbnail
+							lazy
+						}
+					}
+					covers: moviesCoversByReleaseId {
+						media {
+							id
+							path
+							thumbnail
+						}
+					}
+					trailer: moviesTrailerByReleaseId {
+						media {
+							id
+							path
+						}
+					}
+					scenes: moviesScenes {
+						scene {
+							${releaseFields}
+						}
+					}
+					tags {
+						id
+						slug
+						name
+					}
+					entity {
+						id
+						name
+						slug
+						type
+						parent {
+							id
+							name
+							slug
+							type
+						}
+					}
+				}
+			}
+		`, {
+			movieId: Number(movieId),
+		});
+
+		return curateRelease(movie);
+	}
+
 	return {
 		fetchReleases,
 		fetchReleaseById,
 		fetchMovies,
+		fetchMovieById,
 	};
 }
 

assets/js/router.js

@@ -2,12 +2,13 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 import Home from '../components/home/home.vue';
-import Release from '../components/releases/release.vue';
+import Scene from '../components/releases/scene.vue';
+import Movie from '../components/releases/movie.vue';
 import Entity from '../components/entities/entity.vue';
 import Networks from '../components/networks/networks.vue';
 import Actor from '../components/actors/actor.vue';
 import Actors from '../components/actors/actors.vue';
-import Movies from '../components/movies/movies.vue';
+import Movies from '../components/releases/movies.vue';
 import Tag from '../components/tags/tag.vue';
 import Tags from '../components/tags/tags.vue';
 import Search from '../components/search/search.vue';
@@ -44,12 +45,12 @@ const routes = [
 	},
 	{
 		path: '/scene/:releaseId/:releaseSlug?',
-		component: Release,
+		component: Scene,
 		name: 'scene',
 	},
 	{
 		path: '/movie/:movieId/:movieSlug?',
-		component: Release,
+		component: Movie,
 		name: 'movie',
 	},
 	{