jam-cloud/app/assets/javascripts/session.js

(function(context,$) {

    "use strict";

    context.JK = context.JK || {};
    context.JK.SessionScreen = function(app) {
        var logger = context.JK.logger;
        var sessionModel = null;
        var sessionId;
        var tracks = {};
        var mixers = [];

        // TODO Consolidate dragged controls and handles
        var $draggingFaderHandle = null;
        var $draggingFader = null;
        var $draggingVolumeHandle = null;
        var $draggingVolume = null;
        var $draggingChatHandle = null;
        var $draggingChat = null;
        var currentMixerIds = null;
        var currentMixerRangeMin = null;
        var currentMixerRangeMax = null;

        var lookingForMixersCount = 0;
        var lookingForMixersTimer = null;
        var lookingForMixers = {};

        var defaultParticipant = {
            tracks: [{
                instrument_id: "unknown"
            }],
            user: {
                first_name: 'Unknown',
                last_name: 'User',
                photo_url: null
            }
        };

        var instrumentIcons = context.JK.getInstrumentIconMap45();

        // Recreate ChannelGroupIDs ENUM from C++
        var ChannelGroupIds = {
            "MasterGroup": 0,
            "MonitorGroup": 1,
            "AudioInputMusicGroup": 2,
            "AudioInputChatGroup": 3,
            "MediaTrackGroup": 4,
            "StreamOutMusicGroup": 5,
            "StreamOutChatGroup": 6,
            "UserMusicInputGroup": 7,
            "UserChatInputGroup": 8,
            "PeerAudioInputMusicGroup": 9
        };

        function beforeShow(data) {
            sessionId = data.id;
            $('#session-mytracks-container').empty();
            $('#session-livetracks-container').empty();
        }

        function afterShow(data) {
            // Subscribe for callbacks on audio events
            context.jamClient.SessionRegisterCallback("JK.HandleBridgeCallback");

            // If you load this page directly, the loading of the current user
            // is happening in parallel. We can't join the session until the
            // current user has been completely loaded. Poll for the current user
            // before proceeding with session joining.
            function checkForCurrentUser() {
                if (context.JK.userMe) {
                    logger.debug("current user loaded. Proceeding to join session.");
                    afterCurrentUserLoaded();
                } else {
                    logger.debug("Current user not loaded yet. Waiting...");
                    context.setTimeout(checkForCurrentUser, 100);
                }
            }
            checkForCurrentUser();
        }

        function afterCurrentUserLoaded() {
            sessionModel = new context.JK.SessionModel(
                context.JK.JamServer,
                context.jamClient,
                context.JK.userMe
            );
            sessionModel.subscribe('sessionScreen', sessionChanged);
            sessionModel.joinSession(sessionId);
        }

        function beforeHide(data) {
            sessionModel.leaveCurrentSession(sessionId);
            // 'unregister' for callbacks
            context.jamClient.SessionRegisterCallback("");
        }

        function sessionChanged() {
            renderSession();
        }

        function renderSession() {
            $('#session-mytracks-container').empty();
            $('#session-livetracks-container').empty();
            _updateMixers();
            _renderTracks();
            _wireTopVolume();
            _addVoiceChat();
        }

        // Get the latest list of underlying audio mixer channels
        function _updateMixers() {
            var mixerIds = context.jamClient.SessionGetIDs();
            var holder = $.extend(true, {}, {mixers: context.jamClient.SessionGetControlState(mixerIds)});
            mixers = holder.mixers;
        }

        function _mixerForClientId(clientId, groupIds) {
            var foundMixer = null;
            $.each(mixers, function(index, mixer) {
                if (mixer.client_id === clientId) {
                    for (var i=0; i<groupIds.length; i++) {
                        if (mixer.group_id === groupIds[i]) {
                            foundMixer = mixer;
                            return false;
                        }
                    }
                }
            });
            return foundMixer;
        }

        function _wireTopVolume() {
            var $volumeSlider = $('#volume');
            var mixerIds = [];
            $.each(mixers, function(index, mixer) {
                if (mixer.group_id === ChannelGroupIds.MasterGroup) {
                    mixerIds.push(mixer.id);
                    var gainPercent = percentFromMixerValue(
                        mixer.range_low, mixer.range_high, mixer.volume_left);
                    $volumeSlider.find('.slider-volume').css('left', gainPercent + '%');
                }
                if (mixer.group_id === ChannelGroupIds.MonitorGroup) {
                    mixerIds.push(mixer.id);
                }
            });
            $volumeSlider.attr('mixer-id', mixerIds.join(','));
        }

        function _addVoiceChat() {
            // If, and only if, there is a mixer in group 3 (voice chat)
            // Add the voice chat controls below my tracks, and hook up the mixer.
            // Assumption is that there is only ever one, so we just take the first one.
            $.each(mixers, function(index, mixer) {
                if (mixer.group_id === ChannelGroupIds.AudioInputChatGroup) {
                    var $voiceChat = $('#voice-chat');
                    $voiceChat.show();
                    $voiceChat.attr('mixer-id', mixer.id);
                    $('#voice-chat .voicechat-mute').attr('mixer-id', mixer.id);

                    var gainPercent = percentFromMixerValue(
                        mixer.range_low, mixer.range_high, mixer.volume_left);
                    $voiceChat.find('.voicechat-gain-slider').css({'left': gainPercent + '%'});
                    if (mixer.mute) {
                        var $mute = $voiceChat.find('.voicechat-mute');
                        _toggleVisualMuteControl($mute, true);
                    }
                }
            });
        }

        function _instrumentIconFromId(id) {
            if (id in instrumentIcons) {
                return instrumentIcons[id];
            }
            // return default instrument for any unknowns
            return "content/icon_instrument_default45.png";
        }

        function _renderTracks() {
            // Participants are here now, but the mixers don't update right away.
            // Draw tracks from participants, then setup timers to look for the
            // mixers that go with those participants, if they're missing.
            lookingForMixersCount = 0;
            $.each(sessionModel.participants(), function(index, participant) {

                var name = participant.user.name;
                if (!(name)) {
                    name = participant.user.first_name + ' ' + participant.user.last_name;
                }
                var instrumentIcon = _instrumentIconFromId(participant.tracks[0].instrument_id);
                var photoUrl = context.JK.resolveAvatarUrl(participant.user.photo_url);

                var myTrack = false;

                // Default trackData to participant + no Mixer state.
                var trackData = {
                    clientId: participant.client_id,
                    name: name,
                    instrumentIcon: instrumentIcon,
                    avatar: photoUrl,
                    latency: "good",
                    gainPercent: 0,
                    muteClass: 'muted',
                    mixerId: ""
                };

                var mixer = _mixerForClientId(
                    participant.client_id,
                    [
                        ChannelGroupIds.AudioInputMusicGroup,
                        ChannelGroupIds.UserMusicInputGroup
                    ]);
                if (mixer) {
                    myTrack = (mixer.group_id === ChannelGroupIds.AudioInputMusicGroup);
                    var gainPercent = percentFromMixerValue(
                        mixer.range_low, mixer.range_high, mixer.volume_left);
                    var muteClass = "enabled";
                    if (mixer.mute) {
                        muteClass = "muted";
                    }
                    trackData.gainPercent = gainPercent;
                    trackData.muteClass = muteClass;
                    trackData.mixerId = mixer.id;
                } else { // No mixer to match, yet
                    lookingForMixers[participant.client_id] = true;
                    if (!(lookingForMixersTimer)) {
                        lookingForMixersTimer = context.setInterval(lookForMixers, 300);
                    }
                }
                _addTrack(trackData);
                // Show settings icons only for my tracks
                if (myTrack) {
                    $('div[mixer-id="' + mixer.id + '"].track-icon-settings').show();
                }
            });
        }

        // Function called on an interval when participants change. Mixers seem to
        // show up later, so we render the tracks from participants, but keep track
        // of the ones there weren't any mixers for, and continually try to find them
        // and get them connected to the mixers underneath.
        function lookForMixers() {
            lookingForMixersCount++;
            _updateMixers();
            var keysToDelete = [];
            for (var key in lookingForMixers) {
                var mixer = _mixerForClientId(
                    key,
                    [
                        ChannelGroupIds.AudioInputMusicGroup,
                        ChannelGroupIds.UserMusicInputGroup
                    ]);
                if (mixer) {
                    keysToDelete.push(key);
                    var gainPercent = percentFromMixerValue(
                        mixer.range_low, mixer.range_high, mixer.volume_left);
                    var $track = $('div.track[client-id="' + key + '"]');
                    // Set mixer-id attributes
                    $track.find('.track-vu-left').attr('mixer-id', mixer.id + "_vul");
                    $track.find('.track-vu-right').attr('mixer-id', mixer.id + "_vur");
                    $track.find('.track-gain').attr('mixer-id', mixer.id);
                    $track.find('.track-icon-mute').attr('mixer-id', mixer.id);
                    $track.find('.track-icon-settings').attr('mixer-id', mixer.id);

                    // Set gain position
                    $track.find('.track-gain-slider').css('bottom', gainPercent + '%');

                    // Set mute state
                    _toggleVisualMuteControl($track.find('.track-icon-mute'), mixer.mute);
                }
            }

            for (var i=0; i<keysToDelete.length; i++) {
                delete lookingForMixers[keysToDelete[i]];
            }

            if (context.JK.dlen(lookingForMixers) === 0 ||
               lookingForMixersCount > 10) {
                lookingForMixersCount = 0;
                lookingForMixers = {};
                context.clearTimeout(lookingForMixersTimer);
                lookingForMixersTimer = null;
            }
        }

        // Given a mixerID and a value between 0.0-1.0,
        // light up the proper VU lights.
        function _updateVU(mixerId, value) {
            // Minor tweak to support VU values -- the mixerId here will
            // have a suffix added _vul or _vur to indicate the channel.
            // There are 13 VU lights. Figure out how many to
            // light based on the incoming value.
            var i = 0;
            var state = 'on';
            var lights = Math.round(13 * value);
            var selector = null;
            var $light = null;
            var colorClass = 'vu-green-';
            // Remove all light classes from all lights
            var allLightsSelector = '#tracks table[mixer-id="' + mixerId + '"] td.vulight';
            $(allLightsSelector).removeClass('vu-green-off vu-green-on vu-red-off vu-red-on');

            // Set the lights
            for (i=0; i<13; i++) {
                colorClass = 'vu-green-';
                state = 'on';
                if (i > 8) {
                    colorClass = 'vu-red-';
                }
                if (i >= lights) {
                    state = 'off';
                }
                selector = '#tracks table[mixer-id="' + mixerId + '"] td.vu' + i;
                $light = $(selector);
                $light.addClass(colorClass + state);
            }
        }

        function _addTrack(trackData) {
            var $destination = $('#session-mytracks-container');
            if (trackData.clientId !== app.clientId) {
                $destination = $('#session-livetracks-container');
            }
            trackData["left-vu"] = $('#template-vu').html();
            trackData["right-vu"] = trackData["left-vu"];
            var template = $('#template-session-track').html();
            var newTrack = context.JK.fillTemplate(template, trackData);
            $destination.append(newTrack);
            tracks[trackData.clientId] = new context.JK.SessionTrack(trackData.clientId);
        }

        function handleBridgeCallback() {
            var eventName = null;
            var mixerId = null;
            var value = null;
            var tuples = arguments.length / 3;
            for (var i=0; i<tuples; i++) {
                eventName = arguments[3*i];
                mixerId = arguments[(3*i)+1];
                value = arguments[(3*i)+2];
                var vuVal = 0.0;
                if (eventName === 'left_vu' || eventName === 'right_vu') {
                    // TODO - no guarantee range will be -80 to 20. Get from the
                    // GetControlState for this mixer which returns min/max
                    // value is a DB value from -80 to 20. Convert to float from 0.0-1.0
                    vuVal = (value + 80) / 100;
                    if (eventName === 'left_vu') {
                        mixerId = mixerId + "_vul";
                    } else {
                        mixerId = mixerId + "_vur";
                    }
                    _updateVU(mixerId, vuVal);
                } else if (eventName === 'add' || eventName === 'remove') {
                    // TODO - _renderSession. Note I get streams of these in
                    // sequence, so have Nat fix, or buffer/spam protect
                    // Note - this is already handled from websocket events.
                    // However, there may be use of these two events to avoid
                    // the polling-style check for when a mixer has been added
                    // to match a participant track.
                } else {
                    // Examples of other events
                    // Add media file track: "add", "The_Abyss_4T", 0
                    logger.debug('non-vu event: ' + eventName + ',' + mixerId + ',' + value);
                }
            }
        }

        function deleteSession(evt) {
            var sessionId = $(evt.currentTarget).attr("action-id");
            if (sessionId) {
                $.ajax({
                    type: "DELETE",
                    url: "/api/sessions/" + sessionId,
                    success: function(response) {
                        context.location="#/home";
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        logger.error("Error deleting session " + sessionId);
                    }
                });
            }
        }

        function _toggleVisualMuteControl($control, muting) {
            if (muting) {
                $control.removeClass('enabled');
                $control.addClass('muted');
            } else {
                $control.removeClass('muted');
                $control.addClass('enabled');
            }
        }

        function _toggleAudioMute(mixerId, muting) {
            fillTrackVolumeObject(mixerId);
            context.trackVolumeObject.mute = muting;
            context.jamClient.SessionSetControlState(mixerId);
        }

        function toggleMute(evt) {
            var $control = $(evt.currentTarget);
            var muting = ($control.hasClass('enabled'));
            var mixerIds = $control.attr('mixer-id').split(',');
            $.each(mixerIds, function(i,v) {
                _toggleAudioMute(v, muting);
            });
            _toggleVisualMuteControl($control, muting);
        }

        function getVerticalFaderPercent(eventY, $fader) {
            return getFaderPercent(eventY, $fader, 'vertical');
        }

        function getHorizontalFaderPercent(eventX, $fader) {
            return getFaderPercent(eventX, $fader, 'horizontal');
        }

        function getFaderPercent(value, $fader, orientation) {
            var faderPosition = $fader.offset();
            var faderMin = faderPosition.top;
            var faderSize = $fader.height();
            var handleValue = (faderSize - (value-faderMin));
            if (orientation === "horizontal") {
                faderMin = faderPosition.left;
                faderSize = $fader.width();
                handleValue = (value - faderMin);
            }
            var faderPct = Math.round(handleValue/faderSize * 100);
            if (faderPct < 0) {
                faderPct = 0;
            }
            if (faderPct > 100) {
                faderPct = 100;
            }
            return faderPct;
        }

        function fillTrackVolumeObject(mixerId) {
            _updateMixers();
            var mixer = null;
            for (var i=0; i<mixers.length; i++) {
                mixer = mixers[i];
                if (mixer.id === mixerId) {
                    context.trackVolumeObject.clientID = mixer.client_id;
                    context.trackVolumeObject.master = mixer.master;
                    context.trackVolumeObject.monitor = mixer.monitor;
                    context.trackVolumeObject.mute = mixer.mute;
                    context.trackVolumeObject.name = mixer.name;
                    context.trackVolumeObject.record = mixer.record;
                    context.trackVolumeObject.volL = mixer.volume_left;
                    context.trackVolumeObject.volR = mixer.volume_right;
                    // trackVolumeObject doesn't have a place for range min/max
                    currentMixerRangeMin = mixer.range_low;
                    currentMixerRangeMax = mixer.range_high;
                    break;
                }
            }
        }

        // Given a mixer's min/max and current value, return it as
        // a percent from 0-100. Return an integer.
        function percentFromMixerValue(min, max, value) {
            var range = Math.abs(max - min);
            var magnitude = value - min;
            var percent = Math.round(100*(magnitude/range));
            return percent;
        }

        // Given a mixer's min/max and a percent value, return it as
        // the mixer's value. Returns an integer.
        function percentToMixerValue(min, max, percent) {
            var range = Math.abs(max - min);
            var multiplier = percent/100; // Change 85 into 0.85
            var value = min + (multiplier * range);
            // Protect against percents < 0 and > 100
            if (value < min) {
                value = min;
            }
            if (value > max) {
                value = max;
            }
            return value;
        }

        // Given a volume percent (0-100), set the underlying
        // audio volume level of the passed mixerId to the correct
        // value.
        function setMixerVolume(mixerId, volumePercent) {
            // The context.trackVolumeObject has been filled with the mixer values
            // that go with mixerId, and the range of that mixer
            // has been set in currentMixerRangeMin-Max.
            // All that needs doing is to translate the incoming percent
            // into the real value ont the sliders range. Set Left/Right
            // volumes on trackVolumeObject, and call SetControlState to stick.
            var sliderValue = percentToMixerValue(
                currentMixerRangeMin, currentMixerRangeMax, volumePercent);
            context.trackVolumeObject.volL = sliderValue;
            context.trackVolumeObject.volR = sliderValue;
            context.jamClient.SessionSetControlState(mixerId);
        }


        // Refactor. Only need one of these xxxDown methods.
        function faderHandleDown(evt) {
            evt.stopPropagation();
            $draggingFaderHandle = $(evt.currentTarget);
            $draggingFader = $draggingFaderHandle.closest('div[control="fader"]');
            currentMixerIds = $draggingFader.closest('[mixer-id]').attr('mixer-id').split(',');
            var mixerIds = currentMixerIds;
            $.each(mixerIds, function(i,v) {
                fillTrackVolumeObject(v);
            });
            return false;
        }

        function faderMouseUp(evt) {
            evt.stopPropagation();
            if ($draggingFaderHandle) {
                $draggingFaderHandle = null;
                $draggingFader = null;
                currentMixerIds = null;
            }
            return false;
        }

        function faderMouseMove(evt) {
            // bail out early if there's no in-process drag
            if (!($draggingFaderHandle)) {
                return false;
            }
            var $fader = $draggingFader;
            var $handle = $draggingFaderHandle;
            evt.stopPropagation();
            var orientation = $fader.attr('orientation');
            var getPercentFunction = getVerticalFaderPercent;
            var absolutePosition = evt.clientY;
            var handleCssAttribute = 'bottom';
            if (orientation && orientation == 'horizontal') {
                getPercentFunction = getHorizontalFaderPercent;
                absolutePosition = evt.clientX;
                handleCssAttribute = 'left';
            }
            var faderPct = getPercentFunction(absolutePosition, $fader);
            var mixerIds = currentMixerIds;
            $.each(mixerIds, function(i,v) {
                setMixerVolume(v, faderPct);
            });
            if (faderPct > 90) { faderPct = 90; } // Visual limit
            $handle.css(handleCssAttribute, faderPct + '%');
            return false;
        }

        function faderClick(evt) {
            evt.stopPropagation();
            if ($draggingFaderHandle) {
                return;
            }
            var $fader = $(evt.currentTarget);

            // Switch based on fader orientation
            var orientation = $fader.attr('orientation');
            var getPercentFunction = getVerticalFaderPercent;
            var absolutePosition = evt.clientY;
            var handleCssAttribute = 'bottom';
            if (orientation && orientation == 'horizontal') {
                getPercentFunction = getHorizontalFaderPercent;
                absolutePosition = evt.clientX;
                handleCssAttribute = 'left';
            }

            var $handle = $fader.find('div[control="fader-handle"]');
            var faderPct = getPercentFunction(absolutePosition, $fader);
            // mixerIds can be a comma-separated list
            var mixerIds = $fader.closest('[mixer-id]').attr('mixer-id').split(',');
            $.each(mixerIds, function(i,v) {
                fillTrackVolumeObject(v);
                setMixerVolume(v, faderPct);
            });
            if (faderPct > 90) { faderPct = 90; } // Visual limit
            $handle.css(handleCssAttribute, 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);
            $('#tracks').on('mousemove', faderMouseMove);
            $('body').on('mouseup', faderMouseUp);

            $('#volume').on('click', 'div[control="fader"]', faderClick);
            $('#volume').on('mousedown', '.slider-volume', faderHandleDown);
            $('body').on('mousemove', faderMouseMove);
            $('body').on('mouseup', faderMouseUp);

            // Go ahead and wire up voice-chat events, although it won't be visible
            // (and can't fire events) unless the user has a voice chat mixer
            $('#voice-chat').on('click', 'div[control="fader"]', faderClick);
            $('#voice-chat').on('mousedown', 'div[control="fader-handle"]', faderHandleDown);
            $('#voice-chat').on('mousemove', faderMouseMove);
            $('body').on('mouseup', faderMouseUp);
        }

        this.initialize = function() {
            context.jamClient.SetVURefreshRate(150);
            events();
            var screenBindings = {
                'beforeShow': beforeShow,
                'afterShow': afterShow,
                'beforeHide': beforeHide
            };
            app.bindScreen('session', screenBindings);
        };

        this.tracks = tracks;

        context.JK.HandleBridgeCallback = handleBridgeCallback;

    };

 })(window,jQuery);