--- a/cms/app-client/app/components/player-component.js Mon Sep 26 23:13:15 2016 +0200
+++ b/cms/app-client/app/components/player-component.js Tue Sep 27 01:40:19 2016 +0200
@@ -19,6 +19,11 @@
return this.get('player').get('model');
}),
+ didRender: function() {
+ this.textAutoscroll(Ember.$('#' + this.elementId).find('.title'));
+ this.textAutoscroll(Ember.$('#' + this.elementId).find('.author'));
+ },
+
modelLoaded: Ember.observer('player.model', function() {
var items = this.get('player').get('items');
var index = items.indexOf(this.get('player').get('item'));
@@ -64,6 +69,26 @@
}));
},
+ textAutoscroll: function(jElement) {
+ var text = jElement.find('span');
+ text.stop(true);
+ text.css('text-indent', '0px');
+ if(text.width() > jElement.width()) {
+ var duration = ( ( text.width() - jElement.width() ) * 8 / 100 ) * 1000;
+ function animate() {
+ text.delay(4000)
+ .animate({
+ 'text-indent': -( text.width() - jElement.width() ) + 'px'
+ }, duration, 'linear', function() {
+ text.stop(true);
+ text.css('text-indent', '0px')
+ window.setTimeout(function() { animate() }, 1);
+ });
+ }
+ animate();
+ }
+ },
+
onUpdate: function() {
var progress = this.get('popcorn').currentTime();
var duration = this.get('popcorn').duration();
--- a/cms/app-client/app/styles/components/player-component.scss Mon Sep 26 23:13:15 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss Tue Sep 27 01:40:19 2016 +0200
@@ -166,10 +166,17 @@
.player-component #audio .meta .title,
.player-component #audio .meta .author {
-
+ position: relative;
+ height: 22px;
+ text-overflow: clip;
}
-
+.player-component #audio .meta .title span,
+.player-component #audio .meta .author span {
+ position: absolute;
+ overflow: auto;
+ text-overflow: initial;
+}
.player-component #audio .meta .title {
font-weight: bold;
--- a/cms/app-client/app/templates/components/player-component.hbs Mon Sep 26 23:13:15 2016 +0200
+++ b/cms/app-client/app/templates/components/player-component.hbs Tue Sep 27 01:40:19 2016 +0200
@@ -27,11 +27,11 @@
</div>
<div class="meta">
<p>
- <span title="{{ item.title }}" class="title">{{ item.title }}</span>
+ <span title="{{ item.title }}" class="title"><span>{{ item.title }}</span></span>
{{doc-language class="language" url=item.language}}
</p>
<p>
- <span title="{{item.publishers_disp}}" class="author">{{item.publishers_disp}}</span>
+ <span title="{{item.publishers_disp}}" class="author"><span>{{item.publishers_disp}}</span></span>
<span class="date">{{short-date item.issued}}</span>
</p>
</div>