Separate playlist and player component with player service as bridge
authorChloe Laisne <chloe.laisne@gmail.com>
Mon, 27 Jun 2016 11:35:10 +0200
changeset 209 35cb7200bb0a
parent 208 59b63cdda9e8
child 210 08ad36c693b1
Separate playlist and player component with player service as bridge
cms/app-client/app/components/player-component.js
cms/app-client/app/components/playlist-component.js
cms/app-client/app/controllers/application.js
cms/app-client/app/models/document.js
cms/app-client/app/services/player.js
cms/app-client/app/templates/components/playlist-component.hbs
cms/app-client/tests/unit/services/player-test.js
--- a/cms/app-client/app/components/player-component.js	Fri Jun 24 17:07:24 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Mon Jun 27 11:35:10 2016 +0200
@@ -2,12 +2,16 @@
 
 export default Ember.Component.extend({
     classNames: ['player-component'],
+
+    player: Ember.inject.service(),
+
     currentTime: "00:00",
     duration: "00:00",
 
-    documentLoaded: Ember.observer('document.mediaArray', function() {
-        var mediaList = this.get('document').get("mediaList");
+    documentLoaded: Ember.observer('player.item', function() {
+        var mediaList = this.get('player').get('item').get('mediaList');
         if ((typeof(mediaList) !== 'undefined') && (mediaList.length > 0)) {
+
             if (this.audio.src){
                 this.pause();
                 this.updateProgress(0);
@@ -16,9 +20,15 @@
             this.audio.src = mp3.url;
             this.audio.load();
             this.set("currentTime", "00:00");
+            //console.log(mp3.url);
         }
     }),
 
+    init: function() {
+        this._super(...arguments);
+        this.get('player');
+    },
+
     didInsertElement: function() {
         var _this = this;
 
--- a/cms/app-client/app/components/playlist-component.js	Fri Jun 24 17:07:24 2016 +0200
+++ b/cms/app-client/app/components/playlist-component.js	Mon Jun 27 11:35:10 2016 +0200
@@ -2,11 +2,12 @@
 
 export default Ember.Component.extend({
 
-	classNames: ['playlist-component'],
+    classNames: ['playlist-component'],
 
-	filter: Ember.inject.service(),
+    filter: Ember.inject.service(),
+    player: Ember.inject.service(),
 
-	documents: Ember.computed('model', 'filter.location', 'filter.language', 'filter.discourse', 'filter.date', 'filter.theme', function() {
+    documents: Ember.computed('model', 'filter.location', 'filter.language', 'filter.discourse', 'filter.date', 'filter.theme', function() {
         var self = this;
         var documents = this.get('model');
         if (this.get('filter.date').length > 0) {
@@ -33,9 +34,17 @@
         return documents;
     }),
 
-	didRender: function() {
-		this._super(...arguments);
-		this.$().find('ul').height(Ember.$('.corpus-app-wrapper').outerHeight() - (Ember.$('.filter-component').outerHeight() + this.$().find('h2').outerHeight()));
-	}
+    didRender: function() {
+        this._super(...arguments);
+        this.$().find('ul').height(Ember.$('.corpus-app-wrapper').outerHeight() - (Ember.$('.filter-component').outerHeight() + this.$().find('h2').outerHeight()));
+    },
+
+    actions: {
+
+        setItem: function(id) {
+            this.get('player').set('itemId', id);
+        }
+
+    }
 
 });
--- a/cms/app-client/app/controllers/application.js	Fri Jun 24 17:07:24 2016 +0200
+++ b/cms/app-client/app/controllers/application.js	Mon Jun 27 11:35:10 2016 +0200
@@ -85,22 +85,27 @@
         return true;
     },
 
+    player: Ember.inject.service(),
+
     detail: null,
 
-    currentId: null,
-    currentItem: Ember.computed('currentId', function() {
-        Ember.$(".result-item").toggleClass("playing", false);
-        if (this.get('currentId') === null){
-            return null;
-        }
-        Ember.$("div[id='" + this.get('currentId') + "']").toggleClass("playing", true);
-        return this.store.findRecord('document', this.get('currentId'));
-    }),
 
     modalItem: Ember.computed('detail', function() {
         return this.store.findRecord('document', this.get('detail'));
     }),
 
+    itemIdObserver: Ember.observer('player.itemId', function() {
+        var self = this;
+        this.store.findRecord('document', this.get('player').get('itemId'), { reload: true }).then(function(it){
+            self.get('player').set('item', it);
+        });
+    }),
+
+    init: function() {
+        this._super(...arguments);
+        this.get('player');
+    },
+
     actions: {
 
         changeDocument: function(docDirection){
--- a/cms/app-client/app/models/document.js	Fri Jun 24 17:07:24 2016 +0200
+++ b/cms/app-client/app/models/document.js	Mon Jun 27 11:35:10 2016 +0200
@@ -3,34 +3,30 @@
 import _ from 'lodash/lodash';
 
 var CPDocument = DS.Model.extend({
-  // id: DS.attr('string'),
-  uri: DS.attr('string'),
-  title: DS.attr('string'),
-  language: DS.attr('string'),
-  publishers: DS.attr({defaultValue: []}),
-  contributors: DS.attr({defaultValue: []}),
-  mediaArray: DS.attr({defaultValue: []}),
-  mediaList: Ember.computed('mediaArray', function() {
-    var res = [];
-    var mp3 = null;
-    _.forEach(this.get('mediaArray'), function(m) {
-      if(m.format === 'audio/mpeg') {
-        mp3 = m;
-      } else if (m.format.startsWith('audio/')) {
-        res.push(m);
-      }
-    });
-    if(mp3) {
-      res.unshift(mp3);
-    }
-    return res;
-  })
-});
+
+    uri: DS.attr('string'),
+    title: DS.attr('string'),
+    language: DS.attr('string'),
+    publishers: DS.attr({ defaultValue: function() { return []; } }),
+    contributors: DS.attr({ defaultValue: function() { return []; } }),
+    mediaArray: DS.attr({ defaultValue: function() { return []; } }),
 
-CPDocument.reopenClass({
-  FIXTURES: [
+    mediaList: Ember.computed('mediaArray', function() {
+        var res = [];
+        var mp3 = null;
+        _.forEach(this.get('mediaArray'), function(m) {
+            if(m.format === 'audio/mpeg') {
+                mp3 = m;
+            } else if(m.format.startsWith('audio/')) {
+                res.push(m);
+            }
+        });
+        if(mp3) {
+            res.unshift(mp3);
+        }
+        return res;
+    })
 
-  ]
 });
 
 export default CPDocument;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/services/player.js	Mon Jun 27 11:35:10 2016 +0200
@@ -0,0 +1,10 @@
+import Ember from 'ember';
+
+export default Ember.Service.extend({
+
+	items: [],
+	
+	itemId: null,
+	item: null
+
+});
--- a/cms/app-client/app/templates/components/playlist-component.hbs	Fri Jun 24 17:07:24 2016 +0200
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Mon Jun 27 11:35:10 2016 +0200
@@ -3,7 +3,7 @@
     {{#each documents as |document| }}
     <li id="{{document.id}}">
         <div class="tools">
-            <span class="play playing-indicator" {{action 'play' document}}>&#9654;</span>
+            <span class="play playing-indicator" {{ action 'setItem' document.id }}>&#9654;</span>
             <button{{action 'openNotice' document}}>Notice</button>
         </div>
         <span class="title">{{ document.title }}</span>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/services/player-test.js	Mon Jun 27 11:35:10 2016 +0200
@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('service:player', 'Unit | Service | player', {
+  // Specify the other units that are required for this test.
+  // needs: ['service:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let service = this.subject();
+  assert.ok(service);
+});