From ef5d31dc2aeccd903ff0ddf30ad94fe383f957bd Mon Sep 17 00:00:00 2001
From: Marcel Klehr <mklehr@gmx.net>
Date: Mon, 7 Nov 2022 12:17:14 +0100
Subject: [PATCH] Merge FaceCover and FaceCoverSmall

Signed-off-by: Marcel Klehr <mklehr@gmx.net>
---
 src/components/FaceCover.vue      |  35 ++++++-
 src/components/FaceCoverSmall.vue | 148 ------------------------------
 src/components/FaceMergeForm.vue  |   7 +-
 src/views/Faces.vue               |   6 +-
 4 files changed, 38 insertions(+), 158 deletions(-)
 delete mode 100644 src/components/FaceCoverSmall.vue

diff --git a/src/components/FaceCover.vue b/src/components/FaceCover.vue
index 43bbdf54d9..0d7339342b 100644
--- a/src/components/FaceCover.vue
+++ b/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,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		small: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -113,12 +117,16 @@ export default {
 		})
 	},
 
+	beforeDestroy() {
+		this.observer.disconnect()
+	},
+
 	methods: {
 		async fetchFiles() {
 			await this.fetchFaceContent(this.face.basename)
 		},
 		waitForVisible(el, listener) {
-			const observer = new IntersectionObserver((entries, observer) => {
+			this.observer = new IntersectionObserver((entries, observer) => {
 				entries.forEach(entry => {
 					if (entry.intersectionRatio > 0) {
 						listener()
@@ -127,7 +135,7 @@ export default {
 				})
 			})
 
-			observer.observe(el)
+			this.observer.observe(el)
 		},
 	},
 }
@@ -156,6 +164,14 @@ export default {
 		}
 	}
 
+	&.face-cover--small {
+		.face-cover__crop-container {
+			width: 60px !important;
+			height: 60px !important;
+			--photos-face-width: 60px !important;
+		}
+	}
+
 	&:hover, &:focus {
 		background: var(--color-background-hover);
 	}
@@ -188,5 +204,14 @@ export default {
 			margin: 0;
 		}
 	}
+
+	&.face-cover--small {
+		* {
+			font-size: 15px !important;
+		}
+		.face-cover__details {
+			width: 60px !important;
+		}
+	}
 }
 </style>
diff --git a/src/components/FaceCoverSmall.vue b/src/components/FaceCoverSmall.vue
deleted file mode 100644
index 42ba396e3b..0000000000
--- a/src/components/FaceCoverSmall.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<!--
- - @copyright Copyright (c) 2022 Marcel Klehr <mklehr@gmx.net>
- -
- - @author Marcel Klehr <mklehr@gmx.net>
- -
- - @license AGPL-3.0-or-later
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
-<template>
-	<div class="face-cover-small"
-		@click="$emit('click')">
-		<div class="face-cover-small__crop-container">
-			<img class="face-cover-small__image"
-				:src="coverUrl"
-				:style="coverDimensions">
-		</div>
-		<div class="face-cover-small__details">
-			<span :class="{'hidden-visually': face.basename.match(/^[0-9]+$/)}">{{ face.basename }}</span>
-		</div>
-	</div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-import { generateUrl } from '@nextcloud/router'
-
-import FaceCoverMixin from '../mixins/FaceCoverMixin.js'
-import FetchFacesMixin from '../mixins/FetchFacesMixin.js'
-
-export default {
-	name: 'FaceCoverSmall',
-	mixins: [
-		FaceCoverMixin,
-		FetchFacesMixin,
-	],
-	props: {
-		baseName: {
-			type: String,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			observer: null,
-		}
-	},
-	computed: {
-		...mapGetters([
-			'files',
-			'faces',
-			'facesFiles',
-		]),
-
-		/**
-		 * @return {Face}
-		 */
-		face() {
-			return this.faces[this.baseName]
-		},
-
-		/**
-		 * @return {string}
-		 */
-		coverUrl() {
-			if (!this.cover) {
-				return ''
-			}
-
-			return generateUrl(`/apps/photos/api/v1/preview/${this.cover.fileid}?x=${512}&y=${512}`)
-		},
-
-		cover() {
-			return this.getFaceCover(this.face.basename)
-		},
-
-		coverDimensions() {
-			if (!this.cover) return {}
-			return this.getCoverStyle(this.face.basename)
-		},
-	},
-	mounted() {
-		this.observer = new IntersectionObserver((entries) => {
-			entries.forEach(entry => {
-				if (entry.intersectionRatio > 0) {
-					this.fetchFaceContent(this.face.basename)
-				}
-			})
-		})
-		this.observer.observe(this.$el)
-	},
-	beforeDestroy() {
-		this.observer.disconnect()
-	},
-}
-</script>
-
-<style scoped lang="scss">
-.face-cover-small {
-	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;
-	}
-}
-</style>
diff --git a/src/components/FaceMergeForm.vue b/src/components/FaceMergeForm.vue
index 4a2d501bd7..15118ae5ff 100644
--- a/src/components/FaceMergeForm.vue
+++ b/src/components/FaceMergeForm.vue
@@ -21,9 +21,10 @@
  -->
 <template>
 	<div class="merge-form face-list">
-		<FaceCoverSmall v-for="face in filteredFaces"
+		<FaceCover v-for="face in filteredFaces"
 			:key="face.basename"
 			:base-name="face.basename"
+			small
 			@click="handleSelect(face.basename)" />
 	</div>
 </template>
@@ -33,11 +34,11 @@ import { mapGetters } from 'vuex'
 
 import FaceCoverMixin from '../mixins/FaceCoverMixin.js'
 import FetchFacesMixin from '../mixins/FetchFacesMixin.js'
-import FaceCoverSmall from './FaceCoverSmall.vue'
+import FaceCover from './FaceCover.vue'
 
 export default {
 	name: 'FaceMergeForm',
-	components: { FaceCoverSmall },
+	components: { FaceCover },
 	mixins: [
 		FaceCoverMixin,
 		FetchFacesMixin,
diff --git a/src/views/Faces.vue b/src/views/Faces.vue
index 29d49dc295..83a7396902 100644
--- a/src/views/Faces.vue
+++ b/src/views/Faces.vue
@@ -45,9 +45,11 @@
 		</div>
 
 		<div v-else-if="!noFaces" class="faces__list">
-			<FaceCover v-for="face in orderedFaces"
+			<router-link v-for="face in orderedFaces"
 				:key="face.basename"
-				:base-name="face.basename" />
+				:to="`/faces/${face.basename}`">
+				<FaceCover :base-name="face.basename" />
+			</router-link>
 		</div>
 	</div>
 </template>