Enabled back blob urls cache

Fix popup's closening on another's opening
Render webpage media in replies

src/components/appNavigationController.ts

@@ -137,15 +137,16 @@ export class AppNavigationController {
       const ret = this.findItemByType(type);
       if(ret) {
         this.manual = true;
-        if(ret.index !== (this.navigations.length - 1)) {
+        //if(ret.index !== (this.navigations.length - 1)) {
           this.navigations.splice(ret.index, 1);
           this.handleItem(ret.item);
           return;
-        }
+        //}
       }
     }
 
-    history.back();
+    // ! commented because 'popstate' event will be fired with delay
+    //history.back();
   }
 
   public pushItem(item: NavigationItem) {

src/components/chat/replyContainer.ts

@@ -29,7 +29,7 @@ export function wrapReplyDivAndCaption(options: {
     titleEl.innerHTML = title;
   }
 
-  const media = message && message.media;
+  let media = message && message.media;
   let setMedia = false;
   if(media && mediaEl) {
     subtitleEl.textContent = '';
@@ -37,6 +37,10 @@ export function wrapReplyDivAndCaption(options: {
 
     //console.log('wrap reply', media);
 
+    if(media.webpage) {
+      media = media.webpage;
+    }
+    
     if(media.photo || (media.document && ['video', 'sticker', 'gif'].indexOf(media.document.type) !== -1)) {
       /* const middlewareOriginal = appImManager.chat.bubbles.getMiddleware();
       const middleware = () => {

src/components/row.ts

@@ -9,7 +9,8 @@ import RadioField from "./radioField";
 import { ripple } from "./ripple";
 import { SliderSuperTab } from "./slider";
 import RadioForm from "./radioForm";
-import { LangPackKey, _i18n } from "../lib/langPack";
+import { i18n, LangPackKey } from "../lib/langPack";
+import { replaceContent } from "../helpers/dom";
 
 export default class Row {
   public container: HTMLElement;
@@ -42,7 +43,7 @@ export default class Row {
     if(options.subtitle) {
       this.subtitle.innerHTML = options.subtitle;
     } else if(options.subtitleLangKey) {
-      _i18n(this.subtitle, options.subtitleLangKey);
+      this.subtitle.append(i18n(options.subtitleLangKey));
     }
 
     let havePadding = false;
@@ -59,7 +60,7 @@ export default class Row {
 
         if(!options.noCheckboxSubtitle) {
           this.checkboxField.input.addEventListener('change', () => {
-            _i18n(this.subtitle, this.checkboxField.input.checked ? 'Checkbox.Enabled' : 'Checkbox.Disabled');
+            replaceContent(this.subtitle, i18n(this.checkboxField.input.checked ? 'Checkbox.Enabled' : 'Checkbox.Disabled'));
           });
         }
       }
@@ -82,7 +83,7 @@ export default class Row {
         if(options.title) {
           this.title.innerHTML = options.title;
         } else {
-          _i18n(this.title, options.titleLangKey);
+          this.title.append(i18n(options.titleLangKey));
         }
         c.append(this.title);
 

src/components/sidebarRight/tabs/groupPermissions.ts

@@ -4,7 +4,7 @@
  * https://github.com/morethanwords/tweb/blob/master/LICENSE
  */
 
-import { attachClickEvent } from "../../../helpers/dom";
+import { attachClickEvent, replaceContent } from "../../../helpers/dom";
 import findUpTag from "../../../helpers/dom/findUpTag";
 import ListenerSetter from "../../../helpers/listenerSetter";
 import ScrollableLoader from "../../../helpers/listLoader";
@@ -12,7 +12,7 @@ import { ChannelParticipant, Chat, ChatBannedRights, Update } from "../../../lay
 import appChatsManager, { ChatRights } from "../../../lib/appManagers/appChatsManager";
 import appDialogsManager from "../../../lib/appManagers/appDialogsManager";
 import appProfileManager from "../../../lib/appManagers/appProfileManager";
-import I18n, { i18n, LangPackKey } from "../../../lib/langPack";
+import I18n, { i18n, join, LangPackKey } from "../../../lib/langPack";
 import rootScope from "../../../lib/rootScope";
 import CheckboxField from "../../checkboxField";
 import PopupPickUser from "../../popups/pickUser";
@@ -26,7 +26,8 @@ export class ChatPermissions {
   public v: Array<{
     flags: ChatRights[],
     text: LangPackKey,
-    checkboxField?: CheckboxField
+    exceptionText: LangPackKey,
+    checkboxField?: CheckboxField,
   }>;
   private toggleWith: Partial<{[chatRight in ChatRights]: ChatRights[]}>;
 
@@ -37,14 +38,14 @@ export class ChatPermissions {
     participant?: ChannelParticipant.channelParticipantBanned
   }) {
     this.v = [
-      {flags: ['send_messages'], text: 'UserRestrictionsSend'},
+      {flags: ['send_messages'], text: 'UserRestrictionsSend', exceptionText: 'UserRestrictionsNoSend'},
-      {flags: ['send_media'], text: 'UserRestrictionsSendMedia'},
+      {flags: ['send_media'], text: 'UserRestrictionsSendMedia', exceptionText: 'UserRestrictionsNoSendMedia'},
-      {flags: ['send_stickers', 'send_gifs'], text: 'UserRestrictionsSendStickers'},
+      {flags: ['send_stickers', 'send_gifs'], text: 'UserRestrictionsSendStickers', exceptionText: 'UserRestrictionsNoSendStickers'},
-      {flags: ['send_polls'], text: 'UserRestrictionsSendPolls'},
+      {flags: ['send_polls'], text: 'UserRestrictionsSendPolls', exceptionText: 'UserRestrictionsNoSendPolls'},
-      {flags: ['embed_links'], text: 'UserRestrictionsEmbedLinks'},
+      {flags: ['embed_links'], text: 'UserRestrictionsEmbedLinks', exceptionText: 'UserRestrictionsNoEmbedLinks'},
-      {flags: ['invite_users'], text: 'UserRestrictionsInviteUsers'},
+      {flags: ['invite_users'], text: 'UserRestrictionsInviteUsers', exceptionText: 'UserRestrictionsNoInviteUsers'},
-      {flags: ['pin_messages'], text: 'UserRestrictionsPinMessages'},
+      {flags: ['pin_messages'], text: 'UserRestrictionsPinMessages', exceptionText: 'UserRestrictionsNoPinMessages'},
-      {flags: ['change_info'], text: 'UserRestrictionsChangeInfo'}
+      {flags: ['change_info'], text: 'UserRestrictionsChangeInfo', exceptionText: 'UserRestrictionsNoChangeInfo'}
     ];
 
     this.toggleWith = {
@@ -210,34 +211,30 @@ export default class AppGroupPermissionsTab extends SliderSuperTabEventable {
       const setSubtitle = (li: Element, participant: ChannelParticipant.channelParticipantBanned) => {
         const bannedRights = participant.banned_rights;//appChatsManager.combineParticipantBannedRights(this.chatId, participant.banned_rights);
         const defaultBannedRights = (appChatsManager.getChat(this.chatId) as Chat.channel).default_banned_rights;
-        const combinedRights = appChatsManager.combineParticipantBannedRights(this.chatId, bannedRights);
+        //const combinedRights = appChatsManager.combineParticipantBannedRights(this.chatId, bannedRights);
 
-        const cantWhat: string[] = [], canWhat: string[] = [];
+        const cantWhat: LangPackKey[] = []/* , canWhat: LangPackKey[] = [] */;
         chatPermissions.v.forEach(info => {
           const mainFlag = info.flags[0];
           // @ts-ignore
           if(bannedRights.pFlags[mainFlag] && !defaultBannedRights.pFlags[mainFlag]) {
-            cantWhat.push(info.text);
+            cantWhat.push(info.exceptionText);
           // @ts-ignore
-          } else if(!combinedRights.pFlags[mainFlag]) {
+          }/*  else if(!combinedRights.pFlags[mainFlag]) {
-            canWhat.push(info.text);
+            canWhat.push(info.exceptionText);
-          }
+          } */
         });
 
-        const el = li.querySelector('.user-last-message');
+        const el = li.querySelector('.user-last-message') as HTMLElement;
-        let str: string;
+
         if(cantWhat.length) {
-          str = 'Can\'t ' + cantWhat.join(cantWhat.length === 2 ? ' and ' : ', ');
+          el.innerHTML = '';
-        } else if(canWhat.length) {
+          el.append(...join(cantWhat.map(t => i18n(t)), false));
+        }/*  else if(canWhat.length) {
           str = 'Can ' + canWhat.join(canWhat.length === 2 ? ' and ' : ', ');
-        }
+        } */
   
-        //const user = appUsersManager.getUser(participant.user_id);
+        el.classList.toggle('hide', !cantWhat.length);
-        if(str) {
-          el.innerHTML = str;
-        }
-
-        el.classList.toggle('hide', !str);
       };
 
       const add = (participant: ChannelParticipant.channelParticipantBanned, append: boolean) => {
@@ -285,8 +282,7 @@ export default class AppGroupPermissionsTab extends SliderSuperTabEventable {
       });
 
       const setLength = () => {
-        addExceptionRow.subtitle.textContent = '';
+        replaceContent(addExceptionRow.subtitle, i18n(exceptionsCount ? 'Permissions.ExceptionsCount' : 'Permissions.NoExceptions', [exceptionsCount]));
-        addExceptionRow.subtitle.append(i18n(exceptionsCount ? 'Permissions.ExceptionsCount' : 'Permissions.NoExceptions', [exceptionsCount]));
       };
 
       let exceptionsCount = 0;

src/config/app.ts

@@ -13,7 +13,7 @@ const App = {
   id: 1025907,
   hash: '452b0359b988148995f22ff0f4229750',
   version: '0.4.0',
-  langPackVersion: '0.1.0',
+  langPackVersion: '0.1.1',
   langPack: 'macos',
   langPackCode: 'en',
   domains: [] as string[],

src/helpers/dom/renderImageFromUrl.ts

@@ -12,7 +12,7 @@ const set = (elem: HTMLElement | HTMLImageElement | SVGImageElement | HTMLVideoE
 };
 
 // проблема функции в том, что она не подходит для ссылок, пригодна только для blob'ов, потому что обычным ссылкам нужен 'load' каждый раз.
-export default function renderImageFromUrl(elem: HTMLElement | HTMLImageElement | SVGImageElement | HTMLVideoElement, url: string, callback?: (err?: Event) => void, useCache = false): boolean {
+export default function renderImageFromUrl(elem: HTMLElement | HTMLImageElement | SVGImageElement | HTMLVideoElement, url: string, callback?: (err?: Event) => void, useCache = true): boolean {
   if(((loadedURLs[url]/*  && false */) && useCache) || elem instanceof HTMLVideoElement) {
     if(elem) {
       set(elem, url);

src/lang.ts

@@ -314,6 +314,15 @@ const lang = {
   "UserRestrictionsChangeInfo": "Change Chat Info",
   "UserRestrictionsPinMessages": "Pin Messages",
   "UserRestrictionsInviteUsers": "Add Users",
+  //"UserRestrictionsNoRead": "can't read",
+  "UserRestrictionsNoSend": "can't send messages",
+  "UserRestrictionsNoSendMedia": "no media",
+  "UserRestrictionsNoSendPolls": "no polls",
+  "UserRestrictionsNoSendStickers": "no stickers & GIFs",
+  "UserRestrictionsNoEmbedLinks": "no embed links",
+  "UserRestrictionsNoChangeInfo": "can't change Info",
+  "UserRestrictionsNoPinMessages": "no pins",
+  "UserRestrictionsNoInviteUsers": "can't add users",
   "UserRestrictionsBlock": "Ban and remove from group",
   "ChannelPublic": "Public Channel",
   "MegaPublic": "Public Group",

src/lib/appManagers/appProfileManager.ts

@@ -535,7 +535,7 @@ export class AppProfileManager {
         renderImageFromUrl(img, saved[size] as string, () => {
           callback();
           resolve();
-        }, false);
+        }/* , false */);
       });
     });
 

src/scss/partials/_chat.scss

@@ -1131,7 +1131,7 @@ $chat-helper-size: 39px;
 	}
 
 	.bubbles.is-chat-input-hidden & {
-		margin-bottom: 1.25rem;
+		margin-bottom: 1rem; // .25rem is eaten by the last bubble's margin-bottom
 	}
 
 	&:not(.is-channel), &.is-chat {

src/scss/partials/_chatlist.scss

@@ -135,10 +135,9 @@ ul.chatlist {
         &:after {
           flex: 0 0 auto;
           content: $tgico-nosound;
-          color: var(--secondary-text-color);
+          color: var(--chatlist-pinned-color);
           font-size: 1.125rem;
           margin-left: .125rem;
-          opacity: .7;
         }
       }
 

src/scss/partials/_input.scss

@@ -275,7 +275,7 @@ input:focus, button:focus {
 
     @include hover() {
       &:not(:focus) {
-        border-color: var(--color-gray) !important;
+        border-color: var(--secondary-color) !important;
         //border-color: #000;
       }
     }
@@ -289,6 +289,10 @@ input:focus, button:focus {
         color: var(--primary-color);
         opacity: 1;
       }
+
+      & ~ .btn-icon {
+        @include hover-background-effect(primary);
+      }
     }
 
     /* &:empty:before {

src/scss/style.scss

@@ -41,7 +41,6 @@ $chat-padding-handhelds: .5rem;
   --z-below: -1;
   --hover-alpha: #{$hover-alpha};
 
-  --color-gray: #c4c9cc;
   --pm-transition: .2s ease-in-out;
   --layer-transition: .2s ease-in-out;
   --slide-header-transition: .4s ease-in-out;