diff --git a/.gitignore b/.gitignore index 4eed927db..fcf9b37c2 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,4 @@ doc/ Gemfile.lock .sass-cache +log/development.log.age diff --git a/app/assets/javascripts/session.js b/app/assets/javascripts/session.js index 63e97b096..6f60bdfb2 100644 --- a/app/assets/javascripts/session.js +++ b/app/assets/javascripts/session.js @@ -3,6 +3,7 @@ context.JK = context.JK || {}; context.JK.SessionScreen = function(app) { var logger = context.JK.logger; + var tracks = {}; function afterShow(data) { var sessionId = data.id; @@ -16,7 +17,7 @@ _renderSessionInfo(sessionData); // TODO: Just for testing. Should respond to events. var trackData = { - clientId: 1, + clientId: 'abc-123', name: "Jonathon Wilson", part: "Keyboard", avatar: "https://en.gravatar.com/userimage/3198431/5ba95e655ce68d976f46dcf6f99fdde5.png", @@ -28,6 +29,9 @@ _addTrack(trackData); // TODO - hook events to the session-tracks container, not the tracks. // then have the events see which track fired. + // + + context.setTimeout(function() {tracks['abc-123'].setGain(0.75);}, 3000); } function _renderSessionInfo(sessionData) { @@ -42,6 +46,8 @@ var template = $('#template-session-track').html(); var newTrack = JK.fillTemplate(template, trackData); $('#session-tracks').append(newTrack); + tracks[trackData.clientId] = new JK.SessionTrack(trackData.clientId); + logger.debug(tracks); } function _userJoinedSession() { @@ -73,6 +79,8 @@ app.subscribe(JK.MessageType.USER_JOINED_MUSIC_SESSION, _userJoinedSession); }; + this.tracks = tracks; + }; })(window,jQuery); \ No newline at end of file diff --git a/app/assets/javascripts/sessionTrack.js b/app/assets/javascripts/sessionTrack.js index 8117fcf14..95da3ad8c 100644 --- a/app/assets/javascripts/sessionTrack.js +++ b/app/assets/javascripts/sessionTrack.js @@ -1,37 +1,49 @@ (function(context,$) { context.JK = context.JK || {}; - context.JK.SessionTrack = function() { + context.JK.SessionTrack = function(clientId) { var logger = context.JK.logger; + var selectorTemplate = '[client-id="' + clientId + '"] [track-role="{role}"]'; + var parts = ['latency', 'vu', 'gain', 'mute', 'name', 'part', 'avatar']; + var $parts = {}; + $.each(parts, function() { + var selector = JK.fillTemplate(selectorTemplate, {role: this}); + $parts[this] = $(selector); + //logger.debug(this + ":" + $parts[this]); + }); function events() { - $('#session-contents').on("click", '[action="delete"]', deleteSession); } /** * Set latency. val = [good,medium,bad] */ - function _setLatency(val) { - } + this.setLatency = function(val) { + $parts.latency.html(val); + }; /** * Set VU level. val = 0.0-1.0 */ - function _setVolumeUnit(val) { - } + this.setVolumeUnit = function(val) { + $parts.vu.html(val); + }; /** * Set the track's gain. val = 0.0-1.0 * Allows external control of channel fader. */ - function _setGain(val) { - } + this.setGain = function(val) { + logger.debug('setGain:' + val); + $parts.gain.html("Gain: " + val); + }; /** * Get the track's gain from current fader. Returns 0.0-1.0 */ - function _getGain() { - } + this.getGain = function() { + return $parts.gain.html().split("Gain: ")[1]; + }; /** * Set whether this channel is muted. Takes a boolean where diff --git a/app/assets/stylesheets/client/jamkazam.css.scss b/app/assets/stylesheets/client/jamkazam.css.scss index abc29d6e8..b4e49efbc 100644 --- a/app/assets/stylesheets/client/jamkazam.css.scss +++ b/app/assets/stylesheets/client/jamkazam.css.scss @@ -259,3 +259,50 @@ label { margin-right: 8px; } +/* Session Tracks */ +.session-track { + width: 125px; + height: 300px; + border: 1px solid #fff; + position:relative; +} +.session-track [track-role] { margin:4px; } +.session-track .latency { text-align:center; } +.session-track .latency.good { color:#00ff00; } +.session-track .latency.medium { color:#ffff00; } +.session-track .latency.bad { color:#ff0000; } + +.session-track .mute { + background-color:#bbb; color:#000; + position: absolute; + bottom: 80px; + width: 117px; + text-align: center; +} + +.session-track .name { + background-color:#ddd; color:#000; + position: absolute; + bottom: 60px; + width: 117px; + text-align: center; +} +.session-track .part { + background-color:#fff; color:#000; + position: absolute; + bottom: 40px; + width: 117px; + text-align: center; +} + +.session-track .avatar { + position:absolute; + width: 32px; + height: 32px; + bottom:4px; + left: 46px; +} +.session-track .avatar img { + width: 32px; height: 32px; +} + diff --git a/app/views/clients/index.html.erb b/app/views/clients/index.html.erb index 2adf86196..bf339685e 100644 --- a/app/views/clients/index.html.erb +++ b/app/views/clients/index.html.erb @@ -386,13 +386,13 @@