Loading spinner: center, text-overflow ellipsis

renderer/index.css

@@ -713,8 +713,7 @@ body.drag .torrent-placeholder span {
  */
 
 .media-overlay {
-  width: 500px;
+  max-width: calc(100% - 80px);
-  max-width: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
   align-self: center;
@@ -730,6 +729,17 @@ body.drag .torrent-placeholder span {
   margin: 40px auto;
 }
 
+.media-stalled .loading-status {
+  font-size: 18px;
+  font-weight: normal;
+  text-align: center;
+}
+
+.audio-metadata div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .audio-metadata .audio-title {
   font-size: 32px;
 }

renderer/views/player.js

@@ -135,11 +135,16 @@ function renderAudioMetadata (state) {
     track = info.track.no + ' of ' + info.track.of
   }
 
-  // Show a small info box in the middle of the screen
+  // Show a small info box in the middle of the screen with title/album/artist/etc
-  var elems = [hx`<div class='audio-title'><label></label>${title}</div>`]
+  var elems = []
   if (artist) elems.push(hx`<div class='audio-artist'><label>Artist</label>${artist}</div>`)
   if (album) elems.push(hx`<div class='audio-album'><label>Album</label>${album}</div>`)
   if (track) elems.push(hx`<div class='audio-track'><label>Track</label>${track}</div>`)
+
+  // Align the title with the artist/etc info, if available. Otherwise, center the title
+  var emptyLabel = hx`<label></label>`
+  elems.unshift(hx`<div class='audio-title'>${elems.length ? emptyLabel : undefined}${title}</div>`)
+
   return hx`<div class='audio-metadata'>${elems}</div>`
 }
 
@@ -157,7 +162,7 @@ function renderLoadingSpinner (state) {
   return hx`
     <div class='media-stalled'>
       <div class='loading-spinner'>&nbsp;</div>
-      <div class='status ellipsis'>
+      <div class='loading-status ellipsis'>
         <span class='progress'>${progress}%</span> downloaded,
         <span>↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s</span>
         <span>↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s</span>