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

2
components/actors/bio.vue
View File

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

147
components/filters/actors.vue
View File

@ -1,82 +1,89 @@
<template> <template>
<div class="filter actors-container"> <div class="filter actors-container">
<div class="filters-sort"> <div
<input v-if="availableActors.length === 0"
v-model="search" class="filter-empty"
type="search" >No actors</div>
:placeholder="`Filter ${actors.length} actors`"
class="input input-inline filters-search" <template v-else>
> <div class="filters-sort">
<input
v-model="search"
type="search"
:placeholder="`Filter ${actors.length} actors`"
class="input input-inline filters-search"
>
<div
class="filter-sort noselect"
@click="selectGender"
>
<div <div
v-if="!selectedGender" class="filter-sort noselect"
class="gender-unselected" @click="selectGender"
><Icon icon="genders" /></div> >
<div
v-if="!selectedGender"
class="gender-unselected"
><Icon icon="genders" /></div>
<Gender <Gender
v-else v-else
:gender="selectedGender" :gender="selectedGender"
class="gender" 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> </div>
<div <ul
v-show="order === 'name'" v-for="(actor, index) in selectedActors"
class="filter-sort order noselect" :key="`actor-${actor.id}`"
@click="order = 'count'" class="filter-items nolist"
> >
<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="(actor, index) in selectedActors"
:key="`actor-${actor.id}`"
class="filter-items nolist"
>
<Actor
:actor="actor"
:index="index"
:filters="filters"
:toggle-actor="toggleActor"
type="selected"
@actor="(actor) => emit('update', 'actors', [actor])"
/>
</ul>
<UseVirtualList
:list="availableActors"
:options="{ itemHeight: 30 }"
style="height: 20rem;"
class="filter-items nolist"
>
<template #default="{ data: actor, index }">
<Actor <Actor
:actor="actor" :actor="actor"
:index="index" :index="index"
:filters="filters" :filters="filters"
:toggle-actor="toggleActor" :toggle-actor="(actor) => toggleActor(actor, true)"
type="available" type="selected"
@actor="(actor) => emit('update', 'actors', [actor])" @actor="(actor) => toggleActor(actor, false)"
/> />
</template> </ul>
</UseVirtualList>
<UseVirtualList
:list="availableActors"
:options="{ itemHeight: 30 }"
style="height: 20rem;"
class="filter-items nolist"
>
<template #default="{ data: actor, index }">
<Actor
:actor="actor"
:index="index"
:filters="filters"
:toggle-actor="(actor) => toggleActor(actor, true)"
type="available"
@actor="(actor) => toggleActor(actor, false)"
/>
</template>
</UseVirtualList>
</template>
</div> </div>
</template> </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))]); 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)) { if (props.filters.actors.some((filterActor) => filterActor.id === actor.id)) {
emit('update', 'actors', props.filters.actors.filter((filterActor) => filterActor.id !== actor.id)); emit('update', 'actors', props.filters.actors.filter((filterActor) => filterActor.id !== actor.id));
return; return;
} }
emit('update', 'actors', props.filters.actors.concat(actor)); if (combine) {
emit('update', 'actors', props.filters.actors.concat(actor));
} else {
emit('update', 'actors', [actor]);
}
} }
function selectGender() { function selectGender() {

133
components/filters/channels.vue
View File

@ -1,75 +1,82 @@
<template> <template>
<div class="filter channels-container"> <div class="filter channels-container">
<div class="filters-sort"> <div
<input v-if="entities.length === 0"
v-model="search" class="filter-empty"
type="search" >No channels</div>
:placeholder="`Filter ${channels.length} channels`"
class="input input-inline filters-search"
>
<div <template v-else>
v-show="order === 'name'" <div class="filters-sort">
class="filter-sort order noselect" <input
@click="order = 'count'" v-model="search"
> type="search"
<Icon icon="sort-alpha-asc" /> :placeholder="`Filter ${channels.length} channels`"
class="input input-inline filters-search"
>
<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> </div>
<div <ul
v-show="order === 'count'" class="filter-items nolist"
class="filter-sort order noselect"
@click="order = 'name'"
> >
<Icon icon="sort-numeric-desc" /> <li
</div> v-for="entity in entities"
</div> :key="`filter-channel-${entity.id}`"
class="filter-item"
<ul :class="{ channel: !entity.isIndependent && entity.type !== 'network', selected: filters.entity?.id === entity.id }"
class="filter-items nolist" @click="emit('update', 'entity', entity)"
> >
<li <span class="filter-name">
v-for="entity in entities"
:key="`filter-channel-${entity.id}`"
class="filter-item"
:class="{ channel: !entity.isIndependent && entity.type !== 'network', selected: filters.entity?.id === entity.id }"
@click="emit('update', 'entity', entity)"
>
<span class="filter-name">
<span
class="filter-text"
:title="entity.name"
>
<img
v-if="entity.isIndependent || entity.type === 'network'"
:src="`/logos/${entity.slug}/favicon_dark.png`"
class="favicon"
>
<Icon
v-else
icon="arrow-up4"
/>
{{ entity.name }}
</span>
<span class="filter-details">
<span <span
v-if="entity.count" class="filter-text"
class="filter-count" :title="entity.name"
>{{ entity.count }}</span> >
<img
v-if="entity.isIndependent || entity.type === 'network'"
:src="`/logos/${entity.slug}/favicon_dark.png`"
class="favicon"
>
<Icon <Icon
v-if="filters.entity?.id === entity.id" v-else
icon="cross2" icon="arrow-up4"
class="filter-remove" />
@click.native.stop="emit('update', 'entity', null)"
/> {{ entity.name }}
</span>
<span class="filter-details">
<span
v-if="entity.count"
class="filter-count"
>{{ entity.count }}</span>
<Icon
v-if="filters.entity?.id === entity.id"
icon="cross2"
class="filter-remove"
@click.native.stop="emit('update', 'entity', null)"
/>
</span>
</span> </span>
</span> </li>
</li> </ul>
</ul> </template>
</div> </div>
</template> </template>

6
components/filters/filters.vue
View File

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

167
components/filters/tags.vue
View File

@ -1,91 +1,98 @@
<template> <template>
<div class="filter tags-container"> <div class="filter tags-container">
<div class="filters-sort"> <div
<input v-if="tags.length === 0"
v-model="search" class="filter-empty"
type="search" >No tags</div>
:placeholder="`Filter ${tags.length} tags`"
class="input input-inline filters-search"
>
<div <template v-else>
v-show="order === 'priority'" <div class="filters-sort">
class="filter-sort order noselect" <input
@click="order = 'name'" v-model="search"
> type="search"
<Icon :placeholder="`Filter ${tags.length} tags`"
icon="star" class="input input-inline filters-search"
/> >
</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 = 'priority'"
>
<Icon
icon="sort-numeric-desc"
/>
</div>
</div>
<ul
v-for="(group, groupKey) in groupedtags"
:key="groupKey"
class="filter-items nolist"
:class="groupKey"
>
<li
v-for="(tag, index) in group"
:key="`filter-tag-${tag.id}`"
class="filter-item"
:class="{
selected: filters.tags.includes(tag.slug),
first: groupKey === 'available' && index === 0 && filters.tags.length > 0,
disabled: groupKey === 'page',
}"
@click="emit('update', 'tags', [tag.slug])"
>
<div <div
class="filter-include" v-show="order === 'priority'"
@click.stop="toggleTag(tag)" class="filter-sort order noselect"
@click="order = 'name'"
> >
<Icon <Icon
icon="checkmark" icon="star"
class="filter-add"
/>
<Icon
icon="cross2"
class="filter-remove"
/> />
</div> </div>
<span class="filter-name tag-name"> <div
<span v-show="order === 'name'"
class="filter-text" class="filter-sort order noselect"
:title="tag.name" @click="order = 'count'"
>{{ tag.name }}</span> >
<Icon
icon="sort-alpha-asc"
/>
</div>
<span class="tag-details"> <div
v-show="order === 'count'"
class="filter-sort order noselect"
@click="order = 'priority'"
>
<Icon
icon="sort-numeric-desc"
/>
</div>
</div>
<ul
v-for="(group, groupKey) in groupedTags"
:key="groupKey"
class="filter-items nolist"
:class="groupKey"
>
<li
v-for="(tag, index) in group"
:key="`filter-tag-${tag.id}`"
class="filter-item"
:class="{
selected: filters.tags.includes(tag.slug),
first: groupKey === 'available' && index === 0 && filters.tags.length > 0,
disabled: groupKey === 'page',
}"
@click.stop="toggleTag(tag, false)"
>
<div
class="filter-include"
@click.stop="toggleTag(tag, true)"
>
<Icon
icon="checkmark"
class="filter-add"
/>
<Icon
icon="cross2"
class="filter-remove"
/>
</div>
<span class="filter-name tag-name">
<span <span
v-if="tag.count" class="filter-text"
class="filter-count" :title="tag.name"
>{{ tag.count }}</span> >{{ tag.name }}</span>
<span class="tag-details">
<span
v-if="tag.count"
class="filter-count"
>{{ tag.count }}</span>
</span>
</span> </span>
</span> </li>
</li> </ul>
</ul> </template>
</div> </div>
</template> </template>
@ -133,7 +140,7 @@ const priorityTags = [
'lesbian', 'lesbian',
]; ];
const groupedtags = computed(() => { const groupedTags = computed(() => {
const selected = props.tags.filter((tag) => props.filters.tags.includes(tag.slug)); const selected = props.tags.filter((tag) => props.filters.tags.includes(tag.slug));
const filtered = 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 && 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)) { if (props.filters.tags.includes(tag.slug)) {
emit('update', 'tags', props.filters.tags.filter((tagId) => tagId !== tag.slug)); emit('update', 'tags', props.filters.tags.filter((tagId) => tagId !== tag.slug));
return; return;
} }
emit('update', 'tags', props.filters.tags.concat(tag.slug)); if (combine) {
emit('update', 'tags', props.filters.tags.concat(tag.slug));
} else {
emit('update', 'tags', [tag.slug]);
}
} }
</script> </script>

70
components/header/header.vue
View File

@ -1,15 +1,15 @@
<template> <template>
<header class="header"> <header class="header">
<Link href="/">
<h1 class="title">
<div
class="logo"
v-html="logo"
/>
</h1>
</Link>
<nav class="nav"> <nav class="nav">
<Link href="/">
<h1 class="title">
<div
class="logo"
v-html="logo"
/>
</h1>
</Link>
<ul class="nav-list nolist"> <ul class="nav-list nolist">
<li class="nav-item"> <li class="nav-item">
<Link <Link
@ -47,17 +47,42 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<form
class="search"
@submit.prevent="search"
>
<input
v-model="query"
type="search"
placeholder="Search"
class="input"
>
<Icon icon="search" />
</form>
</header> </header>
</template> </template>
<script setup> <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 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> </script>
<style scoped> <style scoped>
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
z-index: 1000; /* make sure shadow shows up above content */ z-index: 1000; /* make sure shadow shows up above content */
box-shadow: 0 0 3px var(--shadow-weak-10); 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 { .nav {
display: inline-block; display: flex;
align-items: center;
} }
.nav-item .link { .nav-item .link {
@ -100,4 +126,28 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
color: var(--primary); 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> </style>

12
components/pagination/pagination.vue
View File

@ -95,6 +95,10 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: true, default: true,
}, },
query: {
type: String,
default: null,
},
includeQuery: { includeQuery: {
type: Boolean, type: Boolean,
default: true, default: true,
@ -148,6 +152,14 @@ function go(page, event) {
} }
function getPath(page) { 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) const path = parse(routeParams.path)
.map((segment) => { .map((segment) => {
if (segment.name === 'page') { if (segment.name === 'page') {

57
components/scenes/scenes.vue
View File

@ -6,6 +6,16 @@
v-if="showFilters" v-if="showFilters"
:class="{ loading }" :class="{ loading }"
> >
<div class="filter">
<input
v-model="filters.search"
type="search"
placeholder="Search scenes"
class="search input"
@search="search"
>
</div>
<TagsFilter <TagsFilter
:filters="filters" :filters="filters"
:tags="aggTags" :tags="aggTags"
@ -38,12 +48,16 @@
<select <select
v-model="scope" v-model="scope"
class="input" class="input"
@change="search" @change="search({ autoScope: false })"
> >
<option value="likes">Likes</option> <option value="likes">Likes</option>
<option value="latest">Latest</option> <option value="latest">Latest</option>
<option value="upcoming">Upcoming</option> <option value="upcoming">Upcoming</option>
<option value="new">New</option> <option value="new">New</option>
<option
value="results"
:disabled="!filters.search"
>Relevance</option>
</select> </select>
</div> </div>
@ -108,7 +122,7 @@ import Scene from '#/components/scenes/tile.vue';
import Pagination from '#/components/pagination/pagination.vue'; import Pagination from '#/components/pagination/pagination.vue';
import Ellipsis from '#/components/loading/ellipsis.vue'; import Ellipsis from '#/components/loading/ellipsis.vue';
defineProps({ const props = defineProps({
showFilters: { showFilters: {
type: Boolean, type: Boolean,
default: true, default: true,
@ -121,6 +135,10 @@ defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
defaultScope: {
type: String,
default: 'latest',
},
}); });
const { pageProps, routeParams, urlParsed } = inject('pageContext'); const { pageProps, routeParams, urlParsed } = inject('pageContext');
@ -137,7 +155,7 @@ const aggTags = ref(pageProps.aggTags || []);
const aggChannels = ref(pageProps.aggChannels || []); const aggChannels = ref(pageProps.aggChannels || []);
const currentPage = ref(Number(routeParams.page)); 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 total = ref(Number(pageProps.total));
const loading = ref(false); 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 queryEntity = networks[urlParsed.search.e] || channels[urlParsed.search.e];
const filters = ref({ const filters = ref({
search: urlParsed.search.q,
tags: urlParsed.search.tags?.split(',').filter(Boolean) || [], tags: urlParsed.search.tags?.split(',').filter(Boolean) || [],
entity: queryEntity, entity: queryEntity,
actors: queryActors, actors: queryActors,
@ -175,18 +194,37 @@ function getPath(targetScope, preserveQuery) {
return path; return path;
} }
async function search(resetPage = true) { async function search(options = {}) {
if (resetPage) { if (options.resetPage !== false) {
currentPage.value = 1; 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 entity = filters.value.entity || pageEntity;
const entitySlug = entity?.type === 'network' ? `_${entity.slug}` : entity?.slug; const entitySlug = entity?.type === 'network' ? `_${entity.slug}` : entity?.slug;
loading.value = true; 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', { const res = await get('/scenes', {
...query, ...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 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; loading.value = false;
events.emit('scrollUp'); 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) { function updateFilter(prop, value, reload = true) {

24
pages/actors/+Page.vue
View File

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

38
pages/scene/+Page.vue
View File

@ -3,14 +3,20 @@
<div class="content"> <div class="content">
<div class="banner"> <div class="banner">
<div class="poster-container"> <div class="poster-container">
<img <a
v-if="scene.poster" :href="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.path}` : `/media/${scene.poster.path}`"
:src="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.thumbnail}` : `/media/${scene.poster.thumbnail}`" target="_blank"
:style="{ 'background-image': scene.poster.isS3 ? `url(https://cdndev.traxxx.me/${scene.poster.lazy})` : `url(/media/${scene.poster.lazy})` }" class="poster-link"
:width="scene.poster.width"
:height="scene.poster.height"
class="poster"
> >
<img
v-if="scene.poster"
:src="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.thumbnail}` : `/media/${scene.poster.thumbnail}`"
:style="{ 'background-image': scene.poster.isS3 ? `url(https://cdndev.traxxx.me/${scene.poster.lazy})` : `url(/media/${scene.poster.lazy})` }"
:width="scene.poster.width"
:height="scene.poster.height"
class="poster"
>
</a>
</div> </div>
<div <div
@ -22,13 +28,19 @@
:key="`photo-${photo.id}`" :key="`photo-${photo.id}`"
class="photo-container" class="photo-container"
> >
<img <a
:src="photo.isS3 ? `https://cdndev.traxxx.me/${photo.thumbnail}` : `/media/${photo.thumbnail}`" :href="photo.isS3 ? `https://cdndev.traxxx.me/${photo.path}` : `/media/${photo.path}`"
:style="{ 'background-image': photo.isS3 ? `url(https://cdndev.traxxx.me/${photo.lazy})` : `url(/media/${photo.lazy})` }" target="_blank"
:width="photo.width" class="photo-link"
:height="photo.height"
class="photo"
> >
<img
:src="photo.isS3 ? `https://cdndev.traxxx.me/${photo.thumbnail}` : `/media/${photo.thumbnail}`"
:style="{ 'background-image': photo.isS3 ? `url(https://cdndev.traxxx.me/${photo.lazy})` : `url(/media/${photo.lazy})` }"
:width="photo.width"
:height="photo.height"
class="photo"
>
</a>
</div> </div>
</div> </div>
</div> </div>

6
pages/updates/+Page.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div> <div>
<Scenes <Scenes
:scenes="scenes"
:show-filters="false" :show-filters="false"
:show-meta="false" :show-meta="false"
:show-scope-tabs="true" :show-scope-tabs="true"
@ -10,10 +9,5 @@
</template> </template>
<script setup> <script setup>
import { inject } from 'vue';
import Scenes from '#/components/scenes/scenes.vue'; import Scenes from '#/components/scenes/scenes.vue';
const { pageProps } = inject('pageContext');
const { scenes } = pageProps;
</script> </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 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; return genderActors;
} }
@ -75,7 +75,15 @@ export function sortActorsByGender(actors) {
export async function fetchActorsById(actorIds, options = {}) { export async function fetchActorsById(actorIds, options = {}) {
const [actors] = await Promise.all([ const [actors] = await Promise.all([
knex('actors_meta') 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) .whereIn('actors_meta.id', actorIds)
.modify((builder) => { .modify((builder) => {
if (options.order) { if (options.order) {

56
src/scenes.js
View File

@ -82,15 +82,19 @@ export async function fetchScenesById(sceneIds) {
.select( .select(
'actors_meta.*', 'actors_meta.*',
'releases_actors.release_id', 'releases_actors.release_id',
/* why would we need this for scenes?
'birth_countries.alpha2 as birth_country_alpha2', '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.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) .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'), .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') knex('releases_directors')
.whereIn('release_id', sceneIds) .whereIn('release_id', sceneIds)
.leftJoin('actors as directors', 'directors.id', 'releases_directors.director_id'), .leftJoin('actors as directors', 'directors.id', 'releases_directors.director_id'),
@ -187,6 +191,27 @@ function buildQuery(filters = {}) {
sort = [{ stashed: 'desc' }, { effective_date: 'desc' }]; 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) { if (filters.tagIds) {
filters.tagIds.forEach((tagId) => { filters.tagIds.forEach((tagId) => {
query.bool.must.push({ equals: { 'any(tag_ids)': 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 options = curateOptions(rawOptions);
const { query, sort } = buildQuery(filters); const { query, sort } = buildQuery(filters);
console.log('filters', filters);
console.log('options', options);
console.log('query', query.bool.must);
const result = await searchApi.search({ const result = await searchApi.search({
index: 'scenes', index: 'scenes',
query, query,
@ -276,9 +305,24 @@ export async function fetchScenes(filters, rawOptions) {
offset: (options.page - 1) * options.limit, offset: (options.page - 1) * options.limit,
sort, sort,
aggs: buildAggregates(options), 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 actorCounts = options.aggregateActors && countAggregations(result.aggregations?.actorIds?.buckets);
const tagCounts = options.aggregateTags && countAggregations(result.aggregations?.tagIds?.buckets); const tagCounts = options.aggregateTags && countAggregations(result.aggregations?.tagIds?.buckets);
const channelCounts = options.aggregateChannels && countAggregations(result.aggregations?.channelIds?.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'; import { fetchActors } from '../actors.js';
export function curateActorsQuery(query) { export function curateActorsQuery(query) {
console.log('input query', query);
return { return {
query: query.q, query: query.q,
gender: query.gender, gender: query.gender,

1
src/web/scenes.js
View File

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