add mobile keyboard icon. (#497)

Author: m1k1o

client/src/components/video.vue

@@ -40,7 +40,12 @@
         <li v-if="admin"><i @click.stop.prevent="openResolution" class="fas fa-desktop"></i></li>
         <li v-if="!controlLocked && !implicitHosting" :class="extraControls || 'extra-control'">
           <i
-            :class="[hosted && !hosting ? 'disabled' : '', !hosted && !hosting ? 'faded' : '', 'fas', 'fa-keyboard']"
+            :class="[
+              hosted && !hosting ? 'disabled' : '',
+              !hosted && !hosting ? 'faded' : '',
+              'fas',
+              'fa-computer-mouse',
+            ]"
             @click.stop.prevent="toggleControl"
           />
         </li>
@@ -57,6 +62,13 @@
             class="fas fa-external-link-alt"
           />
         </li>
+        <li
+          v-if="hosting && is_touch_device"
+          :class="extraControls || 'extra-control'"
+          @click.stop.prevent="toggleMobileKeyboard"
+        >
+          <i class="fas fa-keyboard" />
+        </li>
       </ul>
       <neko-resolution ref="resolution" v-if="admin" />
       <neko-clipboard ref="clipboard" v-if="hosting && (!clipboard_read_available || !clipboard_write_available)" />
@@ -117,7 +129,7 @@
           }
           @media (max-width: 768px) {
             &.extra-control {
-              display: inline-block;
+              display: block;
             }
           }
 
@@ -353,6 +365,17 @@
       return this.$accessor.video.horizontal
     }
 
+    get is_touch_device() {
+      return (
+        // check if the device has a touch screen
+        ('ontouchstart' in window || navigator.maxTouchPoints > 0) &&
+        // we also check if the device has a pointer
+        !window.matchMedia('(pointer:fine)').matches &&
+        // and is capable of hover, then it probably has a mouse
+        !window.matchMedia('(hover:hover)').matches
+      )
+    }
+
     @Watch('width')
     onWidthChanged() {
       this.onResize()
@@ -804,5 +827,59 @@
         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()
+      }
+    }
   }
 </script>