Browse Source

Fix stickers blinking again

master
morethanwords 4 years ago
parent
commit
bdf5118c73
  1. 16
      src/components/wrappers.ts
  2. 3
      src/scss/partials/_emojiDropdown.scss
  3. 3
      src/scss/partials/popups/_stickers.scss
  4. 45
      src/scss/style.scss

16
src/components/wrappers.ts

@ -732,7 +732,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o @@ -732,7 +732,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
if(thumb._ === 'photoPathSize') {
if(thumb.bytes.length) {
const d = appPhotosManager.getPathFromPhotoPathSize(thumb);
div.innerHTML = `<svg class="rlottie-vector" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${doc.w || 512} ${doc.h || 512}" xml:space="preserve">
div.innerHTML = `<svg class="rlottie-vector media-sticker thumbnail" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${doc.w || 512} ${doc.h || 512}" xml:space="preserve">
<path d="${d}"/>
</svg>`;
} else {
@ -848,12 +848,14 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o @@ -848,12 +848,14 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
cb();
} else {
animation.canvas.classList.add('fade-in');
if(element) {
setTimeout(() => {
cb();
}, element.tagName === 'svg' ? 50 : 200);
element.classList.add('fade-out');
}
setTimeout(() => {
animation.canvas.classList.remove('fade-in');
cb();
}, 200);
}
appDocsManager.saveLottiePreview(doc, animation.canvas, toneIndex);
@ -895,6 +897,9 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o @@ -895,6 +897,9 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
renderImageFromUrl(image, doc.url, () => {
div.append(image);
if(thumbImage) {
thumbImage.classList.add('fade-out');
}
window.requestAnimationFrame(() => {
resolve();
@ -903,7 +908,6 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o @@ -903,7 +908,6 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
if(needFadeIn) {
setTimeout(() => {
image.classList.remove('fade-in');
if(thumbImage) {
thumbImage.remove();
}

3
src/scss/partials/_emojiDropdown.scss

@ -298,6 +298,9 @@ @@ -298,6 +298,9 @@
padding: 8px;
max-width: 100%;
max-height: 100%;
}
> canvas {
width: 100%;
height: 100%;
}

3
src/scss/partials/popups/_stickers.scss

@ -80,9 +80,6 @@ @@ -80,9 +80,6 @@
img {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: contain;
}
}
}

45
src/scss/style.scss

@ -743,27 +743,6 @@ img.emoji { @@ -743,27 +743,6 @@ img.emoji {
pointer-events: none;
}
.rlottie, .rlottie-vector {
left: 0;
top: 0;
bottom: 0;
right: 0;
position: absolute;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
z-index: 1;
}
.rlottie.fade-in {
animation: fade-in-opacity .2s ease forwards;
}
.rlottie-vector {
fill: rgba(0, 0, 0, .08);
}
.super-stickers {
width: 100%;
display: grid;
@ -1177,6 +1156,26 @@ middle-ellipsis-element { @@ -1177,6 +1156,26 @@ middle-ellipsis-element {
}
}
.rlottie, .rlottie-vector {
left: 0;
top: 0;
bottom: 0;
right: 0;
position: absolute;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
}
.rlottie.fade-in {
animation: fade-in-opacity .2s ease-in-out forwards;
}
.rlottie-vector {
fill: rgba(0, 0, 0, .08);
}
.media-photo, .media-video, .media-sticker {
position: absolute;
top: 0;
@ -1187,6 +1186,10 @@ middle-ellipsis-element { @@ -1187,6 +1186,10 @@ middle-ellipsis-element {
&.fade-in {
animation: fade-in-opacity .2s ease-in-out forwards;
}
&.fade-out {
animation: fade-out-opacity .2s ease-in-out forwards;
}
}
.media-video {

Loading…
Cancel
Save