From f0265c2f5dcb7aa626f729ffe0d7117398e039e6 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Fri, 19 Mar 2021 02:36:31 +0100
Subject: [PATCH] Added dedicated stash page. Using preview tiles for stashes
 on user page.

---
 assets/components/album/album.vue         |   2 +-
 assets/components/container/warning.vue   |   2 +-
 assets/components/releases/release.vue    |  16 +--
 assets/components/stashes/stash.vue       | 115 ++++++++++++++++++++++
 assets/components/tags/photos.vue         |   2 +-
 assets/components/users/actor-preview.vue |  87 ++++++++++++++++
 assets/components/users/scene-preview.vue | 108 ++++++++++++++++++++
 assets/components/users/user.vue          |  91 ++++++++++++-----
 assets/js/main.js                         |   4 +
 assets/js/router.js                       |   6 ++
 assets/js/stashes/actions.js              |  59 ++++++++++-
 assets/js/users/actions.js                |   2 +-
 migrations/20190325001339_releases.js     |  12 +++
 13 files changed, 470 insertions(+), 36 deletions(-)
 create mode 100644 assets/components/stashes/stash.vue
 create mode 100644 assets/components/users/actor-preview.vue
 create mode 100644 assets/components/users/scene-preview.vue

diff --git a/assets/components/album/album.vue b/assets/components/album/album.vue
index 543e12c6..0a1310da 100644
--- a/assets/components/album/album.vue
+++ b/assets/components/album/album.vue
@@ -27,7 +27,7 @@
 					>
 						<img
 							:src="getPath(item, 'thumbnail', { local })"
-							:style="{ 'background-image': `url('${getPath(item, 'lazy', { local })}')` }"
+							:style="{ 'background-image': getBgPath(item, 'lazy', { local }) }"
 							:width="item.thumbnailWidth"
 							:height="item.thumbnailHeight"
 							:title="item.title"
diff --git a/assets/components/container/warning.vue b/assets/components/container/warning.vue
index f6d09390..f4f217ca 100644
--- a/assets/components/container/warning.vue
+++ b/assets/components/container/warning.vue
@@ -10,7 +10,7 @@
 
 			<ul class="rules">
 				<li class="rule">You are at least 18 years old, and legally permitted to view adult material in your jurisdiction.</li>
-				<li class="rule">You do not regard erotic, sexual and pornographic material as obscene or offensive.</li>
+				<li class="rule">You do not regard erotic and frankly pornographic media as obscene or offensive.</li>
 				<li class="rule">You understand that most sexual scenarios depicted on this website are fictional, performed by professional actors for the purpose of entertainment, and not representative of real-life interactions.</li>
 			</ul>
 
diff --git a/assets/components/releases/release.vue b/assets/components/releases/release.vue
index 7a98c30e..220ace6c 100644
--- a/assets/components/releases/release.vue
+++ b/assets/components/releases/release.vue
@@ -55,14 +55,14 @@
 					v-show="me && isStashed"
 					icon="heart7"
 					class="stash stashed noselect"
-					@click="unstashRelease"
+					@click="unstashScene"
 				/>
 
 				<Icon
 					v-show="me && !isStashed"
 					icon="heart8"
 					class="stash unstashed noselect"
-					@click="stashRelease"
+					@click="stashScene"
 				/>
 			</div>
 
@@ -251,8 +251,8 @@ async function fetchRelease(scroll = true) {
 	}
 }
 
-async function stashRelease() {
-	this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashRelease', {
+async function stashScene() {
+	this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
 		sceneId: this.release.id,
 		movieId: this.release.id,
 		stashId: this.$store.getters.favorites.id,
@@ -261,8 +261,8 @@ async function stashRelease() {
 	this.fetchRelease(false);
 }
 
-async function unstashRelease() {
-	this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashRelease', {
+async function unstashScene() {
+	this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
 		sceneId: this.release.id,
 		movieId: this.release.id,
 		stashId: this.$store.getters.favorites.id,
@@ -323,8 +323,8 @@ export default {
 	mounted: fetchRelease,
 	methods: {
 		fetchRelease,
-		stashRelease,
-		unstashRelease,
+		stashScene,
+		unstashScene,
 	},
 };
 </script>
diff --git a/assets/components/stashes/stash.vue b/assets/components/stashes/stash.vue
new file mode 100644
index 00000000..0c173892
--- /dev/null
+++ b/assets/components/stashes/stash.vue
@@ -0,0 +1,115 @@
+<template>
+	<div
+		v-if="stash"
+		class="stash content"
+	>
+		<div class="stash-header">
+			<h2 class="stash-name">{{ stash.name }}</h2>
+
+			<router-link
+				v-if="stash.user"
+				:to="{ name: 'user', params: { username: stash.user.username } }"
+				class="stash-username nolink"
+			><Icon icon="user3" />{{ stash.user.username }}</router-link>
+		</div>
+
+		<div class="content-inner">
+			<ul
+				v-if="stash.scenes?.length > 0"
+				class="stash-section stash-scenes nolist"
+			>
+				<li
+					v-for="item in stash.scenes"
+					:key="item.id"
+				><Scene :release="item.scene" /></li>
+			</ul>
+
+			<ul
+				v-if="stash.actors?.length > 0"
+				class="stash-section stash-actors nolist"
+			>
+				<li
+					v-for="item in stash.actors"
+					:key="item.id"
+				><Actor :actor="item.actor" /></li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+import Actor from '../actors/tile.vue';
+import Scene from '../releases/scene-tile.vue';
+
+async function fetchStash() {
+	this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
+}
+
+async function mounted() {
+	this.fetchStash();
+}
+
+export default {
+	components: {
+		Actor,
+		Scene,
+	},
+	data() {
+		return {
+			stash: null,
+		};
+	},
+	mounted,
+	methods: {
+		fetchStash,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.stash-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--profile);
+	color: var(--text-light);
+}
+
+.stash-name,
+.stash-username {
+	display: inline-flex;
+	align-items: center;
+	padding: .5rem 1rem;
+	margin: 0;
+	font-weight: bold;
+
+	.icon {
+		fill: var(--text-light);
+		margin: -.1rem .5rem 0 0;
+	}
+}
+
+.stash-section {
+	padding: 1rem;
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-hint);
+	}
+}
+
+.stash-actors,
+.stash-scenes {
+    display: grid;
+    flex-grow: 1;
+    grid-gap: .5rem;
+	box-sizing: border-box;
+}
+
+.stash-actors {
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+}
+
+.stash-scenes {
+    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+}
+</style>
diff --git a/assets/components/tags/photos.vue b/assets/components/tags/photos.vue
index 12d91a0f..dbd1d1c7 100644
--- a/assets/components/tags/photos.vue
+++ b/assets/components/tags/photos.vue
@@ -11,7 +11,7 @@
 		>
 			<img
 				:src="getPath(photo, 'thumbnail', { local: true })"
-				:style="{ 'background-image': `url(${getPath(photo, 'lazy', { local: true })})` }"
+				:style="{ 'background-image': getBgPath(photo, 'lazy', { local: true }) }"
 				:alt="photo.comment"
 				:width="photo.thumbnailWidth"
 				:height="photo.thumbnailHeight"
diff --git a/assets/components/users/actor-preview.vue b/assets/components/users/actor-preview.vue
new file mode 100644
index 00000000..48f55f78
--- /dev/null
+++ b/assets/components/users/actor-preview.vue
@@ -0,0 +1,87 @@
+<template>
+	<router-link
+		:to="`/actor/${actor.id}/${actor.slug}`"
+		class="actor nolink"
+	>
+		<div class="avatar">
+			<img
+				v-if="actor.avatar"
+				:src="getPath(actor.avatar)"
+				class="avatar-image"
+			>
+
+			<Icon
+				v-else-if="actor.gender"
+				:icon="actor.gender"
+				class="avatar-fallback"
+			/>
+		</div>
+
+		<span class="name">{{ actor.name }}</span>
+	</router-link>
+</template>
+
+<script>
+async function unstashActor(actorId, stashId) {
+	await this.$store.dispatch('unstashActor', { actorId, stashId });
+
+	this.$emit('unstash');
+}
+
+export default {
+	props: {
+		actor: {
+			type: Object,
+			default: null,
+		},
+		stash: {
+			type: Object,
+			default: null,
+		},
+	},
+	methods: {
+		unstashActor,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.actor {
+	height: 2.5rem;
+	display: inline-flex;
+	align-items: center;
+	border: solid 1px var(--shadow-hint);
+
+	&:hover {
+		border: solid 1px var(--primary);
+	}
+}
+
+.avatar {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2rem;
+	height: 100%;
+	background: var(--profile);
+}
+
+.avatar-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: 50% 0;
+}
+
+.avatar-fallback {
+	fill: var(--lighten-weak);
+}
+
+.name {
+	display: inline-flex;
+	align-items: center;
+	height: 100%;
+	padding: 0 .5rem;
+	font-weight: bold;
+}
+</style>
diff --git a/assets/components/users/scene-preview.vue b/assets/components/users/scene-preview.vue
new file mode 100644
index 00000000..0ea6adf8
--- /dev/null
+++ b/assets/components/users/scene-preview.vue
@@ -0,0 +1,108 @@
+<template>
+	<a
+		:href="`/scene/${scene.id}/${scene.slug || ''}`"
+		target="_blank"
+		rel="noopener noreferrer"
+		class="scene nolink"
+	>
+		<img
+			:src="getPath(scene.poster, 'thumbnail')"
+			class="scene-poster"
+		>
+
+		<div class="scene-header">
+			<span class="scene-actors nolist">{{ scene.actors.map(actor => actor.name).join(', ') }}</span>
+		</div>
+
+		<div class="scene-footer">
+			<img
+				:src="`/img/logos/${scene.entity.parent.slug}/favicon_light.png`"
+				class="scene-favicon"
+			>
+
+			<span class="scene-title">{{ scene.title }}</span>
+		</div>
+	</a>
+</template>
+
+<script>
+export default {
+	props: {
+		scene: {
+			type: Object,
+			default: null,
+		},
+		stash: {
+			type: Object,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.scene {
+	width: 14rem;
+	height: 100%;
+	position: relative;
+	font-size: 0;
+}
+
+.scene-poster {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: 50% 0;
+}
+
+.scene-header,
+.scene-footer {
+	width: 100%;
+	height: 1.25rem;
+	display: flex;
+	align-items: center;
+	position: absolute;
+	left: 0;
+	background: var(--shadow-weak);
+	color: var(--text-light);
+	font-size: .7rem;
+	font-weight: bold;
+	overflow: hidden;
+}
+
+.scene-header {
+	top: 0;
+}
+
+.scene-footer {
+	bottom: 0;
+}
+
+.scene-title {
+	padding: .25rem .5rem;
+	text-shadow: 0 0 2px var(--shadow);
+}
+
+.scene-actors {
+	padding: 0 .5rem;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.scene-unstash {
+	fill: var(--lighten-strong);
+	padding: .25rem;
+	filter: drop-shadow(0 0 1px var(--shadow));
+
+	&:hover {
+		fill: var(--text-light);
+	}
+}
+
+.scene-favicon {
+	width: 1rem;
+	height: 1rem;
+	padding: .1rem 0 0 .25rem;
+}
+</style>
diff --git a/assets/components/users/user.vue b/assets/components/users/user.vue
index 22962bf9..5a5b2393 100644
--- a/assets/components/users/user.vue
+++ b/assets/components/users/user.vue
@@ -19,16 +19,28 @@
 					:key="stash.id"
 					class="stash"
 				>
-					<h4 class="stash-name">{{ stash.name }}</h4>
+					<router-link
+						:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
+						class="stash-link stash-section"
+					>
+						<h4 class="stash-name">{{ stash.name }}</h4>
+					</router-link>
 
 					<ul
 						v-if="stash.scenes?.length > 0"
 						class="stash-section stash-scenes nolist"
 					>
 						<li
-							v-for="item in stash.scenes"
-							:key="item.id"
-						><Scene :release="item.scene" /></li>
+							v-for="{ scene } in stash.scenes"
+							:key="scene.id"
+							class="stash-scene"
+						>
+							<ScenePreview
+								:scene="scene"
+								:stash="stash"
+								@unstash="fetchUser"
+							/>
+						</li>
 					</ul>
 
 					<ul
@@ -36,9 +48,16 @@
 						class="stash-section stash-actors nolist"
 					>
 						<li
-							v-for="item in stash.actors"
-							:key="item.id"
-						><Actor :actor="item.actor" /></li>
+							v-for="{ actor } in stash.actors"
+							:key="actor.id"
+							class="stash-actor"
+						>
+							<ActorPreview
+								:actor="actor"
+								:stash="stash"
+								@unstash="fetchUser"
+							/>
+						</li>
 					</ul>
 				</li>
 			</ul>
@@ -47,18 +66,22 @@
 </template>
 
 <script>
-import Actor from '../actors/tile.vue';
-import Scene from '../releases/scene-tile.vue';
+import ActorPreview from './actor-preview.vue';
+import ScenePreview from './scene-preview.vue';
 
-async function mounted() {
+async function fetchUser() {
 	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
 	this.pageTitle = this.user?.username;
 }
 
+async function mounted() {
+	await this.fetchUser();
+}
+
 export default {
 	components: {
-		Actor,
-		Scene,
+		ActorPreview,
+		ScenePreview,
 	},
 	data() {
 		return {
@@ -69,6 +92,9 @@ export default {
 		};
 	},
 	mounted,
+	methods: {
+		fetchUser,
+	},
 };
 </script>
 
@@ -89,25 +115,34 @@ export default {
 	margin: 0 0 1rem 0;
 }
 
+.stashes {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+}
+
 .heading {
 	color: var(--primary);
 }
 
 .stash {
-	width: 100%;
+	min-width: 0;
 	background: var(--background);
 	margin: 0 0 1rem 0;
 	box-shadow: 0 0 3px var(--shadow-weak);
 }
 
+.stash-link.stash-section {
+	display: block;
+	text-decoration: none;
+}
+
 .stash-name {
 	color: var(--shadow-strong);
-	padding: 1rem .5rem 0 .5rem;
 	margin: 0;
 }
 
 .stash-section {
-	padding: 1rem .5rem;
+	padding: .5rem;
 
 	&:not(:last-child) {
 		border-bottom: solid 1px var(--shadow-hint);
@@ -116,17 +151,27 @@ export default {
 
 .stash-actors,
 .stash-scenes {
-    display: grid;
-    flex-grow: 1;
-    grid-gap: .5rem;
-	box-sizing: border-box;
-}
+	display: flex;
+	overflow-x: auto;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
 
-.stash-actors {
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    &::-webkit-scrollbar {
+        display: none;
+	}
 }
 
 .stash-scenes {
-    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+	height: 8rem;
+    grid-gap: .5rem;
+}
+
+.stash-actors {
+	grid-gap: 1rem;
+}
+
+.stash-actor,
+.stash-scene {
+	flex-shrink: 0;
 }
 </style>
diff --git a/assets/js/main.js b/assets/js/main.js
index 2c1f7636..7a8749ca 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -58,6 +58,10 @@ async function init() {
 	}
 
 	function getPath(media, type, options) {
+		if (!media) {
+			return null;
+		}
+
 		const path = getBasePath(media, type, options);
 		const filename = getFilename(media, type, options);
 
diff --git a/assets/js/router.js b/assets/js/router.js
index 0c7d8a90..e1f3c8b4 100644
--- a/assets/js/router.js
+++ b/assets/js/router.js
@@ -12,6 +12,7 @@ import Actors from '../components/actors/actors.vue';
 import Movies from '../components/releases/movies.vue';
 import Tag from '../components/tags/tag.vue';
 import Tags from '../components/tags/tags.vue';
+import Stash from '../components/stashes/stash.vue';
 import Search from '../components/search/search.vue';
 import Stats from '../components/stats/stats.vue';
 import NotFound from '../components/errors/404.vue';
@@ -201,6 +202,11 @@ const routes = [
 		component: Tags,
 		name: 'tags',
 	},
+	{
+		path: '/stash/:stashId/:stashSlug?',
+		component: Stash,
+		name: 'stash',
+	},
 	{
 		path: '/search',
 		component: Search,
diff --git a/assets/js/stashes/actions.js b/assets/js/stashes/actions.js
index 16ab1a60..7f28dd38 100644
--- a/assets/js/stashes/actions.js
+++ b/assets/js/stashes/actions.js
@@ -1,6 +1,62 @@
-import { post, del } from '../api';
+import { graphql, post, del } from '../api';
+import { releaseFields } from '../fragments';
+import { curateStash } from '../curate';
 
 function initStashesActions(_store, _router) {
+	async function fetchStash(context, stashId) {
+		const { stash } = await graphql(`
+			query Stash(
+				$stashId: Int!
+			) {
+				stash(id: $stashId) {
+					id
+					name
+					slug
+					public
+					user {
+						id
+						username
+					}
+					actors: stashesActors {
+						comment
+						actor {
+							id
+							name
+							slug
+							gender
+							age
+							ageFromBirth
+							dateOfBirth
+							birthCity
+							birthState
+							birthCountry: countryByBirthCountryAlpha2 {
+							  alpha2
+							  name
+							  alias
+							}
+							avatar: avatarMedia {
+								id
+								path
+								thumbnail
+								lazy
+							}
+						}
+					}
+					scenes: stashesScenes {
+						comment
+						scene {
+							${releaseFields}
+						}
+					}
+				}
+			}
+		`, {
+			stashId: Number(stashId),
+		});
+
+		return curateStash(stash);
+	}
+
 	async function stashActor(context, { actorId, stashId }) {
 		await post(`/stashes/${stashId}/actors`, { actorId });
 	}
@@ -26,6 +82,7 @@ function initStashesActions(_store, _router) {
 	}
 
 	return {
+		fetchStash,
 		stashActor,
 		stashScene,
 		stashMovie,
diff --git a/assets/js/users/actions.js b/assets/js/users/actions.js
index fa3a074e..1fd5ec64 100644
--- a/assets/js/users/actions.js
+++ b/assets/js/users/actions.js
@@ -42,7 +42,7 @@ function initUsersActions(_store, _router) {
 								}
 							}
 						}
-						scenes: stashesScenes {
+						scenes: stashesScenes(first: 20) {
 							comment
 							scene {
 								${releaseFields}
diff --git a/migrations/20190325001339_releases.js b/migrations/20190325001339_releases.js
index 61f368f4..6903bbb5 100644
--- a/migrations/20190325001339_releases.js
+++ b/migrations/20190325001339_releases.js
@@ -1087,6 +1087,10 @@ exports.up = knex => Promise.resolve()
 		table.unique(['stash_id', 'scene_id']);
 
 		table.string('comment');
+
+		table.datetime('created_at')
+			.notNullable()
+			.defaultTo(knex.fn.now());
 	}))
 	.then(() => knex.schema.createTable('stashes_movies', (table) => {
 		table.integer('stash_id')
@@ -1104,6 +1108,10 @@ exports.up = knex => Promise.resolve()
 		table.unique(['stash_id', 'movie_id']);
 
 		table.string('comment');
+
+		table.datetime('created_at')
+			.notNullable()
+			.defaultTo(knex.fn.now());
 	}))
 	.then(() => knex.schema.createTable('stashes_actors', (table) => {
 		table.integer('stash_id')
@@ -1121,6 +1129,10 @@ exports.up = knex => Promise.resolve()
 		table.unique(['stash_id', 'actor_id']);
 
 		table.string('comment');
+
+		table.datetime('created_at')
+			.notNullable()
+			.defaultTo(knex.fn.now());
 	}))
 	// SEARCH
 	.then(() => { // eslint-disable-line arrow-body-style