Loading spinner for videos

Only worked for audio before

renderer/index.css

@@ -317,30 +317,6 @@ input {
   box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.1);
 }
 
-/*
- * PLAYER
- */
-
-.player {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: #000;
-}
-
-.player .letterbox {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  background-size: cover;
-  background-position: center center;
-}
-
-.player video {
-  display: block;
-  width: 100%;
-}
-
 /*
  * TORRENT LIST
  */
@@ -562,6 +538,28 @@ body.drag .torrent-placeholder span {
   text-align: right;
 }
 
+/*
+ * PLAYER
+ */
+
+.player {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+}
+
+.player .letterbox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.player video {
+  display: block;
+  width: 100%;
+}
+
 /*
  * PLAYER CONTROLS
  */
@@ -712,6 +710,17 @@ body.drag .torrent-placeholder span {
  * MEDIA OVERLAY / AUDIO DETAILS
  */
 
+.media-overlay-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-size: cover;
+  background-position: center center;
+}
+
 .media-overlay {
   max-width: calc(100% - 80px);
   white-space: nowrap;

renderer/index.js

@@ -258,6 +258,7 @@ function dispatch (action, ...args) {
     playPause()
   }
   if (action === 'play') {
+    if (state.location.pending()) return
     state.location.go({
       url: 'player',
       onbeforeload: function (cb) {

renderer/lib/location-history.js

@@ -4,6 +4,7 @@ function LocationHistory () {
   if (!new.target) return new LocationHistory()
   this._history = []
   this._forward = []
+  this._pending = null
 }
 
 LocationHistory.prototype.go = function (page) {
@@ -13,9 +14,12 @@ LocationHistory.prototype.go = function (page) {
 }
 
 LocationHistory.prototype._go = function (page) {
+  if (this._pending) return
   if (page.onbeforeload) {
+    this._pending = page
     page.onbeforeload((err) => {
       if (err) return
+      this._pending = null
       this._history.push(page)
     })
   } else {
@@ -59,3 +63,7 @@ LocationHistory.prototype.hasBack = function () {
 LocationHistory.prototype.hasForward = function () {
   return this._forward.length > 0
 }
+
+LocationHistory.prototype.pending = function () {
+  return this._pending
+}

renderer/views/player.js

@@ -70,16 +70,9 @@ function renderMedia (state) {
   mediaTag.tagName = mediaType
 
   // Show the media.
-  // Video fills the window, centered with black bars if necessary
-  // Audio gets a static poster image and a summary of the file metadata.
-  var isAudio = mediaType === 'audio'
-  var style = {
-    backgroundImage: isAudio ? cssBackgroundImagePoster(state) : ''
-  }
   return hx`
     <div
       class='letterbox'
-      style=${style}
       onmousemove=${dispatcher('mediaMouseMoved')}>
       ${mediaTag}
       ${renderOverlay(state)}
@@ -104,15 +97,28 @@ function renderMedia (state) {
 }
 
 function renderOverlay (state) {
+  var elems = []
   var audioMetadataElem = renderAudioMetadata(state)
   var spinnerElem = renderLoadingSpinner(state)
-
-  var elems = []
   if (audioMetadataElem) elems.push(audioMetadataElem)
   if (spinnerElem) elems.push(spinnerElem)
-  if (elems.length === 0) return
 
-  return hx`<div class='media-overlay'>${elems}</div>`
+  // Video fills the window, centered with black bars if necessary
+  // Audio gets a static poster image and a summary of the file metadata.
+  var style
+  if (state.playing.type === 'audio') {
+    style = { backgroundImage: cssBackgroundImagePoster(state) }
+  } else if (elems.length !== 0) {
+    style = { backgroundImage: cssBackgroundImageDarkGradient() }
+  } else {
+    return /* Video, not audio, and it isn't stalled, so no spinner. No overlay needed. */
+  }
+
+  return hx`
+    <div class='media-overlay-background' style=${style}>
+      <div class='media-overlay'>${elems}</div>
+    </div>
+  `
 }
 
 function renderAudioMetadata (state) {
@@ -201,9 +207,12 @@ function cssBackgroundImagePoster (state) {
   if (!torrentSummary || !torrentSummary.posterURL) return ''
   var posterURL = util.getAbsoluteStaticPath(torrentSummary.posterURL)
   var cleanURL = posterURL.replace(/\\/g, '/')
+  return cssBackgroundImageDarkGradient() + `, url(${cleanURL})`
+}
+
+function cssBackgroundImageDarkGradient () {
   return 'radial-gradient(circle at center, ' +
-    'rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 100%)' +
-    `, url(${cleanURL})`
+    'rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 100%)'
 }
 
 function getPlayingTorrentSummary (state) {