From 8f0b9110316af35ebfa48a76eeb6191c0ff80af8 Mon Sep 17 00:00:00 2001
From: "R. Aidan Campbell" <aidan.campbell@gmail.com>
Date: Mon, 9 May 2016 13:15:49 -0400
Subject: [PATCH 1/2] Indeterminate loading bar is shown while connecting to
 stream - This closes #37

---
 index.html            | 5 +++--
 static/css/style.css  | 9 +++++++++
 static/js/index.js    | 6 ++++--
 static/js/messages.js | 2 ++
 4 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 96609bd..794503c 100644
--- a/index.html
+++ b/index.html
@@ -65,8 +65,9 @@
                 <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" id="quitGameButton">Quit Current Game</button>
             </div>
 
-            <div id="listener">
-            </div>
+            <div id="listener"></div> <!-- NaCl module placeholder.  NaCl gets thrown into here -->
+
+            <div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
         </main>
     </div>
     <script defer src="static/js/jquery-2.2.0.min.js"></script>
diff --git a/static/css/style.css b/static/css/style.css
index bf8c313..77567e7 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -18,6 +18,15 @@
     padding: 20px 24px 24px 24px;
     color: rgba(0,0,0, 0.54); 
 }
+#loadingSpinner {
+    display: none;
+    z-index: 1;
+    position: fixed;
+    left: 50%;
+    bottom: 20px;
+    transform: translate(-50%, -50%);
+    margin: 0 auto;
+}
 main {
     padding: 50px 100px;
 }
diff --git a/static/js/index.js b/static/js/index.js
index 66ec881..07fbe67 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -240,7 +240,7 @@ function showApps() {
 function showAppsMode() {
     console.log("entering show apps mode.");
     $(".mdl-layout__header").show();
-    $("#main-content").children().not("#listener").show();
+    $("#main-content").children().not("#listener, #loadingSpinner").show();
     $("#main-content").removeClass("fullscreen");
     $("#listener").removeClass("fullscreen");
     $("body").css('backgroundColor', 'white');
@@ -345,13 +345,15 @@ function continueReplaceApp() {
 function playGameMode() {
     console.log("entering play game mode");
     $(".mdl-layout__header").hide();
-    $("#main-content").children().not("#listener").hide();
+    $("#main-content").children().not("#listener, #loadingSpinner").hide();
     $("#main-content").addClass("fullscreen");
     $("#listener").addClass("fullscreen");
     fullscreenNaclModule();
     $("body").css('backgroundColor', 'black');
 
     chrome.app.window.current().fullscreen();
+    $('#loadingSpinner').css('display', 'inline-block');
+
 }
 
 // Maximize the size of the nacl module by scaling and resizing appropriately
diff --git a/static/js/messages.js b/static/js/messages.js
index 9360179..e872747 100644
--- a/static/js/messages.js
+++ b/static/js/messages.js
@@ -25,6 +25,8 @@ function handleMessage(msg) {
                 showAppsMode();
                 chrome.app.window.current().restore();
             });
+        } else if(msg.data === 'Connection Established') {
+            $('#loadingSpinner').css('display', 'none');
         }
     }
 }
\ No newline at end of file

From 09ea7d4b8432586b7daf9397a4e80348e3c3fc27 Mon Sep 17 00:00:00 2001
From: "R. Aidan Campbell" <aidan.campbell@gmail.com>
Date: Mon, 9 May 2016 13:20:08 -0400
Subject: [PATCH 2/2] Clean the loading bar if the stream fails

---
 static/js/messages.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/js/messages.js b/static/js/messages.js
index e872747..f928cff 100644
--- a/static/js/messages.js
+++ b/static/js/messages.js
@@ -21,6 +21,7 @@ function handleMessage(msg) {
     } else {  // else, it's just info, or an event
         console.log(msg.data);
         if(msg.data === 'streamTerminated') {  // if it's a recognized event, notify the appropriate function
+            $('#loadingSpinner').css('display', 'none'); // This is a fallback for RTSP handshake failing, which immediately terminates the stream.            
             api.refreshServerInfo().then(function (ret) {
                 showAppsMode();
                 chrome.app.window.current().restore();