r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add stickers shimmer

Browse Source
This commit is contained in:
Eduard Kuzmenko 2022-07-02 01:34:19 +02:00
parent 3568c5dbe0
commit 9969b2b4ea
2 changed files with 48 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/wrappers/sticker.ts
View File

@ -168,11 +168,48 @@ export default async function wrapSticker({doc, div, middleware, lazyLoadQueue,
if(thumb._ === 'photoPathSize') { if(thumb._ === 'photoPathSize') {
if(thumb.bytes.length) { if(thumb.bytes.length) {
const d = getPathFromBytes(thumb.bytes); const d = getPathFromBytes(thumb.bytes);
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); const ns = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(ns, 'svg');
svg.classList.add('rlottie-vector', 'media-sticker', 'thumbnail'); svg.classList.add('rlottie-vector', 'media-sticker', 'thumbnail');
svg.setAttributeNS(null, 'viewBox', `0 0 ${doc.w || 512} ${doc.h || 512}`); svg.setAttributeNS(null, 'viewBox', `0 0 ${doc.w || 512} ${doc.h || 512}`);
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
// const defs = document.createElementNS(ns, 'defs');
// const linearGradient = document.createElementNS(ns, 'linearGradient');
// linearGradient.setAttributeNS(null, 'id', 'g');
// linearGradient.setAttributeNS(null, 'x1', '-300%');
// linearGradient.setAttributeNS(null, 'x2', '-200%');
// linearGradient.setAttributeNS(null, 'y1', '0');
// linearGradient.setAttributeNS(null, 'y2', '0');
// const stops = [
// ['-10%', '.1'],
// ['30%', '.07'],
// ['70%', '.07'],
// ['110%', '.1']
// ].map(([offset, stopOpacity]) => {
// const stop = document.createElementNS(ns, 'stop');
// stop.setAttributeNS(null, 'offset', offset);
// stop.setAttributeNS(null, 'stop-opacity', stopOpacity);
// return stop;
// });
// const animates = [
// ['-300%', '1200%'],
// ['-200%', '1300%']
// ].map(([from, to], idx) => {
// const animate = document.createElementNS(ns, 'animate');
// animate.setAttributeNS(null, 'attributeName', 'x' + (idx + 1));
// animate.setAttributeNS(null, 'from', from);
// animate.setAttributeNS(null, 'to', to);
// animate.setAttributeNS(null, 'dur', '3s');
// animate.setAttributeNS(null, 'repeatCount', 'indefinite');
// return animate;
// });
// linearGradient.append(...stops, ...animates);
// defs.append(linearGradient);
// svg.append(defs);
const path = document.createElementNS(ns, 'path');
path.setAttributeNS(null, 'd', d); path.setAttributeNS(null, 'd', d);
if(rootScope.settings.animationsEnabled) path.setAttributeNS(null, 'fill', 'url(#g)');
svg.append(path); svg.append(path);
div.append(svg); div.append(svg);
} else { } else {
@ -237,7 +274,7 @@ export default async function wrapSticker({doc, div, middleware, lazyLoadQueue,
loadPromises.push(loadThumbPromise); loadPromises.push(loadThumbPromise);
} }
if(onlyThumb) { // for sticker panel if(onlyThumb/* || true */) { // for sticker panel
return; return;
} }

8
src/index.hbs
View File

@ -102,6 +102,14 @@
<path d="M-6 16h6v17c-.193-2.84-.876-5.767-2.05-8.782-.904-2.325-2.446-4.485-4.625-6.48A1 1 0 01-6 16z" transform="matrix(1 0 0 -1 0 49)" id="corner-fill" fill="inherit"/> <path d="M-6 16h6v17c-.193-2.84-.876-5.767-2.05-8.782-.904-2.325-2.446-4.485-4.625-6.48A1 1 0 01-6 16z" transform="matrix(1 0 0 -1 0 49)" id="corner-fill" fill="inherit"/>
</g> </g>
</symbol> </symbol>
<linearGradient id="g" x1="-300%" x2="-200%" y1="0" y2="0">
<stop offset="-10%" stop-opacity=".1"/>
<stop offset="30%" stop-opacity=".07"/>
<stop offset="70%" stop-opacity=".07"/>
<stop offset="110%" stop-opacity=".1"/>
<animate attributeName="x1" from="-300%" to="1200%" dur="3s" repeatCount="indefinite"/>
<animate attributeName="x2" from="-200%" to="1300%" dur="3s" repeatCount="indefinite"/>
</linearGradient>
</defs> </defs>
</svg> </svg>
<div id="main-columns" class="tabs-container" data-animation="navigation"> <div id="main-columns" class="tabs-container" data-animation="navigation">