From e5a64d9550b46fc3e1e5922ba93a712d3edd6108 Mon Sep 17 00:00:00 2001
From: Borewit <borewit@users.noreply.github.com>
Date: Mon, 19 Feb 2018 21:25:22 +0100
Subject: [PATCH] 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 | 13 +++++++++++++
 static/main.css                   |  7 ++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/renderer/pages/player-page.js b/src/renderer/pages/player-page.js
index a5769d5b..9d7d53a6 100644
--- a/src/renderer/pages/player-page.js
+++ b/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((
diff --git a/static/main.css b/static/main.css
index d1258dd5..49f6e35f 100644
--- a/static/main.css
+++ b/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
  */