Merge branch 'stickersets'

Conflicts:
	app/less/app.less

app/js/app.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/background.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/controllers.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE
@@ -576,13 +576,13 @@ angular.module('myApp.controllers', ['myApp.i18n'])
         AppUsersManager.resolveUsername($routeParams.p.substr(1)).then(function (userID) {
           $scope.curDialog = {
             peer: AppUsersManager.getUserString(userID),
-            messageID: $routeParams.m || false
+            messageID: parseInt($routeParams.m) || false
           };
         });
       } else {
         $scope.curDialog = {
           peer: $routeParams.p || false,
-          messageID: $routeParams.m || false
+          messageID: parseInt($routeParams.m) || false
         };
       }
     }
@@ -1109,13 +1109,13 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     }
 
     function messageFocusHistory () {
-      var history = historiesQueueFind();
+      var history = historiesQueueFind(peerID);
 
       if (history &&
           history.ids.indexOf($scope.curDialog.messageID) != -1) {
         $scope.historyUnread = {};
         $scope.$broadcast('messages_focus', $scope.curDialog.messageID);
-        $scope.$broadcast('ui_history_change_scroll');
+        $scope.$broadcast('ui_history_change_scroll', true);
       } else {
         loadHistory();
       }
@@ -1461,6 +1461,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
 
     function toggleMedia (mediaType) {
       $scope.historyFilter.mediaType = mediaType || false;
+      $scope.curDialog.messageID = false;
       peerHistory.messages = [];
       peerHistory.ids = [];
       $scope.state.empty = true;
@@ -3840,3 +3841,21 @@ angular.module('myApp.controllers', ['myApp.i18n'])
     };
 
   })
+
+  .controller('StickersetModalController', function ($scope, MtpApiManager, AppStickersManager) {
+    $scope.slice = {limit: 20, limitDelta: 20};
+
+    AppStickersManager.getStickerset($scope.inputStickerset).then(function (result) {
+      $scope.$broadcast('ui_height');
+      $scope.stickersetLoaded = true;
+      $scope.stickerset = result.set;
+      $scope.stickersetInstalled = result.installed;
+      $scope.documents = result.documents;
+    });
+
+    $scope.toggleInstalled = function (installed) {
+      AppStickersManager.installStickerset($scope.stickerset, !installed).then(function () {
+        $scope.stickersetInstalled = installed;
+      })
+    }
+  })

app/js/directives.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE
@@ -925,6 +925,33 @@ angular.module('myApp.directives', ['myApp.filters'])
 
   })
 
+  .directive('myStickersList', function($window, $timeout) {
+
+    return {
+      link: link
+    };
+
+    function link ($scope, element, attrs) {
+      var stickersWrap = $('.stickerset_wrap', element)[0];
+
+      onContentLoaded(function () {
+        $(stickersWrap).nanoScroller({preventPageScrolling: true, tabIndex: -1, iOSNativeScrolling: true});
+        updateSizes();
+      });
+
+      function updateSizes () {
+        $(element).css({
+          height: Math.min(500, $($window).height()
+                    - (Config.Mobile ? 46 + 18 : 200))
+        });
+        $(stickersWrap).nanoScroller();
+      }
+
+      $($window).on('resize', updateSizes);
+    };
+
+  })
+
   .directive('myHistory', function ($window, $timeout, $rootScope, $transition) {
 
     return {
@@ -1023,9 +1050,10 @@ angular.module('myApp.directives', ['myApp.filters'])
         });
       });
 
-      function changeScroll (noFocus) {
+      function changeScroll (noFocus, animated) {
         var unreadSplit, focusMessage;
 
+        var newScrollTop = false;
         // console.trace('change scroll');
         if (!noFocus &&
             (focusMessage = $('.im_message_focus:visible', scrollableWrap)[0])) {
@@ -1033,24 +1061,34 @@ angular.module('myApp.directives', ['myApp.filters'])
               st = scrollableWrap.scrollTop,
               ot = focusMessage.offsetTop,
               h = focusMessage.clientHeight;
-          if (!st || st + ch < ot || st > ot + h) {
+          if (!st || st + ch < ot || st > ot + h || animated) {
-            scrollableWrap.scrollTop = Math.max(0, ot - Math.floor(ch / 2) + 26);
+            newScrollTop = Math.max(0, ot - Math.floor(ch / 2) + 26);
           }
           atBottom = false;
         } else if (unreadSplit = $('.im_message_unread_split:visible', scrollableWrap)[0]) {
           // console.log('change scroll unread', unreadSplit.offsetTop);
-          scrollableWrap.scrollTop = Math.max(0, unreadSplit.offsetTop - 52);
+          newScrollTop = Math.max(0, unreadSplit.offsetTop - 52);
           atBottom = false;
         } else {
           // console.log('change scroll bottom');
-          scrollableWrap.scrollTop = scrollableWrap.scrollHeight;
+          newScrollTop = scrollableWrap.scrollHeight;
           atBottom = true;
         }
+        if (newScrollTop !== false) {
+          var afterScroll = function () {
             updateScroller();
             $timeout(function () {
               $(scrollableWrap).trigger('scroll');
               scrollTopInitial = scrollableWrap.scrollTop;
             });
+          }
+          if (animated) {
+            $(scrollableWrap).animate({scrollTop: newScrollTop}, 200, afterScroll);
+          } else {
+            scrollableWrap.scrollTop = newScrollTop;
+            afterScroll();
+          }
+        }
       };
 
       $scope.$on('ui_history_change', function () {
@@ -1068,8 +1106,10 @@ angular.module('myApp.directives', ['myApp.filters'])
         });
       });
 
-      $scope.$on('ui_history_change_scroll', function () {
+      $scope.$on('ui_history_change_scroll', function (e, animated) {
-        onContentLoaded(changeScroll)
+        onContentLoaded(function () {
+          changeScroll(false, animated);
+        })
       });
 
       $scope.$on('ui_history_focus', function () {
@@ -1249,7 +1289,7 @@ angular.module('myApp.directives', ['myApp.filters'])
 
   })
 
-  .directive('mySendForm', function ($timeout, $compile, $modalStack, $http, $interpolate, Storage, AppStickersManager, ErrorService) {
+  .directive('mySendForm', function ($timeout, $compile, $modalStack, $http, $interpolate, Storage, AppStickersManager, AppDocsManager, ErrorService) {
 
     return {
       link: link,
@@ -1270,14 +1310,28 @@ angular.module('myApp.directives', ['myApp.filters'])
       var dragStarted, dragTimeout;
       var submitBtn = $('.im_submit', element)[0];
 
+      var stickerImageCompiled = $compile('<a class="composer_sticker_btn" data-sticker="{{::document.id}}" my-load-sticker document="document" thumb="true" img-class="composer_sticker_image"></a>');
+      var cachedStickerImages = {};
+
       var emojiTooltip = new EmojiTooltip(emojiButton, {
         getStickers: function (callback) {
-          AppStickersManager.getStickers().then(function () {
+          AppStickersManager.getStickers().then(callback);
-            AppStickersManager.getStickersImages().then(function (stickersData) {
+        },
-              callback(stickersData);
+        getStickerImage: function (element, docID) {
-            });
+          if (cachedStickerImages[docID]) {
+            element.replaceWith(cachedStickerImages[docID]);
+            return;
+          }
+          var scope = $scope.$new(true);
+          scope.document = AppDocsManager.getDoc(docID);
+          stickerImageCompiled(scope, function (clonedElement) {
+            cachedStickerImages[docID] = clonedElement;
+            element.replaceWith(clonedElement);
           });
         },
+        onStickersetSelected: function (stickerset) {
+          AppStickersManager.openStickersetLink(stickerset);
+        },
         onEmojiSelected: function (code) {
           $scope.$apply(function () {
             composer.onEmojiSelected(code);
@@ -1817,7 +1871,9 @@ angular.module('myApp.directives', ['myApp.filters'])
     };
 
     function link ($scope, element, attrs) {
-      var imgElement = $('<img />').appendTo(element);
+      var imgElement = $('<img />')
+                          .appendTo(element)
+                          .addClass(attrs.imgClass);
 
       var setSrc = function (blob) {
         if (WebpManager.isWebpSupported()) {
@@ -1863,12 +1919,20 @@ angular.module('myApp.directives', ['myApp.filters'])
         imgElement.attr('src', emptySrc);
       }
 
+      if (attrs.thumb) {
+        MtpApiFileManager.downloadSmallFile(smallLocation).then(function (blob) {
+          setSrc(blob);
+        }, function (e) {
+          console.log('Download sticker failed', e, fullLocation);
+        });
+      } else {
         MtpApiFileManager.downloadFile($scope.document.dc_id, fullLocation, $scope.document.size).then(function (blob) {
           setSrc(blob);
         }, function (e) {
           console.log('Download sticker failed', e, fullLocation);
         });
       }
+    }
   })
 
   .directive('myLoadDocument', function(MtpApiFileManager, AppDocsManager, FileManager) {

app/js/directives_mobile.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/filters.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/lib/bin_utils.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/lib/crypto_worker.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/lib/mtproto.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/lib/mtproto_wrapper.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/lib/ng_utils.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/lib/schema.tl.txt

@@ -403,7 +403,7 @@ updateUserPhone#12b9417b user_id:int phone:string = Update;
 
 documentAttributeImageSize#6c37c15c w:int h:int = DocumentAttribute;
 documentAttributeAnimated#11b58939 = DocumentAttribute;
-documentAttributeSticker#994c9882 alt:string = DocumentAttribute;
+documentAttributeSticker#3a556302 alt:string stickerset:InputStickerSet = DocumentAttribute;
 documentAttributeVideo#5910cccb duration:int w:int h:int = DocumentAttribute;
 documentAttributeAudio#51448e5 duration:int = DocumentAttribute;
 documentAttributeFilename#15590068 file_name:string = DocumentAttribute;
@@ -414,7 +414,7 @@ messages.stickers#8a8ecd32 hash:string stickers:Vector<Document> = messages.Stic
 stickerPack#12b299d4 emoticon:string documents:Vector<long> = StickerPack;
 
 messages.allStickersNotModified#e86602c3 = messages.AllStickers;
-messages.allStickers#dcef3102 hash:string packs:Vector<StickerPack> documents:Vector<Document> = messages.AllStickers;
+messages.allStickers#5ce352ec hash:string packs:Vector<StickerPack> sets:Vector<StickerSet> documents:Vector<Document> = messages.AllStickers;
 
 disabledFeature#ae636f24 feature:string description:string = DisabledFeature;
 
@@ -465,6 +465,14 @@ messageActionChatJoinedByLink#f89cf5e8 inviter_id:int = MessageAction;
 
 updateReadMessagesContents#68c13933 messages:Vector<int> pts:int pts_count:int = Update;
 
+inputStickerSetEmpty#ffb62b95 = InputStickerSet;
+inputStickerSetID#9de7a269 id:long access_hash:long = InputStickerSet;
+inputStickerSetShortName#861cc8a0 short_name:string = InputStickerSet;
+
+stickerSet#a7a43b17 id:long access_hash:long title:string short_name:string = StickerSet;
+
+messages.stickerSet#b60a24a6 set:StickerSet packs:Vector<StickerPack> documents:Vector<Document> = messages.StickerSet;
+
 ---functions---
 
 invokeAfterMsg#cb9f372d {X:Type} msg_id:long query:!X = X;
@@ -622,3 +630,6 @@ invokeWithoutUpdates#bf9459b7 {X:Type} query:!X = X;
 messages.exportChatInvite#7d885289 chat_id:int = ExportedChatInvite;
 messages.checkChatInvite#3eadb1bb hash:string = ChatInvite;
 messages.importChatInvite#6c50051c hash:string = Updates;
+messages.getStickerSet#2619a90e stickerset:InputStickerSet = messages.StickerSet;
+messages.installStickerSet#efbbfae9 stickerset:InputStickerSet = Bool;
+messages.uninstallStickerSet#f96e55de stickerset:InputStickerSet = Bool;

app/js/lib/tl_utils.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE

app/js/lib/utils.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE
@@ -492,7 +492,11 @@ function versionCompare (ver1, ver2) {
     var mode = decoder.WEBP_CSP_MODE;
     buffer.J = 4;
 
+    try {
       status = decoder.WebPDecode(data, data.length, config);
+    } catch (e) {
+      status = e;
+    }
 
     ok = (status == 0);
     if (!ok) {

app/js/locales/en-us.json

@@ -86,6 +86,11 @@
 	"sessions_modal_terminate_all": "Terminate all other sessions",
 	"sessions_modal_active_sessions": "Active sessions",
 
+	"stickerset_modal_title_loading": "Stickerset",
+	"stickerset_modal_install": "Add stickers",
+	"stickerset_modal_uninstall": "Remove stickers",
+	"stickerset_modal_loading": "Loading{dots}",
+
 	"page_title_pluralize_notifications": "{'0': 'No notifications', 'one': '1 notification', 'other': '{} notifications'}",
 
 	"profile_edit_modal_title": "Edit profile",

app/js/message_composer.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE
@@ -15,7 +15,6 @@
   var emojis = {};
   var shortcuts = {};
   var spritesheetPositions = {};
-  var stickers = {};
   var index = false;
 
   var popular = 'joy,kissing_heart,heart,heart_eyes,blush,grin,+1,relaxed,pensive,smile,sob,kiss,unamused,flushed,stuck_out_tongue_winking_eye,see_no_evil,wink,smiley,cry,stuck_out_tongue_closed_eyes,scream,rage,smirk,disappointed,sweat_smile,kissing_closed_eyes,speak_no_evil,relieved,grinning,yum,laughing,ok_hand,neutral_face,confused'.split(',');
@@ -122,7 +121,6 @@
     emojis: emojis,
     shortcuts: shortcuts,
     spritesheetPositions: spritesheetPositions,
-    stickers: stickers,
     getPopularEmoji: getPopularEmoji,
     pushPopularEmoji: pushPopularEmoji,
     indexEmojis: indexEmojis,
@@ -140,6 +138,8 @@ function EmojiTooltip (btnEl, options) {
   this.onEmojiSelected = options.onEmojiSelected;
   this.onStickerSelected = options.onStickerSelected;
   this.getStickers = options.getStickers;
+  this.getStickerImage = options.getStickerImage;
+  this.onStickersetSelected = options.onStickersetSelected;
 
   if (!Config.Navigator.touch) {
     $(this.btnEl).on('mouseenter mouseleave', function (e) {
@@ -260,7 +260,7 @@ EmojiTooltip.prototype.createTooltip = function () {
 
   this.contentEl.on('mousedown', function (e) {
     e = e.originalEvent || e;
-    var target = $(e.target), code, sticker;
+    var target = $(e.target), code, sticker, stickerset;
     if (target[0].tagName != 'A') {
       target = $(target[0].parentNode);
     }
@@ -278,6 +278,12 @@ EmojiTooltip.prototype.createTooltip = function () {
         self.hide();
       }
     }
+    if (stickerset = target.attr('data-stickerset')) {
+      if (self.onStickersetSelected) {
+        self.onStickersetSelected(stickerset);
+      }
+      self.hide();
+    }
     return cancelEvent(e);
   });
 
@@ -300,7 +306,7 @@ EmojiTooltip.prototype.createTooltip = function () {
 
 
 EmojiTooltip.prototype.selectTab = function (tab) {
-  if (this.tab === tab) {
+  if (this.tab === tab && tab != 6) {
     return false;
   }
   $('.active', this.tabsEl).removeClass('active');
@@ -310,7 +316,7 @@ EmojiTooltip.prototype.selectTab = function (tab) {
   this.updateTabContents();
 };
 
-EmojiTooltip.prototype.updateTabContents = function (tab) {
+EmojiTooltip.prototype.updateTabContents = function () {
   var html = [];
   var self = this;
   var iconSize = Config.Mobile ? 26 : 20;
@@ -327,14 +333,34 @@ EmojiTooltip.prototype.updateTabContents = function (tab) {
   }
 
   if (this.tab == 6) { // Stickers
-    var renderStickers = function (stickers) {
+    var renderStickers = function (stickersets) {
-      var sticker, i;
+      var set, docID, i, j, len1, len2;
-      var count = stickers.length;
+      for (i = 0, len1 = stickersets.length; i < len1; i++) {
-      for (i = 0; i < count; i++) {
+        set = stickersets[i];
-        sticker = stickers[i];
+        if (!set.docIDs.length) {
-        html.push('<a class="composer_sticker_btn" data-sticker="' + sticker.id + '"><img class="composer_sticker_image" src="' + encodeEntities(sticker.src) + '" /></a>');
+          continue;
+        }
+        html.push('<div class="composer_stickerset_wrap clearfix">');
+        if (set.id && set.title) {
+          html.push(
+            '<a class="composer_stickerset_title" data-stickerset="',
+            encodeEntities(set.short_name),
+            '">',
+            encodeEntities(set.title),
+            '</a>'
+          );
+        }
+        for (j = 0, len2 = set.docIDs.length; j < len2; j++) {
+          docID = set.docIDs[j];
+          html.push('<a class="composer_sticker_btn" data-sticker="' + docID + '"></a>');
+        }
+        html.push('</div>');
       }
       renderContent();
+
+      self.contentEl.find('.composer_sticker_btn').each(function (k, element) {
+        self.getStickerImage($(element), element.getAttribute('data-sticker'));
+      });
     };
     this.getStickers(renderStickers);
   }
@@ -383,6 +409,7 @@ EmojiTooltip.prototype.updatePosition = function () {
 
 EmojiTooltip.prototype.show = function () {
   this.updatePosition();
+  this.updateTabContents();
   this.tooltipEl.addClass('composer_emoji_tooltip_shown');
   this.btnEl.addClass('composer_emoji_insert_btn_on');
   delete this.showTimeout;

app/js/services.js

@@ -1,5 +1,5 @@
 /*!
- * Webogram v0.4.5 - messaging web application for MTProto
+ * Webogram v0.4.6 - messaging web application for MTProto
  * https://github.com/zhukov/webogram
  * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
  * https://github.com/zhukov/webogram/blob/master/LICENSE
@@ -2284,7 +2284,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
         case 'messageMediaDocument':
           if (message.media.document.sticker) {
             notificationMessage = _('conversation_media_sticker');
-            var stickerEmoji = EmojiHelper.stickers[message.media.document.id];
+            var stickerEmoji = message.media.document.stickerEmojiRaw;
             if (stickerEmoji !== undefined) {
               notificationMessage = RichTextProcessor.wrapPlainText(stickerEmoji) + ' (' + notificationMessage + ')';
             }
@@ -3343,10 +3343,14 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
           break;
         case 'documentAttributeSticker':
           apiDoc.sticker = 1;
-          var stickerEmoji = attribute.alt || EmojiHelper.stickers[apiDoc.id];
+          if (attribute.alt !== undefined) {
-          if (stickerEmoji !== undefined) {
             apiDoc.sticker = 2;
-            apiDoc.stickerEmoji = RichTextProcessor.wrapRichText(stickerEmoji, {noLinks: true, noLinebreaks: true});
+            apiDoc.stickerEmojiRaw = attribute.alt;
+            apiDoc.stickerEmoji = RichTextProcessor.wrapRichText(apiDoc.stickerEmojiRaw, {noLinks: true, noLinebreaks: true});
+          }
+          if (attribute.stickerset &&
+              attribute.stickerset._ == 'inputStickerSetID') {
+            apiDoc.stickerSetID = attribute.stickerset.id;
           }
           break;
         case 'documentAttributeImageSize':
@@ -3378,8 +3382,8 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
       height = Math.min(windowH - 100, 260);
     }
     else if (isSticker) {
-      width = Math.min(windowW - 80, Config.Mobile ? 210 : 260);
+      width = Math.min(windowW - 80, Config.Mobile ? 128 : 192);
-      height = Math.min(windowH - 100, Config.Mobile ? 210 : 260);
+      height = Math.min(windowH - 100, Config.Mobile ? 128 : 192);
     } else {
       width = height = 100;
     }
@@ -3640,17 +3644,21 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
   }
 })
 
-.service('AppStickersManager', function ($q, FileManager, MtpApiManager, MtpApiFileManager, AppDocsManager, Storage) {
+.service('AppStickersManager', function ($q, $rootScope, $modal, _, FileManager, MtpApiManager, MtpApiFileManager, AppDocsManager, Storage) {
 
-  var stickersToEmoji = {};
   var currentStickers = [];
+  var currentStickersets = [];
+  var installedStickersets = {};
+  var stickersetItems = {};
   var applied = false;
   var started = false;
 
   return {
     start: start,
-    getStickerEmoji: getStickerEmoji,
+    openStickersetLink: openStickersetLink,
+    installStickerset: installStickerset,
     getStickers: getStickers,
+    getStickerset: getStickerset,
     getStickersImages: getStickersImages
   };
 
@@ -3666,50 +3674,53 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     getStickers().then(getStickersImages);
   }
 
-  function getStickerEmoji(docID) {
-    return EmojiHelper.stickers[docID] || false;
-  }
-
   function processRawStickers(stickers) {
     if (applied !== stickers.hash) {
       applied = stickers.hash;
-      var i, j, len1, len2;
+      var i, j, len1, len2, doc, setID, set;
 
       len1 = stickers.documents.length;
-      for (i = 0; i < len1; i++) {
-        AppDocsManager.saveDoc(stickers.documents[i]);
-      }
-
-      var pack, emoticon, docID;
-      var doneDocIDs = {};
       currentStickers = [];
-      len1 = stickers.packs.length;
+      stickersetItems = {};
       for (i = 0; i < len1; i++) {
-        pack = stickers.packs[i];
+        doc = stickers.documents[i];
-        emoticon = pack.emoticon;
+        AppDocsManager.saveDoc(doc);
-        len2 = pack.documents.length;
+        currentStickers.push(doc.id);
-        for (j = 0; j < len2; j++) {
+        setID = doc.stickerSetID || 0;
-          docID = pack.documents[j];
+        if (stickersetItems[setID] === undefined) {
-          if (EmojiHelper.stickers[docID] === undefined) {
+          stickersetItems[setID] = [];
-            EmojiHelper.stickers[docID] = emoticon;
         }
-          if (doneDocIDs[docID] === undefined) {
+        stickersetItems[setID].push(doc.id);
-            doneDocIDs[docID] = true;
-            currentStickers.push(docID);
       }
+
+      currentStickersets = [];
+      if (stickersetItems[0] !== undefined) {
+        currentStickersets.push({
+          _: 'stickerSetDefault',
+          id: 0,
+          docIDs: stickersetItems[0]
+        });
       }
+      len1 = stickers.sets.length;
+      for (i = 0; i < len1; i++) {
+        set = stickers.sets[i];
+        installedStickersets[set.id] = true;
+        set.docIDs = stickersetItems[set.id] || [];
+        currentStickersets.push(set);
       }
+
     }
-    return currentStickers;
+
+    return currentStickersets;
   }
 
-  function getStickers () {
+  function getStickers (force) {
     return Storage.get('all_stickers').then(function (stickers) {
       var layer = Config.Schema.API.layer;
       if (stickers.layer != layer) {
         stickers = false;
       }
-      if (stickers && stickers.date > tsNow(true)) {
+      if (stickers && stickers.date > tsNow(true) && !force) {
         return processRawStickers(stickers);
       }
       return MtpApiManager.invokeApi('messages.getAllStickers', {
@@ -3728,29 +3739,79 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
     })
   }
 
-  function getStickersImages () {
+  function downloadStickerThumb (docID) {
-    var promises = [];
-    angular.forEach(currentStickers, function (docID) {
     var doc = AppDocsManager.getDoc(docID);
-      var promise = MtpApiFileManager.downloadSmallFile(doc.thumb.location).then(function (blob) {
+    return MtpApiFileManager.downloadSmallFile(doc.thumb.location).then(function (blob) {
       if (WebpManager.isWebpSupported()) {
         return {
-            id: docID,
+          id: doc.id,
           src: FileManager.getUrl(blob, 'image/webp')
         };
       }
 
       return FileManager.getByteArray(blob).then(function (bytes) {
         return {
-            id: docID,
+          id: doc.id,
           src: WebpManager.getPngUrlFromData(bytes)
         };
       });
     });
-      promises.push(promise);
+  }
+
+  function getStickersImages () {
+    var promises = [];
+    angular.forEach(currentStickers, function (docID) {
+      promises.push(downloadStickerThumb (docID));
     });
     return $q.all(promises);
   }
+
+  function getStickerset (inputStickerset) {
+    return MtpApiManager.invokeApi('messages.getStickerSet', {
+      stickerset: inputStickerset
+    }).then(function (result) {
+      for (var i = 0; i < result.documents.length; i++) {
+        AppDocsManager.saveDoc(result.documents[i]);
+      }
+      result.installed = installedStickersets[result.set.id] !== undefined;
+      return result;
+    });
+  }
+
+  function installStickerset (set, uninstall) {
+    var method = uninstall
+      ? 'messages.uninstallStickerSet'
+      : 'messages.installStickerSet';
+    var inputStickerset = {
+      _: 'inputStickerSetID',
+      id: set.id,
+      access_hash: set.access_hash
+    };
+    return MtpApiManager.invokeApi(method, {
+      stickerset: inputStickerset
+    }).then(function (result) {
+      if (uninstall) {
+        delete installedStickersets[set.id];
+      } else {
+        installedStickersets[set.id] = true;
+      }
+      getStickers(true);
+    });
+  }
+
+  function openStickersetLink (shortName) {
+    var scope = $rootScope.$new(true);
+    scope.inputStickerset = {
+      _: 'inputStickerSetShortName',
+      short_name: shortName
+    };
+    var modal = $modal.open({
+      templateUrl: templateUrl('stickerset_modal'),
+      controller: 'StickersetModalController',
+      scope: scope,
+      windowClass: 'stickerset_modal_window mobile_modal'
+    });
+  }
 })
 
 .service('ApiUpdatesManager', function ($rootScope, MtpNetworkerFactory, AppUsersManager, AppChatsManager, AppPeersManager, MtpApiManager) {
@@ -4278,6 +4339,9 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
                   case 'joinchat':
                     url = 'tg://join?invite=' + path[1];
                     break;
+                  case 'addstickers':
+                    url = 'tg://addstickers?set=' + path[1];
+                    break;
                   default:
                     url = 'tg://resolve?domain=' + path[0];
                 }
@@ -5361,7 +5425,7 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
 })
 
 
-.service('LocationParamsService', function ($rootScope, $routeParams, AppUsersManager, AppMessagesManager) {
+.service('LocationParamsService', function ($rootScope, $routeParams, AppUsersManager, AppMessagesManager, AppStickersManager) {
 
   var tgAddrRegEx = /^(web\+)?tg:(\/\/)?(.+)/;
 
@@ -5395,22 +5459,29 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
       return true;
     }
 
+    if (matches = url.match(/^addstickers\?set=(.+)$/)) {
+      AppStickersManager.openStickersetLink(matches[1]);
+      return true;
+    }
+
     return false;
   }
 
-  var started = !('registerProtocolHandler' in navigator);
+  var started = false;
   function start () {
     if (started) {
       return;
     }
     started = true;
+
+    if ('registerProtocolHandler' in navigator) {
       try {
         navigator.registerProtocolHandler('tg', '#im?tgaddr=%s', 'Telegram Web');
       } catch (e) {}
       try {
         navigator.registerProtocolHandler('web+tg', '#im?tgaddr=%s', 'Telegram Web');
       } catch (e) {}
-
+    }
 
     $(document).on('click', function (event) {
       var target = event.target;

app/less/app.less

@@ -2474,6 +2474,20 @@ a.composer_emoji_btn {
   vertical-align: top;
 }
 
+.composer_stickerset_title {
+  display: block;
+  // clear: both;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: bold;
+  font-size: 13px;
+  color: #444;
+  margin: 10px 0 3px;
+}
+.composer_stickerset_title:hover {
+  color: #444;
+}
 .composer_sticker_btn {
   width: 78px;
   height: 78px;
@@ -2490,6 +2504,7 @@ a.composer_emoji_btn {
 .composer_sticker_image {
   max-width: 72px;
   max-height: 72px;
+  vertical-align: top;
 }
 
 .composer_rich_textarea {
@@ -2917,6 +2932,50 @@ a.contacts_modal_contact:hover .md_modal_list_peer_description,
   margin: 15px 0 20px 24px;
 }
 
+
+.stickerset_modal_window .modal-dialog {
+  max-width: 474px;
+}
+.stickerset_modal_stickers_list {
+  padding: 25px;
+}
+.stickerset_modal_sticker_wrap {
+  list-style: none;
+  margin: 0 10px 10px 0;
+  padding: 0;
+  position: relative;
+  display: block;
+  width: 96px;
+  height: 96px;
+  float: left;
+}
+.stickerset_modal_sticker {
+  width: 96px;
+  height: 96px;
+}
+.stickerset_modal_sticker img {
+  width: 96px;
+  height: 96px;
+}
+.stickerset_modal_sticker_alt {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.stickerset_actions {
+  padding: 10px 20px;
+  height: 50px;
+  text-align: center;
+}
+.stickerset_modal_loading {
+  text-align: center;
+  color: #999;
+  font-size: 16px;
+  line-height: 18px;
+  padding: 1px 50px;
+  margin: 0;
+}
+
 .modal-dialog {
   .md_simple_modal_window &,
   .confirm_modal_window &,

app/less/desktop.less

@@ -646,6 +646,7 @@ a.footer_link.active:active {
   .im_history_col .nano > &,
   .contacts_modal_col .nano > &,
   .sessions_modal_col .nano > &,
+  .stickerset_modal_col .nano > &,
   .im_dialogs_modal_col .nano > & {
     background : rgba(216,223,225,0.45); /*45% d8dfe5*/
     width      : 9px;
@@ -661,7 +662,8 @@ a.footer_link.active:active {
     right: 4px;
   }
 
-  .sessions_modal_col .nano > & {
+  .sessions_modal_col .nano > &,
+  .stickerset_modal_col .nano > & {
     top: 4px;
     bottom: 4px;
     width: 5px;
@@ -681,6 +683,7 @@ a.footer_link.active:active {
   .im_history_col .nano > &,
   .contacts_modal_col .nano > &,
   .sessions_modal_col .nano > &,
+  .stickerset_modal_col .nano > &,
   .im_dialogs_modal_col .nano > & {
     & > .nano-slider {
       background : rgba(137,160,179,0.50); /*50% 89a0b3*/

app/less/mobile.less

@@ -1675,3 +1675,13 @@ a.media_modal_date:hover {
     margin: 13px 17px;
   }
 }
+
+
+.stickerset_modal_stickers_list {
+  padding: 10px;
+}
+.stickerset_modal_sticker_wrap,
+.stickerset_modal_sticker_wrap img {
+  width: 64px;
+  height: 64px;
+}

app/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Telegram",
   "description": "Telegram Web App.\nMore info & source code here: https://github.com/zhukov/webogram",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "short_name": "Telegram",
   "manifest_version": 2,
   "app": {

app/manifest.webapp

@@ -1,7 +1,7 @@
 {
   "name": "Telegram",
   "description": "Telegram Web App.\nMore info & source code here: https://github.com/zhukov/webogram",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "type": "privileged",
   "launch_path": "/index.html",
   "developer": {

app/partials/desktop/changelog_modal.html

@@ -31,6 +31,17 @@
 
     <div class="md_modal_sections">
 
+      <div class="md_modal_versioned_section_wrap" ng-if="canShowVersion('0.4.6')">
+        <div class="md_modal_section_version">0.4.6</div>
+        <div class="md_modal_section_description changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Install and share custom sticker sets like this one: <a href="tg://addstickers?set=Animals">telegram.me/addstickers/Animals</a></li>
+            <li>If you're an artist, create custom sticker sets using our <a href="tg://resolve?domain=stickers">@Stickers</a> bot.</li>
+            <li>Check out <a href="https://telegram.org/blog/stickers-revolution" target="_blank">Telegram Blog</a> for more info</li>
+          </ul>
+        </div>
+      </div>
+
       <div class="md_modal_versioned_section_wrap" ng-if="canShowVersion('0.4.5')">
         <div class="md_modal_section_version">0.4.5</div>
         <div class="md_modal_section_description changelog_version_changes">

app/partials/desktop/stickerset_modal.html

@@ -0,0 +1,49 @@
+<div class="stickerset_modal_wrap md_modal_wrap" my-modal-position>
+
+  <div class="md_modal_head md_modal_head_simple">
+    <div class="md_modal_title_wrap">
+      <div class="md_modal_actions_wrap clearfix">
+        <a class="md_modal_action md_modal_action_close" ng-click="$dismiss()" my-i18n="modal_close"></a>
+      </div>
+    </div>
+    <div class="md_modal_title" ng-switch="!stickersetLoaded">
+      <span ng-switch-when="true" my-i18n="stickerset_modal_title_loading"></span>
+      <span ng-switch-default ng-bind="stickerset.title"></span>
+    </div>
+  </div>
+
+  <div class="md_modal_body">
+
+    <div my-stickers-list class="stickerset_modal_col">
+
+      <div class="stickerset_wrap nano" my-infinite-scroller>
+        <div class="stickerset_scrollable_wrap nano-content" ng-switch="!stickersetLoaded">
+
+          <div ng-switch-when="true" class="stickerset_modal_loading" my-vertical-position="0.2" padding="true" my-i18n="stickerset_modal_loading">
+            <my-i18n-param name="dots">
+              <span my-loading-dots></span>
+            </my-i18n-param>
+          </div>
+
+          <div ng-switch-default class="stickerset_modal_stickers_list clearfix">
+            <div class="stickerset_modal_sticker_wrap" ng-repeat="sticker in documents | limitTo: slice.limit">
+              <div class="stickerset_modal_sticker" my-load-sticker document="sticker" thumb="true"></div>
+              <div class="stickerset_modal_sticker_alt" ng-bind-html="sticker.stickerEmoji"></div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+    <div class="stickerset_actions_wrap">
+      <div class="stickerset_actions" ng-switch="stickersetInstalled">
+        <button ng-switch-when="true" class="btn btn-md btn-md-danger" my-i18n="stickerset_modal_uninstall" ng-click="toggleInstalled(false)"></button>
+        <button ng-switch-when="false" class="btn btn-md btn-md-primary" my-i18n="stickerset_modal_install" ng-click="toggleInstalled(true)"></button>
+      </div>
+    </div>
+
+  </div>
+
+</div>

app/partials/mobile/changelog_modal.html

@@ -19,9 +19,22 @@
 
       <div class="modal_section changelog_version_wrap">
         <h3 class="modal_section_header changelog_version_title">
-          Version 0.4.5
+          Version 0.4.6
           <span class="pull-right" my-i18n="changelog_modal_title_current_version"></span>
         </h3>
+        <div class="modal_section_body changelog_version_changes">
+          <ul class="list-unstyled changelog_version_changes_list">
+            <li>Install and share custom sticker sets like this one: <a href="tg://addstickers?set=Animals">telegram.me/addstickers/Animals</a></li>
+            <li>If you're an artist, create custom sticker sets using our <a href="tg://resolve?domain=stickers">@Stickers</a> bot.</li>
+            <li>Check out <a href="https://telegram.org/blog/stickers-revolution" target="_blank">Telegram Blog</a> for more info</li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="modal_section changelog_version_wrap">
+        <h3 class="modal_section_header changelog_version_title">
+          Version 0.4.5
+        </h3>
         <div class="modal_section_body changelog_version_changes">
           <ul class="list-unstyled changelog_version_changes_list">
             <li>

app/partials/mobile/stickerset_modal.html

@@ -0,0 +1,60 @@
+<div class="stickerset_modal_wrap">
+
+  <div class="tg_page_head tg_modal_head">
+    <div class="navbar navbar-static-top navbar-inverse">
+      <div class="container">
+
+        <div class="navbar-header">
+
+          <ul class="nav navbar-nav navbar-quick-nav">
+            <li class="navbar-quick-right" ng-if="stickersetLoaded" ng-switch="stickersetInstalled">
+              <a ng-switch-when="true" my-i18n="stickerset_modal_uninstall" ng-click="toggleInstalled(false)"></a>
+              <a ng-switch-when="false" my-i18n="stickerset_modal_install" ng-click="toggleInstalled(true)"></a>
+            </li>
+            <li>
+              <a ng-click="$dismiss()" class="navbar-quick-media-back">
+                <i class="icon icon-back"></i>
+                <div class="navbar-quick-back-title">
+                  <h4 ng-switch="!stickersetLoaded">
+                    <span ng-switch-when="true" my-i18n="stickerset_modal_title_loading"></span>
+                    <span ng-switch-default ng-bind="stickerset.title"></span>
+                  </h4>
+                </div>
+              </a>
+            </li>
+          </ul>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body">
+
+    <div my-stickers-list class="stickerset_modal_col">
+
+      <div class="stickerset_wrap nano" my-infinite-scroller>
+        <div class="stickerset_scrollable_wrap nano-content" ng-switch="!stickersetLoaded">
+
+          <div ng-switch-when="true" class="stickerset_modal_loading" my-vertical-position="0.2" padding="true" my-i18n="stickerset_modal_loading">
+            <my-i18n-param name="dots">
+              <span my-loading-dots></span>
+            </my-i18n-param>
+          </div>
+
+          <div ng-switch-default class="stickerset_modal_stickers_list clearfix">
+            <div class="stickerset_modal_sticker_wrap" ng-repeat="sticker in documents | limitTo: slice.limit">
+              <div class="stickerset_modal_sticker" my-load-sticker document="sticker" thumb="true"></div>
+              <div class="stickerset_modal_sticker_alt" ng-bind-html="sticker.stickerEmoji"></div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "Telegram",
   "description": "Telegram Web App.\nMore info & source code here: https://github.com/zhukov/webogram",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "main": "app/index.html",
   "single-instance": true,
   "dom_storage_quota": 40,