New Twiddle

components.list-songs.js

import Ember from 'ember';

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

components.music-controller.js

import Ember from 'ember';

function showChangedModal(component) {
  component.$().find('#state-changed-modal')
  .show();

  setTimeout(() => {
    component.$().find('#state-changed-modal')
    .hide()
  }, 1000);
}

function showNoChangedModal(component) {
  component.$().find('#state-no-changed-modal')
  .show();

  setTimeout(() => {
    component.$().find('#state-no-changed-modal')
    .hide()
  }, 1000);
}

export default Ember.Component.extend({
  actions: {
    changeState(newState) {
      const callResult = this.get('changeState')(newState);

      if(callResult) {
        showChangedModal(this);
      } else {
        showNoChangedModal(this);
      }
    }
  }
});

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.music-survey.js

import Ember from 'ember';

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

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(from, currentSong) {
      this.set('lastCallFrom', from);
      
      this.set('musicIsPlaying', true);
      this.set('currentSong', currentSong);
    },

    changeState(from, newState) {
      this.set('lastCallFrom', from);
      
      if(this.get('currentSong') && newState === 'stop') {
        this.set('musicIsPlaying', false);
        this.set('currentSong', null);

        return true;
      } else if(this.get('musicIsPlaying') && newState === 'pause') {
        this.set('musicIsPlaying', false);

        return true;
      } else if(!isNone(this.get('currentSong')) && !this.get('musicIsPlaying') && newState === 'play') {
        this.set('musicIsPlaying', true);

        return true;
      } else {
        return false;
      }
    }
  }
});

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.list-songs.hbs

<h3>{{title}}</h3>

{{#each songs as |song|}}
{{show-song
	playSong=(action playSong song)
  title=(get song 'title')
  isPlaying=(is-playing song currentSong)
  }}
{{/each}}

templates.components.music-controller.hbs

<div class="clickable" 
  {{action (action "changeState" "play")}}>
	PLAY
</div>
<div class="clickable" {{action "changeState" "stop"}}>
  STOP
</div>
<div class="clickable" {{action "changeState" "pause"}}>
  PAUSE
</div>

<div id="state-changed-modal" style="display: none;">
STATE CHANGEDDDD
</div>

<div id="state-no-changed-modal" style="display: none;">
STATE NOOOO CHANGEDDDD
</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.music-survey.hbs

<h4>Whats your favourite band?</h4>
{{input 
  action=(
    action (mut favouriteSong)
    value="target.value"
  )
  on="focusOut"
}} 
<br>
<p>Favourite song title: {{favouriteSong}}</p>

templates.components.show-song.hbs

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

templates.songs.hbs

<div>
	Last call to the player was done from: {{lastCallFrom}}
</div>

{{list-songs
	title="Lady gaga"
  songs=model
  playSong=(action "playSong" "songList")
  currentSong=currentSong
}}

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

<h3>Music controlls</h3>
{{music-controller
  changeState=(action "changeState" "mainController")
}}

{{music-survey}}

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"
  }
}