mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2025-03-14 04:51:42 +01:00
Update content of files
This commit is contained in:
GitHub Action
parent
7e514a30ea
commit
07fa898852
23 changed files with 0 additions and 6821 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -1,715 +0,0 @@
|
|||
var startTime = +(new Date());
|
||||
function dT() {
|
||||
return '[' + ((+(new Date()) - startTime)/ 1000.0) + '] ';
|
||||
}
|
||||
|
||||
var jsonpCallbacks = [];
|
||||
function twitterCustomShareInit () {
|
||||
var btns = document.querySelectorAll
|
||||
? document.querySelectorAll('.tl_twitter_share_btn')
|
||||
: [document.getElementById('tl_twitter_share_btn')];
|
||||
|
||||
if (!btns.length) {
|
||||
return;
|
||||
}
|
||||
var head = document.getElementsByTagName('head')[0], i, script;
|
||||
for (i = 0; i < btns.length; i++) {
|
||||
(function (btn) {
|
||||
var status = btn.getAttribute('data-text'),
|
||||
url = btn.getAttribute('data-url') || location.toString() || 'https://telegram.org/',
|
||||
via = btn.getAttribute('data-via'),
|
||||
urlEncoded = encodeURIComponent(url),
|
||||
popupUrl = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(status) + '&url=' + urlEncoded + '&via=' + encodeURIComponent(via);
|
||||
|
||||
btn.setAttribute('href', popupUrl);
|
||||
btn.href = popupUrl;
|
||||
|
||||
btn.addEventListener('click', function (e) {
|
||||
var popupW = 550,
|
||||
popupH = 450,
|
||||
params = [
|
||||
'width=' + popupW,
|
||||
'height=' + popupH,
|
||||
'left=' + Math.round(screen.width / 2 - popupW / 2),
|
||||
'top=' + Math.round(screen.height / 2 - popupH / 2),
|
||||
'personalbar=0',
|
||||
'toolbar=0',
|
||||
'scrollbars=1',
|
||||
'resizable=1'
|
||||
].join(','),
|
||||
popup = window.open(popupUrl, '_blank', params);
|
||||
|
||||
if (popup) {
|
||||
try {
|
||||
popup.focus();
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
return cancelEvent(e);
|
||||
}, false);
|
||||
})(btns[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function blogRecentNewsInit () {
|
||||
if (document.querySelectorAll) {
|
||||
var sideImages = document.querySelectorAll('.blog_side_image_wrap');
|
||||
var sideImage, parent, i;
|
||||
var len = len = sideImages.length;
|
||||
for (i = 0; i < len; i++) {
|
||||
sideImage = sideImages[i];
|
||||
parent = sideImage.parentNode.parentNode;
|
||||
if (parent) {
|
||||
parent.insertBefore(sideImage, parent.firstChild);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var moreBtn = document.getElementById('tlb_blog_head_more_link');
|
||||
if (!moreBtn) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var activeClassName = 'tlb_blog_head_recent_active';
|
||||
moreBtn.addEventListener('click', function (event) {
|
||||
var parent = this.parentNode;
|
||||
var className = parent.className;
|
||||
if (className.indexOf(activeClassName) == -1) {
|
||||
className += ' ' + activeClassName;
|
||||
} else {
|
||||
className = className.replace(' ' + activeClassName, '');
|
||||
}
|
||||
parent.className = className;
|
||||
|
||||
return cancelEvent(event);
|
||||
});
|
||||
}
|
||||
|
||||
function blogSideImageUpdate(argument) {
|
||||
var isDesktop = document.documentElement.offsetWidth >= 1000
|
||||
document.querySelectorAll('.blog_side_image_wrap').forEach(function (imageWrap) {
|
||||
if (isDesktop) {
|
||||
var titleHeight = imageWrap.parentNode.previousElementSibling.clientHeight;
|
||||
var beforeTitleEl = imageWrap.parentNode.previousElementSibling.previousElementSibling;
|
||||
if (beforeTitleEl) {
|
||||
titleHeight += beforeTitleEl.clientHeight;
|
||||
}
|
||||
imageWrap.firstElementChild.style.marginTop = (-titleHeight - 8) + 'px';
|
||||
} else {
|
||||
imageWrap.firstElementChild.style.marginTop = '';
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function blogSideImageInit() {
|
||||
window.addEventListener('resize', blogSideImageUpdate, false);
|
||||
setTimeout(blogSideImageUpdate, 0);
|
||||
}
|
||||
|
||||
function cancelEvent (event) {
|
||||
event = event || window.event;
|
||||
if (event) event = event.originalEvent || event;
|
||||
|
||||
if (event.stopPropagation) event.stopPropagation();
|
||||
if (event.preventDefault) event.preventDefault();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function trackDlClick (element, event) {
|
||||
var href = element.getAttribute('href'),
|
||||
track = element.getAttribute('data-track') || false;
|
||||
|
||||
if (!track || !window.ga) {
|
||||
return;
|
||||
}
|
||||
|
||||
var trackData = track.toString().split('/');
|
||||
|
||||
ga('send', 'event', trackData[0], trackData[1], href);
|
||||
|
||||
if ((element.getAttribute('target') || '').toLowerCase() != '_blank') {
|
||||
setTimeout(function() { location.href = href; }, 200);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
var toTopWrapEl,
|
||||
toTopEl,
|
||||
pageContentWrapEl,
|
||||
curVisible,
|
||||
curShown = false;
|
||||
function backToTopInit (labelHtml) {
|
||||
pageContentWrapEl = document.getElementById('dev_page_content_wrap');
|
||||
if (!pageContentWrapEl) {
|
||||
return false;
|
||||
}
|
||||
var t = document.createElement('div');
|
||||
|
||||
t.innerHTML = '<div class="back_to_top"><i class="icon icon-to-top"></i>' + labelHtml + '</div>';
|
||||
toTopEl = t.firstChild;
|
||||
t.innerHTML = '<a class="back_to_top_wrap' + (pageContentWrapEl.classList.contains('is_rtl') ? ' is_rtl' : '') + '" onclick="backToTopGo()"></a>';
|
||||
toTopWrapEl = t.firstChild;
|
||||
|
||||
toTopWrapEl.appendChild(toTopEl);
|
||||
document.body.appendChild(toTopWrapEl);
|
||||
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener('resize', backToTopResize, false);
|
||||
window.addEventListener('scroll', backToTopScroll, false);
|
||||
}
|
||||
backToTopResize();
|
||||
}
|
||||
|
||||
function backToTopGo () {
|
||||
window.scroll(0, 0);
|
||||
backToTopScroll();
|
||||
}
|
||||
|
||||
function backToTopResize () {
|
||||
var left = getXY(pageContentWrapEl)[0],
|
||||
dwidth = Math.max(window.innerWidth, document.documentElement.clientWidth, 0),
|
||||
dheight = Math.max(window.innerHeight, document.documentElement.clientHeight);
|
||||
|
||||
curVisible = pageContentWrapEl && left > 130 && dwidth > 640;
|
||||
toTopWrapEl.style.width = left + 'px';
|
||||
toTopEl.style.height = dheight + 'px';
|
||||
backToTopScroll();
|
||||
}
|
||||
|
||||
function backToTopScroll () {
|
||||
var st = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || document.documentElement.scrollTop;
|
||||
if ((st > 400 && curVisible) != curShown) {
|
||||
curShown = !curShown;
|
||||
if (curShown) {
|
||||
toTopWrapEl.classList.add('back_to_top_shown');
|
||||
} else {
|
||||
toTopWrapEl.classList.remove('back_to_top_shown');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removePreloadInit() {
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener('load', function () {
|
||||
document.body.classList.remove('preload');
|
||||
}, false);
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
document.body.classList.remove('preload');
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
function getXY (obj) {
|
||||
if (!obj) return [0, 0];
|
||||
|
||||
var left = 0, top = 0;
|
||||
if (obj.offsetParent) {
|
||||
do {
|
||||
left += obj.offsetLeft;
|
||||
top += obj.offsetTop;
|
||||
} while (obj = obj.offsetParent);
|
||||
}
|
||||
return [left, top];
|
||||
}
|
||||
|
||||
|
||||
var onDdBodyClick,
|
||||
currentDd;
|
||||
function dropdownClick (element, event) {
|
||||
var parent = element.parentNode;
|
||||
var isOpen = (parent.className || '').indexOf('open') > 0;
|
||||
if (currentDd && currentDd != parent) {
|
||||
dropdownHide(currentDd);
|
||||
}
|
||||
if (!isOpen) {
|
||||
parent.className = (parent.className || '') + ' open';
|
||||
if (!onDdBodyClick) {
|
||||
window.addEventListener('click', dropdownPageClick, false);
|
||||
}
|
||||
currentDd = parent;
|
||||
} else {
|
||||
dropdownHide(currentDd);
|
||||
currentDd = false;
|
||||
}
|
||||
event.cancelBubble = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
function dropdownHide (parent) {
|
||||
parent.className = parent.className.replace(' open', '');
|
||||
}
|
||||
|
||||
function dropdownPageClick (event) {
|
||||
if (currentDd) {
|
||||
dropdownHide(currentDd);
|
||||
currentDd = false;
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHTML (html) {
|
||||
html = html || '';
|
||||
return html.replace(/&/g, '&')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/</g, '<')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
function videoTogglePlay(el) {
|
||||
if (el.paused) {
|
||||
el.play();
|
||||
} else {
|
||||
el.pause();
|
||||
}
|
||||
}
|
||||
|
||||
function getDevPageNav() {
|
||||
// console.time('page nav');
|
||||
var menu = $('<ul class="nav navbar-nav navbar-default"></ul>');
|
||||
var lastLi = false;
|
||||
var items = 0;
|
||||
$('a.anchor').each(function (k, anchor) {
|
||||
var parentTag = anchor.parentNode.tagName;
|
||||
var matches = parentTag.match(/^h([34])$/i);
|
||||
var anchorName = anchor.name;
|
||||
if (!matches || !anchorName) {
|
||||
return;
|
||||
}
|
||||
anchor.id = anchor.name;
|
||||
var level = parseInt(matches[1]);
|
||||
var li = $('<li><a href="#'+ anchorName +'" data-target="#'+ anchorName +'" onmouseenter="showTitleIfOverflows(this)">' + escapeHTML(anchor.nextSibling.textContent) + '</a></li>');
|
||||
if (level == 3) {
|
||||
li.appendTo(menu);
|
||||
lastLi = li;
|
||||
} else {
|
||||
// console.log(lastLi);
|
||||
if (!lastLi) {
|
||||
return;
|
||||
}
|
||||
var subMenu = $('ul', lastLi)[0] || $('<ul class="nav"></ul>').appendTo(lastLi);
|
||||
// console.log(subMenu);
|
||||
li.appendTo(subMenu);
|
||||
}
|
||||
items++;
|
||||
});
|
||||
// console.log(items, menu);
|
||||
// console.timeEnd('page nav');
|
||||
if (items < 2) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return menu;
|
||||
}
|
||||
|
||||
function showTitleIfOverflows(element) {
|
||||
if (element &&
|
||||
element.innerText &&
|
||||
element.scrollWidth &&
|
||||
element.offsetWidth &&
|
||||
element.offsetWidth < element.scrollWidth) {
|
||||
element.setAttribute('title', element.innerText);
|
||||
}
|
||||
else if (element.removeAttribute) {
|
||||
element.removeAttribute('title');
|
||||
}
|
||||
}
|
||||
|
||||
function initDevPageNav() {
|
||||
window.hasDevPageNav = true;
|
||||
var menu = getDevPageNav();
|
||||
if (!menu) {
|
||||
return;
|
||||
}
|
||||
var sideNavCont = $('#dev_side_nav_cont');
|
||||
if (!sideNavCont.length) {
|
||||
sideNavCont = $('#dev_page_content_wrap');
|
||||
}
|
||||
var sideNavWrap = $('<div class="dev_side_nav_wrap"></div>').prependTo(sideNavCont);
|
||||
var sideNav = $('<div class="dev_side_nav"></div>').appendTo(sideNavWrap);
|
||||
menu.appendTo(sideNav);
|
||||
$('body').css({position: 'relative'}).scrollspy({ target: '.dev_side_nav' });
|
||||
|
||||
$('body').on('activate.bs.scrollspy', function () {
|
||||
$('.dev_side_nav > ul').affix('checkPosition');
|
||||
var active_el = $('.dev_side_nav li.active').get(-1);
|
||||
if (active_el) {
|
||||
if (active_el.scrollIntoViewIfNeeded) {
|
||||
active_el.scrollIntoViewIfNeeded();
|
||||
} else if (active_el.scrollIntoView) {
|
||||
active_el.scrollIntoView(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
$('body').trigger('activate.bs.scrollspy');
|
||||
|
||||
updateMenuAffix(menu);
|
||||
}
|
||||
|
||||
function updateDevPageNav() {
|
||||
if (!window.hasDevPageNav) {
|
||||
return;
|
||||
}
|
||||
var menu = getDevPageNav() || $('<ul></ul>');
|
||||
$('.dev_side_nav > ul').replaceWith(menu);
|
||||
$('body').scrollspy('refresh');
|
||||
updateMenuAffix(menu);
|
||||
}
|
||||
|
||||
function updateMenuAffix(menu) {
|
||||
menu.affix({
|
||||
offset: {
|
||||
top: function () {
|
||||
return $('.dev_side_nav_wrap').offset().top;
|
||||
},
|
||||
bottom: function () {
|
||||
return (this.bottom = $('.footer_wrap').outerHeight(true) + 20)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function initScrollVideos(desktop) {
|
||||
var videos = document.querySelectorAll
|
||||
? document.querySelectorAll('video.tl_blog_vid_autoplay')
|
||||
: [];
|
||||
|
||||
window.pageVideos = Array.prototype.slice.apply(videos);
|
||||
if (!pageVideos.length) {
|
||||
return;
|
||||
}
|
||||
window.pageVideosPlaying = {};
|
||||
|
||||
var index = 1;
|
||||
var tgStickersCnt = document.querySelectorAll('.js-tgsticker_image').length;
|
||||
var preloadVideos = tgStickersCnt > 1 ? 0 : (tgStickersCnt ? 1 : 2);
|
||||
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
||||
for (var i = 0; i < pageVideos.length; i++) {
|
||||
var videoEl = pageVideos[i];
|
||||
videoEl.setAttribute('vindex', index++);
|
||||
var preloadValue = i >= preloadVideos ? (isSafari ? 'none' : 'metadata') : 'auto';
|
||||
videoEl.setAttribute('preload', preloadValue);
|
||||
videoEl.preload = preloadValue;
|
||||
if (desktop) {
|
||||
videoEl.removeAttribute('controls');
|
||||
videoEl.autoplay = false;
|
||||
videoEl.removeAttribute('autoplay');
|
||||
} else {
|
||||
videoEl.autoplay = true;
|
||||
videoEl.playsinline = true;
|
||||
videoEl.setAttribute('autoplay', 'autoplay');
|
||||
videoEl.setAttribute('playsinline', 'playsinline');
|
||||
videoEl.controls = false;
|
||||
videoEl.removeAttribute('controls');
|
||||
}
|
||||
var posterUrl = videoEl.poster;
|
||||
if (posterUrl && isSafari) {
|
||||
videoEl.parentNode.style.background = "url('" + escapeHTML(posterUrl) + "') center no-repeat";
|
||||
videoEl.parentNode.style.backgroundSize = "cover";
|
||||
videoEl.parentNode.style.lineHeight = "0";
|
||||
videoPreloadPosterDimensions(videoEl, posterUrl);
|
||||
}
|
||||
}
|
||||
if (!desktop) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', checkScrollVideos, false);
|
||||
window.addEventListener('resize', checkScrollVideos, false);
|
||||
setTimeout(checkScrollVideos, 1000);
|
||||
}
|
||||
|
||||
function checkScrollVideos() {
|
||||
var w = window,
|
||||
d = document,
|
||||
e = d.documentElement,
|
||||
g = d.getElementsByTagName('body')[0],
|
||||
winWidth = w.innerWidth || e.clientWidth || g.clientWidth,
|
||||
winHeight = w.innerHeight|| e.clientHeight|| g.clientHeight,
|
||||
scrollTop = e.scrollTop || g.scrollTop || w.pageYOffset;
|
||||
|
||||
for (var i = 0; i < pageVideos.length; i++) {
|
||||
var videoEl = pageVideos[i];
|
||||
var curIndex = videoEl.getAttribute('vindex');
|
||||
var posY = getFullOffsetY(videoEl);
|
||||
var height = videoEl.offsetHeight;
|
||||
// console.log(scrollTop, winHeight, posY, height);
|
||||
|
||||
|
||||
if (isVisibleEnough(posY, height, scrollTop, winHeight, 0.7, 0.9)) {
|
||||
if (!pageVideosPlaying[curIndex]) {
|
||||
pageVideosPlaying[curIndex] = true;
|
||||
console.log('play', videoEl);
|
||||
videoEl.play();
|
||||
}
|
||||
} else {
|
||||
if (pageVideosPlaying[curIndex]) {
|
||||
delete pageVideosPlaying[curIndex];
|
||||
console.log('pause', videoEl);
|
||||
videoEl.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function videoPreloadPosterDimensions(videoEl, posterUrl) {
|
||||
var img = new Image();
|
||||
img.onload = function () {
|
||||
if (img.width > 0 && img.height > 0) {
|
||||
videoEl.style.aspectRatio = img.width / img.height;
|
||||
}
|
||||
};
|
||||
img.src = posterUrl;
|
||||
}
|
||||
|
||||
function isVisibleEnough(boxOffset, boxSize, viewOffset, viewSize, boxThreshold, viewThreshold) {
|
||||
var boxEnd = boxOffset + boxSize;
|
||||
var viewEnd = viewOffset + viewSize;
|
||||
var viewBox = Math.min(viewEnd, boxEnd) - Math.max(boxOffset, viewOffset);
|
||||
if (viewBox < 0) {
|
||||
return false;
|
||||
}
|
||||
if (viewBox / boxSize > boxThreshold) {
|
||||
return true;
|
||||
}
|
||||
if (viewThreshold && viewBox / viewSize > viewThreshold) {
|
||||
return true;
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
function getFullOffsetY(el) {
|
||||
var offsetTop = el.offsetTop || 0;
|
||||
if (el.offsetParent) {
|
||||
offsetTop += getFullOffsetY(el.offsetParent);
|
||||
}
|
||||
return offsetTop;
|
||||
}
|
||||
|
||||
function redraw(el) {
|
||||
el.offsetTop + 1;
|
||||
}
|
||||
|
||||
function initRipple() {
|
||||
if (!document.querySelectorAll) return;
|
||||
var rippleTextFields = document.querySelectorAll('.textfield-item input.form-control');
|
||||
for (var i = 0; i < rippleTextFields.length; i++) {
|
||||
(function(rippleTextField) {
|
||||
function onTextRippleStart(e) {
|
||||
if (document.activeElement === rippleTextField) return;
|
||||
var rect = rippleTextField.getBoundingClientRect();
|
||||
if (e.type == 'touchstart') {
|
||||
var clientX = e.targetTouches[0].clientX;
|
||||
} else {
|
||||
var clientX = e.clientX;
|
||||
}
|
||||
var ripple = rippleTextField.parentNode.querySelector('.textfield-item-underline');
|
||||
var rippleX = (clientX - rect.left) / rippleTextField.offsetWidth * 100;
|
||||
ripple.style.transition = 'none';
|
||||
redraw(ripple);
|
||||
ripple.style.left = rippleX + '%';
|
||||
ripple.style.right = (100 - rippleX) + '%';
|
||||
redraw(ripple);
|
||||
ripple.style.left = '';
|
||||
ripple.style.right = '';
|
||||
ripple.style.transition = '';
|
||||
}
|
||||
rippleTextField.removeEventListener('mousedown', onTextRippleStart);
|
||||
rippleTextField.removeEventListener('touchstart', onTextRippleStart);
|
||||
rippleTextField.addEventListener('mousedown', onTextRippleStart);
|
||||
rippleTextField.addEventListener('touchstart', onTextRippleStart);
|
||||
})(rippleTextFields[i]);
|
||||
}
|
||||
var rippleHandlers = document.querySelectorAll('.ripple-handler');
|
||||
for (var i = 0; i < rippleHandlers.length; i++) {
|
||||
(function(rippleHandler) {
|
||||
function onRippleStart(e) {
|
||||
var rippleMask = rippleHandler.querySelector('.ripple-mask');
|
||||
if (!rippleMask) return;
|
||||
var rect = rippleMask.getBoundingClientRect();
|
||||
if (e.type == 'touchstart') {
|
||||
var clientX = e.targetTouches[0].clientX;
|
||||
var clientY = e.targetTouches[0].clientY;
|
||||
} else {
|
||||
var clientX = e.clientX;
|
||||
var clientY = e.clientY;
|
||||
}
|
||||
var rippleX = (clientX - rect.left) - rippleMask.offsetWidth / 2;
|
||||
var rippleY = (clientY - rect.top) - rippleMask.offsetHeight / 2;
|
||||
var ripple = rippleHandler.querySelector('.ripple');
|
||||
ripple.style.transition = 'none';
|
||||
redraw(ripple);
|
||||
ripple.style.transform = 'translate3d(' + rippleX + 'px, ' + rippleY + 'px, 0) scale3d(0.2, 0.2, 1)';
|
||||
ripple.style.opacity = 1;
|
||||
redraw(ripple);
|
||||
ripple.style.transform = 'translate3d(' + rippleX + 'px, ' + rippleY + 'px, 0) scale3d(1, 1, 1)';
|
||||
ripple.style.transition = '';
|
||||
|
||||
function onRippleEnd(e) {
|
||||
ripple.style.transitionDuration = '.2s';
|
||||
ripple.style.opacity = 0;
|
||||
document.removeEventListener('mouseup', onRippleEnd);
|
||||
document.removeEventListener('touchend', onRippleEnd);
|
||||
document.removeEventListener('touchcancel', onRippleEnd);
|
||||
}
|
||||
document.addEventListener('mouseup', onRippleEnd);
|
||||
document.addEventListener('touchend', onRippleEnd);
|
||||
document.addEventListener('touchcancel', onRippleEnd);
|
||||
}
|
||||
rippleHandler.removeEventListener('mousedown', onRippleStart);
|
||||
rippleHandler.removeEventListener('touchstart', onRippleStart);
|
||||
rippleHandler.addEventListener('mousedown', onRippleStart);
|
||||
rippleHandler.addEventListener('touchstart', onRippleStart);
|
||||
})(rippleHandlers[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function mainInitRetinaVideos() {
|
||||
var videoEls = document.querySelectorAll('video.video__init_retina');
|
||||
var isRetina = window.devicePixelRatio >= 1.5;
|
||||
var videoEl, i, badChildren, j, badChild, sources, sourceEl;
|
||||
for (i = 0; i < videoEls.length; i++) {
|
||||
videoEl = videoEls[i];
|
||||
sources = (videoEl.getAttribute('data-sources')||'').split(',');
|
||||
sourceEl = document.createElement('source');
|
||||
sourceEl.type = 'video/mp4';
|
||||
sourceEl.src = sources[isRetina ? 1 : 0];
|
||||
videoEl.appendChild(sourceEl);
|
||||
videoEl.classList.remove('video__init_retina');
|
||||
videoEl.setAttribute('preload', 'auto');
|
||||
}
|
||||
}
|
||||
|
||||
function mainInitDemoAutoplay(videoLinkElsSelector) {
|
||||
var videoLinkEls = document.querySelectorAll(videoLinkElsSelector);
|
||||
var videoLinkEl, videoEl, i;
|
||||
for (i = 0; i < videoLinkEls.length; i++) {
|
||||
videoLinkEl = videoLinkEls[i];
|
||||
videoEl = videoLinkEl.querySelector('video');
|
||||
if (!videoEl) {
|
||||
continue;
|
||||
}
|
||||
if (videoEl.readyState > 1) {
|
||||
mainDemoVideoHover(videoLinkEl, 1);
|
||||
} else {
|
||||
videoEl.load();
|
||||
videoEl.addEventListener('loadeddata', (function(el) {
|
||||
return function () {
|
||||
setTimeout(function () {
|
||||
mainDemoVideoHover(el, 1);
|
||||
}, 0)
|
||||
}
|
||||
})(videoLinkEl), false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function mainDemoVideoHover(videoLinkEl, isHover) {
|
||||
var outTimeout = videoLinkEl.outTimeout;
|
||||
var curIsHover = videoLinkEl.isHover || 0;
|
||||
if (outTimeout) {
|
||||
clearTimeout(outTimeout);
|
||||
}
|
||||
if (curIsHover == isHover) {
|
||||
return false;
|
||||
}
|
||||
if (!isHover) {
|
||||
outTimeout = setTimeout(function () {
|
||||
mainDemoVideoDoHover(videoLinkEl, isHover)
|
||||
}, 100);
|
||||
videoLinkEl.outTimeout = outTimeout;
|
||||
return false;
|
||||
}
|
||||
mainDemoVideoDoHover(videoLinkEl, isHover);
|
||||
}
|
||||
|
||||
function mainDemoVideoDoHover(videoLinkEl, isHover) {
|
||||
delete videoLinkEl.outTimeout;
|
||||
|
||||
var videoEl = videoLinkEl.querySelector('video');
|
||||
if (isHover) {
|
||||
if (videoEl.readyState > 1) {
|
||||
videoLinkEl.classList.add('video_play');
|
||||
videoEl.play();
|
||||
videoLinkEl.isHover = 1;
|
||||
}
|
||||
} else {
|
||||
videoLinkEl.isHover = 0;
|
||||
}
|
||||
if (!videoEl.inited) {
|
||||
videoEl.inited = true;
|
||||
// videoEl.onended =
|
||||
videoEl.addEventListener('ended', function onVideoEnded(e) {
|
||||
if (videoLinkEl.isHover) {
|
||||
videoEl.currentTime = 0;
|
||||
videoEl.play();
|
||||
} else {
|
||||
videoEl.pause();
|
||||
videoEl.currentTime = 0;
|
||||
videoLinkEl.classList.remove('video_play')
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
}
|
||||
|
||||
function mainInitLogo(logo_url) {
|
||||
var img = new Image();
|
||||
img.onload = function() {
|
||||
var logo = document.querySelector('div.tl_main_logo');
|
||||
logo.style.backgroundImage = 'url(\'' + logo_url + '\')';
|
||||
logo.classList.add('play');
|
||||
};
|
||||
img.src = logo_url;
|
||||
}
|
||||
|
||||
function mainInitTgStickers(options) {
|
||||
options = options || {};
|
||||
if (!RLottie.isSupported) {
|
||||
if (options.unsupportedURL) {
|
||||
if (!getCookie('stel_notgs')) {
|
||||
setCookie('stel_notgs', 1, 7);
|
||||
}
|
||||
location = options.unsupportedURL;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
document.querySelectorAll('.js-tgsticker_image').forEach(function (imgEl) {
|
||||
RLottie.init(imgEl, options);
|
||||
});
|
||||
}
|
||||
|
||||
function setCookie(name, value, days) {
|
||||
var expires = '';
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (days * 86400000));
|
||||
expires = "; expires=" + date.toUTCString();
|
||||
}
|
||||
document.cookie = name + "=" + (value || "") + expires + "; path=/";
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
var nameEQ = name + '=';
|
||||
var ca = document.cookie.split(';');
|
||||
for (var i = 0; i < ca.length; i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0) == ' ') {
|
||||
c = c.substr(1, c.length);
|
||||
}
|
||||
if (c.indexOf(nameEQ) == 0) {
|
||||
return c.substr(nameEQ.length, c.length);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function mainScrollTo(element) {
|
||||
if (typeof element === 'string') {
|
||||
element = document.querySelector(element)
|
||||
}
|
||||
if (element) {
|
||||
window.scroll(0, getFullOffsetY(element));
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,209 +0,0 @@
|
|||
importScripts('rlottie-wasm.js');
|
||||
importScripts('pako-inflate.min.js');
|
||||
|
||||
function RLottieItem(reqId, jsString, width, height, fps) {
|
||||
this.stringOnWasmHeap = null;
|
||||
this.handle = null;
|
||||
this.frameCount = 0;
|
||||
|
||||
this.reqId = reqId;
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.fps = Math.max(1, Math.min(60, fps || 60));
|
||||
|
||||
this.dead = false;
|
||||
|
||||
this.init(jsString, width, height);
|
||||
|
||||
reply('loaded', this.reqId, this.frameCount, this.fps);
|
||||
}
|
||||
|
||||
RLottieItem.prototype.init = function(jsString) {
|
||||
try {
|
||||
this.handle = RLottieWorker.Api.init();
|
||||
|
||||
this.stringOnWasmHeap = allocate(intArrayFromString(jsString), 'i8', 0);
|
||||
|
||||
this.frameCount = RLottieWorker.Api.loadFromData(this.handle, this.stringOnWasmHeap);
|
||||
|
||||
RLottieWorker.Api.resize(this.handle, this.width, this.height);
|
||||
} catch(e) {
|
||||
console.error('init RLottieItem error:', e);
|
||||
}
|
||||
};
|
||||
|
||||
RLottieItem.prototype.render = function(frameNo, clamped) {
|
||||
if (this.dead) return;
|
||||
|
||||
var realFrameNo = frameNo;
|
||||
if (frameNo < 0) {
|
||||
realFrameNo = 0;
|
||||
} else if (frameNo >= this.frameCount) {
|
||||
realFrameNo = this.frameCount - 1;
|
||||
}
|
||||
|
||||
try {
|
||||
RLottieWorker.Api.render(this.handle, realFrameNo);
|
||||
|
||||
var bufferPointer = RLottieWorker.Api.buffer(this.handle);
|
||||
|
||||
var data = Module.HEAPU8.subarray(bufferPointer, bufferPointer + (this.width * this.height * 4));
|
||||
|
||||
if(!clamped) {
|
||||
clamped = new Uint8ClampedArray(data);
|
||||
} else {
|
||||
clamped.set(data);
|
||||
}
|
||||
|
||||
reply('frame', this.reqId, frameNo, clamped);
|
||||
} catch(e) {
|
||||
console.error('Render error:', e);
|
||||
this.dead = true;
|
||||
}
|
||||
};
|
||||
|
||||
RLottieItem.prototype.destroy = function() {
|
||||
this.dead = true;
|
||||
|
||||
RLottieWorker.Api.destroy(this.handle);
|
||||
};
|
||||
|
||||
var RLottieWorker = (function() {
|
||||
var worker = {};
|
||||
worker.Api = {};
|
||||
|
||||
function initApi() {
|
||||
worker.Api = {
|
||||
init: Module.cwrap('lottie_init', '', []),
|
||||
destroy: Module.cwrap('lottie_destroy', '', ['number']),
|
||||
resize: Module.cwrap('lottie_resize', '', ['number', 'number', 'number']),
|
||||
buffer: Module.cwrap('lottie_buffer', 'number', ['number']),
|
||||
frameCount: Module.cwrap('lottie_frame_count', 'number', ['number']),
|
||||
render: Module.cwrap('lottie_render', '', ['number', 'number']),
|
||||
loadFromData: Module.cwrap('lottie_load_from_data', 'number', ['number', 'number']),
|
||||
};
|
||||
}
|
||||
|
||||
worker.init = function() {
|
||||
initApi();
|
||||
reply('ready');
|
||||
};
|
||||
|
||||
return worker;
|
||||
}());
|
||||
|
||||
Module.onRuntimeInitialized = function() {
|
||||
RLottieWorker.init();
|
||||
};
|
||||
|
||||
var items = {};
|
||||
var queryableFunctions = {
|
||||
loadFromData: function(reqId, url, width, height) {
|
||||
getUrlContent(url, function(err, data) {
|
||||
if (err) {
|
||||
return console.warn('Can\'t fetch file ' + url, err);
|
||||
}
|
||||
try {
|
||||
var json = pako.inflate(data, {to: 'string'});
|
||||
var json_parsed = JSON.parse(json);
|
||||
items[reqId] = new RLottieItem(reqId, json, width, height, json_parsed.fr);
|
||||
} catch (e) {
|
||||
return console.warn('Invalid file ' + url);
|
||||
}
|
||||
});
|
||||
},
|
||||
destroy: function(reqId) {
|
||||
items[reqId].destroy();
|
||||
delete items[reqId];
|
||||
},
|
||||
renderFrame: function(reqId, frameNo, clamped) {
|
||||
items[reqId].render(frameNo, clamped);
|
||||
}
|
||||
};
|
||||
|
||||
function defaultReply(message) {
|
||||
// your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
|
||||
// do something
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true when run in WebKit derived browsers.
|
||||
* This is used as a workaround for a memory leak in Safari caused by using Transferable objects to
|
||||
* transfer data between WebWorkers and the main thread.
|
||||
* https://github.com/mapbox/mapbox-gl-js/issues/8771
|
||||
*
|
||||
* This should be removed once the underlying Safari issue is fixed.
|
||||
*
|
||||
* @private
|
||||
* @param scope {WindowOrWorkerGlobalScope} Since this function is used both on the main thread and WebWorker context,
|
||||
* let the calling scope pass in the global scope object.
|
||||
* @returns {boolean}
|
||||
*/
|
||||
var _isSafari = null;
|
||||
function isSafari(scope) {
|
||||
if(_isSafari == null) {
|
||||
var userAgent = scope.navigator ? scope.navigator.userAgent : null;
|
||||
_isSafari = !!scope.safari ||
|
||||
!!(userAgent && (/\b(iPad|iPhone|iPod)\b/.test(userAgent) || (!!userAgent.match('Safari') && !userAgent.match('Chrome'))));
|
||||
}
|
||||
return _isSafari;
|
||||
}
|
||||
|
||||
function reply() {
|
||||
if(arguments.length < 1) {
|
||||
throw new TypeError('reply - not enough arguments');
|
||||
}
|
||||
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
if(isSafari(self)) {
|
||||
postMessage({ 'queryMethodListener': arguments[0], 'queryMethodArguments': args });
|
||||
} else {
|
||||
var transfer = [];
|
||||
for(var i = 0; i < args.length; i++) {
|
||||
if(args[i] instanceof ArrayBuffer) {
|
||||
transfer.push(args[i]);
|
||||
}
|
||||
|
||||
if(args[i].buffer && args[i].buffer instanceof ArrayBuffer) {
|
||||
transfer.push(args[i].buffer);
|
||||
}
|
||||
}
|
||||
|
||||
postMessage({ 'queryMethodListener': arguments[0], 'queryMethodArguments': args }, transfer);
|
||||
}
|
||||
}
|
||||
|
||||
onmessage = function(oEvent) {
|
||||
if(oEvent.data instanceof Object && oEvent.data.hasOwnProperty('queryMethod') && oEvent.data.hasOwnProperty('queryMethodArguments')) {
|
||||
queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments);
|
||||
} else {
|
||||
defaultReply(oEvent.data);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
function getUrlContent(path, callback) {
|
||||
try {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', path, true);
|
||||
if ('responseType' in xhr) {
|
||||
xhr.responseType = 'arraybuffer';
|
||||
}
|
||||
if (xhr.overrideMimeType) {
|
||||
xhr.overrideMimeType('text/plain; charset=x-user-defined');
|
||||
}
|
||||
xhr.onreadystatechange = function (event) {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200 || xhr.status === 0) {
|
||||
callback(null, xhr.response || xhr.responseText);
|
||||
} else {
|
||||
callback(new Error('Ajax error: ' + this.status + ' ' + this.statusText));
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
} catch (e) {
|
||||
callback(new Error(e));
|
||||
}
|
||||
};
|
||||
|
|
@ -1,808 +0,0 @@
|
|||
var RLottie = (function () {
|
||||
var rlottie = {}, apiInitStarted = false, apiInited = false, initCallbacks = [];
|
||||
var deviceRatio = window.devicePixelRatio || 1;
|
||||
|
||||
var startTime = +(new Date());
|
||||
function dT() {
|
||||
return '[' + ((+(new Date()) - startTime)/ 1000.0) + '] ';
|
||||
}
|
||||
|
||||
rlottie.Api = {};
|
||||
rlottie.players = Object.create(null);;
|
||||
rlottie.WORKERS_LIMIT = 4;
|
||||
|
||||
var reqId = 0;
|
||||
var mainLoopAf = false;
|
||||
var mainLoopTo = false;
|
||||
var mainLoopInited = false;
|
||||
var checkViewportDate = false;
|
||||
var lastRenderDate = false;
|
||||
|
||||
var userAgent = window.navigator.userAgent;
|
||||
var isSafari = !!window.safari ||
|
||||
!!(userAgent && (/\b(iPad|iPhone|iPod)\b/.test(userAgent) || (!!userAgent.match('Safari') && !userAgent.match('Chrome'))));
|
||||
var isRAF = isSafari;
|
||||
rlottie.isSafari = isSafari;
|
||||
|
||||
function wasmIsSupported() {
|
||||
try {
|
||||
if (typeof WebAssembly === 'object' &&
|
||||
typeof WebAssembly.instantiate === 'function') {
|
||||
const module = new WebAssembly.Module(Uint8Array.of(
|
||||
0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00
|
||||
));
|
||||
if (module instanceof WebAssembly.Module) {
|
||||
return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isSupported() {
|
||||
return (
|
||||
wasmIsSupported() &&
|
||||
typeof Uint8ClampedArray !== 'undefined' &&
|
||||
typeof Worker !== 'undefined' &&
|
||||
typeof ImageData !== 'undefined'
|
||||
);
|
||||
}
|
||||
|
||||
rlottie.isSupported = isSupported();
|
||||
|
||||
function mainLoop() {
|
||||
var key, rlPlayer, delta, rendered;
|
||||
var isEmpty = true;
|
||||
var now = +Date.now();
|
||||
var checkViewport = !checkViewportDate || (now - checkViewportDate) > 1000;
|
||||
for (key in rlottie.players) {
|
||||
rlPlayer = rlottie.players[key];
|
||||
if (rlPlayer &&
|
||||
rlPlayer.frameCount) {
|
||||
delta = now - rlPlayer.frameThen;
|
||||
if (delta > rlPlayer.frameInterval) {
|
||||
rendered = render(rlPlayer, checkViewport);
|
||||
if (rendered) {
|
||||
lastRenderDate = now;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// var delay = !lastRenderDate || now - lastRenderDate < 100 ? 16 : 500;
|
||||
var delay = 16;
|
||||
if (delay < 20 && isRAF) {
|
||||
mainLoopAf = requestAnimationFrame(mainLoop)
|
||||
} else {
|
||||
mainLoopTo = setTimeout(mainLoop, delay);
|
||||
}
|
||||
mainLoopInited = true;
|
||||
if (checkViewport) {
|
||||
checkViewportDate = now;
|
||||
}
|
||||
}
|
||||
function setupMainLoop() {
|
||||
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 (mainLoopInited === isEmpty || forceRender) {
|
||||
mainLoopAf && cancelAnimationFrame(mainLoopAf);
|
||||
mainLoopTo && clearTimeout(mainLoopTo);
|
||||
mainLoopInited = false;
|
||||
if (!isEmpty) {
|
||||
if (isRAF) {
|
||||
mainLoopAf = requestAnimationFrame(mainLoop);
|
||||
} else {
|
||||
mainLoopTo = setTimeout(mainLoop, 0);
|
||||
}
|
||||
mainLoopInited = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initApi(callback) {
|
||||
if (apiInited) {
|
||||
callback && callback();
|
||||
} else {
|
||||
callback && initCallbacks.push(callback);
|
||||
if (!apiInitStarted) {
|
||||
console.log(dT(), 'tgsticker init');
|
||||
apiInitStarted = true;
|
||||
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() {
|
||||
QueryableWorkerProxy.destroy();
|
||||
apiInitStarted = apiInited = false;
|
||||
}
|
||||
|
||||
function initPlayer(el, options) {
|
||||
if (el.rlPlayer) return;
|
||||
if (el.tagName.toLowerCase() != 'picture') {
|
||||
console.warn('only picture tag allowed');
|
||||
return;
|
||||
}
|
||||
options = options || {};
|
||||
var rlPlayer = el.rlPlayer = {};
|
||||
rlPlayer.thumb = el.querySelector('img');
|
||||
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;
|
||||
}
|
||||
var pic_width = el.clientWidth || el.getAttribute('width');
|
||||
var pic_height = el.clientHeight || el.getAttribute('height');
|
||||
var curDeviceRatio = options.maxDeviceRatio ? Math.min(options.maxDeviceRatio, deviceRatio) : deviceRatio;
|
||||
if (!pic_width || !pic_height) {
|
||||
pic_width = pic_height = 256;
|
||||
}
|
||||
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.workerProxy = QueryableWorkerProxy.create(rlPlayer.reqId, onFrame, onLoaded);
|
||||
rlPlayer.options = options;
|
||||
rlPlayer.isVisible = true;
|
||||
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.imageData = new ImageData(rlPlayer.width, rlPlayer.height);
|
||||
rlPlayer.workerProxy.loadFromData(urls, rlPlayer.width, rlPlayer.height);
|
||||
triggerEvent(rlPlayer.el, 'tg:init');
|
||||
}
|
||||
|
||||
function destroyPlayer(el) {
|
||||
if (!el.rlPlayer) return;
|
||||
var rlPlayer = el.rlPlayer;
|
||||
delete rlottie.players[rlPlayer.reqId];
|
||||
delete rlPlayer;
|
||||
setupMainLoop();
|
||||
}
|
||||
|
||||
function render(rlPlayer, checkViewport) {
|
||||
if (!rlPlayer.canvas ||
|
||||
rlPlayer.canvas.width == 0 ||
|
||||
rlPlayer.canvas.height == 0) {
|
||||
return false;
|
||||
}
|
||||
if (!rlPlayer.forceRender) {
|
||||
var focused = window.isFocused ? isFocused() : document.hasFocus();
|
||||
if (!focused ||
|
||||
rlPlayer.paused ||
|
||||
!rlPlayer.isVisible ||
|
||||
!rlPlayer.frameCount) {
|
||||
return false;
|
||||
}
|
||||
var isInViewport = rlPlayer.isInViewport;
|
||||
if (isInViewport === undefined || checkViewport) {
|
||||
var rect = rlPlayer.el.getBoundingClientRect();
|
||||
if (rect.bottom < 0 ||
|
||||
rect.right < 0 ||
|
||||
rect.top > (window.innerHeight || document.documentElement.clientHeight) ||
|
||||
rect.left > (window.innerWidth || document.documentElement.clientWidth)) {
|
||||
isInViewport = false;
|
||||
} else {
|
||||
isInViewport = true;
|
||||
}
|
||||
rlPlayer.isInViewport = isInViewport;
|
||||
}
|
||||
if (!isInViewport) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
var frame = rlPlayer.frameQueue.shift();
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function doRender(rlPlayer, frame) {
|
||||
rlPlayer.forceRender = false;
|
||||
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)
|
||||
}
|
||||
rlPlayer.frameThen = now - (now % rlPlayer.frameInterval);
|
||||
if (rlPlayer.thumb) {
|
||||
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) {
|
||||
// console.log(dT(), '['+reqId+']', 'request frame#'+frameNo+' (cache)');
|
||||
onFrame(reqId, frameNo, frame);
|
||||
} else {
|
||||
// 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 || !rlPlayer.frames) {
|
||||
return;
|
||||
}
|
||||
if (!rlPlayer.frames[frameNo] &&
|
||||
(!frameNo || (rlPlayer.options.cachingModulo && ((reqId + frameNo) % rlPlayer.options.cachingModulo)))) {
|
||||
rlPlayer.frames[frameNo] = new Uint8ClampedArray(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) {
|
||||
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()) {
|
||||
requestFrame(reqId, nextFrameNo)
|
||||
} else {
|
||||
rlPlayer.nextFrameNo = nextFrameNo;
|
||||
}
|
||||
}
|
||||
|
||||
function onLoaded(reqId, frameCount, fps) {
|
||||
var rlPlayer = rlottie.players[reqId];
|
||||
|
||||
rlPlayer.canvas = document.createElement('canvas');
|
||||
rlPlayer.canvas.width = rlPlayer.width;
|
||||
rlPlayer.canvas.height = rlPlayer.height;
|
||||
rlPlayer.el.appendChild(rlPlayer.canvas);
|
||||
rlPlayer.context = rlPlayer.canvas.getContext('2d');
|
||||
|
||||
rlPlayer.fps = fps;
|
||||
rlPlayer.frameInterval = 1000 / rlPlayer.fps;
|
||||
rlPlayer.frameThen = Date.now();
|
||||
rlPlayer.frameCount = frameCount;
|
||||
rlPlayer.forceRender = true;
|
||||
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) {
|
||||
if (!rlottie.isSupported) {
|
||||
return false;
|
||||
}
|
||||
initApi(function() {
|
||||
el && initPlayer(el, options);
|
||||
});
|
||||
}
|
||||
|
||||
rlottie.destroy = function(el) {
|
||||
destroyPlayer(el);
|
||||
}
|
||||
|
||||
rlottie.playOnce = function(el) {
|
||||
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.playUntilEnd = function(el) {
|
||||
if (el && el.rlPlayer) {
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
rlottie.destroyWorkers = function() {
|
||||
destroyWorkers();
|
||||
}
|
||||
|
||||
return rlottie;
|
||||
}());
|
||||
|
||||
|
||||
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;
|
||||
var worker = new Worker(url);
|
||||
var listeners = {};
|
||||
|
||||
this.defaultListener = defaultListener || function() {};
|
||||
|
||||
if (onError) {worker.onerror = onError;}
|
||||
|
||||
this.postMessage = function(message) {
|
||||
worker.postMessage(message);
|
||||
}
|
||||
|
||||
this.terminate = function() {
|
||||
worker.terminate();
|
||||
}
|
||||
|
||||
this.addListener = function(name, listener) {
|
||||
listeners[name] = listener;
|
||||
}
|
||||
|
||||
this.removeListener = function(name) {
|
||||
delete listeners[name];
|
||||
}
|
||||
|
||||
/*
|
||||
This functions takes at least one argument, the method name we want to query.
|
||||
Then we can pass in the arguments that the method needs.
|
||||
*/
|
||||
this.sendQuery = function(queryMethod) {
|
||||
if (arguments.length < 1) {
|
||||
throw new TypeError('QueryableWorker.sendQuery takes at least one argument');
|
||||
return;
|
||||
}
|
||||
var queryMethod = arguments[0];
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
if (RLottie.isSafari) {
|
||||
worker.postMessage({
|
||||
'queryMethod': queryMethod,
|
||||
'queryMethodArguments': args
|
||||
});
|
||||
} else {
|
||||
var transfer = [];
|
||||
for(var i = 0; i < args.length; i++) {
|
||||
if(args[i] instanceof ArrayBuffer) {
|
||||
transfer.push(args[i]);
|
||||
}
|
||||
|
||||
if(args[i].buffer && args[i].buffer instanceof ArrayBuffer) {
|
||||
transfer.push(args[i].buffer);
|
||||
}
|
||||
}
|
||||
|
||||
worker.postMessage({
|
||||
'queryMethod': queryMethod,
|
||||
'queryMethodArguments': args
|
||||
}, transfer);
|
||||
}
|
||||
}
|
||||
|
||||
worker.onmessage = function(event) {
|
||||
if (event.data instanceof Object &&
|
||||
event.data.hasOwnProperty('queryMethodListener') &&
|
||||
event.data.hasOwnProperty('queryMethodArguments')) {
|
||||
listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
|
||||
} else {
|
||||
this.defaultListener.call(instance, event.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function FrameQueue(maxLength) {
|
||||
this.queue = [];
|
||||
this.maxLength = maxLength;
|
||||
}
|
||||
|
||||
FrameQueue.prototype.needsMore = function frameQueueNeedsMore() {
|
||||
return this.queue.length < this.maxLength;
|
||||
}
|
||||
|
||||
FrameQueue.prototype.empty = function frameQueueEmpty() {
|
||||
return !this.queue.length;
|
||||
}
|
||||
|
||||
FrameQueue.prototype.notEmpty = function frameQueueEmpty() {
|
||||
return this.queue.length > 0;
|
||||
}
|
||||
|
||||
FrameQueue.prototype.push = function frameQueuePush(element) {
|
||||
return this.queue.push(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);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue