# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1471905131 -7200
# Node ID 12c694392e8e1320410e8eb20e12c68f18f06df6
# Parent  eba9edbd8f46c9fd8bf4d8490c5eacef4f591ba9
Add topic to transcript

diff -r eba9edbd8f46 -r 12c694392e8e cms/app-client/app/helpers/array-index.js
--- /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);
diff -r eba9edbd8f46 -r 12c694392e8e cms/app-client/app/models/transcript.js
--- 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(),
   
 });
diff -r eba9edbd8f46 -r 12c694392e8e cms/app-client/app/serializers/transcript.js
--- 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) {
diff -r eba9edbd8f46 -r 12c694392e8e cms/app-client/app/styles/components/transcript-component.scss
--- 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
diff -r eba9edbd8f46 -r 12c694392e8e cms/app-client/app/templates/components/transcript-component.hbs
--- 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
diff -r eba9edbd8f46 -r 12c694392e8e cms/app-client/tests/unit/helpers/array-index-test.js
--- /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);
+});