diff --git a/renderer/index.css b/renderer/index.css index 0f7618e4..1bf15e8d 100644 --- a/renderer/index.css +++ b/renderer/index.css @@ -713,8 +713,7 @@ body.drag .torrent-placeholder span { */ .media-overlay { - width: 500px; - max-width: 100%; + max-width: calc(100% - 80px); 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; } diff --git a/renderer/views/player.js b/renderer/views/player.js index c404c497..3aee668e 100644 --- a/renderer/views/player.js +++ b/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 - var elems = [hx`
${title}
`] + // Show a small info box in the middle of the screen with title/album/artist/etc + var elems = [] if (artist) elems.push(hx`
${artist}
`) if (album) elems.push(hx`
${album}
`) if (track) elems.push(hx`
${track}
`) + + // Align the title with the artist/etc info, if available. Otherwise, center the title + var emptyLabel = hx`` + elems.unshift(hx`
${elems.length ? emptyLabel : undefined}${title}
`) + return hx`
${elems}
` } @@ -157,7 +162,7 @@ function renderLoadingSpinner (state) { return hx`
 
-
+
${progress}% downloaded, ↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s ↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s