Added pagination and search to movies page.

assets/components/networks/networks.vue

@@ -6,7 +6,7 @@
 		>
 			<input
 				v-model="query"
-				:placeholder="`Find ${channelCount} channels in ${entities.length} networks`"
+				:placeholder="`Search ${channelCount} channels in ${entities.length} networks`"
 				class="query"
 				@input="searchEntities"
 			>
@@ -98,45 +98,7 @@ export default {
 }
 
 .search {
-    display: flex;
-    width: 100%;
-    max-width: 40rem;
-}
-
-.query {
-    color: var(--text);
-    background: var(--background);
-    flex-grow: 1;
-    box-sizing: border-box;
-    padding: 1rem;
-    border: none;
-    box-sizing: border-box;
-    box-shadow: 0 0 3px var(--darken-weak);
-    margin: 1rem 0;
-    font-size: 1rem;
-    outline: none;
-
-    &:focus {
-        box-shadow: 0 0 3px var(--primary);
-    }
-}
-
-.search-button {
-    padding: 1rem;
-    background: none;
-    border: none;
-
-    .icon {
-        fill: var(--shadow);
-    }
-
-    &:hover {
-        cursor: pointer;
-
-        .icon {
-            fill: var(--primary);
-        }
-    }
+	margin: 1rem 0 0 0;
 }
 
 .entity-tiles {

assets/components/releases/movie-tile.vue

@@ -179,7 +179,7 @@ export default {
 	}
 }
 
-@media(max-width: $breakpoint) {
+@media(max-width: $breakpoint-kilo) {
 	.movie {
 		height: 12rem;
 	}

assets/components/releases/movies.vue

@@ -1,6 +1,11 @@
 <template>
 	<div class="movies">
 		<div class="content-inner">
+			<Search
+				:search="searchMovies"
+				:placeholder="`Search ${totalCount} movies`"
+			/>
+
 			<div class="tiles">
 				<MovieTile
 					v-for="movie in movies"
@@ -8,6 +13,13 @@
 					:movie="movie"
 				/>
 			</div>
+
+			<Pagination
+				v-if="totalCount > 0"
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-bottom"
+			/>
 		</div>
 
 		<Footer />
@@ -16,27 +28,62 @@
 
 <script>
 import MovieTile from './movie-tile.vue';
+import Search from '../search/bar.vue';
+import Pagination from '../pagination/pagination.vue';
+
+async function fetchMovies() {
+	if (this.$route.query.query) {
+		await this.searchMovies();
+		return;
+	}
 
-async function mounted() {
 	const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
-		limit: 30,
+		limit: this.limit,
+		range: this.$route.params.range,
+		pageNumber: this.$route.params.pageNumber,
 	});
 
 	this.movies = movies;
 	this.totalCount = totalCount;
 }
 
+async function searchMovies() {
+	const movies = await this.$store.dispatch('searchMovies', {
+		query: this.$route.query.query,
+		limit: this.limit,
+	});
+
+	this.movies = movies;
+	this.totalCount = movies.length;
+}
+
+async function mounted() {
+	this.pageTitle = 'Movies';
+
+	await this.fetchMovies();
+}
+
 export default {
 	components: {
 		MovieTile,
+		Search,
+		Pagination,
 	},
 	data() {
 		return {
 			movies: [],
 			totalCount: 0,
+			limit: 30,
 		};
 	},
+	watch: {
+		$route: fetchMovies,
+	},
 	mounted,
+	methods: {
+		fetchMovies,
+		searchMovies,
+	},
 };
 </script>
 
@@ -49,14 +96,22 @@ export default {
 	flex-grow: 1;
 }
 
+.content-inner {
+	padding: 0 1rem;
+}
+
+.search {
+	margin: 1rem 0;
+}
+
 .tiles {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
 	grid-gap: 1rem;
-	padding: 1rem;
+	margin: 0 0 1rem 0;
 }
 
-@media(max-width: $breakpoint) {
+@media(max-width: $breakpoint-kilo) {
 	.tiles {
 		grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
 	}

assets/components/search/bar.vue

@@ -0,0 +1,84 @@
+<template>
+	<form
+		class="search"
+		@submit.prevent="search"
+	>
+		<input
+			v-model="query"
+			:placeholder="placeholder || 'Search'"
+			class="query"
+			@input="search"
+		>
+
+		<button
+			type="submit"
+			class="search-button"
+		><Icon icon="search" /></button>
+	</form>
+</template>
+
+<script>
+function search() {
+	this.$router.replace({ query: { query: this.query || undefined } });
+}
+
+export default {
+	props: {
+		placeholder: {
+			type: String,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			query: this.$route.query.query || null,
+		};
+	},
+	methods: {
+		search,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.search {
+    display: flex;
+    width: 100%;
+    max-width: 40rem;
+}
+
+.query {
+    color: var(--text);
+    background: var(--background);
+    flex-grow: 1;
+    box-sizing: border-box;
+    padding: 1rem;
+    border: none;
+    box-sizing: border-box;
+    box-shadow: 0 0 3px var(--darken-weak);
+    font-size: 1rem;
+    outline: none;
+
+    &:focus {
+        box-shadow: 0 0 3px var(--primary);
+    }
+}
+
+.search-button {
+    padding: 1rem;
+    background: none;
+    border: none;
+
+    .icon {
+        fill: var(--shadow);
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        .icon {
+            fill: var(--primary);
+        }
+    }
+}
+</style>

assets/components/tags/tags.vue

@@ -132,6 +132,7 @@ async function mounted() {
 			'da-tp',
 			'dv-tp',
 			'tap',
+			'tvp',
 		],
 		misc: [
 			'gaping',

assets/js/fragments.js

@@ -96,6 +96,57 @@ const actorFields = `
 		${actorStashesFields}
 `;
 
+const movieFields = `
+	id
+	title
+	url
+	slug
+	date
+	datePrecision
+	actors {
+		id
+		name
+		slug
+	}
+	tags {
+		id
+		name
+		slug
+	}
+	entity {
+		id
+		name
+		slug
+		type
+		parent {
+			id
+			name
+			slug
+			type
+		}
+	}
+	covers: moviesCovers {
+		media {
+			id
+			path
+			thumbnail
+			lazy
+			width
+			height
+			thumbnailWidth
+			thumbnailHeight
+			isS3
+			sfw: sfwMedia {
+				id
+				path
+				thumbnail
+				lazy
+				comment
+			}
+		}
+	}
+`;
+
 const campaignsFragment = `
 	campaigns(filter: {
 		or: [
@@ -543,6 +594,7 @@ export {
 	actorFields,
 	actorStashesFields,
 	campaignsFragment,
+	movieFields,
 	releaseActorsFragment,
 	releaseFields,
 	releaseTagsFragment,

assets/js/releases/actions.js

@@ -1,5 +1,5 @@
 import { graphql } from '../api';
-import { releasesFragment, releaseFragment, releaseFields } from '../fragments';
+import { releasesFragment, releaseFragment, releaseFields, movieFields } from '../fragments';
 import { curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
@@ -79,54 +79,7 @@ function initReleasesActions(store, router) {
 					}
 				) {
 					movies: nodes {
-						id
-						title
-						url
-						slug
-						date
-						datePrecision
-						actors {
-							id
-							name
-							slug
-						}
-						tags {
-							id
-							name
-							slug
-						}
-						entity {
-							id
-							name
-							slug
-							type
-							parent {
-								id
-								name
-								slug
-								type
-							}
-						}
-						covers: moviesCovers {
-							media {
-								id
-								path
-								thumbnail
-								lazy
-								width
-								height
-								thumbnailWidth
-								thumbnailHeight
-								isS3
-								sfw: sfwMedia {
-									id
-									path
-									thumbnail
-									lazy
-									comment
-								}
-							}
-						}
+						${movieFields}
 					}
 					totalCount
 				}
@@ -142,6 +95,28 @@ function initReleasesActions(store, router) {
 		};
 	}
 
+	async function searchMovies({ _commit }, { query, limit = 20 }) {
+		const { movies } = await graphql(`
+            query SearchMovies(
+                $query: String!
+                $limit:Int = 20,
+            ) {
+                movies: searchMovies(
+                    query: $query
+					minLength: 1
+                    first: $limit
+                ) {
+					${movieFields}
+                }
+            }
+        `, {
+			query,
+			limit,
+		});
+
+		return movies.map(movie => curateRelease(movie));
+	}
+
 	async function fetchMovieById({ _commit }, movieId) {
 		// const release = await get(`/releases/${releaseId}`);
 
@@ -297,6 +272,7 @@ function initReleasesActions(store, router) {
 		fetchReleaseById,
 		fetchMovies,
 		fetchMovieById,
+		searchMovies,
 	};
 }
 

assets/js/router.js

@@ -196,6 +196,17 @@ const routes = [
 	{
 		path: '/movies',
 		component: Movies,
+		redirect: {
+			name: 'movies',
+			params: {
+				range: 'latest',
+				pageNumber: 1,
+			},
+		},
+	},
+	{
+		path: '/movies/:range/:pageNumber',
+		component: Movies,
 		name: 'movies',
 	},
 	{

migrations/20190325001339_releases.js

@@ -1418,6 +1418,12 @@ exports.up = knex => Promise.resolve()
 				ORDER BY ranks.rank DESC;
 			$$ LANGUAGE SQL STABLE;
 
+			CREATE FUNCTION search_movies(query text, min_length smallint DEFAULT 2) RETURNS SETOF movies AS $$
+				SELECT * FROM movies
+				WHERE length(query) >= min_length
+				AND title ILIKE ('%' || TRIM(query) || '%')
+			$$ LANGUAGE SQL STABLE;
+
 			CREATE FUNCTION search_entities(search text) RETURNS SETOF entities AS $$
 				SELECT * FROM entities
 				WHERE
@@ -1719,8 +1725,10 @@ exports.up = knex => Promise.resolve()
 			COMMENT ON FUNCTION actors_actors IS E'@sortable';
 			COMMENT ON FUNCTION actors_scenes IS E'@sortable';
 			COMMENT ON FUNCTION tags_scenes IS E'@sortable';
+
 			COMMENT ON FUNCTION search_releases IS E'@sortable';
 			COMMENT ON FUNCTION search_actors IS E'@sortable';
+			COMMENT ON FUNCTION search_movies IS E'@sortable';
 			COMMENT ON FUNCTION search_tags IS E'@sortable';
 		`);
 	});

seeds/00_tags.js

@@ -390,6 +390,13 @@ const tags = [
 		priority: 7,
 		group: 'penetration',
 	},
+	{
+		name: 'triple vaginal',
+		slug: 'tvp',
+		description: 'Getting fucked in the pussy by *three* cocks at the same time.',
+		priority: 7,
+		group: 'penetration',
+	},
 	{
 		name: 'deepthroat',
 		slug: 'deepthroat',
@@ -1503,6 +1510,11 @@ const aliases = [
 		for: 'dvp',
 		secondary: true,
 	},
+	{
+		name: 'tpp',
+		for: 'tvp',
+		secondary: true,
+	},
 	{
 		name: 'double vaginal (dvp)',
 		for: 'dvp',

seeds/04_media.js

@@ -695,6 +695,7 @@ const tagMedia = [
 	['cum-in-mouth', 2, 'Jaye Summers in "Double The Cum"', 'hardx'],
 	['cum-in-mouth', 'lara_frost_legalporno', 'Lara Frost in NRX059', 'legalporno'],
 	['cum-in-mouth', 0, 'Vina Sky and Avi Love', 'hardx'],
+	['cum-on-boobs', 'september_reign_penthouse', 'September Reign in "Sensual Ride"', 'penthouse'],
 	['cum-on-boobs', 1, 'Kylie Page in "Melt In Your Mouth"', 'twistyshard'],
 	['cum-on-boobs', 0, 'Alessandra Jane', 'private'],
 	['cum-on-boobs', 2, 'Blake Blossom in "Naturally Stacked Cutie"', 'hardx'],
@@ -770,6 +771,7 @@ const tagMedia = [
 	['double-dildo-kiss', 3, 'Kiki Daire and Brittany', 'kenmarcus'],
 	['double-dildo-kiss', 2, 'Adriana Chechik and Vicki Chase in "Anal Savages"', 'julesjordan'],
 	['dp', 3, 'Hime Marie in AA047', 'legalporno'],
+	['dp', 'kenna_james_tushy_1', 'Kenna James in "Yoga Retreat', 'tushy'],
 	['dp', 2, 'Megan Rain in "DP Masters 4"', 'julesjordan'],
 	['dp', 6, 'Kira Noir', 'hardx'],
 	['dp', 'silvia_dellai_dpfanatics', 'Silvia Dellai in "Tempting Promises"', 'dpfanatics'],
@@ -811,20 +813,25 @@ const tagMedia = [
 	['enhanced-boobs', 'jenny_poussin_jennypoussinvip', 'Jenny Poussin in "His Shirt"', 'jennypoussinvip'],
 	['enhanced-boobs', 25, 'Zuleidy', 'private'],
 	['enhanced-boobs', 17, 'Felina in "With Flowers On The Floor"', 'louisdemirabert'],
-	['enhanced-boobs', 1, 'Lela Star in "Thick"', 'julesjordan'],
-	['enhanced-boobs', 'diana_prince_penthouse_2', 'Diana Prince in "It Is What It Seems"', 'penthouse'],
-	['enhanced-boobs', 18, 'Ebony Godess', 'actiongirls'],
 	['enhanced-boobs', 'hunter_bryce_penthouse', 'Hunter Bryce in "On The Bed"', 'penthouse'],
+	['enhanced-boobs', '18a', 'Ebony Godess', 'actiongirls'],
+	['enhanced-boobs', 1, 'Lela Star in "Thick"', 'julesjordan'],
+	['enhanced-boobs', 'september_reign_spizoo', 'September Rain in "September Reign Loves Jessica"', 'spizoo'],
+	['enhanced-boobs', 'sadie_santana_newsensations', 'Sadie Santana in "Backdoor Beauties"', 'newsensations'],
+	['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'],
 	['enhanced-boobs', 'amy_anderssen_evilangel_1a', 'Amy Anderssen in "Titty Creampies 6"', 'evilangel'],
-	['enhanced-boobs', 'silvia_dellai_pornworld', 'Silvia Dellai in GP1966', 'pornworld'],
-	['enhanced-boobs', 'clanddi_jinkcego_ddfbusty_5', 'Clanddi Jinkcego & Rebecca Jessop', 'ddfbusty'],
 	['enhanced-boobs', 'trudy_photodromm_1', 'Trudy', 'photodromm'],
 	['enhanced-boobs', 'kenzie_anne_playboy', 'Miss Kenzie Anne in "Supercharged"', 'playboy'],
 	['enhanced-boobs', 'kelly_oliveira_teenfidelity', 'Kelly Oliveira in "Keep It Going"', 'teenfidelity'],
 	['enhanced-boobs', 9, 'Putri Cinta', 'watch4beauty'],
+	['enhanced-boobs', 'alexis_zara_wildoncam', 'Alexis Zara', 'wildoncam'],
+	['enhanced-boobs', 'silvia_dellai_pornworld', 'Silvia Dellai in GP1966', 'pornworld'],
 	['enhanced-boobs', 3, 'Ashly Anderson', 'passionhd'],
 	['enhanced-boobs', 'jennifer_mendez_bangbros', 'Jennifer Mendez', 'bangbros'],
 	['enhanced-boobs', 'charlie_atwell_photodromm', 'Charley Atwell', 'photodromm'],
+	['enhanced-boobs', 'clanddi_jinkcego_ddfbusty_5', 'Clanddi Jinkcego & Rebecca Jessop', 'ddfbusty'],
 	['enhanced-boobs', '23d', 'Lulu Sex Bomb in "Tropical Touch"'],
 	['enhanced-boobs', 22, 'Sakura Sena'],
 	['enhanced-boobs', 'mareeva_trudy_photodromm_1', 'Mareeva and Trudy', 'photodromm'],
@@ -936,17 +943,19 @@ const tagMedia = [
 	['piercings', 0, 'Kaegune in "When The Sun Goes Down"', 'suicidegirls'],
 	['piss-drinking', 0, 'Scarlet Domingo in GL227', 'legalporno'],
 	['pussy-eating', 5, 'Claudia Macc and Victoria Pure', 'eurogirlsongirls'],
-	['pussy-eating', 'lilly_evans_jayme_langford_twistys', 'Jayme Langford and Lilly Evans in "The Morning After"', 'twistys'],
 	['pussy-eating', 4, 'Anastasia Knight and Jillian Janson in "Teach Me"', 'screwbox'],
-	['pussy-eating', 'zaawaadi_asia_rae_allblackx', 'Zaawaadi and Asia Rae in "All Black Threesome"', 'allblackx'],
+	['pussy-eating', 'september_reign_penthouse', 'September Reign in "Sensual Ride"', 'penthouse'],
 	['pussy-eating', 'jane_wilde_evilangel', 'Jane Wilde and Brock Cooper in "The Cock Hungry Chronicles"', 'evilangel'],
+	['pussy-eating', 'alexis_zara_tonightsgirlfriend', 'Alexis Zara in "Worships Her Clients Cock"', 'tonightsgirlfriend'],
+	['pussy-eating', 'lilly_evans_jayme_langford_twistys', 'Jayme Langford and Lilly Evans in "The Morning After"', 'twistys'],
+	['pussy-eating', 'zaawaadi_asia_rae_allblackx', 'Zaawaadi and Asia Rae in "All Black Threesome"', 'allblackx'],
+	['pussy-eating', 1, 'Anikka Albrite and Riley Reid', 'inthecrack'],
 	['pussy-eating', 2, 'Anikka Albrite and Mia Malkova in "Big Anal Bombshells"', 'lesbianx'],
+	['pussy-eating', 0, 'Kali Roses and Emily Willis\' pussy in "Peeping On My Neighbor"', 'girlgirl'],
 	['pussy-eating', 8, 'Sia Lust and Lacey London in "Naughty Gamer Girls"', 'girlsgonepink'],
 	['pussy-eating', 7, 'Jewelz Blu and Katie Kush in "Pick Your Pleasure"', 'realitykings'],
 	['pussy-eating', 3, 'Kylie Page and Kalina Ryu in "Training My Masseuse"', 'allgirlmassage'],
 	['pussy-eating', 'azul_hermosa_realitykings_1', 'Azul Hermosa and Van Wylde in "Breakup Sex"', 'realitykings'],
-	['pussy-eating', 0, 'Kali Roses and Emily Willis\' pussy in "Peeping On My Neighbor"', 'girlgirl'],
-	['pussy-eating', 1, 'Anikka Albrite and Riley Reid', 'inthecrack'],
 	['pussy-eating', 6, 'Abella Danger and Karma Rx in "Neon Dreaming"', 'brazzers'],
 	['redhead', 1, 'Lacy Lennon', 'wicked'],
 	['redhead', 0, 'Penny Pax in "The Submission of Emma Marx: Boundaries"', 'newsensations'],
@@ -982,6 +991,7 @@ const tagMedia = [
 	['toy-dp', 0, 'Marley Brinx, Ivy Lebelle and Lyra Law in "Marley Brinx First GGDP"', 'lesbianx'],
 	['toys', 1, 'Chloe Lamour in "Curives In All The Right Places"', 'wetandpuffy'],
 	['toys', 'shawna_lenee_sunrisekings', 'Shawna Lenee', 'sunrisekings'],
+	['tvp', 'september_reign_wefuckblackgirls', 'September Reign in "Second Appearance"', 'wefuckblackgirls'],
 	['trainbang', 'poster', 'Kali Roses in "Passing Me Around"', 'blacked'],
 	['trainbang', 'gina_gerson_assholefever', 'Gina Gerson in "Oppa Gangbang Style"', 'assholefever'],
 	['vr', 0, 'Michelle H', 'metart'],