From d4ad197a5aeb52b8e21972535a0f64e30b0861dd Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Mon, 19 Aug 2024 17:07:06 +0300
Subject: [PATCH] unsupported browser alert

---
 src/App.vue                                |  5 ++
 src/assets/translations/en.json            |  4 +-
 src/components/UnsupportedBrowserAlert.vue | 53 ++++++++++++++++++++++
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 src/components/UnsupportedBrowserAlert.vue

diff --git a/src/App.vue b/src/App.vue
index 32b5f2b..0a685ba 100644
--- a/src/App.vue
+++ b/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,
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index 50c591e..1f6e8ab 100644
--- a/src/assets/translations/en.json
+++ b/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",
diff --git a/src/components/UnsupportedBrowserAlert.vue b/src/components/UnsupportedBrowserAlert.vue
new file mode 100644
index 0000000..e8b3b71
--- /dev/null
+++ b/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>
\ No newline at end of file