Update content of files

data/web/contest.com.html

@@ -198,9 +198,9 @@
     <script src="/js/main-aj.js?58"></script>
     <script src="/js/contest.js?25"></script>
 <script src="/js/jquery-ui.min.js?1"></script>
-<script src="/js/tgsticker.js?27"></script>
+<script src="/js/tgsticker.js?29"></script>
 
-    <script>ajInit({"version":397,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
+    <script>ajInit({"version":399,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
     <script id="aj_script">Aj._useScrollHack=true;
 Aj.onLoad(function(state) {
   function requestConfirmation(event) {

data/web/promote.telegram.org.html

@@ -21,7 +21,7 @@
     <link href="/css/bootstrap.min.css?3" rel="stylesheet">
     <link href="/css/bootstrap-extra.css?2" rel="stylesheet">
     <link href="/css/telegram.css?231" rel="stylesheet">
-    <link href="/css/widget-frame.css?59" rel="stylesheet">
+    <link href="/css/widget-frame.css?60" rel="stylesheet">
 <link href="/css/promote.css?59" rel="stylesheet">
 <link href="/css/jquery-ui.min.css?1" rel="stylesheet">
 <link href="/css/tchart.min.css?10" rel="stylesheet">
@@ -105,14 +105,14 @@
     <script src="/js/jquery.min.js?1"></script>
     <script src="/js/bootstrap.min.js"></script>
     <script src="/js/main-aj.js?58"></script>
-    <script src="/js/widget-frame.js?56"></script>
+    <script src="/js/widget-frame.js?57"></script>
 <script src="/js/promote.js?50"></script>
 <script src="/js/jquery-ui.min.js?1"></script>
 <script src="/js/jquery-ex.js?11"></script>
 <script src="/js/tchart.min.js?18"></script>
 <script src="/js/health.js?18"></script>
 
-    <script>ajInit({"version":578,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
+    <script>ajInit({"version":580,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
     <script id="aj_script">l.add({"WEB_AB_WARNING_HEADER":"Turn off ad blocker","WEB_POPUP_CLOSE_BTN":"Close","WEB_AB_WARNING_TEXT":"You appear to be using an ad blocker that may prevent pages on the Telegram Ad Platform from working as expected.<br\/><br\/>Please turn off your ad blocker or add <a href=\"http:\/\/promote.telegram.org\/\">promote.telegram.org<\/a> as an exception to manage your promoted messages."});
 window.enableInlineVideo&&$('video').each(function(){enableInlineVideo(this)});
 Ads.init();

data/web/promote.telegram.org/auth.html

@@ -21,7 +21,7 @@
     <link href="/css/bootstrap.min.css?3" rel="stylesheet">
     <link href="/css/bootstrap-extra.css?2" rel="stylesheet">
     <link href="/css/telegram.css?231" rel="stylesheet">
-    <link href="/css/widget-frame.css?59" rel="stylesheet">
+    <link href="/css/widget-frame.css?60" rel="stylesheet">
 <link href="/css/promote.css?59" rel="stylesheet">
 <link href="/css/jquery-ui.min.css?1" rel="stylesheet">
 <link href="/css/tchart.min.css?10" rel="stylesheet">
@@ -105,14 +105,14 @@
     <script src="/js/jquery.min.js?1"></script>
     <script src="/js/bootstrap.min.js"></script>
     <script src="/js/main-aj.js?58"></script>
-    <script src="/js/widget-frame.js?56"></script>
+    <script src="/js/widget-frame.js?57"></script>
 <script src="/js/promote.js?50"></script>
 <script src="/js/jquery-ui.min.js?1"></script>
 <script src="/js/jquery-ex.js?11"></script>
 <script src="/js/tchart.min.js?18"></script>
 <script src="/js/health.js?18"></script>
 
-    <script>ajInit({"version":578,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
+    <script>ajInit({"version":580,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
     <script id="aj_script">l.add({"WEB_AB_WARNING_HEADER":"Turn off ad blocker","WEB_POPUP_CLOSE_BTN":"Close","WEB_AB_WARNING_TEXT":"You appear to be using an ad blocker that may prevent pages on the Telegram Ad Platform from working as expected.<br\/><br\/>Please turn off your ad blocker or add <a href=\"http:\/\/promote.telegram.org\/\">promote.telegram.org<\/a> as an exception to manage your promoted messages."});
 openPopup('#login-popup-container');
 window.enableInlineVideo&&$('video').each(function(){enableInlineVideo(this)});

data/web/promote.telegram.org/basics.html

@@ -21,7 +21,7 @@
     <link href="/css/bootstrap.min.css?3" rel="stylesheet">
     <link href="/css/bootstrap-extra.css?2" rel="stylesheet">
     <link href="/css/telegram.css?231" rel="stylesheet">
-    <link href="/css/widget-frame.css?59" rel="stylesheet">
+    <link href="/css/widget-frame.css?60" rel="stylesheet">
 <link href="/css/promote.css?59" rel="stylesheet">
 <link href="/css/jquery-ui.min.css?1" rel="stylesheet">
 <link href="/css/tchart.min.css?10" rel="stylesheet">
@@ -105,14 +105,14 @@
     <script src="/js/jquery.min.js?1"></script>
     <script src="/js/bootstrap.min.js"></script>
     <script src="/js/main-aj.js?58"></script>
-    <script src="/js/widget-frame.js?56"></script>
+    <script src="/js/widget-frame.js?57"></script>
 <script src="/js/promote.js?50"></script>
 <script src="/js/jquery-ui.min.js?1"></script>
 <script src="/js/jquery-ex.js?11"></script>
 <script src="/js/tchart.min.js?18"></script>
 <script src="/js/health.js?18"></script>
 
-    <script>ajInit({"version":578,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
+    <script>ajInit({"version":580,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
     <script id="aj_script">l.add({"WEB_AB_WARNING_HEADER":"Turn off ad blocker","WEB_POPUP_CLOSE_BTN":"Close","WEB_AB_WARNING_TEXT":"You appear to be using an ad blocker that may prevent pages on the Telegram Ad Platform from working as expected.<br\/><br\/>Please turn off your ad blocker or add <a href=\"http:\/\/promote.telegram.org\/\">promote.telegram.org<\/a> as an exception to manage your promoted messages."});
 window.enableInlineVideo&&$('video').each(function(){enableInlineVideo(this)});
 Ads.init();

data/web/promote.telegram.org/css/widget-frame.css

@@ -351,6 +351,7 @@ a.inline_flex_ellipsis:hover:before {
 }
 .tgme_widget_message_user_photo,
 .tgme_widget_message_user_photo img,
+.tgme_widget_message_user_photo video,
 .tgme_widget_login_user_photo,
 .tgme_widget_login_user_photo img {
   display: inline-block;
@@ -379,8 +380,10 @@ a.inline_flex_ellipsis:hover:before {
   font-weight: 500;
 }
 .tgme_widget_message_user_photo img,
+.tgme_widget_message_user_photo video,
 .tgme_widget_login_user_photo img {
   position: absolute;
+  pointer-events: none;
   left: 0;
   top: 0;
 }
@@ -808,23 +811,66 @@ a.tgme_widget_message_video_player:hover {
   display: block;
   margin: 12px auto;
   min-height: 20px;
+  max-width: 192px;
+  max-height: 192px;
+}
+.with_effect .tgme_widget_message_sticker_wrap,
+.with_effect .tgme_widget_message_sticker_wrap .tgme_widget_message_tgsticker_wrap,
+.with_effect .tgme_widget_message_sticker_wrap .tgme_widget_message_tgsticker {
+  max-width: 256px;
+  max-height: 192px;
+}
+.with_effect .tgme_widget_message_sticker_wrap .tgme_widget_message_tgsticker {
+  max-height: 256px;
+  transform: translateY(-32px);
+}
+.with_effect .tgme_widget_message_sticker_wrap {
+  transform: scaleX(-1);
+}
+.with_effect .tgme_widget_message_sticker_wrap .tgme_widget_message_tgsticker_wrap {
+  overflow: hidden;
+}
+.tgme_widget_message_tgsticker_effect + .tgme_widget_message_tgsticker_wrap {
+  cursor: pointer;
+}
+.tgme_widget_message_tgsticker_effect {
+  position: absolute;
+  z-index: 1;
+  width: 150% !important;
+  height: 200%;
+  right: -8.2%;
+  top: -50%;
+  visibility: hidden;
+  pointer-events: none;
 }
 .tgme_widget_message_sticker {
   display: block;
   background: no-repeat center;
   background-size: 100%;
-  max-width: 256px;
+  max-width: 192px;
+  max-height: 192px;
 }
 .tgme_widget_message_tgsticker {
   position: relative;
   display: block;
-  max-width: 256px;
+  max-width: 192px;
+  max-height: 192px;
+}
+.tgme_widget_message_videosticker {
+  position: relative;
+  background: no-repeat top center;
+  background-size: 100%;
+  display: block;
+  max-width: 192px;
+  max-height: 192px;
 }
 .tgme_widget_message_tgsticker img.blured {
   filter: blur(3px);
 }
 .tgme_widget_message_tgsticker img,
-.tgme_widget_message_tgsticker canvas {
+.tgme_widget_message_tgsticker canvas,
+.tgme_widget_message_tgsticker_effect canvas,
+.tgme_widget_message_videosticker video {
   position: absolute;
   top: 0; bottom: 0;
   left: 0; right: 0;
@@ -1203,6 +1249,9 @@ a.tgme_widget_message_contact_wrap:focus:hover {
 .tgme_widget_message_reply_thumb.round_thumb {
   border-radius: 18px;
 }
+.tgme_widget_message_reply_thumb.with_effect {
+  transform: scaleX(-1);
+}
 .tgme_widget_message_reply,
 .tgme_widget_message_link_preview,
 .tgme_widget_message_game,

data/web/promote.telegram.org/getting-started.html

@@ -22,7 +22,7 @@
     <link href="/css/bootstrap.min.css?3" rel="stylesheet">
     <link href="/css/bootstrap-extra.css?2" rel="stylesheet">
     <link href="/css/telegram.css?231" rel="stylesheet">
-    <link href="/css/widget-frame.css?59" rel="stylesheet">
+    <link href="/css/widget-frame.css?60" rel="stylesheet">
 <link href="/css/promote.css?59" rel="stylesheet">
 <link href="/css/jquery-ui.min.css?1" rel="stylesheet">
 <link href="/css/tchart.min.css?10" rel="stylesheet">
@@ -221,14 +221,14 @@
     <script src="/js/jquery.min.js?1"></script>
     <script src="/js/bootstrap.min.js"></script>
     <script src="/js/main-aj.js?58"></script>
-    <script src="/js/widget-frame.js?56"></script>
+    <script src="/js/widget-frame.js?57"></script>
 <script src="/js/promote.js?50"></script>
 <script src="/js/jquery-ui.min.js?1"></script>
 <script src="/js/jquery-ex.js?11"></script>
 <script src="/js/tchart.min.js?18"></script>
 <script src="/js/health.js?18"></script>
 
-    <script>ajInit({"version":578,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
+    <script>ajInit({"version":580,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
     <script id="aj_script">l.add({"WEB_AB_WARNING_HEADER":"Turn off ad blocker","WEB_POPUP_CLOSE_BTN":"Close","WEB_AB_WARNING_TEXT":"You appear to be using an ad blocker that may prevent pages on the Telegram Ad Platform from working as expected.<br\/><br\/>Please turn off your ad blocker or add <a href=\"http:\/\/promote.telegram.org\/\">promote.telegram.org<\/a> as an exception to manage your promoted messages."});
 window.enableInlineVideo&&$('video').each(function(){enableInlineVideo(this)});
 Ads.init();

data/web/promote.telegram.org/guidelines.html

@@ -21,7 +21,7 @@
     <link href="/css/bootstrap.min.css?3" rel="stylesheet">
     <link href="/css/bootstrap-extra.css?2" rel="stylesheet">
     <link href="/css/telegram.css?231" rel="stylesheet">
-    <link href="/css/widget-frame.css?59" rel="stylesheet">
+    <link href="/css/widget-frame.css?60" rel="stylesheet">
 <link href="/css/promote.css?59" rel="stylesheet">
 <link href="/css/jquery-ui.min.css?1" rel="stylesheet">
 <link href="/css/tchart.min.css?10" rel="stylesheet">
@@ -213,14 +213,14 @@
     <script src="/js/jquery.min.js?1"></script>
     <script src="/js/bootstrap.min.js"></script>
     <script src="/js/main-aj.js?58"></script>
-    <script src="/js/widget-frame.js?56"></script>
+    <script src="/js/widget-frame.js?57"></script>
 <script src="/js/promote.js?50"></script>
 <script src="/js/jquery-ui.min.js?1"></script>
 <script src="/js/jquery-ex.js?11"></script>
 <script src="/js/tchart.min.js?18"></script>
 <script src="/js/health.js?18"></script>
 
-    <script>ajInit({"version":578,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
+    <script>ajInit({"version":580,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
     <script id="aj_script">l.add({"WEB_AB_WARNING_HEADER":"Turn off ad blocker","WEB_POPUP_CLOSE_BTN":"Close","WEB_AB_WARNING_TEXT":"You appear to be using an ad blocker that may prevent pages on the Telegram Ad Platform from working as expected.<br\/><br\/>Please turn off your ad blocker or add <a href=\"http:\/\/promote.telegram.org\/\">promote.telegram.org<\/a> as an exception to manage your promoted messages."});
 window.enableInlineVideo&&$('video').each(function(){enableInlineVideo(this)});
 Ads.init();

data/web/promote.telegram.org/js/widget-frame.js

@@ -403,6 +403,13 @@ function removeEvent(el, event, handler) {
     }
   });
 }
+function addEventOnce(el, event, handler) {
+  var once_handler = function(e) {
+    removeEvent(el, event, once_handler);
+    handler(e);
+  };
+  addEvent(el, event, once_handler);
+}
 function triggerEvent(el, event_type, init_dict) {
   gec(el, function() {
     var event = new CustomEvent(event_type, init_dict);
@@ -1274,6 +1281,13 @@ function checkFrameSize() {
       options = options || {};
       if (!postEl || postEl.__inited) return;
       postEl.__inited = true;
+      if (window.RLottie) {
+        if (options.tgs_workers_limit) {
+          RLottie.WORKERS_LIMIT = options.tgs_workers_limit;
+        } else if (options.frame) {
+          RLottie.WORKERS_LIMIT = 1;
+        }
+      }
       gec('time[datetime]', function() {
         var datetime = this.getAttribute('datetime');
         if (datetime) {
@@ -1345,15 +1359,34 @@ function checkFrameSize() {
         TSticker.init(this);
       }, postEl);
       gec('.js-tgsticker_image', function() {
-        if (options.tgs_workers_limit) {
+        var stickerEl = this;
-          RLottie.WORKERS_LIMIT = options.tgs_workers_limit;
+        var effectEl = ge1('.js-tgsticker_effect', postEl);
-        } else if (options.frame) {
+        if (effectEl) {
-          RLottie.WORKERS_LIMIT = 1;
+          addEventOnce(this, 'tg:play', function() {
+            RLottie.playOnce(effectEl);
+          });
+          addEvent(this, 'click', function(e) {
+            e.stopPropagation();
+            RLottie.playOnce(effectEl);
+          });
         }
         RLottie.init(this, {
-          playOnce: this.hasAttribute('data-play-once')
+          playUntilEnd: this.hasAttribute('data-is-dice')
         });
       }, postEl);
+      gec('.js-tgsticker_effect', function() {
+        RLottie.init(this, {noAutoPlay: true});
+        var effectEl = this;
+        addEvent(this, 'tg:play', function() {
+          effectEl.style.visibility = 'visible';
+        });
+        addEvent(this, 'tg:pause', function() {
+          effectEl.style.visibility = 'hidden';
+        });
+      }, postEl);
+      gec('.js-videosticker', function() {
+        TVideoSticker.init(this);
+      }, postEl);
     },
     view: function(postEl) {
       postEl = geById(postEl);
@@ -2295,6 +2328,32 @@ function checkFrameSize() {
     init: proccessWebpImage
   };
 
+  var TVideoSticker = window.TVideoSticker = {
+    init: function(stickerEl) {
+      stickerEl = geById(stickerEl);
+      if (!stickerEl || stickerEl.__inited) return;
+      stickerEl.__inited = true;
+      var videoEl = ge1('.js-videosticker_video', stickerEl)
+        , postEl = gpeByClass(stickerEl, 'js-widget_message');
+      if (!videoEl) return;
+      if (browser.safari) {
+        addClass(postEl, 'media_not_supported');
+        removeClass(postEl, 'no_bubble');
+        return;
+      }
+      enableInlineVideo(videoEl);
+      checkVideo(videoEl, function() {
+        addClass(postEl, 'media_not_supported');
+        removeClass(postEl, 'no_bubble');
+      });
+      function removeShadow() {
+        stickerEl.style.backgroundImage = 'none';
+        removeEvent(videoEl, 'timeupdate', removeShadow);
+      }
+      addEvent(videoEl, 'timeupdate', removeShadow);
+    }
+  };
+
   window.TWidgetPost = {
     init: function(options) {
       if (!doesSupportEmoji()) {

data/web/promote.telegram.org/tos.html

@@ -22,7 +22,7 @@
     <link href="/css/bootstrap.min.css?3" rel="stylesheet">
     <link href="/css/bootstrap-extra.css?2" rel="stylesheet">
     <link href="/css/telegram.css?231" rel="stylesheet">
-    <link href="/css/widget-frame.css?59" rel="stylesheet">
+    <link href="/css/widget-frame.css?60" rel="stylesheet">
 <link href="/css/promote.css?59" rel="stylesheet">
 <link href="/css/jquery-ui.min.css?1" rel="stylesheet">
 <link href="/css/tchart.min.css?10" rel="stylesheet">
@@ -153,14 +153,14 @@
     <script src="/js/jquery.min.js?1"></script>
     <script src="/js/bootstrap.min.js"></script>
     <script src="/js/main-aj.js?58"></script>
-    <script src="/js/widget-frame.js?56"></script>
+    <script src="/js/widget-frame.js?57"></script>
 <script src="/js/promote.js?50"></script>
 <script src="/js/jquery-ui.min.js?1"></script>
 <script src="/js/jquery-ex.js?11"></script>
 <script src="/js/tchart.min.js?18"></script>
 <script src="/js/health.js?18"></script>
 
-    <script>ajInit({"version":578,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
+    <script>ajInit({"version":580,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
     <script id="aj_script">l.add({"WEB_AB_WARNING_HEADER":"Turn off ad blocker","WEB_POPUP_CLOSE_BTN":"Close","WEB_AB_WARNING_TEXT":"You appear to be using an ad blocker that may prevent pages on the Telegram Ad Platform from working as expected.<br\/><br\/>Please turn off your ad blocker or add <a href=\"http:\/\/promote.telegram.org\/\">promote.telegram.org<\/a> as an exception to manage your promoted messages."});
 window.enableInlineVideo&&$('video').each(function(){enableInlineVideo(this)});
 Ads.init();

data/web/telegram.org.html

@@ -270,7 +270,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitRetinaVideos();
 mainInitLogo("\/img\/t_logo_sprite.svg");

data/web/telegram.org/api.html

@@ -270,7 +270,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitRetinaVideos();
 mainInitLogo("\/img\/t_logo_sprite.svg");

data/web/telegram.org/blog/700-million-and-premium.html

@@ -401,7 +401,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/animated-backgrounds.html

@@ -289,7 +289,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/autodelete-inv2.html

@@ -286,7 +286,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/chat-themes-interactive-emoji-read-receipts.html

@@ -284,7 +284,7 @@ This way you can quickly see how to [start a Secret Chat](/) on iOS or show one
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/downloads-attachments-streaming.html

@@ -299,7 +299,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/filters-anonymous-admins-comments.html

@@ -248,7 +248,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/group-video-calls.html

@@ -251,7 +251,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/live-streams-forwarding-next-channel.html

@@ -272,7 +272,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/move-history.html

@@ -271,7 +271,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/notifications-bots.html

@@ -336,7 +336,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/payments-2-0-scheduled-voice-chats.html

@@ -306,7 +306,7 @@ you can also download our Android app directly from [telegram.org](https://teleg
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/pinned-messages-locations-playlists.html

@@ -269,7 +269,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/pinned-messages-locations-playlists/world.html

@@ -265,7 +265,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/profile-videos-people-nearby-and-more.html

@@ -302,7 +302,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/protected-content-delete-by-date-and-more.html

@@ -311,7 +311,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/reactions-spoilers-translations.html

@@ -287,7 +287,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/shared-media-scrolling-calendar-join-requests-and-more.html

@@ -330,7 +330,7 @@ TEST
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/video-1000.html

@@ -341,7 +341,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/video-calls.html

@@ -221,7 +221,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/video-stickers-better-reactions.html

@@ -260,7 +260,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/voice-chats-on-steroids.html

@@ -262,7 +262,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/blog/voice-chats.html

@@ -298,7 +298,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);

data/web/telegram.org/js/tgsticker-worker.js

@@ -35,12 +35,15 @@ RLottieItem.prototype.init = function(jsString) {
 RLottieItem.prototype.render = function(frameNo, clamped) {
   if (this.dead) return;
 
-  if(this.frameCount < frameNo || frameNo < 0) {
+  var realFrameNo = frameNo;
-    return;
+  if (frameNo < 0) {
+    realFrameNo = 0;
+  } else if (frameNo >= this.frameCount) {
+    realFrameNo = this.frameCount - 1;
   }
 
   try {
-    RLottieWorker.Api.render(this.handle, frameNo);
+    RLottieWorker.Api.render(this.handle, realFrameNo);
 
     var bufferPointer = RLottieWorker.Api.buffer(this.handle);
 

data/web/telegram.org/js/tgsticker.js

@@ -1,7 +1,6 @@
 var RLottie = (function () {
   var rlottie = {}, apiInitStarted = false, apiInited = false, initCallbacks = [];
   var deviceRatio = window.devicePixelRatio || 1;
-  var rlottieWorkers = [], curWorkerNum = 0;
 
   var startTime = +(new Date());
   function dT() {
@@ -13,7 +12,9 @@ var RLottie = (function () {
   rlottie.WORKERS_LIMIT = 4;
 
   var reqId = 0;
-  var mainLoopTO = false;
+  var mainLoopAf = false;
+  var mainLoopTo = false;
+  var mainLoopInited = false;
   var checkViewportDate = false;
   var lastRenderDate = false;
 
@@ -69,39 +70,39 @@ var RLottie = (function () {
     }
     var delay = now - lastRenderDate < 100 ? 16 : 500;
     if (delay < 20 && isRAF) {
-      mainLoopTO = requestAnimationFrame(mainLoop)
+      mainLoopAf = requestAnimationFrame(mainLoop)
     } else {
-      mainLoopTO = setTimeout(mainLoop, delay);
+      mainLoopTo = setTimeout(mainLoop, delay);
     }
+    mainLoopInited = true;
     if (checkViewport) {
       checkViewportDate = now;
     }
   }
   function setupMainLoop() {
-    var isEmpty = true, key, rlPlayer;
+    var isEmpty = true, forceRender = false, rlPlayer;
     for (key in rlottie.players) {
       rlPlayer = rlottie.players[key];
       if (rlPlayer &&
           rlPlayer.frameCount) {
+        if (rlPlayer.forceRender) {
+          forceRender = true;
+        }
         isEmpty = false;
         break;
       }
     }
-    if ((mainLoopTO !== false) === isEmpty) {
+    if (mainLoopInited === isEmpty || forceRender) {
-      if (isEmpty) {
+      mainLoopAf && cancelAnimationFrame(mainLoopAf);
+      mainLoopTo && clearTimeout(mainLoopTo);
+      mainLoopInited = false;
+      if (!isEmpty) {
         if (isRAF) {
-          cancelAnimationFrame(mainLoopTO);
+          mainLoopAf = requestAnimationFrame(mainLoop);
-        }
-        try {
-          clearTimeout(mainLoopTO);
-        } catch (e) {};
-        mainLoopTO = false;
         } else {
-        if (isRAF) {
+          mainLoopTo = setTimeout(mainLoop, 0);
-          mainLoopTO = requestAnimationFrame(mainLoop);
-        } else {
-          mainLoopTO = setTimeout(mainLoop, 0);
         }
+        mainLoopInited = true;
       }
     }
   }
@@ -114,56 +115,20 @@ var RLottie = (function () {
       if (!apiInitStarted) {
         console.log(dT(), 'tgsticker init');
         apiInitStarted = true;
-        var workersRemain = rlottie.WORKERS_LIMIT;
+        QueryableWorkerProxy.init('/js/tgsticker-worker.js?14', rlottie.WORKERS_LIMIT, function() {
-        var firstRlottieWorker = rlottieWorkers[0] = new QueryableWorker('/js/tgsticker-worker.js?12');
-        firstRlottieWorker.addListener('ready', function () {
-          console.log(dT(), 'worker #0 ready');
-          firstRlottieWorker.addListener('frame', onFrame);
-          firstRlottieWorker.addListener('loaded', onLoaded);
-          --workersRemain;
-          if (!workersRemain) {
-            console.log(dT(), 'workers ready');
           apiInited = true;
           for (var i = 0; i < initCallbacks.length; i++) {
             initCallbacks[i]();
           }
           initCallbacks = [];
-          } else {
-            for (var workerNum = 1; workerNum < rlottie.WORKERS_LIMIT; workerNum++) {
-              (function(workerNum) {
-                var rlottieWorker = rlottieWorkers[workerNum] = new QueryableWorker('/js/tgsticker-worker.js?12');
-                rlottieWorker.addListener('ready', function () {
-                  console.log(dT(), 'worker #' + workerNum + ' ready');
-                  rlottieWorker.addListener('frame', onFrame);
-                  rlottieWorker.addListener('loaded', onLoaded);
-                  --workersRemain;
-                  if (!workersRemain) {
-                    console.log(dT(), 'workers ready');
-                    apiInited = true;
-                    for (var i = 0; i < initCallbacks.length; i++) {
-                      initCallbacks[i]();
-                    }
-                    initCallbacks = [];
-                  }
-                });
-              })(workerNum);
-            }
-          }
         });
       }
     }
   }
 
   function destroyWorkers() {
-    for (var workerNum = 0; workerNum < rlottie.WORKERS_LIMIT; workerNum++) {
+    QueryableWorkerProxy.destroy();
-      if (rlottieWorkers[workerNum]) {
-        rlottieWorkers[workerNum].terminate();
-        console.log('worker #' + workerNum + ' terminated');
-      }
-    }
-    console.log('workers destroyed');
     apiInitStarted = apiInited = false;
-    rlottieWorkers = [];
   }
 
   function initPlayer(el, options) {
@@ -175,9 +140,25 @@ var RLottie = (function () {
     options = options || {};
     var rlPlayer = el.rlPlayer = {};
     rlPlayer.thumb = el.querySelector('img');
-    var tgs_source = el.querySelector('source[type="application/x-tgsticker"]');
+    var tgs_sources = el.querySelectorAll('source[type="application/x-tgsticker"]');
+    var multi_source = el.hasAttribute('data-multi-source');
+    var urls = [], urls_map = {};
+    for (var i = 0; i < tgs_sources.length; i++) {
+      var tgs_source = tgs_sources[i];
       var url = tgs_source && tgs_source.getAttribute('srcset') || '';
-    if (!url) {
+      var frames_align = tgs_source && tgs_source.getAttribute('data-frames-align') || '';
+      if (url && !urls_map[url]) {
+        urls_map[url] = true;
+        urls.push({
+          url: url,
+          framesAlign: frames_align
+        });
+        if (!multi_source) {
+          break;
+        }
+      }
+    }
+    if (!urls.length) {
       console.warn('picture source application/x-tgsticker not found');
       return;
     }
@@ -190,22 +171,26 @@ var RLottie = (function () {
     rlPlayer.reqId = ++reqId;
     rlottie.players[reqId] = rlPlayer;
     rlPlayer.el = el;
+    rlPlayer.frameNo = false;
     rlPlayer.nextFrameNo = false;
     rlPlayer.frames = {};
     rlPlayer.width = Math.trunc(pic_width * curDeviceRatio);
     rlPlayer.height = Math.trunc(pic_height * curDeviceRatio);
-    rlPlayer.rWorker = rlottieWorkers[curWorkerNum++];
+    rlPlayer.workerProxy = QueryableWorkerProxy.create(rlPlayer.reqId, onFrame, onLoaded);
-    if (curWorkerNum >= rlottieWorkers.length) {
-      curWorkerNum = 0;
-    }
     rlPlayer.options = options;
     rlPlayer.isVisible = true;
-    rlPlayer.paused = options.noAutoPlay || false;
+    rlPlayer.paused = !!options.noAutoPlay;
+    rlPlayer.needPlayOnce = !!options.playOnce;
+    rlPlayer.needPlayUntilEnd = !!options.playUntilEnd;
+    rlPlayer.repeatCount = false;
+    rlPlayer.waitForFirstFrame = false;
+    rlPlayer.stopOnFirstFrame = false;
+    rlPlayer.stopOnLastFrame = false;
     rlPlayer.forcePlayFrames = 0;
     rlPlayer.times = [];
-    rlPlayer.clamped = new Uint8ClampedArray(rlPlayer.width * rlPlayer.height * 4);
     rlPlayer.imageData = new ImageData(rlPlayer.width, rlPlayer.height);
-    rlPlayer.rWorker.sendQuery('loadFromData', rlPlayer.reqId, url, rlPlayer.width, rlPlayer.height);
+    rlPlayer.workerProxy.loadFromData(urls, rlPlayer.width, rlPlayer.height);
+    triggerEvent(rlPlayer.el, 'tg:init');
   }
 
   function destroyPlayer(el) {
@@ -251,6 +236,26 @@ var RLottie = (function () {
     if (frame !== null) {
       doRender(rlPlayer, frame);
       var nextFrameNo = rlPlayer.nextFrameNo;
+      if (rlPlayer.stopOnLastFrame &&
+          frame.no == rlPlayer.frameCount - 1) {
+        rlPlayer.stopOnLastFrame = false;
+        if (!rlPlayer.paused) {
+          rlPlayer.paused = true;
+          triggerEvent(rlPlayer.el, 'tg:pause');
+        }
+      }
+      if (rlPlayer.stopOnFirstFrame &&
+          frame.no == 0) {
+        if (rlPlayer.waitForFirstFrame) {
+          rlPlayer.waitForFirstFrame = false;
+        } else {
+          rlPlayer.stopOnFirstFrame = false;
+          if (!rlPlayer.paused) {
+            rlPlayer.paused = true;
+            triggerEvent(rlPlayer.el, 'tg:pause');
+          }
+        }
+      }
       if (nextFrameNo !== false) {
         rlPlayer.nextFrameNo = false;
         requestFrame(rlPlayer.reqId, nextFrameNo);
@@ -262,8 +267,9 @@ var RLottie = (function () {
 
   function doRender(rlPlayer, frame) {
     rlPlayer.forceRender = false;
-    rlPlayer.imageData.data.set(frame);
+    rlPlayer.imageData.data.set(frame.frame);
     rlPlayer.context.putImageData(rlPlayer.imageData, 0, 0);
+    rlPlayer.frameNo = frame.no;
     var now = +(new Date());
     if (rlPlayer.frameThen) {
       rlPlayer.times.push(now - rlPlayer.frameThen)
@@ -273,34 +279,39 @@ var RLottie = (function () {
       rlPlayer.el.removeChild(rlPlayer.thumb);
       delete rlPlayer.thumb;
     }
+    // console.log(dT(), '['+rlPlayer.reqId+']', 'render frame#'+frame.no);
   }
 
   function requestFrame(reqId, frameNo) {
     var rlPlayer = rlottie.players[reqId];
     var frame = rlPlayer.frames[frameNo];
     if (frame) {
-      onFrame(reqId, frameNo, frame)
+      // console.log(dT(), '['+reqId+']', 'request frame#'+frameNo+' (cache)');
-    } else if (isSafari) {
+      onFrame(reqId, frameNo, frame);
-      rlPlayer.rWorker.sendQuery('renderFrame', reqId, frameNo);
     } else {
-      if(!rlPlayer.clamped.length) { // fix detached
+      // console.log(dT(), '['+reqId+']', 'request frame#'+frameNo+' (worker)');
-        rlPlayer.clamped = new Uint8ClampedArray(rlPlayer.width * rlPlayer.height * 4);
+      rlPlayer.workerProxy.renderFrame(frameNo, !isSafari);
-      }
-      rlPlayer.rWorker.sendQuery('renderFrame', reqId, frameNo, rlPlayer.clamped);
     }
   }
 
   function onFrame(reqId, frameNo, frame) {
     var rlPlayer = rlottie.players[reqId];
-    if (rlPlayer.options.cachingModulo &&
+    if (!rlPlayer.frames[frameNo] &&
-        !rlPlayer.frames[frameNo] &&
+        (!frameNo || (rlPlayer.options.cachingModulo && ((reqId + frameNo) % rlPlayer.options.cachingModulo)))) {
-        (!frameNo || ((reqId + frameNo) % rlPlayer.options.cachingModulo))) {
       rlPlayer.frames[frameNo] = new Uint8ClampedArray(frame)
     }
-    rlPlayer.frameQueue.push(frame);
+    var prevNo = frameNo > 0 ? frameNo - 1 : rlPlayer.frameCount - 1;
+    var lastQueueFrame = rlPlayer.frameQueue.last();
+    if (lastQueueFrame &&
+        lastQueueFrame.no != prevNo) {
+      return;
+    }
+    rlPlayer.frameQueue.push({
+      no: frameNo,
+      frame: frame
+    });
     var nextFrameNo = ++frameNo;
     if (nextFrameNo >= rlPlayer.frameCount) {
-      if (!rlPlayer.options.playOnce) {
       nextFrameNo = 0;
       if (rlPlayer.times.length) {
         // var avg = 0;
@@ -310,15 +321,6 @@ var RLottie = (function () {
         // console.log('avg time: ' +  avg + ', ' + rlPlayer.fps);
         rlPlayer.times = [];
       }
-      } else {
-        rlPlayer.paused = true;
-      }
-    }
-    if (rlPlayer.forcePlayFrames > 0) {
-      rlPlayer.forcePlayFrames--;
-      if (!rlPlayer.forcePlayFrames) {
-        rlPlayer.paused = true;
-      }
     }
     if (rlPlayer.frameQueue.needsMore()) {
       requestFrame(reqId, nextFrameNo)
@@ -344,6 +346,29 @@ var RLottie = (function () {
     rlPlayer.frameQueue = new FrameQueue(fps / 4);
     setupMainLoop();
     requestFrame(reqId, 0);
+    triggerEvent(rlPlayer.el, 'tg:load');
+    if (frameCount > 0) {
+      if (rlPlayer.needPlayOnce) {
+        delete rlPlayer.needPlayOnce;
+        delete rlPlayer.needPlayUntilEnd;
+        rlPlayer.paused = false;
+        rlPlayer.stopOnFirstFrame = true;
+        rlPlayer.stopOnLastFrame = false;
+        if (rlPlayer.frameNo === false ||
+            rlPlayer.frameNo > 0) {
+          rlPlayer.waitForFirstFrame = true;
+        }
+      } else if (rlPlayer.needPlayUntilEnd) {
+        delete rlPlayer.needPlayOnce;
+        delete rlPlayer.needPlayUntilEnd;
+        rlPlayer.paused = false;
+        rlPlayer.stopOnFirstFrame = false;
+        rlPlayer.stopOnLastFrame = true;
+      }
+    }
+    if (!rlPlayer.paused) {
+      triggerEvent(rlPlayer.el, 'tg:play');
+    }
   }
 
   rlottie.init = function(el, options) {
@@ -360,17 +385,62 @@ var RLottie = (function () {
   }
 
   rlottie.playOnce = function(el) {
-    if (el && el.rlPlayer &&
+    if (el && el.rlPlayer) {
-        !el.rlPlayer.forcePlayFrames &&
+      var rlPlayer = el.rlPlayer;
-        el.rlPlayer.frameCount) {
+      if (rlPlayer.frameCount > 0) {
-      el.rlPlayer.paused = false;
+        rlPlayer.stopOnFirstFrame = true;
-      el.rlPlayer.forcePlayFrames = el.rlPlayer.frameCount;
+        rlPlayer.stopOnLastFrame = false;
+        if (rlPlayer.frameNo > 0) {
+          rlPlayer.waitForFirstFrame = true;
+        }
+        if (rlPlayer.paused) {
+          rlPlayer.paused = false;
+          triggerEvent(el, 'tg:play');
+        }
+      } else {
+        rlPlayer.needPlayOnce = true;
+      }
     }
   }
 
-  rlottie.setVisible = function(el, visible) {
+  rlottie.playUntilEnd = function(el) {
     if (el && el.rlPlayer) {
-      el.rlPlayer.isVisible = visible;
+      var rlPlayer = el.rlPlayer;
+      if (rlPlayer.frameCount > 0) {
+        rlPlayer.stopOnFirstFrame = false;
+        rlPlayer.stopOnLastFrame = true;
+        if (rlPlayer.paused) {
+          rlPlayer.paused = false;
+          triggerEvent(el, 'tg:play');
+        }
+      } else {
+        rlPlayer.needPlayUntilEnd = true;
+      }
+    }
+  }
+
+  rlottie.play = function(el, reset) {
+    if (el && el.rlPlayer) {
+      if (reset) {
+        rlottie.reset(el);
+      }
+      el.rlPlayer.paused = false;
+    }
+  }
+
+  rlottie.pause = function(el) {
+    if (el && el.rlPlayer) {
+      el.rlPlayer.paused = true;
+    }
+  }
+
+  rlottie.reset = function(el) {
+    if (el && el.rlPlayer) {
+      var rlPlayer = el.rlPlayer;
+      rlPlayer.frameQueue.clear();
+      rlPlayer.forceRender = true;
+      requestFrame(rlPlayer.reqId, 0);
+      setupMainLoop();
     }
   }
 
@@ -382,6 +452,225 @@ var RLottie = (function () {
 }());
 
 
+var QueryableWorkerProxy = (function() {
+  var workerproxy = {};
+  var proxyId = 0;
+  var wReqId = 0;
+  var rObjs = {};
+  var wrMap = {};
+  var proxies = {};
+  var rlottieWorkers = [], curWorkerNum = 0;
+
+  var startTime = +(new Date());
+  function dT() {
+    return '[' + ((+(new Date()) - startTime)/ 1000.0) + '] ';
+  }
+
+  function Proxy(playerId, onFrame, onLoaded) {
+    this.proxyId = ++proxyId;
+    this.playerId = playerId;
+    this.onFrame = onFrame;
+    this.onLoaded = onLoaded;
+    this.items = [];
+    this.itemsMap = {};
+    proxies[this.proxyId] = this;
+    return this;
+  };
+  Proxy.prototype.loadFromData = function(urls, width, height) {
+    if (this.items.length > 0) {
+      console.warn('already loaded');
+      return;
+    }
+    this.clampedSize = width * height * 4;
+    for (var i = 0; i < urls.length; i++) {
+      var url = urls[i];
+      var _wReqId = ++wReqId;
+      var worker = rlottieWorkers[curWorkerNum++];
+      if (curWorkerNum >= rlottieWorkers.length) {
+        curWorkerNum = 0;
+      }
+      worker.sendQuery('loadFromData', _wReqId, url.url, width, height);
+      var item = {
+        reqId: _wReqId,
+        worker: worker,
+        url: url.url,
+        loaded: false,
+        clamped: new Uint8ClampedArray(this.clampedSize),
+        frameLoaded: {}
+      };
+      if (url.framesAlign) {
+        item.framesAlign = url.framesAlign;
+      }
+      this.items.push(item);
+      this.itemsMap[_wReqId] = item;
+      wrMap[_wReqId] = this.proxyId;
+    }
+    if (this.items.length > 1) {
+      this.canvas = document.createElement('canvas');
+      this.canvas.width = width;
+      this.canvas.height = height;
+      this.context = this.canvas.getContext('2d');
+      this.imageData = new ImageData(width, height);
+    }
+  };
+  Proxy.prototype.renderFrame = function(frameNo, need_clamped) {
+    for (var i = 0; i < this.items.length; i++) {
+      var item = this.items[i];
+      var realFrameNo = frameNo;
+      if (item.framesAlign == 'right') {
+        realFrameNo = frameNo - (this.frameCount - item.frameCount);
+      }
+      if (need_clamped) {
+        if(!item.clamped.length) { // fix detached
+          item.clamped = new Uint8ClampedArray(this.clampedSize);
+        }
+        item.worker.sendQuery('renderFrame', item.reqId, realFrameNo, item.clamped);
+      } else {
+        item.worker.sendQuery('renderFrame', item.reqId, realFrameNo);
+      }
+      // console.log(dT(), '['+this.playerId+'.'+item.reqId+']', 'request frame#'+frameNo+' (worker)');
+    }
+  };
+
+  function onFrame(wReqId, realFrameNo, frame) {
+    var proxyId = wrMap[wReqId];
+    var proxy = proxies[proxyId];
+    var item = proxy.itemsMap[wReqId];
+    var frameNo = realFrameNo;
+    if (item.framesAlign == 'right') {
+      frameNo = realFrameNo + (proxy.frameCount - item.frameCount);
+    }
+    // console.log(dT(), '['+proxy.playerId+'.'+item.reqId+']', 'onframe#'+frameNo+' (worker)');
+    item.frameLoaded[frameNo] = frame;
+    var finished = true;
+    for (var i = 0; i < proxy.items.length; i++) {
+      var item = proxy.items[i];
+      var loadedFrame = item.frameLoaded[frameNo];
+      if (!loadedFrame) {
+        finished = false;
+        break;
+      }
+    }
+    if (finished) {
+      if (proxy.items.length == 1) {
+        var loadedFrame = proxy.items[0].frameLoaded[frameNo];
+        proxy.onFrame(proxy.playerId, frameNo, loadedFrame);
+        delete proxy.items[0].frameLoaded[frameNo];
+      } else {
+        var promises = [];
+        for (var i = 0; i < proxy.items.length; i++) {
+          var item = proxy.items[i];
+          var loadedFrame = item.frameLoaded[frameNo];
+          proxy.imageData.data.set(loadedFrame);
+          var promise = createImageBitmap(proxy.imageData);
+          promises.push(promise);
+          delete item.frameLoaded[frameNo];
+        }
+        Promise.all(promises).then(function(bitmaps) {
+          proxy.context.clearRect(0, 0, proxy.canvas.width, proxy.canvas.height);
+          for (var i = 0; i < bitmaps.length; i++) {
+            proxy.context.drawImage(bitmaps[i], 0, 0);
+          }
+          var imageData = proxy.context.getImageData(0, 0, proxy.canvas.width, proxy.canvas.height);
+          proxy.onFrame(proxy.playerId, frameNo, imageData.data);
+        });
+      }
+    } else {
+      delete frameDatas;
+    }
+  }
+
+  function onLoaded(wReqId, frameCount, fps) {
+    var proxyId = wrMap[wReqId];
+    var proxy = proxies[proxyId];
+    var item = proxy.itemsMap[wReqId];
+    item.loaded = true;
+    item.frameCount = frameCount;
+    item.fps = fps;
+    var finished = true;
+    frameCount = null; fps = null;
+    for (var i = 0; i < proxy.items.length; i++) {
+      var item = proxy.items[i];
+      if (!item.framesAlign) {
+        if (frameCount === null) {
+          frameCount = item.frameCount;
+        } else if (frameCount !== false && frameCount !== item.frameCount) {
+          frameCount = false;
+        }
+      }
+      if (fps === null) {
+        fps = item.fps;
+      } else if (fps !== false && fps !== item.fps) {
+        fps = false;
+      }
+      if (!item.loaded) {
+        finished = false;
+        break;
+      }
+    }
+    if (finished) {
+      if (frameCount === null) {
+        console.warn('Frame count not defined'); return;
+      }
+      if (frameCount === false) {
+        console.warn('Frame count is different'); return;
+      }
+      if (fps === null) {
+        console.warn('FPS not defined'); return;
+      }
+      if (fps === false) {
+        console.warn('FPS is different'); return;
+      }
+      proxy.frameCount = frameCount;
+      proxy.fps = fps;
+      proxy.onLoaded(proxy.playerId, frameCount, fps);
+    }
+  }
+
+  workerproxy.init = function(worker_url, workers_limit, callback) {
+    var workersRemain = workers_limit;
+    var firstWorker = rlottieWorkers[0] = new QueryableWorker(worker_url);
+    firstWorker.addListener('ready', function () {
+      console.log(dT(), 'worker #0 ready');
+      firstWorker.addListener('frame', onFrame);
+      firstWorker.addListener('loaded', onLoaded);
+      --workersRemain;
+      if (!workersRemain) {
+        console.log(dT(), 'workers ready');
+        callback && callback();
+      } else {
+        for (var workerNum = 1; workerNum < workers_limit; workerNum++) {
+          (function(workerNum) {
+            var rlottieWorker = rlottieWorkers[workerNum] = new QueryableWorker(worker_url);
+            rlottieWorker.addListener('ready', function () {
+              console.log(dT(), 'worker #' + workerNum + ' ready');
+              rlottieWorker.addListener('frame', onFrame);
+              rlottieWorker.addListener('loaded', onLoaded);
+              --workersRemain;
+              if (!workersRemain) {
+                console.log(dT(), 'workers ready');
+                callback && callback();
+              }
+            });
+          })(workerNum);
+        }
+      }
+    });
+  };
+  workerproxy.create = function(playerId, onFrame, onLoaded) {
+    return new Proxy(playerId, onFrame, onLoaded);
+  };
+  workerproxy.destroy = function() {
+    for (var workerNum = 0; workerNum < rlottieWorkers.length; workerNum++) {
+      rlottieWorkers[workerNum].terminate();
+      console.log('worker #' + workerNum + ' terminated');
+    }
+    console.log('workers destroyed');
+    rlottieWorkers = [];
+  };
+
+  return workerproxy;
+}());
 
 function QueryableWorker(url, defaultListener, onError) {
   var instance = this;
@@ -478,3 +767,38 @@ FrameQueue.prototype.push = function frameQueuePush(element) {
 FrameQueue.prototype.shift = function frameQueueShift() {
   return this.queue.length ? this.queue.shift() : null;
 }
+
+FrameQueue.prototype.last = function frameQueueLast(element) {
+  return this.queue.length ? this.queue[this.queue.length - 1] : null;
+}
+
+FrameQueue.prototype.clear = function frameQueueClear() {
+  this.queue = [];
+  return true;
+}
+
+
+if (!this.CustomEvent || typeof this.CustomEvent === "object") {
+  (function() {
+    this.CustomEvent = function CustomEvent(type, eventInitDict) {
+      var event;
+      eventInitDict = eventInitDict || {bubbles: false, cancelable: false, detail: undefined};
+
+      try {
+        event = document.createEvent('CustomEvent');
+        event.initCustomEvent(type, eventInitDict.bubbles, eventInitDict.cancelable, eventInitDict.detail);
+      } catch (error) {
+        event = document.createEvent('Event');
+        event.initEvent(type, eventInitDict.bubbles, eventInitDict.cancelable);
+        event.detail = eventInitDict.detail;
+      }
+
+      return event;
+    };
+  })();
+}
+
+function triggerEvent(el, event_type, init_dict) {
+  var event = new CustomEvent(event_type, init_dict);
+  el.dispatchEvent(event);
+}

data/web/telegram.org/teststore.html

@@ -270,7 +270,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitRetinaVideos();
 mainInitLogo("\/img\/t_logo_sprite.svg");

data/web/telegram.org/what-can-you-do-with-Telegram.html

@@ -270,7 +270,7 @@
   </div>
 </div>
     <script src="/js/main.js?46"></script>
-    <script src="/js/tgsticker.js?27"></script>
+    <script src="/js/tgsticker.js?29"></script>
 
     <script>mainInitRetinaVideos();
 mainInitLogo("\/img\/t_logo_sprite.svg");

data/web/webappcontent.telegram.org/cafe.html

@@ -440,8 +440,8 @@
   <div class="cafe-status js-status"></div>
 </div>
     <script src="https://tg.dev/js/jquery.min.js"></script>
-    <script src="https://tg.dev/js/tgsticker.js?27"></script>
+    <script src="https://tg.dev/js/tgsticker.js?29"></script>
-    <script src="/js/cafe.js?23"></script>
+    <script src="/js/cafe.js?24"></script>
     <script>Cafe.init({"apiUrl":"\/cafe\/api","userId":0,"userHash":null});</script>
   </body>
 </html>

data/web/webappcontent.telegram.org/js/cafe.js

@@ -222,7 +222,7 @@ var Cafe = {
     if (mode_order) {
       var height = $('.cafe-items').height();
       $('.js-item-lottie').each(function() {
-        RLottie.setVisible(this, false);
+        RLottie.pause(this);
       });
       $('.cafe-order-overview').show();
       $('.cafe-items').css('maxHeight', height).redraw();
@@ -231,22 +231,16 @@ var Cafe = {
         autosize.update(this);
       });
       Telegram.WebApp.expand();
-      setTimeout(function() {
-        $('.js-item-lottie').each(function() {
-          RLottie.setVisible(this, true);
-        });
-      }, anim_duration);
       Telegram.WebApp.BackButton.show();
     } else {
       $('.js-item-lottie').each(function() {
-        RLottie.setVisible(this, false);
+        RLottie.reset(this);
       });
       $('body').removeClass('order-mode');
       setTimeout(function() {
         $('.cafe-items').css('maxHeight', '');
         $('.cafe-order-overview').hide();
         $('.js-item-lottie').each(function() {
-          RLottie.setVisible(this, true);
         });
       }, anim_duration);
       Telegram.WebApp.BackButton.hide();