# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1468786644 -7200
# Node ID 523ca6e73353d39b8666f4b20c75b7db46205686
# Parent  da3c6ba8a80b9721ab466a75c31db40d1f30e05e
Add video player
Hide/show video player from toolbar

diff -r da3c6ba8a80b -r 523ca6e73353 cms/app-client/app/components/player-component.js
--- a/cms/app-client/app/components/player-component.js	Sun Jul 17 14:41:03 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Sun Jul 17 22:17:24 2016 +0200
@@ -2,6 +2,9 @@
 
 export default Ember.Component.extend({
     classNames: ['player-component'],
+    classNameBindings: ['video:video', 'reduce:reduce'],
+    videoBinding: 'player.model.video',
+    reduceBinding: 'player.reduce',
 
     player: Ember.inject.service(),
     popcorn: null,
@@ -26,7 +29,7 @@
         }
     }),
 
-    itemLoaded: Ember.observer('player.model.mediaList', function() {
+    itemLoaded: Ember.observer('player.model.media', function() {
         this.get('popcorn').load();
     }),
 
diff -r da3c6ba8a80b -r 523ca6e73353 cms/app-client/app/components/toolbar-component.js
--- a/cms/app-client/app/components/toolbar-component.js	Sun Jul 17 14:41:03 2016 +0200
+++ b/cms/app-client/app/components/toolbar-component.js	Sun Jul 17 22:17:24 2016 +0200
@@ -9,7 +9,9 @@
 	actions: {
 
 		display: function(element) {
-			if(this.get('player').get('window') !== element) {
+			if(element === 'video') {
+				this.get('player').set('reduce', !this.get('player').get('reduce'));
+			} else if(this.get('player').get('window') !== element) {
 				this.get('player').set('window', element);
 			} else {
 				this.get('player').set('window', '');
diff -r da3c6ba8a80b -r 523ca6e73353 cms/app-client/app/models/document.js
--- a/cms/app-client/app/models/document.js	Sun Jul 17 14:41:03 2016 +0200
+++ b/cms/app-client/app/models/document.js	Sun Jul 17 22:17:24 2016 +0200
@@ -8,6 +8,13 @@
     issued: DS.attr('date'),
     title: DS.attr('string'),
     language: DS.attr('string'),
+    publisher: DS.attr('string'),
+
+    publishers: DS.attr({ defaultValue: function() { return []; } }),
+    contributors: DS.attr({ defaultValue: function() { return []; } }),
+    geoInfo: DS.attr({ defaultValue: function() { return {}; } }),
+    mediaArray: DS.attr({ defaultValue: function() { return []; } }),
+
     duration_ms: DS.attr('number', {
         defaultValue: function() {
             var self = this;
@@ -20,26 +27,25 @@
             return duration;
         }
     }),
-    publisher: DS.attr('string'),
-    publishers: DS.attr({ defaultValue: function() { return []; } }),
-    contributors: DS.attr({ defaultValue: function() { return []; } }),
-    geoInfo: DS.attr({ defaultValue: function() { return {}; } }),
-    mediaArray: DS.attr({ defaultValue: function() { return []; } }),
 
-    mediaList: Ember.computed('mediaArray', function() {
-        var res = [];
+    media: Ember.computed('mediaArray', function() {
+        var array = [];
         var mp3 = null;
-        _.forEach(this.get('mediaArray'), function(m) {
-            if(m.format === 'audio/mpeg') {
-                mp3 = m;
-            } else if(m.format.startsWith('audio/')) {
-                res.push(m);
+        _.forEach(this.get('mediaArray'), function(media) {
+            var index = array.findIndex(element => element.format === media.format);
+            if(index > -1) {
+                if (media.master) {
+                    array.splice(index, 1, media);
+                }
+            } else {
+                array.push(media);
             }
         });
-        if(mp3) {
-            res.unshift(mp3);
-        }
-        return res;
+        return array;
+    }),
+
+    video: Ember.computed('media', function() {
+        return this.get('media').findIndex(element => element.format.match(new RegExp('^video/'))) > -1;
     }),
 
     duration: Ember.computed('duration_ms', function() {
diff -r da3c6ba8a80b -r 523ca6e73353 cms/app-client/app/services/player.js
--- a/cms/app-client/app/services/player.js	Sun Jul 17 14:41:03 2016 +0200
+++ b/cms/app-client/app/services/player.js	Sun Jul 17 22:17:24 2016 +0200
@@ -4,9 +4,11 @@
 
     items: [],
     item: null,
+    model: null,
 
-    model: null,
-    window: '', // Values are 'notice' or 'transcript' or ''
+    window: '',
+    playing: false,
+    reduce: false,
 
     init: function() {
         this.on('reset', Ember.run.bind(this, this.get('reset')));
@@ -14,8 +16,6 @@
 
     reset: function(id) {
         this.set('item', id);
-    },
-
-    playing: false
+    }
 
 });
diff -r da3c6ba8a80b -r 523ca6e73353 cms/app-client/app/styles/app.scss
--- a/cms/app-client/app/styles/app.scss	Sun Jul 17 14:41:03 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Sun Jul 17 22:17:24 2016 +0200
@@ -142,12 +142,6 @@
   width: 100%;
 }
 
-.corpus-app-content {
-    background-color: $dark-blue;
-    overflow: hidden;
-    height: 80px;
-}
-
 .ember-view.language a {
     text-transform: capitalize;
     text-decoration: none;
diff -r da3c6ba8a80b -r 523ca6e73353 cms/app-client/app/styles/components/player-component.scss
--- a/cms/app-client/app/styles/components/player-component.scss	Sun Jul 17 14:41:03 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss	Sun Jul 17 22:17:24 2016 +0200
@@ -3,7 +3,9 @@
     text-align: left;
     padding: 0px 40px;
     height: 80px;
-    border-bottom: 1px solid $light-white;
+    background-color: $dark-blue;
+    overflow: visible;
+    position: relative;
 }
 
 .player-component #audio {
@@ -143,4 +145,24 @@
 
 .player-component #audio .meta .title {
     font-weight: bold;
+}
+
+.player-component #video {
+    display: none;
+    background-color: $dark-blue;
+    border: none;
+    z-index: 1;
+    left: 0px;
+    position: absolute;
+    width: 554px;
+}
+
+.player-component.video:not(.reduce) #video {
+    display: block;
+}
+
+.player-component #video #popcorn-audio {
+    width: 100%;
+    display: block;
+    margin: 0 auto;
 }
\ No newline at end of file
diff -r da3c6ba8a80b -r 523ca6e73353 cms/app-client/app/templates/application.hbs
--- a/cms/app-client/app/templates/application.hbs	Sun Jul 17 14:41:03 2016 +0200
+++ b/cms/app-client/app/templates/application.hbs	Sun Jul 17 22:17:24 2016 +0200
@@ -1,10 +1,4 @@
-<div class="corpus-app-player">
-    <div class="corpus-app-content">
-    {{player-component action="changeDocument" document=currentItem}}
-    <p><strong>{{ currentItem.title }}</strong></p>
-    <p>{{doc-language url=currentItem.language}}</p>
-    </div>
-</div>
+{{player-component action="changeDocument" document=currentItem}}
 
 <div class="corpus-window">
     {{#if notice}}
diff -r da3c6ba8a80b -r 523ca6e73353 cms/app-client/app/templates/components/player-component.hbs
--- a/cms/app-client/app/templates/components/player-component.hbs	Sun Jul 17 14:41:03 2016 +0200
+++ b/cms/app-client/app/templates/components/player-component.hbs	Sun Jul 17 22:17:24 2016 +0200
@@ -25,9 +25,11 @@
 	</div>
 </div>
 
-<audio id="popcorn-audio">
-	{{#each player.model.mediaList as |media|}}
-	<source src="{{ media.url }}" type="{{ media.format }}">
-	{{/each}}
-Your browser does not support the audio element.
-</audio>
+<div id="video">
+	<video id="popcorn-audio">
+		{{#each player.model.media as |medium|}}
+		<source src="{{ medium.url }}" type="{{ medium.format }}">
+		{{/each}}
+	Your browser does not support the audio element.
+	</video>
+</div>
\ No newline at end of file
diff -r da3c6ba8a80b -r 523ca6e73353 cms/app-client/app/templates/components/toolbar-component.hbs
--- a/cms/app-client/app/templates/components/toolbar-component.hbs	Sun Jul 17 14:41:03 2016 +0200
+++ b/cms/app-client/app/templates/components/toolbar-component.hbs	Sun Jul 17 22:17:24 2016 +0200
@@ -1,5 +1,5 @@
 <ul>
 	<li {{ action 'display' 'notice'}} class="{{if (eq player.window 'notice') 'active'}}">Notice</li>
 	<li {{ action 'display' 'transcript'}} class="{{if (eq player.window 'transcript') 'active'}}">Transcript</li>
-	<li>Video</li>
+	{{#if player.model.video}}<li {{ action 'display' 'video'}} class="{{unless player.reduce 'active'}}">Video</li>{{/if}}
 </ul>
\ No newline at end of file