1.152.0

assets/components/container/container.vue

@@ -10,15 +10,24 @@
 		<transition name="slide">
 			<Sidebar
 				v-if="showSidebar"
-				@toggle="(state) => showSidebar = state"
+				@toggle-sidebar="(state) => toggleSidebar(state)"
+				@show-filters="(state) => toggleFilters(state)"
 			/>
 		</transition>
 
-		<Header :toggle-sidebar="toggleSidebar" />
+		<Header
+			@toggle-sidebar="(state) => toggleSidebar(state)"
+			@show-filters="(state) => toggleFilters(state)"
+		/>
 
 		<div class="content">
 			<router-view />
 		</div>
+
+		<Filters
+			v-if="showFilters"
+			@close="toggleFilters(false)"
+		/>
 	</div>
 </template>
 
@@ -26,11 +35,17 @@
 import Warning from './warning.vue';
 import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
+import Filters from './filters.vue';
 
 function toggleSidebar(state) {
 	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
 }
 
+function toggleFilters(state) {
+	this.showFilters = state;
+	this.showSidebar = false;
+}
+
 async function setConsent(consent) {
 	if (consent) {
 		this.showWarning = false;
@@ -61,17 +76,20 @@ export default {
 		Header,
 		Sidebar,
 		Warning,
+		Filters,
 	},
 	data() {
 		return {
 			showSidebar: false,
 			showWarning: localStorage.getItem('consent') !== window.env.sessionId,
+			showFilters: false,
 		};
 	},
 	mounted,
 	beforeUnmount,
 	methods: {
 		toggleSidebar,
+		toggleFilters,
 		setConsent,
 		blur,
 		resize,

assets/components/container/filters.vue

@@ -0,0 +1,69 @@
+<template>
+	<Dialog
+		title="filters"
+		@close="$emit('close')"
+	>
+		<h3 class="form-heading">Show me</h3>
+
+		<ul class="tags nolist">
+			<li
+				v-for="tag in tags"
+				:key="tag"
+				class="tags-item"
+			>
+				<Checkbox
+					:checked="!tagFilter.includes(tag)"
+					:label="tag"
+					class="tag"
+					@change="(state) => filterTag(tag, state)"
+				/>
+			</li>
+		</ul>
+	</Dialog>
+</template>
+
+<script>
+import Checkbox from '../form/checkbox.vue';
+
+function tagFilter() {
+	return this.$store.state.ui.tagFilter;
+}
+
+function filterTag(tag, isChecked) {
+	if (isChecked) {
+		this.$store.dispatch('setTagFilter', this.tagFilter.filter(filteredTag => filteredTag !== tag));
+	} else {
+		this.$store.dispatch('setTagFilter', this.tagFilter.concat(tag));
+	}
+}
+
+export default {
+	components: {
+		Checkbox,
+	},
+	data() {
+		return {
+			tags: ['anal', 'gay', 'transsexual', 'bisexual', 'pissing'],
+		};
+	},
+	computed: {
+		tagFilter,
+	},
+	emits: ['close'],
+	methods: {
+		filterTag,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.tags-item {
+	width: 20rem;
+	max-width: 100%;
+	display: block;
+}
+
+.tag {
+	padding: .5rem 0;
+}
+</style>

assets/components/dialog/dialog.vue

@@ -0,0 +1,106 @@
+<template>
+	<teleport to="body">
+		<div
+			class="container"
+			@click="$emit('close')"
+		>
+			<div
+				class="dialog"
+				@click.stop
+			>
+				<div
+					v-if="title || $slots.header"
+					class="header"
+				>
+					<slot name="header">
+						<h2 class="header-title">{{ title }}</h2>
+					</slot>
+
+					<Icon
+						icon="cross2"
+						class="close"
+						@click="$emit('close')"
+					/>
+				</div>
+
+				<div class="body">
+					<slot />
+				</div>
+			</div>
+		</div>
+	</teleport>
+</template>
+
+<script>
+export default {
+	props: {
+		title: {
+			type: String,
+			default: null,
+		},
+	},
+	emits: ['close'],
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 1rem;
+	background: var(--darken);
+	z-index: 10;
+}
+
+.dialog {
+	display: flex;
+	flex-direction: column;
+	max-width: 100%;
+	max-height: 100%;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--darken-weak);
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--primary);
+	color: var(--text-light);
+	font-size: 1.5rem;
+	font-weight: bold;
+	text-transform: capitalize;
+}
+
+.header-title {
+	padding: .5rem .5rem .5rem 1rem;
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-size: 1.25rem;
+}
+
+.close {
+	height: 100%;
+	padding: 0 1rem;
+	fill: var(--lighten);
+
+	&:hover {
+		fill: var(--lighten-strong);
+		cursor: pointer;
+	}
+}
+
+.body {
+	padding: 1rem;
+	flex-grow: 1;
+	overflow: auto;
+}
+</style>

assets/components/form/checkbox.vue

@@ -0,0 +1,99 @@
+<template>
+	<label class="check-container noselect">
+		<span class="check-label">{{ label }}</span>
+
+		<input
+			v-show="false"
+			:id="`checkbox-${uid}`"
+			:checked="checked"
+			type="checkbox"
+			class="check-checkbox"
+			@change="$emit('change', $event.target.checked)"
+		>
+
+		<label
+			:for="`checkbox-${uid}`"
+			class="check"
+		/>
+	</label>
+</template>
+
+<script>
+export default {
+	props: {
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		label: {
+			type: String,
+			default: null,
+		},
+	},
+	emits: ['change'],
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.check-container {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+}
+
+.check {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+	flex-shrink: 0;
+	position: relative;
+	background-color: var(--shadow-hint);
+    cursor: pointer;
+    transition: background .15s ease;
+
+    &::after {
+        content: '';
+        width: .5rem;
+        height: .3rem;
+        border: solid 2px var(--text-light);
+        border-top: none;
+        border-right: none;
+        margin: -.2rem 0 0 0;
+        transform: rotateZ(-45deg) scaleX(0);
+        transition: transform .15s ease;
+    }
+}
+
+.check-cross .check::before {
+	content: '';
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	background: url('/img/icons/cross3.svg') no-repeat center/80%;
+	opacity: .15;
+	transition: transform .1s ease;
+}
+
+.check-checkbox:checked + .check {
+    background: var(--primary);
+
+    &::after {
+        transform: rotateZ(-45deg) scaleX(1);
+    }
+
+	&::before {
+        transform: scaleX(0);
+	}
+}
+
+.check-label {
+	overflow: hidden;
+	text-transform: capitalize;
+	text-overflow: ellipsis;
+	margin: 0 .5rem 0 0;
+}
+</style>

assets/components/header/header.vue

@@ -31,7 +31,7 @@
 					<li class="nav-item">
 						<router-link
 							v-slot="{ href, isActive, navigate }"
-							to="/networks"
+							to="/channels"
 							custom
 						>
 							<a
@@ -79,7 +79,7 @@
 		<div class="header-section">
 			<div
 				class="sidebar-toggle noselect"
-				@click.stop="toggleSidebar"
+				@click.stop="$emit('toggleSidebar')"
 			><Icon icon="menu" /></div>
 
 			<Tooltip>
@@ -147,8 +147,8 @@
 							</li>
 
 							<li
-								class="menu-item disabled"
+								class="menu-item"
-								@click.stop
+								@click="$emit('showFilters', true)"
 							>
 								<Icon icon="filter" />Filters
 							</li>
@@ -212,16 +212,12 @@ export default {
 	components: {
 		Search,
 	},
-	props: {
+	emits: ['toggleSidebar', 'showFilters'],
-		toggleSidebar: {
-			type: Function,
-			default: null,
-		},
-	},
 	data() {
 		return {
 			logo,
 			searching: false,
+			showFilters: false,
 		};
 	},
 	computed: {

assets/components/sidebar/sidebar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="sidebar-container"
-		@click="$emit('toggle', false)"
+		@click="$emit('toggleSidebar', false)"
 	>
 		<div
 			class="sidebar"
@@ -12,7 +12,7 @@
 					<router-link
 						to="/updates"
 						class="logo-link"
-						@click.native="$emit('toggle', false)"
+						@click="$emit('toggleSidebar', false)"
 					>
 						<h1 class="sidebar-logo">
 							<div
@@ -25,23 +25,25 @@
 					<Icon
 						icon="cross2"
 						class="sidebar-close noselect"
-						@click.native="$emit('toggle', false)"
+						@click.native="$emit('toggleSidebar', false)"
 					/>
 				</div>
 
 				<Search
 					class="search"
-					@search="$emit('toggle', false)"
+					@search="$emit('toggleSidebar', false)"
 				/>
 
 				<nav class="nav">
 					<ul class="nolist">
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/updates"
 								custom
-								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -52,12 +54,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/actors"
 								custom
-								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -68,12 +72,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
-								to="/networks"
+								to="/channels"
 								custom
-								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -84,12 +90,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/movies"
 								custom
-								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -100,12 +108,14 @@
 							</router-link>
 						</li>
 
-						<li class="nav-item">
+						<li
+							class="nav-item"
+							@click="$emit('toggleSidebar', false)"
+						>
 							<router-link
 								v-slot="{ href, isActive, navigate }"
 								to="/tags"
 								custom
-								@click.native="$emit('toggle', false)"
 							>
 								<a
 									class="nav-link"
@@ -143,6 +153,11 @@
 					class="toggle"
 					@click="setTheme('dark')"
 				><Icon icon="moon" />Use dark theme</label>
+
+				<label
+					class="toggle"
+					@click="$emit('showFilters', true)"
+				><Icon icon="filter" />Filters</label>
 			</div>
 		</div>
 	</div>
@@ -175,6 +190,7 @@ export default {
 	components: {
 		Search,
 	},
+	emits: ['toggleSidebar', 'showFilters'],
 	data() {
 		return {
 			logo,
@@ -240,6 +256,12 @@ export default {
     margin: 0;
 }
 
+.sidebar-section {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
 .logo-link {
     display: block;
     height: 100%;
@@ -265,6 +287,11 @@ export default {
 	}
 }
 
+.nav {
+	flex-grow: 1;
+	overflow-x: auto;
+}
+
 .nav-item {
     display: block;
 }
@@ -286,13 +313,13 @@ export default {
 }
 
 .toggles {
+	flex-shrink: 0;
 	border-top: solid 1px var(--shadow-hint);
 	margin: .5rem 0 0 0;
 }
 
 .toggle {
 	display: flex;
-	align-self: flex-end;
 	padding: 1rem;
 	color: var(--shadow);
 	font-weight: bold;

assets/css/_forms.scss

@@ -0,0 +1,5 @@
+.form-heading {
+	margin: 0 0 .5rem 0;
+	font-size: 1rem;
+	font-weight: bold;
+}

assets/css/style.scss

@@ -1,4 +1,5 @@
 @import 'theme';
+@import 'forms';
 @import 'inputs';
 @import 'states';
 @import 'tooltip';

assets/js/entities/actions.js

@@ -159,7 +159,7 @@ function initEntitiesActions(store, router) {
 			orderBy,
 			afterTime: store.getters.after,
 			beforeTime: store.getters.before,
-			exclude: store.state.ui.filter,
+			exclude: store.state.ui.tagFilter,
 		});
 
 		if (!entity) {

assets/js/main.js

@@ -15,8 +15,11 @@ import Container from '../components/container/container.vue';
 import Icon from '../components/icon/icon.vue';
 import Footer from '../components/footer/footer.vue';
 import Tooltip from '../components/tooltip/tooltip.vue';
+import Dialog from '../components/dialog/dialog.vue';
 
 async function init() {
+	let uid = 0;
+
 	const store = initStore(router);
 	const app = createApp(Container);
 	const events = mitt();
@@ -38,6 +41,7 @@ async function init() {
 			Footer,
 			Tooltip,
 			'v-popover': Tooltip,
+			Dialog,
 		},
 		data() {
 			return {
@@ -60,6 +64,10 @@ async function init() {
 			isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB),
 			isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB),
 		},
+		beforeCreate() {
+			this.uid = uid;
+			uid += 1;
+		},
 	});
 
 	app.directive('tooltip', {

assets/js/releases/actions.js

@@ -24,7 +24,7 @@ function initReleasesActions(store, router) {
 			after,
 			before,
 			orderBy,
-			exclude: store.state.ui.filter,
+			exclude: store.state.ui.tagFilter,
 		});
 
 		return {

assets/js/router.js

@@ -151,9 +151,9 @@ const routes = [
 		name: 'actors',
 	},
 	{
-		path: '/networks',
+		path: '/channels',
 		component: Networks,
-		name: 'networks',
+		name: 'channels',
 	},
 	{
 		path: '/movies',

assets/js/tags/actions.js

@@ -99,7 +99,7 @@ function initTagsActions(store, _router) {
 			before,
 			orderBy: orderBy === 'DATE_DESC' ? 'DATE_DESC' : 'DATE_ASC',
 			offset: Math.max(0, (pageNumber - 1)) * limit,
-			exclude: store.state.ui.filter,
+			exclude: store.state.ui.tagFilter.filter(tagFilter => tagFilter !== tagSlug),
 		});
 
 		return {

assets/js/ui/actions.js

@@ -2,9 +2,11 @@ import { graphql } from '../api';
 import { curateRelease, curateActor } from '../curate';
 
 function initUiActions(_store, _router) {
-	function setFilter({ commit }, filter) {
+	function setTagFilter({ commit }, filter) {
-		commit('setFilter', filter);
+		const tagFilter = Array.from(new Set(filter));
-		localStorage.setItem('filter', filter);
+
+		commit('setTagFilter', tagFilter);
+		localStorage.setItem('tagFilter', tagFilter);
 	}
 
 	function setRange({ commit }, range) {
@@ -184,7 +186,7 @@ function initUiActions(_store, _router) {
 
 	return {
 		search,
-		setFilter,
+		setTagFilter,
 		setRange,
 		setBatch,
 		setSfw,

assets/js/ui/mutations.js

@@ -1,5 +1,5 @@
-function setFilter(state, filter) {
+function setTagFilter(state, tagFilter) {
-	state.filter = filter;
+	state.tagFilter = tagFilter;
 }
 
 function setRange(state, range) {
@@ -19,7 +19,7 @@ function setTheme(state, theme) {
 }
 
 export default {
-	setFilter,
+	setTagFilter,
 	setRange,
 	setBatch,
 	setSfw,

assets/js/ui/state.js

@@ -1,10 +1,10 @@
-const storedFilter = localStorage.getItem('filter');
+const storedTagFilter = localStorage.getItem('tagFilter');
 const storedBatch = localStorage.getItem('batch');
 const storedSfw = localStorage.getItem('sfw');
 const storedTheme = localStorage.getItem('theme');
 
 export default {
-	filter: storedFilter ? storedFilter.split(',') : [],
+	tagFilter: storedTagFilter ? storedTagFilter.split(',') : [],
 	range: 'latest',
 	batch: storedBatch || 'all',
 	sfw: storedSfw === 'true' || false,

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.151.3",
+    "version": "1.152.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

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

public/img/icons/cross.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>cross</title>
+<path d="M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z"></path>
+</svg>

public/img/icons/cross2.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>cross2</title>
+<path d="M13.957 3.457l-1.414-1.414-4.543 4.543-4.543-4.543-1.414 1.414 4.543 4.543-4.543 4.543 1.414 1.414 4.543-4.543 4.543 4.543 1.414-1.414-4.543-4.543z"></path>
+</svg>

public/img/icons/cross3.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>cross3</title>
+<path d="M12.207 10.793l-1.414 1.414-2.793-2.793-2.793 2.793-1.414-1.414 2.793-2.793-2.793-2.793 1.414-1.414 2.793 2.793 2.793-2.793 1.414 1.414-2.793 2.793 2.793 2.793z"></path>
+</svg>

seeds/00_tags.js

@@ -709,7 +709,7 @@ const tags = [
 	{
 		name: 'pissing',
 		slug: 'pissing',
-		priority: 6,
+		priority: 8,
 	},
 	{
 		name: 'POV',

seeds/04_media.js

@@ -685,9 +685,10 @@ const tagPhotos = [
 	['airtight', 6, 'Remy Lacroix in "Ass Worship 14" for Jules Jordan'],
 	['airtight', 2, 'Dakota Skye in "Dakota Goes Nuts" for ArchAngel'],
 	['airtight', 8, 'Veronica Leal in LegalPorno SZ2520'],
-	['airtight', 5, 'Chloe Amour in "DP Masters 4" for Jules Jordan'],
-	['airtight', 1, 'Jynx Maze in "Pump My Ass Full of Cum 3" for Jules Jordan'],
 	['airtight', 3, 'Anita Bellini in "Triple Dick Gangbang" for Hands On Hardcore (DDF Network)'],
+	['airtight', 9, 'Cindy Shine in LegalPorno GP1658'],
+	['airtight', 1, 'Jynx Maze in "Pump My Ass Full of Cum 3" for Jules Jordan'],
+	['airtight', 5, 'Chloe Amour in "DP Masters 4" for Jules Jordan'],
 	['atm', 3, 'Natasha Teen in "Work That Ass!" for Her Limit'],
 	['atm', 0, 'Roxy Lips in "Under Her Coat" for 21 Naturals'],
 	['atm', 6, 'Jane Wilde in "Teen Anal" for Evil Angel'],

src/scrapers/kink.js

@@ -6,7 +6,7 @@ function scrapeAll(scenes) {
 	return scenes.map(({ query }) => {
 		const release = {};
 
-		const href = query.url('.shoot-thumb-title a');
+		const href = query.url('.shoot-thumb-info > a');
 		release.url = `https://kink.com${href}`;
 
 		release.shootId = href.split('/').slice(-1)[0];