This commit is contained in:
Seth Call 2014-05-14 15:12:42 -05:00
parent cc3d48ed0a
commit ebe1278e5e
17 changed files with 282 additions and 41 deletions

View File

@ -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 += '<img src="' + inst + '" width="24" height="24" />&nbsp;';
}

View File

@ -97,7 +97,7 @@
for (var kk=0, klen=iter_pinstruments.length; kk<klen; kk++) {
var pinstr = iter_pinstruments[kk];
if (pinstr in instrument_logo_map) {
instr = instrument_logo_map[pinstr];
instr = instrument_logo_map[pinstr].asset;
}
player_instrs += '<img src="' + instr + '"/>';
}

View File

@ -100,7 +100,7 @@
instr_logos = '';
for (var jj=0, ilen=musician['instruments'].length; jj<ilen; jj++) {
if (musician['instruments'][jj].instrument_id in instrument_logo_map) {
instr = instrument_logo_map[musician['instruments'][jj].instrument_id];
instr = instrument_logo_map[musician['instruments'][jj].instrument_id].asset;
}
instr_logos += '<img src="' + instr + '"/>';
}

View File

@ -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;

View File

@ -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() {

View File

@ -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,
});
}

View File

@ -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 += '<img src="' + inst + '" width="24" height="24" />&nbsp;';
}

View File

@ -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 += '<img src="' + inst + '" width="24" height="24" />&nbsp;';
}
}

View File

@ -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 += '<img src="' + inst + '" width="24" height="24" />&nbsp;';
}

View File

@ -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('<img src="' + instrumentIconMap24[instrument_id].asset + '" />');
}
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.

View File

@ -46,6 +46,7 @@
*= require ./textMessageDialog
*= require ./acceptFriendRequestDialog
*= require ./launchAppDialog
*= require ./iconInstrumentSelect
*= require ./terms
*= require ./createSession
*= require ./feed

View File

@ -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;
}*/
}
}
}

View File

@ -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;
}
}
}

View File

@ -206,7 +206,7 @@
.chat-message-sender {
font-weight:bold;
margin-right:10px;
color: #020C81;
color: #ED3618;
&:after {
content:':'

View File

@ -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}}'
= '{% }) %}'

View File

@ -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

View File

@ -18,6 +18,7 @@
<%= render "vu_meters" %>
<%= render "ftue" %>
<%= render "jamServer" %>
<%= render "iconInstrumentSelect" %>
<%= render "clients/gear/gear_wizard" %>
<%= render "terms" %>
<%= render "leaveSessionWarning" %>