seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

* stats and vst together

This commit is contained in:
Seth Call 2015-12-10 22:07:56 -06:00
parent b07aedc9cc
commit 8e73c5bb80
7 changed files with 75 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/app/assets/javascripts/react-components/SessionMyTrack.js.jsx.coffee
View File

@ -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 = `<div className="track-icon-equalizer" />`
@ -59,6 +79,7 @@ ConfigureTracksActions = @ConfigureTracksActions
<div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
<div className="track-icon-pan" style={panStyle}/>
{vst}
<div className={classNames(connectionStateClasses)}/>
</div>
<br className="clearall"/>
</div>
@ -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)

37
web/app/assets/javascripts/react-components/SessionStatsHover.js.jsx.coffee
View File

@ -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 =
`<div className="network-stats stats-holder">
<h3>Internet</h3>
{networkStats}
</div>`
`<div className="stats-hover">
<h3>Session Diagnostics &amp; Stats: {this.props.participant.user.name}</h3>
@ -168,10 +186,7 @@ StatsInfo = {
<h3>Audio Interface</h3>
{audioStats}
</div>
<div className="network-stats stats-holder">
<h3>Internet</h3>
{networkStats}
</div>
{networkTag}
</div>
<div className="stats-info">
{extraInfo}

1
web/app/assets/javascripts/react-components/stores/SessionStatsStore.js.coffee
View File

@ -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'

3
web/app/assets/javascripts/utils.js
View File

@ -284,7 +284,8 @@
options.cssStyles = {}
options.padding = 0;
context.JK.hoverBubble($element, '<div class="react-holder ' + reactElementName + '"></div>', options)
var extra = options.extraClasses || ''
context.JK.hoverBubble($element, '<div class="react-holder ' + reactElementName + ' ' + extra + '"></div>', options)
return $element;
}

5
web/app/assets/stylesheets/client/react-components/SessionScreen.css.scss
View File

@ -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;
}
}

4
web/app/assets/stylesheets/client/react-components/SessionTrack.css.scss
View File

@ -407,6 +407,10 @@
color: white;
margin-left:20px;
}
&.self {
height:290px;
}
}
&.SessionTrackPanHover {

2
web/config/application.rb
View File

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