Merge pull request #3290 from nextcloud/feature/noid/show-unsupported-browser-warning

Feature/noid/show unsupported browser warning

package-lock.json

@@ -21012,6 +21012,14 @@
 			"resolved": "https://registry.npmjs.org/vue-at/-/vue-at-2.5.0-beta.2.tgz",
 			"integrity": "sha512-WXjngEaNyNWFU9unUUdK5kGolCHgG3jmlUIgeRnKlHpskbgGjIE/HGTOWnMfLEqjYJl9DTzt/SKPWDoFVaND/A=="
 		},
+		"vue-browser-detect-plugin": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/vue-browser-detect-plugin/-/vue-browser-detect-plugin-0.1.8.tgz",
+			"integrity": "sha512-b3GADgUfEe3MsIAshRTP7eDx4p8YyYqunQwkey4bOIqCJ7/ufeFu/7EIm8TqNjVsaipwbc0mX/ad8cmhYobiWw==",
+			"requires": {
+				"vue": "^2.5.17"
+			}
+		},
 		"vue-clipboard2": {
 			"version": "0.3.1",
 			"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",

package.json

@@ -39,6 +39,7 @@
 		"util": "^0.12.2",
 		"vue": "^2.6.11",
 		"vue-at": "^2.5.0-beta.2",
+		"vue-browser-detect-plugin": "^0.1.8",
 		"vue-clipboard2": "^0.3.1",
 		"vue-fragment": "^1.5.1",
 		"vue-observe-visibility": "^0.4.6",

src/App.vue

@@ -50,6 +50,7 @@ import {
 	connectSignaling,
 	getSignalingSync,
 } from './utils/webrtc/index'
+import browserCheck from './mixins/browserCheck'
 
 export default {
 	name: 'App',
@@ -60,6 +61,9 @@ export default {
 		PreventUnload,
 		RightSidebar,
 	},
+
+	mixins: [browserCheck],
+
 	data: function() {
 		return {
 			savedLastMessageMap: {},
@@ -286,6 +290,11 @@ export default {
 		}
 	},
 
+	mounted() {
+		// see browserCheck mixin
+		this.checkBrowser()
+	},
+
 	methods: {
 		fixmeDelayedSetupOfGuestUsers() {
 			// FIXME Refresh the data now that the user joined the conversation

src/FilesSidebarCallViewApp.vue

@@ -1,6 +1,8 @@
 <!--
   - @copyright Copyright (c) 2019, Daniel Calviño Sánchez <danxuliu@gmail.com>
   -
+  - @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
@@ -32,6 +34,7 @@
 import { PARTICIPANT } from './constants'
 import CallView from './components/CallView/CallView'
 import PreventUnload from 'vue-prevent-unload'
+import browserCheck from './mixins/browserCheck'
 
 export default {
 
@@ -42,6 +45,8 @@ export default {
 		PreventUnload,
 	},
 
+	mixins: [browserCheck],
+
 	data() {
 		return {
 			// Needed for reactivity.
@@ -148,6 +153,11 @@ export default {
 		},
 	},
 
+	mounted() {
+		// see browserCheck mixin
+		this.checkBrowser()
+	},
+
 	methods: {
 		setFileInfo(fileInfo) {
 		},

src/PublicShareAuthSidebar.vue

@@ -1,6 +1,8 @@
 <!--
   - @copyright Copyright (c) 2020, Daniel Calviño Sánchez <danxuliu@gmail.com>
   -
+  - @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
@@ -48,6 +50,8 @@ import {
 	getSignaling,
 	getSignalingSync,
 } from './utils/webrtc/index'
+import browserCheck from './mixins/browserCheck'
+
 export default {
 
 	name: 'PublicShareAuthSidebar',
@@ -57,6 +61,8 @@ export default {
 		ChatView,
 	},
 
+	mixins: [browserCheck],
+
 	data() {
 		return {
 			fetchCurrentConversationIntervalId: null,
@@ -107,6 +113,11 @@ export default {
 		})
 	},
 
+	mounted() {
+		// see browserCheck mixin
+		this.checkBrowser()
+	},
+
 	methods: {
 
 		async joinConversation() {

src/PublicShareSidebar.vue

@@ -1,6 +1,8 @@
 <!--
   - @copyright Copyright (c) 2020, Daniel Calviño Sánchez <danxuliu@gmail.com>
   -
+  - @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
@@ -56,6 +58,7 @@ import {
 	getSignaling,
 	getSignalingSync,
 } from './utils/webrtc/index'
+import browserCheck from './mixins/browserCheck'
 
 export default {
 
@@ -68,6 +71,8 @@ export default {
 		PreventUnload,
 	},
 
+	mixins: [browserCheck],
+
 	props: {
 		shareToken: {
 			type: String,
@@ -126,6 +131,11 @@ export default {
 		})
 	},
 
+	mounted() {
+		// see browserCheck mixin
+		this.checkBrowser()
+	},
+
 	methods: {
 
 		async joinConversation() {

src/components/TopBar/CallButton.vue

@@ -21,7 +21,14 @@
 
 <template>
 	<button v-if="showStartCallButton"
-		:disabled="startCallButtonDisabled || loading"
+		v-tooltip="{
+			placement: 'auto',
+			trigger: 'hover',
+			content: callButtonTooltipText,
+			autoHide: false,
+			html: true
+		}"
+		:disabled="startCallButtonDisabled || loading || blockCalls"
 		class="top-bar__button primary"
 		@click="joinCall">
 		<span
@@ -42,10 +49,18 @@
 
 <script>
 import { CONVERSATION, PARTICIPANT, WEBINAR } from '../../constants'
+import browserCheck from '../../mixins/browserCheck'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 export default {
 	name: 'CallButton',
 
+	directives: {
+		Tooltip,
+	},
+
+	mixins: [browserCheck],
+
 	data() {
 		return {
 			loading: false,

src/main.js

@@ -37,11 +37,15 @@ import router from './router/router'
 import { generateFilePath } from '@nextcloud/router'
 import { getRequestToken } from '@nextcloud/auth'
 
+// Plugins
+import browserDetect from 'vue-browser-detect-plugin'
+
 // Directives
 import VueClipboard from 'vue-clipboard2'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import VueObserveVisibility from 'vue-observe-visibility'
 import VueShortKey from 'vue-shortkey'
+Vue.use(browserDetect)
 
 // CSP config for webpack dynamic chunk loading
 // eslint-disable-next-line
@@ -58,6 +62,7 @@ Vue.prototype.t = translate
 Vue.prototype.n = translatePlural
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
+Vue.use(browserDetect)
 
 Vue.use(Vuex)
 Vue.use(VueRouter)

src/mainFilesSidebar.js

@@ -30,6 +30,9 @@ import FilesSidebarTabApp from './FilesSidebarTabApp'
 import Vuex from 'vuex'
 import store from './store'
 
+// Plugins
+import browserDetect from 'vue-browser-detect-plugin'
+
 // Utils
 import { generateFilePath } from '@nextcloud/router'
 import { getRequestToken } from '@nextcloud/auth'
@@ -56,6 +59,7 @@ Vue.prototype.OCA = OCA
 
 Vue.use(Vuex)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
+Vue.use(browserDetect)
 
 const newCallView = () => new Vue({
 	store,

src/mainPublicShareAuthSidebar.js

@@ -30,6 +30,9 @@ import store from './store'
 import { generateFilePath } from '@nextcloud/router'
 import { getRequestToken } from '@nextcloud/auth'
 
+// Plugins
+import browserDetect from 'vue-browser-detect-plugin'
+
 // Directives
 import { translate, translatePlural } from '@nextcloud/l10n'
 import VueShortKey from 'vue-shortkey'
@@ -52,6 +55,7 @@ Vue.prototype.OCA = OCA
 
 Vue.use(Vuex)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
+Vue.use(browserDetect)
 
 /**
  * Wraps all the body contents in its own container.

src/mainPublicShareSidebar.js

@@ -29,6 +29,9 @@ import store from './store'
 import { generateFilePath } from '@nextcloud/router'
 import { getRequestToken } from '@nextcloud/auth'
 
+// plugins
+import browserDetect from 'vue-browser-detect-plugin'
+
 // Directives
 import { translate, translatePlural } from '@nextcloud/l10n'
 import VueShortKey from 'vue-shortkey'
@@ -51,6 +54,7 @@ Vue.prototype.OCA = OCA
 
 Vue.use(Vuex)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
+Vue.use(browserDetect)
 
 function adjustLayout() {
 	document.querySelector('#app-content').append(document.querySelector('footer'))

src/mixins/browserCheck.js

@@ -0,0 +1,66 @@
+/**
+ * @copyright Copyright (c) 2019 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/>.
+ *
+ */
+
+import { showError } from '@nextcloud/dialogs'
+
+const browserCheck = {
+	methods: {
+		checkBrowser() {
+			if (!this.isFullySupported) {
+				showError(
+					this.unsupportedWarning,
+					{
+						timeout: 0,
+					})
+			}
+		},
+	},
+	computed: {
+		isFullySupported() {
+			return (this.$browserDetect.isFirefox && this.$browserDetect.meta.version >= 52)
+			|| (this.$browserDetect.isChrome && this.$browserDetect.meta.version >= 49)
+		},
+		// Disable the call button and show the tooltip
+		blockCalls() {
+			return (this.$browserDetect.isFirefox && this.$browserDetect.meta.version < 52)
+			|| (this.$browserDetect.isChrome && this.$browserDetect.meta.version < 49)
+			|| this.$browserDetect.isIE
+		},
+		// Used both in the toast and in the callbutton tooltip
+		unsupportedWarning() {
+			return t('spreed', "The browser you're using is not fully supported by Nextcloud Talk. Please use the latest version of Mozilla Firefox, Microsoft Edge, Google Chrome or Apple Safari.")
+		},
+		// Used in CallButton.vue
+		callButtonTooltipText() {
+			if (this.blockCalls) {
+				return this.unsupportedWarning
+			} else {
+				// Passind a falsy value into the content of the tooltip
+				// is the only way to disable it conditionally.
+				return false
+			}
+		},
+
+	},
+}
+
+export default browserCheck