Add title to annotation
Divide annotations in fragments when timestamp is the same
--- a/cms/app-client/app/components/playlist-component.js Thu Aug 18 17:02:02 2016 +0200
+++ b/cms/app-client/app/components/playlist-component.js Sun Aug 21 13:51:22 2016 +0200
@@ -62,7 +62,7 @@
this.get('player').play(id);
},
- pause: function(id) {
+ pause: function() {
this.get('player').pause();
},
--- a/cms/app-client/app/components/transcript-component.js Thu Aug 18 17:02:02 2016 +0200
+++ b/cms/app-client/app/components/transcript-component.js Sun Aug 21 13:51:22 2016 +0200
@@ -15,7 +15,6 @@
}),
didUpdate: function() {
- var self = this;
var target = Ember.$('.sentence.active');
if(this.get('autoscroll') && target.length) {
Ember.$(this.get('autoscrollElement')).animate({
--- a/cms/app-client/app/helpers/if-operator.js Thu Aug 18 17:02:02 2016 +0200
+++ b/cms/app-client/app/helpers/if-operator.js Sun Aug 21 13:51:22 2016 +0200
@@ -4,16 +4,12 @@
switch(operator) {
case '>':
return value1 > value2;
- break;
case '>=':
return value1 >= value2;
- break;
case '<=':
return value1 <= value2;
- break;
case '<':
return value1 < value2;
- break;
default:
break;
}
--- a/cms/app-client/app/serializers/transcript.js Thu Aug 18 17:02:02 2016 +0200
+++ b/cms/app-client/app/serializers/transcript.js Sun Aug 21 13:51:22 2016 +0200
@@ -2,34 +2,60 @@
export default JSONAPISerializer.extend({
- normalizeResponse: function(store, primaryModelClass, payload, id, requestType) {
- var lang = false;
+ normalizeResponse: function(store, primaryModelClass, payload, id) {
+ var speakers = payload['resources'].find(resource => resource['id'] === 'speakers');
+ var translationISO = false;
+
+ var buildFragment = function(annotation) {
+ var fragment = {
+ 'original': annotation['content']['data']['content']
+ };
+ if(annotation['content']['data']['transl']) {
+ fragment['translation'] = annotation['content']['data']['transl']['@value'];
+ }
+ if(annotation['content']['data']['words']) {
+ var words = [];
+ annotation['content']['data']['words'].forEach(function(word) {
+ words.push({
+ 'original': word['content'],
+ 'translation': word['transl']['@value']
+ });
+ });
+ fragment['literal'] = words;
+ }
+ if(annotation['content']['data']['speaker']) {
+ if(typeof annotation['content']['data']['speaker'] === 'object') {
+ var speaker = speakers['content']['data'].find(speaker => speaker['id'] === annotation['content']['data']['speaker']['id-ref']);
+ if(speaker) {
+ fragment['speaker'] = speaker['name'];
+ }
+ } else {
+ fragment['speaker'] = annotation['content']['data']['speaker'];
+ }
+ }
+ return fragment;
+ };
var annotations = [];
- payload.annotations.forEach(function(annotation) {
- var annotationObject = {
- 'content': annotation.content.data.content,
- 'start': annotation.begin,
- 'end': annotation.end
- };
- if(annotation.content.data.transl) {
- annotationObject.translation = annotation.content.data.transl['@value'];
- if (!lang) {
- lang = annotation.content.data.transl['@language'];
+ payload['annotations'].forEach(function(annotation) {
+ var previous = annotations[annotations.length - 1];
+ if(previous && annotation['begin'] === previous.begin && annotation['end'] === previous.end) {
+ previous.fragments.push(buildFragment(annotation));
+ } else {
+ var object = {
+ 'fragments': [buildFragment(annotation)],
+ 'begin': annotation['begin'],
+ 'end': annotation['end'],
+ };
+ var information = payload['annotation-types'].find(function(t) { return t['corpus:begin'] === annotation['begin'] && t['corpus:end'] === annotation['end']; });
+ if(information) {
+ object.title = information['dc:title'];
}
+ annotations.push(object);
}
- if(annotation.content.data.words) {
- var words = [];
- annotation.content.data.words.forEach(function(word) {
- var wordObject = {
- 'content': word.content,
- 'translation': word.transl['@value']
- };
- words.push(wordObject);
- })
- annotationObject.words = words;
+ if(!translationISO && annotation['content']['data']['transl']) {
+ translationISO = annotation['content']['data']['transl']['@language'];
}
- annotations.push(annotationObject);
});
var response = {
@@ -43,17 +69,17 @@
}
};
- if(Array.isArray(payload.meta['dc:title'])) {
- var original = payload.meta['dc:title'].find(function(title) { return title['@language'] !== lang; });
- var translation = payload.meta['dc:title'].find(function(title) { return title['@language'] === lang; });
+ if(Array.isArray(payload['meta']['dc:title'])) {
+ var original = payload['meta']['dc:title'].find(function(title) { return title['@language'] !== translationISO; });
if(original) {
response.data.attributes.title.original = original['@value'];
}
+ var translation = payload['meta']['dc:title'].find(function(title) { return title['@language'] === translationISO; });
if(translation) {
response.data.attributes.title.translation = translation['@value'];
}
} else {
- response.data.attributes.title.original = payload.meta['dc:title']['@value'];
+ response.data.attributes.title.original = payload['meta']['dc:title']['@value'];
}
--- a/cms/app-client/app/styles/components/playlist-component.scss Thu Aug 18 17:02:02 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss Sun Aug 21 13:51:22 2016 +0200
@@ -28,6 +28,10 @@
color: $dark-grey;
}
+.playlist-component ul li:last-child {
+ border-bottom: none;
+}
+
.playlist-component ul li:not(.playing) {
cursor: pointer;
--- a/cms/app-client/app/styles/components/transcript-component.scss Thu Aug 18 17:02:02 2016 +0200
+++ b/cms/app-client/app/styles/components/transcript-component.scss Sun Aug 21 13:51:22 2016 +0200
@@ -57,6 +57,7 @@
.transcript-component .transcript .sentence.active {
background-color: $grey-blue;
color: $light-white;
+ pointer-events: none;
}
.transcript-component .transcript .sentence .words {
@@ -119,6 +120,7 @@
}
.transcript-component .transcript .sentence.active .fa-play {
+ pointer-events: all;
border-color: $light-blue;
color: $light-blue;
opacity: 1;
@@ -131,4 +133,20 @@
.transcript-component .transcript .sentence p {
margin: 0;
line-height: 24px;
+}
+
+.transcript-component .transcript .sentence .speaker {
+ font-weight: bold;
+}
+
+.transcript-component .transcript .sentence .title {
+ float: right;
+ line-height: 24px;
+ padding-left: 20px;
+ color: $grey-blue;
+ font-weight: bold;
+}
+
+.transcript-component .transcript .sentence.active .title {
+ color: $light-white;
}
\ No newline at end of file
--- a/cms/app-client/app/templates/components/transcript-component.hbs Thu Aug 18 17:02:02 2016 +0200
+++ b/cms/app-client/app/templates/components/transcript-component.hbs Sun Aug 21 13:51:22 2016 +0200
@@ -1,44 +1,38 @@
<h2>
- {{player.transcript.title.original}}
+ {{player.transcript.title.original}}
{{#if player.transcript.title.translation}}
- <span>{{player.transcript.title.translation}}</span>
+ <span>{{player.transcript.title.translation}}</span>
{{/if}}
</h2>
<ol class="transcript">
{{#each player.transcript.annotations as |annotation|}}
-{{log 'each-annotation'}}
- {{#if (if-and (if-operator player.progress '>=' annotation.start) (if-operator player.progress '<' annotation.end))}}
- <li class="sentence active">
- <i class="fa fa-play" {{action 'play' annotation.start}}>Play</i>
- {{#if annotation.content}}<p class="original">{{annotation.content}}</p>{{/if}}
- {{#if annotation.words}}
- <div class="words">
- {{#each annotation.words as |word|}}
- <div class="word">
- <p class="original">{{word.content}}</p>
- <p class="translation">{{word.translation}}</p>
- </div>
- {{/each}}
- </div>
- {{/if}}
- {{#if annotation.translation}}<p class="translation">{{annotation.translation}}</p>{{/if}}
- </li>
- {{else}}
- <li class="sentence" {{action 'play' annotation.start}}>
- <i class="fa fa-play">Play</i>
- {{#if annotation.content}}<p class="original">{{annotation.content}}</p>{{/if}}
- {{#if annotation.words}}
- <div class="words">
- {{#each annotation.words as |word|}}
- <div class="word">
- <p class="original">{{word.content}}</p>
- <p class="translation">{{word.translation}}</p>
- </div>
- {{/each}}
- </div>
- {{/if}}
- {{#if annotation.translation}}<p class="translation">{{annotation.translation}}</p>{{/if}}
- </li>
- {{/if}}
+ <li class="sentence {{if (if-and (if-operator player.progress '>=' annotation.begin) (if-operator player.progress '<' annotation.end)) 'active'}}" {{action 'play' annotation.begin}}>
+ <i class="fa fa-play" {{action 'play' annotation.begin}}>Play</i>
+ {{#if annotation.title}}<span class="title">{{annotation.title}}</span>{{/if}}
+ {{#each annotation.fragments as |fragment|}}
+ <div class="fragment">
+
+ {{#if fragment.original}}
+ <p class="original">
+ {{#if fragment.speaker}}<span class="speaker">{{fragment.speaker}} :</span>{{/if}}
+ {{fragment.original}}
+ </p>
+ {{/if}}
+ {{#if fragment.literal}}
+ <div class="words">
+ {{#each fragment.literal as |word|}}
+ <div class="word">
+ <p class="original">{{word.original}}</p>
+ <p class="translation">{{word.translation}}</p>
+ </div>
+ {{/each}}
+ </div>
+ {{/if}}
+ {{#if fragment.translation}}
+ <p class="translation">{{fragment.translation}}</p>
+ {{/if}}
+ </div>
+ {{/each}}
+ </li>
{{/each}}
</ol>
\ No newline at end of file