import { Track } from '@model' ; import { Controller } from '@controllers' ; import { StoreChannelType } from '@types' ; import { storeChannel } from '@store' ; import './MainTrackOptionListArea.scss' ; ( ( ) => { const MainTrackOptionListArea = class extends HTMLElement { private trackList : Track [ ] ; constructor ( ) { super ( ) ; this . trackList = Controller . getTrackList ( ) ; } connectedCallback ( ) { this . render ( ) ; this . subscribe ( ) ; } render ( ) { this . innerHTML = `
            <div class="audi-main-track-option-area">  
              ${ this . getTrackOptions ( ) }
            </div>
        ` ; } getTrackOptions ( ) { return this . trackList . reduce ( ( acc , cur , idx ) => acc += `<audi-track-option data-id=${ idx } data-track-id=${ cur . id }></audi-track-option>` , "" ) ; } subscribe ( ) { storeChannel . subscribe ( StoreChannelType . TRACK_LIST_CHANNEL , this . trackListObserverCallback , this ) ; } disconnectedCallback ( ) { this . unsubscribe ( ) ; } unsubscribe ( ) { storeChannel . unsubscribe ( StoreChannelType . TRACK_LIST_CHANNEL , this . trackListObserverCallback , this ) ; } trackListObserverCallback ( newTrackList ) { try { this . trackList = newTrackList ; this . render ( ) ; } catch ( e ) { console . log ( e ) ; } } } ; customElements . define ( 'audi-main-track-option-list-area' , MainTrackOptionListArea ) ; } ) ( ) ; export { } ;