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

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

@@ -0,0 +1,171 @@
+<template>
+	<div class="tile">
+		<div class="movie">
+			<router-link
+				:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
+				class="cover"
+			>
+				<img
+					v-if="movie.covers[0]"
+					:src="`/media/${movie.covers[0].thumbnail}`"
+				>
+			</router-link>
+
+			<div class="info">
+				<router-link
+					:to="{ name: 'movie', params: { movieId: movie.id, movieSlug: movie.slug } }"
+					class="title-link"
+				>
+					<h3 class="title">{{ movie.title }}</h3>
+				</router-link>
+
+				<ul
+					class="actors nolist"
+					:title="movie.actors.map(actor => actor.name).join(', ')"
+				>
+					<li
+						v-for="actor in movie.actors"
+						:key="`tag-${movie.id}-${actor.id}`"
+						class="actor"
+					><router-link
+						:to="`/actor/${actor.id}/${actor.slug}`"
+						class="actor-link"
+					>{{ actor.name }}</router-link></li>
+				</ul>
+
+				<ul
+					class="tags nolist"
+					:title="movie.tags.map(tag => tag.name).join(', ')"
+				>
+					<li
+						v-for="tag in movie.tags"
+						:key="`tag-${movie.id}-${tag.id}`"
+						class="tag"
+					><router-link
+						:to="`/tag/${tag.slug}`"
+						class="tag-link"
+					>{{ tag.name }}</router-link></li>
+				</ul>
+			</div>
+		</div>
+
+		<Details :release="movie" />
+	</div>
+</template>
+
+<script>
+import Details from './tile-details.vue';
+
+export default {
+	components: {
+		Details,
+	},
+	props: {
+		movie: {
+			type: Object,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.tile {
+	display: flex;
+	flex-direction: column;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--darken-weak);
+	font-size: 0;
+}
+
+.movie {
+	display: flex;
+}
+
+.title-link {
+	color: var(--text);
+	text-decoration: none;
+}
+
+.cover {
+	height: 16rem;
+	box-shadow: 0 0 3px var(--darken-weak);
+
+	img {
+		height: 100%;
+		max-width: 12rem;
+		object-fit: cover;
+		object-position: center ;
+	}
+}
+
+.info {
+	flex-grow: 1;
+	overflow: hidden;
+}
+
+.title {
+	box-sizing: border-box;
+	padding: 1rem;
+	margin: 0;
+	font-size: 1rem;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.actors {
+	padding: 0 1rem;
+	margin: 0 0 1rem 0;
+	line-height: 1.5;
+}
+
+.actor:not(:last-child)::after {
+	content: ',';
+	margin: 0 .25rem 0 0;
+	font-size: 1rem;
+}
+
+.actor-link {
+	font-size: 1rem;
+	color: var(--link);
+	text-decoration: none;
+
+	&:hover {
+		color: var(--primary);
+	}
+}
+
+.tags {
+	padding: .2rem 1rem 0 1rem;
+	height: 1.75rem;
+	line-height: 2;
+	overflow: hidden;
+}
+
+.tag {
+	margin: 0 0 .5rem 0;
+}
+
+.tag-link {
+	background: var(--background);
+	font-size: .75rem;
+	padding: .25rem .5rem;
+	color: var(--shadow);
+	font-weight: bold;
+	text-decoration: none;
+	box-shadow: 0 0 3px var(--shadow-weak);
+
+	&:hover {
+		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

@@ -0,0 +1,57 @@
+<template>
+	<div class="movies">
+		<div class="tiles">
+			<MovieTile
+				v-for="movie in movies"
+				:key="`movie-${movie.id}`"
+				:movie="movie"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import MovieTile from './movie-tile.vue';
+
+async function mounted() {
+	const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
+		limit: 30,
+	});
+
+	this.movies = movies;
+	this.totalCount = totalCount;
+}
+
+export default {
+	components: {
+		MovieTile,
+	},
+	data() {
+		return {
+			movies: [],
+			totalCount: 0,
+		};
+	},
+	mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.movies {
+    padding: 1rem;
+}
+
+.tiles {
+	display: grid;
+	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
-					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"
+				v-if="release.movies && release.movies.length > 0"
+				class="row"
 			>
-				<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"