* session broadcast widget working decently well

web/app/assets/javascripts/feed_item_session.js

@@ -3,6 +3,7 @@
   "use strict";
 
   context.JK = context.JK || {};
+  context.JK.FeedItemSessionTimer = null;
   context.JK.FeedItemSession = function($parentElement, options){
 
     var logger = context.JK.logger;
@@ -135,6 +136,11 @@
         $status.text('SERVER ERROR');
         stopPlay();
       }
+      else if(state == 'concurrent_stop') {
+        console.log("CONCURRENT STOP")
+        $status.text('SESSION IN PROGRESS');
+        stopPlay();
+      }
       else {
         logger.error("unknown state: " + state)
       }
@@ -158,6 +164,20 @@
       $feedItem.data('original-max-height', $feedItem.css('height'));
 
       events();
+
+
+      // this is a bit lame, because this is a singleton.  the idea is, if there are any session widgets on the page, then we start ticking time
+      if(!context.JK.FeedItemSessionTimer) {
+        context.JK.FeedItemSessionTimer = setInterval(function() {
+          $.each($('.feed-entry.music-session-history-entry .inprogress .session-duration'), function(index, item) {
+            var $duration = $(item);
+
+            var createdAt = new Date($duration.attr('data-created-at'))
+            var millisElapsed = (new Date()).getTime() - createdAt.getTime();
+            $duration.text(context.JK.prettyPrintSeconds( parseInt(millisElapsed / 1000)));
+          });
+        }, 333);
+      }
     }
 
     initialize();

web/app/assets/javascripts/jquery.listenbroadcast.js

@@ -38,7 +38,8 @@
     var audioDomElement         = null;
     var musicSessionId          = null;
     var waitForBufferingTimeout = null;
-    var retryAttempts = 0;
+    var retryAttempts           = 0;
+    var self                    = this;
 
     var destroyed = false;
 
@@ -53,8 +54,8 @@
     var PlayStateFailedPlaying      = 'failed_playing'; // failed while playing.
     var PlayStateSessionOver        = 'session_over'; // session is done
     var PlayStateNetworkError       = 'network_error'; // network error
-    var PlayStateServerError       = 'server_error'; // network error
-
+    var PlayStateServerError        = 'server_error'; // server error
+    var PlayStateConcurrentStop     = 'concurrent_stop'; // stopped by another play attempt
 
     var playState = PlayStateNone; // tracks if the stream is actually playing
 
@@ -68,6 +69,12 @@
 
       if(!audioDomElement) throw "no audio element supplied; the user should not be able to attempt a play"
 
+      if(context.JK.ListenBroadcastCurrentlyPlaying) {
+        context.JK.ListenBroadcastCurrentlyPlaying.forcedPause();
+      }
+
+      context.JK.ListenBroadcastCurrentlyPlaying = self;
+
       rest.getSession(musicSessionId)
         .done(function(response) {
           audioDomElement.play();
@@ -92,6 +99,10 @@
         })
     }
 
+    function forcedPause() {
+      transition(PlayStateConcurrentStop);
+      pause();
+    }
 
     function pause(e) {
       if(e) {
@@ -146,6 +157,16 @@
 
       clearBufferTimeout();
 
+      if( playState == PlayStateNone ||
+          playState == PlayStateEnded ||
+          playState == PlayStateFailedStart ||
+          playState == PlayStateFailedPlaying ||
+          playState == PlayStateSessionOver ||
+          playState == PlayStateNetworkError ||
+          playState == PlayStateServerError ) {
+        context.JK.ListenBroadcastCurrentlyPlaying = null;
+      }
+
       $parent.triggerHandler('statechange.listenBroadcast', {state: playState, retryCount: retryAttempts});
     }
 
@@ -302,10 +323,13 @@
 
     this.play = play;
     this.pause = pause;
+    this.forcedPause = forcedPause; // meant only be called by this code; not from external
 
     return this;
   }
 
+  context.JK.ListenBroadcastCurrentlyPlaying = null;
+
   $.fn.listenBroadcast = function(options) {
     new context.JK.ListenBroadcast(this, options);
   }

web/app/assets/stylesheets/web/welcome.css.scss

@@ -88,6 +88,9 @@ body.web {
     .recording-current {
       top:8px;
     }
+    .session-duration {
+      top:8px;
+    }
 
     .recording-controls, .session-controls {
       margin-top:0px;

web/app/views/users/_feed_music_session.html.haml

@@ -25,7 +25,7 @@
       .session-status
         = feed_item.is_over? ? 'SESSION ENDED' : 'SESSION IN PROGRESS'
       / current playback time
-      = session_duration(feed_item, class: 'recording-current')
+      = session_duration(feed_item, class: 'session-duration recording-current', 'data-created-at' => feed_item.created_at)
     / end recording play controls
     / genre and social
     .left.small