Status bar for the snowflake console, instead of cluttered log messages during

polling

proxy/broker.coffee

@@ -53,12 +53,12 @@ class Broker
           when STATUS_OK
             fulfill xhr.responseText  # Should contain offer.
           when STATUS_GATEWAY_TIMEOUT
-            reject 'Timed out waiting for a client to serve. Retrying...'
+            reject 'Timed out waiting for a client to serve.'
           else
             log 'Broker ERROR: Unexpected ' + xhr.status +
                 ' - ' + xhr.statusText
+            Status.set ' failure. Please refresh.'
       xhr.send @id
-      log @id + " - polling for client offer..."
 
   sendAnswer: (answer) ->
     log @id + ' - Sending answer back to broker...\n'
@@ -81,4 +81,5 @@ class Broker
         else
           log 'Broker ERROR: Unexpected ' + xhr.status +
               ' - ' + xhr.statusText
+          Status.set ' failure. Please refresh.'
     xhr.send JSON.stringify(answer)

proxy/proxypair.coffee

@@ -65,6 +65,7 @@ class ProxyPair
       @connectRelay()
     channel.onclose = ->
       log 'Data channel closed.'
+      Status.set 'disconnected.'
       snowflake.state = MODE.INIT
       $msglog.className = ''
       # Change this for multiplexing.
@@ -79,6 +80,7 @@ class ProxyPair
     @relay.label = 'websocket-relay'
     @relay.onopen = =>
       log '\nRelay ' + @relay.label + ' connected!'
+      Status.set 'connected'
     @relay.onclose = @onClose
     @relay.onerror = @onError
     @relay.onmessage = @onRelayToClientMessage
@@ -86,7 +88,7 @@ class ProxyPair
   # WebRTC --> websocket
   onClientToRelayMessage: (msg) =>
     line = recv = msg.data
-    console.log msg
+    if DEBUG
       # Go sends only raw bytes...
       if '[object ArrayBuffer]' == recv.toString()
         bytes = new Uint8Array recv

proxy/snowflake.coffee

@@ -60,6 +60,7 @@ class Snowflake
   badge: null
   $badge: null
   state: MODE.INIT
+  retries: 0
 
   constructor: (@broker) ->
     if HEADLESS
@@ -80,6 +81,7 @@ class Snowflake
     else
       @rateLimit = new BucketRateLimit(rateLimitBytes * RATE_LIMIT_HISTORY,
                                        RATE_LIMIT_HISTORY)
+    @retries = 0
 
   # TODO: Should potentially fetch from broker later.
   # Set the target relay address spec, which is expected to be a websocket
@@ -97,16 +99,30 @@ class Snowflake
       @makeProxyPair @relayAddr
     @proxyPair = @proxyPairs[0]
     return if COPY_PASTE_ENABLED
+    timer = null
+    # Temporary countdown.
+    countdown = (msg, sec) ->
+      Status.set msg + ' (Retrying in ' + sec + ' seconds...)'
+      sec--
+      if sec >= 0
+        setTimeout((-> countdown(msg, sec)), 1000)
+      else
+        findClients()
     # Poll broker for clients.
     findClients = =>
+      clearTimeout timer
+      msg = 'polling for client... '
+      msg += '[retries: ' + @retries + ']' if @retries > 0
+      Status.set msg
       recv = broker.getClientOffer()
+      @retries++
       recv.then (desc) =>
         offer = JSON.parse desc
         log 'Received:\n\n' + offer.sdp + '\n'
         @receiveOffer offer
       , (err) ->
-        log err
-        setTimeout(findClients, DEFAULT_BROKER_POLL_INTERVAL)
+        countdown(err, DEFAULT_BROKER_POLL_INTERVAL / 1000)
+
     findClients()
 
   # Receive an SDP offer from some client assigned by the Broker.
@@ -155,6 +171,7 @@ class Snowflake
   reset: ->
     @cease()
     log '\nSnowflake resetting...'
+    @retries = 0
     @beginWebRTC()
 
 snowflake = null
@@ -168,6 +185,7 @@ broker = null
 $msglog = null
 $send = null
 $input = null
+$status = null
 
 Interface =
   # Local input from keyboard into message window.
@@ -212,7 +230,12 @@ log = (msg) ->  # Log to the message window.
     $msglog.value += msg + '\n'
     $msglog.scrollTop = $msglog.scrollHeight
 
+# Status bar
+Status =
+  set: (msg) -> $status.innerHTML = 'Status: ' + msg
+
 init = ->
+  $status = document.getElementById('status')
   $msglog = document.getElementById('msglog')
   $msglog.value = ''
 

proxy/static/snowflake.html

@@ -62,10 +62,19 @@
     border: none; // box-shadow: 0 2px 5px #000;
   }
   #send:hover { background-color: #636; }
+  #status {
+    background-color: rgba(0,0,0,0.9);  color: #999;
+    margin: 8px 0; padding: 8px 1em; cursor: default;
+    font-size: 12px;
+    text-align: left;
+  }
   </style>
 </head>
 <body>
   <div class="chatarea">
+    <div id="status">
+      Timeout...
+    </div>
     <textarea id="msglog" readonly>
     </textarea>
     <div class="inputarea">