1 import Ember from 'ember'; |
1 import Ember from 'ember'; |
2 import IntervalTree from 'interval-tree'; |
2 import IntervalTree from 'interval-tree'; |
3 |
3 |
4 export default Ember.Component.extend({ |
4 export default Ember.Component.extend({ |
5 |
5 |
6 classNames: ['transcript-component'], |
6 classNames: ['transcript-component'], |
7 |
7 |
8 player: Ember.inject.service(), |
8 player: Ember.inject.service(), |
9 |
9 |
10 autoscrollElement : '.corpus-app-container', |
10 autoscrollElement: '.corpus-app-container', |
11 previousElement: 0, |
11 previousElement: 0, |
12 autoscroll: true, |
12 autoscroll: true, |
13 timeout: null, |
13 timeout: null, |
14 |
14 |
15 transcript: Ember.computed.readOnly('player.transcript'), |
15 transcript: Ember.computed.readOnly('player.transcript'), |
16 hasSections: Ember.computed('transcript', function() { |
16 hasSections: Ember.computed('transcript', function () { |
17 var sections = this.get('transcript.sections'); |
17 var sections = this.get('transcript.sections'); |
18 return sections && sections.length > 0; |
18 return sections && sections.length > 0; |
19 }), |
19 }), |
20 |
20 |
21 didReceiveAttrs() { |
21 didReceiveAttrs() { |
22 this._super(...arguments); |
22 this._super(...arguments); |
23 }, |
23 }, |
24 |
24 |
25 itemObserver: Ember.observer('player.item', function () { |
25 itemObserver: Ember.observer('player.item', function () { |
26 if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) { |
26 if (!(this.get('isDestroyed') || this.get('isDestroying'))) { |
27 this.set('autoscroll', true); |
27 this.set('autoscroll', true); |
|
28 } |
|
29 }), |
|
30 |
|
31 didInsertElement() { |
|
32 Ember.$('#' + this.elementId).parent().on('scroll', Ember.run.bind(this, this.onScroll)); |
|
33 var intervals = new IntervalTree(this.get('player.model.duration_ms') / 2); |
|
34 if (this.get('hasSections')) { |
|
35 this.get('transcript.sections').forEach((section, indexSection) => { |
|
36 section.turns.forEach((turn, indexTurn) => { |
|
37 let sentenceId = `#sentence-${indexSection}-${indexTurn}`; |
|
38 intervals.add(turn.begin, turn.end, sentenceId/*, this.$(sentenceId)*/); |
|
39 }); |
|
40 }); |
|
41 } else { |
|
42 this.get('transcript.annotations').forEach((annotation, index) => { |
|
43 let sentenceId = `#sentence-${index}`; |
|
44 intervals.add(annotation.begin, annotation.end, sentenceId/*, this.$(sentenceId)*/); |
|
45 }); |
|
46 } |
|
47 this.set('intervals', intervals); |
|
48 this.get('player').set('transcriptLoading', false); |
|
49 }, |
|
50 |
|
51 onScroll() { |
|
52 if (!(this.get('isDestroyed') || this.get('isDestroying'))) { |
|
53 this.set('autoscroll', false); |
|
54 } |
|
55 if (this.elementId) { |
|
56 Ember.$('#' + this.elementId).parent().off('scroll'); |
|
57 } |
|
58 }, |
|
59 |
|
60 scroll: Ember.observer('player.progress', function () { |
|
61 var self = this; |
|
62 var progress = this.get('player.progress'); |
|
63 var previousElement = this.get('previousElement'); |
|
64 if (previousElement && progress >= previousElement.start && progress < previousElement.end) { |
|
65 return; |
|
66 } |
|
67 var intervals = this.get('intervals'); |
|
68 if (!intervals) { |
|
69 return; |
|
70 } |
|
71 var intervalList = intervals.search(progress); |
|
72 if (intervalList.length === 0) { |
|
73 return; |
|
74 } |
|
75 |
|
76 let previousDomElement = this.$('.sentence.active'); |
|
77 |
|
78 if (previousDomElement) { |
|
79 previousDomElement.removeClass('active'); |
|
80 Ember.$(".fa-play", previousDomElement).show(); |
|
81 } |
|
82 |
|
83 var target = null; |
|
84 intervalList.forEach(interval => { |
|
85 let obj = this.$(interval.id); |
|
86 obj.addClass('active'); |
|
87 Ember.$(".fa-play", obj).hide(); |
|
88 if (!target) { |
|
89 target = interval; |
|
90 target.object = obj; |
28 } |
91 } |
29 }), |
92 }); |
30 |
93 |
31 didInsertElement() { |
94 if (this.get('autoscroll') && target.object.length && (!previousElement || target.id !== previousElement.id)) { |
32 Ember.$('#' + this.elementId).parent().on('scroll', Ember.run.bind(this, this.onScroll)); |
95 Ember.$('#' + self.elementId).parent().off('scroll'); |
33 var intervals = new IntervalTree(this.get('player.model.duration_ms')/2); |
96 Ember.$(this.get('autoscrollElement')).animate({ |
34 if(this.get('hasSections')) { |
97 scrollTop: target.object.offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154 |
35 this.get('transcript.sections').forEach((section, indexSection) => { |
98 }, 150, 'swing', function () { |
36 section.turns.forEach((turn, indexTurn) => { |
99 setTimeout(function () { |
37 let sentenceId = `#sentence-${indexSection}-${indexTurn}`; |
100 Ember.$('#' + self.elementId).parent().on('scroll', Ember.run.bind(self, self.onScroll)); |
38 intervals.add(turn.begin ,turn.end , sentenceId/*, this.$(sentenceId)*/); |
101 }, 100); |
39 }); |
102 }); |
40 }); |
103 this.set('previousElement', target); |
41 } else { |
104 } |
42 this.get('transcript.annotations').forEach((annotation, index) => { |
105 }), |
43 let sentenceId = `#sentence-${index}`; |
|
44 intervals.add(annotation.begin ,annotation.end , sentenceId/*, this.$(sentenceId)*/); |
|
45 }); |
|
46 } |
|
47 this.set('intervals', intervals); |
|
48 this.get('player').set('transcriptLoading', false); |
|
49 }, |
|
50 |
|
51 onScroll() { |
|
52 if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) { |
|
53 this.set('autoscroll', false); |
|
54 } |
|
55 if(this.elementId) { |
|
56 Ember.$('#' + this.elementId).parent().off('scroll'); |
|
57 } |
|
58 }, |
|
59 |
|
60 scroll: Ember.observer('player.progress', function() { |
|
61 var self = this; |
|
62 var progress = this.get('player.progress'); |
|
63 var previousElement = this.get('previousElement'); |
|
64 if(previousElement && progress >= previousElement.start && progress < previousElement.end) { |
|
65 return; |
|
66 } |
|
67 var intervals = this.get('intervals'); |
|
68 if(!intervals) { |
|
69 return; |
|
70 } |
|
71 var intervalList = intervals.search(progress); |
|
72 if(intervalList.length === 0) { |
|
73 return; |
|
74 } |
|
75 var target = intervalList[0]; |
|
76 target.object = this.$(target.id); |
|
77 let previousDomElement = this.$('.sentence.active'); |
|
78 |
|
79 if(previousDomElement) { |
|
80 previousDomElement.removeClass('active'); |
|
81 Ember.$(".fa-play",previousDomElement).show(); |
|
82 } |
|
83 target.object.addClass('active'); |
|
84 Ember.$(".fa-play",target.object).hide(); |
|
85 |
106 |
86 |
107 |
87 if(this.get('autoscroll') && target.object.length && (!previousElement || target.id !== previousElement.id)) { |
108 actions: { |
88 Ember.$('#' + self.elementId).parent().off('scroll'); |
|
89 Ember.$(this.get('autoscrollElement')).animate({ |
|
90 scrollTop: target.object.offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154 |
|
91 }, 150, 'swing', function() { |
|
92 setTimeout(function() { |
|
93 Ember.$('#' + self.elementId).parent().on('scroll', Ember.run.bind(self, self.onScroll)); |
|
94 }, 100); |
|
95 }); |
|
96 this.set('previousElement', target); |
|
97 } |
|
98 }), |
|
99 |
109 |
100 |
110 play: function (progress) { |
101 actions: { |
111 this.get('player').trigger('progressupdate', progress); |
102 |
112 this.get('player').set('playing', true); |
103 play: function(progress) { |
|
104 this.get('player').trigger('progressupdate', progress); |
|
105 this.get('player').set('playing', true); |
|
106 } |
|
107 } |
113 } |
|
114 } |
108 |
115 |
109 }); |
116 }); |