DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 36 Pull Requests 1 Releases Wiki Activity

Added actor expand button to profile.

This commit is contained in:
ThePendulum 2020-01-24 23:36:06 +01:00
parent 4dbb961059
commit c93116dee2
7 changed files with 233 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,34 +23,18 @@
<span>{{ actor.aliases.join(', ') }}</span>
</li>
<div
<Social
v-if="actor.social && actor.social.length > 0"
class="social 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>
:actor="actor"
class="header-social"
/>
</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,
.state,
.ethnicity,
.residence,
.weight,
.tattoos,
.piercings,
.scraped {
display: none;
.expand-header {
display: block;
}
.expanded .description {
display: block;
max-width: 100%;
max-height: 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;
}

2
assets/components/actors/actors.vue
View File

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

61
assets/components/actors/social.vue Normal file
View File

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

57
assets/components/networks/network.vue
View File

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

53
assets/css/style.scss
View File

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

7
src/actors.js
View File

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

14
src/scrapers/xempire.js
View File

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