[web-src] Only show quality informations if they are available

web-src/src/components/ModalDialogQueueItem.vue

@@ -53,7 +53,12 @@
                 </p>
                 <p>
                   <span class="heading">Quality</span>
-                  <span class="title is-6">{{ item.type}} | {{ item.samplerate }} Hz | {{ item.channels }} | {{ item.bitrate }} Kb/s</span>
+                  <span class="title is-6">
+                    {{ item.type }}
+                    <span v-if="item.samplerate"> | {{ item.samplerate }} Hz</span>
+                    <span v-if="item.channels"> | {{ item.channels | channels }}</span>
+                    <span v-if="item.bitrate"> | {{ item.bitrate }} Kb/s</span>
+                  </span>
                 </p>
               </div>
             </div>

web-src/src/components/ModalDialogTrack.vue

@@ -59,7 +59,12 @@
                 </p>
                 <p>
                   <span class="heading">Quality</span>
-                  <span class="title is-6">{{ track.type}} | {{ track.samplerate}} Hz | {{ track.channels }} channels | {{ track.bitrate}} Kb/s</span>
+                  <span class="title is-6">
+                    {{ track.type }}
+                    <span v-if="track.samplerate"> | {{ track.samplerate }} Hz</span>
+                    <span v-if="track.channels"> | {{ track.channels | channels }}</span>
+                    <span v-if="track.bitrate"> | {{ track.bitrate }} Kb/s</span>
+                  </span>
                 </p>
                 <p>
                   <span class="heading">Added at</span>

web-src/src/filter/index.js

@@ -24,3 +24,16 @@ Vue.filter('timeFromNow', function (value, withoutSuffix) {
 Vue.filter('number', function (value) {
   return value.toLocaleString()
 })
+
+Vue.filter('channels', function (value) {
+  if (value === 1) {
+    return 'mono'
+  }
+  if (value === 2) {
+    return 'stereo'
+  }
+  if (!value) {
+    return ''
+  }
+  return value + ' channels'
+})