Add blur to sticker placeholders

This commit is contained in:
Ilya Laktyushin 2021-06-11 03:21:17 +03:00
parent abea783bc8
commit 4d952b97d0
4 changed files with 69 additions and 6 deletions

View File

@ -140,6 +140,7 @@ private func decodeStickerThumbnailData(_ data: Data) -> String {
}
public class StickerShimmerEffectNode: ASDisplayNode {
private var backdropNode: ASDisplayNode?
private let backgroundNode: ASDisplayNode
private let effectNode: ShimmerEffectForegroundNode
private let foregroundNode: ASImageNode
@ -164,10 +165,24 @@ public class StickerShimmerEffectNode: ASDisplayNode {
self.addSubnode(self.foregroundNode)
}
public override func didLoad() {
super.didLoad()
self.effectNode.layer.compositingFilter = "screenBlendMode"
}
public var isEmpty: Bool {
return self.currentData == nil
}
public func addBackdropNode(_ backdropNode: ASDisplayNode) {
if let current = self.backdropNode {
current.removeFromSupernode()
}
self.backdropNode = backdropNode
self.insertSubnode(backdropNode, at: 0)
}
public func updateAbsoluteRect(_ rect: CGRect, within containerSize: CGSize) {
self.effectNode.updateAbsoluteRect(rect, within: containerSize)
}
@ -190,6 +205,7 @@ public class StickerShimmerEffectNode: ASDisplayNode {
self.effectNode.update(backgroundColor: backgroundColor == nil ? .clear : foregroundColor, foregroundColor: shimmeringColor)
let bounds = CGRect(origin: CGPoint(), size: size)
let image = generateImage(size, rotatedContext: { size, context in
if let backgroundColor = backgroundColor {
context.setFillColor(backgroundColor.cgColor)
@ -219,7 +235,7 @@ public class StickerShimmerEffectNode: ASDisplayNode {
UIGraphicsPopContext()
}
})
if backgroundColor == nil {
self.foregroundNode.image = nil
@ -228,7 +244,7 @@ public class StickerShimmerEffectNode: ASDisplayNode {
maskView = current
} else {
maskView = UIImageView()
maskView.frame = CGRect(origin: CGPoint(), size: size)
maskView.frame = bounds
self.maskView = maskView
self.view.mask = maskView
}
@ -244,9 +260,10 @@ public class StickerShimmerEffectNode: ASDisplayNode {
self.maskView?.image = image
self.backgroundNode.frame = CGRect(origin: CGPoint(), size: size)
self.foregroundNode.frame = CGRect(origin: CGPoint(), size: size)
self.effectNode.frame = CGRect(origin: CGPoint(), size: size)
self.backdropNode?.frame = bounds
self.backgroundNode.frame = bounds
self.foregroundNode.frame = bounds
self.effectNode.frame = bounds
}
}

View File

@ -565,7 +565,7 @@ public func makeDefaultDayPresentationTheme(extendingThemeReference: Presentatio
selectionControlColors: PresentationThemeFillStrokeForeground(fillColor: UIColor(rgb: 0x007ee5), strokeColor: UIColor(rgb: 0xc7c7cc), foregroundColor: UIColor(rgb: 0xffffff)),
deliveryFailedColors: PresentationThemeFillForeground(fillColor: UIColor(rgb: 0xff3b30), foregroundColor: UIColor(rgb: 0xffffff)),
mediaHighlightOverlayColor: UIColor(white: 1.0, alpha: 0.6),
stickerPlaceholderColor: PresentationThemeVariableColor(withWallpaper: serviceBackgroundColor.withAlphaComponent(0.3), withoutWallpaper: UIColor(rgb: 0x748391, alpha: 0.25)),
stickerPlaceholderColor: PresentationThemeVariableColor(withWallpaper: serviceBackgroundColor, withoutWallpaper: UIColor(rgb: 0x748391, alpha: 0.25)),
stickerPlaceholderShimmerColor: PresentationThemeVariableColor(withWallpaper: UIColor(rgb: 0xffffff, alpha: 0.2), withoutWallpaper: UIColor(rgb: 0x000000, alpha: 0.1))
)

View File

@ -22,6 +22,7 @@ import ManagedAnimationNode
import SlotMachineAnimationNode
import UniversalMediaPlayer
import ShimmerEffect
import WallpaperBackgroundNode
private let nameFont = Font.medium(14.0)
private let inlineBotPrefixFont = Font.regular(14.0)
@ -158,6 +159,7 @@ class ChatMessageAnimatedStickerItemNode: ChatMessageItemView {
private let containerNode: ContextControllerSourceNode
let imageNode: TransformImageNode
private var enableSynchronousImageApply: Bool = false
private var backgroundNode: WallpaperBackgroundNode.BubbleBackgroundNode?
private(set) var placeholderNode: StickerShimmerEffectNode
private(set) var animationNode: GenericAnimatedStickerNode?
private var didSetUpAnimationNode = false
@ -592,6 +594,16 @@ class ChatMessageAnimatedStickerItemNode: ChatMessageItemView {
rect.origin.y = containerSize.height - rect.maxY + self.insets.top
self.placeholderNode.updateAbsoluteRect(CGRect(origin: CGPoint(x: rect.minX + self.placeholderNode.frame.minX, y: rect.minY + self.placeholderNode.frame.minY), size: self.placeholderNode.frame.size), within: containerSize)
if let backgroundNode = self.backgroundNode {
backgroundNode.update(rect: CGRect(origin: CGPoint(x: rect.minX + self.placeholderNode.frame.minX, y: rect.minY + self.placeholderNode.frame.minY), size: self.placeholderNode.frame.size), within: containerSize)
}
}
}
override func applyAbsoluteOffset(value: CGPoint, animationCurve: ContainedViewLayoutTransitionCurve, duration: Double) {
if let backgroundNode = self.backgroundNode {
backgroundNode.offset(value: value, animationCurve: animationCurve, duration: duration)
}
}
@ -1001,6 +1013,17 @@ class ChatMessageAnimatedStickerItemNode: ChatMessageItemView {
}
if let file = file, let immediateThumbnailData = file.immediateThumbnailData {
if strongSelf.backgroundNode == nil {
if let backgroundNode = item.controllerInteraction.presentationContext.backgroundNode?.makeBubbleBackground(for: .free) {
strongSelf.backgroundNode = backgroundNode
strongSelf.placeholderNode.addBackdropNode(backgroundNode)
if let (rect, size) = strongSelf.absoluteRect {
strongSelf.updateAbsoluteRect(rect, within: size)
}
}
}
let foregroundColor = bubbleVariableColor(variableColor: item.presentationData.theme.theme.chat.message.stickerPlaceholderColor, wallpaper: item.presentationData.theme.wallpaper)
let shimmeringColor = bubbleVariableColor(variableColor: item.presentationData.theme.theme.chat.message.stickerPlaceholderShimmerColor, wallpaper: item.presentationData.theme.wallpaper)
strongSelf.placeholderNode.update(backgroundColor: nil, foregroundColor: foregroundColor, shimmeringColor: shimmeringColor, data: immediateThumbnailData, size: animationNodeFrame.size, imageSize: file.dimensions?.cgSize ?? CGSize(width: 512.0, height: 512.0))

View File

@ -13,6 +13,7 @@ import StickerResources
import ContextUI
import Markdown
import ShimmerEffect
import WallpaperBackgroundNode
private let nameFont = Font.medium(14.0)
private let inlineBotPrefixFont = Font.regular(14.0)
@ -22,6 +23,7 @@ class ChatMessageStickerItemNode: ChatMessageItemView {
let contextSourceNode: ContextExtractedContentContainingNode
private let containerNode: ContextControllerSourceNode
let imageNode: TransformImageNode
private var backgroundNode: WallpaperBackgroundNode.BubbleBackgroundNode?
private var placeholderNode: StickerShimmerEffectNode
var textNode: TextNode?
@ -249,6 +251,16 @@ class ChatMessageStickerItemNode: ChatMessageItemView {
rect.origin.y = containerSize.height - rect.maxY + self.insets.top
self.placeholderNode.updateAbsoluteRect(CGRect(origin: CGPoint(x: rect.minX + placeholderNode.frame.minX, y: rect.minY + placeholderNode.frame.minY), size: placeholderNode.frame.size), within: containerSize)
if let backgroundNode = self.backgroundNode {
backgroundNode.update(rect: CGRect(origin: CGPoint(x: rect.minX + self.placeholderNode.frame.minX, y: rect.minY + self.placeholderNode.frame.minY), size: self.placeholderNode.frame.size), within: containerSize)
}
}
}
override func applyAbsoluteOffset(value: CGPoint, animationCurve: ContainedViewLayoutTransitionCurve, duration: Double) {
if let backgroundNode = self.backgroundNode {
backgroundNode.offset(value: value, animationCurve: animationCurve, duration: duration)
}
}
@ -644,6 +656,17 @@ class ChatMessageStickerItemNode: ChatMessageItemView {
strongSelf.enableSynchronousImageApply = false
if let immediateThumbnailData = telegramFile?.immediateThumbnailData {
if strongSelf.backgroundNode == nil {
if let backgroundNode = item.controllerInteraction.presentationContext.backgroundNode?.makeBubbleBackground(for: .free) {
strongSelf.backgroundNode = backgroundNode
strongSelf.placeholderNode.addBackdropNode(backgroundNode)
if let (rect, size) = strongSelf.absoluteRect {
strongSelf.updateAbsoluteRect(rect, within: size)
}
}
}
let foregroundColor = bubbleVariableColor(variableColor: item.presentationData.theme.theme.chat.message.stickerPlaceholderColor, wallpaper: item.presentationData.theme.wallpaper)
let shimmeringColor = bubbleVariableColor(variableColor: item.presentationData.theme.theme.chat.message.stickerPlaceholderShimmerColor, wallpaper: item.presentationData.theme.wallpaper)