From 0a0256501c1d3ec38e0bbf6aa5b90f55d62b9be3 Mon Sep 17 00:00:00 2001 From: virtuacoplenny Date: Thu, 26 Apr 2018 14:24:52 -0700 Subject: [PATCH] feat(recording): new icon when recording is active (#2884) - Update font files to add new icon. - Update markup and style so the icon has a small background to fill in the text of the icon. - Remove some css transitions that don't seem to do much. --- css/_font.scss | 3 + css/modals/video-quality/_video-quality.scss | 32 +- fonts/jitsi.eot | Bin 10896 -> 11156 bytes fonts/jitsi.svg | 1 + fonts/jitsi.ttf | Bin 10740 -> 11000 bytes fonts/jitsi.woff | Bin 10816 -> 11076 bytes fonts/selection.json | 395 ++++++++++-------- react/features/base/font-icons/jitsi.json | 395 ++++++++++-------- .../components/RecordingLabel.web.js | 51 ++- 9 files changed, 486 insertions(+), 391 deletions(-) diff --git a/css/_font.scss b/css/_font.scss index d04ca626f4..aea088b4f9 100644 --- a/css/_font.scss +++ b/css/_font.scss @@ -198,3 +198,6 @@ .icon-camera-take-picture:before { content: "\e92a"; } +.icon-rec:before { + content: "\e92b"; +} diff --git a/css/modals/video-quality/_video-quality.scss b/css/modals/video-quality/_video-quality.scss index 80b4e87156..b4f7c83acd 100644 --- a/css/modals/video-quality/_video-quality.scss +++ b/css/modals/video-quality/_video-quality.scss @@ -153,6 +153,12 @@ position: absolute; box-sizing: border-box; + &.is-recording { + background: none; + opacity: 0.9; + padding: 0; + } + i { line-height: $videoStateIndicatorSize; } @@ -165,6 +171,30 @@ min-width: $videoStateIndicatorSize; text-align: center; } + + .recording-icon, + .recording-icon i { + color: rgb(255, 86, 48); + line-height: $videoStateIndicatorSize; + font-size: $videoStateIndicatorSize; + opacity: 0.9; + position: relative; + } + + .recording-icon-background { + background: white; + height: 25%; + left: 50%; + opacity: 0.9; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + width: 80%; + } + + #recordingLabelText { + display: inline-block; + } } .centeredVideoLabel.moveToCorner { @@ -186,8 +216,6 @@ &.moveToCorner { bottom: auto; transform: none; - -webkit-transition: all 2s 2s linear; - transition: all 2s 2s linear; } } diff --git a/fonts/jitsi.eot b/fonts/jitsi.eot index 9b1bcd400404285a4de83fa3054585f6911ce107..cf4424f189bd3e93bdf3b42c450ee27520bbfeac 100755 GIT binary patch delta 472 zcmbObIwhQKiZ%no53Px8W-NEpnuRAiY- z1LF?{2Gx{|)Wj6Qi3cV!FsR1>)tO}g1vpYzb^`fRfP9sV+>#1LE$J&j{tloXj-34D zM5S_x3I+y^13>w<+{B6k249B53=EncK)ym=Vs7f)3AM|C{0yM_yn_7V5(Z|V41?AU zkURr3%j9TA2S)A5a~QK3wKsDxeN_==1`zfnwqF-GXfQwPX4E?RIi$sk&(A> z;XEB{W+N6kFkbw)N Ql!0k-A(QZCX3btk0EVw^mjD0& delta 251 zcmbOdJ|UECf))eA7tM)mW-P^>!*G~^LBj>eSIA4uO}#szb~%ur0#u(@kY8NFzzmdO&;**n zpuoV)GC7*jfl+Jn9L8)$t<4-vUsaSDfighMRDaXK + \ No newline at end of file diff --git a/fonts/jitsi.ttf b/fonts/jitsi.ttf index 35fbb44433db33affdff93b2358b23b82c7e2873..739cd85b126c5a52a8b1f22a06322236dee55ec5 100755 GIT binary patch delta 462 zcmewo{3EoUfsuiMft#U$ftkU;KUm+0?;_hRpvWE|PDsv8EN~D1md3!qC; z0MY_L{s$nvmYqQU6d+$E zBe$f2QA_#?kiP?{ha)FH*)mb7T%v-3LE`{WL0fKOMFE2^!(j#nO%EVnAulmE_3nh) z2(yBOS%8p1nn8oXi6M|7da|Cf zyuGriu_+jf8k>q6nVBo|F)AymnVOgx8;OY<>j61zq9S6d#^T26c8sPbYTArIg{Gp$ zMrL5nWI+{4ebu~-jJ$;l=jm888?nfV$to(!ipjAUG23XH+S&cH(9*Ls78TdiNH^9M z784WJoouBd<+I6J!&2vqj*+2;h=i`1x{jo%x{0f`wQGE20;j5kiq@CNB5z?KK~Zo7 z03$)TIqhydzs*+$ZlD){;5z%>(=d8+i<&v3)8;*DEQ~B5*~tggTeyTa0a>8fbK2~s Hv5FA@#1Ch( delta 268 zcmewn`X#uYfsuiMft#U$ftkU;KUm+0?;_hxpvWE|PDsv8EN~D1mde1uC; z0MY_L{s$n?CFZ8yolv_R z$WH-k$ScS%E&)0e2sE!u+~LlsHHk5sQEPJ!<5v}BkUxN!tzvU=JipCX25uIRI)-b1 h#5cp}$qnk}jEJB diff --git a/fonts/jitsi.woff b/fonts/jitsi.woff index 3b49dd5e6fcebd771ff6ba1d4c55e1615d04e086..98ab92048809201f950583353b27d5089db84aa8 100755 GIT binary patch delta 523 zcmX>QawJTo+~3WOfsp|Sv|SjuLA2J7$pTCg6Lo~^Zzbm@7BDa{W&lO6fUtY`x3u)c zVxSn44Uo?P#RBO$m1#gR7X}8^6cAp#!*@wWY9f%Wz5=Mm41@(I9+;Q`6a@<0RirPR}sa&EWH?aa}vE~#YUjdAL z84l+q=B5J0wg5Hef$-f4waW|gi%WpMQJMJ1pHX|V4`Vi?_U0XoUsZ%zfw~x2fRI6& zL4(1GA&?<@a+R{YnX;*|DHw|yn~EEmnJe=#Dl4g(nwS|IiHRHQ0Xb};>PNB zjHV`P+KfPjrjyqxE7hy!Wn|R3H7s?$=olGlh)C$Fsq09Js++i4Tf4?b zCUB}ssAzqOEb5)=hT6(a+KaC6$-cz!XPuMFHk{{X>t_PwWJ^yCX_=8R68In-Gg lSwOOrc{Ex?gf;@qtjHw1d9y|@BLH}KaXA10 delta 302 zcmX>Sb|6Hg+~3WOfsp|Sv>X_?LA2(V$pTCg6Lo~^Zzks^7BDa{W&lO6fUtY`x775+ zVxSn44Uo?P#RBO$m1#gR7X}6upjwp-NA~Z%8L5dW3=C>(fNIP@Sg@)jF#{+F6ng^X ztAH>^3d@d++>#0g26doWj4UAhS4;XzPJS{_ot*{`P*DpA^B - - { this.props.t(key) } - - { showSpinner - ? +
+ +
+ :
+ { this.props.t(key) } +
} + { !_isRecording + && showSpinner + && - : null } - + src = 'images/spin.svg' /> } + ); } } @@ -126,27 +138,20 @@ class RecordingLabel extends Component { * @private * @returns {{ * _filmstripVisible: boolean, + * _isRecording: boolean, * _labelDisplayConfiguration: Object * }} */ function _mapStateToProps(state) { const { visible } = state['features/filmstrip']; - const { labelDisplayConfiguration } = state['features/recording']; + const { + labelDisplayConfiguration, + recordingState + } = state['features/recording']; return { - /** - * Whether or not the filmstrip is currently set to be displayed. - * - * @type {boolean} - */ _filmstripVisible: visible, - - /** - * An object describing how {@code RecordingLabel} should display its - * contents. - * - * @type {Object} - */ + _isRecording: recordingState === JitsiRecordingStatus.ON, _labelDisplayConfiguration: labelDisplayConfiguration }; }