Merge pull request #1189 from pgalhardo/enhancement/search-bar

Album/Playlist page search bar improvements

src/i18n/README.md

@@ -497,7 +497,6 @@ Update 14/06/2022 14:10 UTC
 
 * `term.themeManaged`: Added to `en_US`
 
-
 Update 15/06/2022 20:00 UTC
 
 * `settings.notyf.connectivity.lastfmScrobble.connectError`: Added to `en_US`
@@ -508,6 +507,11 @@ Update 19/06/2022 12:00 UTC
 
 * `settings.option.connectivity.lastfmScrobble.filterLoop.description`: Added to `en_US`
 
+Update 21/06/2022 20:39 UTC
+
+* `term.showSearch`: Added to `en_US`
+* `term.hideSearch`: Added to `en_US`
+
 Update 23/06/2022 04:00 UTC
 
-* `settings.option.connectivity.lastfmScrobble.filterTypes`: Added to `en_US`
+* `settings.option.connectivity.lastfmScrobble.filterTypes`: Added to `en_US`

src/i18n/en_US.json

@@ -31,6 +31,8 @@
   "term.miniplayer": "MiniPlayer",
   "term.history": "History",
   "term.search": "Search",
+  "term.showSearch": "Show search bar",
+  "term.hideSearch": "Hide search bar",
   "term.library": "Library",
   "term.listenNow": "Listen Now",
   "term.browse": "Browse",

src/i18n/pt_PT.json

@@ -31,6 +31,8 @@
   "term.miniplayer": "Mini-leitor",
   "term.history": "Histórico",
   "term.search": "Pesquisa",
+  "term.showSearch": "Mostrar a barra de pesquisa",
+  "term.hideSearch": "Esconder a barar de pesquisa",
   "term.library": "Biblioteca",
   "term.listenNow": "Ouvir agora",
   "term.browse": "Explorar",

src/i18n/source/en_US.json

@@ -31,6 +31,8 @@
   "term.miniplayer": "MiniPlayer",
   "term.history": "History",
   "term.search": "Search",
+  "term.showSearch": "Show search bar",
+  "term.hideSearch": "Hide search bar",
   "term.library": "Library",
   "term.listenNow": "Listen Now",
   "term.browse": "Browse",

src/renderer/assets/search-alt.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <path d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/>
+  <path d="M236.475 116.292c-30.447 13.753-37.74 53.708-14.117 77.332 23.624 23.624 63.579 16.33 77.332-14.117 29.331 95.273-88.453 166.118-158.893 95.678s.406-188.224 95.678-158.893z" style="stroke-width:23.8909"/>
+</svg>

src/renderer/less/pages.less

@@ -598,6 +598,18 @@
         }
       }
     }
+
+    .search-input-container {
+      height: 2.5rem;
+      margin: 1rem;
+      margin-top: 0;
+      scroll-margin-top: 1rem;
+
+      .search-input {
+        width: 100%;
+        height: 100%;
+      }
+    }
   }
 
   .floating-header {
@@ -807,6 +819,38 @@
             text-transform: uppercase;
           }
         }
+
+        .search-btn {
+          display: flex;
+          width: 32px;
+          align-items: center;
+          margin-right: 1rem;
+          background: transparent;
+          border: none;
+          cursor: pointer;
+
+          > ._svg-icon {
+            width: 18px;
+            height: 18px;
+            margin: auto;
+          }
+        }
+
+        .search-btn.active {
+          animation: enlarge 0.5s ease-in-out;
+        }
+
+        @keyframes enlarge {
+          0% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.2);
+          }
+          100% {
+            transform: scale(1);
+          }
+        }
       }
     }
 

src/renderer/style.css

@@ -13436,6 +13436,16 @@ input[type=checkbox][switch]:checked:active::before {
 .playlist-page .playlist-body.scrollbody .tabs .tab-content .tab-pane .well {
   margin: 0px;
 }
+.playlist-page .playlist-body .search-input-container {
+  height: 2.5rem;
+  margin: 1rem;
+  margin-top: 0;
+  scroll-margin-top: 1rem;
+}
+.playlist-page .playlist-body .search-input-container .search-input {
+  width: 100%;
+  height: 100%;
+}
 .playlist-page .floating-header {
   position: sticky;
   top: 0;
@@ -13625,6 +13635,34 @@ input[type=checkbox][switch]:checked:active::before {
   font-family: inherit;
   text-transform: uppercase;
 }
+.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn {
+  display: flex;
+  width: 32px;
+  align-items: center;
+  margin-right: 1rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn > ._svg-icon {
+  width: 18px;
+  height: 18px;
+  margin: auto;
+}
+.playlist-page .playlist-display .playlistInfo .playlist-info .search-btn.active {
+  animation: enlarge 0.5s ease-in-out;
+}
+@keyframes enlarge {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 .playlist-page .friends-info {
   display: flex;
   flex-flow: column;

src/renderer/views/pages/cider-playlist.ejs

@@ -13,7 +13,7 @@
                 <div class="playlistInfo">
                     <div class="playlist-hero" v-if="hasHero()">
                         <mediaitem-artwork shadow="none" :url="hasHero()" size="2160" />
-                        <div class="hero-tint" :style="{'background-color': '#' + hasHeroObject()?.bgColor ?? ''}"></div> 
+                        <div class="hero-tint" :style="{'background-color': '#' + hasHeroObject()?.bgColor ?? ''}"></div>
                     </div>
                     <div class="row">
                         <div class="col-auto flex-center" @mouseover="minClass(false)">
@@ -108,17 +108,13 @@
                                     {{app.getLz('term.confirm')}}
                                 </button>
                                 <div style="display: flex; float: right;">
-                                    <div class="search-input-container" style="margin-right: 8px;">
+                                    <button :class="['search-btn', showSearch ? 'active' : '']"
-                                        <div class="search-input--icon"></div>
+                                            @click="toggleSearch()"
-                                        <input type="search"
+                                            :aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
-                                            style="width:100%;"
+                                        <svg-icon :style="{ 'background': '#' + hasHeroObject()?.textColor4 ?? '' }"
-                                            spellcheck="false"
+                                                  :url="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
-                                            :placeholder="$root.getLz('term.search') + '...'"
+                                        </svg-icon>
-                                            @input="search()"
+                                    </button>
-                                            :style="{ '--heroplaceholdercolor': '#' +hasHeroObject()?.textColor4 ?? ''}"
-                                            v-model="searchQuery"
-                                            class="search-input">
-                                    </div>
                                     <button class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
                                         <div class="svg-icon"></div>
                                     </button>
@@ -183,6 +179,16 @@
                         <div @wheel="minClass(true)" @scroll="minClass(true)">
                         <div class="">
                             <div style="width:100%" @click="minClass(true)">
+                                <div v-if="showSearch" class="search-input-container">
+                                    <div class="search-input--icon"></div>
+                                    <input type="search"
+                                        spellcheck="false"
+                                        :placeholder="$root.getLz('term.search') + '...'"
+                                        @input="search()"
+                                        v-model="searchQuery"
+                                        class="search-input"
+                                        ref="search-bar">
+                                </div>
                                 <draggable :options="{disabled: !editing}"
                                            v-model="data.relationships.tracks.data" @start="drag=true"
                                            @end="drag=false;put()">
@@ -294,6 +300,7 @@
                 searchQuery: "",
                 displayListing: [],
                 hasNestedPlaylist: false,
+                showSearch: false,
             }
         },
         mounted: function () {
@@ -820,7 +827,7 @@
                             type: "songs",
                         })
                     })
-                    
+
                     this.app.mk.api.v3.music(`/v1/me/library/playlists/${this.data.id}/tracks`, {}, {
                         fetchOptions: {
                             method: "POST",
@@ -837,6 +844,20 @@
                     })
                 }
             },
+            toggleSearch() {
+                this.showSearch = !this.showSearch;
+
+                if (!this.showSearch && this.searchQuery != "") {
+                    // Clear search query if the search bar becomes hidden
+                    this.searchQuery = "";
+                    this.search();
+                } else if (this.showSearch) {
+                    // Focus search bar
+                    this.$nextTick(() => {
+                        this.$refs["search-bar"].focus();
+                    });
+                }
+            },
             search() {
                 let filtered = [];