(refactor) Clean up mixtape player component code

jmg2107 · Aug 27, 2016 · c1cd078 · c1cd078
1 parent 002bcc6
commit c1cd078
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 58 deletions.
diff --git 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: `
     <section class="fade-in">
       <sc-search-container></sc-search-container>

diff --git 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
@@ -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<Array<Object>>) => {
-          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<Song[]>) {
+    // 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
@@ -8,11 +8,11 @@ export class MixtapePlayerService {
   currentSongIndex: number;
   playlist: Array<Song>;
 
-  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
@@ -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
@@ -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<Array<Object>>;
+  songs: Observable<Song[]>;
 
-  // 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<Array<Object>>) => {
-          this.songs = playlist;
-        },
-        err => console.log('error: ', err));
+        (playlist: Observable<Song[]>) => { 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
@@ -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
@@ -24,7 +24,8 @@ export class SoundCloudSearchResultsComponent {
       .pluck('mixtape', 'searchResults')
       .subscribe(
         (searchResults: Observable<Song[]>) => 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
         }
       })
     );