Added actor expand button to profile.

assets/components/actors/actor.vue

@@ -23,34 +23,18 @@
                 <span>{{ actor.aliases.join(', ') }}</span>
             </li>
 
-            <div
+            <Social
                 v-if="actor.social && actor.social.length > 0"
-                class="social header-social"
+                :actor="actor"
-            >
+                class="header-social"
-                <a
-                    v-for="social in actor.social"
-                    :key="`social-${social.id}`"
-                    v-tooltip.bottom="social.url"
-                    :href="social.url"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="social-link"
-                >
-                    <Icon
-                        v-if="social.platform"
-                        :icon="social.platform"
             />
-
-                    <Icon
-                        v-else
-                        icon="link"
-                    />
-                </a>
-            </div>
         </div>
 
         <div class="actor-inner">
-            <div class="profile">
+            <div
+                class="profile"
+                :class="{ expanded }"
+            >
                 <a
                     v-if="actor.avatar"
                     :href="`/media/${actor.avatar.path}`"
@@ -64,6 +48,12 @@
                     >
                 </a>
 
+                <span
+                    v-show="expanded"
+                    class="expand collapse-header noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
+
                 <ul class="bio nolist">
                     <li
                         v-if="actor.birthdate"
@@ -86,10 +76,10 @@
                         <span>
                             <span
                                 v-if="actor.origin.city"
-                                class="city"
+                                class="city hideable"
                             >{{ actor.origin.city }}</span><span
                                 v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))"
-                                class="state"
+                                class="state hideable"
                             >{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
 
                             <span
@@ -113,10 +103,10 @@
                         <span>
                             <span
                                 v-if="actor.residence.city"
-                                class="city"
+                                class="city hideable"
                             >{{ actor.residence.city }}</span><span
                                 v-if="actor.residence.state && actor.residence.country && actor.residence.country.alpha2 === 'US'"
-                                class="state"
+                                class="state hideable"
                             >{{ actor.residence.city ? `, ${actor.residence.state}` : actor.residence.state }}</span>
 
                             <span
@@ -133,7 +123,7 @@
 
                     <li
                         v-if="actor.ethnicity"
-                        class="bio-item ethnicity"
+                        class="bio-item ethnicity hideable"
                     >
                         <dfn class="bio-label"><Icon icon="earth2" />Ethnicity</dfn>
                         <span>{{ actor.ethnicity }}</span>
@@ -168,7 +158,7 @@
 
                     <li
                         v-if="actor.weight"
-                        class="bio-item weight"
+                        class="bio-item weight hideable"
                     >
                         <dfn class="bio-label"><Icon icon="scale" />Weight</dfn>
 
@@ -180,7 +170,7 @@
 
                     <li
                         v-if="actor.hasTattoos"
-                        class="bio-item tattoos"
+                        class="bio-item tattoos hideable"
                     >
                         <dfn class="bio-label"><Icon icon="flower" />Tattoos</dfn>
 
@@ -194,7 +184,7 @@
 
                     <li
                         v-if="actor.hasPiercings"
-                        class="bio-item piercings"
+                        class="bio-item piercings hideable"
                     >
                         <dfn class="bio-label"><Icon icon="trophy4" />Piercings</dfn>
 
@@ -206,15 +196,32 @@
                         <span v-else>Yes</span>
                     </li>
 
-                    <li class="bio-item scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li>
+                    <li class="bio-item scraped hideable">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li>
                 </ul>
 
+                <span
+                    v-show="!expanded"
+                    class="expand expand-header collapse-header noselect"
+                    @click="expanded = true"
+                ><Icon icon="arrow-down3" /></span>
+
                 <p
                     v-if="actor.description"
                     class="description"
                 >{{ actor.description }}</p>
-            </div>
 
+                <Social
+                    v-if="actor.social && actor.social.length > 0"
+                    :actor="actor"
+                    class="profile-social"
+                />
+
+                <span
+                    v-show="expanded"
+                    class="expand expand-header collapse-header noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
+            </div>
 
             <div class="actor-content">
                 <div
@@ -225,11 +232,23 @@
 
                     <Photos
                         :actor="actor"
+                        :class="{ expanded }"
                         class="compact"
-                        @wheel.native.prevent="scrollPhotos"
                     />
                 </div>
 
+                <span
+                    v-show="!expanded"
+                    class="expand noselect"
+                    @click="expanded = true"
+                ><Icon icon="arrow-down3" /></span>
+
+                <span
+                    v-show="expanded"
+                    class="expand noselect"
+                    @click="expanded = false"
+                ><Icon icon="arrow-up3" /></span>
+
                 <Releases :releases="actor.releases" />
             </div>
         </div>
@@ -240,6 +259,7 @@
 import Photos from './photos.vue';
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
+import Social from './social.vue';
 
 async function fetchActor() {
     this.actor = await this.$store.dispatch('fetchActors', { actorSlug: this.$route.params.actorSlug });
@@ -262,6 +282,7 @@ export default {
         FilterBar,
         Photos,
         Releases,
+        Social,
     },
     data() {
         return {
@@ -350,7 +371,6 @@ export default {
     height: 100%;
     display: flex;
     flex-direction: column;
-    flex-shrink: 0;
     flex-wrap: wrap;
     box-sizing: border-box;
     overflow: hidden;
@@ -397,6 +417,7 @@ export default {
 }
 
 .bio-value {
+    margin: 0 0 0 2rem;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -469,6 +490,10 @@ export default {
     padding: 0 .5rem;
 }
 
+.ethnicity {
+    text-transform: capitalize;
+}
+
 .scraped {
     color: $highlight-weak;
     font-size: .8rem;
@@ -493,26 +518,6 @@ export default {
     }
 }
 
-.social {
-    display: block;
-}
-
-.social-link {
-    display: inline-block;
-    padding: 0 0 0 1rem;
-
-    .icon {
-        color: $highlight;
-        fill: $highlight;
-        width: 1.5rem;
-        height: 1.5rem;
-    }
-
-    &:hover .icon {
-        fill: $primary;
-    }
-}
-
 .actor-content {
     display: flex;
     flex-grow: 1;
@@ -541,6 +546,14 @@ export default {
     padding: 1rem;
 }
 
+.profile-social {
+    display: none;
+}
+
+.collapse-header {
+    display: none;
+}
+
 @media(max-width: $breakpoint4) {
     .description {
         display: none;
@@ -576,28 +589,45 @@ export default {
         height: auto;
         flex-direction: column;
         padding: 0 0 .5rem 0;
+
+        &:not(.expanded) .hideable {
+            display: none;
+        }
     }
 
     .bio {
         width: 100%;
+        height: auto;
         padding: 0 1rem;
         margin: 0;
     }
 
     .bio-item {
-        width: auto;
+        width: 100%;
         margin: 0;
     }
 
-    .city,
+    .expand-header {
-    .state,
+        display: block;
-    .ethnicity,
+    }
-    .residence,
+
-    .weight,
+    .expanded .description {
-    .tattoos,
+        display: block;
-    .piercings,
+        max-width: 100%;
-    .scraped {
+        max-height: none;
-        display: none;
+        margin: 0;
+        padding: 0 1rem;
+        overflow: bisible;
+    }
+
+    .expanded {
+        .collapse-header {
+            display: block;
+        }
+
+        .bio-value {
+            white-space: normal;
+        }
     }
 }
 
@@ -606,6 +636,11 @@ export default {
         display: none;
     }
 
+    .expanded .profile-social {
+        display: block;
+        margin: 1rem 0 0 0;
+    }
+
     .header-name {
         flex-grow: 1;
     }

assets/components/actors/actors.vue

@@ -12,6 +12,7 @@
 import Actor from '../tile/actor.vue';
 
 async function mounted() {
+    this.pageTitle = 'Actors';
     this.actors = await this.$store.dispatch('fetchActors', { limit: 1000 });
 }
 
@@ -22,6 +23,7 @@ export default {
     data() {
         return {
             actors: [],
+            pageTitle: null,
         };
     },
     mounted,

assets/components/actors/social.vue

@@ -0,0 +1,61 @@
+<template>
+    <div
+        v-if="actor"
+        class="social"
+    >
+        <a
+            v-for="social in actor.social"
+            :key="`social-${social.id}`"
+            v-tooltip.bottom="social.url"
+            :href="social.url"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="social-link"
+        >
+            <Icon
+                v-if="social.platform"
+                :icon="social.platform"
+            />
+
+            <Icon
+                v-else
+                icon="link"
+            />
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        actor: {
+            type: Object,
+            default: null,
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.social {
+    display: block;
+}
+
+.social-link {
+    display: inline-block;
+    padding: 0 0 0 1rem;
+
+    .icon {
+        color: $highlight;
+        fill: $highlight;
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+
+    &:hover .icon {
+        fill: $primary;
+    }
+}
+</style>

assets/components/networks/network.vue

@@ -81,8 +81,8 @@
 
                     <Sites
                         :sites="sites"
-                        class="compact"
                         :class="{ expanded }"
+                        class="compact"
                     />
 
                     <span
@@ -234,63 +234,16 @@ export default {
     }
 }
 
-.expand {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: .5rem 0;
-    font-weight: bold;
-    font-size: .9rem;
-    cursor: pointer;
-
-    .icon {
-        fill: $shadow;
-        margin: 0 .5rem;
-    }
-
-    &:hover .icon {
-        fill: $shadow-strong;
-    }
-}
-
-.expand-sidebar:hover {
-    background: $shadow-hint;
-}
-
-.expand-header {
-    display: none;
-
-    &:hover {
-        background: $shadow-hint;
-    }
-}
-
-.collapse-header {
-    width: 100%;
-    display: none;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    background: $profile;
-
-    .icon {
-        width: 100%;
-        fill: $highlight;
-        padding: .5rem 0;
-    }
-
-    &:hover .icon {
-        background: $highlight-hint;
-        fill: $text-contrast;
-    }
-}
-
 .sites.compact {
     display: none;
     background: $profile;
     grid-row: 1;
 }
 
+.collapse-header {
+    display: none;
+}
+
 @media(max-width: $breakpoint3) {
     .header,
     .header.hideable {

assets/css/style.scss

@@ -37,3 +37,56 @@ body {
         fill: $primary;
     }
 }
+
+.expand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: .5rem 0;
+    font-weight: bold;
+    font-size: .9rem;
+    cursor: pointer;
+
+    .icon {
+        fill: $shadow;
+    }
+
+    &:hover {
+        background: $shadow-hint;
+
+        .icon {
+            fill: $shadow-strong;
+        }
+    }
+}
+
+.expand-sidebar:hover {
+    background: $shadow-hint;
+}
+
+.expand-header {
+    display: none;
+
+    &:hover {
+        background: $shadow-hint;
+    }
+}
+
+.collapse-header {
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    background: $profile;
+
+    .icon {
+        width: 100%;
+        fill: $highlight;
+        padding: .5rem 0;
+    }
+
+    &:hover .icon {
+        background: $highlight-hint;
+        fill: $text-contrast;
+    }
+}

src/actors.js

@@ -177,11 +177,6 @@ function curateSocialEntry(url, actorId) {
             pattern: 'http(s)\\://(*)modelhub.com/:username(/)(?*)',
             format: username => `https://www.modelhub.com/${username}`,
         },
-        {
-            label: 'imdb',
-            pattern: 'http(s)\\://(*)imdb.com/name/:userId(/)(?*)',
-            format: userId => `https://www.imdb.com/name/${userId}/`,
-        },
     ];
 
     const match = platforms.reduce((acc, platform) => {
@@ -398,7 +393,7 @@ async function scrapeActors(actorNames) {
                 }, newActorEntry.name);
             }
         } catch (error) {
-            logger.warn(actorName, error);
+            logger.warn(`${actorName}: ${error}`);
         }
     }, {
         concurrency: 3,

src/scrapers/xempire.js

@@ -98,10 +98,16 @@ async function scrapeScene(html, url, site) {
         duration,
         poster,
         photos,
-        trailer: {
+        trailer: [
+            {
+                src: trailer.replace('hd', '1080p'),
+                quality: 1080,
+            },
+            {
                 src: trailer,
                 quality: parseInt(videoData.sizeOnLoad, 10),
             },
+        ],
         tags,
         rating: {
             stars,