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

Fixed pagination. Added entity page channel tile expand.

This commit is contained in:
DebaucheryLibrarian 2024-01-25 03:07:26 +01:00
parent 0b3f98826b
commit d739975d36
29 changed files with 1056 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/breakpoints.css
View File

@ -1 +1,3 @@
@custom-media --small-10 (max-width: 768px);
@custom-media --small (max-width: 900px);
@custom-media --compact (max-width: 1200px);

1
assets/css/theme.css
View File

@ -3,6 +3,7 @@
--primary-strong: #f90071;
--primary-faded: #ffcce4;
--grey-dark-50: #111;
--grey-dark-40: #222;
--grey-dark-30: #444;
--grey-dark-20: #666;

2
components/actors/tile.vue
View File

@ -32,7 +32,7 @@
</span>
<span
v-if="actor.origin.country"
v-if="actor.origin?.country"
:title="`Born in ${actor.origin.country.name}`"
class="country"
>

51
components/entities/tile.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<a
:href="`/${entity.type}/${entity.slug}`"
class="entity"
>
<img
v-if="entity.hasLogo"
:src="entity.isIndependent ? `/logos/${entity.slug}/entity.png` : `/logos/${entity.parent?.slug}/${entity.slug}.png`"
:alt="entity.name"
class="logo"
>
<span v-else>{{ entity.name }}</span>
</a>
</template>
<script setup>
defineProps({
entity: {
type: Object,
default: null,
},
});
</script>
<style scoped>
.entity {
width: 15rem;
height: 6rem;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 1rem;
border-radius: .5rem;
background: var(--grey-dark-40);
color: var(--text-light);
font-size: 1.25rem;
font-weight: bold;
&:hover {
box-shadow: 0 0 3px var(--shadow);
}
}
.logo {
height: 100%;
width: 100%;
object-fit: contain;
}
</style>

94
components/filters/actor.vue Normal file
View File

@ -0,0 +1,94 @@
<template>
<li
:key="`filter-actor-${actor.id}`"
class="filter-item"
:class="{ selected: filters.actors.some((filterActor) => filterActor.id === actor.id), first: type === 'available' && index === 0 && filters.actors.length > 0 }"
@click="emit('actor', actor)"
>
<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">
<span
class="filter-text"
:title="actor.name"
>{{ actor.name }}</span>
<span class="filter-details">
<div class="actor-gender">
<Gender
:gender="actor.gender"
class="gender"
/>
</div>
<span
v-if="actor.count"
class="filter-count"
>{{ actor.count }}</span>
</span>
</span>
</li>
</template>
<script setup>
import Gender from '#/components/actors/gender.vue';
defineProps({
actor: {
type: Object,
default: null,
},
index: {
type: Number,
default: null,
},
filters: {
type: Object,
default: null,
},
type: {
type: String,
default: 'available',
},
toggleActor: {
type: Function,
default: null,
},
});
const emit = defineEmits(['actor']);
</script>
<style scoped>
.filter-name {
align-items: stretch;
}
.actor-name {
display: flex;
align-items: stretch;
}
.actor-gender {
width: 1rem;
display: flex;
align-items: center;
.gender {
display: flex;
}
}
</style>

122
components/filters/actors.vue
View File

@ -4,7 +4,7 @@
<input
v-model="search"
type="search"
placeholder="Filter actors"
:placeholder="`Filter ${actors.length} actors`"
class="input input-inline filters-search"
>
@ -46,60 +46,44 @@
</div>
<ul
v-for="(group, groupKey) in groupedActors"
:key="groupKey"
v-for="(actor, index) in selectedActors"
:key="`actor-${actor.id}`"
class="filter-items nolist"
>
<li
v-for="(actor, index) in group"
:key="`filter-actor-${actor.id}`"
class="filter-item"
:class="{ selected: filters.actors.some((filterActor) => filterActor.id === actor.id), first: groupKey === 'available' && index === 0 && filters.actors.length > 0 }"
@click="emit('update', 'actors', [actor])"
>
<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">
<span
class="filter-text"
:title="actor.name"
>{{ actor.name }}</span>
<span class="filter-details">
<div class="actor-gender">
<Gender
:gender="actor.gender"
class="gender"
/>
</div>
<span
v-if="actor.count"
class="filter-count"
>{{ actor.count }}</span>
</span>
</span>
</li>
<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 }"
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])"
/>
</template>
</UseVirtualList>
</div>
</template>
<script setup>
import { ref, computed, inject } from 'vue';
import { UseVirtualList } from '@vueuse/components';
import Actor from '#/components/filters/actor.vue';
import Gender from '#/components/actors/gender.vue';
const props = defineProps({
@ -123,21 +107,19 @@ const order = ref('name');
const { pageProps } = inject('pageContext');
const { actor: pageActor } = pageProps;
const groupedActors = computed(() => ({
selected: props.filters.actors.map((filterActor) => props.actors.find((actor) => actor.id === filterActor.id)).filter(Boolean),
available: props.actors
.filter((actor) => !props.filters.actors.some((filterActor) => filterActor.id === 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;
}
const selectedActors = computed(() => props.filters.actors.map((filterActor) => props.actors.find((actor) => actor.id === filterActor.id)).filter(Boolean));
const availableActors = computed(() => props.actors
.filter((actor) => !props.filters.actors.some((filterActor) => filterActor.id === 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);
}),
}));
return actorA.name.localeCompare(actorB.name);
}));
const genders = computed(() => [null, ...['female', 'male', 'transsexual', 'other'].filter((gender) => props.actors.some((actor) => actor.gender === gender))]);
@ -171,22 +153,8 @@ function selectGender() {
border-top: solid 1px var(--shadow-weak-30);
}
.filter-name {
align-items: stretch;
}
.actor-name {
display: flex;
align-items: stretch;
}
.actor-gender {
width: 1rem;
display: flex;
align-items: center;
.gender {
display: flex;
}
.list {
height: 15rem;
overflow-y: auto;
}
</style>

11
components/filters/channels.vue
View File

@ -4,7 +4,7 @@
<input
v-model="search"
type="search"
placeholder="Filter channels"
:placeholder="`Filter ${channels.length} channels`"
class="input input-inline filters-search"
>
@ -113,7 +113,10 @@ const entities = computed(() => {
return Object.values(filteredChannels.reduce((acc, channel) => {
if (!channel.parent || channel.isIndependent) {
acc[channel.id] = channel;
acc[channel.id] = {
...channel,
children: [],
};
return acc;
}
@ -151,7 +154,7 @@ const entities = computed(() => {
.filter-item.channel {
.filter-text .icon {
width: 1.5rem;
width: 2.25rem;
height: 1rem;
transform: rotate(-135deg);
fill: var(--shadow-weak-30);
@ -160,7 +163,7 @@ const entities = computed(() => {
}
.favicon {
width: 1rem;
width: 1.75rem;
height: 1rem;
margin-right: .5rem;
object-fit: contain;

2
components/filters/filters.vue
View File

@ -266,7 +266,7 @@ function toggleFilters(state) {
}
.filter-count {
width: 1.5rem;
width: 1.75rem;
display: flex;
align-items: center;
justify-content: center;

2
components/filters/tags.vue
View File

@ -4,7 +4,7 @@
<input
v-model="search"
type="search"
placeholder="Filter tags"
:placeholder="`Filter ${tags.length} tags`"
class="input input-inline filters-search"
>

11
components/pagination/pagination.vue
View File

@ -149,8 +149,14 @@ function go(page, event) {
function getPath(page) {
const path = parse(routeParams.path)
.map((segment) => (segment.name === 'page' ? String(page) : routeParams[segment.name] || segment))
.join('/');
.map((segment) => {
if (segment.name === 'page') {
return `/${page}`;
}
return `${segment.prefix || ''}${routeParams[segment.name] || segment}`;
})
.join('');
if (props.includeQuery && urlParsed.searchOriginal) {
return `${path}${urlParsed.searchOriginal}`;
@ -165,6 +171,7 @@ function getPath(page) {
height: 5rem;
display: flex;
justify-content: center;
flex-shrink: 0;
box-sizing: border-box;
padding: 1rem;
font-size: 0;

61
components/scenes/scenes.vue
View File

@ -1,6 +1,6 @@
<template>
<div
class="page"
class="scenes-page"
>
<Filters
v-if="showFilters"
@ -34,9 +34,23 @@
class="scenes-header"
>
<div class="meta">{{ total }} results</div>
<select
v-model="scope"
class="input"
@change="search"
>
<option value="likes">Likes</option>
<option value="latest">Latest</option>
<option value="upcoming">Upcoming</option>
<option value="new">New</option>
</select>
</div>
<nav class="scopes">
<nav
v-if="showScopeTabs"
class="scopes"
>
<Link
:href="getPath('latest')"
class="scope nolink"
@ -103,15 +117,18 @@ defineProps({
type: Boolean,
default: true,
},
showScopeTabs: {
type: Boolean,
default: false,
},
});
const { pageProps, routeParams, urlParsed } = inject('pageContext');
const { scope } = routeParams;
const {
actor: pageActor,
tag: pageTag,
channel: pageChannel,
entity: pageEntity,
} = pageProps;
const scenes = ref(pageProps.scenes);
@ -120,6 +137,7 @@ const aggTags = ref(pageProps.aggTags || []);
const aggChannels = ref(pageProps.aggChannels || []);
const currentPage = ref(Number(routeParams.page));
const scope = ref(routeParams.scope);
const total = ref(Number(pageProps.total));
const loading = ref(false);
@ -138,19 +156,17 @@ const filters = ref({
});
function getPath(targetScope, preserveQuery) {
const path = parse(routeParams.path)
.map((segment) => {
if (segment.name === 'scope') {
return targetScope;
}
const path = parse(routeParams.path).map((segment) => {
if (segment.name === 'scope') {
return `${segment.prefix}${targetScope}`;
}
if (segment.name === 'page') {
return 1;
}
if (segment.name === 'page') {
return `${segment.prefix}${1}`;
}
return routeParams[segment.name] || segment;
})
.join('/');
return `${segment.prefix || ''}${routeParams[segment.name] || segment}`;
}).join('');
if (preserveQuery && urlParsed.searchOriginal) {
return `${path}${urlParsed.searchOriginal}`;
@ -166,7 +182,7 @@ async function search(resetPage = true) {
const query = {};
const entity = filters.value.entity || pageChannel;
const entity = filters.value.entity || pageEntity;
const entitySlug = entity?.type === 'network' ? `_${entity.slug}` : entity?.slug;
loading.value = true;
@ -176,7 +192,7 @@ async function search(resetPage = true) {
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
tags: [pageTag?.slug, ...filters.value.tags].filter(Boolean).join(','),
e: entitySlug,
scope,
scope: scope.value,
page: currentPage.value, // client uses param rather than query pagination
});
@ -184,12 +200,13 @@ async function search(resetPage = true) {
aggActors.value = res.aggActors;
aggTags.value = res.aggTags;
aggChannels.value = res.aggChannels;
total.value = res.total;
total.value = res.total;
loading.value = false;
events.emit('scrollUp');
navigate(getPath(scope, false), {
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,
@ -207,7 +224,7 @@ function updateFilter(prop, value, reload = true) {
</script>
<style scoped>
.page {
.scenes-page {
display: flex;
background: var(--background-base-10);
position: relative;
@ -216,7 +233,7 @@ function updateFilter(prop, value, reload = true) {
.scenes-header {
display: flex;
align-items: center;
padding: 1rem 0 .25rem 3rem;
padding: .5rem 1rem .25rem 3rem;
}
.scenes-container {
@ -236,7 +253,7 @@ function updateFilter(prop, value, reload = true) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
gap: .75rem .5rem;
padding: 1rem;
padding: .5rem 1rem 1rem 1rem;
}
.scopes {

252
package-lock.json generated
View File

@ -13,6 +13,8 @@
"@vitejs/plugin-vue": "^4.5.2",
"@vue/compiler-sfc": "^3.3.10",
"@vue/server-renderer": "^3.3.10",
"@vueuse/components": "^10.7.1",
"@vueuse/core": "^10.7.1",
"compression": "^1.7.4",
"config": "^3.3.9",
"convert": "^4.14.1",
@ -34,6 +36,7 @@
"vike": "^0.4.150",
"vite": "^4.5.1",
"vue": "^3.3.10",
"vue-virtual-scroller": "^2.0.0-beta.8",
"winston": "^3.11.0",
"winston-daily-rotate-file": "^4.7.1"
},
@ -2747,6 +2750,11 @@
"resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz",
"integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw=="
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.20",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
},
"node_modules/@ungap/structured-clone": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@ -2867,6 +2875,124 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.12.tgz",
"integrity": "sha512-6p0Yin0pclvnER7BLNOQuod9Z+cxSYh8pSh7CzHnWNjAIP6zrTlCdHRvSCb1aYEx6i3Q3kvfuWU7nG16CgG1ag=="
},
"node_modules/@vueuse/components": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.7.1.tgz",
"integrity": "sha512-bAS5ff1uNhNSeIYL7R3qeR0DP5u+Lutb0mFiTZTMhcicjhBfGiDbahHqoOAr9M/wfpYKNluP1U107y2fUTw4yw==",
"dependencies": {
"@vueuse/core": "10.7.1",
"@vueuse/shared": "10.7.1",
"vue-demi": ">=0.14.6"
}
},
"node_modules/@vueuse/components/node_modules/vue-demi": {
"version": "0.14.6",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/core": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.1.tgz",
"integrity": "sha512-74mWHlaesJSWGp1ihg76vAnfVq9NTv1YT0SYhAQ6zwFNdBkkP+CKKJmVOEHcdSnLXCXYiL5e7MaewblfiYLP7g==",
"dependencies": {
"@types/web-bluetooth": "^0.0.20",
"@vueuse/metadata": "10.7.1",
"@vueuse/shared": "10.7.1",
"vue-demi": ">=0.14.6"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.14.6",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/metadata": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.1.tgz",
"integrity": "sha512-jX8MbX5UX067DYVsbtrmKn6eG6KMcXxLRLlurGkZku5ZYT3vxgBjui2zajvUZ18QLIjrgBkFRsu7CqTAg18QFw==",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.1.tgz",
"integrity": "sha512-v0jbRR31LSgRY/C5i5X279A/WQjD6/JsMzGa+eqt658oJ75IvQXAeONmwvEMrvJQKnRElq/frzBR7fhmWY5uLw==",
"dependencies": {
"vue-demi": ">=0.14.6"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared/node_modules/vue-demi": {
"version": "0.14.6",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/accepts": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@ -8077,6 +8203,40 @@
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true
},
"node_modules/vue-observe-visibility": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz",
"integrity": "sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-resize": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-virtual-scroller": {
"version": "2.0.0-beta.8",
"resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz",
"integrity": "sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==",
"dependencies": {
"mitt": "^2.1.0",
"vue-observe-visibility": "^2.0.0-alpha.1",
"vue-resize": "^2.0.0-alpha.1"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/vue-virtual-scroller/node_modules/mitt": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@ -9968,6 +10128,11 @@
"resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz",
"integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw=="
},
"@types/web-bluetooth": {
"version": "0.0.20",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
},
"@ungap/structured-clone": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@ -10079,6 +10244,64 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.12.tgz",
"integrity": "sha512-6p0Yin0pclvnER7BLNOQuod9Z+cxSYh8pSh7CzHnWNjAIP6zrTlCdHRvSCb1aYEx6i3Q3kvfuWU7nG16CgG1ag=="
},
"@vueuse/components": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.7.1.tgz",
"integrity": "sha512-bAS5ff1uNhNSeIYL7R3qeR0DP5u+Lutb0mFiTZTMhcicjhBfGiDbahHqoOAr9M/wfpYKNluP1U107y2fUTw4yw==",
"requires": {
"@vueuse/core": "10.7.1",
"@vueuse/shared": "10.7.1",
"vue-demi": ">=0.14.6"
},
"dependencies": {
"vue-demi": {
"version": "0.14.6",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"requires": {}
}
}
},
"@vueuse/core": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.1.tgz",
"integrity": "sha512-74mWHlaesJSWGp1ihg76vAnfVq9NTv1YT0SYhAQ6zwFNdBkkP+CKKJmVOEHcdSnLXCXYiL5e7MaewblfiYLP7g==",
"requires": {
"@types/web-bluetooth": "^0.0.20",
"@vueuse/metadata": "10.7.1",
"@vueuse/shared": "10.7.1",
"vue-demi": ">=0.14.6"
},
"dependencies": {
"vue-demi": {
"version": "0.14.6",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"requires": {}
}
}
},
"@vueuse/metadata": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.1.tgz",
"integrity": "sha512-jX8MbX5UX067DYVsbtrmKn6eG6KMcXxLRLlurGkZku5ZYT3vxgBjui2zajvUZ18QLIjrgBkFRsu7CqTAg18QFw=="
},
"@vueuse/shared": {
"version": "10.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.1.tgz",
"integrity": "sha512-v0jbRR31LSgRY/C5i5X279A/WQjD6/JsMzGa+eqt658oJ75IvQXAeONmwvEMrvJQKnRElq/frzBR7fhmWY5uLw==",
"requires": {
"vue-demi": ">=0.14.6"
},
"dependencies": {
"vue-demi": {
"version": "0.14.6",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"requires": {}
}
}
},
"accepts": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@ -13679,6 +13902,35 @@
}
}
},
"vue-observe-visibility": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-2.0.0-alpha.1.tgz",
"integrity": "sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==",
"requires": {}
},
"vue-resize": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
"requires": {}
},
"vue-virtual-scroller": {
"version": "2.0.0-beta.8",
"resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz",
"integrity": "sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==",
"requires": {
"mitt": "^2.1.0",
"vue-observe-visibility": "^2.0.0-alpha.1",
"vue-resize": "^2.0.0-alpha.1"
},
"dependencies": {
"mitt": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
}
}
},
"which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

3
package.json
View File

@ -13,6 +13,8 @@
"@vitejs/plugin-vue": "^4.5.2",
"@vue/compiler-sfc": "^3.3.10",
"@vue/server-renderer": "^3.3.10",
"@vueuse/components": "^10.7.1",
"@vueuse/core": "^10.7.1",
"compression": "^1.7.4",
"config": "^3.3.9",
"convert": "^4.14.1",
@ -34,6 +36,7 @@
"vike": "^0.4.150",
"vite": "^4.5.1",
"vue": "^3.3.10",
"vue-virtual-scroller": "^2.0.0-beta.8",
"winston": "^3.11.0",
"winston-daily-rotate-file": "^4.7.1"
},

31
pages/_error/+Page.vue
View File

@ -1,14 +1,27 @@
<template>
<div v-if="is404">
<h1>404 Page Not Found</h1>
<p>This page could not be found.</p>
</div>
<div v-else>
<h1>500 Internal Error</h1>
<p>Something went wrong.</p>
</div>
<div v-if="is404">
<h1>404 Page Not Found</h1>
<p v-if="abortReason">{{ abortReason }}</p>
<p v-else>This page could not be found.</p>
</div>
<div v-else>
<h1>500 Internal Error</h1>
<p>Something went wrong.</p>
</div>
</template>
<script setup>
defineProps(['is404'])
import { inject } from 'vue';
defineProps({
is404: {
type: Boolean,
default: false,
},
});
const pageContext = inject('pageContext');
const { abortReason } = pageContext;
</script>

1
pages/actors/@actorId/+Page.vue
View File

@ -58,7 +58,6 @@ import Scenes from '#/components/scenes/scenes.vue';
const pageContext = inject('pageContext');
const { pageProps } = pageContext;
const { actor } = pageProps;
</script>

125
pages/entities/+Page.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<div class="page">
<div
v-for="(section, index) in sections"
:key="`section-${index}`"
>
<h2 class="section-label">{{ section.label }}</h2>
<ul class="networks nolist">
<li
v-for="network in section.networks"
:key="`network-${network.id}`"
:title="network.name"
>
<a
:href="`/${network.type}/${network.slug}`"
class="network"
>
<img
v-if="network.hasLogo"
:src="`/logos/${network.slug}/network.png`"
:alt="network.name"
class="logo"
>
<span v-else>{{ network.name }}</span>
</a>
</li>
</ul>
</div>
</div>
</template>
<script setup>
import { inject } from 'vue';
const pageContext = inject('pageContext');
const { pageProps } = pageContext;
const { networks } = pageProps;
const networksBySlug = Object.fromEntries(networks.map((network) => [network.slug, network]));
const popularNetworks = [
'21sextury',
'adulttime',
'amateurallure',
'analvids',
'bamvisions',
'bang',
'bangbros',
'blowpass',
'brazzers',
'burningangel',
'digitalplayground',
'dogfartnetwork',
'dorcel',
'elegantangel',
'evilangel',
'fakehub',
'hookuphotshot',
'hussiepass',
'julesjordan',
'kink',
'mofos',
'naughtyamerica',
'newsensations',
'pervcity',
'pornpros',
'private',
'realitykings',
'teamskeet',
'vixen',
'xempire',
].map((slug) => networksBySlug[slug]).filter(Boolean);
const sections = [
{
label: 'Popular',
networks: popularNetworks,
},
{
label: 'All network',
networks,
},
];
</script>
<style scoped>
.networks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: .5rem;
padding: .5rem;
}
.section-label {
padding: 0 1rem;
margin-bottom: .5rem;
color: var(--shadow);
}
.network {
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 4/1;
padding: 1rem;
border-radius: .5rem;
background: var(--grey-dark-40);
color: var(--text-light);
font-size: 1.25rem;
font-weight: bold;
&:hover {
box-shadow: 0 0 3px var(--shadow);
}
}
.logo {
height: 100%;
width: 100%;
object-fit: contain;
}
</style>

14
pages/entities/+onBeforeRender.js Normal file
View File

@ -0,0 +1,14 @@
import { fetchEntities } from '#/src/entities.js';
export async function onBeforeRender(_pageContext) {
const networks = await fetchEntities({ type: 'primary' });
return {
pageContext: {
title: 'Channels',
pageProps: {
networks,
},
},
};
}

1
pages/entities/+route.js Normal file
View File

@ -0,0 +1 @@
export default '/channels';

246
pages/entities/@entitySlug/+Page.vue Normal file
View File

@ -0,0 +1,246 @@
<template>
<div class="page">
<div class="header">
<a
:href="entity.url"
target="_blank"
rel="noopener"
class="link link-child"
>
<template v-if="entity.hasLogo">
<img
v-if="entity.type === 'network'"
class="logo logo-child"
:src="`/logos/${entity.slug}/thumbs/network.png`"
>
<img
v-else-if="entity.parent && !entity.independent"
class="logo logo-child"
:src="`/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
>
<img
v-else
class="logo logo-child"
:src="`/logos/${entity.slug}/thumbs/${entity.slug}.png`"
>
</template>
<h2
v-else
class="name"
>{{ entity.name }}</h2>
</a>
<a
v-if="entity.parent"
:href="`/${entity.parent.type}/${entity.parent.slug}`"
class="link link-parent"
>
<img
v-if="entity.parent.hasLogo"
class="logo logo-parent"
:src="`/logos/${entity.parent.slug}/thumbs/network.png`"
>
<img
v-if="entity.parent.hasLogo"
class="favicon"
:src="`/logos/${entity.parent.slug}/favicon.png`"
>
<h3
v-else
class="name parent-name"
>{{ entity.parent.name }}</h3>
</a>
</div>
<div class="content">
<div class="children-container">
<ul
v-if="entity.children.length > 0"
ref="children"
class="children nolist"
:class="{ expanded }"
>
<li
v-for="channel in entity.children"
:key="`channel-${channel.id}`"
:title="channel.name"
>
<EntityTile :entity="channel" />
</li>
</ul>
<div class="expand-container">
<button
v-show="scrollable && !expanded"
class="expand"
@click="expanded = !expanded"
>
<span class="expand-text">Expand channels</span>
<Icon icon="arrow-down3" />
</button>
<button
v-show="expanded"
class="expand"
@click="expanded = !expanded"
>
<span class="expand-text">Collapse channels</span>
<Icon icon="arrow-up3" />
</button>
</div>
</div>
<Scenes />
</div>
</div>
</template>
<script setup>
import { ref, computed, inject } from 'vue';
import EntityTile from '#/components/entities/tile.vue';
import Scenes from '#/components/scenes/scenes.vue';
const { pageProps } = inject('pageContext');
const { entity } = pageProps;
const children = ref(null);
const expanded = ref(false);
const scrollable = computed(() => children.value?.scrollWidth > children.value?.clientWidth);
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
overflow-y: hidden;
}
.content {
display: flex;
flex-direction: column;
overflow-y: auto;
flex-grow: 1;
}
.header {
display: flex;
justify-content: space-between;
align-items: stretch;
color: var(--text-light);
background: var(--grey-dark-50);
}
.logo {
height: 2.5rem;
padding: .75rem 1rem;
}
.link-parent {
display: flex;
align-items: center;
}
.favicon {
display: none;
padding: .75rem 1rem;
}
.children-container {
position: relative;
}
.children {
background: var(--grey-dark-50);
display: flex;
/*
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
*/
gap: .5rem;
padding: .5rem;
overflow-x: auto;
flex-shrink: 0;
&.expanded {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
overflow-x: hidden;
.entity {
width: 100%;
}
}
}
.children::-webkit-scrollbar {
display: none;
}
.expand-container {
width: 100%;
display: flex;
justify-content: center;
position: absolute;
left: 0;
bottom: -.75rem;
z-index: 10;
}
.expand {
display: flex;
align-items: center;
padding: .5rem;
border: none;
background: var(--grey-dark-40);
color: var(--highlight-strong-30);
font-size: .9rem;
font-weight: bold;
border-radius: .25rem;
box-shadow: 0 0 3px var(--shadow);
.icon {
fill: var(--highlight-strong-30);
margin-left: 1rem;
}
&:hover {
color: var(--text-light);
cursor: pointer;
.icon {
fill: var(--text-light);
}
}
}
@media(--small-10) {
.logo-parent {
display: none;
}
.favicon {
display: inline-block;
}
}
@media(--compact) {
.logo {
height: 1.75rem;
}
.expand-text {
display: none;
}
.expand .icon {
margin-right: 1rem;
}
}
</style>

51
pages/entities/@entitySlug/+onBeforeRender.js Normal file
View File

@ -0,0 +1,51 @@
import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
import { fetchEntitiesById } from '#/src/entities.js';
import { fetchScenes } from '#/src/scenes.js';
import { curateScenesQuery } from '#/src/web/scenes.js';
import redis from '#/src//redis.js';
export async function onBeforeRender(pageContext) {
const entityId = await redis.hGet('traxxx:entities:id_by_slug', pageContext.routeParams.entityType === 'network' ? `_${pageContext.routeParams.entitySlug}` : pageContext.routeParams.entitySlug);
if (!entityId) {
throw render(404, `Cannot find ${pageContext.routeParams.entityType} '${pageContext.routeParams.entitySlug}'.`);
}
const [[entity], entityScenes] = await Promise.all([
fetchEntitiesById([Number(entityId)], { includeChildren: true }),
fetchScenes(await curateScenesQuery({
...pageContext.urlQuery,
scope: pageContext.routeParams.scope || 'latest',
entityId: Number(entityId),
}), {
page: Number(pageContext.routeParams.page) || 1,
limit: Number(pageContext.urlParsed.search.limit) || 30,
aggregate: true,
}),
]);
const {
scenes,
aggActors,
aggTags,
aggChannels,
total,
limit,
} = entityScenes;
return {
pageContext: {
title: entity.name,
pageProps: {
entity,
scenes,
aggActors,
aggTags,
aggChannels,
total,
limit,
},
},
};
}

23
pages/entities/@entitySlug/+route.js Normal file
View File

@ -0,0 +1,23 @@
import { match } from 'path-to-regexp';
// import { resolveRoute } from 'vike/routing'; // eslint-disable-line import/extensions
const path = '/:entityType(channel|network)/:entitySlug/:scope?/:page?';
const urlMatch = match(path, { decode: decodeURIComponent });
export default (pageContext) => {
const matched = urlMatch(pageContext.urlPathname);
if (matched) {
return {
routeParams: {
entityType: matched.params.entityType,
entitySlug: matched.params.entitySlug,
scope: matched.params.scope || 'latest',
page: matched.params.page || '1',
path,
},
};
}
return false;
};

1
pages/updates/+Page.vue
View File

@ -4,6 +4,7 @@
:scenes="scenes"
:show-filters="false"
:show-meta="false"
:show-scope-tabs="true"
/>
</div>
</template>

9
renderer/+onRenderClient.js
View File

@ -1,12 +1,17 @@
// https://vike.dev/onRenderClient
import { createApp } from './app';
import { createApp } from './app.js';
// This onRenderClient() hook only supports SSR, see https://vike.dev/render-modes for how to modify onRenderClient()
// to support SPA
async function onRenderClient(pageContext) {
const { Page, pageProps } = pageContext;
if (!Page) throw new Error('Client-side render() hook expects pageContext.Page to be defined');
if (!Page) {
throw new Error('Client-side render() hook expects pageContext.Page to be defined');
}
const app = createApp(Page, pageProps, pageContext);
app.mount('#app');
}

3
renderer/app.js
View File

@ -1,4 +1,5 @@
import { createSSRApp, h } from 'vue';
import VueVirtualScroller from 'vue-virtual-scroller';
import { setPageContext } from './usePageContext.js';
@ -30,6 +31,8 @@ function createApp(Page, pageProps, pageContext) {
app.provide('pageContext', pageContext);
app.use(VueVirtualScroller);
app.component('Link', Link);
app.component('Icon', Icon);

14
renderer/container.vue
View File

@ -32,6 +32,20 @@ onMounted(() => {
});
</script>
<style>
.scroller {
height: 30rem;
overflow-y: auto;
}
.item {
height: 32px;
padding: 0 12px;
display: flex;
align-items: center;
}
</style>
<style scoped>
.container {
height: 100%;

4
src/actors.js
View File

@ -35,13 +35,13 @@ export function curateActor(actor, context = {}) {
tattoos: actor.tattoos,
hasPiercings: actor.has_piercings,
piercings: actor.piercings,
origin: {
origin: actor.birth_country_alpha2 && {
country: actor.birth_country_alpha2 && {
alpha2: actor.birth_country_alpha2,
name: actor.birth_country_name,
},
},
residence: {
residence: actor.residence_country_alpha2 && {
country: actor.residence_country_alpha2 && {
alpha2: actor.residence_country_alpha2,
name: actor.residence_country_name,

39
src/entities.js
View File

@ -14,15 +14,39 @@ function curateEntity(entity, context) {
name: entity.name,
slug: entity.slug,
type: entity.type,
url: entity.url,
isIndependent: entity.independent,
hasLogo: entity.has_logo,
parent: curateEntity(entity.parent, context),
children: context?.children?.filter((child) => child.parent_id === entity.id).map((child) => curateEntity({ ...child, parent: entity }, { parent: entity })) || [],
...context?.append?.[entity.id],
};
}
export async function fetchEntities(options) {
const entities = await knex('entities')
.modify((builder) => {
if (options.type === 'primary') {
builder
.where('type', 'network')
.orWhere('independent', true)
.orWhereNull('parent_id');
return;
}
if (options.type) {
builder.where('type', options.type);
}
})
.orderBy(...(options.order || ['name', 'asc']))
.limit(options.limit || 1000);
return entities.map((entityEntry) => curateEntity(entityEntry));
}
export async function fetchEntitiesById(entityIds, options = {}) {
const [entities] = await Promise.all([
const [entities, children] = await Promise.all([
knex('entities')
.select('entities.*', knex.raw('row_to_json(parents) as parent'))
.whereIn('entities.id', entityIds)
@ -33,10 +57,16 @@ export async function fetchEntitiesById(entityIds, options = {}) {
}
})
.groupBy('entities.id', 'parents.id'),
options.includeChildren ? knex('entities')
.whereIn('entities.parent_id', entityIds)
.orderBy('slug') : [],
]);
if (options.order) {
return entities.map((entityEntry) => curateEntity(entityEntry, { append: options.append }));
return entities.map((entityEntry) => curateEntity(entityEntry, {
append: options.append,
children,
}));
}
const curatedEntities = entityIds.map((entityId) => {
@ -47,7 +77,10 @@ export async function fetchEntitiesById(entityIds, options = {}) {
return null;
}
return curateEntity(entity, { append: options.append });
return curateEntity(entity, {
append: options.append,
children,
});
}).filter(Boolean);
return curatedEntities;

5
src/scenes.js
View File

@ -183,6 +183,10 @@ function buildQuery(filters = {}) {
sort = [{ created_at: 'desc' }, { effective_date: 'asc' }];
}
if (filters.scope === 'likes') {
sort = [{ stashed: 'desc' }, { effective_date: 'desc' }];
}
if (filters.tagIds) {
filters.tagIds.forEach((tagId) => {
query.bool.must.push({ equals: { 'any(tag_ids)': tagId } });
@ -272,6 +276,7 @@ export async function fetchScenes(filters, rawOptions) {
offset: (options.page - 1) * options.limit,
sort,
aggs: buildAggregates(options),
max_matches: 5000,
});
const actorCounts = options.aggregateActors && countAggregations(result.aggregations?.actorIds?.buckets);

3
utils/media-path.js
View File

@ -45,7 +45,6 @@ function getFilename(media, type, options) {
}
export function getMediaPath(media, type, options) {
console.log('media', media);
if (!media) {
return null;
}
@ -53,7 +52,5 @@ export function getMediaPath(media, type, options) {
const path = getBasePath(media, type, options);
const filename = getFilename(media, type, options);
console.log(path, filename);
return `${path}/${filename}`;
}