Song player

components.music-controller.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    stopMusic() {
      this.sendAction('stopMusic');
    }
  }
});

components.music-player.js

import Ember from 'ember';

export default Ember.Component.extend({
  /**
  * Title of the song that can play.
  * 
  * @property title
  */
  title: null,
  
  /**
  * State of the music
  *
  * @property isPlaying
  * @type boolean
  * @default false
  */
  isPlaying: false,
  
  /**
  * Source of the music to be played
  *
  * @property src
  * @type string
  */
  src: null,
});

components.show-song.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
});

controllers.songs.js

import Ember from 'ember';

const { isNone } = Ember;

export default Ember.Controller.extend({
  musicIsPlaying: false,
  currentSong: null,
  
  actions: {
    playSong(currentSong) {
      this.set('musicIsPlaying', true);
      this.set('currentSong', currentSong);
    },
    
    stopMusic() {
      this.set('musicIsPlaying', false);
      this.set('currentSong', null);
    },
    
    playMusic() {
      if(!isNone(this.get('currentSong'))) {
        this.set('musicIsPlaying', true);
      }
    }
  }
});

helpers.is-playing.js

import Ember from 'ember';

const { isNone } = Ember;

export function isPlaying(params/*, hash*/) {
  if(isNone(params[1])) {
     return false;
  } else {
    return params[0].src === params[1].src;
  }
}

export default Ember.Helper.helper(isPlaying);

models.song.js

import Ember from 'ember';

export default Ember.Object.extend({
  src: 'defualt.mp4',
  title: 'Random title'
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
  this.route('songs', { path: '/'} );
});

export default Router;

routes.songs.js

import Ember from 'ember';
import Song from '../models/song';

const songs = [
 	['srcaaa.mp4', 'otro titulo'],
  ['dddaaa.mp4', 'el mejor titulo'],
];

export default Ember.Route.extend({
  model() {
		return songs.map((song) => {
      return Song.create({
        src: song[0],
        title: song[1]
      });
    });
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.clickable {
  cursor: pointer;
  color: red;
}

templates.application.hbs

<h1>I am a song list manager</h1>
{{outlet}}

templates.components.music-controller.hbs

<div class="clickable" {{action (action playMusic)}}>
	PLAY
</div>
<div class="clickable" {{action "stopMusic"}}>
  STOP
</div>
<div class="clickable" {{action (action pauseMusic)}}>
  PAUSE
</div>

templates.components.music-player.hbs

{{#if title}}
  <p>Title: {{title}}</p>
	<p>SRC: {{src}}</p>
{{else}}
 	No song selected
{{/if}}

{{#if isPlaying}}
	Sound a wonderfulll music
{{else}}
	Just silente
{{/if}}

templates.components.show-song.hbs

<div>
My title is {{title}}
</div>
{{#if isPlaying}}
  You are playing myself.
{{else}}
  <div class="clickable" 
  {{action playSong}}>
    Do you want to reproduce me?
  </div>  
{{/if}}

templates.songs.hbs

<h3>My list of songs</h3>
{{#each model as |song|}}
  {{show-song
    playSong=(action "playSong" song)
    title=(get song 'title')
    isPlaying=(is-playing song currentSong)
  }}
{{/each}}

<h3>Player</h3>
{{music-player
	title=(get currentSong "title")
  src=(get currentSong "src")
  isPlaying=(readonly musicIsPlaying)
}}

<h3>Music controlls</h3>
{{music-controller
  playMusic=(action "playMusic")
  pauseMusic=(action (mut musicIsPlaying) false)
  stopMusic="stopMusic"
}}

twiddle.json

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.4.4",
    "ember-data": "2.4.3",
    "ember-template-compiler": "2.4.4"
  }
}