From ded414577f6ed1f7da967f0d8baa8cb346843865 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <moonloop.adult@protonmail.com>
Date: Sun, 27 Dec 2020 22:45:38 +0100
Subject: [PATCH] Fixed default actor avatar allocation. Fixed lazy loading in
 actor photos component.

---
 assets/components/actors/photos.vue |  3 +--
 assets/components/search/search.vue |  1 -
 assets/js/actors/actions.js         |  4 ++--
 assets/js/fragments.js              |  6 +++---
 assets/js/main.js                   |  4 ++--
 src/actors.js                       | 14 ++++----------
 6 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/assets/components/actors/photos.vue b/assets/components/actors/photos.vue
index e74d5adc..d68dc17b 100644
--- a/assets/components/actors/photos.vue
+++ b/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"
diff --git a/assets/components/search/search.vue b/assets/components/search/search.vue
index 0a1d502b..ee8ee0cd 100644
--- a/assets/components/search/search.vue
+++ b/assets/components/search/search.vue
@@ -12,7 +12,6 @@
 
 		<div
 			v-if="!loading && actors.length > 0"
-			v-lazy-container="{ selector: '.lazy' }"
 			class="tiles"
 		>
 			<Actor
diff --git a/assets/js/actors/actions.js b/assets/js/actors/actions.js
index b32a0917..aa3069f7 100644
--- a/assets/js/actors/actions.js
+++ b/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 mode = router.currentRoute.query.mode || 'all';
+		const includedTags = router.currentRoute.value.query.tags ? router.currentRoute.value.query.tags.split(',') : [];
+		const mode = router.currentRoute.value.query.mode || 'all';
 
 		const { actor } = await graphql(`
             query Actor(
diff --git a/assets/js/fragments.js b/assets/js/fragments.js
index d01cc6b8..b0572901 100644
--- a/assets/js/fragments.js
+++ b/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 includedNetworks = router.currentRoute.query.networks ? router.currentRoute.query.networks.split(',') : [];
+	const includedChannels = router.currentRoute.value.query.channels ? router.currentRoute.value.query.channels.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 [];
diff --git a/assets/js/main.js b/assets/js/main.js
index 89bd79e4..1cd390d9 100644
--- a/assets/js/main.js
+++ b/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();
 
diff --git a/src/actors.js b/src/actors.js
index fc8ba61c..aafc2077 100644
--- a/src/actors.js
+++ b/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
-			.filter(avatar => avatar.entropy > 6)
+		profile.avatar_media_id = actorProfiles
+			.map(actorProfile => actorProfile.avatar)
+			.filter(avatar => avatar && avatar.entropy > 6)
 			.sort((avatarA, avatarB) => avatarB.height - avatarA.height)[0]?.id || null;
 
 		return profile;