boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added gender indicator to actor tiles. Fixed PornHub scraper fetching default avatars.

This commit is contained in:
ThePendulum 2020-01-25 01:26:13 +01:00
parent 4d53b84587
commit bceded3ebd
5 changed files with 141 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
assets/components/actors/actor.vue
View File

@ -8,11 +8,10 @@
<div class="actor-header">
<h2 class="header-name">
{{ actor.name }}
<span
v-if="actor.gender"
<Gender
:gender="actor.gender"
class="header-gender"
:class="{ [actor.gender]: true }"
><Icon :icon="actor.gender" /></span>
/>
</h2>
<li
@ -33,7 +32,7 @@
<div class="actor-inner">
<div
class="profile"
:class="{ expanded }"
:class="{ expanded, 'with-avatar': !!actor.avatar }"
>
<a
v-if="actor.avatar"
@ -247,6 +246,7 @@
import Photos from './photos.vue';
import FilterBar from '../header/filter-bar.vue';
import Releases from '../releases/releases.vue';
import Gender from './gender.vue';
import Social from './social.vue';
async function fetchActor() {
@ -270,6 +270,7 @@ export default {
FilterBar,
Photos,
Releases,
Gender,
Social,
},
data() {
@ -325,6 +326,13 @@ export default {
margin: 0 1rem 0 0;
}
.header-gender {
.icon {
width: 1.25rem;
height: 1.25rem;
}
}
.actor-inner {
height: 100%;
display: flex;
@ -342,6 +350,10 @@ export default {
flex-direction: row;
flex-shrink: 0;
&.with-avatar {
height: 18rem; /* profile overlaps avatar in chrome */
}
.avatar-link {
font-size: 0;
padding: 0 0 1rem 1rem;
@ -421,36 +433,6 @@ export default {
margin: 0;
}
.bio-gender {
display: inline-block;
font-weight: bold;
text-transform: capitalize;
font-weight: normal;
.icon {
width: 1.25rem;
height: 1.25rem;
}
}
.header-gender,
.bio-gender {
&.female .icon {
fill: $female;
}
&.male .icon {
fill: $male;
}
&.transsexual .icon {
fill: $text-contrast;
filter: drop-shadow(1px 0 0 $female) drop-shadow(-1px 0 0 $female) drop-shadow(0 1px 0 $female) drop-shadow(0 -1px 0 $female)
drop-shadow(1px 0 0 $male) drop-shadow(-1px 0 0 $male) drop-shadow(0 1px 0 $male) drop-shadow(0 -1px 0 $male);
}
}
.birthdate {
display: block;
}

38
assets/components/actors/gender.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<span
v-if="gender"
class="gender"
:class="{ [gender]: true }"
><Icon :icon="gender" /></span>
</template>
<script>
export default {
props: {
gender: {
type: String,
default: null,
},
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.gender {
&.female .icon {
fill: $female;
}
&.male .icon {
fill: $male;
}
&.transsexual .icon {
fill: $text-contrast;
filter: drop-shadow(1px 0 0 $female) drop-shadow(-1px 0 0 $female) drop-shadow(0 1px 0 $female) drop-shadow(0 -1px 0 $female)
drop-shadow(1px 0 0 $male) drop-shadow(-1px 0 0 $male) drop-shadow(0 1px 0 $male) drop-shadow(0 -1px 0 $male);
}
}
</style>

135
assets/components/tile/actor.vue
View File

@ -5,6 +5,8 @@
>
<a
:href="`/actor/${actor.slug}`"
target="_blank"
rel="noopener noreferrer"
class="link"
>
<span
@ -12,54 +14,69 @@
class="name"
>{{ actor.name }}</span>
<img
v-if="actor.avatar"
:src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
class="avatar"
>
<span
v-else
class="avatar"
><img
:src="`/img/avatar_${actor.gender || 'female'}.png`"
class="avatar-fallback"
></span>
<span
class="details"
>
<span>
<span
v-if="actor.age"
v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
class="age"
>{{ actor.age }}</span>
<span
v-if="actor.ageThen && actor.ageThen < actor.age"
v-tooltip="`${actor.ageThen} years old on release date`"
class="age-then"
>{{ actor.ageThen }}</span>
</span>
<span
v-if="actor.origin"
v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
class="country"
<div class="avatar-container">
<img
v-if="actor.avatar"
:src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
class="avatar"
>
{{ actor.origin.country.alpha2 }}
<img
class="flag"
:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`"
<span
v-else
class="avatar"
><img
:src="`/img/avatar_${actor.gender || 'female'}.png`"
class="avatar-fallback"
></span>
<span
class="details"
>
<span class="age">
<span
v-if="actor.age"
v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
class="age-now"
>{{ actor.age }}</span>
<span
v-if="actor.ageThen && actor.ageThen < actor.age"
v-tooltip="`${actor.ageThen} years old on release date`"
class="age-then"
>{{ actor.ageThen }}</span>
</span>
<Gender :gender="actor.gender" />
<span
v-if="actor.origin"
v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
class="country"
>
{{ actor.origin.country.alpha2 }}
<img
class="flag"
:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`"
>
</span>
<span
v-else
class="country"
/>
</span>
</span>
</div>
</a>
</div>
</template>
<script>
import Gender from '../actors/gender.vue';
export default {
components: {
Gender,
},
props: {
actor: {
type: Object,
@ -77,33 +94,26 @@ export default {
background: $background;
display: inline-block;
margin: 0 .5rem .5rem 0;
position: relative;
box-shadow: 0 0 3px $shadow-weak;
}
.link {
color: $link;
color: $text;
text-decoration: none;
text-align: center;
&:hover {
color: $primary;
}
}
.name {
display: block;
padding: .5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
.avatar-container {
position: relative;
}
.avatar {
color: $shadow-weak;
background: $shadow-hint;
height: 12rem;
height: 13rem;
width: 100%;
display: flex;
align-items: center;
@ -125,7 +135,6 @@ export default {
height: 1.75rem;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: .5rem;
position: absolute;
@ -134,7 +143,31 @@ export default {
font-weight: bold;
}
.age,
.country,
.gender {
flex: 1;
}
.gender {
text-align: center;
}
.country {
text-align: right;
}
.age-then {
color: $highlight;
}
.name {
display: block;
padding: .5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
font-weight: bold;
}
</style>

1
assets/js/actors/actions.js
View File

@ -173,6 +173,7 @@ function initActorActions(store, _router) {
slug
age
birthdate
gender
avatar: actorsAvatarByActorId {
media {
thumbnail

2
src/scrapers/pornhub.js
View File

@ -45,7 +45,7 @@ async function scrapeProfile(html, _url, actorName) {
if (bio.Piercings) profile.hasPiercings = bio.Piercings === 'Yes';
if (bio.Tattoos) profile.hasTattoos = bio.Tattoos === 'Yes';
if (avatarEl) profile.avatar = avatarEl.src;
if (avatarEl && !/default\//.test(avatarEl.src)) profile.avatar = avatarEl.src;
profile.social = Array.from(document.querySelectorAll('.socialList a'), el => el.href).filter(link => link !== 'https://www.twitter.com/'); // PH links to Twitter itself for some reason
return profile;