# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1469196704 -7200
# Node ID 7a5d729992b87e2fa5bcc0f3b97f97835fa9c5c4
# Parent  5b7ae96768be72ca166e33ddac9fcba747af0950
Design and animate transcript

diff -r 5b7ae96768be -r 7a5d729992b8 cms/app-client/app/components/player-component.js
--- a/cms/app-client/app/components/player-component.js	Thu Jul 21 23:36:50 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Fri Jul 22 16:11:44 2016 +0200
@@ -33,6 +33,10 @@
         this.get('popcorn').load();
     }),
 
+    progressObserver: Ember.observer('player.progress', function() {
+        this.get('popcorn').currentTime(this.get('player').get('progress') / 1000);
+    }),
+
     init: function() {
         this._super(...arguments);
         this.get('player');
diff -r 5b7ae96768be -r 7a5d729992b8 cms/app-client/app/components/transcript-component.js
--- a/cms/app-client/app/components/transcript-component.js	Thu Jul 21 23:36:50 2016 +0200
+++ b/cms/app-client/app/components/transcript-component.js	Fri Jul 22 16:11:44 2016 +0200
@@ -7,25 +7,28 @@
     player: Ember.inject.service(),
 
     autoscroll: true,
-    autoscrollElement : Ember.$('.corpus-app-container'),
+    autoscrollElement : '.corpus-app-container',
+    timeout: null,
 
     itemObserver: Ember.observer('player.item', function () {
         this.set('autoscroll', true);
     }),
 
-    init: function() {
+    didUpdate: function() {
         var self = this;
-        this.get('autoscrollElement').bind('scroll', function() {
-            self.set('autoscroll', false);
-        });
-
-        this._super(...arguments);
+        if(this.get('autoscroll')) {
+            Ember.$(this.get('autoscrollElement')).animate({
+                scrollTop: Ember.$('.sentence.active').offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154
+            }, 150);
+        }
     },
 
-    didUpdate: function() {
-        if(this.get('autoscroll')) {
-            this.get('autoscrollElement').scrollTop((Ember.$('.sentence.active').offset().top + this.get('autoscrollElement').scrollTop()) - this.get('autoscrollElement').offset().top)
+    actions: {
+
+        play: function(progress) {
+            this.get('player').set('progress', progress);
         }
+
     }
 
 });
diff -r 5b7ae96768be -r 7a5d729992b8 cms/app-client/app/services/player.js
--- a/cms/app-client/app/services/player.js	Thu Jul 21 23:36:50 2016 +0200
+++ b/cms/app-client/app/services/player.js	Fri Jul 22 16:11:44 2016 +0200
@@ -8,7 +8,10 @@
 
     window: '',
     playing: false,
-    progress: 0,
+    progress: 0, // In Milliseconds
+    progressObserver: Ember.observer('progress', function() {
+        console.log('Ember.observer progress');
+    }),
     reduce: false,
 
     init: function() {
diff -r 5b7ae96768be -r 7a5d729992b8 cms/app-client/app/styles/components/transcript-component.scss
--- a/cms/app-client/app/styles/components/transcript-component.scss	Thu Jul 21 23:36:50 2016 +0200
+++ b/cms/app-client/app/styles/components/transcript-component.scss	Fri Jul 22 16:11:44 2016 +0200
@@ -1,18 +1,61 @@
 .transcript-component {
     background-color: $light-blue;
-    padding: 20px;
+    padding: 0px;
+    width: 554px;
+    box-sizing: border-box;
+}
+
+.transcript-component h2 {
+    position: absolute;
+    z-index: 1;
+    width: inherit;
+    background: linear-gradient($light-blue, $light-blue 50%, transparent);
+    padding-bottom: 54px;
 }
 
-.transcript-component .sentence {
-    padding: 20px;
-    color: $medium-grey;
+.transcript-component .transcript {
+    list-style: none;
+    margin: 0px;
+    padding: 154px 20px 0px 20px;
 }
 
-.transcript-component .sentence.active {
+.transcript-component .transcript .sentence {
+    padding: 24px 48px;
+    color: $medium-grey;
+    position: relative;
+    background-color: transparent;
+    transition: background-color .15s, color .15s;
+}
+
+.transcript-component .transcript .sentence.active {
     background-color: $grey-blue;
     color: $light-white;
 }
 
-.transcript-component .sentence.active .translation {
+.transcript-component .transcript .sentence.active .translation {
     color: $light-blue;
+}
+
+.transcript-component .transcript .sentence .fa-play {
+    position: absolute;
+    border: solid 2px $medium-grey;
+    border-radius: 100%;
+    width: 24px;
+    height: 24px;
+    line-height: 20px;
+    left: 12px;
+}
+
+.transcript-component .transcript .sentence .fa-play::before {
+    margin-left: 2px;
+}
+
+.transcript-component .transcript .sentence.active .fa-play {
+    border-color: $light-blue;
+    color: $light-blue;
+}
+
+.transcript-component .transcript .sentence p {
+    margin: 0;
+    line-height: 24px;
 }
\ No newline at end of file
diff -r 5b7ae96768be -r 7a5d729992b8 cms/app-client/app/templates/components/transcript-component.hbs
--- a/cms/app-client/app/templates/components/transcript-component.hbs	Thu Jul 21 23:36:50 2016 +0200
+++ b/cms/app-client/app/templates/components/transcript-component.hbs	Fri Jul 22 16:11:44 2016 +0200
@@ -1,10 +1,10 @@
 <h2>{{player.transcript.title}}</h2>
-<div class="transcript">
+<ol class="transcript">
 {{#each player.transcript.annotations as |annotation|}}
-	<div class="sentence{{if (if-and (if-operator player.progress '>=' annotation.start) (if-operator player.progress '<' annotation.end)) ' active'}}">
-		<i class="fa fa-play">Play</i>
+	<li class="sentence{{if (if-and (if-operator player.progress '>=' annotation.start) (if-operator player.progress '<' annotation.end)) ' active'}}">
+		<i class="fa fa-play" {{action 'play' annotation.start}}>Play</i>
 		<p class="original">{{annotation.content}}</p>
 		<p class="translation">{{annotation.translation}}</p>
-	</div>
+	</li>
 {{/each}}
-</div>
\ No newline at end of file
+</ol>
\ No newline at end of file