Showing avatar on release actor tile. Fixed social URL validation.
This commit is contained in:
parent
61965d480c
commit
af5543190a
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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');
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 = `
|
||||||
|
|
|
@ -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}`);
|
||||||
|
|
Loading…
Reference in New Issue