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

View File

@ -7,43 +7,79 @@
>
<img
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"
>
<img
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"
>
</a>
</template>
<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() {
const bannerCampaigns = this.entity.campaigns
.concat(this.entity.children?.flatMap(child => child.campaigns))
.concat(this.entity.parent?.campaigns)
.filter(campaignX => campaignX.banner?.ratio > 3);
.filter(campaignX => campaignX && this.ratioFilter(campaignX.banner));
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;
}
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)];
if (banner?.campaigns.length > 0) {
return {
const randomCampaign = {
...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)],
banner,
};
this.$emit('campaign', randomCampaign);
return randomCampaign;
}
this.$emit('campaign', null);
return null;
}
@ -56,6 +92,7 @@ function campaign() {
return this.tagCampaign();
}
this.$emit('campaign', null); // allow parent to toggle campaigns depending on availability
return null;
}
@ -69,12 +106,22 @@ export default {
type: Object,
default: null,
},
minRatio: {
type: Number,
default: null,
},
maxRatio: {
type: Number,
default: null,
},
},
emits: ['campaign'],
computed: {
campaign,
},
methods: {
entityCampaign,
ratioFilter,
tagCampaign,
},
};
@ -90,6 +137,7 @@ export default {
}
.campaign-banner {
height: auto;
max-height: 100%;
max-width: 100%;
}

View File

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

View File

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

View File

@ -29,6 +29,7 @@
:tag="tag"
:class="{ expanded }"
@load="scroll.loaded"
@campaign="campaign => showBannerCampaign = !campaign"
/>
</Scroll>
@ -43,12 +44,19 @@
:items="[tag.poster, ...tag.photos]"
:title="tag.name"
:local="true"
:tag="tag"
class="portrait"
@close="$router.replace({ hash: undefined })"
/>
<div class="campaign-container">
<Campaign :tag="tag" />
<div
v-if="showBannerCampaign"
class="campaign-container"
>
<Campaign
:tag="tag"
:min-ratio="3"
/>
</div>
<FilterBar
@ -99,6 +107,10 @@ async function fetchReleases(scroll = true) {
this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
if (this.hasMedia) {
this.showBannerCampaign = true;
}
if (scroll && this.$refs.filter) {
this.$refs.filter.$el.scrollIntoView();
}
@ -139,6 +151,7 @@ export default {
pageTitle: null,
hasMedia: false,
expanded: false,
showBannerCampaign: false, // only show if photo campaign is not available
};
},
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);
$$ 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);
$$ 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 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',
width: 728,
@ -116,6 +193,77 @@ const banners = [
];
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',
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,
})) || []);
console.log(campaigns);
const campaignsWithEntityIdAndAffiliateId = campaigns.map(campaign => ({
entity_id: networksBySlug[campaign.network]?.id || channelsBySlug[campaign.channel]?.id,
url: campaign.url,