Added local address option

2 files changed, 40 insertions, 5 deletions

diff --git a/index.html b/index.html
index 3eee75b..0430d24 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,7 @@
             <a id="titleLogo" class="navbar-brand" href="javascript:window.location.reload()" data-toggle="tooltip" data-placement="bottom" title="Home">
                 <img class="titleImage" src="images/Logo_Title_Large.png">
             </a>
-            <a id="helpAboutIcon" href="javascript:void(0)" onclick="$('#aboutModal').modal();" data-toggle="tooltip" data-placement="bottom" title="Help & About">
+            <a id="helpAboutIcon" class="helpButtons" href="javascript:void(0)" onclick="$('#aboutModal').modal();" data-toggle="tooltip" data-placement="bottom" title="Help & About">
                 <i class="far fa-question-circle" style="color: #e5a00d; font-size: 1.5em"></i>
             </a>
         </div>
@@ -223,7 +223,17 @@
                                                 <i id="confirmForgetPin" class="fas fa-check" style="color: #28a745; font-size: 1.5em"></i>
                                             </small>
                                         </p>
+                                        <div class="form-group form-check">
+                                            <input type="checkbox" class="form-check-input" id="connectViaLocalAddress" onchange="useLocalAddress(this)">
+                                            <label class="form-check-label" for="connectViaLocalAddress">Connect using local IP address</label>
+                                            <a id="localAddressButton" class="helpButtons" href="javascript:void(0)" style="margin-left:0.5em" data-toggle="tooltip" data-placement="bottom"
+                                            title="You must be on the same network as the Plex Server.
+                                            Try this if you are having issues loading the libraries.">
+                                                <i class="far fa-question-circle" style="color: #e5a00d; font-size: 1em"></i>
+                                            </a>
+                                        </div>
                                     </div>
+                                    
                                 </div>
                                 <!-- / PIN AUTHENTICATION -->
                                 <!-- URL / TOKEN AUTHENTICATION -->
diff --git a/js/main.js b/js/main.js
index 350cfd5..6bef51a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -27,7 +27,7 @@ $(document).ready(() => {
     }
 
     // Enable Tooltips
-    $('#helpAboutIcon, #titleLogo').tooltip();
+    $('.helpButtons, #titleLogo').tooltip();
 
     // Enable history tracking for tabs
     $('a[data-toggle="tab"]').historyTabs();
@@ -82,6 +82,12 @@ $(document).ready(() => {
         toggleAuthPages(this.value);
     });
 
+    if (localStorage.useLocalAddress == "true") {
+        $('#connectViaLocalAddress').prop('checked', true);
+    } else {
+        $('#connectViaLocalAddress').prop('checked', false);
+    }
+
     if (!localStorage.isPinAuth) {
         // Not using PIN auth, so must be using url / token
         if (localStorage.plexUrl && localStorage.plexUrl !== "") {
@@ -195,6 +201,17 @@ function listenForValidPincode (pinId) {
     }
 }
 
+// Called when the "connect using local IP" checkbox is toggled
+// Refreshes the page and updates the variable for whether it should use the local address or not
+function useLocalAddress (checkbox) {
+    if (checkbox.checked) {
+        localStorage.useLocalAddress = "true";
+    } else {
+        localStorage.useLocalAddress = "false";
+    }
+    window.location.reload();
+}
+
 function getServers () {
     $.ajax({
         "url": `https://plex.tv/pms/servers.xml?X-Plex-Client-Identifier=${clientIdentifier}`,
@@ -208,17 +225,24 @@ function getServers () {
                 displayServers(servers);
                 // Add server info to the list
                 for (let i = 0; i < servers.length; i++) {
+                    let addressToUse = "";
+                    // Check whether to use local address or public address
+                    if ($('#connectViaLocalAddress').prop('checked')) {
+                        addressToUse = $(servers[i]).attr("localAddresses").split(',')[0];
+                    } else {
+                        addressToUse = $(servers[i]).attr("address");
+                    }
                     serverList.push({
                         name: $(servers[i]).attr("name"),
                         accessToken: $(servers[i]).attr("accessToken"),
-                        address: $(servers[i]).attr("address"),
+                        address: addressToUse,
                         port: $(servers[i]).attr("port")
                     });
                 }
             } else {
                 plexToken = $(servers[0]).attr("accessToken");
-                plexUrl = `http://${$(servers[0]).attr("address")}:${$(servers[0]).attr("port")}`;
-                connectToPlex();
+                plexUrl = `http://${addressToUse}:${$(servers[0]).attr("port")}`;
+                //connectToPlex();
             }
         },
         "error": (data) => {
@@ -313,6 +337,7 @@ function forgetPinDetails() {
     localStorage.removeItem('isPinAuth');
     localStorage.removeItem('pinAuthToken');
     localStorage.removeItem('clientIdentifier');
+    localStorage.removeItem('useLocalAddress');
     window.location.reload();
 }