[UI] Added a playqueue on mobile version, minor visual changes on desktop version

approot/templates.xml

@@ -356,15 +356,6 @@
 	</div>
 </message>
 
-<message id="mediaplayer-controls">
-	<div class="btn-group" role="group" aria-label="...">
-		${prev}
-		${play}
-		${pause}
-		${next}
-	</div>
-</message>
-
 <message id="mobile-search-title">
 	<div class="row">
 		<div class="col-xs-12">
@@ -426,7 +417,7 @@
 </message>
 
 <!--
-     wa-track_search
+     wa-track-search
       -> wa-track-search-res
       -> wa-track-search-res
       -> ...
@@ -445,7 +436,7 @@
 			<div class="vertical-align">
 				<div class="col-xs-2" style="margin-top:3px">${cover}</div>
 				<div class="col-xs-8">${artist-name}<br/>${track-name}</div>
-				<div class="col-xs-2" style="margin-top:3px"><span class="badge">${btn}</span></div>
+				<div class="col-xs-2">${play-btn}${add-btn}</div>
 			</div>
 		</div>
 	</div>
@@ -490,13 +481,36 @@
 </message>
 
 <message id="wa-trackview-track">
-	<div class="menu-item list-group-item ">${<if-has-disc-num>}${disc-num}-${</if-has-disc-num>}${<if-has-track-num>}${track-num}. ${</if-has-track-num>}${track-name} <span class="badge">${play-btn}</span></div>
+	<div class="menu-item list-group-item ">${<if-has-disc-num>}${disc-num}-${</if-has-disc-num>}${<if-has-track-num>}${track-num}. ${</if-has-track-num>}${track-name} ${play-btn}${add-btn}</div>
+</message>
+
+<!-- Playqueue view
+     !-->
+<message id="wa-playqueue-view">
+	${controls}
+	<div class="menu-category list-group">
+		${contents}
+	</div>
+</message>
+
+<message id="wa-playqueue-controls">
+	${load}${save}${clear}${shuffle}${repeat}
+</message>
+
+<message id="wa-playqueue-track">
+	<div class="row">
+		<div class="vertical-align">
+			<div class="col-xs-2" style="margin-top:3px">${cover}</div>
+			<div class="col-xs-8">${artist-name}<br/>${track-name}</div>
+			<div class="col-xs-2" style="margin-top:3px">${play-btn}${del-btn}</div>
+		</div>
+	</div>
 </message>
 
 <message id="wa-audio-player">
 	${audio}
 	${prev}${play-pause}${next}
-	<div class="mediaplayer-volume-container visible-lg">
+	<div class="mediaplayer-volume-container hidden-xs">
 		${volume}
 	</div>
 	<div class="mediaplayer-cover hidden-xs">
@@ -510,7 +524,7 @@
 			${curtime}${seekbar}${duration}
 		</div>
 	</div>
-	${shuffle}${repeat}
+	${<if-has-shuffle>}${shuffle}${</if-has-shuffle>}${<if-has-repeat>}${repeat}${</if-has-repeat>}${<if-has-playqueue>}${playqueue}${</if-has-playqueue>}
 </message>
 
 </messages>