Merge tag 'upload_layout' into develop

Finished
2026-02-14 20:16:55 +00:00 · 2016-06-22 20:32:48 +01:00
parent 86429b6621 11012a29a7
commit 35fa5c5d76
19 changed files with 578 additions and 92 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -247,7 +247,6 @@ module.exports = function (grunt) {
                    src: [
                        '<%= yeoman.dist %>/public/{,*/}*.js',
                        '<%= yeoman.dist %>/public/{,*/}*.css',
-                        '<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
                        '<%= yeoman.dist %>/public/assets/fonts/*',
                        '!<%= yeoman.dist %>/public/assets/images/dyn/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
                    ]
--- a/bower.json
+++ b/bower.json
@@ -42,17 +42,13 @@
    "ngInfiniteScroll": "1.2.1",
    "angular-socket-io": "^0.7.0",
    "socket.io-client": "^1.4.6",
-    "angular-toastr": "^1.7.0",
-    "angular-inform": "^0.0.18",
-    "font-awesome": "^4.6.3",
-    "jquery.gritter": "^1.7.4"
+    "angular-toastr": "^1.7.0"
  },
  "devDependencies": {
    "angular-mocks": ">=1.2.*",
    "angular-scenario": ">=1.2.*"
  },
  "resolutions": {
-    "angular-bootstrap": "~0.14.3",
    "angular": "1.4.*"
  }
 }
--- a/client/app/app.js
+++ b/client/app/app.js
@@ -20,8 +20,7 @@ angular.module('dssWebApp', [
    'angular-smilies',
    'satellizer',
    'toastr',
-    'angulartics.google.analytics',
-    'inform'
+    'angulartics.google.analytics'
 ])
    .config(function ($stateProvider, $sceDelegateProvider, $httpProvider, $urlRouterProvider, $locationProvider, $provide, $authProvider,
                      ngClipProvider, $analyticsProvider, dialogsProvider, DSProvider, DSHttpAdapterProvider,
--- a/client/app/directives/notifications/notifications.directive.js
+++ b/client/app/directives/notifications/notifications.directive.js
@@ -38,8 +38,8 @@ angular.module('dssWebApp')
                });
                scope.$on(MESSAGE_EVENTS.broadcast, function (message) {
                    getNotifications(scope)
-                        .then(function(){
-                            scope.$apply();
+                        .then(function () {
+                            $rootScope.safeApply();
                        });
                });
            }
--- a/client/app/main.controller.js
+++ b/client/app/main.controller.js
@@ -1,7 +1,7 @@
 'use strict';

 angular.module('dssWebApp')
-    .controller('MainCtrl', function ($scope, $rootScope, $http, $state, $auth, inform,
+    .controller('MainCtrl', function ($scope, $rootScope, $http, $state, $auth, 
                                      dialogs, logger, SocketService, AudioService,
                                      MixModel, UserModel, LoginService, Session,
                                      SERVER_CONFIG, CHAT_EVENTS, MESSAGE_EVENTS, AUTH_EVENTS) {
@@ -18,11 +18,8 @@ angular.module('dssWebApp')
                        $rootScope.setCurrentUser(user);
                        return $state.go(toState.name, toParams);
                    }, function (reason) {
-                        debugger;
                        console.error(reason);
                    });
-            } else {
-                debugger;
            }
        });
        $rootScope.safeApply = function (fn) {
--- a/client/app/views/mixes/upload/upload.controller.js
+++ b/client/app/views/mixes/upload/upload.controller.js
@@ -6,8 +6,10 @@ angular.module('dssWebApp')
                  Session, MixModel, LoginService, ImageUploadService, SERVER_CONFIG, AUTH_EVENTS) {

            $scope.mix = mix;
-            $scope.waveformHeader = '(drag & drop or click & browse)';

+            $scope.waveformHeader =
+                "<i class='fa fa-spinner fa-spin'></i>" +
+                "Generating waveform, we'll try to let you know when it's done or send you an email.";
            $scope.waveformFooter = '';

            $scope.sending = false;
@@ -113,7 +115,7 @@ angular.module('dssWebApp')
                        $scope.mix = result;
                        $timeout(function () {
                            var url = $state.href('root.user.mix', {user: $scope.mix.user.slug, mix: $scope.mix.slug});
-                            $scope.waveformFooter = "Your mix will be available <a href='" + '/mix' + "'>Here</a>";
+                            $scope.waveformFooter = "Your mix will be available <a href='" + url + "'>Here</a>";
                            $scope.$apply();
                        }, 6400);

@@ -151,10 +153,8 @@ angular.module('dssWebApp')
                    $scope.$apply();
                },
                complete: function (file) {
+                    $scope.uploadState = uploadStates.AUDIO_SENT;
                    if (file.status !== 'error') {
-                        $scope.waveformHeader =
-                            "<i class='fa fa-spinner fa-spin'></i>" +
-                            "Generating waveform, we'll try to let you know when it's done or send you an email.";                        $scope.uploadState = uploadStates.AUDIO_SENT;
                        $scope.$apply();
                        _checkRedirect();
                    } else {
@@ -171,4 +171,8 @@ angular.module('dssWebApp')
                        $scope.genreSearchResults = results.data.results;
                    });
            };
+            $('#waveform-status-info').pulsate({
+                color: "#FCB322",
+                glow: true
+            });
        });
--- a/client/app/views/mixes/upload/upload.html
+++ b/client/app/views/mixes/upload/upload.html
@@ -2,33 +2,36 @@
    <button type="button" ng-click="login()" class="btn btn-sm btn-danger">Login</button>
 </div>
 <div ng-show="$root.currentUser" class="row">
-    <div ng-show="uploadState <= uploadStates.AUDIO_SENT" class="text-center row">
+
+    <div ng-show="uploadState==uploadStates.AUDIO_SENDING" class="progress progress-striped" id="progress-wrapper">
+        <div role="progressbar" aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100"
+             ng-style="uploadProgressStyle" class="progress-bar progress-bar-success">
+            {{uploadProgress}}%
+        </div>
+    </div>
+
+    <div ng-show="uploadState <= uploadStates.AUDIO_SENT" class="text-center row" id="fileupload-wrapper">
        <div class="block full">
            <form id="dss-file-upload" ng-show="uploadState==0" class="dropzone">
            </form>
        </div>
    </div>
-    <div class="row">
-        <div ng-show="uploadState==uploadStates.AUDIO_SENT" class="widget widget-simple col-md-8">
-            <h6 class="description">
-                <span ng-bind-html="waveformHeader | unsafe"></span><br/>
-                <span ng-bind-html="waveformFooter | unsafe"></span>
-            </h6>
+    <div ng-show="uploadState==uploadStates.AUDIO_SENT" class="text-center row" id="status-wrapper">
+        <div class="panel">
+            <div class="panel-body">
+                <h2 class="description">
+                    <span id="waveform-status-info" ng-bind-html="waveformHeader | unsafe"></span><br/>
+                    <span ng-bind-html="waveformFooter | unsafe"></span>
+                </h2>
+            </div>
        </div>
    </div>
+
    <div ng-show="uploadState != uploadStates.VIRGIN && (!detailsEntered || uploadState == uploadStates.EDIT_MODE)"
-         class="row">
+         class="row"  id="details-wrapper">
        <div class="block text-center">
            <div class="col-md-2"></div>
            <div class="col-md-8">
-                <div class="row">
-                    <div ng-show="uploadState==uploadStates.AUDIO_SENDING" class="progress progress-striped">
-                        <div role="progressbar" aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100"
-                             ng-style="uploadProgressStyle" class="progress-bar progress-bar-success">
-                            {{uploadProgress}}%
-                        </div>
-                    </div>
-                </div>
                <div class="row">
                    <form name="uploadForm" ng-submit="saveMix()" class="form-horizontal">
                        <input type="hidden" ng-model="mix.uid"/>
@@ -41,7 +44,8 @@
                                <input type="text" id="title" name="title" required="" ng-minlength="5"
                                       ng-maxlength="250"
                                       ng-model="mix.title" class="form-control input-sm"/>
-                                <p for="title" ng-show="uploadForm.title.$invalid &amp;&amp; uploadForm.title.$dirty"
+                                <p for="title"
+                                   ng-show="uploadForm.title.$invalid &amp;&amp; uploadForm.title.$dirty"
                                   class="help-block">Title must be between 5 and 250 characters</p>
                                <p for="title"
                                   ng-show="(uploadForm.title.$error.required) &amp;&amp; uploadForm.$dirty &amp;&amp;!(uploadForm.title.$invalid &amp;&amp; uploadForm.title.$dirty)"
@@ -76,7 +80,8 @@
                                         style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                    <div>
                                       <span class="btn btn-white btn-file">
-                                           <span class="fileupload-new"><i class="fa fa-paper-clip"></i> Select image</span>
+                                           <span class="fileupload-new"><i
+                                                   class="fa fa-paper-clip"></i> Select image</span>
                                           <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
                                           <input type="file" id="mix-image-fileinput" class="default"/>
                                       </span>
@@ -110,9 +115,12 @@
                                    <header class="panel-heading">Mix options</header>
                                    <div class="panel-body">
                                        <div class="checkboxes">
-                                            <pretty-checkbox ng-model="mix.is_private" label="'Private'"></pretty-checkbox>
-                                            <pretty-checkbox ng-model="mix.is_downloadable" label="'Downloadable'"></pretty-checkbox>
-                                            <pretty-checkbox ng-model="mix.is_featured" label="'Homepage'"></pretty-checkbox>
+                                            <pretty-checkbox ng-model="mix.is_private"
+                                                             label="'Private'"></pretty-checkbox>
+                                            <pretty-checkbox ng-model="mix.is_downloadable"
+                                                             label="'Downloadable'"></pretty-checkbox>
+                                            <pretty-checkbox ng-model="mix.is_featured"
+                                                             label="'Homepage'"></pretty-checkbox>
                                        </div>
                                    </div>
                                </section>
--- a/client/assets/flatlab/pulstate.js
+++ b/client/assets/flatlab/pulstate.js
@@ -0,0 +1,4 @@
+(function(c){var k={init:function(a){var b={color:c(this).css("background-color"),reach:20,speed:1E3,pause:0,glow:!0,repeat:!0,onHover:!1};c(this).css({"-moz-outline-radius":c(this).css("border-top-left-radius"),"-webkit-outline-radius":c(this).css("border-top-left-radius"),"outline-radius":c(this).css("border-top-left-radius")});a&&c.extend(b,a);b.color=c("<div style='background:"+b.color+"'></div>").css("background-color");!0!==b.repeat&&(!isNaN(b.repeat)&&0<b.repeat)&&(b.repeat-=1);return this.each(function(){b.onHover?
+    c(this).bind("mouseover",function(){g(b,this,0)}).bind("mouseout",function(){c(this).pulsate("destroy")}):g(b,this,0)})},destroy:function(){return this.each(function(){clearTimeout(this.timer);c(this).css("outline",0)})}},g=function(a,b,d){var f=a.reach;d=d>f?0:d;var h=(f-d)/f,e=a.color.split(","),h="rgba("+e[0].split("(")[1]+","+e[1]+","+e[2].split(")")[0]+","+h+")",e={outline:"2px solid "+h};a.glow?(e["box-shadow"]="0px 0px "+parseInt(d/1.5)+"px "+h,userAgent=navigator.userAgent||"",/(chrome)[ \/]([\w.]+)/.test(userAgent.toLowerCase())&&
+(e["outline-offset"]=d+"px",e["outline-radius"]="100 px")):e["outline-offset"]=d+"px";c(b).css(e);b.timer&&clearTimeout(b.timer);b.timer=setTimeout(function(){if(d>=f&&!a.repeat)return c(b).pulsate("destroy"),!1;if(d>=f&&!0!==a.repeat&&!isNaN(a.repeat)&&0<a.repeat)a.repeat-=1;else if(a.pause&&d>=f)return l(a,b,d+1),!1;g(a,b,d+1)},a.speed/f)},l=function(a,b,c){innerfunc=function(){g(a,b,c)};b.timer=setTimeout(innerfunc,a.pause)};c.fn.pulsate=function(a){if(k[a])return k[a].apply(this,Array.prototype.slice.call(arguments,
+    1));if("object"===typeof a||!a)return k.init.apply(this,arguments);c.error("Method "+a+" does not exist on jQuery.pulsate")}})(jQuery);
--- a/client/assets/gritter/jquery.gritter.css
+++ b/client/assets/gritter/jquery.gritter.css
@@ -0,0 +1,102 @@
+/* the norm */
+#gritter-notice-wrapper {
+	position:fixed;
+	top:20px;
+	right:20px;
+	width:301px;
+	z-index:9999;
+}
+#gritter-notice-wrapper.top-left {
+    left: 20px;
+    right: auto;
+}
+#gritter-notice-wrapper.bottom-right {
+    top: auto;
+    left: auto;
+    bottom: 20px;
+    right: 20px;
+}
+#gritter-notice-wrapper.bottom-left {
+    top: auto;
+    right: auto;
+    bottom: 20px;
+    left: 20px;
+}
+.gritter-item-wrapper {
+	position:relative;
+	margin:0 0 10px 0;
+	background:url('../images/ie-spacer.gif'); /* ie7/8 fix */ 
+}
+.gritter-top {
+	background:url(../images/gritter.png) no-repeat left -30px;
+	height:10px;
+}
+.hover .gritter-top {
+	background-position:right -30px;
+}
+.gritter-bottom {
+	background:url(../images/gritter.png) no-repeat left bottom;
+	height:8px;
+	margin:0;
+}
+.hover .gritter-bottom {
+	background-position: bottom right;
+}
+.gritter-item {
+	display:block;
+	background:url(../images/gritter.png) no-repeat left -40px;
+	color:#eee;
+	padding:2px 11px 8px 11px;
+	font-size: 11px;
+	font-family:verdana;
+}
+.hover .gritter-item {
+	background-position:right -40px;
+}
+.gritter-item p {
+	padding:0;
+	margin:0;
+	word-wrap:break-word;
+}
+.gritter-close {
+	display:none;
+	position:absolute;
+	top:5px;
+	left:3px;
+	background:url(../images/gritter.png) no-repeat left top;
+	cursor:pointer;
+	width:30px;
+	height:30px;
+	text-indent:-9999em;
+}
+.gritter-title {
+	font-size:14px;
+	font-weight:bold;
+	padding:0 0 7px 0;
+	display:block;
+	text-shadow:1px 1px 0 #000; /* Not supported by IE :( */
+}
+.gritter-image {
+	width:48px;
+	height:48px;
+	float:left;
+}
+.gritter-with-image,
+.gritter-without-image {
+	padding:0;
+}
+.gritter-with-image {
+	width:220px;
+	float:right;
+}
+/* for the light (white) version of the gritter notice */
+.gritter-light .gritter-item,
+.gritter-light .gritter-bottom,
+.gritter-light .gritter-top,
+.gritter-light .gritter-close {
+    background-image: url(../images/gritter-light.png);
+    color: #222;
+}
+.gritter-light .gritter-title {
+    text-shadow: none;
+}
--- a/client/assets/gritter/jquery.gritter.js
+++ b/client/assets/gritter/jquery.gritter.js
@@ -0,0 +1,419 @@
+/*
+ * Gritter for jQuery
+ * http://www.boedesign.com/
+ *
+ * Copyright (c) 2012 Jordan Boesch
+ * Dual licensed under the MIT and GPL licenses.
+ *
+ * Date: February 24, 2012
+ * Version: 1.7.4
+ */
+
+(function($){
+ 	
+	/**
+	* Set it up as an object under the jQuery namespace
+	*/
+	$.gritter = {};
+	
+	/**
+	* Set up global options that the user can over-ride
+	*/
+	$.gritter.options = {
+		position: '',
+		class_name: '', // could be set to 'gritter-light' to use white notifications
+		fade_in_speed: 'medium', // how fast notifications fade in
+		fade_out_speed: 1000, // how fast the notices fade out
+		time: 6000 // hang on the screen for...
+	}
+	
+	/**
+	* Add a gritter notification to the screen
+	* @see Gritter#add();
+	*/
+	$.gritter.add = function(params){
+
+		try {
+			return Gritter.add(params || {});
+		} catch(e) {
+		
+			var err = 'Gritter Error: ' + e;
+			(typeof(console) != 'undefined' && console.error) ? 
+				console.error(err, params) : 
+				alert(err);
+				
+		}
+		
+	}
+	
+	/**
+	* Remove a gritter notification from the screen
+	* @see Gritter#removeSpecific();
+	*/
+	$.gritter.remove = function(id, params){
+		Gritter.removeSpecific(id, params || {});
+	}
+	
+	/**
+	* Remove all notifications
+	* @see Gritter#stop();
+	*/
+	$.gritter.removeAll = function(params){
+		Gritter.stop(params || {});
+	}
+	
+	/**
+	* Big fat Gritter object
+	* @constructor (not really since its object literal)
+	*/
+	var Gritter = {
+		
+		// Public - options to over-ride with $.gritter.options in "add"
+		position: '',
+		fade_in_speed: '',
+		fade_out_speed: '',
+		time: '',
+		
+		// Private - no touchy the private parts
+		_custom_timer: 0,
+		_item_count: 0,
+		_is_setup: 0,
+		_tpl_close: '<a class="gritter-close" href="#" tabindex="1">Close Notification</a>',
+		_tpl_title: '<span class="gritter-title">[[title]]</span>',
+		_tpl_item: '<div id="gritter-item-[[number]]" class="gritter-item-wrapper [[item_class]]" style="display:none" role="alert"><div class="gritter-top"></div><div class="gritter-item">[[close]][[image]]<div class="[[class_name]]">[[title]]<p>[[text]]</p></div><div style="clear:both"></div></div><div class="gritter-bottom"></div></div>',
+		_tpl_wrap: '<div id="gritter-notice-wrapper"></div>',
+		
+		/**
+		* Add a gritter notification to the screen
+		* @param {Object} params The object that contains all the options for drawing the notification
+		* @return {Integer} The specific numeric id to that gritter notification
+		*/
+		add: function(params){
+			// Handle straight text
+			if(typeof(params) == 'string'){
+				params = {text:params};
+			}
+
+			// We might have some issues if we don't have a title or text!
+			if(params.text === null){
+				throw 'You must supply "text" parameter.'; 
+			}
+			
+			// Check the options and set them once
+			if(!this._is_setup){
+				this._runSetup();
+			}
+			
+			// Basics
+			var title = params.title, 
+				text = params.text,
+				image = params.image || '',
+				sticky = params.sticky || false,
+				item_class = params.class_name || $.gritter.options.class_name,
+				position = $.gritter.options.position,
+				time_alive = params.time || '';
+
+			this._verifyWrapper();
+			
+			this._item_count++;
+			var number = this._item_count, 
+				tmp = this._tpl_item;
+			
+			// Assign callbacks
+			$(['before_open', 'after_open', 'before_close', 'after_close']).each(function(i, val){
+				Gritter['_' + val + '_' + number] = ($.isFunction(params[val])) ? params[val] : function(){}
+			});
+
+			// Reset
+			this._custom_timer = 0;
+			
+			// A custom fade time set
+			if(time_alive){
+				this._custom_timer = time_alive;
+			}
+			
+			var image_str = (image != '') ? '<img src="' + image + '" class="gritter-image" />' : '',
+				class_name = (image != '') ? 'gritter-with-image' : 'gritter-without-image';
+			
+			// String replacements on the template
+			if(title){
+				title = this._str_replace('[[title]]',title,this._tpl_title);
+			}else{
+				title = '';
+			}
+			
+			tmp = this._str_replace(
+				['[[title]]', '[[text]]', '[[close]]', '[[image]]', '[[number]]', '[[class_name]]', '[[item_class]]'],
+				[title, text, this._tpl_close, image_str, this._item_count, class_name, item_class], tmp
+			);
+
+			// If it's false, don't show another gritter message
+			if(this['_before_open_' + number]() === false){
+				return false;
+			}
+
+			$('#gritter-notice-wrapper').addClass(position).append(tmp);
+			
+			var item = $('#gritter-item-' + this._item_count);
+			
+			item.fadeIn(this.fade_in_speed, function(){
+				Gritter['_after_open_' + number]($(this));
+			});
+			
+			if(!sticky){
+				this._setFadeTimer(item, number);
+			}
+			
+			// Bind the hover/unhover states
+			$(item).bind('mouseenter mouseleave', function(event){
+				if(event.type == 'mouseenter'){
+					if(!sticky){ 
+						Gritter._restoreItemIfFading($(this), number);
+					}
+				}
+				else {
+					if(!sticky){
+						Gritter._setFadeTimer($(this), number);
+					}
+				}
+				Gritter._hoverState($(this), event.type);
+			});
+			
+			// Clicking (X) makes the perdy thing close
+			$(item).find('.gritter-close').click(function(){
+				Gritter.removeSpecific(number, {}, null, true);
+				return false;
+			});
+			
+			return number;
+		
+		},
+		
+		/**
+		* If we don't have any more gritter notifications, get rid of the wrapper using this check
+		* @private
+		* @param {Integer} unique_id The ID of the element that was just deleted, use it for a callback
+		* @param {Object} e The jQuery element that we're going to perform the remove() action on
+		* @param {Boolean} manual_close Did we close the gritter dialog with the (X) button
+		*/
+		_countRemoveWrapper: function(unique_id, e, manual_close){
+			
+			// Remove it then run the callback function
+			e.remove();
+			this['_after_close_' + unique_id](e, manual_close);
+			
+			// Check if the wrapper is empty, if it is.. remove the wrapper
+			if($('.gritter-item-wrapper').length == 0){
+				$('#gritter-notice-wrapper').remove();
+			}
+		
+		},
+		
+		/**
+		* Fade out an element after it's been on the screen for x amount of time
+		* @private
+		* @param {Object} e The jQuery element to get rid of
+		* @param {Integer} unique_id The id of the element to remove
+		* @param {Object} params An optional list of params to set fade speeds etc.
+		* @param {Boolean} unbind_events Unbind the mouseenter/mouseleave events if they click (X)
+		*/
+		_fade: function(e, unique_id, params, unbind_events){
+
+			var params = params || {},
+				fade = (typeof(params.fade) != 'undefined') ? params.fade : true,
+				fade_out_speed = params.speed || this.fade_out_speed,
+				manual_close = unbind_events;
+
+			this['_before_close_' + unique_id](e, manual_close);
+			
+			// If this is true, then we are coming from clicking the (X)
+			if(unbind_events){
+				e.unbind('mouseenter mouseleave');
+			}
+			
+			// Fade it out or remove it
+			if(fade){
+			
+				e.animate({
+					opacity: 0
+				}, fade_out_speed, function(){
+					e.animate({ height: 0 }, 300, function(){
+						Gritter._countRemoveWrapper(unique_id, e, manual_close);
+					})
+				})
+				
+			}
+			else {
+				
+				this._countRemoveWrapper(unique_id, e);
+				
+			}
+						
+		},
+		
+		/**
+		* Perform actions based on the type of bind (mouseenter, mouseleave) 
+		* @private
+		* @param {Object} e The jQuery element
+		* @param {String} type The type of action we're performing: mouseenter or mouseleave
+		*/
+		_hoverState: function(e, type){
+			
+			// Change the border styles and add the (X) close button when you hover
+			if(type == 'mouseenter'){
+				
+				e.addClass('hover');
+				
+				// Show close button
+				e.find('.gritter-close').show();
+						
+			}
+			// Remove the border styles and hide (X) close button when you mouse out
+			else {
+				
+				e.removeClass('hover');
+				
+				// Hide close button
+				e.find('.gritter-close').hide();
+				
+			}
+			
+		},
+		
+		/**
+		* Remove a specific notification based on an ID
+		* @param {Integer} unique_id The ID used to delete a specific notification
+		* @param {Object} params A set of options passed in to determine how to get rid of it
+		* @param {Object} e The jQuery element that we're "fading" then removing
+		* @param {Boolean} unbind_events If we clicked on the (X) we set this to true to unbind mouseenter/mouseleave
+		*/
+		removeSpecific: function(unique_id, params, e, unbind_events){
+			
+			if(!e){
+				var e = $('#gritter-item-' + unique_id);
+			}
+
+			// We set the fourth param to let the _fade function know to 
+			// unbind the "mouseleave" event.  Once you click (X) there's no going back!
+			this._fade(e, unique_id, params || {}, unbind_events);
+			
+		},
+		
+		/**
+		* If the item is fading out and we hover over it, restore it!
+		* @private
+		* @param {Object} e The HTML element to remove
+		* @param {Integer} unique_id The ID of the element
+		*/
+		_restoreItemIfFading: function(e, unique_id){
+			
+			clearTimeout(this['_int_id_' + unique_id]);
+			e.stop().css({ opacity: '', height: '' });
+			
+		},
+		
+		/**
+		* Setup the global options - only once
+		* @private
+		*/
+		_runSetup: function(){
+		
+			for(opt in $.gritter.options){
+				this[opt] = $.gritter.options[opt];
+			}
+			this._is_setup = 1;
+			
+		},
+		
+		/**
+		* Set the notification to fade out after a certain amount of time
+		* @private
+		* @param {Object} item The HTML element we're dealing with
+		* @param {Integer} unique_id The ID of the element
+		*/
+		_setFadeTimer: function(e, unique_id){
+			
+			var timer_str = (this._custom_timer) ? this._custom_timer : this.time;
+			this['_int_id_' + unique_id] = setTimeout(function(){ 
+				Gritter._fade(e, unique_id);
+			}, timer_str);
+		
+		},
+		
+		/**
+		* Bring everything to a halt
+		* @param {Object} params A list of callback functions to pass when all notifications are removed
+		*/  
+		stop: function(params){
+			
+			// callbacks (if passed)
+			var before_close = ($.isFunction(params.before_close)) ? params.before_close : function(){};
+			var after_close = ($.isFunction(params.after_close)) ? params.after_close : function(){};
+			
+			var wrap = $('#gritter-notice-wrapper');
+			before_close(wrap);
+			wrap.fadeOut(function(){
+				$(this).remove();
+				after_close();
+			});
+		
+		},
+		
+		/**
+		* An extremely handy PHP function ported to JS, works well for templating
+		* @private
+		* @param {String/Array} search A list of things to search for
+		* @param {String/Array} replace A list of things to replace the searches with
+		* @return {String} sa The output
+		*/  
+		_str_replace: function(search, replace, subject, count){
+		
+			var i = 0, j = 0, temp = '', repl = '', sl = 0, fl = 0,
+				f = [].concat(search),
+				r = [].concat(replace),
+				s = subject,
+				ra = r instanceof Array, sa = s instanceof Array;
+			s = [].concat(s);
+			
+			if(count){
+				this.window[count] = 0;
+			}
+		
+			for(i = 0, sl = s.length; i < sl; i++){
+				
+				if(s[i] === ''){
+					continue;
+				}
+				
+				for (j = 0, fl = f.length; j < fl; j++){
+					
+					temp = s[i] + '';
+					repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0];
+					s[i] = (temp).split(f[j]).join(repl);
+					
+					if(count && s[i] !== temp){
+						this.window[count] += (temp.length-s[i].length) / f[j].length;
+					}
+					
+				}
+			}
+			
+			return sa ? s : s[0];
+			
+		},
+		
+		/**
+		* A check to make sure we have something to wrap our notices with
+		* @private
+		*/  
+		_verifyWrapper: function(){
+		  
+			if($('#gritter-notice-wrapper').length == 0){
+				$('body').append(this._tpl_wrap);
+			}
+		
+		}
+		
+	}
+	
+})(jQuery);
--- a/client/assets/images/gritter-light.png
+++ b/client/assets/images/gritter-light.png
--- a/client/assets/images/gritter-long.png
+++ b/client/assets/images/gritter-long.png
--- a/client/assets/images/gritter.png
+++ b/client/assets/images/gritter.png
--- a/client/assets/images/ie-spacer.gif
+++ b/client/assets/images/ie-spacer.gif
--- a/client/assets/images/trees.jpg
+++ b/client/assets/images/trees.jpg
--- a/client/assets/utils.js
+++ b/client/assets/utils.js
@@ -1,9 +1,7 @@
 'use strict';
 var utils = {
    getWindowWidth: function () {
-        return window.innerWidth
-            || document.documentElement.clientWidth
-            || document.body.clientWidth;
+        return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    },
    showToast: function(title, text, image){
        $.gritter.add({
@@ -12,49 +10,5 @@ var utils = {
            image: image,
            sticky: false
        });
-    },
-    gritterNotification: function () {
-        // display marketing alert only once
-        if($('#wrapper').css('opacity')) {
-            if (!$.cookie('intro')) {
-                // Gritter notification intro 1
-                setTimeout(function () {
-                    var unique_id = $.gritter.add({
-                        // (string | mandatory) the heading of the notification
-                        title: 'Welcome to Blankon',
-                        // (string | mandatory) the text inside the notification
-                        text: 'Blankon is a theme fullpack admin template powered by Twitter bootstrap 3 front-end framework.',
-                        // (string | optional) the image to display on the left
-                        image: BlankonApp.handleBaseURL()+'/assets/global/img/icon/64/contact.png',
-                        // (bool | optional) if you want it to fade out on its own or just sit there
-                        sticky: false,
-                        // (int | optional) the time you want it to be alive for before fading out
-                        time: ''
-                    });
-                    // You can have it return a unique id, this can be used to manually remove it later using
-                    setTimeout(function () {
-                        $.gritter.remove(unique_id, {
-                            fade: true,
-                            speed: 'slow'
-                        });
-                    }, 12000);
-                }, 5000);
-                // Gritter notification intro 2
-                setTimeout(function () {
-                    $.gritter.add({
-                        // (string | mandatory) the heading of the notification
-                        title: 'Playing sounds',
-                        // (string | mandatory) the text inside the notification
-                        text: 'Blankon made for playing small sounds, will help you with this task. Please make your sound system is active',
-                        // (string | optional) the image to display on the left
-                        image: BlankonApp.handleBaseURL()+'/assets/global/img/icon/64/sound.png',
-                        // (bool | optional) if you want it to fade out on its own or just sit there
-                        sticky: true,
-                        // (int | optional) the time you want it to be alive for before fading out
-                        time: ''
-                    });
-                }, 8000);
-            }
-        }
    }
 };
--- a/client/index.html
+++ b/client/index.html
@@ -8,6 +8,8 @@
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

+    <script src="https://use.fontawesome.com/b431a8565a.js"></script>
+
    <link rel="stylesheet"
          href="//fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,600italic,700,700italic">

@@ -26,8 +28,6 @@
    <link rel="stylesheet" href="bower_components/smalot-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="bower_components/ui-select/dist/select.css" />
    <link rel="stylesheet" href="bower_components/angular-toastr/dist/angular-toastr.css" />
-    <link rel="stylesheet" href="bower_components/angular-inform/dist/angular-inform.css" />
-    <link rel="stylesheet" href="bower_components/jquery.gritter/css/jquery.gritter.css" />
    <!-- endbower -->
    <!-- endbuild -->

@@ -37,7 +37,7 @@
    <link rel="stylesheet" href="assets/animations.css">
    <link rel="stylesheet" href="assets/zoom/audioplayer.css">
    <link rel="stylesheet" href="assets/zoom/style.css">
-    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"/>
+    <link rel="stylesheet" href="assets/gritter/jquery.gritter.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="assets/flatlab/style.css">
    <link rel="stylesheet" href="assets/flatlab/style-responsive.css">
@@ -132,8 +132,6 @@
 <script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.js"></script>
 <script src="bower_components/angular-socket-io/socket.js"></script>
 <script src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
-<script src="bower_components/angular-inform/dist/angular-inform.js"></script>
-<script src="bower_components/jquery.gritter/js/jquery.gritter.js"></script>
 <!-- endbower -->
 <!-- endbuild -->

@@ -149,10 +147,12 @@
 <script src="bower_components/angular-deferred-bootstrap/angular-deferred-bootstrap.js"></script>
 <script src="bower_components/SoundManager2/script/soundmanager2-nodebug.js"></script>
 <script src="assets/flatlab/bootstrap-fileupload.js"></script>
+<script src="assets/flatlab/pulstate.js"></script>
 <script src="assets/utils.js"></script>
 <script src="assets/slimscroll/jquery.slimscroll.js"></script>
 <script src="assets/dropzone/dropzone.js"></script>
 <script src="assets/slider.js"></script>
+<script src="assets/gritter/jquery.gritter.js"></script>
 <!-- injector:js -->
 <script src="app/components/chatbar/chatbar.controller.js"></script>
 <script src="app/components/comments/comments.directive.js"></script>
--- a/docker_build.sh
+++ b/docker_build.sh
@@ -0,0 +1,3 @@
+grunt build:dist
+docker build -t fergalmoran/dss.web .
+docker push fergalmoran/dss.web
--- a/server/config/environment/development.js
+++ b/server/config/environment/development.js
@@ -9,5 +9,6 @@ module.exports = {
    seedDB: true,
    redisHost: 'localhost',
    apiUrl: 'http://ext-test.deepsouthsounds.com:8001',
+    //apiUrl: 'http://localhost:8001',
    radioUrl: 'http://localhost:8000'
 };