Shared media voice tab

Fix colored animated emoji

src/components/appSearchSuper..ts

@@ -112,8 +112,9 @@ export default class AppSearchSuper {
   public groupByMonth? = true;
   public hideEmptyTabs? = true;
   public onChangeTab?: (mediaTab: SearchSuperMediaTab) => void;
+  public showSender? = false;
 
-  constructor(options: Pick<AppSearchSuper, 'mediaTabs' | 'scrollable' | 'searchGroups' | 'asChatList' | 'groupByMonth' | 'hideEmptyTabs' | 'onChangeTab'>) {
+  constructor(options: Pick<AppSearchSuper, 'mediaTabs' | 'scrollable' | 'searchGroups' | 'asChatList' | 'groupByMonth' | 'hideEmptyTabs' | 'onChangeTab' | 'showSender'>) {
     safeAssign(this, options);
 
     this.container = document.createElement('div');
@@ -401,25 +402,26 @@ export default class AppSearchSuper {
     return filtered;
   }
   
-  public async performSearchResult(messages: any[], type: SearchSuperType, append = true) {
+  public async performSearchResult(messages: any[], mediaTab: SearchSuperMediaTab, append = true) {
     const elemsToAppend: {element: HTMLElement, message: any}[] = [];
-    const sharedMediaDiv: HTMLElement = this.tabs[type];
+    const sharedMediaDiv: HTMLElement = mediaTab.contentTab;
     const promises: Promise<any>[] = [];
     const middleware = this.middleware.get();
+    let inputFilter = mediaTab.inputFilter;
 
     await getHeavyAnimationPromise();
     
     let searchGroup: SearchGroup;
-    if(type === 'inputMessagesFilterPhotoVideo' && !!this.searchContext.query.trim()) {
-      type = 'inputMessagesFilterEmpty';
+    if(inputFilter === 'inputMessagesFilterPhotoVideo' && !!this.searchContext.query.trim()) {
+      inputFilter = 'inputMessagesFilterEmpty';
       searchGroup = this.searchGroupMedia;
       sharedMediaDiv.append(searchGroup.container);
-    } else if(type === 'inputMessagesFilterEmpty') {
+    } else if(inputFilter === 'inputMessagesFilterEmpty') {
       searchGroup = this.searchGroups.messages;
     }
 
     // https://core.telegram.org/type/MessagesFilter
-    switch(type) {
+    switch(inputFilter) {
       case 'inputMessagesFilterEmpty': {
         for(const message of messages) {
           const {dialog, dom} = appDialogsManager.addDialogNew({
@@ -488,17 +490,20 @@ export default class AppSearchSuper {
       case 'inputMessagesFilterMusic':
       case 'inputMessagesFilterDocument': {
         for(const message of messages) {
+          const showSender = this.showSender || message.media.document.type === 'voice';
           const div = wrapDocument({
             message,
-            withTime: !this.asChatList,
+            withTime: !showSender,
             fontWeight: 400,
             voiceAsMusic: true,
-            showSender: this.asChatList,
-            searchContext: this.copySearchContext(type)
+            showSender: showSender,
+            searchContext: this.copySearchContext(inputFilter)
           });
-          if(message.media.document.type === 'audio') {
+
+          if(['audio', 'voice'].includes(message.media.document.type)) {
             div.classList.add('audio-48');
           }
+
           elemsToAppend.push({element: div, message});
         }
         break;
@@ -589,10 +594,10 @@ export default class AppSearchSuper {
             title = RichTextProcessor.wrapPlainText(webpage.display_url.split('/', 1)[0]);
           }
 
-          let sender = this.asChatList ? `<div class="subtitle sender">${appMessagesManager.getSenderToPeerText(message)}</div>` : '';
+          let sender = this.showSender ? `<div class="subtitle sender">${appMessagesManager.getSenderToPeerText(message)}</div>` : '';
 
           let titleAdditionHTML = '';
-          if(this.asChatList) {
+          if(this.showSender) {
             titleAdditionHTML = `<div class="sent-time">${formatDateAccordingToToday(new Date(message.date * 1000))}</div>`;
           }
 
@@ -634,7 +639,7 @@ export default class AppSearchSuper {
       const method = append ? 'append' : 'prepend';
       elemsToAppend.forEach(details => {
         const {element, message} = details;
-        const monthContainer = this.getMonthContainerByTimestamp(this.groupByMonth ? message.date : 0, type);
+        const monthContainer = this.getMonthContainerByTimestamp(this.groupByMonth ? message.date : 0, inputFilter);
         element.classList.add('search-super-item');
         element.dataset.mid = '' + message.mid;
         element.dataset.peerId = '' + message.peerId;
@@ -643,7 +648,7 @@ export default class AppSearchSuper {
     }
     
     //if(type !== 'inputMessagesFilterEmpty') {
-      this.afterPerforming(type === 'inputMessagesFilterEmpty' ? 1 : messages.length, sharedMediaDiv);
+      this.afterPerforming(inputFilter === 'inputMessagesFilterEmpty' ? 1 : messages.length, sharedMediaDiv);
     //}
   }
 
@@ -957,7 +962,7 @@ export default class AppSearchSuper {
 
       this.usedFromHistory[type] = used;
       //if(messages.length) {
-        return this.performSearchResult(messages, type).finally(() => {
+        return this.performSearchResult(messages, mediaTab).finally(() => {
           setTimeout(() => {
             this.scrollable.checkForTriggers();
           }, 0);
@@ -1030,7 +1035,7 @@ export default class AppSearchSuper {
       }
 
       //if(value.history.length) {
-        return this.performSearchResult(this.filterMessagesByType(value.history, type), type);
+        return this.performSearchResult(this.filterMessagesByType(value.history, type), mediaTab);
       //}
     }).catch(err => {
       this.log.error('load error:', err);

src/components/sidebarLeft/index.ts

@@ -230,7 +230,8 @@ export class AppSidebarLeft extends SidebarSlider {
       scrollable, 
       searchGroups: this.searchGroups, 
       asChatList: true,
-      hideEmptyTabs: false
+      hideEmptyTabs: false,
+      showSender: true
     });
 
     searchContainer.prepend(searchSuper.nav.parentElement.parentElement);

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -777,6 +777,10 @@ export default class AppSharedMediaTab extends SliderSuperTab {
         inputFilter: 'inputMessagesFilterMusic',
         name: 'SharedMusicTab2',
         type: 'music'
+      }, {
+        inputFilter: 'inputMessagesFilterVoice',
+        name: 'SharedVoiceTab2',
+        type: 'voice'
       }], 
       scrollable: this.scrollable,
       onChangeTab: (mediaTab) => {
@@ -864,8 +868,8 @@ export default class AppSharedMediaTab extends SliderSuperTab {
     if(!this.historiesStorage[peerId]) return;
     
     mids = mids.slice().reverse(); // ! because it will be ascend sorted array
-    for(const type of this.searchSuper.mediaTabs) {
-      const inputFilter = type.inputFilter;
+    for(const mediaTab of this.searchSuper.mediaTabs) {
+      const inputFilter = mediaTab.inputFilter;
       const filtered = this.searchSuper.filterMessagesByType(mids.map(mid => appMessagesManager.getMessageByPeer(peerId, mid)), inputFilter);
       if(filtered.length) {
         if(this.historiesStorage[peerId][inputFilter]) {
@@ -874,7 +878,7 @@ export default class AppSharedMediaTab extends SliderSuperTab {
 
         if(this.peerId === peerId && this.searchSuper.usedFromHistory[inputFilter] !== -1) {
           this.searchSuper.usedFromHistory[inputFilter] += filtered.length;
-          this.searchSuper.performSearchResult(filtered, inputFilter, false);
+          this.searchSuper.performSearchResult(filtered, mediaTab, false);
         }
 
         break;

src/lib/lottieLoader.ts

@@ -507,6 +507,13 @@ class QueryableWorker extends EventListenerBase<any> {
   }
 }
 
+type LottieShape = {
+  c: {
+    k: number[]
+  },
+  ty: 'st' | 'fl',
+  it?: LottieShape[]
+};
 class LottieLoader {
   public isWebAssemblySupported = typeof(WebAssembly) !== 'undefined';
   public loadPromise: Promise<void> = !this.isWebAssemblySupported ? Promise.reject() : undefined;
@@ -604,40 +611,59 @@ class LottieLoader {
     });
   }
 
-  private applyReplacements(object: any, toneIndex: number) {
+  private applyReplacements(object: {
+    layers: Array<{shapes: LottieShape[]}>
+  }, toneIndex: number) {
     const replacements = LottieLoader.COLORREPLACEMENTS[Math.max(toneIndex - 1, 0)];
 
-    const iterateIt = (it: any) => {
-      for(let smth of it) {
-        switch(smth.ty) {
-          case 'st':
-          case 'fl':
-            let k = smth.c.k;
-            let color = convert(k[2]) | (convert(k[1]) << 8) | (convert(k[0]) << 16);
+    const applyTo = (smth: LottieShape) => {
+      const k = smth.c.k;
+      const color = convert(k[2]) | (convert(k[1]) << 8) | (convert(k[0]) << 16);
 
-            let foundReplacement = replacements.find(p => p[0] === color);
-            if(foundReplacement) {
-              k[0] = ((foundReplacement[1] >> 16) & 255) / 255;
-              k[1] = ((foundReplacement[1] >> 8) & 255) / 255;
-              k[2] = (foundReplacement[1] & 255) / 255;
-            }
+      const foundReplacement = replacements.find(p => p[0] === color);
+      if(foundReplacement) {
+        k[0] = ((foundReplacement[1] >> 16) & 255) / 255;
+        k[1] = ((foundReplacement[1] >> 8) & 255) / 255;
+        k[2] = (foundReplacement[1] & 255) / 255;
+      }
 
-            //console.log('foundReplacement!', foundReplacement, color.toString(16), k);
-            break;
-        }
+      //console.log('foundReplacement!', foundReplacement, color.toString(16), k);
+    };
 
-        if(smth.hasOwnProperty('it')) {
-          iterateIt(smth.it);
-        }
+    const checkSmth = (smth: LottieShape) => {
+      switch(smth.ty) {
+        case 'st':
+        case 'fl':
+          applyTo(smth);
+          break;
+      }
+
+      if(smth.hasOwnProperty('it')) {
+        iterateIt(smth.it);
       }
     };
 
-    for(let layer of object.layers) {
-      if(!layer.shapes) continue;
-
-      for(let shape of layer.shapes) {
-        iterateIt(shape.it);
+    const iterateIt = (it: LottieShape['it']) => {
+      for(const smth of it) {
+        checkSmth(smth);
       }
+    };
+
+    try {
+      for(const layer of object.layers) {
+        if(!layer.shapes) continue;
+  
+        for(const shape of layer.shapes) {
+          if(!shape.it) {
+            checkSmth(shape);
+            continue;
+          }
+
+          iterateIt(shape.it);
+        }
+      }
+    } catch(err) {
+      this.log.warn('cant apply replacements', err, object, toneIndex);
     }
   }
 

src/scss/partials/_rightSidebar.scss

@@ -193,6 +193,9 @@
   }
 
   &-tabs {
+    width: auto;
+    flex: 1 1 auto;
+    
     //margin-top: 36px;
     i {
       padding-right: 1.5rem !important;
@@ -222,6 +225,7 @@
 
     .scrollable {
       position: relative;
+      display: flex;
     }
   }
 
@@ -282,6 +286,19 @@
     display: none;
   }
 
+  .document-name, .audio-title, .title {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .sent-time {
+    flex: 0 0 auto;
+    margin-left: 8px;
+    margin-top: 3px;
+    font-size: 12px;
+    color: var(--secondary-text-color);
+  }
+
   &-content-media {
     .search-super-month-name {
       border: none;
@@ -500,19 +517,6 @@
     }
   }
   
-  .document-name, .audio-title, .title {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .sent-time {
-    flex: 0 0 auto;
-    margin-left: 8px;
-    margin-top: 3px;
-    font-size: 12px;
-    color: var(--secondary-text-color);
-  }
-
   .search-group.is-short {
     li:nth-child(n + 4) {
       display: none;

src/scss/style.scss

@@ -213,13 +213,13 @@ html.night {
 @import "partials/crop";
 @import "partials/sidebar";
 @import "partials/profile";
+@import "partials/slider";
 @import "partials/leftSidebar";
 @import "partials/rightSidebar";
 @import "partials/mediaViewer";
 @import "partials/ckin";
 @import "partials/emojiDropdown";
 @import "partials/scrollable";
-@import "partials/slider";
 @import "partials/selector";
 @import "partials/gifsMasonry";
 @import "partials/preloader";