Hide Mouse when on top of video player

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

@@ -50,6 +50,7 @@ export default Vue.extend({
       useDash: false,
       useHls: false,
       activeSourceList: [],
+      mouseTimeout: null,
       dataSetup: {
         aspectRatio: '16:9',
         nativeTextTracks: false,
@@ -115,6 +116,7 @@ export default Vue.extend({
     if (this.player !== null && !this.player.isInPictureInPicture()) {
       this.player.dispose()
       this.player = null
+      clearTimeout(this.mouseTimeout)
     }
   },
   methods: {
@@ -147,6 +149,15 @@ export default Vue.extend({
         }
 
         $(document).on('keydown', this.keyboardShortcutHandler)
+
+        this.player.on('mousemove', this.hideMouseTimeout)
+        this.player.on('mouseleave', this.removeMouseTimeout)
+
+        const v = this
+
+        this.player.on('error', function (error, message) {
+          v.$emit('error', error.target.player.error_)
+        })
       }
     },
 
@@ -261,6 +272,27 @@ export default Vue.extend({
       }
     },
 
+    hideMouseTimeout: function () {
+      if (this.id === '') {
+        return
+      }
+
+      const videoPlayer = $(`#${this.id} video`).get(0)
+      if (typeof (videoPlayer) !== 'undefined') {
+        videoPlayer.style.cursor = 'default'
+        clearTimeout(this.mouseTimeout)
+        this.mouseTimeout = window.setTimeout(function () {
+          videoPlayer.style.cursor = 'none'
+        }, 2650)
+      }
+    },
+
+    removeMouseTimeout: function () {
+      if (this.mouseTimeout !== null) {
+        clearTimeout(this.mouseTimeout)
+      }
+    },
+
     keyboardShortcutHandler: function (event) {
       const activeInputs = $('.ft-input')
 
@@ -396,6 +428,7 @@ export default Vue.extend({
     if (this.player !== null && !this.player.isInPictureInPicture()) {
       this.player.dispose()
       this.player = null
+      clearTimeout(this.mouseTimeout)
     }
   }
 })

src/renderer/components/watch-video-info/watch-video-info.css

@@ -4,7 +4,7 @@
 
 .videoTitle {
   font-size: 22px;
-  max-width: 60%;
+  max-width: 50%;
 }
 
 .channelInformation {

src/renderer/views/Watch/Watch.js

@@ -258,6 +258,18 @@ export default Vue.extend({
       setTimeout(() => {
         this.hidePlayer = false
       }, 100)
+    },
+
+    handleVideoError: function (error) {
+      console.log(error)
+      if (error.code === 4) {
+        if (this.activeFormat === 'dash') {
+          console.log('Unable to play dash formats.  Reverting to legacy formats...')
+          this.enableLegacyFormat()
+        } else {
+          this.enableDashFormat()
+        }
+      }
     }
   }
 })

src/renderer/views/Watch/Watch.vue

@@ -14,6 +14,7 @@
       class="videoPlayer"
       :class="{ theatrePlayer: useTheatreMode }"
       ref="videoPlayer"
+      @error="handleVideoError"
     />
     <watch-video-info
       v-if="!isLoading"