Improved scene actors filter.

.eslintrc

@@ -27,6 +27,7 @@
 		"vue/no-reserved-component-names": 0,
         "no-tabs": "off",
         "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}],
+		"prefer-destructuring": 0,
         "template-curly-spacing": "off",
         "vue/html-indent": ["error", "tab"],
         "vue/multiline-html-element-content-newline": 0,

assets/css/theme.css

@@ -49,7 +49,6 @@
     --text-light: #fff;
 
     --link: #48f;
-	--error: #f66;
 
     --male: #0af;
     --female: #f0a;
@@ -59,4 +58,10 @@
 	--disabled: #c20;
 	--disabled-background: rgba(255, 0, 0, .1);
 	--disabled-handle: var(--grey-light-10);
+
+	--error: #f66;
+    --alert: #f00;
+    --warn: #fa0;
+    --success: #5c2;
+    --notice: #25c;
 }

assets/img/icons/genders.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generated by IcoMoon.io -->
+
+<svg
+   version="1.1"
+   width="20.714647"
+   height="19.141911"
+   viewBox="0 0 20.714647 19.141911"
+   id="svg1"
+   sodipodi:docname="genders.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="12.621741"
+     inkscape:cx="6.7344115"
+     inkscape:cy="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <title
+     id="title1">male</title>
+  <path
+     id="path1"
+     d="M 15.714844 0 L 11.472656 4.2421875 L 12.886719 5.65625 L 14.714844 3.828125 L 14.714844 9.2441406 C 13.785707 9.4322314 12.900229 9.8868806 12.179688 10.607422 C 10.227367 12.559742 10.227367 15.725414 12.179688 17.677734 C 14.132008 19.630054 17.29768 19.630054 19.25 17.677734 C 21.20232 15.725414 21.20232 12.559742 19.25 10.607422 C 18.529459 9.8868806 17.643981 9.4322314 16.714844 9.2441406 L 16.714844 3.828125 L 18.542969 5.65625 L 19.957031 4.2421875 L 15.714844 0 z M 5 1.5703125 C 2.2390028 1.5703125 0 3.8093153 0 6.5703125 C 0 8.9893106 1.7180023 11.007704 4 11.470703 L 4 13.570312 L 1 13.570312 L 1 15.570312 L 4 15.570312 L 4 17.570312 L 6 17.570312 L 6 15.570312 L 9 15.570312 L 9 13.570312 L 6 13.570312 L 6 11.470703 C 8.2819977 11.007704 10 8.9893096 10 6.5703125 C 10 3.8093153 7.7609972 1.5703125 5 1.5703125 z M 5 3.2714844 C 6.8229982 3.2714844 8.3007812 4.7483143 8.3007812 6.5703125 C 8.3007812 8.3923102 6.8229982 9.8710938 5 9.8710938 C 3.1770018 9.8710938 1.6992187 8.3923112 1.6992188 6.5703125 C 1.6992188 4.7473143 3.1770018 3.2714844 5 3.2714844 z M 15.714844 10.841797 C 16.559394 10.841709 17.404301 11.164066 18.048828 11.808594 C 19.337883 13.097647 19.337883 15.187509 18.048828 16.476562 C 16.759774 17.765617 14.669913 17.765617 13.380859 16.476562 C 12.091805 15.187509 12.091805 13.097647 13.380859 11.808594 C 14.025033 11.16442 14.870294 10.841885 15.714844 10.841797 z " />
+  <metadata
+     id="metadata1">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:title>male</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+</svg>

components/filters/actors.vue

@@ -0,0 +1,257 @@
+<template>
+	<div class="actors-container">
+		<div class="actors-filters">
+			<input
+				v-model="search"
+				type="search"
+				placeholder="Filter actors"
+				class="input input-inline actors-search"
+			>
+
+			<div
+				class="filter-sort noselect"
+				@click="selectGender"
+			>
+				<div
+					v-if="!selectedGender"
+					class="gender-unselected"
+				><Icon icon="genders" /></div>
+
+				<Gender
+					v-else
+					:gender="selectedGender"
+					class="gender"
+				/>
+			</div>
+
+			<div
+				v-show="order === 'name'"
+				class="filter-sort order noselect"
+				@click="order = 'count'"
+			>
+				<Icon
+					icon="sort-alpha-asc"
+				/>
+			</div>
+
+			<div
+				v-show="order === 'count'"
+				class="filter-sort order noselect"
+				@click="order = 'name'"
+			>
+				<Icon
+					icon="sort-numeric-desc"
+				/>
+			</div>
+		</div>
+
+		<ul
+			v-for="(group, groupKey) in groupedActors"
+			:key="groupKey"
+			class="filter-items nolist"
+		>
+			<li
+				v-for="(actor, index) in group"
+				:key="`filter-actor-${actor.id}`"
+				class="filter-item"
+				:class="{ selected: filters.actors.includes(actor.id), first: groupKey === 'available' && index === 0 && filters.actors.length > 0 }"
+				@click="emit('update', 'actors', [actor.id])"
+			>
+				<div
+					class="filter-include"
+					@click.stop="toggleActor(actor)"
+				>
+					<Icon
+						icon="checkmark"
+						class="filter-add"
+					/>
+
+					<Icon
+						icon="cross2"
+						class="filter-remove"
+					/>
+				</div>
+
+				<span class="filter-name actor-name">{{ actor.name }}</span>
+
+				<span class="actor-details">
+					<div class="actor-gender">
+						<Gender
+							:gender="actor.gender"
+							class="gender"
+						/>
+					</div>
+
+					<span
+						v-if="actor.count"
+						class="actor-count"
+					>{{ actor.count }}</span>
+				</span>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+import Gender from '#/components/actors/gender.vue';
+
+const props = defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+	actors: {
+		type: Array,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['update']);
+
+const search = ref('');
+const searchRegexp = computed(() => new RegExp(search.value, 'i'));
+const selectedGender = ref(null);
+const order = ref('name');
+
+const { pageProps } = inject('pageContext');
+const { actor: pageActor } = pageProps;
+
+const groupedActors = computed(() => ({
+	selected: props.actors.filter((actor) => props.filters.actors.includes(actor.id)),
+	available: props.actors
+		.filter((actor) => !props.filters.actors.includes(actor.id)
+			&& actor.id !== pageActor?.id
+			&& searchRegexp.value.test(actor.name)
+			&& (!selectedGender.value || actor.gender === selectedGender.value))
+		.sort((actorA, actorB) => {
+			if (order.value === 'count') {
+				return actorB.count - actorA.count;
+			}
+
+			return actorA.name.localeCompare(actorB.name);
+		}),
+}));
+
+const genders = computed(() => [null, ...['female', 'male', 'transsexual', 'other'].filter((gender) => props.actors.some((actor) => actor.gender === gender))]);
+
+function toggleActor(actor) {
+	if (props.filters.actors.includes(actor.id)) {
+		emit('update', 'actors', props.filters.actors.filter((actorId) => actorId !== actor.id));
+		return;
+	}
+
+	emit('update', 'actors', props.filters.actors.concat(actor.id));
+}
+
+function selectGender() {
+	console.log(genders.value);
+	const genderIndex = genders.value.indexOf(selectedGender.value);
+
+	if (genderIndex >= genders.value.length - 1) {
+		selectedGender.value = genders.value[0];
+		return;
+	}
+
+	selectedGender.value = genders.value[genderIndex + 1];
+}
+</script>
+
+<style scoped>
+.actors-container {
+	box-shadow: inset 0 -1px 3px var(--shadow-weak-30);
+}
+
+.actors-filters {
+	display: flex;
+	border-bottom: solid 1px var(--shadow-weak-30);
+}
+
+.actors-search {
+	flex-grow: 1;
+	border-bottom: none;
+	width: 0;
+}
+
+.filter-sort {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	align-self: stretch;
+	justify-content: center;
+	padding: 0 .5rem;
+	cursor: pointer;
+	font-weight: bold;
+	color: var(--shadow);
+
+	&.order {
+		padding: 0 1rem 0 .25rem;
+	}
+
+	.icon {
+		fill: var(--shadow);
+	}
+
+	&:hover {
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
+.gender-unselected {
+	.icon {
+		fill: var(--shadow);
+	}
+}
+
+.filter-items {
+	max-height: 15rem;
+	overflow-y: auto;
+}
+
+.filter-item.first {
+	border-top: solid 1px var(--shadow-weak-30);
+}
+
+.filter-name {
+	height: 1rem;
+	align-items: stretch;
+	padding: .25rem .75rem .25rem .25rem;
+}
+
+.actor-name {
+	display: flex;
+	align-items: stretch;
+}
+
+.actor-details {
+	display: flex;
+	align-items: stretch;
+	margin-left: .5rem;
+}
+
+.actor-gender {
+	width: 1rem;
+	display: flex;
+	align-items: center;
+
+	.gender {
+		display: flex;
+	}
+}
+
+.actor-count {
+	width: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 .25rem;
+	overflow: hidden;
+	color: var(--shadow-weak-10);
+	font-size: .9rem;
+}
+</style>

components/filters/country.vue

@@ -7,7 +7,7 @@
 			v-if="!filters.country"
 			v-model="countryQuery"
 			type="search"
-			placeholder="Filter country"
+			placeholder="Filter countries"
 			class="input input-inline countries-search"
 		>
 

components/filters/filters.vue

@@ -67,6 +67,120 @@ function toggleFilters(state) {
 }
 </script>
 
+<style>
+.filter-mode {
+	width: 100%;
+	color: var(--shadow);
+	background: none;
+	padding: .75rem;
+	margin: 0 0 .5rem 0;
+	font-size: 1rem;
+	border: none;
+	border-bottom: solid 1px var(--shadow-hint);
+
+	option {
+		color: var(--text-dark);
+	}
+}
+
+.filter-clear {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: .5rem 1rem;
+	color: var(--shadow-weak-10);
+	text-decoration: none;
+	cursor: default;
+
+	.icon {
+		fill: var(--shadow-weak-30);
+		margin: 0 0 0 1rem;
+	}
+
+	&.active {
+		color: var(--shadow);
+
+		.icon {
+			fill: var(--shadow-weak-10);
+		}
+
+		&:hover {
+			color: var(--text);
+			background: var(--shadow-hint);
+			cursor: pointer;
+
+			.icon {
+				fill: var(--alert);
+			}
+		}
+	}
+}
+
+.filter-items .filter-item {
+	display: flex;
+	align-items: stretch;
+
+	&:hover {
+		background: var(--shadow-weak-30);
+		cursor: pointer;
+	}
+
+	&.selected {
+		.filter-include  {
+			.filter-add {
+				fill: var(--success);
+			}
+
+			&:hover {
+				.filter-add {
+					display: none;
+				}
+
+				.filter-remove {
+					display: inline-block;
+				}
+			}
+		}
+	}
+}
+
+.filter-name {
+	min-width: 8rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-grow: 1;
+	padding: .25rem .75rem .25rem 1rem;
+	color: var(--text);
+	text-decoration: none;
+}
+
+.filter-include {
+	display: flex;
+	align-items: center;
+
+	.icon {
+		width: 1rem;
+		padding: 0 .75rem;
+		fill: var(--shadow-weak-30);
+	}
+
+	.filter-remove {
+		display: none;
+		fill: var(--alert);
+	}
+
+	&:hover {
+		cursor: pointer;
+	}
+}
+
+.filter-include:hover,
+.filter-name:hover {
+	background: var(--shadow-weak-30);
+}
+</style>
+
 <style scoped>
 .filters-frame {
 	position: relative;
@@ -88,7 +202,7 @@ function toggleFilters(state) {
 	flex-grow: 1;
 	position: relative;
 	box-sizing: border-box;
-	padding: .5rem 0;
+	padding: 0 0 .5rem 0;
 	background: var(--background);
 	box-shadow: 0 0 3px var(--shadow-weak-30);
 

components/scenes/scenes.vue

@@ -1,35 +1,18 @@
 <template>
 	<div class="page">
 		<Filters v-if="showFilters">
-			<ul class="filter-actors selected nolist">
+			<ActorsFilter
-				<li
+				:filters="filters"
-					v-for="aggActor in selectedActors"
+				:actors="actors"
-					:key="`filter-actor-${aggActor.id}`"
+				@update="updateFilter"
-					class="filter-actor"
+			/>
-					@click="updateFilter('actors', [...filters.actors, aggActor.id])"
-				>
-					{{ aggActor.name }}
-
-					<button
-						v-if="filters.actors.includes(aggActor.id)"
-						class="filter-actor-remove"
-						@click.stop="updateFilter('actors', filters.actors.filter((actorId) => actorId !== aggActor.id))"
-					><Icon icon="cross2" /></button>
-				</li>
-			</ul>
-
-			<ul class="filter-actors available nolist">
-				<li
-					v-for="aggActor in actors"
-					:key="`filter-actor-${aggActor.id}`"
-					class="filter-actor"
-					@click="updateFilter('actors', [...filters.actors, aggActor.id])"
-				>{{ aggActor.name }}</li>
-			</ul>
 		</Filters>
 
 		<div class="scenes-container">
-			<div class="scenes-header">
+			<div
+				v-if="showMeta"
+				class="scenes-header"
+			>
 				<div class="meta">{{ total }} results</div>
 			</div>
 
@@ -68,7 +51,7 @@
 </template>
 
 <script setup>
-import { ref, computed, inject } from 'vue';
+import { ref, inject } from 'vue';
 import { parse } from 'path-to-regexp';
 
 import navigate from '#/src/navigate.js';
@@ -76,6 +59,7 @@ import { get } from '#/src/api.js';
 import events from '#/src/events.js';
 
 import Filters from '#/components/filters/filters.vue';
+import ActorsFilter from '#/components/filters/actors.vue';
 import Scene from './tile.vue';
 import Pagination from '../pagination/pagination.vue';
 
@@ -84,13 +68,15 @@ defineProps({
 		type: Boolean,
 		default: true,
 	},
+	showMeta: {
+		type: Boolean,
+		default: true,
+	},
 });
 
 const { pageProps, routeParams, urlParsed } = inject('pageContext');
 const { scope } = routeParams;
 
-console.log(scope);
-
 const {
 	actor,
 } = pageProps;
@@ -105,24 +91,6 @@ const filters = ref({
 	actors: urlParsed.search.actors?.split(',').filter(Boolean).map((actorId) => Number(actorId)) || [],
 });
 
-/*
-const sortedActors = computed(() => Array.from(actors.value).sort((actorA, actorB) => {
-	if (filters.value.actors.includes(actorA.id) && !filters.value.actors.includes(actorB.id)) {
-		return -1;
-	}
-
-	if (filters.value.actors.includes(actorB.id) && !filters.value.actors.includes(actorA.id)) {
-		return 1;
-	}
-
-	return 0;
-}));
-*/
-
-const selectedActors = computed(() => actors.value.filter((filterActor) => filters.value.actors.includes(filterActor.id)));
-
-console.log(filters.value.actors);
-
 function getPath(targetScope, preserveQuery) {
 	const path = parse(routeParams.path)
 		.map((segment) => {
@@ -152,8 +120,6 @@ async function search(resetPage = true) {
 
 	const query = {};
 
-	console.log(query);
-
 	const res = await get('/scenes', {
 		...query,
 		actors: [actor?.id, filters.value.actors].filter(Boolean).join(','), // if we're on an actor page, actor ID needs to be included
@@ -199,6 +165,7 @@ function updateFilter(prop, value, reload = true) {
 .scenes-container {
 	display: flex;
 	flex-direction: column;
+	flex-grow: 1;
 }
 
 .meta {
@@ -231,39 +198,4 @@ function updateFilter(prop, value, reload = true) {
 		font-weight: bold;
 	}
 }
-
-.filter-actors {
-	max-height: 15rem;
-
-	&.available {
-		overflow-y: auto;
-	}
-}
-
-.filter-actor {
-	display: flex;
-	justify-content: space-between;
-
-	&:hover {
-		color: var(--primary);
-		cursor: pointer;
-	}
-}
-
-.filter-actor-remove {
-	background: none;
-	border: none;
-
-	.icon {
-		fill: var(--shadow);
-	}
-
-	&:hover {
-		cursor: pointer;
-
-		.icon {
-			fill: var(--error);
-		}
-	}
-}
 </style>

pages/updates/+Page.vue

@@ -3,6 +3,7 @@
 		<Scenes
 			:scenes="scenes"
 			:show-filters="false"
+			:show-meta="false"
 		/>
 	</div>
 </template>

src/actors.js

@@ -31,6 +31,7 @@ export function curateActor(actor, context = {}) {
 			isS3: actor.avatar.is_s3,
 		},
 		likes: actor.stashed,
+		...context.append?.[actor.id],
 	};
 }
 
@@ -58,7 +59,7 @@ export async function fetchActorsById(actorIds, options = {}) {
 	]);
 
 	if (options.order) {
-		return actors.map((actorEntry) => curateActor(actorEntry));
+		return actors.map((actorEntry) => curateActor(actorEntry, { append: options.append }));
 	}
 
 	const curatedActors = actorIds.map((actorId) => {
@@ -69,7 +70,7 @@ export async function fetchActorsById(actorIds, options = {}) {
 			return null;
 		}
 
-		return curateActor(actor);
+		return curateActor(actor, { append: options.append });
 	}).filter(Boolean);
 
 	return curatedActors;

src/scenes.js

@@ -238,8 +238,10 @@ export async function fetchScenes(filters, rawOptions) {
 		}),
 	});
 
+	const actorCounts = result.aggregations?.actorIds && Object.fromEntries(result.aggregations?.actorIds?.buckets.map((bucket) => [bucket.key, { count: bucket.doc_count }]));
+
 	const [actors] = await Promise.all([
-		options.aggregate ? fetchActorsById(result.aggregations.actorIds.buckets.map((bucket) => bucket.key), { order: ['name', 'asc'] }) : [],
+		result.aggregations?.actorIds ? fetchActorsById(result.aggregations.actorIds.buckets.map((bucket) => bucket.key), { order: ['name', 'asc'], append: actorCounts }) : [],
 	]);
 
 	const sceneIds = result.hits.hits.map((hit) => Number(hit._id));