Merge pull request #11009 from nextcloud/refactor/browser-detection

refactor: make browserCheck an util instead of mixin

Author: nickvergessen

src/App.vue

@@ -57,14 +57,14 @@ import SettingsDialog from './components/SettingsDialog/SettingsDialog.vue'
 import { useActiveSession } from './composables/useActiveSession.js'
 import { useIsInCall } from './composables/useIsInCall.js'
 import { CONVERSATION, PARTICIPANT } from './constants.js'
-import browserCheck from './mixins/browserCheck.js'
 import participant from './mixins/participant.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
 import talkHashCheck from './mixins/talkHashCheck.js'
 import Router from './router/router.js'
 import BrowserStorage from './services/BrowserStorage.js'
 import { EventBus } from './services/EventBus.js'
 import { leaveConversationSync } from './services/participantsService.js'
+import { checkBrowser } from './utils/browserCheck.js'
 import { signalingKill } from './utils/webrtc/index.js'
 
 export default {
@@ -81,7 +81,6 @@ export default {
 	},
 
 	mixins: [
-		browserCheck,
 		talkHashCheck,
 		sessionIssueHandler,
 		participant,
@@ -474,8 +473,7 @@ export default {
 
 	async mounted() {
 		if (!IS_DESKTOP) {
-			// see browserCheck mixin
-			this.checkBrowser()
+			checkBrowser()
 		}
 		// Check sidebar status in previous sessions
 		if (BrowserStorage.getItem('sidebarOpen') === 'false') {

src/FilesSidebarTabApp.vue

@@ -52,13 +52,13 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import LoadingComponent from './components/LoadingComponent.vue'
 
-import browserCheck from './mixins/browserCheck.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
 import { EventBus } from './services/EventBus.js'
 import { getFileConversation } from './services/filesIntegrationServices.js'
 import {
 	leaveConversationSync,
 } from './services/participantsService.js'
+import { checkBrowser } from './utils/browserCheck.js'
 import CancelableRequest from './utils/cancelableRequest.js'
 import { signalingKill } from './utils/webrtc/index.js'
 
@@ -77,7 +77,6 @@ export default {
 	},
 
 	mixins: [
-		browserCheck,
 		sessionIssueHandler,
 	],
 
@@ -171,8 +170,7 @@ export default {
 
 	methods: {
 		async joinConversation() {
-			// see browserCheck mixin
-			this.checkBrowser()
+			checkBrowser()
 
 			try {
 				await this.getFileConversation()

src/PublicShareAuthRequestPasswordButton.vue

@@ -41,8 +41,8 @@
 <script>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
-import browserCheck from './mixins/browserCheck.js'
 import { getPublicShareAuthConversationToken } from './services/publicShareAuthService.js'
+import { checkBrowser } from './utils/browserCheck.js'
 
 export default {
 
@@ -52,10 +52,6 @@ export default {
 		NcButton,
 	},
 
-	mixins: [
-		browserCheck,
-	],
-
 	props: {
 		shareToken: {
 			type: String,
@@ -89,8 +85,7 @@ export default {
 
 	methods: {
 		async requestPassword() {
-			// see browserCheck mixin
-			this.checkBrowser()
+			checkBrowser()
 
 			this.hasRequestFailed = false
 			this.isRequestLoading = true

src/PublicShareSidebar.vue

@@ -68,7 +68,6 @@ import TopBar from './components/TopBar/TopBar.vue'
 import TransitionWrapper from './components/TransitionWrapper.vue'
 
 import { useIsInCall } from './composables/useIsInCall.js'
-import browserCheck from './mixins/browserCheck.js'
 import participant from './mixins/participant.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
 import talkHashCheck from './mixins/talkHashCheck.js'
@@ -77,6 +76,7 @@ import { getPublicShareConversationData } from './services/filesIntegrationServi
 import {
 	leaveConversationSync,
 } from './services/participantsService.js'
+import { checkBrowser } from './utils/browserCheck.js'
 import { signalingKill } from './utils/webrtc/index.js'
 
 export default {
@@ -95,7 +95,6 @@ export default {
 	},
 
 	mixins: [
-		browserCheck,
 		sessionIssueHandler,
 		participant,
 		talkHashCheck,
@@ -160,8 +159,7 @@ export default {
 	methods: {
 
 		async joinConversation() {
-			// see browserCheck mixin
-			this.checkBrowser()
+			checkBrowser()
 
 			this.joiningConversation = true
 

src/components/TopBar/CallButton.vue

@@ -112,12 +112,12 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { ATTENDEE, CALL, CONVERSATION, PARTICIPANT } from '../../constants.js'
-import browserCheck from '../../mixins/browserCheck.js'
 import isInLobby from '../../mixins/isInLobby.js'
 import participant from '../../mixins/participant.js'
 import { callSIPDialOut } from '../../services/callsService.js'
 import { EventBus } from '../../services/EventBus.js'
 import { useSettingsStore } from '../../stores/settings.js'
+import { blockCalls, unsupportedWarning } from '../../utils/browserCheck.js'
 
 export default {
 	name: 'CallButton',
@@ -140,7 +140,6 @@ export default {
 	},
 
 	mixins: [
-		browserCheck,
 		isInLobby,
 		participant,
 	],
@@ -310,7 +309,17 @@ export default {
 
 		isPhoneRoom() {
 			return this.conversation.objectType === CONVERSATION.OBJECT_TYPE.PHONE
-		}
+		},
+
+		callButtonTooltipText() {
+			if (blockCalls) {
+				return unsupportedWarning
+			} else {
+				// Passing a falsy value into the content of the tooltip
+				// is the only way to disable it conditionally.
+				return false
+			}
+		},
 	},
 
 	mounted() {

src/mixins/browserCheck.js

@@ -0,0 +1,80 @@
+/**
+ * @copyright Copyright (c) 2019 Marco Ambrosini <[email protected]>
+ *
+ * @author Marco Ambrosini <[email protected]>
+ * @author Grigorii K. Shartsev <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * 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 UAParser from 'ua-parser-js'
+
+import { showError, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
+import { translate as t } from '@nextcloud/l10n'
+
+const parser = new UAParser()
+const browser = parser.getBrowser()
+
+/**
+ * Per-browser flags and a major version
+ */
+
+export const isFirefox = browser.name === 'Firefox'
+export const isChrome = browser.name === 'Chrome' || browser.name === 'Chromium'
+export const isOpera = browser.name === 'Opera'
+export const isSafari = browser.name === 'Safari' || browser.name === 'Mobile Safari'
+export const isEdge = browser.name === 'Edge'
+export const isBrave = browser.name === 'Brave'
+export const isIE = browser.name === 'IE' || browser.name === 'IEMobile'
+export const isYandex = browser.name === 'Yandex'
+
+export const majorVersion = browser.version ? parseInt(browser.version.split('.')[0], 10) : 0
+
+/**
+ * Is the browser fully supported by Talk
+ */
+export const isFullySupported = (isFirefox && majorVersion >= 52)
+	|| (isChrome && majorVersion >= 49)
+	|| (isOpera && majorVersion >= 72)
+	|| (isSafari && majorVersion >= 12)
+	|| isEdge
+	|| isBrave
+	|| isYandex
+
+/**
+ * Are calls should be blocked due to browser incompatibility
+ */
+export const blockCalls = (isFirefox && majorVersion < 52)
+	|| (isChrome && majorVersion < 49)
+	|| (isOpera && majorVersion < 72)
+	|| (isSafari && majorVersion < 12)
+	|| isIE
+
+/**
+ * Reusable error message for unsupported browsers
+ */
+export const unsupportedWarning = 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, Opera or Apple Safari.")
+
+/**
+ * Show an error toast if the browser is not fully supported
+ */
+export function checkBrowser() {
+	console.info('Detected browser ' + browser.name + ' ' + majorVersion + ' (' + browser.version + ')')
+	if (!isFullySupported) {
+		showError(unsupportedWarning, { timeout: TOAST_PERMANENT_TIMEOUT })
+	}
+}