DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added global search.

This commit is contained in:
DebaucheryLibrarian 2024-02-22 05:08:06 +01:00
parent fc240710f3
commit 09df134558
15 changed files with 461 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/actors/bio.vue
View File

@ -391,7 +391,7 @@ defineProps({
.flag {
height: 1rem;
margin: .25rem .25rem 0 0;
margin: .25rem .5rem 0 0;
}
.bio-name {

21
components/filters/actors.vue
View File

@ -1,5 +1,11 @@
<template>
<div class="filter actors-container">
<div
v-if="availableActors.length === 0"
class="filter-empty"
>No actors</div>
<template v-else>
<div class="filters-sort">
<input
v-model="search"
@ -54,9 +60,9 @@
:actor="actor"
:index="index"
:filters="filters"
:toggle-actor="toggleActor"
:toggle-actor="(actor) => toggleActor(actor, true)"
type="selected"
@actor="(actor) => emit('update', 'actors', [actor])"
@actor="(actor) => toggleActor(actor, false)"
/>
</ul>
@ -71,12 +77,13 @@
:actor="actor"
:index="index"
:filters="filters"
:toggle-actor="toggleActor"
:toggle-actor="(actor) => toggleActor(actor, true)"
type="available"
@actor="(actor) => emit('update', 'actors', [actor])"
@actor="(actor) => toggleActor(actor, false)"
/>
</template>
</UseVirtualList>
</template>
</div>
</template>
@ -124,13 +131,17 @@ const availableActors = computed(() => props.actors
const genders = computed(() => [null, ...['female', 'male', 'transsexual', 'other'].filter((gender) => props.actors.some((actor) => actor.gender === gender))]);
function toggleActor(actor) {
function toggleActor(actor, combine) {
if (props.filters.actors.some((filterActor) => filterActor.id === actor.id)) {
emit('update', 'actors', props.filters.actors.filter((filterActor) => filterActor.id !== actor.id));
return;
}
if (combine) {
emit('update', 'actors', props.filters.actors.concat(actor));
} else {
emit('update', 'actors', [actor]);
}
}
function selectGender() {

7
components/filters/channels.vue
View File

@ -1,5 +1,11 @@
<template>
<div class="filter channels-container">
<div
v-if="entities.length === 0"
class="filter-empty"
>No channels</div>
<template v-else>
<div class="filters-sort">
<input
v-model="search"
@ -70,6 +76,7 @@
</span>
</li>
</ul>
</template>
</div>
</template>

6
components/filters/filters.vue
View File

@ -284,6 +284,12 @@ function toggleFilters(state) {
color: var(--shadow-weak-10);
font-size: .9rem;
}
.filter-empty {
padding: .5rem;
color: var(--shadow);
font-style: italic;
}
</style>
<style scoped>

21
components/filters/tags.vue
View File

@ -1,5 +1,11 @@
<template>
<div class="filter tags-container">
<div
v-if="tags.length === 0"
class="filter-empty"
>No tags</div>
<template v-else>
<div class="filters-sort">
<input
v-model="search"
@ -40,7 +46,7 @@
</div>
<ul
v-for="(group, groupKey) in groupedtags"
v-for="(group, groupKey) in groupedTags"
:key="groupKey"
class="filter-items nolist"
:class="groupKey"
@ -54,11 +60,11 @@
first: groupKey === 'available' && index === 0 && filters.tags.length > 0,
disabled: groupKey === 'page',
}"
@click="emit('update', 'tags', [tag.slug])"
@click.stop="toggleTag(tag, false)"
>
<div
class="filter-include"
@click.stop="toggleTag(tag)"
@click.stop="toggleTag(tag, true)"
>
<Icon
icon="checkmark"
@ -86,6 +92,7 @@
</span>
</li>
</ul>
</template>
</div>
</template>
@ -133,7 +140,7 @@ const priorityTags = [
'lesbian',
];
const groupedtags = computed(() => {
const groupedTags = computed(() => {
const selected = props.tags.filter((tag) => props.filters.tags.includes(tag.slug));
const filtered = props.tags.filter((tag) => !props.filters.tags.includes(tag.slug)
&& tag.id !== pageTag?.id
@ -173,13 +180,17 @@ const groupedtags = computed(() => {
};
});
function toggleTag(tag) {
function toggleTag(tag, combine) {
if (props.filters.tags.includes(tag.slug)) {
emit('update', 'tags', props.filters.tags.filter((tagId) => tagId !== tag.slug));
return;
}
if (combine) {
emit('update', 'tags', props.filters.tags.concat(tag.slug));
} else {
emit('update', 'tags', [tag.slug]);
}
}
</script>

54
components/header/header.vue
View File

@ -1,5 +1,6 @@
<template>
<header class="header">
<nav class="nav">
<Link href="/">
<h1 class="title">
<div
@ -9,7 +10,6 @@
</h1>
</Link>
<nav class="nav">
<ul class="nav-list nolist">
<li class="nav-item">
<Link
@ -47,17 +47,42 @@
</li>
</ul>
</nav>
<form
class="search"
@submit.prevent="search"
>
<input
v-model="query"
type="search"
placeholder="Search"
class="input"
>
<Icon icon="search" />
</form>
</header>
</template>
<script setup>
import { ref, inject } from 'vue';
import navigate from '#/src/navigate.js';
import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
const pageContext = inject('pageContext');
const query = ref(pageContext.urlParsed.search.q || '');
function search() {
navigate('/search', { q: query.value }, { redirect: true });
}
</script>
<style scoped>
.header {
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000; /* make sure shadow shows up above content */
box-shadow: 0 0 3px var(--shadow-weak-10);
}
@ -78,7 +103,8 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
}
.nav {
display: inline-block;
display: flex;
align-items: center;
}
.nav-item .link {
@ -100,4 +126,28 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
color: var(--primary);
}
}
.search {
height: 100%;
display: flex;
align-items: center;
flex-direction: row-reverse;
.input {
height: 100%;
border: none;
border-radius: 0;
border-left: solid 1px var(--shadow-weak-30);
background: var(--background);
}
.icon {
margin-right: .75rem;
fill: var(--shadow-weak-10);
}
.input:focus + .icon {
fill: var(--primary);
}
}
</style>

12
components/pagination/pagination.vue
View File

@ -95,6 +95,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
query: {
type: String,
default: null,
},
includeQuery: {
type: Boolean,
default: true,
@ -148,6 +152,14 @@ function go(page, event) {
}
function getPath(page) {
if (!routeParams.path && props.includeQuery) {
return `${pageContext.urlParsed.pathname}${page}${urlParsed.searchOriginal}`;
}
if (!routeParams.path) {
return `${pageContext.urlParsed.pathname}${page}`;
}
const path = parse(routeParams.path)
.map((segment) => {
if (segment.name === 'page') {

57
components/scenes/scenes.vue
View File

@ -6,6 +6,16 @@
v-if="showFilters"
:class="{ loading }"
>
<div class="filter">
<input
v-model="filters.search"
type="search"
placeholder="Search scenes"
class="search input"
@search="search"
>
</div>
<TagsFilter
:filters="filters"
:tags="aggTags"
@ -38,12 +48,16 @@
<select
v-model="scope"
class="input"
@change="search"
@change="search({ autoScope: false })"
>
<option value="likes">Likes</option>
<option value="latest">Latest</option>
<option value="upcoming">Upcoming</option>
<option value="new">New</option>
<option
value="results"
:disabled="!filters.search"
>Relevance</option>
</select>
</div>
@ -108,7 +122,7 @@ import Scene from '#/components/scenes/tile.vue';
import Pagination from '#/components/pagination/pagination.vue';
import Ellipsis from '#/components/loading/ellipsis.vue';
defineProps({
const props = defineProps({
showFilters: {
type: Boolean,
default: true,
@ -121,6 +135,10 @@ defineProps({
type: Boolean,
default: false,
},
defaultScope: {
type: String,
default: 'latest',
},
});
const { pageProps, routeParams, urlParsed } = inject('pageContext');
@ -137,7 +155,7 @@ const aggTags = ref(pageProps.aggTags || []);
const aggChannels = ref(pageProps.aggChannels || []);
const currentPage = ref(Number(routeParams.page));
const scope = ref(routeParams.scope);
const scope = ref(routeParams.scope || props.defaultScope);
const total = ref(Number(pageProps.total));
const loading = ref(false);
@ -150,6 +168,7 @@ const channels = Object.fromEntries(aggChannels.value.filter((channel) => channe
const queryEntity = networks[urlParsed.search.e] || channels[urlParsed.search.e];
const filters = ref({
search: urlParsed.search.q,
tags: urlParsed.search.tags?.split(',').filter(Boolean) || [],
entity: queryEntity,
actors: queryActors,
@ -175,18 +194,37 @@ function getPath(targetScope, preserveQuery) {
return path;
}
async function search(resetPage = true) {
if (resetPage) {
async function search(options = {}) {
if (options.resetPage !== false) {
currentPage.value = 1;
}
const query = {};
if (options.autoScope !== false) {
if (filters.value.search) {
scope.value = 'results';
}
if (!filters.value.search && scope.value === 'results') {
scope.value = 'latest';
}
}
const query = {
q: filters.value.search || undefined,
};
const entity = filters.value.entity || pageEntity;
const entitySlug = entity?.type === 'network' ? `_${entity.slug}` : entity?.slug;
loading.value = true;
navigate(getPath(scope.value, false), {
...query,
actors: filters.value.actors.map((filterActor) => getActorIdentifier(filterActor)).join(',') || undefined, // don't include page actor ID in query, already a parameter
tags: filters.value.tags.join(',') || undefined,
e: filters.value.entity?.type === 'network' ? `_${filters.value.entity.slug}` : (filters.value.entity?.slug || undefined),
}, { redirect: false });
const res = await get('/scenes', {
...query,
actors: [pageActor, ...filters.value.actors].filter(Boolean).map((filterActor) => getActorIdentifier(filterActor)).join(','), // if we're on an actor page, that actor ID needs to be included
@ -205,13 +243,6 @@ async function search(resetPage = true) {
loading.value = false;
events.emit('scrollUp');
navigate(getPath(scope.value, false), {
...query,
actors: filters.value.actors.map((filterActor) => getActorIdentifier(filterActor)).join(',') || undefined, // don't include page actor ID in query, already a parameter
tags: filters.value.tags.join(',') || undefined,
e: filters.value.entity?.type === 'network' ? `_${filters.value.entity.slug}` : (filters.value.entity?.slug || undefined),
}, { redirect: false });
}
function updateFilter(prop, value, reload = true) {

14
pages/actors/+Page.vue
View File

@ -55,7 +55,7 @@
<select
v-model="order"
class="input"
@change="search"
@change="search({ autoScope: false })"
>
<option value="name.asc">Name</option>
<option value="likes.desc">Likes</option>
@ -139,11 +139,12 @@ const filters = ref({
avatarRequired: !!urlParsed.search.avatar,
});
async function search(resetPage = true) {
if (resetPage) {
async function search(options = {}) {
if (options.resetPage !== false) {
currentPage.value = 1;
}
if (options.autoScope !== false) {
if (q.value) {
order.value = 'relevance.desc';
}
@ -151,6 +152,7 @@ async function search(resetPage = true) {
if (!q.value && order.value.includes('relevance')) {
order.value = 'likes.desc';
}
}
const query = {
q: q.value || undefined,
@ -167,6 +169,8 @@ async function search(resetPage = true) {
avatar: filters.value.avatarRequired || undefined,
};
navigate(`/actors/${currentPage.value}`, query, { redirect: false });
const res = await get('/actors', {
...query,
page: currentPage.value, // client uses param rather than query pagination
@ -178,12 +182,12 @@ async function search(resetPage = true) {
countries.value = res.countries;
events.emit('scrollUp');
navigate(`/actors/${currentPage.value}`, query, { redirect: false });
}
function paginate({ page }) {
currentPage.value = page;
search(false);
search({ resetPage: false });
}
function updateFilter(prop, value, reload = true) {

12
pages/scene/+Page.vue
View File

@ -3,6 +3,11 @@
<div class="content">
<div class="banner">
<div class="poster-container">
<a
:href="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.path}` : `/media/${scene.poster.path}`"
target="_blank"
class="poster-link"
>
<img
v-if="scene.poster"
:src="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.thumbnail}` : `/media/${scene.poster.thumbnail}`"
@ -11,6 +16,7 @@
:height="scene.poster.height"
class="poster"
>
</a>
</div>
<div
@ -21,6 +27,11 @@
v-for="photo in scene.photos"
:key="`photo-${photo.id}`"
class="photo-container"
>
<a
:href="photo.isS3 ? `https://cdndev.traxxx.me/${photo.path}` : `/media/${photo.path}`"
target="_blank"
class="photo-link"
>
<img
:src="photo.isS3 ? `https://cdndev.traxxx.me/${photo.thumbnail}` : `/media/${photo.thumbnail}`"
@ -29,6 +40,7 @@
:height="photo.height"
class="photo"
>
</a>
</div>
</div>
</div>

6
pages/updates/+Page.vue
View File

@ -1,7 +1,6 @@
<template>
<div>
<Scenes
:scenes="scenes"
:show-filters="false"
:show-meta="false"
:show-scope-tabs="true"
@ -10,10 +9,5 @@
</template>
<script setup>
import { inject } from 'vue';
import Scenes from '#/components/scenes/scenes.vue';
const { pageProps } = inject('pageContext');
const { scenes } = pageProps;
</script>

12
src/actors.js
View File

@ -67,7 +67,7 @@ export function sortActorsByGender(actors) {
}
const alphaActors = actors.sort((actorA, actorB) => actorA.name.localeCompare(actorB.name, 'en'));
const genderActors = ['transsexual', 'female', 'male', undefined].flatMap((gender) => alphaActors.filter((actor) => actor.gender === gender));
const genderActors = ['transsexual', 'female', 'male', undefined, null].flatMap((gender) => alphaActors.filter((actor) => actor.gender === gender));
return genderActors;
}
@ -75,7 +75,15 @@ export function sortActorsByGender(actors) {
export async function fetchActorsById(actorIds, options = {}) {
const [actors] = await Promise.all([
knex('actors_meta')
.select('actors_meta.*')
.select(
'actors_meta.*',
'birth_countries.alpha2 as birth_country_alpha2',
knex.raw('COALESCE(birth_countries.alias, birth_countries.name) as birth_country_name'),
'residence_countries.alpha2 as residence_country_alpha2',
knex.raw('COALESCE(residence_countries.alias, residence_countries.name) as residence_country_name'),
)
.leftJoin('countries as birth_countries', 'birth_countries.alpha2', 'actors_meta.birth_country_alpha2')
.leftJoin('countries as residence_countries', 'residence_countries.alpha2', 'actors_meta.residence_country_alpha2')
.whereIn('actors_meta.id', actorIds)
.modify((builder) => {
if (options.order) {

52
src/scenes.js
View File

@ -82,15 +82,19 @@ export async function fetchScenesById(sceneIds) {
.select(
'actors_meta.*',
'releases_actors.release_id',
/* why would we need this for scenes?
'birth_countries.alpha2 as birth_country_alpha2',
'birth_countries.name as birth_country_name',
knex.raw('COALESCE(birth_countries.alias, birth_countries.name) as birth_country_name'),
'residence_countries.alpha2 as residence_country_alpha2',
'residence_countries.name as residence_country_name',
knex.raw('COALESCE(residence_countries.alias, residence_countries.name) as residence_country_name'),
*/
)
.whereIn('release_id', sceneIds)
.leftJoin('actors_meta', 'actors_meta.id', 'releases_actors.actor_id')
.leftJoin('actors_meta', 'actors_meta.id', 'releases_actors.actor_id'),
/*
.leftJoin('countries as birth_countries', 'birth_countries.alpha2', 'actors_meta.birth_country_alpha2')
.leftJoin('countries as residence_countries', 'residence_countries.alpha2', 'actors_meta.residence_country_alpha2'),
*/
knex('releases_directors')
.whereIn('release_id', sceneIds)
.leftJoin('actors as directors', 'directors.id', 'releases_directors.director_id'),
@ -187,6 +191,27 @@ function buildQuery(filters = {}) {
sort = [{ stashed: 'desc' }, { effective_date: 'desc' }];
}
if (filters.scope === 'results') {
sort = [{ _score: 'desc' }, { effective_date: 'desc' }];
}
if (filters.query) {
query.bool.must.push({
bool: {
should: [
{ match: { title_filtered: filters.query } },
{ match: { actors: filters.query } },
{ match: { tags: filters.query } },
{ match: { channel_name: filters.query } },
{ match: { network_name: filters.query } },
{ match: { channel_slug: filters.query } },
{ match: { network_slug: filters.query } },
{ match: { meta: filters.query } }, // date
],
},
});
}
if (filters.tagIds) {
filters.tagIds.forEach((tagId) => {
query.bool.must.push({ equals: { 'any(tag_ids)': tagId } });
@ -269,6 +294,10 @@ export async function fetchScenes(filters, rawOptions) {
const options = curateOptions(rawOptions);
const { query, sort } = buildQuery(filters);
console.log('filters', filters);
console.log('options', options);
console.log('query', query.bool.must);
const result = await searchApi.search({
index: 'scenes',
query,
@ -276,9 +305,24 @@ export async function fetchScenes(filters, rawOptions) {
offset: (options.page - 1) * options.limit,
sort,
aggs: buildAggregates(options),
max_matches: 5000,
options: {
max_matches: 1000,
max_query_time: 10000,
field_weights: {
title_filtered: 7,
actors: 10,
tags: 9,
meta: 6,
channel_name: 2,
channel_slug: 3,
network_name: 1,
network_slug: 1,
},
},
});
console.log(result.hits.hits);
const actorCounts = options.aggregateActors && countAggregations(result.aggregations?.actorIds?.buckets);
const tagCounts = options.aggregateTags && countAggregations(result.aggregations?.tagIds?.buckets);
const channelCounts = options.aggregateChannels && countAggregations(result.aggregations?.channelIds?.buckets);

2
src/web/actors.js
View File

@ -1,8 +1,6 @@
import { fetchActors } from '../actors.js';
export function curateActorsQuery(query) {
console.log('input query', query);
return {
query: query.q,
gender: query.gender,

1
src/web/scenes.js
View File

@ -25,6 +25,7 @@ async function getIdsBySlug(slugs, domain) {
export async function curateScenesQuery(query) {
return {
scope: query.scope || 'latest',
query: query.q,
actorIds: [query.actorId, ...(query.actors?.split(',') || []).map((identifier) => parseActorIdentifier(identifier)?.id)].filter(Boolean),
tagIds: await getIdsBySlug([query.tagSlug, ...(query.tags?.split(',') || [])], 'tags'),
entityId: query.e ? await getIdsBySlug([query.e], 'entities').then(([id]) => id) : query.entityId,