# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1480729437 -3600
# Node ID 5c43f17f87b5b5ac12d60df898138826aefe86a2
# Parent  ebd8269781fa12445d606b255a8940eaba479799
add a checkbox in player to control transcript autoscroll

diff -r ebd8269781fa -r 5c43f17f87b5 cms/app-client/app/components/transcript-component.js
--- a/cms/app-client/app/components/transcript-component.js	Sat Dec 03 01:32:43 2016 +0100
+++ b/cms/app-client/app/components/transcript-component.js	Sat Dec 03 02:43:57 2016 +0100
@@ -9,7 +9,7 @@
 
   autoscrollElement: '.corpus-app-container',
   previousElement: 0,
-  autoscroll: true,
+  autoscroll: Ember.computed.alias('player.autoscroll'),
   timeout: null,
 
   transcript: Ember.computed.readOnly('player.transcript'),
diff -r ebd8269781fa -r 5c43f17f87b5 cms/app-client/app/services/player.js
--- a/cms/app-client/app/services/player.js	Sat Dec 03 01:32:43 2016 +0100
+++ b/cms/app-client/app/services/player.js	Sat Dec 03 02:43:57 2016 +0100
@@ -8,6 +8,7 @@
     transcript: null,
     transcriptIframe: false,
     transcriptLoading: false,
+    autoscroll: true,
 
     window: false,
     playing: false,
diff -r ebd8269781fa -r 5c43f17f87b5 cms/app-client/app/styles/app.scss
--- a/cms/app-client/app/styles/app.scss	Sat Dec 03 01:32:43 2016 +0100
+++ b/cms/app-client/app/styles/app.scss	Sat Dec 03 02:43:57 2016 +0100
@@ -164,7 +164,7 @@
 
 .corpus-app-container.window {
     overflow-x: hidden;
-    overflow-y: hidden;
+    overflow-y: auto;
     height: 500px;
 }
 
diff -r ebd8269781fa -r 5c43f17f87b5 cms/app-client/app/styles/components/player-component.scss
--- a/cms/app-client/app/styles/components/player-component.scss	Sat Dec 03 01:32:43 2016 +0100
+++ b/cms/app-client/app/styles/components/player-component.scss	Sat Dec 03 02:43:57 2016 +0100
@@ -23,7 +23,7 @@
     height: 100%;
 }
 
-.player-component #audio .controls i {
+.player-component #audio .controls .player-control {
     position: relative;
     width: auto;
     height: 40px;
@@ -200,7 +200,7 @@
 .player-component #audio .controls.extra i.fa-text-height {
     position: relative;
     overflow: hidden;
-    display: inline-block;
+    display: block;
     width: 16px;
 }
 
@@ -216,3 +216,26 @@
 .player-component .player-language-list span {
     display: inline;
 }
+
+.player-component .controls-transcript {
+    display:inline-block;
+}
+
+.player-component .controls-transcript {
+  /* taken from https://codepen.io/jamesbarnett/pen/yILjk*/
+    input[type=checkbox] { display:none; } /* to hide the checkbox itself */
+    input[type=checkbox] + label:before {
+      font-family: FontAwesome;
+      display: inline-block;
+      color: $corpus-white;
+      font-size: 15px;
+      width: 15px;
+      padding-left: 2px;
+    }
+    label {
+      width: 16px;
+    }
+    input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
+
+    input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */
+  }
diff -r ebd8269781fa -r 5c43f17f87b5 cms/app-client/app/templates/components/player-component.hbs
--- a/cms/app-client/app/templates/components/player-component.hbs	Sat Dec 03 01:32:43 2016 +0100
+++ b/cms/app-client/app/templates/components/player-component.hbs	Sat Dec 03 02:43:57 2016 +0100
@@ -1,12 +1,12 @@
 <div id="audio" class="{{if (if-or player.transcript player.model.video) ' extra'}}{{if (if-and player.transcript player.model.video) ' multiple'}}">
   <div class="controls">
-    <i title="Précédent" class="fa fa-backward{{if isFirst ' disabled'}}" {{action 'backward'}}>Précédent</i>
+    <i title="Précédent" class="fa fa-backward{{if isFirst ' disabled'}} player-control" {{action 'backward'}}>Précédent</i>
     {{#if player.playing}}
-    <i title="Pause" class="fa fa-pause" {{action 'toggle'}}>Pause</i>
+    <i title="Pause" class="fa fa-pause player-control" {{action 'toggle'}}>Pause</i>
     {{else}}
-    <i title="Lecture" class="fa fa-play" {{action 'toggle'}}>Lecture</i>
+    <i title="Lecture" class="fa fa-play player-control" {{action 'toggle'}}>Lecture</i>
     {{/if}}
-    <i title="Suivant" class="fa fa-forward{{if isLast ' disabled'}}" {{action 'forward'}}>Suivant</i>
+    <i title="Suivant" class="fa fa-forward{{if isLast ' disabled'}} player-control" {{action 'forward'}}>Suivant</i>
   </div>
   <div class="progress">
     <span class="head">{{to-minutes head}}</span>
@@ -16,13 +16,16 @@
   <div class="controls extra">
   {{#if player.model.video}}
     {{#if player.videoscreen}}
-    <i title="Compress" class="fa fa-compress" {{action 'display' 'video'}}>Hide video</i>
+    <i title="Compress" class="fa fa-compress player-control" {{action 'display' 'video'}}>Hide video</i>
     {{else}}
-    <i title="Expand" class="fa fa-expand" {{action 'display' 'video'}}>Show video</i>
+    <i title="Expand" class="fa fa-expand player-control" {{action 'display' 'video'}}>Show video</i>
     {{/if}}
   {{/if}}
   {{#if player.transcript}}
+    <div class="controls-transcript player-control">
     <i title="Transcript" class="fa fa-text-height{{if (eq player.window 'transcript') ' active'}}" {{action 'display' 'transcript'}}>Transcript</i>
+    {{input type="checkbox" name="autoscroll" id="transcript-autoscroll" title="autoscroll" checked=player.autoscroll}}<label for="transcript-autoscroll" title="autoscroll"></label>
+    </div>
   {{/if}}
   </div>
   <div class="meta">