FaceCover: Lazy load faces files once face cover is visible in device viewport

js/photos-src_mixins_AbortControllerMixin_js-src_views_Faces_vue.js.LICENSE.txt

@@ -1,5 +1,3 @@
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
-
 /**
  * @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>
  *

src/components/FaceCover.vue

@@ -23,7 +23,7 @@
  -->
 
 <template>
-	<router-link class="face-cover" :to="`/faces/${baseName}`">
+	<div :class="['face-cover', small && 'face-cover--small']" @click="$emit('click')">
 		<div class="face-cover__crop-container">
 			<img ref="image"
 				class="face-cover__image"
@@ -36,11 +36,11 @@
 					{{ baseName }}
 				</h2>
 			</div>
-			<div v-if="facesFiles[baseName]" class="face-cover__details__second-line">
+			<div v-if="facesFiles[baseName] && !small" class="face-cover__details__second-line">
 				{{ n('photos', '%n photos', '%n photos', facesFiles[baseName].length,) }}
 			</div>
 		</div>
-	</router-link>
+	</div>
 </template>
 
 <script>
@@ -62,6 +62,16 @@ export default {
 			type: String,
 			required: true,
 		},
+		small: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			observer: null,
+		}
 	},
 
 	computed: {
@@ -99,14 +109,34 @@ export default {
 		},
 	},
 
-	async beforeMount() {
-		await this.fetchFiles()
+	async mounted() {
+		this.waitForVisible(this.$el, (isVisible) => {
+			if (!this.facesFiles[this.face.basename]) {
+				this.fetchFiles()
+			}
+		})
+	},
+
+	beforeDestroy() {
+		this.observer.disconnect()
 	},
 
 	methods: {
 		async fetchFiles() {
 			await this.fetchFaceContent(this.face.basename)
 		},
+		waitForVisible(el, listener) {
+			this.observer = new IntersectionObserver((entries, observer) => {
+				entries.forEach(entry => {
+					if (entry.intersectionRatio > 0) {
+						listener()
+						observer.disconnect()
+					}
+				})
+			})
+
+			this.observer.observe(el)
+		},
 	},
 }
 </script>
@@ -167,4 +197,18 @@ export default {
 		}
 	}
 }
+
+.face-cover--small {
+	* {
+		font-size: 15px !important;
+	}
+	.face-cover__details {
+		width: 60px !important;
+	}
+	.face-cover__crop-container {
+		width: 60px !important;
+		height: 60px !important;
+		--photos-face-width: 60px !important;
+	}
+}
 </style>

src/components/FaceMergeForm.vue

@@ -21,39 +21,24 @@
  -->
 <template>
 	<div class="merge-form face-list">
-		<template v-if="loading">
-			<NcLoadingIcon class="loader" />
-		</template>
-		<template v-else>
-			<div v-for="face in filteredFaces"
-				:key="face.basename"
-				class="face-list__item"
-				@click="handleSelect(face.basename)">
-				<div class="face-list__item__crop-container">
-					<img class="face-list__item__image"
-						:src="getCoverUrl(face.basename)"
-						:style="getCoverStyle(face.basename)">
-				</div>
-				<div class="face-list__item__details">
-					<span :class="{'hidden-visually': face.basename.match(/^[0-9]+$/)}">{{ face.basename }}</span>
-				</div>
-			</div>
-		</template>
+		<FaceCover v-for="face in filteredFaces"
+			:key="face.basename"
+			:base-name="face.basename"
+			small
+			@click="handleSelect(face.basename)" />
 	</div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 
-import { generateUrl } from '@nextcloud/router'
-import { NcLoadingIcon } from '@nextcloud/vue'
-
 import FaceCoverMixin from '../mixins/FaceCoverMixin.js'
 import FetchFacesMixin from '../mixins/FetchFacesMixin.js'
+import FaceCover from './FaceCover.vue'
 
 export default {
 	name: 'FaceMergeForm',
-	components: { NcLoadingIcon },
+	components: { FaceCover },
 	mixins: [
 		FaceCoverMixin,
 		FetchFacesMixin,
@@ -77,24 +62,20 @@ export default {
 		]),
 
 		filteredFaces() {
-			return Object.values(this.faces).filter(face => face.basename !== this.firstFace).sort((a, b) => {
-				if (!this.facesFiles[b.basename] || !this.facesFiles[a.basename]) {
-					return 0
-				}
-				return this.facesFiles[b.basename].length - this.facesFiles[a.basename].length
-			})
+			return Object.values(this.faces)
+				.filter(face => face.basename !== this.firstFace)
+				.sort((a, b) => {
+					if (a.props.nbItems && b.props.nbItems) {
+						return b.props.nbItems - a.props.nbItems
+					}
+					if (!this.facesFiles[b.basename] || !this.facesFiles[a.basename]) {
+						return 0
+					}
+					return this.facesFiles[b.basename].length - this.facesFiles[a.basename].length
+				})
 		},
 	},
 	methods: {
-		getCoverUrl(faceName) {
-			const cover = this.getFaceCover(faceName)
-			if (!cover) {
-				this.fetchFaceContent(faceName)
-				return ''
-			}
-			return generateUrl(`/apps/photos/api/v1/preview/${cover.fileid}?x=${512}&y=${512}`)
-		},
-
 		handleSelect(faceName) {
 			this.$emit('select', faceName)
 			this.loading = true
@@ -110,44 +91,6 @@ export default {
 	height: 350px;
 	flex-wrap: wrap;
 	padding: 12px;
-	align-content: center;
-
-	&__item {
-		display: flex;
-		flex-direction: column;
-		padding: 10px;
-		border-radius: var(--border-radius);
-		align-items: center;
-		cursor: pointer;
-		width: 120px;
-
-		* {
-			cursor: pointer;
-		}
-
-		&__crop-container {
-			overflow: hidden;
-			width: 60px;
-			height: 60px;
-			border-radius: 60px;
-			position: relative;
-			background: var(--color-background-darker);
-			--photos-face-width: 60px;
-		}
-
-		&:hover, &:focus {
-			background: var(--color-background-hover);
-		}
-
-		&__details {
-			padding: 10px;
-			height: 1em;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			width: 100%;
-			text-align: center;
-		}
-	}
 }
 
 .loader {

src/mixins/FaceCoverMixin.js

@@ -21,7 +21,6 @@
  */
 
 import { mapGetters } from 'vuex'
-import he from 'he'
 
 export default {
 	name: 'FaceCoverMixin',
@@ -47,7 +46,6 @@ export default {
 			return (this.facesFiles[faceName] || [])
 				.slice(0, 25)
 				.map(fileId => this.files[fileId])
-				.map(file => ({ ...file, faceDetections: JSON.parse(he.decode(file.faceDetections)) }))
 				// sort larges face first
 				.sort((a, b) =>
 					b.faceDetections.find(d => d.title === faceName).width