better error loop for disconnect and setInterval

gulpfile.js

@@ -44,7 +44,7 @@ var buildTask = function() {
     .pipe(concat('style.min.css'))
     .pipe(minifycss())
     .pipe(gulp.dest('./app/css'));
-  gulp.src(['./src/js/jquery-v2.1.4.js', './src/js/bootstrap-v3.3.6.js', './src/js/underscore-v1.8.3.js', './src/js/handlebars-v4.0.5.js'])
+  gulp.src(['./src/js/jquery-v2.1.4.js', './src/js/bootstrap-v3.3.6.js', './src/js/bootstrap-progress-v0.9.0.js', './src/js/underscore-v1.8.3.js', './src/js/handlebars-v4.0.5.js'])
     .pipe(concat('vendor.min.js'))
     .pipe(uglify())
     .pipe(gulp.dest('./app/js'));
@@ -80,7 +80,7 @@ var watchTask = function() {
     .pipe(gulp.dest('./app/js/templates'));
   gulp.src(['.src/js/amplitude-v2.2.0.js', './src/js/chat.js', './src/js/radio.js'])
     .pipe(concat('radio.min.js'))
-    .pipe(uglify())
+    //.pipe(uglify())
     .pipe(gulp.dest('./app/js'));
   console.log('WATCH: Watch Complete');
 };
@@ -102,7 +102,7 @@ var nodemonTask = function() {
   });
 };
 
-gulp.task('start', function () {
+gulp.task('run', function () {
   nodemonTask();
 });
 

src/css/main.css

@@ -304,6 +304,146 @@ meter {
   vertical-align: middle !important;
 }
 
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+.progress {
+  overflow: hidden;
+  height: 20px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.progress-bar {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #337ab7;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+  -o-transition: width 0.6s ease;
+  transition: width 0.6s ease;
+}
+.progress-striped .progress-bar,
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-size: 40px 40px;
+}
+.progress.active .progress-bar,
+.progress-bar.active {
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+  -o-animation: progress-bar-stripes 2s linear infinite;
+  animation: progress-bar-stripes 2s linear infinite;
+}
+.progress-bar-success {
+  background-color: #5cb85c;
+}
+.progress-striped .progress-bar-success {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.progress-bar-info {
+  background-color: #5bc0de;
+}
+.progress-striped .progress-bar-info {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.progress-bar-warning {
+  background-color: #f0ad4e;
+}
+.progress-striped .progress-bar-warning {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.progress-bar-danger {
+  background-color: #d9534f;
+}
+.progress-striped .progress-bar-danger {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.progress {
+  position: relative;
+}
+.progress .progress-bar {
+  position: absolute;
+  overflow: hidden;
+  line-height: 20px;
+}
+.progress .progressbar-back-text {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+}
+.progress .progressbar-front-text {
+  display: block;
+  width: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+}
+.progress.right .progress-bar {
+  right: 0;
+}
+.progress.right .progressbar-front-text {
+  position: absolute;
+  right: 0;
+}
+.progress.vertical {
+  width: 20px;
+  height: 100%;
+  float: left;
+  margin-right: 20px;
+}
+.progress.vertical.bottom {
+  position: relative;
+}
+.progress.vertical.bottom .progressbar-front-text {
+  position: absolute;
+  bottom: 0;
+}
+.progress.vertical .progress-bar {
+  width: 100%;
+  height: 0;
+  -webkit-transition: height 0.6s ease;
+  -o-transition: height 0.6s ease;
+  transition: height 0.6s ease;
+}
+.progress.vertical.bottom .progress-bar {
+  position: absolute;
+  bottom: 0;
+}
+
 
 /***********************************
 =========== Chat Rooms ============= 

src/index.html

@@ -388,13 +388,21 @@
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" id="about">Connection Error</h4>
+        <h4 class="modal-title" id="about">Off the Air</h4>
       </div>
       <div class="modal-body">
-        <p></p>
+         <div class="alert alert-danger" role="alert">
+            <b>Connection Error</b>: Cannot connect to Radio Stream (<i>stream.davidawindham.com</i>). You may try again below:
+
+         </div>
+         <div class="progress" id="error-reconnecting">
+           <div class="progress-bar progress-bar-danger progress-bar-striped" id="connection-error-reconnecting" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-transitiongoal="100">
+         </div>
+         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+         <button type="button" id="connection-error-retry" data-loading-text="Loading..." class="btn btn-danger" autocomplete="off">Retry</button>
+         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       </div>
     </div>
   </div>

src/js/bootstrap-progress-v0.9.0.js

@@ -0,0 +1,169 @@
+/**** Radio Functions ****/
+/*!
+ * bootstrap-progressbar v0.9.0 by @minddust
+ * Copyright (c) 2012-2015 Stephan Groß
+ *
+ * http://www.minddust.com/project/bootstrap-progressbar/
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+(function($) {
+
+    'use strict';
+
+    // PROGRESSBAR CLASS DEFINITION
+    // ============================
+
+    var Progressbar = function(element, options) {
+        this.$element = $(element);
+        this.options = $.extend({}, Progressbar.defaults, options);
+    };
+
+    Progressbar.defaults = {
+        transition_delay: 300,
+        refresh_speed: 50,
+        display_text: 'none',
+        use_percentage: true,
+        percent_format: function(percent) { return percent + '%'; },
+        amount_format: function(amount_part, amount_max, amount_min) { return amount_part + ' / ' + amount_max; },
+        update: $.noop,
+        done: $.noop,
+        fail: $.noop
+    };
+
+    Progressbar.prototype.transition = function() {
+        var $this = this.$element;
+        var $parent = $this.parent();
+        var $back_text = this.$back_text;
+        var $front_text = this.$front_text;
+        var options = this.options;
+        var data_transitiongoal = parseInt($this.attr('data-transitiongoal'));
+        var aria_valuemin = parseInt($this.attr('aria-valuemin')) || 0;
+        var aria_valuemax = parseInt($this.attr('aria-valuemax')) || 100;
+        var is_vertical = $parent.hasClass('vertical');
+        var update = options.update && typeof options.update === 'function' ? options.update : Progressbar.defaults.update;
+        var done = options.done && typeof options.done === 'function' ? options.done : Progressbar.defaults.done;
+        var fail = options.fail && typeof options.fail === 'function' ? options.fail : Progressbar.defaults.fail;
+
+        if (isNaN(data_transitiongoal)) {
+            fail('data-transitiongoal not set');
+            return;
+        }
+        var percentage = Math.round(100 * (data_transitiongoal - aria_valuemin) / (aria_valuemax - aria_valuemin));
+
+        if (options.display_text === 'center' && !$back_text && !$front_text) {
+            this.$back_text = $back_text = $('<span>').addClass('progressbar-back-text').prependTo($parent);
+            this.$front_text = $front_text = $('<span>').addClass('progressbar-front-text').prependTo($this);
+
+            var parent_size;
+
+            if (is_vertical) {
+                parent_size = $parent.css('height');
+                $back_text.css({height: parent_size, 'line-height': parent_size});
+                $front_text.css({height: parent_size, 'line-height': parent_size});
+
+                $(window).resize(function() {
+                    parent_size = $parent.css('height');
+                    $back_text.css({height: parent_size, 'line-height': parent_size});
+                    $front_text.css({height: parent_size, 'line-height': parent_size});
+                }); // normal resizing would brick the structure because width is in px
+            }
+            else {
+                parent_size = $parent.css('width');
+                $front_text.css({width: parent_size});
+
+                $(window).resize(function() {
+                    parent_size = $parent.css('width');
+                    $front_text.css({width: parent_size});
+                }); // normal resizing would brick the structure because width is in px
+            }
+        }
+
+        setTimeout(function() {
+            var current_percentage;
+            var current_value;
+            var this_size;
+            var parent_size;
+            var text;
+
+            if (is_vertical) {
+                $this.css('height', percentage + '%');
+            }
+            else {
+                $this.css('width', percentage + '%');
+            }
+
+            var progress = setInterval(function() {
+                if (is_vertical) {
+                    this_size = $this.height();
+                    parent_size = $parent.height();
+                }
+                else {
+                    this_size = $this.width();
+                    parent_size = $parent.width();
+                }
+
+                current_percentage = Math.round(100 * this_size / parent_size);
+                current_value = Math.round(aria_valuemin + this_size / parent_size * (aria_valuemax - aria_valuemin));
+
+                if (current_percentage >= percentage) {
+                    current_percentage = percentage;
+                    current_value = data_transitiongoal;
+                    done($this);
+                    clearInterval(progress);
+                }
+
+                if (options.display_text !== 'none') {
+                    text = options.use_percentage ? options.percent_format(current_percentage) : options.amount_format(current_value, aria_valuemax, aria_valuemin);
+
+                    if (options.display_text === 'fill') {
+                        $this.text(text);
+                    }
+                    else if (options.display_text === 'center') {
+                        $back_text.text(text);
+                        $front_text.text(text);
+                    }
+                }
+                $this.attr('aria-valuenow', current_value);
+
+                update(current_percentage, $this);
+            }, options.refresh_speed);
+        }, options.transition_delay);
+    };
+
+
+    // PROGRESSBAR PLUGIN DEFINITION
+    // =============================
+
+    var old = $.fn.progressbar;
+
+    $.fn.progressbar = function(option) {
+        return this.each(function () {
+            var $this = $(this);
+            var data = $this.data('bs.progressbar');
+            var options = typeof option === 'object' && option;
+
+            if (data && options) {
+                $.extend(data.options, options);
+            }
+
+            if (!data) {
+                $this.data('bs.progressbar', (data = new Progressbar(this, options)));
+            }
+            data.transition();
+        });
+    };
+
+    $.fn.progressbar.Constructor = Progressbar;
+
+
+    // PROGRESSBAR NO CONFLICT
+    // =======================
+
+    $.fn.progressbar.noConflict = function () {
+        $.fn.progressbar = old;
+        return this;
+    };
+
+})(window.jQuery);

src/js/radio.js

@@ -1,6 +1,5 @@
-/**** Radio Functions ****/
+/**** Last-fm API ****/
 
-/* Last-fm API */
 (function( $ ) {
 	$.fn.lfmr = function(options){
 		var urla = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=windhamdavid&api_key=e12ea1d0253898ee9a93edfe42ffdeab&format=json&limit=100";
@@ -82,6 +81,8 @@
 })( jQuery );
 
 
+/**** Audio Player ****/
+
 amplitude_config = {
 //  amplitude_songs: []
 	"amplitude_songs": [{
@@ -94,44 +95,66 @@ amplitude_config = {
 function get_radio_tower() {return 'img/radio.gif';}
 function get_radio_none() {return 'img/none.svg';}
 function get_radio_eq() {return 'img/eq.gif';}
-function get_radio_eq_none() {return 'img/none.svg';}
+function get_radio_eq_none() {return 'img/1.png';}
+
+
 
 var interval = null;
 $(document).ready(function() {
-  interval = setInterval(radioTitle,30000); // every 30 seconds stop polling if offline
+  interval = setInterval(radioTitle,20000); // every 20 seconds or stop polling
+  $('#error-reconnecting').hide();
+  $('#connection-error-retry').on('click', function () {
+      var $btn = $(this).button('reconnecting...')
+      radioTitle();
+      $('#error-reconnecting').show();
+      $('#connection-error-reconnecting').progressbar();
+      $btn.button('reset')
+    })
 });
 
+radioTitle(); // call it once on load to avoid 20s delay
+
 function radioTitle() {
-	$('#radio').attr('src', get_radio_none()).fadeIn(300);
-	$('#eq').attr('src', get_radio_eq_none()).fadeIn(300);
     var url = 'http://stream.davidawindham.com/status2.xsl';
     var mountpoint = '/stream';
     $.ajax({ type: 'GET',
-        url: url,
-        async: true,
-        jsonpCallback: 'parseMusic',
-        contentType: "application/json",
-        dataType: 'jsonp',
-        success: function (json) {	
-      		$('#track').text(json[mountpoint].title);
+      url: url,
+      async: true,
+      jsonpCallback: 'parseMusic',
+      contentType: "application/json",
+      dataType: 'jsonp',
+      success: function(json){
+        if(json[mountpoint] == null) {
+          $('#connection-error').modal('show');
+        }
+        else {
+          $('#track').text(json[mountpoint].title);
           $('#listeners').text(json[mountpoint].listeners);
-      		$('#peak-listeners').text(json[mountpoint].peak_listeners); 
-      		$('#bitrate').text(json[mountpoint].bitrate); 
-      		$('#radio').attr('src', get_radio_tower()).fadeIn(300);
-      		$('#eq').attr('src', get_radio_eq()).fadeIn(300);
-        },
+          $('#peak-listeners').text(json[mountpoint].peak_listeners);
+          $('#bitrate').text(json[mountpoint].bitrate);
+          $('#radio').attr('src', get_radio_tower()).fadeIn(300);
+          $('#eq').attr('src', get_radio_eq()).fadeIn(300);
+          $('#connection-error').modal('hide');
+        }		
+      },
       error: function(e){
-        console.error('cannot connect to stream');
         $('#connection-error').modal('show');
         clearInterval(interval);
   		  $('#radio').attr('src', get_radio_none()).fadeIn(300);
   		  $('#eq').attr('src', get_radio_eq_none()).fadeIn(300);
       }
   });
+	$('#radio').attr('src', get_radio_none()).fadeIn(300);
+	$('#eq').attr('src', get_radio_eq_none()).fadeIn(300);
 }
 
 
 
+
+
+
+/**** Page Features ****/
+
 $(document).ready(function() {
   function spectrum() {
       var randomColor = Math.floor(Math.random()*16777215).toString(16);