VRFS-234. Wire up main volume slider.
This commit is contained in:
Jonathon Wilson
parent
4bdc3b0859
commit
bc27cc1117
|
|
@ -77,14 +77,18 @@
|
|||
// Session Functions
|
||||
function SessionAddTrack() {}
|
||||
function SessionGetControlState(mixerIds) {
|
||||
var groups = [0, 2, 7, 9];
|
||||
var groups = [0, 1, 2, 3, 7, 9];
|
||||
var names = [
|
||||
"FW AP Multi",
|
||||
"FW AP Multi",
|
||||
"FW AP Multi",
|
||||
"FW AP Multi",
|
||||
"",
|
||||
""
|
||||
];
|
||||
var clientIds = [
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"3933ebec-913b-43ab-a4d3-f21dc5f8955b",
|
||||
|
|
@ -113,7 +117,9 @@
|
|||
function SessionGetIDs() {
|
||||
return [
|
||||
"FW AP Multi_0_10000",
|
||||
"FW AP Multi_1_10100",
|
||||
"FW AP Multi_2_10200",
|
||||
"FW AP Multi_3_10500",
|
||||
"User@208.191.152.98#",
|
||||
"User@208.191.152.98_*"
|
||||
];
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@
|
|||
var mixers = [];
|
||||
var $draggingFaderHandle = null;
|
||||
var $draggingFader = null;
|
||||
var $draggingVolumeHandle = null;
|
||||
var $draggingVolume = null;
|
||||
var currentMixerId = null;
|
||||
var currentMixerRangeMin = null;
|
||||
var currentMixerRangeMax = null;
|
||||
|
|
@ -137,6 +139,8 @@
|
|||
_updateMixers();
|
||||
_fixClientIds();
|
||||
_renderTracks();
|
||||
_wireTopVolume();
|
||||
_addVoiceChat();
|
||||
}
|
||||
|
||||
// Get the latest list of underlying audio mixer channels
|
||||
|
|
@ -165,6 +169,22 @@
|
|||
return foundParticipant; // no matching participant
|
||||
}
|
||||
|
||||
function _wireTopVolume() {
|
||||
var $volumeSlider = $('#volume');
|
||||
$.each(mixers, function(index, mixer) {
|
||||
if (mixer.group_id === 0) { // master
|
||||
$volumeSlider.attr('master-id', mixer.id);
|
||||
}
|
||||
if (mixer.group_id === 1) { // monitor
|
||||
$volumeSlider.attr('monitor-id', mixer.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _addVoiceChat() {
|
||||
logger.debug("TODO: If user has a voice chat input defined, add controls and wire them up.");
|
||||
}
|
||||
|
||||
function _renderTracks() {
|
||||
$.each(mixers, function(index, mixer) {
|
||||
// Only handle local music input and peer music here.
|
||||
|
|
@ -314,6 +334,7 @@
|
|||
_toggleAudioMute(mixerId, muting);
|
||||
}
|
||||
|
||||
// TODO rename to getVerticalFaderPercent
|
||||
function getFaderPercent(eventY, $fader) {
|
||||
var faderPosition = $fader.offset();
|
||||
var faderHeight = $fader.height();
|
||||
|
|
@ -328,6 +349,21 @@
|
|||
return faderPct;
|
||||
}
|
||||
|
||||
// TODO rename to getHorizontalFaderPercent
|
||||
function getHorizontalFaderPercent(eventX, $fader) {
|
||||
var faderPosition = $fader.offset();
|
||||
var faderWidth = $fader.width();
|
||||
var handleValue = (eventX - faderPosition.left);
|
||||
var faderPct = Math.round(handleValue/faderWidth * 100);
|
||||
if (faderPct < 0) {
|
||||
faderPct = 0;
|
||||
}
|
||||
if (faderPct > 100) {
|
||||
faderPct = 100;
|
||||
}
|
||||
return faderPct;
|
||||
}
|
||||
|
||||
function fillTrackVolumeObject(mixerId) {
|
||||
var mixer = null;
|
||||
for (var i=0; i<mixers.length; i++) {
|
||||
|
|
@ -416,13 +452,72 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
function volumeClick(evt) {
|
||||
evt.stopPropagation();
|
||||
if ($draggingVolumeHandle) {
|
||||
return;
|
||||
}
|
||||
var $volume = $(evt.currentTarget);
|
||||
var $handle = $volume.find('div.slider-volume');
|
||||
var faderPct = getHorizontalFaderPercent(evt.clientX, $volume);
|
||||
var masterId = $volume.attr('master-id');
|
||||
var monitorId = $volume.attr('monitor-id');
|
||||
fillTrackVolumeObject(masterId);
|
||||
setMixerVolume(masterId, faderPct);
|
||||
fillTrackVolumeObject(monitorId);
|
||||
setMixerVolume(monitorId, faderPct);
|
||||
if (faderPct > 90) { faderPct = 90; } // Visual limit
|
||||
$handle.css('left', faderPct + '%');
|
||||
return false;
|
||||
}
|
||||
|
||||
function volumeHandleDown(evt) {
|
||||
evt.stopPropagation();
|
||||
$draggingVolumeHandle = $(evt.currentTarget);
|
||||
$draggingVolume = $('#volume');
|
||||
currentMixerId = $draggingVolume.attr('master-id');
|
||||
fillTrackVolumeObject(currentMixerId);
|
||||
return false;
|
||||
}
|
||||
|
||||
function volumeMouseUp(evt) {
|
||||
evt.stopPropagation();
|
||||
if ($draggingVolumeHandle) {
|
||||
$draggingVolumeHandle = null;
|
||||
$draggingVolume = null;
|
||||
currentMixerId = null;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function volumeMouseMove(evt) {
|
||||
// bail out early if there's no in-process drag
|
||||
if (!($draggingVolumeHandle)) {
|
||||
return false;
|
||||
}
|
||||
evt.stopPropagation();
|
||||
var faderPct = getHorizontalFaderPercent(evt.clientX, $draggingVolume);
|
||||
setMixerVolume(currentMixerId, faderPct);
|
||||
// TODO - this could use attention:
|
||||
var monitorId = $draggingVolume.attr('monitor-id');
|
||||
setMixerVolume(monitorId, faderPct);
|
||||
if (faderPct > 90) { faderPct = 90; } // Visual limit
|
||||
$draggingVolumeHandle.css('left', faderPct + '%');
|
||||
return false;
|
||||
}
|
||||
|
||||
function events() {
|
||||
$('#session-contents').on("click", '[action="delete"]', deleteSession);
|
||||
$('#tracks').on('click', 'div[control="mute"]', toggleMute);
|
||||
$('#tracks').on('click', 'div[control="fader"]', faderClick);
|
||||
$('#tracks').on('mousedown', 'div[control="fader-handle"]', faderHandleDown);
|
||||
$('body').on('mouseup', tracksMouseUp);
|
||||
$('#tracks').on('mousemove', tracksMouseMove);
|
||||
$('body').on('mouseup', tracksMouseUp);
|
||||
|
||||
$('#volume').on('click', volumeClick);
|
||||
$('#volume').on('mousedown', '.slider-volume', volumeHandleDown);
|
||||
$('body').on('mousemove', volumeMouseMove);
|
||||
$('body').on('mouseup', volumeMouseUp);
|
||||
}
|
||||
|
||||
this.initialize = function() {
|
||||
|
|
|
|||
|
|
@ -13,28 +13,7 @@
|
|||
background-color:#4c4c4c;
|
||||
min-height:20px;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
#volume {
|
||||
position:relative;
|
||||
font-size:12px;
|
||||
margin-top:5px;
|
||||
margin-left:12px;
|
||||
color:#ccc;
|
||||
float:left;
|
||||
width:120px;
|
||||
/*background-image:url(../images/content/bkg_volume.png);*/
|
||||
background-image: url('/assets/content/bkg_volume.png');
|
||||
background-position:right;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
.slider-volume {
|
||||
position:absolute;
|
||||
top:2px;
|
||||
right:30px;
|
||||
width:8px;
|
||||
height:17px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -122,16 +101,22 @@ table.vu td {
|
|||
/* Just bringing in Jeff's session.css file in entirety below */
|
||||
|
||||
|
||||
.volume {
|
||||
position:relative;
|
||||
.master-volume-label {
|
||||
font-size:12px;
|
||||
position:absolute;
|
||||
left: 210px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
#volume {
|
||||
position:absolute;
|
||||
top: 15px;
|
||||
left: 264px;
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
font-size:12px;
|
||||
margin-top:5px;
|
||||
margin-left:12px;
|
||||
color:#ccc;
|
||||
float:left;
|
||||
width:120px;
|
||||
background-image:url(../images/content/bkg_volume.png);
|
||||
background-position:right;
|
||||
background-image: url('/assets/content/bkg_volume.png');
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@
|
|||
<%= image_tag "content/icon_share.png", {:align => "texttop"} %>
|
||||
SHARE
|
||||
</a>
|
||||
<div id="volume">VOLUME
|
||||
<div class="master-volume-label">VOLUME</div>
|
||||
<div id="volume" master-id="" monitor-id="">
|
||||
<div class="slider-volume">
|
||||
<%= image_tag "content/slider_volume.png", {:height => 17, :width => 8} %>
|
||||
</div>
|
||||
|
|
@ -63,7 +64,17 @@
|
|||
</div>
|
||||
|
||||
<!-- live tracks scroller -->
|
||||
<div class="session-tracks-scroller" id="session-livetracks-container">
|
||||
<div class="session-tracks-scroller">
|
||||
<div id="session-livetracks-container">
|
||||
</div>
|
||||
<br clear="all" />
|
||||
<!-- make a recording -->
|
||||
<div class="recording">
|
||||
<a href="#">
|
||||
<%= image_tag "content/recordbutton-off.png", {:width => 20, :height => 20, :align => "absmiddle"} %> Make a Recording
|
||||
</a>
|
||||
</div>
|
||||
<!-- end make a recording -->
|
||||
</div> <!-- end session-tracks-scroller -->
|
||||
</div> <!-- end session-livetracks -->
|
||||
|
||||
|
|
@ -178,3 +189,38 @@
|
|||
</tr>
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="template-voicechat">
|
||||
<!-- voice chat box -->
|
||||
<div class="voicechat">
|
||||
<div class="voicechat-label">CHAT</div>
|
||||
<!-- voice chat gain -->
|
||||
<div class="voicechat-gain">
|
||||
<div class="voicechat-gain-wrapper">
|
||||
<!-- voice chat gain slider -->
|
||||
<div class="voicechat-gain-slider">
|
||||
<%= image_tag "content/slider_gain_horiz.png", {:width => 10, :height => 18} %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- mute icon -->
|
||||
<div class="voicechat-mute">
|
||||
<%= image_tag "content/icon_mute.png", {:width => 20, :height => 18} %>
|
||||
</div>
|
||||
<!-- settings icon -->
|
||||
<div class="voicechat-settings">
|
||||
<%= image_tag "content/sicon_settings_lg.png", {:width => 18, :height => 18} %>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end voice chat -->
|
||||
</script>
|
||||
|
||||
<script type="text/template" id="template-makerecording">
|
||||
<!-- make a recording -->
|
||||
<div class="recording">
|
||||
<a href="#">
|
||||
<img src="images/content/recordbutton-off.png" width="20" height="20" align="absmiddle" /> Make a Recording</a>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- end make a recording -->
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue