corpus_parole: cms/app-client/app/components/player-component.js@82878d132784 (annotated)

Mercurial Mercurial > corpus_parole / annotate

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

cms/app-client/app/components/player-component.js

author	Chloe Laisne <chloe.laisne@gmail.com>
	Fri, 01 Jul 2016 22:15:35 +0200
changeset 215	82878d132784
parent 214	9bff007eb03c
child 220	2145b80776a3
permissions	-rw-r--r--

Play/Pause/Reset events from player/playlist-components Add title over visu-chrono

86 15ded106ef1a add a player component to handle sound play/pause nowmad@23.1.168.192.in-addr.arpa parents: diff changeset	1	import Ember from 'ember';
15ded106ef1a add a player component to handle sound play/pause nowmad@23.1.168.192.in-addr.arpa parents: diff changeset	2
15ded106ef1a add a player component to handle sound play/pause nowmad@23.1.168.192.in-addr.arpa parents: diff changeset	3	export default Ember.Component.extend({
191 db5711fbbb6c Player component linting Chloe Laisne <chloe.laisne@gmail.com> parents: 94 diff changeset	4	classNames: ['player-component'],
209 35cb7200bb0a Separate playlist and player component with player service as bridge Chloe Laisne <chloe.laisne@gmail.com> parents: 192 diff changeset	5
35cb7200bb0a Separate playlist and player component with player service as bridge Chloe Laisne <chloe.laisne@gmail.com> parents: 192 diff changeset	6	player: Ember.inject.service(),
211 7451203a1321 Setup progress bar Chloe Laisne <chloe.laisne@gmail.com> parents: 210 diff changeset	7	popcorn: null,
209 35cb7200bb0a Separate playlist and player component with player service as bridge Chloe Laisne <chloe.laisne@gmail.com> parents: 192 diff changeset	8
211 7451203a1321 Setup progress bar Chloe Laisne <chloe.laisne@gmail.com> parents: 210 diff changeset	9	head: 0,
7451203a1321 Setup progress bar Chloe Laisne <chloe.laisne@gmail.com> parents: 210 diff changeset	10	remaining: 0,
86 15ded106ef1a add a player component to handle sound play/pause nowmad@23.1.168.192.in-addr.arpa parents: diff changeset	11
212 f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	12	isFirst: false,
f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	13	isLast: false,
f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	14
f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	15	item: Ember.computed('player.model', function() {
f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	16	return this.get('player').get('model');
210 08ad36c693b1 Player design Chloe Laisne <chloe.laisne@gmail.com> parents: 209 diff changeset	17	}),
08ad36c693b1 Player design Chloe Laisne <chloe.laisne@gmail.com> parents: 209 diff changeset	18
212 f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	19	modelLoaded: Ember.observer('player.model', function() {
f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	20	var items = this.get('player').get('items');
f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	21	var index = items.indexOf(this.get('player').get('item'));
f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	22	this.set('isFirst', index === 0);
f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	23	this.set('isLast', index === items.length - 1);
191 db5711fbbb6c Player component linting Chloe Laisne <chloe.laisne@gmail.com> parents: 94 diff changeset	24	}),
86 15ded106ef1a add a player component to handle sound play/pause nowmad@23.1.168.192.in-addr.arpa parents: diff changeset	25
215 82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	26	itemLoaded: Ember.observer('player.model.mediaList', function() {
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	27	this.get('popcorn').load();
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	28	}),
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	29
209 35cb7200bb0a Separate playlist and player component with player service as bridge Chloe Laisne <chloe.laisne@gmail.com> parents: 192 diff changeset	30	init: function() {
35cb7200bb0a Separate playlist and player component with player service as bridge Chloe Laisne <chloe.laisne@gmail.com> parents: 192 diff changeset	31	this._super(...arguments);
35cb7200bb0a Separate playlist and player component with player service as bridge Chloe Laisne <chloe.laisne@gmail.com> parents: 192 diff changeset	32	this.get('player');
35cb7200bb0a Separate playlist and player component with player service as bridge Chloe Laisne <chloe.laisne@gmail.com> parents: 192 diff changeset	33	},
35cb7200bb0a Separate playlist and player component with player service as bridge Chloe Laisne <chloe.laisne@gmail.com> parents: 192 diff changeset	34
191 db5711fbbb6c Player component linting Chloe Laisne <chloe.laisne@gmail.com> parents: 94 diff changeset	35	didInsertElement: function() {
211 7451203a1321 Setup progress bar Chloe Laisne <chloe.laisne@gmail.com> parents: 210 diff changeset	36	this.set('popcorn', Popcorn('#popcorn-audio'));
215 82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	37	this.get('popcorn').on('loadeddata', Ember.run.bind(this, this.get('onUpdate')));
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	38	this.get('popcorn').on('timeupdate', Ember.run.bind(this, this.get('onUpdate')));
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	39	this.get('popcorn').on('play', Ember.run.bind(this, this.get('onPlay')));
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	40	this.get('popcorn').on('pause', Ember.run.bind(this, this.get('onPause')));
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	41
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	42	this.get('player').on('reset', Ember.run.bind(this, function(id) {
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	43	if(this.get('player').get('item') !== id) {
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	44	this.get('popcorn').on('loadeddata', Ember.run.bind(this, this.get('play')));
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	45	} else {
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	46	this.toggle();
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	47	}
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	48	}));
211 7451203a1321 Setup progress bar Chloe Laisne <chloe.laisne@gmail.com> parents: 210 diff changeset	49	},
7451203a1321 Setup progress bar Chloe Laisne <chloe.laisne@gmail.com> parents: 210 diff changeset	50
215 82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	51	onUpdate: function(event) {
211 7451203a1321 Setup progress bar Chloe Laisne <chloe.laisne@gmail.com> parents: 210 diff changeset	52	var currentTime = this.get('popcorn').currentTime();
7451203a1321 Setup progress bar Chloe Laisne <chloe.laisne@gmail.com> parents: 210 diff changeset	53	var duration = this.get('popcorn').duration();
7451203a1321 Setup progress bar Chloe Laisne <chloe.laisne@gmail.com> parents: 210 diff changeset	54	this.$('.bar .value').width(currentTime * 100 / duration + '%');
7451203a1321 Setup progress bar Chloe Laisne <chloe.laisne@gmail.com> parents: 210 diff changeset	55	this.set('head', currentTime);
7451203a1321 Setup progress bar Chloe Laisne <chloe.laisne@gmail.com> parents: 210 diff changeset	56	this.set('remaining', duration - currentTime);
87 24fef043ea0b add control to go next/previous sound nowmad@nowmads-macbook-pro.local parents: 86 diff changeset	57	},
191 db5711fbbb6c Player component linting Chloe Laisne <chloe.laisne@gmail.com> parents: 94 diff changeset	58
215 82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	59	onPlay: function(event) {
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	60	this.get('player').set('playing', true);
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	61	},
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	62
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	63	onPause: function(event) {
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	64	this.get('player').set('playing', false);
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	65	},
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	66
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	67	play: function() {
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	68	this.get('popcorn').play();
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	69	},
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	70
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	71	pause: function() {
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	72	this.get('popcorn').pause();
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	73	},
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	74
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	75	toggle: function() {
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	76	if(this.get('player').get('playing')) {
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	77	this.pause();
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	78	} else {
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	79	this.play();
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	80	}
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	81	},
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	82
191 db5711fbbb6c Player component linting Chloe Laisne <chloe.laisne@gmail.com> parents: 94 diff changeset	83	actions: {
db5711fbbb6c Player component linting Chloe Laisne <chloe.laisne@gmail.com> parents: 94 diff changeset	84
212 f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	85	backward: function() {
215 82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	86	var index = this.get('player').get('items').indexOf(this.get('player').get('item'));
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	87	console.log('backward', index);
212 f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	88	},
f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	89
f2c6080a73aa Player backward/forward design logic Chloe Laisne <chloe.laisne@gmail.com> parents: 211 diff changeset	90	forward: function() {
215 82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	91	var index = this.get('player').get('items').indexOf(this.get('player').get('item'));
82878d132784 Play/Pause/Reset events from player/playlist-components Chloe Laisne <chloe.laisne@gmail.com> parents: 214 diff changeset	92	console.log('forward', index);
191 db5711fbbb6c Player component linting Chloe Laisne <chloe.laisne@gmail.com> parents: 94 diff changeset	93	}
db5711fbbb6c Player component linting Chloe Laisne <chloe.laisne@gmail.com> parents: 94 diff changeset	94
86 15ded106ef1a add a player component to handle sound play/pause nowmad@23.1.168.192.in-addr.arpa parents: diff changeset	95	}
15ded106ef1a add a player component to handle sound play/pause nowmad@23.1.168.192.in-addr.arpa parents: diff changeset	96	});

corpus_parole