Refactored clips into chapters.

2021-02-27 00:37:22 +01:00
parent 0eba0461c9
commit bb20659934
115 changed files with 671 additions and 194 deletions
--- a/assets/components/releases/chapters.vue
+++ b/assets/components/releases/chapters.vue
@@ -0,0 +1,161 @@
+<template>
+	<ul class="chapters nolist">
+		<li
+			v-for="chapter in chapters"
+			:key="`chapter-${chapter.id}`"
+			class="chapter"
+		>
+			<a
+				v-if="chapter.poster"
+				:href="getPath(chapter.poster)"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<img
+					:src="getPath(chapter.poster, 'thumbnail')"
+					class="chapter-poster"
+				>
+			</a>
+
+			<span class="chapter-details">
+				<span
+					v-if="chapter.time"
+					v-tooltip="'Time in video'"
+					class="chapter-time"
+				><Icon icon="film3" /> {{ formatDuration(chapter.time) }}</span>
+
+				<span
+					v-if="chapter.duration"
+					v-tooltip="'Duration'"
+					class="chapter-duration"
+				><Icon icon="stopwatch" />{{ formatDuration(chapter.duration) }}</span>
+			</span>
+
+			<div class="chapter-info">
+				<h3
+					v-if="chapter.title"
+					class="chapter-row chapter-title"
+					:title="chapter.title"
+				>{{ chapter.title }}</h3>
+
+				<p
+					v-if="chapter.description"
+					class="chapter-row chapter-description"
+				>{{ chapter.description }}</p>
+
+				<Tags
+					:tags="chapter.tags"
+					class="chapter-row chapter-tags"
+				/>
+			</div>
+		</li>
+	</ul>
+</template>
+
+<script>
+import Tags from './tags.vue';
+
+export default {
+	components: {
+		Tags,
+	},
+	props: {
+		chapters: {
+			type: Array,
+			default: () => [],
+		},
+	},
+};
+</script>
+
+<style lang="scss">
+.chapter-tags.tags-container {
+	margin: 0 0 .5rem 0;
+
+	.tags {
+		padding: 2px 0 0 2px;
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.chapters {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+	grid-gap: 1rem;
+}
+
+.chapter {
+	display: flex;
+	flex-direction: column;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak);
+	margin: 0 0 .5rem 0;
+	font-size: 0;
+}
+
+.chapter-poster {
+	width: 100%;
+	height: 10rem;
+	object-fit: cover;
+	object-position: center;
+}
+
+.chapter-details {
+	height: 1.75rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 .5rem;
+	margin: 0 0 .75rem 0;
+	color: var(--text-light);
+	background: var(--profile);
+	font-size: .9rem;
+	font-weight: bold;
+
+	.icon {
+		fill: var(--text-light);
+		margin: -.1rem .5rem 0 0;
+	}
+}
+
+.chapter-duration,
+.chapter-time {
+	display: flex;
+	align-items: center;
+}
+
+.chapter-duration .icon {
+	/* narrower icon */
+	margin: -.1rem .3rem 0 0;
+}
+
+.chapter-info {
+	padding: 0 .5rem;
+	font-size: 1rem;
+}
+
+.chapter-row {
+	margin: 0 0 .5rem 0;
+}
+
+.chapter-title {
+	padding: 0;
+	font-size: 1rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.chapter-description {
+	line-height: 1.5;
+}
+
+@media(max-width: $breakpoint-micro) {
+	.chapters {
+		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+	}
+}
+</style>