traxxx/assets/components/actors/actor.vue

639 lines
16 KiB
Vue

<template>
<div
v-if="actor"
class="content actor"
>
<FilterBar :fetch-releases="fetchActor" />
<div class="actor-header">
<h2 class="header-name">
{{ actor.name }}
<span
v-if="actor.gender"
class="header-gender"
:class="{ [actor.gender]: true }"
><Icon :icon="actor.gender" /></span>
</h2>
<li
v-if="actor.aliases.length"
class="bio-item"
>
<dfn class="bio-label">Also known as</dfn>
<span>{{ actor.aliases.join(', ') }}</span>
</li>
<Social
v-if="actor.social && actor.social.length > 0"
:actor="actor"
class="header-social"
/>
</div>
<div class="actor-inner">
<div
class="profile"
:class="{ expanded }"
>
<a
v-if="actor.avatar"
:href="`/media/${actor.avatar.path}`"
target="_blank"
rel="noopener noreferrer"
class="avatar-link"
>
<img
:src="`/media/${actor.avatar.thumbnail}`"
class="avatar"
>
</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"
class="bio-item"
>
<dfn class="bio-label"><Icon icon="cake" />Birthdate</dfn>
<span
v-if="actor.birthdate"
class="birthdate"
>{{ formatDate(actor.birthdate, 'MMMM D, YYYY') }}<span class="age">{{ actor.age }}</span></span>
</li>
<li
v-if="actor.origin"
class="bio-item birth"
>
<dfn class="bio-label"><Icon icon="home2" />Born in</dfn>
<span>
<span
v-if="actor.origin.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 hideable"
>{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
<span
v-if="actor.origin.country"
class="country birthcountry"
>
<img
class="flag"
:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`"
>{{ actor.origin.country.alias || actor.origin.country.name }}
</span>
</span>
</li>
<li
v-if="actor.residence"
class="bio-item residence"
>
<dfn class="bio-label"><Icon icon="location" />Lives in</dfn>
<span>
<span
v-if="actor.residence.city"
class="city hideable"
>{{ actor.residence.city }}</span><span
v-if="actor.residence.state && actor.residence.country && actor.residence.country.alpha2 === 'US'"
class="state hideable"
>{{ actor.residence.city ? `, ${actor.residence.state}` : actor.residence.state }}</span>
<span
v-if="actor.residence.country"
class="country"
>
<img
class="flag"
:src="`/img/flags/${actor.residence.country.alpha2.toLowerCase()}.png`"
>{{ actor.residence.country.alias || actor.residence.country.name }}
</span>
</span>
</li>
<li
v-if="actor.ethnicity"
class="bio-item ethnicity hideable"
>
<dfn class="bio-label"><Icon icon="earth2" />Ethnicity</dfn>
<span>{{ actor.ethnicity }}</span>
</li>
<li
v-if="actor.bust || actor.waist || actor.hip"
title="bust-waist-hip"
class="bio-item"
>
<dfn class="bio-label"><Icon icon="ruler" />Figure</dfn>
<span>
<Icon
v-if="actor.naturalBoobs === false"
v-tooltip="'Boobs enhanced'"
icon="magic-wand"
class="enhanced"
/>{{ actor.bust || '??' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }}
</span>
</li>
<li
v-if="actor.height"
class="bio-item height"
>
<dfn class="bio-label"><Icon icon="height" />Height</dfn>
<span>
<span class="height-metric">{{ actor.height.metric }} cm</span>
<span class="height-imperial">{{ actor.height.imperial }}</span>
</span>
</li>
<li
v-if="actor.weight"
class="bio-item weight hideable"
>
<dfn class="bio-label"><Icon icon="scale" />Weight</dfn>
<span>
<span class="weight-metric">{{ actor.weight.metric }} kg</span>
<span class="weight-imperial">{{ actor.weight.imperial }} lbs</span>
</span>
</li>
<li
v-if="actor.hasTattoos"
class="bio-item tattoos hideable"
>
<dfn class="bio-label"><Icon icon="flower" />Tattoos</dfn>
<span
v-if="actor.tattoos"
v-tooltip="actor.tattoos"
class="bio-value"
>{{ actor.tattoos }}</span>
<span v-else>Yes</span>
</li>
<li
v-if="actor.hasPiercings"
class="bio-item piercings hideable"
>
<dfn class="bio-label"><Icon icon="trophy4" />Piercings</dfn>
<span
v-if="actor.piercings"
v-tooltip="actor.piercings"
class="bio-value"
>{{ actor.piercings }}</span>
<span v-else>Yes</span>
</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>
<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
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
class="photos-container"
>
<Photos :actor="actor" />
<Photos
:actor="actor"
:class="{ expanded }"
class="compact"
/>
</div>
<Releases :releases="actor.releases" />
</div>
</div>
</div>
</template>
<script>
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 });
}
function scrollPhotos(event) {
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
}
async function mounted() {
await this.fetchActor();
if (this.actor) {
this.pageTitle = this.actor.name;
}
}
export default {
components: {
FilterBar,
Photos,
Releases,
Social,
},
data() {
return {
actor: null,
releases: null,
pageTitle: null,
expanded: false,
};
},
mounted,
methods: {
fetchActor,
scrollPhotos,
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.actor-header {
display: flex;
justify-content: space-between;
align-items: center;
color: $highlight-extreme;
background: $profile;
padding: .75rem 1rem;
}
.header-name {
padding: 0;
margin: 0;
display: inline-flex;
justify-content: space-between;
flex-shrink: 0;
}
.header-gender {
display: inline-block;
margin: 0 0 0 .5rem;
transform: translate(0, .1rem);
.icon {
width: 1.25rem;
height: 1.25rem;
}
}
.header-social {
overflow: hidden;
white-space: nowrap;
margin: 0 1rem 0 0;
}
.actor-inner {
height: 100%;
display: flex;
flex-direction: column;
padding: 0;
overflow-x: auto;
}
.profile {
background: $profile;
color: $highlight-extreme;
width: 100%;
height: 18rem;
display: flex;
flex-direction: row;
flex-shrink: 0;
.avatar-link {
font-size: 0;
padding: 0 0 1rem 1rem;
}
.avatar {
height: 100%;
flex-shrink: 0;
margin: 0 .5rem 0 0;
}
}
.bio {
flex-grow: 1;
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
box-sizing: border-box;
overflow: hidden;
}
.bio-header {
width: calc(50% - 2rem);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .5rem .5rem 0;
margin: 0 0 0 1rem;
}
.bio-item {
width: calc(50% - 4rem);
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: .25rem 0 ;
margin: 0 0 .25rem 1rem;
line-height: 1.75;
text-align: right;
font-size: .9rem;
font-weight: 600;
overflow: hidden;
&:not(:last-of-type) {
border-bottom: solid 1px $highlight-hint;
}
}
.bio-label {
color: $highlight;
margin: 0 1rem 0 0;
flex-shrink: 0;
font-style: normal;
font-weight: 400;
.icon {
fill: $highlight;
margin: 0 .5rem 0 0;
}
}
.bio-value {
margin: 0 0 0 2rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.flag {
margin: 0 .25rem 0 0;
}
.bio-name {
display: inline-block;
padding: 0;
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;
}
.age {
font-weight: bold;
padding: 0 0 0 .5rem;
border-left: solid 1px $highlight-weak;
margin: 0 0 0 .5rem;
}
.country {
display: block;
}
.height-imperial,
.weight-imperial {
padding: 0 0 0 .5rem;
border-left: solid 1px $highlight-weak;
margin: 0 0 0 .5rem;
}
.enhanced.icon {
fill: $primary;
padding: 0 .5rem;
}
.ethnicity {
text-transform: capitalize;
}
.scraped {
color: $highlight-weak;
font-size: .8rem;
}
.description {
max-width: 30rem;
max-height: 12rem;
position: relative;
display: block;
flex-grow: 1;
box-sizing: border-box;
margin: 0 2rem 0 0;
line-height: 1.5;
text-overflow: ellipsis;
font-size: .9rem;
overflow: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.actor-content {
display: flex;
flex-grow: 1;
flex-direction: row;
}
.heading {
padding: 0;
margin: 0 0 1rem 0;
}
.photos-container {
min-width: 15rem;
box-sizing: border-box;
border-right: solid 1px $shadow-hint;
padding: 1rem 1.5rem 1rem 1rem;
margin: 0 .5rem 0 0;
}
.photos.compact {
display: none;
}
.releases {
flex-grow: 1;
padding: 1rem;
}
.profile-social {
display: none;
}
.expand,
.collapse-header {
display: none;
}
@media(max-width: $breakpoint4) {
.description {
display: none;
}
}
@media(max-width: $breakpoint3) {
.profile .avatar-link {
display: none;
}
.actor-content {
flex-direction: column;
}
.photos-container {
border: none;
border-bottom: solid 1px $shadow-hint;
margin: 0 0 .5rem 0;
}
.photos {
display: none;
}
.photos.compact {
display: flex;
}
}
@media(max-width: $breakpoint) {
.profile {
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: 100%;
margin: 0;
}
.expand,
.expand-header {
display: flex;
}
.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;
}
}
}
@media(max-width: $breakpoint0) {
.header-social {
display: none;
}
.expanded .profile-social {
display: block;
margin: 1rem 0 0 0;
}
.header-name {
flex-grow: 1;
}
}
</style>