Audio-only player style update [Fixes #93659784]

Audio only player update so that it is visible in audio-only mode.  Further development for this (such as having a poster while audio is playing) would need to be a separate ticket to implement.  [Fixes #93659784]

src/css/flags/audioplayer.less

@@ -1,5 +1,28 @@
-.jwplayer {
-    &.jw-flag-audio-player {
+.jwplayer.jw-flag-audio-player {
+    background-color: transparent;
+
+    .jw-preview {
         background-color: transparent;
     }
+    .jw-controlbar {
+        display: table;
+        bottom: 0;
+        margin: 0;
+        width: 100%;
+        min-width: 100%;
+
+        .jw-icon-fullscreen {
+            display: none;
+        }
+
+        .jw-icon-tooltip {
+            display: none;
+        }
+    }
+
+    &.jw-state-idle {
+        .jw-playback-toggle-icon {
+            .jwplayer .jw-icon-play;
+        }
+    }
 }

src/css/imports/controlbar.less

@@ -20,8 +20,6 @@
     border: @def-border;
     border-radius: @ui-corner-round;
 
-    box-sizing: content-box;
-
     .jw-hidden {
         display: none;
     }

src/js/view/controlbar.js

@@ -197,8 +197,8 @@ define([
         onPlaylistItem : function(/*model, item*/) {
             this.elements.time.updateBuffer(0);
             this.elements.time.render(0);
-            this.elements.duration.innerHTML = '';
-            this.elements.elapsed.innerHTML = '';
+            this.elements.duration.innerHTML = '00:00';
+            this.elements.elapsed.innerHTML = '00:00';
 
             this._model.mediaModel.on('change:levels', function(model, levels) {
                 this.elements.hd.setup(levels, model.get('currentLevel'));

test/manual/index.html

@@ -207,12 +207,9 @@ <h2>Audio Single</h2>
 <div id="audio-container"></div>
 <script type="text/javascript">
     jwplayer('audio-container').setup({
-
         width: 640,
-        height: 30,
-
+        height: 34,
         file: '//content.bitsontherun.com/videos/3XnJSIm4-I3ZmuSFT.m4a'
-
     });
 </script>