歌单

歌单的主要功能在列表中直接播放和添加歌曲到当前播放列表中以及收藏和分享，但收藏和分享目前是着手于会员功能，暂放，其余都是展示信息。

添加歌单时存在不同的功能，歌单信息中的 + 是添加整个歌单，歌曲列表中的则是仅添加当前选中的。而且歌单信息中的播放不仅要添加还要播放当前歌单，歌曲列表中的播放图标仅播放当前选中的歌曲。

---

歌曲列表

• sheet-info.component.html

<tr *ngFor="let item of basicTable.data; index as i"><td class="first-col"><span>{{i + 1}}</span><i class="ico play-song" [class.current]="currentIndex === i" title="播放" (click)="onAddSong(item,true)"></i></td><td class="song-name"><a> {{item.name}}</a></td><td class="time-col"><span>{{item.dt / 1000 | formatTime}}</span><p class="icons"><i class="ico add" title="添加" (click)="onAddSong(item)"></i><i class="ico like" title="收藏"></i><i class="ico share" title="分享"></i></p></td><td><ng-container *ngFor="let singer of item.ar; last as isLast"><a>{{singer.name}}</a><em [hidden]="isLast">/</em></ng-container></td><td>{{item.al.name}}</td>
</tr>

可以看出，添加和播放用同样的回调，根据传参的不通来决定后续的流程，这样可以增加方法的复用性。

• sheet-info.component.ts

    sheetInfo: SongSheet; // 歌单列表currentSong: Song; // 当前歌曲currentIndex = -1; // 当前歌曲索引private destroy$ = new Subject<void>(); // 发射流constructor(private route: ActivatedRoute,private store$: Store<AppStoreModule>,private barchActionServe: BatchActionsService) { }ngOnInit () {this.route.data.pipe(map(res => res.sheetInfo)).subscribe(res => {this.sheetInfo = res;if (res.description) {this.changeDesc(res.description)}this.listenCurrent();})}// 监听当前歌曲private listenCurrent () {this.store$.pipe(select(getPlayer), select(getCurrentSong), takeUntil(this.destroy$)).subscribe(song => {this.currentSong = song;if (song) {this.currentIndex = findIndex(this.sheetInfo.tracks, song);} else {this.currentIndex = -1;}})}// 添加一首歌曲onAddSong (song: Song, isPlay = false) {if (!this.currentSong || this.currentSong.id !== song.id) {this.barchActionServe.insertSong(song, isPlay);}}// 添加歌单onAddSongs (songs: Song[], isPlay = false) {if (songs.length) {if (isPlay) {this.barchActionServe.selectPlayList({ list: songs, index: 0 })} else {this.barchActionServe.insertSongs(this.sheetInfo.tracks);}}}ngOnDestroy (): void {this.destroy$.next();this.destroy$.complete();}

在初始化页面处理歌单信息后会使用Store来监听当前歌曲的变化直到页面销毁时解绑。当点击了添加时，首先判断当前歌曲是否存在或者当前歌曲的ID与选中歌曲的ID是否相同，不相同则会将选中的歌曲封装的批量处理歌曲类来向当前播放列表和歌单列表中添加选中的歌曲。

• batch-actions.service.ts

    // 添加歌曲insertSong (song: Song, isPlay: boolean) {const songList = this.playState.songList.slice();const playList = this.playState.playList.slice();let insertIndex = this.playState.currentIndex;const pIndex = findIndex(playList, song);if (pIndex > -1) {// 歌曲已经存在if (isPlay) {insertIndex = pIndex;}} else {songList.push(song);playList.push(song);if (isPlay) {insertIndex = songList.length - 1;}this.store$.dispatch(SetSongList({ songList }));this.store$.dispatch(SetPlayList({ playList }));}if (insertIndex !== this.playState.currentIndex) {this.store$.dispatch(SetCurrentIndex({ currentIndex: insertIndex }))}}

如果点了列表中播放图标，则会多传递一个isPlay来判断当前选中的歌曲是否播放。如果选中的歌曲不在当前列表中，则会更新当前歌曲索引并将索引值传递过去，从而直接播放选中歌曲。

---

歌单详情

歌单详情部分的播放和添加就是以歌单为单位进行处理。

• sheet-info.component.html

<nz-button-group class="btn"><button class="play" nz-button nzType="primary" (click)="onAddSongs(sheetInfo.tracks, true)"><i nz-icon nzType="play-circle" nzTheme="outline"></i>播放</button><button class="add" nz-button nzType="primary" (click)="onAddSongs(sheetInfo.tracks)">+</button>
</nz-button-group>

• sheet-info.component.ts

	// 添加歌单onAddSongs (songs: Song[], isPlay = false) {if (songs.length) {if (isPlay) {this.barchActionServe.selectPlayList({ list: songs, index: 0 })} else {this.barchActionServe.insertSongs(this.sheetInfo.tracks);}}}

• batch-action.service.ts

	//  添加歌单insertSongs (songs: Song[]) {const songList = this.playState.songList.slice();const playList = this.playState.playList.slice();songs.forEach(item => {const pIndex = findIndex(playList, item);if (pIndex === -1) {songList.push(item)playList.push(item)}})this.store$.dispatch(SetSongList({ songList }));this.store$.dispatch(SetPlayList({ playList }));}

同歌单列表中的处理一样，都是选择复用回调，而实参的变化也仅是歌单和歌曲。

---

关于之前修改的获取完整信息的API，总是出现实际的歌单列表与获取渲染的歌曲列表不相符的问题，我想应该找到了。在拼接URL这一环节中，会将ID相对应的歌曲进行拼接，而有的歌曲是没有URL的，估计是和版权受限有关，所以在迭代列表的时候就会将一些没有URL的歌曲给筛选掉了。这个歌曲列表的数据能够完成目前的调试，为了追进度，所以现在选择暂时不去理会这个bug，再挖一个坑！！！！！！！！！！！！