diff --git a/web/app/assets/javascripts/bandProfile.js b/web/app/assets/javascripts/bandProfile.js
index 6812e751e..46ed0b72c 100644
--- a/web/app/assets/javascripts/bandProfile.js
+++ b/web/app/assets/javascripts/bandProfile.js
@@ -344,7 +344,7 @@
var instrument = musician.instruments[j];
var inst = '../assets/content/icon_instrument_default24.png';
if (instrument.instrument_id in instrument_logo_map) {
- inst = instrument_logo_map[instrument.instrument_id];
+ inst = instrument_logo_map[instrument.instrument_id].asset;
}
instrumentLogoHtml += '
';
}
diff --git a/web/app/assets/javascripts/findBand.js b/web/app/assets/javascripts/findBand.js
index 144bf4541..644df8a9d 100644
--- a/web/app/assets/javascripts/findBand.js
+++ b/web/app/assets/javascripts/findBand.js
@@ -97,7 +97,7 @@
for (var kk=0, klen=iter_pinstruments.length; kk';
}
diff --git a/web/app/assets/javascripts/findMusician.js b/web/app/assets/javascripts/findMusician.js
index e10458b3b..ee2847b68 100644
--- a/web/app/assets/javascripts/findMusician.js
+++ b/web/app/assets/javascripts/findMusician.js
@@ -100,7 +100,7 @@
instr_logos = '';
for (var jj=0, ilen=musician['instruments'].length; jj';
}
diff --git a/web/app/assets/javascripts/gear/step_configure_tracks.js b/web/app/assets/javascripts/gear/step_configure_tracks.js
index 31a0141a0..7a5c76915 100644
--- a/web/app/assets/javascripts/gear/step_configure_tracks.js
+++ b/web/app/assets/javascripts/gear/step_configure_tracks.js
@@ -15,6 +15,7 @@
var $templateTrackTarget = null;
var $unassignedChannelsHolder = null;
var $tracksHolder = null;
+ var $instrumentsHolder = null;
@@ -22,7 +23,7 @@
var musicPorts = jamClient.FTUEGetChannels();
$unassignedChannelsHolder.empty();
- $tracksHolder.find('.ftue-inputport').remove();
+ $tracksHolder.find('.ftue-input').remove();
var inputChannels = musicPorts.inputs;
@@ -48,7 +49,7 @@
}
$channel.draggable({
- revert: true,
+ helper: 'clone',
start: function() {
var $channel = $(this);
var $track = $channel.closest('.track-target');
@@ -70,23 +71,108 @@
})
}
+ // iterates through the dom and returns a pure data structure for track associations
+ function trackAssociations() {
+
+ var tracks = {};
+ tracks.tracks = [];
+ tracks.unassignedChannels = [];
+ var $unassignedChannels = $unassignedChannelsHolder.find('.ftue-input');
+ var $tracks = $tracksHolder.find('.track-target');
+
+ context._.each($unassignedChannels, function($unassignedTrack) {
+ $unassignedTrack = $($unassignedTrack);
+ var channelId = $unassignedTrack.attr('data-input-id');
+ tracks.unassignedChannels.push(channelId);
+ })
+
+ context._.each($tracks, function($track, index) {
+ $track = $($track);
+ var $assignedChannels = $track.find('.ftue-input');
+
+ var track = {index: index, channels:[]};
+ context._.each($assignedChannels, function($assignedChannel) {
+ $assignedChannel = $($assignedChannel);
+ track.channels.push($assignedChannel.attr('data-input-id'))
+ });
+
+ // sparse array
+ if(track.channels.length > 0) {
+ tracks.tracks.push(track);
+ }
+ var $instrument = $instrumentsHolder.find('.icon-instrument-select[data-num="' + index + '"]');
+ track.instrument_id = $instrument.data('instrument_id');
+ })
+ return tracks;
+ }
+
+ function validate(tracks) {
+ // there must be at least one assigned channel
+
+ if(tracks.tracks.length == 0) {
+ logger.debug("ConfigureTracks validation error: must have assigned at least one input port to a track.");
+ context.JK.Banner.showAlert('Must have assigned at least one input port to a track.');
+ return false;
+ }
+
+ context._.each(tracks.tracks, function(track) {
+ if(!track.instrument_id) {
+ logger.debug("ConfigureTracks validation error: all tracks with ports assigned must specify an instrument.");
+ context.JK.Banner.showAlert('All tracks with ports assigned must specify an instrument.');
+ return false;
+ }
+ });
+
+ return true;
+ }
+
+ function save(tracks) {
+
+ context._.each(tracks.unassignedChannels, function(unassignedChannelId) {
+ context.jamClient.TrackSetAssignment(unassignedChannelId, true, ASSIGNMENT.UNASSIGNED);
+ });
+
+ context._.each(tracks.tracks, function(track, index) {
+
+ var trackNumber = index + 1;
+
+ context._.each(track.channels, function(channelId) {
+ context.jamClient.TrackSetAssignment(channelId, true, trackNumber);
+
+ });
+ context.jamClient.TrackSetInstrument(trackNumber, track.instrument_id);
+ });
+
+ context.jamClient.TrackSaveAssignments();
+ }
+
+ function handleNext() {
+ var tracks = trackAssociations();
+
+ if(!validate(tracks)) {
+ return false;
+ }
+
+ save(tracks);
+
+ return true;
+ }
function beforeShow() {
-
loadChannels();
}
function unassignChannel($channel) {
var $originallyAssignedTrack = $channel.closest('.track-target');
$unassignedChannelsHolder.append($channel);
- $originallyAssignedTrack.attr('track-count', $originallyAssignedTrack.find('.ftue-input').length)
+ $originallyAssignedTrack.attr('track-count', $originallyAssignedTrack.find('.ftue-input:not(.ui-draggable-dragging)').length)
}
function addChannelToTrack($channel, $track) {
var $originallyAssignedTrack = $channel.closest('.track-target');
$track.append($channel);
- $track.attr('track-count', $track.find('.ftue-input').length);
- $originallyAssignedTrack.attr('track-count', $originallyAssignedTrack.find('.ftue-input').length)
+ $track.attr('track-count', $track.find('.ftue-input:not(.ui-draggable-dragging)').length);
+ $originallyAssignedTrack.attr('track-count', $originallyAssignedTrack.find('.ftue-input:not(.ui-draggable-dragging)').length)
}
function initializeUnassignedDroppable() {
@@ -95,9 +181,8 @@
activeClass: 'drag-in-progress',
hoverClass: 'drag-hovering',
drop: function( event, ui ) {
- console.log("event, ui", event, ui)
var $channel = ui.draggable;
- $channel.css('left', '0').css('top', '0');
+ //$channel.css('left', '0').css('top', '0');
unassignChannel($channel);
}
});
@@ -115,12 +200,22 @@
drop: function( event, ui ) {
var $track = $(this);
var $channel = ui.draggable;
- $channel.css('left', '0').css('top', '0');
+ //$channel.css('left', '0').css('top', '0');
addChannelToTrack($channel, $track);
}
});
}
}
+
+ function initializeInstrumentDropdown() {
+ var i;
+ for(i = 0; i < MAX_TRACKS; i++) {
+ var $instrumentSelect = context.JK.iconInstrumentSelect();
+ $instrumentSelect.attr('data-num', i);
+ $instrumentsHolder.append($instrumentSelect);
+ }
+ }
+
function initialize(_$step) {
$step = _$step;
@@ -128,12 +223,15 @@
$templateTrackTarget = $('#template-track-target');
$unassignedChannelsHolder = $step.find('.unassigned-channels');
$tracksHolder = $step.find('.tracks');
+ $instrumentsHolder = $step.find('.instruments');
initializeUnassignedDroppable();
initializeTrackDroppables();
+ initializeInstrumentDropdown();
}
+ this.handleNext = handleNext;
this.beforeShow = beforeShow;
this.initialize = initialize;
diff --git a/web/app/assets/javascripts/gear/step_select_gear.js b/web/app/assets/javascripts/gear/step_select_gear.js
index 4b97529ee..5a14006df 100644
--- a/web/app/assets/javascripts/gear/step_select_gear.js
+++ b/web/app/assets/javascripts/gear/step_select_gear.js
@@ -149,7 +149,7 @@
deviceInfo.id = device.guid;
deviceInfo.type = determineDeviceType(device.guid, device.display_name);
- console.log("deviceInfo.type: " + deviceInfo.type)
+ logger.debug("deviceInfo.type: " + deviceInfo.type)
deviceInfo.displayType = audioDeviceBehavior[deviceInfo.type].display;
deviceInfo.displayName = device.display_name;
@@ -727,7 +727,7 @@
// prod the user to watch the video if the input or output changes type
- console.log("selectedDeviceInfo", selectedDeviceInfo);
+ logger.debug("selectedDeviceInfo", selectedDeviceInfo);
}
function changeDevice() {
diff --git a/web/app/assets/javascripts/jam_rest.js b/web/app/assets/javascripts/jam_rest.js
index 3334d5c38..8a092562f 100644
--- a/web/app/assets/javascripts/jam_rest.js
+++ b/web/app/assets/javascripts/jam_rest.js
@@ -989,12 +989,19 @@
};
function createDiagnostic(options) {
+ var data = null;
+ try {
+ data = JSON.stringify(options)
+ }
+ catch(e) {
+ data = JSON.stringify({data_error: "unable to JSON.stringify debug data:" + e.toString()})
+ }
return $.ajax({
type: "POST",
url: '/api/diagnostics',
dataType: "json",
contentType: 'application/json',
- data: JSON.stringify(options)
+ data: data,
});
}
diff --git a/web/app/assets/javascripts/profile.js b/web/app/assets/javascripts/profile.js
index a8b15cdd0..b8e2a5810 100644
--- a/web/app/assets/javascripts/profile.js
+++ b/web/app/assets/javascripts/profile.js
@@ -614,7 +614,7 @@
var instrument = musician.instruments[j];
var inst = '/assets/content/icon_instrument_default24.png';
if (instrument.instrument_id in instrument_logo_map) {
- inst = instrument_logo_map[instrument.instrument_id];
+ inst = instrument_logo_map[instrument.instrument_id].asset;
}
instrumentLogoHtml += ' ';
}
diff --git a/web/app/assets/javascripts/searchResults.js b/web/app/assets/javascripts/searchResults.js
index 1af9398e5..ddea50655 100644
--- a/web/app/assets/javascripts/searchResults.js
+++ b/web/app/assets/javascripts/searchResults.js
@@ -226,7 +226,7 @@
for (var i=0; i < instruments.length; i++) {
var inst = '../assets/content/icon_instrument_default24.png';
if (instruments[i].instrument_id in instrument_logo_map) {
- inst = instrument_logo_map[instruments[i].instrument_id];
+ inst = instrument_logo_map[instruments[i].instrument_id].asset;
instrumentLogoHtml += ' ';
}
}
diff --git a/web/app/assets/javascripts/sessionList.js b/web/app/assets/javascripts/sessionList.js
index 6563f8544..456ee9c02 100644
--- a/web/app/assets/javascripts/sessionList.js
+++ b/web/app/assets/javascripts/sessionList.js
@@ -93,7 +93,7 @@
logger.debug("Find:Finding instruments. Participant tracks:", participant.tracks);
var inst = '../assets/content/icon_instrument_default24.png';
if (track.instrument_id in instrument_logo_map) {
- inst = instrument_logo_map[track.instrument_id];
+ inst = instrument_logo_map[track.instrument_id].asset;
}
instrumentLogoHtml += ' ';
}
diff --git a/web/app/assets/javascripts/utils.js b/web/app/assets/javascripts/utils.js
index e45ef62ec..eb58ab543 100644
--- a/web/app/assets/javascripts/utils.js
+++ b/web/app/assets/javascripts/utils.js
@@ -86,11 +86,54 @@
$.each(context._.keys(icon_map_base), function (index, instrumentId) {
var icon = icon_map_base[instrumentId];
- instrumentIconMap24[instrumentId] = "/assets/content/icon_instrument_" + icon + "24.png";
- instrumentIconMap45[instrumentId] = "/assets/content/icon_instrument_" + icon + "45.png";
- instrumentIconMap256[instrumentId] = "/assets/content/icon_instrument_" + icon + "256.png";
+ instrumentIconMap24[instrumentId] = {asset: "/assets/content/icon_instrument_" + icon + "24.png", name: instrumentId};
+ instrumentIconMap45[instrumentId] = {asset: "/assets/content/icon_instrument_" + icon + "45.png", name: instrumentId};
+ instrumentIconMap256[instrumentId] = {asset: "/assets/content/icon_instrument_" + icon + "256.png", name: instrumentId};
});
+ context.JK.iconInstrumentSelect = function() {
+ var $select = $(context._.template($('#template-icon-instrument-select').html(), {instruments:instrumentIconMap24}, { variable: 'data' }));
+ var $ul = $select.find('ul');
+ var $currentInstrument = $select.find('.current-instrument');
+
+ context.JK.hoverBubble($currentInstrument, $ul.html(), {
+ trigger:'click',
+ cssClass: 'icon-instrument-selector-popup',
+ spikeGirth:0,
+ spikeLength:0,
+ width:150,
+ closeWhenOthersOpen: true,
+ preShow: function() {
+ },
+ postShow:function(container) {
+ $(container).find('li').click(onInstrumentSelected)
+ }});
+
+ function select(instrument_id) {
+ $currentInstrument.empty();
+ $currentInstrument.removeClass('none');
+ $currentInstrument.append('
');
+ }
+ function close() {
+ $currentInstrument.btOff();
+ }
+
+ function onInstrumentSelected() {
+ var $li = $(this);
+ var instrument_id = $li.attr('data-instrument-id');
+
+ select(instrument_id);
+ close();
+ $select.data('instrument_id', instrument_id);
+ $select.triggerHandler('instrument_selected', {instrument_id: instrument_id});
+ return false;
+ };
+
+ $currentInstrument.text('?');
+
+ return $select;
+ }
+
/**
* Associates a help bubble on hover (by default) with the specified $element, using jquery.bt.js (BeautyTips)
* @param $element The element that should show the help when hovered
@@ -366,26 +409,26 @@
context.JK.getInstrumentIcon24 = function (instrument) {
if (instrument in instrumentIconMap24) {
- return instrumentIconMap24[instrument];
+ return instrumentIconMap24[instrument].asset;
}
- return instrumentIconMap24["default"];
+ return instrumentIconMap24["default"].asset;
};
context.JK.getInstrumentIcon45 = function (instrument) {
if (instrument in instrumentIconMap45) {
- return instrumentIconMap45[instrument];
+ return instrumentIconMap45[instrument].asset;
}
- return instrumentIconMap45["default"];
+ return instrumentIconMap45["default"].asset;
};
context.JK.getInstrumentIcon256 = function (instrument) {
if (instrument in instrumentIconMap256) {
- return instrumentIconMap256[instrument];
+ return instrumentIconMap256[instrument].asset;
}
- return instrumentIconMap256["default"];
+ return instrumentIconMap256["default"].asset;
};
// meant to pass in a bunch of images with an instrument-id attribute on them.
diff --git a/web/app/assets/stylesheets/client/client.css b/web/app/assets/stylesheets/client/client.css
index 844f9ca42..b01a9bd31 100644
--- a/web/app/assets/stylesheets/client/client.css
+++ b/web/app/assets/stylesheets/client/client.css
@@ -46,6 +46,7 @@
*= require ./textMessageDialog
*= require ./acceptFriendRequestDialog
*= require ./launchAppDialog
+ *= require ./iconInstrumentSelect
*= require ./terms
*= require ./createSession
*= require ./feed
diff --git a/web/app/assets/stylesheets/client/gearWizard.css.scss b/web/app/assets/stylesheets/client/gearWizard.css.scss
index 82d262344..c0367d69f 100644
--- a/web/app/assets/stylesheets/client/gearWizard.css.scss
+++ b/web/app/assets/stylesheets/client/gearWizard.css.scss
@@ -366,11 +366,27 @@
.wizard-step[layout-wizard-step="2"] {
.wizard-step-content .wizard-step-column {
width:25%;
+
+
+ &:nth-of-type(3) {
+ width:40%;
+ }
+
+
+ &:nth-of-type(4) {
+ width:10%;
+ }
+ }
+
+ .icon-instrument-select {
+ padding:3px 0; // to combine 24 of .current-instrument + 3x on either side
+ margin:0 auto 15px; // 15 margin-bottom to match tracks on the left
+ width:30px;
}
.unassigned-channels {
min-height:240px;
- overflow-y:scroll;
+ overflow-y:auto;
//padding-right:18px; // to keep draggables off of scrollbar. maybe necessary
&.drag-in-progress {
@@ -391,7 +407,7 @@
position:absolute;
}
.track {
-
+ margin-bottom: 15px;
.track-target {
&.possible-target {
border-color:white;
@@ -404,6 +420,7 @@
.ftue-input {
+ font-size:12px;
cursor: move;
padding: 4px;
border: solid 1px #999;
@@ -412,11 +429,14 @@
overflow:hidden;
text-align:left;
direction:rtl;
- font-size:12px;
-
+ text-overflow:ellipses;
&.ui-draggable-dragging{
margin-bottom:0;
}
+
+ &:hover {
+ color:white;
+ }
}
.track-target {
@@ -425,7 +445,6 @@
padding: 4px;
border: solid 1px #999;
margin-left: 15px;
- margin-bottom: 15px;
height:20px;
overflow:hidden;
@@ -444,15 +463,26 @@
}
}
- &[track-count="2"]:not(.drag-in-progress) {
+ .placeholder {
+ display:none;
+ font-size:12px;
+ }
+
+ &[track-count="0"] {
+ .placeholder {
+ display:inline;
+ }
+ }
+
+ &[track-count="2"] {
.ftue-input {
width:50%;
display:inline-block;
}
- .ftue-input:nth-child(1)::before {
- content: ' , '
- }
- ;
+ /**.ftue-input:nth-child(1)::before {
+ content: ',';
+ padding-right:3px;
+ }*/
}
}
}
diff --git a/web/app/assets/stylesheets/client/iconInstrumentSelect.css.scss b/web/app/assets/stylesheets/client/iconInstrumentSelect.css.scss
new file mode 100644
index 000000000..601222f00
--- /dev/null
+++ b/web/app/assets/stylesheets/client/iconInstrumentSelect.css.scss
@@ -0,0 +1,47 @@
+.icon-instrument-select {
+ .current-instrument {
+ width:24px;
+ height:24px;
+ font-size:20px;
+ cursor:pointer;
+
+ &.none {
+ height:22px;
+ width:22px;
+ border:1px solid white;
+ -webkit-border-radius:12px;
+ -moz-border-radius:12px;
+ border-radius:12px;
+ line-height:22px;
+ vertical-align: middle;
+ text-align:center;
+ }
+ }
+ ul {
+ display:none;
+ border:1px solid white;
+ max-height:250px;
+ position:absolute;
+ overflow:auto;
+ width:150px;
+ background-color:#333;
+ text-align:left;
+ }
+}
+
+.icon-instrument-selector-popup {
+ .bt-content {
+ height:150px;
+ width:150px;
+ background-color:#333;
+ text-align:left;
+ overflow:auto;
+ border:1px solid #ED3618;
+
+ li {
+ margin-left:5px;
+ list-style-type: none;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/web/app/assets/stylesheets/client/sidebar.css.scss b/web/app/assets/stylesheets/client/sidebar.css.scss
index 9491f54c0..ff21873e4 100644
--- a/web/app/assets/stylesheets/client/sidebar.css.scss
+++ b/web/app/assets/stylesheets/client/sidebar.css.scss
@@ -206,7 +206,7 @@
.chat-message-sender {
font-weight:bold;
margin-right:10px;
- color: #020C81;
+ color: #ED3618;
&:after {
content:':'
diff --git a/web/app/views/clients/_iconInstrumentSelect.html.haml b/web/app/views/clients/_iconInstrumentSelect.html.haml
new file mode 100644
index 000000000..50ba7271d
--- /dev/null
+++ b/web/app/views/clients/_iconInstrumentSelect.html.haml
@@ -0,0 +1,12 @@
+%script{type: 'text/template', id: 'template-icon-instrument-select'}
+ .icon-instrument-select
+ .current-instrument.none
+ %a.arrow-down
+ %ul
+ = '{% _.each(data.instruments, function(instrument, instrumentId) { %}'
+ %li{'data-instrument-id' => '{{instrumentId}}'}
+ %a{href:'#'}
+ %img{src: '{{instrument.asset}}'}
+ = '{{instrument.name}}'
+ = '{% }) %}'
+
diff --git a/web/app/views/clients/gear/_gear_wizard.html.haml b/web/app/views/clients/gear/_gear_wizard.html.haml
index e91229d2c..7aeaa2e4c 100644
--- a/web/app/views/clients/gear/_gear_wizard.html.haml
+++ b/web/app/views/clients/gear/_gear_wizard.html.haml
@@ -148,7 +148,8 @@
%h2 Track Input Port(s)
.tracks
.wizard-step-column
- %h2 Track Instrument
+ %h2 Instrument
+ .instruments
.wizard-step{ 'layout-wizard-step' => "3", 'dialog-title' => "Configure Voice Chat", 'dialog-purpose' => "ConfigureVoiceChat" }
.ftuesteps
@@ -245,9 +246,10 @@
= '{{data.name}}'
%script{type: 'text/template', id: 'template-assignable-port'}
- .ftue-input{id: '{{data.id}}'} {{data.name}}
+ .ftue-input{'data-input-id' => '{{data.id}}'} {{data.name}}
%script{type: 'text/template', id: 'template-track-target'}
.track{'data-num' => '{{data.num}}'}
.num {{data.num + 1}}:
- .track-target{'data-num' => '{{data.num}}'}
+ .track-target{'data-num' => '{{data.num}}', 'track-count' => 0}
+ %span.placeholder None
diff --git a/web/app/views/clients/index.html.erb b/web/app/views/clients/index.html.erb
index 9b1b8cbfc..ee8f3bbae 100644
--- a/web/app/views/clients/index.html.erb
+++ b/web/app/views/clients/index.html.erb
@@ -18,6 +18,7 @@
<%= render "vu_meters" %>
<%= render "ftue" %>
<%= render "jamServer" %>
+<%= render "iconInstrumentSelect" %>
<%= render "clients/gear/gear_wizard" %>
<%= render "terms" %>
<%= render "leaveSessionWarning" %>