From f627e004af76acd3d64ccb788241c4035e6e08d9 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Mon, 31 Jan 2022 21:29:39 +0400 Subject: [PATCH] .webm stickers --- .../emoticonsDropdown/tabs/stickers.ts | 4 +- src/components/wrappers.ts | 90 ++++++++++++++----- src/lib/appManagers/appDocsManager.ts | 10 --- 3 files changed, 70 insertions(+), 34 deletions(-) diff --git a/src/components/emoticonsDropdown/tabs/stickers.ts b/src/components/emoticonsDropdown/tabs/stickers.ts index 20ad4163..1ea83cbd 100644 --- a/src/components/emoticonsDropdown/tabs/stickers.ts +++ b/src/components/emoticonsDropdown/tabs/stickers.ts @@ -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 }); diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts index 9c8f0a65..6068d170 100644 --- a/src/components/wrappers.ts +++ b/src/components/wrappers.ts @@ -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((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); }); }); } diff --git a/src/lib/appManagers/appDocsManager.ts b/src/lib/appManagers/appDocsManager.ts index 0c75b90f..c34eb2c4 100644 --- a/src/lib/appManagers/appDocsManager.ts +++ b/src/lib/appManagers/appDocsManager.ts @@ -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',