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 sessionId;
        var session = null;
        var users = {}; // Light cache of user info for session users.
        var tracks = {};

        function beforeShow(data) {
            sessionId = data.id;
        }

        function afterShow(data) {
            context.JK.joinMusicSession(sessionId, app);

            $.ajax({
                type: "GET",
                url: "/api/sessions/" + sessionId
            }).done(updateSession);
        }

        function beforeHide(data) {
            // Move joinSession function to this file for ease of finding it?
            context.JK.leaveMusicSession(sessionId);
        }

        function updateSession(sessionData) {
            session = sessionData;
            updateParticipants(function() { renderSession(); });
        }

        /**
        * Make sure that for each participant in the session, we have user info.
        */
        function updateParticipants(onComplete) {
            var callCount = 0;
            $.each(session.participants, function(index, value) {
                if (!(this.user_id in users)) {
                    callCount += 1;
                    $.ajax({
                        type: "GET",
                        url: "/api/users/" + this.user_id
                    }).done(function(user) {
                        callCount -= 1;
                        users[user.id] = user;
                        var hash = context.JK.calcMD5(user.email);
                        users[user.id].photo_url = 'http://www.gravatar.com/avatar/' + hash;
                    });
                }
            });
            if (!(onComplete)) {
                return;
            }
            // TODO: generalize this pattern. Likely needed elsewhere.
            function checker() {
                if (callCount === 0) {
                    onComplete();
                } else {
                    context.setTimeout(checker, 10);
                }
            }
            checker();
        }

        function renderSession() {
            _renderSessionInfo();
            _renderTracks();

            // Just testing a track property update
            //context.setTimeout(function() {tracks['abc-123'].setGain(0.75);}, 3000);
        }

        function _renderSessionInfo() {
            var $info = $('#session-info');
            $info.empty();
            var template = $('#template-session-contents').html();
            var contents = context.JK.fillTemplate(template, session);
            $info.html(contents);
        }

        function _renderTracks() {
            $.each(session.participants, function(index, value) {
                if (!(this.client_id in tracks)) {
                    var user = users[this.user_id];
                    var trackData = {
                        clientId: this.client_id,
                        name: user.name,
                        part: "Keyboard",      // TODO - need this
                        avatar: user.photo_url,
                        latency: "good",
                        vu: 0.0,
                        gain: 0.5,
                        mute: false
                    };
                    _addTrack(trackData);
                }
            });
            // Trim out any participants who are no longer in the session.
            for (var clientId in tracks) {
                var hasLeftSession = true;
                for (var i=0; i<session.participants.length; i++) {
                    var participantId = session.participants[i].client_id;
                    if (participantId === clientId) {
                        hasLeftSession = false;
                        break;
                    }
                }
                if (hasLeftSession) {
                    $('[client-id="' + clientId + '"]').remove();
                    delete tracks[clientId];
                }
            }
        }

        function _addTrack(trackData) {
            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);
            $('#session-mytracks-container').append(newTrack);
            tracks[trackData.clientId] = new context.JK.SessionTrack(trackData.clientId);
        }

        function _userJoinedSession(header, payload) {
            // Just refetch the session and update.
            $.ajax({
                type: "GET",
                url: "/api/sessions/" + sessionId
            }).done(function(response) {
                updateSession(response);
            });
        }

        function deleteSession(evt) {
            var sessionId = $(evt.currentTarget).attr("action-id");
            if (sessionId) {
                $.ajax({
                    type: "DELETE",
                    url: "/api/sessions/" + sessionId
                }).done(
                    function() { context.location="#/home"; }
                );
            }
        }

        function events() {
            $('#session-contents').on("click", '[action="delete"]', deleteSession);
        }

        this.initialize = function() {
            events();
            var screenBindings = {
                'beforeShow': beforeShow,
                'afterShow': afterShow,
                'beforeHide': beforeHide
            };
            app.bindScreen('session', screenBindings);
            app.subscribe(context.JK.MessageType.USER_JOINED_MUSIC_SESSION, _userJoinedSession);
        };

        this.tracks = tracks;

    };

 })(window,jQuery);