Fix step 2 of the FTUE Gear Wizard by setting some async's where needed.

Also added in gon.isQWebEngine to act as flag indicating this is the native client.

web/app/assets/javascripts/utils.js

@@ -1299,12 +1299,11 @@
 
   }
 
-  context.JK.dropdown = async function ($select, options) {
+  context.JK.dropdown = function ($select, options) {
 
     var opts = options || {}
 
-    opts = $.extend({}, {nativeTouch: !(context.jamClient && await context.jamClient.IsNativeClient()) && gon.global.env != "test", cutOff: 7}, opts)
-    console.log("===context.JK.dropdown===", opts);
+    opts = $.extend({}, {nativeTouch: !gon.isQWebEngine && gon.global.env != "test", cutOff: 7}, opts)
     $select.each(function (index) {
       var $item = $(this);
 
@@ -1316,22 +1315,6 @@
     })
   }
 
-  // context.JK.dropdown = function ($select, options) {
-
-  //   var opts = options || {}
-
-  //   opts = $.extend({}, {nativeTouch: false, cutOff: 7}, opts)
-  //   $select.each(function (index) {
-  //     var $item = $(this);
-
-  //     if ($item.data('easydropdown-select')) {
-  //       // if this has already been initialized, re-init it so it picks up any new <options>
-  //       $item.easyDropDown('destroy')
-  //     }
-  //     $item.easyDropDown(opts);
-  //   })
-  // }
-
   context.JK.currentTimezone = function() {
     var tz = window.jstz.determine().name()
 
@@ -1721,4 +1704,4 @@
   }
 
 
-})(window, jQuery);
+})(window, jQuery);

web/app/assets/javascripts/wizard/gear/gear_wizard.js

@@ -44,12 +44,12 @@
       4: stepDirectMonitoring      
     }
 
-    function newSession() {
+    async function newSession() {
       inputs = null;
 
-      context._.each(STEPS, function(stepInfo, stepNumber) {
+      context._.each(STEPS, async function(stepInfo, stepNumber) {
         if(stepInfo.newSession) {
-          stepInfo.newSession.call(stepInfo);
+          await stepInfo.newSession.call(stepInfo);
         }
       });
     }
@@ -70,7 +70,7 @@
     async function createFTUEProfile() {
       var profileName = await context.jamClient.FTUEGetMusicProfileName();
 
-      logger.debug("current profile name: " + profileName);
+      console.log("current profile name: " + profileName);
 
       if(profileName && profileName.indexOf('FTUE') == 0) {
         // remove junk
@@ -78,7 +78,7 @@
       }
 
       var newProfileName = 'FTUEAttempt-' + new Date().getTime().toString();
-      logger.debug("setting FTUE-prefixed profile name to: " + newProfileName);
+      console.log("setting FTUE-prefixed profile name to: " + newProfileName);
       await context.jamClient.FTUESetMusicProfileName(newProfileName);
       //if(context.jamClient.FTUESetPreferredMixerSampleRate) {
         await context.jamClient.FTUESetPreferredMixerSampleRate(1);
@@ -87,7 +87,7 @@
       //}
 
       await context.jamClient.FTUEClearChannelAssignments();
-      newSession();
+      await newSession();
 
       var profileName = await context.jamClient.FTUEGetMusicProfileName();
 
@@ -260,4 +260,4 @@
     return this;
   };
 
-})(window, jQuery);
+})(window, jQuery);

web/app/assets/javascripts/wizard/gear/step_configure_tracks.js

@@ -44,7 +44,7 @@
       return context.ConfigureTracksStore.editingTrackValid()
     }
 
-    function newSession() {
+    async function newSession() {
       successfullyAssignedOnce = false;
     }
 
@@ -86,4 +86,4 @@
 
     return this;
   }
-})(window, jQuery);
+})(window, jQuery);

web/app/assets/javascripts/wizard/gear/step_configure_voice_chat.js

@@ -33,7 +33,7 @@
       }
     }
 
-    function newSession() {
+    async function newSession() {
       firstTimeShown = true;
     }
 
@@ -91,4 +91,4 @@
 
     return this;
   }
-})(window, jQuery);
+})(window, jQuery);

web/app/assets/javascripts/wizard/gear/step_network_test.js

@@ -65,7 +65,7 @@
       //return "https://jamkazam.desk.com/customer/portal/articles/1599969-first-time-setup---step-6---test-your-network";
     }
 
-    function newSession() {
+    async function newSession() {
       networkTest.reset();
       updateButtons();
     }
@@ -111,4 +111,4 @@
 
     return this;
   }
-})(window, jQuery);
+})(window, jQuery);

web/app/assets/javascripts/wizard/gear/step_select_gear.js

@@ -85,16 +85,15 @@
       return $audioOutput.val();
     }
 
-    async function setInputAudioDevice(value) {
-      console.log('=====setInputAudioDevice=====', value)
-      await context.JK.dropdown($audioInput.val(value).easyDropDown('select', value.toString(), true))
+    function setInputAudioDevice(value) {
+      context.JK.dropdown($audioInput.val(value).easyDropDown('select', value.toString(), true))
     }
 
-    async function setOutputAudioDevice(value) {
+    function setOutputAudioDevice(value) {
       if(value != "" && value == selectedAudioInput()) {
         value = ''; // to force Same as Input
       }
-      await context.JK.dropdown($audioOutput.val(value).easyDropDown('select', value.toString(), true))
+      context.JK.dropdown($audioOutput.val(value).easyDropDown('select', value.toString(), true))
     }
 
     function initializeNextButtonState() {
@@ -127,7 +126,7 @@
       return allOutputDevices;
     }
 
-    function initializeAudioInput() {
+    async function initializeAudioInput() {
       var optionsHtml = '';
       optionsHtml = '<option value="">Choose...</option>';
       context._.each(allInputDevices(), function (device) {
@@ -138,10 +137,10 @@
       context.JK.dropdown($audioInput);
       $audioInput.easyDropDown('enable')
 
-      initializeAudioInputChanged();
+      await initializeAudioInputChanged();
     }
 
-    function initializeAudioOutput() {
+    async function initializeAudioOutput() {
       var optionsHtml = '';
       optionsHtml = '<option value="">Same as Input</option>';
       context._.each(allOutputDevices(), function (device) {
@@ -151,7 +150,7 @@
       context.JK.dropdown($audioOutput);
       $audioOutput.easyDropDown('disable'); // enable once they pick something in input
 
-      initializeAudioOutputChanged();
+      await initializeAudioOutputChanged();
     }
 
     // reloads the backend's channel state for the currently selected audio devices,
@@ -467,11 +466,11 @@
       return false;
     }
 
-    function initializeFormElements() {
+    async function initializeFormElements() {
       if (!deviceInformation) throw "devices are not initialized";
 
-      initializeAudioInput();
-      initializeAudioOutput();
+      await initializeAudioInput();
+      await initializeAudioOutput();
       initializeLoopback();
     }
 
@@ -785,11 +784,10 @@
         // then we need to delete the current profile and create a new one
         // because there is no way to rename a profile, and the profile name has the device's name in it
         var profileName = await context.jamClient.FTUEGetMusicProfileName();
-        logger.debug("invaliding previously saved profile: " + profileName);
+        console.log("invaliding previously saved profile: " + profileName);
 
-        dialog.createFTUEProfile();
+        await dialog.createFTUEProfile();
         // restore user selections because newSession is called by createFTUEProfile(), invalidating dropdowns
-        console.log("====audioInputDeviceId====", audioInputDeviceId)
         setInputAudioDevice(audioInputDeviceId);
         setOutputAudioDevice(audioOutputDeviceId);
 
@@ -811,8 +809,6 @@
       var audioInputDeviceId = selectedDeviceInfo.input.id;
       var audioOutputDeviceId = selectedDeviceInfo.output.id;
 
-      console.log('audioInputDeviceId = ', audioInputDeviceId)
-
       if(audioInputDeviceId) {
         $audioOutput.easyDropDown('enable');
       }
@@ -1241,7 +1237,7 @@
       deviceInformation = await gearUtils.loadDeviceInfo();
       sampleRate.setLastSelectedDevice(null);
       await resetState();
-      initializeFormElements();
+      await initializeFormElements();
       initializeNextButtonState();
       initializeASIOButtons();
       initializeResync();
@@ -1403,4 +1399,4 @@
     return this;
   };
 
-})(window, jQuery);
+})(window, jQuery);

web/app/helpers/client_helper.rb

@@ -1,10 +1,17 @@
 module ClientHelper
 
+  # is this for *certain* the native client (no overrides allowed)?
+  # this ends up as gon.isQWebEngine
+  def is_certified_native_client?
+    # is this the native client or browser?
+    user_agent = request.env["HTTP_USER_AGENT"]
+    !user_agent.blank? && user_agent.downcase.include?("jamkazam")
+  end
+
   # is this the native client (or browser emulating native client with CTRL+SHIFT+0), or browser?
   def is_native_client?
     # is this the native client or browser?
-    user_agent = request.env["HTTP_USER_AGENT"]
-    is_native_client = !user_agent.blank? && user_agent.downcase.include?("jamkazam")
+    is_native_client = is_certified_native_client?
 
     # allow override of the client type if configured to so, and if we find the override cookie in place
     if Rails.application.config.allow_force_native_client
@@ -79,6 +86,7 @@ module ClientHelper
 
     # let javascript have access to the server's opinion if this is a native client
     gon.isNativeClient = @nativeClient
+    gon.isQWebEngine = is_certified_native_client?
 
     gon.use_cached_session_scores = Rails.application.config.use_cached_session_scores
     gon.allow_both_find_algos = Rails.application.config.allow_both_find_algos

web/app/javascript/packs/application.js

@@ -0,0 +1,18 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)
+
+console.log('Hello World from Webpacker')

web/app/javascript/packs/hello_react.jsx

@@ -0,0 +1,26 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
+// of the page.
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+const Hello = props => (
+  <div>Hello {props.name}!</div>
+)
+
+Hello.defaultProps = {
+  name: 'David'
+}
+
+Hello.propTypes = {
+  name: PropTypes.string
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Hello name="React" />,
+    document.body.appendChild(document.createElement('div')),
+  )
+})