Merged in 5538-modal_dialog_to_remind_gear_setup (pull request #60)

5538 modal dialog to remind gear setup

* Setup Gear prompt

Display each time user runs app if Setup Gear step in PLG funnel not yet
completed


Approved-by: Seth Call

web/app/assets/javascripts/JamServer.js

@@ -394,6 +394,21 @@
             payload.client_update.size
           );
         }
+
+        if(context.JK.ClientUpdateInstance) {
+          context.JK.ClientUpdateInstance.isUpdateAvailable().then(function(isUpdateAvailable) {
+            if (!isUpdateAvailable) {
+              // Check if the user has not set up their gear yet
+              context.JK.hasOneConfiguredDevice().then(function(hasOneConfiguredDevice){
+                if (!hasOneConfiguredDevice) {
+                  // Show the gear setup reminder dialog
+                  context.JK.GearSetupReminderInstance.show();
+                }
+              });
+            }
+          });
+        }
+
       }, 0);
     }
 

web/app/assets/javascripts/clientUpdate.js

@@ -299,6 +299,46 @@
       });
     }
 
+    async function isUpdateAvailable(){
+      //this should check if the current version is less than the server version
+      //if so, return true
+      //otherwise return false
+      
+      var os = await context.jamClient.GetDetailedOS();
+      //os = 'Win32'
+      var product = "JamClientModern"
+      var currentVersion = await context.jamClient.ClientUpdateVersion();
+      if (!forceShow && (currentVersion == null || currentVersion.indexOf("Compiled")) > -1) {
+        // this is a developer build; it doesn't make much sense to do an packaged update, so skip
+        console.log("skipping client update check because this is a development build ('" + currentVersion + "')")
+        return false;
+      }
+      // # strange client oddity: remove quotes, if found, from start and finish of version.
+      if (currentVersion.indexOf('"') == 0 && currentVersion.lastIndexOf('"') == currentVersion.length - 1) {
+        currentVersion = currentVersion.substring(1, currentVersion.length - 1);
+      }
+      return new Promise((resolve, reject) => {
+        $.ajax({
+          type: "GET",
+          url: "/api/versioncheck?product=" + product + "&os=" + os,
+          success: function (response) {
+            if(!jQuery.isEmptyObject(response)){
+              // runCheck(product, response.version, response.uri, response.size, currentVersion);
+              var result = shouldUpdate(currentVersion, response.version);
+              resolve(result);
+            } else {
+              resolve(false);
+            }
+          },
+          error: function (jqXHR, textStatus, errorThrown) {
+            logger.error("Unable to do a client update check against /api/versioncheck");
+            resolve(false);
+          }
+        });
+        
+      });
+    }
+
     async function startDownload(url) {
       console.log("starting client updater download from: " + url);
 
@@ -344,6 +384,7 @@
     this.initialize = initialize;
     this.check = check;
     this.runCheck = runCheck;
+    this.isUpdateAvailable = isUpdateAvailable;
   }
 
   return this;

web/app/assets/javascripts/gear_setup_reminder.js

@@ -0,0 +1,48 @@
+(function (context, $) {
+
+  "use strict";
+
+  context.JK = context.JK || {};
+
+  context.JK.GearSetupReminder = function (app) {
+    
+    function showModal(options) {
+      options = options || {};
+
+      $('#gear_setup_reminder').attr('data-mode', 'gear-setup-reminder');
+
+      $('body').on('keyup', cancelModal);
+
+      $("#gear_setup_reminder a.close-modal").click(function () {
+        app.layout.closeDialog('gear-setup-reminder');
+        $('body').off('keyup', cancelModal);
+        return false;
+      })
+
+      $("#gear_setup_reminder a.setup-gear").click(function () {
+        app.layout.closeDialog('gear-setup-reminder');
+        $('body').off('keyup', cancelModal);
+        window.location.hash = '#/account/audio';
+        return false;
+      })
+      
+      if(!app.layout.isDialogShowing('gear-setup-reminder')) {
+        app.layout.showDialog('gear-setup-reminder')
+      }
+
+    }
+
+    function cancelModal(e) {
+      if ((e.ctrlKey || e.metaKey) && e.keyCode == 78) {
+        console.log("update canceled!");
+        app.layout.closeDialog('gear-setup-reminder');
+      }
+    }
+
+    // Expose publics
+    this.show = showModal;
+  }
+
+  return this;
+
+})(window, jQuery);

web/app/assets/stylesheets/client/client.css

@@ -78,6 +78,7 @@
  *= require ./sessionList
  *= require ./searchResults
  *= require ./clientUpdate
+ *= require ./gearSetupReminder
  *= require ./musician
  *= require ./help
  *= require ./jquery-ui-overrides

web/app/assets/stylesheets/client/gearSetupReminder.scss

@@ -0,0 +1,12 @@
+#gear_setup_reminder {
+  display:none;
+
+  width:800px;
+  min-height:0;
+
+  h2 {
+    font-weight:bold;
+    font-size:x-large;
+  }
+}
+

web/app/views/clients/_gear_setup_reminder.html.erb

@@ -0,0 +1,42 @@
+<div class="dialog share-overlay" layout="dialog" layout-id="gear-setup-reminder" id="gear_setup_reminder" topmost="true">
+
+  <!-- dialog header -->
+  <div class="content-head">
+    <%= image_tag("content/icon_alert.png",  :height => '24', :width => '24', :class => "content-icon") %><h1>alert</h1>
+  </div>
+
+  <div class="dialog-inner">
+    
+    <div class="left w100">
+      <p>
+        Now that you've installed the JamKazam app, the next thing you should do is set up your audio gear and your Ethernet connection.
+      </p>
+      <br />
+      <p>
+        If you already have an audio interface and the ability to connect your computer to your home router using an Ethernet cable, you are ready to set up your gear.
+        You can find all of our gear setup articles <a href="https://jamkazam.freshdesk.com/support/solutions/66000073844">here</a>. We recommend you use our articles on setting up your audio interface <a href="https://jamkazam.freshdesk.com/support/solutions/folders/66000108387">for Mac</a> or <a href="https://jamkazam.freshdesk.com/support/solutions/folders/66000108430">for Windows</a> to make sure you get this critical step done properly, and that you use our article on <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000124756">connecting your computer via Ethernet</a>, which is the other critical setup step.
+      </p>
+      <br />
+      <p>
+        If you're not sure what gear you need, we recommend you start by reading <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000122533-what-gear-do-i-need-to-play-on-jamkazam-">this article</a> that explains this topic in general terms. Next, <a href="https://jamkazam.freshdesk.com/support/solutions/folders/66000108418">check this list of articles</a> to find the one that best describes you. You need to use an audio interface rather than relying on the built-in mic on your computer, and you need to connect your computer to your internet router using an Ethernet cable rather than using WiFi. <a href="https://jamkazam.freshdesk.com/support/solutions/folders/66000108419">See this list of articles</a> for recommendations on gear. If you're worried about spending money on gear without knowing how well JamKazam will work for you, you can buy gear on Amazon, try it for a week, and return it for a refund if you're not happy for a risk-free trail experience.
+        </p>
+        <br />
+        <p>
+          If you have any trouble or feel confused about gear setup, you can email us for help at <a href="mailto:support@jamkazam.com">support@jamkazam.com</a>. You can also visit with a JamKazam support team member in our <a href="https://us02web.zoom.us/j/5967470315?pwd=eHZZL2hmVW1haUU5aTZTUUJobjFIdz09">weekly Zoom office hours</a>, which is offered every Wedsnesday from 11am to 12pm US Central Time.
+        </p>
+         <br />
+        <p>
+          If you're ready know to set up your audio gear, click the Set Up Gear button below. If you want to skip this step for now, click the Not Now button.
+        </p>
+    </div>
+    <br clear="all" />
+    <br />
+    <div class="center">
+      <a class="button-orange setup-gear" href="#">SETUP GEAR</a>
+      <a class="button-grey close-modal" href="#">NOT NOW</a>
+    </div>
+  </div>
+  <!-- end right column -->
+  <br clear="all">
+
+</div>

web/app/views/clients/index.html.erb

@@ -99,6 +99,7 @@
 <%= render "hoverSession" %>
 <%= render "notify" %>
 <%= render "client_update" %>
+<%= render "gear_setup_reminder" %>
 <%= render "overlay_small" %>
 <%= render "listenBroadcast" %>
 <%= render "sync_viewer_templates" %>
@@ -225,6 +226,23 @@
           JK.ClientUpdateInstance = clientUpdate;
           clientUpdate.initialize();
 
+          var gearSetupReminder = new JK.GearSetupReminder(JK.app);
+          JK.GearSetupReminderInstance = gearSetupReminder;
+
+          if(clientUpdate) {
+            clientUpdate.isUpdateAvailable().then(function(isUpdateAvailable) {
+              if (!isUpdateAvailable) {
+                // Check if the user has not set up their gear yet
+                JK.hasOneConfiguredDevice().then(function(hasOneConfiguredDevice){
+                  if (!hasOneConfiguredDevice) {
+                    // Show the gear setup reminder dialog
+                    GearSetupReminderInstance.show();
+                  }
+                });
+              }
+            });
+          }
+          
           var homeScreen = new JK.HomeScreen(JK.app);
           homeScreen.initialize();