.webm stickers

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
     });
 

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) {
+  /* if(stickerType === 3) {
-    return wrapVideo({
+    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) {
+    } else if(stickerType === 1 || stickerType === 3) {
-      const image = new Image();
+      let media: HTMLElement;
-      const thumbImage = div.firstElementChild !== image && div.firstElementChild;
+      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', () => {
+                media.addEventListener('animationend', () => {
-                  image.classList.remove('fade-in');
+                  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();
+          let media: HTMLElement;
-          image.classList.add('media-sticker');
+          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), () => {
+            renderImageFromUrl(media, URL.createObjectURL(blob), () => {
-              container.append(image);
+              container.append(media);
             });
           });
         }

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',