cms/app-client/app/components/transcript-component.js
changeset 455 a8bed1c7df8e
parent 454 710a2ae08a74
child 457 a7a333c0b1eb
equal deleted inserted replaced
454:710a2ae08a74 455:a8bed1c7df8e
     1 import Ember from 'ember';
     1 import Ember from 'ember';
       
     2 import IntervalTree from 'interval-tree';
     2 
     3 
     3 export default Ember.Component.extend({
     4 export default Ember.Component.extend({
     4 
     5 
     5     classNames: ['transcript-component'],
     6     classNames: ['transcript-component'],
     6 
     7 
    14     hasSections: Ember.computed('player', 'player.transcript', function() {
    15     hasSections: Ember.computed('player', 'player.transcript', function() {
    15       var sections = this.get('player.transcript.sections');
    16       var sections = this.get('player.transcript.sections');
    16       return sections && sections.length > 0;
    17       return sections && sections.length > 0;
    17     }),
    18     }),
    18 
    19 
       
    20     didReceiveAttrs() {
       
    21       this._super(...arguments);
       
    22       this.set('intervals', new IntervalTree(this.get('player.model.duration_ms')/2));
       
    23     },
       
    24 
    19     itemObserver: Ember.observer('player.item', function () {
    25     itemObserver: Ember.observer('player.item', function () {
    20       if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
    26       if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
    21           this.set('autoscroll', true);
    27           this.set('autoscroll', true);
    22       }
    28       }
    23     }),
    29     }),
    24 
    30 
    25     didInsertElement: function() {
    31     didInsertElement() {
    26         Ember.$('#' + this.elementId).parent().on('scroll', Ember.run.bind(this, this.onScroll));
    32         Ember.$('#' + this.elementId).parent().on('scroll', Ember.run.bind(this, this.onScroll));
    27     },
    33     },
    28 
    34 
    29     onScroll: function() {
    35     onScroll() {
    30         if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
    36         if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
    31           this.set('autoscroll', false);
    37           this.set('autoscroll', false);
    32         }
    38         }
    33         if(this.elementId) {
    39         if(this.elementId) {
    34           Ember.$('#' + this.elementId).parent().off('scroll');
    40           Ember.$('#' + this.elementId).parent().off('scroll');
    35         }
    41         }
    36     },
    42     },
    37 
    43 
    38     scroll: Ember.observer('player.progress', function() {
    44     scroll: Ember.observer('player.progress', function() {
    39       var self = this;
    45       var self = this;
    40       var target = this.$('.sentence.active');
    46       var progress = this.get('player.progress');
    41       if(this.get('autoscroll') && target.length && target.attr('id') !== this.get('previousElement')) {
    47       var previousElement = this.get('previousElement');
       
    48       if(previousElement && progress >= previousElement.start && progress < previousElement.end) {
       
    49         return;
       
    50       }
       
    51       var intervals = this.get('intervals');
       
    52       if(!intervals) {
       
    53         return;
       
    54       }
       
    55       var intervalList = intervals.search(progress);
       
    56       if(intervalList.length === 0) {
       
    57         return;
       
    58       }
       
    59       var target = intervalList[0];
       
    60       //var target = this.$('.sentence.active');
       
    61       if(previousElement) {
       
    62         previousElement.object.removeClass('active');
       
    63         Ember.$(".fa-play",previousElement.object).show();
       
    64       }
       
    65       target.object.addClass('active');
       
    66       Ember.$(".fa-play",target.object).hide();
       
    67 
       
    68 
       
    69       if(this.get('autoscroll') && target.object.length && (!previousElement || target.id !== previousElement.id)) {
    42           Ember.$('#' + self.elementId).parent().off('scroll');
    70           Ember.$('#' + self.elementId).parent().off('scroll');
    43           Ember.$(this.get('autoscrollElement')).animate({
    71           Ember.$(this.get('autoscrollElement')).animate({
    44               scrollTop: target.offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154
    72               scrollTop: target.object.offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154
    45           }, 150, 'swing', function() {
    73           }, 150, 'swing', function() {
    46               setTimeout(function() {
    74               setTimeout(function() {
    47                   Ember.$('#' + self.elementId).parent().on('scroll', Ember.run.bind(self, self.onScroll));
    75                   Ember.$('#' + self.elementId).parent().on('scroll', Ember.run.bind(self, self.onScroll));
    48               }, 100);
    76               }, 100);
    49           });
    77           });
    50           this.set('previousElement', target.attr('id'));
    78           this.set('previousElement', target);
    51       }
    79       }
    52     }),
    80     }),
    53 
    81 
    54 
    82 
    55     actions: {
    83     actions: {