Add touch controls to video player (Hold to pause, doubel tap to fullscreen)

src/renderer/components/ft-video-player/ft-video-player.js

@@ -76,6 +76,8 @@ export default Vue.extend({
       maxFramerate: 0,
       activeSourceList: [],
       mouseTimeout: null,
+      touchTimeout: null,
+      lastTouchTime: null,
       dataSetup: {
         fluid: true,
         nativeTextTracks: false,
@@ -719,6 +721,25 @@ export default Vue.extend({
       }
     },
 
+    handleTouchStart: function (event) {
+      const v = this
+      this.touchPauseTimeout = setTimeout(() => {
+        v.togglePlayPause()
+      }, 1000)
+
+      const touchTime = new Date()
+
+      if (this.lastTouchTime !== null && (touchTime.getTime() - this.lastTouchTime.getTime()) < 250) {
+        this.toggleFullscreen()
+      }
+
+      this.lastTouchTime = touchTime
+    },
+
+    handleTouchEnd: function (event) {
+      clearTimeout(this.touchPauseTimeout)
+    },
+
     keyboardShortcutHandler: function (event) {
       const activeInputs = $('.ft-input')
 

src/renderer/components/ft-video-player/ft-video-player.vue

@@ -6,6 +6,8 @@
       :poster="thumbnail"
       controls
       preload="auto"
+      @touchstart="handleTouchStart"
+      @touchend="handleTouchEnd"
       :data-setup="JSON.stringify(dataSetup)"
     >
       <source