From 2d7dd588958005de23ef6b0c652b26bf22f0373a Mon Sep 17 00:00:00 2001 From: yanas Date: Thu, 8 Feb 2018 20:58:14 -0600 Subject: [PATCH] WiP emotion animations --- css/_emoji-icons.scss | 101 ++++++++++++++++++ css/_videolayout_default.scss | 8 ++ css/main.scss | 2 + images/emojis/bomb.png | Bin 0 -> 631 bytes images/emojis/bulb.png | Bin 0 -> 715 bytes images/emojis/clap.png | Bin 0 -> 1167 bytes images/emojis/fistbump.png | Bin 0 -> 816 bytes images/emojis/heart.png | Bin 0 -> 513 bytes images/emojis/highfive.png | Bin 0 -> 1131 bytes images/emojis/perfect.png | Bin 0 -> 812 bytes images/emojis/sleep.png | Bin 0 -> 390 bytes images/emojis/smiley1.png | Bin 0 -> 839 bytes images/emojis/smiley10.png | Bin 0 -> 1002 bytes images/emojis/smiley11.png | Bin 0 -> 759 bytes images/emojis/smiley2.png | Bin 0 -> 931 bytes images/emojis/smiley3.png | Bin 0 -> 1035 bytes images/emojis/smiley4.png | Bin 0 -> 924 bytes images/emojis/smiley5.png | Bin 0 -> 728 bytes images/emojis/smiley6.png | Bin 0 -> 923 bytes images/emojis/smiley7.png | Bin 0 -> 1036 bytes images/emojis/smiley8.png | Bin 0 -> 683 bytes images/emojis/smiley9.png | Bin 0 -> 678 bytes images/emojis/star.png | Bin 0 -> 900 bytes images/emojis/thumbsdown.png | Bin 0 -> 830 bytes images/emojis/thumbsup.png | Bin 0 -> 840 bytes package-lock.json | 5 + package.json | 1 + .../large-video/components/LargeVideo.web.js | 2 + .../reactions/components/EmojiIcon.js | 50 +++++++++ .../components/ReactionsCanvas.native.js | 44 ++++++++ .../components/ReactionsCanvas.web.js | 31 ++++++ react/features/reactions/components/index.js | 1 + react/features/reactions/components/styles.js | 12 +++ 33 files changed, 257 insertions(+) create mode 100644 css/_emoji-icons.scss create mode 100755 images/emojis/bomb.png create mode 100755 images/emojis/bulb.png create mode 100755 images/emojis/clap.png create mode 100755 images/emojis/fistbump.png create mode 100755 images/emojis/heart.png create mode 100755 images/emojis/highfive.png create mode 100755 images/emojis/perfect.png create mode 100755 images/emojis/sleep.png create mode 100755 images/emojis/smiley1.png create mode 100755 images/emojis/smiley10.png create mode 100755 images/emojis/smiley11.png create mode 100755 images/emojis/smiley2.png create mode 100755 images/emojis/smiley3.png create mode 100755 images/emojis/smiley4.png create mode 100755 images/emojis/smiley5.png create mode 100755 images/emojis/smiley6.png create mode 100755 images/emojis/smiley7.png create mode 100755 images/emojis/smiley8.png create mode 100755 images/emojis/smiley9.png create mode 100755 images/emojis/star.png create mode 100755 images/emojis/thumbsdown.png create mode 100755 images/emojis/thumbsup.png create mode 100644 react/features/reactions/components/EmojiIcon.js create mode 100644 react/features/reactions/components/ReactionsCanvas.native.js create mode 100644 react/features/reactions/components/ReactionsCanvas.web.js create mode 100644 react/features/reactions/components/styles.js diff --git a/css/_emoji-icons.scss b/css/_emoji-icons.scss new file mode 100644 index 000000000..9713d3c6b --- /dev/null +++ b/css/_emoji-icons.scss @@ -0,0 +1,101 @@ + +.emoji-icon-background { + background-size: contain; + background-position: 50%; + background-repeat: no-repeat; +} +.emoji-icon { + background-size: contain; + background-position: 50%; + background-repeat: no-repeat; + position: relative; + display: inline-block; + width: 3em; + line-height: 3em; + z-index: 1000; +} +.emoji-icon:before { + content: "\00a0"; +} +.emoji-icon-bomb { + background-image: url(../images/emojis/bomb.png); +} +.emoji-icon-bulb { + background-image: url(../images/emojis/bulb.png); +} +.emoji-icon-clap { + background-image: url(../images/emojis/clap.png); +} +.emoji-icon-fistbump { + background-image: url(../images/emojis/fistbump.png); +} +.emoji-icon-heart { + background-image: url(../images/emojis/heart.png); +} +.emoji-icon-highfive { + background-image: url(../images/emojis/highfive.png); +} + +.emoji-icon-perfect { + background-image: url(../images/emojis/perfect.png); +} + +.emoji-icon-sleep { + background-image: url(../images/emojis/sleep.png); +} + +.emoji-icon-smiley1 { + background-image: url(../images/emojis/smiley1.png); +} + +.emoji-icon-smiley2 { + background-image: url(../images/emojis/smiley2.png); +} + +.emoji-icon-smiley3 { + background-image: url(../images/emojis/smiley3.png); +} + +.emoji-icon-smiley4 { + background-image: url(../images/emojis/smiley4.png); +} + +.emoji-icon-smiley5 { + background-image: url(../images/emojis/smiley5.png); +} + +.emoji-icon-smiley6 { + background-image: url(../images/emojis/smiley6.png); +} + +.emoji-icon-smiley7 { + background-image: url(../images/emojis/smiley7.png); +} + +.emoji-icon-smiley8 { + background-image: url(../images/emojis/smiley8.png); +} + +.emoji-icon-smiley9 { + background-image: url(../images/emojis/smiley9.png); +} + +.emoji-icon-smiley10 { + background-image: url(../images/emojis/smiley10.png); +} + +.emoji-icon-smiley11 { + background-image: url(../images/emojis/smiley11.png); +} + +.emoji-icon-star { + background-image: url(../images/emojis/star.png); +} + +.emoji-icon-thumbsdown { + background-image: url(../images/emojis/thumbsdown.png); +} + +.emoji-icon-thumbsup { + background-image: url(../images/emojis/thumbsup.png); +} diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 6595286a8..5ada31426 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -517,6 +517,14 @@ width: auto; } +.emotionsCanvas { + bottom: 0; + height: 50%; + max-height: 200px; + position: absolute; + width: 100%; +} + #videoNotAvailableScreen { text-align: center; #avatarContainer { diff --git a/css/main.scss b/css/main.scss index 1ead560dc..039088ad0 100644 --- a/css/main.scss +++ b/css/main.scss @@ -30,6 +30,8 @@ @import 'flag-icon'; +@import 'emoji-icons'; + /* Modules BEGIN */ @import 'dial-out'; diff --git a/images/emojis/bomb.png b/images/emojis/bomb.png new file mode 100755 index 0000000000000000000000000000000000000000..4c833e97531699ddcba447150c29e8e140ade0fd GIT binary patch literal 631 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAjKW`IwKE0F%!uZD@fE;9RbB&jv*Dd-d>N* zZ!!>RNVH>V4SE`KH)f^5kN@^XAt(AaUu`RPnx<2|{=>7*fT&v?!E=@*d+w3!HhZ$k zX6|WYzA3qv-*1y-K6QC_k(J2u@+)l4N>G*QT{-ldv4P&={2#9`p(~(ow{)*&>v|T5GEPj;nfW7@5U(cOAcPv0nW`*>_H|TmJ=2_9&2p4A>Vf7zcJUgL)<6l zD82TH`e$?~{>HV)te@TX|BJW0V-J$LC-3BOVVc0dZOf)hq%Su0=-K>r^;d3>vMqv- zbNZ!!@;G%q2z_Xlm)6;wsrsJ11EPLJGcMz<)1hEKHZr0 z?8b)s*LUB%ejIAumHhu_eE**fkj;E&4Rno6NswPKgF-;V{{8|327&YU=R3SlSpPl& zD0M&JyukYXyJGL{Vqjpr;_2cTQW3Z3if!K!1%Z}}jwi~Jm?q3(EN~`~HQ~OXB36pMRYc$J|!6vRFW)Z^_2V zt}8xzNLk)-Iq?}ty>ZQW>^I9|Pp80BAT={3W~i^X}0iiU*3sp1tASw9tP%v3OM zRhp@A%J_wW({G+nZYRz!NNAZ?&)O>YD{FdQlt5de1>f{d&byL~3d9r3^7r}v`8VI+ ztW9bf*U6*Z`;+Yv z&NCAgb`~W~{h-VK)9LHW5J%RJ95)5t3b1IUEnC1~b>g1zV=3tpgSYOVfsxJN>FVdQ I&MBb@0FUrq9{>OV literal 0 HcmV?d00001 diff --git a/images/emojis/clap.png b/images/emojis/clap.png new file mode 100755 index 0000000000000000000000000000000000000000..5683995f1b961bc3e1f9ed7bd853b82f84d28e13 GIT binary patch literal 1167 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAk#y#SvOS0Md=jWK?7b6yic1T+Dt z=3u5j99^GP2NZ;JFLdQY)LfoWa(QCuk%G|UWidBq*Pp6Qg4hmGd9kPPSaBrKs7rmt zSEp1Q&I!8ITLhFk-=1@AdJRO)$*TA>4XI~aGLdaOQV<5=UY$~TBtI00fQsu5s(l6e z(5ocKFPI_WJ;Q&4_4@_-1I{ZHG#CK+|JMsRoS#1*$V)hX-{AfK{|*5_0tgfe0`~9! z-#;J7?En9Nz5|fHFL3_;`~B{DWoYZX}`YFYMCq33_r z{1KaS?o?S)*#z!>sWL-2*ezuz~WG_SdO_n7!T@09|rvp%sdFm{>8f)v{e}^1gFktco@hCN*`0EX;eQvD5#_MYh8aKS2`A>=pSa8A*1q{^&t84~ zdfjz~p~qdrZJe1`i*`Audn;<)?K9;~Uoj~mF>B$a&qsG;>nk2v=5*)e^N)%0HD-s( ztfi`@I2FvM^F3$$7k0hi!uka=&*x8NSfwlW>h#iJ?rD$YqWssaa8V4O!0+dkw$@|e zt_d?|{{7bH#gf%7P`g#%Y;UghbBLciJIK^E{U<* zB6a?S$J*ykI_Yz&?Ifr7KfbiQOL(S!>0|>BJ_WH4=e^Cj zvbJ*VD(vN1&@Q{BLgdl%JR#$}2~HfkEk4t|$}D*oE-d--*l5r8mbxslpQ280e*|f^ z#BAj5J1yOxV%*#Eh?hlS@0HEXOTH{w!s#(jx21kkg3z_?-{hAVOS}#7)UMXx7s%FF zna>+4(4{z4!XYS2`(#xXOOmeYP2aUm6ZW=D_gB<9yN1tY;foj_ewF~9l~bHG+CoyK zP88{dwgKh&oW2QJRdrlF`)pFW6i55_kL+Iq5~Vnd1+-Q_c>8$DOgX2OYnOb?*7`9w z`3z6eTKA9o-uY~&mi&KiIqAq|yVvTCAFEdz*v4;RpPeBz`}?K_XUAo)dj(rEc@}$B zN8QfxQS@2MckQu^{3)J8Tf|DQm$G+%b(_6kn|s#>vtvrtrRH<@(X5Aa42YCFqpqTVEy?7f&2aM8yeo*|2*-Efq^N;)5S5QBJRxrLq?!# z2ZO)C-46|oX1~3Dw{NzA2+M;c9*cu2TX>H=v2Xice@y7*M^xVAK8m(f4j;D6#v%&MZRdtzBlPi1XRW>A%!qPf>xmubefpG;cj>$O-e zdU`~za+)UV5aP-g%F!G!Iau`d;-nLsHrbgqt@*F;d;f$_^OxjG2#MPGwevOnGq^Zk zWWgoxqLRFhx#ujuPb*`*#JRxQN3f*m+*iRX=P$g>tz+zME@l@D5t_o>P~NqG*YQ=b zhwv1`3;yZnEq7Zgtx#IQaqj5O#4j=}eR`{S6onOpuNL?^wwpX*4iPLlT-`4D$|b;g zg4&B+0qZ$}SaKI-J9EuSdoiy;$1(NJDUJ)G@;(l;6zX#OTkGAJW-?r5x%)8CGKBqv zOTQfBu7f{igeLG$=+m>4*!5v;Oaj*_j!oUGUp$?l4_w2^Jg2R?pq2VnrF8zG6VE-<~j-Y2z|Nnd~&VIHhgmI{%1-A zReiFWQ+~SKm{@j&OGYq+Q%3O0n@N2SKB`Z&DC|L Ux7OFJ1*R+pPgg&ebxsLQ08Ec|0%ZK0|R5Gr;B4qMcmyRceCCY@UT3v+$3}R z=lt*WH=UUeF6j*3bIJ8(xwb@^s=DJbd-eSWFY-Jx9j*qh|Fo#FeS`kbmHXzGuKhY& z^OIA0%$ZZ&77snO_FQa<3coj{<$cQ2#b3{4US$;*x+(DVd6g-PnQP@~MQ2&XB_CWx zI%@)1mY)d!eJ=dtnVT6~9!|)d_R%$S+3_PU5*Q3F9pq5B;K(2ptCCZ)F>!gfte1F~ zhqz!#lY{udweES2b&Cg?OE2xx-|%lm=!cbSYyypSCS8jbT5K{Yxrtry&l~>uYk%3dmp&-J T>_5>27$Xdxu6{1-oD!M<4x-_r literal 0 HcmV?d00001 diff --git a/images/emojis/highfive.png b/images/emojis/highfive.png new file mode 100755 index 0000000000000000000000000000000000000000..82a45d296952ccd4f5fc7c4d939fe73ceb76b325 GIT binary patch literal 1131 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAjKW`IwKE0Df9uL&zE-xLZFhcJL7 zG6T*As)0zsNw_YE2t3h(bX ztlw|YU*HhX|5)~r0Rsc`1Wy;okczmq)1#*^G7xBCciO?y+|^)yh4cS^_jQ>IJ#W99 zx%u5SZv9_#*R3;}p?~FT$xWZL$A8V5|F-bcuke6+#xwTK>#lyWK5^w-YMA%0D!X;U z8JqXMw|($#`q2q$#c@CR7wls?^EdTVz)|0_cT0oV4%YD*rwRE)nQMzXzCCp_Y%+sZ zJHr(5JP%%G*}eMxH}xOSNsM$krR(*D8afWtqQjc&>i@LAlZ~x4p}jM<^C9SbSbP zeSvHdm+-RXml?A>9qXKPe{>g}R`(G!O)Kr)%HvReqvFMy3!B}ZEV=k4i0RW(8}o&m z`y@|4da23O6eN_cX*_Mh7b|gAN6m|o0#WWg8^6rhn(Df9@$PMBB>eju4@llEjYu}! z%g|!vsCDIrZ~qyIv_p=Tg??E&OU2nWH@%)Dnfx+RmUSv$D#x|1mxTgbg9MW2&X{*@ z>MC!xQ-@^L91p4N-7w8`UaX=<;R=%_x8g5rYpy8Mkj}Yv)v1cDeV^cj`SP+6y+}XjNWy)2FCvhLkMF^Q9`Y;)IsDI~Xc+mTE5(Zz|h(_0^PJ zqL-8xoGa9vv}8^khgPhQwUv}IC*`>mir zc|-Gb!Tn|*{2V0g!c(p#9{+dqgu=f=0+*`Um&!L<{jGOsez@Say25J5%fS`azf#=i z{*w+^xjDY)D@)3gAE}r1ZRgG5ZjxGfvrDvjuk`+hZY>M^G`gmwH+KHi4&2>TROq_N zu*B?b_yoZwPmAWb9=#9mg&ogGSE?JQp2&RI*QT(L!ApvRf8oBSGfn}EljeupOW)3a z*7%3n;o`&)N%LhI&v$25v3%4m+~~aGyUdOnCrv?>Jyl1XSFBz3RITL0QWgPY_0{u! z7td@c&P_|_XGzpneOSGJwoX*#Fx^S;(`y2c94sdIM6`W-pF@GkSy!Wj;_X4VsQj}&%XP?1yiv2^Dx zUAdLP>QVnRZOP3OEXb^j?4{nK!#P2xYLhN><)3ZIyfM4}e0$E3g3zl|DvlLLUYlNXvMT=a#8QU& z)8_#lAyX3M7tG+mAkcq4;e5mV`v&g==C5yXP*}!utIkdyHBb7?|ulT^vIy z;+EdHTXb7Nfc3!!k0VYixqc_a`zwQ112H%a@Y_c0J{JK;1OnN@+Th?-IWtOGI z?%GP)zh`>gzZlN{m+!8K@UNFOPTS{k z*3K^9Jc<3SOvz)%X!g4m0&^FJzX;>gy!)g7$a7@}VF&IrFMrw2Td?774(|n_$4lAY zm`!oIWSpM)dPB6Niutj&8}fX+UJ7Nb=;^WV|tqX-c@;`qyV_>OQoB924PHDO2ijCJd&o8~5qL4cMlhpj%Ga7^TmfZO!@m6SV z;{-`-rA#HwT@0-O`g`u5TgtGN^{P*?<(<5;x&LAmHd^G^dUDN7;#~0N<9FG>e{nW% zAO4vvzG)s?)0K%+TA3DU%>D7=Q^1O=DJmOT4lW3Fd&Rxb>K^ZmgHs#}q7_A%wccGb zTyRoN>6-JQO^Pz6ZgI^~hfbW~QfqO05xb%JYiLHW(ThK;?jBfgkl`chxS@MWi(~pC zp$h_UBk~U}P|Rgg%FR7AY1Q_d5=%bTXH?c1+RKP~%pRI;QGA-R^hC z>k$3Z@{4YHr5{%g+xKg0u<1DyW3#LUCI6VdSg`Z=98BB+OmPgJu6{1-oD!M<`jB^f literal 0 HcmV?d00001 diff --git a/images/emojis/sleep.png b/images/emojis/sleep.png new file mode 100755 index 0000000000000000000000000000000000000000..9e1ab21bcf1ef5a23724d85da7fe5e41957ef90d GIT binary patch literal 390 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAj~aez;VE0A{TJV+8+;&&+-s7;_G z$S;_o|9*pj!TI+N0rU4OtS?BYn!7U)DEG{Yki2P+qz}4nxR!XpRaR&JLY}a$E8@{{w%nzLdo&j<*Ed_tmzDgy z;(HE9m|~ur+ME3On+{xyYyQfAan)}-C&w%4yj;7aqC`IMXLaW+Uhv?%J%`H91rJ3Ilh3-Je*%{4B=lWtjDZ$w1#Tc)I$ztaD0e0swBerPcrd literal 0 HcmV?d00001 diff --git a/images/emojis/smiley1.png b/images/emojis/smiley1.png new file mode 100755 index 0000000000000000000000000000000000000000..48bd35e5b74d32d5e8350f0bf448b9feaa1d8fc8 GIT binary patch literal 839 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 literal 0 HcmV?d00001 diff --git a/images/emojis/smiley3.png b/images/emojis/smiley3.png new file mode 100755 index 0000000000000000000000000000000000000000..857e1be059217de54bfc96adc2e7e0e20f32c950 GIT binary patch literal 1035 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAk#_5hy{S0Md7s^I?_UkC|gKoF1% zM{p5jWe{1c>fe@Rd_CgvXtRBRFKe1BLuDA(w0w!po$5DNS@om~&##bej^kU|pmc1e z!JFOAdnRhXOw9YeJp^drzoY(d%hQ2oep?vzDkJApPvYmv@jo|&y{}7slb`vaHTmnT zm_Pdhf2@eOF{exj=ychVAirRSg!%gu`uE>wD0nZhzQN%9c?X623JmW9=C5~XIRE(9 z>|zE6re~fmjv*CsYbL+!YcddV>t@w8QDk#`< zr!Bf!!QS)n;OFM2UiO=#*!~s!JZnlzOH|plVfVJ8^z(%xbt;QyRyRlmn(CUryXx`Qx?pgJ~_vvPowkm85!HHE?+{K=O3|n z+jw97v2fkg#d|g4xZOj_o%+^14olfqxYT6PrB0VEqKOat1Q|KZl>Gn1tL$-`;yB@t z!xU4ckG*b93m%udxO=nQm(pqauN<+Zb;7RdEQf6!ISfy7T+$hC3AhxQA1aZ4wydaW zfq2nt7xNdr3QkTL#ueKqNCYlgaJqfoTCYnYOEVQ@11@%R9Y3COp{s0`vAg01p~qF} zF2C6xg}W;*xHQ%Lz&=4;9@VQhOV*yL_wi)bk-E6*aMtmumU`>nHH3Cen)mo}&{Vl4 zv#vd~ouKfa_umxbZp&%fYlXiACQNR<+hu!f5&P!bBDcI6ra4awfBHL2{o&q~YkuTg zmu+5Tz|)#&!Ln7_+wg;`_V4sZ@6R|0eEj!5C*f3wt^7vK9kVO9yUR_w?0Vp1%2KX> zU*Fc%7J2Ntmv5sTQWIP+{j0s}yG3i1Yo7OkClyPl9l7FryX^0|>poZNu9xTD{*bX! zjHUE#ek{jscSRdsjwlUh_I%?-w11#RL{m;{E%|F+}g)dvFi+fi>Ykpv&L%@3w%Xn0B(Utv9se~ScqF|i*&7JkSYGQ<*l}WRQ-a^b zVhP8?vsQdwn$Nc6rT+61M}>r%`Z}}TzrNzrtT@f0j6+HDej>+Ho8>NCO`CuAlzKQD zgsuyg{S2& literal 0 HcmV?d00001 diff --git a/images/emojis/smiley4.png b/images/emojis/smiley4.png new file mode 100755 index 0000000000000000000000000000000000000000..2c8b71100bc8e699d72be894bdf92412e2cba781 GIT binary patch literal 924 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAk#>Hwb*S0MfWj4zQ$Q{Nbf;=`}w?MIvKS2iden`zLKE_{BG z>9l-_!=X0QfX-Dc3GxeOP)O+CfB!#2!2I_P>l@B1B<%kW0R;^A|G%Fw&#HzsGz%%8?j{?6av^7!NxgD9S><$H_6rm4Az zEYr~TJ|C8vsFrEuxkCCh@9iu7tv)Y33YJRBR#m!w{bi(;BK0oo%-;)F44Y=(dCS?Q z;<|s_B!71-tYkC%GEw`B^`CsTKR5GIcbD$&wc2Jc^X=7vXD{}}t!?wup3C5OYZ2co z?-h*aPFX3XUKPsFQ{*mrxsf$+_PiU6WlC=G65m&*^D#(hGW_s4C(HQtj9i10*Ok*e zUncQiXA1CQJz!{B#_+{>J;RD4Laa}_zIZEbTBOe-Yui+pa#6hQ)7q>3IvT*~W6@P+c+Plx!qGQ*lP)tyn!V1wZxq@ z|C&8p;b3-rzT>w%-UY8_%5;S_q~(80&e=9kbMjiz$(PL3vbgW8|Fw70e3nJJ=eHP} zi+(7+l+9Losea>wqA&l$-0q9Yzq&o~VyoQrK5zX#x%I8J9AYUp9J}*xJw7aN_xRYR z`QB&k`t%qst>5^2soK6YSMmKjw4}oO9>1!((;#4;d8AjTakKv&0a3GF)}GR7^=I4T Z)mtA=={=ac2AFOcJYD@<);T3K0RV_ywTb`$ literal 0 HcmV?d00001 diff --git a/images/emojis/smiley5.png b/images/emojis/smiley5.png new file mode 100755 index 0000000000000000000000000000000000000000..70240ea5bae5115a21f5813cfffd98f4da43ba60 GIT binary patch literal 728 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAjKY=BRQE0F$w#+OJ`8OD|7%J68j z{pL>f0$B93XWX~@$ZI0u6v)g%PgVN&LZY4kq_)3EO zf*BMN`uE>w2$=ugVSU5-+Ue)I7#NsjJY5_^D&p48cs*^k0*_m>$J98cdv8|&Qy$9%K4>RLtj9GGYB@~UZK%oXdvR70uglZ%YsJ<{pSy5o7)<;>(frgxs^jA#9Y zp5I@@CA@NnN2JdYEwx<e?b1IhRAUfTTB9A|Ga&FnQA{is{cRKZs+DWzW;~9j-^J= zuaI5Yp!ENEV1Wnc{0Q?$dF3|?Gn@UTzs|~jw8H(;&yN~Fckq=2`2{m5B=qmU&k!*G zy~Fy3^R?5@buln7?eKJQ45^4aI^*TEM+yRN2PK?M#8Tq#R?q)lzyD&%QO#YB%`Yu$ z>np!}o+sie)Nr@q{GOfs9roYTY7*OZby%2WMdDfVl-{)_D1P~oaj}TiJW|)ab4SB& zj=Fe}R)Z#kUCNKLB~H$|FT|?YqsH@Q5yza493{p+4y{Wz!ahA!%Vx|lvwP^d34iER9xNIV^wQGV)aOK{PEjrV=HcmHFD895~bH_ay)3jMi z?AnzV6V@y<=ThEl|Hw7}Az!pigYrzqoQJRHsWl6x^yYmM?+NZ-`f}REMQZ2LBs8l0 zc@}q82RAlKe)dSd_&CYS;K4>q!J`jcd|Zm3#b@v9JHPG5oUJF9DZDkV_5c6aSmMU? z+|p%#Emmr)UpmxN_y6Ne-R}kkqEoM`ub-=QLSjOMmecpHkDt0>II&p9RglgPXlN5we-*P1<%g>ZmiUQ z_E<-mSDxR?Z*3XJcGNPgT#-IKYV#c3KZbA5e_AyC`N@ew=a>{(8f8*&25-!KHE2_nHJxyPSG<-xay} z+Ya{e-n@FFRV>$DBBC$m*G0}urwK=2hyKsxqN1+Z+EmVczd0@_}-NV zEnD)kCcH2VOu6%8=XAB6=)ms>#ipIznEku8boV2 literal 0 HcmV?d00001 diff --git a/images/emojis/smiley7.png b/images/emojis/smiley7.png new file mode 100755 index 0000000000000000000000000000000000000000..46b8fa02391a35c04e0d977a0df1f80e8769b799 GIT binary patch literal 1036 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAk#$pD`aS0Md7s^I?_UmyubKrXTf zg!`^04Z=VpA==x#Wb)kDf$aN{na4vz_6Pee53uO-QJ&_jbv`V*z?b!9V&40@)Nc!; zfZD%(egE~xuQXSNV>1mj^^I??vZ@T@`g+9U-}#8&cl&<4I$~yH-yFxcxl{eoX8ZXS zvOVd-zaB05{^3^tl<9x3IAF}87MN2Q&~gX%LrA~6gHT@w^uStT@FUg|Q9-|a`(<`ZnmZ`cH1 zALRQo!|zDU4bJJFN{5_hr3CVqEn6;h^8@RfT_>9K6HhK$$FIV_xKN^2pwFFO;lu7p zCm1IkH(13X@Ax36n`uEstXs5B{85Junn@{h?Aj-~{LoRFk=tQYWcR{x@{Gyb6_v`X zBsC+t{<;M^yenSf@}?r7Gv?JD=dBul{&3$3y298L81l(Pl26?~@FWM9m6HqG@rau5 z-*Y2AgmoR0(9mt3>KJh@T|?u!NSDqB&7=*!la|j}UdbdnF(If+Z6bqRqP&u2%w|#X zHAaypYbLmaDSk?5t~{lEY3Irl+Ae$wGe2+yr|mFVF0ivf=Z6^g=Cf?u1sH{jJ0oQF zFR1&&6d58DK1U>7T)f@=&jhQBCcTNx7ITFZmAb!iM@6|T7mP}ocOye^ZWian%1`b~ zG-?X=O=GsdvyS2CA^~w4EpTDzsO!|>}YT==E@$O0s zb<;MhoLq3sCh~lon9@&2*X4DNNlhZhcz2kzX$QyLwAA1E=U`~er%5tiOs;|(pQ--+ zcYbwz^TDsFC*L1@@XCMxdGBiqAEu`Ib}5;DomzRyN!v{HsKSnfSC{g$)Mh>6%j~-N zvv*=f-^W$j{mH_CJx@38OQ>JyYT1^3Sy*Yg%ZrV(I|FtWZ}F;R)SweL~lG(nq9SSc4y7$EsX`Mzuie3%;{XS80E@YAMXE%|ei0?9WmoHu7-`byYK5(|kMYS(8x+gRXUzsCw rV(}J^O!@iq|81W$PyTVqlt0YxL^DECKNvCslR1N@tDnm{r-UW|AG_*F literal 0 HcmV?d00001 diff --git a/images/emojis/smiley8.png b/images/emojis/smiley8.png new file mode 100755 index 0000000000000000000000000000000000000000..22bf80de004d4d523d55e47537169fe5bc414baa GIT binary patch literal 683 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAjKY=BRQE0F$w#+OL+^@zuwiP}Bs z!fCDy1-`6rb~~S6WV*Riy)umJ<|?aWGYuYXwr`H(o0cyzze09pgHo=wPae<${*oZS zUt=`Ln;{8oMCioHsEo%*tTxIn!vmI7uCF(GY`T~bxodG|+GU$k*F|rFZuZ}Kk+4tr zq|Hs9)-yll|rYiB1V#6WPDm7WsYLANX|1FR9MLNhiIx6x{kGW6AhW zx>GRWldz`ZFIis}-~J4>jDKA%29b+>BI1;l&)6;ID*P&^dE}+7mO%J1l^CZ>2UOdp z>~!&yUmJ08(jf(&FOJpxb}V9CTWo*)KVR~ybd4d;&fO>X-Mn(v#plMGt8Fi;Chj-2 zjdtkx3w_u>{!pah*jO@^qxG6jTtVi?{B>5Ro`&IN^KF( zxso=Q6ptryp|#6H%v+3~6nkr$>USl(=;Y=-{o!HaIYnyTN;j9+ew%%yG~R|3I!tMB zyR0u@Yf!B8t$ohG#RUcLRV>$J!9%&coUJu`UCRtIKV{yDo&c`|p<{!NQNKeW_; z{NaPCprfdMh}4{!O4&bjxK}G>?|aA9f2u^@+y2xKhh_h6YA0=RT%eh>MY~_ws>8N& z4ac`GzEw&$s*kcNgoK|mT+zMy_hi4sTS1$jM#dbfoP0KMe_Et|UD@gt2a9qxtdo}D wV4K!9@nllk?;FyA->%Kr8>#+5{r3mP1+f#EL+(fX2PO&zPgg&ebxsLQ01P)dhyVZp literal 0 HcmV?d00001 diff --git a/images/emojis/smiley9.png b/images/emojis/smiley9.png new file mode 100755 index 0000000000000000000000000000000000000000..3819f5fdaa2b11ed9e7db8383211f38afe16d8ed GIT binary patch literal 678 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAjKLV!<*E0F$w#+OKx=E_ju%X)04 z!JFOAJ?X;DaeQBY{CfQ8c4ZjX*CQVDD`Y3v`rTY*^=PyG=1%qVi%eHGD5Yl{Ujnp) zuO!GXm_Z<*VgGpsgZ_l~_Z8NAq?XNOU|@Xi>Eakt5%+e+%XPC21l-ndZ{q!VX4cnx z-~Qg;#B@oj&FW)QNa(Ad;sWYSpJ&ee`D1%Rj7O`w7uUIcl|Mhs)AVYUU8SSs8g;Pw z(nBRRp11@SZsC_)`725qR!rk?xc1)VjsnNw_--$j;C%ucg_SG}=XYqjER+zn^qz^!Aq zZi`y)x_4_Iv*UlUi#avhg>5yipDy|1^xyHXkf?%5*)rCLr_a?i2H3co$gGW(aM+=< zh@0bSuuJg&!*+}Z%VTtv*qr|RU1>a!CfG05cqo0M!-cgwT{9d6H+v|3NxUz1kypgB zTf}Ml{@MN}vKm=pj2tzJA8$t7u1V?_7M!fEw8Ks=yu$V3pW2J{6Pp&l%~h!7ZdVd~ z$tHd9!o-e_P^Lu%k%G5#Q#MTGxt-gx*16uk|FH$t=K8rD=n*t!29(L=N0Df z?-$tb5O6;r!D0P*gZTwE&y9r{7?_rOx;TbZFrK|}bJ8jUfriA4X%4e$y+vZ~|5rS( zVzpB2sGFtu=UD6dQpwE66*lq*_#@&RS_4J8XR_3(9Q2WKUAVx;afy)N=8%BOL?>6d zfXucIqgbA)9sc?&4y=;166!57RJph+omtY=*~v7j$S~xwugV;;cef67epnXG^R+^m zz3_U&V>c<4dtbU23OrZd`e4OR2Z?jerG3Gc^?lM zBk5HSPF`%=)STetC)1kLBz{X_$?ryPNxMBIXMWbYycE{aSoU>cTF{4M_pVz?Tlw$P zY6#b;zqHD zEnarq{^0epCqK4NS@x5?=+>o$ip!3a_+)r%R{p)97GKlg(UGzL#RP%iBrBCKsV{%j zInPU2TKmtgq;0BNUix-zcCH;4_`*KMx3w8+?dB1D?X8s{IyWxM<;*T4srKLEPZm0t zSS?KGeekfKPp!l;OT=zX0E=>v_`|OrN58#0U_EoT^wnyQ6BqB=TRvN+GI7DezL?7v zY5wi9ygPHuxK=Z;?R?ZHdCybdZFS$#yXmtv)?Mtf6?99j_dUAac#UJ-lO@;p^&EQM zJ*_RY?~U@L16p0Yp&R(5gEsj6t9-HKN_X^}XHFkH-ZHIT*>zqlnlEHE^Wy}&PnDb4 z7bQ8(N}F|{E3oa*43AY$olTNGH>>f?3X17SJE6bV@y^>Ty8<2?`Bg@T^le+&68q2V zr?11w<@I72@e}*F4f!%W4t`*H-W9gP^2*}U8#1phbp7-5__wq(MY5)KL literal 0 HcmV?d00001 diff --git a/images/emojis/thumbsdown.png b/images/emojis/thumbsdown.png new file mode 100755 index 0000000000000000000000000000000000000000..892f5cf1ee52e1b6aad8e4d16fda2dac107c158a GIT binary patch literal 830 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAjKb%0NZE0Df9uZehcd1C3sp29Ot z=|BY31!Mz7PFBSO*#|TIkC(+domn@Bg=K6)L*(!+l!eOz!8WihI`Zv%c?@ zf8!L9w2QNly|>`K`}~T}`Ew2!H9JII@N9Ao#CHvS7y&#S9vUwzt}0AdWLPL(bbs!`}Th+VwcnzcOZ$(j{)QgS=4yBzAc^0au4WuT>c@8S)D zyk|H1>V%7a+hDG<6 zuv2$jTg@crxCU;Tnz4PV#yzi)oRaK|mD+(UT{YT)d!}mq)(<>kBdLF>cy>yjQtBy2 d&sdv_@quB9wN>u5e87~*;OXk;vd$@?2>`{2cl-bV literal 0 HcmV?d00001 diff --git a/images/emojis/thumbsup.png b/images/emojis/thumbsup.png new file mode 100755 index 0000000000000000000000000000000000000000..f4bafe3cc19a92c1d783e5f15e3f28c46a459748 GIT binary patch literal 840 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY3?!3`olAjKb%0NZE0Df9uZbjdvMT=itU4e% z)07TGmnW7&5YUk0Wie-4GJy(C)g~Rz2|89Bd7&%++Vq-(nf^Cs*Pn0Cxzt;9rXlr6 zLFm;f6*4-^@j&Y(N`m}?84AwdcVI{`*x#=p(6Ih}zHZ z?QhOi2A&Sy==vvSjG&O%B&|j!J^Mw1(+CSv5L%GxGt+x zPFf>tXH%!-A-(+GtKzIm?W;=!_;a`K&w4V2L7_#%;yJg*|8FNIi*udo)OTPmVm>aa zv+sY!lat)6Q^oGTU3~W7HNJ(4_1Yab9m>0NxkWl|n5`=><8sN1=5tml+19k7YP0y? zoclu7FIHdq*YiPcrff@ql-b)9&cvnnx6R+b%%*aotRWxc<+v;Tdmmgr^7OrZ@Vq?} z{K79C*X1$o{B+yj{{JS&UCm4vCyTDo{KK$IQtU|GmcBBj=oQlCEp0~89Qi?7Qe2-n zJ^uHF6h-PCOQ?}d;nr|np1ayG!eJs?*2^FNn!mq^VSf5t^~vQ4EJyZhI)-saD!vb! zuCp+LU-4=xC+kFM5p99XP7ZQ^xI|=3&1c^+U*@!h { { this.props.hideVideoQualityLabel ? null : } + ); } diff --git a/react/features/reactions/components/EmojiIcon.js b/react/features/reactions/components/EmojiIcon.js new file mode 100644 index 000000000..f9a2524fc --- /dev/null +++ b/react/features/reactions/components/EmojiIcon.js @@ -0,0 +1,50 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +import styled, { keyframes } from 'styled-components'; +import { merge, rollIn, zoomIn } from 'react-animations'; + +const tadaFlip = merge(rollIn, zoomIn); + +const bounceAnimation = keyframes`${tadaFlip}`; + +const BouncySpan = styled.span` + animation: ${bounceAnimation} 2s; + animation-direction: alternate; + `; + +/** + * Implements a React {@link Component} to render an emoji icon. + */ +export default class EmojiIcon extends Component { + /** + * {@code Emoji}'s property types. + * + * @static + */ + static propTypes = { + /** + * The css style class name. + */ + className: PropTypes.string, + + /** + * The emoji name. + */ + emojiName: PropTypes.string + }; + + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + const iconClassName + = `emoji-icon emoji-icon-${this.props.emojiName}`; + + return ; + } +} + diff --git a/react/features/reactions/components/ReactionsCanvas.native.js b/react/features/reactions/components/ReactionsCanvas.native.js new file mode 100644 index 000000000..d31700757 --- /dev/null +++ b/react/features/reactions/components/ReactionsCanvas.native.js @@ -0,0 +1,44 @@ +/* @flow */ + +import React, { Component } from 'react'; +import { View } from 'react-native'; + +import EmojiIcon from './EmojiIcon'; + +/** + * Base style for the {@code TintedView} component. + */ +const BASE_STYLE = { + alignItems: 'center', + bottom: 0, + justifyContent: 'center', + left: 0, + position: 'absolute', + right: 0, + top: 0 +}; + +/** + * Implements a React {@link Component} which represents the large video (a.k.a. + * the conference participant who is on the local stage) on Web/React. + * + * @extends Component + */ +export default class ReactionsCanvas extends Component<*> { + + + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + return ( + + + + ); + } +} + diff --git a/react/features/reactions/components/ReactionsCanvas.web.js b/react/features/reactions/components/ReactionsCanvas.web.js new file mode 100644 index 000000000..29bd476de --- /dev/null +++ b/react/features/reactions/components/ReactionsCanvas.web.js @@ -0,0 +1,31 @@ +/* @flow */ + +import React, { Component } from 'react'; + +import EmojiIcon from './EmojiIcon'; + + +/** + * Implements a React {@link Component} which represents the large video (a.k.a. + * the conference participant who is on the local stage) on Web/React. + * + * @extends Component + */ +export default class ReactionsCanvas extends Component<*> { + + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + return ( +
+ +
+ ); + } +} + diff --git a/react/features/reactions/components/index.js b/react/features/reactions/components/index.js index eb7b8d570..d5026aec7 100644 --- a/react/features/reactions/components/index.js +++ b/react/features/reactions/components/index.js @@ -1 +1,2 @@ export { default as ReactionsToolbarButton } from './ReactionsToolbarButton'; +export { default as ReactionsCanvas } from './ReactionsCanvas'; diff --git a/react/features/reactions/components/styles.js b/react/features/reactions/components/styles.js new file mode 100644 index 000000000..ed24a4508 --- /dev/null +++ b/react/features/reactions/components/styles.js @@ -0,0 +1,12 @@ +import { createStyleSheet } from '../../base/styles'; + +import { merge, tada, flip } from 'react-animations'; + +const tadaFlip = merge(tada, flip); + +export default createStyleSheet({ + bounce: { + animationName: tadaFlip, + animationDuration: '10s' + } +});