--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/helpers/array-index.js Tue Aug 23 00:32:11 2016 +0200
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export function arrayIndex(params/*, hash*/) {
+ return params[0][params[1]];
+}
+
+export default Ember.Helper.helper(arrayIndex);
--- a/cms/app-client/app/models/transcript.js Sun Aug 21 13:51:22 2016 +0200
+++ b/cms/app-client/app/models/transcript.js Tue Aug 23 00:32:11 2016 +0200
@@ -4,5 +4,6 @@
title: DS.attr(),
annotations: DS.attr(),
+ sections: DS.attr(),
});
--- a/cms/app-client/app/serializers/transcript.js Sun Aug 21 13:51:22 2016 +0200
+++ b/cms/app-client/app/serializers/transcript.js Tue Aug 23 00:32:11 2016 +0200
@@ -4,6 +4,7 @@
normalizeResponse: function(store, primaryModelClass, payload, id) {
var speakers = payload['resources'].find(resource => resource['id'] === 'speakers');
+ var topics = payload['resources'].find(resource => resource['id'] === 'topics');
var translationISO = false;
var buildFragment = function(annotation) {
@@ -47,10 +48,6 @@
'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(!translationISO && annotation['content']['data']['transl']) {
@@ -58,6 +55,41 @@
}
});
+ if(payload['annotation-types'].length) {
+ var types = [];
+ payload['annotation-types'].forEach(function(t) {
+ var object = {
+ 'title': t['dc:title'],
+ 'begin': t['corpus:begin'],
+ 'end': t['corpus:end']
+ };
+ var fragments = annotations.find(function(annotation) { return annotation['begin'] === t['corpus:begin'] && annotation['end'] === t['corpus:end']; });
+ if(fragments) {
+ object['fragments'] = fragments['fragments'];
+ }
+ types.push(object);
+ });
+ annotations = types;
+ }
+
+ if(payload['lists'].length) {
+ var sections = [];
+ var lists = [];
+ payload['lists'].forEach(function(list) {
+ var topic = topics['content']['data'].find(topic => topic.id === list['meta']['corpus:topic']['id-ref']);
+ sections.push({
+ 'title': topic['desc'],
+ 'begin': list['meta']['corpus:begin'],
+ 'end': list['meta']['corpus:end']
+ });
+ lists.push(annotations.filter(annotation => annotation['begin'] >= list['meta']['corpus:begin'] && annotation['end'] <= list['meta']['corpus:end']));
+ });
+ annotations = lists;
+ console.log(sections);
+ } else {
+ annotations = [annotations];
+ }
+
var response = {
'data': {
'id': id,
@@ -69,6 +101,10 @@
}
};
+ if(sections) {
+ response.data.attributes.sections = sections;
+ }
+
if(Array.isArray(payload['meta']['dc:title'])) {
var original = payload['meta']['dc:title'].find(function(title) { return title['@language'] !== translationISO; });
if(original) {
--- a/cms/app-client/app/styles/components/transcript-component.scss Sun Aug 21 13:51:22 2016 +0200
+++ b/cms/app-client/app/styles/components/transcript-component.scss Tue Aug 23 00:32:11 2016 +0200
@@ -22,7 +22,7 @@
.transcript-component h2 span{
display: block;
- color: $medium-grey;
+ color: $medium-grey;
}
body.videoscreen .transcript-component h2 {
@@ -31,7 +31,6 @@
}
.transcript-component .transcript {
- list-style: none;
margin: 0px;
padding: 154px 20px 0px 20px;
}
@@ -40,7 +39,21 @@
padding-top: 0px;
}
-.transcript-component .transcript .sentence {
+.transcript-component .transcript h3 {
+ padding: 20px 20px 20px 64px;
+ font-weight: bold;
+ color: $medium-blue;
+ font-size: 12px;
+ line-height: 24px;
+}
+
+.transcript-component .transcript .annotations {
+ list-style: none;
+ margin: 0px;
+ padding: 0px;
+}
+
+.transcript-component .transcript .annotations .sentence {
padding: 20px 20px 20px 64px;
color: $medium-grey;
position: relative;
@@ -49,28 +62,28 @@
min-height: 24px;
}
-.transcript-component .transcript .sentence:not(.active):hover {
+.transcript-component .transcript .annotations .sentence:not(.active):hover {
cursor: pointer;
background-color: $medium-grey-5;
}
-.transcript-component .transcript .sentence.active {
+.transcript-component .transcript .annotations .sentence.active {
background-color: $grey-blue;
color: $light-white;
pointer-events: none;
}
-.transcript-component .transcript .sentence .words {
+.transcript-component .transcript .annotations .sentence .words {
font-size: 0px;
margin: 20px 0px;
}
-.transcript-component .transcript .sentence .words .word {
+.transcript-component .transcript .annotations .sentence .words .word {
display: inline-block;
}
-.transcript-component .transcript .sentence .words .word .original,
-.transcript-component .transcript .sentence .words .word .translation {
+.transcript-component .transcript .annotations .sentence .words .word .original,
+.transcript-component .transcript .annotations .sentence .words .word .translation {
background-color: $medium-grey;
padding: 0px 4px;
margin-right: 2px;
@@ -78,29 +91,29 @@
font-size: 12px;
}
-.transcript-component .transcript .sentence.active .words .word .original,
-.transcript-component .transcript .sentence.active .words .word .translation {
+.transcript-component .transcript .annotations .sentence.active .words .word .original,
+.transcript-component .transcript .annotations .sentence.active .words .word .translation {
background-color: $light-white;
}
-.transcript-component .transcript .sentence .words .word {
+.transcript-component .transcript .annotations .sentence .words .word {
color: $light-blue;
}
-.transcript-component .transcript .sentence.active .words .word .original {
+.transcript-component .transcript .annotations .sentence.active .words .word .original {
color: $grey-blue;
}
-.transcript-component .transcript .sentence .words .word .translation {
+.transcript-component .transcript .annotations .sentence .words .word .translation {
margin-bottom: 4px;
}
-.transcript-component .transcript .sentence.active .translation {
+.transcript-component .transcript .annotations .sentence.active .translation {
color: $light-blue;
}
-.transcript-component .transcript .sentence .fa-play {
+.transcript-component .transcript .annotations .sentence .fa-play {
position: absolute;
border: solid 2px $medium-grey;
border-radius: 100%;
@@ -115,31 +128,31 @@
transition: opacity .15s;
}
-.transcript-component .transcript .sentence .fa-play::before {
+.transcript-component .transcript .annotations .sentence .fa-play::before {
margin-left: 3px;
}
-.transcript-component .transcript .sentence.active .fa-play {
+.transcript-component .transcript .annotations .sentence.active .fa-play {
pointer-events: all;
border-color: $light-blue;
color: $light-blue;
opacity: 1;
}
-.transcript-component .transcript .sentence:not(.active):hover .fa-play {
+.transcript-component .transcript .annotations .sentence:not(.active):hover .fa-play {
opacity: 1;
}
-.transcript-component .transcript .sentence p {
+.transcript-component .transcript .annotations .sentence p {
margin: 0;
line-height: 24px;
}
-.transcript-component .transcript .sentence .speaker {
+.transcript-component .transcript .annotations .sentence .speaker {
font-weight: bold;
}
-.transcript-component .transcript .sentence .title {
+.transcript-component .transcript .annotations .sentence .title {
float: right;
line-height: 24px;
padding-left: 20px;
@@ -147,6 +160,6 @@
font-weight: bold;
}
-.transcript-component .transcript .sentence.active .title {
+.transcript-component .transcript .annotations .sentence.active .title {
color: $light-white;
}
\ No newline at end of file
--- a/cms/app-client/app/templates/components/transcript-component.hbs Sun Aug 21 13:51:22 2016 +0200
+++ b/cms/app-client/app/templates/components/transcript-component.hbs Tue Aug 23 00:32:11 2016 +0200
@@ -4,35 +4,43 @@
<span>{{player.transcript.title.translation}}</span>
{{/if}}
</h2>
-<ol class="transcript">
-{{#each player.transcript.annotations as |annotation|}}
- <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 class="transcript">
+ {{#each player.transcript.annotations as |annotations index|}}
+ {{#if player.transcript.sections}}
+ <h3>{{array-index (array-index player.transcript.sections index) 'title'}}</h3>
+ {{/if}}
+ <ol class="annotations">
+ {{#each annotations as |annotation|}}
+ <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>
- {{/each}}
+ {{/if}}
+ {{#if fragment.translation}}
+ <p class="translation">{{fragment.translation}}</p>
+ {{/if}}
</div>
- {{/if}}
- {{#if fragment.translation}}
- <p class="translation">{{fragment.translation}}</p>
- {{/if}}
- </div>
- {{/each}}
- </li>
-{{/each}}
-</ol>
\ No newline at end of file
+ {{/each}}
+ </li>
+ {{/each}}
+ </ol>
+ {{/each}}
+</div>
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/helpers/array-index-test.js Tue Aug 23 00:32:11 2016 +0200
@@ -0,0 +1,10 @@
+import { arrayIndex } from 'app-client/helpers/array-index';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | array index');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+ let result = arrayIndex([42]);
+ assert.ok(result);
+});