diff --git a/src/app/mixtape/mixtape.component.ts b/src/app/mixtape/mixtape.component.ts index 0b4c3fc..c50071f 100644 --- a/src/app/mixtape/mixtape.component.ts +++ b/src/app/mixtape/mixtape.component.ts @@ -1,12 +1,11 @@ import { Component } from '@angular/core'; -import { MixtapePlayerComponent } from './player/index'; import { PlaylistComponent } from './playlist/index'; import { SoundCloudSearchComponent } from './search/index'; @Component({ selector: 'mixtape-container', - directives: [MixtapePlayerComponent, PlaylistComponent, SoundCloudSearchComponent], + directives: [PlaylistComponent, SoundCloudSearchComponent], template: `
diff --git a/src/app/mixtape/player/index.ts b/src/app/mixtape/player/index.ts index 94eb477..8d250c0 100644 --- a/src/app/mixtape/player/index.ts +++ b/src/app/mixtape/player/index.ts @@ -1,2 +1,5 @@ +/** components **/ export { MixtapePlayerComponent } from './player.component'; + +/** services **/ export { MixtapePlayerService } from './player.service'; diff --git a/src/app/mixtape/player/player.component.ts b/src/app/mixtape/player/player.component.ts index 7e0813b..a4bd11b 100644 --- a/src/app/mixtape/player/player.component.ts +++ b/src/app/mixtape/player/player.component.ts @@ -17,30 +17,25 @@ export class MixtapePlayerComponent implements OnInit { nowPlaying: Song; paused: boolean; - // TODO: refactor code constructor(private store: Store, private playerService: MixtapePlayerService) { + // subscribe to store for changes in 'playlist' state this.store .changes .pluck('mixtape', 'playlist') .subscribe( - (playlist: Observable>) => { - this.playerService.playlist = Array.prototype.slice.call(playlist); - - if (!this.nowPlaying && this.playerService.playlist.length) { - this.nowPlaying = this.playerService.playlist[0]; - this.audio.src = this.nowPlaying.stream + '?client_id=' + this.clientId; - } - }, + this.playlistHandler.bind(this), err => console.log('error: ', err)); + // subscribe to store for changes in 'nowPlaying' state + // clicking the play button next to a song in the playlist will + // begin playing the song and start the playlist from that point this.store .changes .pluck('mixtape', 'nowPlaying') .subscribe( (song: Song) => { if (song) { - console.log('song change detected'); this.paused = true; this.setSong(song); this.playerService.changeSongIndex(song); @@ -59,7 +54,20 @@ export class MixtapePlayerComponent implements OnInit { this.playerService.currentSongIndex = 0; } - playNextPrevSong(direction) { + playlistHandler(playlist: Observable) { + // use slice method so collection can be treated as an array + this.playerService.playlist = Array.prototype.slice.call(playlist); + + // assign first song in playlist as the song ready to be played (if nothing is assigned already) + if (!this.nowPlaying && this.playerService.playlist.length) { + this.nowPlaying = this.playerService.playlist[0]; + // also sets audio elements source to stream URL of current song in 'nowPlaying' + // client ID is necessary in order to stream + this.audio.src = this.nowPlaying.stream + '?client_id=' + this.clientId; + } + } + + playNextPrevSong(direction: string) { var nextSong; if (direction === 'forward') { @@ -73,7 +81,8 @@ export class MixtapePlayerComponent implements OnInit { this.togglePlay(); } - setSong(songData) { + // to display info for currently playing song + setSong(songData: Song) { this.nowPlaying = songData; this.audio.src = this.nowPlaying.stream + '?client_id=' + this.clientId; } diff --git a/src/app/mixtape/player/player.service.ts b/src/app/mixtape/player/player.service.ts index 38654ef..72887a6 100644 --- a/src/app/mixtape/player/player.service.ts +++ b/src/app/mixtape/player/player.service.ts @@ -8,11 +8,11 @@ export class MixtapePlayerService { currentSongIndex: number; playlist: Array; - changeSongIndex(song) { + changeSongIndex(song: Song) { this.currentSongIndex = this.playlist.indexOf(song); } - nextPrev(direction) { + nextPrev(direction: string) { if (direction === 'forward') { if (this.currentSongIndex < this.playlist.length - 1) { this.currentSongIndex++; diff --git a/src/app/mixtape/playlist/playlist.component.css b/src/app/mixtape/playlist/playlist.component.css index ad229ab..68deffe 100644 --- a/src/app/mixtape/playlist/playlist.component.css +++ b/src/app/mixtape/playlist/playlist.component.css @@ -5,18 +5,18 @@ h2 { font-size: 1.5625em; + font-weight: 700; margin: 20px 0; text-transform: lowercase; - font-weight: 700; } h2:after { + background-color: #91204D; content: " "; display: block; - width: 30px; height: 2px; - background-color: #91204D; margin: 3px 0 0 0; + width: 30px; } ul { diff --git a/src/app/mixtape/playlist/playlist.component.ts b/src/app/mixtape/playlist/playlist.component.ts index 57f1f35..519c083 100644 --- a/src/app/mixtape/playlist/playlist.component.ts +++ b/src/app/mixtape/playlist/playlist.component.ts @@ -3,6 +3,7 @@ import { Observable } from 'rxjs/Observable'; import 'rxjs/Rx'; import { PlaylistService } from '../shared/playlist.service'; +import { Song } from '../shared/index'; import { Store } from '../../store/store'; @Component({ @@ -12,69 +13,59 @@ import { Store } from '../../store/store'; providers: [PlaylistService] }) export class PlaylistComponent implements OnInit { - songs: Observable>; + songs: Observable; - // TODO: refactor code constructor(private store: Store, private playlistService: PlaylistService) { + // subscribe to store for changes in 'playlist' state this.store .changes .pluck('mixtape', 'playlist') .subscribe( - (playlist: Observable>) => { - this.songs = playlist; - }, - err => console.log('error: ', err)); + (playlist: Observable) => { this.songs = playlist; }, + error => console.log('error: ', error) + ); } - ngOnInit() { - this.playlistService.getPlaylist() - .subscribe(this.handlePlaylist.bind(this), this.handleError); - } - - deleteSong(song) { - const currentState = this.store.getState(); - const playlist = currentState.mixtape.playlist; - const index = playlist.indexOf(song); - + deleteSong(song: Song) { + // delete song from DB + // server will send back updated playlist this.playlistService.deleteSong(song) - .subscribe(this.handlePlaylist.bind(this), this.handleError); - - // this.store.setState( - // Object.assign({}, currentState, { - // mixtape: { - // playlist: [ - // ...playlist.slice(0, index), - // ...playlist.slice(index + 1) - // ], - // searchResults: currentState.mixtape.searchResults, - // nowPlaying: currentState.mixtape.nowPlaying - // } - // }) - // ); + .subscribe( + this.playlistHandler.bind(this), + error => console.log('error:', error) + ); } - handleError(error) { - console.log('error: ', error); + ngOnInit() { + // get user's playlist upon component initialization + this.playlistService.getPlaylist() + .subscribe( + this.playlistHandler.bind(this), + error => console.log('error: ', error) + ); } - handlePlaylist(playlist) { + playlistHandler(playlist) { const currentState = this.store.getState(); playlist = JSON.parse(playlist._body); + // update 'playlist' state this.store.setState( Object.assign({}, currentState, { mixtape: { playlist: playlist, - searchResults: currentState.mixtape.searchResults + searchResults: currentState.mixtape.searchResults, + nowPlaying: currentState.mixtape.nowPlaying } }) ); } - playSong(song) { + playSong(song: Song) { const currentState = this.store.getState(); + // update 'nowPlaying' state with clicked song this.store.setState( Object.assign({}, currentState, { mixtape: { diff --git a/src/app/mixtape/search/input/search-input.component.ts b/src/app/mixtape/search/input/search-input.component.ts index 912c839..55ace12 100644 --- a/src/app/mixtape/search/input/search-input.component.ts +++ b/src/app/mixtape/search/input/search-input.component.ts @@ -47,7 +47,8 @@ export class SoundCloudSearchInputComponent implements OnInit { mixtape: { playlist: currentState.mixtape.playlist, // update 'searchResults' - searchResults: results + searchResults: results, + nowPlaying: currentState.mixtape.nowPlaying } }) ); diff --git a/src/app/mixtape/search/results/search-results.component.ts b/src/app/mixtape/search/results/search-results.component.ts index 81d58c8..3d35cdd 100644 --- a/src/app/mixtape/search/results/search-results.component.ts +++ b/src/app/mixtape/search/results/search-results.component.ts @@ -24,7 +24,8 @@ export class SoundCloudSearchResultsComponent { .pluck('mixtape', 'searchResults') .subscribe( (searchResults: Observable) => this.searchResults = searchResults, - error => console.log('error: ', error)); + error => console.log('error: ', error) + ); } // add song to playlist in database via POST request @@ -33,7 +34,8 @@ export class SoundCloudSearchResultsComponent { this.playlistService.addToPlaylist(songData) .subscribe( this.addSongToPlaylistState.bind(this), - error => console.log('error: ', error)); + error => console.log('error: ', error) + ); } addSongToPlaylistState(song) { @@ -48,7 +50,8 @@ export class SoundCloudSearchResultsComponent { ...currentState.mixtape.playlist, ...song ], - searchResults: currentState.mixtape.searchResults + searchResults: currentState.mixtape.searchResults, + nowPlaying: currentState.mixtape.nowPlaying } }) );