Navigation improvements, refactoring, and bug fixed

Author: brightcraft

wasm/platform/index.js

@@ -7,6 +7,7 @@ var api; // The `api` should only be set if we're in a host-specific screen, on
 var isPlatformVer = parseFloat(tizen.systeminfo.getCapability("http://tizen.org/feature/platform.version")); // Retrieve the Tizen platform version
 var isInGame = false; // Flag indicating whether the game has started, initial value is false
 var isDialogOpen = false; // Flag indicating whether the dialog is open, initial value is false
+var isGamepadActive = false; // Flag indicating whether the gamepad input is active, initial value is false
 var isClickPrevented = false; // Flag indicating whether the click event should be prevented, initial value is false
 var resFpsWarning = false; // Flag indicating whether the video resolution and frame rate warning message has shown, initial value is false
 var bitrateWarning = false; // Flag indicating whether the video bitrate warning message has shown, initial value is false
@@ -80,33 +81,41 @@ function attachListeners() {
 
   Controller.startWatching();
   window.addEventListener('gamepadinputchanged', (e) => {
+    isGamepadActive = true;
     const changes = e.detail.changes;
     // Iterate through each change in the gamepad input
     changes.forEach((change) => {
       const { type, index, pressed, value } = change;
       if (type === 'button') {
         // Handle button mapping
         const buttonMapping = {
-          0: () => Navigation.accept(),
-          1: () => Navigation.back(),
-          8: () => Navigation.press(),
-          9: () => Navigation.switch(),
+          0: () => delayedNavigation(() => Navigation.accept()),
+          1: () => delayedNavigation(() => Navigation.back()),
+          8: () => delayedNavigation(() => Navigation.move()),
+        };
+        // Handle D-Pad mapping
+        const dPadMapping = {
           12: () => Navigation.up(),
           13: () => Navigation.down(),
           14: () => Navigation.left(),
           15: () => Navigation.right(),
         };
-        // Handle button press
+        // Handle button presses
         if (pressed) {
           if (buttonMapping[index]) {
             buttonMapping[index]();
-            // Set repeat action and timeout to the mapped button
-            repeatAction = buttonMapping[index];
+            // Clear repeat action and timeout for non-navigation buttons
+            repeatAction = null;
+            clearTimeout(repeatTimeout);
+          } else if (dPadMapping[index]) {
+            dPadMapping[index]();
+            // Set repeat action and timeout to the mapped D-Pad button
+            repeatAction = dPadMapping[index];
             lastInvokeTime = Date.now();
             repeatTimeout = setTimeout(() => requestAnimationFrame(repeatActionHandler), REPEAT_DELAY);
           }
         } else {
-          // Clear repeat action and timeout if button is released
+          // Clear repeat action and timeout when button is released
           repeatAction = null;
           clearTimeout(repeatTimeout);
         }
@@ -118,16 +127,16 @@ function attachListeners() {
           1: (value) => value < -ACTION_THRESHOLD ? (delayedNavigation(() => Navigation.up()), () => Navigation.up()) : 
             value > ACTION_THRESHOLD ? (delayedNavigation(() => Navigation.down()), () => Navigation.down()) : null,
         };
-        // Handle axis value
+        // Handle axis movement
         if (axisMapping[index]) {
           const axisValue = axisMapping[index](value);
           if (axisValue && Math.abs(value) > ACTION_THRESHOLD) {
-            // Set repeat action and timeout to the mapped axis
+            // Set repeat action and timeout to the mapped axis direction
             repeatAction = axisValue;
             lastInvokeTime = Date.now();
             repeatTimeout = setTimeout(() => requestAnimationFrame(repeatActionHandler), REPEAT_DELAY);
           } else {
-            // Clear repeat action and timeout if axis is released
+            // Clear repeat action and timeout when axis is neutral
             repeatAction = null;
             clearTimeout(repeatTimeout);
           }
@@ -138,6 +147,9 @@ function attachListeners() {
 }
 
 function changeUiModeForWasmLoad() {
+  // Stop navigation before showing the loading screen
+  Navigation.stop();
+
   $('#main-header').hide();
   $('#main-header').children().hide();
   $('#main-content').children().not('#listener, #wasmSpinner').hide();
@@ -292,6 +304,9 @@ function showHostsMode() {
 
 // Show the Hosts grid
 function showHosts() {
+  // Stop navigation before showing the loading screen
+  Navigation.stop();
+
   // Hide the main header and content before showing a loading screen
   $('#main-header').children().hide();
   $('#main-header').css({'backgroundColor': 'transparent', 'boxShadow': 'none'});
@@ -315,7 +330,7 @@ function showHosts() {
   }, 500);
 
   // Set focus to current item and/or scroll to the current host row
-  setTimeout(() => Navigation.switch(), 500);
+  setTimeout(() => Navigation.restore(), 500);
 }
 
 function restoreUiAfterWasmLoad() {
@@ -328,7 +343,7 @@ function restoreUiAfterWasmLoad() {
   Navigation.push(Views.Hosts);
   showHostsMode();
   // Set focus to current item and/or scroll to the current host row
-  setTimeout(() => Navigation.switch(), 100);
+  setTimeout(() => Navigation.restore(), 100);
 
   // Find mDNS host discovered using ServiceFinder (network service discovery)
   // findNvService(function(finder, opt_error) {
@@ -386,7 +401,7 @@ function hostChosen(host) {
       Navigation.push(Views.Apps);
       setTimeout(() => {
         // Scroll to the current game row
-        Navigation.switch();
+        Navigation.restore();
         // Switch to Apps view
         Navigation.change(Views.Apps);
       }, 1500);
@@ -400,7 +415,7 @@ function hostChosen(host) {
     Navigation.push(Views.Apps);
     setTimeout(() => {
       // Scroll to the current game row
-      Navigation.switch();
+      Navigation.restore();
       // Switch to Apps view
       Navigation.change(Views.Apps);
     }, 1500);
@@ -474,15 +489,8 @@ function addHostDialog() {
   addHostDialog.showModal();
   isDialogOpen = true;
   Navigation.push(Views.AddHostDialog);
-
-  // Checks if the IP address field mode switch is checked
-  if ($('#ipAddressFieldModeSwitch').prop('checked')) {
-    // Remove focus from any currently focused element
-    document.activeElement.blur();
-  } else {
-    // Set focus to the currently active element
-    document.activeElement.focus();
-  }
+  // Remove focus from any current active element
+  document.activeElement.blur();
 
   // Cancel the operation if the Cancel button is pressed
   $('#cancelAddHost').off('click');
@@ -507,11 +515,11 @@ function addHostDialog() {
     setTimeout(() => {
       // Add disabled state after 2 seconds
       $('#continueAddHost').addClass('mdl-button--disabled').prop('disabled', true);
-      Navigation.switch();
+      Navigation.restore();
       // Re-enable the Continue button after 12 seconds
       setTimeout(() => {
         $('#continueAddHost').removeClass('mdl-button--disabled').prop('disabled', false);
-        Navigation.switch();
+        Navigation.restore();
       }, 12000);
     }, 2000);
     // Get the IP address value from the input field
@@ -890,7 +898,7 @@ function hostMenuDialog(host) {
   hostMenuDialog[0].showModal();
   isDialogOpen = true;
   Navigation.push(Views.HostMenuDialog, host.hostname);
-  setTimeout(() => Navigation.switch(), 5);
+  setTimeout(() => Navigation.restore(), 100);
 }
 
 // Show a confirmation with the Delete Host dialog before removing the host object
@@ -971,7 +979,7 @@ function deleteAllHostsDialog() {
       deleteHostDialog.close();
       isDialogOpen = false;
       Navigation.pop();
-      Navigation.switch();
+      Navigation.restore();
     });
 
     // Remove all existing hosts if the Continue button is pressed
@@ -996,7 +1004,7 @@ function deleteAllHostsDialog() {
       deleteHostDialog.close();
       isDialogOpen = false;
       Navigation.pop();
-      Navigation.switch();
+      Navigation.restore();
     });
   }
 }
@@ -1076,7 +1084,7 @@ function hostDetailsDialog(host) {
   hostDetailsDialog[0].showModal();
   isDialogOpen = true;
   Navigation.push(Views.HostDetailsDialog);
-  setTimeout(() => Navigation.switch(), 5);
+  setTimeout(() => Navigation.restore(), 100);
 }
 
 // Show the Moonlight Support dialog
@@ -1099,7 +1107,7 @@ function appSupportDialog() {
     appSupportDialog.close();
     isDialogOpen = false;
     Navigation.pop();
-    Navigation.switch();
+    Navigation.restore();
   });
 }
 
@@ -1130,6 +1138,9 @@ function showSettingsMode() {
 
 // Show the Settings list
 function showSettings() {
+  // Stop navigation before showing the loading screen
+  Navigation.stop();
+
   // Hide the main header and content before showing a loading screen
   $('#main-header').children().hide();
   $('#main-header').css({'backgroundColor': 'transparent', 'boxShadow': 'none'});
@@ -1159,19 +1170,14 @@ function showSettings() {
   }, 500);
 }
 
-// Reset the current settings view by clearing the selection and hiding the right pane
+// Reset the settings view by clearing the selection and hiding the right pane
 function resetSettingsView() {
-  // Remove the 'hovered' and 'is-focused' classes from all toggle switches
-  document.querySelectorAll('.mdl-switch').forEach(function(toggleSwitch) {
-    toggleSwitch.classList.remove('hovered', 'is-focused');
-  });
-
-  // Hide all settings options from the right pane
+  // Hide any settings options from the right pane
   document.querySelectorAll('.settings-options').forEach(function(settingsOption) {
     settingsOption.style.display = 'none';
   });
 
-  // Remove the 'selected' class from all settings categories
+  // Remove the 'selected' class from any settings categories
   document.querySelectorAll('.settings-category').forEach(function(settingsCategory) {
     settingsCategory.classList.remove('selected');
   });
@@ -1181,7 +1187,7 @@ function resetSettingsView() {
 function navigateSettingsView(view) {
   Navigation.pop();
   Navigation.push(view);
-  setTimeout(() => Navigation.switch(), 5);
+  setTimeout(() => Navigation.restore(), 250);
 }
 
 // Handle category selection, display appropriate options, and navigate to the provided settings pane
@@ -1259,7 +1265,7 @@ function navigationGuideDialog() {
     navGuideDialog.close();
     isDialogOpen = false;
     Navigation.pop();
-    Navigation.switch();
+    Navigation.restore();
   });
 }
 
@@ -1446,7 +1452,7 @@ function updateAppDialog(latestVersion, releaseNotes) {
     updateAppDialogOverlay.remove();
     isDialogOpen = false;
     Navigation.pop();
-    Navigation.switch();
+    Navigation.restore();
   }).appendTo(updateAppDialogActions);
 
   // If the dialog element doesn't support the showModal method, register it with dialogPolyfill
@@ -1459,7 +1465,7 @@ function updateAppDialog(latestVersion, releaseNotes) {
   updateAppDialog[0].showModal();
   isDialogOpen = true;
   Navigation.push(Views.UpdateMoonlightDialog);
-  setTimeout(() => Navigation.switch(), 5);
+  setTimeout(() => Navigation.restore(), 100);
 }
 
 // Check for updates when the Check for Updates button is pressed
@@ -1556,7 +1562,7 @@ function restoreDefaultsDialog() {
     restoreDefaultsDialog.close();
     isDialogOpen = false;
     Navigation.pop();
-    Navigation.switch();
+    Navigation.restore();
   });
 
   // Restore all default settings if the Continue button is pressed
@@ -1571,7 +1577,7 @@ function restoreDefaultsDialog() {
     restoreDefaultsDialog.close();
     isDialogOpen = false;
     Navigation.pop();
-    Navigation.switch();
+    Navigation.restore();
     // Show the required Restart Moonlight dialog and push the view
     setTimeout(() => requiredRestartAppDialog(), 2000);
   });
@@ -1601,7 +1607,7 @@ function warningDialog(title, message) {
     warningDialog.close();
     isDialogOpen = false;
     Navigation.pop();
-    Navigation.switch();
+    Navigation.restore();
   });
 }
 
@@ -1634,7 +1640,7 @@ function restartAppDialog() {
     restartAppDialog.close();
     isDialogOpen = false;
     Navigation.pop();
-    Navigation.switch();
+    Navigation.restore();
   });
 
   // Restart the application if the Restart button is pressed
@@ -1673,7 +1679,7 @@ function requiredRestartAppDialog() {
     restartAppDialog.close();
     isDialogOpen = false;
     Navigation.pop();
-    Navigation.switch();
+    Navigation.restore();
   });
 
   // Restart the application if the Restart button is pressed
@@ -1826,6 +1832,9 @@ function showApps(host) {
     console.log('%c[index.js, showApps]', 'color: green;', 'Current host object: \n', host, '\n' + host.toString()); // Logging both object (for console) and toString-ed object (for text logs)
   }
 
+  // Stop navigation before showing the loading screen
+  Navigation.stop();
+
   // Hide the main header before showing a loading screen
   $('#main-header').children().hide();
   $('#main-header').css({'backgroundColor': 'transparent', 'boxShadow': 'none'});
@@ -1998,7 +2007,7 @@ function quitAppDialog() {
         quitAppDialog.close();
         isDialogOpen = false;
         Navigation.pop();
-        Navigation.switch();
+        Navigation.restore();
       });
 
       // Quit the running app if the Continue button is pressed
@@ -2011,7 +2020,7 @@ function quitAppDialog() {
         Navigation.pop();
         stopGame(api, function() {
           // After stopping the game, set focus back to the 'Quit Running App' button
-          setTimeout(() => Navigation.switch(), 3000);
+          setTimeout(() => Navigation.restore(), 3000);
         });
       });
     });
@@ -2106,7 +2115,7 @@ function startGame(host, appID) {
             stopGame(host, function() {
               setTimeout(() => {
                 // Scroll to the current game row
-                Navigation.switch();
+                Navigation.restore();
                 // Switch to Apps view
                 Navigation.change(Views.Apps);
               }, 1500);
@@ -2201,7 +2210,7 @@ function startGame(host, appID) {
             showApps(host);
             setTimeout(() => {
               // Scroll to the current game row
-              Navigation.switch();
+              Navigation.restore();
               // Switch to Apps view
               Navigation.change(Views.Apps);
             }, 1500);
@@ -2221,7 +2230,7 @@ function startGame(host, appID) {
           showApps(host);
           setTimeout(() => {
             // Scroll to the current game row
-            Navigation.switch();
+            Navigation.restore();
             // Switch to Apps view
             Navigation.change(Views.Apps);
           }, 1500);
@@ -2255,7 +2264,7 @@ function startGame(host, appID) {
           showApps(host);
           setTimeout(() => {
             // Scroll to the current game row
-            Navigation.switch();
+            Navigation.restore();
             // Switch to Apps view
             Navigation.change(Views.Apps);
           }, 1500);
@@ -2275,7 +2284,7 @@ function startGame(host, appID) {
         showApps(host);
         setTimeout(() => {
           // Scroll to the current game row
-          Navigation.switch();
+          Navigation.restore();
           // Switch to Apps view
           Navigation.change(Views.Apps);
         }, 1500);