Merge pull request RocketChat#372 from RocketChat/feature/reload

rodrigok · web-flow · commit a446a5ecea47 · 2017-03-02T09:53:15.000-03:00
Show reload screen when server fails to load
diff --git a/src/public/images/error.png b/src/public/images/error.png
diff --git a/src/public/loading-error.html b/src/public/loading-error.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html style="height: 100%;">
+<head>
+	<title></title>
+	<meta charset="utf-8" />
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+	<link rel="stylesheet" type="text/css" href="../stylesheets/main.css">
+</head>
+<body style="height: 100%;">
+	<section style="text-align: center;background-color: #022439;height:100%;">
+        <img src="./images/error.png" />
+        <div class="load-fail" id="load-fail">
+            <h2 style="color:white">Server Failed to Load</h2>
+            <div class="loading-animation" id="loading" style="display:none;">
+                <div class="bounce1"></div>
+                <div class="bounce2"></div>
+                <div class="bounce3"></div>
+            </div>
+            <button class="button primary" id="reload">Reload</button>
+        </div>
+	</section>
+</body>
+</html>
diff --git a/src/public/preload.js b/src/public/preload.js
@@ -45,6 +45,12 @@ window.onload = function () {
     }
 
     $(document).on('click', 'a', checkExternalUrl);
+
+    $('#reload').click(function () {
+        ipcRenderer.sendToHost('reload-server');
+        $(this).hide();
+        $(this).parent().find('.loading-animation').show();
+    });
 };
 
 // Prevent redirect to url when dragging in
diff --git a/src/scripts/start.js b/src/scripts/start.js
@@ -158,6 +158,7 @@ export var start = function () {
     });
 
     $('.add-server').on('click', function () {
+        webview.loaded();
         servers.clearActive();
     });
 
diff --git a/src/scripts/webview.js b/src/scripts/webview.js
@@ -1,7 +1,7 @@
 import { EventEmitter } from 'events';
 import servers from './servers';
 import sidebar from './sidebar';
-import { shell, desktopCapturer, ipcRenderer } from 'electron';
+import { desktopCapturer, ipcRenderer } from 'electron';
 
 class WebView extends EventEmitter {
     constructor () {
@@ -44,12 +44,15 @@ class WebView extends EventEmitter {
     }
 
     loaded () {
-        var loading = document.querySelector('#loading');
-        var form = document.querySelector('#login-card');
-        var footer = document.querySelector('footer');
-        loading.style.display = 'none';
-        form.style.display = 'block';
-        footer.style.display = 'block';
+        document.querySelector('#loading').style.display = 'none';
+        document.querySelector('#login-card').style.display = 'block';
+        document.querySelector('footer').style.display = 'block';
+    }
+
+    loading () {
+        document.querySelector('#loading').style.display = 'block';
+        document.querySelector('#login-card').style.display = 'none';
+        document.querySelector('footer').style.display = 'none';
     }
 
     add (host) {
@@ -98,12 +101,21 @@ class WebView extends EventEmitter {
                         ipcRenderer.send('screenshare', sources);
                     });
                     break;
+                case 'reload-server':
+                    const active = this.getActive();
+                    const server = active.getAttribute('server');
+                    this.loading();
+                    active.loadURL(server);
+                    break;
             }
         });
 
         webviewObj.addEventListener('dom-ready', () => {
             this.emit('dom-ready', host.url);
-            this.loaded(host);
+        });
+
+        webviewObj.addEventListener('did-fail-load', () => {
+            webviewObj.loadURL('file://' + __dirname + '/loading-error.html');
         });
 
         this.webviewParentElement.appendChild(webviewObj);
