From 483e2ee20228e574c4dceb35633815bb86fd340e Mon Sep 17 00:00:00 2001 From: virtuacoplenny Date: Tue, 26 Sep 2017 09:55:09 -0700 Subject: [PATCH] feat(connection-indicator): implement automatic hiding on good connection (#2009) * ref(connection-stats): use PropTypes package * feat(connection-stats): display a summary of the connection quality * feat(connection-indicator): show empty bars for interrupted connection * feat(connection-indicator): change background color based on status * feat(connection-indicator): implement automatic hiding on good connection * fix(connection-indicator): explicitly set font size Currently non-react code will set an icon size on ConnectionIndicator. This doesn't work on initial call join in vertical filmstrip after some changes to support hiding the indicator. The chosen fix is passing in the icon size to mirror what would happe with full filmstrip reactification. * ref(connection-stats): rename statuses * feat(connection-indicator): make hiding behavior configurable The original implementation made the auto hiding of the indicator configured in interfaceConfig. * fix(connection-indicator): readd class expected by torture tests * fix(connection-indicator): change connection quality display styling Bold the connection summary in the stats popover so it stands out. Change the summaries so there are only three--strong, nonoptimal, poor. * fix(connection-indicator): gray background on lost connection * feat(icons): add new gsm bars icon * feat(connection-indicator): use new 3-bar icon * ref(icons): remove icon-connection and icon-connection-lost Both have been replaced by icon-gsm-bars so they are not being referenced anymore. Mobile looks to have connect-lost as a separate icon in font-icons/jitsi.json. --- css/_connection-info.scss | 5 + css/_font.scss | 9 +- css/_videolayout_default.scss | 49 +-- fonts/jitsi.eot | Bin 7752 -> 7552 bytes fonts/jitsi.svg | 3 +- fonts/jitsi.ttf | Bin 7596 -> 7396 bytes fonts/jitsi.woff | Bin 7672 -> 7472 bytes fonts/selection.json | 234 +++++---------- interface_config.js | 23 +- lang/main.json | 10 +- modules/UI/videolayout/SmallVideo.js | 6 + .../components/ConnectionIndicator.js | 280 ++++++++++++++---- .../components/ConnectionStatsTable.js | 45 ++- 13 files changed, 403 insertions(+), 261 deletions(-) diff --git a/css/_connection-info.scss b/css/_connection-info.scss index 6527cba5c2..97d9c1d127 100644 --- a/css/_connection-info.scss +++ b/css/_connection-info.scss @@ -37,6 +37,11 @@ color: $downloadConnectionIconColor; } + &__status + { + font-weight: bold; + } + &__upload { @extend .connection-info__icon; diff --git a/css/_font.scss b/css/_font.scss index ea99cc60d1..01f66316bb 100644 --- a/css/_font.scss +++ b/css/_font.scss @@ -127,12 +127,6 @@ .icon-volume:before { content: "\e91a"; } -.icon-connection-lost:before { - content: "\e900"; -} -.icon-connection:before { - content: "\e61a"; -} .icon-recDisable:before { content: "\e613"; } @@ -160,3 +154,6 @@ .icon-info:before { content: "\e922"; } +.icon-gsm-bars:before { + content: "\e926"; +} diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 21a1fedbcc..5f903f469f 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -87,6 +87,7 @@ * positioning depends on the trigger (indicator icon). */ .indicator { + margin-left: 5px; margin-top: $toolbarIconMargin; } @@ -94,16 +95,6 @@ margin-left: $toolbarIconMargin; } - .connection-indicator, - div.indicator-container, - { - margin-right: 4px; - } - - div.indicator:last-child { - margin-right: 0; - } - .indicator-container { display: inline-block; vertical-align: top; @@ -138,18 +129,13 @@ left: 0; @include transform(translate(0, -50%)); - &_empty + &_empty, + &_lost { color: #8B8B8B;/*#FFFFFF*/ overflow: hidden; } - &_lost - { - color: #8B8B8B; - overflow: visible; - } - &_full { @include topLeft(); @@ -163,12 +149,15 @@ } } - .icon-connection, - .icon-connection-lost { + .icon-gsm-bars { cursor: pointer; font-size: 1em; } } + + .hide-connection-indicator { + display: none; + } } &__hoverOverlay { @@ -355,7 +344,27 @@ } .connection-indicator { - background: $connectionIndicatorBg; + background: $connectionIndicatorBg; + + &.status-high { + background: green; + } + + &.status-med { + background: #FFD740; + } + + &.status-lost { + background: gray; + } + + &.status-low { + background: #BF2117; + } + + &.status-other { + background: $connectionIndicatorBg; + } } .remote-video-menu-trigger, diff --git a/fonts/jitsi.eot b/fonts/jitsi.eot index c648a0f0f13a578e95bad12709099d8585f27374..30085b44ebc54acdee4e01aff603ed98d184e8f4 100755 GIT binary patch delta 642 zcmZ8eL1@!p6n=mHziE;x>$+}kO;?MSG89Hvn|SCpy$DJ!GI!WPu(93N!@34n#ssyw zjftow9uz!G5cDFgR7F8#hl2Ak@Sq3NgTAEyQmTpD*Z3 z2Be3f4j`wHh|cSU>5n%r;{tgSkIWmzg%VIyAlz_tpv-HXCC5nIx=YfhGROtd9t8#j zqMtTCpZNB!MO(pk+}^frRB`4X+tVg4OYATEk4Dx)$q*aZ+9%>Pu|^`j^)c?Wr@kSa z43yoA441-Qkl`>oN%r-22l;~s;!1Z)-GxSyeS^dm$4E*&LQO@}6wJ=k-4BIl zQ>-?kj*B>~9aB?GM>2;M4ULnXtStws=ekC>z=w7)-v9K!{@?B2ENhL+{UL@w1%PGU zG3WU=5|$wkS*!A`^3FW+5`MG@Ou+?s2rcrAyU%^6F}g^v(oM#(7@K6TSknWZAy3KE z;2A&8U*nrzzjwmh6nG&aObAzm=VD5n60eJ!;xCCws+5yzzNl|~kA(Xj=LvX>cbwqd K3Q(_x?~p&y^O|M= delta 867 zcmY*VUr1AN6h6QEZ})CeF6X9Gr+HmU(@WdjEH-qrf}n>s79_Z3OU*@2XZm15E+Tx0 zB4t)S^dPZH(g#C|9(?d&f*^(95(JGRGOQlL5_)j1bC;4GIKPkY`+mRgo^x+F=A7Iq z1HeSl5NBt`eO}X$t26oq0H(1oG>3zc*`X*0KnjuHY72Hp5VMhwBJyqR*DhUQn@q^Z z0P+?>t-+S;2j5l!^u6fYLnsJO*d^qX$jd_Ep5B?WIrot#ktfEoDQfmMBqY(Pj)zEIpLb?ABtUD2GIXWbgF;UR9R8ip-L1tyy1S&7&G6uTvDA zUP)rZd*FQ{e z;cupp^B|vc;hVoV*|<#cl#}+BIX0oM;L%{%0f1OiKOD{2O3;7-8sI97!5Vo*#i_US z3HmmjV6@C(rk{DtB$!|9dA5%oW#>2z*TTiQ_linIpJGz6!T0e``2~JMFbEAoQuwWu nl>N# - - @@ -52,4 +50,5 @@ + \ No newline at end of file diff --git a/fonts/jitsi.ttf b/fonts/jitsi.ttf index 2864950fb472af39dad89e961b252159cfd96cad..4f1294da8c7b048cc191a6a3b97ee07a9fb15196 100755 GIT binary patch delta 664 zcmZ2u{lv1KfsuiMft#U$ftkU;KUm+0?;_iEpvWE|PDsv8EZA^l?Lr0yMj0T#COxsZ z07we}`7?ktM|w_W+R5OTWkCJ{1_lX{jMT&w{)Dtn1_sG3KzXwapa4e-%W@$94Un&r zky}!+Q%iUv1A`RM42AQY$S*DdIurAY~-QBKcLE6R4YU@|m4O@R z93Z&*Uf?)_{{M$1nS}|+=U@PlAOO?@QON>~B_KN)Y!ZkG0|t|?NNG%Fk)BcyQ3w?0 z0*0d;Lj*$+!wQCHjN6!&Fuh_{VJ>6tV!p@1#G=9y!m^L$7Apg*25SlH5jGY!JGLIS zTkHbtLF~6U*fuo4;RpUkY@}SHUjMd R0hm)K&yeNWEHBf`2mo^XmrDQu delta 799 zcmY+CUr1AN6vxl+{@dLqwl&?KtEqThTIS7dZfYCqte$*mYe9i7TWT(HI?;zErtgg^>oCI~7;wXk{!N$A13&W4d4IKMBS@8NfT=UndR#uxT5 z5CBlZ7|>9A&U4b7|Bm~L&I0C@u7EGNI2q;uNHOy5Uf)m0*D1Jfn0C@#D(KpcL^i9sqOaTC9NL&G>I#*w?(I?#-MGTuy#_ldpDkB%0Hqk+Sv z%09gLc=pRmicS@zge_wxoylbH9q={iL(V6ePo?!GaltGwh8@FCoiZ{;46$i)o(;3W z0I*R!7~mlf)KCaeZz&Y5MvGb``>D}pd&!-Ae3Q8yoin)oh zqSQ&0s55JG1x_qKn)7UyQX;E_M1rXH^H4~cXR9HLM5Q$eMHW5PF1a0|=x|GtE2}Pv za(cbaR?e$N|$~m+TAsh%Pxv` zmsI1ni>EtUobBz-mJYRbtuB`0+72Jf{$iNbZqM`1LyjF#;_4Xhw~~YZG_%V_Bbx@j zz(%tsp4n>$!xT{oRXi3Lb{rtmAWTJ;1)b+DeTKe6Cm1broEc>vF$v}udzl?!XW7?W z0oTn%xlP##*@$djw#|?5PxxhiTV5i+BwvyLR!E9b#e^cNSXDAgmolE`&pm32ohq6m Fe*hS2&D{V1 diff --git a/fonts/jitsi.woff b/fonts/jitsi.woff index 154426cb33a87d5283d28fc3031af3b880b585f1..ddca319ddb35766aad102f18aa7b61a02bb2a6b7 100755 GIT binary patch delta 686 zcmexiy}?SX+~3WOfsp|SWDOX&LA1;h2FA$`WyL1y2-jav&P^;}U|`Guir0Yfh9hei zrY9DI#GU~898fHfo>Q3y6nn$KARz+6Cxc&>WuzviFfd2~l`xorFn>Z?X9iFZC}siV ztAH>^3d{10+>#2QSPYPV0EBmH2~W()PX?;JrB!O_hLFcpF#0sFr(hWeq0vKB} zY|cx}O$CZA09u|0!gnXsE-%P0E&=*S0IrT1$YN$;pUlH(&!{%phtb+I0VpEEAi%)P zzykEW!h^F9U7ucg#{5j=rP}|$|NjGJfp)+}gAY~-QBKcLE6Q~;$ zQlgvRG6t}2uI2C$st4HwG?ImZftNv=K^y2IBQa4y5jJHdHB&(oGc=x|k(ewaSkji! z#LSqv!PMK^6o~(AMQ50@FnF8(WdI2?1IhnD-ajyp2}u5H@HTA#Nj2!1dIRkTMJEt% zXct-^&u{aUfg9)?Ah`No;5dT*|A!@c@;fOBDV8#jAWJe>8;A)529p(}H6{m0PpOCK z2a0n615J)0f}x0E1;aDOZA?p;UNNgMmoaxS-(z87QDF&T*~fB=m4Q`*wS@Hu8w;Bq zTMyeUb^-Pv_FEim90nXg9CaK!I88VsIQuy7aem-p;WFb&;o88hzl2lMw(cLz`Iu delta 911 zcmY*XT}V@L6hHs_vE6-;Tkb=*n&Q^8_%I=m!k9^dMxTb|Lx_S8&UOAbwL0+opZoirbI|!ziM*jy#t_b&sD3xApV_ShJDS-1zv(^y{r1jhJ`B z`W1yHis47MM%qHX*m&1bRHV5~jV){GinkhD|G4_$uH+0osD^Ss~AWATaQGNM{i zLGq%sT9Vs%eJ15I>)-_2NC2tw{L9EGw5AZKNsKob^i~CfRe^m=_6kz;l5}lcWAc-;%v>@z^MK9USwN!C zl0O8MO2wFyFGP>OSn_#9(c_bf{T}g9pwe4k@2w2zU9%-)4&||(_4I#46!~i(H>8!V zf(A!Nd$*YA`s-8cxMl{q0Q97W@BGQ+W0c}aEB$NsXuwh+V1VNX0ipwzk%$~tg8^(% z2N&QWERg3+jCsQzX0Nbu&cqdR{oEZc&aLpL`9A(O|4Ly{G$~?=56ZpDKIN!#S?Ck) z3sb_f%BHGQO{><_lDc0#q>ia)G@Qn#8P|s8d)VPAsO4^3_oXB{M})Dv)~n< { this.videoIsHovered = true; this.updateView(); + this.updateIndicators(); }, () => { this.videoIsHovered = false; this.updateView(); + this.updateIndicators(); } ); }; @@ -755,6 +757,8 @@ SmallVideo.prototype.updateIndicators = function () { = this.container.querySelector('.videocontainer__toptoolbar'); const iconSize = UIUtil.getIndicatorFontSize(); + const showConnectionIndicator = this.videoIsHovered + || !interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED; const tooltipPosition = interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top'; /* jshint ignore:start */ @@ -763,7 +767,9 @@ SmallVideo.prototype.updateIndicators = function () {
{ this._showConnectionIndicator ?