--- 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();
}),
--- 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', '');
--- 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() {
--- 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
+ }
});
--- 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;
--- 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
--- 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}}
--- 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
--- 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