* wip
This commit is contained in:
parent
cc3d48ed0a
commit
ebe1278e5e
|
|
@ -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" /> ';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 + '"/>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 + '"/>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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" /> ';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" /> ';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" /> ';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@
|
|||
*= require ./textMessageDialog
|
||||
*= require ./acceptFriendRequestDialog
|
||||
*= require ./launchAppDialog
|
||||
*= require ./iconInstrumentSelect
|
||||
*= require ./terms
|
||||
*= require ./createSession
|
||||
*= require ./feed
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -206,7 +206,7 @@
|
|||
.chat-message-sender {
|
||||
font-weight:bold;
|
||||
margin-right:10px;
|
||||
color: #020C81;
|
||||
color: #ED3618;
|
||||
|
||||
&:after {
|
||||
content:':'
|
||||
|
|
|
|||
|
|
@ -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}}'
|
||||
= '{% }) %}'
|
||||
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
<%= render "vu_meters" %>
|
||||
<%= render "ftue" %>
|
||||
<%= render "jamServer" %>
|
||||
<%= render "iconInstrumentSelect" %>
|
||||
<%= render "clients/gear/gear_wizard" %>
|
||||
<%= render "terms" %>
|
||||
<%= render "leaveSessionWarning" %>
|
||||
|
|
|
|||
Loading…
Reference in New Issue