agora-appbuilder-core 4.1.20 → 4.1.21

package/template/src/assets/live-reactions/animated/2705.json

@@ -0,0 +1 @@
+{"v":"5.8.1","fr":60,"ip":0,"op":100,"w":1024,"h":1024,"nm":"emoji_Check mark button","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null depth","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.297,"y":0},"t":19,"s":[512,512,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":23,"s":[517.624,517.072,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"t":25,"s":[550,542,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":41,"s":[556,546,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":66,"s":[556,546,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.75,"y":0},"t":72,"s":[492,498,0],"to":[0,0,0],"ti":[0,0,0]},{"t":84,"s":[512,512,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":100,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"check mark","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-4,0,0],"ix":2,"l":2},"a":{"a":0,"k":[512,512,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[22.24,-0.16],[9.52,30.241],[0,0],[-38.48,11.679],[-13.12,-36.64],[0,0],[0,0],[-31.6,-24.959],[24.96,-31.6],[0,0]],"o":[[-31.68,0.88],[0,0],[-11.68,-38.48],[37.2,-11.281],[0,0],[0,0],[24.96,-31.6],[31.6,24.96],[0,0],[-13.68,17.521]],"v":[[-170.24,368.039],[-239.84,318.439],[-360.64,-45.561],[-312.08,-136.439],[-222.24,-91.16],[-143.84,144.84],[232.96,-331.96],[335.36,-343.96],[347.36,-241.56],[-113.44,340.039]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.984000052658,0.976000019148,0.976000019148,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[516.32,507.64],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":162,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"shine 2","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-304.8,-316.262,0],"ix":2,"l":2},"a":{"a":0,"k":[110.4,114.662,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[0.952,-50.613],[-42.998,-0.278],[-66.27,25.128],[-41.77,12.592],[-4.032,108.786],[71.551,-1.254],[68.99,-2.667],[47.129,-25.057],[0.983,-61.742]],"o":[[-1.76,93.592],[39.896,0.258],[83.23,-31.559],[39.303,-11.848],[3.23,-87.142],[-90.8,1.592],[-68.99,2.667],[-46.88,24.925],[-0.553,34.765]],"v":[[-125.44,456.671],[-87.096,580.004],[161.57,405.822],[617.57,263.671],[695.57,29.404],[633.6,-99.329],[66.56,-99.583],[-38.32,-20.662],[-117.565,102.004]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":41,"s":[{"i":[[0.952,-50.613],[-42.998,-0.278],[-70.085,10.55],[-41.77,12.592],[-0.77,174.858],[71.363,5.333],[68.989,-2.667],[75.443,-58.667],[2.667,-34.667]],"o":[[-1.76,93.592],[39.896,0.258],[70.085,-10.55],[39.303,-11.848],[0.573,-130.093],[-71.363,-5.333],[-68.99,2.667],[-75.443,58.667],[-2.667,34.667]],"v":[[-117.44,548.671],[-75.096,672.004],[175.57,445.822],[657.57,353.671],[695.57,121.404],[629.6,-91.329],[244.56,-91.329],[85.68,95.338],[-110.183,138.004]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":66,"s":[{"i":[[0.952,-50.613],[-42.998,-0.278],[-70.085,10.55],[-41.77,12.592],[-0.77,174.858],[71.363,5.333],[68.989,-2.667],[75.443,-58.667],[2.667,-34.667]],"o":[[-1.76,93.592],[39.896,0.258],[70.085,-10.55],[39.303,-11.848],[0.573,-130.093],[-71.363,-5.333],[-68.99,2.667],[-75.443,58.667],[-2.667,34.667]],"v":[[-117.44,548.671],[-75.096,672.004],[175.57,445.822],[657.57,353.671],[695.57,121.404],[629.6,-91.329],[244.56,-91.329],[85.68,95.338],[-110.183,138.004]],"c":true}]},{"t":68,"s":[{"i":[[0.952,-50.613],[-42.998,-0.278],[-66.27,25.128],[-41.77,12.592],[-4.032,108.786],[71.551,-1.254],[68.99,-2.667],[47.129,-25.057],[0.983,-61.742]],"o":[[-1.76,93.592],[39.896,0.258],[83.23,-31.559],[39.303,-11.848],[3.23,-87.142],[-90.8,1.592],[-68.99,2.667],[-46.88,24.925],[-0.553,34.765]],"v":[[-125.44,456.671],[-87.096,580.004],[161.57,405.822],[617.57,263.671],[695.57,29.404],[633.6,-99.329],[66.56,-99.583],[-38.32,-20.662],[-117.565,102.004]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.643137254902,0.792156922583,0.482352971096,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[110.4,114.663],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":25,"op":68,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"shine ","parent":1,"sr":1,"ks":{"o":{"a":1,"k":[{"t":0,"s":[100],"h":1},{"t":25,"s":[0],"h":1},{"t":68,"s":[100],"h":1}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-304.8,-316.262,0],"ix":2,"l":2},"a":{"a":0,"k":[110.4,114.662,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":1,"y":0},"t":19,"s":[{"i":[[0,24],[73.6,-2.4],[18.4,-22.4],[0.8,-54.4],[-20,0],[-22.4,35.2]],"o":[[0,-18.4],[-61.6,2.4],[-18.4,22.4],[0,38.4],[27.2,0],[43.2,-69.6]],"v":[[110.4,-92.537],[24,-114.137],[-86.4,-82.137],[-110.4,40.263],[-90.4,114.663],[-40.8,16.263]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":23,"s":[{"i":[[10.122,21.908],[73.627,-2.046],[16.518,-28.544],[0.603,-53.491],[-28.246,13.972],[-29.131,33.702]],"o":[[-10.122,-16.877],[-65.09,2.013],[-16.518,28.791],[0.115,39.117],[34.714,-13.972],[47.817,-64.606]],"v":[[156.89,-93.485],[20.843,-112.89],[-89.498,-71.394],[-110.828,70.97],[-83.162,137.809],[-12.162,22.042]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[{"i":[[99.613,3.409],[73.864,1.083],[-0.121,-82.861],[-1.136,-45.454],[-101.149,137.5],[-88.636,20.454]],"o":[[-99.613,-3.409],[-95.945,-1.407],[0.124,85.297],[1.136,45.455],[101.149,-137.5],[88.636,-20.455]],"v":[[567.908,-101.867],[-7.068,-101.867],[-116.892,23.587],[-114.613,342.451],[-19.172,342.451],[241.023,73.133]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[99.613,3.409],[73.864,1.083],[-0.121,-82.861],[-1.136,-45.454],[-101.149,137.5],[-134.035,113.593]],"o":[[-99.613,-3.409],[-95.945,-1.407],[0.124,85.297],[1.136,45.455],[101.149,-137.5],[69.396,-58.813]],"v":[[643.908,-101.123],[-7.068,-101.867],[-116.892,23.587],[-114.613,542.451],[-19.172,542.451],[299.023,209.133]],"c":true}]},{"i":{"x":0.25,"y":1},"o":{"x":0.167,"y":0.167},"t":68,"s":[{"i":[[0,24],[73.6,-2.4],[18.4,-22.4],[0.8,-54.4],[-20,0],[-22.4,35.2]],"o":[[0,-18.4],[-61.6,2.4],[-18.4,22.4],[0,38.4],[27.2,0],[43.2,-69.6]],"v":[[110.4,-92.537],[24,-114.137],[-86.4,-82.137],[-110.4,40.263],[-90.4,114.663],[-40.8,16.263]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.75,"y":0},"t":72,"s":[{"i":[[0,15.241],[51.626,-1.524],[12.907,-14.225],[0.561,-34.546],[-14.029,0],[-15.712,22.353]],"o":[[0,-11.685],[-43.209,1.524],[-12.907,14.225],[0,24.385],[19.08,0],[30.303,-44.199]],"v":[[31.04,-80.832],[-29.565,-94.548],[-107.005,-74.227],[-123.84,3.501],[-109.811,50.748],[-75.019,-11.74]],"c":true}]},{"t":84,"s":[{"i":[[0,24],[73.6,-2.4],[18.4,-22.4],[0.8,-54.4],[-20,0],[-22.4,35.2]],"o":[[0,-18.4],[-61.6,2.4],[-18.4,22.4],[0,38.4],[27.2,0],[43.2,-69.6]],"v":[[110.4,-92.537],[24,-114.137],[-86.4,-82.137],[-110.4,40.263],[-90.4,114.663],[-40.8,16.263]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.643137254902,0.792156922583,0.482352971096,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[110.4,114.663],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"button ","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[511.96,512,0],"ix":2,"l":2},"a":{"a":0,"k":[480.29,480.25,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":19,"s":[{"i":[[0,0],[0,0],[0.241,-33.04],[0,0],[-33.119,-0.08],[0,0],[0,0],[-0.08,33.12],[0,0],[0,0],[32.399,0.72]],"o":[[0,0],[-33.04,0.24],[0,0],[-0.08,33.12],[0,0],[0,0],[33.12,0.08],[0,0],[0,0],[0.72,-32.4],[0,0]],"v":[[392.88,-451.64],[-392.72,-451.64],[-452.72,-391.64],[-452.72,391.56],[-392.88,451.56],[-392.72,451.56],[392.08,451.56],[452.08,391.72],[452.08,391.56],[452.08,-391.64],[394.641,-451.64]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":23,"s":[{"i":[[0,0],[0,0],[0.241,-33.04],[0,0],[-33.119,-0.08],[0,0],[0,0],[-0.08,33.12],[0,0],[0,0],[32.399,0.72]],"o":[[0,0],[-33.04,0.24],[0,0],[-0.08,33.12],[0,0],[0,0],[33.12,0.08],[0,0],[0,0],[0.72,-32.4],[0,0]],"v":[[400.047,-444.246],[-385.553,-444.246],[-445.553,-384.246],[-445.553,398.954],[-385.713,458.954],[-385.553,458.954],[399.247,458.954],[459.247,399.114],[459.247,398.954],[459.247,-384.246],[401.808,-444.246]],"c":true}]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[0,0],[0,0],[0.241,-33.04],[0,0],[-33.119,-0.08],[0,0],[0,0],[-0.08,33.12],[0,0],[0,0],[32.399,0.72]],"o":[[0,0],[-33.04,0.24],[0,0],[-0.08,33.12],[0,0],[0,0],[33.12,0.08],[0,0],[0,0],[0.72,-32.4],[0,0]],"v":[[439.78,-403.254],[-345.819,-403.254],[-405.819,-343.254],[-405.819,439.946],[-345.98,499.946],[-345.819,499.946],[438.98,499.946],[498.98,440.106],[498.98,439.946],[498.98,-343.254],[441.541,-403.254]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":41,"s":[{"i":[[0,0],[0,0],[0.241,-33.04],[0,0],[-33.119,-0.08],[0,0],[0,0],[-0.08,33.12],[0,0],[0,0],[32.399,0.72]],"o":[[0,0],[-33.04,0.24],[0,0],[-0.08,33.12],[0,0],[0,0],[33.12,0.08],[0,0],[0,0],[0.72,-32.4],[0,0]],"v":[[448.13,-394.64],[-337.47,-394.64],[-397.47,-334.64],[-397.47,448.56],[-337.63,508.56],[-337.47,508.56],[447.33,508.56],[507.33,448.72],[507.33,448.56],[507.33,-334.64],[449.891,-394.64]],"c":true}]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":66,"s":[{"i":[[0,0],[0,0],[0.241,-33.04],[0,0],[-33.119,-0.08],[0,0],[0,0],[-0.08,33.12],[0,0],[0,0],[32.399,0.72]],"o":[[0,0],[-33.04,0.24],[0,0],[-0.08,33.12],[0,0],[0,0],[33.12,0.08],[0,0],[0,0],[0.72,-32.4],[0,0]],"v":[[448.13,-394.64],[-337.47,-394.64],[-397.47,-334.64],[-397.47,448.56],[-337.63,508.56],[-337.47,508.56],[447.33,508.56],[507.33,448.72],[507.33,448.56],[507.33,-334.64],[449.891,-394.64]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.75,"y":0},"t":72,"s":[{"i":[[0,0],[0,0],[0.241,-33.04],[0,0],[-33.119,-0.08],[0,0],[0,0],[-0.08,33.12],[0,0],[0,0],[32.399,0.72]],"o":[[0,0],[-33.04,0.24],[0,0],[-0.08,33.12],[0,0],[0,0],[33.12,0.08],[0,0],[0,0],[0.72,-32.4],[0,0]],"v":[[372.88,-461.64],[-412.72,-461.64],[-472.72,-401.64],[-472.72,381.56],[-412.88,441.56],[-412.72,441.56],[372.08,441.56],[432.08,371.72],[432.08,371.56],[432.08,-401.64],[374.641,-461.64]],"c":true}]},{"t":84,"s":[{"i":[[0,0],[0,0],[0.241,-33.04],[0,0],[-33.119,-0.08],[0,0],[0,0],[-0.08,33.12],[0,0],[0,0],[32.399,0.72]],"o":[[0,0],[-33.04,0.24],[0,0],[-0.08,33.12],[0,0],[0,0],[33.12,0.08],[0,0],[0,0],[0.72,-32.4],[0,0]],"v":[[392.88,-451.64],[-392.72,-451.64],[-452.72,-391.64],[-452.72,391.56],[-392.88,451.56],[-392.72,451.56],[392.08,451.56],[452.08,391.72],[452.08,391.56],[452.08,-391.64],[394.641,-451.64]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.486274539723,0.701960784314,0.258823529412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[453.05,451.89],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":19,"s":[{"i":[[35.36,0],[0,0],[0,-35.36],[0,0],[-35.36,0],[0,0],[0,35.36],[0,0]],"o":[[0,0],[-35.36,0],[0,0],[0,35.36],[0,0],[35.36,0],[0,0],[0,-35.36]],"v":[[416,-480],[-416,-480],[-480,-416],[-480,416],[-416,480],[416,480],[480,416],[480,-416]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":23,"s":[{"i":[[35.36,0],[0,0],[0,-35.36],[0,0],[-35.36,0],[0,0],[0,35.36],[0,0]],"o":[[0,0],[-35.36,0],[0,0],[0,35.36],[0,0],[35.36,0],[0,0],[0,-35.36]],"v":[[416,-472.573],[-408.833,-472.573],[-472.833,-408.573],[-472.833,416],[-408.833,480],[416,480],[480,416],[480,-408.573]],"c":true}]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[35.36,0],[0,0],[0,-35.36],[0,0],[-35.36,0],[0,0],[0,35.36],[0,0]],"o":[[0,0],[-35.36,0],[0,0],[0,35.36],[0,0],[35.36,0],[0,0],[0,-35.36]],"v":[[416,-431.402],[-369.1,-431.402],[-433.1,-367.402],[-433.1,416],[-369.1,480],[416,480],[480,416],[480,-367.402]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":41,"s":[{"i":[[35.36,0],[0,0],[0,-35.36],[0,0],[-35.36,0],[0,0],[0,35.36],[0,0]],"o":[[0,0],[-35.36,0],[0,0],[0,35.36],[0,0],[35.36,0],[0,0],[0,-35.36]],"v":[[416,-422.75],[-360.75,-422.75],[-424.75,-358.75],[-424.75,416],[-360.75,480],[416,480],[480,416],[480,-358.75]],"c":true}]},{"i":{"x":0,"y":1},"o":{"x":0.333,"y":0},"t":66,"s":[{"i":[[35.36,0],[0,0],[0,-35.36],[0,0],[-35.36,0],[0,0],[0,35.36],[0,0]],"o":[[0,0],[-35.36,0],[0,0],[0,35.36],[0,0],[35.36,0],[0,0],[0,-35.36]],"v":[[416,-422.75],[-360.75,-422.75],[-424.75,-358.75],[-424.75,416],[-360.75,480],[416,480],[480,416],[480,-358.75]],"c":true}]},{"i":{"x":0.667,"y":1},"o":{"x":0.75,"y":0},"t":72,"s":[{"i":[[35.36,0],[0,0],[0,-35.36],[0,0],[-35.36,0],[0,0],[0,35.36],[0,0]],"o":[[0,0],[-35.36,0],[0,0],[0,35.36],[0,0],[35.36,0],[0,0],[0,-35.36]],"v":[[416,-490],[-436,-490],[-500,-426],[-500,416],[-436,480],[416,480],[480,416],[480,-426]],"c":true}]},{"t":84,"s":[{"i":[[35.36,0],[0,0],[0,-35.36],[0,0],[-35.36,0],[0,0],[0,35.36],[0,0]],"o":[[0,0],[-35.36,0],[0,0],[0,35.36],[0,0],[35.36,0],[0,0],[0,-35.36]],"v":[[416,-480],[-416,-480],[-480,-416],[-480,416],[-416,480],[416,480],[480,416],[480,-416]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.407843167174,0.623529411765,0.219607858097,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[480.33,480.25],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100,"st":0,"bm":0}],"markers":[{"tm":86,"cm":"rest","dr":0}]}

package/template/src/components/RTMConfigure.tsx

@@ -1,12 +1,12 @@
 /*
 ********************************************
  Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
+ AppBuilder and all associated components, source code, APIs, services, and documentation
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.
+ Use without a license or in violation of any license terms and conditions (including use for
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more
+ information visit https://appbuilder.agora.io.
 *********************************************
 */
 
@@ -59,6 +59,7 @@ import LocalEventEmitter, {
 import {controlMessageEnum} from '../components/ChatContext';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
 import {RECORDING_BOT_UID} from '../utils/constants';
+import {isRemoteDeparture} from '../rtm/isRemoteDeparture';
 import {
   nativeChannelTypeMapping,
   nativeLinkStateMapping,
@@ -134,7 +135,7 @@ const RtmConfigure = (props: any) => {
       Object.keys(
         filterObject(
           defaultContent,
-          ([k, v]) =>
+          ([_k, v]) =>
             v?.type === 'rtc' &&
             !v.offline &&
             activeUidsRef.current.activeUids.indexOf(v?.uid) !== -1,
@@ -329,12 +330,16 @@ const RtmConfigure = (props: any) => {
           );
           await processUserUidAttributes(backoffAttributes, presence.publisher);
         }
-        // remoteLeaveChannel
-        if (presence.type === nativePresenceEventTypeMapping.REMOTE_LEAVE) {
+        // remoteLeaveChannel and, on web, remote connection timeout
+        if (isRemoteDeparture(presence.type, isWebInternal())) {
+          const isTimeout =
+            presence.type === nativePresenceEventTypeMapping.REMOTE_TIMEOUT;
           logger.log(
             LogSource.AgoraSDK,
             'Event',
-            'RTM presenceEvent of type [4 - remoteLeave] (channelMemberLeft)',
+            isTimeout
+              ? 'RTM presenceEvent of type [5 - remoteTimeout] (channelMemberTimedOut)'
+              : 'RTM presenceEvent of type [4 - remoteLeave] (channelMemberLeft)',
             presence,
           );
           // Chat of left user becomes undefined. So don't cleanup

package/template/src/components/StorageContext.tsx

@@ -14,6 +14,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import useMount from './useMount';
 import {ENABLE_AUTH} from '../auth/config';
 import {logger, LogSource} from '../logger/AppBuilderLogger';
+import {SkinTonePreference} from './reactions/catalog';
 
 type rememberedDevicesListEntries = Record<
   string,
@@ -31,6 +32,7 @@ export interface StoreInterface {
   activeDeviceId: Record<MediaDeviceInfo['kind'], string>;
   whiteboardNativeInfoToast?: boolean;
   projectId: string;
+  liveReactionSkinTone?: SkinTonePreference;
 }
 
 export interface StorageContextInterface {
@@ -54,6 +56,7 @@ export const initStoreValue: StoreInterface = {
     videoinput: '',
   },
   projectId: $config.PROJECT_ID,
+  liveReactionSkinTone: 'default',
 };
 
 const initStorageContextValue = {

package/template/src/components/reactions/LiveReactionBadge.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {Image, StyleSheet, Text, View} from 'react-native';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import {useVideoCall} from '../useVideoCall';
+import {getLiveReactionMap} from './catalog';
 
 interface LiveReactionBadgeProps {
   uid: number | string;
@@ -19,6 +20,9 @@ const LiveReactionBadge = ({
     return null;
   }
 
+  const definition = getLiveReactionMap()[reaction.assetKey];
+  const isCustom = !!definition?.custom;
+
   return (
     <View
       pointerEvents="none"
@@ -26,7 +30,16 @@ const LiveReactionBadge = ({
         styles.container,
         hasLeadingIcon ? styles.containerWithLeadingIcon : null,
       ]}>
-      <Text style={styles.emoji}>{reaction.emoji}</Text>
+      {isCustom ? (
+        <Image
+          source={definition!.asset}
+          style={styles.customImage}
+          resizeMode="contain"
+          accessibilityLabel={definition!.custom!.label}
+        />
+      ) : (
+        <Text style={styles.emoji}>{reaction.emoji}</Text>
+      )}
     </View>
   );
 };
@@ -52,6 +65,11 @@ const styles = StyleSheet.create({
     fontSize: 24,
     lineHeight: 26,
   },
+  customImage: {
+    width: 20,
+    height: 20,
+    borderRadius: 4,
+  },
 });
 
 export default LiveReactionBadge;

package/template/src/components/reactions/LiveReactionButton.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import {
+  Image,
   Modal,
   Pressable,
+  ScrollView,
   StyleSheet,
   Text,
   TouchableWithoutFeedback,
@@ -17,48 +19,135 @@ import {isMobileUA, isWebInternal} from '../../utils/common';
 import {useString} from '../../utils/useString';
 import {toolbarItemReactionText} from '../../language/default-labels/videoCallScreenLabels';
 import {useVideoCall} from '../useVideoCall';
-import {LIVE_REACTIONS, LiveReactionDefinition} from './catalog';
+import StorageContext from '../StorageContext';
+import {
+  LiveReactionDefinition,
+  SKIN_TONE_CODES,
+  SkinTonePreference,
+  applySkinToneToEmoji,
+  getLiveReactions,
+} from './catalog';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+
+const TRAY_WIDTH = 222;
+const TRAY_HEIGHT = 169;
+
+const MAGIC_HOVER_COLOR =
+  $config.SEMANTIC_NEUTRAL + hexadecimalTransparency['25%'];
+
+const TONE_SWATCH: Record<SkinTonePreference, string> = {
+  default: '#FBCC57',
+  '1f3fb': '#F5DDB4',
+  '1f3fc': '#E5C395',
+  '1f3fd': '#C68F6A',
+  '1f3fe': '#97674B',
+  '1f3ff': '#5D4038',
+};
+
+const TONE_OPTIONS: {value: SkinTonePreference; color: string}[] = [
+  {value: 'default', color: TONE_SWATCH.default},
+  ...SKIN_TONE_CODES.map(code => ({
+    value: code,
+    color: TONE_SWATCH[code],
+  })),
+];
 
 const ReactionTray = ({
   onSelect,
+  tone,
+  setTone,
 }: {
   onSelect: (reaction: LiveReactionDefinition) => void;
+  tone: SkinTonePreference;
+  setTone: (next: SkinTonePreference) => void;
 }) => {
   const [hoveredReactionKey, setHoveredReactionKey] = React.useState('');
 
   return (
     <View style={styles.tray}>
-      {LIVE_REACTIONS.map(reaction => {
-        const scale =
-          isWebInternal() && hoveredReactionKey === reaction.key ? 37 / 24 : 1;
-        const webHoverTransition = isWebInternal()
-          ? {
-              transitionProperty: 'transform',
-              transitionDuration: '180ms',
-              transitionTimingFunction: 'ease-in-out',
-            }
-          : {};
-        return (
-          <Pressable
-            key={reaction.key}
-            onHoverIn={() => {
-              setHoveredReactionKey(reaction.key);
-            }}
-            onHoverOut={() => {
-              setHoveredReactionKey('');
-            }}
-            onPress={() => {
-              onSelect(reaction);
-            }}
-            style={[
-              styles.reactionButton,
-              webHoverTransition,
-              {transform: [{scale}]},
-            ]}>
-            <Text style={styles.reactionEmoji}>{reaction.emoji}</Text>
-          </Pressable>
-        );
-      })}
+      <View style={styles.toneRow}>
+        {TONE_OPTIONS.map(option => {
+          const isSelected = option.value === tone;
+          const selectedWebStyle =
+            isSelected && isWebInternal()
+              ? ({
+                  boxShadow: `0 0 0 3px ${MAGIC_HOVER_COLOR}`,
+                } as any)
+              : null;
+          return (
+            <Pressable
+              key={option.value}
+              onPress={() => setTone(option.value)}
+              accessibilityLabel={
+                option.value === 'default'
+                  ? 'Default skin tone'
+                  : `Skin tone ${option.value}`
+              }
+              style={styles.toneButton}>
+              <View
+                style={[
+                  styles.toneSwatch,
+                  {backgroundColor: option.color},
+                  selectedWebStyle,
+                ]}
+              />
+              {isSelected && !isWebInternal() ? (
+                <View style={styles.toneRingNative} pointerEvents="none" />
+              ) : null}
+            </Pressable>
+          );
+        })}
+      </View>
+      <ScrollView
+        style={styles.emojiScroll}
+        contentContainerStyle={styles.emojiGrid}
+        showsVerticalScrollIndicator={false}>
+        {getLiveReactions().map(reaction => {
+          const scale =
+            isWebInternal() && hoveredReactionKey === reaction.key
+              ? 37 / 24
+              : 1;
+          const webHoverTransition = isWebInternal()
+            ? {
+                transitionProperty: 'transform',
+                transitionDuration: '180ms',
+                transitionTimingFunction: 'ease-in-out',
+              }
+            : {};
+          return (
+            <View key={reaction.key} style={styles.reactionCell}>
+              <Pressable
+                onHoverIn={() => {
+                  setHoveredReactionKey(reaction.key);
+                }}
+                onHoverOut={() => {
+                  setHoveredReactionKey('');
+                }}
+                onPress={() => {
+                  onSelect(reaction);
+                }}
+                style={[
+                  styles.reactionButton,
+                  webHoverTransition,
+                  {transform: [{scale}]},
+                ]}>
+                {reaction.custom ? (
+                  <Image
+                    source={reaction.asset}
+                    style={styles.reactionCustomImage}
+                    resizeMode="contain"
+                    accessibilityLabel={reaction.custom.label}
+                  />
+                ) : (
+                  <Text style={styles.reactionEmoji}>
+                    {applySkinToneToEmoji(reaction, tone)}
+                  </Text>
+                )}
+              </Pressable>
+            </View>
+          );
+        })}
+      </ScrollView>
     </View>
   );
 };
@@ -70,6 +159,7 @@ const LiveReactionButton = () => {
   const reactionLabel = useString(toolbarItemReactionText)();
   const {width: windowWidth} = useWindowDimensions();
   const {rtcProps} = React.useContext(PropsContext);
+  const {store, setStore} = React.useContext(StorageContext);
   const {
     data: {isHost},
   } = useRoomInfo();
@@ -80,6 +170,17 @@ const LiveReactionButton = () => {
     left: number;
   } | null>(null);
 
+  const tone: SkinTonePreference = store.liveReactionSkinTone ?? 'default';
+  const setTone = React.useCallback(
+    (next: SkinTonePreference) => {
+      if (!setStore) {
+        return;
+      }
+      setStore(prev => ({...prev, liveReactionSkinTone: next}));
+    },
+    [setStore],
+  );
+
   if (!$config.ENABLE_LIVE_REACTIONS) {
     return null;
   }
@@ -96,8 +197,6 @@ const LiveReactionButton = () => {
   }, []);
 
   const openTray = React.useCallback(() => {
-    const trayWidth = 200;
-    const trayHeight = 104;
     const trayOffset = 12;
 
     requestAnimationFrame(() => {
@@ -112,11 +211,11 @@ const LiveReactionButton = () => {
         const left = Math.max(
           8,
           Math.min(
-            windowWidth - trayWidth - 8,
-            x + buttonWidth / 2 - trayWidth / 2,
+            windowWidth - TRAY_WIDTH - 8,
+            x + buttonWidth / 2 - TRAY_WIDTH / 2,
           ),
         );
-        const top = Math.max(8, y - trayHeight - trayOffset);
+        const top = Math.max(8, y - TRAY_HEIGHT - trayOffset);
 
         setTrayPosition({top, left});
         setIsTrayOpen(true);
@@ -175,6 +274,8 @@ const LiveReactionButton = () => {
 
   const tray = (
     <ReactionTray
+      tone={tone}
+      setTone={setTone}
       onSelect={reaction => {
         emitLiveReaction(reaction);
       }}
@@ -209,23 +310,73 @@ const LiveReactionButton = () => {
 
 const styles = StyleSheet.create({
   tray: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 200,
-    height: 104,
+    width: TRAY_WIDTH,
+    height: TRAY_HEIGHT,
     padding: 4,
     marginBottom: 12,
     borderRadius: 28,
     backgroundColor: $config.CARD_LAYER_4_COLOR,
-    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    flexDirection: 'column',
+    alignItems: 'center',
+    overflow: 'hidden',
+    shadowColor: '#000',
     shadowOffset: {width: 0, height: 8},
     shadowOpacity: 0.25,
     shadowRadius: 20,
     elevation: 10,
     zIndex: 1000,
   },
+  toneRow: {
+    flexDirection: 'row',
+    padding: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    gap: 12,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    borderBottomLeftRadius: 12,
+    borderBottomRightRadius: 12,
+    backgroundColor: $config.ICON_BG_COLOR,
+  },
+  toneButton: {
+    width: 20,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  toneSwatch: {
+    width: 15,
+    height: 15,
+    borderRadius: 7.5,
+  },
+  toneRingNative: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: MAGIC_HOVER_COLOR,
+  },
+  emojiScroll: {
+    alignSelf: 'stretch',
+    flex: 1,
+  },
+  emojiGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingTop: 4,
+  },
+  reactionCell: {
+    width: '25%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   modalRoot: {
     flex: 1,
     position: 'relative',
@@ -252,6 +403,11 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     includeFontPadding: false,
   },
+  reactionCustomImage: {
+    width: 28,
+    height: 28,
+    borderRadius: 4,
+  },
 });
 
 export default LiveReactionButton;

package/template/src/components/reactions/LiveReactionStageOverlay.native.tsx

@@ -2,13 +2,18 @@ import React from 'react';
 import {
   Animated,
   Easing,
+  Image,
   LayoutChangeEvent,
   StyleSheet,
   Text,
   View,
 } from 'react-native';
 import {useVideoCall} from '../useVideoCall';
-import {LIVE_REACTION_LANE_COUNT} from './catalog';
+import {
+  LIVE_REACTION_LANE_COUNT,
+  LiveReactionDefinition,
+  getLiveReactionMap,
+} from './catalog';
 
 const NATIVE_REACTION_START_BOTTOM = 18;
 const NATIVE_REACTION_TOP_MARGIN = 120;
@@ -19,11 +24,13 @@ const AnimatedReaction = ({
   sender,
   left,
   travel,
+  definition,
 }: {
   emoji: string;
   sender: string;
   left: number;
   travel: number;
+  definition?: LiveReactionDefinition;
 }) => {
   const progress = React.useRef(new Animated.Value(0)).current;
 
@@ -47,6 +54,8 @@ const AnimatedReaction = ({
     outputRange: [0, 1, 1, 0],
   });
 
+  const isCustom = !!definition?.custom;
+
   return (
     <Animated.View
       style={[
@@ -58,7 +67,16 @@ const AnimatedReaction = ({
           transform: [{translateY}],
         },
       ]}>
-      <Text style={styles.reactionEmoji}>{emoji}</Text>
+      {isCustom ? (
+        <Image
+          source={definition!.asset}
+          style={styles.reactionCustomImage}
+          resizeMode="contain"
+          accessibilityLabel={definition!.custom!.label}
+        />
+      ) : (
+        <Text style={styles.reactionEmoji}>{emoji}</Text>
+      )}
       <View style={styles.reactionSenderPill}>
         <Text numberOfLines={1} style={styles.reactionSender}>
           {sender}
@@ -140,6 +158,7 @@ const LiveReactionStageOverlay = () => {
             emoji={reaction.emoji}
             sender={reaction.senderDisplayName || reaction.senderUid}
             travel={travel}
+            definition={getLiveReactionMap()[reaction.assetKey]}
           />
         );
       })}
@@ -231,21 +250,26 @@ const styles = StyleSheet.create({
     fontSize: 32,
     lineHeight: 38,
   },
+  reactionCustomImage: {
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+  },
   reactionSenderPill: {
-    minWidth: 48,
-    width: 88,
+    maxWidth: 88,
     marginTop: 4,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 20,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 12,
     backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
     alignItems: 'center',
     justifyContent: 'center',
+    alignSelf: 'center',
   },
   reactionSender: {
-    maxWidth: 68,
-    fontSize: 12,
-    lineHeight: 12,
+    maxWidth: 72,
+    fontSize: 11,
+    lineHeight: 14,
     fontFamily: 'Source Sans 3',
     fontWeight: '400',
     color: $config.BACKGROUND_COLOR,