Improved campaign component, added various banners.

This commit is contained in:
DebaucheryLibrarian 2021-06-28 05:13:41 +02:00
parent 729ca0f968
commit 0a343dfa98
34 changed files with 308 additions and 45 deletions

View File

@ -11,43 +11,56 @@
/> />
</div> </div>
<div <div class="album-body">
class="album-items"
:class="{ portrait }"
>
<div <div
v-for="item in albumItems" v-if="entity || tag"
:key="item.id" class="campaign-container"
class="item-container"
> >
<a <Campaign
:href="getPath(item, null, { local })" :entity="entity"
class="item-link" :tag="tag"
target="_blank" :min-ratio="3"
/>
</div>
<div
class="album-items"
:class="{ portrait }"
>
<div
v-for="item in albumItems"
:key="item.id"
class="item-container"
> >
<img <a
:src="getPath(item, 'thumbnail', { local })" :href="getPath(item, null, { local })"
:style="{ 'background-image': getBgPath(item, 'lazy', { local }) }" class="item-link"
:width="item.thumbnailWidth" target="_blank"
:height="item.thumbnailHeight"
:title="item.title"
loading="lazy"
class="item image"
> >
<img
:src="getPath(item, 'thumbnail', { local })"
:style="{ 'background-image': getBgPath(item, 'lazy', { local }) }"
:width="item.thumbnailWidth"
:height="item.thumbnailHeight"
:title="item.title"
loading="lazy"
class="item image"
>
<Logo :photo="item" /> <Logo :photo="item" />
<router-link <router-link
v-if="comments && item.title && item.entity" v-if="comments && item.title && item.entity"
:to="`/${item.entity.type}/${item.entity.slug}`" :to="`/${item.entity.type}/${item.entity.slug}`"
class="item-comment" class="item-comment"
>{{ item.title }} for {{ item.entity.name }}</router-link> >{{ item.title }} for {{ item.entity.name }}</router-link>
<span <span
v-else-if="comments && item.title" v-else-if="comments && item.title"
class="item-comment" class="item-comment"
>{{ item.title }}</span> >{{ item.title }}</span>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -56,6 +69,7 @@
<script> <script>
import Logo from './logo.vue'; import Logo from './logo.vue';
import Campaign from '../campaigns/campaign.vue';
function albumItems() { function albumItems() {
return this.items return this.items
@ -69,6 +83,7 @@ function albumItems() {
export default { export default {
components: { components: {
Logo, Logo,
Campaign,
}, },
props: { props: {
items: { items: {
@ -91,6 +106,14 @@ export default {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
entity: {
type: Object,
default: null,
},
tag: {
type: Object,
default: null,
},
}, },
computed: { computed: {
albumItems, albumItems,
@ -146,15 +169,30 @@ export default {
} }
} }
.album-body {
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: center;
overflow-y: auto;
}
.campaign-container {
flex-shrink: 0;
text-align: center;
}
.album-items { .album-items {
height: 0;
display: grid; display: grid;
flex-grow: 1;
flex-shrink: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 0 1rem; grid-gap: 0 1rem;
padding: 1rem; padding: 1rem;
margin: auto 0; margin: auto 0;
overflow-y: auto;
&.portrait { &.portrait {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

View File

@ -7,43 +7,79 @@
> >
<img <img
v-if="campaign.banner.entity.type === 'network'" v-if="campaign.banner.entity.type === 'network'"
:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`" :src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpg`"
:width="campaign.banner.width"
:height="campaign.banner.height"
class="campaign-banner" class="campaign-banner"
> >
<img <img
v-if="campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network'" v-if="campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network'"
:src="`/img/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`" :src="`/img/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.jpg`"
:width="campaign.banner.width"
:height="campaign.banner.height"
class="campaign-banner" class="campaign-banner"
> >
</a> </a>
</template> </template>
<script> <script>
function ratioFilter(banner) {
if (!banner) {
return false;
}
if (this.minHeight && banner.height < this.minHeight) {
return false;
}
if (this.maxHeight && banner.height > this.minHeight) {
return false;
}
if (this.minRatio && banner.ratio < this.minRatio) {
return false;
}
if (this.maxRatio && banner.ratio > this.maxRatio) {
return false;
}
return true;
}
function entityCampaign() { function entityCampaign() {
const bannerCampaigns = this.entity.campaigns const bannerCampaigns = this.entity.campaigns
.concat(this.entity.children?.flatMap(child => child.campaigns)) .concat(this.entity.children?.flatMap(child => child.campaigns))
.concat(this.entity.parent?.campaigns) .concat(this.entity.parent?.campaigns)
.filter(campaignX => campaignX.banner?.ratio > 3); .filter(campaignX => campaignX && this.ratioFilter(campaignX.banner));
if (bannerCampaigns.length > 0) { if (bannerCampaigns.length > 0) {
return bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)]; const randomCampaign = bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
this.$emit('campaign', randomCampaign);
return randomCampaign;
} }
this.$emit('campaign', null);
return null; return null;
} }
function tagCampaign() { function tagCampaign() {
const campaignBanners = this.tag.banners.filter(banner => banner.campaigns.length > 0 && banner.ratio > 3); const campaignBanners = this.tag.banners.filter(banner => banner.campaigns.length > 0 && this.ratioFilter(banner));
const banner = campaignBanners[Math.floor(Math.random() * campaignBanners.length)]; const banner = campaignBanners[Math.floor(Math.random() * campaignBanners.length)];
if (banner?.campaigns.length > 0) { if (banner?.campaigns.length > 0) {
return { const randomCampaign = {
...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)], ...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)],
banner, banner,
}; };
this.$emit('campaign', randomCampaign);
return randomCampaign;
} }
this.$emit('campaign', null);
return null; return null;
} }
@ -56,6 +92,7 @@ function campaign() {
return this.tagCampaign(); return this.tagCampaign();
} }
this.$emit('campaign', null); // allow parent to toggle campaigns depending on availability
return null; return null;
} }
@ -69,12 +106,22 @@ export default {
type: Object, type: Object,
default: null, default: null,
}, },
minRatio: {
type: Number,
default: null,
},
maxRatio: {
type: Number,
default: null,
},
}, },
emits: ['campaign'],
computed: { computed: {
campaign, campaign,
}, },
methods: { methods: {
entityCampaign, entityCampaign,
ratioFilter,
tagCampaign, tagCampaign,
}, },
}; };
@ -90,6 +137,7 @@ export default {
} }
.campaign-banner { .campaign-banner {
height: auto;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
} }

View File

@ -97,7 +97,10 @@
</Scroll> </Scroll>
<div class="campaign-container"> <div class="campaign-container">
<Campaign :entity="entity" /> <Campaign
:entity="entity"
:min-ratio="3"
/>
</div> </div>
<FilterBar <FilterBar
@ -208,7 +211,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding: .5rem 1rem; padding: 1rem;
text-decoration: none; text-decoration: none;
} }

View File

@ -1,5 +1,13 @@
<template> <template>
<div class="photos"> <div class="photos">
<Campaign
:tag="tag"
:min-height="240"
:max-ratio="1.5"
class="photo-link photo"
@campaign="campaign => $emit('campaign', campaign)"
/>
<a <a
v-for="photo in photos" v-for="photo in photos"
:key="`photo-${photo.id}`" :key="`photo-${photo.id}`"
@ -37,6 +45,7 @@
<script> <script>
import Logo from '../album/logo.vue'; import Logo from '../album/logo.vue';
import Campaign from '../campaigns/campaign.vue';
function photos() { function photos() {
if (this.tag.poster && this.$store.state.ui.sfw) { if (this.tag.poster && this.$store.state.ui.sfw) {
@ -57,6 +66,7 @@ function photos() {
export default { export default {
components: { components: {
Logo, Logo,
Campaign,
}, },
props: { props: {
tag: { tag: {
@ -64,7 +74,7 @@ export default {
default: null, default: null,
}, },
}, },
emits: ['load'], emits: ['load', 'campaign'],
computed: { computed: {
photos, photos,
}, },
@ -150,4 +160,9 @@ export default {
transform: translateY(100%); transform: translateY(100%);
transition: transform .25s ease; transition: transform .25s ease;
} }
::v-deep(.campaign) .campaign-banner {
max-height: 15rem;
width: auto;
}
</style> </style>

View File

@ -29,6 +29,7 @@
:tag="tag" :tag="tag"
:class="{ expanded }" :class="{ expanded }"
@load="scroll.loaded" @load="scroll.loaded"
@campaign="campaign => showBannerCampaign = !campaign"
/> />
</Scroll> </Scroll>
@ -43,12 +44,19 @@
:items="[tag.poster, ...tag.photos]" :items="[tag.poster, ...tag.photos]"
:title="tag.name" :title="tag.name"
:local="true" :local="true"
:tag="tag"
class="portrait" class="portrait"
@close="$router.replace({ hash: undefined })" @close="$router.replace({ hash: undefined })"
/> />
<div class="campaign-container"> <div
<Campaign :tag="tag" /> v-if="showBannerCampaign"
class="campaign-container"
>
<Campaign
:tag="tag"
:min-ratio="3"
/>
</div> </div>
<FilterBar <FilterBar
@ -99,6 +107,10 @@ async function fetchReleases(scroll = true) {
this.hasMedia = this.tag.poster || this.tag.photos.length > 0; this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description)); this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
if (this.hasMedia) {
this.showBannerCampaign = true;
}
if (scroll && this.$refs.filter) { if (scroll && this.$refs.filter) {
this.$refs.filter.$el.scrollIntoView(); this.$refs.filter.$el.scrollIntoView();
} }
@ -139,6 +151,7 @@ export default {
pageTitle: null, pageTitle: null,
hasMedia: false, hasMedia: false,
expanded: false, expanded: false,
showBannerCampaign: false, // only show if photo campaign is not available
}; };
}, },
computed: { computed: {

View File

@ -1547,7 +1547,7 @@ exports.up = knex => Promise.resolve()
SELECT EXISTS(SELECT true WHERE (SELECT id FROM batches ORDER BY created_at DESC LIMIT 1) = release.created_batch_id); SELECT EXISTS(SELECT true WHERE (SELECT id FROM batches ORDER BY created_at DESC LIMIT 1) = release.created_batch_id);
$$ LANGUAGE sql STABLE; $$ LANGUAGE sql STABLE;
CREATE FUNCTION banners_ratio(banner banners) RETURNS real AS $$ CREATE FUNCTION banners_ratio(banner banners) RETURNS numeric AS $$
SELECT ROUND(banner.width::decimal / banner.height::decimal, 2); SELECT ROUND(banner.width::decimal / banner.height::decimal, 2);
$$ LANGUAGE SQL STABLE; $$ LANGUAGE SQL STABLE;
`); `);

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

View File

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 83 KiB

View File

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 90 KiB

View File

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

View File

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB

View File

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View File

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View File

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

View File

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

View File

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

View File

Before

Width:  |  Height:  |  Size: 127 KiB

After

Width:  |  Height:  |  Size: 127 KiB

View File

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -1,6 +1,83 @@
const bulkInsert = require('../src/utils/bulk-insert'); const bulkInsert = require('../src/utils/bulk-insert');
const banners = [ const banners = [
{
id: '21sextury_300_250_anal',
width: 300,
height: 250,
network: '21sextury',
tags: ['anal', 'blonde'],
},
{
id: '21sextury_770_76_gina_gerson_dp',
width: 770,
height: 76,
network: '21sextury',
tags: ['dp', 'anal', 'mfm', 'blonde'],
},
{
id: '21sextury_770_76_veronica_leal_dp',
width: 770,
height: 76,
network: '21sextury',
tags: ['dp', 'anal', 'mfm', 'blowjob', 'blonde'],
},
{
id: '21sextreme_300_250_cum',
width: 300,
height: 250,
network: '21sextreme',
tags: ['facial', 'cum-in-mouth'],
},
{
id: '21naturals_315_300',
width: 315,
height: 300,
network: '21naturals',
tags: ['brunette', 'natural-boobs'],
},
{
id: '21naturals_315_300_1',
width: 315,
height: 300,
network: '21naturals',
tags: ['blonde', 'natural-boobs'],
},
{
id: '21naturals_315_300_gina_gerson',
width: 315,
height: 300,
network: '21naturals',
tags: ['sex', 'blonde', 'natural-boobs'],
},
{
id: '21naturals_315_300_ginebra_bellucci',
width: 315,
height: 300,
network: '21naturals',
tags: ['sex', 'brunette', 'natural-boobs'],
},
{
id: '21naturals_315_300_lana_roy_anal',
width: 315,
height: 300,
network: '21naturals',
tags: ['anal', 'brunette', 'natural-boobs'],
},
{
id: '21naturals_770_76_alexis_crystal',
width: 770,
height: 76,
network: '21naturals',
tags: ['blowjob', 'blonde'],
},
{
id: '21naturals_970_90',
width: 970,
height: 90,
network: '21naturals',
tags: ['sex', 'brunette'],
},
{ {
id: 'evilangel_728_90_adriana_chechik_gangbang', id: 'evilangel_728_90_adriana_chechik_gangbang',
width: 728, width: 728,
@ -116,6 +193,77 @@ const banners = [
]; ];
const campaigns = [ const campaigns = [
{
network: '21sextury',
url: 'https://www.iyalc.com/21sextury/go.php?pr=8&su=1&si=207&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{
network: '21sextury',
banner: '21sextury_300_250_anal',
url: 'https://www.iyalc.com/21sextury/go.php?pr=8&su=1&si=207&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{
network: '21sextury',
banner: '21sextury_770_76_gina_gerson_dp',
url: 'https://www.iyalc.com/21sextury/go.php?pr=8&su=1&si=207&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{
network: '21sextury',
banner: '21sextury_770_76_veronica_leal_dp',
url: 'https://www.iyalc.com/21sextury/go.php?pr=8&su=1&si=207&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{
network: '21sextreme',
banner: '21sextreme_300_250_cum',
url: 'https://www.iyalc.com/21sextreme/go.php?pr=8&su=1&si=208&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{
network: '21naturals',
banner: '21naturals_315_300',
url: 'https://www.iyalc.com/21naturals/go.php?pr=8&su=1&si=209&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{
network: '21naturals',
banner: '21naturals_315_300_1',
url: 'https://www.iyalc.com/21naturals/go.php?pr=8&su=1&si=209&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{
network: '21naturals',
banner: '21naturals_315_300_gina_gerson',
url: 'https://www.iyalc.com/21naturals/go.php?pr=8&su=1&si=209&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{
network: '21naturals',
banner: '21naturals_315_300_ginebra_bellucci',
url: 'https://www.iyalc.com/21naturals/go.php?pr=8&su=1&si=209&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{
network: '21naturals',
banner: '21naturals_315_300_lana_roy_anal',
url: 'https://www.iyalc.com/21naturals/go.php?pr=8&su=1&si=209&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{
network: '21naturals',
banner: '21naturals_770_76_alexis_crystal',
url: 'https://www.iyalc.com/21naturals/go.php?pr=8&su=1&si=209&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{
network: '21naturals',
banner: '21naturals_970_90',
url: 'https://www.iyalc.com/21naturals/go.php?pr=8&su=1&si=209&ad=277470&pa=index&ar=&buffer=',
comment: 'per signup',
},
{ {
network: 'evilangel', network: 'evilangel',
url: 'https://www.iyalc.com/evilangel/go.php?pr=8&su=2&si=128&ad=277470&pa=index&ar=&buffer=', url: 'https://www.iyalc.com/evilangel/go.php?pr=8&su=2&si=128&ad=277470&pa=index&ar=&buffer=',
@ -307,8 +455,6 @@ exports.seed = async knex => Promise.resolve()
tag_id: tagsBySlug[tag].id, tag_id: tagsBySlug[tag].id,
})) || []); })) || []);
console.log(campaigns);
const campaignsWithEntityIdAndAffiliateId = campaigns.map(campaign => ({ const campaignsWithEntityIdAndAffiliateId = campaigns.map(campaign => ({
entity_id: networksBySlug[campaign.network]?.id || channelsBySlug[campaign.channel]?.id, entity_id: networksBySlug[campaign.network]?.id || channelsBySlug[campaign.channel]?.id,
url: campaign.url, url: campaign.url,