From e43fb94a35631c0656b7b7e6ab155cf4f2c7b66e Mon Sep 17 00:00:00 2001 From: Emma Date: Mon, 24 Oct 2022 13:49:52 -0400 Subject: [PATCH] Improving touch input by bringing in `videojs-mobile-ui` (#2719) * Adding videojs-mobile-ui as a dependency - Using the beta because it fixes an issue with multiple version of videojs loading at once. This is related to MarmadileManteater#56. * Mapping defaultSkipInterval to seekSeconds * Adding CSS to prevent showing duplicate buttons - Added a new variable `usingTouch` to selectively hide the existing `vjs-big-play-button` when the `touch-overlay` is visible. * Renaming CSS class to something more specific * Adding text-shadow behind play / pause button This should make it more visually distinct against a light or colorful background. * Enabling touch-overlay anytime a touch is detected Disabling it whenever mouse input is detected The default behavior of `videojs-mobile-ui` is to only work in Android and iOS, but by forcing the touch behavior to be enabled and selectively showing it only when touch input is detected, it should work on any device with touch input even if the browser doesn't detect that it is running in Android or iOS. * Removing unnecessary code * Removing unintentionally leftover variable * Removing an unnecessary assignment Adding comments to explain why a flag called `forceForTesting` is set to true Disabling the `lockOnRotate` flag. * Moving this flag and wrapper class * Adding whitespace * Making my comment a little more consistent * Changing the punctuation of a comment * Adjusting the CSS to fix a firefox discrepancy * Adding a check for mobile firefox For whatever reason, mobile firefox sometimes triggers onmouseover when a touch occurs, and this is unwanted behavior. * Adding a drop-shadow to the ff and rw icons This should make them easier to see on top of light videos * Hiding the mobile play button according to setting - Added CSS to hide the videojs-mobile-ui play button when the `Display Play Button In Video Player` setting is disabled. * Replacing long computed string with class binding Co-authored-by: absidue <48293849+absidue@users.noreply.github.com> * Adding newline at the end of videoJS.css Co-authored-by: absidue <48293849+absidue@users.noreply.github.com> --- package.json | 1 + .../ft-video-player/ft-video-player.js | 42 ++++++++++++------- .../ft-video-player/ft-video-player.vue | 10 ++++- src/renderer/videoJS.css | 37 +++++++++++++++- yarn.lock | 7 ++++ 5 files changed, 77 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 8192347d..3a9a7821 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "video.js": "7.18.1", "videojs-contrib-quality-levels": "^2.1.0", "videojs-http-source-selector": "^1.1.6", + "videojs-mobile-ui": "^0.8.0", "videojs-overlay": "^2.1.4", "videojs-vtt-thumbnails-freetube": "0.0.15", "vue": "^2.7.13", diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js index 7b7a80e2..ad10b3b9 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -11,7 +11,8 @@ import 'videojs-overlay/dist/videojs-overlay.css' import 'videojs-vtt-thumbnails-freetube' import 'videojs-contrib-quality-levels' import 'videojs-http-source-selector' - +import 'videojs-mobile-ui' +import 'videojs-mobile-ui/dist/videojs-mobile-ui.css' import { IpcChannels } from '../../../constants' import { sponsorBlockSkipSegments } from '../../helpers/sponsorblock' import { calculateColorLuminance, colors, showToast } from '../../helpers/utils' @@ -105,11 +106,11 @@ export default Vue.extend({ activeAdaptiveFormats: [], mouseTimeout: null, touchTimeout: null, - lastTouchTime: null, playerStats: null, statsModal: null, showStatsModal: false, statsModalEventName: 'updateStats', + usingTouch: false, dataSetup: { fluid: true, nativeTextTracks: false, @@ -364,6 +365,22 @@ export default Vue.extend({ } } }) + this.player.mobileUi({ + fullscreen: { + enterOnRotate: true, + exitOnRotate: true, + lockOnRotate: false + }, + // Without this flag, the mobile UI will only activate + // if videojs detects it is in Android or iOS + // With this flag, the mobile UI could theoretically + // work on any device that has a touch input + forceForTesting: true, + touchControls: { + seekSeconds: this.defaultSkipInterval, + tapTimeout: 300 + } + }) this.player.volume(this.volume) this.player.playbackRate(this.defaultPlayback) @@ -1678,23 +1695,16 @@ export default Vue.extend({ } }, - handleTouchStart: function (event) { - this.touchPauseTimeout = setTimeout(() => { - this.togglePlayPause() - }, 1000) - - const touchTime = new Date() - - if (this.lastTouchTime !== null && (touchTime.getTime() - this.lastTouchTime.getTime()) < 250) { - this.toggleFullscreen() - } - - this.lastTouchTime = touchTime + handleTouchStart: function () { + this.usingTouch = true }, - handleTouchEnd: function (event) { - clearTimeout(this.touchPauseTimeout) + handleMouseOver: function () { + // This addresses a discrepancy that only seems to occur in the mobile version of firefox + if (navigator.userAgent.search('Firefox') !== -1 && (videojs.browser.IS_ANDROID || videojs.browser.IS_IOS)) { return } + this.usingTouch = false }, + toggleShowStatsModal: function() { if (this.format !== 'dash') { showToast(this.$t('Video.Stats.Video statistics are not available for legacy videos')) diff --git a/src/renderer/components/ft-video-player/ft-video-player.vue b/src/renderer/components/ft-video-player/ft-video-player.vue index cf5680e4..2685e9b8 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.vue +++ b/src/renderer/components/ft-video-player/ft-video-player.vue @@ -1,5 +1,12 @@