Improved clip layout. Using format module for duration and time.

assets/components/releases/clips.vue

@@ -5,34 +5,38 @@
 			:key="`clip-${clip.id}`"
 			class="clip"
 		>
-			<a
+			<div class="clip-poster-container">
-				v-if="clip.poster"
+				<a
-				:href="`/media/${clip.poster.path}`"
+					v-if="clip.poster"
-				target="_blank"
+					:href="`/media/${clip.poster.path}`"
-				rel="noopener noreferrer"
+					target="_blank"
-				class="clip-poster-link"
+					rel="noopener noreferrer"
-			>
-				<img
-					:src="`/media/${clip.poster.thumbnail}`"
-					class="clip-poster"
 				>
-			</a>
+					<img
+						:src="`/media/${clip.poster.thumbnail}`"
+						class="clip-poster"
+					>
+				</a>
+
+				<span
+					v-if="clip.duration"
+					class="clip-duration"
+				>{{ formatDuration(clip.duration) }}</span>
+			</div>
 
 			<div class="clip-info">
-				<div class="clip-header">
+				<h3
-					<h3 class="clip-title">{{ clip.title }}</h3>
+					v-if="clip.title"
-					<span
+					class="clip-row clip-title"
-						v-if="clip.duration"
+					:title="clip.title"
-						class="clip-duration"
+				>{{ clip.title }}</h3>
-					>{{ formatDuration(clip.duration) }}</span>
-				</div>
 
-				<p
+				<p class="clip-row clip-description">{{ clip.description }}</p>
-					v-if="clip.description"
-					class="clip-description"
-				>{{ clip.description }}</p>
 
-				<Tags :tags="clip.tags" />
+				<Tags
+					:tags="clip.tags"
+					class="clip-row clip-tags"
+				/>
 			</div>
 		</li>
 	</ul>
@@ -55,35 +59,66 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.clip {
+@import 'breakpoints';
+
+.clips {
 	display: grid;
-	grid-template-columns: .25fr .75fr;
+	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+	grid-gap: 1rem;
+}
+
+.clip {
 	background: var(--background);
 	box-shadow: 0 0 3px var(--shadow-weak);
 	margin: 0 0 .5rem 0;
 }
 
+.clip-poster-container {
+	position: relative;
+	margin: 0 0 1rem 0;
+}
+
 .clip-poster {
 	width: 100%;
-	max-height: 100%;
+	height: 10rem;
 	object-fit: cover;
 	object-position: center;
 }
 
-.clip-info {
+.clip-duration {
-	flex-grow: 1;
+	color: var(--text-light);
-	padding: 1rem 1rem .5rem 1rem;
+	display: block;
-	overflow: hidden;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	padding: .5rem .5rem .75rem 1rem;
+	font-weight: bold;
+	text-shadow: 0 0 2px var(--darken-strong);
 }
 
-.clip-header {
+.clip-info {
-	display: flex;
+	padding: 0 1rem;
-	justify-content: space-between;
+}
+
+.clip-row {
+	margin: 0 0 .75rem 0;
 }
 
 .clip-title {
-	display: inline-block;
 	padding: 0;
-	margin: 0;
+	font-size: 1rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.clip-description {
+	line-height: 1.5;
+}
+
+@media(max-width: $breakpoint-micro) {
+	.clips {
+		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+	}
 }
 </style>

assets/components/releases/media.vue

@@ -105,7 +105,9 @@ function sfw() {
 }
 
 function photos() {
-	const photosWithClipPosters = (this.release.photos || []).concat(this.release.clips ? this.release.clips.map(clip => clip.poster) : []);
+	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 photosWithClipPosters = (this.release.photos || []).concat(uniqueClipPosters);
 
 	if (this.release.trailer || this.release.teaser) {
 		// poster will be on trailer video

assets/js/format.js

@@ -0,0 +1,29 @@
+import dayjs from 'dayjs';
+
+export 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}`;
+}
+
+export function formatDate(date, format = 'MMMM D, YYYY', precision = 'day') {
+	if (precision === 'year') {
+		const newFormat = format.match(/Y+/);
+		return dayjs(date).format(newFormat ? newFormat[0] : 'YYYY');
+	}
+
+	if (precision === 'month') {
+		const newFormat = format.match(/(M{1,4})|(Y{2,4})/g);
+		return dayjs(date).format(newFormat ? newFormat.join(' ') : 'MMMM YYYY');
+	}
+
+	return dayjs(date).format(format);
+}

assets/js/fragments.js

@@ -165,6 +165,7 @@ const releaseTrailerFragment = `
 const releaseTeaserFragment = `
     teaser: releasesTeaserByReleaseId {
         media {
+			id
             index
             path
             thumbnail
@@ -269,6 +270,7 @@ const releaseFragment = `
 		}
 		poster: clipsPosterByClipId {
 			media {
+				id
 				index
 				path
 				thumbnail
@@ -297,6 +299,7 @@ const releaseFragment = `
 			slug
 			covers: moviesCovers {
 				media {
+					id
 					index
 					path
 					thumbnail

assets/js/main.js

@@ -5,43 +5,16 @@ import dayjs from 'dayjs';
 
 import router from './router';
 import initStore from './store';
-
 import initUiObservers from './ui/observers';
 
+import { formatDate, formatDuration } from './format';
+
 import '../css/style.scss';
 
 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+/);
-		return dayjs(date).format(newFormat ? newFormat[0] : 'YYYY');
-	}
-
-	if (precision === 'month') {
-		const newFormat = format.match(/(M{1,4})|(Y{2,4})/g);
-		return dayjs(date).format(newFormat ? newFormat.join(' ') : 'MMMM YYYY');
-	}
-
-	return dayjs(date).format(format);
-}
-
 function init() {
 	const store = initStore(router);