Location sharing frontend

lib/Controller/PageController.php

@@ -261,6 +261,7 @@ public function index(string $token = '', string $callUser = '', string $passwor
 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedConnectDomain('*');
 		$csp->addAllowedMediaDomain('blob:');
+		$csp->addAllowedImageDomain('https://*.tile.openstreetmap.org');
 		$response->setContentSecurityPolicy($csp);
 		return $response;
 	}
@@ -312,6 +313,7 @@ protected function guestEnterRoom(string $token, string $password): Response {
 		$csp = new ContentSecurityPolicy();
 		$csp->addAllowedConnectDomain('*');
 		$csp->addAllowedMediaDomain('blob:');
+		$csp->addAllowedImageDomain('https://*.tile.openstreetmap.org');
 		$response->setContentSecurityPolicy($csp);
 		return $response;
 	}

lib/Listener/CSPListener.php

@@ -46,6 +46,7 @@ public function handle(Event $event): void {
 		}
 
 		$csp = new ContentSecurityPolicy();
+		$csp->addAllowedImageDomain('https://*.tile.openstreetmap.org');
 		foreach ($this->config->getAllServerUrlsForCSP() as $server) {
 			$csp->addAllowedConnectDomain($server);
 		}

package.json

@@ -36,6 +36,8 @@
 		"emoji-regex": "^9.2.2",
 		"escape-html": "^1.0.3",
 		"hark": "^1.2.3",
+		"leaflet": "^1.7.1",
+		"leaflet-defaulticon-compatibility": "^0.1.1",
 		"lodash": "^4.17.21",
 		"mockconsole": "0.0.1",
 		"nextcloud-vue-collections": "^0.9.0",
@@ -54,6 +56,7 @@
 		"vue-resize": "^1.0.1",
 		"vue-router": "^3.5.1",
 		"vue-shortkey": "^3.1.7",
+		"vue2-leaflet": "^2.7.0",
 		"vuex": "^3.6.2",
 		"webdav": "^4.3.0",
 		"webrtc-adapter": "^7.7.1",

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

@@ -214,6 +214,7 @@ import {
 	TOAST_DEFAULT_TIMEOUT,
 } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
+import Location from './MessagePart/Location'
 
 export default {
 	name: 'Message',
@@ -492,6 +493,11 @@ export default {
 						component: DeckCard,
 						props: this.messageParameters[p],
 					}
+				} else if (type === 'geo-location') {
+					richParameters[p] = {
+						component: Location,
+						props: this.messageParameters[p],
+					}
 				} else {
 					richParameters[p] = {
 						component: DefaultParameter,

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

@@ -0,0 +1,132 @@
+<!--
+  - @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 :href="mapLink"
+		target="_blank"
+		rel="noopener noreferrer"
+		class="location"
+		:aria-label="linkAriaLabel">
+		<LMap
+			:zoom="previewZoom"
+			:center="center"
+			:options="{
+				scrollWheelZoom: false,
+				zoomControl: false,
+				dragging: false,
+				attributionControl: false,
+			}"
+			@scroll.prevent="">
+			<LTileLayer :url="url" />
+			<LMarker :lat-lng="center">
+				<LTooltip
+					:options="{
+						direction: 'top',
+						permanent: 'true',
+						offset: [-16,-14]}">
+					{{ name }}
+				</LTooltip>
+			</LMarker>
+		</LMap>
+	</a>
+</template>
+
+<script>
+import { LMap, LTileLayer, LMarker, LTooltip } from 'vue2-leaflet'
+
+export default {
+	name: 'Location',
+
+	components: {
+		LMap,
+		LTileLayer,
+		LMarker,
+		LTooltip,
+	},
+
+	props: {
+		/**
+		 * The latitude of the location
+		 */
+		latitude: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * The longitude of the location
+		 */
+		longitude: {
+			type: String,
+			required: true,
+		},
+
+		/**
+		 * The name of the location
+		 */
+		name: {
+			type: String,
+			default: '',
+		},
+	},
+
+	data() {
+		return {
+			url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			// The zoom level of the map in the messages list
+			previewZoom: 13,
+			// The zoom level of the map in the new openstreetmap tab upon
+			// Opening the link
+			linkZoom: 18,
+
+		}
+	},
+
+	computed: {
+		center() {
+			return [this.latitude, this.longitude]
+		},
+
+		mapLink() {
+			return `https://www.openstreetmap.org/?mlat=${this.latitude}&mlon=${this.longitude}#map=${this.linkZoom}/${this.latitude}/${this.longitude}`
+		},
+
+		linkAriaLabel() {
+			return t('spreed', 'Open this location in Openstreetmap')
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.location {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	z-index: 1;
+	white-space: initial;
+	overflow: hidden;
+	border-radius: var(--border-radius-large);
+	height: 300px;
+	max-height: 30vh;
+	margin: 4px;
+}
+</style>

src/main.js

@@ -48,6 +48,12 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 // Styles
 import '@nextcloud/dialogs/styles/toast.scss'
+import 'leaflet/dist/leaflet.css'
+
+// Leaflet icon patch
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package
+// eslint-disable-next-line
+import 'leaflet-defaulticon-compatibility'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line

src/mainFilesSidebar.js

@@ -43,6 +43,12 @@ import vOutsideEvents from 'vue-outside-events'
 
 // Styles
 import '@nextcloud/dialogs/styles/toast.scss'
+import 'leaflet/dist/leaflet.css'
+
+// Leaflet icon patch
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package
+// eslint-disable-next-line
+import 'leaflet-defaulticon-compatibility'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line

src/mainPublicShareAuthSidebar.js

@@ -39,6 +39,12 @@ import vOutsideEvents from 'vue-outside-events'
 
 // Styles
 import '@nextcloud/dialogs/styles/toast.scss'
+import 'leaflet/dist/leaflet.css'
+
+// Leaflet icon patch
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package
+// eslint-disable-next-line
+import 'leaflet-defaulticon-compatibility'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line

src/mainPublicShareSidebar.js

@@ -38,6 +38,12 @@ import vOutsideEvents from 'vue-outside-events'
 
 // Styles
 import '@nextcloud/dialogs/styles/toast.scss'
+import 'leaflet/dist/leaflet.css'
+
+// Leaflet icon patch
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css' // Re-uses images from ~leaflet package
+// eslint-disable-next-line
+import 'leaflet-defaulticon-compatibility'
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line