1.189.1

assets/components/dialog/dialog.vue

@@ -103,4 +103,13 @@ export default {
 	flex-grow: 1;
 	overflow: auto;
 }
+
+::v-deep(.dialog-actions) {
+	display: flex;
+	padding: .5rem 0;
+
+	&.right {
+		justify-content: flex-end;
+	}
+}
 </style>

assets/components/releases/banner.vue

@@ -33,8 +33,8 @@
 					v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
 					:src="getPath(release.teaser, 'thumbnail', { original: true })"
 					:alt="release.title"
-					:width="release.teaser.width"
+					:width="release.teaser.thumbnailWidth"
-					:height="release.teaser.height"
+					:height="release.teaser.thumbnailHeight"
 					loading="lazy"
 					class="item trailer"
 				>
@@ -68,8 +68,8 @@
 					<img
 						:src="getPath(cover, 'thumbnail')"
 						:style="{ 'background-image': getBgPath(cover, 'lazy') }"
-						:width="cover.width"
+						:width="cover.thumbnailWidth"
-						:height="cover.height"
+						:height="cover.thumbnailHeight"
 						class="item cover"
 						loading="lazy"
 						@load="$emit('load', $event)"
@@ -93,8 +93,8 @@
 						:src="getPath(photo, 'thumbnail')"
 						:style="{ 'background-image': `url('${getPath(photo, 'lazy')}` }"
 						:alt="`Photo ${photo.index + 1}`"
-						:width="photo.width"
+						:width="photo.thumbnailWidth"
-						:height="photo.height"
+						:height="photo.thumbnailHeight"
 						loading="lazy"
 						class="item"
 						@load="$emit('load', $event)"

assets/components/stashes/add-stash.vue

@@ -0,0 +1,50 @@
+<template>
+	<Dialog
+		title="Add stash"
+		@close="$emit('close', false)"
+	>
+		<form @submit.prevent="addStash">
+			<input
+				ref="name"
+				v-model="name"
+				type="input"
+				placeholder="Name"
+				class="input"
+			>
+
+			<div class="dialog-actions right">
+				<button
+					type="submit"
+					class="button button-primary"
+				>Add</button>
+			</div>
+		</form>
+	</Dialog>
+</template>
+
+<script>
+async function addStash() {
+	await this.$store.dispatch('createStash', {
+		name: this.name,
+	});
+
+	this.$emit('close', true);
+}
+
+function mounted() {
+	this.$refs.name.focus();
+}
+
+export default {
+	data() {
+		return {
+			name: null,
+		};
+	},
+	emits: ['close'],
+	mounted,
+	methods: {
+		addStash,
+	},
+};
+</script>

assets/components/stashes/stash.vue

@@ -118,6 +118,7 @@ export default {
 
 .header-section,
 .header-item {
+	height: 100%;
 	display: flex;
 	align-items: center;
 }
@@ -126,9 +127,13 @@ export default {
 	margin: 0 1rem 0 0;
 }
 
-.stash-public .icon {
+.stash-public {
+	cursor: pointer;
+
+	.icon {
 		margin: 0 .75rem 0 0;
 		cursor: pointer;
+	}
 }
 
 .stash-name,

assets/components/users/actor-preview.vue

@@ -24,8 +24,6 @@
 <script>
 async function unstashActor(actorId, stashId) {
 	await this.$store.dispatch('unstashActor', { actorId, stashId });
-
-	this.$emit('unstash');
 }
 
 export default {
@@ -63,7 +61,7 @@ export default {
 	justify-content: center;
 	width: 2rem;
 	height: 100%;
-	background: var(--profile);
+	border-right: solid 1px var(--shadow-hint);
 }
 
 .avatar-image {
@@ -74,7 +72,7 @@ export default {
 }
 
 .avatar-fallback {
-	fill: var(--lighten-weak);
+	fill: var(--shadow-weak);
 }
 
 .name {

assets/components/users/stash.vue

@@ -0,0 +1,177 @@
+<template>
+	<div class="stash">
+		<div class="stash-section stash-header">
+			<router-link
+				:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
+				class="stash-link nolink"
+			>
+				<h4 class="stash-name">{{ stash.name }}</h4>
+			</router-link>
+
+			<label
+				v-if="isMe"
+				v-tooltip="'Public'"
+				:class="{ public: stash.public }"
+				class="stash-public"
+			>
+				<Icon
+					v-show="stash.public"
+					icon="eye"
+				/>
+
+				<Icon
+					v-show="!stash.public"
+					icon="eye-blocked"
+				/>
+
+				<Toggle
+					:checked="stash.public"
+					@change="checked => publishStash(stash, checked)"
+				/>
+			</label>
+		</div>
+
+		<ul
+			v-if="stash.scenes?.length > 0"
+			class="stash-section stash-scenes nolist"
+		>
+			<li
+				v-for="{ scene } in stash.scenes"
+				:key="scene.id"
+				class="stash-scene"
+			>
+				<ScenePreview
+					:scene="scene"
+					:stash="stash"
+				/>
+			</li>
+		</ul>
+
+		<ul
+			v-if="stash.actors?.length > 0"
+			class="stash-section stash-actors nolist"
+		>
+			<li
+				v-for="{ actor } in stash.actors"
+				:key="actor.id"
+				class="stash-actor"
+			>
+				<ActorPreview
+					:actor="actor"
+					:stash="stash"
+				/>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import ActorPreview from './actor-preview.vue';
+import ScenePreview from './scene-preview.vue';
+import Toggle from '../form/toggle.vue';
+
+async function publishStash(stash, isPublic) {
+	await this.$store.dispatch('updateStash', {
+		stashId: stash.id,
+		stash: { public: isPublic },
+	});
+
+	this.$emit('publish', isPublic);
+}
+
+export default {
+	components: {
+		ActorPreview,
+		ScenePreview,
+		Toggle,
+	},
+	props: {
+		stash: {
+			type: Object,
+			default: null,
+		},
+		isMe: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['publish'],
+	methods: {
+		publishStash,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.stash {
+	min-width: 0;
+	height: 100%;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak);
+}
+
+.stash-section {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+
+	&:not(:last-child),
+	&.stash-header {
+		border-bottom: solid 1px var(--shadow-hint);
+	}
+}
+
+.stash-header {
+	justify-content: space-between;
+	padding: 0;
+}
+
+.stash-link {
+	flex-grow: 1;
+	display: inline-block;
+	text-decoration: none;
+}
+
+.stash-public {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+	cursor: pointer;
+
+	.icon {
+		fill: var(--shadow-strong);
+		margin: 0 .5rem 0 0;
+	}
+}
+
+.stash-name {
+	padding: .5rem;
+	margin: 0;
+	color: var(--shadow-strong);
+}
+
+.stash-actors,
+.stash-scenes {
+	display: flex;
+	overflow-x: auto;
+    grid-gap: .5rem;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+	}
+}
+
+.stash-scenes {
+	height: 8rem;
+}
+
+.stash-actor,
+.stash-scene {
+	height: 100%;
+	flex-shrink: 0;
+	font-size: 0;
+}
+
+</style>

assets/components/users/user.vue

@@ -17,82 +17,34 @@
 				<li
 					v-for="stash in user.stashes"
 					:key="stash.id"
-					class="stash"
 				>
-					<div class="stash-section stash-header">
+					<Stash
-						<router-link
+						:stash="stash"
-							:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
+						:is-me="isMe"
-							class="stash-link nolink"
+						@publish="() => fetchUser()"
-						>
+					/>
-							<h4 class="stash-name">{{ stash.name }}</h4>
+				</li>
-						</router-link>
 
-						<label
+				<li
 					v-if="isMe"
-							v-tooltip="'Public'"
+					class="stashes-add"
-							:class="{ public: stash.public }"
+					@click="showAddStash = true"
-							class="stash-public"
 				>
-							<Icon
+					<Icon icon="plus2" />
-								v-show="stash.public"
-								icon="eye"
-							/>
-
-							<Icon
-								v-show="!stash.public"
-								icon="eye-blocked"
-							/>
-
-							<Toggle
-								:checked="stash.public"
-								@change="checked => publishStash(stash, checked)"
-							/>
-						</label>
-					</div>
-
-					<ul
-						v-if="stash.scenes?.length > 0"
-						class="stash-section stash-scenes nolist"
-					>
-						<li
-							v-for="{ scene } in stash.scenes"
-							:key="scene.id"
-							class="stash-scene"
-						>
-							<ScenePreview
-								:scene="scene"
-								:stash="stash"
-								@unstash="fetchUser"
-							/>
-						</li>
-					</ul>
-
-					<ul
-						v-if="stash.actors?.length > 0"
-						class="stash-section stash-actors nolist"
-					>
-						<li
-							v-for="{ actor } in stash.actors"
-							:key="actor.id"
-							class="stash-actor"
-						>
-							<ActorPreview
-								:actor="actor"
-								:stash="stash"
-								@unstash="fetchUser"
-							/>
-						</li>
-					</ul>
 				</li>
 			</ul>
 		</section>
+
+		<AddStash
+			v-if="showAddStash"
+			@close="closeAddStash"
+		/>
 	</div>
 </template>
 
 <script>
-import ActorPreview from './actor-preview.vue';
+import Stash from './stash.vue';
-import ScenePreview from './scene-preview.vue';
+import AddStash from '../stashes/add-stash.vue';
-import Toggle from '../form/toggle.vue';
 
 async function fetchUser() {
 	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
@@ -101,13 +53,12 @@ async function fetchUser() {
 	this.pageTitle = this.user?.username;
 }
 
-async function publishStash(stash, isPublic) {
+async function closeAddStash(addedStash) {
-	await this.$store.dispatch('updateStash', {
+	this.showAddStash = false;
-		stashId: stash.id,
-		stash: { public: isPublic },
-	});
 
-	this.fetchUser();
+	if (addedStash) {
+		await this.fetchUser();
+	}
 }
 
 async function mounted() {
@@ -116,9 +67,8 @@ async function mounted() {
 
 export default {
 	components: {
-		ActorPreview,
+		AddStash,
-		ScenePreview,
+		Stash,
-		Toggle,
 	},
 	data() {
 		return {
@@ -127,12 +77,13 @@ export default {
 				: null,
 			isMe: false,
 			pageTitle: null,
+			showAddStash: false,
 		};
 	},
 	mounted,
 	methods: {
+		closeAddStash,
 		fetchUser,
-		publishStash,
 	},
 };
 </script>
@@ -159,85 +110,37 @@ export default {
 .stashes {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
+	grid-auto-rows: 15fr;
+	grid-gap: 1rem;
 }
 
 .heading {
 	color: var(--primary);
 }
 
-.stash {
+.stashes-add {
-	min-width: 0;
+	height: 100%;
-	background: var(--background);
-	margin: 0 0 1rem 0;
-	box-shadow: 0 0 3px var(--shadow-weak);
-}
-
-.stash-section {
 	display: flex;
 	align-items: center;
-	padding: .5rem;
+	justify-content: center;
+	background: var(--shadow-hint);
 
-	&:not(:last-child) {
+	.icon {
-		border-bottom: solid 1px var(--shadow-hint);
+		width: 1.5rem;
+		height: 1.5rem;
+		fill: var(--shadow-weak);
 	}
-}
 
-.stash-header {
+	&:hover {
-	justify-content: space-between;
+		background: var(--shadow-weak);
-	padding: 0;
-}
-
-.stash-link {
-	flex-grow: 1;
-	display: inline-block;
-	text-decoration: none;
-}
-
-.stash-public {
-	display: flex;
-	align-items: center;
-	padding: .5rem;
 		cursor: pointer;
 
 		.icon {
-		fill: var(--shadow-strong);
+			fill: var(--shadow);
-		margin: 0 .5rem 0 0;
 		}
-}
-
-.stash-name {
-	padding: .5rem;
-	margin: 0;
-	color: var(--shadow-strong);
-}
-
-.stash-actors,
-.stash-scenes {
-	display: flex;
-	overflow-x: auto;
-	scroll-behavior: smooth;
-	scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-        display: none;
 	}
 }
 
-.stash-scenes {
-	height: 8rem;
-    grid-gap: .5rem;
-}
-
-.stash-actors {
-	grid-gap: 1rem;
-}
-
-.stash-actor,
-.stash-scene {
-	height: 100%;
-	flex-shrink: 0;
-}
-
 @media(max-width: $breakpoint-kilo) {
 	.stashes {
 		grid-template-columns: 1fr;

assets/css/_inputs.scss

@@ -29,6 +29,7 @@
 	border: none;
 	background: none;
 	padding: .5rem;
+	font-size: .9rem;
 	font-weight: bold;
 
 	&:hover {

assets/img/icons/checkmark2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>checkmark2</title>
+<path d="M6.21 14.339l-6.217-6.119 3.084-3.035 3.133 3.083 6.713-6.607 3.084 3.035-9.797 9.643zM1.686 8.22l4.524 4.453 8.104-7.976-1.391-1.369-6.713 6.607-3.133-3.083-1.391 1.369z"></path>
+</svg>

assets/img/icons/minus.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>minus</title>
+<path d="M0 5h16v6h-16z"></path>
+</svg>

assets/img/icons/minus2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>minus2</title>
+<path d="M0 6.5v3c0 0.276 0.224 0.5 0.5 0.5h15c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5h-15c-0.276 0-0.5 0.224-0.5 0.5z"></path>
+</svg>

assets/img/icons/minus3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>minus3</title>
+<path d="M1 7h14v2h-14v-2z"></path>
+</svg>

assets/img/icons/plus.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>plus</title>
+<path d="M16 5h-5v-5h-6v5h-5v6h5v5h6v-5h5z"></path>
+</svg>

assets/img/icons/plus2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>plus2</title>
+<path d="M15.5 6h-5.5v-5.5c0-0.276-0.224-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5v5.5h-5.5c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h5.5v5.5c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5v-5.5h5.5c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5z"></path>
+</svg>

assets/img/icons/plus3.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>plus3</title>
+<path d="M15 7h-6v-6h-2v6h-6v2h6v6h2v-6h6z"></path>
+</svg>

assets/js/stashes/actions.js

@@ -67,6 +67,12 @@ function initStashesActions(store, _router) {
 		return curateStash(stash);
 	}
 
+	async function createStash(context, stash) {
+		const newStash = await post('/stashes', stash);
+
+		return newStash;
+	}
+
 	async function updateStash(context, { stashId, stash }) {
 		const newStash = await patch(`/stashes/${stashId}`, stash);
 
@@ -98,6 +104,7 @@ function initStashesActions(store, _router) {
 	}
 
 	return {
+		createStash,
 		fetchStash,
 		stashActor,
 		stashScene,

package-lock.json

@@ -1,11 +1,11 @@
 {
     "name": "traxxx",
-    "version": "1.189.0",
+    "version": "1.189.1",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
-            "version": "1.189.0",
+            "version": "1.189.1",
             "license": "ISC",
             "dependencies": {
                 "@casl/ability": "^5.2.2",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.189.0",
+    "version": "1.189.1",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {

src/stashes.js

@@ -2,6 +2,7 @@
 
 const knex = require('./knex');
 const { HttpError } = require('./errors');
+const slugify = require('./utils/slugify');
 
 function curateStash(stash) {
 	if (!stash) {
@@ -17,6 +18,17 @@ function curateStash(stash) {
 	return curatedStash;
 }
 
+function curateStashEntry(stash, user) {
+	const curatedStashEntry = {
+		user_id: user.id,
+		name: stash.name,
+		slug: slugify(stash.name),
+		public: false,
+	};
+
+	return curatedStashEntry;
+}
+
 async function fetchStash(stashId, sessionUser) {
 	if (!sessionUser) {
 		throw new HttpError('You are not authenthicated', 401);
@@ -36,6 +48,18 @@ async function fetchStash(stashId, sessionUser) {
 	return curateStash(stash);
 }
 
+async function createStash(newStash, sessionUser) {
+	if (!sessionUser) {
+		throw new HttpError('You are not authenthicated', 401);
+	}
+
+	const stash = await knex('stashes')
+		.insert(curateStashEntry(newStash, sessionUser))
+		.returning('*');
+
+	return curateStash(stash);
+}
+
 async function updateStash(stashId, newStash, sessionUser) {
 	if (!sessionUser) {
 		throw new HttpError('You are not authenthicated', 401);
@@ -123,6 +147,7 @@ async function unstashMovie(movieId, stashId, sessionUser) {
 }
 
 module.exports = {
+	createStash,
 	curateStash,
 	stashActor,
 	stashScene,

src/web/server.js

@@ -44,6 +44,7 @@ const {
 } = require('./tags');
 
 const {
+	createStash,
 	stashActor,
 	stashScene,
 	stashMovie,
@@ -84,6 +85,7 @@ async function initServer() {
 
 	router.post('/api/users', signup);
 
+	router.post('/api/stashes', createStash);
 	router.patch('/api/stashes/:stashId', updateStash);
 
 	router.post('/api/stashes/:stashId/actors', stashActor);

src/web/stashes.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const {
+	createStash,
 	stashActor,
 	stashScene,
 	stashMovie,
@@ -10,6 +11,12 @@ const {
 	updateStash,
 } = require('../stashes');
 
+async function createStashApi(req, res) {
+	const stash = await createStash(req.body, req.session.user);
+
+	res.send(stash);
+}
+
 async function updateStashApi(req, res) {
 	const stash = await updateStash(req.params.stashId, req.body, req.session.user);
 
@@ -53,6 +60,7 @@ async function unstashMovieApi(req, res) {
 }
 
 module.exports = {
+	createStash: createStashApi,
 	stashActor: stashActorApi,
 	stashScene: stashSceneApi,
 	stashMovie: stashMovieApi,