1.189.0

assets/components/actors/actor.vue

@@ -365,11 +365,7 @@
 					:available-actors="actor.actors"
 				/>
 
-				<Releases
-					:releases="releases"
-					@stash="fetchActor(false)"
-					@unstash="fetchActor(false)"
-				/>
+				<Releases :releases="releases" />
 
 				<Pagination
 					:items-total="totalCount"

assets/components/container/container.vue

@@ -150,7 +150,6 @@ export default {
 	flex-grow: 1;
 	overflow-y: auto;
 	overflow-x: hidden;
-	box-shadow: 0 0 3px var(--shadow-weak);
 	z-index: 1;
 }
 

assets/components/entities/entity.vue

@@ -99,11 +99,7 @@
 			/>
 
 			<div class="releases">
-				<Releases
-					:releases="entity.releases"
-					@stash="fetchEntity(false)"
-					@unstash="fetchEntity(false)"
-				/>
+				<Releases :releases="entity.releases" />
 
 				<Pagination
 					:items-total="totalCount"

assets/components/footer/footer.vue

@@ -16,6 +16,7 @@
 	font-size: .8rem;
 	font-weight: bold;
 	text-align: center;
+	box-shadow: inset -3px 0 3px var(--shadow-hint);
 }
 
 .segment {

assets/components/form/toggle.vue

@@ -0,0 +1,112 @@
+<template>
+	<label class="toggle-container noselect">
+		<input
+			:id="`toggle-${id}`"
+			:checked="checked"
+			:true-value="trueValue"
+			:false-value="falseValue"
+			:disabled="disabled"
+			type="checkbox"
+			class="toggle-input"
+			@change="$emit('change', $event.target.checked)"
+		>
+
+		<label
+			:for="`toggle-${id}`"
+			class="toggle"
+		/>
+	</label>
+</template>
+
+<script>
+export default {
+	props: {
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		trueValue: {
+			type: null,
+			default: true,
+		},
+		falseValue: {
+			type: null,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['change'],
+	data() {
+		return {
+			id: Math.floor(new Date().getTime() * Math.random()),
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.toggle-container {
+	display: inline-block;
+	cursor: pointer;
+
+	&.light {
+		.toggle {
+			background: var(--lighten-weak);
+		}
+
+		.toggle-input:checked + .toggle {
+			background: var(--lighten);
+		}
+	}
+}
+
+.toggle {
+	width: 2rem;
+	height: .9rem;
+	display: flex;
+	align-items: center;
+	position: relative;
+	background: var(--shadow-hint);
+	border-radius: 1rem;
+	cursor: pointer;
+
+	&::after {
+		content: '';
+		background-color: var(--background-light);
+		width: 1rem;
+		height: 1rem;
+		display: inline-block;
+		position: absolute;
+		left: 0;
+		border-radius: 50%;
+		box-shadow: 0 0 2px var(--darken-strong);
+		transition: background-color .2s ease, left .2s ease;
+	}
+}
+
+.toggle-input {
+	display: none;
+
+	&:checked + .toggle {
+		background: var(--primary-faded);
+
+		&::after {
+			background: var(--primary);
+			left: calc(100% - 1rem);
+		}
+	}
+
+	&[disabled] + .toggle {
+		background: var(--shadow-weak);
+
+		&::after {
+			background: var(--shadow);
+		}
+	}
+}
+</style>

assets/components/header/menu.vue

@@ -164,10 +164,10 @@ export default {
 .menu-username {
 	display: block;
 	font-weight: bold;
-	color: var(--shadow-strong);
+	color: var(--darken-strong);
 	font-size: .9rem;
 	padding: .75rem 1rem;
-	border-bottom: solid 1px var(--shadow-hint);
+	border-bottom: solid 1px var(--darken-hint);
 	text-align: center;
 	text-decoration: none;
 }

assets/components/home/home.vue

@@ -10,11 +10,7 @@
 				:content="$refs.content"
 			/>
 
-			<Releases
-				:releases="releases"
-				@stash="fetchReleases(false)"
-				@unstash="fetchReleases(false)"
-			/>
+			<Releases :releases="releases" />
 
 			<Pagination
 				v-if="totalCount > 0"

assets/components/releases/releases.vue

@@ -18,8 +18,6 @@
 					:release="release"
 					:referer="referer"
 					:index="index"
-					@stash="$emit('stash')"
-					@unstash="$emit('unstash')"
 				/>
 			</li>
 		</ul>
@@ -65,7 +63,6 @@ export default {
 			default: null,
 		},
 	},
-	emits: ['stash', 'unstash'],
 	computed: {
 		range,
 		sfw,

assets/components/releases/scene-tile.vue

@@ -42,14 +42,14 @@
 					><Icon icon="blocked" />No thumbnail available</div>
 
 					<Icon
-						v-show="release.isStashed"
+						v-show="stashed"
 						icon="heart7"
 						class="stash stashed"
 						@click.prevent.native="unstashScene"
 					/>
 
 					<Icon
-						v-show="release.isStashed === false"
+						v-show="stashed === false"
 						icon="heart8"
 						class="stash unstashed"
 						@click.prevent.native="stashScene"
@@ -148,21 +148,29 @@
 import Details from './tile-details.vue';
 
 async function stashScene() {
-	this.$store.dispatch('stashScene', {
+	this.stashed = true;
+
+	try {
+		await this.$store.dispatch('stashScene', {
 			sceneId: this.release.id,
 			stashId: this.$store.getters.favorites.id,
 		});
-
-	this.$emit('stash');
+	} catch (error) {
+		this.stashed = false;
+	}
 }
 
 async function unstashScene() {
+	this.stashed = false;
+
+	try {
 		this.$store.dispatch('unstashScene', {
 			sceneId: this.release.id,
 			stashId: this.$store.getters.favorites.id,
 		});
-
-	this.$emit('unstash');
+	} catch (error) {
+		this.stashed = true;
+	}
 }
 
 export default {
@@ -175,7 +183,11 @@ export default {
 			default: null,
 		},
 	},
-	emits: ['stash', 'unstash'],
+	data() {
+		return {
+			stashed: this.release.isStashed,
+		};
+	},
 	methods: {
 		stashScene,
 		unstashScene,

assets/components/stashes/stash.vue

@@ -6,11 +6,36 @@
 		<div class="stash-header">
 			<h2 class="stash-name">{{ stash.name }}</h2>
 
+			<span class="header-section">
+				<label
+					v-if="isMine"
+					v-tooltip="'Public'"
+					:class="{ public: stash.public }"
+					class="header-item stash-public"
+				>
+					<Icon
+						v-show="stash.public"
+						icon="eye"
+					/>
+
+					<Icon
+						v-show="!stash.public"
+						icon="eye-blocked"
+					/>
+
+					<Toggle
+						:checked="stash.public"
+						class="light"
+						@change="checked => publishStash(checked)"
+					/>
+				</label>
+
 				<router-link
 					v-if="stash.user"
 					:to="{ name: 'user', params: { username: stash.user.username } }"
-				class="stash-username nolink"
+					class="header-item stash-username nolink"
 				><Icon icon="user3" />{{ stash.user.username }}</router-link>
+			</span>
 		</div>
 
 		<div class="content-inner">
@@ -38,9 +63,20 @@
 <script>
 import Actor from '../actors/tile.vue';
 import Releases from '../releases/releases.vue';
+import Toggle from '../form/toggle.vue';
 
 async function fetchStash() {
 	this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
+	this.isMine = this.stash.user?.id === this.$store.state.auth.user?.id;
+}
+
+async function publishStash(isPublic) {
+	await this.$store.dispatch('updateStash', {
+		stashId: this.stash.id,
+		stash: { public: isPublic },
+	});
+
+	this.fetchStash();
 }
 
 async function mounted() {
@@ -51,15 +87,18 @@ export default {
 	components: {
 		Actor,
 		Releases,
+		Toggle,
 	},
 	data() {
 		return {
 			stash: null,
+			isMine: false,
 		};
 	},
 	mounted,
 	methods: {
 		fetchStash,
+		publishStash,
 	},
 };
 </script>
@@ -71,6 +110,26 @@ export default {
 	align-items: center;
 	background: var(--profile);
 	color: var(--text-light);
+
+	.icon {
+		fill: var(--text-light);
+		margin: -.1rem .5rem 0 0;
+	}
+}
+
+.header-section,
+.header-item {
+	display: flex;
+	align-items: center;
+}
+
+.header-item:not(:last-child) {
+	margin: 0 1rem 0 0;
+}
+
+.stash-public .icon {
+	margin: 0 .75rem 0 0;
+	cursor: pointer;
 }
 
 .stash-name,
@@ -80,11 +139,6 @@ export default {
 	padding: .5rem 1rem;
 	margin: 0;
 	font-weight: bold;
-
-	.icon {
-		fill: var(--text-light);
-		margin: -.1rem .5rem 0 0;
-	}
 }
 
 .stash-section:not(:last-child) {

assets/components/tags/tag.vue

@@ -49,11 +49,7 @@
 				:fetch-releases="fetchReleases"
 			/>
 
-			<Releases
-				:releases="releases"
-				@stash="fetchReleases(false)"
-				@unstash="fetchReleases(false)"
-			/>
+			<Releases :releases="releases" />
 
 			<Pagination
 				:items-total="totalCount"

assets/components/users/user.vue

@@ -19,13 +19,37 @@
 					:key="stash.id"
 					class="stash"
 				>
+					<div class="stash-section stash-header">
 						<router-link
 							:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
-						class="stash-link stash-section"
+							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"
@@ -68,12 +92,24 @@
 <script>
 import ActorPreview from './actor-preview.vue';
 import ScenePreview from './scene-preview.vue';
+import Toggle from '../form/toggle.vue';
 
 async function fetchUser() {
 	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
+	this.isMe = this.user.id === this.$store.state.auth.user?.id;
+
 	this.pageTitle = this.user?.username;
 }
 
+async function publishStash(stash, isPublic) {
+	await this.$store.dispatch('updateStash', {
+		stashId: stash.id,
+		stash: { public: isPublic },
+	});
+
+	this.fetchUser();
+}
+
 async function mounted() {
 	await this.fetchUser();
 }
@@ -82,23 +118,28 @@ export default {
 	components: {
 		ActorPreview,
 		ScenePreview,
+		Toggle,
 	},
 	data() {
 		return {
 			user: this.$route.params.username === this.$store.state.auth.user?.username
 				? this.$store.state.auth.user
 				: null,
+			isMe: false,
 			pageTitle: null,
 		};
 	},
 	mounted,
 	methods: {
 		fetchUser,
+		publishStash,
 	},
 };
 </script>
 
 <style lang="scss" scoped>
+@import 'breakpoints';
+
 .header {
 	padding: .5rem 1rem;
 	background: var(--profile);
@@ -131,17 +172,9 @@ export default {
 	box-shadow: 0 0 3px var(--shadow-weak);
 }
 
-.stash-link.stash-section {
-	display: block;
-	text-decoration: none;
-}
-
-.stash-name {
-	color: var(--shadow-strong);
-	margin: 0;
-}
-
 .stash-section {
+	display: flex;
+	align-items: center;
 	padding: .5rem;
 
 	&:not(:last-child) {
@@ -149,6 +182,34 @@ export default {
 	}
 }
 
+.stash-header {
+	justify-content: space-between;
+	padding: 0;
+}
+
+.stash-link.stash-section {
+	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 {
+	color: var(--shadow-strong);
+	padding: .5rem;
+	margin: 0;
+}
+
 .stash-actors,
 .stash-scenes {
 	display: flex;
@@ -174,4 +235,10 @@ export default {
 .stash-scene {
 	flex-shrink: 0;
 }
+
+@media(max-width: $breakpoint-kilo) {
+	.stashes {
+		grid-template-columns: 1fr;
+	}
+}
 </style>

assets/css/_theme.scss

@@ -92,7 +92,7 @@ $breakpoint4: 1500px;
     --background-dim: #181818;
     --background-soft: #111;
 
-    --profile: #222;
+    --profile: #000;
     --tile: #2a2a2a;
 
     --link: #dd6688;

assets/js/api.js

@@ -25,9 +25,9 @@ async function get(endpoint, query = {}) {
 	throw new Error(errorMsg);
 }
 
-async function post(endpoint, data) {
+async function post(endpoint, data, method = 'POST') {
 	const res = await fetch(`${config.api.url}${endpoint}`, {
-		method: 'POST',
+		method,
 		mode: 'cors',
 		headers: {
 			'Content-Type': 'application/json',
@@ -51,6 +51,14 @@ async function post(endpoint, data) {
 	throw new Error(errorMsg);
 }
 
+async function patch(endpoint, data) {
+	return post(endpoint, data, 'PATCH');
+}
+
+async function put(endpoint, data) {
+	return post(endpoint, data, 'PUT');
+}
+
 async function del(endpoint) {
 	const res = await fetch(`${config.api.url}${endpoint}`, {
 		method: 'DELETE',
@@ -97,4 +105,6 @@ export {
 	post,
 	del,
 	graphql,
+	patch,
+	put,
 };

assets/js/stashes/actions.js

@@ -1,4 +1,10 @@
-import { graphql, post, del } from '../api';
+import {
+	graphql,
+	post,
+	del,
+	patch,
+} from '../api';
+
 import { releaseFields } from '../fragments';
 import { curateStash } from '../curate';
 
@@ -61,6 +67,12 @@ function initStashesActions(store, _router) {
 		return curateStash(stash);
 	}
 
+	async function updateStash(context, { stashId, stash }) {
+		const newStash = await patch(`/stashes/${stashId}`, stash);
+
+		return newStash;
+	}
+
 	async function stashActor(context, { actorId, stashId }) {
 		await post(`/stashes/${stashId}/actors`, { actorId });
 	}
@@ -93,6 +105,7 @@ function initStashesActions(store, _router) {
 		unstashActor,
 		unstashScene,
 		unstashMovie,
+		updateStash,
 	};
 }
 

package-lock.json

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

package.json

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

src/stashes.js

@@ -29,11 +29,31 @@ async function fetchStash(stashId, sessionUser) {
 		})
 		.first();
 
+	if (!stash) {
+		throw new HttpError('You are not authorized to access this stash', 403);
+	}
+
+	return curateStash(stash);
+}
+
+async function updateStash(stashId, newStash, sessionUser) {
+	if (!sessionUser) {
+		throw new HttpError('You are not authenthicated', 401);
+	}
+
+	const stash = await knex('stashes')
+		.where({
+			id: stashId,
+			user_id: sessionUser.id,
+		})
+		.update(newStash)
+		.returning('*');
+
 	if (!stash) {
 		throw new HttpError('You are not authorized to modify this stash', 403);
 	}
 
-	return stash;
+	return curateStash(stash);
 }
 
 async function stashActor(actorId, stashId, sessionUser) {
@@ -110,4 +130,5 @@ module.exports = {
 	unstashScene,
 	unstashActor,
 	unstashMovie,
+	updateStash,
 };

src/web/server.js

@@ -50,6 +50,7 @@ const {
 	unstashActor,
 	unstashScene,
 	unstashMovie,
+	updateStash,
 } = require('./stashes');
 
 async function initServer() {
@@ -83,6 +84,8 @@ async function initServer() {
 
 	router.post('/api/users', signup);
 
+	router.patch('/api/stashes/:stashId', updateStash);
+
 	router.post('/api/stashes/:stashId/actors', stashActor);
 	router.post('/api/stashes/:stashId/scenes', stashScene);
 	router.post('/api/stashes/:stashId/movies', stashMovie);

src/web/stashes.js

@@ -7,8 +7,15 @@ const {
 	unstashActor,
 	unstashScene,
 	unstashMovie,
+	updateStash,
 } = require('../stashes');
 
+async function updateStashApi(req, res) {
+	const stash = await updateStash(req.params.stashId, req.body, req.session.user);
+
+	res.send(stash);
+}
+
 async function stashActorApi(req, res) {
 	await stashActor(req.body.actorId, req.params.stashId, req.session.user);
 
@@ -52,4 +59,5 @@ module.exports = {
 	unstashActor: unstashActorApi,
 	unstashScene: unstashSceneApi,
 	unstashMovie: unstashMovieApi,
+	updateStash: updateStashApi,
 };