From 666af88cab4a37b08062c7d94f783ea16cc5a07e Mon Sep 17 00:00:00 2001
From: Fergal Moran <fergal.moran@gmail.com>
Date: Mon, 22 Apr 2013 17:26:44 +0100
Subject: [PATCH] Added total duration label

---
 static/css/com.podnoms.player.css   |   8 +-
 static/js/app/views/mix.js          |  11 +-
 static/js/com.podnoms.player.js     |  24 +--
 templates/views/_MixItemInsert.html | 247 ++++++++++++++--------------
 4 files changed, 152 insertions(+), 138 deletions(-)

diff --git a/static/css/com.podnoms.player.css b/static/css/com.podnoms.player.css
index 46f1adc..90ebb5c 100644
--- a/static/css/com.podnoms.player.css
+++ b/static/css/com.podnoms.player.css
@@ -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;
+}
\ No newline at end of file
diff --git a/static/js/app/views/mix.js b/static/js/app/views/mix.js
index 6c6c58d..941ccdb 100644
--- a/static/js/app/views/mix.js
+++ b/static/js/app/views/mix.js
@@ -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,
diff --git a/static/js/com.podnoms.player.js b/static/js/com.podnoms.player.js
index b7eaa6f..2f650e2 100644
--- a/static/js/com.podnoms.player.js
+++ b/static/js/com.podnoms.player.js
@@ -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();
diff --git a/templates/views/_MixItemInsert.html b/templates/views/_MixItemInsert.html
index a4aa017..04cc006 100644
--- a/templates/views/_MixItemInsert.html
+++ b/templates/views/_MixItemInsert.html
@@ -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>