|
|
|
|
@ -135,22 +135,8 @@
|
|
|
|
|
</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="filteredTracks"
|
|
|
|
|
:tracks="tracks"
|
|
|
|
|
:type="'playlist'"
|
|
|
|
|
:id="playlist.id"
|
|
|
|
|
:extraContextMenuItem="
|
|
|
|
|
@ -316,8 +302,6 @@ export default {
|
|
|
|
|
tracks: [],
|
|
|
|
|
loadingMore: false,
|
|
|
|
|
lastLoadedTrackIndex: 9,
|
|
|
|
|
playlistKeyword: "",
|
|
|
|
|
inputFocus: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
@ -344,22 +328,6 @@ 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"]),
|
|
|
|
|
@ -406,11 +374,6 @@ 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;
|
|
|
|
|
})
|
|
|
|
|
@ -421,11 +384,11 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
loadMore(loadNum = 50) {
|
|
|
|
|
loadMore() {
|
|
|
|
|
let trackIDs = this.playlist.trackIds.filter((t, index) => {
|
|
|
|
|
if (
|
|
|
|
|
index > this.lastLoadedTrackIndex &&
|
|
|
|
|
index <= this.lastLoadedTrackIndex + loadNum
|
|
|
|
|
index <= this.lastLoadedTrackIndex + 50
|
|
|
|
|
)
|
|
|
|
|
return t;
|
|
|
|
|
});
|
|
|
|
|
@ -452,15 +415,6 @@ 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);
|
|
|
|
|
},
|
|
|
|
|
@ -498,8 +452,7 @@ export default {
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.playlist-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
padding: var(--main-content-padding);
|
|
|
|
|
margin-bottom: 72px;
|
|
|
|
|
.info {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
@ -558,25 +511,6 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
|
.playlist-info {
|
|
|
|
|
width: calc(100vw - 2 * var(--main-content-padding-x));
|
|
|
|
|
display: block;
|
|
|
|
|
.cover {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.info {
|
|
|
|
|
margin-top: 24px;
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 48px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.special-playlist {
|
|
|
|
|
margin-top: 192px;
|
|
|
|
|
margin-bottom: 128px;
|
|
|
|
|
@ -645,54 +579,6 @@ 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%);
|
|
|
|
|
}
|
|
|
|
|
|
qier222
4 years ago