Renamed chapters to clips. Fixed Vixen trailers.

assets/components/releases/clips.vue

@@ -0,0 +1,89 @@
+<template>
+	<ul class="clips nolist">
+		<li
+			v-for="clip in clips"
+			:key="`clip-${clip.id}`"
+			class="clip"
+		>
+			<a
+				v-if="clip.poster"
+				:href="`/media/${clip.poster.path}`"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="clip-poster-link"
+			>
+				<img
+					:src="`/media/${clip.poster.thumbnail}`"
+					class="clip-poster"
+				>
+			</a>
+
+			<div class="clip-info">
+				<div class="clip-header">
+					<h3 class="clip-title">{{ clip.title }}</h3>
+					<span
+						v-if="clip.duration"
+						class="clip-duration"
+					>{{ formatDuration(clip.duration) }}</span>
+				</div>
+
+				<p
+					v-if="clip.description"
+					class="clip-description"
+				>{{ clip.description }}</p>
+
+				<Tags :tags="clip.tags" />
+			</div>
+		</li>
+	</ul>
+</template>
+
+<script>
+import Tags from './tags.vue';
+
+export default {
+	components: {
+		Tags,
+	},
+	props: {
+		clips: {
+			type: Array,
+			default: () => [],
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.clip {
+	display: grid;
+	grid-template-columns: .25fr .75fr;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak);
+	margin: 0 0 .5rem 0;
+}
+
+.clip-poster {
+	width: 100%;
+	max-height: 100%;
+	object-fit: cover;
+	object-position: center;
+}
+
+.clip-info {
+	flex-grow: 1;
+	padding: 1rem 1rem .5rem 1rem;
+	overflow: hidden;
+}
+
+.clip-header {
+	display: flex;
+	justify-content: space-between;
+}
+
+.clip-title {
+	display: inline-block;
+	padding: 0;
+	margin: 0;
+}
+</style>

assets/components/releases/media.vue

@@ -105,20 +105,20 @@ function sfw() {
 }
 
 function photos() {
-	const photosWithChapterPosters = (this.release.photos || []).concat(this.release.chapters ? this.release.chapters.map(chapter => chapter.poster) : []);
+	const photosWithClipPosters = (this.release.photos || []).concat(this.release.clips ? this.release.clips.map(clip => clip.poster) : []);
 
 	if (this.release.trailer || this.release.teaser) {
 		// poster will be on trailer video
-		return photosWithChapterPosters;
+		return photosWithClipPosters;
 	}
 
 	if (this.release.poster) {
 		// no trailer, add poster to photos
-		return [this.release.poster].concat(this.release.photos).concat(photosWithChapterPosters);
+		return [this.release.poster].concat(this.release.photos).concat(photosWithClipPosters);
 	}
 
 	// no poster available
-	return photosWithChapterPosters;
+	return photosWithClipPosters;
 }
 
 export default {

assets/components/releases/scene-tile.vue

@@ -87,10 +87,17 @@
 			</span>
 
 			<div class="labels">
-				<span
-					v-if="release.shootId"
+				<router-link
+					v-if="release.shootId && release.studio"
+					:to="{ name: 'studio', params: { entitySlug: release.studio.slug } }"
 					:title="release.studio && release.studio.name"
-					class="shoot"
+					class="shoot nolink"
+				>{{ release.shootId }}</router-link>
+
+				<span
+					v-else-if="release.shootId"
+					:title="release.studio && release.studio.name"
+					class="shoot nolink"
 				>{{ release.shootId }}</span>
 
 				<ul

assets/components/releases/scene.vue

@@ -99,51 +99,6 @@
 				<p class="description">{{ release.description }}</p>
 			</div>
 
-			<ul
-				v-if="release.chapters && release.chapters.length > 0"
-				class="chapters row nolist"
-			>
-				<span class="row-label">Chapters</span>
-				<li
-					v-for="chapter in release.chapters"
-					:key="`chapter-${chapter.id}`"
-					class="chapter"
-				>
-					<a
-						v-if="chapter.poster"
-						:href="`/media/${chapter.poster.path}`"
-						target="_blank"
-						rel="noopener noreferrer"
-						class="chapter-poster-link"
-					>
-						<img
-							:src="`/media/${chapter.poster.thumbnail}`"
-							class="chapter-poster"
-						>
-					</a>
-
-					<div class="chapter-info">
-						<div class="chapter-header">
-							<h3 class="chapter-title">{{ chapter.title }}</h3>
-							<span
-								v-if="chapter.duration"
-								class="chapter-duration"
-							>{{ chapter.duration }}</span>
-						</div>
-
-						<p
-							v-if="chapter.description"
-							class="chapter-description"
-						>{{ chapter.description }}</p>
-
-						<ul class="nolist"><li
-							v-for="tag in chapter.tags"
-							:key="`chapter-tag-${tag.id}`"
-						>{{ tag.name }}</li></ul>
-					</div>
-				</li>
-			</ul>
-
 			<div class="row row-tidbits">
 				<div
 					v-if="release.duration"
@@ -151,14 +106,7 @@
 				>
 					<span class="row-label">Duration</span>
 
-					<div class="duration">
-						<span
-							v-if="release.duration >= 3600"
-							class="duration-segment"
-						>{{ Math.floor(release.duration / 3600).toString().padStart(2, '0') }}:</span>
-						<span class="duration-segment">{{ Math.floor((release.duration % 3600) / 60).toString().padStart(2, '0') }}:</span>
-						<span class="duration-segment">{{ (release.duration % 60).toString().padStart(2, '0') }}</span>
-					</div>
+					<div class="duration">{{ formatDuration(release.duration) }}</div>
 				</div>
 
 				<div
@@ -216,6 +164,15 @@
 				</div>
 			</div>
 
+			<div
+				v-if="release.clips && release.clips.length > 0"
+				class="row nolist"
+			>
+				<span class="row-label">Clips</span>
+
+				<Clips :clips="release.clips" />
+			</div>
+
 			<div
 				v-if="release.comment"
 				class="row"
@@ -241,6 +198,7 @@
 import Media from './media.vue';
 import Details from './details.vue';
 import Tags from './tags.vue';
+import Clips from './clips.vue';
 import Actor from '../actors/tile.vue';
 import Scroll from '../scroll/scroll.vue';
 import Expand from '../expand/expand.vue';
@@ -262,6 +220,7 @@ export default {
 		Media,
 		Scroll,
 		Expand,
+		Clips,
 		Tags,
 	},
 	data() {
@@ -346,14 +305,6 @@ export default {
 	margin: -.25rem 0 0 0;
 }
 
-.duration {
-    font-size: 0;
-}
-
-.duration-segment {
-    font-size: 1rem;
-}
-
 .actors {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
@@ -395,36 +346,6 @@ export default {
 	text-overflow: ellipsis;
 }
 
-.chapter {
-	display: flex;
-	background: var(--background);
-	box-shadow: 0 0 3px var(--shadow-weak);
-	margin: 0 0 .5rem 0;
-}
-
-.chapter-poster {
-	width: 12rem;
-	height: 100%;
-	object-fit: cover;
-	object-position: center;
-}
-
-.chapter-info {
-	flex-grow: 1;
-	padding: 1rem 1rem .5rem 1rem;
-}
-
-.chapter-header {
-	display: flex;
-	justify-content: space-between;
-}
-
-.chapter-title {
-	display: inline-block;
-	padding: 0;
-	margin: 0;
-}
-
 .flag {
 	height: 1rem;
 	margin: 0 0 -.15rem .1rem;

assets/js/curate.js

@@ -69,7 +69,7 @@ function curateRelease(release) {
 
 	if (release.scenes) curatedRelease.scenes = release.scenes.map(({ scene }) => curateRelease(scene));
 	if (release.movies) curatedRelease.movies = release.movies.map(({ movie }) => curateRelease(movie));
-	if (release.chapters) curatedRelease.chapters = release.chapters.map(chapter => curateRelease(chapter));
+	if (release.clips) curatedRelease.clips = release.clips.map(clip => curateRelease(clip));
 	if (release.photos) curatedRelease.photos = release.photos.map(({ media }) => media);
 	if (release.covers) curatedRelease.covers = release.covers.map(({ media }) => media);
 	if (release.trailer) curatedRelease.trailer = release.trailer.media;

assets/js/fragments.js

@@ -255,19 +255,19 @@ const releaseFragment = `
     ${releaseTrailerFragment}
     ${releaseTeaserFragment}
     ${siteFragment}
-	chapters {
+	clips {
 		id
 		title
 		description
 		duration
-		tags: chaptersTags {
+		tags: clipsTags {
 			tag {
 				id
 				name
 				slug
 			}
 		}
-		poster: chaptersPosterByChapterId {
+		poster: clipsPosterByClipId {
 			media {
 				index
 				path

assets/js/main.js

@@ -14,6 +14,20 @@ import Container from '../components/container/container.vue';
 import Icon from '../components/icon/icon.vue';
 import Footer from '../components/footer/footer.vue';
 
+function formatDuration(duration, forceHours) {
+	const hours = Math.floor(duration / 3600);
+	const minutes = Math.floor((duration % 3600) / 60);
+	const seconds = Math.floor(duration % 60);
+
+	const [formattedHours, formattedMinutes, formattedSeconds] = [hours, minutes, seconds].map(segment => segment.toString().padStart(2, '0'));
+
+	if (duration >= 3600 || forceHours) {
+		return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+	}
+
+	return `${formattedMinutes}:${formattedSeconds}`;
+}
+
 function formatDate(date, format = 'MMMM D, YYYY', precision = 'day') {
 	if (precision === 'year') {
 		const newFormat = format.match(/Y+/);
@@ -54,6 +68,7 @@ function init() {
 		},
 		methods: {
 			formatDate,
+			formatDuration,
 			isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB),
 			isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB),
 		},