Added tooltip to mix item and toggle state to live button

This commit is contained in:
=
2012-09-27 21:47:47 +01:00
parent 382653d36f
commit a3ec72b6f4
11 changed files with 118 additions and 38 deletions

View File

@@ -11,4 +11,31 @@ def rreplace(string, pattern, sub):
"""
Replaces 'pattern' in 'string' with 'sub' if 'pattern' ends 'string'.
"""
return re.sub('%s$' % pattern, sub, string)
return re.sub('%s$' % pattern, sub, string)
def is_number(s):
try:
if len(s) > 0:
float(s)
return True
except ValueError:
pass
except IndexError:
pass
except Exception:
pass
return False
def trunc_lines(s, linecount):
ret = ""
cur = 0
for line in s.splitlines():
if cur < linecount:
ret += line + "\n"
cur += 1
else:
break
return ret

View File

@@ -1,4 +1,4 @@
from django.db.models.aggregates import Count
from django.template.loader import render_to_string
from tastypie import fields
from tastypie.authorization import Authorization
from tastypie.constants import ALL_WITH_RELATIONS
@@ -33,9 +33,6 @@ class MixResource(BackboneCompatibleResource):
def dehydrate_mix_image(self, bundle):
return bundle.obj.get_image_url()
def dehydrate_description(self, bundle):
return bundle.obj.description.replace("\n", "<br />")
def dehydrate(self, bundle):
bundle.data['waveform_url'] = bundle.obj.get_waveform_url()
bundle.data['user_name'] = bundle.obj.user.nice_name()
@@ -44,7 +41,7 @@ class MixResource(BackboneCompatibleResource):
bundle.data['play_count'] = bundle.obj.plays.count()
bundle.data['like_count'] = bundle.obj.likes.count()
bundle.data['mode'] = 'mix'
bundle.data['tooltip'] = render_to_string('inc/player_tooltip.html', {'item': bundle.obj})
bundle.data['comment_count'] = bundle.obj.comments.count()
bundle.data['liked'] = bundle.obj.is_liked(bundle.request.user)

View File

@@ -2,8 +2,10 @@ import urlparse
from allauth.socialaccount.models import SocialAccount
from django import template
from django.db.models import get_model
from django.template.defaultfilters import linenumbers
from django_gravatar.helpers import has_gravatar, get_gravatar_url
from core.analytics.google import ShowGoogleAnalyticsJS
from core.utils.string import is_number, trunc_lines
from dss import settings
from spa.models import _BaseModel
@@ -79,4 +81,13 @@ def bind_lookup(parser, token):
@register.tag
def googleanalyticsjs(parser, token):
return ShowGoogleAnalyticsJS()
return ShowGoogleAnalyticsJS()
@register.filter
def truncmixlist(value):
if len(value) > 0:
if not is_number(value[0]):
value = linenumbers(value)
value = trunc_lines(value, 5)
return value

View File

@@ -571,4 +571,4 @@ div.event-content td {
padding: 15px 0 15px 70px;
background: url(../img/whats-on.png) no-repeat left;
margin: 0;
}
}

View File

@@ -12,6 +12,7 @@ window.MixListItemView = Backbone.View.extend({
"click .play-button-small-start":"startMix",
"click .play-button-small-resume":"resume",
"click .play-button-small-pause":"pauseMix",
"click .mix-link":"mixLink",
"click .like-button a":"likeMix",
"click .favourite-button a":"favouriteMix",
"click .share-button":"shareLink",
@@ -27,7 +28,13 @@ window.MixListItemView = Backbone.View.extend({
var id = this.model.get("id");
this.setLikeButton(id, this.model.get('liked'));
this.setFavouriteButton(id, this.model.get('favourited'));
$('#mix-link-' + id, this.el).popover({
animation: true,
placement: 'bottom',
trigger: 'hover',
html: 'true',
delay: { show: 500, hide: 500 }
});
return this;
},
setLikeButton:function (id, liked) {
@@ -55,6 +62,9 @@ window.MixListItemView = Backbone.View.extend({
var mode = $(e.currentTarget).data("mode");
com.podnoms.utils.downloadURL("/audio/download/" + id);
},
mixLink:function (e) {
$(e.currentTarget).popover('hide');
},
likeMix:function (e) {
var id = $(e.currentTarget).data("id");
var mode = $(e.currentTarget).data("mode");

View File

@@ -12,7 +12,7 @@ window.SidebarView = Backbone.View.extend({
"click #sidebar-play-pause-button-small":"togglePlayState",
"click #sidebar-listen-live":"playLive"
},
initialize: function(){
initialize:function () {
this.render();
_.bindAll(this, "trackChanged");
_.bindAll(this, "trackPlaying");
@@ -26,7 +26,7 @@ window.SidebarView = Backbone.View.extend({
$("#live-now-playing", this.el).text(data.title);
});
},
render: function(){
render:function () {
$(this.el).html(this.template());
return this;
},
@@ -41,14 +41,33 @@ window.SidebarView = Backbone.View.extend({
trackPlaying:function (data) {
$(this.el).find('#header-play-button-icon').removeClass('icon-play');
$(this.el).find('#header-play-button-icon').addClass('icon-pause');
},
trackPaused:function (data) {
$(this.el).find('#header-play-button-icon').removeClass('icon-pause');
$(this.el).find('#header-play-button-icon').addClass('icon-play');
},
playLive:function () {
com.podnoms.player.playLive();
var liveButton = $(this.el).find('#sidebar-listen-live');
if ((liveButton).hasClass('btn-danger')) {
com.podnoms.player.stopPlaying();
liveButton.removeClass('btn-danger').addClass('btn-success').text('Listen live');
liveButton.blur();
} else {
liveButton.button('loading');
com.podnoms.player.playLive({
success:function () {
$.getJSON(
'ajax/live_now_playing/',
function (data) {
$('#live-now-playing', el).text(data.title);
data.title += " (live)";
_eventAggregator.trigger("track_changed", data);
});
liveButton.button('reset');
liveButton.removeClass('btn-success').addClass('btn-danger').text('Stop listening');
}
});
}
_eventAggregator.trigger("track_playing")
var button = $(this.el).find('#sidebar-play-pause-button-small');
var el = this.el;
@@ -56,12 +75,5 @@ window.SidebarView = Backbone.View.extend({
.removeClass('play-button-smallstart')
.removeClass('play-button-small-loading')
.addClass('play-button-small-pause');
$.getJSON(
'ajax/live_now_playing/',
function (data) {
$('#live-now-playing', el).text(data.title);
data.title += " (live)";
_eventAggregator.trigger("track_changed", data);
});
}
});

View File

@@ -91,7 +91,8 @@ com.podnoms.player = {
.addClass('play-button-smallstart');
this.currentId = null;
success();
if (success != undefined)
success();
},
_parseOptions:function (options) {
this.currentId = options.id;
@@ -157,8 +158,12 @@ com.podnoms.player = {
}
});
},
stopPlaying: function(){
this._destroyCurrent();
},
playLive:function () {
var ref = this;
var args = arguments;
this._destroyCurrent(function () {
ref.currentSound = soundManager.createSound({
id:'com.podnoms.player-live',
@@ -169,6 +174,7 @@ com.podnoms.player = {
});
if (ref.currentSound) {
ref.currentSound.play();
args[0].success();
}
else {
com.podnoms.utils.showError('Oooopsies', 'Error playing sound..');

View File

@@ -84,13 +84,16 @@
<script src="{{ STATIC_URL }}js/libs/jquery.min.js"></script>
<script src="http://fergalmoran.github.com/cdn/js/jquery.form.min.js"></script>
<script src="{{ STATIC_URL }}js/libs/jquery.cookie.js"></script>
{% if debug %}
<script src="{{ STATIC_URL }}js/app/chat.js"></script>
<!--{% if debug %}-->
<script src="{{ STATIC_URL }}js/libs/jasny/jasny-bootstrap.js"></script>
<script src="{{ STATIC_URL }}js/libs/bootstrap/bootstrap-timepicker.js"></script>
<script src="{{ STATIC_URL }}js/libs/bootstrap/bootstrap-datepicker.js"></script>
<script src="{{ STATIC_URL }}js/libs/bootstrap/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}js/libs/jasny/bootstrap-fileupload.js"></script>
<script src="{{ STATIC_URL }}js/libs/jasny/bootstrap-rowlink.js"></script>
<!--
{% else %}
<script src="http://fergalmoran.github.com/cdn/js/bootstrap.min.js"></script>
<script src="http://fergalmoran.github.com/cdn/js/bootstrap-fileupload.min.js"></script>
@@ -99,7 +102,7 @@
<script src="http://fergalmoran.github.com/cdn/js/bootstrap-timepicker.min.js"></script>
<script src="http://fergalmoran.github.com/cdn/js/bootstrap-datepicker.min.js"></script>
{% endif %}
-->
<script src="{{ STATIC_URL }}js/libs/sm/soundmanager2-nodebug-jsmin.js"></script>
<!-- backbone application -->
@@ -141,7 +144,6 @@
<script src="{{ STATIC_URL }}js/app/app.js"></script>
<script src="{{ STATIC_URL }}js/app/social.js"></script>
{% endcompress %}
<script src="{{ STATIC_URL }}js/app/chat.js"></script>
{% block footerscripts %}
{% endblock %}

View File

@@ -6,7 +6,16 @@
</div>
<div class="span10">
<div class="title-bar">
<h4><a href="<%= item.item_url %>"><%= item.title %></a></h4>
<h4>
<a class="mix-link"
id="mix-link-<%= item.id %>"
href="<%= item.item_url %>"
data-placement="right"
rel="tooltip"
data-content="<%=item.tooltip%>"
title="<%= item.title %>"><%= item.title %>
</a>
</h4>
</div>
<div class="player-seekhead" id="player-seekhead" style="display: none;">
<span class="player-seekhead-time"></span>
@@ -16,13 +25,15 @@
<img id="waveform-image-<%= item.id %>" class="waveform_image"
alt="Audio waveform"
src="<%= item.waveform_url %>">
<div class="download-progress-overlay" id="progress-player-<%= item.id %>"></div>
<div class="playhead" id="playhead-player-<%= item.id %>" style="width: 0px"></div>
</div>
</div>
<div class="player-footer">
<div class="play-button footer-button">
<button class="play-button-small play-button-small-start" data-mode="play" id="play-pause-button-small-<%= item.id %>">
<button class="play-button-small play-button-small-start" data-mode="play"
id="play-pause-button-small-<%= item.id %>">
</button>
</div>
{% if user.is_authenticated %}
@@ -42,18 +53,20 @@
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a data-mode="facebook" data-id="<%= item.id %>" class="share-button share-button-facebook"> Facebook</a></li>
<li><a data-mode="twitter" data-id="<%= item.id %>" href="" class="share-button share-button-twitter"> Twitter</a></li>
<li><a data-mode="facebook" data-id="<%= item.id %>" class="share-button share-button-facebook">
Facebook</a></li>
<li><a data-mode="twitter" data-id="<%= item.id %>" href=""
class="share-button share-button-twitter"> Twitter</a></li>
</ul>
</div>
</div>
{% if user.is_authenticated %}
<% if (item.download_allowed) { %>
<div class="download-button footer-button">
<a class="btn" data-mode="<%= item.mode %>" data-id="<%= item.id %>">
<i class="icon-download"></i> Download</a>
</div>
<% } %>
<% if (item.download_allowed) { %>
<div class="download-button footer-button">
<a class="btn" data-mode="<%= item.mode %>" data-id="<%= item.id %>">
<i class="icon-download"></i> Download</a>
</div>
<% } %>
{% endif %}
<div class="footer-button">
<ul class="list-nostyle list-horiz">
@@ -69,9 +82,10 @@
</ul>
</div>
{% if user.is_staff %}
<div class="edit-button footer-button-right">
<a href="/mix/edit/<%= item.id %>" class="btn" data-mode="<%= item.mode %>" data-id="<%= item.id %>"><i class="icon-edit"></i>Edit</a>
</div>
<div class="edit-button footer-button-right">
<a href="/mix/edit/<%= item.id %>" class="btn" data-mode="<%= item.mode %>" data-id="<%= item.id %>"><i
class="icon-edit"></i>Edit</a>
</div>
{% endif %}
</div>
</div>

View File

@@ -0,0 +1 @@
{% load spa_extras %}{{ item.description|truncmixlist|linebreaksbr }}

View File

@@ -19,7 +19,7 @@
</div>
<div>
<h5>Now on DSS Radio
<button id="sidebar-listen-live" class="btn btn-mini btn-primary push-right btn-inverse"
<button id="sidebar-listen-live" class="btn btn-mini btn-success push-right"
data-toggle="button" type="button">
Listen Live
</button>