keep only openMobileKeyboard, do not focus when touch device.

client/src/components/video.vue

@@ -65,7 +65,7 @@
         <li
           v-if="hosting && is_touch_device"
           :class="extraControls || 'extra-control'"
-          @click.stop.prevent="toggleMobileKeyboard"
+          @click.stop.prevent="openMobileKeyboard"
         >
           <i class="fas fa-keyboard" />
         </li>
@@ -822,64 +822,20 @@
     @Watch('hosting')
     @Watch('locked')
     onFocus() {
+      // focus opens the keyboard on mobile
+      if (!this.is_touch_device) {
+        return
+      }
+
       // in order to capture key events, overlay must be focused
       if (this.focused && this.hosting && !this.locked) {
         this._overlay.focus()
       }
     }
 
-    //
-    // mobile keyboard
-    //
-
-    kbdShow = false
-    kbdOpen = false
-
-    showMobileKeyboard() {
-      // skip if not a touch device
-      if (!this.is_touch_device) return
-
-      this.kbdShow = true
-      this.kbdOpen = false
-
-      const overlay = this.$refs.overlay as HTMLTextAreaElement
-      overlay.focus()
-      window.visualViewport?.addEventListener('resize', this.onVisualViewportResize)
-    }
-
-    hideMobileKeyboard() {
-      // skip if not a touch device
-      if (!this.is_touch_device) return
-
-      this.kbdShow = false
-      this.kbdOpen = false
-
-      const overlay = this.$refs.overlay as HTMLTextAreaElement
-      window.visualViewport?.removeEventListener('resize', this.onVisualViewportResize)
-      overlay.blur()
-    }
-
-    toggleMobileKeyboard() {
-      // skip if not a touch device
-      if (!this.is_touch_device) return
-
-      if (this.kbdShow) {
-        this.hideMobileKeyboard()
-      } else {
-        this.showMobileKeyboard()
-      }
-    }
-
-    // visual viewport resize event is fired when keyboard is opened or closed
-    // android does not blur textarea when keyboard is closed, so we need to do it manually
-    onVisualViewportResize() {
-      if (!this.kbdShow) return
-
-      if (!this.kbdOpen) {
-        this.kbdOpen = true
-      } else {
-        this.hideMobileKeyboard()
-      }
+    openMobileKeyboard() {
+      // focus opens the keyboard on mobile
+      this._overlay.focus()
     }
   }
 </script>