enh(faces): Avoid O(n) API calls on faces overview

Signed-off-by: Marcel Klehr <[email protected]>

src/components/Faces/FaceCover.vue

@@ -36,8 +36,8 @@
 					{{ baseName }}
 				</h2>
 			</div>
-			<div v-if="facesFiles[baseName] && !small" class="face-cover__details__second-line">
-				{{ n('photos', '%n photos', '%n photos', facesFiles[baseName].length,) }}
+			<div v-if="!small" class="face-cover__details__second-line">
+				{{ n('photos', '%n photos', '%n photos', face.props['nbItems']) }}
 			</div>
 		</div>
 	</div>
@@ -107,37 +107,7 @@ export default {
 			if (!this.cover) return {}
 			return this.getCoverStyle(this.face.basename)
 		},
-	},
-
-	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>
 

src/mixins/FaceCoverMixin.js

@@ -21,6 +21,7 @@
  */
 
 import { mapGetters } from 'vuex'
+import he from "he";
 
 export default {
 	name: 'FaceCoverMixin',
@@ -35,32 +36,7 @@ export default {
 
 	methods: {
 		getFaceCover(faceName) {
-			// Give high scores for faces that intersect with the edge of the picture (with a margin of half the face size)
-			const scoreFacePosition = (faceDetection) => {
-				return Math.max(0, -1 * (faceDetection.x - faceDetection.width * 0.5))
-				+ Math.max(0, -1 * (faceDetection.y - faceDetection.height * 0.5))
-				+ Math.max(0, -1 * (1 - (faceDetection.x + faceDetection.width) - faceDetection.width * 0.5))
-				+ Math.max(0, -1 * (1 - (faceDetection.y + faceDetection.height) - faceDetection.height * 0.5))
-			}
-
-			return (this.facesFiles[faceName] || [])
-				.slice(0, 25)
-				.map(fileId => this.files[fileId])
-				// sort larges face first
-				.sort((a, b) =>
-					b.faceDetections.find(d => d.title === faceName).width
-					- a.faceDetections.find(d => d.title === faceName).width
-				)
-				// sort fewest face detections first
-				.sort((a, b) =>
-					a.faceDetections.length
-					- b.faceDetections.length
-				)
-				// Sort faces that are at the edge last
-				.sort((a, b) =>
-					scoreFacePosition(a.faceDetections.find(d => d.title === faceName))
-					- scoreFacePosition(b.faceDetections.find(d => d.title === faceName))
-				)[0]
+			return JSON.parse(he.decode(this.faces[faceName].props['face-preview-image'] || '{}'))
 		},
 
 		/**
@@ -72,12 +48,10 @@ export default {
 		 */
 		getCoverStyle(faceName) {
 			const cover = this.getFaceCover(faceName)
-			if (!cover) {
+			if (!cover || !cover.detection) {
 				return {}
 			}
-			const detections = cover.faceDetections
-
-			const detection = detections.find(detection => detection.title === faceName)
+			const detection = cover.detection
 
 			// Zoom into the picture so that the face fills the --photos-face-width box nicely
 			// if the face is larger than the image, we don't zoom out (reason for the Math.max)

src/services/DavRequest.js

@@ -26,6 +26,7 @@ const props = `
 	<d:getlastmodified />
 	<d:resourcetype />
 	<nc:face-detections />
+	<nc:face-preview-image />
 	<nc:file-metadata-size />
 	<nc:has-preview />
 	<nc:realpath />

src/views/FaceContent.vue

@@ -278,6 +278,10 @@ export default {
 		},
 	},
 
+  mounted() {
+    this.fetchFaceContent(this.faceName)
+  },
+
 	watch: {
 		face() {
 			if (this.face) {