Reactions

submodules/ReactionSelectionNode/Sources/ReactionContextNode.swift

@@ -4,6 +4,8 @@ import Display
 import AnimatedStickerNode
 import TelegramCore
 import TelegramPresentationData
+import AccountContext
+import TelegramAnimatedStickerNode
 
 public enum ReactionGestureItem {
     case like
@@ -11,15 +13,26 @@ public enum ReactionGestureItem {
 }
 
 public final class ReactionContextItem {
-    public enum Reaction {
-        case like
-        case unlike
+    public struct Reaction {
+        public var rawValue: String
+        
+        public init(rawValue: String) {
+            self.rawValue = rawValue
+        }
     }
     
     public let reaction: ReactionContextItem.Reaction
+    public let listAnimation: TelegramMediaFile
+    public let applicationAnimation: TelegramMediaFile
     
-    public init(reaction: ReactionContextItem.Reaction) {
+    public init(
+        reaction: ReactionContextItem.Reaction,
+        listAnimation: TelegramMediaFile,
+        applicationAnimation: TelegramMediaFile
+    ) {
         self.reaction = reaction
+        self.listAnimation = listAnimation
+        self.applicationAnimation = applicationAnimation
     }
 }
 
@@ -75,7 +88,7 @@ private func generateBubbleShadowImage(shadow: UIColor, diameter: CGFloat, shado
     })?.stretchableImage(withLeftCapWidth: Int(diameter / 2.0 + shadowBlur / 2.0), topCapHeight: Int(diameter / 2.0 + shadowBlur / 2.0))
 }
 
-public final class ReactionContextNode: ASDisplayNode {
+public final class ReactionContextNode: ASDisplayNode, UIScrollViewDelegate {
     private let theme: PresentationTheme
     private let items: [ReactionContextItem]
     
@@ -90,18 +103,20 @@ public final class ReactionContextNode: ASDisplayNode {
     private let smallCircleShadowNode: ASImageNode
     
     private let contentContainer: ASDisplayNode
+    private let contentContainerMask: UIImageView
+    private let scrollNode: ASScrollNode
     private var itemNodes: [ReactionNode] = []
-    private let disclosureButton: HighlightTrackingButtonNode
     
     private var isExpanded: Bool = true
     private var highlightedReaction: ReactionContextItem.Reaction?
     private var validLayout: (CGSize, UIEdgeInsets, CGRect)?
+    private var isLeftAligned: Bool = true
     
-    public var reactionSelected: ((ReactionGestureItem) -> Void)?
+    public var reactionSelected: ((ReactionContextItem) -> Void)?
     
     private let hapticFeedback = HapticFeedback()
     
-    public init(account: Account, theme: PresentationTheme, items: [ReactionContextItem]) {
+    public init(context: AccountContext, theme: PresentationTheme, items: [ReactionContextItem]) {
         self.theme = theme
         self.items = items
         
@@ -144,27 +159,46 @@ public final class ReactionContextNode: ASDisplayNode {
         self.largeCircleShadowNode.image = generateBubbleShadowImage(shadow: UIColor(white: 0.0, alpha: 0.2), diameter: largeCircleSize, shadowBlur: shadowBlur)
         self.smallCircleShadowNode.image = generateBubbleShadowImage(shadow: UIColor(white: 0.0, alpha: 0.2), diameter: smallCircleSize, shadowBlur: shadowBlur)
         
+        self.scrollNode = ASScrollNode()
+        self.scrollNode.view.disablesInteractiveTransitionGestureRecognizer = true
+        self.scrollNode.view.showsVerticalScrollIndicator = false
+        self.scrollNode.view.showsHorizontalScrollIndicator = false
+        self.scrollNode.view.scrollsToTop = false
+        self.scrollNode.view.delaysContentTouches = false
+        self.scrollNode.view.canCancelContentTouches = true
+        if #available(iOS 11.0, *) {
+            self.scrollNode.view.contentInsetAdjustmentBehavior = .never
+        }
+        
         self.contentContainer = ASDisplayNode()
         self.contentContainer.clipsToBounds = true
+        self.contentContainer.addSubnode(self.scrollNode)
         
-        self.disclosureButton = HighlightTrackingButtonNode()
-        self.disclosureButton.hitTestSlop = UIEdgeInsets(top: -6.0, left: -6.0, bottom: -6.0, right: -6.0)
-        let buttonImage = generateImage(CGSize(width: 30.0, height: 30.0), rotatedContext: { size, context in
+        self.contentContainerMask = UIImageView()
+        let maskGradientWidth: CGFloat = 10.0
+        self.contentContainerMask.image = generateImage(CGSize(width: maskGradientWidth * 2.0 + 1.0, height: 8.0), rotatedContext: { size, context in
             context.clear(CGRect(origin: CGPoint(), size: size))
-            context.setFillColor(theme.contextMenu.dimColor.cgColor)
-            context.fillEllipse(in: CGRect(origin: CGPoint(), size: size))
-            context.setBlendMode(.copy)
-            context.setStrokeColor(UIColor.clear.cgColor)
-            context.setLineWidth(2.0)
-            context.setLineCap(.round)
-            context.setLineJoin(.round)
-            context.beginPath()
-            context.move(to: CGPoint(x: 8.0, y: size.height / 2.0 + 3.0))
-            context.addLine(to: CGPoint(x: size.width / 2.0, y: 11.0))
-            context.addLine(to: CGPoint(x: size.width - 8.0, y: size.height / 2.0 + 3.0))
-            context.strokePath()
-        })
-        self.disclosureButton.setImage(buttonImage, for: [])
+            
+            let shadowColor = UIColor.black
+
+            let stepCount = 10
+            var colors: [CGColor] = []
+            var locations: [CGFloat] = []
+
+            for i in 0 ... stepCount {
+                let t = CGFloat(i) / CGFloat(stepCount)
+                colors.append(shadowColor.withAlphaComponent(t * t).cgColor)
+                locations.append(t)
+            }
+
+            let gradient = CGGradient(colorsSpace: deviceColorSpace, colors: colors as CFArray, locations: &locations)!
+            context.drawLinearGradient(gradient, start: CGPoint(), end: CGPoint(x: maskGradientWidth, y: 0.0), options: CGGradientDrawingOptions())
+            context.drawLinearGradient(gradient, start: CGPoint(x: size.width, y: 0.0), end: CGPoint(x: maskGradientWidth + 1.0, y: 0.0), options: CGGradientDrawingOptions())
+            context.setFillColor(shadowColor.cgColor)
+            context.fill(CGRect(origin: CGPoint(x: maskGradientWidth, y: 0.0), size: CGSize(width: 1.0, height: size.height)))
+        })?.stretchableImage(withLeftCapWidth: Int(maskGradientWidth), topCapHeight: 0)
+        self.contentContainer.view.mask = self.contentContainerMask
+        //self.contentContainer.view.addSubview(self.contentContainerMask)
         
         super.init()
         
@@ -177,30 +211,14 @@ public final class ReactionContextNode: ASDisplayNode {
         self.backgroundContainerNode.addSubnode(self.backgroundNode)
         self.addSubnode(self.backgroundContainerNode)
         
-        self.contentContainer.addSubnode(self.disclosureButton)
+        self.scrollNode.view.delegate = self
         
         self.itemNodes = self.items.map { item in
-            let reactionItem: ReactionGestureItem
-            switch item.reaction {
-            case .like:
-                reactionItem = .like
-            case .unlike:
-                reactionItem = .unlike
-            }
-            return ReactionNode(account: account, theme: theme, reaction: reactionItem, maximizedReactionSize: 30.0, loadFirstFrame: true)
+            return ReactionNode(context: context, theme: theme, item: item)
         }
-        self.itemNodes.forEach(self.contentContainer.addSubnode)
+        self.itemNodes.forEach(self.scrollNode.addSubnode)
         
         self.addSubnode(self.contentContainer)
-        
-        self.disclosureButton.addTarget(self, action: #selector(self.disclosurePressed), forControlEvents: .touchUpInside)
-        self.disclosureButton.highligthedChanged = { [weak self] highlighted in
-            if highlighted {
-                self?.disclosureButton.layer.animateScale(from: 1.0, to: 0.8, duration: 0.15, removeOnCompletion: false)
-            } else {
-                self?.disclosureButton.layer.animateScale(from: 0.8, to: 1.0, duration: 0.25)
-            }
-        }
     }
     
     override public func didLoad() {
@@ -213,7 +231,7 @@ public final class ReactionContextNode: ASDisplayNode {
         self.updateLayout(size: size, insets: insets, anchorRect: anchorRect, transition: transition, animateInFromAnchorRect: nil, animateOutToAnchorRect: nil)
     }
     
-    private func calculateBackgroundFrame(containerSize: CGSize, insets: UIEdgeInsets, anchorRect: CGRect, contentSize: CGSize) -> (CGRect, Bool) {
+    private func calculateBackgroundFrame(containerSize: CGSize, insets: UIEdgeInsets, anchorRect: CGRect, contentSize: CGSize) -> (backgroundFrame: CGRect, isLeftAligned: Bool, cloudSourcePoint: CGFloat) {
         var contentSize = contentSize
         contentSize.width = max(52.0, contentSize.width)
         contentSize.height = 52.0
@@ -233,80 +251,87 @@ public final class ReactionContextNode: ASDisplayNode {
         rect.origin.x = max(sideInset, rect.origin.x)
         rect.origin.y = max(insets.top + sideInset, rect.origin.y)
         rect.origin.x = min(containerSize.width - contentSize.width - sideInset, rect.origin.x)
-        return (rect, isLeftAligned)
+        
+        let cloudSourcePoint: CGFloat
+        if isLeftAligned {
+            cloudSourcePoint = min(rect.maxX - rect.height / 2.0, anchorRect.maxX - 4.0)
+        } else {
+            cloudSourcePoint = max(rect.minX + rect.height / 2.0, anchorRect.minX)
+        }
+        
+        return (rect, isLeftAligned, cloudSourcePoint)
+    }
+    
+    public func scrollViewDidScroll(_ scrollView: UIScrollView) {
+        self.updateScrolling(transition: .immediate)
+    }
+    
+    private func updateScrolling(transition: ContainedViewLayoutTransition) {
+        let sideInset: CGFloat = 14.0
+        let minScale: CGFloat = 0.6
+        let scaleDistance: CGFloat = 30.0
+        let visibleBounds = self.scrollNode.view.bounds
+        
+        for itemNode in self.itemNodes {
+            if itemNode.isExtracted {
+                continue
+            }
+            let itemScale: CGFloat
+            let itemFrame = itemNode.frame.offsetBy(dx: -visibleBounds.minX, dy: 0.0)
+            if itemFrame.minX < sideInset || itemFrame.maxX > visibleBounds.width - sideInset {
+                let edgeDistance: CGFloat
+                if itemFrame.minX < sideInset {
+                    edgeDistance = sideInset - itemFrame.minX
+                } else {
+                    edgeDistance = itemFrame.maxX - (visibleBounds.width - sideInset)
+                }
+                let edgeFactor: CGFloat = min(1.0, edgeDistance / scaleDistance)
+                itemScale = edgeFactor * minScale + (1.0 - edgeFactor) * 1.0
+            } else {
+                itemScale = 1.0
+            }
+            transition.updateSublayerTransformScale(node: itemNode, scale: itemScale)
+        }
     }
     
     private func updateLayout(size: CGSize, insets: UIEdgeInsets, anchorRect: CGRect, transition: ContainedViewLayoutTransition, animateInFromAnchorRect: CGRect?, animateOutToAnchorRect: CGRect?, animateReactionHighlight: Bool = false) {
         self.validLayout = (size, insets, anchorRect)
         
-        let sideInset: CGFloat = 12.0
-        let itemSpacing: CGFloat = 6.0
-        let minimizedItemSize: CGFloat = 30.0
-        let maximizedItemSize: CGFloat = 30.0 - 18.0
+        let sideInset: CGFloat = 14.0
+        let itemSpacing: CGFloat = 9.0
+        let itemSize: CGFloat = 40.0
         let shadowBlur: CGFloat = 5.0
         let verticalInset: CGFloat = 13.0
         let rowHeight: CGFloat = 30.0
-        let rowSpacing: CGFloat = itemSpacing
         
-        let columnCount = min(6, self.items.count)
-        let contentWidth = CGFloat(columnCount) * minimizedItemSize + (CGFloat(columnCount) - 1.0) * itemSpacing + sideInset * 2.0
-        let rowCount = self.items.count / columnCount + (self.items.count % columnCount == 0 ? 0 : 1)
+        let completeContentWidth = CGFloat(self.items.count) * itemSize + (CGFloat(self.items.count) - 1.0) * itemSpacing + sideInset * 2.0
+        let minVisibleItemCount: CGFloat = min(CGFloat(self.items.count), 6.5)
+        let visibleContentWidth = floor(minVisibleItemCount * itemSize + (minVisibleItemCount - 1.0) * itemSpacing + sideInset * 2.0)
         
-        let expandedRowCount = self.isExpanded ? rowCount : 1
+        let contentHeight = verticalInset * 2.0 + rowHeight
         
-        let contentHeight = verticalInset * 2.0 + rowHeight * CGFloat(expandedRowCount) + CGFloat(expandedRowCount - 1) * rowSpacing
-        
-        let (backgroundFrame, isLeftAligned) = self.calculateBackgroundFrame(containerSize: size, insets: insets, anchorRect: anchorRect, contentSize: CGSize(width: contentWidth, height: contentHeight))
+        let (backgroundFrame, isLeftAligned, cloudSourcePoint) = self.calculateBackgroundFrame(containerSize: size, insets: insets, anchorRect: anchorRect, contentSize: CGSize(width: visibleContentWidth, height: contentHeight))
+        self.isLeftAligned = isLeftAligned
         
         transition.updateFrame(node: self.contentContainer, frame: backgroundFrame)
+        transition.updateFrame(view: self.contentContainerMask, frame: CGRect(origin: CGPoint(), size: backgroundFrame.size))
+        transition.updateFrame(node: self.scrollNode, frame: CGRect(origin: CGPoint(), size: backgroundFrame.size))
+        self.scrollNode.view.contentSize = CGSize(width: completeContentWidth, height: backgroundFrame.size.height)
         
         for i in 0 ..< self.items.count {
-            let rowIndex = i / columnCount
-            let columnIndex = i % columnCount
-            let row = CGFloat(rowIndex)
+            let columnIndex = i
             let column = CGFloat(columnIndex)
             
-            let itemSize: CGFloat = minimizedItemSize
-            let itemOffset: CGFloat = 0.0
+            let itemOffsetY: CGFloat = -1.0
             
-            let itemFrame = CGRect(origin: CGPoint(x: sideInset + column * (minimizedItemSize + itemSpacing) - itemOffset, y: verticalInset + row * (rowHeight + rowSpacing) + floor((rowHeight - minimizedItemSize) / 2.0) - itemOffset), size: CGSize(width: itemSize, height: itemSize))
-            transition.updateFrame(node: self.itemNodes[i], frame: itemFrame, beginWithCurrentState: true)
-            self.itemNodes[i].updateLayout(size: CGSize(width: itemSize, height: itemSize), scale: itemSize / (maximizedItemSize + 18.0), transition: transition, displayText: false)
-            self.itemNodes[i].updateIsAnimating(false, animated: false)
-            if rowIndex != 0 || columnIndex == columnCount - 1 {
-                if self.isExpanded {
-                    if self.itemNodes[i].alpha.isZero {
-                        self.itemNodes[i].alpha = 1.0
-                        if transition.isAnimated {
-                            let delayOffset: Double = 1.0 - Double(columnIndex) / Double(columnCount - 1)
-                            self.itemNodes[i].layer.animateSpring(from: 0.1 as NSNumber, to: 1.0 as NSNumber, keyPath: "transform.scale", duration: 0.4 + delayOffset * 0.32, initialVelocity: 0.0, damping: 95.0)
-                            self.itemNodes[i].layer.animateAlpha(from: 0.0, to: 1.0, duration: 0.05)
-                        }
-                    }
-                } else {
-                    self.itemNodes[i].alpha = 0.0
-                }
-            } else {
-                self.itemNodes[i].alpha = 1.0
-            }
-            
-            if rowIndex == 0 && columnIndex == columnCount - 1 {
-                transition.updateFrame(node: self.disclosureButton, frame: itemFrame)
-                if self.isExpanded {
-                    if self.disclosureButton.alpha.isEqual(to: 1.0) {
-                        self.disclosureButton.alpha = 0.0
-                        if transition.isAnimated {
-                            self.disclosureButton.layer.animateScale(from: 0.8, to: 0.1, duration: 0.2, removeOnCompletion: false)
-                            self.disclosureButton.layer.animateAlpha(from: 1.0, to: 0.0, duration: 0.2, completion: { [weak self] _ in
-                                self?.disclosureButton.layer.removeAnimation(forKey: "scale")
-                            })
-                        }
-                    }
-                } else {
-                    self.disclosureButton.alpha = 1.0
-                }
+            let itemFrame = CGRect(origin: CGPoint(x: sideInset + column * (itemSize + itemSpacing), y: verticalInset + floor((rowHeight - itemSize) / 2.0) + itemOffsetY), size: CGSize(width: itemSize, height: itemSize))
+            if !self.itemNodes[i].isExtracted {
+                transition.updateFrame(node: self.itemNodes[i], frame: itemFrame, beginWithCurrentState: true)
+                self.itemNodes[i].updateLayout(size: CGSize(width: itemSize, height: itemSize), isExpanded: false, transition: transition)
             }
         }
+        
+        self.updateScrolling(transition: transition)
      
         let isInOverflow = backgroundFrame.maxY > anchorRect.minY
         let backgroundAlpha: CGFloat = isInOverflow ? 1.0 : 0.8
@@ -324,10 +349,10 @@ public final class ReactionContextNode: ASDisplayNode {
         let largeCircleFrame: CGRect
         let smallCircleFrame: CGRect
         if isLeftAligned {
-            largeCircleFrame = CGRect(origin: CGPoint(x: backgroundFrame.midX - floor(largeCircleSize / 2.0), y: backgroundFrame.maxY - largeCircleSize / 2.0), size: CGSize(width: largeCircleSize, height: largeCircleSize))
+            largeCircleFrame = CGRect(origin: CGPoint(x: cloudSourcePoint - floor(largeCircleSize / 2.0), y: backgroundFrame.maxY - largeCircleSize / 2.0), size: CGSize(width: largeCircleSize, height: largeCircleSize))
             smallCircleFrame = CGRect(origin: CGPoint(x: largeCircleFrame.maxX - 3.0, y: largeCircleFrame.maxY + 2.0), size: CGSize(width: smallCircleSize, height: smallCircleSize))
         } else {
-            largeCircleFrame = CGRect(origin: CGPoint(x: backgroundFrame.midX - floor(largeCircleSize / 2.0), y: backgroundFrame.maxY - largeCircleSize / 2.0), size: CGSize(width: largeCircleSize, height: largeCircleSize))
+            largeCircleFrame = CGRect(origin: CGPoint(x: cloudSourcePoint - floor(largeCircleSize / 2.0), y: backgroundFrame.maxY - largeCircleSize / 2.0), size: CGSize(width: largeCircleSize, height: largeCircleSize))
             smallCircleFrame = CGRect(origin: CGPoint(x: largeCircleFrame.minX + 3.0 - smallCircleSize, y: largeCircleFrame.maxY + 2.0), size: CGSize(width: smallCircleSize, height: smallCircleSize))
         }
         
@@ -339,12 +364,20 @@ public final class ReactionContextNode: ASDisplayNode {
         if let animateInFromAnchorRect = animateInFromAnchorRect {
             let springDuration: Double = 0.42
             let springDamping: CGFloat = 104.0
+            let springDelay: Double = 0.22
             
-            let sourceBackgroundFrame = self.calculateBackgroundFrame(containerSize: size, insets: insets, anchorRect: animateInFromAnchorRect, contentSize: CGSize(width: contentWidth, height: contentHeight)).0
+            let sourceBackgroundFrame = self.calculateBackgroundFrame(containerSize: size, insets: insets, anchorRect: animateInFromAnchorRect, contentSize: CGSize(width: backgroundFrame.height, height: contentHeight)).0
             
-            self.layer.animateSpring(from: NSValue(cgPoint: CGPoint(x: sourceBackgroundFrame.minX - backgroundFrame.minX, y: sourceBackgroundFrame.minY - backgroundFrame.minY)), to: NSValue(cgPoint: CGPoint()), keyPath: "position", duration: springDuration, initialVelocity: 0.0, damping: springDamping, additive: true)
+            self.backgroundNode.layer.animateSpring(from: NSValue(cgPoint: CGPoint(x: sourceBackgroundFrame.midX - backgroundFrame.midX, y: 0.0)), to: NSValue(cgPoint: CGPoint()), keyPath: "position", duration: springDuration, delay: springDelay, initialVelocity: 0.0, damping: springDamping, additive: true)
+            self.backgroundNode.layer.animateSpring(from: NSValue(cgRect: CGRect(origin: CGPoint(), size: sourceBackgroundFrame.size).insetBy(dx: -shadowBlur, dy: -shadowBlur)), to: NSValue(cgRect: CGRect(origin: CGPoint(), size: backgroundFrame.size).insetBy(dx: -shadowBlur, dy: -shadowBlur)), keyPath: "bounds", duration: springDuration, delay: springDelay, initialVelocity: 0.0, damping: springDamping)
+            
+            self.contentContainer.layer.animateSpring(from: NSValue(cgPoint: CGPoint(x: sourceBackgroundFrame.midX - backgroundFrame.midX, y: 0.0)), to: NSValue(cgPoint: CGPoint()), keyPath: "position", duration: springDuration, delay: springDelay, initialVelocity: 0.0, damping: springDamping, additive: true)
+            self.contentContainer.layer.animateSpring(from: NSValue(cgRect: CGRect(origin: CGPoint(), size: sourceBackgroundFrame.size)), to: NSValue(cgRect: CGRect(origin: CGPoint(), size: backgroundFrame.size)), keyPath: "bounds", duration: springDuration, delay: springDelay, initialVelocity: 0.0, damping: springDamping)
+            
+            //self.contentContainerMask.layer.animateSpring(from: NSValue(cgPoint: CGPoint(x: sourceBackgroundFrame.midX - backgroundFrame.midX, y: 0.0)), to: NSValue(cgPoint: CGPoint()), keyPath: "position", duration: springDuration, delay: springDelay, initialVelocity: 0.0, damping: springDamping, additive: true)
+            //self.contentContainerMask.layer.animateSpring(from: NSValue(cgRect: CGRect(origin: CGPoint(), size: sourceBackgroundFrame.size)), to: NSValue(cgRect: CGRect(origin: CGPoint(), size: backgroundFrame.size)), keyPath: "bounds", duration: springDuration, delay: springDelay, initialVelocity: 0.0, damping: springDamping)
         } else if let animateOutToAnchorRect = animateOutToAnchorRect {
-            let targetBackgroundFrame = self.calculateBackgroundFrame(containerSize: size, insets: insets, anchorRect: animateOutToAnchorRect, contentSize: CGSize(width: contentWidth, height: contentHeight)).0
+            let targetBackgroundFrame = self.calculateBackgroundFrame(containerSize: size, insets: insets, anchorRect: animateOutToAnchorRect, contentSize: CGSize(width: visibleContentWidth, height: contentHeight)).0
             
             self.layer.animatePosition(from: CGPoint(), to: CGPoint(x: targetBackgroundFrame.minX - backgroundFrame.minX, y: targetBackgroundFrame.minY - backgroundFrame.minY), duration: 0.2, removeOnCompletion: false, additive: true)
         }
@@ -374,12 +407,19 @@ public final class ReactionContextNode: ASDisplayNode {
         self.backgroundNode.layer.animateSpring(from: 0.1 as NSNumber, to: 1.0 as NSNumber, keyPath: "transform.scale", duration: mainCircleDuration, delay: mainCircleDelay)
         self.backgroundShadowNode.layer.animateSpring(from: 0.1 as NSNumber, to: 1.0 as NSNumber, keyPath: "transform.scale", duration: mainCircleDuration, delay: mainCircleDelay)
         
-        if let itemNode = self.itemNodes.first {
+        for i in 0 ..< self.itemNodes.count {
+            let itemNode = self.itemNodes[i]
+            let itemDelay = mainCircleDelay + 0.1 + Double(i) * 0.03
+            itemNode.layer.animateAlpha(from: 0.0, to: 1.0, duration: 0.15, delay: itemDelay)
+            itemNode.layer.animateSpring(from: 0.1 as NSNumber, to: 1.0 as NSNumber, keyPath: "transform.scale", duration: mainCircleDuration, delay: itemDelay, initialVelocity: 0.0)
+        }
+        
+        /*if let itemNode = self.itemNodes.first {
             itemNode.layer.animateAlpha(from: 0.0, to: 1.0, duration: 0.15, delay: mainCircleDelay)
             itemNode.didAppear()
             itemNode.layer.animateSpring(from: 0.1 as NSNumber, to: 1.0 as NSNumber, keyPath: "transform.scale", duration: mainCircleDuration, delay: mainCircleDelay, completion: { _ in
             })
-        }
+        }*/
     }
     
     public func animateOut(to targetAnchorRect: CGRect?, animatingOutToReaction: Bool) {
@@ -390,84 +430,162 @@ public final class ReactionContextNode: ASDisplayNode {
         self.smallCircleNode.layer.animateAlpha(from: self.smallCircleNode.alpha, to: 0.0, duration: 0.2, removeOnCompletion: false)
         self.smallCircleShadowNode.layer.animateAlpha(from: self.smallCircleShadowNode.alpha, to: 0.0, duration: 0.2, removeOnCompletion: false)
         for itemNode in self.itemNodes {
+            if itemNode.isExtracted {
+                continue
+            }
             itemNode.layer.animateAlpha(from: itemNode.alpha, to: 0.0, duration: 0.2, removeOnCompletion: false)
         }
-        self.disclosureButton.layer.animateAlpha(from: self.disclosureButton.alpha, to: 0.0, duration: 0.2, removeOnCompletion: false)
         
         if let targetAnchorRect = targetAnchorRect, let (size, insets, anchorRect) = self.validLayout {
             self.updateLayout(size: size, insets: insets, anchorRect: anchorRect, transition: .immediate, animateInFromAnchorRect: nil, animateOutToAnchorRect: targetAnchorRect)
         }
     }
     
+    private func generateParabollicMotionKeyframes(from sourcePoint: CGPoint, to targetPosition: CGPoint, elevation: CGFloat) -> [AnyObject] {
+        let midPoint = CGPoint(x: (sourcePoint.x + targetPosition.x) / 2.0, y: sourcePoint.y - elevation)
+        
+        let x1 = sourcePoint.x
+        let y1 = sourcePoint.y
+        let x2 = midPoint.x
+        let y2 = midPoint.y
+        let x3 = targetPosition.x
+        let y3 = targetPosition.y
+        
+        var keyframes: [AnyObject] = []
+        if abs(y1 - y3) < 5.0 || abs(x1 - x3) < 5.0 {
+            for i in 0 ..< 10 {
+                let k = CGFloat(i) / CGFloat(10 - 1)
+                let x = sourcePoint.x * (1.0 - k) + targetPosition.x * k
+                let y = sourcePoint.y * (1.0 - k) + targetPosition.y * k
+                keyframes.append(NSValue(cgPoint: CGPoint(x: x, y: y)))
+            }
+        } else {
+            let a = (x3 * (y2 - y1) + x2 * (y1 - y3) + x1 * (y3 - y2)) / ((x1 - x2) * (x1 - x3) * (x2 - x3))
+            let b = (x1 * x1 * (y2 - y3) + x3 * x3 * (y1 - y2) + x2 * x2 * (y3 - y1)) / ((x1 - x2) * (x1 - x3) * (x2 - x3))
+            let c = (x2 * x2 * (x3 * y1 - x1 * y3) + x2 * (x1 * x1 * y3 - x3 * x3 * y1) + x1 * x3 * (x3 - x1) * y2) / ((x1 - x2) * (x1 - x3) * (x2 - x3))
+            
+            for i in 0 ..< 10 {
+                let k = CGFloat(i) / CGFloat(10 - 1)
+                let x = sourcePoint.x * (1.0 - k) + targetPosition.x * k
+                let y = a * x * x + b * x + c
+                keyframes.append(NSValue(cgPoint: CGPoint(x: x, y: y)))
+            }
+        }
+        
+        return keyframes
+    }
+    
+    private func animateFromItemNodeToReaction(itemNode: ReactionNode, targetFilledNode: ASDisplayNode, targetSnapshotView: UIView, hideNode: Bool, completion: @escaping () -> Void) {
+        targetSnapshotView.frame = self.view.convert(targetFilledNode.bounds, from: targetFilledNode.view)
+        self.view.insertSubview(targetSnapshotView, belowSubview: itemNode.view)
+        
+        var completedTarget = false
+        var targetScaleCompleted = false
+        let intermediateCompletion: () -> Void = {
+            if completedTarget && targetScaleCompleted {
+                completion()
+            }
+        }
+        
+        let targetPosition = self.view.convert(targetFilledNode.bounds.center, from: targetFilledNode.view)
+        let duration: Double = 0.16
+        
+        itemNode.layer.animateAlpha(from: 1.0, to: 0.0, duration: duration * 0.9, removeOnCompletion: false)
+        targetSnapshotView.layer.animateAlpha(from: 0.0, to: 1.0, duration: duration * 0.8)
+        targetSnapshotView.layer.animateScale(from: itemNode.bounds.width / targetSnapshotView.bounds.width, to: 0.5, duration: duration, removeOnCompletion: false, completion: { [weak targetSnapshotView] _ in
+            if hideNode {
+                targetFilledNode.isHidden = false
+                targetFilledNode.layer.animateSpring(from: 0.5 as NSNumber, to: 1.0 as NSNumber, keyPath: "transform.scale", duration: duration, initialVelocity: 0.0, damping: 90.0, completion: { _ in
+                    targetSnapshotView?.isHidden = true
+                    targetScaleCompleted = true
+                    intermediateCompletion()
+                })
+            } else {
+                targetSnapshotView?.isHidden = true
+                targetScaleCompleted = true
+                intermediateCompletion()
+            }
+        })
+        
+        let keyframes = self.generateParabollicMotionKeyframes(from: itemNode.frame.center, to: targetPosition, elevation: 30.0)
+        
+        itemNode.layer.animateKeyframes(values: keyframes, duration: duration, keyPath: "position", removeOnCompletion: false, completion: { [weak self] _ in
+            if let strongSelf = self {
+                strongSelf.hapticFeedback.tap()
+            }
+            completedTarget = true
+            intermediateCompletion()
+        })
+        targetSnapshotView.layer.animateKeyframes(values: keyframes, duration: duration, keyPath: "position", removeOnCompletion: false)
+        
+        itemNode.layer.animateScale(from: 1.0, to: (targetSnapshotView.bounds.width * 0.5) / itemNode.bounds.width, duration: duration, removeOnCompletion: false)
+    }
+    
     public func animateOutToReaction(value: String, targetEmptyNode: ASDisplayNode, targetFilledNode: ASDisplayNode, hideNode: Bool, completion: @escaping () -> Void) {
         for itemNode in self.itemNodes {
-            switch itemNode.reaction {
-            case .like:
-                if let snapshotView = itemNode.view.snapshotContentTree(keepTransform: true), let targetSnapshotView = targetFilledNode.view.snapshotContentTree() {
-                    targetSnapshotView.frame = self.view.convert(targetFilledNode.bounds, from: targetFilledNode.view)
-                    itemNode.isHidden = true
-                    self.view.addSubview(targetSnapshotView)
-                    self.view.addSubview(snapshotView)
-                    snapshotView.frame = itemNode.view.convert(itemNode.view.bounds, to: self.view).offsetBy(dx: 25.0, dy: 1.0)
-                    
-                    var completedTarget = false
-                    let intermediateCompletion: () -> Void = {
-                        if completedTarget {
-                            completion()
-                        }
+            if itemNode.item.reaction.rawValue != value {
+                continue
+            }
+            if let targetSnapshotView = targetFilledNode.view.snapshotContentTree() {
+                if hideNode {
+                    targetFilledNode.isHidden = true
+                }
+                
+                itemNode.isExtracted = true
+                let selfSourceRect = itemNode.view.convert(itemNode.view.bounds, to: self.view)
+                let selfTargetRect = self.view.convert(targetFilledNode.bounds, from: targetFilledNode.view)
+                
+                let expandedScale: CGFloat = 4.0
+                let expandedSize = CGSize(width: floor(selfSourceRect.width * expandedScale), height: floor(selfSourceRect.height * expandedScale))
+                
+                let expandedFrame = CGRect(origin: CGPoint(x: floor(selfTargetRect.midX - expandedSize.width / 2.0), y: floor(selfTargetRect.midY - expandedSize.height / 2.0)), size: expandedSize)
+                
+                let transition: ContainedViewLayoutTransition = .animated(duration: 0.3, curve: .linear)
+                
+                self.addSubnode(itemNode)
+                itemNode.frame = selfSourceRect
+                itemNode.position = expandedFrame.center
+                transition.updateBounds(node: itemNode, bounds: CGRect(origin: CGPoint(), size: expandedFrame.size))
+                itemNode.updateLayout(size: expandedFrame.size, isExpanded: true, transition: transition)
+                transition.animatePositionWithKeyframes(node: itemNode, keyframes: self.generateParabollicMotionKeyframes(from: selfSourceRect.center, to: expandedFrame.center, elevation: 30.0))
+                
+                let additionalAnimationNode = AnimatedStickerNode()
+                let incomingMessage: Bool = self.isLeftAligned
+                let animationFrame = expandedFrame.insetBy(dx: -expandedFrame.width * 0.5, dy: -expandedFrame.height * 0.5)
+                    .offsetBy(dx: incomingMessage ? (expandedFrame.width - 50.0) : (-expandedFrame.width + 50.0), dy: 0.0)
+                //animationFrame = animationFrame.offsetBy(dx: CGFloat.random(in: -30.0 ... 30.0), dy: CGFloat.random(in: -30.0 ... 30.0))
+                additionalAnimationNode.setup(source: AnimatedStickerResourceSource(account: itemNode.context.account, resource: itemNode.item.applicationAnimation.resource), width: Int(animationFrame.width * 2.0), height: Int(animationFrame.height * 2.0), playbackMode: .once, mode: .direct(cachePathPrefix: nil))
+                additionalAnimationNode.frame = animationFrame
+                if incomingMessage {
+                    additionalAnimationNode.transform = CATransform3DMakeScale(-1.0, 1.0, 1.0)
+                }
+                additionalAnimationNode.updateLayout(size: animationFrame.size)
+                self.addSubnode(additionalAnimationNode)
+                
+                var mainAnimationCompleted = false
+                var additionalAnimationCompleted = false
+                let intermediateCompletion: () -> Void = {
+                    if mainAnimationCompleted && additionalAnimationCompleted {
+                        completion()
                     }
-                    
-                    let targetPosition = self.view.convert(targetFilledNode.bounds.center, from: targetFilledNode.view)
-                    let duration: Double = 0.3
-                    if hideNode {
-                        targetFilledNode.isHidden = true
-                    }
-                    
-                    snapshotView.layer.animateAlpha(from: 1.0, to: 0.0, duration: 0.25, removeOnCompletion: false)
-                    targetSnapshotView.layer.animateAlpha(from: 0.0, to: 1.0, duration: 0.2)
-                    targetSnapshotView.layer.animateScale(from: snapshotView.bounds.width / targetSnapshotView.bounds.width, to: 0.5, duration: 0.3, removeOnCompletion: false)
-                    
-                    let sourcePoint = snapshotView.center
-                    let midPoint = CGPoint(x: (sourcePoint.x + targetPosition.x) / 2.0, y: sourcePoint.y - 30.0)
-                    
-                    let x1 = sourcePoint.x
-                    let y1 = sourcePoint.y
-                    let x2 = midPoint.x
-                    let y2 = midPoint.y
-                    let x3 = targetPosition.x
-                    let y3 = targetPosition.y
-                    
-                    let a = (x3 * (y2 - y1) + x2 * (y1 - y3) + x1 * (y3 - y2)) / ((x1 - x2) * (x1 - x3) * (x2 - x3))
-                    let b = (x1 * x1 * (y2 - y3) + x3 * x3 * (y1 - y2) + x2 * x2 * (y3 - y1)) / ((x1 - x2) * (x1 - x3) * (x2 - x3))
-                    let c = (x2 * x2 * (x3 * y1 - x1 * y3) + x2 * (x1 * x1 * y3 - x3 * x3 * y1) + x1 * x3 * (x3 - x1) * y2) / ((x1 - x2) * (x1 - x3) * (x2 - x3))
-                    
-                    var keyframes: [AnyObject] = []
-                    for i in 0 ..< 10 {
-                        let k = CGFloat(i) / CGFloat(10 - 1)
-                        let x = sourcePoint.x * (1.0 - k) + targetPosition.x * k
-                        let y = a * x * x + b * x + c
-                        keyframes.append(NSValue(cgPoint: CGPoint(x: x, y: y)))
-                    }
-                    
-                    snapshotView.layer.animateKeyframes(values: keyframes, duration: 0.3, keyPath: "position", removeOnCompletion: false, completion: { [weak self] _ in
-                        if let strongSelf = self {
-                            strongSelf.hapticFeedback.tap()
-                        }
-                        completedTarget = true
-                        if hideNode {
-                            targetFilledNode.isHidden = false
-                            targetFilledNode.layer.animateSpring(from: 0.5 as NSNumber, to: 1.0 as NSNumber, keyPath: "transform.scale", duration: duration, initialVelocity: 0.0, damping: 90.0)
-                            targetEmptyNode.layer.animateSpring(from: 0.5 as NSNumber, to: 1.0 as NSNumber, keyPath: "transform.scale", duration: duration, initialVelocity: 0.0, damping: 90.0)
-                        }
+                }
+                
+                additionalAnimationNode.completed = { _ in
+                    additionalAnimationCompleted = true
+                    intermediateCompletion()
+                }
+                
+                DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.1 * UIView.animationDurationFactor(), execute: {
+                    additionalAnimationNode.visibility = true
+                })
+                
+                DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 2.0 * UIView.animationDurationFactor(), execute: {
+                    self.animateFromItemNodeToReaction(itemNode: itemNode, targetFilledNode: targetFilledNode, targetSnapshotView: targetSnapshotView, hideNode: hideNode, completion: {
+                        mainAnimationCompleted = true
                         intermediateCompletion()
                     })
-                    targetSnapshotView.layer.animateKeyframes(values: keyframes, duration: 0.3, keyPath: "position", removeOnCompletion: false)
-                    
-                    snapshotView.layer.animateScale(from: 1.0, to: (targetSnapshotView.bounds.width * 0.5) / snapshotView.bounds.width, duration: 0.3, removeOnCompletion: false)
-                    return
-                }
-            default:
-                break
+                })
+                return
             }
         }
         completion()
@@ -475,16 +593,14 @@ public final class ReactionContextNode: ASDisplayNode {
     
     override public func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
         let contentPoint = self.contentContainer.view.convert(point, from: self.view)
-        if !self.disclosureButton.alpha.isZero {
-            if let result = self.disclosureButton.hitTest(self.disclosureButton.view.convert(point, from: self.view), with: event) {
-                return result
-            }
+        if self.contentContainer.bounds.contains(contentPoint) {
+            return self.contentContainer.hitTest(contentPoint, with: event)
         }
-        for itemNode in self.itemNodes {
+        /*for itemNode in self.itemNodes {
             if !itemNode.alpha.isZero && itemNode.frame.contains(contentPoint) {
                 return self.view
             }
-        }
+        }*/
         return nil
     }
     
@@ -497,16 +613,14 @@ public final class ReactionContextNode: ASDisplayNode {
         }
     }
     
-    public func reaction(at point: CGPoint) -> ReactionGestureItem? {
-        let contentPoint = self.contentContainer.view.convert(point, from: self.view)
-        for itemNode in self.itemNodes {
-            if !itemNode.alpha.isZero && itemNode.frame.contains(contentPoint) {
-                return itemNode.reaction
-            }
-        }
-        for itemNode in self.itemNodes {
-            if !itemNode.alpha.isZero && itemNode.frame.insetBy(dx: -8.0, dy: -8.0).contains(contentPoint) {
-                return itemNode.reaction
+    public func reaction(at point: CGPoint) -> ReactionContextItem? {
+        for i in 0 ..< 2 {
+            let touchInset: CGFloat = i == 0 ? 0.0 : 8.0
+            for itemNode in self.itemNodes {
+                let itemPoint = self.view.convert(point, to: itemNode.view)
+                if itemNode.bounds.insetBy(dx: -touchInset, dy: -touchInset).contains(itemPoint) {
+                    return itemNode.item
+                }
             }
         }
         return nil