Merge branch 'master' of github.com:moonlight-stream/moonlight-chrome

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>

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;
 }

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

static/js/messages.js

@@ -21,10 +21,13 @@ 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();
             });
+        } else if(msg.data === 'Connection Established') {
+            $('#loadingSpinner').css('display', 'none');
         }
     }
 }