Showing avatar on release actor tile. Fixed social URL validation.
This commit is contained in:
parent
61965d480c
commit
af5543190a
|
|
@ -1,101 +1,101 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="actor"
|
||||
class="actor"
|
||||
>
|
||||
<router-link
|
||||
:to="{ name: 'actor', params: { actorSlug: actor.slug } }"
|
||||
class="link"
|
||||
>
|
||||
<span
|
||||
v-if="actor.network"
|
||||
v-tooltip.top="`${actor.name} (${actor.network.name})`"
|
||||
class="handle"
|
||||
>
|
||||
<img
|
||||
:src="`/img/logos/${actor.network.slug}/favicon.png`"
|
||||
class="favicon"
|
||||
>
|
||||
<span class="name">{{ actor.name }}</span>
|
||||
</span>
|
||||
<div
|
||||
v-if="actor"
|
||||
class="actor"
|
||||
>
|
||||
<router-link
|
||||
:to="{ name: 'actor', params: { actorSlug: actor.slug } }"
|
||||
class="link"
|
||||
>
|
||||
<span
|
||||
v-if="actor.network"
|
||||
v-tooltip.top="`${actor.name} (${actor.network.name})`"
|
||||
class="handle"
|
||||
>
|
||||
<img
|
||||
:src="`/img/logos/${actor.network.slug}/favicon.png`"
|
||||
class="favicon"
|
||||
>
|
||||
<span class="name">{{ actor.name }}</span>
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-else
|
||||
v-tooltip.top="actor.name"
|
||||
class="handle"
|
||||
>
|
||||
<span class="name">{{ actor.name }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
v-tooltip.top="actor.name"
|
||||
class="handle"
|
||||
>
|
||||
<span class="name">{{ actor.name }}</span>
|
||||
</span>
|
||||
|
||||
<div class="avatar-container">
|
||||
<img
|
||||
v-if="actor.avatar"
|
||||
:src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
|
||||
class="avatar"
|
||||
>
|
||||
<div class="avatar-container">
|
||||
<img
|
||||
v-if="actor.avatar"
|
||||
:src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
|
||||
class="avatar"
|
||||
>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="avatar"
|
||||
><img
|
||||
:src="`/img/avatar_${actor.gender || 'female'}.png`"
|
||||
class="avatar-fallback"
|
||||
></span>
|
||||
<span
|
||||
v-else
|
||||
class="avatar"
|
||||
><img
|
||||
:src="`/img/avatar_${actor.gender || 'female'}.png`"
|
||||
class="avatar-fallback"
|
||||
></span>
|
||||
|
||||
<span
|
||||
class="details"
|
||||
>
|
||||
<span class="age">
|
||||
<span
|
||||
v-if="actor.age"
|
||||
v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
|
||||
class="age-now"
|
||||
>{{ actor.age }}</span>
|
||||
<span
|
||||
class="details"
|
||||
>
|
||||
<span class="age">
|
||||
<span
|
||||
v-if="actor.age"
|
||||
v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
|
||||
class="age-now"
|
||||
>{{ actor.age }}</span>
|
||||
|
||||
<span
|
||||
v-if="actor.ageThen && actor.ageThen < actor.age"
|
||||
v-tooltip="`${actor.ageThen} years old on release date`"
|
||||
class="age-then"
|
||||
>{{ actor.ageThen }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-if="actor.ageThen && actor.ageThen < actor.age"
|
||||
v-tooltip="`${actor.ageThen} years old on release date`"
|
||||
class="age-then"
|
||||
>{{ actor.ageThen }}</span>
|
||||
</span>
|
||||
|
||||
<Gender :gender="actor.gender" />
|
||||
<Gender :gender="actor.gender" />
|
||||
|
||||
<span
|
||||
v-if="actor.origin"
|
||||
v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
|
||||
class="country"
|
||||
>
|
||||
{{ actor.origin.country.alpha2 }}
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
v-if="actor.origin"
|
||||
v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
|
||||
class="country"
|
||||
>
|
||||
{{ actor.origin.country.alpha2 }}
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`"
|
||||
>
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="country"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<span
|
||||
v-else
|
||||
class="country"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Gender from '../actors/gender.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Gender,
|
||||
},
|
||||
props: {
|
||||
actor: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Gender,
|
||||
},
|
||||
props: {
|
||||
actor: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@ function curateActor(actor, release) {
|
|||
},
|
||||
};
|
||||
|
||||
if (actor.avatar) curatedActor.avatar = actor.avatar.media;
|
||||
|
||||
if (release && release.date && curatedActor.birthdate) {
|
||||
curatedActor.ageThen = dayjs(release.date).diff(actor.birthdate, 'year');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,12 @@ const actorFields = `
|
|||
birthdate: dateOfBirth
|
||||
age
|
||||
gender
|
||||
avatar: avatarMedia {
|
||||
id
|
||||
path
|
||||
thumbnail
|
||||
lazy
|
||||
}
|
||||
network {
|
||||
id
|
||||
name
|
||||
|
|
@ -47,15 +53,6 @@ const actorFields = `
|
|||
name
|
||||
alias
|
||||
}
|
||||
actorsProfiles {
|
||||
actorsAvatarByProfileId {
|
||||
media {
|
||||
path
|
||||
thumbnail
|
||||
copyright
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const releaseActorsFragment = `
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ async function curateProfile(profile) {
|
|||
curatedProfile.social = Array.isArray(profile.social)
|
||||
? profile.social.map((social) => {
|
||||
try {
|
||||
const { href } = new URL();
|
||||
const { href } = new URL(social);
|
||||
return href;
|
||||
} catch (error) {
|
||||
logger.warn(`Profile scraper for '${profile.site.name}' returned invalid social link: ${social}`);
|
||||
|
|
|
|||
Loading…
Reference in New Issue