--- a/cms/app-client/app/components/transcript-component.js Fri Dec 02 15:30:16 2016 +0100
+++ b/cms/app-client/app/components/transcript-component.js Fri Dec 02 17:22:16 2016 +0100
@@ -3,107 +3,114 @@
export default Ember.Component.extend({
- classNames: ['transcript-component'],
+ classNames: ['transcript-component'],
+
+ player: Ember.inject.service(),
- player: Ember.inject.service(),
+ autoscrollElement: '.corpus-app-container',
+ previousElement: 0,
+ autoscroll: true,
+ timeout: null,
- autoscrollElement : '.corpus-app-container',
- previousElement: 0,
- autoscroll: true,
- timeout: null,
+ transcript: Ember.computed.readOnly('player.transcript'),
+ hasSections: Ember.computed('transcript', function () {
+ var sections = this.get('transcript.sections');
+ return sections && sections.length > 0;
+ }),
+
+ didReceiveAttrs() {
+ this._super(...arguments);
+ },
- transcript: Ember.computed.readOnly('player.transcript'),
- hasSections: Ember.computed('transcript', function() {
- var sections = this.get('transcript.sections');
- return sections && sections.length > 0;
- }),
+ itemObserver: Ember.observer('player.item', function () {
+ if (!(this.get('isDestroyed') || this.get('isDestroying'))) {
+ this.set('autoscroll', true);
+ }
+ }),
- didReceiveAttrs() {
- this._super(...arguments);
- },
-
- itemObserver: Ember.observer('player.item', function () {
- if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
- this.set('autoscroll', true);
- }
- }),
+ didInsertElement() {
+ Ember.$('#' + this.elementId).parent().on('scroll', Ember.run.bind(this, this.onScroll));
+ var intervals = new IntervalTree(this.get('player.model.duration_ms') / 2);
+ if (this.get('hasSections')) {
+ this.get('transcript.sections').forEach((section, indexSection) => {
+ section.turns.forEach((turn, indexTurn) => {
+ let sentenceId = `#sentence-${indexSection}-${indexTurn}`;
+ intervals.add(turn.begin, turn.end, sentenceId/*, this.$(sentenceId)*/);
+ });
+ });
+ } else {
+ this.get('transcript.annotations').forEach((annotation, index) => {
+ let sentenceId = `#sentence-${index}`;
+ intervals.add(annotation.begin, annotation.end, sentenceId/*, this.$(sentenceId)*/);
+ });
+ }
+ this.set('intervals', intervals);
+ this.get('player').set('transcriptLoading', false);
+ },
- didInsertElement() {
- Ember.$('#' + this.elementId).parent().on('scroll', Ember.run.bind(this, this.onScroll));
- var intervals = new IntervalTree(this.get('player.model.duration_ms')/2);
- if(this.get('hasSections')) {
- this.get('transcript.sections').forEach((section, indexSection) => {
- section.turns.forEach((turn, indexTurn) => {
- let sentenceId = `#sentence-${indexSection}-${indexTurn}`;
- intervals.add(turn.begin ,turn.end , sentenceId/*, this.$(sentenceId)*/);
- });
- });
- } else {
- this.get('transcript.annotations').forEach((annotation, index) => {
- let sentenceId = `#sentence-${index}`;
- intervals.add(annotation.begin ,annotation.end , sentenceId/*, this.$(sentenceId)*/);
- });
- }
- this.set('intervals', intervals);
- this.get('player').set('transcriptLoading', false);
- },
+ onScroll() {
+ if (!(this.get('isDestroyed') || this.get('isDestroying'))) {
+ this.set('autoscroll', false);
+ }
+ if (this.elementId) {
+ Ember.$('#' + this.elementId).parent().off('scroll');
+ }
+ },
+
+ scroll: Ember.observer('player.progress', function () {
+ var self = this;
+ var progress = this.get('player.progress');
+ var previousElement = this.get('previousElement');
+ if (previousElement && progress >= previousElement.start && progress < previousElement.end) {
+ return;
+ }
+ var intervals = this.get('intervals');
+ if (!intervals) {
+ return;
+ }
+ var intervalList = intervals.search(progress);
+ if (intervalList.length === 0) {
+ return;
+ }
+
+ let previousDomElement = this.$('.sentence.active');
- onScroll() {
- if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
- this.set('autoscroll', false);
- }
- if(this.elementId) {
- Ember.$('#' + this.elementId).parent().off('scroll');
- }
- },
+ if (previousDomElement) {
+ previousDomElement.removeClass('active');
+ Ember.$(".fa-play", previousDomElement).show();
+ }
- scroll: Ember.observer('player.progress', function() {
- var self = this;
- var progress = this.get('player.progress');
- var previousElement = this.get('previousElement');
- if(previousElement && progress >= previousElement.start && progress < previousElement.end) {
- return;
+ var target = null;
+ intervalList.forEach(interval => {
+ let obj = this.$(interval.id);
+ obj.addClass('active');
+ Ember.$(".fa-play", obj).hide();
+ if (!target) {
+ target = interval;
+ target.object = obj;
}
- var intervals = this.get('intervals');
- if(!intervals) {
- return;
- }
- var intervalList = intervals.search(progress);
- if(intervalList.length === 0) {
- return;
- }
- var target = intervalList[0];
- target.object = this.$(target.id);
- let previousDomElement = this.$('.sentence.active');
+ });
- if(previousDomElement) {
- previousDomElement.removeClass('active');
- Ember.$(".fa-play",previousDomElement).show();
- }
- target.object.addClass('active');
- Ember.$(".fa-play",target.object).hide();
+ if (this.get('autoscroll') && target.object.length && (!previousElement || target.id !== previousElement.id)) {
+ Ember.$('#' + self.elementId).parent().off('scroll');
+ Ember.$(this.get('autoscrollElement')).animate({
+ scrollTop: target.object.offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154
+ }, 150, 'swing', function () {
+ setTimeout(function () {
+ Ember.$('#' + self.elementId).parent().on('scroll', Ember.run.bind(self, self.onScroll));
+ }, 100);
+ });
+ this.set('previousElement', target);
+ }
+ }),
- if(this.get('autoscroll') && target.object.length && (!previousElement || target.id !== previousElement.id)) {
- Ember.$('#' + self.elementId).parent().off('scroll');
- Ember.$(this.get('autoscrollElement')).animate({
- scrollTop: target.object.offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154
- }, 150, 'swing', function() {
- setTimeout(function() {
- Ember.$('#' + self.elementId).parent().on('scroll', Ember.run.bind(self, self.onScroll));
- }, 100);
- });
- this.set('previousElement', target);
- }
- }),
+ actions: {
-
- actions: {
-
- play: function(progress) {
- this.get('player').trigger('progressupdate', progress);
- this.get('player').set('playing', true);
- }
+ play: function (progress) {
+ this.get('player').trigger('progressupdate', progress);
+ this.get('player').set('playing', true);
}
+ }
});