Allowing HTML in disclaimer.

Reviewed-on: http://gitea.unknown.name/DebaucheryLibrarian/traxxx/pulls/44

.eslintrc

@@ -2,7 +2,7 @@
     "root": true,
     "extends": ["airbnb-base", "plugin:vue/recommended"],
     "parserOptions": {
-        "parser": "babel-eslint",
+        "parser": "@babel/eslint-parser",
         "ecmaVersion": 2019,
         "sourceType": "module"
     },
@@ -17,10 +17,11 @@
         "vue/html-indent": ["error", "tab"],
         "vue/multiline-html-element-content-newline": 0,
         "vue/singleline-html-element-content-newline": 0,
+		"vue/multi-word-component-names": 0,
         "no-param-reassign": ["error", {
             "props": true,
             "ignorePropertyModificationsFor": ["state", "acc"]
-        }],
+        }]
     },
     "globals": {
         "CONFIG": true

.gitignore

@@ -2,6 +2,7 @@ node_modules/
 dist/
 log/
 media/
+html/
 public/js/*
 public/css/*
 config/*
@@ -9,3 +10,4 @@ config/*
 assets/js/config/
 !assets/js/config/default.js
 *.heapprofile
+*.heapsnapshot

.nvmrc

@@ -1 +1 @@
-14.15.4
+16.13.0

assets/components/actors/actor.vue

@@ -6,7 +6,7 @@
 		<div class="actor-header">
 			<h2 class="header-name">
 				<span v-if="actor.entity">{{ actor.name }} ({{ actor.entity.name }})</span>
-				<span v-else="">{{ actor.name }}</span>
+				<span v-else>{{ actor.name }}</span>
 
 				<Gender
 					:gender="actor.gender"

assets/components/actors/actors.vue

@@ -272,7 +272,7 @@ import Pagination from '../pagination/pagination.vue';
 
 const toggleValues = [true, null, false];
 const boobSizes = 'ABCDEFGHIJKZ'.split('');
-const topCountries = ['AU', 'BR', 'DE', 'JP', 'RU', 'GB', 'US'];
+const topCountries = ['AU', 'BR', 'CZ', 'DE', 'JP', 'RU', 'GB', 'US'];
 
 function updateFilters() {
 	this.$router.push({

assets/components/actors/tile.vue

@@ -214,7 +214,7 @@ export default {
     display: inline-block;
     position: relative;
     box-shadow: 0 0 3px var(--darken-weak);
-    background: var(--background);
+    background: var(--info);
 	overflow: hidden;
 
     &::before {
@@ -237,12 +237,8 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    color: var(--text);
+    color: var(--text-light);
     text-decoration: none;
-
-    &:hover {
-        color: var(--primary);
-    }
 }
 
 .handle {
@@ -253,7 +249,8 @@ export default {
 	box-shadow: 0 0 3px var(--shadow);
 
 	.name {
-		padding: .5rem;
+		padding: .25rem .5rem;
+		font-size: .9rem;
 	}
 
 	.alias {
@@ -316,8 +313,8 @@ export default {
 }
 
 .stash {
-	width: 1.25rem;
-	height: 1.25rem;
+	width: 1.5rem;
+	height: 1.5rem;
 	padding: .25rem .25rem .5rem .5rem;
 	position: absolute;
 	top: 0;

assets/components/alerts/add.vue

@@ -46,7 +46,7 @@
 								/>
 							</li>
 
-							<template v-slot:tooltip>
+							<template #tooltip>
 								<Search
 									content="actors"
 									@select="actor => addActor(actor)"
@@ -88,7 +88,7 @@
 								/>
 							</li>
 
-							<template v-slot:tooltip>
+							<template #tooltip>
 								<Search
 									content="tags"
 									:defaults="['anal', 'blowbang', 'mfm', 'dp', 'gangbang', 'airtight']"
@@ -126,7 +126,7 @@
 								/>
 							</div>
 
-							<template v-slot:tooltip>
+							<template #tooltip>
 								<Search
 									label="Search channels"
 									content="entities"
@@ -181,7 +181,7 @@
 								/>
 							</li>
 
-							<template v-slot:tooltip>
+							<template #tooltip>
 								<Search
 									content="stashes"
 									@select="stash => addStash(stash)"
@@ -194,6 +194,7 @@
 
 			<div class="dialog-actions right">
 				<button
+					:disabled="actors.length === 0 && tags.length === 0 && !entity"
 					type="submit"
 					class="button button-primary"
 				>Add alert</button>
@@ -210,19 +211,19 @@ import Search from './search.vue';
 
 async function addAlert() {
 	await this.$store.dispatch('addAlert', {
-		actors: this.actors.map(actor => actor.id),
-		tags: this.tags.map(tag => tag.id),
+		actors: this.actors.map((actor) => actor.id),
+		tags: this.tags.map((tag) => tag.id),
 		entity: this.entity?.id,
 		notify: this.notify,
 		email: this.email,
-		stashes: this.stashes.map(stash => stash.id),
+		stashes: this.stashes.map((stash) => stash.id),
 	});
 
 	this.$emit('close', true);
 }
 
 function addActor(actor) {
-	if (!this.actors.some(selectedActor => selectedActor.id === actor.id)) {
+	if (!this.actors.some((selectedActor) => selectedActor.id === actor.id)) {
 		this.actors = this.actors.concat(actor);
 	}
 
@@ -235,7 +236,7 @@ function addEntity(entity) {
 }
 
 function addTag(tag) {
-	if (!this.tags.some(selectedTag => selectedTag.id === tag.id)) {
+	if (!this.tags.some((selectedTag) => selectedTag.id === tag.id)) {
 		this.tags = this.tags.concat(tag);
 	}
 
@@ -243,7 +244,7 @@ function addTag(tag) {
 }
 
 function removeActor(actor) {
-	this.actors = this.actors.filter(listedActor => listedActor.id !== actor.id);
+	this.actors = this.actors.filter((listedActor) => listedActor.id !== actor.id);
 }
 
 function removeEntity() {
@@ -251,11 +252,11 @@ function removeEntity() {
 }
 
 function removeTag(tag) {
-	this.tags = this.tags.filter(listedTag => listedTag.id !== tag.id);
+	this.tags = this.tags.filter((listedTag) => listedTag.id !== tag.id);
 }
 
 function addStash(stash) {
-	if (!this.stashes.some(selectedStash => selectedStash.id === stash.id)) {
+	if (!this.stashes.some((selectedStash) => selectedStash.id === stash.id)) {
 		this.stashes = this.stashes.concat(stash);
 	}
 
@@ -263,7 +264,7 @@ function addStash(stash) {
 }
 
 function removeStash(stash) {
-	this.stashes = this.stashes.filter(listedStash => listedStash.id !== stash.id);
+	this.stashes = this.stashes.filter((listedStash) => listedStash.id !== stash.id);
 }
 
 export default {
@@ -273,6 +274,7 @@ export default {
 		Entity,
 		Search,
 	},
+	emits: ['close'],
 	data() {
 		return {
 			actors: [],
@@ -284,7 +286,6 @@ export default {
 			availableStashes: this.$store.state.auth.user.stashes,
 		};
 	},
-	emits: ['close'],
 	methods: {
 		addActor,
 		addAlert,

assets/components/container/container.vue

@@ -8,35 +8,40 @@
 		/>
 
 		<transition name="slide">
-			<Sidebar
-				v-if="showSidebar"
-				@toggle-sidebar="(state) => toggleSidebar(state)"
-				@show-filters="(state) => toggleFilters(state)"
-			/>
+			<Sidebar v-if="showSidebar" />
 		</transition>
 
-		<Header
-			@toggle-sidebar="(state) => toggleSidebar(state)"
-			@show-filters="(state) => toggleFilters(state)"
-		/>
+		<Header />
 
 		<p
 			v-if="config.showDisclaimer"
 			class="disclaimer"
-		>{{ config.disclaimer }}</p>
+			v-html="config.disclaimer"
+		/>
+
+		<p
+			v-if="config.showAnnouncement"
+			class="announcement"
+			v-html="config.announcement"
+		/>
 
 		<div
 			ref="content"
 			class="content"
 			@scroll="scroll"
 		>
-			<router-view @scroll="scrollToTop" />
+			<RouterView @scroll="scrollToTop" />
 		</div>
 
 		<Filters
 			v-if="showFilters"
 			@close="toggleFilters(false)"
 		/>
+
+		<Settings
+			v-if="showSettings"
+			@close="toggleSettings(false)"
+		/>
 	</div>
 </template>
 
@@ -45,6 +50,7 @@ import Warning from './warning.vue';
 import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
 import Filters from '../filters/filters.vue';
+import Settings from '../settings/settings.vue';
 
 function toggleSidebar(state) {
 	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
@@ -55,6 +61,11 @@ function toggleFilters(state) {
 	this.showSidebar = false;
 }
 
+function toggleSettings(state) {
+	this.showSettings = state;
+	this.showSidebar = false;
+}
+
 async function setConsent(consent, includeQueer) {
 	if (consent) {
 		this.showWarning = false;
@@ -62,7 +73,7 @@ async function setConsent(consent, includeQueer) {
 	}
 
 	if (includeQueer) {
-		this.$store.dispatch('setTagFilter', this.$store.state.ui.tagFilter.filter(tag => !['gay', 'bisexual', 'transsexual'].includes(tag)));
+		this.$store.dispatch('setTagFilter', this.$store.state.ui.tagFilter.filter((tag) => !['gay', 'bisexual', 'transsexual'].includes(tag)));
 		return;
 	}
 
@@ -88,6 +99,9 @@ function scrollToTop() {
 function mounted() {
 	document.addEventListener('click', this.blur);
 	window.addEventListener('resize', this.resize);
+
+	this.events.on('toggleSettings', this.toggleSettings);
+	this.events.on('toggleSidebar', this.toggleSidebar);
 }
 
 function beforeUnmount() {
@@ -101,12 +115,15 @@ export default {
 		Sidebar,
 		Warning,
 		Filters,
+		Settings,
 	},
 	data() {
 		return {
 			showSidebar: false,
 			showWarning: localStorage.getItem('consent') !== window.env.sessionId,
 			showFilters: false,
+			showSettings: false,
+			selected: null,
 		};
 	},
 	mounted,
@@ -114,6 +131,7 @@ export default {
 	methods: {
 		toggleSidebar,
 		toggleFilters,
+		toggleSettings,
 		setConsent,
 		blur,
 		resize,
@@ -183,13 +201,21 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-.disclaimer {
+.disclaimer,
+.announcement {
 	padding: .5rem 1rem;
 	margin: 0;
 	color: var(--text-light);
-	background: var(--warn);
 	font-weight: bold;
 	box-shadow: inset 0 0 3px var(--darken-weak);
 	text-align: center;
 }
+
+.disclaimer {
+	background: var(--warn);
+}
+
+.announcement {
+	background: var(--notice);
+}
 </style>

assets/components/entities/entity.vue

@@ -51,7 +51,7 @@
 				>{{ tag.name }}</li>
 			</ul>
 
-			<router-link
+			<RouterLink
 				v-if="entity.parent"
 				:to="`/${entity.parent.type}/${entity.parent.slug}`"
 				class="link link-parent"
@@ -74,7 +74,7 @@
 				>{{ entity.parent.name }}</h3>
 
 				<Icon icon="device_hub" />
-			</router-link>
+			</RouterLink>
 		</div>
 
 		<div
@@ -153,8 +153,8 @@ async function fetchEntity(scroll = true) {
 
 	this.pageTitle = entity.name;
 
-	const campaign = entity.campaigns.find(campaignX => !campaignX.banner)
-		|| entity.parent?.campaigns.find(campaignX => !campaignX.banner);
+	const campaign = entity.campaigns.find((campaignX) => !campaignX.banner)
+		|| entity.parent?.campaigns.find((campaignX) => !campaignX.banner);
 
 	const affiliateParams = new URLSearchParams({
 		...(entity.url && Object.fromEntries(new URL(entity.url).searchParams)), // preserve any query in entity URL, e.g. ?siteId=5

assets/components/entities/tile.vue

@@ -4,39 +4,49 @@
 		:title="entity.name"
 		class="tile"
 	>
-		<template v-if="entity.hasLogo">
-			<img
-				v-if="entity.type === 'network' || entity.independent"
-				:src="`/img/logos/${entity.slug}/thumbs/network.png`"
-				:alt="entity.name"
-				loading="lazy"
-				class="logo"
-				@load="$emit('load', $event)"
-			>
+		<div class="tile-logo">
+			<template v-if="entity.hasLogo">
+				<img
+					v-if="entity.type === 'network' || entity.independent"
+					:src="`/img/logos/${entity.slug}/thumbs/network.png`"
+					:alt="entity.name"
+					loading="lazy"
+					class="logo"
+					@load="$emit('load', $event)"
+				>
 
-			<img
-				v-else-if="entity.parent"
-				:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
-				:alt="entity.name"
-				loading="lazy"
-				class="logo"
-				@load="$emit('load', $event)"
-			>
+				<img
+					v-else-if="entity.parent"
+					:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
+					:alt="entity.name"
+					loading="lazy"
+					class="logo"
+					@load="$emit('load', $event)"
+				>
 
-			<img
+				<img
+					v-else
+					:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
+					:alt="entity.name"
+					loading="lazy"
+					class="logo"
+					@load="$emit('load', $event)"
+				>
+			</template>
+
+			<span
 				v-else
-				:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
-				:alt="entity.name"
-				loading="lazy"
-				class="logo"
-				@load="$emit('load', $event)"
-			>
-		</template>
+				class="name"
+			>{{ entity.name }}</span>
+		</div>
 
 		<span
-			v-else
-			class="name"
-		>{{ entity.name }}</span>
+			v-if="entity.childrenTotal > 0 || typeof entity.sceneTotal !== 'undefined'"
+			class="count"
+		>
+			<span v-if="typeof entity.sceneTotal !== 'undefined'">{{ entity.sceneTotal }} scenes</span>
+			<span v-if="entity.type === 'network'">{{ entity.childrenTotal }} channels</span>
+		</span>
 	</router-link>
 </template>
 
@@ -59,15 +69,28 @@ export default {
     height: 100%;
     background: var(--tile);
     display: flex;
+	flex-direction: column;
     flex-shrink: 0;
 	justify-content: center;
     align-items: center;
     box-sizing: border-box;
-    padding: .5rem 1rem;
     border-radius: .25rem;
+	position: relative;
     box-shadow: 0 0 3px rgba(0, 0, 0, .25);
     text-align: center;
     text-decoration: none;
+	overflow: hidden;
+
+	&:hover .count {
+		bottom: 0;
+	}
+}
+
+.tile-logo {
+	display: flex;
+	flex-grow: 1;
+    padding: .5rem 1rem;
+	overflow: hidden;
 }
 
 .logo {
@@ -75,6 +98,7 @@ export default {
 	max-height: 100%;
     display: flex;
     align-items: center;
+	align-self: center;
 }
 
 .name {
@@ -82,4 +106,20 @@ export default {
     font-size: 1.25rem;
     font-weight: bold;
 }
+
+.count {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	position: absolute;
+	bottom: -1.75rem;
+	box-sizing: border-box;
+	padding: .25rem .5rem;
+	background: var(--darken-strong);
+	box-shadow: 0 0 3px var(--darken);
+	color: var(--text-light);
+	text-align: center;
+	text-shadow: 1px 1px var(--darken);
+	transition: bottom .1s ease;
+}
 </style>

assets/components/filters/filter-bar.vue

@@ -1,31 +1,33 @@
 <template>
 	<div class="filter-bar noselect">
 		<div class="sort">
-			<router-link
+			<RouterLink
 				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"
-			>{{ section }}</router-link>
+			>{{ section }}</RouterLink>
 		</div>
 
+		<span
+			v-if="itemsTotal && showTotal"
+			class="total"
+		>{{ itemsTotal }} <template v-if="itemsTotal === 1">scene</template><template v-else>scenes</template></span>
+
 		<div class="filters">
 			<ActorFilter
 				class="filters-filter"
-				:filter="filter"
 				:available-actors="availableActors"
 			/>
 
 			<ChannelFilter
 				class="filters-filter"
-				:filter="filter"
 				:available-channels="availableChannels"
 			/>
 
 			<TagFilter
 				class="filters-filter"
-				:filter="filter"
 				:available-tags="availableTags"
 			/>
 		</div>
@@ -39,10 +41,6 @@ import ActorFilter from './actor-filter.vue';
 import ChannelFilter from './channel-filter.vue';
 import TagFilter from './tag-filter.vue';
 
-function filter(state) {
-	return state.ui.filter;
-}
-
 function range() {
 	return this.$route.params.range;
 }
@@ -78,6 +76,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		showTotal: {
+			type: Boolean,
+			default: true,
+		},
 		itemsTotal: {
 			type: Number,
 			default: 0,
@@ -105,7 +107,6 @@ export default {
 	},
 	computed: {
 		...mapState({
-			filter,
 			range,
 			batch,
 		}),
@@ -120,6 +121,43 @@ export default {
 <style lang="scss">
 @import 'breakpoints';
 
+.filter {
+	color: var(--shadow);
+	display: inline-flex;
+	align-items: center;
+
+	.filter-applied {
+		flex-grow: 1;
+		padding: .75rem .5rem;
+		font-size: 1rem;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-align: right;
+
+		&.empty {
+			color: var(--shadow);
+		}
+	}
+
+	.icon {
+		fill: var(--shadow);
+		margin: -.1rem 0 0 0;
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		.applied {
+			color: var(--shadow-strong);
+		}
+
+		.icon {
+			fill: var(--shadow-strong);
+		}
+	}
+}
+
 .filter-mode {
 	width: 100%;
 	color: var(--shadow);
@@ -240,6 +278,10 @@ export default {
 	.filters-filter:last-child .filter {
 		padding: .5rem 0 .5rem .5rem;
 	}
+
+	.total {
+		display: none;
+	}
 }
 </style>
 
@@ -261,43 +303,6 @@ export default {
     }
 }
 
-::v-deep(.filter) {
-	color: var(--shadow);
-	display: inline-flex;
-	align-items: center;
-
-	.filter-applied {
-		flex-grow: 1;
-		padding: .75rem .5rem;
-		font-size: 1rem;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		text-align: right;
-
-		&.empty {
-			color: var(--shadow);
-		}
-	}
-
-	.icon {
-		fill: var(--shadow);
-		margin: -.1rem 0 0 0;
-	}
-
-	&:hover {
-		cursor: pointer;
-
-		.applied {
-			color: var(--shadow-strong);
-		}
-
-		.icon {
-			fill: var(--shadow-strong);
-		}
-	}
-}
-
 .filters {
 	flex-shrink: 0;
 }
@@ -351,4 +356,11 @@ export default {
 		margin: 0 1rem 0 0;
 	}
 }
+
+.total {
+	flex-shrink: 0;
+	padding: 0 1rem;
+	color: var(--shadow);
+	font-size: .8rem;
+}
 </style>

assets/components/filters/tag-filter.vue

@@ -14,7 +14,7 @@
 			>Tags</div>
 		</div>
 
-		<template v-slot:tooltip>
+		<template #tooltip>
 			<div
 				class="filter-options"
 				@click.stop
@@ -70,7 +70,7 @@
 <script>
 function getNewRange(tag) {
 	if (this.selectedTags.includes(tag)) {
-		return { tags: this.selectedTags.filter(selectedTag => selectedTag !== tag).join(',') || undefined };
+		return { tags: this.selectedTags.filter((selectedTag) => selectedTag !== tag).join(',') || undefined };
 	}
 
 	return { tags: this.selectedTags.concat(tag).join(',') };
@@ -82,10 +82,6 @@ function selectedTags() {
 
 export default {
 	props: {
-		filter: {
-			type: Array,
-			default: () => [],
-		},
 		compact: {
 			type: Boolean,
 			default: false,

assets/components/home/home.vue

@@ -8,6 +8,7 @@
 				:items-total="totalCount"
 				:items-per-page="limit"
 				:content="$refs.content"
+				:show-total="false"
 			/>
 
 			<Releases

assets/components/releases/movie-tile.vue

@@ -14,6 +14,12 @@
 					loading="lazy"
 				>
 
+				<div
+					v-else
+					:title="movie.title"
+					class="unavailable"
+				><Icon icon="blocked" /></div>
+
 				<Icon
 					v-show="(!stash || stash.primary) && favorited"
 					icon="heart7"
@@ -161,7 +167,6 @@ export default {
 }
 
 .movie {
-	height: 16rem;
 	display: flex;
 }
 
@@ -171,18 +176,30 @@ export default {
 }
 
 .cover {
-	height: 100%;
+	height: 16rem;
+	width: 11.25rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
 	position: relative;
 	box-shadow: 0 0 3px var(--darken-weak);
+    background-color: var(--shadow-hint);
 
 	img {
 		height: 100%;
-		max-width: 12rem;
+		width: 100%;
 		background-position: center;
 		background-size: cover;
 		object-fit: cover;
 		object-position: center;
 	}
+
+	.unavailable .icon {
+		width: 2rem;
+		height: 2rem;
+		fill: var(--shadow-hint);
+	}
 }
 
 .info {
@@ -252,12 +269,12 @@ export default {
 }
 
 .stash {
-	width: 1.25rem;
-	height: 1.25rem;
-	padding: .25rem .5rem .5rem .25rem;
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: .25rem .5rem .5rem .5rem;
 	position: absolute;
 	top: 0;
-	right: 0;
+	left: 0;
 	fill: var(--lighten-weak);
 	filter: drop-shadow(0 0 2px var(--darken));
 
@@ -273,8 +290,9 @@ export default {
 }
 
 @media(max-width: $breakpoint-kilo) {
-	.movie {
+	.cover {
 		height: 12rem;
+		width: 8.25rem;
 	}
 
 	/* ensure no half actor names show */

assets/components/releases/movies.vue

@@ -3,6 +3,12 @@
 		<div class="content-inner">
 			<SearchBar :placeholder="`Search ${totalCount} movies`" />
 
+			<TagFilter
+				class="filters-filter"
+				:filter="filter"
+				:available-tags="availableTags"
+			/>
+
 			<div
 				ref="tiles"
 				class="tiles"
@@ -30,6 +36,7 @@
 import MovieTile from './movie-tile.vue';
 import SearchBar from '../search/bar.vue';
 import Pagination from '../pagination/pagination.vue';
+import TagFilter from '../filters/tag-filter.vue';
 
 async function fetchMovies() {
 	if (this.$route.query.query) {
@@ -73,6 +80,7 @@ export default {
 		MovieTile,
 		SearchBar,
 		Pagination,
+		TagFilter,
 	},
 	data() {
 		return {

assets/components/releases/release.vue

@@ -278,7 +278,7 @@ function bannerBackground() {
 function pageTitle() {
 	return this.release
 		&& (this.release.title
-		|| (this.release.actors.length > 0 ? `${this.release.actors.map(actor => actor.name).join(', ')} for ${this.release.entity.name}` : null));
+		|| (this.release.actors.length > 0 ? `${this.release.actors.map((actor) => actor.name).join(', ')} for ${this.release.entity.name}` : null));
 }
 
 function showAlbum() {

assets/components/releases/releases.vue

@@ -126,10 +126,29 @@ export default {
     font-weight: bold;
 }
 
+@media(max-width: $breakpoint-mega) {
+    .tiles {
+		grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
+    }
+}
+
 @media(max-width: $breakpoint-kilo) {
     .tiles {
+		grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
 		grid-gap: .5rem;
 		padding: .5rem;
     }
 }
+
+@media(max-width: $breakpoint) {
+    .tiles {
+		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    }
+}
+
+@media(max-width: $breakpoint-micro) {
+    .tiles {
+		grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
+    }
+}
 </style>

assets/components/releases/scene-tile.vue

@@ -113,21 +113,22 @@
 							:key="actor.id"
 							class="actor"
 						>
-							<router-link
+							<RouterLink
 								:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
+								:class="{ [actor.gender]: !!actor.gender }"
 								class="actor-link"
-							>{{ actor.name }}</router-link>
+							>{{ actor.name }}</RouterLink>
 						</li>
 					</ul>
 				</span>
 
 				<div class="labels">
-					<router-link
+					<RouterLink
 						v-if="release.shootId && release.studio"
 						:to="`/studio/${release.studio.slug}`"
 						:title="release.studio && release.studio.name"
 						class="shoot nolink"
-					>{{ release.shootId }}</router-link>
+					>{{ release.shootId }}</RouterLink>
 
 					<span
 						v-else-if="release.shootId"
@@ -145,10 +146,10 @@
 							:key="`tag-${tag.slug}`"
 							class="tag"
 						>
-							<router-link
+							<RouterLink
 								:to="`/tag/${tag.slug}`"
 								class="tag-link"
-							>{{ tag.name }}</router-link>
+							>{{ tag.name }}</RouterLink>
 						</li>
 					</ul>
 				</div>
@@ -233,20 +234,23 @@ export default {
     box-shadow: 0 0 3px var(--darken-weak);
 
 	&.new .poster::after {
-		content: '★';
+		content: 'new';
 		position: absolute;
-		top: 0;
-		left: 0;
-		width: 1rem;
-		height: 1rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		bottom: 0;
+		right: .5rem;
+		width: 2rem;
 		box-sizing: border-box;
-		margin: .25rem;
-		border-radius: 0 0 .5rem 0;
-		color: var(--primary);
-		font-size: 1rem;
+		padding: .1rem 0 .05rem 0;
+		border-radius: .25rem .25rem 0 0;
+		background: var(--info);
+		color: var(--text-light);
+		font-size: .7rem;
 		font-weight: bold;
 		line-height: 1;
-		text-shadow: 0 0 2px var(--darken-weak);
+		box-shadow: 0 0 3px var(--shadow);
 	}
 
 	&:hover .unstashed,
@@ -295,8 +299,8 @@ export default {
 }
 
 .stash {
-	width: 1.25rem;
-	height: 1.25rem;
+	width: 1.5rem;
+	height: 1.5rem;
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -317,17 +321,18 @@ export default {
 }
 
 .row {
+	max-width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
     padding: 0 .5rem;
-    margin: 0 0 .1rem 0;
 }
 
 .info {
     display: flex;
     flex-direction: column;
+	align-items: flex-start;
     flex-grow: 1;
 	overflow: hidden;
 }
@@ -339,7 +344,7 @@ export default {
 .title {
     margin: 0;
     color: var(--text);
-    font-size: 1rem;
+    font-size: .9rem;
     line-height: 1.5;
 	white-space: nowrap;
     text-overflow: ellipsis;
@@ -365,8 +370,9 @@ export default {
 }
 
 .actor-link {
-    color: var(--link);
+    color: var(--text);
     text-decoration: none;
+	font-size: .9rem;
 
     &:hover {
         color: var(--primary);
@@ -374,7 +380,7 @@ export default {
 }
 
 .labels {
-    padding: 0 .5rem 1.5rem .5rem;
+    padding: 0 .5rem 1.25rem .5rem;
     max-height: .5rem;
     overflow-y: hidden;
 	font-size: 0;
@@ -405,11 +411,11 @@ export default {
 }
 
 .tag-link {
-	background: var(--background);
+	background: var(--shadow-touch);
     color: var(--shadow);
     display: inline-block;
     padding: .25rem .5rem;
-	border: solid 1px var(--shadow-hint);
+	margin: 0 1px 0 0;
     font-size: .75rem;
     font-weight: bold;
     text-decoration: none;
@@ -421,14 +427,20 @@ export default {
 }
 
 .details-wide {
-	margin: 0 0 .5rem 0;
+	margin: 0 0 .4rem 0;
 }
 
 .details-compact {
 	display: none;
 }
 
-@media(max-width: $breakpoint-kilo) {
+@media(max-width: $breakpoint) {
+	.thumbnail {
+		height: 11rem;
+	}
+}
+
+@media(max-width: $breakpoint-micro) {
 	.tile-body {
 		flex-direction: row;
 	}
@@ -474,14 +486,15 @@ export default {
 	}
 
 	.tile.new .poster::after {
-		bottom: 0;
-		top: auto;
-		margin: .1rem .25rem;
+		top: 0;
+		right: .25rem;
+		bottom: auto;
+		border-radius: 0 0 .25rem .25rem;
+		padding: .05rem 0 .1rem 0;
 	}
 
 	.stash {
 		left: 0;
-		right: auto;
 		padding: .25rem .5rem .5rem .25rem;
 	}
 }

assets/components/releases/tile-details.vue

@@ -57,10 +57,7 @@
 			target="_blank"
 			rel="noopener noreferrer"
 			class="date"
-		><Icon
-			v-if="release.url"
-			icon="share2"
-		/>{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</a>
+		>{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }}</a>
 
 		<a
 			v-else
@@ -91,27 +88,17 @@ export default {
     width: 100%;
     display: flex;
     justify-content: space-between;
+	z-index: 1;
 	white-space: nowrap;
-    background: var(--profile);
+    background: var(--info);
     font-size: 0;
 	font-weight: bold;
 
     .favicon {
 		width: 2rem;
 		box-sizing: border-box;
-		padding: .5rem;
+		padding: .4rem .5rem;
     }
-
-	/*
-	&.new .date::before {
-		content: '';
-		width: .5rem;
-		height: .5rem;
-		border-radius: 50%;
-		margin: 0 .25rem 0 0;
-		background: var(--primary);
-	}
-	*/
 }
 
 .site,
@@ -120,7 +107,7 @@ export default {
     align-items: center;
     position: relative;
     font-size: .8rem;
-    padding: .5rem;
+    padding: .4rem .5rem;
     color: var(--text-light);
     text-decoration: none;
 

assets/components/tags/tags.vue

@@ -45,6 +45,8 @@ const tagSlugsByCategory = {
 		'teen',
 		'milf',
 		'blowjob',
+		'gay',
+		'transsexual',
 		'dp',
 		'gangbang',
 		'facial',
@@ -64,6 +66,11 @@ const tagSlugsByCategory = {
 		'tattoos',
 		'piercings',
 	],
+	sexuality: [
+		'gay',
+		'bisexual',
+		'transsexual',
+	],
 	oral: [
 		'blowjob',
 		'pussy-eating',
@@ -162,10 +169,18 @@ async function fetchTags() {
 
 	const tagsBySlug = tags.reduce((acc, tag) => ({ ...acc, [tag.slug]: tag }), {});
 
-	this.categories = Object.entries(tagSlugsByCategory).reduce((acc, [category, tagSlugs]) => ({
-		...acc,
-		[category]: tagSlugs.map(tagSlug => tagsBySlug[tagSlug]),
-	}), {});
+	this.categories = Object.entries(tagSlugsByCategory).reduce((acc, [category, tagSlugs]) => {
+		const categoryTags = tagSlugs.map((tagSlug) => tagsBySlug[tagSlug]).filter(Boolean);
+
+		if (categoryTags.length === 0) {
+			return acc;
+		}
+
+		return {
+			...acc,
+			[category]: categoryTags,
+		};
+	}, {});
 }
 
 async function searchTags() {
@@ -202,6 +217,7 @@ export default {
 	},
 	watch: {
 		$route: fetchTags,
+		'$store.state.ui.tagFilter': fetchTags,
 	},
 	mounted,
 	methods: {
@@ -212,7 +228,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .tags {
 	display: flex;
@@ -244,22 +260,81 @@ export default {
 	margin: 0 0 .25rem 0;
 }
 
-@media(max-width: $breakpoint3) {
+@media(max-width: $breakpoint-mega) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(18rem, .5fr));
+        grid-template-columns: repeat(auto-fill, minmax(17.75rem, .5fr));
     }
+
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 12rem;
+	}
+}
+
+@media(max-width: $breakpoint-kilo) {
+    .tiles {
+        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+		grid-gap: .5rem;
+    }
+
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 14rem;
+	}
 }
 
 @media(max-width: $breakpoint) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
 		grid-gap: .5rem;
     }
+
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 11rem;
+	}
 }
 
-@media(max-width: $breakpoint0) {
+@media(max-width: $breakpoint-small) {
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 10rem;
+	}
+}
+
+@media(max-width: $breakpoint-micro) {
     .tiles {
-        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
     }
+
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 7.5rem;
+	}
+}
+
+@media(max-width: $breakpoint-mini) {
+    .tiles {
+        grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
+    }
+
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 12rem;
+	}
+}
+
+@media(max-width: $breakpoint-nano) {
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 10rem;
+	}
+}
+
+@media(max-width: $breakpoint-pico) {
+	::v-deep(.poster),
+	::v-deep(.blank) {
+		height: 8rem;
+	}
 }
 </style>

assets/css/_inputs.scss

@@ -44,6 +44,11 @@
 	&:hover {
 		background: var(--primary-strong);
 	}
+
+	&:disabled {
+		background: var(--shadow-weak);
+		cursor: default;
+	}
 }
 
 .button-secondary {

assets/css/_theme.scss

@@ -5,10 +5,17 @@ $breakpoint3: 1200px;
 $breakpoint4: 1500px;
 
 :root {
+    --primary: #f65596;
+    --primary-strong: #f90071;
+    --primary-faded: #ffcce4;
+
+	/*
+    --primary: #f04288;
+
     --primary: #ff6c88;
     --primary-strong: #ff4166;
     --primary-faded: #ffdfee;
-	/*
+
     --primary: #f28;
     --primary-strong: #f90071;
     --primary-faded: #ffcce4;
@@ -39,6 +46,8 @@ $breakpoint4: 1500px;
     --logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
     --logo-highlight: drop-shadow(0 0 1px $highlight);
 
+    --info: #321b24;
+
     --male: #0af;
     --female: #f0a;
 

assets/js/actors/actions.js

@@ -281,7 +281,7 @@ function initActorActions(store, router) {
 
 		return {
 			actor: curateActor(actor, null, curateRelease),
-			releases: actor.scenesConnection.releases.map(release => curateRelease(release)),
+			releases: actor.scenesConnection.releases.map((release) => curateRelease(release)),
 			totalCount: actor.scenesConnection.totalCount,
 		};
 	}
@@ -429,7 +429,7 @@ function initActorActions(store, router) {
 		});
 
 		return {
-			actors: actors.map(actor => curateActor(actor)),
+			actors: actors.map((actor) => curateActor(actor)),
 			totalCount,
 			countries,
 		};

assets/js/auth/getters.js

@@ -1,5 +1,5 @@
 function favoritesStash(state) {
-	return state.user.stashes.find(stash => stash.slug === 'favorites');
+	return state.user.stashes.find((stash) => stash.slug === 'favorites');
 }
 
 module.exports = {

assets/js/curate.js

@@ -31,8 +31,8 @@ function curateActor(actor, release) {
 
 	if (actor.profiles) {
 		const photos = actor.profiles
-			.map(profile => ({ entity: profile.entity, ...profile.avatar }))
-			.filter(avatar => avatar.id && (!curatedActor.avatar || avatar.hash !== curatedActor.avatar.hash));
+			.map((profile) => ({ entity: profile.entity, ...profile.avatar }))
+			.filter((avatar) => avatar.id && (!curatedActor.avatar || avatar.hash !== curatedActor.avatar.hash));
 
 		const descriptions = actor.profiles.reduce((acc, profile) => ({
 			...acc,
@@ -57,10 +57,10 @@ function curateActor(actor, release) {
 	}
 
 	if (actor.stashes) {
-		curatedActor.stashes = actor.stashes.filter(Boolean).map(stash => curateStash(stash.stash || stash)); // eslint-disable-line no-use-before-define
+		curatedActor.stashes = actor.stashes.filter(Boolean).map((stash) => curateStash(stash.stash || stash)); // eslint-disable-line no-use-before-define
 	}
 
-	curatedActor.stashes = actor.stashes?.map(stash => stash.stash || stash) || [];
+	curatedActor.stashes = actor.stashes?.map((stash) => stash.stash || stash) || [];
 
 	return curatedActor;
 }
@@ -70,21 +70,21 @@ function curateRelease(release) {
 		...release,
 		actors: [],
 		poster: release.poster && release.poster.media,
-		tags: release.tags ? release.tags.map(tag => tag.tag || tag) : [],
+		tags: release.tags ? release.tags.map((tag) => tag.tag || tag) : [],
 	};
 
 	if (release.scenes) curatedRelease.scenes = release.scenes.filter(Boolean).map(({ scene }) => curateRelease(scene));
 	if (release.movies) curatedRelease.movies = release.movies.filter(Boolean).map(({ movie }) => curateRelease(movie));
-	if (release.chapters) curatedRelease.chapters = release.chapters.filter(Boolean).map(chapter => curateRelease(chapter));
-	if (release.photos) curatedRelease.photos = release.photos.filter(Boolean).map(photo => photo.media || photo);
+	if (release.chapters) curatedRelease.chapters = release.chapters.filter(Boolean).map((chapter) => curateRelease(chapter));
+	if (release.photos) curatedRelease.photos = release.photos.filter(Boolean).map((photo) => photo.media || photo);
 	if (release.covers) curatedRelease.covers = release.covers.filter(Boolean).map(({ media }) => media);
 	if (release.trailer) curatedRelease.trailer = release.trailer.media;
 	if (release.teaser) curatedRelease.teaser = release.teaser.media;
-	if (release.actors) curatedRelease.actors = release.actors.filter(Boolean).map(actor => curateActor(actor.actor || actor, curatedRelease));
-	if (release.directors) curatedRelease.directors = release.directors.filter(Boolean).map(director => curateActor(director.director || director, curatedRelease));
+	if (release.actors) curatedRelease.actors = release.actors.filter(Boolean).map((actor) => curateActor(actor.actor || actor, curatedRelease));
+	if (release.directors) curatedRelease.directors = release.directors.filter(Boolean).map((director) => curateActor(director.director || director, curatedRelease));
 	if (release.movieTags && release.movieTags.length > 0) curatedRelease.tags = release.movieTags.filter(Boolean).map(({ tag }) => tag);
 	if (release.movieActors && release.movieActors.length > 0) curatedRelease.actors = release.movieActors.filter(Boolean).map(({ actor }) => curateActor(actor, curatedRelease));
-	if (release.stashes) curatedRelease.stashes = release.stashes.filter(Boolean).map(stash => curateStash(stash.stash || stash)); // eslint-disable-line no-use-before-define
+	if (release.stashes) curatedRelease.stashes = release.stashes.filter(Boolean).map((stash) => curateStash(stash.stash || stash)); // eslint-disable-line no-use-before-define
 
 	if (release.productionLocation) {
 		curatedRelease.productionLocation = {
@@ -108,14 +108,16 @@ function curateEntity(entity, parent, releases) {
 
 	if (entity.children) {
 		if (entity.children.nodes) {
-			curatedEntity.children = entity.children.nodes.map(childEntity => curateEntity(childEntity, curatedEntity));
+			curatedEntity.children = entity.children.nodes.map((childEntity) => curateEntity(childEntity, curatedEntity));
 		}
 
 		curatedEntity.childrenTotal = entity.children.totalCount;
 	}
 
 	if (entity.parent || parent) curatedEntity.parent = curateEntity(entity.parent || parent);
-	if (releases) curatedEntity.releases = releases.map(release => curateRelease(release));
+	if (releases) curatedEntity.releases = releases.map((release) => curateRelease(release));
+
+	curatedEntity.sceneTotal = entity.sceneTotal;
 
 	return curatedEntity;
 }
@@ -138,7 +140,7 @@ function curateStash(stash) {
 
 	if (stash.scenes || stash.scenesConnection?.scenes) {
 		curatedStash.sceneTotal = stash.scenesConnection?.totalCount || null;
-		curatedStash.scenes = (stash.scenesConnection?.scenes || stash.scenes).map(item => ({
+		curatedStash.scenes = (stash.scenesConnection?.scenes || stash.scenes).map((item) => ({
 			...item,
 			scene: curateRelease(item.scene),
 		}));
@@ -146,7 +148,7 @@ function curateStash(stash) {
 
 	if (stash.actors || stash.actorsConnection?.actors) {
 		curatedStash.actorTotal = stash.actorsConnection?.totalCount || null;
-		curatedStash.actors = (stash.actorsConnection?.actors || stash.actors).map(item => ({
+		curatedStash.actors = (stash.actorsConnection?.actors || stash.actors).map((item) => ({
 			...item,
 			actor: curateActor(item.actor),
 		}));
@@ -154,7 +156,7 @@ function curateStash(stash) {
 
 	if (stash.movies || stash.moviesConnection?.movies) {
 		curatedStash.movieTotal = stash.moviesConnection?.totalCount || null;
-		curatedStash.movies = (stash.moviesConnection?.movies || stash.movies).map(item => ({
+		curatedStash.movies = (stash.moviesConnection?.movies || stash.movies).map((item) => ({
 			...item,
 			movie: curateRelease(item.movie),
 		}));
@@ -171,11 +173,11 @@ function curateAlert(alert) {
 	const curatedAlert = alert;
 
 	if (alert.actors) {
-		curatedAlert.actors = alert.actors.map(actor => curateActor(actor.actor || actor));
+		curatedAlert.actors = alert.actors.map((actor) => curateActor(actor.actor || actor));
 	}
 
 	if (alert.tags) {
-		curatedAlert.tags = alert.tags.map(tag => curateTag(tag.tag || tag));
+		curatedAlert.tags = alert.tags.map((tag) => curateTag(tag.tag || tag));
 	}
 
 	if (alert.entity) {
@@ -183,7 +185,7 @@ function curateAlert(alert) {
 	}
 
 	if (alert.stashes) {
-		curatedAlert.stashes = alert.stashes.map(stash => curateStash(stash.stash || stash));
+		curatedAlert.stashes = alert.stashes.map((stash) => curateStash(stash.stash || stash));
 	}
 
 	return curatedAlert;
@@ -197,11 +199,11 @@ function curateUser(user) {
 	const curatedUser = user;
 
 	if (user.stashes) {
-		curatedUser.stashes = user.stashes.map(stash => curateStash(stash.stash || stash));
+		curatedUser.stashes = user.stashes.map((stash) => curateStash(stash.stash || stash));
 	}
 
 	if (user.alerts) {
-		curatedUser.alerts = user.alerts.map(alert => curateAlert(alert.alert || alert));
+		curatedUser.alerts = user.alerts.map((alert) => curateAlert(alert.alert || alert));
 	}
 
 	return curatedUser;

assets/js/entities/actions.js

@@ -14,7 +14,7 @@ function initEntitiesActions(store, router) {
 	}) {
 		const { before, after, orderBy } = getDateRange(range);
 
-		const { entity, connection: { releases, totalCount } } = await graphql(`
+		const { entity } = await graphql(`
             query Entity(
                 $entitySlug: String!
                 $entityType: String! = "channel"
@@ -22,8 +22,6 @@ function initEntitiesActions(store, router) {
                 $offset: Int = 0,
                 $after: Datetime = "1900-01-01",
                 $before: Datetime = "2100-01-01",
-                $afterTime: Datetime = "1900-01-01",
-                $beforeTime: Datetime = "2100-01-01",
                 $orderBy: [ReleasesOrderBy!]
                 $exclude: [String!]
 				$hasAuth: Boolean!
@@ -64,6 +62,10 @@ function initEntitiesActions(store, router) {
 							independent
 							hasLogo
 							${campaignsFragment}
+							sceneTotal
+							children: childEntitiesConnection {
+								totalCount
+							}
 						}
                     }
 					${campaignsFragment}
@@ -77,82 +79,44 @@ function initEntitiesActions(store, router) {
 						hasLogo
 						${campaignsFragment}
                     }
-                }
-				connection: releasesConnection(
-					first: $limit
-					offset: $offset
-					orderBy: $orderBy
-					filter: {
-						and: [
-							{
-								entity: {
-									or: [
-										{
-											slug: { equalTo: $entitySlug }
-										},
-										{
-											parent: {
-												slug: { equalTo: $entitySlug }
-												type: { equalTo: $entityType }
-											}
-										},
-										{
-											parent: {
-												parent: {
-													slug: { equalTo: $entitySlug }
-													type: { equalTo: $entityType }
-												}
-											}
-										}
-										{
-											parent: {
-												parent: {
-													parent: {
-														slug: { equalTo: $entitySlug }
-														type: { equalTo: $entityType }
-													}
-												},
-											},
-										},
-									]
-								}
-							}
-							{
-								or: [
-									{
-										date: {
-											lessThan: $before,
-											greaterThan: $after
-										}
-									},
-									{
-										date: {
-											isNull: true
-										},
-										createdAt: {
-											lessThan: $beforeTime,
-											greaterThan: $afterTime,
-										}
+					connection: scenesConnection(
+						first: $limit
+						offset: $offset
+						orderBy: $orderBy
+						filter: {
+							or: [
+								{
+									date: {
+										isNull: ${entityType !== 'network'}
 									}
-								]
+								}
+								{
+									date: {
+										isNull: false
+									}
+								}
+							]
+							date: {
+								lessThan: $before,
+								greaterThan: $after
 							}
-						]
-						releasesTagsConnection: {
-							none: {
-								tag: {
-									slug: {
-										in: $exclude
+							releasesTagsConnection: {
+								none: {
+									tag: {
+										slug: {
+											in: $exclude
+										}
 									}
 								}
 							}
 						}
+					) {
+						releases: nodes {
+							${releaseFields}
+						}
+						totalCount
 					}
-				) {
-					releases: nodes {
-						${releaseFields}
-					}
-					totalCount
-				}
+                }
             }
         `, {
 			entitySlug,
@@ -162,8 +126,6 @@ function initEntitiesActions(store, router) {
 			after,
 			before,
 			orderBy,
-			afterTime: store.getters.after,
-			beforeTime: store.getters.before,
 			exclude: store.state.ui.tagFilter,
 			hasAuth: !!store.state.auth.user,
 			userId: store.state.auth.user?.id,
@@ -175,8 +137,8 @@ function initEntitiesActions(store, router) {
 		}
 
 		return {
-			entity: curateEntity(entity, null, releases),
-			totalCount,
+			entity: curateEntity(entity, null, entity.connection.releases),
+			totalCount: entity.connection.totalCount,
 		};
 	}
 
@@ -240,7 +202,7 @@ function initEntitiesActions(store, router) {
 			entitySlugs,
 		});
 
-		return entities.map(entity => curateEntity(entity));
+		return entities.map((entity) => curateEntity(entity));
 	}
 
 	async function searchEntities({ _commit }, { query, limit = 20 }) {
@@ -274,7 +236,7 @@ function initEntitiesActions(store, router) {
 			limit,
 		});
 
-		return entities.map(entity => curateEntity(entity));
+		return entities.map((entity) => curateEntity(entity));
 	}
 
 	return {

assets/js/format.js

@@ -5,7 +5,7 @@ export function formatDuration(duration, forceHours) {
 	const minutes = Math.floor((duration % 3600) / 60);
 	const seconds = Math.floor(duration % 60);
 
-	const [formattedHours, formattedMinutes, formattedSeconds] = [hours, minutes, seconds].map(segment => segment.toString().padStart(2, '0'));
+	const [formattedHours, formattedMinutes, formattedSeconds] = [hours, minutes, seconds].map((segment) => segment.toString().padStart(2, '0'));
 
 	if (duration >= 3600 || forceHours) {
 		return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;

assets/js/fragments.js

@@ -125,7 +125,7 @@ const movieFields = `
 			type
 		}
 	}
-	covers: moviesCovers {
+	covers: moviesCovers(orderBy: MEDIA_BY_MEDIA_ID__INDEX_ASC) {
 		media {
 			id
 			path
@@ -260,7 +260,7 @@ const releaseTagsFragment = `
 `;
 
 const releasePosterFragment = `
-    poster: releasesPosterByReleaseId {
+    poster: releasesPoster {
         media {
 			id
             index
@@ -335,7 +335,7 @@ const releasePhotosFragment = `
 `;
 
 const releaseTrailerFragment = `
-    trailer: releasesTrailerByReleaseId {
+    trailer: releasesTrailer {
         media {
 			id
             index
@@ -349,7 +349,7 @@ const releaseTrailerFragment = `
 `;
 
 const releaseTeaserFragment = `
-    teaser: releasesTeaserByReleaseId {
+    teaser: releasesTeaser {
         media {
 			id
             index
@@ -487,7 +487,7 @@ const releaseFragment = `
 				slug
 			}
 		}
-		poster: chaptersPosterByChapterId {
+		poster: chaptersPoster {
 			media {
 				id
 				index
@@ -516,7 +516,7 @@ const releaseFragment = `
 			id
 			title
 			slug
-			covers: moviesCovers {
+			covers: moviesCovers(orderBy: MEDIA_BY_MEDIA_ID__INDEX_ASC) {
 				media {
 					id
 					index

assets/js/get-date-range.js

@@ -7,12 +7,12 @@ const dateRanges = {
 	latest: () => ({
 		after: '1900-01-01',
 		before: dayjs.utc().toDate(),
-		orderBy: ['DATE_DESC', 'CREATED_AT_DESC'],
+		orderBy: ['DATE_DESC'],
 	}),
 	upcoming: () => ({
 		after: dayjs.utc().toDate(),
 		before: '2100-01-01',
-		orderBy: ['DATE_ASC', 'CREATED_AT_ASC'],
+		orderBy: ['DATE_DESC'],
 	}),
 	new: () => ({
 		after: '1900-01-01 00:00:00',
@@ -22,35 +22,10 @@ const dateRanges = {
 	all: () => ({
 		after: '1900-01-01',
 		before: '2100-01-01',
-		orderBy: ['DATE_DESC', 'CREATED_AT_DESC'],
+		orderBy: ['DATE_DESC'],
 	}),
 };
 
-/* requires PostgreSQL 12.x> not available in production yet
-const dateRanges = {
-	latest: () => ({
-		after: '1900-01-01',
-		before: dayjs.utc().toDate(),
-		orderBy: ['EFFECTIVE_DATE_DESC'],
-	}),
-	upcoming: () => ({
-		after: dayjs.utc().toDate(),
-		before: '2100-01-01',
-		orderBy: ['EFFECTIVE_DATE_DESC'],
-	}),
-	new: () => ({
-		after: '1900-01-01 00:00:00',
-		before: '2100-01-01',
-		orderBy: ['CREATED_AT_DESC', 'EFFECTIVE_DATE_ASC'],
-	}),
-	all: () => ({
-		after: '1900-01-01',
-		before: '2100-01-01',
-		orderBy: ['EFFECTIVE_DATE_DESC'],
-	}),
-};
-*/
-
 function getDateRange(range) {
 	return (dateRanges[range] || dateRanges.all)();
 }

assets/js/main.js

@@ -109,6 +109,10 @@ async function init() {
 				document.title = 'traxxx';
 			},
 		},
+		beforeCreate() {
+			this.uid = uid;
+			uid += 1;
+		},
 		methods: {
 			formatDate,
 			formatDuration,
@@ -117,10 +121,6 @@ async function init() {
 			getPath,
 			getBgPath: (media, type) => `url(${getPath(media, type)})`,
 		},
-		beforeCreate() {
-			this.uid = uid;
-			uid += 1;
-		},
 	});
 
 	app.directive('tooltip', {

assets/js/releases/actions.js

@@ -37,7 +37,7 @@ function initReleasesActions(store, router) {
 		});
 
 		return {
-			releases: releases.map(release => curateRelease(release)),
+			releases: releases.map((release) => curateRelease(release)),
 			totalCount,
 		};
 	}
@@ -99,7 +99,7 @@ function initReleasesActions(store, router) {
 		});
 
 		return {
-			movies: movies.map(release => curateRelease(release)),
+			movies: movies.map((release) => curateRelease(release)),
 			totalCount,
 		};
 	}
@@ -110,6 +110,8 @@ function initReleasesActions(store, router) {
                 $query: String!
                 $limit:Int = 20
                 $offset:Int = 0
+				$hasAuth: Boolean!
+				$userId: Int
             ) {
 				connection: searchMoviesConnection(
                     query: $query
@@ -126,6 +128,8 @@ function initReleasesActions(store, router) {
                 }
             }
         `, {
+			hasAuth: !!store.state.auth.user,
+			userId: store.state.auth.user?.id,
 			query,
 			limit,
 			offset: Math.max(0, (pageNumber - 1)) * limit,
@@ -178,7 +182,7 @@ function initReleasesActions(store, router) {
 							isS3
 						}
 					}
-					poster: moviesPosterByMovieId {
+					poster: moviesPoster {
 						media {
 							id
 							path
@@ -191,7 +195,7 @@ function initReleasesActions(store, router) {
 							isS3
 						}
 					}
-					covers: moviesCovers {
+					covers: moviesCovers(orderBy: MEDIA_BY_MEDIA_ID__INDEX_ASC) {
 						media {
 							id
 							path
@@ -204,7 +208,7 @@ function initReleasesActions(store, router) {
 							isS3
 						}
 					}
-					trailer: moviesTrailerByMovieId {
+					trailer: moviesTrailer {
 						media {
 							id
 							path

assets/js/router.js

@@ -74,7 +74,7 @@ const routes = [
 	{
 		path: '/actor/:actorId/:actorSlug',
 		name: 'actor',
-		redirect: from => ({
+		redirect: (from) => ({
 			name: 'actorRange',
 			params: {
 				...from.params,
@@ -91,7 +91,7 @@ const routes = [
 	{
 		path: '/director/:actorId/:actorSlug',
 		name: 'director',
-		redirect: from => ({
+		redirect: (from) => ({
 			name: 'directorRange',
 			params: {
 				...from.params,
@@ -107,7 +107,7 @@ const routes = [
 	},
 	{
 		path: '/channel/:entitySlug',
-		redirect: from => ({
+		redirect: (from) => ({
 			name: 'channel',
 			params: {
 				...from.params,
@@ -123,7 +123,7 @@ const routes = [
 	},
 	{
 		path: '/network/:entitySlug',
-		redirect: from => ({
+		redirect: (from) => ({
 			name: 'network',
 			params: {
 				...from.params,
@@ -139,7 +139,7 @@ const routes = [
 	},
 	{
 		path: '/studio/:entitySlug',
-		redirect: from => ({
+		redirect: (from) => ({
 			name: 'studio',
 			params: {
 				...from.params,
@@ -155,7 +155,7 @@ const routes = [
 	},
 	{
 		path: '/tag/:tagSlug',
-		redirect: from => ({
+		redirect: (from) => ({
 			name: 'tag',
 			params: {
 				...from.params,
@@ -171,7 +171,7 @@ const routes = [
 	},
 	{
 		path: '/actors',
-		redirect: from => ({
+		redirect: (from) => ({
 			name: 'actors',
 			params: {
 				...from.params,
@@ -229,7 +229,7 @@ const routes = [
 	},
 	{
 		path: '/stash/:stashId/:stashSlug',
-		redirect: from => ({
+		redirect: (from) => ({
 			name: 'stash',
 			params: {
 				...from.params,

assets/js/tags/actions.js

@@ -35,7 +35,7 @@ function initTagsActions(store, _router) {
                         name
                         slug
                     }
-                    poster: tagsPosterByTagId {
+                    poster: tagsPoster {
                         media {
                             id
                             thumbnail
@@ -188,14 +188,14 @@ function initTagsActions(store, _router) {
 			before,
 			orderBy,
 			offset: Math.max(0, (pageNumber - 1)) * limit,
-			exclude: store.state.ui.tagFilter.filter(tagFilter => tagFilter !== tagSlug),
+			exclude: store.state.ui.tagFilter.filter((tagFilter) => tagFilter !== tagSlug),
 			hasAuth: !!store.state.auth.user,
 			userId: store.state.auth.user?.id,
 		});
 
 		return {
 			tag: curateTag(tagBySlug, null, curateRelease),
-			releases: tagBySlug.scenesConnection.releases.map(release => curateRelease(release)),
+			releases: tagBySlug.scenesConnection.releases.map((release) => curateRelease(release)),
 			totalCount: tagBySlug.scenesConnection.totalCount,
 		};
 	}
@@ -210,15 +210,21 @@ function initTagsActions(store, _router) {
             query Tags(
                 $slugs: [String!] = [],
                 $limit: Int = 100
+                $exclude: [String!]
             ) {
                 tags(
-                    filter: { slug: { in: $slugs } },
+                    filter: {
+						slug: {
+							in: $slugs
+							notIn: $exclude
+						}
+					},
                     first: $limit
                 ) {
                     id
                     name
                     slug
-                    poster: tagsPosterByTagId {
+                    poster: tagsPoster {
                         media {
                             thumbnail
                             comment
@@ -257,9 +263,10 @@ function initTagsActions(store, _router) {
         `, {
 			slugs,
 			limit,
+			exclude: store.state.ui.tagFilter,
 		});
 
-		return tags.map(tag => curateTag(tag, store.state.ui.sfw));
+		return tags.map((tag) => curateTag(tag, store.state.ui.sfw));
 	}
 
 	async function searchTags({ _commit }, {
@@ -283,7 +290,7 @@ function initTagsActions(store, _router) {
                     id
                     name
                     slug
-                    poster: tagsPosterByTagId {
+                    poster: tagsPoster {
                         media {
                             thumbnail
                             comment
@@ -325,7 +332,7 @@ function initTagsActions(store, _router) {
 			minLength,
 		});
 
-		return tags.map(tag => curateTag(tag, store.state.ui.sfw));
+		return tags.map((tag) => curateTag(tag, store.state.ui.sfw));
 	}
 
 	async function fetchTagReleases({ _commit }, tagId) {

assets/js/ui/actions.js

@@ -70,7 +70,7 @@ function initUiActions(store, _router) {
 									slug
 								}
 							}
-							entity: alertsEntityByAlertId {
+							entity: alertsEntity {
 								entity {
 									id
 									name
@@ -103,7 +103,7 @@ function initUiActions(store, _router) {
 			};
 		}
 
-		const curatedNotifications = notifications.nodes.map(notification => curateNotification(notification));
+		const curatedNotifications = notifications.nodes.map((notification) => curateNotification(notification));
 
 		return {
 			notifications: curatedNotifications,
@@ -222,8 +222,8 @@ function initUiActions(store, _router) {
 		});
 
 		return {
-			releases: res?.results.map(result => curateRelease(result.release)) || [],
-			actors: res?.actors.map(actor => curateActor(actor)) || [],
+			releases: res?.results.map((result) => curateRelease(result.release)) || [],
+			actors: res?.actors.map((actor) => curateActor(actor)) || [],
 		};
 	}
 

assets/js/ui/observers.js

@@ -3,7 +3,7 @@ async function initUiObservers(store, _router) {
 
 	body.classList.add(store.state.ui.theme);
 
-	store.watch(state => state.ui.theme, (newTheme, oldTheme) => {
+	store.watch((state) => state.ui.theme, (newTheme, oldTheme) => {
 		body.classList.add(newTheme);
 		body.classList.remove(oldTheme);
 	});

assets/js/users/actions.js

@@ -90,7 +90,7 @@ function initUsersActions(store, _router) {
 								${actorFields}
 							}
 						}
-						entity: alertsEntityByAlertId {
+						entity: alertsEntity {
 							entity {
 								id
 								name

config/default.js

@@ -66,10 +66,7 @@ module.exports = {
 			// pornpros
 			'milfhumiliation',
 			'humiliated',
-			'flexiblepositions',
-			'publicviolations',
 			'amateurviolations',
-			'squirtdisgrace',
 			'cumdisgrace',
 			'webcamhackers',
 			'collegeteens',
@@ -301,10 +298,6 @@ module.exports = {
 			interval: 1000,
 			concurrency: 1,
 		},
-		'www.realitykings.com': {
-			interval: 1000,
-			concurrency: 1,
-		},
 		'westcoastproductions.com': {
 			interval: 100,
 			concurrency: 1,
@@ -316,8 +309,15 @@ module.exports = {
 	},
 	fetchAfter: [1, 'week'],
 	missingDateLimit: 3,
+	memorySampling: {
+		enabled: false,
+		sampleDuration: 300000, // 5 minutes
+		snapshotIntervals: [],
+	},
 	media: {
 		path: './media',
+		maxSize: 1000,
+		quality: 80,
 		thumbnailSize: 320, // width for 16:9 will be exactly 576px
 		thumbnailQuality: 100,
 		lazySize: 90,

migrations/20190325001339_releases.js

@@ -1,6 +1,6 @@
 const config = require('config');
 
-exports.up = knex => Promise.resolve()
+exports.up = (knex) => Promise.resolve()
 	.then(() => knex.schema.createTable('countries', (table) => {
 		table.text('alpha2', 2)
 			.unique()

migrations/20211030162955_entity_scenes.js

@@ -0,0 +1,29 @@
+exports.up = async (knex) => knex.raw(`
+	CREATE FUNCTION entities_scenes(entity entities) RETURNS SETOF releases AS $$
+		WITH RECURSIVE children AS (
+			SELECT entities.id
+				FROM entities
+				WHERE entities.id = entity.id
+
+				UNION ALL
+
+				SELECT entities.id
+				FROM entities
+				INNER JOIN children ON children.id = entities.parent_id
+		)
+
+		SELECT releases FROM releases
+		INNER JOIN children ON children.id = releases.entity_id
+
+		UNION
+
+		SELECT releases FROM releases
+		INNER JOIN children ON children.id = releases.studio_id;
+	$$ LANGUAGE SQL STABLE;
+
+	COMMENT ON FUNCTION entities_scenes IS E'@sortable';
+`);
+
+exports.down = async (knex) => knex.raw(`
+	DROP FUNCTION IF EXISTS entities_scenes;
+`);

migrations/20220123234131_scene_indexes.js

@@ -0,0 +1,15 @@
+exports.up = async (knex) => Promise.resolve()
+	.then(() => knex.schema.alterTable('releases_tags', (table) => {
+		table.index('release_id');
+	}))
+	.then(() => knex.schema.alterTable('movies_scenes', (table) => {
+		table.index('scene_id');
+	}));
+
+exports.down = async (knex) => Promise.resolve()
+	.then(() => knex.schema.alterTable('releases_tags', (table) => {
+		table.dropIndex('release_id');
+	}))
+	.then(() => knex.schema.alterTable('movies_scenes', (table) => {
+		table.dropIndex('scene_id');
+	}));

migrations/20220126132955_scene_counts.js

@@ -0,0 +1,11 @@
+exports.up = async (knex) => knex.raw(`
+	CREATE OR REPLACE FUNCTION entities_scene_total(entity entities) RETURNS integer AS $$
+		SELECT COUNT(id)
+		FROM releases
+		WHERE releases.entity_id = entity.id;
+	$$ LANGUAGE SQL STABLE;
+`);
+
+exports.down = async (knex) => knex.raw(`
+	DROP FUNCTION IF EXISTS entities_scene_total;
+`);

migrations/20220209010315_movies_tags.js

@@ -0,0 +1,8 @@
+exports.up = async (knex) => knex.raw(`
+	CREATE VIEW movies_tagged AS
+		SELECT * FROM movies;
+`);
+
+exports.down = async (knex) => knex.raw(`
+	DROP VIEW IF EXISTS movies_tagged;
+`);

package.json

@@ -1,13 +1,13 @@
 {
     "name": "traxxx",
-    "version": "1.200.2",
+    "version": "1.209.4",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {
         "start": "node -r source-map-support/register src/init.js",
         "webpack": "webpack --env=production --mode=production",
         "webpack-dev": "webpack --env=development --mode=development",
-        "webpack-watch": "webpack --progress --colors --watch --env=development --mode=development",
+        "webpack-watch": "webpack --progress --color --watch --env=development --mode=development",
         "babel": "babel src --source-maps -d dist",
         "babel-watch": "babel src -w --source-maps -d dist",
         "build": "babel src --source-maps -d dist && webpack --env=production --mode=production",
@@ -40,38 +40,37 @@
     "devDependencies": {
         "@babel/cli": "^7.12.10",
         "@babel/core": "^7.8.4",
+        "@babel/eslint-parser": "^7.16.0",
         "@babel/plugin-proposal-optional-chaining": "^7.8.3",
         "@babel/preset-env": "^7.8.4",
         "@babel/register": "^7.8.3",
-        "@vue/compiler-sfc": "^3.0.4",
-        "autoprefixer": "^9.7.4",
-        "babel-eslint": "^10.1.0",
+        "autoprefixer": "^10.4.0",
         "babel-loader": "^8.0.6",
-        "babel-preset-airbnb": "^3.3.2",
-        "css-loader": "^5.0.1",
-        "eslint": "^7.20.0",
-        "eslint-config-airbnb": "^17.1.1",
-        "eslint-config-airbnb-base": "^13.2.0",
+        "babel-preset-airbnb": "^5.0.0",
+        "css-loader": "^6.5.0",
+        "eslint": "^8.1.0",
+        "eslint-config-airbnb": "^18.2.1",
+        "eslint-config-airbnb-base": "^14.2.1",
         "eslint-plugin-import": "^2.20.1",
         "eslint-plugin-jsx-a11y": "^6.2.3",
         "eslint-plugin-react": "^7.18.3",
-        "eslint-plugin-vue": "^6.2.1",
-        "eslint-watch": "^4.0.2",
-        "eslint-webpack-plugin": "^2.5.2",
-        "mini-css-extract-plugin": "^1.3.3",
-        "node-sass": "^5.0.0",
-        "postcss-loader": "^3.0.0",
+        "eslint-plugin-vue": "^8.0.3",
+        "eslint-watch": "^7.0.0",
+        "eslint-webpack-plugin": "^3.1.0",
+        "mini-css-extract-plugin": "^2.4.3",
+        "node-sass": "^6.0.1",
+        "postcss-loader": "^6.2.0",
         "raw-loader": "^4.0.2",
-        "sass-loader": "^11.0.1",
-        "style-loader": "^0.23.1",
-        "vue-loader": "^16.1.2",
+        "sass-loader": "^12.3.0",
+        "style-loader": "^3.3.1",
+        "vue-loader": "^16.8.2",
         "webpack": "^5.11.0",
-        "webpack-cli": "^3.3.11"
+        "webpack-cli": "^4.9.1"
     },
     "dependencies": {
         "@casl/ability": "^5.2.2",
         "@graphile-contrib/pg-order-by-related": "^1.0.0-beta.6",
-        "@graphile-contrib/pg-simplify-inflector": "^5.0.0-beta.1",
+        "@graphile-contrib/pg-simplify-inflector": "^6.1.0",
         "acorn": "^8.0.4",
         "array-equal": "^1.0.0",
         "aws-sdk": "^2.847.0",
@@ -88,63 +87,62 @@
         "cloudscraper": "^4.6.0",
         "config": "^3.2.5",
         "connect-session-knex": "^2.0.0",
-        "convert": "^1.6.2",
+        "convert": "^4.2.4",
         "cookie": "^0.4.0",
         "csv-stringify": "^5.3.6",
         "dayjs": "^1.8.21",
         "dompurify": "^2.0.11",
         "ejs": "^3.0.1",
         "express": "^4.17.1",
-        "express-promise-router": "^3.0.3",
+        "express-promise-router": "^4.1.0",
         "express-react-views": "^0.11.0",
         "express-session": "^1.17.1",
         "face-api.js": "^0.22.2",
         "faker": "^5.1.0",
-        "file-type": "^14.1.4",
+        "file-type": "^16.5.3",
         "fluent-ffmpeg": "^2.1.2",
-        "fs-extra": "^7.0.1",
-        "graphile-utils": "^4.5.6",
-        "graphql": "^14.6.0",
+        "fs-extra": "^10.0.0",
+        "graphile-utils": "^4.12.2",
+        "graphql": "^15.4.0",
         "html-entities": "^2.3.2",
-        "iconv-lite": "^0.5.1",
-        "inquirer": "^7.3.3",
+        "iconv-lite": "^0.6.3",
+        "inquirer": "^8.2.0",
         "inspector-api": "^1.4.2",
-        "jsdom": "^16.3.0",
-        "knex": "^0.21.13",
+        "jsdom": "^18.0.0",
+        "knex": "^0.95.12",
         "knex-migrate": "^1.7.4",
         "longjohn": "^0.2.12",
         "mime": "^2.4.4",
-        "mitt": "^2.1.0",
+        "mitt": "^3.0.0",
         "moment": "^2.24.0",
-        "nanoid": "^2.1.11",
+        "nanoid": "^3.1.30",
+        "node-fetch": "^2.6.7",
         "object-merge-advanced": "^12.1.0",
         "object.omit": "^3.0.0",
-        "opn": "^5.5.0",
+        "opn": "^6.0.0",
         "pg": "^8.5.1",
         "postgraphile": "^4.10.0",
-        "postgraphile-plugin-connection-filter": "^1.1.3",
+        "postgraphile-plugin-connection-filter": "^2.2.2",
         "promise-task-queue": "^1.2.0",
         "prop-types": "^15.7.2",
-        "react": "^16.13.0",
-        "react-dom": "^16.13.0",
-        "sharp": "^0.27.2",
+        "sharp": "^0.29.2",
         "showdown": "^1.9.1",
         "source-map-support": "^0.5.16",
         "template-format": "^1.2.5",
         "tippy.js": "^6.3.1",
-        "tough-cookie": "^3.0.1",
-        "tty-table": "^2.8.12",
+        "tough-cookie": "^4.0.0",
         "tunnel": "0.0.6",
+        "undici": "^4.13.0",
         "url-pattern": "^1.0.3",
         "v-tooltip": "^2.0.3",
         "video.js": "^7.11.4",
         "videojs-vr": "^1.7.1",
-        "vue": "^3.0.4",
-        "vue-router": "^4.0.1",
-        "vuex": "^4.0.0-rc.2",
+        "vue": "^3.2.20",
+        "vue-router": "^4.0.12",
+        "vuex": "^4.0.2",
         "why-is-node-running": "^2.2.0",
         "winston": "^3.2.1",
         "winston-daily-rotate-file": "^4.4.2",
-        "yargs": "^13.3.0"
+        "yargs": "^17.2.1"
     }
 }