625 lines
18 KiB
JavaScript
625 lines
18 KiB
JavaScript
(function (context, $) {
|
|
|
|
"use strict";
|
|
|
|
|
|
context.JK = context.JK || {};
|
|
context.JK.GearWizard = function (app) {
|
|
|
|
var $dialog = null;
|
|
var $wizardSteps = null;
|
|
var $currentWizardStep = null;
|
|
var step = 0;
|
|
var $templateSteps = null;
|
|
var $templateButtons = null;
|
|
var $ftueButtons = null;
|
|
var self = null;
|
|
var operatingSystem = null;
|
|
|
|
// populated by loadDevices
|
|
var deviceInformation = null;
|
|
|
|
// SELECT DEVICE STATE
|
|
var validScore = false;
|
|
|
|
// SELECT TRACKS STATE
|
|
|
|
var TOTAL_STEPS = 7;
|
|
var STEP_INTRO = 0;
|
|
var STEP_SELECT_DEVICE = 1;
|
|
var STEP_SELECT_TRACKS = 2;
|
|
var STEP_SELECT_CHAT = 3;
|
|
var STEP_DIRECT_MONITOR = 4;
|
|
var STEP_ROUTER_NETWORK = 5;
|
|
var STEP_SUCCESS = 6;
|
|
|
|
var audioDeviceBehavior = {
|
|
MacOSX_builtin : {
|
|
display: 'MacOSX Built-In',
|
|
videoURL: undefined
|
|
},
|
|
MACOSX_interface : {
|
|
display: 'MacOSX external interface',
|
|
videoURL: undefined
|
|
},
|
|
Win32_wdm : {
|
|
display: 'Windows WDM',
|
|
videoURL: undefined
|
|
},
|
|
Win32_asio : {
|
|
display: 'Windows ASIO',
|
|
videoURL: undefined
|
|
},
|
|
Win32_asio4all : {
|
|
display: 'Windows ASIO4ALL',
|
|
videoURL: undefined
|
|
},
|
|
Linux : {
|
|
display: 'Linux',
|
|
videoURL: undefined
|
|
}
|
|
}
|
|
|
|
function beforeShowIntro() {
|
|
var $watchVideo = $currentWizardStep.find('.watch-video');
|
|
var videoUrl = 'https://www.youtube.com/watch?v=VexH4834o9I';
|
|
if(operatingSystem == "Win32") {
|
|
$watchVideo.attr('href', 'https://www.youtube.com/watch?v=VexH4834o9I');
|
|
}
|
|
$watchVideo.attr('href', videoUrl);
|
|
}
|
|
|
|
function beforeSelectDevice() {
|
|
|
|
var $watchVideoInput = $currentWizardStep.find('.watch-video.audio-input');
|
|
var $watchVideoOutput = $currentWizardStep.find('.watch-video.audio-output');
|
|
var $audioInput = $currentWizardStep.find('.select-audio-input-device');
|
|
var $audioOutput = $currentWizardStep.find('.select-audio-output-device');
|
|
var $bufferIn = $currentWizardStep.find('.select-buffer-in');
|
|
var $bufferOut = $currentWizardStep.find('.select-buffer-out');
|
|
var $frameSize = $currentWizardStep.find('.select-frame-size');
|
|
var $inputPorts = $currentWizardStep.find('.input-ports');
|
|
var $outputPorts = $currentWizardStep.find('.output-ports');
|
|
var $scoreReport = $currentWizardStep.find('.results');
|
|
var $nextButton = $ftueButtons.find('.btn-next');
|
|
|
|
// should return one of:
|
|
// * MacOSX_builtin
|
|
// * MACOSX_interface
|
|
// * Win32_wdm
|
|
// * Win32_asio
|
|
// * Win32_asio4all
|
|
// * Linux
|
|
function determineDeviceType(deviceId, displayName) {
|
|
if(operatingSystem == "MacOSX") {
|
|
if(displayName.toLowerCase().trim() == "built-in") {
|
|
return "MacOSX_builtin";
|
|
}
|
|
else {
|
|
return "MacOSX_interface";
|
|
}
|
|
}
|
|
else if(operatingSystem == "Win32") {
|
|
if(context.jamClient.FTUEIsMusicDeviceWDM(deviceId)) {
|
|
return "Win32_wdm";
|
|
}
|
|
else if(displayName.toLowerCase().indexOf("asio4all") > -1) {
|
|
return "Win32_asio4all"
|
|
}
|
|
else {
|
|
return "Win32_asio";
|
|
}
|
|
}
|
|
else {
|
|
return "Linux";
|
|
}
|
|
}
|
|
|
|
|
|
function loadDevices() {
|
|
var devices = context.jamClient.FTUEGetDevices(false);
|
|
|
|
var loadedDevices = {};
|
|
|
|
// augment these devices by determining their type
|
|
context._.each(devices, function(displayName, deviceId) {
|
|
var deviceInfo = {};
|
|
|
|
deviceInfo.id = deviceId;
|
|
deviceInfo.type = determineDeviceType(deviceId, displayName);
|
|
deviceInfo.displayType = audioDeviceBehavior[deviceInfo.type].display;
|
|
deviceInfo.displayName = deviceInfo.displayName;
|
|
|
|
loadedDevices[deviceId] = deviceInfo;
|
|
})
|
|
|
|
deviceInformation = context._.keys(loadedDevices).sort();
|
|
|
|
logger.debug(context.JK.dlen(deviceInformation) + " devices loaded." , deviceInformation);
|
|
}
|
|
|
|
// returns a deviceInfo hash for the device matching the deviceId, or null.
|
|
function findDevice(deviceId) {
|
|
return {};
|
|
}
|
|
|
|
function selectedAudioInput() {
|
|
return $audioInput.val();
|
|
}
|
|
|
|
function selectedAudioOutput() {
|
|
return $audioOutput.val();
|
|
}
|
|
|
|
function selectedFramesize() {
|
|
return parseFloat($frameSize.val());
|
|
}
|
|
|
|
function selectedBufferIn() {
|
|
return parseFloat($frameSize.val());
|
|
}
|
|
|
|
function selectedBufferOut() {
|
|
return parseFloat($frameSize.val());
|
|
}
|
|
|
|
function initializeNextButtonState() {
|
|
console.log(context.jamClient.FTUEGetDevices(false));
|
|
console.log("chat devices", jamClient.FTUEGetChatInputs());
|
|
$nextButton.removeClass('button-orange button-grey');
|
|
|
|
if(validScore) $nextButton.addClass('button-orange');
|
|
else $nextButton.addClass('button-grey');
|
|
}
|
|
|
|
function initializeAudioInput() {
|
|
var optionsHtml = '';
|
|
optionsHtml = '<option selected="selected" value="">Choose...</option>';
|
|
context._.each(deviceInformation, function(deviceInfo, deviceId) {
|
|
optionsHtml += '<option title="' + deviceInfo.displayName + '" value="' + deviceId + '">' + deviceInfo.displayName + '</option>';
|
|
});
|
|
$audioInput.html(optionsHtml);
|
|
alert(optionsHtml)
|
|
context.JK.dropdown($audioInput);
|
|
|
|
initializeAudioInputChanged();
|
|
}
|
|
|
|
function initializeAudioOutput() {
|
|
var optionsHtml = '';
|
|
optionsHtml = '<option selected="selected" value="">Same as Input...</option>';
|
|
context._.each(deviceInformation, function(deviceInfo, deviceId) {
|
|
optionsHtml += '<option title="' + deviceInfo.displayName + '" value="' + deviceId + '">' + deviceInfo.displayName + '</option>';
|
|
});
|
|
$audioOutput.html(optionsHtml);
|
|
context.JK.dropdown($audioOutput);
|
|
|
|
initializeAudioOutputChanged();
|
|
}
|
|
|
|
function initializeFramesize() {
|
|
|
|
}
|
|
|
|
function initializeFormElements() {
|
|
if(!deviceInformation) throw "devices are not initialized";
|
|
|
|
initializeAudioInput();
|
|
initializeAudioOutput();
|
|
initializeFramesize();
|
|
initializeBuffers();
|
|
}
|
|
|
|
function resetFrameBuffers() {
|
|
$frameSize.val('2.5');
|
|
$bufferIn.val('0');
|
|
$bufferOut.val('0');
|
|
}
|
|
|
|
function clearInputPorts() {
|
|
$inputPorts.empty();
|
|
}
|
|
|
|
function clearOutputPorts() {
|
|
$outputPorts.empty();
|
|
}
|
|
|
|
function resetScoreReport() {
|
|
$scoreReport.empty();
|
|
}
|
|
|
|
function updateScoreReport(latencyResult) {
|
|
var latencyClass = "neutral";
|
|
var latencyValue = 'N/A';
|
|
var validLatency = false;
|
|
if (latencyResult && latencyResult.latencyknown) {
|
|
var latency = latencyResult.latency;
|
|
latencyValue = Math.round(latencyValue * 100) / 100;
|
|
if (latency.latency <= 10) {
|
|
latencyClass = "good";
|
|
validLatency = true;
|
|
} else if (latency.latency <= 20) {
|
|
latencyClass = "acceptable";
|
|
validLatency = true;
|
|
} else {
|
|
latencyClass = "bad";
|
|
}
|
|
}
|
|
|
|
validScore = validLatency; // validScore may become based on IO variance too
|
|
|
|
$scoreReport.html(latencyValue);
|
|
}
|
|
|
|
function loadAudioDrivers() {
|
|
var drivers = context.jamClient.FTUEGetDevices(false);
|
|
var chatDrivers = jamClient.FTUEGetChatInputs();
|
|
var optionsHtml = '<option selected="selected" value="">Choose...</option>';
|
|
var chatOptionsHtml = '<option selected="selected" value="">Choose...</option>';
|
|
|
|
|
|
var driverOptionFunc = function (driverKey, index, list) {
|
|
if(!drivers[driverKey]) {
|
|
logger.debug("skipping unknown device:", driverKey)
|
|
}
|
|
else {
|
|
optionsHtml += '<option title="' + drivers[driverKey] + '" value="' + driverKey + '">' + drivers[driverKey] + '</option>';
|
|
}
|
|
};
|
|
|
|
var chatOptionFunc = function (driverKey, index, list) {
|
|
chatOptionsHtml += '<option value="' + driverKey + '">' + chatDrivers[driverKey]+ '</option>';
|
|
};
|
|
|
|
var selectors = [
|
|
'[layout-wizard-step="0"] .settings-2-device select',
|
|
'[layout-wizard-step="2"] .settings-driver select'
|
|
];
|
|
|
|
// handle standard devices
|
|
var sortedDeviceKeys = context._.keys(drivers).sort();
|
|
context._.each(sortedDeviceKeys, driverOptionFunc);
|
|
$.each(selectors, function (index, selector) {
|
|
var $select = $(selector);
|
|
$select.empty();
|
|
$select.html(optionsHtml);
|
|
context.JK.dropdown($select);
|
|
});
|
|
|
|
selectors = ['[layout-wizard-step="0"] .settings-2-voice select'];
|
|
var sortedVoiceDeviceKeys = context._.keys(chatDrivers).sort();
|
|
|
|
// handle voice inputs
|
|
context._.each(sortedVoiceDeviceKeys, chatOptionFunc);
|
|
$.each(selectors, function (index, selector) {
|
|
var $select = $(selector);
|
|
$select.empty();
|
|
$select.html(chatOptionsHtml);
|
|
context.JK.dropdown($select);
|
|
});
|
|
|
|
}
|
|
function audioInputDeviceUnselected() {
|
|
validScore = false;
|
|
initializeNextButtonState();
|
|
resetFrameBuffers();
|
|
clearInputPorts();
|
|
}
|
|
|
|
function renderScoringStarted() {
|
|
validScore = false;
|
|
initializeNextButtonState();
|
|
resetScoreReport();
|
|
}
|
|
|
|
function renderScoringStopped() {
|
|
initializeNextButtonState();
|
|
}
|
|
|
|
|
|
// Given a latency structure, update the view.
|
|
function newFtueUpdateLatencyView(latency) {
|
|
var $report = $('.ftue-new .latency .report');
|
|
var $instructions = $('.ftue-new .latency .instructions');
|
|
var latencyClass = "neutral";
|
|
var latencyValue = "N/A";
|
|
var $saveButton = $('#btn-ftue-2-save');
|
|
if (latency && latency.latencyknown) {
|
|
latencyValue = latency.latency;
|
|
// Round latency to two decimal places.
|
|
latencyValue = Math.round(latencyValue * 100) / 100;
|
|
if (latency.latency <= 10) {
|
|
latencyClass = "good";
|
|
setSaveButtonState($saveButton, true);
|
|
} else if (latency.latency <= 20) {
|
|
latencyClass = "acceptable";
|
|
setSaveButtonState($saveButton, true);
|
|
} else {
|
|
latencyClass = "bad";
|
|
setSaveButtonState($saveButton, false);
|
|
}
|
|
} else {
|
|
latencyClass = "unknown";
|
|
setSaveButtonState($saveButton, false);
|
|
}
|
|
|
|
$('.ms-label', $report).html(latencyValue);
|
|
$('p', $report).html('milliseconds');
|
|
|
|
$report.removeClass('good acceptable bad unknown');
|
|
$report.addClass(latencyClass);
|
|
|
|
var instructionClasses = ['neutral', 'good', 'acceptable', 'unknown', 'bad', 'start', 'loading'];
|
|
$.each(instructionClasses, function (idx, val) {
|
|
$('p.' + val, $instructions).hide();
|
|
});
|
|
if (latency === 'loading') {
|
|
$('p.loading', $instructions).show();
|
|
} else {
|
|
$('p.' + latencyClass, $instructions).show();
|
|
renderStopNewFtueLatencyTesting();
|
|
}
|
|
}
|
|
|
|
function initializeWatchVideo() {
|
|
$watchVideoInput.unbind('click').click(function() {
|
|
|
|
var audioDevice = findDevice(selectedAudioInput());
|
|
if(!audioDevice) {
|
|
context.JK.Banner.showAlert('You must first choose an Audio Input Device so that we can determine which video to show you.');
|
|
}
|
|
else {
|
|
var videoURL = audioDeviceBehavior[audioDevice.type].videoURL;
|
|
|
|
if(videoURL) {
|
|
$(this).attr('href', videoURL);
|
|
return true;
|
|
}
|
|
else {
|
|
context.JK.Banner.showAlert('No help video for this type of device (' + audioDevice.displayType + ')');
|
|
}
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
$watchVideoOutput.unbind('click').click(function() {
|
|
|
|
var audioDevice = findDevice(selectedAudioOutput());
|
|
if(!audioDevice) {
|
|
throw "this button should be hidden";
|
|
}
|
|
else {
|
|
var videoURL = audioDeviceBehavior[audioDevice.type].videoURL;
|
|
|
|
if(videoURL) {
|
|
$(this).attr('href', videoURL);
|
|
return true;
|
|
}
|
|
else {
|
|
context.JK.Banner.showAlert('No help video for this type of device (' + audioDevice.displayType + ')');
|
|
}
|
|
}
|
|
|
|
return false;
|
|
});
|
|
}
|
|
|
|
function initializeAudioInputChanged() {
|
|
$audioInput.unbind('change').change(function(evt) {
|
|
|
|
var audioDeviceId = selectedAudioInput();
|
|
if(!audioDeviceId) {
|
|
audioInputDeviceUnselected();
|
|
return false;
|
|
}
|
|
|
|
var audioDevice = findDevice(selectedAudioInput());
|
|
if(!audioDevice) {
|
|
context.JK.alertSupportedNeeded('Unable to find device information for: ' + audioDeviceId);
|
|
return false;
|
|
}
|
|
|
|
renderScoringStarted();
|
|
|
|
jamClient.FTUESetMusicDevice(audioDeviceId);
|
|
jamClient.FTUESetInputLatency(selectedAudioInput());
|
|
jamClient.FTUESetOutputLatency(selectedAudioOutput());
|
|
jamClient.FTUESetFrameSize(selectedFramesize());
|
|
|
|
logger.debug("Calling FTUESave(false)");
|
|
jamClient.FTUESave(false);
|
|
|
|
var latency = jamClient.FTUEGetExpectedLatency();
|
|
console.log("FTUEGetExpectedLatency: %o", latency);
|
|
|
|
renderScoringStopped();
|
|
});
|
|
}
|
|
|
|
function initializeAudioOutputChanged() {
|
|
|
|
}
|
|
|
|
function initializeStep() {
|
|
loadDevices();
|
|
initializeFormElements();
|
|
initializeNextButtonState();
|
|
initializeWatchVideo();
|
|
}
|
|
|
|
initializeStep();
|
|
}
|
|
|
|
function beforeSelectTracks() {
|
|
|
|
}
|
|
|
|
function beforeSelectChat() {
|
|
|
|
}
|
|
|
|
function beforeDirectMonitor() {
|
|
|
|
}
|
|
|
|
function beforeTestNetwork() {
|
|
|
|
}
|
|
|
|
function beforeSuccess() {
|
|
|
|
}
|
|
|
|
var STEPS = {
|
|
0: {
|
|
beforeShow: beforeShowIntro
|
|
},
|
|
1: {
|
|
beforeShow: beforeSelectDevice
|
|
},
|
|
2: {
|
|
beforeShow: beforeSelectTracks
|
|
},
|
|
3: {
|
|
beforeShow: beforeSelectChat
|
|
},
|
|
4: {
|
|
beforeShow: beforeDirectMonitor
|
|
},
|
|
5: {
|
|
beforeShow: beforeTestNetwork
|
|
},
|
|
6: {
|
|
beforeShow: beforeSuccess
|
|
}
|
|
}
|
|
|
|
function beforeShowStep($step) {
|
|
var stepInfo = STEPS[step];
|
|
|
|
if(!stepInfo) {throw "unknown step: " + step;}
|
|
|
|
stepInfo.beforeShow.call(self);
|
|
}
|
|
|
|
function moveToStep() {
|
|
var $nextWizardStep = $wizardSteps.filter($('[layout-wizard-step=' + step + ']'));
|
|
|
|
$wizardSteps.hide();
|
|
|
|
$currentWizardStep = $nextWizardStep;
|
|
|
|
var $ftueSteps = $(context._.template($templateSteps.html(), {}, { variable: 'data' }));
|
|
var $activeStep = $ftueSteps.find('.ftue-stepnumber[data-step-number="'+ step +'"]');
|
|
$activeStep.addClass('.active');
|
|
$activeStep.next().show(); // show the .ftue-step-title
|
|
$currentWizardStep.find('.ftuesteps').replaceWith($ftueSteps);
|
|
beforeShowStep($currentWizardStep);
|
|
$currentWizardStep.show();
|
|
|
|
// update buttons
|
|
var $ftueButtonsContent = $(context._.template($templateButtons.html(), {}, {variable: 'data'}));
|
|
|
|
|
|
var $btnBack = $ftueButtonsContent.find('.btn-back');
|
|
var $btnNext = $ftueButtonsContent.find('.btn-next');
|
|
var $btnClose = $ftueButtonsContent.find('.btn-close');
|
|
var $btnCancel = $ftueButtonsContent.find('.btn-cancel');
|
|
|
|
// hide back button if 1st step or last step
|
|
if(step == 0 && step == TOTAL_STEPS - 1) {
|
|
$btnBack.hide();
|
|
}
|
|
// hide next button if not on last step
|
|
if (step == TOTAL_STEPS - 1 ) {
|
|
$btnNext.hide();
|
|
}
|
|
// hide close if on last step
|
|
if (step != TOTAL_STEPS - 1) {
|
|
$btnClose.hide();
|
|
}
|
|
// hide cancel if not on last step
|
|
if (step == TOTAL_STEPS - 1) {
|
|
$btnCancel.hide();
|
|
}
|
|
|
|
$btnNext.on('click', next);
|
|
$btnBack.on('click', back);
|
|
$btnClose.on('click', closeDialog);
|
|
$btnCancel.on('click', closeDialog);
|
|
|
|
$ftueButtons.empty();
|
|
$ftueButtons.append($ftueButtonsContent);
|
|
}
|
|
|
|
function reset() {
|
|
$currentWizardStep = null;
|
|
}
|
|
|
|
function beforeShow(args) {
|
|
step = args.d1;
|
|
if(!step) step = 0;
|
|
step = parseInt(step);
|
|
moveToStep();
|
|
}
|
|
|
|
function afterShow() {
|
|
|
|
}
|
|
|
|
function afterHide() {
|
|
|
|
}
|
|
|
|
function back() {
|
|
if($(this).is('.button-grey')) return;
|
|
step = step - 1;
|
|
moveToStep();
|
|
return false;
|
|
}
|
|
|
|
function next() {
|
|
if($(this).is('.button-grey')) return;
|
|
|
|
step = step + 1;
|
|
|
|
moveToStep();
|
|
return false;
|
|
}
|
|
|
|
function closeDialog() {
|
|
app.layout.closeDialog('gear-wizard');
|
|
return false;
|
|
}
|
|
|
|
function events() {
|
|
}
|
|
|
|
function route() {
|
|
|
|
}
|
|
function initialize() {
|
|
|
|
var dialogBindings = { beforeShow: beforeShow, afterShow: afterShow, afterHide: afterHide };
|
|
|
|
app.bindDialog('gear-wizard', dialogBindings);
|
|
|
|
$dialog = $('#gear-wizard-dialog');
|
|
$wizardSteps = $dialog.find('.wizard-step');
|
|
$templateSteps = $('#template-ftuesteps');
|
|
$templateButtons = $('#template-ftue-buttons');
|
|
$ftueButtons = $dialog.find('.ftue-buttons');
|
|
|
|
operatingSystem = context.jamClient.GetOSAsString();
|
|
|
|
events();
|
|
}
|
|
|
|
this.initialize = initialize;
|
|
|
|
self = this;
|
|
return this;
|
|
};
|
|
|
|
})(window, jQuery); |