Finiashed adding overlay that displays title (#789)

package-lock.json

@@ -16375,6 +16375,15 @@
         "es5-shim": "^4.5.1"
       }
     },
+    "videojs-overlay": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/videojs-overlay/-/videojs-overlay-2.1.4.tgz",
+      "integrity": "sha512-eonf+la2WHZJUvaZXtX1UtpwNRe8Zq5HUkBXgDX9zKOFQ9ppMio7LbYMBVKpei6BcqOOgdNVit1h7NGe6ySe3w==",
+      "requires": {
+        "global": "^4.3.2",
+        "video.js": "^6 || ^7"
+      }
+    },
     "videojs-replay": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/videojs-replay/-/videojs-replay-1.1.0.tgz",

package.json

@@ -30,6 +30,7 @@
     "videojs-abloop": "^1.2.0",
     "videojs-contrib-quality-levels": "^2.0.9",
     "videojs-http-source-selector": "^1.1.6",
+    "videojs-overlay": "^2.1.4",
     "videojs-replay": "^1.1.0",
     "videojs-vtt-thumbnails-freetube": "0.0.15",
     "vue": "^2.6.12",

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

@@ -5,6 +5,8 @@ import $ from 'jquery'
 import videojs from 'video.js'
 import qualitySelector from '@silvermine/videojs-quality-selector'
 import fs from 'fs'
+import 'videojs-overlay/dist/videojs-overlay'
+import 'videojs-overlay/dist/videojs-overlay.css'
 import 'videojs-vtt-thumbnails-freetube'
 import 'videojs-contrib-quality-levels'
 import 'videojs-http-source-selector'
@@ -206,6 +208,8 @@ export default Vue.extend({
         this.player.on('volumechange', this.updateVolume)
         this.player.controlBar.getChild('volumePanel').on('mousewheel', this.mouseScrollVolume)
 
+        this.player.on('fullscreenchange', this.fullscreenOverlay)
+
         const v = this
 
         this.player.on('ready', function () {
@@ -526,6 +530,35 @@ export default Vue.extend({
       }
     },
 
+    fullscreenOverlay: function () {
+      const v = this
+      const title = document.title.replace('- FreeTube', '')
+
+      if (this.player.isFullscreen()) {
+        this.player.ready(function () {
+          v.player.overlay({
+            overlays: [{
+              showBackground: false,
+              content: title,
+              start: 'mousemove',
+              end: 'userinactive'
+            }]
+          })
+        })
+      } else {
+        this.player.ready(function () {
+          v.player.overlay({
+            overlays: [{
+              showBackground: false,
+              content: ' ',
+              start: 'play',
+              end: 'loadstart'
+            }]
+          })
+        })
+      }
+    },
+
     keyboardShortcutHandler: function (event) {
       const activeInputs = $('.ft-input')
 
@@ -599,7 +632,7 @@ export default Vue.extend({
             break
           case 40:
             // Down Arrow Key
-            // Descrease Volume
+            // Decrease Volume
             event.preventDefault()
             this.changeVolume(-0.05)
             break
@@ -611,7 +644,7 @@ export default Vue.extend({
             break
           case 39:
             // Right Arrow Key
-            // Fast Foward by 5 seconds
+            // Fast Forward by 5 seconds
             event.preventDefault()
             this.changeDurationBySeconds(5)
             break

src/renderer/videoJS.css

@@ -2020,3 +2020,8 @@ video::-webkit-media-text-track-display {
   position: relative;
   top: -1px;
 }
+
+.vjs-overlay {
+  font-size: xx-large;
+  max-width: 100% !important;
+}