Voice Chat UI improvements

Telegram/Telegram-iOS/en.lproj/Localizable.strings

@@ -5952,7 +5952,6 @@ Sorry for the inconvenience.";
 "VoiceChat.UserInvited" = "You invited **%@** to the voice chat";
 
 "Notification.VoiceChatInvitation" = "%1$@ invited %2$@ to the voice chat";
-"Notification.VoiceChatInvitationByYou" = "You invited %1$@ to the voice chat";
 "Notification.VoiceChatInvitationForYou" = "%1$@ invited you to the voice chat";
 
 "Notification.VoiceChatStarted" = "Voice chat started";

submodules/PeerOnlineMarkerNode/Sources/PeerOnlineMarkerNode.swift

@@ -21,16 +21,19 @@ private final class VoiceChatIndicatorNode: ASDisplayNode {
     
     override init() {
         self.leftLine = ASDisplayNode()
+        self.leftLine.clipsToBounds = true
         self.leftLine.isLayerBacked = true
         self.leftLine.cornerRadius = 1.0
         self.leftLine.frame = CGRect(x: 6.0, y: 6.0, width: 2.0, height: 10.0)
         
         self.centerLine = ASDisplayNode()
+        self.centerLine.clipsToBounds = true
         self.centerLine.isLayerBacked = true
         self.centerLine.cornerRadius = 1.0
         self.centerLine.frame = CGRect(x: 10.0, y: 5.0, width: 2.0, height: 12.0)
         
         self.rightLine = ASDisplayNode()
+        self.rightLine.clipsToBounds = true
         self.rightLine.isLayerBacked = true
         self.rightLine.cornerRadius = 1.0
         self.rightLine.frame = CGRect(x: 14.0, y: 6.0, width: 2.0, height: 10.0)
@@ -69,21 +72,21 @@ private final class VoiceChatIndicatorNode: ASDisplayNode {
                 leftAnimation.timingFunctions = timingFunctions
                 leftAnimation.values = [NSNumber(value: 10.0), NSNumber(value: 4.0), NSNumber(value: 8.0), NSNumber(value: 4.0), NSNumber(value: 10.0)]
                 leftAnimation.repeatCount = Float.infinity
-                leftAnimation.duration = 2.0
+                leftAnimation.duration = 2.2
                 self.leftLine.layer.add(leftAnimation, forKey: "animation")
 
                 let centerAnimation = CAKeyframeAnimation(keyPath: "bounds.size.height")
                 centerAnimation.timingFunctions = timingFunctions
                 centerAnimation.values = [NSNumber(value: 6.0), NSNumber(value: 10.0), NSNumber(value: 4.0), NSNumber(value: 12.0), NSNumber(value: 6.0)]
                 centerAnimation.repeatCount = Float.infinity
-                centerAnimation.duration = 2.0
+                centerAnimation.duration = 2.2
                 self.centerLine.layer.add(centerAnimation, forKey: "animation")
                 
                 let rightAnimation = CAKeyframeAnimation(keyPath: "bounds.size.height")
                 rightAnimation.timingFunctions = timingFunctions
                 rightAnimation.values = [NSNumber(value: 10.0), NSNumber(value: 4.0), NSNumber(value: 8.0), NSNumber(value: 4.0), NSNumber(value: 10.0)]
                 rightAnimation.repeatCount = Float.infinity
-                rightAnimation.duration = 2.0
+                rightAnimation.duration = 2.2
                 self.rightLine.layer.add(rightAnimation, forKey: "animation")
             } else {
                 self.leftLine.layer.removeAnimation(forKey: "animation")

submodules/TelegramCallsUI/Sources/CallStatusBarNode.swift

@@ -14,14 +14,16 @@ private class CallStatusBarBackgroundNodeDrawingState: NSObject {
     let amplitude: CGFloat
     let phase: CGFloat
     let speaking: Bool
-    let transitionArguments: (startTime: Double, duration: Double)?
+    let gradientTransition: CGFloat
+    let gradientMovement: CGFloat
     
-    init(timestamp: Double, amplitude: CGFloat, phase: CGFloat, speaking: Bool, transitionArguments: (Double, Double)?) {
+    init(timestamp: Double, amplitude: CGFloat, phase: CGFloat, speaking: Bool, gradientTransition: CGFloat, gradientMovement: CGFloat) {
         self.timestamp = timestamp
         self.amplitude = amplitude
         self.phase = phase
         self.speaking = speaking
-        self.transitionArguments = transitionArguments
+        self.gradientTransition = gradientTransition
+        self.gradientMovement = gradientMovement
     }
 }
 
@@ -204,7 +206,10 @@ private class CallStatusBarBackgroundNode: ASDisplayNode {
     var presentationAudioLevel: CGFloat = 0.0
     var phase: CGFloat = 0.0
     
-    var transitionArguments: (Double, Double)?
+    private var gradientMovementArguments: (from: CGFloat, to: CGFloat, startTime: Double, duration: Double)?
+    private var gradientMovement: CGFloat = 0.0
+    
+    var transitionArguments: (startTime: Double, duration: Double)?
     var speaking = false {
         didSet {
             if self.speaking != oldValue {
@@ -226,6 +231,30 @@ private class CallStatusBarBackgroundNode: ASDisplayNode {
     func updateAnimations() {
         self.presentationAudioLevel = self.presentationAudioLevel * 0.9 + max(0.1, CGFloat(self.audioLevel)) * 0.1
         
+        if self.gradientMovementArguments == nil {
+            self.gradientMovementArguments = (0.0, 0.7, CACurrentMediaTime(), 1.0)
+        }
+        
+        let timestamp = CACurrentMediaTime()
+        if let (from, to, startTime, duration) = self.gradientMovementArguments, duration > 0.0 {
+            let progress = max(0.0, min(1.0, CGFloat((timestamp - startTime) / duration)))
+            self.gradientMovement = from + (to - from) * progress
+            if progress < 1.0 {
+            } else {
+                var nextTo: CGFloat
+                if to > 0.5 {
+                    nextTo = CGFloat.random(in: 0.0 ..< 0.3)
+                } else {
+                    if self.presentationAudioLevel > 0.3 {
+                        nextTo = CGFloat.random(in: 0.75 ..< 1.0)
+                    } else {
+                        nextTo = CGFloat.random(in: 0.5 ..< 1.0)
+                    }
+                }
+                self.gradientMovementArguments = (to, nextTo, timestamp, Double.random(in: 0.8 ..< 1.5))
+            }
+        }
+        
         let animator: ConstantDisplayLinkAnimator
         if let current = self.animator {
             animator = current
@@ -242,7 +271,18 @@ private class CallStatusBarBackgroundNode: ASDisplayNode {
     }
     
     override public func drawParameters(forAsyncLayer layer: _ASDisplayLayer) -> NSObjectProtocol? {
-        return CallStatusBarBackgroundNodeDrawingState(timestamp: CACurrentMediaTime(), amplitude: self.presentationAudioLevel, phase: self.phase, speaking: self.speaking, transitionArguments: self.transitionArguments)
+        let timestamp = CACurrentMediaTime()
+        
+        var gradientTransition: CGFloat = 0.0
+        gradientTransition = self.speaking ? 1.0 : 0.0
+        if let transition = self.transitionArguments {
+            gradientTransition = CGFloat((timestamp - transition.startTime) / transition.duration)
+            if !self.speaking {
+                gradientTransition = 1.0 - gradientTransition
+            }
+        }
+        
+        return CallStatusBarBackgroundNodeDrawingState(timestamp: timestamp, amplitude: self.presentationAudioLevel, phase: self.phase, speaking: self.speaking, gradientTransition: gradientTransition, gradientMovement: self.gradientMovement)
     }
 
     @objc override public class func draw(_ bounds: CGRect, withParameters parameters: Any?, isCancelled: () -> Bool, isRasterizing: Bool) {
@@ -259,18 +299,8 @@ private class CallStatusBarBackgroundNode: ASDisplayNode {
         }
         
         var locations: [CGFloat] = [0.0, 1.0]
-        
+        let leftColor = UIColor(rgb: 0x007fff).interpolateTo(UIColor(rgb: 0x2bb76b), fraction: parameters.gradientTransition)!
-        var gradientTransition: CGFloat = 0.0
+        let rightColor = UIColor(rgb: 0x00afff).interpolateTo(UIColor(rgb: 0x007fff), fraction: parameters.gradientTransition)!
-        gradientTransition = parameters.speaking ? 1.0 : 0.0
-        if let transition = parameters.transitionArguments {
-            gradientTransition = CGFloat((parameters.timestamp - transition.startTime) / transition.duration)
-            if !parameters.speaking {
-                gradientTransition = 1.0 - gradientTransition
-            }
-        }
-    
-        let leftColor = UIColor(rgb: 0x007fff).interpolateTo(UIColor(rgb: 0x2bb76b), fraction: gradientTransition)!
-        let rightColor = UIColor(rgb: 0x00afff).interpolateTo(UIColor(rgb: 0x007fff), fraction: gradientTransition)!
         let colors: [CGColor] = [leftColor.cgColor, rightColor.cgColor]
         
         let colorSpace = CGColorSpaceCreateDeviceRGB()
@@ -321,7 +351,7 @@ private class CallStatusBarBackgroundNode: ASDisplayNode {
                 context.setFillColor(UIColor(rgb: 0x007fff, alpha: 0.3).cgColor)
                 context.fill(bounds)
             } else {
-                context.drawLinearGradient(gradient, start: CGPoint(x: 0.0, y: 0.0), end: CGPoint(x: bounds.width, y: 0.0), options: CGGradientDrawingOptions())
+                context.drawLinearGradient(gradient, start: CGPoint(x: 0.0, y: 0.0), end: CGPoint(x: bounds.width + parameters.gradientMovement * bounds.width, y: 0.0), options: CGGradientDrawingOptions())
             }
             context.restoreGState()
         }

submodules/TelegramCallsUI/Sources/VoiceChatActionButton.swift

@@ -239,28 +239,10 @@ private final class Blob {
     }
     
     func updateAnimations() {
-        var animate = false
         let timestamp = CACurrentMediaTime()
-
-//        if let (startTime, duration) = self.gradientTransitionArguments, duration > 0.0 {
-//            if let fromLoop = self.fromLoop {
-//                if fromLoop {
-//                    self.gradientTransition = max(0.0, min(1.0, CGFloat((timestamp - startTime) / duration)))
-//                } else {
-//                    self.gradientTransition = max(0.0, min(1.0, 1.0 - CGFloat((timestamp - startTime) / duration)))
-//                }
-//            }
-//            if self.gradientTransition < 1.0 {
-//                animate = true
-//            } else {
-//                self.gradientTransitionArguments = nil
-//            }
-//        }
-
         if let (startTime, duration) = self.transitionArguments, duration > 0.0 {
             self.transition = max(0.0, min(1.0, CGFloat((timestamp - startTime) / duration)))
             if self.transition < 1.0 {
-                animate = true
             } else {
                 if self.loop {
                     self.animateToNewShape()
@@ -272,27 +254,6 @@ private final class Blob {
                 }
             }
         }
-
-//        let gradientMovementStartTime: Double
-//        let gradientMovementDuration: Double
-//        let gradientMovementReverse: Bool
-//        if let (startTime, duration, reverse) = self.gradientMovementTransitionArguments, duration > 0.0 {
-//            gradientMovementStartTime = startTime
-//            gradientMovementDuration = duration
-//            gradientMovementReverse = reverse
-//        } else {
-//            gradientMovementStartTime = CACurrentMediaTime()
-//            gradientMovementDuration = 1.0
-//            gradientMovementReverse = false
-//            self.gradientMovementTransitionArguments = (gradientMovementStartTime, gradientMovementStartTime, gradientMovementReverse)
-//        }
-//        let movementT = CGFloat((timestamp - gradientMovementStartTime) / gradientMovementDuration)
-//        self.gradientMovementTransition = gradientMovementReverse ? 1.0 - movementT : movementT
-//        if gradientMovementReverse && self.gradientMovementTransition <= 0.0 {
-//            self.gradientMovementTransitionArguments = (CACurrentMediaTime(), 1.0, false)
-//        } else if !gradientMovementReverse && self.gradientMovementTransition >= 1.0 {
-//            self.gradientMovementTransitionArguments = (CACurrentMediaTime(), 1.0, true)
-//        }
     }
     
     private func generateNextBlob(for size: CGSize) -> [CGPoint] {
@@ -474,12 +435,14 @@ private class VoiceChatActionButtonBackgroundNodeDrawingState: NSObject {
     let timestamp: Double
     let state: VoiceChatActionButtonBackgroundNodeState
     let simplified: Bool
+    let gradientMovement: CGPoint
     let transition: VoiceChatActionButtonBackgroundNodeTransitionState?
     
-    init(timestamp: Double, state: VoiceChatActionButtonBackgroundNodeState, simplified: Bool, transition: VoiceChatActionButtonBackgroundNodeTransitionState?) {
+    init(timestamp: Double, state: VoiceChatActionButtonBackgroundNodeState, simplified: Bool, gradientMovement: CGPoint, transition: VoiceChatActionButtonBackgroundNodeTransitionState?) {
         self.timestamp = timestamp
         self.state = state
         self.simplified = simplified
+        self.gradientMovement = gradientMovement
         self.transition = transition
     }
 }
@@ -490,6 +453,9 @@ private class VoiceChatActionButtonBackgroundNode: ASDisplayNode {
     private var transition: VoiceChatActionButtonBackgroundNodeTransitionContext?
     private var simplified = false
     
+    private var gradientMovementArguments: (from: CGPoint, to: CGPoint, startTime: Double, duration: Double)?
+    private var gradientMovement = CGPoint()
+    
     var audioLevel: CGFloat = 0.0  {
         didSet {
             if let blobsState = self.state as? VoiceChatActionButtonBackgroundNodeBlobContext {
@@ -555,6 +521,29 @@ private class VoiceChatActionButtonBackgroundNode: ASDisplayNode {
             }
         }
         
+        if self.gradientMovementArguments == nil {
+            self.gradientMovementArguments = (CGPoint(), CGPoint(x: 0.25, y: 0.25), CACurrentMediaTime(), 1.5)
+        }
+        if let (from, to, startTime, duration) = self.gradientMovementArguments, duration > 0.0 {
+            let progress = max(0.0, min(1.0, CGFloat((timestamp - startTime) / duration)))
+            self.gradientMovement = CGPoint(x: from.x + (to.x - from.x) * progress, y: from.y + (to.y - from.y) * progress)
+            
+            if progress < 1.0 {
+            } else {
+                var nextTo: CGPoint
+                if presentationAudioLevel > 0.3 {
+                    nextTo = CGPoint(x: CGFloat.random(in: 0.0 ..< 0.1), y: CGFloat.random(in: 0.0 ..< 0.9))
+                } else {
+                    if to.x > 0.5 {
+                        nextTo = CGPoint(x: CGFloat.random(in: 0.0 ..< 0.4), y: CGFloat.random(in: 0.0 ..< 0.6))
+                    } else {
+                        nextTo = CGPoint(x: CGFloat.random(in: 0.5 ..< 1.0), y: CGFloat.random(in: 0.0 ..< 0.7))
+                    }
+                }
+                self.gradientMovementArguments = (to, nextTo, timestamp, Double.random(in: 1.2 ..< 2.0))
+            }
+        }
+        
         if self.state.isAnimating {
             animate = true
             self.state.updateAnimations()
@@ -581,7 +570,7 @@ private class VoiceChatActionButtonBackgroundNode: ASDisplayNode {
     
     override public func drawParameters(forAsyncLayer layer: _ASDisplayLayer) -> NSObjectProtocol? {
         let timestamp = CACurrentMediaTime()
-        return VoiceChatActionButtonBackgroundNodeDrawingState(timestamp: timestamp, state: self.state.drawingState(), simplified: self.simplified, transition: self.transition?.drawingTransitionState(time: timestamp))
+        return VoiceChatActionButtonBackgroundNodeDrawingState(timestamp: timestamp, state: self.state.drawingState(), simplified: self.simplified, gradientMovement: self.gradientMovement, transition: self.transition?.drawingTransitionState(time: timestamp))
     }
 
     @objc override public class func draw(_ bounds: CGRect, withParameters parameters: Any?, isCancelled: () -> Bool, isRasterizing: Bool) {
@@ -601,7 +590,9 @@ private class VoiceChatActionButtonBackgroundNode: ASDisplayNode {
         let buttonSize = CGSize(width: 144.0, height: 144.0)
         let radius = buttonSize.width / 2.0
         
-        var gradientCenter = CGPoint(x: bounds.size.width - 30.0, y: 50.0)
+        var gradientCenter = CGPoint(x: bounds.size.width, y: 50.0)
+        gradientCenter.x -= 90.0 * parameters.gradientMovement.x
+        gradientCenter.y += 120.0 * parameters.gradientMovement.y
         
         var gradientTransition: CGFloat = 0.0
         var gradientImage: UIImage? = parameters.state.blueGradient

submodules/TelegramUI/Sources/ChatMessageAnimatedStickerItemNode.swift

@@ -872,7 +872,6 @@ class ChatMessageAnimatedStickerItemNode: ChatMessageItemView {
             
             let contentHeight = max(imageSize.height, layoutConstants.image.minDimensions.height)
             
-            
             var forwardSource: Peer?
             var forwardAuthorSignature: String?
             var forwardPsaType: String?