Better vcard files

lib/Chat/Parser/SystemMessage.php

@@ -23,6 +23,7 @@
 
 namespace OCA\Talk\Chat\Parser;
 
+use OCA\DAV\CardDAV\PhotoCache;
 use OCA\Talk\Exceptions\ParticipantNotFoundException;
 use OCA\Talk\GuestManager;
 use OCA\Talk\Model\Attendee;
@@ -43,6 +44,7 @@
 use OCP\IUser;
 use OCP\IUserManager;
 use OCP\Share\Exceptions\ShareNotFound;
+use Sabre\VObject\Reader;
 
 class SystemMessage {
 
@@ -56,6 +58,8 @@ class SystemMessage {
 	protected $previewManager;
 	/** @var RoomShareProvider */
 	protected $shareProvider;
+	/** @var PhotoCache */
+	protected $photoCache;
 	/** @var IRootFolder */
 	protected $rootFolder;
 	/** @var IURLGenerator */
@@ -75,13 +79,15 @@ public function __construct(IUserManager $userManager,
 								GuestManager $guestManager,
 								IPreviewManager $previewManager,
 								RoomShareProvider $shareProvider,
+								PhotoCache $photoCache,
 								IRootFolder $rootFolder,
 								IURLGenerator $url) {
 		$this->userManager = $userManager;
 		$this->groupManager = $groupManager;
 		$this->guestManager = $guestManager;
 		$this->previewManager = $previewManager;
 		$this->shareProvider = $shareProvider;
+		$this->photoCache = $photoCache;
 		$this->rootFolder = $rootFolder;
 		$this->url = $url;
 	}
@@ -507,7 +513,7 @@ protected function getFileFromShare(Participant $participant, string $shareId):
 			]);
 		}
 
-		return [
+		$data = [
 			'type' => 'file',
 			'id' => (string) $node->getId(),
 			'name' => $name,
@@ -517,6 +523,23 @@ protected function getFileFromShare(Participant $participant, string $shareId):
 			'mimetype' => $node->getMimeType(),
 			'preview-available' => $this->previewManager->isAvailable($node) ? 'yes' : 'no',
 		];
+
+		if ($node->getMimeType() === 'text/vcard') {
+			$vCard = $node->getContent();
+
+			$vObject = Reader::read($vCard);
+			if (!empty($vObject->FN)) {
+				$data['contact-name'] = (string) $vObject->FN;
+			}
+
+			$photo = $this->photoCache->getPhotoFromVObject($vObject);
+			if ($photo) {
+				$data['contact-photo-mimetype'] = $photo['Content-Type'];
+				$data['contact-photo'] = base64_encode($photo['body']);
+			}
+		}
+
+		return $data;
 	}
 
 	protected function getActorFromComment(Room $room, IComment $comment): array {

psalm.xml

@@ -24,9 +24,10 @@
 				<referencedClass name="Doctrine\DBAL\Platforms\PostgreSQL94Platform" />
 				<referencedClass name="Doctrine\DBAL\Types\Types" />
 				<referencedClass name="OC" />
-				<referencedClass name="OCA\Files_Sharing\SharedStorage" />
 				<referencedClass name="OCA\Circles\Model\Circle" />
 				<referencedClass name="OCA\Circles\Model\Member" />
+				<referencedClass name="OCA\DAV\CardDAV\PhotoCache" />
+				<referencedClass name="OCA\Files_Sharing\SharedStorage" />
 			</errorLevel>
 		</UndefinedClass>
 		<UndefinedDocblockClass>
@@ -40,6 +41,7 @@
 				<referencedClass name="Doctrine\DBAL\Schema\Table" />
 				<referencedClass name="OC\DB\ConnectionAdapter" />
 				<referencedClass name="OCA\Circles\Model\Member" />
+				<referencedClass name="OCA\DAV\CardDAV\PhotoCache" />
 			</errorLevel>
 		</UndefinedDocblockClass>
 		<UndefinedInterfaceMethod>

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -222,6 +222,7 @@ import {
 } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
 import Location from './MessagePart/Location'
+import Contact from './MessagePart/Contact.vue'
 
 export default {
 	name: 'Message',
@@ -488,12 +489,14 @@ export default {
 			const richParameters = {}
 			Object.keys(this.messageParameters).forEach(function(p) {
 				const type = this.messageParameters[p].type
+				console.debug(this.messageParameters[p].mimetype)
+				const mimetype = this.messageParameters[p].mimetype
 				if (type === 'user' || type === 'call' || type === 'guest') {
 					richParameters[p] = {
 						component: Mention,
 						props: this.messageParameters[p],
 					}
-				} else if (type === 'file') {
+				} else if (type === 'file' && mimetype !== 'text/vcard') {
 					richParameters[p] = {
 						component: FilePreview,
 						props: this.messageParameters[p],
@@ -508,6 +511,11 @@ export default {
 						component: Location,
 						props: this.messageParameters[p],
 					}
+				} else if (mimetype === 'text/vcard') {
+					richParameters[p] = {
+						component: Contact,
+						props: this.messageParameters[p],
+					}
 				} else {
 					richParameters[p] = {
 						component: DefaultParameter,

src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue

@@ -0,0 +1,138 @@
+<!--
+  - @copyright Copyright (c) 2021, Marco Ambrosini <[email protected]>
+  -
+  - @author Marco Ambrosini <[email protected]>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - 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>
+	<a
+		class="contact"
+		:href="link"
+		:aria-label="contactAriaLabel"
+		target="_blank">
+		<img v-if="contactPhotoFromBase64"
+			class="contact__image"
+			alt=""
+			:src="contactPhotoFromBase64">
+		<div class="contact__lineone">
+			<div class="title">
+				{{ contactName }}
+			</div>
+		</div>
+	</a>
+</template>
+
+<script>
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+
+export default {
+	name: 'Contact',
+
+	directives: {
+		tooltip: Tooltip,
+	},
+
+	props: {
+		name: {
+			type: String,
+			required: true,
+		},
+
+		link: {
+			type: String,
+			required: true,
+		},
+
+		contactName: {
+			type: String,
+			default: '',
+		},
+
+		contactPhoto: {
+			type: String,
+			default: '',
+		},
+
+		contactPhotoMimetype: {
+			type: String,
+			default: '',
+		},
+	},
+
+	computed: {
+		contactPhotoFromBase64() {
+			if (!this.contactPhotoMimetype || !this.contactPhoto) {
+				return null
+			}
+			return 'data:' + this.contactPhotoMimetype + ';base64,' + this.contactPhoto
+		},
+		contactAriaLabel() {
+			return t('spreed', 'Contact')
+		},
+	},
+}
+</script>
+
+	<style lang="scss" scoped>
+	.contact {
+		display: flex;
+		transition: box-shadow 0.1s ease-in-out;
+		box-shadow: 0 0 2px 0 var(--color-box-shadow);
+		border-radius: var(--border-radius-large);
+		font-size: 100%;
+		background-color: var(--color-main-background);
+		margin: 12px 0;
+		max-width: 300px;
+		padding: 12px;
+		white-space: nowrap;
+		align-items: center;
+		&:hover,
+		&:focus{
+			box-shadow: 0 0 5px 0 var(--color-box-shadow);
+		}
+		&__image {
+			display: inline-block;
+			border-radius: 50%;
+			max-width: 44px;
+			max-height: 44px;
+		}
+		&__lineone {
+			height: 30px;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+
+			.title {
+				margin-left: 12px;
+			}
+		}
+
+		// Dark theme
+		body.dark &, body.theme--dark & {
+			border: 2px solid var(--color-border);
+		}
+	}
+
+	.icon-contacts {
+		opacity: .8;
+	}
+
+	</style>