✨ Check Connection

assets/css/styles.css

@@ -64,7 +64,7 @@ html, body {
     color: #AAA;
 }
 
-.center-loading {
+.center-flex {
     width: 100vw; 
     min-height: 100vh; 
     text-align: center; 
@@ -74,8 +74,6 @@ html, body {
 }
 
 .is-offline {
-    bottom: 20px;
-    position: fixed;
     width: 100%;
     text-align: center;
     color: #EEE;

index.html

@@ -29,8 +29,9 @@
 
     </div>
 
-    <div class="center-loading">
-      <div class="preloader-wrapper big active">
+    <div class="center-flex">
+
+      <div id="center-loading" class="preloader-wrapper big active">
         <div class="spinner-layer spinner-blue-only">
           <div class="circle-clipper left">
             <div class="circle"></div>
@@ -41,9 +42,10 @@
           </div>
         </div>
       </div>
-    </div>
 
-    <div id="is-offline" class="hide is-offline"> <i class="material-icons">signal_wifi_off</i> </div>
+      <div id="is-offline" class="hide is-offline"> <i class="material-icons medium">signal_wifi_off</i> </div>
+
+    </div>
 
     <script>
       require('./renderer.js');

main.js

@@ -36,6 +36,7 @@ let lastSongAuthor;
 let likeStatus;
 let doublePressPlayPause;
 let lastConnectionStatusIsOnline = false;
+let hasLoadedUrl;
 
 let mainWindowUrl = 'https://music.youtube.com';
 
@@ -113,32 +114,63 @@ function createWindow() {
     width: mainWindowSize.width - 2,
     height: mainWindowSize.height - 30
   });
-  view.webContents.loadURL( mainWindowUrl );
 
   if (store.get('settings-continue-where-left-of') && store.get('window-url')) {
     mainWindowUrl = store.get('window-url');
   }
+
+  view.webContents.loadURL( mainWindowUrl );
 
   async function checkConnection() {
+    /**
+     * Check if is online
+     */ 
     var is_online = await isOnline();
+
+    /**
+     * If online, consider that already loaded the url
+     * If offline, mark the variable that the url was not read
+     */
+    if (hasLoadedUrl == undefined) {
+        hasLoadedUrl = is_online;
+    }
+
+    /**
+     * Emmit is online or offline to render.js
+     */
     mainWindow.send( 'is-online', is_online );
 
+    /**
+     * If online and lastConnectionStatusIsOnline is false, set BrowserView and check hasLoadedUrl to loadURL 
+     * else set BrowserView to null to show Loading circle and show icon that not have connection
+     */
     if (is_online == true) {
         if (lastConnectionStatusIsOnline == false) {
             mainWindow.setBrowserView( view );
-            view.webContents.loadURL( mainWindowUrl );
+            if ( hasLoadedUrl == false ) {
+                view.webContents.loadURL( mainWindowUrl );
+                hasLoadedUrl = true;
+            }
         }
     } else {
-        mainWindow.setBrowserView( null );
+        if ( lastConnectionStatusIsOnline == true ) {
+            mainWindow.setBrowserView( null );
+            mediaControl.createThumbar(mainWindow, 'play', likeStatus);
+            mediaControl.stopTrack(view);
+        }
     }
 
     lastConnectionStatusIsOnline = is_online;
-}
+
+    /**
+     * Check connection every 30 seconds
+     */
+    setTimeout( function() {
+        checkConnection();
+    }, 10 * 1000 );
+  }
 
-checkConnection();
-setInterval( function() {
-    checkConnection();
-}, 10 * 1000 );
+  checkConnection();
 
   // Open the DevTools.
   // mainWindow.webContents.openDevTools({ mode: 'detach' });

renderer.js

@@ -11,8 +11,10 @@ ipc.on( 'is-online', function( e, isOnline ) {
 
     if ( isOnline ) {
         document.getElementById( 'is-offline' ).classList.add( 'hide' );
+        document.getElementById( 'center-loading' ).classList.remove( 'hide' );
     } else {
         document.getElementById( 'is-offline' ).classList.remove( 'hide' );
+        document.getElementById( 'center-loading' ).classList.add( 'hide' );
     }
 
 } );