diff --git a/client/src/components/video.vue b/client/src/components/video.vue index 19dad1a2..d6684e87 100644 --- a/client/src/components/video.vue +++ b/client/src/components/video.vue @@ -65,7 +65,7 @@
  • @@ -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() } }