Compare commits
2 Commits
fc240710f3
...
c1f1eb5b24
| Author | SHA1 | Date |
|---|---|---|
 DebaucheryLibrarian
|
c1f1eb5b24 | |
|
DebaucheryLibrarian
|
09df134558 |
|
|
@ -391,7 +391,7 @@ defineProps({
|
|||
|
||||
.flag {
|
||||
height: 1rem;
|
||||
margin: .25rem .25rem 0 0;
|
||||
margin: .25rem .5rem 0 0;
|
||||
}
|
||||
|
||||
.bio-name {
|
||||
|
|
|
|||
|
|
@ -1,82 +1,89 @@
|
|||
<template>
|
||||
<div class="filter actors-container">
|
||||
<div class="filters-sort">
|
||||
<input
|
||||
v-model="search"
|
||||
type="search"
|
||||
:placeholder="`Filter ${actors.length} actors`"
|
||||
class="input input-inline filters-search"
|
||||
>
|
||||
<div
|
||||
v-if="availableActors.length === 0"
|
||||
class="filter-empty"
|
||||
>No actors</div>
|
||||
|
||||
<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
|
||||
v-if="!selectedGender"
|
||||
class="gender-unselected"
|
||||
><Icon icon="genders" /></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"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<div
|
||||
v-show="order === 'name'"
|
||||
class="filter-sort order noselect"
|
||||
@click="order = 'count'"
|
||||
<ul
|
||||
v-for="(actor, index) in selectedActors"
|
||||
:key="`actor-${actor.id}`"
|
||||
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"
|
||||
:index="index"
|
||||
:filters="filters"
|
||||
:toggle-actor="toggleActor"
|
||||
type="available"
|
||||
@actor="(actor) => emit('update', 'actors', [actor])"
|
||||
:toggle-actor="(actor) => toggleActor(actor, true)"
|
||||
type="selected"
|
||||
@actor="(actor) => toggleActor(actor, false)"
|
||||
/>
|
||||
</template>
|
||||
</UseVirtualList>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
</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;
|
||||
}
|
||||
|
||||
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() {
|
||||
|
|
|
|||
|
|
@ -1,75 +1,82 @@
|
|||
<template>
|
||||
<div class="filter channels-container">
|
||||
<div class="filters-sort">
|
||||
<input
|
||||
v-model="search"
|
||||
type="search"
|
||||
:placeholder="`Filter ${channels.length} channels`"
|
||||
class="input input-inline filters-search"
|
||||
>
|
||||
<div
|
||||
v-if="entities.length === 0"
|
||||
class="filter-empty"
|
||||
>No channels</div>
|
||||
|
||||
<div
|
||||
v-show="order === 'name'"
|
||||
class="filter-sort order noselect"
|
||||
@click="order = 'count'"
|
||||
>
|
||||
<Icon icon="sort-alpha-asc" />
|
||||
<template v-else>
|
||||
<div class="filters-sort">
|
||||
<input
|
||||
v-model="search"
|
||||
type="search"
|
||||
: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
|
||||
v-show="order === 'count'"
|
||||
class="filter-sort order noselect"
|
||||
@click="order = 'name'"
|
||||
<ul
|
||||
class="filter-items nolist"
|
||||
>
|
||||
<Icon icon="sort-numeric-desc" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
class="filter-items nolist"
|
||||
>
|
||||
<li
|
||||
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">
|
||||
<li
|
||||
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
|
||||
v-if="entity.count"
|
||||
class="filter-count"
|
||||
>{{ entity.count }}</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-if="filters.entity?.id === entity.id"
|
||||
icon="cross2"
|
||||
class="filter-remove"
|
||||
@click.native.stop="emit('update', 'entity', null)"
|
||||
/>
|
||||
<Icon
|
||||
v-else
|
||||
icon="arrow-up4"
|
||||
/>
|
||||
|
||||
{{ 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>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,91 +1,98 @@
|
|||
<template>
|
||||
<div class="filter tags-container">
|
||||
<div class="filters-sort">
|
||||
<input
|
||||
v-model="search"
|
||||
type="search"
|
||||
:placeholder="`Filter ${tags.length} tags`"
|
||||
class="input input-inline filters-search"
|
||||
>
|
||||
<div
|
||||
v-if="tags.length === 0"
|
||||
class="filter-empty"
|
||||
>No tags</div>
|
||||
|
||||
<div
|
||||
v-show="order === 'priority'"
|
||||
class="filter-sort order noselect"
|
||||
@click="order = 'name'"
|
||||
>
|
||||
<Icon
|
||||
icon="star"
|
||||
/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="filters-sort">
|
||||
<input
|
||||
v-model="search"
|
||||
type="search"
|
||||
:placeholder="`Filter ${tags.length} tags`"
|
||||
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 = '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
|
||||
class="filter-include"
|
||||
@click.stop="toggleTag(tag)"
|
||||
v-show="order === 'priority'"
|
||||
class="filter-sort order noselect"
|
||||
@click="order = 'name'"
|
||||
>
|
||||
<Icon
|
||||
icon="checkmark"
|
||||
class="filter-add"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="filter-remove"
|
||||
icon="star"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span class="filter-name tag-name">
|
||||
<span
|
||||
class="filter-text"
|
||||
:title="tag.name"
|
||||
>{{ tag.name }}</span>
|
||||
<div
|
||||
v-show="order === 'name'"
|
||||
class="filter-sort order noselect"
|
||||
@click="order = 'count'"
|
||||
>
|
||||
<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
|
||||
v-if="tag.count"
|
||||
class="filter-count"
|
||||
>{{ tag.count }}</span>
|
||||
class="filter-text"
|
||||
:title="tag.name"
|
||||
>{{ tag.name }}</span>
|
||||
|
||||
<span class="tag-details">
|
||||
<span
|
||||
v-if="tag.count"
|
||||
class="filter-count"
|
||||
>{{ tag.count }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</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;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<template>
|
||||
<header class="header">
|
||||
<Link href="/">
|
||||
<h1 class="title">
|
||||
<div
|
||||
class="logo"
|
||||
v-html="logo"
|
||||
/>
|
||||
</h1>
|
||||
</Link>
|
||||
|
||||
<nav class="nav">
|
||||
<Link href="/">
|
||||
<h1 class="title">
|
||||
<div
|
||||
class="logo"
|
||||
v-html="logo"
|
||||
/>
|
||||
</h1>
|
||||
</Link>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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') {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"name": "traxxx-web",
|
||||
"version": "0.5.1",
|
||||
"version": "0.6.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"version": "0.5.1",
|
||||
"version": "0.6.0",
|
||||
"dependencies": {
|
||||
"@brillout/json-serializer": "^0.5.8",
|
||||
"@floating-ui/dom": "^1.5.3",
|
||||
|
|
|
|||
|
|
@ -57,5 +57,5 @@
|
|||
"postcss-custom-media": "^10.0.2",
|
||||
"postcss-nesting": "^12.0.2"
|
||||
},
|
||||
"version": "0.5.1"
|
||||
"version": "0.6.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,17 +139,19 @@ 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 (q.value) {
|
||||
order.value = 'relevance.desc';
|
||||
}
|
||||
if (options.autoScope !== false) {
|
||||
if (q.value) {
|
||||
order.value = 'relevance.desc';
|
||||
}
|
||||
|
||||
if (!q.value && order.value.includes('relevance')) {
|
||||
order.value = 'likes.desc';
|
||||
if (!q.value && order.value.includes('relevance')) {
|
||||
order.value = 'likes.desc';
|
||||
}
|
||||
}
|
||||
|
||||
const query = {
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -3,14 +3,20 @@
|
|||
<div class="content">
|
||||
<div class="banner">
|
||||
<div class="poster-container">
|
||||
<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
|
||||
: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}`"
|
||||
: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
|
||||
|
|
@ -22,13 +28,19 @@
|
|||
:key="`photo-${photo.id}`"
|
||||
class="photo-container"
|
||||
>
|
||||
<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
|
||||
: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}`"
|
||||
: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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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('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('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);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue