From 95669e7027eb0a9e34f5ce6145d8cd626ea22b25 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Sun, 10 Jan 2021 10:29:27 +0100
Subject: [PATCH 1/4] Add conversationpictureeditor component

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 package-lock.json                             |  25 +++-
 package.json                                  |   1 +
 src/App.vue                                   |   1 +
 .../ConversationPictureEditor.vue             | 141 ++++++++++++++++++
 4 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ConversationPictureEditor/ConversationPictureEditor.vue

diff --git a/package-lock.json b/package-lock.json
index 2d9909df853..6cce05ac111 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4241,6 +4241,7 @@
 					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"color-convert": "^2.0.1"
 					}
@@ -4287,6 +4288,7 @@
 					"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 					"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"color-name": "~1.1.4"
 					}
@@ -4295,7 +4297,8 @@
 					"version": "1.1.4",
 					"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 					"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"css-loader": {
 					"version": "3.6.0",
@@ -7166,6 +7169,11 @@
 				}
 			}
 		},
+		"classnames": {
+			"version": "2.2.6",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+			"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+		},
 		"clean-css": {
 			"version": "4.2.3",
 			"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -8977,6 +8985,11 @@
 				"stream-shift": "^1.0.0"
 			}
 		},
+		"easy-bem": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.0.2.tgz",
+			"integrity": "sha512-tHtLDhcEHZIMKdiiZElQoR8TcZ/6rvcNp7//93Vx/mqNLah9BOFGhhzTUfWLJs7uxZiKMdP/KzGOtzq14DrrqQ=="
+		},
 		"easy-stack": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/easy-stack/-/easy-stack-1.0.0.tgz",
@@ -20733,6 +20746,16 @@
 			"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
 			"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
 		},
+		"vue-advanced-cropper": {
+			"version": "0.20.1",
+			"resolved": "https://registry.npmjs.org/vue-advanced-cropper/-/vue-advanced-cropper-0.20.1.tgz",
+			"integrity": "sha512-G/RloEFoAIMd8hK9xczcu9muUNq0GzHupcnuFQuiyk9+4W+JkT4Ypnrr0CLDrtuFwd1BFabiX9bdpk+Z/XP2EQ==",
+			"requires": {
+				"classnames": "^2.2.6",
+				"debounce": "^1.2.0",
+				"easy-bem": "^1.0.2"
+			}
+		},
 		"vue-at": {
 			"version": "2.5.0-beta.2",
 			"resolved": "https://registry.npmjs.org/vue-at/-/vue-at-2.5.0-beta.2.tgz",
diff --git a/package.json b/package.json
index 2c7c8f893d5..7e30c08b979 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
 		"url-parse": "^1.4.7",
 		"util": "^0.12.3",
 		"vue": "^2.6.12",
+		"vue-advanced-cropper": "^0.20.1",
 		"vue-at": "^2.5.0-beta.2",
 		"vue-clipboard2": "^0.3.1",
 		"vue-fragment": "^1.5.1",
diff --git a/src/App.vue b/src/App.vue
index 818b01f31f0..700d6101067 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,6 +71,7 @@ import '@nextcloud/dialogs/styles/toast.scss'
 
 export default {
 	name: 'App',
+
 	components: {
 		AppContent,
 		Content,
diff --git a/src/components/ConversationPictureEditor/ConversationPictureEditor.vue b/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
new file mode 100644
index 00000000000..a96a21d5bf5
--- /dev/null
+++ b/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
@@ -0,0 +1,141 @@
+<!--
+  - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @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>
+	<Modal
+		@close="handleDismiss">
+		<div class="conversation-picture-editor"
+			@click.stop="">
+			<!--native file picker, hidden -->
+			<input
+				ref="conversationPictureInput"
+				type="file"
+				accept="image/png, image/jpeg"
+				class="hidden-visually"
+				@change="handleFileInput">
+			<Cropper
+				:src="selectedPicture"
+				stencil-component="circle-stencil"
+				:stencil-props="{
+					movable: true,
+					scalable: true,
+					aspectRatio: 1,
+				}"
+				:resize-image="{
+					adjustStencil: false
+				}"
+				image-restriction="stencil" />
+			<div class="actions" />
+			<div class="conversation-picture-editor__actions">
+				<button @click="handleDismiss">
+					{{ t('spreed', 'Dismiss') }}
+				</button>
+				<button ref="submitButton" class="primary" @click="handleUpload">
+					{{ t('spreed', 'Send') }}
+				</button>
+			</div>
+		</div>
+	</Modal>
+</template>
+
+<script>
+
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+import { Cropper } from 'vue-advanced-cropper'
+
+export default {
+	name: 'ConversationPictureEditor',
+
+	components: {
+		Modal,
+		Cropper,
+	},
+
+	data() {
+		return {
+			selectedPicture: 'https://nextcloud.local/remote.php/dav/files/admin/Peek%202020-11-12%2014-23.gif',
+			croppedPicture: null,
+		}
+	},
+
+	mounted() {
+		// Upon mounting the component, click the invisible file input right away
+
+		// this.$nextTick(() => {
+		// this.clickInput()
+		// })
+	},
+
+	methods: {
+		focus() {
+			this.$nextTick(() => {
+				this.$refs.submitButton.focus()
+			})
+		},
+
+		handleDismiss() {
+			this.modalDismissed = true
+		},
+
+		handleUpload() {
+			this.$store.dispatch('uploadFiles', this.currentUploadId)
+			this.modalDismissed = true
+		},
+		/**
+		 * Clicks the hidden file input when clicking the correspondent ActionButton,
+		 * thus opening the file-picker
+		 */
+		clickInput() {
+			console.debug('input', this.$refs.conversationPictureInput)
+			this.$refs.conversationPictureInput.click()
+		},
+
+		handleFileInput(event) {
+			console.debug(event)
+			this.selectedPicture = event.target.files[0]
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/variables.scss';
+
+.conversation-picture-editor {
+	max-width: 400px;
+	&__actions {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 16px;
+		margin-bottom: 4px;
+		button {
+			margin: 0 4px 0 4px;
+		}
+	}
+}
+
+::v-deep .modal-container {
+	display: flex !important;
+	flex-direction: column;
+	padding: 12px !important;
+	min-width: 400px;
+}
+</style>

From 0db5d118e76f9ae7fc42292615b33d33bce1bc84 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Wed, 20 Jan 2021 10:59:40 +0000
Subject: [PATCH 2/4] Add generalconversationsettings component

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 .../ConversationPictureEditor.vue             |   5 +-
 .../ConversationSettingsDialog.vue            |   6 +
 .../GeneralConversationSettings.vue           | 113 ++++++++++++++++++
 src/services/conversationsService.js          |   2 +
 4 files changed, 124 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ConversationSettings/GeneralConversationSettings.vue

diff --git a/src/components/ConversationPictureEditor/ConversationPictureEditor.vue b/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
index a96a21d5bf5..4ae7da930a0 100644
--- a/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
+++ b/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
@@ -21,6 +21,7 @@
 
 <template>
 	<Modal
+		class="top"
 		@close="handleDismiss">
 		<div class="conversation-picture-editor"
 			@click.stop="">
@@ -92,12 +93,11 @@ export default {
 		},
 
 		handleDismiss() {
-			this.modalDismissed = true
+			this.$emit('close')
 		},
 
 		handleUpload() {
 			this.$store.dispatch('uploadFiles', this.currentUploadId)
-			this.modalDismissed = true
 		},
 		/**
 		 * Clicks the hidden file input when clicking the correspondent ActionButton,
@@ -138,4 +138,5 @@ export default {
 	padding: 12px !important;
 	min-width: 400px;
 }
+
 </style>
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index 37aed0210be..555d6f4c6b0 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -25,6 +25,10 @@
 		:aria-label="t('spreed', 'Conversation settings')"
 		:open.sync="showSettings"
 		:show-navigation="false">
+		<AppSettingsSection
+			:title="t('spreed', 'Details')">
+			<GeneralConversationSettings :token="token" />
+		</AppSettingsSection>
 		<AppSettingsSection
 			:title="t('spreed', 'Guests access')"
 			class="app-settings-section">
@@ -65,6 +69,7 @@ import LobbySettings from './LobbySettings'
 import SipSettings from './SipSettings'
 import MatterbridgeSettings from './Matterbridge/MatterbridgeSettings'
 import { loadState } from '@nextcloud/initial-state'
+import GeneralConversationSettings from './GeneralConversationSettings'
 
 export default {
 	name: 'ConversationSettingsDialog',
@@ -78,6 +83,7 @@ export default {
 		LockingSettings,
 		SipSettings,
 		MatterbridgeSettings,
+		GeneralConversationSettings,
 	},
 
 	data() {
diff --git a/src/components/ConversationSettings/GeneralConversationSettings.vue b/src/components/ConversationSettings/GeneralConversationSettings.vue
new file mode 100644
index 00000000000..262778604fd
--- /dev/null
+++ b/src/components/ConversationSettings/GeneralConversationSettings.vue
@@ -0,0 +1,113 @@
+<!--
+  - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @author Marco Ambrosini <marcoambrosini@pm.me>
+  -
+  - @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>
+	<div class="general-settings">
+		<ConversationPictureEditor
+			v-if="isSettingConversationPicture"
+			@close="isSettingConversationPicture = false" />
+		<button class="general-settings__picture icon-user"
+			@click="setConversationPicture">
+			<img v-if="hasImage" src="" alt="">
+		</button>
+		<div class="general-settings__details">
+			<h4
+				class="details__name">
+				{{ conversationName }}
+			</h4>
+		<!-- TODO: add the conversation description editor here -->
+		</div>
+	</div>
+</template>
+
+<script>
+import ConversationPictureEditor from '../ConversationPictureEditor/ConversationPictureEditor'
+export default {
+	name: 'GeneralConversationSettings',
+
+	components: {
+		ConversationPictureEditor,
+	},
+
+	props: {
+		token: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			isSettingConversationPicture: false,
+		}
+	},
+
+	computed: {
+		conversation() {
+			return this.$store.getters.conversation(this.token)
+		},
+
+		conversationName() {
+			return this.conversation.displayName
+		},
+
+		hasImage() {
+			return this.conversation.displayName
+		},
+	},
+
+	methods: {
+		setConversationPicture() {
+			this.isSettingConversationPicture = true
+		},
+	},
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+.general-settings {
+	display: flex;
+
+	&__picture {
+		height: 80px;
+		width: 80px;
+		flex: 0 0 auto;
+		border-radius: 120px;
+	}
+
+	&__details {
+		margin-left: 16px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+}
+
+.details {
+
+	&__name {
+		font-size: 18px;
+		font-weight: bold;
+	}
+}
+</style>
diff --git a/src/services/conversationsService.js b/src/services/conversationsService.js
index f7e1b3239d8..baa4ee6e25a 100644
--- a/src/services/conversationsService.js
+++ b/src/services/conversationsService.js
@@ -353,6 +353,8 @@ const setConversationDescription = async function(token, description) {
 	return response
 }
 
+// const getConversationPucture
+
 export {
 	fetchConversations,
 	fetchConversation,

From b159084029fbb12d2d8dcc1d69f60da5180e3057 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Wed, 20 Jan 2021 13:03:41 +0000
Subject: [PATCH 3/4] Add image to the cropper

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 .../ConversationPictureEditor.vue             | 37 +++++++++++++++----
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/ConversationPictureEditor/ConversationPictureEditor.vue b/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
index 4ae7da930a0..0fe2b6d1f96 100644
--- a/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
+++ b/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
@@ -31,7 +31,7 @@
 				type="file"
 				accept="image/png, image/jpeg"
 				class="hidden-visually"
-				@change="handleFileInput">
+				@change="loadImage">
 			<Cropper
 				:src="selectedPicture"
 				stencil-component="circle-stencil"
@@ -78,11 +78,11 @@ export default {
 	},
 
 	mounted() {
-		// Upon mounting the component, click the invisible file input right away
+		// Upon mounting the component, click the invisible file input immediately
 
-		// this.$nextTick(() => {
-		// this.clickInput()
-		// })
+		this.$nextTick(() => {
+			this.clickInput()
+		})
 	},
 
 	methods: {
@@ -108,9 +108,30 @@ export default {
 			this.$refs.conversationPictureInput.click()
 		},
 
-		handleFileInput(event) {
-			console.debug(event)
-			this.selectedPicture = event.target.files[0]
+		/**
+		 * Loads the image into the cropper
+		 * @param {object} event The event triggered by the input
+		 */
+		loadImage(event) {
+			// Loading state
+			this.isLoading = true
+			// Reference to the DOM input element
+			const input = event.target
+			// Ensure that a file exists before attempting to read it
+			if (input.files && input.files[0]) {
+				// create a new FileReader to read this image and convert to base64 format
+				const reader = new FileReader()
+				// Define a callback function to run, when FileReader finishes its job
+				reader.onload = (e) => {
+					// Note: arrow function used here, so that "this.imageData" refers to the imageData of Vue component
+					// Read image as base64 and set to imageData
+					this.selectedPicture = e.target.result
+				}
+				// Start the reader job - read file as a data url (base64 format)
+				reader.readAsDataURL(input.files[0])
+			}
+			// Loading state off
+			this.isLoading = false
 		},
 	},
 }

From 1c9f658d170f32d490737950ba6176753bc10dd0 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Thu, 21 Jan 2021 14:04:43 +0000
Subject: [PATCH 4/4] temp

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 .../ConversationPictureEditor.vue             | 42 +++++++++++++++----
 .../GeneralConversationSettings.vue           |  1 +
 src/services/conversationsService.js          | 14 ++++++-
 3 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/components/ConversationPictureEditor/ConversationPictureEditor.vue b/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
index 0fe2b6d1f96..aab7d273f15 100644
--- a/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
+++ b/src/components/ConversationPictureEditor/ConversationPictureEditor.vue
@@ -33,23 +33,27 @@
 				class="hidden-visually"
 				@change="loadImage">
 			<Cropper
+				ref="cropper"
 				:src="selectedPicture"
+				:resize-image="false"
 				stencil-component="circle-stencil"
 				:stencil-props="{
 					movable: true,
 					scalable: true,
 					aspectRatio: 1,
-				}"
-				:resize-image="{
-					adjustStencil: false
-				}"
-				image-restriction="stencil" />
+					stencilSize: ({ boundaries }) => {
+						return {
+							width: boundaries.width,
+							height: boundaries.height,
+						}
+					}
+				}" />
 			<div class="actions" />
 			<div class="conversation-picture-editor__actions">
 				<button @click="handleDismiss">
 					{{ t('spreed', 'Dismiss') }}
 				</button>
-				<button ref="submitButton" class="primary" @click="handleUpload">
+				<button ref="submitButton" class="primary" @click="uploadResult">
 					{{ t('spreed', 'Send') }}
 				</button>
 			</div>
@@ -61,7 +65,7 @@
 
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 import { Cropper } from 'vue-advanced-cropper'
-
+import { setConversationPicture } from '../../services/conversationsService'
 export default {
 	name: 'ConversationPictureEditor',
 
@@ -70,9 +74,16 @@ export default {
 		Cropper,
 	},
 
+	props: {
+		token: {
+			type: String,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
-			selectedPicture: 'https://nextcloud.local/remote.php/dav/files/admin/Peek%202020-11-12%2014-23.gif',
+			selectedPicture: '',
 			croppedPicture: null,
 		}
 	},
@@ -133,6 +144,19 @@ export default {
 			// Loading state off
 			this.isLoading = false
 		},
+
+		async uploadResult() {
+			const { canvas } = this.$refs.cropper.getResult()
+			if (canvas) {
+				await canvas.toBlob(async blob => {
+					try {
+						await setConversationPicture(this.token, blob)
+					} catch (exception) {
+						console.debug(exception)
+					}
+				}, 'image/jpeg')
+			}
+		},
 	},
 }
 </script>
@@ -141,7 +165,7 @@ export default {
 @import '../../assets/variables.scss';
 
 .conversation-picture-editor {
-	max-width: 400px;
+	max-width: 480px;
 	&__actions {
 		display: flex;
 		justify-content: flex-end;
diff --git a/src/components/ConversationSettings/GeneralConversationSettings.vue b/src/components/ConversationSettings/GeneralConversationSettings.vue
index 262778604fd..d996e9287cd 100644
--- a/src/components/ConversationSettings/GeneralConversationSettings.vue
+++ b/src/components/ConversationSettings/GeneralConversationSettings.vue
@@ -23,6 +23,7 @@
 	<div class="general-settings">
 		<ConversationPictureEditor
 			v-if="isSettingConversationPicture"
+			:token="token"
 			@close="isSettingConversationPicture = false" />
 		<button class="general-settings__picture icon-user"
 			@click="setConversationPicture">
diff --git a/src/services/conversationsService.js b/src/services/conversationsService.js
index baa4ee6e25a..920661e3694 100644
--- a/src/services/conversationsService.js
+++ b/src/services/conversationsService.js
@@ -353,7 +353,18 @@ const setConversationDescription = async function(token, description) {
 	return response
 }
 
-// const getConversationPucture
+const setConversationPicture = async function(token, blob) {
+	const formData = new FormData()
+	formData.append('name', 'files[]')
+	formData.append('contents', blob)
+	console.log('formData', formData, 'blob', blob)
+	const response = await axios.post(generateOcsUrl('apps/spreed/api/v3', 2) + `avatar/${token}`, formData, {
+		headers: {
+			'Content-Type': 'multipart/form-data;boundary=----WebKitFormBoundaryyrV7KO0BoCBuDbTL',
+		},
+	})
+	return response
+}
 
 export {
 	fetchConversations,
@@ -377,4 +388,5 @@ export {
 	setConversationPassword,
 	setConversationName,
 	setConversationDescription,
+	setConversationPicture,
 }