Create browserCheck mixin

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

package-lock.json

@@ -20821,6 +20821,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: {},

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,42 @@
+/**
+ * @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 = {
+	mounted() {
+		if (this.$browserDetect.isFirefox) {
+			showError(
+				t('spreed', `The browser you're using is not supported. Please use the latest version of {firefox}, {edge}, {chrome} or {safari}.`)
+					.replace('{firefox}', '<a  target="_blank" rel="noreferrer nofollow" class="external" href="https://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a>')
+					.replace('{edge}', '<a  target="_blank" rel="noreferrer nofollow" class="external" href="https://www.microsoft.com/en-us/edge">Microsoft Edge</a>')
+					.replace('{chrome}', '<a  target="_blank" rel="noreferrer nofollow" class="external" href="https://www.google.com/chrome/?brand=CHBD&gclid=EAIaIQobChMIkY_v0ZDU6AIVhYXVCh0sfA7XEAAYASAAEgIKfPD_BwE&gclsrc=aw.ds">Google Chrome</a>')
+					.replace('{safari}', '<a  target="_blank" rel="noreferrer nofollow" class="external" href="https://support.apple.com/downloads/safari">Apple Safari</a>'),
+				{
+					timeout: 30,
+					isHTML: true,
+				})
+		}
+	},
+}
+
+export default browserCheck