Hide cursor after 2s in fullscreen

renderer/index.css

@@ -285,7 +285,15 @@ body.drag::before {
 }
 
 .player:hover .player-controls {
- opacity: 1;
+  opacity: 1;
+}
+
+.player.hide:hover .player-controls {
+  opacity: 0;
+}
+
+.player.hide {
+  cursor: none;
 }
 
 /* invisible click target for scrubbing */

renderer/index.js

@@ -55,7 +55,8 @@ var state = global.state = {
   video: {
     isPaused: false,
     currentTime: 0, /* seconds */
-    duration: 1 /* seconds */
+    duration: 1, /* seconds */
+    mouseStationarySince: 0 /* Unix time in ms */
   },
 
   /* Saved state is read from and written to ~/.webtorrent/state.json
@@ -207,6 +208,9 @@ function dispatch (action, ...args) {
   if (action === 'toggleFullScreen') {
     electron.ipcRenderer.send('toggleFullScreen')
   }
+  if (action === 'fullscreenVideoMouseMoved') {
+    state.video.mouseStationarySince = new Date().getTime()
+  }
 }
 
 electron.ipcRenderer.on('addTorrent', function (e, torrentId) {
@@ -360,7 +364,10 @@ function setDimensions (dimensions) {
   var width = Math.floor(dimensions.width * scaleFactor)
   var height = Math.floor(dimensions.height * scaleFactor)
 
-  height += HEADER_HEIGHT
+  // Video player header only shows in OSX where it's part of the title bar. See app.js
+  if (process.platform === 'darwin') {
+    height += HEADER_HEIGHT
+  }
 
   // Center window on screen
   var x = Math.floor((workAreaSize.width - width) / 2)

renderer/views/player.js

@@ -23,10 +23,15 @@ function Player (state, dispatch) {
     state.video.duration = videoElement.duration
   }
 
+  // When in fullscreen, hide player controls if the mouse stays still for a while
+  var hideControls = state.isFullScreen &&
+    state.video.mouseStationarySince !== 0 &&
+    new Date().getTime() - state.video.mouseStationarySince > 2000
+
   // Show the video as large as will fit in the window, play immediately
   return hx`
-    <div class="player">
-      <div class="letterbox">
+    <div class="player ${hideControls ? 'hide' : ''}" onmousemove=${onMouseMove}>
+      <div class="letterbox" onmousemove=${onMouseMove}>
         <video
           src="${state.server.localURL}"
           onloadedmetadata=${onLoadedMetadata}
@@ -37,6 +42,10 @@ function Player (state, dispatch) {
     </div>
   `
 
+  function onMouseMove () {
+    if (state.isFullScreen) dispatch('fullscreenVideoMouseMoved')
+  }
+
   // As soon as the video loads far enough to know the dimensions, resize the
   // window to match the video resolution
   function onLoadedMetadata (e) {