Added muted icon to chatlist

src/lib/appManagers/appDialogsManager.ts

@@ -514,6 +514,13 @@ export class AppDialogsManager {
       }
     });
 
+    $rootScope.$on('dialog_notify_settings', e => {
+      const dialog = appMessagesManager.getDialogByPeerID(e.detail)[0];
+      if(dialog) {
+        this.setUnreadMessages(dialog); // возможно это не нужно, но нужно менять is-muted
+      }
+    });
+
     $rootScope.$on('peer_changed', (e: CustomEvent) => {
       let peerID = e.detail;
 
@@ -1039,6 +1046,10 @@ export class AppDialogsManager {
       return;
     }
 
+    const isMuted = (dialog.notify_settings?.mute_until * 1000) > Date.now();
+
+    dom.listEl.classList.toggle('is-muted', isMuted);
+
     const lastMessage = appMessagesManager.getMessage(dialog.top_message);
     if(lastMessage._ != 'messageEmpty' && !lastMessage.deleted && 
       lastMessage.from_id == $rootScope.myID && lastMessage.peerID != $rootScope.myID && 
@@ -1071,8 +1082,7 @@ export class AppDialogsManager {
     if(dialog.unread_count || dialog.pFlags.unread_mark) {
       //dom.unreadMessagesSpan.innerText = '' + (dialog.unread_count ? formatNumber(dialog.unread_count, 1) : ' ');
       dom.unreadMessagesSpan.innerText = '' + (dialog.unread_count || ' ');
-      dom.unreadMessagesSpan.classList.add((dialog.notify_settings?.mute_until * 1000) > Date.now() ? 
+      dom.unreadMessagesSpan.classList.add(isMuted ? 'unread-muted' : 'unread');
-      'unread-muted' : 'unread');
     } else if(isPinned) {
       dom.unreadMessagesSpan.classList.remove('unread', 'unread-muted');
       dom.unreadMessagesSpan.classList.add('tgico-pinnedchat');
@@ -1152,21 +1162,6 @@ export class AppDialogsManager {
     let titleSpan = document.createElement('span');
     titleSpan.classList.add('user-title');
 
-    // в других случаях иконка верификации не нужна (а первый - это главные чатлисты)
-    if(!container) {
-      if(peerID < 0) {
-        let chat = appChatsManager.getChat(-peerID);
-        if(chat && chat.pFlags && chat.pFlags.verified) {
-          titleSpan.classList.add('is-verified');
-        }
-      } else {
-        let user = appUsersManager.getUser(peerID);
-        if(user && user.pFlags && user.pFlags.verified) {
-          titleSpan.classList.add('is-verified');
-        }
-      }
-    }
-
     if(peerID == $rootScope.myID && meAsSaved) {
       title = onlyFirstName ? 'Saved' : 'Saved Messages';
     } 
@@ -1174,6 +1169,26 @@ export class AppDialogsManager {
     titleSpan.innerHTML = title;
     //p.classList.add('')
 
+    // в других случаях иконка верификации не нужна (а первый - это главные чатлисты)
+    if(!container) {
+      let peer: any;
+
+      if(peerID < 0) {
+        titleSpan.classList.add('tgico');
+        
+        peer = appChatsManager.getChat(-peerID);
+      } else {
+        peer = appUsersManager.getUser(peerID);
+      }
+
+      if(peer?.pFlags?.verified) {
+        titleSpan.classList.add('is-verified');
+        const i = document.createElement('i');
+        i.classList.add('verified-icon');
+        titleSpan.append(i);
+      }
+    }
+    
     let span = document.createElement('span');
     span.classList.add('user-last-message');
 

src/lib/appManagers/appImManager.ts

@@ -2402,7 +2402,7 @@ export class AppImManager {
               bubble.classList.add('is-vertical-photo');
             }
 
-            wrapPhoto(webpage.photo, message, preview, mediaSizes.active.webpage.width, mediaSizes.active.webpage.height, false, null, this.lazyLoadQueue, this.getMiddleware());
+            wrapPhoto(webpage.photo, message, preview, mediaSizes.active.webpage.width, mediaSizes.active.webpage.height, false, isOut, this.lazyLoadQueue, this.getMiddleware());
           }
           
           box.append(quote);
@@ -3054,6 +3054,7 @@ export class AppImManager {
         let dialog = appMessagesManager.getDialogByPeerID(peerID)[0];
         if(dialog) {
           dialog.notify_settings = notify_settings;
+          $rootScope.$broadcast('dialog_notify_settings', peerID);
         }
         
         if(peerID == this.peerID) {

src/lib/appManagers/appMediaViewer.ts

@@ -296,6 +296,10 @@ export class AppMediaViewer {
   private async setMoverToTarget(target: HTMLElement, closing = false, fromRight = 0) {
     const mover = this.content.mover;
 
+    if(!target) {
+      target = this.content.container;
+    }
+
     if(!closing) {
       mover.innerHTML = '';
       //mover.append(this.buttons.prev, this.buttons.next);

src/lib/utils.ts

@@ -159,10 +159,58 @@ type BroadcastKeys = 'download_progress' | 'user_update' | 'user_auth' | 'peer_c
   'message_sent' | 'history_request' | 'messages_downloaded' | 'contacts_update' | 'avatar_update' |
   'stickers_installed' | 'stickers_deleted' | 'chat_full_update' | 'peer_pinned_message' | 
   'poll_update' | 'dialogs_archived_unread' | 'audio_play' | 'audio_pause' | 'chat_update' | 
-  'apiUpdate' | 'stateSynchronized' | 'channel_settings' | 'webpage_updated' | 'draft_updated';
+  'apiUpdate' | 'stateSynchronized' | 'channel_settings' | 'webpage_updated' | 'draft_updated' | 
+  'dialog_notify_settings';
+
+type BroadcastEvents = {
+  'download_progress': any,
+  'user_update': any,
+  'user_auth': any,
+  'peer_changed': any,
+  'filter_delete': any,
+  'filter_update': any,
+  'message_edit': any,
+  'dialog_draft': any,
+  'messages_pending': any,
+  'history_append': any,
+  'history_update': any,
+  'dialogs_multiupdate': any,
+  'dialog_unread': any,
+  'dialog_flush': any,
+  'dialog_drop': any,
+  'dialog_migrate': any,
+  'dialog_top': any,
+  'history_reply_markup': any,
+  'history_multiappend': any,
+  'messages_read': any,
+  'history_delete': any,
+  'history_forbidden': any,
+  'history_reload': any,
+  'message_views': any,
+  'message_sent': any,
+  'history_request': any,
+  'messages_downloaded': any,
+  'contacts_update': any,
+  'avatar_update': any,
+  'stickers_installed': any,
+  'stickers_deleted': any,
+  'chat_full_update': any,
+  'peer_pinned_message': any,
+  'poll_update': any,
+  'dialogs_archived_unread': any,
+  'audio_play': any,
+  'audio_pause': any,
+  'chat_update': any,
+  'apiUpdate': any,
+  'stateSynchronized': any,
+  'channel_settings': any,
+  'webpage_updated': any,
+  'draft_updated': any,
+  'dialog_notify_settings': number,
+};
 
 export const $rootScope = {
-  $broadcast: (name: BroadcastKeys, detail?: any) => {
+  $broadcast: <T extends keyof BroadcastEvents>(name: T, detail?: BroadcastEvents[T]) => {
     if(name != 'user_update') {
       console.debug(dT(), 'Broadcasting ' + name + ' event, with args:', detail);
     }
@@ -170,7 +218,7 @@ export const $rootScope = {
     let myCustomEvent = new CustomEvent(name, {detail});
     document.dispatchEvent(myCustomEvent);
   },
-  $on: (name: BroadcastKeys, callback: (e: CustomEvent) => any) => {
+  $on: <T extends keyof BroadcastEvents>(name: T, callback: (e: Omit<CustomEvent, 'detail'> & {detail: BroadcastEvents[T]}) => any) => {
     // @ts-ignore
     document.addEventListener(name, callback);
   },

src/scss/partials/_chatlist.scss

@@ -100,6 +100,21 @@
     @include respond-to(handhelds) {
       padding-bottom: 0px;
     }
+
+    &.is-muted {
+      .user-title {
+        &:after {
+          content: $tgico-nosound;
+          color: #707579;
+          font-size: 1.125rem;
+          line-height: 27px;
+          vertical-align: middle;
+          margin-left: .125rem;
+          display: inline-block;
+          height: 29px;
+        }
+      }
+    }
   }
 
   li > .rp {
@@ -225,14 +240,14 @@
       margin-top: -1.5px;
     }
 
-    &.is-verified:after {
+    i.verified-icon {
       content: " ";
       background: url(assets/img/icon-verified.svg);
       display: inline-block;
       width: 20px;
       height: 20px;
       vertical-align: text-bottom;
-      margin-left: 2px;
+      margin-left: .125rem;
     }
   }
 

src/scss/partials/_fonts.scss

@@ -261,7 +261,7 @@
   content: "\e94b";
 }
 .tgico-nosound:before {
-  content: "\e94c";
+  content: $tgico-nosound;
 }
 .tgico-pause:before {
   content: $tgico-pause;

src/scss/partials/_ico.scss

@@ -22,3 +22,4 @@ $tgico-info2: "\e934";
 $tgico-keyboard: "\e935";
 $tgico-play: "\e953";
 $tgico-pause: "\e94d";
+$tgico-nosound: "\e94c";