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