mirror of
https://github.com/fergalmoran/dss.git
synced 2026-02-23 08:24:24 +00:00
Added total duration label
This commit is contained in:
Fergal Moran
@@ -99,7 +99,8 @@ div.player-body ul.player-controls a {
|
||||
}
|
||||
|
||||
.waveform {
|
||||
background-color: #404040
|
||||
background-color: #404040;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.waveform img {
|
||||
@@ -227,3 +228,8 @@ img.mix-listing-image {
|
||||
font-size: 72%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dss-time-display-label-total {
|
||||
right: 0;
|
||||
width: 46px;
|
||||
}
|
||||
@@ -38,7 +38,15 @@ window.MixListItemView = Backbone.View.extend({
|
||||
|
||||
com.podnoms.player.drawTimeline(
|
||||
$('#player-timeline-' + id, this.el),
|
||||
$('#mix-container-' + id, this.el),
|
||||
this.model.get('duration'));
|
||||
|
||||
var totalDuration = moment.duration(this.model.get('duration'), "seconds");
|
||||
var totalDurationText = totalDuration.hours() != 0 ?
|
||||
moment(totalDuration).format("HH:mm:ss") :
|
||||
moment(totalDuration).format("mm:ss");
|
||||
|
||||
$('#player-duration-' + id, this.el).text(totalDurationText);
|
||||
return this;
|
||||
},
|
||||
mouseOverProfile: function () {
|
||||
@@ -148,8 +156,7 @@ window.MixListItemView = Backbone.View.extend({
|
||||
}
|
||||
);
|
||||
}
|
||||
})
|
||||
;
|
||||
});
|
||||
|
||||
window.MixListView = Backbone.View.extend({
|
||||
itemPlaying: null,
|
||||
|
||||
@@ -134,7 +134,7 @@ com.podnoms.player = {
|
||||
isPlayingId: function (id) {
|
||||
return this.isPlaying() && this.currentSound.sID == "com.podnoms.player-" + id;
|
||||
},
|
||||
drawTimeline: function (el, duration) {
|
||||
drawTimeline: function (el, boundingEl, duration) {
|
||||
/*
|
||||
Assume 10 markers
|
||||
*/
|
||||
@@ -142,12 +142,13 @@ com.podnoms.player = {
|
||||
var item = $(document.createElement("li"));
|
||||
this.soundDuration = duration * 1000; //convert to milliseconds
|
||||
for (var i = 0; i < 10; i++) {
|
||||
var duration = moment.duration(markerDuration * (i + 1), "seconds");
|
||||
var text = duration.hours() != 0 ?
|
||||
moment(duration).format("HH:mm") :
|
||||
moment(duration).format("mm:ss");
|
||||
var sliceDuration = moment.duration(markerDuration * (i + 1), "seconds");
|
||||
var text = sliceDuration.hours() != 0 ?
|
||||
moment(sliceDuration).format("HH:mm") :
|
||||
moment(sliceDuration).format("mm:ss");
|
||||
el.append(item.clone().text(text).css('width', '10%'));
|
||||
}
|
||||
|
||||
},
|
||||
setupPlayer: function (options) {
|
||||
this._parseOptions(options);
|
||||
@@ -179,21 +180,20 @@ com.podnoms.player = {
|
||||
ref.play();
|
||||
if (options.success)
|
||||
options.success();
|
||||
//create the floating time display label
|
||||
this.timeDisplayLabel = $('<label>').text('00:00');
|
||||
this.timeDisplayLabel.css('left', -100);
|
||||
this.timeDisplayLabel.addClass('dss-time-display-label')
|
||||
this.boundingEl.append(this.timeDisplayLabel);
|
||||
this.timeDisplayLabel.animate({ top: this.playHeadEl.position().top, left: this.playHeadEl.position().left });
|
||||
}
|
||||
else {
|
||||
if (options.error)
|
||||
options.error();
|
||||
else
|
||||
com.podnoms.utils.showError('Oooopsies', 'Error playing sound..');
|
||||
|
||||
}
|
||||
});
|
||||
//create the floating time display label
|
||||
this.timeDisplayLabel = $('<label>').text('00:00');
|
||||
this.timeDisplayLabel.css('left', -100);
|
||||
this.timeDisplayLabel.addClass('dss-time-display-label')
|
||||
this.boundingEl.append(this.timeDisplayLabel);
|
||||
this.timeDisplayLabel.animate({ top: this.playHeadEl.position().top, left: this.playHeadEl.position().left });
|
||||
},
|
||||
stopPlaying: function () {
|
||||
this._destroyCurrent();
|
||||
|
||||
@@ -1,123 +1,124 @@
|
||||
{% load thumbnail %}
|
||||
<div class="row">
|
||||
<div class="span2 mix-profile-container">
|
||||
<div class="mix-image-container">
|
||||
<img alt="mix-logo" class="mix-image-image" src="<%= item.mix_image %>"/>
|
||||
</div>
|
||||
<div class="mix-profile-insert">
|
||||
<h6>
|
||||
<a href="<%= item.user_profile_url %>" id="<%= item.id %>">
|
||||
<i class="icon-user"></i><%= item.user_name %>
|
||||
</a>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span10 mix-container" id="mix-container-<%= item.id %>">
|
||||
<div class="row title-bar">
|
||||
<div class="pull-left title-bar-item">
|
||||
<a class="mix-link"
|
||||
id="mix-link-<%= item.id %>"
|
||||
href="<%= item.item_url %>"
|
||||
title="<%= item.title %>"><%= item.title %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pull-right title-bar-item">
|
||||
<div id="genre-list" class="pull-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="player-seekhead" id="player-seekhead" style="display: none;">
|
||||
<span class="player-seekhead-time"></span>
|
||||
</div>
|
||||
<div class="player-progress">
|
||||
<div class="waveform" id="waveform-<%= item.id %>">
|
||||
<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>
|
||||
<div class="row">
|
||||
<div class="player-timeline">
|
||||
<ul class="audio-timeline-ruler" id="player-timeline-<%= item.id %>"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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>
|
||||
</div>
|
||||
{% if user.is_authenticated %}
|
||||
<div class="like-button footer-button">
|
||||
<a class="btn btn-mini" id="like-<%= item.id %>" data-mode="<%= item.mode %>"
|
||||
data-id="<%= item.id %>">
|
||||
<i class="icon-heart"></i> Like</a>
|
||||
</div>
|
||||
<div class="favourite-button footer-button">
|
||||
<a class="btn btn-mini" id="favourite-<%= item.id %>" data-mode="<%= item.mode %>"
|
||||
data-id="<%= item.id %>"><i
|
||||
class="icon-star-empty"></i> Favourite</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="footer-button">
|
||||
<div class="btn-group" id="share-dropdown-<%= item.id %>">
|
||||
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="icon-share"/>Share
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a data-mode="facebook" data-id="<%= item.id %>" href=""
|
||||
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 btn-mini" 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">
|
||||
<li title="<%= item.play_count %> Plays" class="stats-item bordered-right">
|
||||
<span class="icon-play stats">Plays:</span> <%= item.play_count %>
|
||||
</li>
|
||||
<li title="<%= item.download_count %> Downloads" class="stats-item bordered-right">
|
||||
<span class="icon-download-alt stats">Downloads:</span> <%= item.download_count %>
|
||||
</li>
|
||||
<li title="<%= item.comment_count %> Comments" class="stats-item bordered-right">
|
||||
<span class="icon-pencil stats">Comments:</span> <%= item.comment_count %>
|
||||
</li>
|
||||
<li title="<%= item.like_count %> Likes" class="stats-item bordered-right">
|
||||
<span class="icon-heart stats">Likes:</span> <%= item.like_count %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% if user.is_staff %}
|
||||
<div class="edit-button footer-button-right">
|
||||
<a href="/mix/edit/<%= item.id %>" class="btn btn-mini" data-mode="<%= item.mode %>"
|
||||
data-id="<%= item.id %>"><i
|
||||
class="icon-edit"></i>Edit</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% load thumbnail %}
|
||||
<div class="row">
|
||||
<div class="span2 mix-profile-container">
|
||||
<div class="mix-image-container">
|
||||
<img alt="mix-logo" class="mix-image-image" src="<%= item.mix_image %>"/>
|
||||
</div>
|
||||
<div class="mix-profile-insert">
|
||||
<h6>
|
||||
<a href="<%= item.user_profile_url %>" id="<%= item.id %>">
|
||||
<i class="icon-user"></i><%= item.user_name %>
|
||||
</a>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span10 mix-container" id="mix-container-<%= item.id %>">
|
||||
<div class="row title-bar">
|
||||
<div class="pull-left title-bar-item">
|
||||
<a class="mix-link"
|
||||
id="mix-link-<%= item.id %>"
|
||||
href="<%= item.item_url %>"
|
||||
title="<%= item.title %>"><%= item.title %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="pull-right title-bar-item">
|
||||
<div id="genre-list" class="pull-right">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="player-seekhead" id="player-seekhead" style="display: none;">
|
||||
<span class="player-seekhead-time"></span>
|
||||
</div>
|
||||
<div class="player-progress">
|
||||
<div class="waveform" id="waveform-<%= item.id %>">
|
||||
<label class="dss-time-display-label dss-time-display-label-total" id="player-duration-<%= item.id %>">00:00:00</label>
|
||||
<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>
|
||||
<div class="row">
|
||||
<div class="player-timeline">
|
||||
<ul class="audio-timeline-ruler" id="player-timeline-<%= item.id %>"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<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>
|
||||
</div>
|
||||
{% if user.is_authenticated %}
|
||||
<div class="like-button footer-button">
|
||||
<a class="btn btn-mini" id="like-<%= item.id %>" data-mode="<%= item.mode %>"
|
||||
data-id="<%= item.id %>">
|
||||
<i class="icon-heart"></i> Like</a>
|
||||
</div>
|
||||
<div class="favourite-button footer-button">
|
||||
<a class="btn btn-mini" id="favourite-<%= item.id %>" data-mode="<%= item.mode %>"
|
||||
data-id="<%= item.id %>"><i
|
||||
class="icon-star-empty"></i> Favourite</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="footer-button">
|
||||
<div class="btn-group" id="share-dropdown-<%= item.id %>">
|
||||
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
|
||||
<i class="icon-share"/>Share
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a data-mode="facebook" data-id="<%= item.id %>" href=""
|
||||
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 btn-mini" 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">
|
||||
<li title="<%= item.play_count %> Plays" class="stats-item bordered-right">
|
||||
<span class="icon-play stats">Plays:</span> <%= item.play_count %>
|
||||
</li>
|
||||
<li title="<%= item.download_count %> Downloads" class="stats-item bordered-right">
|
||||
<span class="icon-download-alt stats">Downloads:</span> <%= item.download_count %>
|
||||
</li>
|
||||
<li title="<%= item.comment_count %> Comments" class="stats-item bordered-right">
|
||||
<span class="icon-pencil stats">Comments:</span> <%= item.comment_count %>
|
||||
</li>
|
||||
<li title="<%= item.like_count %> Likes" class="stats-item bordered-right">
|
||||
<span class="icon-heart stats">Likes:</span> <%= item.like_count %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% if user.is_staff %}
|
||||
<div class="edit-button footer-button-right">
|
||||
<a href="/mix/edit/<%= item.id %>" class="btn btn-mini" data-mode="<%= item.mode %>"
|
||||
data-id="<%= item.id %>"><i
|
||||
class="icon-edit"></i>Edit</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user