Added sections and pagination to stash page.

assets/components/actors/tile.vue

@@ -3,7 +3,7 @@
 		v-if="actor"
 		class="actor"
 	>
-		<router-link
+		<RouterLink
 			:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
 			class="link"
 		>
@@ -15,7 +15,7 @@
 					class="name"
 				>{{ actor.name }}</span>
 
-				<router-link
+				<RouterLink
 					v-if="actor.entity"
 					v-tooltip="actor.entity.name"
 					:to="{ name: actor.entity.type, params: { entitySlug: actor.entity.slug, range: 'new', pageNumber: 1 } }"
@@ -25,7 +25,7 @@
 						:src="`/img/logos/${actor.entity.slug}/favicon_dark.png`"
 						class="favicon-icon"
 					>
-				</router-link>
+				</RouterLink>
 
 				<Icon
 					v-if="alias"
@@ -122,7 +122,7 @@
 					/>
 				</span>
 			</div>
-		</router-link>
+		</RouterLink>
 	</div>
 </template>
 

assets/components/filters/filter-bar.vue

@@ -2,22 +2,12 @@
 	<div class="filter-bar noselect">
 		<div class="sort">
 			<router-link
-				:to="{ params: { range: 'latest', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'latest' || range === 'latest' }"
+				v-for="section in ranges"
+				:key="section"
+				:to="{ params: { range: section, pageNumber: 1 }, query: $route.query }"
+				:class="{ active: $route.name === section || range === section }"
 				class="range range-button"
-			>Latest</router-link>
-
-			<router-link
-				:to="{ params: { range: 'upcoming', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
-				class="range-button"
-			>Upcoming</router-link>
-
-			<router-link
-				:to="{ params: { range: 'new', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'new' || range === 'new' }"
-				class="range-button"
-			>New</router-link>
+			>{{ section }}</router-link>
 		</div>
 
 		<div class="filters">
@@ -96,6 +86,10 @@ export default {
 			type: Number,
 			default: 10,
 		},
+		ranges: {
+			type: Array,
+			default: () => ['latest', 'upcoming', 'new'],
+		},
 		availableTags: {
 			type: Array,
 			default: () => [],
@@ -324,6 +318,7 @@ export default {
     text-decoration: none;
 	border: solid 1px transparent;
 	border-bottom: none;
+	text-transform: capitalize;
 
     &:hover:not(.active) {
         color: var(--shadow-strong);

assets/components/releases/movie-tile.vue

@@ -3,7 +3,7 @@
 		<Details :release="movie" />
 
 		<div class="movie">
-			<router-link
+			<RouterLink
 				:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
 				class="cover"
 			>
@@ -13,15 +13,29 @@
 					:style="{ 'background-image': getBgPath(movie.covers[0], 'lazy') }"
 					loading="lazy"
 				>
-			</router-link>
+
+				<Icon
+					v-show="favorited"
+					icon="heart7"
+					class="stash stashed"
+					@click.prevent.native="unstashMovie"
+				/>
+
+				<Icon
+					v-show="favorited === false"
+					icon="heart8"
+					class="stash unstashed"
+					@click.prevent.native="stashMovie"
+				/>
+			</RouterLink>
 
 			<div class="info">
-				<router-link
+				<RouterLink
 					:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
 					class="title-link"
 				>
 					<h3 class="title">{{ movie.title }}</h3>
-				</router-link>
+				</RouterLink>
 
 				<ul
 					class="actors nolist"
@@ -31,10 +45,10 @@
 						v-for="actor in movie.actors"
 						:key="`tag-${movie.id}-${actor.id}`"
 						class="actor"
-					><router-link
+					><RouterLink
 						:to="`/actor/${actor.id}/${actor.slug}`"
 						class="actor-link"
-					>{{ actor.name }}</router-link></li>
+					>{{ actor.name }}</RouterLink></li>
 				</ul>
 
 				<ul
@@ -45,10 +59,10 @@
 						v-for="tag in movie.tags"
 						:key="`tag-${movie.id}-${tag.id}`"
 						class="tag"
-					><router-link
+					><RouterLink
 						:to="`/tag/${tag.slug}`"
 						class="tag-link"
-					>{{ tag.name }}</router-link></li>
+					>{{ tag.name }}</RouterLink></li>
 				</ul>
 			</div>
 		</div>
@@ -58,6 +72,36 @@
 <script>
 import Details from './tile-details.vue';
 
+async function stashMovie() {
+	this.favorited = true;
+
+	try {
+		await this.$store.dispatch('stashMovie', {
+			movieId: this.movie.id,
+			stashId: this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', true);
+	} catch (error) {
+		this.favorited = false;
+	}
+}
+
+async function unstashMovie() {
+	this.favorited = false;
+
+	try {
+		await this.$store.dispatch('unstashMovie', {
+			movieId: this.movie.id,
+			stashId: this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', false);
+	} catch (error) {
+		this.favorited = true;
+	}
+}
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
@@ -72,9 +116,18 @@ export default {
 			default: null,
 		},
 	},
+	data() {
+		return {
+			favorited: this.movie.isFavorited,
+		};
+	},
 	computed: {
 		sfw,
 	},
+	methods: {
+		stashMovie,
+		unstashMovie,
+	},
 };
 </script>
 
@@ -87,6 +140,10 @@ export default {
 	background: var(--background);
 	box-shadow: 0 0 3px var(--darken-weak);
 	font-size: 0;
+
+	&:hover .unstashed {
+		fill: var(--lighten);
+	}
 }
 
 .movie {
@@ -101,6 +158,7 @@ export default {
 
 .cover {
 	height: 100%;
+	position: relative;
 	box-shadow: 0 0 3px var(--darken-weak);
 
 	img {
@@ -179,6 +237,22 @@ export default {
 	}
 }
 
+.stash {
+	width: 1.25rem;
+	height: 1.25rem;
+	padding: .25rem .5rem .5rem .25rem;
+	position: absolute;
+	top: 0;
+	right: 0;
+	fill: var(--lighten-weak);
+	filter: drop-shadow(0 0 2px var(--darken));
+
+	&:hover,
+	&.stashed {
+		fill: var(--primary);
+	}
+}
+
 @media(max-width: $breakpoint-kilo) {
 	.movie {
 		height: 12rem;

assets/components/stashes/stash.vue

@@ -10,11 +10,11 @@
 			>{{ stash.name }}</h2>
 
 			<span class="header-section">
-				<router-link
+				<RouterLink
 					v-if="stash.user"
 					:to="{ name: 'user', params: { username: stash.user.username } }"
 					class="header-item stash-username nolink"
-				><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></router-link>
+				><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></RouterLink>
 
 				<label
 					v-if="isMine"
@@ -55,15 +55,17 @@
 		</div>
 
 		<div class="content-inner">
+			<FilterBar :ranges="['scenes', 'actors', 'movies']" />
+
 			<Releases
-				v-if="stash.scenes?.length > 0"
+				v-if="$route.params.range === 'scenes' && stash.scenes?.length > 0"
 				:releases="stash.scenes.map(item => item.scene)"
 				class="stash-section stash-scenes"
 				@stash="fetchStash"
 			/>
 
 			<ul
-				v-if="stash.actors?.length > 0"
+				v-if="$route.params.range === 'actors'"
 				class="stash-section stash-actors nolist"
 			>
 				<li
@@ -71,6 +73,26 @@
 					:key="item.id"
 				><Actor :actor="item.actor" /></li>
 			</ul>
+
+			<div
+				v-if="$route.params.range === 'movies'"
+				class="stash-movies"
+			>
+				<Movie
+					v-for="item in stash.movies"
+					:key="`movie-${item.id}`"
+					:movie="item.movie"
+					@stash="fetchStash"
+				/>
+			</div>
+
+			<Pagination
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-bottom"
+			/>
+
+			<Footer />
 		</div>
 	</div>
 </template>
@@ -78,12 +100,37 @@
 <script>
 import Actor from '../actors/tile.vue';
 import Releases from '../releases/releases.vue';
+import Movie from '../releases/movie-tile.vue';
 import RemoveStash from './remove.vue';
 import Toggle from '../form/toggle.vue';
+import FilterBar from '../filters/filter-bar.vue';
+import Pagination from '../pagination/pagination.vue';
 
 async function fetchStash() {
-	this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
+	this.stash = await this.$store.dispatch('fetchStash', {
+		stashId: this.$route.params.stashId,
+		section: this.$route.params.range,
+		pageNumber: this.$route.params.pageNumber || 1,
+		limit: this.limit,
+	});
+
+	console.log(this.stash.movies);
+
 	this.isMine = this.stash.user?.id === this.$store.state.auth.user?.id;
+
+	if (this.$route.params.range === 'scenes') {
+		this.totalCount = this.stash.sceneTotal;
+	}
+
+	if (this.$route.params.range === 'actors') {
+		this.totalCount = this.stash.actorTotal;
+	}
+
+	if (this.$route.params.range === 'movies') {
+		this.totalCount = this.stash.movieTotal;
+	}
+
+	this.pageTitle = this.stash.name;
 }
 
 async function publishStash(isPublic) {
@@ -109,23 +156,32 @@ async function removeStash(removed) {
 }
 
 async function mounted() {
-	this.fetchStash();
+	await this.fetchStash();
 }
 
 export default {
 	components: {
 		Actor,
+		Movie,
 		Releases,
 		RemoveStash,
+		Pagination,
+		FilterBar,
 		Toggle,
 	},
 	data() {
 		return {
 			stash: null,
+			limit: Number(this.$route.query.limit) || 20,
+			pageTitle: null,
 			showRemoveStash: false,
 			isMine: false,
+			totalCount: 0,
 		};
 	},
+	watch: {
+		$route: fetchStash,
+	},
 	mounted,
 	methods: {
 		fetchStash,
@@ -199,21 +255,26 @@ export default {
 	}
 }
 
-.stash-section:not(:last-child) {
-	border-bottom: solid 1px var(--shadow-hint);
-}
-
 .stash-actors {
     display: grid;
     grid-gap: .5rem;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	flex-grow: 1;
 	padding: 1rem;
+	border-top: solid 1px var(--shadow-hint);
+}
+
+.stash-movies {
+	display: grid;
+	flex-grow: 1;
+	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
+	grid-template-rows: min-content;
+	grid-gap: 1rem;
+	padding: 1rem;
+	border-top: solid 1px var(--shadow-hint);
 }
 
 .stash-scenes {
-	flex-grow: 0;
-
 	.tiles {
 		grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
 	}

assets/components/users/stash.vue

@@ -2,7 +2,7 @@
 	<div class="stash">
 		<div class="stash-section stash-header">
 			<router-link
-				:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
+				:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug, range: 'scenes', pageNumber: 1 } }"
 				class="stash-link nolink"
 			>
 				<h4 class="stash-name">{{ stash.name }}</h4>

assets/js/curate.js

@@ -136,20 +136,30 @@ function curateTag(tag) {
 function curateStash(stash) {
 	const curatedStash = stash;
 
-	if (stash.scenes) {
-		curatedStash.scenes = stash.scenes.map(item => ({
+	if (stash.scenes || stash.scenesConnection?.scenes) {
+		curatedStash.sceneTotal = stash.scenesConnection?.totalCount || null;
+		curatedStash.scenes = (stash.scenesConnection?.scenes || stash.scenes).map(item => ({
 			...item,
 			scene: curateRelease(item.scene),
 		}));
 	}
 
-	if (stash.actors) {
-		curatedStash.actors = stash.actors.map(item => ({
+	if (stash.actors || stash.actorsConnection?.actors) {
+		curatedStash.actorTotal = stash.actorsConnection?.totalCount || null;
+		curatedStash.actors = (stash.actorsConnection?.actors || stash.actors).map(item => ({
 			...item,
 			actor: curateActor(item.actor),
 		}));
 	}
 
+	if (stash.movies || stash.moviesConnection?.movies) {
+		curatedStash.movieTotal = stash.moviesConnection?.totalCount || null;
+		curatedStash.movies = (stash.moviesConnection?.movies || stash.movies).map(item => ({
+			...item,
+			movie: curateRelease(item.movie),
+		}));
+	}
+
 	return curatedStash;
 }
 

assets/js/fragments.js

@@ -145,6 +145,24 @@ const movieFields = `
 			}
 		}
 	}
+	isFavorited
+	isStashed(includeFavorites: false)
+	stashes: stashesMovies(
+		filter: {
+			stash: {
+				userId: {
+					equalTo: $userId
+				}
+			}
+		}
+	) @include(if: $hasAuth) {
+		stash {
+			id
+			name
+			slug
+			primary
+		}
+	}
 `;
 
 const campaignsFragment = `

assets/js/releases/actions.js

@@ -72,6 +72,8 @@ function initReleasesActions(store, router) {
             query Movies(
                 $limit:Int = 1000,
                 $offset:Int = 0,
+				$hasAuth: Boolean!
+				$userId: Int
             ) {
 				connection: moviesConnection(
 					first: $limit
@@ -90,6 +92,8 @@ function initReleasesActions(store, router) {
 				}
 			}
         `, {
+			hasAuth: !!store.state.auth.user,
+			userId: store.state.auth.user?.id,
 			limit,
 			offset: Math.max(0, (pageNumber - 1)) * limit,
 		});

assets/js/router.js

@@ -228,7 +228,18 @@ const routes = [
 		name: 'notifications',
 	},
 	{
-		path: '/stash/:stashId/:stashSlug?',
+		path: '/stash/:stashId/:stashSlug',
+		redirect: from => ({
+			name: 'stash',
+			params: {
+				...from.params,
+				range: 'scenes',
+				pageNumber: 1,
+			},
+		}),
+	},
+	{
+		path: '/stash/:stashId/:stashSlug?/:range/:pageNumber',
 		component: Stash,
 		name: 'stash',
 	},

assets/js/stashes/actions.js

@@ -5,14 +5,24 @@ import {
 	patch,
 } from '../api';
 
-import { releaseFields, actorStashesFields } from '../fragments';
+import { releaseFields, actorStashesFields, movieFields } from '../fragments';
 import { curateStash } from '../curate';
 
 function initStashesActions(store, _router) {
-	async function fetchStash(context, stashId) {
+	async function fetchStash(context, {
+		stashId,
+		section = 'scenes',
+		pageNumber = 1,
+		limit = 20,
+	}) {
 		const { stash } = await graphql(`
 			query Stash(
 				$stashId: Int!
+				$includeScenes: Boolean!
+				$includeActors: Boolean!
+				$includeMovies: Boolean!
+                $limit:Int = 10,
+				$offset:Int = 0,
 				$hasAuth: Boolean!
 				$userId: Int
 			) {
@@ -26,7 +36,13 @@ function initStashesActions(store, _router) {
 						id
 						username
 					}
-					actors: stashesActors {
+					actorsConnection: stashesActorsConnection(
+						orderBy: CREATED_AT_DESC
+						first: $limit
+						offset: $offset
+					) @include(if: $includeActors) {
+						totalCount
+						actors: nodes {
 							comment
 							actor {
 								id
@@ -55,16 +71,42 @@ function initStashesActions(store, _router) {
 								${actorStashesFields}
 							}
 						}
-					scenes: stashesScenes {
+					}
+					scenesConnection: stashesScenesConnection(
+						orderBy: CREATED_AT_DESC
+						first: $limit
+						offset: $offset
+					) @include(if: $includeScenes) {
+						totalCount
+						scenes: nodes {
 							comment
 							scene {
 								${releaseFields}
 							}
 						}
 					}
+					moviesConnection: stashesMoviesConnection(
+						orderBy: CREATED_AT_DESC
+						first: $limit
+						offset: $offset
+					) @include(if: $includeMovies) {
+						totalCount
+						movies: nodes {
+							comment
+							movie {
+								${movieFields}
+							}
+						}
+					}
+				}
 			}
 		`, {
 			stashId: Number(stashId),
+			includeScenes: section === 'scenes',
+			includeActors: section === 'actors',
+			includeMovies: section === 'movies',
+			offset: Math.max(0, (pageNumber - 1)) * limit,
+			limit: Number(limit),
 			hasAuth: !!store.state.auth.user,
 			userId: store.state.auth.user?.id,
 		});

assets/js/users/actions.js

@@ -57,7 +57,10 @@ function initUsersActions(store, _router) {
 								}
 							}
 						}
-						scenes: stashesScenes(first: 20) {
+						scenes: stashesScenes(
+							first: 20
+							orderBy: CREATED_AT_DESC
+						) {
 							comment
 							scene {
 								${releaseFields}

seeds/04_media.js

@@ -842,6 +842,7 @@ const tagMedia = [
 	['enhanced-boobs', 'september_reign_spizoo', 'September Rain in "September Reign Loves Jessica"', 'spizoo'],
 	['enhanced-boobs', 'katrina_moreno_bangbros', 'Katrina Moreno in "Stripper Cream Pie"', 'bangbros'],
 	['enhanced-boobs', 'sadie_santana_newsensations', 'Sadie Santana in "Backdoor Beauties"', 'newsensations'],
+	['enhanced-boobs', 'kiera_king_puremature', 'Kiera King in "Warming Up"', 'puremature'],
 	['enhanced-boobs', 'diana_prince_penthouse_2', 'Diana Prince in "It Is What It Seems"', 'penthouse'],
 	['enhanced-boobs', 'chessie_kay_chelsey_lanette_eurogirlsongirls', 'Chelsey Lanette and Chessie Kay', 'eurogirlsongirls'],
 	['enhanced-boobs', 'chelsey_lanette_sexart_1', 'Chelsey Lanette in "Tell Me How You Want"', 'sexart'],

src/web/plugins/releases.js

@@ -2,23 +2,15 @@
 
 const { makeExtendSchemaPlugin, gql } = require('graphile-utils');
 
-const schemaExtender = makeExtendSchemaPlugin(_build => ({
-	typeDefs: gql`
-	  extend type Release {
-		  isFavorited: Boolean @requires(columns: ["stashesScenesBySceneId"])
-		  isStashed(includeFavorites: Boolean = false): Boolean @requires(columns: ["stashesScenesBySceneId"])
-	  }
-    `,
-	resolvers: {
-		Release: {
-			isFavorited(parent) {
+function isFavorited(parent) {
 	if (!parent['@stashes'] || (parent['@stashes'].length > 0 && typeof parent['@stashes'][0]['@stash'].primary === 'undefined')) {
 		return null;
 	}
 
 	return parent['@stashes'].some(({ '@stash': stash }) => stash.primary);
-			},
-			isStashed(parent, args) {
+}
+
+function isStashed(parent, args) {
 	if (!parent['@stashes'] || (parent['@stashes'].length > 0 && typeof parent['@stashes'][0]['@stash'].primary === 'undefined')) {
 		return null;
 	}
@@ -28,7 +20,28 @@ const schemaExtender = makeExtendSchemaPlugin(_build => ({
 	}
 
 	return parent['@stashes'].some(({ '@stash': stash }) => !stash.primary);
+}
+
+const schemaExtender = makeExtendSchemaPlugin(_build => ({
+	typeDefs: gql`
+	  extend type Release {
+		  isFavorited: Boolean @requires(columns: ["stashesScenesBySceneId"])
+		  isStashed(includeFavorites: Boolean = false): Boolean @requires(columns: ["stashesScenesBySceneId"])
+	  }
+
+	  extend type Movie {
+		  isFavorited: Boolean @requires(columns: ["stashesMovies"])
+		  isStashed(includeFavorites: Boolean = false): Boolean @requires(columns: ["stashesMovies"])
+	  }
+    `,
+	resolvers: {
+		Release: {
+			isFavorited,
+			isStashed,
 		},
+		Movie: {
+			isFavorited,
+			isStashed,
 		},
 	},
 }));