Add comments to metadata media overlay.

Adjust the label element width to 120px to be able to fit in the text: 'Comments'.
Adjust the font-weight of the comments & format value to 'normal'.

src/renderer/pages/player-page.js

@@ -252,6 +252,11 @@ function renderAudioMetadata (state) {
   }
   format = format.join(', ')
 
+  let comments
+  if (common.comment) {
+    comments = common.comment.join(' / ')
+  }
+
   // Show a small info box in the middle of the screen with title/album/etc
   const elems = []
   if (artist) {
@@ -284,6 +289,14 @@ function renderAudioMetadata (state) {
   ))
   }
 
+  if (comments) {
+    elems.push((
+      <div key='comments' className='audio-comments'>
+        <label>Comments</label>{comments}
+      </div>
+    ))
+  }
+
   // Align the title with the other info, if available. Otherwise, center title
   const emptyLabel = (<label />)
   elems.unshift((

static/main.css

@@ -820,12 +820,17 @@ video::-webkit-media-text-track-container {
 
 .audio-metadata label {
   display:inline-block;
-  width: 100px;
+  width: 120px;
   text-align: right;
   font-weight: normal;
   margin-right: 25px;
 }
 
+.audio-metadata .audio-format,
+.audio-metadata .audio-comments {
+  font-weight: normal;
+}
+
 /*
  * ERRORS
  */