Toggle play queue with a button (#1539)

airsonic-main/src/main/resources/org/airsonic/player/theme/default_dark.properties

@@ -64,3 +64,5 @@ viewAsListImage = icons/default_dark/view_as_list.png
 volumeImage = icons/default_dark/volume.png
 alertImage = icons/default_dark/alert.svg
 checkImage = icons/default_dark/check.svg
+playQueueShow = icons/default_dark/chevrons-up.svg
+playQueueHide = icons/default_dark/chevrons-down.svg

airsonic-main/src/main/resources/org/airsonic/player/theme/default_light.properties

@@ -64,3 +64,5 @@ viewAsListImage = icons/default_light/view_as_list.svg
 volumeImage = icons/default_light/volume.svg
 alertImage = icons/default_light/alert.svg
 checkImage = icons/default_light/check.svg
+playQueueShow = icons/default_light/chevrons-up.svg
+playQueueHide = icons/default_light/chevrons-down.svg

airsonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp

@@ -139,6 +139,8 @@
     function onHidePlayQueue() {
       setFrameHeight(50);
       isVisible = false;
+      $(".playqueue-shown").hide();
+      $(".playqueue-hidden").show();
     }
 
     function onShowPlayQueue() {
@@ -146,6 +148,8 @@
       height = Math.min(height, window.top.innerHeight * 0.8);
       setFrameHeight(height);
       isVisible = true;
+      $(".playqueue-shown").show();
+      $(".playqueue-hidden").hide();
     }
 
     function onTogglePlayQueue() {
@@ -959,6 +963,15 @@
                     </select>
                     </td>
 
+                    <c:if test="${not model.autoHide}">
+                    <td style="white-space:nowrap; text-align:right; width:100%; padding-right:1.5em">
+                      <a href="javascript:onTogglePlayQueue()">
+                        <img class="playqueue-shown" src="<spring:theme code='playQueueHide'/>" alt="Hide play queue" title="Hide play queue" style="cursor:pointer; height:18px;"/>
+                        <img class="playqueue-hidden" src="<spring:theme code='playQueueShow'/>" alt="Show play queue" title="Show play queue" style="cursor:pointer; height:18px; display: none;"/>
+                      </a>
+                    </td>
+                    </c:if>
+
                 </tr></table>
         </div>
     </c:otherwise>

airsonic-main/src/main/webapp/icons/default_dark/chevrons-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cdcdcd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-down"><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_dark/chevrons-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#cdcdcd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-up"><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/chevrons-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-down"><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>

airsonic-main/src/main/webapp/icons/default_light/chevrons-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#696969" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevrons-up"><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>