add basic autoplay config, closes #131

Author: Duke

app/components/the-player.js

@@ -6,6 +6,8 @@ export default Ember.Component.extend({
   classNameBindings: ['hasModel'],
   hasModel: Ember.computed.bool('controller.player.current'),
 
+  autoplay: Ember.computed.alias('controller.player.autoplay'),
+
   episode: Ember.computed.alias('player.current'),
 
   actions: {

app/services/player.js

@@ -7,6 +7,8 @@ export default Ember.Service.extend({
   current: null,
   media: null,
 
+  autoplay: true,
+
   PLAYED_PERCENT: 95,
 
   playpause(episode) {
@@ -44,13 +46,17 @@ export default Ember.Service.extend({
   },
 
   _ended() {
-    let episodesElements = Ember.$('li.episode').get().reverse();
-    for (let i = 0; i <= episodesElements.length; i++) {
-      let episodeElement = Ember.$(episodesElements[i]);
-      if (!(episodeElement.is('.is-playing') || episodeElement.is('.is-played'))) {
-        episodeElement.find('.playpause').click();
-        break;
+    if (this.get('autoplay')) {
+      let episodesElements = Ember.$('li.episode').get().reverse();
+      for (let i = 0; i <= episodesElements.length; i++) {
+        let episodeElement = Ember.$(episodesElements[i]);
+        if (!(episodeElement.is('.is-playing') || episodeElement.is('.is-played'))) {
+          episodeElement.find('.playpause').click();
+          break;
+        }
       }
+    } else {
+      this.stop();
     }
   },
 
@@ -74,6 +80,7 @@ export default Ember.Service.extend({
   _isTimeToPing(currentTime) {
     return currentTime % 5 === 0;
   },
+
   _isPlayed(media) {
     let played = 100 * media.currentTime / media.duration;
     return played >= this.PLAYED_PERCENT;

app/styles/_player.sass

@@ -28,6 +28,28 @@
     padding: 5px
     width: 35%
 
+  label[for='autoplay']
+    padding: 0
+    position: relative
+    display: block
+    margin: 35px 15px
+    p
+      font-size: 10px
+      margin: 0
+
+  #autoplay
+    margin: 0
+    position: absolute
+    display: flex
+    + i
+      background: #FFF
+      border-radius: 0
+      font-size: 24px
+
+    &:checked + i
+      color: rgb(255, 87, 34)
+      font-weight: bold
+
   h2, h3
     padding: 0
     margin: 0px

app/templates/components/the-player.hbs

@@ -5,12 +5,17 @@
     <h3 class="channel-title">{{episode.channel.title}}</h3>
   </div>
 
+  <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="autoplay">
+    {{input checked=autoplay type="checkbox" class="mdl-icon-toggle__input" id="autoplay"}}
+    <i class="mdl-icon-toggle__label material-icons">text_format</i>
+    <p>autoplay</p>
+  </label>
 
   <button {{action "playpause" episode}} class="playpause material-icons">
     {{if episode.playing 'pause' 'play_arrow'}}
   </button>
 
-    <div id="wrapper-audio-element" class="player-audio-element">
+  <div id="wrapper-audio-element" class="player-audio-element">
     <audio controls width="100%" class="audio-element"></audio>
   </div>
 </div>

tests/acceptance/player-test.js

@@ -90,3 +90,27 @@ test('player | when ended a episode should starts the next', function(assert) {
     assert.equal(find('#player .title').text(), episodes[i].title);
   });
 });
+
+test('player | when ended a episode should not starts the next with autoplay off', function(assert) {
+  const player = application.registry.container().lookup('service:player');
+  player.set('autoplay', false);
+
+  visit(`/channels/${channel.id}`);
+
+  andThen(function() {
+    assert.equal(currentURL(), `/channels/${channel.id}`);
+    click('.episode:last .playpause');
+  });
+
+  andThen(function() {
+    let i = episodes.length - 1;
+    assert.equal(find('#player .title').text(), episodes[i].title);
+    $('.episode:last').addClass('is-played');
+    player.successMedia(mediaMock('ended'));
+  });
+
+  andThen(function() {
+    let i = episodes.length - 1;
+    assert.equal(find('#player .title').text(), episodes[i].title);
+  });
+});