From 398161b03bee76e22a6a8791e9aeae255d566873 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Mon, 15 Mar 2021 04:59:08 +0100
Subject: [PATCH] Added rudimentary timeline to display tag chapters.

---
 assets/components/releases/chapters.vue | 76 ++++++++++++++++++++++++-
 seeds/00_tags.js                        | 21 +++++++
 2 files changed, 96 insertions(+), 1 deletion(-)

diff --git a/assets/components/releases/chapters.vue b/assets/components/releases/chapters.vue
index 0322ec44..7ef596bc 100644
--- a/assets/components/releases/chapters.vue
+++ b/assets/components/releases/chapters.vue
@@ -1,5 +1,26 @@
 <template>
-	<ul class="chapters nolist">
+	<div
+		v-if="timeline"
+		class="timeline"
+	>
+		<ul class="timeline-items nolist">
+			<li
+				v-for="chapter in timeline"
+				:key="`chapter-${chapter.id}`"
+				:style="{ left: `${(chapter.time / duration) * 100}%` }"
+				:title="formatDuration(chapter.time)"
+				class="timeline-item"
+			><router-link
+				:to="`/tag/${chapter.tags[0].slug}`"
+				class="link"
+			>{{ chapter.tags[0]?.name || '&nbsp;' }}</router-link></li>
+		</ul>
+	</div>
+
+	<ul
+		v-else
+		class="chapters nolist"
+	>
 		<li
 			v-for="chapter in chapters"
 			:key="`chapter-${chapter.id}`"
@@ -55,6 +76,14 @@
 <script>
 import Tags from './tags.vue';
 
+function timeline() {
+	if (this.chapters.every(chapter => chapter.time)) {
+		return this.chapters.filter(chapter => chapter.tags?.length > 0);
+	}
+
+	return null;
+}
+
 export default {
 	components: {
 		Tags,
@@ -65,6 +94,16 @@ export default {
 			default: () => [],
 		},
 	},
+	data() {
+		const lastChapter = this.chapters[this.chapters.length - 1];
+
+		return {
+			duration: lastChapter.time + lastChapter.duration,
+		};
+	},
+	computed: {
+		timeline,
+	},
 };
 </script>
 
@@ -153,6 +192,41 @@ export default {
 	line-height: 1.5;
 }
 
+.timeline-items {
+	position: relative;
+	height: 5rem;
+	border-bottom: solid 1px var(--shadow-weak);
+}
+
+.timeline-item {
+	position: absolute;
+	bottom: -.25rem;
+	padding: .1rem .5rem;
+	border-radius: .6rem;
+	color: var(--primary);
+	background: var(--background);
+	transform: rotate(-60deg);
+	transform-origin: 0 50%;
+	box-shadow: 0 0 3px var(--shadow-weak);
+	font-size: .8rem;
+	font-weight: bold;
+
+	.link {
+		color: inherit;
+	}
+
+	&:before {
+		content: '';
+		display: inline-block;
+		width: 1rem;
+		height: 2px;
+		position: absolute;
+		left: calc(-1rem + 1px);
+		margin: .3rem .5rem 0 0;
+		background: var(--primary);
+	}
+}
+
 @media(max-width: $breakpoint-micro) {
 	.chapters {
 		grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
diff --git a/seeds/00_tags.js b/seeds/00_tags.js
index 4ee2f80b..9d274eea 100644
--- a/seeds/00_tags.js
+++ b/seeds/00_tags.js
@@ -169,6 +169,10 @@ const tags = [
 		group: 'oral',
 		priority: 6,
 	},
+	{
+		name: 'ass worship',
+		slug: 'ass-worship',
+	},
 	{
 		name: 'ball licking',
 		slug: 'ball-licking',
@@ -494,6 +498,10 @@ const tags = [
 		name: 'gag',
 		slug: 'gag',
 	},
+	{
+		name: 'gagging',
+		slug: 'gagging',
+	},
 	{
 		name: 'gangbang',
 		slug: 'gangbang',
@@ -785,6 +793,10 @@ const tags = [
 		slug: 'schoolgirl',
 		group: 'roleplay',
 	},
+	{
+		name: 'sex',
+		slug: 'sex',
+	},
 	{
 		name: 'shaved',
 		slug: 'shaved',
@@ -1670,6 +1682,10 @@ const aliases = [
 		name: 'prolapsing',
 		for: 'anal-prolapse',
 	},
+	{
+		name: 'pussy fingering',
+		for: 'fingering',
+	},
 	{
 		name: 'raven',
 		for: 'black-hair',
@@ -1777,6 +1793,11 @@ const aliases = [
 		for: 'mfm',
 		secondary: true,
 	},
+	{
+		name: 'spoon',
+		for: 'spooning',
+		secondary: true,
+	},
 	{
 		name: 'sex toy',
 		for: 'toys',