diff --git a/spa/models/mix.py b/spa/models/mix.py
index 1918d35..587a2f9 100644
--- a/spa/models/mix.py
+++ b/spa/models/mix.py
@@ -113,8 +113,7 @@ class Mix(_BaseModel):
         return super(Mix, self).get_image_url(self.mix_image, settings.STATIC_URL + 'img/default-track.png')
 
     def get_stream_path(self):
-        #return 'media/%s/' % self.local_file.name
-        return '/audio/stream/%d' % self.id
+        return '%s/mixes/%s.mp3' % (localsettings.STREAM_URL, self.uid)
 
     def get_date_as_rfc822(self):
         return rfc822.formatdate(
diff --git a/static/js/app/views/mix/mixItemView.coffee b/static/js/app/views/mix/mixItemView.coffee
index 54bf4d8..1a674f4 100644
--- a/static/js/app/views/mix/mixItemView.coffee
+++ b/static/js/app/views/mix/mixItemView.coffee
@@ -38,10 +38,11 @@ define ['moment', 'app', 'vent', 'marionette', 'models/comment/commentCollection
             @renderGenres()
             return
 
-        onDomRefresh: ->
+        onShow: ->
             #check if we're currently playing
             if com.podnoms.player.isPlayingId @model.id
                 com.podnoms.settings.setupPlayerWrapper @model.get('id'), com.podnoms.player.getStreamUrl(), @el
+                @mixPlay(@model)
             true
 
         renderGenres: =>
diff --git a/static/js/app/views/mix/mixItemView.js b/static/js/app/views/mix/mixItemView.js
index d620f99..31a85a1 100644
--- a/static/js/app/views/mix/mixItemView.js
+++ b/static/js/app/views/mix/mixItemView.js
@@ -60,9 +60,10 @@
         this.renderGenres();
       };
 
-      MixItemView.prototype.onDomRefresh = function() {
+      MixItemView.prototype.onShow = function() {
         if (com.podnoms.player.isPlayingId(this.model.id)) {
           com.podnoms.settings.setupPlayerWrapper(this.model.get('id'), com.podnoms.player.getStreamUrl(), this.el);
+          this.mixPlay(this.model);
         }
         return true;
       };
diff --git a/static/js/app/views/user/userListView.coffee b/static/js/app/views/user/userListView.coffee
index 55ffab8..19c7560 100644
--- a/static/js/app/views/user/userListView.coffee
+++ b/static/js/app/views/user/userListView.coffee
@@ -1,5 +1,5 @@
-define ['marionette', 'models/user/userCollection', 'views/user/userItemView', 'text!/tpl/UserListView', 'libs/bootstrap/bootpag'],
-(Marionette, UserCollection, UserItemView, Template) ->
+define ['jquery', 'marionette', 'models/user/userCollection', 'views/user/userItemView', 'text!/tpl/UserListView', 'libs/bootstrap/bootpag'],
+($, Marionette, UserCollection, UserItemView, Template) ->
     class UserListView extends Marionette.CompositeView
 
         template: _.template(Template)
diff --git a/static/js/app/views/user/userListView.js b/static/js/app/views/user/userListView.js
index 6a098c2..db84b7f 100644
--- a/static/js/app/views/user/userListView.js
+++ b/static/js/app/views/user/userListView.js
@@ -4,7 +4,7 @@
     __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(['marionette', 'models/user/userCollection', 'views/user/userItemView', 'text!/tpl/UserListView', 'libs/bootstrap/bootpag'], function(Marionette, UserCollection, UserItemView, Template) {
+  define(['jquery', 'marionette', 'models/user/userCollection', 'views/user/userItemView', 'text!/tpl/UserListView', 'libs/bootstrap/bootpag'], function($, Marionette, UserCollection, UserItemView, Template) {
     var UserListView, _ref;
 
     UserListView = (function(_super) {
diff --git a/static/js/com.podnoms.player.js b/static/js/com.podnoms.player.js
index db92189..74b9042 100644
--- a/static/js/com.podnoms.player.js
+++ b/static/js/com.podnoms.player.js
@@ -59,7 +59,11 @@ com.podnoms.player = {
     _whilePlaying: function () {
         if (!this.trackLoaded) {
             this.trackLoaded = true;
+            this.loadingEl.css('width', 100);
         }
+
+        //need to call this every time as the boundaries may have changed.
+        this._calculateBounds();
         this.currentPosition = this.currentSound.position;
         var duration = this._getDurationEstimate(this.currentSound);
         var percentageFinished = (this.currentSound.position / duration) * 100;
@@ -103,7 +107,7 @@ com.podnoms.player = {
         this.loadingEl = options.loadingEl;
         this.currentPath = options.url;
     },
-    _setupParams: function () {
+    _calculateBounds: function () {
         if (this.waveFormEl.position()) {
             this.waveFormTop = this.waveFormEl.position().top;
             this.waveFormLeft = this.waveFormEl.offset().left;
@@ -147,7 +151,15 @@ com.podnoms.player = {
     },
     setupPlayer: function (options) {
         this._parseOptions(options);
-        this._setupParams();
+        this._calculateBounds();
+        this._createTimeDisplayLabel();
+    },
+    _createTimeDisplayLabel: function () {
+        this.timeDisplayLabel = $('<label>').text('00:00');
+        this.timeDisplayLabel.css('left', -100);
+        this.timeDisplayLabel.addClass('dss-time-display-label')
+        this.waveFormEl.append(this.timeDisplayLabel);
+        this.timeDisplayLabel.animate({ top: 0, left: this.playHeadEl.position().left });
     },
     startPlaying: function (options) {
         var ref = this;
@@ -169,11 +181,7 @@ com.podnoms.player = {
                 if (options.success)
                     options.success();
                 //create the floating time display label
-                ref.timeDisplayLabel = $('<label>').text('00:00');
-                ref.timeDisplayLabel.css('left', -100);
-                ref.timeDisplayLabel.addClass('dss-time-display-label')
-                ref.waveFormEl.append(ref.timeDisplayLabel);
-                ref.timeDisplayLabel.animate({ top: 0, left: ref.playHeadEl.position().left });
+                ref._createTimeDisplayLabel();
             }
             else {
                 if (options.error)
diff --git a/static/js/libs/bootstrap/bootpag.js b/static/js/libs/bootstrap/bootpag.js
index 77bcf67..a5e3fd5 100644
--- a/static/js/libs/bootstrap/bootpag.js
+++ b/static/js/libs/bootstrap/bootpag.js
@@ -1,19 +1,127 @@
-/*
- 
- bootpag - jQuery plugin for dynamic pagination
+/**
+ * @preserve 
+ * bootpag - jQuery plugin for dynamic pagination
+ *
+ * Copyright (c) 2013 botmonster@7items.com
+ *
+ * Licensed under the MIT license:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *
+ * Project home:
+ *   http://botmonster.com/jquery-bootpag/
+ *
+ * Version:  1.0.4
+ *
+ */
+(function($, window) {
 
- Copyright (c) 2013 botmonster@7items.com
+    $.fn.bootpag = function(options){
 
- Licensed under the MIT license:
-   http://www.opensource.org/licenses/mit-license.php
+        var $owner = this, 
+            settings = $.extend({
+                total: 0,
+                page: 1,
+                maxVisible: null,
+                leaps: true,
+                href: 'javascript:void(0);',
+                hrefVariable: '{{number}}',
+                next: '&raquo;',
+                prev: '&laquo;'
+            }, 
+            $owner.data('settings') || {}, 
+            options || {});
 
- Project home:
-   http://botmonster.com/jquery-bootpag/
+        if(settings.total <= 0)
+            return this;
 
- Version:  1.0.4
+          if(!$.isNumeric(settings.maxVisible) && !settings.maxVisible){
+            settings.maxVisible = settings.total;
+        }
 
-*/
-(function(f,q){f.fn.bootpag=function(p){function k(e,b){var c,d=0==a.maxVisible?1:a.maxVisible,n=1==a.maxVisible?0:1,m=Math.floor((b-1)/d)*d,g=e.find("li");a.page=b=0>b?0:b>a.total?a.total:b;g.removeClass("disabled");c=1>b-1?1:a.leaps&&b-1>=a.maxVisible?Math.floor((b-1)/d)*d:b-1;g.first().toggleClass("disabled",1===b).attr("data-lp",c).find("a").attr("href",h(c));n=1==a.maxVisible?0:1;c=b+1>a.total?a.total:a.leaps&&b+1<a.total-a.maxVisible?m+a.maxVisible+n:b+1;g.last().toggleClass("disabled",b===
-a.total).attr("data-lp",c).find("a").attr("href",h(c));d=g.filter("[data-lp="+b+"]");if(!d.not(".next,.prev").length){var k=b<=m?-a.maxVisible:0;g.not(".next,.prev").each(function(b){c=b+1+m+k;f(this).attr("data-lp",c).toggle(c<=a.total).find("a").html(c).attr("href",h(c))});d=g.filter("[data-lp="+b+"]")}d.addClass("disabled");l.trigger("page",b);l.data("settings",a)}function h(e){return a.href.replace(a.hrefVariable,e)}var l=this,a=f.extend({total:0,page:1,maxVisible:null,leaps:!0,href:"javascript:void(0);",
-hrefVariable:"{{number}}",next:"&raquo;",prev:"&laquo;"},l.data("settings")||{},p||{});if(0>=a.total)return this;!f.isNumeric(a.maxVisible)&&!a.maxVisible&&(a.maxVisible=a.total);l.data("settings",a);return this.each(function(){var e,b,c=f(this),d=['<ul class="bootpag">'];a.prev&&d.push('<li data-lp="1" class="prev"><a href="'+h(1)+'">'+a.prev+"</a></li>");for(b=1;b<=Math.min(a.total,a.maxVisible);b++)d.push('<li data-lp="'+b+'"><a href="'+h(b)+'">'+b+"</a></li>");a.next&&(b=a.leaps&&a.total>a.maxVisible?
-Math.min(a.maxVisible+1,a.total):2,d.push('<li data-lp="'+b+'" class="next"><a href="'+h(b)+'">'+a.next+"</a></li>"));d.push("</ul>");c.find("ul.bootpag").remove();c.append(d.join("")).addClass("pagination");e=c.find("ul.bootpag");c.find("li").click(function(){var a=f(this);a.hasClass("disabled")||k(e,parseInt(a.attr("data-lp"),10))});k(e,a.page)})}})(jQuery,window);
\ No newline at end of file
+        $owner.data('settings', settings);
+
+        function renderPage($bootpag, page){
+        
+            var lp, 
+                maxV = settings.maxVisible == 0 ? 1 : settings.maxVisible,
+                step = settings.maxVisible == 1 ? 0 : 1,
+                vis = Math.floor((page - 1) / maxV) * maxV,
+                $page = $bootpag.find('li');
+            settings.page = page = page < 0 ? 0 : page > settings.total ? settings.total : page;
+            $page.removeClass('disabled');
+            lp = page - 1 < 1 ? 1 : 
+                    settings.leaps && page - 1 >= settings.maxVisible ? 
+                        Math.floor((page - 1) / maxV) * maxV : page - 1;
+            $page
+                .first()
+                .toggleClass('disabled', page === 1)
+                .attr('data-lp', lp)
+                .find('a').attr('href', href(lp));
+            
+            var step = settings.maxVisible == 1 ? 0 : 1;
+            
+            lp = page + 1 > settings.total ? settings.total : 
+                    settings.leaps && page + 1 < settings.total - settings.maxVisible ? 
+                        vis + settings.maxVisible + step: page + 1;
+       
+            $page
+                .last()
+                .toggleClass('disabled', page === settings.total)
+                .attr('data-lp', lp)
+                .find('a').attr('href', href(lp));;
+
+            var $currPage = $page.filter('[data-lp='+page+']');
+            if(!$currPage.not('.next,.prev').length){
+                var d = page <= vis ? -settings.maxVisible : 0;
+                $page.not('.next,.prev').each(function(index){
+                    lp = index + 1 + vis + d;
+                    $(this)
+                        .attr('data-lp', lp)
+                        .toggle(lp <= settings.total)
+                        .find('a').html(lp).attr('href', href(lp));
+                });
+                $currPage = $page.filter('[data-lp='+page+']');
+            }
+            $currPage.addClass('disabled');
+            $owner.trigger('page', page);
+            $owner.data('settings', settings);
+        }
+
+        function href(c){
+
+            return settings.href.replace(settings.hrefVariable, c);
+        }
+
+        return this.each(function(){
+
+            var $bootpag, lp, me = $(this),
+                p = ['<ul class="bootpag">'];
+
+            if(settings.prev){
+                p.push('<li data-lp="1" class="prev"><a href="'+href(1)+'">'+settings.prev+'</a></li>');
+            }
+            for(var c = 1; c <= Math.min(settings.total, settings.maxVisible); c++){
+                p.push('<li data-lp="'+c+'"><a href="'+href(c)+'">'+c+'</a></li>');
+            }
+            if(settings.next){
+                lp = settings.leaps && settings.total > settings.maxVisible
+                    ? Math.min(settings.maxVisible + 1, settings.total) : 2;
+                p.push('<li data-lp="'+lp+'" class="next"><a href="'+href(lp)+'">'+settings.next+'</a></li>');
+            }
+            p.push('</ul>');
+            me.find('ul.bootpag').remove();
+            me.append(p.join('')).addClass('pagination');
+            $bootpag = me.find('ul.bootpag');
+            me.find('li').click(function paginationClick(){
+            
+                var me = $(this);
+                if(me.hasClass('disabled')){
+                    return;
+                }
+                renderPage($bootpag, parseInt(me.attr('data-lp'), 10));
+            });
+            renderPage($bootpag, settings.page);
+        });
+    }
+
+})(jQuery, window);
\ No newline at end of file