diff --git a/index.html b/index.html
index 96609bd..794503c 100644
--- a/index.html
+++ b/index.html
@@ -65,8 +65,9 @@
-
-
+
+
+
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..f928cff 100644
--- a/static/js/messages.js
+++ b/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');
}
}
}
\ No newline at end of file