add search in playlist

src/locale/lang/en.js

@@ -51,6 +51,7 @@ export default {
   playlist: {
     playlist: "Playlists",
     updatedAt: "Updated at",
+    search: "Search in playlist",
   },
   login: {
     accessToAll: "Access to all data",

src/locale/lang/zh-CN.js

@@ -48,6 +48,7 @@ export default {
   playlist: {
     playlist: "歌单",
     updatedAt: "最后更新于",
+    search: "搜索歌单音乐",
   },
   login: {
     accessToAll: "可访问全部数据",

src/views/playlist.vue

@@ -135,8 +135,22 @@
       </h1>
     </div>
 
+    <div class="search-box">
+      <div class="container" :class="{ active: inputFocus }">
+        <svg-icon icon-class="search" />
+        <div class="input">
+          <input
+            v-model="playlistKeyword"
+            :placeholder="inputFocus ? '' : $t('playlist.search')"
+            @focus="inputFocus = true"
+            @blur="inputFocus = false"
+          />
+        </div>
+      </div>
+    </div>
+
     <TrackList
-      :tracks="tracks"
+      :tracks="filteredTracks"
       :type="'playlist'"
       :id="playlist.id"
       :extraContextMenuItem="
@@ -302,6 +316,8 @@ export default {
       tracks: [],
       loadingMore: false,
       lastLoadedTrackIndex: 9,
+      playlistKeyword: "",
+      inputFocus: false,
     };
   },
   created() {
@@ -328,6 +344,13 @@ export default {
         this.playlist.id !== this.data.likedSongPlaylistID
       );
     },
+    filteredTracks() {
+      return this.tracks.filter(song =>
+          song.name.toLowerCase().includes(this.playlistKeyword.toLowerCase()) ||
+          song.al.name.toLowerCase().includes(this.playlistKeyword.toLowerCase()) ||
+          song.ar.find(artist => artist.name.toLowerCase().includes(this.playlistKeyword.toLowerCase()))
+      );
+    },
   },
   methods: {
     ...mapMutations(["appendTrackToPlayerList"]),
@@ -374,6 +397,7 @@ export default {
           this.lastLoadedTrackIndex = data.playlist.tracks.length - 1;
           if (this.playlist.trackCount > this.tracks.length) {
             window.addEventListener("scroll", this.handleScroll, true);
+            window.addEventListener("input", this.handleSearch, this.playlistKeyword);
           }
           return data;
         })
@@ -384,11 +408,11 @@ export default {
           }
         });
     },
-    loadMore() {
+    loadMore(loadNum = 50) {
       let trackIDs = this.playlist.trackIds.filter((t, index) => {
         if (
           index > this.lastLoadedTrackIndex &&
-          index <= this.lastLoadedTrackIndex + 50
+          index <= this.lastLoadedTrackIndex + loadNum
         )
           return t;
       });
@@ -415,6 +439,15 @@ export default {
         this.loadMore();
       }
     },
+    handleSearch() {
+      if (
+        this.lastLoadedTrackIndex + 1 === this.playlist.trackIds.length ||
+        this.loadingMore
+      )
+        return;
+      this.loadingMore = true;
+      this.loadMore(this.playlist.trackIds.length - this.lastLoadedTrackIndex);
+    },
     openMenu(e) {
       this.$refs.playlistMenu.openMenu(e);
     },
@@ -452,7 +485,7 @@ export default {
 <style lang="scss" scoped>
 .playlist-info {
   display: flex;
-  margin-bottom: 72px;
+  margin-bottom: 40px;
   padding: var(--main-content-padding);
   .info {
     display: flex;
@@ -602,6 +635,54 @@ export default {
   }
 }
 
+.search-box {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+  -webkit-app-region: no-drag;
+  padding: var(--main-content-padding);
+
+  .container {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    background: var(--color-secondary-bg-for-transparent);
+    border-radius: 8px;
+    width: 200px;
+  }
+
+  .svg-icon {
+    height: 15px;
+    width: 15px;
+    color: var(--color-text);
+    opacity: 0.28;
+    margin: {
+      left: 8px;
+      right: 4px;
+      bottom: 4px;
+    }
+  }
+
+  input {
+    font-size: 16px;
+    border: none;
+    background: transparent;
+    width: 96%;
+    font-weight: 600;
+    margin-top: -1px;
+    color: var(--color-text);
+  }
+
+  .active {
+    background: var(--color-primary-bg-for-transparent);
+    input,
+    .svg-icon {
+      opacity: 1;
+      color: var(--color-primary);
+    }
+  }
+}
+
 .gradient-test {
   background-image: linear-gradient(to left, #92fe9d 0%, #00c9ff 100%);
 }