From 8e73c5bb80dc0bb5144870b2a6510feb8d7aabe6 Mon Sep 17 00:00:00 2001 From: Seth Call Date: Thu, 10 Dec 2015 22:07:56 -0600 Subject: [PATCH] * stats and vst together --- .../SessionMyTrack.js.jsx.coffee | 35 ++++++++++++++++++ .../SessionStatsHover.js.jsx.coffee | 37 +++++++++++++------ .../stores/SessionStatsStore.js.coffee | 1 + web/app/assets/javascripts/utils.js | 3 +- .../react-components/SessionScreen.css.scss | 5 +++ .../react-components/SessionTrack.css.scss | 4 ++ web/config/application.rb | 2 + 7 files changed, 75 insertions(+), 12 deletions(-) diff --git a/web/app/assets/javascripts/react-components/SessionMyTrack.js.jsx.coffee b/web/app/assets/javascripts/react-components/SessionMyTrack.js.jsx.coffee index e5a400560..4f46ca51d 100644 --- a/web/app/assets/javascripts/react-components/SessionMyTrack.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/SessionMyTrack.js.jsx.coffee @@ -5,6 +5,18 @@ ConfigureTracksActions = @ConfigureTracksActions @SessionMyTrack = React.createClass({ + mixins: [Reflux.listenTo(@SessionStatsStore,"onStatsChanged")] + + onStatsChanged: (stats) -> + @setState({stats: stats[@props.clientId]}) + + getInitialState: () -> + stats = window.SessionStatsStore.stats + if stats? + clientStats = stats[@props.clientId] + else + clientStats = null + {stats: clientStats} handleMute: (e) -> e.preventDefault() @@ -43,6 +55,14 @@ ConfigureTracksActions = @ConfigureTracksActions WebkitTransform: "rotate(#{pan}deg)" } + classification = @state.stats?.classification + + if !classification? + classification = 'unknown' + + connectionStateClasses = { 'track-connection-state': true} + connectionStateClasses[classification] = true + if @props.associatedVst? @equalizerSet = true vst = `
` @@ -59,6 +79,7 @@ ConfigureTracksActions = @ConfigureTracksActions
{vst} +

@@ -73,6 +94,7 @@ ConfigureTracksActions = @ConfigureTracksActions $root = $(this.getDOMNode()) $mute = $root.find('.track-icon-mute') $pan = $root.find('.track-icon-pan') + $connectionState = $root.find('.track-connection-state') context.JK.interactReactBubble( $mute, @@ -90,6 +112,19 @@ ConfigureTracksActions = @ConfigureTracksActions , {width:331, positions:['right', 'left'], offsetParent:$root.closest('.top-parent')}) + context.JK.interactReactBubble( + $connectionState, + 'SessionStatsHover', + () => + {participant: {client_id: this.props.clientId, user: name: 'You', possessive: 'Your'}, } + , + {width:380, positions:['right', 'left'], offsetParent:$root.closest('.screen'), extraClasses: 'self'}) + + unless this.props.hasMixer + $mute.on("mouseenter", false) + $mute.on("mouseleave", false) + $pan.on("mouseentere", false) + $pan.on("mouseleave", false) unless this.props.hasMixer $mute.on("mouseenter", false) $mute.on("mouseleave", false) diff --git a/web/app/assets/javascripts/react-components/SessionStatsHover.js.jsx.coffee b/web/app/assets/javascripts/react-components/SessionStatsHover.js.jsx.coffee index a25ada81c..d0120d481 100644 --- a/web/app/assets/javascripts/react-components/SessionStatsHover.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/SessionStatsHover.js.jsx.coffee @@ -55,9 +55,14 @@ StatsInfo = { poor: (user, stats) -> "#{user.possessive} gear has a large amount of input jitter, meaning it likely adding delay and audio artifacts to your inputs.", }, output_jitter: { - good: (user, stats) -> "#{user.possessive} gear has a smal amount of output jitter, meaning it is keeping good time with your JamKazam as writes out your audio output.", - warn: (user, stats) -> "#{user.possessive} gear has a large amount of output jitter, meaning it might be periodically adding delay and audio artifacts to your output.", + good: (user, stats) -> "#{user.possessive} gear has a small amount of output jitter, meaning it is keeping good time with your JamKazam as writes out your audio output.", + warn: (user, stats) -> "#{user.possessive} gear has a significant amount of output jitter, meaning it might be periodically adding delay and audio artifacts to your output.", poor: (user, stats) -> "#{user.possessive} gear has a large amount of output jitter, meaning it likely adding delay and audio artifacts to your output.", + }, + audio_in_type: { + good: (user, stats) -> "#{user.name} using an ideal driver type for #{user.possessive.toLowerCase()} gear.", + warn: (user, stats) -> "#{user.name} using a problematic driver type for #{user.possessive.toLowerCase()} gear.", + poor: (user, stats) -> "#{user.name} using a driver type considered problematic.", } } } @@ -116,7 +121,7 @@ StatsInfo = { computerStats.push(@stat(system, 'system', 'Processor', 'cpu', Math.round(system.cpu) + ' %')) if audio? - if audio.framesize? && audio.audio_in_type? + if audio.audio_in_type? audio_type = '?' audio_long = audio.audio_in_type.toLowerCase() if audio_long.indexOf('asio') > -1 @@ -124,9 +129,17 @@ StatsInfo = { else if audio_long.indexOf('wdm') > -1 audio_type = 'WDM' else if audio_long.indexOf('core') > -1 - audio_type = 'Core Audio' - audioStats.push(@stat(audio, 'audio', 'Gear Driver', 'framesize', audio_type + ' @ ' + audio.framesize.toFixed(1))) - + audio_type = 'CoreAudio' + audioStats.push(@stat(audio, 'audio', 'Gear Driver', 'audio_in_type', audio_type)) + if audio.framesize? + framesize = '?' + if audio.framesize == 2.5 + framesize = '2.5' + else if audio.framesize == 5 + framesize = '5' + else if audio.framesize == 10 + framesize = '10' + audioStats.push(@stat(audio, 'audio', 'Frame Size', 'framesize', framesize)) if audio.latency? audioStats.push(@stat(audio, 'audio', 'Latency', 'latency', audio.latency.toFixed(1) + ' ms')) if audio.input_jitter? @@ -134,8 +147,8 @@ StatsInfo = { if audio.output_jitter? audioStats.push(@stat(audio, 'audio', 'Output Jitter', 'output_jitter', audio.output_jitter.toFixed(2))) + networkTag = null if network? - if network.net_bitrate? networkStats.push(@stat(network, 'network', 'Bandwidth', 'net_bitrate', Math.round(network.net_bitrate) + ' k')) @@ -155,6 +168,11 @@ StatsInfo = { value = 'Ethernet' networkStats.push(@stat(network, 'network', 'Connectivity', 'wifi', value)) + networkTag = + `
+

Internet

+ {networkStats} +
` `

Session Diagnostics & Stats: {this.props.participant.user.name}

@@ -168,10 +186,7 @@ StatsInfo = {

Audio Interface

{audioStats}
-
-

Internet

- {networkStats} -
+ {networkTag}
{extraInfo} diff --git a/web/app/assets/javascripts/react-components/stores/SessionStatsStore.js.coffee b/web/app/assets/javascripts/react-components/stores/SessionStatsStore.js.coffee index f6afe837a..a59d3fa99 100644 --- a/web/app/assets/javascripts/react-components/stores/SessionStatsStore.js.coffee +++ b/web/app/assets/javascripts/react-components/stores/SessionStatsStore.js.coffee @@ -121,6 +121,7 @@ AudioThresholds = SessionStatThresholds.audio @classify(audio, 'latency', AudioThresholds) @classify(audio, 'input_jitter', AudioThresholds) @classify(audio, 'output_jitter', AudioThresholds) + @classify(audio, 'audio_in_type', AudioThresholds) switch @participantClassification when 1 then participant.classification = 'good' diff --git a/web/app/assets/javascripts/utils.js b/web/app/assets/javascripts/utils.js index c25a3292c..e4d626e0e 100644 --- a/web/app/assets/javascripts/utils.js +++ b/web/app/assets/javascripts/utils.js @@ -284,7 +284,8 @@ options.cssStyles = {} options.padding = 0; - context.JK.hoverBubble($element, '
', options) + var extra = options.extraClasses || '' + context.JK.hoverBubble($element, '
', options) return $element; } diff --git a/web/app/assets/stylesheets/client/react-components/SessionScreen.css.scss b/web/app/assets/stylesheets/client/react-components/SessionScreen.css.scss index 64413bfbc..89ee81304 100644 --- a/web/app/assets/stylesheets/client/react-components/SessionScreen.css.scss +++ b/web/app/assets/stylesheets/client/react-components/SessionScreen.css.scss @@ -104,6 +104,10 @@ $session-screen-divider: 1190px; } } + .self.SessionStatsHover .stats-info { + height:200px; + } + .stats-info { float: left; width: 120px; @@ -169,6 +173,7 @@ $session-screen-divider: 1190px; height: 20px; vertical-align: middle; line-height: 20px; + margin-right:6px; } } diff --git a/web/app/assets/stylesheets/client/react-components/SessionTrack.css.scss b/web/app/assets/stylesheets/client/react-components/SessionTrack.css.scss index 1a2e424b4..af76f6614 100644 --- a/web/app/assets/stylesheets/client/react-components/SessionTrack.css.scss +++ b/web/app/assets/stylesheets/client/react-components/SessionTrack.css.scss @@ -407,6 +407,10 @@ color: white; margin-left:20px; } + + &.self { + height:290px; + } } &.SessionTrackPanHover { diff --git a/web/config/application.rb b/web/config/application.rb index 2ae22519d..f89f8250d 100644 --- a/web/config/application.rb +++ b/web/config/application.rb @@ -389,6 +389,8 @@ if defined?(Bundler) cpu: {warn: 70, poor:85} }, audio: { + audio_in_type: {warn: 'Windows WDM-KS', poor: nil, eql:true}, + audio_out_type: {warn: 'Windows WDM-KS', poor: nil, eql:true}, framesize: {warn: 2.6, poor: 2.6}, latency: {warn: 10, poor: 20}, input_jitter: {warn: 0.5, poor: 1},