Merge pull request #34 from TheElixZammuto/web-ui-fixes

UI Web Fixes

assets/web/config.html

@@ -85,7 +85,7 @@
           <option value="ds4">DS4 (PS4)</option>
           <option value="x360">X360 (Xbox 360)</option>
         </select>
-        <div class="form-text">Automatically configure port forwarding</div>
+        <div class="form-text">Choose which type of gamepad to Emulate on the host</div>
       </div>
       <!--Ping Timeout-->
       <div class="mb-3">
@@ -186,7 +186,8 @@
           The display modes advertised by Sunshine<br />
           Some versions of Moonlight, such as Moonlight-nx (Switch), rely on
           this list to ensure that the requested resolutions and fps are
-          supported.
+          supported.<br>
+          This setting does <b>not</b> change how the screen stream is sent to Moonlight
         </div>
       </div>
       <!-- Mapping Key AltRight to Key Windows -->
@@ -628,6 +629,9 @@
           placeholder="superfast"
           v-model="config.sw_preset"
         />
+        <div class="form-text">
+          Available Values: ultrafast, superfast, veryfast, faster, fast, medium, slow, slower, veryslow
+        </div>
       </div>
       <div class="mb-3">
         <label for="sw_tune" class="form-label">SW Tune</label>
@@ -637,6 +641,15 @@
           placeholder="zerolatency"
           v-model="config.sw_tune"
         />
+        <div class="form-text">
+          Available Tune settings: <br>
+          film - use for high quality movie content; lowers deblocking<br>
+          animation - good for cartoons; uses higher deblocking and more reference frames<br>
+          grain - preserves the grain structure in old, grainy film material<br>
+          stillimage - good for slideshow-like content<br>
+          fastdecode - allows faster decoding by disabling certain filters<br>
+          zerolatency - good for fast encoding and low-latency streaming<br>
+        </div>
       </div>
     </div>
     <!--Nvidia Encoder Settings-->

assets/web/header.html

@@ -54,3 +54,14 @@
     </nav>
   </body>
 </html>
+
+<script>
+  let el = document.querySelector("a[href='"+document.location.pathname+"']");
+  if(el)el.classList.add("active")
+</script>
+
+<style>
+  .nav-link.active {
+    font-weight: 500;
+  }
+</style>

assets/web/pin.html

@@ -28,14 +28,14 @@
     fetch("/api/pin", { method: "POST", body: b })
       .then((response) => response.json())
       .then((response) => {
-        if (response.status) {
+        if (response.status.toString().toLowerCase() === "true") {
           document.querySelector(
             "#status"
           ).innerHTML = `<div class="alert alert-success" role="alert">Success! Please check Moonlight to continue</div>`;
         } else {
           document.querySelector(
             "#status"
-          ).innerHTML = `<div class="alert alert-danger" role="alert">PIN does not match, please check if it's typed correctly</div>`;
+          ).innerHTML = `<div class="alert alert-danger" role="alert">Pairing Failed: Check if the PIN is typed correctly</div>`;
         }
       });
   });

assets/web/welcome.html

@@ -2,12 +2,11 @@
   <header>
     <h1 class="mb-0">Welcome to Sunshine!</h1>
     <p class="mb-0 align-self-start">
-      Before Getting Started, write down below these credentials
+      Before Getting Started, we need you to make a new username and password for accessing the Web UI.
     </p>
   </header>
   <div class="alert alert-warning">
-    These Credentials down below are needed to access the rest of the
+    The credentials below are needed to access Sunshine's Web UI.<br />
-    application.<br />
     Keep them safe, since <b>you will never see them again!</b>
   </div>
   <form @submit.prevent="save">