Merge branch '579-banner-for-wechat-browser-to-move-people-to-another-browser' into 'dev'

Unsupported browser alert

See merge request keanuapp/keanuapp-weblite!313

src/App.vue

@@ -25,6 +25,7 @@
         type="list-item-avatar-two-line, divider, list-item-three-line, card-heading"
         v-if="showLoadingScreen"
       ></v-skeleton-loader>
+      <unsupported-browser-alert />
     </v-main>
   </v-app>
 </template>
@@ -34,10 +35,14 @@ import stickers from "./plugins/stickers";
 import { registerServiceWorker, notificationCount, windowNotificationPermission } from "./plugins/notificationAndServiceWorker.js"
 import logoMixin from "./components/logoMixin";
 import { mapState } from 'vuex'
+import UnsupportedBrowserAlert from "./components/UnsupportedBrowserAlert.vue";
 
 export default {
   name: "App",
   mixins: [logoMixin],
+  components: {
+    UnsupportedBrowserAlert
+  },
   data() {
     return {
       loading: true,

src/assets/translations/en.json

@@ -19,7 +19,9 @@
       "days": "1 day ago | {n} days ago"
     },
     "close": "close",
-    "notify": "Notify"
+    "notify": "Notify",
+    "different_browser_title": "Try different browser",
+    "different_browser_content": "Some features may break. Copy and open link in a different browser."
   },
   "menu": {
     "start_private_chat": "Direct Message with this user",

src/components/UnsupportedBrowserAlert.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-dialog
+    class="ma-0 pa-0"
+    v-model="isUnSupportedBrowser"
+    persistent
+    :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'"
+  >
+    <div class="dialog-content text-center">
+      <h2 class="dialog-title">{{ $t("global.different_browser_title") }}</h2>
+      <div class="dialog-text">{{ $t("global.different_browser_content") }}</div>
+      <v-card-actions class="pb-0">
+        <v-spacer></v-spacer>
+        <v-btn
+          :color="locationUrlCopied ? '#DEE6FF' : 'black'"
+          depressed
+          @click.stop="copyRoomLink1"
+          :class="{'filled-button' : true, 'link-copied-in-place' : locationUrlCopied}"
+          >{{ $t(`room_info.${locationUrlCopied ? 'link_copied' : 'copy_link'}`) }}</v-btn
+        >
+      </v-card-actions>
+    </div>
+  </v-dialog>
+</template>
+
+<script>
+const UNSUPPORTED_USER_AGENT = [
+  'MicroMessenger' // WeChat
+]
+
+export default {
+  data () {
+    return {
+      locationUrlCopied: false,
+      locationUrl: window.location.href
+    }
+  },
+  computed: {
+    isUnSupportedBrowser() {
+      return UNSUPPORTED_USER_AGENT.some((userAgent) => window.navigator.userAgent.includes(userAgent));
+    }
+  },
+  methods: {
+    copyRoomLink1() {
+      if(this.locationUrlCopied) return
+      navigator.clipboard.writeText(this.locationUrl)
+      this.locationUrlCopied = true;
+      setInterval(() => {
+        this.locationUrlCopied = false;
+      }, 3000);
+    }
+  }
+}
+</script>