Use a better lib for browser detection

Signed-off-by: Joas Schilling <coding@schilljs.com>

package-lock.json

@@ -20333,6 +20333,11 @@
 				"is-typedarray": "^1.0.0"
 			}
 		},
+		"ua-parser-js": {
+			"version": "0.7.21",
+			"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
+			"integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
+		},
 		"uglify-js": {
 			"version": "3.4.10",
 			"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -20804,14 +20809,6 @@
 			"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.13",
-			"resolved": "https://registry.npmjs.org/vue-browser-detect-plugin/-/vue-browser-detect-plugin-0.1.13.tgz",
-			"integrity": "sha512-q6vFj+wLXiO+yQAf1Z1bElWiU+JCaG+NRpgwhJ9kp7H3t6EgO8u93QoQsmjLfEjDp59bGQNGsYFxDMX8L7mgpA==",
-			"requires": {
-				"vue": "^2.6.11"
-			}
-		},
 		"vue-clipboard2": {
 			"version": "0.3.1",
 			"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",

package.json

@@ -36,11 +36,11 @@
 		"mockconsole": "0.0.1",
 		"nextcloud-vue-collections": "^0.7.2",
 		"sdp-transform": "^2.14.0",
+		"ua-parser-js": "^0.7.21",
 		"url-parse": "^1.4.7",
 		"util": "^0.12.3",
 		"vue": "^2.6.11",
 		"vue-at": "^2.5.0-beta.2",
-		"vue-browser-detect-plugin": "^0.1.13",
 		"vue-clipboard2": "^0.3.1",
 		"vue-fragment": "^1.5.1",
 		"vue-material-design-icons": "^4.6.0",

src/main.js

@@ -37,15 +37,11 @@ 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
@@ -62,7 +58,6 @@ 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,9 +30,6 @@ 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'
@@ -59,7 +56,6 @@ 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,9 +30,6 @@ 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'
@@ -55,7 +52,6 @@ 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,9 +29,6 @@ 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'
@@ -54,7 +51,6 @@ 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

@@ -21,10 +21,12 @@
  */
 
 import { showError } from '@nextcloud/dialogs'
+import UAParser from 'ua-parser-js'
 
 const browserCheck = {
 	methods: {
 		checkBrowser() {
+			console.info('Detected browser ' + this.browser.name + ' ' + this.browser.version)
 			if (!this.isFullySupported) {
 				showError(
 					this.unsupportedWarning,
@@ -35,18 +37,39 @@ const browserCheck = {
 		},
 	},
 	computed: {
+		browser() {
+			const parser = new UAParser()
+			return parser.getBrowser()
+		},
+
+		isFirefox() {
+			return this.browser.name === 'Firefox'
+		},
+		isChrome() {
+			return this.browser.name === 'Chrome' || this.browser.name === 'Chromium'
+		},
+		isSafari() {
+			return this.browser.name === 'Safari' || this.browser.name === 'Mobile Safari'
+		},
+		isEdge() {
+			return this.browser.name === 'Edge'
+		},
+		isIE() {
+			return this.browser.name === 'IE' || this.browser.name === 'IEMobile'
+		},
+
 		isFullySupported() {
-			return (this.$browserDetect.isFirefox && this.$browserDetect.meta.version >= 52)
-			|| (this.$browserDetect.isChrome && this.$browserDetect.meta.version >= 49)
-			|| (this.$browserDetect.isSafari && this.$browserDetect.meta.version >= 12)
-			|| this.$browserDetect.isEdge
+			return (this.isFirefox && this.browser.version >= 52)
+			|| (this.isChrome && this.browser.version >= 49)
+			|| (this.isSafari && this.browser.version >= 12)
+			|| this.isEdge
 		},
 		// 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.isSafari && this.$browserDetect.meta.version < 12)
-			|| this.$browserDetect.isIE
+			return (this.isFirefox && this.browser.version < 52)
+			|| (this.isChrome && this.browser.version < 49)
+			|| (this.isSafari && this.browser.version < 12)
+			|| this.isIE
 		},
 		// Used both in the toast and in the call button tooltip
 		unsupportedWarning() {