mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-12-26 06:20:27 +01:00
Update content of files
This commit is contained in:
parent
7e5a58db85
commit
5bc5cd81c2
39 changed files with 603 additions and 174 deletions
|
@ -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) {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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)});
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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) {
|
||||
RLottie.WORKERS_LIMIT = options.tgs_workers_limit;
|
||||
} else if (options.frame) {
|
||||
RLottie.WORKERS_LIMIT = 1;
|
||||
var stickerEl = this;
|
||||
var effectEl = ge1('.js-tgsticker_effect', postEl);
|
||||
if (effectEl) {
|
||||
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()) {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -33,14 +33,17 @@ RLottieItem.prototype.init = function(jsString) {
|
|||
};
|
||||
|
||||
RLottieItem.prototype.render = function(frameNo, clamped) {
|
||||
if(this.dead) return;
|
||||
if (this.dead) return;
|
||||
|
||||
if(this.frameCount < frameNo || frameNo < 0) {
|
||||
return;
|
||||
var realFrameNo = frameNo;
|
||||
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);
|
||||
|
||||
|
|
|
@ -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 (isEmpty) {
|
||||
if (mainLoopInited === isEmpty || forceRender) {
|
||||
mainLoopAf && cancelAnimationFrame(mainLoopAf);
|
||||
mainLoopTo && clearTimeout(mainLoopTo);
|
||||
mainLoopInited = false;
|
||||
if (!isEmpty) {
|
||||
if (isRAF) {
|
||||
cancelAnimationFrame(mainLoopTO);
|
||||
}
|
||||
try {
|
||||
clearTimeout(mainLoopTO);
|
||||
} catch (e) {};
|
||||
mainLoopTO = false;
|
||||
} else {
|
||||
if (isRAF) {
|
||||
mainLoopTO = requestAnimationFrame(mainLoop);
|
||||
mainLoopAf = requestAnimationFrame(mainLoop);
|
||||
} else {
|
||||
mainLoopTO = setTimeout(mainLoop, 0);
|
||||
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;
|
||||
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);
|
||||
}
|
||||
QueryableWorkerProxy.init('/js/tgsticker-worker.js?14', rlottie.WORKERS_LIMIT, function() {
|
||||
apiInited = true;
|
||||
for (var i = 0; i < initCallbacks.length; i++) {
|
||||
initCallbacks[i]();
|
||||
}
|
||||
initCallbacks = [];
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function destroyWorkers() {
|
||||
for (var workerNum = 0; workerNum < rlottie.WORKERS_LIMIT; workerNum++) {
|
||||
if (rlottieWorkers[workerNum]) {
|
||||
rlottieWorkers[workerNum].terminate();
|
||||
console.log('worker #' + workerNum + ' terminated');
|
||||
}
|
||||
}
|
||||
console.log('workers destroyed');
|
||||
QueryableWorkerProxy.destroy();
|
||||
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 url = tgs_source && tgs_source.getAttribute('srcset') || '';
|
||||
if (!url) {
|
||||
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') || '';
|
||||
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++];
|
||||
if (curWorkerNum >= rlottieWorkers.length) {
|
||||
curWorkerNum = 0;
|
||||
}
|
||||
rlPlayer.workerProxy = QueryableWorkerProxy.create(rlPlayer.reqId, onFrame, onLoaded);
|
||||
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,51 +279,47 @@ 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)
|
||||
} else if (isSafari) {
|
||||
rlPlayer.rWorker.sendQuery('renderFrame', reqId, frameNo);
|
||||
// console.log(dT(), '['+reqId+']', 'request frame#'+frameNo+' (cache)');
|
||||
onFrame(reqId, frameNo, frame);
|
||||
} else {
|
||||
if(!rlPlayer.clamped.length) { // fix detached
|
||||
rlPlayer.clamped = new Uint8ClampedArray(rlPlayer.width * rlPlayer.height * 4);
|
||||
}
|
||||
rlPlayer.rWorker.sendQuery('renderFrame', reqId, frameNo, rlPlayer.clamped);
|
||||
// console.log(dT(), '['+reqId+']', 'request frame#'+frameNo+' (worker)');
|
||||
rlPlayer.workerProxy.renderFrame(frameNo, !isSafari);
|
||||
}
|
||||
}
|
||||
|
||||
function onFrame(reqId, frameNo, frame) {
|
||||
var rlPlayer = rlottie.players[reqId];
|
||||
if (rlPlayer.options.cachingModulo &&
|
||||
!rlPlayer.frames[frameNo] &&
|
||||
(!frameNo || ((reqId + frameNo) % rlPlayer.options.cachingModulo))) {
|
||||
if (!rlPlayer.frames[frameNo] &&
|
||||
(!frameNo || (rlPlayer.options.cachingModulo && ((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;
|
||||
// for (var i = 0; i < rlPlayer.times.length; i++) {
|
||||
// avg += rlPlayer.times[i] / rlPlayer.times.length;
|
||||
// }
|
||||
// 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;
|
||||
nextFrameNo = 0;
|
||||
if (rlPlayer.times.length) {
|
||||
// var avg = 0;
|
||||
// for (var i = 0; i < rlPlayer.times.length; i++) {
|
||||
// avg += rlPlayer.times[i] / rlPlayer.times.length;
|
||||
// }
|
||||
// console.log('avg time: ' + avg + ', ' + rlPlayer.fps);
|
||||
rlPlayer.times = [];
|
||||
}
|
||||
}
|
||||
if (rlPlayer.frameQueue.needsMore()) {
|
||||
|
@ -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 &&
|
||||
!el.rlPlayer.forcePlayFrames &&
|
||||
el.rlPlayer.frameCount) {
|
||||
el.rlPlayer.paused = false;
|
||||
el.rlPlayer.forcePlayFrames = el.rlPlayer.frameCount;
|
||||
if (el && el.rlPlayer) {
|
||||
var rlPlayer = el.rlPlayer;
|
||||
if (rlPlayer.frameCount > 0) {
|
||||
rlPlayer.stopOnFirstFrame = true;
|
||||
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);
|
||||
}
|
|
@ -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");
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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="/js/cafe.js?23"></script>
|
||||
<script src="https://tg.dev/js/tgsticker.js?29"></script>
|
||||
<script src="/js/cafe.js?24"></script>
|
||||
<script>Cafe.init({"apiUrl":"\/cafe\/api","userId":0,"userHash":null});</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in a new issue