Fixed default actor avatar allocation. Fixed lazy loading in actor photos component.

assets/components/actors/photos.vue

@@ -1,6 +1,5 @@
 <template>
 	<div
-		v-lazy-container
 		class="photos"
 		:class="{
 			avatar: !!actor.avatar,
@@ -8,7 +7,7 @@
 		}"
 	>
 		<a
-			v-show="actor.avatar"
+			v-if="actor.avatar"
 			:href="`/media/${actor.avatar.path}`"
 			target="_blank"
 			rel="noopener noreferrer"

assets/components/search/search.vue

@@ -12,7 +12,6 @@
 
 		<div
 			v-if="!loading && actors.length > 0"
-			v-lazy-container="{ selector: '.lazy' }"
 			class="tiles"
 		>
 			<Actor

assets/js/actors/actions.js

@@ -12,8 +12,8 @@ function initActorActions(store, router) {
 		range = 'latest',
 	}) {
 		const { before, after, orderBy } = getDateRange(range);
-		const includedTags = router.currentRoute.query.tags ? router.currentRoute.query.tags.split(',') : [];
+		const includedTags = router.currentRoute.value.query.tags ? router.currentRoute.value.query.tags.split(',') : [];
-		const mode = router.currentRoute.query.mode || 'all';
+		const mode = router.currentRoute.value.query.mode || 'all';
 
 		const { actor } = await graphql(`
             query Actor(

assets/js/fragments.js

@@ -324,8 +324,8 @@ const releaseFragment = `
 `;
 
 function getIncludedEntities(router) {
-	const includedChannels = router.currentRoute.query.channels ? router.currentRoute.query.channels.split(',') : [];
+	const includedChannels = router.currentRoute.value.query.channels ? router.currentRoute.value.query.channels.split(',') : [];
-	const includedNetworks = router.currentRoute.query.networks ? router.currentRoute.query.networks.split(',') : [];
+	const includedNetworks = router.currentRoute.value.query.networks ? router.currentRoute.value.query.networks.split(',') : [];
 
 	if (includedChannels.length === 0 && includedNetworks.length === 0) {
 		return [];
@@ -365,7 +365,7 @@ function getIncludedEntities(router) {
 }
 
 function getIncludedActors(router) {
-	const includedActors = router.currentRoute.query.actors ? router.currentRoute.query.actors.split(',') : [];
+	const includedActors = router.currentRoute.value.query.actors ? router.currentRoute.value.query.actors.split(',') : [];
 
 	if (includedActors.length === 0) {
 		return [];

assets/js/main.js

@@ -1,4 +1,4 @@
-import { createApp, reactive } from 'vue';
+import { createApp } from 'vue';
 import dayjs from 'dayjs';
 import mitt from 'mitt';
 
@@ -17,7 +17,7 @@ import Footer from '../components/footer/footer.vue';
 import Tooltip from '../components/tooltip/tooltip.vue';
 
 async function init() {
-	const store = initStore(reactive(router));
+	const store = initStore(router);
 	const app = createApp(Container);
 	const events = mitt();
 

src/actors.js

@@ -431,7 +431,7 @@ async function curateProfile(profile, actor) {
 
 async function interpolateProfiles(actorIds) {
 	const profiles = await knex('actors_profiles')
-		.select(['actors_profiles.*', 'media.width as avatar_width', 'media.height as avatar_height', 'media.size as avatar_size'])
+		.select('actors_profiles.*', knex.raw('row_to_json(media) as avatar'))
 		.whereIn('actor_id', actorIds)
 		.leftJoin('media', 'actors_profiles.avatar_media_id', 'media.id');
 
@@ -467,13 +467,6 @@ async function interpolateProfiles(actorIds) {
 				}].filter(location => Object.keys(location).length > 0),
 			}), {});
 
-		const avatars = actorProfiles.map(profile => profile.avatar_media_id && ({
-			id: profile.avatar_media_id,
-			width: profile.avatar_width,
-			height: profile.avatar_height,
-			size: profile.avatar_size,
-		})).filter(Boolean);
-
 		const mostFrequentValues = [
 			'gender',
 			'ethnicity',
@@ -526,8 +519,9 @@ async function interpolateProfiles(actorIds) {
 		profile.tattoos = getLongest(valuesByProperty.tattoos);
 		profile.piercings = getLongest(valuesByProperty.piercings);
 
-		profile.avatar_media_id = avatars
+		profile.avatar_media_id = actorProfiles
-			.filter(avatar => avatar.entropy > 6)
+			.map(actorProfile => actorProfile.avatar)
+			.filter(avatar => avatar && avatar.entropy > 6)
 			.sort((avatarA, avatarB) => avatarB.height - avatarA.height)[0]?.id || null;
 
 		return profile;