Custom vibrance effect

This commit is contained in:
Isaac 2024-12-23 21:43:25 +08:00
parent 288f7820df
commit d9957ecf4e
14 changed files with 82 additions and 68 deletions

View File

@ -796,6 +796,10 @@ public extension CALayer {
static func luminanceToAlpha() -> NSObject? {
return makeLuminanceToAlphaFilter()
}
static func colorInvert() -> NSObject? {
return makeColorInvertFilter()
}
}
public extension CALayer {

View File

@ -40,7 +40,8 @@ final class ReactionContextBackgroundNode: ASDisplayNode {
private let smallCircleSize: CGFloat
private let backgroundView: BlurredBackgroundView
private(set) var vibrancyEffectView: UIVisualEffectView?
private let backgroundTintView: UIView
let backgroundTintMaskContainer: UIView
let vibrantExpandedContentContainer: UIView
private let maskLayer: SimpleLayer
@ -58,7 +59,10 @@ final class ReactionContextBackgroundNode: ASDisplayNode {
self.largeCircleSize = largeCircleSize
self.smallCircleSize = smallCircleSize
self.backgroundView = BlurredBackgroundView(color: .clear, enableBlur: true)
self.backgroundView = BlurredBackgroundView(color: nil, enableBlur: true)
self.backgroundTintView = UIView()
self.backgroundTintMaskContainer = UIView()
self.maskLayer = SimpleLayer()
self.backgroundClippingLayer = SimpleLayer()
@ -86,6 +90,7 @@ final class ReactionContextBackgroundNode: ASDisplayNode {
}
self.vibrantExpandedContentContainer = UIView()
self.backgroundTintMaskContainer.addSubview(self.vibrantExpandedContentContainer)
super.init()
@ -97,6 +102,10 @@ final class ReactionContextBackgroundNode: ASDisplayNode {
self.largeCircleShadowLayer.opacity = 0.0
self.smallCircleShadowLayer.opacity = 0.0
self.backgroundView.addSubview(self.backgroundTintView)
self.backgroundTintMaskContainer.backgroundColor = .white
self.view.addSubview(self.backgroundView)
self.maskLayer.addSublayer(self.smallCircleLayer)
@ -132,31 +141,24 @@ final class ReactionContextBackgroundNode: ASDisplayNode {
if self.theme !== theme {
self.theme = theme
if theme.overallDarkAppearance && !forceDark {
if let vibrancyEffectView = self.vibrancyEffectView {
self.vibrancyEffectView = nil
vibrancyEffectView.removeFromSuperview()
if theme.overallDarkAppearance {
if let invertFilter = CALayer.colorInvert(), let filter = CALayer.luminanceToAlpha() {
self.backgroundTintMaskContainer.layer.filters = [invertFilter, filter]
}
self.backgroundTintView.mask = self.backgroundTintMaskContainer
self.backgroundView.updateColor(color: theme.contextMenu.backgroundColor, forceKeepBlur: true, transition: .immediate)
self.backgroundTintView.backgroundColor = UIColor(white: 1.0, alpha: 0.5)
} else {
if self.vibrancyEffectView == nil {
let style: UIBlurEffect.Style
if forceDark {
style = .dark
} else {
style = .extraLight
}
let blurEffect = UIBlurEffect(style: style)
let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
self.vibrancyEffectView = vibrancyEffectView
vibrancyEffectView.contentView.addSubview(self.vibrantExpandedContentContainer)
self.backgroundView.addSubview(vibrancyEffectView)
if let filter = CALayer.luminanceToAlpha() {
self.backgroundTintMaskContainer.layer.filters = [filter]
}
self.backgroundTintView.mask = self.backgroundTintMaskContainer
self.backgroundView.updateColor(color: .clear, forceKeepBlur: true, transition: .immediate)
self.backgroundTintView.backgroundColor = theme.contextMenu.backgroundColor
}
self.backgroundView.updateColor(color: theme.contextMenu.backgroundColor, transition: .immediate)
//self.backgroundView.updateColor(color: UIColor(white: 1.0, alpha: 0.0), forceKeepBlur: true, transition: .immediate)
let shadowColor = UIColor(white: 0.0, alpha: 0.4)
if let image = generateBubbleShadowImage(shadow: shadowColor, diameter: 46.0, shadowBlur: shadowInset) {
@ -213,9 +215,8 @@ final class ReactionContextBackgroundNode: ASDisplayNode {
transition.updateFrame(view: self.backgroundView, frame: contentBounds, beginWithCurrentState: true)
self.backgroundView.update(size: contentBounds.size, transition: transition)
if let vibrancyEffectView = self.vibrancyEffectView {
transition.updateFrame(view: vibrancyEffectView, frame: CGRect(origin: CGPoint(x: 10.0, y: 10.0), size: contentBounds.size), beginWithCurrentState: true)
}
transition.updateFrame(view: self.backgroundTintView, frame: CGRect(origin: CGPoint(x: -contentBounds.minX, y: -contentBounds.minY), size: contentBounds.size))
transition.updateFrame(view: self.backgroundTintMaskContainer, frame: CGRect(origin: CGPoint(), size: contentBounds.size))
}
func animateIn() {

View File

@ -130,7 +130,7 @@ private final class ExpandItemView: UIView {
override init(frame: CGRect) {
self.tintView = UIView()
self.tintView.backgroundColor = .white
self.tintView.backgroundColor = .black
self.arrowView = UIImageView()
self.arrowView.image = generateTintedImage(image: UIImage(bundleImageName: "Chat/Context Menu/ReactionExpandArrow"), color: .white)
@ -187,9 +187,9 @@ private final class TitleLabelView: UIView {
return nil
})
let tintBody = MarkdownAttributeSet(font: Font.regular(13.0), textColor: .white)
let tintBold = MarkdownAttributeSet(font: Font.semibold(13.0), textColor: .white)
let tintLink = MarkdownAttributeSet(font: Font.regular(13.0), textColor: .white, additionalAttributes: [TelegramTextAttributes.URL: true as NSNumber])
let tintBody = MarkdownAttributeSet(font: Font.regular(13.0), textColor: .black)
let tintBold = MarkdownAttributeSet(font: Font.semibold(13.0), textColor: .black)
let tintLink = MarkdownAttributeSet(font: Font.regular(13.0), textColor: .black, additionalAttributes: [TelegramTextAttributes.URL: true as NSNumber])
let tintAttributes = MarkdownAttributes(body: tintBody, bold: tintBold, link: tintLink, linkAttribute: { _ in
return (TelegramTextAttributes.URL, "")
})
@ -1593,10 +1593,8 @@ public final class ReactionContextNode: ASDisplayNode, ASScrollViewDelegate {
transition: transition
)
if let vibrancyEffectView = self.backgroundNode.vibrancyEffectView {
if self.contentTintContainer.view.superview !== vibrancyEffectView.contentView {
vibrancyEffectView.contentView.addSubview(self.contentTintContainer.view)
}
if self.contentTintContainer.view.superview !== self.backgroundNode.backgroundTintMaskContainer {
self.backgroundNode.backgroundTintMaskContainer.addSubview(self.contentTintContainer.view)
}
if let animateInFromAnchorRect = animateInFromAnchorRect, !self.reduceMotion {
@ -2431,7 +2429,7 @@ public final class ReactionContextNode: ASDisplayNode, ASScrollViewDelegate {
chatPeerId: nil,
peekBehavior: nil,
customLayout: emojiContentLayout,
externalBackground: self.backgroundNode.vibrancyEffectView == nil ? nil : EmojiPagerContentComponent.ExternalBackground(
externalBackground: self.backgroundNode.backgroundTintMaskContainer.isHidden ? nil : EmojiPagerContentComponent.ExternalBackground(
effectContainerView: self.backgroundNode.vibrantExpandedContentContainer
),
externalExpansionView: self.view,

View File

@ -417,7 +417,7 @@ public final class EmojiKeyboardItemLayer: MultiAnimationRenderTarget {
let color = theme.chat.inputMediaPanel.panelContentVibrantOverlayColor
iconLayer.contents = generateIcon(color: color)?.cgImage
tintIconLayer.contents = generateIcon(color: .white)?.cgImage
tintIconLayer.contents = generateIcon(color: .black)?.cgImage
tintIconLayer.isHidden = !needsVibrancy
}

View File

@ -1342,9 +1342,10 @@ public final class EmojiPagerContentComponent: Component {
private var isSearchActivated: Bool = false
private let backgroundView: BlurredBackgroundView
private let backgroundTintView: UIView
private var fadingMaskLayer: FadingMaskLayer?
private var vibrancyClippingView: UIView
private var vibrancyEffectView: UIVisualEffectView?
private var vibrancyEffectView: UIView?
public private(set) var mirrorContentClippingView: UIView?
private let mirrorContentScrollView: UIView
private var warpView: WarpView?
@ -1398,6 +1399,7 @@ public final class EmojiPagerContentComponent: Component {
override init(frame: CGRect) {
self.backgroundView = BlurredBackgroundView(color: nil)
self.backgroundTintView = UIView()
if ProcessInfo.processInfo.processorCount > 4 {
self.shimmerHostView = PortalSourceView()
@ -1423,6 +1425,7 @@ public final class EmojiPagerContentComponent: Component {
super.init(frame: frame)
self.backgroundView.addSubview(self.backgroundTintView)
self.addSubview(self.backgroundView)
if let shimmerHostView = self.shimmerHostView {
@ -1618,7 +1621,7 @@ public final class EmojiPagerContentComponent: Component {
if let mirrorContentClippingView = self.mirrorContentClippingView {
mirrorContentClippingView.addSubview(self.mirrorContentScrollView)
} else if let vibrancyEffectView = self.vibrancyEffectView {
vibrancyEffectView.contentView.addSubview(self.mirrorContentScrollView)
vibrancyEffectView.addSubview(self.mirrorContentScrollView)
}
mirrorContentWarpView.removeFromSuperview()
@ -3172,7 +3175,7 @@ public final class EmojiPagerContentComponent: Component {
}
groupBorderLayer.strokeColor = borderColor.cgColor
groupBorderLayer.tintContainerLayer.strokeColor = UIColor.white.cgColor
groupBorderLayer.tintContainerLayer.strokeColor = UIColor.black.cgColor
groupBorderLayer.lineWidth = 1.6
groupBorderLayer.lineCap = .round
groupBorderLayer.fillColor = nil
@ -3584,7 +3587,7 @@ public final class EmojiPagerContentComponent: Component {
itemSelectionLayer.tintContainerLayer.backgroundColor = UIColor.clear.cgColor
} else {
itemSelectionLayer.backgroundColor = keyboardChildEnvironment.theme.chat.inputMediaPanel.panelContentControlVibrantSelectionColor.cgColor
itemSelectionLayer.tintContainerLayer.backgroundColor = UIColor(white: 1.0, alpha: 0.2).cgColor
itemSelectionLayer.tintContainerLayer.backgroundColor = UIColor(white: 0.0, alpha: 0.2).cgColor
}
}
@ -4009,15 +4012,15 @@ public final class EmojiPagerContentComponent: Component {
}
} else {
if self.vibrancyEffectView == nil {
let style: UIBlurEffect.Style
style = .extraLight
let blurEffect = UIBlurEffect(style: style)
let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
let vibrancyEffectView = UIView()
vibrancyEffectView.backgroundColor = .white
if let filter = CALayer.luminanceToAlpha() {
vibrancyEffectView.layer.filters = [filter]
}
self.vibrancyEffectView = vibrancyEffectView
self.backgroundView.addSubview(vibrancyEffectView)
self.backgroundTintView.mask = vibrancyEffectView
self.vibrancyClippingView.addSubview(self.mirrorContentScrollView)
vibrancyEffectView.contentView.addSubview(self.vibrancyClippingView)
vibrancyEffectView.addSubview(self.vibrancyClippingView)
}
}
@ -4046,7 +4049,11 @@ public final class EmojiPagerContentComponent: Component {
if hideBackground {
backgroundColor = backgroundColor.withAlphaComponent(0.01)
}
self.backgroundView.updateColor(color: backgroundColor, enableBlur: true, forceKeepBlur: false, transition: transition.containedViewLayoutTransition)
self.backgroundTintView.backgroundColor = backgroundColor
transition.setFrame(view: self.backgroundTintView, frame: CGRect(origin: CGPoint(), size: backgroundFrame.size))
self.backgroundView.updateColor(color: .clear, enableBlur: true, forceKeepBlur: true, transition: transition.containedViewLayoutTransition)
transition.setFrame(view: self.backgroundView, frame: backgroundFrame)
self.backgroundView.update(size: backgroundFrame.size, transition: transition.containedViewLayoutTransition)
@ -4652,7 +4659,7 @@ public final class EmojiPagerContentComponent: Component {
if let mirrorContentClippingView = self.mirrorContentClippingView {
mirrorContentClippingView.addSubview(visibleEmptySearchResultsView.tintContainerView)
} else if let vibrancyEffectView = self.vibrancyEffectView {
vibrancyEffectView.contentView.addSubview(visibleEmptySearchResultsView.tintContainerView)
vibrancyEffectView.addSubview(visibleEmptySearchResultsView.tintContainerView)
}
}
let emptySearchResultsSize = CGSize(width: availableSize.width, height: availableSize.height - itemLayout.searchInsets.top - itemLayout.searchHeight)

View File

@ -389,7 +389,7 @@ public final class EmojiSearchHeaderView: UIView, UITextFieldDelegate {
self.clearIconView.image = generateTintedImage(image: UIImage(bundleImageName: "Components/Search Bar/Clear"), color: .white)?.withRenderingMode(.alwaysTemplate)
self.clearIconView.tintColor = useOpaqueTheme ? theme.chat.inputMediaPanel.panelContentOpaqueSearchOverlayColor : theme.chat.inputMediaPanel.panelContentVibrantSearchOverlayColor
self.clearIconTintView.image = generateTintedImage(image: UIImage(bundleImageName: "Components/Search Bar/Clear"), color: .white)
self.clearIconTintView.image = generateTintedImage(image: UIImage(bundleImageName: "Components/Search Bar/Clear"), color: .black)
}
self.params = params
@ -402,13 +402,13 @@ public final class EmojiSearchHeaderView: UIView, UITextFieldDelegate {
if theme.overallDarkAppearance && forceNeedsVibrancy {
self.backgroundLayer.backgroundColor = theme.chat.inputMediaPanel.panelContentControlVibrantSelectionColor.withMultipliedAlpha(0.3).cgColor
self.tintBackgroundLayer.backgroundColor = UIColor(white: 1.0, alpha: 0.2).cgColor
self.tintBackgroundLayer.backgroundColor = UIColor(white: 0.0, alpha: 0.2).cgColor
} else if useOpaqueTheme {
self.backgroundLayer.backgroundColor = theme.chat.inputMediaPanel.panelContentControlOpaqueSelectionColor.cgColor
self.tintBackgroundLayer.backgroundColor = UIColor.white.cgColor
self.tintBackgroundLayer.backgroundColor = UIColor.black.cgColor
} else {
self.backgroundLayer.backgroundColor = theme.chat.inputMediaPanel.panelContentControlVibrantSelectionColor.cgColor
self.tintBackgroundLayer.backgroundColor = UIColor(white: 1.0, alpha: 0.2).cgColor
self.tintBackgroundLayer.backgroundColor = UIColor(white: 0.0, alpha: 0.2).cgColor
}
self.backgroundLayer.cornerRadius = inputHeight * 0.5
@ -436,7 +436,7 @@ public final class EmojiSearchHeaderView: UIView, UITextFieldDelegate {
component: AnyComponent(Text(
text: strings.Common_Cancel,
font: Font.regular(17.0),
color: .white
color: .black
)),
environment: {},
containerSize: CGSize(width: size.width - 32.0, height: 100.0)

View File

@ -514,7 +514,7 @@ final class EmojiSearchSearchBarComponent: Component {
containerSize: itemLayout.itemSize
)
itemView.tintView.tintColor = .white
itemView.tintView.tintColor = .black
if let view = itemView.view.view as? LottieComponent.View {
if view.superview == nil {
@ -592,7 +592,7 @@ final class EmojiSearchSearchBarComponent: Component {
let selectedItemCenter = itemLayout.frame(at: index).center
let selectionSize = CGSize(width: 28.0, height: 28.0)
self.selectedItemBackground.backgroundColor = selectedColor.cgColor
self.selectedItemTintBackground.backgroundColor = UIColor(white: 1.0, alpha: 0.15).cgColor
self.selectedItemTintBackground.backgroundColor = UIColor(white: 0.0, alpha: 0.15).cgColor
self.selectedItemBackground.cornerRadius = selectionSize.height * 0.5
self.selectedItemTintBackground.cornerRadius = selectionSize.height * 0.5
@ -678,7 +678,7 @@ final class EmojiSearchSearchBarComponent: Component {
component: AnyComponent(Text(
text: component.strings.Common_Search,
font: Font.regular(17.0),
color: .white
color: .black
)),
environment: {},
containerSize: CGSize(width: availableSize.width - 32.0, height: 100.0)

View File

@ -443,7 +443,7 @@ final class EmojiSearchStatusComponent: Component {
overlayColor = component.useOpaqueTheme ? component.theme.chat.inputMediaPanel.panelContentOpaqueSearchOverlayColor : component.theme.chat.inputMediaPanel.panelContentVibrantSearchOverlayColor
}
let baseColor: UIColor = .white
let baseColor: UIColor = .black
if self.contentView.tintColor != overlayColor {
self.contentView.tintColor = overlayColor

View File

@ -68,7 +68,7 @@ final class EmptySearchResultsView: UIView {
)
let _ = self.titleTintLabel.update(
transition: .immediate,
component: AnyComponent(Text(text: text, font: Font.regular(15.0), color: .white)),
component: AnyComponent(Text(text: text, font: Font.regular(15.0), color: .black)),
environment: {},
containerSize: CGSize(width: size.width, height: 100.0)
)

View File

@ -88,7 +88,7 @@ final class GroupExpandActionButton: UIButton {
} else {
self.backgroundLayer.backgroundColor = theme.chat.inputMediaPanel.panelContentControlVibrantOverlayColor.cgColor
}
self.tintContainerLayer.backgroundColor = UIColor.white.cgColor
self.tintContainerLayer.backgroundColor = UIColor.black.cgColor
let textSize: CGSize
if let currentTextLayout = self.currentTextLayout, currentTextLayout.string == title, currentTextLayout.color == color, currentTextLayout.constrainedWidth == textConstrainedWidth {

View File

@ -100,7 +100,7 @@ final class GroupHeaderActionButton: UIButton {
}
self.backgroundLayer.backgroundColor = backgroundColor.cgColor
self.tintBackgroundLayer.backgroundColor = UIColor.white.withAlphaComponent(0.2).cgColor
self.tintBackgroundLayer.backgroundColor = UIColor.black.withAlphaComponent(0.2).cgColor
self.tintContainerLayer.isHidden = !needsVibrancy
@ -110,7 +110,7 @@ final class GroupHeaderActionButton: UIButton {
} else {
let font: UIFont = compact ? Font.medium(11.0) : Font.semibold(15.0)
let string = NSAttributedString(string: title.uppercased(), font: font, textColor: foregroundColor)
let tintString = NSAttributedString(string: title.uppercased(), font: font, textColor: .white)
let tintString = NSAttributedString(string: title.uppercased(), font: font, textColor: .black)
let stringBounds = string.boundingRect(with: CGSize(width: textConstrainedWidth, height: 100.0), options: .usesLineFragmentOrigin, context: nil)
textSize = CGSize(width: ceil(stringBounds.width), height: ceil(stringBounds.height))
self.textLayer.contents = generateImage(textSize, opaque: false, scale: 0.0, rotatedContext: { size, context in

View File

@ -172,7 +172,7 @@ final class GroupHeaderLayer: UIView {
clearSize = image.size
clearIconLayer.contents = image.cgImage
}
if updateImage, let image = PresentationResourcesChat.chatInputMediaPanelGridDismissImage(theme, color: .white) {
if updateImage, let image = PresentationResourcesChat.chatInputMediaPanelGridDismissImage(theme, color: .black) {
tintClearIconLayer.contents = image.cgImage
}
@ -215,7 +215,7 @@ final class GroupHeaderLayer: UIView {
stringValue = title
}
let string = NSAttributedString(string: stringValue, font: font, textColor: color)
let whiteString = NSAttributedString(string: stringValue, font: font, textColor: .white)
let whiteString = NSAttributedString(string: stringValue, font: font, textColor: .black)
let stringBounds = string.boundingRect(with: CGSize(width: textConstrainedWidth, height: 18.0), options: [.usesLineFragmentOrigin, .truncatesLastVisibleLine], context: nil)
textSize = CGSize(width: ceil(stringBounds.width), height: ceil(stringBounds.height))
self.textLayer.contents = generateImage(textSize, opaque: false, scale: 0.0, rotatedContext: { size, context in
@ -231,7 +231,6 @@ final class GroupHeaderLayer: UIView {
context.clear(CGRect(origin: CGPoint(), size: size))
UIGraphicsPushContext(context)
//whiteString.draw(in: stringBounds)
whiteString.draw(with: stringBounds, options: [.usesLineFragmentOrigin, .truncatesLastVisibleLine], context: nil)
UIGraphicsPopContext()
@ -287,7 +286,7 @@ final class GroupHeaderLayer: UIView {
self.tintBadgeLayer = tintBadgeLayer
self.tintContentLayer.addSublayer(tintBadgeLayer)
if let image = generateBadgeImage(color: .white) {
if let image = generateBadgeImage(color: .black) {
tintBadgeLayer.contents = image.cgImage
}
}
@ -342,7 +341,7 @@ final class GroupHeaderLayer: UIView {
self.tintLockIconLayer = tintLockIconLayer
self.tintContentLayer.addSublayer(tintLockIconLayer)
}
if let image = PresentationResourcesChat.chatEntityKeyboardLock(theme, color: .white) {
if let image = PresentationResourcesChat.chatEntityKeyboardLock(theme, color: .black) {
tintLockIconLayer.contents = image.cgImage
tintLockIconLayer.frame = lockIconLayer.frame
tintLockIconLayer.isHidden = !needsVibrancy
@ -368,7 +367,7 @@ final class GroupHeaderLayer: UIView {
subtitleSize = currentSubtitleLayout.size
} else {
let string = NSAttributedString(string: subtitle, font: Font.regular(15.0), textColor: subtitleColor)
let whiteString = NSAttributedString(string: subtitle, font: Font.regular(15.0), textColor: .white)
let whiteString = NSAttributedString(string: subtitle, font: Font.regular(15.0), textColor: .black)
let stringBounds = string.boundingRect(with: CGSize(width: textConstrainedWidth, height: 100.0), options: .usesLineFragmentOrigin, context: nil)
subtitleSize = CGSize(width: ceil(stringBounds.width), height: ceil(stringBounds.height))
updateSubtitleContents = generateImage(subtitleSize, opaque: false, scale: 0.0, rotatedContext: { size, context in
@ -493,7 +492,7 @@ final class GroupHeaderLayer: UIView {
self.tintSeparatorLayer = tintSeparatorLayer
self.tintContentLayer.addSublayer(tintSeparatorLayer)
}
tintSeparatorLayer.backgroundColor = UIColor.white.cgColor
tintSeparatorLayer.backgroundColor = UIColor.black.cgColor
tintSeparatorLayer.frame = CGRect(origin: CGPoint(x: 0.0, y: 0.0), size: CGSize(width: size.width, height: UIScreenPixel))
tintSeparatorLayer.isHidden = !needsVibrancy

View File

@ -29,6 +29,7 @@ UIView * _Nullable getPortalViewSourceView(UIView * _Nonnull portalView);
NSObject * _Nullable makeBlurFilter();
NSObject * _Nullable makeLuminanceToAlphaFilter();
NSObject * _Nullable makeColorInvertFilter();
NSObject * _Nullable makeMonochromeFilter();
void setLayerDisableScreenshots(CALayer * _Nonnull layer, bool disableScreenshots);

View File

@ -234,6 +234,10 @@ NSObject * _Nullable makeLuminanceToAlphaFilter() {
return [(id<GraphicsFilterProtocol>)NSClassFromString(@"CAFilter") filterWithName:@"luminanceToAlpha"];
}
NSObject * _Nullable makeColorInvertFilter() {
return [(id<GraphicsFilterProtocol>)NSClassFromString(@"CAFilter") filterWithName:@"colorInvert"];
}
NSObject * _Nullable makeMonochromeFilter() {
return [(id<GraphicsFilterProtocol>)NSClassFromString(@"CAFilter") filterWithName:@"colorMonochrome"];
}