Showing avatar on release actor tile. Fixed social URL validation.

This commit is contained in:
ThePendulum 2020-05-17 05:24:46 +02:00
parent 61965d480c
commit af5543190a
4 changed files with 90 additions and 95 deletions

View File

@ -1,101 +1,101 @@
<template> <template>
<div <div
v-if="actor" v-if="actor"
class="actor" class="actor"
> >
<router-link <router-link
:to="{ name: 'actor', params: { actorSlug: actor.slug } }" :to="{ name: 'actor', params: { actorSlug: actor.slug } }"
class="link" class="link"
> >
<span <span
v-if="actor.network" v-if="actor.network"
v-tooltip.top="`${actor.name} (${actor.network.name})`" v-tooltip.top="`${actor.name} (${actor.network.name})`"
class="handle" class="handle"
> >
<img <img
:src="`/img/logos/${actor.network.slug}/favicon.png`" :src="`/img/logos/${actor.network.slug}/favicon.png`"
class="favicon" class="favicon"
> >
<span class="name">{{ actor.name }}</span> <span class="name">{{ actor.name }}</span>
</span> </span>
<span <span
v-else v-else
v-tooltip.top="actor.name" v-tooltip.top="actor.name"
class="handle" class="handle"
> >
<span class="name">{{ actor.name }}</span> <span class="name">{{ actor.name }}</span>
</span> </span>
<div class="avatar-container"> <div class="avatar-container">
<img <img
v-if="actor.avatar" v-if="actor.avatar"
:src="`/media/${actor.avatar.thumbnail || actor.avatar}`" :src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
class="avatar" class="avatar"
> >
<span <span
v-else v-else
class="avatar" class="avatar"
><img ><img
:src="`/img/avatar_${actor.gender || 'female'}.png`" :src="`/img/avatar_${actor.gender || 'female'}.png`"
class="avatar-fallback" class="avatar-fallback"
></span> ></span>
<span <span
class="details" class="details"
> >
<span class="age"> <span class="age">
<span <span
v-if="actor.age" v-if="actor.age"
v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`" v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
class="age-now" class="age-now"
>{{ actor.age }}</span> >{{ actor.age }}</span>
<span <span
v-if="actor.ageThen && actor.ageThen < actor.age" v-if="actor.ageThen && actor.ageThen < actor.age"
v-tooltip="`${actor.ageThen} years old on release date`" v-tooltip="`${actor.ageThen} years old on release date`"
class="age-then" class="age-then"
>{{ actor.ageThen }}</span> >{{ actor.ageThen }}</span>
</span> </span>
<Gender :gender="actor.gender" /> <Gender :gender="actor.gender" />
<span <span
v-if="actor.origin" v-if="actor.origin"
v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`" v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
class="country" class="country"
> >
{{ actor.origin.country.alpha2 }} {{ actor.origin.country.alpha2 }}
<img <img
class="flag" class="flag"
:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`" :src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`"
> >
</span> </span>
<span <span
v-else v-else
class="country" class="country"
/> />
</span> </span>
</div> </div>
</router-link> </router-link>
</div> </div>
</template> </template>
<script> <script>
import Gender from '../actors/gender.vue'; import Gender from '../actors/gender.vue';
export default { export default {
components: { components: {
Gender, Gender,
}, },
props: { props: {
actor: { actor: {
type: Object, type: Object,
default: null, default: null,
}, },
}, },
}; };
</script> </script>

View File

@ -8,8 +8,6 @@ function curateActor(actor, release) {
}, },
}; };
if (actor.avatar) curatedActor.avatar = actor.avatar.media;
if (release && release.date && curatedActor.birthdate) { if (release && release.date && curatedActor.birthdate) {
curatedActor.ageThen = dayjs(release.date).diff(actor.birthdate, 'year'); curatedActor.ageThen = dayjs(release.date).diff(actor.birthdate, 'year');
} }

View File

@ -37,6 +37,12 @@ const actorFields = `
birthdate: dateOfBirth birthdate: dateOfBirth
age age
gender gender
avatar: avatarMedia {
id
path
thumbnail
lazy
}
network { network {
id id
name name
@ -47,15 +53,6 @@ const actorFields = `
name name
alias alias
} }
actorsProfiles {
actorsAvatarByProfileId {
media {
path
thumbnail
copyright
}
}
}
`; `;
const releaseActorsFragment = ` const releaseActorsFragment = `

View File

@ -196,7 +196,7 @@ async function curateProfile(profile) {
curatedProfile.social = Array.isArray(profile.social) curatedProfile.social = Array.isArray(profile.social)
? profile.social.map((social) => { ? profile.social.map((social) => {
try { try {
const { href } = new URL(); const { href } = new URL(social);
return href; return href;
} catch (error) { } catch (error) {
logger.warn(`Profile scraper for '${profile.site.name}' returned invalid social link: ${social}`); logger.warn(`Profile scraper for '${profile.site.name}' returned invalid social link: ${social}`);