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>