import { NgZone , ViewChild , ElementRef , AfterViewInit } from '@angular/core' ; import { Router } from '@angular/router' ; import * as dialogs from 'ui/dialogs' ; import * as utils from 'utils/utils' ; import { topmost } from 'ui/frame' ; import { GestureStateTypes } from 'ui/gestures' ; import { Store } from '@ngrx/store' ; import { Observable } from 'rxjs/Observable' ; import { Subscription } from 'rxjs/Subscription' ; import 'rxjs/add/operator/take' ; import { isString , includes } from 'lodash' ; import { AnimateService , LogService , BaseComponent , FancyAlertService , DrawerService , PROGRESS_ACTIONS } from '../../shared/core/index' ; import { PlaylistService , IPlaylistState , PlaylistModel , PLAYER_ACTIONS , IPlayerState , FirebaseService , FIREBASE_ACTIONS , IFirebaseState , IAuthState , ShoutoutService , TrackControlService } from '../../shared/shoutoutplay/index' ; @ BaseComponent ( { selector : 'playlist' , templateUrl : './components/playlist/playlist.component.html' } ) export class PlaylistComponent { public show : boolean = true ; private _currentIndex : number ; private _sub : Subscription ; constructor ( private store , private logger , public playlistService , public firebaseService , public drawerService , public trackControl , private shoutoutService , private router , private fancyalert , private ngZone ) { } public togglePlay ( playlistId ) { this . store . dispatch ( { type : PLAYER_ACTIONS . LIST_TOGGLE_PLAY , payload : { activeList : 'playlists' , playlistId } } ) ; } public viewDetail ( e ) { this . logger . debug ( `trying to nav to playlist at index: ${ e . itemIndex }` ) ; try { let listview = topmost ( ) . currentPage . getViewById ( "listview" ) ; if ( listview ) { listview . notifySwipeToExecuteFinished ( ) ; } } catch ( err ) { this . logger . debug ( err ) ; } this . logger . debug ( `getting state...` ) ; this . store . take ( 1 ) . subscribe ( ( s ) => { this . logger . debug ( s . firebase ) ; if ( s . firebase . playlists && s . firebase . playlists . length ) { this . logger . debug ( s . firebase . playlists [ e . itemIndex ] ) ; if ( s . firebase . playlists [ e . itemIndex ] ) { this . logger . debug ( s . firebase . playlists [ e . itemIndex ] . id ) ; this . router . navigate ( [ '/playlist' , s . firebase . playlists [ e . itemIndex ] . id ] ) ; } else { this . logger . debug ( `playlist not found, index: ${ e . itemIndex }` ) ; } } else { this . logger . debug ( `playlist doesn't exist at index: ${ e . itemIndex }` ) ; } } ) ; } public edit ( e ) { this . store . take ( 1 ) . subscribe ( ( s ) => { this . playlistService . edit ( s . firebase . playlists [ this . _currentIndex ] ) . then ( ( ) => { } ) ; } ) ; } public remove ( e ) { this . fancyalert . confirm ( 'Are you sure you want to delete this playlist? All ShoutOuts attached to any tracks in this playlist will also be deleted.' , 'warning' , ( ) => { this . store . take ( 1 ) . subscribe ( ( s ) => { let playlist = s . firebase . playlists [ this . _currentIndex ] ; this . store . dispatch ( { type : FIREBASE_ACTIONS . DELETE , payload : playlist } ) ; } ) ; } ) ; } public onSwipeCellStarted ( args ) { let density = utils . layout . getDisplayDensity ( ) ; let delta = Math . floor ( density ) !== density ? 1.1 : .1 ; var swipeLimits = args . data . swipeLimits ; swipeLimits . top = 0 ; swipeLimits . bottom = 0 ; swipeLimits . left = Math . round ( density * 100 ) ; swipeLimits . right = Math . round ( density * 100 ) ; swipeLimits . threshold = Math . round ( density * 50 ) ; } public onSwipeCellFinished ( args ) { this . _currentIndex = args . itemIndex ; } public onItemReordered ( args ) { this . logger . debug ( "Item reordered. Old index: " + args . itemIndex + " " + "new index: " + args . data . targetIndex ) ; this . store . dispatch ( { type : FIREBASE_ACTIONS . REORDER , payload : { type : 'playlist' , itemIndex : args . itemIndex , targetIndex : args . data . targetIndex } } ) ; } ngOnInit ( ) { this . _sub = this . store . select ( 'auth' ) . subscribe ( ( state ) => { if ( ! state . loggedIn ) { this . router . navigate ( [ '/' ] ) ; } } ) ; } ngOnDestroy ( ) { if ( this . _sub ) { this . _sub . unsubscribe ( ) ; } } }