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

.webm stickers

Browse Source
This commit is contained in:
Eduard Kuzmenko 2022-01-31 21:29:39 +04:00
parent 2843323057
commit f627e004af
3 changed files with 70 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/emoticonsDropdown/tabs/stickers.ts
View File

@ -43,7 +43,7 @@ export class SuperStickerRenderer {
div = document.createElement('div');
div.classList.add('grid-item', 'super-sticker');
if(doc.sticker === 2) {
if(doc.animated) {
this.observeAnimatedDiv(div);
}
}
@ -54,7 +54,7 @@ export class SuperStickerRenderer {
div,
lazyLoadQueue: this.regularLazyLoadQueue,
group: this.group,
onlyThumb: doc.sticker === 2,
onlyThumb: doc.animated,
loadPromises
});

90
src/components/wrappers.ts
View File

@ -96,7 +96,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
searchContext?: MediaSearchContext,
}) {
const isAlbumItem = !(boxWidth && boxHeight);
const canAutoplay = doc.sticker || (
const canAutoplay = /* doc.sticker || */(
(
doc.type !== 'video' || (
doc.size <= MAX_VIDEO_AUTOPLAY_SIZE &&
@ -1159,8 +1159,8 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
div.dataset.docId = '' + doc.id;
div.classList.add('media-sticker-wrapper');
if(stickerType === 3) {
return wrapVideo({
/* if(stickerType === 3) {
const videoRes = wrapVideo({
doc,
boxWidth: width,
boxHeight: height,
@ -1172,8 +1172,20 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
loadPromises,
noPlayButton: true,
noInfo: true
}).loadPromise;
}
});
if(videoRes.thumb) {
if(videoRes.thumb.images.thumb) {
videoRes.thumb.images.thumb.classList.add('media-sticker', 'thumbnail');
}
if(videoRes.thumb.images.full) {
videoRes.thumb.images.full.classList.add('media-sticker');
}
}
return videoRes.loadPromise;
} */
//console.log('wrap sticker', doc, div, onlyThumb);
@ -1236,7 +1248,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
}).catch(() => {});
}
}
} else if(stickerType === 2 && (withThumb || onlyThumb) && toneIndex <= 0) {
} else if(((stickerType === 2 && toneIndex <= 0) || stickerType === 3) && (withThumb || onlyThumb)) {
thumbImage = new Image();
const load = () => {
@ -1364,40 +1376,64 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
});
//console.timeEnd('render sticker' + doc.id);
} else if(stickerType === 1) {
const image = new Image();
const thumbImage = div.firstElementChild !== image && div.firstElementChild;
} else if(stickerType === 1 || stickerType === 3) {
let media: HTMLElement;
if(stickerType === 1) {
media = new Image();
} else {
media = document.createElement('video');
media.setAttribute('playsinline', 'true');
(media as HTMLVideoElement).muted = true;
if(play) {
(media as HTMLVideoElement).autoplay = true;
(media as HTMLVideoElement).loop = true;
}
}
const thumbImage = div.firstElementChild !== media && div.firstElementChild;
needFadeIn = (needFadeIn || !downloaded || thumbImage) && rootScope.settings.animationsEnabled;
image.classList.add('media-sticker');
media.classList.add('media-sticker');
if(needFadeIn) {
image.classList.add('fade-in');
media.classList.add('fade-in');
}
return new Promise<void>((resolve, reject) => {
const r = () => {
if(middleware && !middleware()) return resolve();
renderImageFromUrl(image, cacheContext.url, () => {
const onLoad = () => {
sequentialDom.mutateElement(div, () => {
div.append(image);
div.append(media);
if(thumbImage) {
thumbImage.classList.add('fade-out');
}
if(stickerType === 3 && group) {
animationIntersector.addAnimation(media as HTMLVideoElement, group);
}
resolve();
if(needFadeIn) {
image.addEventListener('animationend', () => {
image.classList.remove('fade-in');
media.addEventListener('animationend', () => {
media.classList.remove('fade-in');
if(thumbImage) {
thumbImage.remove();
}
}, {once: true});
}
});
});
};
if(stickerType === 1) {
renderImageFromUrl(media, cacheContext.url, onLoad);
} else {
(media as HTMLVideoElement).src = cacheContext.url;
onMediaLoad(media as HTMLVideoElement).then(onLoad);
}
};
if(cacheContext.url) r();
@ -1412,7 +1448,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
(lazyLoadQueue.push({div, load}), Promise.resolve()) :
load();
if(downloaded && stickerType === 1) {
if(downloaded && (stickerType === 1 || stickerType === 3)) {
loadThumbPromise = loadPromise;
if(loadPromises) {
loadPromises.push(loadThumbPromise);
@ -1439,7 +1475,7 @@ export async function wrapStickerSetThumb({set, lazyLoadQueue, container, group,
const downloadOptions = appStickersManager.getStickerSetThumbDownloadOptions(set);
const promise = appDownloadManager.download(downloadOptions);
if(set.pFlags.animated) {
if(set.pFlags.animated && !set.pFlags.videos) {
return promise
.then(readBlobAsText)
//.then(JSON.parse)
@ -1456,12 +1492,22 @@ export async function wrapStickerSetThumb({set, lazyLoadQueue, container, group,
}, group);
});
} else {
const image = new Image();
image.classList.add('media-sticker');
let media: HTMLElement;
if(set.pFlags.videos) {
media = document.createElement('video');
media.setAttribute('playsinline', 'true');
(media as HTMLVideoElement).autoplay = true;
(media as HTMLVideoElement).muted = true;
(media as HTMLVideoElement).loop = true;
} else {
media = new Image();
}
media.classList.add('media-sticker');
return promise.then(blob => {
renderImageFromUrl(image, URL.createObjectURL(blob), () => {
container.append(image);
renderImageFromUrl(media, URL.createObjectURL(blob), () => {
container.append(media);
});
});
}

10
src/lib/appManagers/appDocsManager.ts
View File

@ -91,16 +91,6 @@ export class AppDocsManager {
this.docs[doc.id] = doc;
}
if(doc.mime_type === 'video/webm' && !doc.attributes.find(attribute => attribute._ === 'documentAttributeSticker')) {
doc.attributes.push({
_: 'documentAttributeSticker',
alt: '⏱',
stickerset: {
_: 'inputStickerSetEmpty'
}
});
}
// * exclude from state
// defineNotNumerableProperties(doc, [/* 'thumbs', */'type', 'h', 'w', 'file_name',
// 'file', 'duration', 'downloaded', 'url', 'audioTitle',