From 0a80c5e1944f9dff6d330d83f9009070d8c8a8d7 Mon Sep 17 00:00:00 2001
From: Anton Arnautov <43254280+arnautov-anton@users.noreply.github.com>
Date: Wed, 28 Jun 2023 17:24:45 +0200
Subject: [PATCH] docs(react-sdk): Reaction component (#721)
---
.../docs/React/02-guides/10-sorting-api.mdx | 2 +-
.../03-ui-components/utility/reaction.mdx | 65 +++++++++++++++++-
.../React/06-ui-cookbook/03-custom-label.mdx | 14 ++--
.../06-ui-cookbook/07-video-placeholder.mdx | 2 +-
.../10-connection-quality-indicator.mdx | 4 +-
.../06-ui-cookbook/12-connection-unstable.mdx | 10 +--
.../React/10-advanced/10-fullscreen-mode.mdx | 2 +-
.../10-advanced/12-picture-in-picture.mdx | 2 +-
.../assets/03-ui-components/reaction.png | Bin 0 -> 37089 bytes
.../CallControls/ReactionsButton.tsx | 4 +-
.../src/components/Reaction/Reaction.tsx | 51 +++++++-------
.../DefaultParticipantViewUI.tsx | 7 +-
.../styling/src/Reaction/Reaction-layout.scss | 6 --
13 files changed, 109 insertions(+), 60 deletions(-)
create mode 100644 packages/react-sdk/docusaurus/docs/React/assets/03-ui-components/reaction.png
diff --git a/packages/react-sdk/docusaurus/docs/React/02-guides/10-sorting-api.mdx b/packages/react-sdk/docusaurus/docs/React/02-guides/10-sorting-api.mdx
index 86532a8a3d..bf51a1232c 100644
--- a/packages/react-sdk/docusaurus/docs/React/02-guides/10-sorting-api.mdx
+++ b/packages/react-sdk/docusaurus/docs/React/02-guides/10-sorting-api.mdx
@@ -1,5 +1,5 @@
---
-title: Participant sorting
+title: Participant Sorting
description: Overview of the Sorting API used to sort call participants.
---
diff --git a/packages/react-sdk/docusaurus/docs/React/03-ui-components/utility/reaction.mdx b/packages/react-sdk/docusaurus/docs/React/03-ui-components/utility/reaction.mdx
index f47f7992ed..cfe9436326 100644
--- a/packages/react-sdk/docusaurus/docs/React/03-ui-components/utility/reaction.mdx
+++ b/packages/react-sdk/docusaurus/docs/React/03-ui-components/utility/reaction.mdx
@@ -3,8 +3,67 @@ id: reaction
title: Reaction
---
-:::warning
+Reaction component is used to display emojis in real-time for a specified amount of time. You can utilise this functionality, for example, to notify other participants that you want to speak by "raising hand". Our default sorting algorithm will push participants with raised hand to the top of the list for better visibility. Learn more about reaction events and their customization in the [Reactions & Custom Events guide](../../../guides/reactions-and-custom-events) and see how sorting works in the [Participant Sorting guide](../../../guides/sorting-api).
-TODO: write about https://github.com/GetStream/stream-video-js/blob/main/packages/react-sdk/src/components/Reaction/Reaction.tsx
+The SDK comes with the `defaultEmojiReactionMap` which consists of three reactions:
-:::
+- `:like:` (renders 👍)
+- `:raise-hand:` (renders ✋)
+- `:fireworks:`: (renders 🎉)
+
+You can extend `Reaction` component with your custom map if you need to through `emojiReactionMap` property.
+
+![Reaction component preview](../../assets/03-ui-components/reaction.png)
+
+## General usage
+
+Our `DefaultParticipantViewUI` already comes with the `Reaction` component built in but if you're building your custom `ParticipantViewUI` here's how you'd incorporate the `Reaction` component into your UI:
+
+```tsx
+import {
+ Reaction,
+ useParticipantViewContext,
+ defaultEmojiReactionMap,
+} from '@stream-io/video-react-sdk';
+
+const customEmojiReactionMap = {
+ ...defaultEmojiReactionMap,
+ ':lol:': '😂',
+};
+
+export const CustomParticipantViewUI = () => {
+ const { participant } = useParticipantViewContext();
+ return (
+ <>
+
l`um&&xnppY<8tr)ej_`kl0 zQ2#l_&M&6?L!N7VN|<$N?F3Ry_#c=-2^WDjN;RvI7Ti4npqTEkYb*fuZLxotKWWq| z3`;3>m4;2yn1_D~7?J+%T*_R$yQ?$snJN+Ojlg1ClN5!**qKtd^T`P|7BhAXcp%9;V`0~TbM zn|)(bO2x8JdTehnp%tP3%0;6fh))!)Cb@oAs^25}a|<{_rnO@0aDO K%|H0bE{1WrD>PtyqnG0pormS%M!Qq{Rt-1y(wW%h9jE z%0Q7hd}X2-UpqVbE~GY;36Z}dTe~>An3E+(a@W GNZ@D=}2uXi{l zos0I(qj$b+<3tv~*!mvxJ_L{7%fFt}A+sasTPWSgaeF|Ow=0g{0Zk4FS<{XAc)-aO zc7=KE3)(rmpSP2IkZB8~XF%<0a$LAUio$m)pkE$Y`y;amxzO^57uP7$h>OF0UmvFp zIMB4YWk=;}0sGu;$54x~-d3s%4zGXKlJ4U?I@+nw 9md}s98wC FEFxByI>zHPpF{=V*SMK+9B|3+iw>>VGMYDa$U)1n`t1$+GqOsPyM~y z8aRftB9m%T>oDUY&nbC>uF9shOiBOh3^OW1YA@#i4;qLgmxKe*^cGy$ce}uD1_R)# z%mh7E0sw48lN9RG^9MT!tTZau^fKb3zns$6Z*K`DD7?r5*y+X&P_M#%?H%F z?%KJoP9xp7lZ}+i|KYi0_5eoov9rt(Zh#xz&Zco5nmYD`_mdR%q$}P#LWbG^%9Q6D zCR0j*ANh {s3iyg7J5zaTrZ|{Hig1l? yu= Q-eUWR`{~yofZ#kV> iJHi{lVj$l_2*ITz zXz+}yirU?Aw0oe|pcpNmFqMHx$@ERjGKRS7`uaMSdYa+f$wu&(MwUZ#!=bLevTkx+ z1J)ea;>gfYNnQ+ZYyO^*ZNxz4sj}QXxE7My1}nAV;I>L-6Iq}Qf$~!S%ej~R2AAIp z-zgXG++1tOok ^5l0Sl!dW%o(yN;*I4FT1!!A1r!^pS`8>fGj9!ERD z^vXy!eR=118qZUvkL!wk>!@d}1Ti>)AO8qX_HgCeSc2F5 UzZk*hrx;BlGG3kGq;15SR zCIB5gaI9TMg(S5~1ykb|XVtFob4D(?RCWuqSqFbT?sJ7GXNrQ%Ly$5bU7ayZ?0lGU zc0mwUg~YpAyuJpViDg9P5;=?@={-_awh6+5R0RgMj^^QSB|Zux_nY@JO=)Cb&60qo zA+2s6I-NhIa t6lfecw_@;Eb^-$9#@9am7&Ef;4d0UZ z7T^>fpc3BU6rfR%{pX;oOL&6B8O~TRtG9;GsGm%sxjsL&If=UN%3n30KhS(1FkCTa zQ>lcTmOm$?usi!raMf-1H*uG)SDeUrB4gQ_HjA}-#=>U-55_4MdEMWb-v~maivVAl zrIIJ3)e8(=e>_Mx$(IbXgq3cxZEK0CRtuamz&m+eEhWCn$ps>(%5P<#AaW9izQIaf zB#j{|9?k4^&D?}bzq-hIGT|J4th1Hm)=PbCT^ahs9kFw5ya>yU@; K(>Z4U5$SC<_+h0bn!xQ+l~oeq{vEiy98mFN zZJzi}E<~dQG@+98nXL;Q7XQc!6F6+iR4izW5p0vaFyQb4^_~J06rjCOxsm$bPOdp$ zBwU0#%jQ>27M8+L-Zm)kVf${shN>st5r!%By~Nav#$G*<3@n8S^7d2~Mn71E?}>Zn zJcVx4IZ@`W5M_K~=)P27SR#@Z5f5+A*nw7({)loktYMMG5Q}D1@%rXNc!KUdXCd zBS~-UT&c2^UBwT6Lcpe#x24Qdq%r^O29x0m&RpGC{Z+A PeIHjqltw`iS)_!O?v9m`1_|j9i6xfCr9rw&Bo KvIzI zZjkPfUh=c}dOh#w`{VZyc=(OkGjrzLbI)~ObKP_1M2dXn$i;d|<5z kz_t)1%Z}tXC%bk{9vUI5a78tMDyO{ax5o=1% zWLIaAT+qmBHStxwzyWFz##xE;dBlc}@l8)8Q9{=wyIM$&N-k_w(R_AgG}((bW)*f8 zqB;J(w~wQuvP_a)`@It+Fe^+VP3Z-tfII)6a_<4>frgm!Vdl5bQgTd#0*jf)w7vxP zK?>xAlNeJ6)OBq*t3Cp+;j%&>f74J1NCEP6t@=y}hhI?cnnK({ZyH6T$w&5FHqP_x z%;d7iTA;o7c5<{C^64SGbrXGR@hmKS%!Pax+!Lny6y8h>H1}~_3}4e$Z0A_N#duQl z_Pv`6Sr1Mpc{pzhRdhyLI}sf&iZ#ezcYN<{sX*@(Pma0}S--iEBd;=h>Q_xb3&Oce zcWl+EljtUS;Ngw>ivgRV&B}PgK|dSkgDL#mr6lr4Yth4cdh{*e4<9IZ^Hdp=mion7 zcT#%QdfjWd >h`ul$geYR4IQMIZ=fctHO0DdG!lFRSO7C7Y(=62}`rV-vo} !@o)T;k%uBuh^365QySU^WXKM02^Ly1|nVY&Q=0mCZaGpZMKa0MVOa_W$zBbw=f zRX>fYh )W@{5G0n#W9R9GnZ1%f z+P8kPv>G({eVc4#aL(pa*7WQ4m$#_w$K%J3i?#s8X4S6YN{)eg9cwA_5e+lk$E%_j z!xr?B1-hF EbLb;4=g4g3cKENb$}h!DkxycqS0BF(trsn^euweI zO@aoF^X!G8LU?$7g|410XsTDe7Y3hzI;~X|?7|1Yy)Zw3(BvWv_(6SBG||Si?LkQ$ z?NY{dc;BSubCF&X>$fSNCDf8ziMD3XCX2mRQ>6kg(=){`0TE*iq1d6r-kRP?BCck& zPz@yj-$swwGq$H)d4S=SgK7377MtFZB6YwXP+wu$95B4es~FLPRUE3-&~??zYAV$l z8A-UDM@1)+Ib>C434L8nlhillC? C{EjDlu76fY z&bUN8u|V+r0TvBp@VEWRUqrWqj5ntPY;hIikAxqaEK}jH`w|PBo_Bj^{I)S}N*b#& zpVbUjA+D(Wp=4gH@=RCW@7V9BD9RuaTG-dpBB^fXRe5Ux=m9VkB;7&W-W|j(XtJRp zj^ptwqTT@8aa(1<<45#}`&fEWk0?dl$A=U{1nq)R?rvLQeEsPke=2Z^ZXHHY_a8;O zCdp4(9EAt12965b?j-i97q`nco)cPtM>NwtV#jxA{WY;U5Pr>nEFTbpDqUl3-purl zk;{3$$VSn%MJjT^f0hsb+PzmuvMeCnn-0$%E*j#hgNUYPX~vaz;cy4x7f6x;cZcz( zM^luU$8g8mFWhJ1Fm3u`J)16G5s7<$>TSlxZqI*ZuK2~t0!N(A6fETB1uEa?ss15t zQ`{0=u)S%9SV7|dG4^#%8yb>f6`=|58T=9c)s@e##xI20 U68i~@J@u31ih1_CR `zfJQE6}MO z67-o0{tgYK%5_gaLk%x33=9U+td|EZa|FwLqpmNl&wtX0xO!Yo`%;@9wX>E`eS){e ze0Y9>tH#{AR8H7*v8f-18Iijjf|ExSuSzZl4zWt*DVor`I_S%ut*Yyk{OG5JkoPTl zZA>dQuIM*~nj;Lep*mDathe#cl_{KRQOrLO0}5#k9ya&nJhHV67O%2M%}sdvy^qmv zs%05=R499n-~hD)o32PHOFV%3NMq$u1M_0!8w9s9ZEEgsq>kNKvPj*VS<8{otw`I( z#4X8q<8y(1`lMTIsbwK2@B6Eg@m?N*nl3y&JgGIe5iGrFb_^#>sXx`C({4ze@nm1E zTy|PikSf0K&`l(tIMDb05}|SN1np5zY9JW6aY<2H1d4wnDDcDkV|?Utc}2Yfso!o* z7itP+km5AeRw1dy@^0%S_RZXC=OST8^yKWxxM ~V#N}=ja?ubcGqC7Tow!NeA ziucUx>P7G+(z&(IUNQX=a!IvSc+@2{Q84~ot48j-;A@tQMT54qHIgB5pYX8i#u%XZ z8DHA)6Oj@X$5x{l fbKMki|YVti~%AlVQFD4C#1aDqLfWJukj zCxobEbiO c3x8iq`<9)*l&SUhVo;#&c2;=a>Q(c9x-5$-3>?1UFN%rP)oRF{$M` zhI$t9hCl-y)2!*d>2L4jR|8y?99p%Kv>Lj%^rC(&n3!c|{BfeTvs4)<01i+Wahb#atz zktm8L6*{ZbeRKc`(b54v1^?M*nJm`$V(-OKAU3g>i(R&a{}6NyvP@6S;zPn$ }TegvoP zFLN}0q!+M ;FL{V0Z3cir=he#R zdscfrr|Omdp|x$e`Tf0&e5|EY+>*ENLB%atF>ao27X8_%E0SMFKnDXnVK(OCPxab) zo4f_Eim27cjIM@J+k~IX!vUAWVt|X5{kVoT!$IGN5`aMiap~QS`)M8_nt4*pRLivw z3_5lUINo*=sIlU6iK^3R3y0W?y&kmFFrIr2WYR48i}5``G{HbY#wySR ?26Z<}&lPrl= gZW8@l3?*>ix%EsjL3pf zh >BBBsj!uAM;3iZ!F1<2X*0h Mr zv~O@L(3&+lN+3%{l)sy3L9~4?b)@UDe{tS`LPMLnIYrZug_mV00SU>M3ZaS;MSx5V zlzHl&CToJD23gjFh@L`Lt?#@kZ2jqQ R;2m~_c$G>b z%sJ#yK&Y2b NWXw+xgecE_Vqx#Y3u_ z?8A#GH6~%q38N2%G;cwcxvXDnNr`+e1VS@V*o_Ncsgl=Oyvf$rzG1T?cU#&`d>r +9*)R~rO7*qQgc%p*pdlZWMcMhK?=tTsC z#5j$Wz>kygNGm7~QK3#qC4NIQE}oYCJtEXFxT&*w8h
1=wuil7uwGeig;x6_`)$l}4pO$&~b=KV4MCwpOZY>cdFMT% |d5Q_2}(U6$RE62v7kEWj>nw zd1qV-{`|?IPB5`8_eQ!%GZ9Bb+)-S16x2;*to{2T(k(DL0buovS8vo(Ek?< c^Xd1_|UpzJK6KG8S9%wu@+}`E8`udi5)zWjS(A|JP@4!2*RLbbYC;2 zHeE{{7!u%<<05}NhLJZ=^wtob=L^A R5A$5BYU69_wpT-d`uP3Eah=@(M=I(HH{W zxAswgtv3 rAFzGB+iO|Fzx%APX&Gs+Y_cb1P8vY#&x(k=aDE~DA2j-)0|xU>Wh z&w4ATQ`cLER!%Js8)Q%6Y)G%66f@r38?%OMjDQ72L}Ys}5V3i`V!}+v^ir$zf|NDl z>sNy*lV6?1of)tS{OX#@p^EvM%Fw%ls%(OHkcCX$b}eM_UB6s*ZH$N}aXvYngPfY! ztkW!{**LxTi1X6SYKqNw9GNqFBXG3hdu>Z7_U9fYQk9Dr30LSbzxXBbbsCqchaP%) zAi{Sw4v5z;H6O{V9@eqrtn>OZ)=wwGc%&3*C5yZ%L7PWgX;> zg}{sGWn bQD7zf(_CN=VQct*aFlNZvUv> za4&WP0%lI1B$c$~D{(eusF;UAJ)_Dr?)T6MaJIE8ds6HzpmhhjiZu#q&h@ZuhWqHb z)Qy9NY9Sj#d9?q$ZvKe*hOz(g<^2 P_4u;sRF`=`OzCpe*=5N 9pI3zMc@*Jh0nV%AKS;x6uUlwLT7$x@ zHF5G$om6Tbb;Db&SD90UI)!{X`h_E#foS<|hfWpj1bIej;gl02$u1*q+{`CKLmL0# zKYIa&5xR#k)&kZV6tC)qr`z -oFq=Shm=1vmrww -84*{(PGH6@U20t_4D@{U%tz~lr zl!vw^XUmS5#oek}KY0d2pP`j%yJ=#q!JH~1`iddOM|4YOVPY!KH#3P*_75Y82-Owx znbw>H^Kw+W&
9j{aI<-r|BY0R=t#w)Qi6wGj*#PiQRKrlPc{~n<*iTsQ+I=n z8lvh7W0e?emlu&%3#8IHuZq=bh)**%JWJhaIy05-$jH;Md9VAz 6SDwZQ2=ul2o zMZL88*}M~htFgvf-VUplPWGJL;}Cx6%1CH04xhNq$(sttc0iKl4AashFVLsvucc{O z3u#61U22_Qn8@(V5bQ8k>FAD;@hH*h=`gsWM(0%T3-R9JKkI)ed3aAj(hy0zA95zk zefZ|sIK6L@yVaJI;(OVA;XBgQGj=s`U(A6YxotTD*O )p8@cK@hjBhqXX|V$&y)%7`!8bQuGm zC?B7zaZ6e1=5<0}1A^qQJEwSf06+GL!eYc^hy~>(_OxPYakpKT7;7F32LuEf!DfG9 z^V`FIk1GWgSYo$4SJ^QY;)g>+5*M<@A!-F fg4v0Anb>)`TH-k64pu6WpT~>#Pm18V=;fJU6vNIj%~T7cQxJyA z%3@V?EVG%F;n_0j8` z%Y11GywJm6DH^__at$k}k@6VH4RR6mw9PO-Y<4gwhlYEP{xvPGlNv;oX%bi-O7( zPpLpfF5y~Fv^0=1{OjtkPUDnwnJjt>g!$nuf)Ta0X_iC|?0`&O;Wx$wphWx~7qJK&?AG(fi9R)~C6<>ARv(~! z@JBMlseN$=@z8C9zDd>e4{@&l!}7xY*gL|tUw{^9&b}CvC!xg}QaNRa>A~eKBdjRI zG*!3l-as#z9((yylFHP;EKHMtj;7;>E{Ow6073cKaI0TjTF*#y@0(z0E!=ZtY&%$M zh_q{nQ!)lcL8IEIS!Fz V6@7!_wr*>#*GXAUXqq)iGgda5pj!jHM0 zx7RQpQ-NIf#i3c#8G3RrTyhOk-I4J}IgGB{H<+M^c;+W0??bq_2qiX1Qo#?3No^u{ zL~q(a_qJT3Riq{voeUu$##NnBFKSn} QZIxN517 z>)!lirR*Ru@QupU&0l?ZUal*y8qY!=Dn@co))M@tz@t^uAHVP3VJ=4Q@I5 <>pn%Iww1fGW*tne)76$(+`1i@}83jnu!eVM$bkVL&X-qf5utyFY~? VFSxnJfr5IU=w( zu^fqBfywtchZT_)TL)NFrKjnb>f0Lh08LS5yRns49e+ZLN#j=ic1IW$JDA_+D}I`4 zu#N9SYje(mcDNk75~Q&`;L!49@pIOQ{0yK0oI&&iP>>lu$3*Nwf1VyhS^C+IgGAXN zs(Sg 1(v8xMs)>iP4HmDRyxVVO0}EoIU%Oe;yABPAPOL~!$D zu8)tUg^BR@8k#LH8-4-ihqk^^&jg4B*>;~*id1@2gEn6B(JE8W_BfTzk(R78id6PR z+b@0UBz@RH5AQ<1yDjfjWf7>#HL112ZQI(Fq0qAIXMu`KR6iK^g-e1julr#bp^e z2c*|RcOGv!#@A@%zAY=Oo>#JVpbsFS=Owc)>IGyAJNxqtP`xA^w|u~2MinD6f6ac? z9o|TDr=8BfMZ2l}x5dG}ziURp+9#+P@lXNouvO`<-uE9J{gzc12DWMg1UI?0vLzj> zehwdUBbn-!r$!+T72akK^Cs)h*u%4zu_UNiqRSu}jX >} zFjD4Fd B$s#xSM$Qzs zg94p_1k>rVkQiWF-;8a | zOO&a~@UBT2k!6e1BAb+4JaKHFTgx1Aa6Z4aHX%XXN1B?#`WDo_d?8Vow-C~ajwfX} zGx!X9(}OH)U_~aOb07uU6fTmGj%?q|7-${*3$|X0c>9!8Oq_KwG1ZJJGejfz!Tdd@ z>P|VPzN?K_b_--qLO|HqtmF1v4xCg1GF0#mcC!Vvr1H>Nz`lzS_B!YoA+R&J(T?^& zyazi3bq=mg@nu@8L#o#t+*Z^gpy<`HEVXPteOgFm=OlmBtM=!Buf8KHjIIj`?v_u; zH7>d6xOw8_b#{nT%nt>XtY4>4ydim>JqYl&TqB_Z%v=fZ%epShKK8LR`I>J! msY&ZAtA*-7oglLu(edU+5`_BPZ@iYUfT D3Wu$0ffVChZV n62@*8n^cG9^)> z(@cuX%@Y&7{re?PG;J14vU1mKZRlzOf+>(c`5u;QBcfZO!aw^Ss5oDe>SKaEtXaxy zFR)*2>AK}+6#T(4bgUaUKi%`o=@o6-IPPvO!tL4|H(USNi*Cp9{$&A4Ko9Vk3vX*> z4xfY~ F{Q?iDm{u1dxlg_CiKC<4m6ql6#VOBdZ0no{^!z#`1KL6Yy z^bK-{4&KMe6XxfBGXy=TC)L82Abz4}!hK{30|VGZP+$^#Wl>(gVF9q!4C8B$8arkt zdNavfR4z{3BzvQA{+Q*EfS_dE$m013(TJ{KFy*-AxK?Mh>SG}WCwju-@37Tg21NQ= zn*IKcT5t;^l+^OmUwanZMF`E-+*GuFZp1ve5y%?I&l7<@A(5?~GfyRa_WUKKy$=f} zCGsWha3HdoC?2FtC5Pa(P5jy?FK977B#)7Ew1l6{#A3!jDeahsCA%MV&k9(FoLI1t z%r8*gbhXyhO6*!WG>c%!%kWMKYE@m @t_c3lNm$~1?Y0y061A7BO@IuV8R zC?r-(A>J{9N?zVp0RHytm<>d;@nr@?KI%r+f8Le?P)^@16a@-NZX3=#w zyQ*+Lced7v#ssDEz-1V5&5P%Kgti(=vmXt=a^{VM8R^vU$4I8+TDXeQq!0)u%9vRz zG9tdLQFNW;+VNo4zMz{ktFER>85X~9GuG{q$`a8_ Z1z_6&e)67hNAS6Cn9 zo6%no9+b}%<`Zd($5;~G#Z z3F$mBw*ehYfSGMI$cM3dPC$J-W)-ORQwKKZm)T6gc4~$NWe!`MQJdg$ZHrffbl?}w zql)O=F3lM{XuE^JnBVu%D96F^z8iBYfYRiB_%}g9)O`aI`~Vg1R!fW=rjr1sS9a;{ zytn170OxrqDcpDwTglB}AvE5r6I$NFA8i~^<*o;gQ3qX%LT!|#Xzvt=fhsicXKXLN zL(8Fl+D}4vNX;%Y1^pAYTlr~uv|IXDXcO)O&D9yu;?>~(?`pkY5+XQo=wP5$!Z)O3 z4ZmuQM|90Q669UfPk-_@bf;iZ3w-Cn=&qtS>bRoaxNiBI)*b8lr$iOKggG5`C`8zIzd!wNi3Ylw7~kwx(Lc?g@3#^C zNz%*}Fm}g5{<+@<6S`XZbGwgP=-&KuKNnf_t`3oCYnlHmIsSsKrb kT{@eN-I$ysNovnwauK$*ZF`%nyv=;Z@r40Yx&u{M$ zIxXFyR{Zzr?=JkGnK1rmrvG`<|0do4uxapr5dObN_di1LKi>5JixBkC4JPd#_-(Hh zjIxO%?EN{B>^&ciY_f6VO5Z8%qjl1MNtm`=GlKqRB!=q!QB~@r)Q>OR&jC$NxAQD6 zC)!PsXqDr`GZ&KoutB-sA`k4~$&2JSl0iEw7NJtsz?g&58#f+VZEPbiglR|MP(lV= zGjvqozYMZo;(^c3*7en>Csq9oQ(2antN+49Jn7lMj@fsE_5B7 gv z=tcTmyZ!aX2&C4B#f*DYRr!eH#v#;{ kvFP`XP~mz zj;&;6>VZ`cZsueG{l!nu&p?iWhreD)b488eHXZ+QB%^fqIRZz&oh+lk$QbViP+wNI z<*OLDwuRP_(FM?Cj@T_e6jys@R8F`dNe+B3LYTfCrvP>^JX;daalK2I+!1gG87$~i zi}MK(G^LTvf*czDtqN^bwdO_?t d}6?!=O@?5;C z&0YMkRx|^ISP!2qt(DW3G|M(ZC&&!TQ^$jhGF}VAX_GkW8{ZsT{bxn;gOL+vxU_K7 zDIN@kV2duP#4lW%r2_jS|4>p3%lM2`Sr`-i++q^HYEmy69l4rm^70=(7sR4sMmS&X zkz?2F@4Pdt%ikX#+$M~xvVO2|)-?0+_);MG)4Drp_^QC9;U@H7D>g83e))b_NbMEA z2)AGyR sd_#X#&L{k}J42`7uY7zQRA_BU0J7 zrsv#77((QZ@XbEjR#Bcgw9SMrhYE&=880U&v$>(AK-Nn>pTnrj(+>rz19FXyA+oNF zfBnQ)<-yIOKGD%>okCzSS(B4$Fwmm?TorWw4mxWU&D$$wu)ci;|4sB_t}_Hw6O#p> zp^ZG)wz<0Ka2^#VyuHY$%z4<6rD1~l#pH7`qVI0^@i08h&?(f5r(d$&QRx|WGRSzK zr-BvG(RPKh@U`MU>=XC@;rn+e-FR@lj=|~ge?Qk48L~Jn$UoP=UC>8$xQe&T?9CHu zVHfeM`d;(i9@(UxC+#nEoR7_XHs33Iw+`~1&6=-3fk9(*@Ag7e5>Te#bE1r<6e$~1 z?a1ZNQf9dohk4UMw*IEXE@xB96DRY>=tIG#*;6?(|B4ECqiewB7jrc_@ocvIX}#!J zyzF@!XtMjvR;W$&s`FmWgEA>XG3S)qvmQzm>g Coe8ULEYSG5npm9JQdjK5+%ppkI^|d|MAOB?l3DV- zKD*q@e*x4*>bI--`O|i&vWa $!ve0x(Kuer^2yCKy&nd@ko_I|OM_GT>qjC-WUi9|~5 zG2QYjx<>(akto+n6KnRyaq!EB*cZA+MzuMY?qV6 UdM#FD6r2c_7KSi?hzO&h$ z;5k#bDQ+J`f9bVJcoF5n8A$V2zv?GjwG5whqFXf(=sHpNbk^L04)J^7XhB@KRj+Sp z{kHw3mLokc5u#?_{RWjW-&wnsP+0GzD`{4)lT%vSdwdLwXy-G5czH$E*18MB`(=Fh zKFnK&XM_x`GJV>cB(#t}PcWLPwqM>DGUd3LzPd!(ZqMw;P>Gz{Hq|9J)~|~#_{wK^ zRw19#alA3w|5picQT=Va;6v?c&l1lbeUGcjRW+zhFWmP~yL;07$RJ1cvRB~zV1M2H z_5?BOcs53CK~v%|&=I3%RdaPhWE QR$xh?(dx|8tHa942ZR_{>Go3my{4V~HG_hGfy z9p`NWv+e4a-BgTdJLllMgDC}jH24g4+OH79s2ZZms+97bRzxn2tZ5Hh2G4$xsJ>L3 zte$tmyT)AbFj~AC;CPN}1X*sOvBKC^G$yYzD BqjOxTm_y{BFgg*tdO}GAQ7dL0p&AJW(Gqr`4J$yX z4Rno2O}1}5R9bmm(yG@(ANoVXaIGS+Q!&dsJ6LXpB{tQK(!>+Cwv$~dB<)j8gVK{) z3F=wQ+dYyv%moQFi7cF=KA{w{)M*dZ8_O>u{|Rlshab%IJ0)j$4hUTUJIZmr)4cY0 zeUDc$e3vobVY}`HBVlHhKaDZ+?`<-biE^$!X#Fnq16!%9r4t}x2wwe#bF&F7U4`t< zWQ4iwgc2Eu^- *1-J)6uMtybCXQS F*M1^Zs52SnN}+-u`XS vyY&rt5T_q=#?^d1&F!5gFGpYUKN;9J8B znm#2nhy|&XgVeYR)v~eA2N9rkE602UIOuA)?!||*Vi8BY>)#VJxErJ2MQ=MPZkA15 z-|`IT8ZB*C^h(=JRlt-}`5kYsiC$K}V ->ltt0o|IY=aspJ3Q znFiQ?f0TlZZ~Qu7lMNKZ*}tm=8~16vF}?924cJAEFAo?H(IzCU ; Da_dEV>{z)#i zveZJS3OeeIfH&?U^{x2zMK5;{r6SU60*yecY@dtylAz8bk;(!4N-lzo3 `x31=9Vc%oP}>s2+=Znju&*x}TPi+`uUVk3Ca6->!p~-B-(P(%{0R-y8W{fe z&PpIv8vb0Zq5sO|SI600r+|nEd#%0pOX =_=rQbiL(uADX z+F+f)46o0*xvS(0uC4P8lhJ(|s$$n4LPcFRi1SsvZNfY|PItQwQJ6%cZaB2Vzb@>l z0^EcobEe|1ohWVCy)1@Ug^YVucD3>1O37ZL(HgZMD*oyp eJnUqn~W zNWp)F#kQ#SbXqK#Ki%uF06lVz>t|ffr#lhK4KApw+~=j0X>f|^h ?(OZZo~zXT&OfjV({03AwZcT~1%jvL3J%`t4Sy_$$>n)zm=6zWw=Q$UQGGduD87ts@*x~>0q zzB-;m;M=9N^hZlsEMKTsHC5c;=fHhTP}6{xL&;EHN~_OPo#Z!_R0q9EYt0u=YH*T& zKH(i0EGZr?;ox$0NE{HWg_Ty?`5N-XaE#q`(cmC@#y)?@@}LhdU6(aMVb-x@w~KHu zAt3=YK|A~`jmVd!hlRD26<9ag*E1T)3#vPCAJV?WHHL(GS;cx)t+Q2$Tz21p2n?0~ zSxUUeI$eoA@}2jN?Xp2iLg{nzXtrK{q&D_~6Gg1SI?aZMuBZ`3R3%B5e-wV77Vod9 zbl>u3ib;(o=a1=_KyN8-4z{)bSguc(WE;m3!ysR$JTW_>slm`wK&?TvVI7nq*QXZ| zo!2{X_JNW6-Mn8sMW)c%WJDP(YdhZ8j?L$&Eu$g*!!id|Ii6G|PK<>s(*4EZhk%u! zRA=_J83!)l40 aH-C;-e1}6Ne0+Re zYs#rz Htq&BW+{n?iCPhKWK}O;<2dxf#b6p1bzu8XNRN*RQ_ZO(D%p+ z&Vj)zX^UQO^GbLJX?^qyFwR)Low{8PTodZ)IrzbfPJNPVJi5vXX}qDT-f=g20vI5t zXu|ith-S>@d|9sq2BSX=bBzlIH>oce?df)Ed)OVGT%-|wE=3;c(;l8MZy)`KWRjeF z*6pprL7cC@i`M!uN9m^c{5kkS>|b@luw{mba-Z5B5Kket!T=xAgS{WRuH&nDM?-C* zf~0t^1|C8W%{&Kk=O$&mzHieyefS_c C9ICDAf8D~w zZJ`Z?q{kIWf!(j& !@tmwU9ohw3eh$~zEMfaiXusybghQ) z1%t)W5$CIX@SX+xb1%5-*%o!v3bAfM(fh=(1y&A(mz}?vfHC9i6dII;4=nfGsrI&S z_Q71;zfh&j^0va}>WEUjCo#3-54ZVnEk@4e&o19>2t @X$)=qOK~??SgL7TybRy!SVI)_AkdrR?AWKtx`z z5yrOj!~0`<$bWPdA^%U1Aiw}|IZ*HW=m*VqzA|E#VvcY7!@Vt1qU_!&_;RNbr!Ov) zOt2(iYLYVb7E7YyaNAW6%O*nfHgv#V>GlEL(awsw4|-+En`-*qrZ5S0%C36k2zV?T zd{fn+WL62;<^y4(rc0d67YtcXOwzairgZN(gx`MD>kPwH>Ya1enNy1}9&>~JTl;+@ zkCf0B&S=nxNghpQ?(3(mW5o0(LG8&keC@vo@C4db*R&5X&lx7IdE4;{q#1H_Udd=! z2s`(}usKZBV!Mu8nj-8hrjODVT>h->3h}tRHzv7I#e+>LvjxMS-Zscjx@;xaP%%|d zb!Qd~l=^O=>O!W&SYS#kO%ZabcEojYuy2IuPg>JHT# z6;1B>=pe2{V<`>*FLHJ?-C!-U~- zm&rRhCmSxf3bKyF@T;L%WK-nk>Ykx(+YwA n>F>#cB?v+|bH^ zNxsiN9TiPP0N)H}<~{|l*31R%M!6jxWf%DY5+k}riC?1|57uhd_!ds6+0Dn7Zet~_ zR-wxn>dn{p?NnLq K!Q3yGlh3uY!dv4x2xC+L9Q4q4># ze}BGaDKoqtWumkFwPdE7P>8rrO*H%OuVUoicK0^Q91rqCE5o`qcv4adjzt0Y|9w_; z_b*g48?{G#yg6`A>qy+6AaqhRSEo;I6qV`zYk_o}G#46Gj5KDt-TQTKoUDI*4U;Sf tOHe%fKci)yVL(ZguRWDbh_6W2$Zg3y_+9wmPwt`r |36>wG1344 literal 0 HcmV?d00001 diff --git a/packages/react-sdk/src/components/CallControls/ReactionsButton.tsx b/packages/react-sdk/src/components/CallControls/ReactionsButton.tsx index 76cc78da4c..5c74a59a80 100644 --- a/packages/react-sdk/src/components/CallControls/ReactionsButton.tsx +++ b/packages/react-sdk/src/components/CallControls/ReactionsButton.tsx @@ -2,7 +2,7 @@ import { OwnCapability, StreamReaction } from '@stream-io/video-client'; import { Restricted, useCall } from '@stream-io/video-react-bindings'; import { CompositeButton, IconButton } from '../Button'; -import { defaultEmojiReactions } from '../Reaction'; +import { defaultEmojiReactionMap } from '../Reaction'; export const defaultReactions: StreamReaction[] = [ { @@ -66,7 +66,7 @@ export const DefaultReactionsMenu = ({ call?.sendReaction(reaction); }} > - {reaction.emoji_code && defaultEmojiReactions[reaction.emoji_code]} + {reaction.emoji_code && defaultEmojiReactionMap[reaction.emoji_code]} ))}