Added secondary stash button, centralized bookmark (heart) component.

components/actors/tile.vue

@@ -28,18 +28,13 @@
 				>
 			</Link>
 
-			<Icon
+			<Heart
-				v-show="favorited"
+				domain="actors"
-				icon="heart7"
+				:item="actor"
-				class="heart favorited"
+				:show-secondary="false"
-				@click.native.stop="unstash"
+				class="light tiled"
-			/>
+				@stashed="(stash) => { favorited = stash.isPrimary ? true : favorited; }"
-
+				@unstashed="(stash) => { favorited = stash.isPrimary ? false : favorited; }"
-			<Icon
-				v-show="!favorited && user"
-				icon="heart8"
-				class="heart"
-				@click.native.stop="stash"
 			/>
 		</div>
 
@@ -79,9 +74,8 @@
 import { ref, inject } from 'vue';
 
 import { formatDate } from '#/utils/format.js';
-import { post, del } from '#/src/api.js';
-import events from '#/src/events.js';
 
+import Heart from '#/components/stashes/heart.vue';
 import Gender from './gender.vue';
 
 const props = defineProps({
@@ -95,49 +89,7 @@ const pageContext = inject('pageContext');
 const { user } = pageContext;
 const pageStash = pageContext.pageProps.stash;
 
-// console.log(props.actor);
-
 const favorited = ref(props.actor.stashes?.some((sceneStash) => sceneStash.isPrimary) || false);
-
-async function stash() {
-	try {
-		favorited.value = true;
-		await post(`/stashes/${user.primaryStash.id}/actors`, { actorId: props.actor.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `${props.actor.name} stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash ${props.actor.name} to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-		await del(`/stashes/${user.primaryStash.id}/actors/${props.actor.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `${props.actor.name} unstashed from ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = true;
-
-		console.error(error);
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to unstash ${props.actor.name} from ${user.primaryStash.name}`,
-		});
-	}
-}
 </script>
 
 <style scoped>
@@ -157,6 +109,10 @@ async function unstash() {
 		.name {
 			color: var(--primary);
 		}
+
+		:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
+			fill: var(--text-light);
+		}
 	}
 
 	&.unstashed {
@@ -205,26 +161,6 @@ async function unstash() {
 	opacity: .1;
 }
 
-.icon.heart {
-	width: 2rem;
-	height: 1.5rem;
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: .5rem .5rem 1rem 1rem;
-	fill: var(--highlight-strong-10);
-	filter: drop-shadow(0 0 3px var(--shadow));
-
-	&:hover {
-		cursor: pointer;
-		fill: var(--primary);
-	}
-
-	&.favorited {
-		fill: var(--primary);
-	}
-}
-
 .details {
 	width: 100%;
 	height: 1.5rem;

components/movies/tile.vue

@@ -26,18 +26,13 @@
 				>
 			</a>
 
-			<Icon
+			<Heart
-				v-show="favorited"
+				domain="movies"
-				icon="heart7"
+				:item="movie"
-				class="heart favorited"
+				:show-secondary="false"
-				@click.native.stop="unstash"
+				class="light tiled"
-			/>
+				@stashed="(stash) => { favorited = stash.isPrimary ? true : favorited; }"
-
+				@unstashed="(stash) => { favorited = stash.isPrimary ? false : favorited; }"
-			<Icon
-				v-show="!favorited && user"
-				icon="heart8"
-				class="heart"
-				@click.native.stop="stash"
 			/>
 		</div>
 
@@ -111,9 +106,7 @@
 import { ref, inject } from 'vue';
 import { format } from 'date-fns';
 
-import { post, del } from '#/src/api.js';
+import Heart from '#/components/stashes/heart.vue';
-import events from '#/src/events.js';
-import ellipsis from '#/utils/ellipsis.js';
 
 const props = defineProps({
 	movie: {
@@ -127,51 +120,8 @@ const user = pageContext.user;
 const pageStash = pageContext.pageProps.stash;
 
 const currentYear = new Date().getFullYear();
-const fbCutoff = 20;
 
 const favorited = ref(props.movie.stashes.some((sceneStash) => sceneStash.isPrimary));
-
-async function stash() {
-	try {
-		favorited.value = true;
-
-		await post(`/stashes/${user.primaryStash.id}/movies`, { movieId: props.movie.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `"${ellipsis(props.movie.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash "${ellipsis(props.movie.title, fbCutoff)}" to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-
-		await del(`/stashes/${user.primaryStash.id}/movies/${props.movie.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `"${ellipsis(props.movie.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = true;
-
-		console.error(error);
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to unstash "${ellipsis(props.movie.title, fbCutoff)}" from ${user.primaryStash.name}`,
-		});
-	}
-}
 </script>
 
 <style scoped>
@@ -186,7 +136,7 @@ async function unstash() {
 	&:hover {
 		box-shadow: 0 0 3px var(--shadow-weak-20);
 
-		.heart {
+		:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
 			fill: var(--text-light);
 		}
 	}

components/scenes/tile.vue

@@ -27,18 +27,13 @@
 				/>
 			</Link>
 
-			<Icon
+			<Heart
-				v-show="favorited"
+				domain="scenes"
-				icon="heart7"
+				:item="scene"
-				class="heart favorited"
+				:show-secondary="false"
-				@click.native.stop="unstash"
+				class="light tiled"
-			/>
+				@stashed="(stash) => { favorited = stash.isPrimary ? true : favorited; }"
-
+				@unstashed="(stash) => { favorited = stash.isPrimary ? false : favorited; }"
-			<Icon
-				v-show="!favorited && user"
-				icon="heart8"
-				class="heart"
-				@click.native.stop="stash"
 			/>
 
 			<span
@@ -117,12 +112,9 @@
 import { ref, inject } from 'vue';
 import { format } from 'date-fns';
 
-import { post, del } from '#/src/api.js';
-import events from '#/src/events.js';
 import getPath from '#/src/get-path.js';
-import ellipsis from '#/utils/ellipsis.js';
 
-import Icon from '../icon/icon.vue';
+import Heart from '#/components/stashes/heart.vue';
 
 const props = defineProps({
 	scene: {
@@ -136,49 +128,6 @@ const user = pageContext.user;
 const pageStash = pageContext.pageProps.stash;
 
 const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.isPrimary));
-const fbCutoff = 20;
-
-async function stash() {
-	try {
-		favorited.value = true;
-
-		await post(`/stashes/${user.primaryStash.id}/scenes`, { sceneId: props.scene.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `"${ellipsis(props.scene.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash "${ellipsis(props.scene.title, fbCutoff)}" to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-
-		await del(`/stashes/${user.primaryStash.id}/scenes/${props.scene.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `"${ellipsis(props.scene.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = true;
-
-		console.error(error);
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to unstash "${ellipsis(props.scene.title, fbCutoff)}" from ${user.primaryStash.name}`,
-		});
-	}
-}
 </script>
 
 <style scoped>
@@ -192,7 +141,7 @@ async function unstash() {
 	&:hover {
 		box-shadow: 0 0 3px var(--shadow-weak-20);
 
-		.heart {
+		:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
 			fill: var(--text-light);
 		}
 	}
@@ -233,26 +182,6 @@ async function unstash() {
 	background-position: center;
 }
 
-.icon.heart {
-	width: 2rem;
-	height: 1.5rem;
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: .5rem .5rem 1rem 1rem;
-	fill: var(--highlight-strong-10);
-	filter: drop-shadow(0 0 3px var(--shadow));
-
-	&:hover {
-		cursor: pointer;
-		fill: var(--primary);
-	}
-
-	&.favorited {
-		fill: var(--primary);
-	}
-}
-
 .new {
 	display: flex;
 	flex-direction: row-reverse;

components/stashes/heart.vue

@@ -0,0 +1,186 @@
+<template>
+	<div
+		v-if="user"
+		class="bookmarks"
+	>
+		<VDropdown v-if="showSecondary">
+			<Icon
+				icon="folder-heart"
+				class="heart noselect"
+				:class="{ favorited: itemStashes.some((itemStash) => !itemStash.isPrimary) }"
+			/>
+
+			<template #popper>
+				<ul class="stash-menu nolist">
+					<li
+						v-for="userStash in user.stashes"
+						:key="`stash-${userStash.id}`"
+						class="menu-item"
+					>
+						<label class="menu-stash">
+							<Checkbox
+								:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
+								@change="(checked) => checked ? stashItem(userStash) : unstashItem(userStash)"
+							/>{{ userStash.name }}
+						</label>
+					</li>
+				</ul>
+			</template>
+		</VDropdown>
+
+		<Icon
+			v-if="itemStashes.some((itemStash) => itemStash.isPrimary)"
+			icon="heart7"
+			class="heart favorited noselect"
+			@click.native.stop="unstashItem(user.primaryStash)"
+		/>
+
+		<Icon
+			v-else
+			icon="heart8"
+			class="heart noselect"
+			@click.native.stop="stashItem(user.primaryStash)"
+		/>
+	</div>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+
+import { post, del } from '#/src/api.js';
+import ellipsis from '#/utils/ellipsis.js';
+
+import Icon from '#/components/icon/icon.vue';
+import Checkbox from '#/components/form/checkbox.vue';
+
+const props = defineProps({
+	domain: {
+		type: String,
+		default: 'scenes',
+	},
+	item: {
+		type: Object,
+		default: null,
+	},
+	showSecondary: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+const emit = defineEmits(['stashed', 'unstashed']);
+
+const { user } = inject('pageContext');
+
+const itemStashes = ref(props.item.stashes);
+
+const done = ref(true);
+const feedbackCutoff = 20;
+
+const itemKeys = {
+	scenes: 'sceneId',
+	actors: 'actorId',
+	movies: 'movieId',
+};
+
+async function stashItem(stash) {
+	if (!done.value) {
+		return;
+	}
+
+	const stashState = itemStashes.value;
+
+	done.value = false;
+	itemStashes.value = itemStashes.value.concat(stash);
+
+	try {
+		await post(`/stashes/${stash.id}/${props.domain}`, { [itemKeys[props.domain]]: props.item.id }, {
+			successFeedback: `"${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" stashed to ${stash.name}`,
+			errorFeedback: `Failed to stash "${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" to ${stash.name}`,
+		});
+
+		emit('stashed', stash);
+	} catch (error) {
+		itemStashes.value = stashState;
+	}
+
+	done.value = true;
+}
+
+async function unstashItem(stash) {
+	if (!done.value) {
+		return;
+	}
+
+	const stashState = itemStashes.value;
+
+	done.value = false;
+	itemStashes.value = itemStashes.value.filter((itemStash) => itemStash.id !== stash.id);
+
+	try {
+		await del(`/stashes/${stash.id}/${props.domain}/${props.item.id}`, {
+			undoFeedback: `"${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" unstashed from ${stash.name}`,
+			errorFeedback: `Failed to unstash "${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" from ${stash.name}`,
+		});
+
+		emit('unstashed', stash);
+	} catch (error) {
+		itemStashes.value = stashState;
+	}
+
+	done.value = true;
+}
+</script>
+
+<style scoped>
+.bookmarks {
+	display: flex;
+
+	.icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		padding: .5rem .5rem;
+		fill: var(--shadow);
+	}
+
+	&.light .icon {
+		fill: var(--highlight);
+	}
+
+	&.tiled {
+		position: absolute;
+		top: 0;
+		right: 0;
+
+		.icon {
+			fill: var(--highlight-strong-20);
+			filter: drop-shadow(0 0 3px var(--shadow-strong-10));
+		}
+	}
+
+	.icon.heart:hover,
+	.icon.heart.favorited {
+		cursor: pointer;
+		fill: var(--primary);
+	}
+}
+
+.menu-item {
+	display: block;
+}
+
+.menu-stash {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+
+	&:hover {
+		cursor: pointer;
+		color: var(--primary);
+	}
+
+	.check-container {
+		margin-right: .5rem;
+	}
+}
+</style>

config/default.cjs

@@ -67,7 +67,11 @@ module.exports = {
 	stashes: {
 		nameLength: [2, 24],
 		namePattern: /^[a-zA-Z0-9!?$&\s_-]+$/,
-		viewRefreshCooldown: 60, // minutes
+		viewRefreshCron: '* * * * *', // every minute
+		viewRefreshCooldowns: {
+			actors: 60, // minutes
+			stashes: 1,
+		},
 	},
 	media: {
 		path: './media',

package-lock.json

@@ -24,6 +24,7 @@
         "config": "^3.3.9",
         "connect-redis": "^7.1.1",
         "convert": "^4.14.1",
+        "cron": "^3.1.6",
         "cross-env": "^7.0.3",
         "date-fns": "^3.0.0",
         "error-stack-parser": "^2.1.4",
@@ -3475,6 +3476,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@types/luxon": {
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.8.tgz",
+      "integrity": "sha512-jYvz8UMLDgy3a5SkGJne8H7VA7zPV2Lwohjx0V8V31+SqAjNmurWMkk9cQhfvlcnXWudBpK9xPM1n4rljOcHYQ=="
+    },
     "node_modules/@types/triple-beam": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz",
@@ -4656,6 +4662,15 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "node_modules/cron": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/cron/-/cron-3.1.6.tgz",
+      "integrity": "sha512-cvFiQCeVzsA+QPM6fhjBtlKGij7tLLISnTSvFxVdnFGLdz+ZdXN37kNe0i2gefmdD17XuZA6n2uPVwzl4FxW/w==",
+      "dependencies": {
+        "@types/luxon": "~3.3.0",
+        "luxon": "~3.4.0"
+      }
+    },
     "node_modules/cross-env": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -7060,6 +7075,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/luxon": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
+      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/m3u8-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.1.0.tgz",
@@ -12679,6 +12702,11 @@
       "dev": true,
       "peer": true
     },
+    "@types/luxon": {
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.3.8.tgz",
+      "integrity": "sha512-jYvz8UMLDgy3a5SkGJne8H7VA7zPV2Lwohjx0V8V31+SqAjNmurWMkk9cQhfvlcnXWudBpK9xPM1n4rljOcHYQ=="
+    },
     "@types/triple-beam": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz",
@@ -13532,6 +13560,15 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "cron": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/cron/-/cron-3.1.6.tgz",
+      "integrity": "sha512-cvFiQCeVzsA+QPM6fhjBtlKGij7tLLISnTSvFxVdnFGLdz+ZdXN37kNe0i2gefmdD17XuZA6n2uPVwzl4FxW/w==",
+      "requires": {
+        "@types/luxon": "~3.3.0",
+        "luxon": "~3.4.0"
+      }
+    },
     "cross-env": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -15294,6 +15331,11 @@
         "yallist": "^3.0.2"
       }
     },
+    "luxon": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
+      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA=="
+    },
     "m3u8-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.1.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "config": "^3.3.9",
     "connect-redis": "^7.1.1",
     "convert": "^4.14.1",
+    "cron": "^3.1.6",
     "cross-env": "^7.0.3",
     "date-fns": "^3.0.0",
     "error-stack-parser": "^2.1.4",

pages/actors/@actorId/+Page.vue

@@ -25,18 +25,10 @@
 				</span>
 			</li>
 
-			<Icon
+			<Heart
-				v-show="favorited"
+				domain="actors"
-				icon="heart7"
+				:item="actor"
-				class="heart favorited"
+				class="light"
-				@click.native.stop="unstash"
-			/>
-
-			<Icon
-				v-show="!favorited && user"
-				icon="heart8"
-				class="heart"
-				@click.native.stop="stash"
 			/>
 		</div>
 
@@ -49,61 +41,16 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
+import { inject } from 'vue';
-
-import { post, del } from '#/src/api.js';
-import events from '#/src/events.js';
 
 import Bio from '#/components/actors/bio.vue';
 import Gender from '#/components/actors/gender.vue';
 import Scenes from '#/components/scenes/scenes.vue';
+import Heart from '#/components/stashes/heart.vue';
 
 const pageContext = inject('pageContext');
-const { pageProps, user } = pageContext;
+const { pageProps } = pageContext;
 const { actor } = pageProps;
-
-const favorited = ref(actor.stashes?.some((sceneStash) => sceneStash.primary) || false);
-
-async function stash() {
-	try {
-		favorited.value = true;
-
-		await post(`/stashes/${user.primaryStash.id}/actors`, { actorId: actor.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `${actor.name} stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash ${actor.name} to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-		await del(`/stashes/${user.primaryStash.id}/actors/${actor.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `${actor.name} unstashed from ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = true;
-
-		console.error(error);
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to unstash ${actor.name} from ${user.primaryStash.name}`,
-		});
-	}
-}
 </script>
 
 <style scoped>
@@ -150,23 +97,7 @@ async function unstash() {
 	overflow-y: auto;
 }
 
-.icon.heart {
+.bookmarks {
-	width: 2rem;
+	margin-right: .5rem;
-	height: 1.5rem;
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: .5rem 1rem 1rem 1rem;
-	fill: var(--highlight-strong-10);
-	filter: drop-shadow(0 0 3px var(--shadow));
-
-	&:hover {
-		cursor: pointer;
-		fill: var(--primary);
-	}
-
-	&.favorited {
-		fill: var(--primary);
-	}
 }
 </style>

pages/movies/@movieId/+Page.vue

@@ -111,26 +111,10 @@
 				>No title</h2>
 
 				<div class="actions">
-					<div
+					<Heart
-						v-if="user"
+						domain="movies"
-						class="bookmarks"
+						:item="movie"
-					>
+					/>
-						<Icon icon="folder-heart" />
-
-						<Icon
-							v-show="favorited"
-							icon="heart7"
-							class="heart favorited"
-							@click.native.stop="unstash"
-						/>
-
-						<Icon
-							v-show="!favorited"
-							icon="heart8"
-							class="heart"
-							@click.native.stop="stash"
-						/>
-					</div>
 
 					<div class="view">
 						<button
@@ -243,69 +227,20 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
+import { inject } from 'vue';
 
-import { post, del } from '#/src/api.js';
-import events from '#/src/events.js';
 import { formatDate, formatDuration } from '#/utils/format.js';
 import getPath from '#/src/get-path.js';
-import ellipsis from '#/utils/ellipsis.js';
 
 import ActorTile from '#/components/actors/tile.vue';
 import SceneTile from '#/components/scenes/tile.vue';
 import Player from '#/components/video/player.vue';
+import Heart from '#/components/stashes/heart.vue';
 
 const pageContext = inject('pageContext');
 
 const movie = pageContext.pageProps.movie;
 const scenes = pageContext.pageProps.scenes;
-const user = pageContext.user;
-
-const fbCutoff = 20;
-
-const favorited = ref(movie.stashes.some((sceneStash) => sceneStash.primary));
-
-async function stash() {
-	try {
-		favorited.value = true;
-
-		await post(`/stashes/${user.primaryStash.id}/movies`, { movieId: movie.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `"${ellipsis(movie.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash "${ellipsis(movie.title, fbCutoff)}" to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-
-		await del(`/stashes/${user.primaryStash.id}/movies/${movie.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `"${ellipsis(movie.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = true;
-
-		console.error(error);
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to unstash "${ellipsis(movie.title, fbCutoff)}" from ${user.primaryStash.name}`,
-		});
-	}
-}
 </script>
 
 <style scoped>
@@ -507,6 +442,10 @@ async function unstash() {
 	}
 }
 
+.bookmarks {
+	margin-right: .75rem;
+}
+
 .view {
 	display: flex;
 }
@@ -516,21 +455,6 @@ async function unstash() {
 	color: var(--text-light);
 }
 
-.bookmarks {
-	display: flex;
-	margin-right: .75rem;
-
-	.icon {
-		padding: .5rem .5rem;
-	}
-
-	.icon.heart:hover,
-	.icon.heart.favorited {
-		cursor: pointer;
-		fill: var(--primary);
-	}
-}
-
 .cover {
 	height: 20rem;
 }

pages/scene/+Page.vue

@@ -123,26 +123,10 @@
 				>No title</h2>
 
 				<div class="actions">
-					<div
+					<Heart
-						v-if="user"
+						domain="scenes"
-						class="bookmarks"
+						:item="scene"
-					>
+					/>
-						<Icon icon="folder-heart" />
-
-						<Icon
-							v-show="favorited"
-							icon="heart7"
-							class="heart favorited"
-							@click.native.stop="unstash"
-						/>
-
-						<Icon
-							v-show="!favorited"
-							icon="heart8"
-							class="heart"
-							@click.native.stop="stash"
-						/>
-					</div>
 
 					<div class="view">
 						<button
@@ -244,26 +228,19 @@
 <script setup>
 import { ref, computed, inject } from 'vue';
 
-import { post, del } from '#/src/api.js';
 import { formatDate, formatDuration } from '#/utils/format.js';
-import events from '#/src/events.js';
 import getPath from '#/src/get-path.js';
-import ellipsis from '#/utils/ellipsis.js';
 
-import Icon from '#/components/icon/icon.vue';
 import ActorTile from '#/components/actors/tile.vue';
 import Player from '#/components/video/player.vue';
+import Heart from '#/components/stashes/heart.vue';
 
-const { pageProps, user } = inject('pageContext');
+const { pageProps } = inject('pageContext');
 const { scene } = pageProps;
 
-const favorited = ref(scene.stashes.some((sceneStash) => sceneStash.primary));
-
 const playing = ref(false);
 const paused = ref(false);
 
-const fbCutoff = 20;
-
 const poster = computed(() => {
 	if (scene.poster) {
 		return getPath(scene.poster, 'thumbnail');
@@ -279,48 +256,6 @@ const poster = computed(() => {
 
 	return null;
 });
-
-async function stash() {
-	try {
-		favorited.value = true;
-
-		await post(`/stashes/${user.primaryStash.id}/scenes`, { sceneId: scene.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `"${ellipsis(scene.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash "${ellipsis(scene.title, fbCutoff)}" to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-
-		await del(`/stashes/${user.primaryStash.id}/scenes/${scene.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `"${ellipsis(scene.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = true;
-
-		console.error(error);
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to unstash "${ellipsis(scene.title, fbCutoff)}" from ${user.primaryStash.name}`,
-		});
-	}
-}
 </script>
 
 <style scoped>
@@ -506,12 +441,6 @@ async function unstash() {
 	justify-content: space-between;
 	flex-shrink: 0;
 
-	.icon {
-		width: 1.5rem;
-		height: 1.5rem;
-		fill: var(--shadow);
-	}
-
 	.button {
 		flex-shrink: 0;
 		padding: .75rem;
@@ -523,18 +452,7 @@ async function unstash() {
 }
 
 .bookmarks {
-	display: flex;
 	margin-right: .75rem;
-
-	.icon {
-		padding: .5rem .5rem;
-	}
-
-	.icon.heart:hover,
-	.icon.heart.favorited {
-		cursor: pointer;
-		fill: var(--primary);
-	}
 }
 
 .view {

pages/users/@username/+onBeforeRender.js

@@ -5,6 +5,8 @@ import { fetchUser } from '#/src/users.js';
 export async function onBeforeRender(pageContext) {
 	const profile = await fetchUser(pageContext.routeParams.username, {}, pageContext.user);
 
+	// console.log(profile);
+
 	if (!profile) {
 		throw render(404, `Cannot find user '${pageContext.routeParams.username}'.`);
 	}

src/api.js

@@ -45,82 +45,102 @@ function showFeedback(isSuccess, options = {}, errorMessage) {
 }
 
 export async function get(path, query = {}, options = {}) {
-	const res = await fetch(`/api${path}${getQuery(query)}`);
+	try {
-	const body = parse(await res.text());
+		const res = await fetch(`/api${path}${getQuery(query)}`);
+		const body = parse(await res.text());
 
-	if (res.ok) {
+		if (res.ok) {
-		showFeedback(true, options);
+			showFeedback(true, options);
-		return body;
+			return body;
+		}
+
+		showFeedback(false, options, body.statusMessage);
+		throw new Error(body.statusMessage);
+	} catch (error) {
+		showFeedback(false, options, error.message);
+		throw error;
 	}
-
-	showFeedback(false, options, body.statusMessage);
-	throw new Error(body.statusMessage);
 }
 
 export async function post(path, data, options = {}) {
-	const res = await fetch(`/api${path}${getQuery(options.query)}`, {
+	try {
-		method: 'POST',
+		const res = await fetch(`/api${path}${getQuery(options.query)}`, {
-		body: JSON.stringify(data),
+			method: 'POST',
-		...postHeaders,
+			body: JSON.stringify(data),
-	});
+			...postHeaders,
+		});
 
-	if (res.status === 204) {
+		if (res.status === 204) {
-		showFeedback(true, options);
+			showFeedback(true, options);
-		return null;
+			return null;
+		}
+
+		const body = parse(await res.text());
+
+		if (res.ok) {
+			showFeedback(true, options);
+			return body;
+		}
+
+		showFeedback(false, options, body.statusMessage);
+		throw new Error(body.statusMessage);
+	} catch (error) {
+		showFeedback(false, options, error.message);
+		throw error;
 	}
-
-	const body = parse(await res.text());
-
-	if (res.ok) {
-		showFeedback(true, options);
-		return body;
-	}
-
-	showFeedback(false, options, body.statusMessage);
-	throw new Error(body.statusMessage);
 }
 
 export async function patch(path, data, options = {}) {
-	const res = await fetch(`/api${path}${getQuery(options.query)}`, {
+	try {
-		method: 'PATCH',
+		const res = await fetch(`/api${path}${getQuery(options.query)}`, {
-		body: JSON.stringify(data),
+			method: 'PATCH',
-		...postHeaders,
+			body: JSON.stringify(data),
-	});
+			...postHeaders,
+		});
 
-	if (res.status === 204) {
+		if (res.status === 204) {
-		return null;
+			return null;
+		}
+
+		const body = parse(await res.text());
+
+		if (res.ok) {
+			showFeedback(true, options);
+			return body;
+		}
+
+		showFeedback(false, options, body.statusMessage);
+		throw new Error(body.statusMessage);
+	} catch (error) {
+		showFeedback(false, options, error.message);
+		throw error;
 	}
-
-	const body = parse(await res.text());
-
-	if (res.ok) {
-		showFeedback(true, options);
-		return body;
-	}
-
-	showFeedback(false, options, body.statusMessage);
-	throw new Error(body.statusMessage);
 }
 
 export async function del(path, options = {}) {
-	const res = await fetch(`/api${path}${getQuery(options.query)}`, {
+	try {
-		method: 'DELETE',
+		const res = await fetch(`/api${path}${getQuery(options.query)}`, {
-		body: JSON.stringify(options.data),
+			method: 'DELETE',
-		...postHeaders,
+			body: JSON.stringify(options.data),
-	});
+			...postHeaders,
+		});
 
-	if (res.status === 204) {
+		if (res.status === 204) {
-		showFeedback(true, options);
+			showFeedback(true, options);
-		return null;
+			return null;
+		}
+
+		const body = parse(await res.text());
+
+		if (res.ok) {
+			showFeedback(true, options);
+			return body;
+		}
+
+		showFeedback(false, options, body.statusMessage);
+		throw new Error(body.statusMessage);
+	} catch (error) {
+		showFeedback(false, options, error.message);
+		throw error;
 	}
-
-	const body = parse(await res.text());
-
-	if (res.ok) {
-		showFeedback(true, options);
-		return body;
-	}
-
-	showFeedback(false, options, body.statusMessage);
-	throw new Error(body.statusMessage);
 }

src/movies.js

@@ -128,7 +128,8 @@ export async function fetchMoviesById(movieIds, reqUser) {
 			.orderBy('priority', 'desc'),
 		covers: knex('movies_covers')
 			.whereIn('movie_id', movieIds)
-			.leftJoin('media', 'media.id', 'movies_covers.media_id'),
+			.leftJoin('media', 'media.id', 'movies_covers.media_id')
+			.orderBy('media.index'),
 		photos: knex('movies')
 			.whereIn('movies.id', movieIds)
 			.leftJoin('movies_scenes', 'movies_scenes.movie_id', 'movies.id')

src/stashes.js

@@ -1,4 +1,5 @@
 import config from 'config';
+import { CronJob } from 'cron';
 
 import { knexOwner as knex } from './knex.js';
 import { indexApi } from './manticore.js';
@@ -8,7 +9,10 @@ import initLogger from './logger.js';
 
 const logger = initLogger();
 
-let lastActorsViewRefresh = 0;
+const lastViewRefresh = {
+	actors: 0,
+	stashes: 0,
+};
 
 export function curateStash(stash, assets = {}) {
 	if (!stash) {
@@ -85,11 +89,11 @@ export async function fetchStashByUsernameAndSlug(username, stashSlug, sessionUs
 export async function fetchStashes(domain, itemId, sessionUser) {
 	const stashes = await knex(`stashes_${domain}s`)
 		.select('stashes.*')
+		.leftJoin('stashes', 'stashes.id', `stashes_${domain}s.stash_id`)
 		.where({
 			[`${domain}_id`]: itemId,
 			user_id: sessionUser.id,
-		})
+		});
-		.leftJoin('stashes', 'stashes.id', `stashes_${domain}s.stash_id`);
 
 	return stashes.map((stash) => curateStash(stash));
 }
@@ -112,6 +116,24 @@ function verifyStashName(stash) {
 	}
 }
 
+export async function refreshView(domain = 'stashes') {
+	// throttle view refreshes
+	if (new Date() - lastViewRefresh[domain] > config.stashes.viewRefreshCooldowns[domain] * 60000) {
+		lastViewRefresh[domain] = new Date();
+
+		logger.verbose(`Refreshing ${domain} view`);
+
+		await knex.schema.refreshMaterializedView(`${domain}_meta`);
+		await knex.schema.refreshMaterializedView('stashes_meta');
+
+		return true;
+	}
+
+	logger.debug(`Skipping ${domain} view refresh`);
+
+	return false;
+}
+
 export async function createStash(newStash, sessionUser) {
 	if (!sessionUser) {
 		throw new HttpError('You are not authenthicated', 401);
@@ -184,21 +206,6 @@ export async function removeStash(stashId, sessionUser) {
 	}
 }
 
-export async function refreshActorsView() {
-	if (new Date() - lastActorsViewRefresh > config.stashes.viewRefreshCooldown * 60000) {
-		// don't refresh actors view more than once an hour
-		lastActorsViewRefresh = new Date();
-
-		logger.debug('Refreshing actors view');
-
-		return knex.schema.refreshMaterializedView('actors_meta');
-	}
-
-	logger.silly('Skipping actors view refresh');
-
-	return false;
-}
-
 export async function stashActor(actorId, stashId, sessionUser) {
 	const stash = await fetchStashById(stashId, sessionUser);
 
@@ -222,7 +229,7 @@ export async function stashActor(actorId, stashId, sessionUser) {
 
 	logger.verbose(`${sessionUser.username} (${sessionUser.id}) stashed actor ${actorId} to stash ${stash.id} (${stash.name})`);
 
-	refreshActorsView();
+	refreshView('actors');
 
 	return fetchStashes('actor', actorId, sessionUser);
 }
@@ -257,7 +264,7 @@ export async function unstashActor(actorId, stashId, sessionUser) {
 
 	logger.verbose(`${sessionUser.username} (${sessionUser.id}) unstashed actor ${actorId} from stash ${stashId}`);
 
-	refreshActorsView();
+	refreshView('actors');
 
 	return fetchStashes('actor', actorId, sessionUser);
 }
@@ -286,6 +293,8 @@ export async function stashScene(sceneId, stashId, sessionUser) {
 
 	logger.verbose(`${sessionUser.username} (${sessionUser.id}) stashed scene ${sceneId} to stash ${stash.id} (${stash.name})`);
 
+	refreshView('scenes');
+
 	return fetchStashes('scene', sceneId, sessionUser);
 }
 
@@ -315,6 +324,8 @@ export async function unstashScene(sceneId, stashId, sessionUser) {
 
 	logger.verbose(`${sessionUser.username} (${sessionUser.id}) unstashed scene ${sceneId} from stash ${stashId}`);
 
+	refreshView('scenes');
+
 	return fetchStashes('scene', sceneId, sessionUser);
 }
 
@@ -341,6 +352,8 @@ export async function stashMovie(movieId, stashId, sessionUser) {
 
 	logger.verbose(`${sessionUser.username} (${sessionUser.id}) stashed movie ${movieId} to stash ${stash.id} (${stash.name})`);
 
+	refreshView('movies');
+
 	return fetchStashes('movie', movieId, sessionUser);
 }
 
@@ -370,5 +383,21 @@ export async function unstashMovie(movieId, stashId, sessionUser) {
 
 	logger.verbose(`${sessionUser.username} (${sessionUser.id}) unstashed movie ${movieId} from stash ${stashId}`);
 
+	refreshView('movies');
+
 	return fetchStashes('movie', movieId, sessionUser);
 }
+
+CronJob.from({
+	cronTime: config.stashes.viewRefreshCron,
+	async onTick() {
+		logger.verbose('Updating stash views');
+
+		await refreshView('scenes');
+		await refreshView('actors');
+		await refreshView('movies');
+		await refreshView('stashes');
+	},
+	start: true,
+	runOnInit: true,
+});

src/users.js

@@ -51,13 +51,14 @@ export async function fetchUser(userId, options = {}, reqUser) {
 	}
 
 	const stashes = await knex('stashes')
+		.select('stashes.*', 'stashes_meta.*')
+		.leftJoin('stashes_meta', 'stashes_meta.stash_id', 'stashes.id')
 		.where('user_id', user.id)
 		.modify((builder) => {
 			if (reqUser?.id !== user.id && !options.includeStashes) {
 				builder.where('public', true);
 			}
-		})
+		});
-		.leftJoin('stashes_meta', 'stashes_meta.stash_id', 'stashes.id');
 
 	if (options.raw) {
 		return { user, stashes };