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

assets/components/actors/actor.vue

@@ -8,11 +8,10 @@
         <div class="actor-header">
             <h2 class="header-name">
                 {{ actor.name }}
-                <span
+                <Gender
-                    v-if="actor.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;
 }

assets/components/actors/gender.vue

@@ -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>

assets/components/tile/actor.vue

@@ -5,6 +5,8 @@
     >
         <a
             :href="`/actor/${actor.slug}`"
+            target="_blank"
+            rel="noopener noreferrer"
             class="link"
         >
             <span
@@ -12,6 +14,7 @@
                 class="name"
             >{{ actor.name }}</span>
 
+            <div class="avatar-container">
                 <img
                     v-if="actor.avatar"
                     :src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
@@ -29,11 +32,11 @@
                 <span
                     class="details"
                 >
-                <span>
+                    <span class="age">
                         <span
                             v-if="actor.age"
                             v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
-                        class="age"
+                            class="age-now"
                         >{{ actor.age }}</span>
 
                         <span
@@ -42,6 +45,9 @@
                             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}`"
@@ -53,13 +59,24 @@
                             :src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`"
                         >
                     </span>
+
+                    <span
+                        v-else
+                        class="country"
+                    />
                 </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 {
+.avatar-container {
-    display: block;
+    position: relative;
-    padding: .5rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: bold;
 }
 
 .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>

assets/js/actors/actions.js

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

src/scrapers/pornhub.js

@@ -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;