Merge pull request fpvout#11 from sahibalejandro/feature/fpvout#7-use…

…r-agent-check

Check userAgent and notify user about compatibility.

src/ui/views/ViewUSB/Index.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="">
-
+  <div>
     <md-dialog :md-active.sync="showHelp">
       <md-dialog-title>Help</md-dialog-title>
       <div class="md-dialog-content">
@@ -16,17 +15,16 @@
         <md-button class="md-primary" @click="showHelp = false">Ok</md-button>
       </md-dialog-actions>
     </md-dialog>
-
-    <div class="">
-      <div class="flex justify-between">
-        <p>{{ pairedGoggles.length }} Goggles connected</p>
-        <div class="flex align-center">
-          <md-button @click="requestConnection" class="md-raised md-accent">Connect To Goggles</md-button>
-          <md-button @click="showHelp = true" class="md-icon-button"><icon icon="help"></icon></md-button>
-        </div>
+
+    <div class="flex justify-between">
+      <p>{{ pairedGoggles.length }} Goggles connected</p>
+      <div class="flex align-center">
+        <div v-if="!compatibleBrowser">Your browser is not compatible, please use Google Chrome.</div>
+        <md-button @click="requestConnection" class="md-raised md-accent" :disabled="!compatibleBrowser">Connect To Goggles</md-button>
+        <md-button @click="showHelp = true" class="md-icon-button"><icon icon="help"></icon></md-button>
       </div>
-      <goggles v-for="(device, index) in pairedGoggles" :key="index" :device="device" />
     </div>
+    <goggles v-for="(device, index) in pairedGoggles" :key="index" :device="device" />
   </div>
 </template>
 
@@ -42,7 +40,10 @@ export default {
       showHelp: false,
     }
   },
-  created() {
+  computed: {
+    compatibleBrowser() {
+      return navigator.userAgent.indexOf('Chrome') !== -1;
+    },
   },
   methods: {
     async connectToGoggles(device) {
@@ -70,4 +71,4 @@ export default {
   .justify-between {
     justify-content: space-between;
   }
-</style>
+</style>