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 = `
@@ -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},