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,9 +2,12 @@ node_modules/
 dist/
 log/
 media/
+html/
 public/js/*
 public/css/*
 config/*
 !config/default.js
 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"
@@ -361,7 +361,10 @@
 					:available-actors="actor.actors"
 				/>
 
-				<Releases :releases="releases" />
+				<Releases
+					:releases="releases"
+					:done="done"
+				/>
 
 				<Pagination
 					:items-total="totalCount"
@@ -389,6 +392,8 @@ import Social from './social.vue';
 import StashButton from '../stashes/button.vue';
 
 async function fetchActor(scroll = true) {
+	this.done = false;
+
 	const { actor, releases, totalCount } = await this.$store.dispatch('fetchActorById', {
 		actorId: Number(this.$route.params.actorId),
 		limit: this.limit,
@@ -400,6 +405,7 @@ async function fetchActor(scroll = true) {
 	this.releases = releases;
 	this.totalCount = totalCount;
 	this.stashedBy = actor.stashes;
+	this.done = true;
 
 	if (this.$refs.filter && scroll) {
 		this.$refs.filter.$el.scrollIntoView();
@@ -463,6 +469,7 @@ export default {
 		return {
 			actor: null,
 			releases: null,
+			done: false,
 			totalCount: 0,
 			limit: 20,
 			pageTitle: null,

assets/components/actors/actors.vue

@@ -237,7 +237,10 @@
 			<SearchBar :placeholder="`Search ${totalCount} actors`" />
 		</nav>
 
-		<div class="tiles">
+		<div
+			ref="tiles"
+			class="tiles"
+		>
 			<Actor
 				v-for="actor in actors"
 				:key="`actor-${actor.id}`"
@@ -269,7 +272,7 @@ import Pagination from '../pagination/pagination.vue';
 
 const toggleValues = [true, null, false];
 const boobSizes = 'ABCDEFGHIJKZ'.split('');
-const topCountries = ['AU', 'BR', 'DE', 'RU', 'GB', 'US'];
+const topCountries = ['AU', 'BR', 'CZ', 'DE', 'JP', 'RU', 'GB', 'US'];
 
 function updateFilters() {
 	this.$router.push({
@@ -325,8 +328,7 @@ async function fetchActors(scroll) {
 	this.topCountries = [...(this.country && !topCountries.includes(this.country) ? [this.country] : []), ...topCountries].map(alpha2 => countriesByAlpha2[alpha2]);
 
 	if (scroll) {
-		this.$refs.content.scrollTop = 0;
-		// this.$refs.filter?.scrollIntoView();
+		this.$refs.tiles?.scrollIntoView();
 	}
 }
 
@@ -440,6 +442,7 @@ export default {
     display: flex;
     flex-direction: column;
 	flex-grow: 1;
+	overflow-y: auto;
 }
 
 .tiles {

assets/components/actors/tile.vue

@@ -3,7 +3,7 @@
 		v-if="actor"
 		class="actor"
 	>
-		<router-link
+		<RouterLink
 			:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
 			class="link"
 		>
@@ -15,7 +15,7 @@
 					class="name"
 				>{{ actor.name }}</span>
 
-				<router-link
+				<RouterLink
 					v-if="actor.entity"
 					v-tooltip="actor.entity.name"
 					:to="{ name: actor.entity.type, params: { entitySlug: actor.entity.slug, range: 'new', pageNumber: 1 } }"
@@ -25,7 +25,7 @@
 						:src="`/img/logos/${actor.entity.slug}/favicon_dark.png`"
 						class="favicon-icon"
 					>
-				</router-link>
+				</RouterLink>
 
 				<Icon
 					v-if="alias"
@@ -60,19 +60,26 @@
 				></span>
 
 				<Icon
-					v-show="favorited"
+					v-show="(!stash || stash.primary) && favorited"
 					icon="heart7"
 					class="stash stashed"
 					@click.prevent.native="unstashActor"
 				/>
 
 				<Icon
-					v-show="favorited === false"
+					v-show="(!stash || stash.primary) && favorited === false"
 					icon="heart8"
 					class="stash unstashed"
 					@click.prevent.native="stashActor"
 				/>
 
+				<Icon
+					v-show="stash && !stash.primary"
+					icon="cross2"
+					class="stash unstash"
+					@click.prevent.native="unstashActor"
+				/>
+
 				<span
 					class="details"
 				>
@@ -122,7 +129,7 @@
 					/>
 				</span>
 			</div>
-		</router-link>
+		</RouterLink>
 	</div>
 </template>
 
@@ -145,12 +152,14 @@ async function stashActor() {
 }
 
 async function unstashActor() {
-	this.favorited = false;
+	if (!this.stash || this.stash.primary) {
+		this.favorited = false;
+	}
 
 	try {
 		await this.$store.dispatch('unstashActor', {
 			actorId: this.actor.id,
-			stashId: this.$store.getters.favorites.id,
+			stashId: this.stash?.id || this.$store.getters.favorites.id,
 		});
 
 		this.$emit('stash', false);
@@ -176,6 +185,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
 	},
 	emits: ['stash'],
 	data() {
@@ -201,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 {
@@ -209,6 +222,11 @@ export default {
         display: inline-block;
         padding-bottom: 150%;
     }
+
+	&:hover .unstashed,
+	&:hover .unstash {
+		fill: var(--lighten);
+	}
 }
 
 .link {
@@ -219,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 {
@@ -235,7 +249,8 @@ export default {
 	box-shadow: 0 0 3px var(--shadow);
 
 	.name {
-		padding: .5rem;
+		padding: .25rem .5rem;
+		font-size: .9rem;
 	}
 
 	.alias {
@@ -298,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;
@@ -307,10 +322,15 @@ export default {
 	fill: var(--lighten-weak);
 	filter: drop-shadow(0 0 2px var(--darken));
 
-	&:hover,
+	&:hover.unstashed,
 	&.stashed {
 		fill: var(--primary);
 	}
+
+	&:hover.unstash {
+		fill: var(--text-light);
+		filter: drop-shadow(0 0 2px var(--darken-weak));
+	}
 }
 
 .details {

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/alerts/search.vue

@@ -43,11 +43,12 @@
 <script>
 async function search() {
 	if (this.content === 'actors') {
-		this.results = await this.$store.dispatch('searchActors', {
+		const { actors } = await this.$store.dispatch('fetchActors', {
 			query: this.query,
-			minLength: 1,
 			limit: 10,
 		});
+
+		this.results = actors;
 	}
 
 	if (this.content === 'entities') {

assets/components/auth/login.vue

@@ -35,11 +35,11 @@
 				class="button button-primary"
 			>Log in</button>
 
-			<router-link
+			<RouterLink
 				v-if="$store.state.auth.signup"
 				:to="{ name: 'signup', query: { ref: $route.query.ref } }"
 				class="link link-external signup"
-			>Sign up</router-link>
+			>Sign up</RouterLink>
 		</template>
 	</form>
 </template>

assets/components/auth/signup.vue

@@ -43,11 +43,11 @@
 				class="button button-primary"
 			>Sign up</button>
 
-			<router-link
+			<RouterLink
 				v-if="$store.state.auth.login"
 				:to="{ name: 'login', query: { ref: $route.query.ref } }"
 				class="link link-external login"
-			>Log in</router-link>
+			>Log in</RouterLink>
 		</template>
 	</form>
 </template>

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/dialog/dialog.vue

@@ -116,6 +116,7 @@ export default {
 ::v-deep(.dialog-body) {
 	padding: 1rem;
 	flex-grow: 1;
+	overflow-y: auto;
 }
 
 ::v-deep(.dialog-section:not(:last-child)) {

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
@@ -111,7 +111,10 @@
 			/>
 
 			<div class="releases">
-				<Releases :releases="entity.releases" />
+				<Releases
+					:releases="entity.releases"
+					:done="done"
+				/>
 
 				<Pagination
 					:items-total="totalCount"
@@ -134,6 +137,7 @@ import Scroll from '../scroll/scroll.vue';
 import Campaign from '../campaigns/campaign.vue';
 
 async function fetchEntity(scroll = true) {
+	this.done = false;
 	this.entityUrl = null;
 
 	const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
@@ -149,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
@@ -158,6 +162,7 @@ async function fetchEntity(scroll = true) {
 	}).toString();
 
 	this.entityUrl = campaign?.url || campaign?.affiliate?.url || `${entity.url}${campaign?.affiliate?.parameters ? `?${affiliateParams}` : ''}`;
+	this.done = true;
 
 	if (scroll && this.$refs.filter?.$el) {
 		this.$refs.filter.$el.scrollIntoView();
@@ -189,6 +194,7 @@ export default {
 			entity: null,
 			pageTitle: null,
 			totalCount: null,
+			done: false,
 			limit: Number(this.$route.query.limit) || 20,
 			expanded: false,
 			entityUrl: null,

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,41 +1,33 @@
 <template>
 	<div class="filter-bar noselect">
 		<div class="sort">
-			<router-link
-				:to="{ params: { range: 'latest', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'latest' || range === 'latest' }"
+			<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"
-			>Latest</router-link>
-
-			<router-link
-				:to="{ params: { range: 'upcoming', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
-				class="range-button"
-			>Upcoming</router-link>
-
-			<router-link
-				:to="{ params: { range: 'new', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'new' || range === 'new' }"
-				class="range-button"
-			>New</router-link>
+			>{{ section }}</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>
@@ -49,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;
 }
@@ -88,6 +76,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		showTotal: {
+			type: Boolean,
+			default: true,
+		},
 		itemsTotal: {
 			type: Number,
 			default: 0,
@@ -96,6 +88,10 @@ export default {
 			type: Number,
 			default: 10,
 		},
+		ranges: {
+			type: Array,
+			default: () => ['latest', 'upcoming', 'new'],
+		},
 		availableTags: {
 			type: Array,
 			default: () => [],
@@ -111,7 +107,6 @@ export default {
 	},
 	computed: {
 		...mapState({
-			filter,
 			range,
 			batch,
 		}),
@@ -126,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);
@@ -246,6 +278,10 @@ export default {
 	.filters-filter:last-child .filter {
 		padding: .5rem 0 .5rem .5rem;
 	}
+
+	.total {
+		display: none;
+	}
 }
 </style>
 
@@ -267,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;
 }
@@ -324,6 +323,7 @@ export default {
     text-decoration: none;
 	border: solid 1px transparent;
 	border-bottom: none;
+	text-transform: capitalize;
 
     &:hover:not(.active) {
         color: var(--shadow-strong);
@@ -356,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/header/menu.vue

@@ -1,28 +1,26 @@
 <template>
 	<div class="menu">
 		<ul class="menu-items noselect">
-			<router-link
+			<RouterLink
 				v-if="login && me"
 				:to="{ name: 'user', params: { username: me.username } }"
 				class="menu-username"
-			>{{ me.username }}</router-link>
+			>{{ me.username }}</RouterLink>
 
-			<router-link
+			<RouterLink
+				v-if="me && favorites"
+				:to="{ name: 'stash', params: { stashId: favorites.id, range: 'scenes', pageNumber: 1 } }"
+				class="menu-item"
+			><Icon icon="heart7" />Favorites</RouterLink>
+
+			<RouterLink
 				v-else-if="login"
 				:to="{ name: 'login', query: { ref: $route.path } }"
 				class="menu-item"
 				@click.stop
 			>
 				<Icon icon="enter2" />Log in
-			</router-link>
-
-			<li
-				v-if="login && me"
-				class="menu-item"
-				@click.stop="$store.dispatch('logout')"
-			>
-				<Icon icon="exit2" />Log out
-			</li>
+			</RouterLink>
 
 			<li
 				v-show="!sfw"
@@ -74,6 +72,14 @@
 			>
 				<Icon icon="filter" />Filters
 			</li>
+
+			<li
+				v-if="login && me"
+				class="menu-item"
+				@click.stop="$store.dispatch('logout')"
+			>
+				<Icon icon="exit2" />Log out
+			</li>
 		</ul>
 	</div>
 </template>
@@ -97,6 +103,10 @@ function signup(state) {
 	return state.auth.signup;
 }
 
+function favorites() {
+	return this.me?.stashes.find(stash => stash.primary);
+}
+
 function me(state) {
 	return state.auth.user;
 }
@@ -118,6 +128,7 @@ export default {
 			theme,
 			me,
 		}),
+		favorites,
 	},
 	emits: ['showFilters'],
 	methods: {

assets/components/home/home.vue

@@ -8,9 +8,13 @@
 				:items-total="totalCount"
 				:items-per-page="limit"
 				:content="$refs.content"
+				:show-total="false"
 			/>
 
-			<Releases :releases="releases" />
+			<Releases
+				:releases="releases"
+				:done="done"
+			/>
 
 			<Pagination
 				v-if="totalCount > 0"
@@ -30,6 +34,8 @@ import Releases from '../releases/releases.vue';
 import Pagination from '../pagination/pagination.vue';
 
 async function fetchReleases(scroll = true) {
+	this.done = false;
+
 	const { releases, totalCount } = await this.$store.dispatch('fetchReleases', {
 		limit: this.limit,
 		range: this.$route.params.range,
@@ -38,6 +44,7 @@ async function fetchReleases(scroll = true) {
 
 	this.totalCount = totalCount;
 	this.releases = releases;
+	this.done = true;
 
 	if (scroll) {
 		this.$refs.filter?.$el.scrollIntoView();
@@ -64,6 +71,7 @@ export default {
 			limit: 30,
 			totalCount: 0,
 			from: null,
+			done: false,
 		};
 	},
 	watch: {

assets/components/loading/ellipsis.vue

@@ -0,0 +1,90 @@
+<template>
+	<div class="load-container">
+		<div class="load-ellipsis">
+			<div />
+			<div />
+			<div />
+			<div />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.load-container {
+	display: inline-flex;
+	position: relative;
+	padding: 1rem;
+}
+
+.load-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 5rem;
+    height: .75rem;
+}
+
+.load-ellipsis div {
+    position: absolute;
+    top: 0;
+    width: .75rem;
+    height: .75rem;
+    border-radius: 50%;
+    background: var(--primary);
+}
+
+.load-ellipsis div:nth-child(1) {
+    left: .5rem;
+    animation: load-ellipsis1 0.5s infinite linear;
+}
+
+.load-ellipsis div:nth-child(2) {
+    left: .5rem;
+    animation: load-ellipsis2 0.5s infinite linear;
+}
+
+.load-ellipsis div:nth-child(3) {
+    left: 2rem;
+    animation: load-ellipsis3 0.5s infinite linear;
+}
+
+.load-ellipsis div:nth-child(4) {
+    left: 3.5rem;
+    animation: load-ellipsis4 0.5s infinite linear;
+}
+
+@keyframes load-ellipsis1 {
+	0% {
+		transform: scale(0);
+	}
+	100% {
+		transform: scale(0.5);
+	}
+}
+
+@keyframes load-ellipsis2 {
+	0% {
+		transform: translate(0, 0) scale(0.5);
+	}
+	100% {
+		transform: translate(1.5rem, 0) scale(1);
+	}
+}
+
+@keyframes load-ellipsis3 {
+	0% {
+		transform: translate(0, 0) scale(1);
+	}
+	100% {
+		transform: translate(1.5rem, 0) scale(0.5);
+	}
+}
+
+@keyframes load-ellipsis4 {
+    0% {
+		transform: scale(0.5);
+    }
+    100% {
+		transform: scale(0);
+    }
+}
+</style>

assets/components/networks/networks.vue

@@ -1,7 +1,10 @@
 <template>
 	<div class="networks">
 		<div class="content-inner">
-			<SearchBar :placeholder="`Search ${channelCount} channels in ${entities.length} networks`" />
+			<SearchBar
+				:placeholder="`Search ${channelCount} channels in ${entities.length} networks`"
+				:eager="true"
+			/>
 
 			<span
 				v-if="done && entities.length === 0"
@@ -14,7 +17,7 @@
 			>
 				<Entity
 					v-for="entity in entities"
-					:key="`entity-tile-${entity.slug}`"
+					:key="entity.parent ? `entity-tile-${entity.parent.slug}-${entity.slug}` : `entity-tile-${entity.slug}`"
 					:entity="entity"
 				/>
 			</div>

assets/components/releases/banner.vue

@@ -38,15 +38,30 @@
 					class="item trailer"
 				>
 
-				<a
-					v-if="release.poster"
-					v-tooltip="'View poster'"
-					:href="getPath(release.poster)"
-					:class="{ playing }"
-					target="_blank"
-					rel="noopener noreferrer"
-					class="poster-link"
-				><Icon icon="image" /></a>
+				<span
+					v-if="release.poster || release.teaser"
+					class="poster-links"
+				>
+					<a
+						v-if="release.teaser"
+						v-tooltip="'View teaser'"
+						:href="getPath(release.teaser)"
+						:class="{ playing }"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="poster-link"
+					><Icon icon="film4" /></a>
+
+					<a
+						v-if="release.poster"
+						v-tooltip="'View poster'"
+						:href="getPath(release.poster)"
+						:class="{ playing }"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="poster-link"
+					><Icon icon="image" /></a>
+				</span>
 
 				<span
 					v-if="sfw && !playing"
@@ -217,11 +232,16 @@ export default {
 	margin: 0 auto;
 }
 
-.poster-link {
+.poster-links {
+	display: flex;
     position: absolute;
-    top: .5rem;
-    right: .5rem;
+	top: 0;
+	right: 0;
+}
+
+.poster-link {
     transition: opacity .1s ease;
+	padding: .5rem;
 
     .icon {
         width: 1.5rem;
@@ -234,6 +254,14 @@ export default {
         opacity: 0;
     }
 
+	&:first-child {
+		padding-left: .75rem;
+	}
+
+	&:last-child {
+		padding-right: .75rem;
+	}
+
     &:hover {
         cursor: pointer;
         opacity: 1;

assets/components/releases/movie-tile.vue

@@ -3,7 +3,7 @@
 		<Details :release="movie" />
 
 		<div class="movie">
-			<router-link
+			<RouterLink
 				:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
 				class="cover"
 			>
@@ -13,15 +13,42 @@
 					:style="{ 'background-image': getBgPath(movie.covers[0], 'lazy') }"
 					loading="lazy"
 				>
-			</router-link>
+
+				<div
+					v-else
+					:title="movie.title"
+					class="unavailable"
+				><Icon icon="blocked" /></div>
+
+				<Icon
+					v-show="(!stash || stash.primary) && favorited"
+					icon="heart7"
+					class="stash stashed"
+					@click.prevent.native="unstashMovie"
+				/>
+
+				<Icon
+					v-show="(!stash || stash.primary) && favorited === false"
+					icon="heart8"
+					class="stash unstashed"
+					@click.prevent.native="stashMovie"
+				/>
+
+				<Icon
+					v-show="stash && !stash.primary"
+					icon="cross2"
+					class="stash unstash"
+					@click.prevent.native="unstashMovie"
+				/>
+			</RouterLink>
 
 			<div class="info">
-				<router-link
+				<RouterLink
 					:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
 					class="title-link"
 				>
 					<h3 class="title">{{ movie.title }}</h3>
-				</router-link>
+				</RouterLink>
 
 				<ul
 					class="actors nolist"
@@ -31,10 +58,10 @@
 						v-for="actor in movie.actors"
 						:key="`tag-${movie.id}-${actor.id}`"
 						class="actor"
-					><router-link
+					><RouterLink
 						:to="`/actor/${actor.id}/${actor.slug}`"
 						class="actor-link"
-					>{{ actor.name }}</router-link></li>
+					>{{ actor.name }}</RouterLink></li>
 				</ul>
 
 				<ul
@@ -45,10 +72,10 @@
 						v-for="tag in movie.tags"
 						:key="`tag-${movie.id}-${tag.id}`"
 						class="tag"
-					><router-link
+					><RouterLink
 						:to="`/tag/${tag.slug}`"
 						class="tag-link"
-					>{{ tag.name }}</router-link></li>
+					>{{ tag.name }}</RouterLink></li>
 				</ul>
 			</div>
 		</div>
@@ -58,6 +85,38 @@
 <script>
 import Details from './tile-details.vue';
 
+async function stashMovie() {
+	this.favorited = true;
+
+	try {
+		await this.$store.dispatch('stashMovie', {
+			movieId: this.movie.id,
+			stashId: this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', true);
+	} catch (error) {
+		this.favorited = false;
+	}
+}
+
+async function unstashMovie() {
+	if (!this.stash || this.stash.primary) {
+		this.favorited = false;
+	}
+
+	try {
+		await this.$store.dispatch('unstashMovie', {
+			movieId: this.movie.id,
+			stashId: this.stash?.id || this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', false);
+	} catch (error) {
+		this.favorited = true;
+	}
+}
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
@@ -71,10 +130,23 @@ export default {
 			type: Object,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			favorited: this.movie.isFavorited,
+		};
 	},
 	computed: {
 		sfw,
 	},
+	methods: {
+		stashMovie,
+		unstashMovie,
+	},
 };
 </script>
 
@@ -87,10 +159,14 @@ export default {
 	background: var(--background);
 	box-shadow: 0 0 3px var(--darken-weak);
 	font-size: 0;
+
+	&:hover .unstashed,
+	&:hover .unstash {
+		fill: var(--lighten);
+	}
 }
 
 .movie {
-	height: 16rem;
 	display: flex;
 }
 
@@ -100,17 +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 {
@@ -179,9 +268,31 @@ export default {
 	}
 }
 
+.stash {
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: .25rem .5rem .5rem .5rem;
+	position: absolute;
+	top: 0;
+	left: 0;
+	fill: var(--lighten-weak);
+	filter: drop-shadow(0 0 2px var(--darken));
+
+	&:hover.unstashed,
+	&.stashed {
+		fill: var(--primary);
+	}
+
+	&:hover.unstash {
+		fill: var(--text-light);
+		filter: drop-shadow(0 0 2px var(--darken-weak));
+	}
+}
+
 @media(max-width: $breakpoint-kilo) {
-	.movie {
+	.cover {
 		height: 12rem;
+		width: 8.25rem;
 	}
 
 	/* ensure no half actor names show */

assets/components/releases/movies.vue

@@ -3,7 +3,16 @@
 		<div class="content-inner">
 			<SearchBar :placeholder="`Search ${totalCount} movies`" />
 
-			<div class="tiles">
+			<TagFilter
+				class="filters-filter"
+				:filter="filter"
+				:available-tags="availableTags"
+			/>
+
+			<div
+				ref="tiles"
+				class="tiles"
+			>
 				<MovieTile
 					v-for="movie in movies"
 					:key="`movie-${movie.id}`"
@@ -27,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) {
@@ -42,6 +52,8 @@ async function fetchMovies() {
 
 	this.movies = movies;
 	this.totalCount = totalCount;
+
+	this.$refs.tiles.scrollIntoView();
 }
 
 async function searchMovies() {
@@ -53,6 +65,8 @@ async function searchMovies() {
 
 	this.movies = movies;
 	this.totalCount = totalCount;
+
+	this.$refs.tiles.scrollIntoView();
 }
 
 async function mounted() {
@@ -66,12 +80,13 @@ export default {
 		MovieTile,
 		SearchBar,
 		Pagination,
+		TagFilter,
 	},
 	data() {
 		return {
 			movies: [],
 			totalCount: 0,
-			limit: 30,
+			limit: 20,
 		};
 	},
 	watch: {
@@ -99,14 +114,14 @@ export default {
 }
 
 .search {
-	margin: 1rem 0;
+	margin: 1rem 0 0 0;
 }
 
 .tiles {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
 	grid-gap: 1rem;
-	margin: 0 0 1rem 0;
+	padding: 1rem 0;
 }
 
 @media(max-width: $breakpoint-kilo) {

assets/components/releases/release.vue

@@ -39,7 +39,10 @@
 				<h2
 					v-if="release.title"
 					class="title"
-				>{{ release.title }}</h2>
+				>
+					{{ release.title }}
+					<template v-if="release.movies?.[0]?.title && /^scene \d+$/i.test(release.title)"><span class="title-composed">&nbsp;from&nbsp;</span>{{ release.movies[0].title }}</template>
+				</h2>
 
 				<h2
 					v-else-if="release.actors.length > 0"
@@ -275,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

@@ -5,8 +5,10 @@
 			class="heading"
 		><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>
 
+		<Ellipsis v-if="!done" />
+
 		<ul
-			v-if="releases.length > 0"
+			v-else-if="releases.length > 0"
 			:key="sfw"
 			class="nolist tiles"
 		>
@@ -18,13 +20,14 @@
 					:release="release"
 					:referer="referer"
 					:index="index"
+					:stash="stash"
 					@stash="isStashed => $emit('stash', isStashed)"
 				/>
 			</li>
 		</ul>
 
 		<span
-			v-if="releases.length === 0 && range !== 'all'"
+			v-else-if="releases.length === 0 && range !== 'all'"
 			class="empty"
 		>No {{ range }} releases</span>
 
@@ -36,6 +39,7 @@
 </template>
 
 <script>
+import Ellipsis from '../loading/ellipsis.vue';
 import SceneTile from './scene-tile.vue';
 
 function range() {
@@ -48,6 +52,7 @@ function sfw() {
 
 export default {
 	components: {
+		Ellipsis,
 		SceneTile,
 	},
 	props: {
@@ -59,10 +64,18 @@ export default {
 			type: String,
 			default: null,
 		},
+		done: {
+			type: Boolean,
+			default: true,
+		},
 		referer: {
 			type: String,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
 	},
 	emits: ['stash'],
 	computed: {
@@ -113,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

@@ -46,18 +46,25 @@
 					><Icon icon="blocked" />No thumbnail available</div>
 
 					<Icon
-						v-show="favorited"
+						v-show="(!stash || stash.primary) && favorited"
 						icon="heart7"
 						class="stash stashed"
 						@click.prevent.native="unstashScene"
 					/>
 
 					<Icon
-						v-show="favorited === false"
+						v-show="(!stash || stash.primary) && favorited === false"
 						icon="heart8"
 						class="stash unstashed"
 						@click.prevent.native="stashScene"
 					/>
+
+					<Icon
+						v-show="stash && !stash.primary"
+						icon="cross2"
+						class="stash unstash"
+						@click.prevent.native="unstashScene"
+					/>
 				</a>
 			</span>
 
@@ -78,7 +85,9 @@
 						v-tooltip.bottom="release.title"
 						:title="release.title"
 						class="title"
-					>{{ release.title }}</h3>
+					>
+						{{ release.title }}<template v-if="release.movies?.[0]?.title && /^scene \d+$/i.test(release.title)"><span class="title-composed">&nbsp;from&nbsp;</span>{{ release.movies[0].title }}</template>
+					</h3>
 
 					<h3
 						v-else-if="release.actors.length > 0"
@@ -104,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"
@@ -136,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>
@@ -167,12 +177,14 @@ async function stashScene() {
 }
 
 async function unstashScene() {
-	this.favorited = false;
+	if (!this.stash || this.stash.primary) {
+		this.favorited = false;
+	}
 
 	try {
 		await this.$store.dispatch('unstashScene', {
 			sceneId: this.release.id,
-			stashId: this.$store.getters.favorites.id,
+			stashId: this.stash?.id || this.$store.getters.favorites.id,
 		});
 
 		this.$emit('stash', false);
@@ -190,6 +202,10 @@ export default {
 			type: Object,
 			default: null,
 		},
+		stash: {
+			type: Object,
+			default: null,
+		},
 	},
 	emits: ['stash'],
 	data() {
@@ -218,23 +234,27 @@ 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 {
+	&:hover .unstashed,
+	&:hover .unstash {
 		fill: var(--lighten);
 	}
 }
@@ -279,8 +299,8 @@ export default {
 }
 
 .stash {
-	width: 1.25rem;
-	height: 1.25rem;
+	width: 1.5rem;
+	height: 1.5rem;
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -293,20 +313,26 @@ export default {
 		fill: var(--primary);
 		filter: drop-shadow(0 0 2px var(--darken-weak));
 	}
+
+	&:hover.unstash {
+		fill: var(--text-light);
+		filter: drop-shadow(0 0 2px var(--darken-weak));
+	}
 }
 
 .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;
 }
@@ -318,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;
@@ -344,8 +370,9 @@ export default {
 }
 
 .actor-link {
-    color: var(--link);
+    color: var(--text);
     text-decoration: none;
+	font-size: .9rem;
 
     &:hover {
         color: var(--primary);
@@ -353,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;
@@ -384,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;
@@ -400,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;
 	}
@@ -453,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/search/bar.vue

@@ -1,13 +1,13 @@
 <template>
 	<form
 		class="search"
-		@submit.prevent="search"
+		@submit.prevent="() => search()"
 	>
 		<input
 			v-model="query"
 			:placeholder="placeholder || 'Search'"
 			class="query"
-			@input="search"
+			@input="() => search(true)"
 		>
 
 		<button
@@ -18,8 +18,13 @@
 </template>
 
 <script>
-function search() {
-	this.$router.replace({ query: { query: this.query || undefined } });
+function search(typing) {
+	if (!typing || this.eager) {
+		this.$router.replace({
+			query: { query: this.query || undefined },
+			params: { ...this.$route.params, pageNumber: 1 },
+		});
+	}
 }
 
 function resetQuery() {
@@ -32,6 +37,10 @@ export default {
 			type: String,
 			default: null,
 		},
+		eager: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {

assets/components/stashes/stash.vue

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

assets/components/tags/tag.vue

@@ -64,7 +64,10 @@
 				:fetch-releases="fetchReleases"
 			/>
 
-			<Releases :releases="releases" />
+			<Releases
+				:releases="releases"
+				:done="done"
+			/>
 
 			<Pagination
 				:items-total="totalCount"
@@ -93,6 +96,8 @@ import Campaign from '../campaigns/campaign.vue';
 const converter = new Converter();
 
 async function fetchReleases(scroll = true) {
+	this.done = false;
+
 	const { tag, releases, totalCount } = await this.$store.dispatch('fetchTagBySlug', {
 		tagSlug: this.$route.params.tagSlug,
 		pageNumber: Number(this.$route.params.pageNumber),
@@ -107,6 +112,8 @@ async function fetchReleases(scroll = true) {
 	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
 	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
 
+	this.done = true;
+
 	if (this.hasMedia) {
 		this.showBannerCampaign = true;
 	}
@@ -146,6 +153,7 @@ export default {
 			tag: null,
 			description: null,
 			releases: null,
+			done: false,
 			totalCount: 0,
 			limit: 20,
 			pageTitle: null,

assets/components/tags/tags.vue

@@ -1,7 +1,10 @@
 <template>
 	<div class="tags">
 		<div class="content-inner">
-			<SearchBar :placeholder="'Search tags'" />
+			<SearchBar
+				:placeholder="'Search tags'"
+				class="search"
+			/>
 
 			<div
 				v-for="(tags, category) in categories"
@@ -42,6 +45,8 @@ const tagSlugsByCategory = {
 		'teen',
 		'milf',
 		'blowjob',
+		'gay',
+		'transsexual',
 		'dp',
 		'gangbang',
 		'facial',
@@ -61,14 +66,18 @@ const tagSlugsByCategory = {
 		'tattoos',
 		'piercings',
 	],
+	sexuality: [
+		'gay',
+		'bisexual',
+		'transsexual',
+	],
 	oral: [
 		'blowjob',
 		'pussy-eating',
 		'ass-eating',
-		'69',
-		'double-blowjob',
 		'deepthroat',
 		'facefucking',
+		'69',
 		'atm',
 	],
 	manual: [
@@ -89,7 +98,6 @@ const tagSlugsByCategory = {
 	],
 	cumshot: [
 		'facial',
-		'bukkake',
 		'creampie',
 		'cum-in-mouth',
 		'cum-on-boobs',
@@ -97,6 +105,7 @@ const tagSlugsByCategory = {
 		'cum-on-pussy',
 		'anal-creampie',
 		'oral-creampie',
+		'bukkake',
 		'fake-cum',
 	],
 	toys: [
@@ -121,6 +130,7 @@ const tagSlugsByCategory = {
 		'bdsm',
 		'femdom',
 		'bondage',
+		'free-use',
 		'latex',
 		'blindfold',
 	],
@@ -159,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() {
@@ -199,6 +217,7 @@ export default {
 	},
 	watch: {
 		$route: fetchTags,
+		'$store.state.ui.tagFilter': fetchTags,
 	},
 	mounted,
 	methods: {
@@ -209,7 +228,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
+@import 'breakpoints';
 
 .tags {
 	display: flex;
@@ -225,35 +244,97 @@ export default {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20rem, .33fr));
     grid-gap: 1rem;
-    margin: 0 0 1.5rem 0;
 }
 
 .heading {
     text-transform: capitalize;
 	padding: 0 0 0 .5rem;
-	margin: 1.75rem 0 1rem 0;
+	margin: 1.25rem 0 1rem 0;
 }
 
 .category:first-child .heading {
 	margin: .5rem 0 1rem 0;
 }
 
-@media(max-width: $breakpoint3) {
+.search {
+	margin: 0 0 .25rem 0;
+}
+
+@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/components/users/stash.vue

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

assets/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/img/icons/film4.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>film4</title>
+<path d="M0 2v12h16v-12h-16zM3 13h-2v-2h2v2zM3 9h-2v-2h2v2zM3 5h-2v-2h2v2zM12 13h-8v-10h8v10zM15 13h-2v-2h2v2zM15 9h-2v-2h2v2zM15 5h-2v-2h2v2zM6 5v6l4-3z"></path>
+</svg>

assets/img/icons/presentation.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>presentation</title>
+<path d="M14.25 0h-13.5c-0.412 0-0.75 0.338-0.75 0.75v11.5c0 0.412 0.338 0.75 0.75 0.75h4.455l-2.040 2.040c-0.22 0.22-0.22 0.576 0 0.795 0.11 0.11 0.254 0.165 0.398 0.165s0.288-0.055 0.398-0.165l2.835-2.835h0.205v2.5c0 0.276 0.224 0.5 0.5 0.5s0.5-0.224 0.5-0.5v-2.5h0.205l2.835 2.835c0.11 0.11 0.254 0.165 0.398 0.165s0.288-0.055 0.398-0.165c0.22-0.22 0.22-0.576 0-0.795l-2.040-2.040h4.455c0.412 0 0.75-0.338 0.75-0.75v-11.5c0-0.412-0.338-0.75-0.75-0.75zM6 3l4 2.5-4 2.5v-5zM12.5 11h-10c-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5h10c0.276 0 0.5 0.224 0.5 0.5s-0.224 0.5-0.5 0.5z"></path>
+</svg>

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,
 		};
 	}
@@ -303,7 +303,8 @@ function initActorActions(store, router) {
 
 		const genderFilter = (gender === null && 'gender: { isNull: true }')
 			|| (gender === 'all' && ' ')
-			|| `gender: { equalTo: "${gender}" }`;
+			|| (gender && `gender: { equalTo: "${gender}" }`)
+			|| '';
 
 		const ageFilter = age ? `
 			or: [
@@ -410,7 +411,9 @@ function initActorActions(store, router) {
 						${actorStashesFields}
 					}
                 }
-				countries {
+				countries(
+					orderBy: NAME_ASC,
+				) {
 					alpha2
 					name
 					alias
@@ -420,13 +423,13 @@ function initActorActions(store, router) {
 			query,
 			offset: Math.max(0, (pageNumber - 1)) * limit,
 			limit,
-			naturalBoobs,
+			naturalBoobs: naturalBoobs || null,
 			hasAuth: !!store.state.auth.user,
 			userId: store.state.auth.user?.id,
 		});
 
 		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;
 }
@@ -136,20 +138,30 @@ function curateTag(tag) {
 function curateStash(stash) {
 	const curatedStash = stash;
 
-	if (stash.scenes) {
-		curatedStash.scenes = stash.scenes.map(item => ({
+	if (stash.scenes || stash.scenesConnection?.scenes) {
+		curatedStash.sceneTotal = stash.scenesConnection?.totalCount || null;
+		curatedStash.scenes = (stash.scenesConnection?.scenes || stash.scenes).map((item) => ({
 			...item,
 			scene: curateRelease(item.scene),
 		}));
 	}
 
-	if (stash.actors) {
-		curatedStash.actors = stash.actors.map(item => ({
+	if (stash.actors || stash.actorsConnection?.actors) {
+		curatedStash.actorTotal = stash.actorsConnection?.totalCount || null;
+		curatedStash.actors = (stash.actorsConnection?.actors || stash.actors).map((item) => ({
 			...item,
 			actor: curateActor(item.actor),
 		}));
 	}
 
+	if (stash.movies || stash.moviesConnection?.movies) {
+		curatedStash.movieTotal = stash.moviesConnection?.totalCount || null;
+		curatedStash.movies = (stash.moviesConnection?.movies || stash.movies).map((item) => ({
+			...item,
+			movie: curateRelease(item.movie),
+		}));
+	}
+
 	return curatedStash;
 }
 
@@ -161,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) {
@@ -173,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;
@@ -187,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,17 +202,17 @@ function initEntitiesActions(store, router) {
 			entitySlugs,
 		});
 
-		return entities.map(entity => curateEntity(entity));
+		return entities.map((entity) => curateEntity(entity));
 	}
 
 	async function searchEntities({ _commit }, { query, limit = 20 }) {
 		const { entities } = await graphql(`
             query SearchEntities(
                 $query: String!
-                $limit:Int = 20,
+                $limit: Int = 20,
             ) {
                 entities: searchEntities(
-                    search: $query,
+                    search: $query
                     first: $limit
                 ) {
 					id
@@ -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
@@ -145,6 +145,24 @@ const movieFields = `
 			}
 		}
 	}
+	isFavorited
+	isStashed(includeFavorites: false)
+	stashes: stashesMovies(
+		filter: {
+			stash: {
+				userId: {
+					equalTo: $userId
+				}
+			}
+		}
+	) @include(if: $hasAuth) {
+		stash {
+			id
+			name
+			slug
+			primary
+		}
+	}
 `;
 
 const campaignsFragment = `
@@ -226,7 +244,12 @@ const releaseDirectorFragment = `
 `;
 
 const releaseTagsFragment = `
-    tags: releasesTags(orderBy: TAG_BY_TAG_ID__PRIORITY_DESC) {
+    tags: releasesTags(
+		orderBy: TAG_BY_TAG_ID__PRIORITY_DESC
+		filter: {
+			tagId: { isNull: false }
+		}
+	) {
       tag {
         name
         priority
@@ -237,7 +260,7 @@ const releaseTagsFragment = `
 `;
 
 const releasePosterFragment = `
-    poster: releasesPosterByReleaseId {
+    poster: releasesPoster {
         media {
 			id
             index
@@ -312,7 +335,7 @@ const releasePhotosFragment = `
 `;
 
 const releaseTrailerFragment = `
-    trailer: releasesTrailerByReleaseId {
+    trailer: releasesTrailer {
         media {
 			id
             index
@@ -326,7 +349,7 @@ const releaseTrailerFragment = `
 `;
 
 const releaseTeaserFragment = `
-    teaser: releasesTeaserByReleaseId {
+    teaser: releasesTeaser {
         media {
 			id
             index
@@ -362,6 +385,13 @@ const releaseFields = `
         slug
         url
     }
+	movies: moviesScenesBySceneId {
+	    movie {
+			id
+			title
+			slug
+		}
+	}
     isNew
 	isFavorited
 	isStashed(includeFavorites: false)
@@ -457,7 +487,7 @@ const releaseFragment = `
 				slug
 			}
 		}
-		poster: chaptersPosterByChapterId {
+		poster: chaptersPoster {
 			media {
 				id
 				index
@@ -486,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,
 		};
 	}
@@ -72,6 +72,8 @@ function initReleasesActions(store, router) {
             query Movies(
                 $limit:Int = 1000,
                 $offset:Int = 0,
+				$hasAuth: Boolean!
+				$userId: Int
             ) {
 				connection: moviesConnection(
 					first: $limit
@@ -90,12 +92,14 @@ function initReleasesActions(store, router) {
 				}
 			}
         `, {
+			hasAuth: !!store.state.auth.user,
+			userId: store.state.auth.user?.id,
 			limit,
 			offset: Math.max(0, (pageNumber - 1)) * limit,
 		});
 
 		return {
-			movies: movies.map(release => curateRelease(release)),
+			movies: movies.map((release) => curateRelease(release)),
 			totalCount,
 		};
 	}
@@ -106,6 +110,8 @@ function initReleasesActions(store, router) {
                 $query: String!
                 $limit:Int = 20
                 $offset:Int = 0
+				$hasAuth: Boolean!
+				$userId: Int
             ) {
 				connection: searchMoviesConnection(
                     query: $query
@@ -122,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,
@@ -174,7 +182,7 @@ function initReleasesActions(store, router) {
 							isS3
 						}
 					}
-					poster: moviesPosterByMovieId {
+					poster: moviesPoster {
 						media {
 							id
 							path
@@ -187,7 +195,7 @@ function initReleasesActions(store, router) {
 							isS3
 						}
 					}
-					covers: moviesCovers {
+					covers: moviesCovers(orderBy: MEDIA_BY_MEDIA_ID__INDEX_ASC) {
 						media {
 							id
 							path
@@ -200,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,
@@ -228,7 +228,18 @@ const routes = [
 		name: 'notifications',
 	},
 	{
-		path: '/stash/:stashId/:stashSlug?',
+		path: '/stash/:stashId/:stashSlug',
+		redirect: (from) => ({
+			name: 'stash',
+			params: {
+				...from.params,
+				range: 'scenes',
+				pageNumber: 1,
+			},
+		}),
+	},
+	{
+		path: '/stash/:stashId/:stashSlug?/:range/:pageNumber',
 		component: Stash,
 		name: 'stash',
 	},

assets/js/stashes/actions.js

@@ -5,14 +5,24 @@ import {
 	patch,
 } from '../api';
 
-import { releaseFields, actorStashesFields } from '../fragments';
+import { releaseFields, actorStashesFields, movieFields } from '../fragments';
 import { curateStash } from '../curate';
 
 function initStashesActions(store, _router) {
-	async function fetchStash(context, stashId) {
+	async function fetchStash(context, {
+		stashId,
+		section = 'scenes',
+		pageNumber = 1,
+		limit = 20,
+	}) {
 		const { stash } = await graphql(`
 			query Stash(
 				$stashId: Int!
+				$includeScenes: Boolean!
+				$includeActors: Boolean!
+				$includeMovies: Boolean!
+                $limit:Int = 10,
+				$offset:Int = 0,
 				$hasAuth: Boolean!
 				$userId: Int
 			) {
@@ -26,45 +36,77 @@ function initStashesActions(store, _router) {
 						id
 						username
 					}
-					actors: stashesActors {
-						comment
-						actor {
-							id
-							name
-							slug
-							gender
-							age
-							ageFromBirth
-							dateOfBirth
-							birthCity
-							birthState
-							birthCountry: countryByBirthCountryAlpha2 {
-							  alpha2
-							  name
-							  alias
-							}
-							avatar: avatarMedia {
+					actorsConnection: stashesActorsConnection(
+						orderBy: CREATED_AT_DESC
+						first: $limit
+						offset: $offset
+					) @include(if: $includeActors) {
+						totalCount
+						actors: nodes {
+							comment
+							actor {
 								id
-								path
-								thumbnail
-								lazy
-								isS3
-								width
-								height
+								name
+								slug
+								gender
+								age
+								ageFromBirth
+								dateOfBirth
+								birthCity
+								birthState
+								birthCountry: countryByBirthCountryAlpha2 {
+								  alpha2
+								  name
+								  alias
+								}
+								avatar: avatarMedia {
+									id
+									path
+									thumbnail
+									lazy
+									isS3
+									width
+									height
+								}
+								${actorStashesFields}
 							}
-							${actorStashesFields}
 						}
 					}
-					scenes: stashesScenes {
-						comment
-						scene {
-							${releaseFields}
+					scenesConnection: stashesScenesConnection(
+						orderBy: [CREATED_AT_DESC, RELEASE_BY_SCENE_ID__DATE_DESC]
+						first: $limit
+						offset: $offset
+					) @include(if: $includeScenes) {
+						totalCount
+						scenes: nodes {
+							comment
+							scene {
+								${releaseFields}
+							}
+						}
+					}
+					moviesConnection: stashesMoviesConnection(
+						orderBy: [CREATED_AT_DESC, MOVIE_BY_MOVIE_ID__DATE_DESC]
+						first: $limit
+						offset: $offset
+					) @include(if: $includeMovies) {
+						totalCount
+						movies: nodes {
+							comment
+							movie {
+								${movieFields}
+							}
 						}
 					}
 				}
 			}
 		`, {
 			stashId: Number(stashId),
+			includeScenes: section === 'scenes',
+			includeActors: section === 'actors',
+			includeMovies: section === 'movies',
+			offset: Math.max(0, (pageNumber - 1)) * limit,
+			limit: Number(limit),
 			hasAuth: !!store.state.auth.user,
 			userId: store.state.auth.user?.id,
 		});

assets/js/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

@@ -57,7 +57,10 @@ function initUsersActions(store, _router) {
 								}
 							}
 						}
-						scenes: stashesScenes(first: 20) {
+						scenes: stashesScenes(
+							first: 20
+							orderBy: CREATED_AT_DESC
+						) {
 							comment
 							scene {
 								${releaseFields}
@@ -87,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',
@@ -79,6 +76,11 @@ module.exports = {
 			'pornmegaload',
 			'scorelandtv',
 			'scoretv',
+			// spizoo
+			'intimatelesbians',
+			'porngoespro',
+			'pornstartease',
+			'thestripperexperience',
 			// teenscoreclub
 			'maiko',
 			'ncuksinners',
@@ -91,6 +93,9 @@ module.exports = {
 		networks: [
 			// dummy network for testing
 			'traxxx',
+			// porn doe
+			'forbondage',
+			'score',
 		],
 	},
 	profiles: [
@@ -142,6 +147,11 @@ module.exports = {
 			'hotcrazymess',
 			'thatsitcomshow',
 		],
+		[
+			// Adult DVD Empire
+			'elegantangel',
+			'westcoastproductions',
+		],
 		'21sextury',
 		'julesjordan',
 		'dorcelclub',
@@ -239,6 +249,7 @@ module.exports = {
 			'www.tushy.com',
 			'www.tushyraw.com',
 			'www.deeper.com',
+			'www.slayed.com',
 			'sthw-trailer-vixen.ssl-cdn.com',
 			'sthw-trailer-tushy.ssl-cdn.com',
 			'sthw-trailer-tushyraw.ssl-cdn.com',
@@ -251,6 +262,30 @@ module.exports = {
 			'streamhw-trailer-blacked.ssl-cdn.com',
 			'streamhw-trailer-blackedraw.ssl-cdn.com',
 			'streamhw-trailer-deeper.ssl-cdn.com',
+			'cdn.vixen.com',
+			'cdn.tushy.com',
+			'cdn.blacked.com',
+			'cdn.deeper.com',
+			'cdn.blackedraw.com',
+			'cdn.tushyraw.com',
+			'cdn.slayed.com',
+			'www.vogov.com',
+			'www.vogov.com',
+			'www.nubiles.net',
+			'www.brattysis.com',
+			'www.deeplush.com',
+			'www.detentiongirls.com',
+			'www.daddyslilangel.com',
+			'www.myfamilypies.com',
+			'www.bountyhunterporn.com',
+			'www.anilos.com',
+			'www.thatsitcomshow.com',
+			'www.nubileset.com',
+			'www.nubilesunscripted.com',
+			'www.nubilefilms.com',
+			'www.badteenspunished.com',
+			'www.cumlouder.com',
+			'im0.imgcm.com',
 		],
 	},
 	limits: {
@@ -263,15 +298,26 @@ module.exports = {
 			interval: 1000,
 			concurrency: 1,
 		},
-		'www.realitykings.com': {
-			interval: 1000,
+		'westcoastproductions.com': {
+			interval: 100,
+			concurrency: 1,
+		},
+		'images.mylfcdn.net': {
+			interval: 50,
 			concurrency: 1,
 		},
 	},
 	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()
@@ -792,7 +792,6 @@ exports.up = knex => Promise.resolve()
 	}))
 	.then(() => knex.schema.createTable('releases_tags', (table) => {
 		table.integer('tag_id', 12)
-			.notNullable()
 			.references('id')
 			.inTable('tags');
 
@@ -802,6 +801,8 @@ exports.up = knex => Promise.resolve()
 			.inTable('releases')
 			.onDelete('cascade');
 
+		table.text('original_tag');
+
 		table.unique(['tag_id', 'release_id']);
 	}))
 	.then(() => knex.schema.createTable('releases_search', (table) => {
@@ -985,7 +986,6 @@ exports.up = knex => Promise.resolve()
 	}))
 	.then(() => knex.schema.createTable('chapters_tags', (table) => {
 		table.integer('tag_id', 12)
-			.notNullable()
 			.references('id')
 			.inTable('tags')
 			.onDelete('cascade');
@@ -996,6 +996,8 @@ exports.up = knex => Promise.resolve()
 			.inTable('chapters')
 			.onDelete('cascade');
 
+		table.text('original_tag');
+
 		table.unique(['tag_id', 'chapter_id']);
 	}))
 	.then(() => knex.schema.createTable('users_roles', (table) => {
@@ -1450,6 +1452,7 @@ exports.up = knex => Promise.resolve()
 				array_to_string(alias, '') ILIKE ('%' || TRIM(search) || '%') OR
 				replace(array_to_string(alias, ''), ' ', '') ILIKE ('%' || TRIM(search) || '%') OR
 				url ILIKE ('%' || search || '%')
+				ORDER BY similarity(entities.name, search) DESC, name ASC
 			$$ LANGUAGE SQL STABLE;
 
 			CREATE FUNCTION search_actors(query text, min_length smallint DEFAULT 2) RETURNS SETOF actors AS $$
@@ -1748,6 +1751,7 @@ exports.up = knex => Promise.resolve()
 			COMMENT ON FUNCTION tags_scenes IS E'@sortable';
 
 			COMMENT ON FUNCTION search_releases IS E'@sortable';
+			COMMENT ON FUNCTION search_entities 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';

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.198.5",
+    "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,62 +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",
-        "jsdom": "^16.3.0",
-        "knex": "^0.21.13",
+        "iconv-lite": "^0.6.3",
+        "inquirer": "^8.2.0",
+        "inspector-api": "^1.4.2",
+        "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"
     }
 }

public/img/logos/adulttime/misc/transfixed.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1172.7 153" style="enable-background:new 0 0 1172.7 153;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M123.4,36.3l-0.2-1c-1.1-4.4-2.9-8.5-5.4-12.2c-2.5-3.7-5.4-6.9-8.9-9.6s-7.3-4.8-11.6-6.2C93,5.8,88.6,5,84,5
+	H70.8v132.9c0,2.4,0.6,4.4,2,6.1c1.3,1.7,3.1,2.9,5.3,3.6l4.8,1.5H40.6l4.8-1.5c2.2-0.7,4-1.9,5.3-3.6c1.3-1.7,2-3.8,2-6.1V5H39.3
+	c-4.6,0-9,0.7-13.3,2.2s-8.1,3.5-11.6,6.2S8.1,19.3,5.6,23c-2.5,3.7-4.3,7.8-5.4,12.2l-0.2,1L6.6,4.2h109.9L123.4,36.3z"/>
+<path class="st0" d="M216.9,104.2c3.7,6.8,7,12.6,9.8,17.4s5.6,9,8.3,12.5s5.5,6.5,8.5,8.9c3,2.4,6.5,4.5,10.5,6.1h-24.4
+	c-5.3,0-9.6-1.5-12.9-4.5s-6.4-7.1-9.1-12.2c-2.7-5.1-5.4-11.1-8.1-17.9s-6-14-9.8-21.4c-2.6-5-5.2-8.3-7.7-9.9
+	c-2.5-1.7-5.9-2.5-10.1-2.5h-9.1v57.5c0,2.4,0.7,4.4,2.1,6.1c1.4,1.7,3.2,2.9,5.6,3.6l4.8,1.2h-43.7l5.2-1.2
+	c2.3-0.7,4.2-1.9,5.6-3.6c1.4-1.7,2.1-3.8,2.1-6.1V15.4c0-2.3-0.7-4.4-2.1-6.1c-1.4-1.7-3.2-2.9-5.6-3.6l-5-1.5h48.8
+	c9.1,0,16.6,1,22.4,3s10.4,4.7,13.7,8.2c3.3,3.5,5.6,7.5,6.8,12.1s1.9,9.6,1.9,14.8c0,4.8-0.5,9.4-1.7,13.8c-1.1,4.4-3,8.3-5.8,11.7
+	c-2.8,3.5-6.6,6.2-11.6,8.4s-11.3,3.5-18.8,4c2.8,0.4,5.4,1,7.9,1.8c2.5,0.8,4.9,1.9,7.1,3.4c2.3,1.5,4.5,3.6,6.6,6.3
+	c2.1,2.7,4.4,6.1,6.7,10.3L216.9,104.2z M180.5,79.8c2.8,0,5.7-0.8,8.8-2.5s5.9-4,8.5-7.1c2.5-3.1,4.7-7,6.3-11.6
+	c1.7-4.6,2.5-10,2.5-16c0-5.9-0.8-11.2-2.5-15.9c-1.7-4.7-3.8-8.6-6.3-11.7s-5.4-5.5-8.5-7.1s-6-2.5-8.8-2.5h-17.6v74.5L180.5,79.8
+	L180.5,79.8z"/>
+<path class="st0" d="M340.9,147.4c1.8-0.5,3.1-1.6,3.9-3.2c0.8-1.6,1-3.2,0.4-4.9L332,99.8h-45.9l-13.3,39.3
+	c-0.7,1.8-0.6,3.5,0.2,5.1c0.8,1.6,2.1,2.7,3.9,3.2l5.6,1.7h-25l3.5-1c2.8-0.7,5.1-2,7.1-3.9s3.5-4.3,4.5-7L317.1,4.2h1l44.5,133.3
+	c0.8,2.5,2.2,4.7,4.1,6.5c1.9,1.9,4.2,3.1,6.8,3.8l4.1,1.2h-42.2l5.6-1.7L340.9,147.4L340.9,147.4z M331.4,99l-22.6-67.7L286.3,99
+	H331.4z"/>
+<path class="st0" d="M515.8,4.2L511,5.7c-2.2,0.7-4,1.9-5.3,3.6c-1.3,1.7-2,3.8-2,6.1v133.7H503L398,13.3v124.8c0,2.4,0.6,4.4,2,6.1
+	c1.3,1.7,3.1,2.9,5.3,3.6l4.8,1.2h-25l4.8-1.2c2.2-0.7,4-1.9,5.3-3.6c1.3-1.7,2-3.8,2-6.1V15.4c0-2.3-0.7-4.4-2-6.1
+	c-1.3-1.7-3.1-2.9-5.3-3.6L385,4.2h28.8l89,115.3V15.4c0-2.3-0.7-4.4-2-6.1c-1.3-1.7-3.1-2.9-5.3-3.6l-4.8-1.5H515.8z"/>
+<path class="st0" d="M576.9,63.6c4.1,2.6,8.6,5.3,13.5,7.9c4.8,2.6,9.3,5.7,13.5,9.2s7.6,7.7,10.3,12.5c2.8,4.8,4.1,10.8,4.1,17.8
+	c0,5.5-1.5,10.6-4.3,15.3c-2.9,4.7-6.7,8.7-11.4,12.1c-4.7,3.4-9.9,6-15.7,7.9c-5.8,1.9-11.7,2.8-17.6,2.8c-3.5,0-7.1-0.4-11-1.1
+	s-8.1-2.2-12.6-4.2c-1.7-0.8-3.9-1.4-6.8-1.5s-5.6,0.1-8.1,0.9l-2.7-24.4c0.5,1.9,1.2,3.7,1.9,5.4c0.7,1.5,1.4,3.1,2.2,4.8
+	s1.7,3.1,2.8,4.4c2.5,2.9,5.2,5.3,8.2,7.2s6,3.5,9.1,4.7c3.1,1.2,6.2,2,9.2,2.5c3,0.5,5.7,0.7,8.1,0.7c3.7,0,7.3-1,10.8-3.1
+	s6.5-4.8,9.1-8.3c2.6-3.5,4.7-7.4,6.2-11.8c1.5-4.4,2.3-9,2.3-13.7c0-2.8-0.9-5.5-2.8-8.1s-4.2-5.2-7.1-7.7
+	c-2.9-2.5-6.2-4.9-9.8-7.1c-3.7-2.3-7.3-4.6-11.1-6.9c-4-2.5-8-4.9-12.1-7.4c-4.1-2.4-7.7-5.1-11-8.1s-5.9-6.5-7.9-10.6
+	c-2-4.1-3-9-3-14.8c0-5.5,1-10.5,3-15c2-4.5,4.8-8.3,8.4-11.5c3.6-3.2,7.9-5.6,12.8-7.4c5-1.7,10.4-2.6,16.3-2.6
+	c3.6,0,6.9,0.3,9.8,0.8c3,0.5,6.2,1.7,9.8,3.5c1.9,1,4.2,1.7,6.7,2.2c2.5,0.5,5.8,0,9.8-1.5l2.7,25c-1.5-3.3-3.1-6.4-4.8-9.3
+	c-1.5-2.5-3.3-5-5.3-7.7s-4.2-4.7-6.5-6.2c-5-2.9-9.1-4.6-12.3-5.1s-6.6-0.7-10-0.7c-2.9,0-5.9,0.9-8.9,2.6c-3,1.7-5.8,3.9-8.4,6.6
+	s-4.6,5.8-6.2,9.2c-1.6,3.5-2.4,6.9-2.4,10.4c0,3.7,0.8,6.9,2.5,9.6s3.9,5.1,6.6,7.2c2.8,2.1,5.9,4.2,9.4,6.2
+	C569.7,59.3,573.3,61.4,576.9,63.6z"/>
+<path class="st0" d="M728.4,36.3l-0.2-1c-1.1-4.4-2.9-8.5-5.4-12.2c-2.5-3.7-5.5-6.9-8.9-9.6s-7.3-4.8-11.6-6.2
+	C698,5.8,693.6,5,689,5h-19.9v66.6h20.7c2.3,0,4.4-0.6,6.1-2c1.7-1.3,2.9-3.1,3.6-5.3l2.5-8.7v32.7l-2.5-8.7c-0.7-2.2-1.9-4-3.6-5.3
+	c-1.7-1.3-3.8-2-6.1-2h-20.7v65.4c0,2.4,0.7,4.4,2,6.1c1.3,1.7,3.1,2.9,5.3,3.6l4.8,1.5h-42.2l4.8-1.5c2.2-0.7,4-1.9,5.3-3.6
+	c1.3-1.7,2-3.8,2-6.1V15.2c0-2.3-0.7-4.4-2-6.1c-1.3-1.7-3.1-2.9-5.3-3.6L638.9,4h82.8L728.4,36.3z"/>
+<path class="st0" d="M772.8,144c1.3,1.7,3.1,2.9,5.3,3.6l4.8,1.5h-42.2l4.8-1.5c2.2-0.7,4-1.9,5.3-3.6c1.3-1.7,2-3.8,2-6.1V15.2
+	c0-2.3-0.7-4.4-2-6.1c-1.3-1.7-3.1-2.9-5.3-3.6L740.6,4h42.2L778,5.4c-2.2,0.7-4,1.9-5.3,3.6c-1.3,1.7-2,3.8-2,6.1v122.7
+	C770.8,140.3,771.4,142.3,772.8,144z"/>
+<path class="st0" d="M920.8,147.6l4.1,1.2h-42.2l6-1.7c1.1-0.3,1.9-1,2.4-2.1c0.5-1.1,0.4-2.2-0.3-3.3l-32.5-56.3L819,141.8
+	c-0.4,1.1-0.4,2.2,0.1,3.2c0.5,1,1.3,1.7,2.4,2l6.8,1.9h-25l5.2-1.5c4.7-1.2,8.4-3.9,11.2-8.1l38.1-54.9l-42.6-74.1
+	c-1.9-2.6-4.5-4.4-7.7-5.2L803.3,4h42.2l-6,1.7c-1.1,0.3-1.9,1-2.4,2.1c-0.5,1.1-0.4,2.2,0.3,3.3l32.5,56.3L909.2,11
+	c0.4-1.1,0.4-2.2-0.1-3.2c-0.5-1-1.3-1.7-2.4-2L899.9,4h25l-5.2,1.5c-4.7,1.2-8.4,3.9-11.2,8.1l-38.1,54.9l42.6,74.1
+	C915.1,145.1,917.7,146.8,920.8,147.6z"/>
+<path class="st0" d="M1042.5,117.8l-9.7,31.3h-90.2l4.8-1.5c2.2-0.7,4-1.9,5.3-3.6c1.3-1.7,2-3.8,2-6.1V15.2c0-2.3-0.7-4.4-2-6.1
+	c-1.3-1.7-3.1-2.9-5.3-3.6L942.6,4h82.8l6.6,32.1l-0.2-1c-1.1-4.4-2.9-8.5-5.4-12.2c-2.5-3.7-5.4-6.9-8.9-9.6
+	c-3.4-2.7-7.3-4.8-11.6-6.2c-4.3-1.5-8.7-2.2-13.3-2.2h-19.9v66.6h20.7c2.3,0,4.4-0.6,6.1-2c1.7-1.3,2.9-3.1,3.6-5.3l2.5-8.7v32.7
+	l-2.5-8.7c-0.7-2.2-1.9-4-3.6-5.3c-1.7-1.3-3.8-2-6.1-2h-20.7v65.4c0,2.4,0.7,4.4,2,6.1c1.3,1.7,3.1,2.9,5.3,3.6l1.7,0.4h21.5
+	c8.6,0,16.3-2.4,23.2-7.2s11.8-11.2,14.7-19.3L1042.5,117.8z"/>
+<path class="st0" d="M1111.3,4c10.8,0,20.1,1.9,27.8,5.7c7.7,3.8,14.1,9,19.1,15.5c5,6.6,8.6,14.3,11,23.1s3.5,18.3,3.5,28.4
+	c0,10.2-1.2,19.7-3.5,28.5c-2.3,8.8-6,16.4-11,23s-11.3,11.7-19.1,15.4s-17,5.6-27.8,5.6h-56.4l4.8-1.5c2.2-0.7,4-1.9,5.3-3.6
+	c1.3-1.7,2-3.8,2-6.1V15.2c0-2.3-0.7-4.4-2-6.1c-1.3-1.7-3.1-2.9-5.3-3.6l-4.8-1.5L1111.3,4L1111.3,4z M1111.2,148.3
+	c7.2,0,13.4-1.9,18.8-5.7c5.4-3.8,9.9-8.9,13.6-15.4c3.7-6.5,6.4-14.1,8.2-22.8c1.8-8.7,2.7-17.9,2.7-27.7c0-9.8-0.9-19-2.7-27.7
+	c-1.8-8.7-4.5-16.3-8.2-22.8c-3.7-6.5-8.2-11.6-13.6-15.3s-11.7-5.6-18.8-5.6h-26.1v132.9c0,2.4,0.7,4.4,2,6.1
+	c1.3,1.7,3.1,2.9,5.3,3.6l1.7,0.4L1111.2,148.3L1111.2,148.3z"/>
+</svg>