Fixed upload progress issue and few CSS tweaks

spa/ajax.py

@@ -259,7 +259,6 @@ def upload(request):
         logger.exception(ex.message)
         return HttpResponse(content="Error occurred uploading file", status=503)
 
-
 @csrf_exempt
 def lookup_search(request):
     query = request.GET['query'] if 'query' in request.GET else request.GET['q'] if 'q' in request.GET else ''

static/css/jquery.fileupload-ui.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*
- * jQuery File Upload UI Plugin CSS 8.1
+ * jQuery File Upload UI Plugin CSS 8.8.1
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2010, Sebastian Tschan
@@ -30,6 +30,7 @@
 .fileupload-buttonbar .toggle {
   margin-bottom: 5px;
 }
+.progress-animated .progress-bar,
 .progress-animated .bar {
   background: url(../img/progressbar.gif) !important;
   filter: none;

static/js/app/lib/backbone.dss.model.js

@@ -10,13 +10,6 @@ define(['backbone'], function (Backbone) {
         }
     });
 
-    var TastypieCollection = Backbone.Collection.extend({
-        parse: function (response) {
-            this.meta = response.meta || {};
-            return response.objects || response;
-        }
-    });
-
     return TastypieModel.extend({
         addError: function (field, message) {
             if (_.isUndefined(this.errors[field])) {
@@ -24,6 +17,18 @@ define(['backbone'], function (Backbone) {
             }
             this.errors[field].push(message);
             return field;
+        },
+        secondsToHms: function (field) {
+            var d = this.get(field);
+            if (d) {
+                d = Number(d);
+                var h = Math.floor(d / 3600);
+                var m = Math.floor(d % 3600 / 60);
+                var s = Math.floor(d % 3600 % 60);
+                return ((h > 0 ? h + ":" : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + ":" : "0:") + (s < 10 ? "0" : "") + s);
+            }else{
+                return "00:00:00";
+            }
         }
     });
 });

static/js/app/views/mix/mixItemView.coffee

@@ -30,9 +30,7 @@ define ['moment', 'app', 'vent', 'marionette', 'utils', 'models/comment/commentC
         onRender: =>
             id = @model.get('id')
             if @model.get('duration')
-                totalDuration = moment.duration(this.model.get('duration'), "seconds")
+                $('#player-duration-' + id, this.el).text(@model.secondsToHms('duration'))
-                totalDurationText = if totalDuration.hours() != 0 then moment(totalDuration).format("h:mm:ss") else moment(totalDuration).format("mm:ss");
-                $('#player-duration-' + id, this.el).text(totalDurationText)
 
 
             @renderGenres()

static/js/app/views/mix/mixItemView.js

@@ -1,22 +1,26 @@
-// Generated by CoffeeScript 1.6.2
+// Generated by CoffeeScript 1.3.3
 (function() {
   var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
     __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   define(['moment', 'app', 'vent', 'marionette', 'utils', 'models/comment/commentCollection', 'views/comment/commentListView', 'text!/tpl/MixListItemView'], function(moment, App, vent, Marionette, utils, CommentsCollection, CommentsListView, Template) {
-    var MixItemView, _ref;
+    var MixItemView;
-
     MixItemView = (function(_super) {
+
       __extends(MixItemView, _super);
 
       function MixItemView() {
         this.doStart = __bind(this.doStart, this);
+
         this.renderComments = __bind(this.renderComments, this);
+
         this.renderGenres = __bind(this.renderGenres, this);
+
         this.onRender = __bind(this.onRender, this);
-        this.initialize = __bind(this.initialize, this);        _ref = MixItemView.__super__.constructor.apply(this, arguments);
+
-        return _ref;
+        this.initialize = __bind(this.initialize, this);
+        return MixItemView.__super__.constructor.apply(this, arguments);
       }
 
       MixItemView.prototype.template = _.template(Template);
@@ -49,13 +53,10 @@
       };
 
       MixItemView.prototype.onRender = function() {
-        var id, totalDuration, totalDurationText;
+        var id;
-
         id = this.model.get('id');
         if (this.model.get('duration')) {
-          totalDuration = moment.duration(this.model.get('duration'), "seconds");
+          $('#player-duration-' + id, this.el).text(this.model.secondsToHms('duration'));
-          totalDurationText = totalDuration.hours() !== 0 ? moment(totalDuration).format("h:mm:ss") : moment(totalDuration).format("mm:ss");
-          $('#player-duration-' + id, this.el).text(totalDurationText);
         }
         this.renderGenres();
         this.renderComments();
@@ -71,7 +72,6 @@
 
       MixItemView.prototype.renderGenres = function() {
         var el;
-
         el = this.el;
         $.each(this.model.get("genre-list"), function(data) {
           $("#genre-list", el).append('<a href="/mixes/' + this.slug + '" class="label label-info arrowed-right arrowed-in">' + this.text + '</a>');
@@ -82,7 +82,6 @@
 
       MixItemView.prototype.renderComments = function() {
         var comments;
-
         comments = new CommentsCollection();
         comments.url = this.model.get("resource_uri") + "comments/";
         comments.mix_id = this.model.id;
@@ -90,7 +89,6 @@
         comments.fetch({
           success: function(data) {
             var content;
-
             content = new CommentsListView({
               collection: comments
             }).render();
@@ -139,7 +137,6 @@
 
       MixItemView.prototype.mixFavourite = function() {
         var app;
-
         console.log("MixItemView: favouriteMix");
         app = require('app');
         vent.trigger("mix:favourite", this.model);
@@ -154,7 +151,6 @@
 
       MixItemView.prototype.mixShare = function(e) {
         var mode;
-
         console.log("MixItemView: shareMix");
         mode = $(e.currentTarget).data("mode");
         console.log("MixItemView: " + mode);

static/js/com.podnoms.player.js

@@ -51,6 +51,17 @@ com.podnoms.player = {
     soundDuration: 0,
 
     /*Privates */
+    _secondsToHms: function (d) {
+        if (d) {
+            d = Number(d);
+            var h = Math.floor(d / 3600);
+            var m = Math.floor(d % 3600 / 60);
+            var s = Math.floor(d % 3600 % 60);
+            return ((h > 0 ? h + ":" : "") + (m > 0 ? (h > 0 && m < 10 ? "0" : "") + m + ":" : "00:") + (s < 10 ? "0" : "") + s);
+        } else {
+            return "00:00:00";
+        }
+    },
     _getDurationEstimate: function (oSound) {
         if (oSound.instanceOptions.isMovieStar) {
             return (oSound.duration);
@@ -76,11 +87,7 @@ com.podnoms.player = {
         var percentageFinished = (this.currentSound.position / duration) * 100;
         var percentageWidth = (this.waveFormWidth / 100) * percentageFinished;
         this.playHeadEl.css('width', percentageWidth);
-        var elapsed = moment.duration(this.currentSound.position, "milliseconds");
+        this.timeDisplayLabel.text(this._secondsToHms(this.currentSound.position / 1000));
-        var text = elapsed.hours() != 0 ?
-            moment(elapsed).format("HH:mm") :
-            moment(elapsed).format("mm:ss");
-        this.timeDisplayLabel.text(text);
     },
     _mouseDown: function (event) {
         if (this.currentSound != null) {

static/js/lib/jquery.fileupload-audio.js

@@ -19,7 +19,7 @@
         define([
             'jquery',
             'load-image',
-            'jquery.fileupload-process'
+            './jquery.fileupload-process'
         ], factory);
     } else {
         // Browser globals:

static/js/lib/jquery.fileupload-image.js

@@ -23,7 +23,7 @@
             'load-image-exif',
             'load-image-ios',
             'canvas-to-blob',
-            'jquery.fileupload-process'
+            './jquery.fileupload-process'
         ], factory);
     } else {
         // Browser globals:

static/js/lib/jquery.fileupload-jquery-ui.js

@@ -0,0 +1,138 @@
+/*
+ * jQuery File Upload jQuery UI Plugin 8.7.0
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2013, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+/*jslint nomen: true, unparam: true */
+/*global define, window */
+
+(function (factory) {
+    'use strict';
+    if (typeof define === 'function' && define.amd) {
+        // Register as an anonymous AMD module:
+        define(['jquery', './jquery.fileupload-ui'], factory);
+    } else {
+        // Browser globals:
+        factory(window.jQuery);
+    }
+}(function ($) {
+    'use strict';
+
+    $.widget('blueimp.fileupload', $.blueimp.fileupload, {
+
+        options: {
+            progress: function (e, data) {
+                if (data.context) {
+                    data.context.find('.progress').progressbar(
+                        'option',
+                        'value',
+                        parseInt(data.loaded / data.total * 100, 10)
+                    );
+                }
+            },
+            progressall: function (e, data) {
+                var $this = $(this);
+                $this.find('.fileupload-progress')
+                    .find('.progress').progressbar(
+                        'option',
+                        'value',
+                        parseInt(data.loaded / data.total * 100, 10)
+                    ).end()
+                    .find('.progress-extended').each(function () {
+                        $(this).html(
+                            ($this.data('blueimp-fileupload') ||
+                                    $this.data('fileupload'))
+                                ._renderExtendedProgress(data)
+                        );
+                    });
+            }
+        },
+
+        _renderUpload: function (func, files) {
+            var node = this._super(func, files),
+                showIconText = $(window).width() > 480;
+            node.find('.progress').empty().progressbar();
+            node.find('.start').button({
+                icons: {primary: 'ui-icon-circle-arrow-e'},
+                text: showIconText
+            });
+            node.find('.cancel').button({
+                icons: {primary: 'ui-icon-cancel'},
+                text: showIconText
+            });
+            return node;
+        },
+
+        _renderDownload: function (func, files) {
+            var node = this._super(func, files),
+                showIconText = $(window).width() > 480;
+            node.find('.delete').button({
+                icons: {primary: 'ui-icon-trash'},
+                text: showIconText
+            });
+            return node;
+        },
+
+        _transition: function (node) {
+            var deferred = $.Deferred();
+            if (node.hasClass('fade')) {
+                node.fadeToggle(
+                    this.options.transitionDuration,
+                    this.options.transitionEasing,
+                    function () {
+                        deferred.resolveWith(node);
+                    }
+                );
+            } else {
+                deferred.resolveWith(node);
+            }
+            return deferred;
+        },
+
+        _create: function () {
+            this._super();
+            this.element
+                .find('.fileupload-buttonbar')
+                .find('.fileinput-button').each(function () {
+                    var input = $(this).find('input:file').detach();
+                    $(this)
+                        .button({icons: {primary: 'ui-icon-plusthick'}})
+                        .append(input);
+                })
+                .end().find('.start')
+                .button({icons: {primary: 'ui-icon-circle-arrow-e'}})
+                .end().find('.cancel')
+                .button({icons: {primary: 'ui-icon-cancel'}})
+                .end().find('.delete')
+                .button({icons: {primary: 'ui-icon-trash'}})
+                .end().find('.progress').progressbar();
+        },
+
+        _destroy: function () {
+            this.element
+                .find('.fileupload-buttonbar')
+                .find('.fileinput-button').each(function () {
+                    var input = $(this).find('input:file').detach();
+                    $(this)
+                        .button('destroy')
+                        .append(input);
+                })
+                .end().find('.start')
+                .button('destroy')
+                .end().find('.cancel')
+                .button('destroy')
+                .end().find('.delete')
+                .button('destroy')
+                .end().find('.progress').progressbar('destroy');
+            this._super();
+        }
+
+    });
+
+}));

static/js/lib/jquery.fileupload-process.js

@@ -18,7 +18,7 @@
         // Register as an anonymous AMD module:
         define([
             'jquery',
-            'jquery.fileupload'
+            './jquery.fileupload'
         ], factory);
     } else {
         // Browser globals:

static/js/lib/jquery.fileupload-ui.js

@@ -1,5 +1,5 @@
 /*
- * jQuery File Upload User Interface Plugin 8.7.1
+ * jQuery File Upload User Interface Plugin 8.8.5
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2010, Sebastian Tschan
@@ -19,10 +19,10 @@
         define([
             'jquery',
             'tmpl',
-            'jquery.fileupload-image',
+            './jquery.fileupload-image',
-            'jquery.fileupload-audio',
+            './jquery.fileupload-audio',
-            'jquery.fileupload-video',
+            './jquery.fileupload-video',
-            'jquery.fileupload-validate'
+            './jquery.fileupload-validate'
         ], factory);
     } else {
         // Browser globals:
@@ -120,7 +120,7 @@
                             !$.support.transition && 'progress-animated'
                         )
                         .attr('aria-valuenow', 100)
-                        .find('.bar').css(
+                        .children().first().css(
                             'width',
                             '100%'
                         );
@@ -238,14 +238,16 @@
             },
             // Callback for upload progress events:
             progress: function (e, data) {
+                var progress = Math.floor(data.loaded / data.total * 100);
                 if (data.context) {
-                    var progress = Math.floor(data.loaded / data.total * 100);
+                    data.context.each(function () {
-                    data.context.find('.progress')
+                        $(this).find('.progress')
-                        .attr('aria-valuenow', progress)
+                            .attr('aria-valuenow', progress)
-                        .find('.bar').css(
+                            .children().first().css(
-                            'width',
+                                'width',
-                            progress + '%'
+                                progress + '%'
-                        );
+                            );
+                    });
                 }
             },
             // Callback for global upload progress events:
@@ -264,7 +266,7 @@
                 globalProgressNode
                     .find('.progress')
                     .attr('aria-valuenow', progress)
-                    .find('.bar').css(
+                    .children().first().css(
                         'width',
                         progress + '%'
                     );
@@ -293,7 +295,7 @@
                     function () {
                         $(this).find('.progress')
                             .attr('aria-valuenow', '0')
-                            .find('.bar').css('width', '0%');
+                            .children().first().css('width', '0%');
                         $(this).find('.progress-extended').html(' ');
                         deferred.resolve();
                     }
@@ -460,9 +462,11 @@
 
         _cancelHandler: function (e) {
             e.preventDefault();
-            var template = $(e.currentTarget).closest('.template-upload'),
+            var template = $(e.currentTarget)
+                    .closest('.template-upload,.template-download'),
                 data = template.data('data') || {};
             if (!data.jqXHR) {
+                data.context = data.context || template;
                 data.errorThrown = 'abort';
                 this._trigger('fail', e, data);
             } else {

static/js/lib/jquery.fileupload-validate.js

@@ -1,5 +1,5 @@
 /*
- * jQuery File Upload Validation Plugin 1.1
+ * jQuery File Upload Validation Plugin 1.1.1
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2013, Sebastian Tschan
@@ -18,7 +18,7 @@
         // Register as an anonymous AMD module:
         define([
             'jquery',
-            'jquery.fileupload-process'
+            './jquery.fileupload-process'
         ], factory);
     } else {
         // Browser globals:
@@ -83,16 +83,17 @@
                 }
                 var dfd = $.Deferred(),
                     settings = this.options,
-                    file = data.files[data.index],
+                    file = data.files[data.index];
-                    numberOfFiles = settings.getNumberOfFiles();
+                if ($.type(options.maxNumberOfFiles) === 'number' &&
-                if (numberOfFiles && $.type(options.maxNumberOfFiles) === 'number' &&
+                        (settings.getNumberOfFiles() || 0) + data.files.length >
-                        numberOfFiles + data.files.length > options.maxNumberOfFiles) {
+                            options.maxNumberOfFiles) {
                     file.error = settings.i18n('maxNumberOfFiles');
                 } else if (options.acceptFileTypes &&
                         !(options.acceptFileTypes.test(file.type) ||
                         options.acceptFileTypes.test(file.name))) {
                     file.error = settings.i18n('acceptFileTypes');
-                } else if (options.maxFileSize && file.size > options.maxFileSize) {
+                } else if (options.maxFileSize && file.size >
+                        options.maxFileSize) {
                     file.error = settings.i18n('maxFileSize');
                 } else if ($.type(file.size) === 'number' &&
                         file.size < options.minFileSize) {

static/js/lib/jquery.fileupload-video.js

@@ -19,7 +19,7 @@
         define([
             'jquery',
             'load-image',
-            'jquery.fileupload-process'
+            './jquery.fileupload-process'
         ], factory);
     } else {
         // Browser globals:

static/js/lib/jquery.fileupload.js

@@ -1,5 +1,5 @@
 /*
- * jQuery File Upload Plugin 5.32.2
+ * jQuery File Upload Plugin 5.32.3
  * https://github.com/blueimp/jQuery-File-Upload
  *
  * Copyright 2010, Sebastian Tschan
@@ -399,7 +399,7 @@
                 // Ignore non-multipart setting if not supported:
                 multipart = options.multipart || !$.support.xhrFileUpload,
                 paramName = options.paramName[0];
-            options.headers = options.headers || {};
+            options.headers = $.extend({}, options.headers);
             if (options.contentRange) {
                 options.headers['Content-Range'] = options.contentRange;
             }

templates/views/ActivityListView.html

@@ -5,7 +5,7 @@
     </h4>
 </div>
 <div class="widget-body">
-    <div class="widget-main no-padding" id="activity-container">
+    <div class="widget-main" id="activity-container">
 
     </div>
 </div>

templates/views/MixEditView.html

@@ -13,11 +13,9 @@
                     <span class="fileupload-loading"></span>
                 </div>
                 <div class="span5 fileupload-progress fade">
-                    <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0"
+                    <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
-                         aria-valuemax="100">
+                        <div class="progress-bar progress-bar-success" style="width:0%;"></div>
-                        <div class="bar" style="width:0%;"></div>
                     </div>
-                    <div class="progress-extended">&nbsp;</div>
                 </div>
             </div>
             <table role="presentation" class="table table-striped">
@@ -60,7 +58,7 @@
                 <td colspan="4">
                     <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0"
                          aria-valuemax="100" aria-valuenow="0">
-                        <div class="bar" style="width:0%;"></div>
+                        <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                     </div>
                 </td>
             </tr>