Merge pull request #2545 from nextcloud/feature/noid/prevent-unload-when-in-call

Prevent unload when in a call

package-lock.json

@@ -11591,6 +11591,11 @@
 			"resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
 			"integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
 		},
+		"vue-prevent-unload": {
+			"version": "0.2.3",
+			"resolved": "https://registry.npmjs.org/vue-prevent-unload/-/vue-prevent-unload-0.2.3.tgz",
+			"integrity": "sha512-QfHDDRiw5zrgaxyVJZxdyMPRHwuJDxveFB6vWGxFfWL1ee+VlkSHOOOri17uNTGzC+PC3OAW19FOJENeodnc8A=="
+		},
 		"vue-resize": {
 			"version": "0.4.5",
 			"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",

package.json

@@ -33,6 +33,7 @@
 		"vue-contenteditable-directive": "^1.2.0",
 		"vue-fragment": "^1.5.1",
 		"vue-observe-visibility": "^0.4.6",
+		"vue-prevent-unload": "^0.2.3",
 		"vue-router": "^3.1.3",
 		"vue-virtual-scroll-list": "^1.4.4",
 		"vuex": "^3.1.2"

src/App.vue

@@ -20,13 +20,14 @@
 -->
 
 <template>
-	<Content :class="{'icon-loading': loading, 'in-call': showChatInSidebar}" app-name="Talk">
+	<Content :class="{ 'icon-loading': loading, 'in-call': isInCall }" app-name="Talk">
 		<LeftSidebar v-if="getUserId" />
 		<AppContent>
 			<router-view />
 		</AppContent>
 		<RightSidebar
-			:show-chat-in-sidebar="showChatInSidebar" />
+			:show-chat-in-sidebar="isInCall" />
+		<PreventUnload :when="isInCall" />
 	</Content>
 </template>
 
@@ -34,6 +35,7 @@
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import Content from '@nextcloud/vue/dist/Components/Content'
 import LeftSidebar from './components/LeftSidebar/LeftSidebar'
+import PreventUnload from 'vue-prevent-unload'
 import Router from './router/router'
 import RightSidebar from './components/RightSidebar/RightSidebar'
 import { EventBus } from './services/EventBus'
@@ -45,10 +47,11 @@ import { PARTICIPANT } from './constants'
 export default {
 	name: 'App',
 	components: {
-		Content,
 		AppContent,
-		RightSidebar,
+		Content,
 		LeftSidebar,
+		PreventUnload,
+		RightSidebar,
 	},
 	data: function() {
 		return {
@@ -85,7 +88,7 @@ export default {
 			}
 		},
 
-		showChatInSidebar() {
+		isInCall() {
 			return this.participant.inCall !== PARTICIPANT.CALL_FLAG.DISCONNECTED
 		},