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

Removed info channels from overview. Fixed poster gap.

This commit is contained in:
DebaucheryLibrarian 2024-06-12 17:09:53 +02:00
parent bfe6dc866d
commit 41d6324c28
13 changed files with 302 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
components/campaigns/campaign.vue
View File

@ -1,17 +1,33 @@
<template>
<div class="campaign">
<iframe
v-if="campaign?.banner?.type === 'html'"
ref="iframe"
:width="campaign.banner.width"
:height="campaign.banner.height"
:src="bannerSrc"
scrolling="no"
marginwidth="0"
marginheight="0"
class="campaign frame"
data-umami-event="campaign-click"
:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
/>
<a
:href="campaign.url"
v-else-if="campaign.banner"
:href="campaign.url || campaign.affiliate?.url"
target="_blank"
class="campaign-link"
class="campaign"
data-umami-event="campaign-click"
:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
>
<img
v-if="campaign.banner"
:src="getBanner(campaign)"
:src="bannerSrc"
:width="campaign.banner.width"
:height="campaign.banner.height"
class="campaign-banner"
>
</a>
</div>
</template>
<script setup>
@ -24,17 +40,19 @@ const props = defineProps({
// console.log(props.campaign?.banner);
function getBanner(campaign) {
if (campaign.banner.entity.type === 'network' || !campaign.banner.entity.parent) {
return `/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`;
const bannerSrc = (() => {
if (props.campaign.banner) {
if (props.campaign.banner.entity.type === 'network' || !props.campaign.banner.entity.parent) {
return `/banners/${props.campaign.banner.entity.slug}/${props.campaign.banner.id}.${props.campaign.banner.type || 'jpg'}`;
}
if (campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network') {
return `/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`;
if (props.campaign.banner.entity.type === 'channel' && props.campaign.banner.entity.parent?.type === 'network') {
return `/banners/${props.campaign.banner.entity.parent.slug}/${props.campaign.banner.entity.slug}/${props.campaign.banner.id}.${props.campaign.banner.type || 'jpg'}`;
}
}
return null;
}
})();
</script>
<style scoped>
@ -44,7 +62,14 @@ function getBanner(campaign) {
justify-content: center;
}
.frame {
border: none;
overflow: hidden;
}
.campaign-banner {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
}

16
components/pagination/pagination.vue
View File

@ -1,5 +1,10 @@
<template>
<div class="pagination-container">
<Campaign
v-if="campaigns?.pagination"
:campaign="campaigns.pagination"
/>
<div
v-if="currentPage === pageTotal && total > env.maxMatches"
class="more"
@ -89,6 +94,8 @@
import { computed, inject } from 'vue';
import { parse } from 'path-to-regexp';
import Campaign from '#/components/campaigns/campaign.vue';
const props = defineProps({
page: {
type: Number,
@ -117,7 +124,6 @@ const props = defineProps({
});
const emit = defineEmits(['navigation']);
const pageContext = inject('pageContext');
const {
@ -125,6 +131,7 @@ const {
urlParsed,
pageProps,
env,
campaigns,
} = pageContext;
const currentPage = computed(() => props.page || Number(routeParams?.page));
@ -203,6 +210,7 @@ function getPath(page) {
.pagination-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@ -286,6 +294,12 @@ function getPath(page) {
font-size: 1.1rem;
}
.campaign {
max-width: 100%;
max-height: 6rem;
padding: 0 1rem;
}
@media (--small-30) {
.pagination {
height: 4.5rem;

68
components/scenes/scenes.vue
View File

@ -54,6 +54,11 @@
>
<div class="meta">{{ total }} results</div>
<Campaign
v-if="campaigns?.meta"
:campaign="campaigns.meta"
/>
<select
v-model="scope"
class="input"
@ -83,6 +88,7 @@
v-if="showScopeTabs"
class="scopes"
>
<div class="scopes-pills">
<Link
:href="getPath('latest')"
class="scope nolink"
@ -100,6 +106,12 @@
class="scope nolink"
:active="scope === 'new'"
>New</Link>
</div>
<Campaign
v-if="campaigns?.scope"
:campaign="campaigns.scope"
/>
</nav>
<ul
@ -107,10 +119,10 @@
>
<template v-for="item in campaignScenes">
<li
v-if="item === 'campaign' && campaign"
v-if="item === 'campaign' && sceneCampaign"
:key="`campaign-${item.id}`"
>
<Campaign :campaign="campaign" />
<Campaign :campaign="sceneCampaign" />
</li>
<li
@ -172,7 +184,12 @@ const props = defineProps({
},
});
const { pageProps, routeParams, urlParsed } = inject('pageContext');
const {
pageProps,
routeParams,
urlParsed,
campaigns,
} = inject('pageContext');
const {
actor: pageActor,
@ -206,10 +223,10 @@ const filters = ref({
actors: queryActors,
});
const campaign = pageProps.campaigns?.scenes;
const campaignIndex = pageProps.campaigns?.index;
const sceneCampaign = campaigns?.scenes;
const campaignIndex = campaigns?.index;
const campaignScenes = computed(() => scenes.value.flatMap((scene, index) => (index === campaignIndex ? ['campaign', scene] : scene)));
const campaignScenes = computed(() => scenes.value.flatMap((scene, index) => (sceneCampaign && index === campaignIndex ? ['campaign', scene] : scene)));
function getPath(targetScope, preserveQuery) {
const path = parse(routeParams.path).map((segment) => {
@ -302,8 +319,15 @@ function updateFilter(prop, value, reload = true) {
.scenes-header {
display: flex;
align-items: center;
align-items: flex-end;
justify-content: space-between;
padding: .5rem 1rem .25rem 3rem;
.campaign {
max-height: 6rem;
justify-content: center;
margin: .5rem 1rem 0 1rem;
}
}
.scenes-container {
@ -314,9 +338,9 @@ function updateFilter(prop, value, reload = true) {
.meta {
display: flex;
flex-grow: 1;
justify-content: space-between;
align-items: center;
margin-bottom: .5rem;
}
.scenes {
@ -328,8 +352,21 @@ function updateFilter(prop, value, reload = true) {
.scopes {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: .75rem 1rem .25rem 1rem;
.campaign {
max-height: 6rem;
justify-content: flex-end;
margin-left: 1rem;
}
}
.scopes-pills {
display: flex;
align-items: center;
gap: .5rem;
padding: .75rem 0 .25rem 1rem;
}
.scope {
@ -370,6 +407,19 @@ function updateFilter(prop, value, reload = true) {
.scopes {
justify-content: center;
flex-direction: column-reverse;
.campaign {
width: 100%;
justify-content: center;
margin-left: 0;
margin-bottom: 1rem;
}
}
.scopes-pills {
width: 100%;
justify-content: center;
}
}

1
pages/entities/@entitySlug/+Page.vue
View File

@ -253,7 +253,6 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?.
@media(--small-20) {
.logo {
height: 1rem;
padding: .5rem 1rem;
}

32
pages/entities/@entitySlug/+onBeforeRender.js
View File

@ -3,6 +3,7 @@ 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 { getRandomCampaigns } from '#/src/campaigns.js';
import redis from '#/src//redis.js';
export async function onBeforeRender(pageContext) {
@ -12,7 +13,10 @@ export async function onBeforeRender(pageContext) {
throw render(404, `Cannot find ${pageContext.routeParams.entityType} '${pageContext.routeParams.entitySlug}'.`);
}
const [[entity], entityScenes] = await Promise.all([
const [
[entity],
entityScenes,
] = await Promise.all([
fetchEntitiesById([Number(entityId)], { includeChildren: true }),
fetchScenes(await curateScenesQuery({
...pageContext.urlQuery,
@ -26,6 +30,23 @@ export async function onBeforeRender(pageContext) {
}, pageContext.user),
]);
const campaigns = await getRandomCampaigns([
{
entityIds: [entity.id, entity.parent?.id].filter(Boolean),
minRatio: 1.5,
},
{
entityIds: [entity.id, entity.parent?.id].filter(Boolean),
minRatio: 0.75,
maxRatio: 1.25,
},
{
entityIds: [entity.id, entity.parent?.id].filter(Boolean),
parentEntityId: entity.parent?.id,
minRatio: 1.5,
},
]);
const {
scenes,
aggActors,
@ -35,6 +56,9 @@ export async function onBeforeRender(pageContext) {
limit,
} = entityScenes;
const campaignIndex = Math.floor((Math.random() * (0.5 - 0.2) + 0.2) * scenes.length);
const [metaCampaign, sceneCampaign, paginationCampaign] = campaigns;
return {
pageContext: {
title: entity.name,
@ -47,6 +71,12 @@ export async function onBeforeRender(pageContext) {
total,
limit,
},
campaigns: {
index: campaignIndex,
meta: metaCampaign,
scenes: scenes.length > 5 && sceneCampaign,
pagination: paginationCampaign,
},
},
};
}

27
pages/scene/+Page.vue
View File

@ -36,12 +36,12 @@
</div>
<div
v-if="scene.photos.length > 0"
v-if="scene.photos.length > 0 || scene.caps.length > 0"
class="album"
:class="{ single: scene.photos.length === 1 }"
:class="{ single: (scene.photos.length + scene.caps.length) === 1 }"
>
<div
v-for="photo in scene.photos"
v-for="photo in [...scene.photos, ...scene.caps]"
:key="`photo-${photo.id}`"
class="photo-container"
>
@ -444,6 +444,11 @@ function copySummary() {
margin-right: .5rem;
}
.poster-link {
height: 100%;
width: calc(21/9 * 16rem);
}
.poster {
height: 100%;
width: 100%;
@ -638,7 +643,7 @@ function copySummary() {
overflow-x: auto;
.actor {
width: 8rem;
width: 10rem;
flex-shrink: 0;
}
}
@ -786,6 +791,10 @@ function copySummary() {
flex-shrink: 1;
}
.poster-link {
width: 100%;
}
.trailer {
margin: 0;
flex-shrink: 1;
@ -812,7 +821,9 @@ function copySummary() {
}
.actors {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
.actor {
width: 9rem;
}
}
.series {
@ -833,10 +844,4 @@ function copySummary() {
font-size: .9rem;
}
}
@media(--small-60) {
.actors {
grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
}
}
</style>

2
pages/scene/+onBeforeRender.js
View File

@ -15,6 +15,8 @@ function getTitle(scene) {
export async function onBeforeRender(pageContext) {
const [scene] = await fetchScenesById([Number(pageContext.routeParams.sceneId)], {
reqUser: pageContext.user,
includeAssets: true,
includePartOf: true,
actorStashes: true,
});

9
pages/updates/+Page.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="updates">
<Scenes
:show-filters="!!query"
:show-meta="!!query"
@ -16,3 +16,10 @@ import Scenes from '#/components/scenes/scenes.vue';
const pageContext = inject('pageContext');
const query = Object.hasOwn(pageContext.urlParsed.search, 'q');
</script>
<style scoped>
.updates {
display: flex;
flex-grow: 1;
}
</style>

41
pages/updates/+onBeforeRender.js
View File

@ -1,18 +1,15 @@
import { fetchScenes } from '#/src/scenes.js';
import { curateScenesQuery } from '#/src/web/scenes.js';
import { getRandomCampaign } from '#/src/campaigns.js';
import { getRandomCampaigns } from '#/src/campaigns.js';
export async function onBeforeRender(pageContext) {
const withQuery = Object.hasOwn(pageContext.urlParsed.search, 'q');
const {
scenes,
aggTags,
aggChannels,
aggActors,
limit,
total,
} = await fetchScenes(await curateScenesQuery({
const [
sceneResults,
campaigns,
] = await Promise.all([
fetchScenes(await curateScenesQuery({
...pageContext.urlQuery,
scope: pageContext.routeParams.scope || 'latest',
isShowcased: withQuery ? null : true,
@ -21,11 +18,25 @@ export async function onBeforeRender(pageContext) {
page: Number(pageContext.routeParams.page) || 1,
limit: Number(pageContext.urlParsed.search.limit) || 29,
aggregate: withQuery,
}, pageContext.user);
}, pageContext.user),
getRandomCampaigns([
{ minRatio: 1.5 },
{ minRatio: 0.75, maxRatio: 1.25 },
{ minRatio: 1.5 },
]),
]);
const {
scenes,
aggTags,
aggChannels,
aggActors,
limit,
total,
} = sceneResults;
// const campaignIndex = Math.floor(Math.random() * (scenes.length - 5)) + 5;
const campaignIndex = Math.floor((Math.random() * (0.5 - 0.2) + 0.2) * scenes.length);
const sceneCampaign = await getRandomCampaign({ minRatio: 0.75, maxRatio: 1.25 });
const [scopeCampaign, sceneCampaign, paginationCampaign] = campaigns;
return {
pageContext: {
@ -37,10 +48,12 @@ export async function onBeforeRender(pageContext) {
aggActors,
limit,
total,
},
campaigns: {
index: campaignIndex,
scenes: sceneCampaign,
},
scope: scopeCampaign,
scenes: scenes.length > 5 && sceneCampaign,
pagination: paginationCampaign,
},
},
};

1
renderer/+config.h.js
View File

@ -6,6 +6,7 @@ export default {
'urlParsed',
'env',
'user',
'campaigns',
'meta',
],
};

49
src/campaigns.js
View File

@ -15,6 +15,7 @@ function curateCampaign(campaign) {
return {
id: campaign.id,
url: campaign.url,
entity: campaign.entity && curateEntity({ ...campaign.entity, parent: campaign.parent_entity }),
banner: campaign.banner && {
id: campaign.banner.id,
type: campaign.banner.type,
@ -37,8 +38,8 @@ function curateCampaign(campaign) {
}
export async function getRandomCampaign(options = {}) {
const rawCampaigns = await redis.hGetAll('traxxx:campaigns');
const campaigns = Object.values(rawCampaigns).map((rawCampaign) => JSON.parse(rawCampaign));
const campaigns = options.campaigns
|| await redis.hGetAll('traxxx:campaigns').then((rawCampaigns) => Object.values(rawCampaigns).map((rawCampaign) => JSON.parse(rawCampaign)));
const validCampaigns = campaigns.filter((campaign) => {
if (options.minRatio && (!campaign.banner || campaign.banner.ratio < options.minRatio)) {
@ -49,14 +50,36 @@ export async function getRandomCampaign(options = {}) {
return false;
}
if (options.entityIds && !options.entityIds.some((entityId) => campaign.entity.id === entityId || campaign.entity.parent?.id === entityId)) {
return false;
}
return true;
});
const randomCampaign = validCampaigns[crypto.randomInt(validCampaigns.length)];
const primaryCampaigns = validCampaigns.filter((campaign) => campaign.entity.id === options.entityIds?.[0]);
if (validCampaigns.length > 0) {
const randomCampaign = primaryCampaigns.length > 0
? primaryCampaigns[crypto.randomInt(primaryCampaigns.length)]
: validCampaigns[crypto.randomInt(validCampaigns.length)];
return randomCampaign;
}
return null;
}
export async function getRandomCampaigns(allOptions = []) {
const rawCampaigns = await redis.hGetAll('traxxx:campaigns');
const campaigns = Object.values(rawCampaigns).map((rawCampaign) => JSON.parse(rawCampaign));
return Promise.all(allOptions.map(async (options) => getRandomCampaign({
...options,
campaigns,
})));
}
export async function cacheCampaigns() {
const campaigns = await knex('campaigns')
.select('campaigns.*')
@ -64,17 +87,29 @@ export async function cacheCampaigns() {
'campaigns.*',
knex.raw('row_to_json(affiliates) as affiliate'),
knex.raw('row_to_json(banners) as banner'),
knex.raw('row_to_json(entities) as banner_entity'),
knex.raw('row_to_json(parents) as banner_parent_entity'),
knex.raw('row_to_json(entities) as entity'),
knex.raw('row_to_json(parents) as parent_entity'),
knex.raw('row_to_json(banner_entities) as banner_entity'),
knex.raw('row_to_json(banner_parents) as banner_parent_entity'),
knex.raw('json_agg(tags.slug) filter (where tags.id is not null) as banner_tags'),
)
.leftJoin('affiliates', 'affiliates.id', 'campaigns.affiliate_id')
.leftJoin('banners', 'banners.id', 'campaigns.banner_id')
.leftJoin('banners_tags', 'banners_tags.banner_id', 'banners.id')
.leftJoin('tags', 'tags.id', 'banners_tags.tag_id')
.leftJoin('entities', 'entities.id', 'banners.entity_id')
.leftJoin('entities', 'entities.id', 'campaigns.entity_id')
.leftJoin('entities as parents', 'parents.id', 'entities.parent_id')
.groupBy('campaigns.id', 'affiliates.id', 'banners.id', 'entities.id', 'parents.id');
.leftJoin('entities as banner_entities', 'banner_entities.id', 'banners.entity_id')
.leftJoin('entities as banner_parents', 'banner_parents.id', 'banner_entities.parent_id')
.groupBy(
'campaigns.id',
'affiliates.id',
'entities.id',
'parents.id',
'banners.id',
'banner_entities.id',
'banner_parents.id',
);
await redis.del('traxxx:campaigns');

8
src/entities.js
View File

@ -30,16 +30,24 @@ export async function fetchEntities(options) {
if (options.query) {
builder.where((whereBuilder) => {
whereBuilder
.where((subBuilder) => {
subBuilder
.whereILike('entities.name', `%${options.query}%`)
.orWhereILike('entities.slug', `%${options.query}%`);
})
.whereNot('entities.type', 'info');
});
}
if (options.type === 'primary') {
builder
.where((subBuilder) => {
subBuilder
.where('entities.type', 'network')
.orWhere('entities.independent', true)
.orWhereNull('entities.parent_id');
})
.whereNot('entities.type', 'info');
return;
}

36
src/scenes.js
View File

@ -73,7 +73,8 @@ function curateScene(rawScene, assets) {
poster: curateMedia(assets.poster),
trailer: curateMedia(assets.trailer),
teaser: curateMedia(assets.teaser),
photos: assets.photos.map((photo) => curateMedia(photo)),
photos: assets.photos?.map((photo) => curateMedia(photo)) || [],
caps: assets.caps?.map((cap) => curateMedia(cap)) || [],
stashes: assets.stashes?.map((stash) => curateStash(stash)) || [],
createdBatchId: rawScene.created_batch_id,
updatedBatchId: rawScene.updated_batch_id,
@ -92,6 +93,7 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
series,
posters,
photos,
caps,
trailers,
teasers,
stashes,
@ -125,24 +127,24 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
.whereNotNull('tags.id')
.whereIn('release_id', sceneIds)
.orderBy('priority', 'desc'),
movies: knex('movies_scenes')
movies: context.includePartOf ? knex('movies_scenes')
.select('movies_scenes.scene_id', 'movies.*', knex.raw('json_agg(media) as movie_covers'))
.leftJoin('movies', 'movies.id', 'movies_scenes.movie_id')
.leftJoin('movies_covers', 'movies_covers.movie_id', 'movies.id')
.leftJoin('media', 'media.id', 'movies_covers.media_id')
.whereIn('scene_id', sceneIds)
.groupBy('movies.id', 'movies_scenes.scene_id'),
series: knex('series_scenes')
.groupBy('movies.id', 'movies_scenes.scene_id') : [],
series: context.includePartOf ? knex('series_scenes')
.select('series_scenes.scene_id', 'series.*', knex.raw('row_to_json(media) as serie_poster'))
.leftJoin('series', 'series.id', 'series_scenes.serie_id')
.leftJoin('series_posters', 'series_posters.serie_id', 'series.id')
.leftJoin('media', 'media.id', 'series_posters.media_id')
.whereIn('scene_id', sceneIds)
.groupBy('series.id', 'series_scenes.scene_id', 'media.*'),
.groupBy('series.id', 'series_scenes.scene_id', 'media.*') : [],
posters: knex('releases_posters')
.whereIn('release_id', sceneIds)
.leftJoin('media', 'media.id', 'releases_posters.media_id'),
photos: knex.transaction(async (trx) => {
photos: context.includeAssets ? knex.transaction(async (trx) => {
if (reqUser) {
await trx.select(knex.raw('set_config(\'user.id\', :userId, true)', { userId: reqUser.id }));
}
@ -151,8 +153,18 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
.leftJoin('media', 'media.id', 'releases_photos.media_id')
.whereIn('release_id', sceneIds)
.orderBy('index');
}),
trailers: knex.transaction(async (trx) => {
}) : [],
caps: context.includeAssets ? knex.transaction(async (trx) => {
if (reqUser) {
await trx.select(knex.raw('set_config(\'user.id\', :userId, true)', { userId: reqUser.id }));
}
return trx('releases_caps')
.leftJoin('media', 'media.id', 'releases_caps.media_id')
.whereIn('release_id', sceneIds)
.orderBy('index');
}) : [],
trailers: context.includeAssets ? knex.transaction(async (trx) => {
if (reqUser) {
await trx.select(knex.raw('set_config(\'user.id\', :userId, true)', { userId: reqUser.id }));
}
@ -160,8 +172,8 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
return trx('releases_trailers')
.whereIn('release_id', sceneIds)
.leftJoin('media', 'media.id', 'releases_trailers.media_id');
}),
teasers: knex.transaction(async (trx) => {
}) : [],
teasers: context.includeAssets ? knex.transaction(async (trx) => {
if (reqUser) {
await trx.select(knex.raw('set_config(\'user.id\', :userId, true)', { userId: reqUser.id }));
}
@ -169,7 +181,7 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
return trx('releases_teasers')
.whereIn('release_id', sceneIds)
.leftJoin('media', 'media.id', 'releases_teasers.media_id');
}),
}) : [],
lastBatch: knex('batches')
.select('id')
.where('showcased', true)
@ -205,6 +217,7 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
const sceneSeries = series.filter((serie) => serie.scene_id === sceneId);
const scenePoster = posters.find((poster) => poster.release_id === sceneId);
const scenePhotos = photos.filter((photo) => photo.release_id === sceneId);
const sceneCaps = caps.filter((cap) => cap.release_id === sceneId);
const sceneTrailers = trailers.find((trailer) => trailer.release_id === sceneId);
const sceneTeasers = teasers.find((teaser) => teaser.release_id === sceneId);
const sceneStashes = stashes.filter((stash) => stash.scene_id === sceneId);
@ -219,6 +232,7 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
series: sceneSeries,
poster: scenePoster,
photos: scenePhotos,
caps: sceneCaps,
trailer: sceneTrailers,
teaser: sceneTeasers,
stashes: sceneStashes,