Initialize GUI before attempting to connect to Mopidy.

README.rst

@@ -118,6 +118,7 @@ v2.4.0 (UNRELEASED)
 - Now shows correct hostname information in loader popup. (Fixes: `#209 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/209>`_).
 - Reset 'Now Playing' info when the last track in the tracklist is deleted. Fixes an issue where info of the last song played would be displayed even after the queue had been cleared.
 - Use correct icons for folders, audio, and other files when browsing local files.
+- Now initializes the GUI properly, even if the user is offline or the Mopidy server cannot be reached.
 
 v2.3.0 (2016-05-15)
 -------------------

mopidy_musicbox_webclient/static/index.html

@@ -295,7 +295,7 @@
 
 <div data-role="header" data-tap-toggle="false" id="header" data-position="fixed" class="header-breakpoint headerbtn">
     <a id="headermenubtn" href="#panel"><i class="fa fa-align-justify"></i></a>
-    <h1 id="contentHeadline">Initializing...</h1>
+    <h1 id="contentHeadline"></h1>
     <a id="headersearchbtn" href="#" onclick="switchContent('search' ); return false;" title="Search"><i class="fa fa-search"></i></a>
 </div>
 <!-- /header -->

mopidy_musicbox_webclient/static/js/gui.js

@@ -465,6 +465,7 @@ function locationHashChanged () {
  * initialize software *
  ***********************/
 $(document).ready(function (event) {
+    showOffline(true)
     // check for websockets
     if (!window.WebSocket) {
         switchContent('playlists')
@@ -476,40 +477,13 @@ $(document).ready(function (event) {
     $('.ui-panel-dismiss').on('tap', function () { $('#panel').panel('close') })
     // end of workaround
 
-    $(window).hashchange()
-
-    // Connect to server
-    var websocketUrl = $(document.body).data('websocket-url')
-    if (websocketUrl) {
-        try {
-            mopidy = new Mopidy({
-                webSocketUrl: websocketUrl,
-                callingConvention: 'by-position-or-by-name'
-            })
-        } catch (e) {
-            showOffline(true)
-        }
-    } else {
-        try {
-            mopidy = new Mopidy({callingConvention: 'by-position-or-by-name'})
-        } catch (e) {
-            showOffline(true)
-        }
-    }
-
-    // initialize events
-    initSocketevents()
-
-    syncedProgressTimer = new SyncedProgressTimer(8, mopidy)
-
-    resetSong()
-
+    window.onhashchange = locationHashChanged
     if (location.hash.length < 2) {
         switchContent('home')
     }
+    $(window).hashchange()
 
     initgui = false
-    window.onhashchange = locationHashChanged
 
     // only show backbutton if in UIWebview
     if (window.navigator.standalone) {
@@ -518,10 +492,6 @@ $(document).ready(function (event) {
         $('#btback').hide()
     }
 
-    $(window).resize(function () {
-        resizeMb()
-    })
-
     // navigation temporary, rewrite this!
     $('#songinfo').click(function () {
         return switchContent('nowPlaying')
@@ -622,6 +592,24 @@ $(document).ready(function (event) {
     $('#volumeslider').on('slidestart', function () { volumeSliding = true })
     $('#volumeslider').on('slidestop', function () { volumeSliding = false })
     $('#volumeslider').on('change', function () { controls.doVolume($(this).val()) })
+
+    $(window).resize(function () {
+        resizeMb()
+    })
+    resizeMb()
+
+    // Connect to server
+    var websocketUrl = $(document.body).data('websocket-url')
+    var connectOptions = {callingConvention: 'by-position-or-by-name'}
+    if (websocketUrl) {
+        connectOptions['webSocketUrl'] = websocketUrl
+    }
+
+    mopidy = new Mopidy(connectOptions)
+    // initialize events
+    initSocketevents()
+    syncedProgressTimer = new SyncedProgressTimer(8, mopidy)
+    resetSong()
 })
 
 function updatePlayIcons (uri, tlid, popupMenuIcon) {

mopidy_musicbox_webclient/static/mb.appcache

@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# 2017-01-14:v4
+# 2017-01-14:v5
 
 NETWORK:
 *