# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1471299368 -7200
# Node ID a7cf2887e99339c64f67fc499a5ade4ad03750a4
# Parent  0be9770b09b415f08301ded7a639a2602b5447ae
Hide/Show video CSS

diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/app.js
--- a/cms/app-client/app/app.js	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/app.js	Tue Aug 16 00:16:08 2016 +0200
@@ -8,10 +8,10 @@
 Ember.MODEL_FACTORY_INJECTIONS = true;
 
 App = Ember.Application.extend({
-  rootElement: config.rootElement,
-  modulePrefix: config.modulePrefix,
-  podModulePrefix: config.podModulePrefix,
-  Resolver
+    rootElement: config.rootElement,
+    modulePrefix: config.modulePrefix,
+    podModulePrefix: config.podModulePrefix,
+    Resolver
 });
 
 loadInitializers(App, config.modulePrefix);
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/components/player-component.js
--- a/cms/app-client/app/components/player-component.js	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Tue Aug 16 00:16:08 2016 +0200
@@ -2,9 +2,8 @@
 
 export default Ember.Component.extend({
     classNames: ['player-component'],
-    classNameBindings: ['video:video', 'reduce:reduce'],
+    classNameBindings: ['video:video'],
     videoBinding: 'player.model.video',
-    reduceBinding: 'player.reduce',
 
     player: Ember.inject.service(),
     popcorn: null,
@@ -104,7 +103,7 @@
         },
 
         display: function(el) {
-            this.get('player').display(el);
+            this.get('player').displayAdditionalInformation(el);
         }
 
     }
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/components/playlist-component.js
--- a/cms/app-client/app/components/playlist-component.js	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/components/playlist-component.js	Tue Aug 16 00:16:08 2016 +0200
@@ -68,7 +68,7 @@
 
         displayNotice: function(id) {
             if(this.get('player').get('item') === id) {
-                this.get('player').display('notice');
+                this.get('player').displayMetadata('notice');
             } else {
                 if(this.get('notice') !== id) {
                     this.set('notice', id);
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/components/toolbar-component.js
--- a/cms/app-client/app/components/toolbar-component.js	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/components/toolbar-component.js	Tue Aug 16 00:16:08 2016 +0200
@@ -8,12 +8,8 @@
 
 	actions: {
 
-		display: function(element) {
-			if(element === 'video') {
-				this.get('player').set('reduce', !this.get('player').get('reduce'));
-			} else {
-				this.get('player').display(element);
-			}
+		display: function(el) {
+			this.get('player').displayAdditionalInformation(el);
 		}
 
 	}
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/controllers/application.js
--- a/cms/app-client/app/controllers/application.js	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/controllers/application.js	Tue Aug 16 00:16:08 2016 +0200
@@ -2,6 +2,12 @@
 
 export default Ember.Controller.extend({
 
+    player: Ember.inject.service(),
+
+    playerVideoscreenObserver: Ember.observer('player.videoscreen', function() {
+        Ember.$('body').toggleClass('videoscreen', this.get('player').get('videoscreen'));
+    }),
+
     queryParams: ['location', 'date', 'notice', {
         language: 'langue',
         discourse: 'discours',
@@ -85,7 +91,7 @@
         return true;
     },
 
-    player: Ember.inject.service(),
+    
 
     itemObserver: Ember.observer('player.item', function() {
         var self = this;
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/helpers/if-and.js
--- a/cms/app-client/app/helpers/if-and.js	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/helpers/if-and.js	Tue Aug 16 00:16:08 2016 +0200
@@ -1,7 +1,7 @@
 import Ember from 'ember';
 
 export function ifAnd(params) {
-  return params.every(element => element === true);
+    return params.every(element => Array.isArray(element) ? element.length : !!element);
 }
 
 export default Ember.Helper.helper(ifAnd);
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/helpers/if-or.js
--- a/cms/app-client/app/helpers/if-or.js	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/helpers/if-or.js	Tue Aug 16 00:16:08 2016 +0200
@@ -1,7 +1,7 @@
 import Ember from 'ember';
 
 export function ifOr(params) {
-	return params.find(element => Array.isArray(element) ? element.length : element);
+	return params.find(element => Array.isArray(element) ? element.length : !!element);
 }
 
 export default Ember.Helper.helper(ifOr);
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/services/player.js
--- a/cms/app-client/app/services/player.js	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/services/player.js	Tue Aug 16 00:16:08 2016 +0200
@@ -10,9 +10,21 @@
     window: '',
     playing: false,
     progress: 0, // In Milliseconds
-    reduce: false,
+    videoscreen: false,
+
+    modelObserver: Ember.observer('model', function() {
+        this.toggleVideoscreen(this.get('model').get('video'));
+    }),
 
-    display: function(el) {
+    displayAdditionalInformation: function(el) {
+        if(el === 'video') {
+            this.toggleVideoscreen();
+        } else {
+            this.displayMetadata(el);
+        }
+    },
+
+    displayMetadata: function(el) {
          if(this.get('window') !== el) {
             this.set('window', el);
         } else {
@@ -20,6 +32,14 @@
         }
     },
 
+    toggleVideoscreen: function(state) {
+        if(typeof state === 'undefined') {
+            this.set('videoscreen', !this.get('videoscreen'));
+        } else {
+            this.set('videoscreen', state);
+        }        
+    },
+
     init: function() {
         this.on('reset', Ember.run.bind(this, this.get('reset')));
     },
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/styles/app.scss
--- a/cms/app-client/app/styles/app.scss	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Tue Aug 16 00:16:08 2016 +0200
@@ -39,18 +39,18 @@
 
     @import 'tabs/chrono';
     @import 'tabs/langues';
+}
 
-    @import 'components/sorting-component';
-    @import 'components/filtering-component';
-    @import 'components/filter-component';
-    @import 'components/playlist-component';
-    @import 'components/discourses-component';
-    @import 'components/player-component';
-    @import 'components/toolbar-component';
-    @import 'components/notice-component';
-    @import 'components/transcript-component';
+@import 'components/sorting-component';
+@import 'components/filtering-component';
+@import 'components/filter-component';
+@import 'components/playlist-component';
+@import 'components/discourses-component';
+@import 'components/player-component';
+@import 'components/toolbar-component';
+@import 'components/notice-component';
+@import 'components/transcript-component';
 
-}
 
 h1, h2, h3, h4, h5, h6 {
     margin: 0;
@@ -77,12 +77,21 @@
     background-color: $medium-white;
 }
 
-.corpus-app-container h2 {
+body.videoscreen .corpus-app-container {
+    padding-top: 308px;
+}
+
+h2 {
     color: $dark-grey;
     line-height: 60px;
     font-size: 14px;
 }
 
+.corpus-app-container h2 {
+    line-height: 30px;
+    margin: 12px auto;
+}
+
 .corpus-window {
     overflow: hidden;
     position: relative;
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/styles/components/player-component.scss
--- a/cms/app-client/app/styles/components/player-component.scss	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss	Tue Aug 16 00:16:08 2016 +0200
@@ -65,6 +65,14 @@
     margin-left: 10px;
 }
 
+.player-component #audio .controls.extra i {
+    margin-left: 28px;
+}
+
+.player-component #audio .controls.extra i:first-child {
+    margin-left: 0px;
+}
+
 .player-component #audio .progress {
     position: relative;
     margin: 0px 59px;
@@ -104,6 +112,10 @@
     width: 226px;
 }
 
+.player-component #audio.extra.multiple .progress .bar {
+    width: 181px;
+}
+
 .player-component #audio .progress .bar .value {
     width: 0%;
     height: 100%;
@@ -157,7 +169,7 @@
 
 .player-component #video {
     display: none;
-    background-color: $dark-blue;
+    background-color: #000000;
     border: none;
     z-index: 1;
     left: 0px;
@@ -165,12 +177,13 @@
     width: 554px;
 }
 
-.player-component.video:not(.reduce) #video {
+body.videoscreen .player-component.video #video {
     display: block;
 }
 
 .player-component #video #popcorn-audio {
     width: 100%;
+    height: 308px;
     display: block;
     margin: 0 auto;
 }
@@ -184,6 +197,11 @@
     transition: opacity .15s;
 }
 
+.player-component #audio .controls.extra i.fa-expand::before,
+.player-component #audio .controls.extra i.fa-compress::before {
+    font-size: 19px;
+}
+
 .player-component #audio .controls.extra i.fa-bars:not(.active)::before {
     opacity: .1;
 }
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/styles/components/toolbar-component.scss
--- a/cms/app-client/app/styles/components/toolbar-component.scss	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/styles/components/toolbar-component.scss	Tue Aug 16 00:16:08 2016 +0200
@@ -1,7 +1,7 @@
 .toolbar-component {
-	height: 40px;
-	width: 100%;
-	line-height: 40px;
+    height: 40px;
+    width: 100%;
+    line-height: 40px;
     text-transform: none;
     padding: 0px 15px;
     text-align: left;
@@ -11,21 +11,23 @@
 }
 
 .toolbar-component ul {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	text-align: center;
-	font-size: 0px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    font-size: 0px;
 }
 
 .toolbar-component ul li {
-	padding: 0 10px;
-	display: inline-block;
-	font-size: 12px;
-	cursor: pointer;
+    padding: 0 10px;
+    display: inline-block;
+    font-size: 12px;
+    cursor: pointer;
+    border-left: 1px solid transparent;
 }
 
 .toolbar-component ul li.active {
-	background-color: $light-white;
-	color: $dark-blue;
+    border-left-color: $dark-blue;
+    background-color: $light-white;
+    color: $dark-blue;
 }
\ No newline at end of file
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/styles/components/transcript-component.scss
--- a/cms/app-client/app/styles/components/transcript-component.scss	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/styles/components/transcript-component.scss	Tue Aug 16 00:16:08 2016 +0200
@@ -5,12 +5,23 @@
     box-sizing: border-box;
 }
 
+body.videoscreen .transcript-component {
+    overflow: scroll;
+}
+
 .transcript-component h2 {
     position: absolute;
     z-index: 1;
     width: inherit;
     background: linear-gradient($light-blue, $light-blue 50%, transparent);
     padding-bottom: 54px;
+    line-height: 30px;
+    margin: 12px auto;
+}
+
+body.videoscreen .transcript-component h2 {
+    padding-bottom: 0px;
+    position: static;
 }
 
 .transcript-component .transcript {
@@ -19,12 +30,17 @@
     padding: 154px 20px 0px 20px;
 }
 
+body.videoscreen .transcript-component .transcript {
+    padding-top: 0px;
+}
+
 .transcript-component .transcript .sentence {
     padding: 20px 20px 20px 64px;
     color: $medium-grey;
     position: relative;
     background-color: transparent;
     transition: background-color .15s, color .15s;
+    min-height: 24px;
 }
 
 .transcript-component .transcript .sentence:not(.active):hover {
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/templates/components/player-component.hbs
--- a/cms/app-client/app/templates/components/player-component.hbs	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/templates/components/player-component.hbs	Tue Aug 16 00:16:08 2016 +0200
@@ -1,4 +1,4 @@
-<div id="audio" class="{{if player.transcript 'extra'}}">
+<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="Backward" class="fa fa-backward{{if isFirst ' disabled'}}" {{action 'backward'}}>Backward</i>
 		{{#if player.playing}}
@@ -14,6 +14,13 @@
 		<span class="remaining">- {{to-minutes remaining}}</span>
 	</div>
 	<div class="controls extra">
+	{{#if player.model.video}}
+		{{#if player.videoscreen}}
+		<i title="Compress" class="fa fa-compress" {{action 'display' 'video'}}>Hide video</i>
+		{{else}}
+		<i title="Expand" class="fa fa-expand" {{action 'display' 'video'}}>Show video</i>
+		{{/if}}
+	{{/if}}
 	{{#if player.transcript}}
 		<i title="Transcript" class="fa fa-bars{{if (eq player.window 'transcript') ' active'}}" {{action 'display' 'transcript'}}>Transcript</i>
 	{{/if}}
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/templates/components/toolbar-component.hbs
--- a/cms/app-client/app/templates/components/toolbar-component.hbs	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/templates/components/toolbar-component.hbs	Tue Aug 16 00:16:08 2016 +0200
@@ -4,6 +4,6 @@
 	<li {{ action 'display' 'transcript'}} class="{{if (eq player.window 'transcript') 'active'}}">Transcript</li>
 {{/if}}
 {{#if player.model.video}}
-	<li {{ action 'display' 'video'}} class="{{unless player.reduce 'active'}}">Video</li>
+	<li {{ action 'display' 'video'}} class="{{if player.videoscreen 'active'}}">Video</li>
 {{/if}}
 </ul>
\ No newline at end of file
diff -r 0be9770b09b4 -r a7cf2887e993 cms/app-client/app/templates/components/transcript-component.hbs
--- a/cms/app-client/app/templates/components/transcript-component.hbs	Fri Aug 05 18:51:59 2016 +0200
+++ b/cms/app-client/app/templates/components/transcript-component.hbs	Tue Aug 16 00:16:08 2016 +0200
@@ -4,14 +4,14 @@
 	{{#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>
-		<p class="original">{{annotation.content}}</p>
-		<p class="translation">{{annotation.translation}}</p>
+		{{#if annotation.content}}<p class="original">{{annotation.content}}</p>{{/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>
-		<p class="original">{{annotation.content}}</p>
-		<p class="translation">{{annotation.translation}}</p>
+		{{#if annotation.content}}<p class="original">{{annotation.content}}</p>{{/if}}
+		{{#if annotation.translation}}<p class="translation">{{annotation.translation}}</p>{{/if}}
 	</li>
 	{{/if}}
 {{/each}}