Clean up and adjust session UI to display metronome tempos and click sound. Update client.
Style updates to fit selects and default to 120 bpm.
This commit is contained in:
Steven Miers
parent
4741312294
commit
0d9bd33eb7
|
|
@ -736,6 +736,7 @@
|
|||
}
|
||||
|
||||
function SessionOpenMetronome(bpm, click, meter, mode){
|
||||
console.log("Setting metronome BPM: ", bpm)
|
||||
metronomeActive =true
|
||||
metronomeBPM = bpm
|
||||
metronomeSound = click
|
||||
|
|
@ -743,8 +744,8 @@
|
|||
}
|
||||
|
||||
//change setting - click. Mode 0: = mono, 1, = left ear, 2= right ear
|
||||
function SessionSetMetronome(bmp, click,meter, mode){
|
||||
SessionOpenMetronome(bmp, click, meter, mode)
|
||||
function SessionSetMetronome(bpm,click,meter, mode){
|
||||
SessionOpenMetronome(bpm, click, meter, mode)
|
||||
}
|
||||
|
||||
//close everywhere
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
context.JK = context.JK || {};
|
||||
context.JK.SessionScreen = function(app) {
|
||||
var TEMPOS = context.JK.TEMPOS;
|
||||
var EVENTS = context.JK.EVENTS;
|
||||
var MIX_MODES = context.JK.MIX_MODES;
|
||||
var NAMED_MESSAGES = context.JK.NAMED_MESSAGES;
|
||||
|
|
@ -500,7 +501,6 @@
|
|||
}
|
||||
|
||||
function renderSession() {
|
||||
console.log("RENDERING SESSION")
|
||||
$('#session-mytracks-container').empty();
|
||||
$('.session-track').remove(); // Remove previous tracks
|
||||
var $voiceChat = $('#voice-chat');
|
||||
|
|
@ -676,7 +676,6 @@
|
|||
//logger.debug("clientId", clientId, "groupIds", groupIds, "mixers", mixers)
|
||||
var foundMixers = {};
|
||||
var mixers = mixMode == MIX_MODES.MASTER ? masterMixers : personalMixers;
|
||||
// console.log("_groupedMixersForClientId", mixers)
|
||||
$.each(mixers, function(index, mixer) {
|
||||
if (mixer.client_id === clientId) {
|
||||
for (var i=0; i<groupIds.length; i++) {
|
||||
|
|
@ -813,7 +812,7 @@
|
|||
}
|
||||
|
||||
function _renderLocalMediaTracks() {
|
||||
console.log("_renderLocalMediaTracks!!!")
|
||||
//console.log("_renderLocalMediaTracks")
|
||||
// local media mixers come in different groups (MediaTrack, JamTrack, Metronome), but peer mixers are always PeerMediaTrackGroup
|
||||
var localMediaMixers = _mixersForGroupIds([ChannelGroupIds.MediaTrackGroup, ChannelGroupIds.JamTrackGroup, ChannelGroupIds.MetronomeGroup], MIX_MODES.MASTER);
|
||||
var peerLocalMediaMixers = _mixersForGroupId(ChannelGroupIds.PeerMediaTrackGroup, MIX_MODES.MASTER);
|
||||
|
|
@ -844,18 +843,15 @@
|
|||
|
||||
if(mediaType == 'RecordingTrack') {
|
||||
recordingTrackMixers.push(mixer)
|
||||
}
|
||||
else if(mediaType == 'PeerMediaTrack') {
|
||||
} else if(mediaType == 'PeerMediaTrack') {
|
||||
// BackingTrack
|
||||
backingTrackMixers.push(mixer);
|
||||
}
|
||||
else if(mediaType == 'MetronomeTrack') {
|
||||
} else if(mediaType == 'MetronomeTrack') {
|
||||
// Metronome t
|
||||
metronomeTrackMixers.push(mixer);
|
||||
}
|
||||
else if(mediaType == 'JamTrack') {
|
||||
} else if(mediaType == 'JamTrack') {
|
||||
jamTrackMixers.push(mixer);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
console.log("Unknown track type: " + mediaType)
|
||||
adhocTrackMixers.push(mixer);
|
||||
}
|
||||
|
|
@ -1099,20 +1095,40 @@
|
|||
var instrumentIcon = context.JK.getInstrumentIcon45(oneOfTheTracks.instrument_id);
|
||||
var photoUrl = "/assets/content/icon_metronome_small.png";
|
||||
|
||||
// var trackData = {
|
||||
// trackId: oneOfTheTracks.id,
|
||||
// clientId: oneOfTheTracks.client_id,
|
||||
// name: "Tempo",
|
||||
// instrumentIcon: photoUrl,
|
||||
// avatar: instrumentIcon,
|
||||
// latency: "good",
|
||||
// gainPercent: 0,
|
||||
// muteClass: 'hidden',
|
||||
// mixerId: "",
|
||||
// avatarClass : 'avatar-recording',
|
||||
// preMasteredClass: "",
|
||||
// hideVU: true,
|
||||
// faderChanged : tempoFaderChanged,
|
||||
// showMetronomeControls: true
|
||||
// };
|
||||
|
||||
// _addRecordingTrack(trackData);
|
||||
|
||||
|
||||
// Default trackData to participant + no Mixer state.
|
||||
var trackData = {
|
||||
trackId: oneOfTheTracks.id,
|
||||
trackId: "MS" + oneOfTheTracks.id,
|
||||
clientId: oneOfTheTracks.client_id,
|
||||
name: name,
|
||||
instrumentIcon: instrumentIcon,
|
||||
avatar: photoUrl,
|
||||
name: "Volume & Sound",
|
||||
instrumentIcon: photoUrl,
|
||||
avatar: instrumentIcon,
|
||||
latency: "good",
|
||||
gainPercent: 0,
|
||||
muteClass: 'muted',
|
||||
mixerId: "",
|
||||
avatarClass : 'avatar-recording',
|
||||
preMasteredClass: ""
|
||||
preMasteredClass: "",
|
||||
showMetronomeControls: true
|
||||
};
|
||||
|
||||
var gainPercent = percentFromMixerValue(
|
||||
|
|
@ -1128,10 +1144,12 @@
|
|||
trackData.muteMixerId = mixer.id; // the master mixer controls the mute for recordings (no personal controls in either master or personal mode)
|
||||
|
||||
if(sessionModel.isPersonalMixMode() || !isOpener) {
|
||||
trackData.mediaControlsDisabled = true;
|
||||
//trackData.mediaControlsDisabled = true;
|
||||
trackData.mediaTrackOpener = isOpener;
|
||||
}
|
||||
_addRecordingTrack(trackData);
|
||||
|
||||
|
||||
}// if
|
||||
}
|
||||
|
||||
|
|
@ -1463,16 +1481,36 @@
|
|||
}
|
||||
var $track = $(trackSelector);
|
||||
// Set mixer-id attributes and render VU/Fader
|
||||
context.JK.VuHelpers.renderVU(vuLeftSelector, vuOpts);
|
||||
$track.find('.track-vu-left').attr('mixer-id', track.vuMixerId + '_vul').data('groupId', groupId)
|
||||
context.JK.VuHelpers.renderVU(vuRightSelector, vuOpts);
|
||||
$track.find('.track-vu-right').attr('mixer-id', track.vuMixerId + '_vur').data('groupId', groupId)
|
||||
|
||||
if (!track.hideVU) {
|
||||
context.JK.VuHelpers.renderVU(vuLeftSelector, vuOpts);
|
||||
$track.find('.track-vu-left').attr('mixer-id', track.vuMixerId + '_vul').data('groupId', groupId)
|
||||
context.JK.VuHelpers.renderVU(vuRightSelector, vuOpts);
|
||||
$track.find('.track-vu-right').attr('mixer-id', track.vuMixerId + '_vur').data('groupId', groupId)
|
||||
}
|
||||
|
||||
if (track.showMetronomeControls) {
|
||||
$track.find('.metronome-selects').removeClass("hidden")
|
||||
setMetronomeDefaults()
|
||||
} else {
|
||||
$track.find('.metronome-selects').addClass("hidden")
|
||||
}
|
||||
|
||||
// if (track.showMetroSound) {
|
||||
// $track.find('.metro-sound-select').removeClass("hidden")
|
||||
// }
|
||||
|
||||
context.JK.FaderHelpers.renderFader($fader, faderOpts);
|
||||
// Set gain position
|
||||
context.JK.FaderHelpers.setFaderValue(mixerId, gainPercent);
|
||||
$fader.on('fader_change', faderChanged);
|
||||
|
||||
return $track;
|
||||
if(track.faderChanged) {
|
||||
$fader.on('fader_change', track.faderChanged);
|
||||
} else {
|
||||
$fader.on('fader_change', faderChanged);
|
||||
}
|
||||
|
||||
return $track;
|
||||
}
|
||||
|
||||
// Function called on an interval when participants change. Mixers seem to
|
||||
|
|
@ -1643,6 +1681,7 @@
|
|||
if(trackData.mediaControlsDisabled) {
|
||||
$trackIconMute.data('media-controls-disabled', true).data('media-track-opener', trackData.mediaTrackOpener)
|
||||
}
|
||||
|
||||
// is this used?
|
||||
tracks[trackData.trackId] = new context.JK.SessionTrack(trackData.clientId);
|
||||
}
|
||||
|
|
@ -1668,6 +1707,19 @@
|
|||
});
|
||||
}
|
||||
|
||||
// function tempoFaderChanged(e, data) {
|
||||
// var $target = $(this);
|
||||
// var faderId = $target.attr('mixer-id');
|
||||
// var groupId = $target.data('groupId');
|
||||
// var mixerIds = faderId.split(',');
|
||||
// $.each(mixerIds, function(i,v) {
|
||||
// // TODO Interpolate tempo values if we decide to go this way:
|
||||
// if(groupId == ChannelGroupIds.UserMusicInputGroup) {
|
||||
// // there may be other mixers with this same ID in the case of a Peer Music Stream, so update them as well
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
function handleVolumeChangeCallback(mixerId, isLeft, value, isMuted) {
|
||||
// Visually update mixer
|
||||
// There is no need to actually set the back-end mixer value as the
|
||||
|
|
@ -1945,7 +1997,6 @@
|
|||
}
|
||||
|
||||
function sessionResync(evt) {
|
||||
console.log("Calling session resync...")
|
||||
evt.preventDefault();
|
||||
var response = context.jamClient.SessionAudioResync();
|
||||
if (response) {
|
||||
|
|
@ -2097,7 +2148,6 @@
|
|||
|
||||
function openBackingTrackFile(e) {
|
||||
// just ignore the click if they are currently recording for now
|
||||
console.log("opening backing track file")
|
||||
if(sessionModel.recordingModel.isRecording()) {
|
||||
app.notify({
|
||||
"title": "Currently Recording",
|
||||
|
|
@ -2124,8 +2174,8 @@
|
|||
} else {
|
||||
rest.openMetronome({id: sessionModel.id()})
|
||||
.done(function() {
|
||||
context.jamClient.SessionSetMetronome(120, "click");
|
||||
context.JK.CurrentSessionModel.refreshCurrentSession(true);
|
||||
context.JK.CurrentSessionModel.refreshCurrentSession(true)
|
||||
setMetronomeFromForm()
|
||||
})
|
||||
.fail(function(jqXHR) {
|
||||
console.log(jqXHR, jqXHR)
|
||||
|
|
@ -2277,12 +2327,24 @@
|
|||
sessionId);
|
||||
inviteMusiciansUtil.loadFriends();
|
||||
$(friendInput).show();
|
||||
}
|
||||
}
|
||||
|
||||
function onMixerModeChanged(e, data)
|
||||
{
|
||||
function setMetronomeDefaults() {
|
||||
$("select.metro-tempo option[value='120']").attr('selected', 'selected');
|
||||
}
|
||||
|
||||
function setMetronomeFromForm() {
|
||||
var sound = $("select.metro-sound:visible option:selected").val()
|
||||
var tempo = $("select.metro-tempo:visible option:selected").val()
|
||||
context.jamClient.SessionSetMetronome(tempo, sound, 1, 0)
|
||||
}
|
||||
|
||||
function onMetronomeChanged(e, data) {
|
||||
setMetronomeFromForm()
|
||||
}
|
||||
|
||||
function onMixerModeChanged(e, data) {
|
||||
$mixModeDropdown.easyDropDown('select', data.mode, true);
|
||||
|
||||
setTimeout(renderSession, 1);
|
||||
}
|
||||
|
||||
|
|
@ -2301,7 +2363,7 @@
|
|||
return true;
|
||||
}
|
||||
|
||||
function events() {
|
||||
function events() {
|
||||
$('#session-leave').on('click', sessionLeave);
|
||||
$('#session-resync').on('click', sessionResync);
|
||||
$('#session-contents').on("click", '[action="delete"]', deleteSession);
|
||||
|
|
@ -2327,6 +2389,7 @@
|
|||
$(friendInput).focus(function() { $(this).val(''); })
|
||||
$(document).on(EVENTS.MIXER_MODE_CHANGED, onMixerModeChanged)
|
||||
$mixModeDropdown.change(onUserChangeMixMode)
|
||||
$(document).on("change", ".metronome-select", onMetronomeChanged)
|
||||
}
|
||||
|
||||
this.initialize = function(localRecordingsDialogInstance, recordingFinishedDialogInstance, friendSelectorDialog) {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
.track {
|
||||
width:70px;
|
||||
height:290px;
|
||||
height:300px;
|
||||
display:inline-block;
|
||||
margin-right:8px;
|
||||
position:relative;
|
||||
|
|
@ -50,6 +50,9 @@
|
|||
vertical-align:top;
|
||||
}
|
||||
|
||||
.session-recordedtracks-container {
|
||||
//display: block;
|
||||
}
|
||||
|
||||
.recording-controls {
|
||||
display:none;
|
||||
|
|
@ -78,13 +81,19 @@
|
|||
font-size:16px;
|
||||
line-height:100%;
|
||||
margin:0;
|
||||
float:left;
|
||||
|
||||
img {
|
||||
position:relative;
|
||||
top:3px;
|
||||
}
|
||||
}
|
||||
.open-media-file-header {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.use-metronome-header {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.open-media-file-options {
|
||||
font-size:16px;
|
||||
|
|
@ -343,7 +352,7 @@ table.vu td {
|
|||
overflow-x:auto;
|
||||
overflow-y:hidden;
|
||||
width:100%;
|
||||
height:340px;
|
||||
height:370px;
|
||||
float:left;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
|
@ -480,7 +489,7 @@ table.vu td {
|
|||
.track-gain {
|
||||
position:absolute;
|
||||
width:28px;
|
||||
height:83px;
|
||||
height:63px;
|
||||
top:138px;
|
||||
left:23px;
|
||||
background-image:url('/assets/content/bkg_gain_slider.png');
|
||||
|
|
@ -512,6 +521,31 @@ table.vu td {
|
|||
height: 18px;
|
||||
background-image:url('/assets/content/icon_mute.png');
|
||||
background-repeat:no-repeat;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metronome-selects {
|
||||
position: absolute;
|
||||
width: 52px;
|
||||
top:252px;
|
||||
left: 10px;
|
||||
|
||||
height: 18px;
|
||||
text-align: center;
|
||||
//display: block;
|
||||
//padding: 4px;
|
||||
|
||||
select.metronome-select {
|
||||
position: relative;
|
||||
padding: 4px 0px 4px 0px;
|
||||
margin: 0;
|
||||
width: 100% !important;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
//margin: 0 4px 0 4px;
|
||||
background: transparent !important;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.track-icon-mute.muted {
|
||||
|
|
@ -522,12 +556,12 @@ table.vu td {
|
|||
}
|
||||
|
||||
.session-livetracks .track-icon-mute, .session-recordings .track-icon-mute {
|
||||
top:245px;
|
||||
top:225px;
|
||||
}
|
||||
|
||||
.track-icon-settings {
|
||||
position:absolute;
|
||||
top:255px;
|
||||
top:235px;
|
||||
left:28px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -91,4 +91,10 @@ module SessionsHelper
|
|||
current_user.musician? ? 'Musician' : 'Fan'
|
||||
end
|
||||
end
|
||||
|
||||
def metronome_tempos
|
||||
[
|
||||
40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 63, 66, 69, 72, 76, 80, 84, 88, 92, 96, 100, 104, 108, 112, 116, 120, 126, 132, 138, 144, 152, 160, 168, 176, 184, 192, 200, 208
|
||||
]
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -122,7 +122,6 @@
|
|||
<li><a href="#" id="open-a-backingtrack">Audio File</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<br clear="all" />
|
||||
<div class="when-empty use-metronome-header">
|
||||
<%= image_tag "content/icon_metronome.png", {width:22, height:20} %>
|
||||
<a href="#" id="open-a-metronome">Use Metronome</a>
|
||||
|
|
@ -192,7 +191,22 @@
|
|||
</div>
|
||||
<!-- TODO - connection class from curly param -->
|
||||
<div mixer-id="{mixerId}_connection" class="track-connection grey">CONNECTION</div>
|
||||
<div class="disabled-track-overlay"></div>
|
||||
<div class="disabled-track-overlay"></div>
|
||||
<div class="metronome-selects hidden" >
|
||||
<select class="metronome-select metro-sound">
|
||||
<option value="bleep" class="label">bleep</option>
|
||||
<option value="click" class="label">click</option>
|
||||
<option value="drum" class="label">drum</option>
|
||||
</select>
|
||||
<br/>
|
||||
<select class="metronome-select metro-tempo">
|
||||
<%- metronome_tempos.each do |t|%>
|
||||
<option value="<%=t%>" class="label">
|
||||
<%=t%>
|
||||
</option>
|
||||
<%- end %>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue