Support .webm stickers

src/components/wrappers.ts

@@ -96,8 +96,14 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
   searchContext?: MediaSearchContext,
 }) {
   const isAlbumItem = !(boxWidth && boxHeight);
-  const canAutoplay = (doc.type !== 'video' || (doc.size <= MAX_VIDEO_AUTOPLAY_SIZE && !isAlbumItem)) 
-    && (doc.type === 'gif' ? rootScope.settings.autoPlay.gifs : rootScope.settings.autoPlay.videos);
+  const canAutoplay = doc.sticker || (
+    (
+      doc.type !== 'video' || (
+        doc.size <= MAX_VIDEO_AUTOPLAY_SIZE && 
+        !isAlbumItem
+      )
+    ) && (doc.type === 'gif' ? rootScope.settings.autoPlay.gifs : rootScope.settings.autoPlay.videos)
+  );
   let spanTime: HTMLElement, spanPlay: HTMLElement;
 
   if(!noInfo) {
@@ -395,7 +401,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
     preloader = (message.media as any).preloader as ProgressivePreloader;
     preloader.attach(container, false);
     noAutoDownload = undefined;
-  } else if(!cacheContext.downloaded && !doc.supportsStreaming) {
+  } else if(!cacheContext.downloaded && !doc.supportsStreaming && !withoutPreloader) {
     preloader = new ProgressivePreloader({
       attachMethod: 'prepend'
     });
@@ -452,14 +458,16 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
     }
 
     let loadPromise: Promise<any> = Promise.resolve();
-    if(preloader && !isUpload) {
+    if((preloader && !isUpload) || withoutPreloader) {
       if(!cacheContext.downloaded && !doc.supportsStreaming) {
         const promise = loadPromise = appDocsManager.downloadDoc(doc, lazyLoadQueue?.queueId, noAutoDownload);
+        if(preloader) {
           preloader.attach(container, false, promise);
+        }
       } else if(doc.supportsStreaming) {
         if(noAutoDownload) {
           loadPromise = Promise.reject();
-        } else if(!cacheContext.downloaded) { // * check for uploading video
+        } else if(!cacheContext.downloaded && preloader) { // * check for uploading video
           preloader.attach(container, false, null);
           video.addEventListener(IS_SAFARI ? 'timeupdate' : 'canplay', () => {
             preloader.detach();
@@ -1151,6 +1159,22 @@ 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({
+      doc,
+      boxWidth: width,
+      boxHeight: height,
+      container: div,
+      group,
+      lazyLoadQueue,
+      middleware,
+      withoutPreloader: true,
+      loadPromises,
+      noPlayButton: true,
+      noInfo: true
+    }).loadPromise;
+  }
+  
   //console.log('wrap sticker', doc, div, onlyThumb);
 
   const cacheContext = appDownloadManager.getCacheContext(doc);

src/layer.d.ts

@@ -3237,7 +3237,7 @@ export namespace Document {
 		duration?: number,
 		audioTitle?: string,
 		audioPerformer?: string,
-		sticker?: 1 | 2,
+		sticker?: 1 | 2 | 3,
 		stickerEmoji?: string,
 		stickerEmojiRaw?: string,
 		stickerSetInput?: InputStickerSet.inputStickerSetID,

src/lib/appManagers/appDocsManager.ts

@@ -91,6 +91,16 @@ 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', 
@@ -144,6 +154,10 @@ export class AppDocsManager {
           if(/* apiDoc.thumbs &&  */doc.mime_type === 'image/webp' && (doc.thumbs || IS_WEBP_SUPPORTED)) {
             doc.type = 'sticker';
             doc.sticker = 1;
+          } else if(doc.mime_type === 'video/webm') {
+            doc.type = 'sticker';
+            doc.sticker = 3;
+            doc.animated = true;
           }
           break;
 

src/scripts/in/schema_additional_params.json

@@ -11,7 +11,7 @@
     {"name": "duration", "type": "number"},
     {"name": "audioTitle", "type": "string"},
     {"name": "audioPerformer", "type": "string"},
-    {"name": "sticker", "type": "1 | 2"},
+    {"name": "sticker", "type": "1 | 2 | 3"},
     {"name": "stickerEmoji", "type": "string"},
     {"name": "stickerEmojiRaw", "type": "string"},
     {"name": "stickerSetInput", "type": "InputStickerSet.inputStickerSetID"},