Added chapters and shoot location. Added In The Crack.

assets/components/releases/media.vue

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

assets/components/releases/movies.vue

@@ -53,6 +53,7 @@ export default {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
 	grid-gap: 1rem;
+	padding: 1rem;
 }
 
 @media(max-width: $breakpoint) {

assets/components/releases/scene.vue

@@ -99,6 +99,51 @@
 				<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"
@@ -143,6 +188,32 @@
 					<span class="row-label">Shoot date</span>
 					{{ formatDate(release.productionDate, 'MMMM D, YYYY') }}
 				</div>
+
+				<div
+					v-if="release.productionLocation"
+					class="row-tidbit"
+				>
+					<span class="row-label">Location</span>
+					<span class="location">
+						<span
+							v-if="release.productionLocation.city"
+							class="location-segment"
+						>{{ release.productionLocation.city }}, </span>
+						<span
+							v-if="release.productionLocation.state"
+							class="location-segment"
+						>{{ release.productionLocation.state }}, </span>
+						<span
+							v-if="release.productionLocation.country"
+							class="location-segment"
+						>{{ release.productionLocation.country.alias || release.productionLocation.country.name }}
+							<img
+								class="flag"
+								:src="`/img/flags/${release.productionLocation.country.alpha2.toLowerCase()}.svg`"
+							>
+						</span>
+					</span>
+				</div>
 			</div>
 
 			<div
@@ -324,6 +395,41 @@ 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;
+}
+
 .link {
     display: inline-flex;
     color: var(--link);