Revert using display name in shared albums' name

+ Improve rendering of cover and header of shared albums

Signed-off-by: Louis Chemineau <louis@chmn.me>

.gitignore

@@ -22,4 +22,6 @@ vendor
 
 cypress/videos
 cypress/snapshots
-cypress/downloads
+cypress/downloads
+
+js/*hot-update.*

lib/Album/AlbumMapper.php

@@ -541,7 +541,7 @@ public function getSharedAlbumsForCollaboratorWithFiles(string $collaboratorId,
 				// Suffix album name with the album owner to prevent duplicates.
 				// Not done for public link as it would like owner's uid.
 				if ($collaboratorType !== self::TYPE_LINK) {
-					$albumName = $row['album_name'].' ('.$this->userManager->get($row['album_user'])->getDisplayName().')';
+					$albumName = $row['album_name'].' ('.$row['album_user'].')';
 				}
 				$albumsById[$albumId] = new AlbumInfo($albumId, $row['album_user'], $albumName, $row['location'], (int)$row['created'], (int)$row['last_added_photo']);
 			}

src/components/Collection/CollectionCover.vue

@@ -40,6 +40,8 @@
 				</div>
 			</div>
 		</router-link>
+
+		<NcAvatar v-if="userId" class="collection-userid" :user="userId" />
 	</li>
 </template>
 
@@ -49,12 +51,14 @@ import { mapGetters } from 'vuex'
 // import ShareVariant from 'vue-material-design-icons/ShareVariant'
 // import AccountMultiple from 'vue-material-design-icons/AccountMultiple'
 import ImageMultiple from 'vue-material-design-icons/ImageMultiple'
+import { NcAvatar } from '@nextcloud/vue'
 
 export default {
 	name: 'CollectionCover',
 
 	components: {
 		ImageMultiple,
+		NcAvatar,
 	},
 
 	props: {
@@ -70,6 +74,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		userId: {
+			type: String,
+			default: null,
+		},
 	},
 
 	computed: {
@@ -82,60 +90,69 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.collection-cover {
-	display: flex;
-	flex-direction: column;
-	padding: 16px;
-	border-radius: var(--border-radius-large);
-
-	&:hover, &:focus {
-		background: var(--color-background-dark);
-	}
+li {
+	position: relative;
 
-	&__image {
-		width: 350px;
-		height: 350px;
-		object-fit: cover;
+	.collection-cover {
+		display: flex;
+		flex-direction: column;
+		padding: 16px;
 		border-radius: var(--border-radius-large);
 
-		@media only screen and (max-width: 1200px) {
-			width: 250px;
-			height: 250px;
+		&:hover, &:focus {
+			background: var(--color-background-dark);
 		}
 
-		&--placeholder {
-			background: var(--color-primary-light);
+		&__image {
+			width: 350px;
+			height: 350px;
+			object-fit: cover;
+			border-radius: var(--border-radius-large);
 
-			:deep .material-design-icon {
-				width: 100%;
-				height: 100%;
+			@media only screen and (max-width: 1200px) {
+				width: 250px;
+				height: 250px;
+			}
+
+			&--placeholder {
+				background: var(--color-primary-light);
+
+				:deep .material-design-icon {
+					width: 100%;
+					height: 100%;
 
-				.material-design-icon__svg {
-					fill: var(--color-primary);
+					.material-design-icon__svg {
+						fill: var(--color-primary);
+					}
 				}
 			}
 		}
-	}
 
-	&__details {
-		display: flex;
-		flex-direction: column;
-		margin-top: 16px;
-		width: 350px;
+		&__details {
+			display: flex;
+			flex-direction: column;
+			margin-top: 16px;
+			width: 350px;
 
-		@media only screen and (max-width: 1200px) {
-			width: 250px;
-		}
+			@media only screen and (max-width: 1200px) {
+				width: 250px;
+			}
 
-		&__title {
-			display: flex;
-		}
+			&__title {
+				display: flex;
+			}
 
-		&__subtitle {
-			display: flex;
-			color: var(--color-text-lighter);
+			&__subtitle {
+				display: flex;
+				color: var(--color-text-lighter);
+			}
 		}
 	}
 
+	.collection-userid {
+		position: absolute;
+		right: 16px;
+		bottom: 16px;
+	}
 }
 </style>

src/views/SharedAlbumContent.vue

@@ -34,12 +34,15 @@
 				:loading="loadingFiles"
 				:params="{ albumName }"
 				:path="'/' + albumName"
-				:title="albumName"
+				:title="albumName | albumOriginalName"
 				@refresh="fetchAlbumContent">
 				<!-- <UploadPicker :accept="allowedMimes"
 				:destination="folder.filename"
 				:multiple="true"
 				@uploaded="onUpload" /> -->
+
+				<NcAvatar class="collection-userid" :user="albumName | sharingUserId" />
+
 				<div v-if="album.location !== ''" slot="subtitle" class="album__location">
 					<MapMarker />{{ album.location }}
 				</div>
@@ -122,7 +125,7 @@ import Close from 'vue-material-design-icons/Close'
 // import Download from 'vue-material-design-icons/Download'
 // import DownloadMultiple from 'vue-material-design-icons/DownloadMultiple'
 
-import { NcActions, NcActionButton, NcButton, NcModal, NcEmptyContent, NcActionSeparator, isMobile } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcButton, NcModal, NcEmptyContent, NcActionSeparator, NcAvatar, isMobile } from '@nextcloud/vue'
 import { getCurrentUser } from '@nextcloud/auth'
 
 import FetchSharedAlbumsMixin from '../mixins/FetchSharedAlbumsMixin.js'
@@ -153,12 +156,31 @@ export default {
 		NcActionSeparator,
 		NcButton,
 		NcModal,
+		NcAvatar,
 		CollectionContent,
 		// ActionDownload,
 		FilesPicker,
 		HeaderNavigation,
 	},
 
+	filters: {
+		/**
+		 * @param {string} albumFullName The album's full name, including the userid.
+		 * @return {string} The album name without the userId between parentheses.
+		 */
+		albumOriginalName(albumFullName) {
+			return albumFullName.replace(/ \(.+\)$/, '')
+		},
+
+		/**
+		 * @param {string} albumFullName The album's full name, including the userid.
+		 * @return {string}
+		 */
+		sharingUserId(albumFullName) {
+			return albumFullName.match(/ \((.+)\)$/, '')[1]
+		},
+	},
+
 	mixins: [
 		FetchSharedAlbumsMixin,
 		FetchFilesMixin,

src/views/SharedAlbums.vue

@@ -35,9 +35,10 @@
 			slot-scope="{collection}"
 			:link="`/sharedalbums/${collection.basename}`"
 			:alt-img="t('photos', 'Cover photo for shared album {albumName}.', { albumName: collection.basename })"
+			:user-id="collection.basename | sharingUserId"
 			:cover-url="collection.lastPhoto | coverUrl">
 			<h2 class="album__name">
-				{{ collection.basename }}
+				{{ collection.basename | albumOriginalName }}
 			</h2>
 
 			<div slot="subtitle" class="album__details">
@@ -83,6 +84,22 @@ export default {
 
 			return generateUrl(`/apps/photos/api/v1/preview/${lastPhoto}?x=${512}&y=${512}`)
 		},
+
+		/**
+		 * @param {string} albumFullName The album's full name, including the userid.
+		 * @return {string} The album name without the userId between parentheses.
+		 */
+		albumOriginalName(albumFullName) {
+			return albumFullName.replace(/ \(.+\)$/, '')
+		},
+
+		/**
+		 * @param {string} albumFullName The album's full name, including the userid.
+		 * @return {string}
+		 */
+		sharingUserId(albumFullName) {
+			return albumFullName.match(/ \((.+)\)$/, '')[1]
+		},
 	},
 
 	mixins: [