From bfa64547e8fa2297191ed9c8f7c265a1cd43dcce Mon Sep 17 00:00:00 2001
From: Terry Geng <gengyanda@gmail.com>
Date: Fri, 20 Mar 2020 21:28:00 +0800
Subject: [PATCH] fix: button confusion

---
 interface.py          |  7 +++++--
 static/css/custom.css | 15 +++++++--------
 templates/index.html  | 33 +++++++++++++++++----------------
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/interface.py b/interface.py
index 4b152c6..8056606 100644
--- a/interface.py
+++ b/interface.py
@@ -223,7 +223,10 @@ def post():
             if music_wrapper:
                 var.playlist.insert(var.playlist.current_index + 1, music_wrapper)
                 log.info('web: add to playlist(next): ' + music_wrapper.format_debug_string())
-                var.bot.interrupt()
+                if not var.bot.is_pause:
+                    var.bot.interrupt()
+                else:
+                    var.bot.is_pause = False
             else:
                 abort(404)
 
@@ -475,7 +478,7 @@ def library():
                     result['title'] = item.title
                     result['type'] = item.display_type()
                     result['tags'] = [(tag, tag_color(tag)) for tag in item.tags]
-                    if item.thumbnail:
+                    if item.type != 'radio' and item.thumbnail:
                         result['thumb'] = f"data:image/PNG;base64,{item.thumbnail}"
                     else:
                         result['thumb'] = "static/image/unknown-album.png"
diff --git a/static/css/custom.css b/static/css/custom.css
index 372e1ca..77422b6 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -75,17 +75,16 @@
 .library-thumb-btn-up {
    position: absolute !important;
    top: 0;
-   height: 35px;
-   padding-top: 5px;
+   height: 70px;
+   font-size: 2em;
+   padding-top: 10px;
 }
-.library-thumb-btn-down {
-   position: absolute !important;
-   top: 35px;
-   height: 35px;
-   padding-top: 5px;
+.library-btn-svg {
+   width: 1rem;
+   fill: currentColor;
 }
 .library-info-col {
-   margin-right: 2rem;
+   margin-right: 1rem;
    padding: 3px 0;
    display: flex;
    flex-direction: column;
diff --git a/templates/index.html b/templates/index.html
index 5003da8..62ad287 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -126,7 +126,7 @@
                                         <div id="filter-type" class="form-group row">
                                             <label class="col-sm-2 col-form-label">Type</label>
                                             <div class="btn-group btn-group-toggle" data-toggle="buttons" style="height: 35px; padding-top:5px;">
-                                                <button type="button" id="filter-type-file" class="btn btn-primary btn-sm" onclick="setFilterType('file')">File</button>
+                                                <button type="button" id="filter-type-file" class="btn btn-secondary btn-sm" onclick="setFilterType('file')">File</button>
                                                 <button type="button" id="filter-type-url" class="btn btn-secondary btn-sm" onclick="setFilterType('url')">URL</button>
                                                 <button type="button" id="filter-type-radio" class="btn btn-secondary btn-sm" onclick="setFilterType('radio')">Radio</button>
                                             </div>
@@ -179,15 +179,8 @@
                                         <img class="library-item-thumb library-thumb-img" src="static/image/unknown-album.png"/>
                                     </div>
                                     <div class="btn-group-vertical library-thumb-grp">
-                                        <div class="library-item-add-next btn btn-secondary library-thumb-btn-up" title="Play Next">
-                                            <i class="fa fa-plus" aria-hidden="true"></i>
-                                            <span class="btn-space"></span>
-                                            <i class="fa fa-arrow-right" aria-hidden="true"></i>
-                                        </div>
-                                        <div class="library-item-add-bottom btn btn-secondary library-thumb-btn-down" title="Add to Playlist">
-                                            <i class="fa fa-plus" aria-hidden="true"></i>
-                                            <span class="btn-space"></span>
-                                            <i class="fas fa-level-down-alt" aria-hidden="true"></i>
+                                        <div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
+                                            <i class="fa fa-play" aria-hidden="true"></i>
                                         </div>
                                     </div>
                                 </div>
@@ -209,8 +202,16 @@
 
 
                                 <div class="btn-group library-action">
-                                    <button class="library-item-play btn btn-info btn-sm btn-space" type="button">
-                                        <i class="fa fa-play" aria-hidden="true"></i>
+                                    <button class="library-item-add-next btn btn-info btn-sm btn-space" type="button" title="Next to play">
+                                        <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="5 5 17 17">
+                                            <path d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z"/>
+                                            <path d="m20.942859,18.221072l-3.323292,0l0,3.323292l-1.107764,0l0,-3.323292l-3.323292,0l0,-1.107764l3.323292,0l0,-3.323292l1.107764,0l0,3.323292l3.323292,0l0,1.107764z"/>
+                                        </svg>
+
+                                    </button>
+                                    <button class="library-item-add-bottom library-btn btn btn-info btn-sm btn-space" type="button" title="Add to bottom">
+                                        <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="2 2 20 20"><path d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z" /></svg>
+
                                     </button>
                                     <button class="library-item-download btn btn-primary btn-sm btn-space" type="button">
                                         <i class="fa fa-download" aria-hidden="true"></i>
@@ -546,7 +547,7 @@
         } , 3000);
 
         // ------ Browser ------
-        var filter_file = true;
+        var filter_file = false;
         var filter_url = false;
         var filter_radio = false;
         var filter_dir = $("#filter-dir");
@@ -613,7 +614,7 @@
             $(".library-item-play").unbind().click(
                 function (e) {
                     request('post', {
-                        'add_item_at_once': $(e.currentTarget).parent().parent().find(".library-item-id").val()
+                        'add_item_at_once': $(e.currentTarget).parent().parent().parent().find(".library-item-id").val()
                     });
                 }
             );
@@ -637,7 +638,7 @@
 
             $(".library-item-add-next").unbind().click(
                 function (e) {
-                    var id = $(e.currentTarget).parent().parent().parent().find(".library-item-id").val();
+                    var id = $(e.currentTarget).parent().parent().find(".library-item-id").val();
                     request('post', {
                         'add_item_next': id
                     });
@@ -646,7 +647,7 @@
 
             $(".library-item-add-bottom").unbind().click(
                 function (e) {
-                    var id = $(e.currentTarget).parent().parent().parent().find(".library-item-id").val();
+                    var id = $(e.currentTarget).parent().parent().find(".library-item-id").val();
                     request('post', {
                         'add_item_bottom': id
                     });