Video improvements

Author: Isaac

submodules/GalleryUI/BUILD

@@ -58,7 +58,9 @@ swift_library(
         "//submodules/TelegramUI/Components/RasterizedCompositionComponent",
         "//submodules/TelegramUI/Components/BadgeComponent",
         "//submodules/TelegramUI/Components/AnimatedTextComponent",
+        "//submodules/TelegramUI/Components/LottieComponent",
         "//submodules/Components/MultilineTextComponent",
+        "//submodules/Components/BalancedTextComponent",
         "//submodules/Components/ComponentDisplayAdapters",
         "//submodules/ComponentFlow",
     ],

submodules/GalleryUI/Sources/GalleryRateToastAnimationComponent.swift

@@ -5,17 +5,27 @@ import ComponentFlow
 import AppBundle
 
 final class GalleryRateToastAnimationComponent: Component {
-    init() {
+    let speedFraction: CGFloat
+    
+    init(speedFraction: CGFloat) {
+        self.speedFraction = speedFraction
     }
 
     static func ==(lhs: GalleryRateToastAnimationComponent, rhs: GalleryRateToastAnimationComponent) -> Bool {
+        if lhs.speedFraction != rhs.speedFraction {
+            return false
+        }
         return true
     }
 
     final class View: UIView {
         private let itemViewContainer: UIView
         private var itemViews: [UIImageView] = []
 
+        private var link: SharedDisplayLinkDriver.Link?
+        private var timeValue: CGFloat = 0.0
+        private var speedFraction: CGFloat = 1.0
+        
         override init(frame: CGRect) {
             self.itemViewContainer = UIView()
 
@@ -36,49 +46,60 @@ final class GalleryRateToastAnimationComponent: Component {
             fatalError("init(coder:) has not been implemented")
         }
 
+        deinit {
+            self.link?.invalidate()
+        }
+        
         private func setupAnimations() {
-            let beginTime = self.layer.convertTime(CACurrentMediaTime(), from: nil)
-            
-            for i in 0 ..< self.itemViews.count {
-                if self.itemViews[i].layer.animation(forKey: "idle-opacity") != nil {
-                    continue
+            if self.link == nil {
+                var previousTimestamp = CACurrentMediaTime()
+                self.link = SharedDisplayLinkDriver.shared.add { [weak self] _ in
+                    guard let self else {
+                        return
+                    }
+                    
+                    let timestamp = CACurrentMediaTime()
+                    let deltaMultiplier = 1.0 * (1.0 - self.speedFraction) + 3.0 * self.speedFraction
+                    let deltaTime = (timestamp - previousTimestamp) * deltaMultiplier
+                    previousTimestamp = timestamp
+                    
+                    self.timeValue += deltaTime
+                    
+                    let duration: CGFloat = 1.2
+                    
+                    for i in 0 ..< self.itemViews.count {
+                        var itemFraction = (self.timeValue + CGFloat(i) * 0.1).truncatingRemainder(dividingBy: duration) / duration
+                        
+                        if itemFraction >= 0.5 {
+                            itemFraction = (1.0 - itemFraction) / 0.5
+                        } else {
+                            itemFraction = itemFraction / 0.5
+                        }
+                        
+                        let itemAlpha = 0.6 * (1.0 - itemFraction) + 1.0 * itemFraction
+                        let itemScale = 0.9 * (1.0 - itemFraction) + 1.1 * itemFraction
+                        
+                        self.itemViews[i].alpha = itemAlpha
+                        self.itemViews[i].transform = CGAffineTransformMakeScale(itemScale, itemScale)
+                    }
                 }
-                
-                let delay = Double(i) * 0.1
-                
-                let animation = CABasicAnimation(keyPath: "opacity")
-                animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
-                animation.beginTime = beginTime + delay
-                animation.fromValue = 0.6 as NSNumber
-                animation.toValue = 1.0 as NSNumber
-                animation.repeatCount = Float.infinity
-                animation.autoreverses = true
-                animation.fillMode = .both
-                animation.duration = 0.4
-                self.itemViews[i].layer.add(animation, forKey: "idle-opacity")
-                
-                let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
-                scaleAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
-                scaleAnimation.beginTime = beginTime + delay
-                scaleAnimation.fromValue = 0.9 as NSNumber
-                scaleAnimation.toValue = 1.1 as NSNumber
-                scaleAnimation.repeatCount = Float.infinity
-                scaleAnimation.autoreverses = true
-                scaleAnimation.fillMode = .both
-                scaleAnimation.duration = 0.4
-                self.itemViews[i].layer.add(scaleAnimation, forKey: "idle-scale")
             }
         }
 
         func update(component: GalleryRateToastAnimationComponent, availableSize: CGSize, state: EmptyComponentState, environment: Environment<Empty>, transition: ComponentTransition) -> CGSize {
+            self.speedFraction = component.speedFraction
+            
             let itemSize = self.itemViews[0].image?.size ?? CGSize(width: 10.0, height: 10.0)
             let itemSpacing: CGFloat = 1.0
 
             let size = CGSize(width: itemSize.width * 2.0 + itemSpacing, height: 12.0)
 
             for i in 0 ..< self.itemViews.count {
                 let itemFrame = CGRect(origin: CGPoint(x: CGFloat(i) * (itemSize.width + itemSpacing), y: UIScreenPixel), size: itemSize)
-                self.itemViews[i].frame = itemFrame
+                self.itemViews[i].center = itemFrame.center
+                self.itemViews[i].bounds = CGRect(origin: CGPoint(), size: itemFrame.size)
+                
+                self.itemViews[i].layer.speed = Float(1.0 * (1.0 - component.speedFraction) + 2.0 * component.speedFraction)
             }
 
             self.setupAnimations()

submodules/GalleryUI/Sources/GalleryRateToastComponent.swift

@@ -3,20 +3,26 @@ import UIKit
 import Display
 import ComponentFlow
 import AppBundle
-import MultilineTextComponent
+import BalancedTextComponent
 import AnimatedTextComponent
+import LottieComponent
 
 final class GalleryRateToastComponent: Component {
     let rate: Double
+    let displayTooltip: String?
 
-    init(rate: Double) {
+    init(rate: Double, displayTooltip: String?) {
         self.rate = rate
+        self.displayTooltip = displayTooltip
     }
 
     static func ==(lhs: GalleryRateToastComponent, rhs: GalleryRateToastComponent) -> Bool {
         if lhs.rate != rhs.rate {
             return false
         }
+        if lhs.displayTooltip != rhs.displayTooltip {
+            return false
+        }
         return true
     }
 
@@ -25,6 +31,14 @@ final class GalleryRateToastComponent: Component {
         private let text = ComponentView<Empty>()
         private let arrows = ComponentView<Empty>()
 
+        private var tooltipText: ComponentView<Empty>?
+        private var tooltipAnimation: ComponentView<Empty>?
+        
+        private var tooltipIsHidden: Bool = false
+        private var tooltipTimer: Foundation.Timer?
+        
+        private weak var state: EmptyComponentState?
+        
         override init(frame: CGRect) {
             super.init(frame: frame)
         }
@@ -33,7 +47,13 @@ final class GalleryRateToastComponent: Component {
             fatalError("init(coder:) has not been implemented")
         }
 
+        deinit {
+            self.tooltipTimer?.invalidate()
+        }
+        
         func update(component: GalleryRateToastComponent, availableSize: CGSize, state: EmptyComponentState, environment: Environment<Empty>, transition: ComponentTransition) -> CGSize {
+            self.state = state
+            
             let insets = UIEdgeInsets(top: 5.0, left: 11.0, bottom: 5.0, right: 16.0)
             let spacing: CGFloat = 5.0
 
@@ -55,17 +75,19 @@ final class GalleryRateToastComponent: Component {
             let textSize = self.text.update(
                 transition: transition,
                 component: AnyComponent(AnimatedTextComponent(
-                    font: Font.semibold(17.0),
+                    font: Font.with(size: 17.0, design: .round, weight: .semibold, traits: [.monospacedNumbers]),
                     color: .white,
                     items: textItems
                 )),
                 environment: {},
                 containerSize: CGSize(width: 100.0, height: 100.0)
             )
 
+            var speedFraction = (component.rate - 1.0) / (2.5 - 1.0)
+            speedFraction = max(0.0, min(1.0, speedFraction))
             let arrowsSize = self.arrows.update(
                 transition: transition,
-                component: AnyComponent(GalleryRateToastAnimationComponent()),
+                component: AnyComponent(GalleryRateToastAnimationComponent(speedFraction: speedFraction)),
                 environment: {},
                 containerSize: CGSize(width: 200.0, height: 100.0)
             )
@@ -82,15 +104,15 @@ final class GalleryRateToastComponent: Component {
                 environment: {},
                 containerSize: size
             )
-            let backgroundFrame = CGRect(origin: CGPoint(), size: size)
+            let backgroundFrame = CGRect(origin: CGPoint(x: floor((availableSize.width - size.width) * 0.5), y: 0.0), size: size)
             if let backgroundView = self.background.view {
                 if backgroundView.superview == nil {
                     self.addSubview(backgroundView)
                 }
                 transition.setFrame(view: backgroundView, frame: backgroundFrame)
             }
 
-            let textFrame = CGRect(origin: CGPoint(x: insets.left, y: floorToScreenPixels((size.height - textSize.height) * 0.5)), size: textSize)
+            let textFrame = CGRect(origin: CGPoint(x: backgroundFrame.minX + insets.left, y: backgroundFrame.minY + floorToScreenPixels((size.height - textSize.height) * 0.5)), size: textSize)
             if let textView = self.text.view {
                 if textView.superview == nil {
                     textView.layer.anchorPoint = CGPoint()
@@ -100,15 +122,105 @@ final class GalleryRateToastComponent: Component {
                 textView.bounds = CGRect(origin: CGPoint(), size: textFrame.size)
             }
 
-            let arrowsFrame = CGRect(origin: CGPoint(x: textFrame.maxX + spacing, y: floorToScreenPixels((size.height - arrowsSize.height) * 0.5)), size: arrowsSize)
+            let arrowsFrame = CGRect(origin: CGPoint(x: textFrame.maxX + spacing, y: backgroundFrame.minY + floorToScreenPixels((size.height - arrowsSize.height) * 0.5)), size: arrowsSize)
             if let arrowsView = self.arrows.view {
                 if arrowsView.superview == nil {
                     self.addSubview(arrowsView)
                 }
                 transition.setFrame(view: arrowsView, frame: arrowsFrame)
             }
 
-            return size
+            if let displayTooltip = component.displayTooltip {
+                var tooltipTransition = transition
+                
+                let tooltipText: ComponentView<Empty>
+                if let current = self.tooltipText {
+                    tooltipText = current
+                } else {
+                    tooltipText = ComponentView()
+                    self.tooltipText = tooltipText
+                    tooltipTransition = tooltipTransition.withAnimation(.none)
+                }
+                
+                let tooltipAnimation: ComponentView<Empty>
+                if let current = self.tooltipAnimation {
+                    tooltipAnimation = current
+                } else {
+                    tooltipAnimation = ComponentView()
+                    self.tooltipAnimation = tooltipAnimation
+                }
+                
+                let tooltipTextSize = tooltipText.update(
+                    transition: .immediate,
+                    component: AnyComponent(BalancedTextComponent(
+                        text: .plain(NSAttributedString(string: displayTooltip, font: Font.regular(15.0), textColor: UIColor(white: 1.0, alpha: 0.8))),
+                        horizontalAlignment: .center,
+                        maximumNumberOfLines: 0
+                    )),
+                    environment: {},
+                    containerSize: CGSize(width: availableSize.width - 8.0 * 2.0, height: 1000.0)
+                )
+                let tooltipTextFrame = CGRect(origin: CGPoint(x: floor((availableSize.width - tooltipTextSize.width) * 0.5), y: backgroundFrame.maxY + 10.0), size: tooltipTextSize)
+                if let tooltipTextView = tooltipText.view {
+                    if tooltipTextView.superview == nil {
+                        self.addSubview(tooltipTextView)
+                    }
+                    tooltipTransition.setPosition(view: tooltipTextView, position: tooltipTextFrame.center)
+                    tooltipTextView.bounds = CGRect(origin: CGPoint(), size: tooltipTextFrame.size)
+                    
+                    transition.setAlpha(view: tooltipTextView, alpha: self.tooltipIsHidden ? 0.0 : 1.0)
+                }
+                
+                let tooltipAnimationSize = tooltipAnimation.update(
+                    transition: .immediate,
+                    component: AnyComponent(LottieComponent(
+                        content: LottieComponent.AppBundleContent(name: "video_toast_speedup"),
+                        color: .white,
+                        startingPosition: .begin,
+                        loop: true
+                    )),
+                    environment: {},
+                    containerSize: CGSize(width: 60.0, height: 60.0)
+                )
+                let tooltipAnimationFrame = CGRect(origin: CGPoint(x: floor((availableSize.width - tooltipAnimationSize.width) * 0.5), y: tooltipTextFrame.maxY + 10.0), size: tooltipAnimationSize)
+                if let tooltipAnimationView = tooltipAnimation.view {
+                    if tooltipAnimationView.superview == nil {
+                        self.addSubview(tooltipAnimationView)
+                    }
+                    tooltipTransition.setFrame(view: tooltipAnimationView, frame: tooltipAnimationFrame)
+                    
+                    transition.setAlpha(view: tooltipAnimationView, alpha: self.tooltipIsHidden ? 0.0 : 0.8)
+                }
+            } else {
+                if let tooltipText = self.tooltipText {
+                    self.tooltipText = nil
+                    if let tooltipTextView = tooltipText.view {
+                        transition.setAlpha(view: tooltipTextView, alpha: 0.0, completion: { [weak tooltipTextView] _ in
+                            tooltipTextView?.removeFromSuperview()
+                        })
+                    }
+                }
+                if let tooltipAnimation = self.tooltipAnimation {
+                    self.tooltipAnimation = nil
+                    if let tooltipAnimationView = tooltipAnimation.view {
+                        transition.setAlpha(view: tooltipAnimationView, alpha: 0.0, completion: { [weak tooltipAnimationView] _ in
+                            tooltipAnimationView?.removeFromSuperview()
+                        })
+                    }
+                }
+            }
+            
+            if self.tooltipTimer == nil {
+                self.tooltipTimer = Foundation.Timer.scheduledTimer(withTimeInterval: 2.0, repeats: false, block: { [weak self] _ in
+                    guard let self else {
+                        return
+                    }
+                    self.tooltipIsHidden = true
+                    self.state?.updated(transition: .easeInOut(duration: 0.25), isLocal: true)
+                })
+            }
+            
+            return CGSize(width: availableSize.width, height: size.height)
         }
     }
 

submodules/GalleryUI/Sources/Items/UniversalVideoGalleryItem.swift

@@ -1619,13 +1619,15 @@ final class UniversalVideoGalleryItemNode: ZoomableContentGalleryItemNode {
                 activeEdgeRateIndicatorTransition = .immediate
             }
 
+            //TODO:localize
             let activeEdgeRateIndicatorSize = activeEdgeRateIndicator.update(
                 transition: ComponentTransition(activeEdgeRateIndicatorTransition),
                 component: AnyComponent(GalleryRateToastComponent(
-                    rate: activeEdgeRateState.currentRate
+                    rate: activeEdgeRateState.currentRate,
+                    displayTooltip: "Swipe sideways to adjust speed."
                 )),
                 environment: {},
-                containerSize: CGSize(width: 200.0, height: 100.0)
+                containerSize: CGSize(width: layout.size.width - layout.safeInsets.left * 2.0, height: 100.0)
             )
             let activeEdgeRateIndicatorFrame = CGRect(origin: CGPoint(x: floor((layout.size.width - activeEdgeRateIndicatorSize.width) * 0.5), y: max(navigationBarHeight, layout.statusBarHeight ?? 0.0) + 8.0), size: activeEdgeRateIndicatorSize)
             if let activeEdgeRateIndicatorView = activeEdgeRateIndicator.view {

submodules/TelegramUI/Components/Chat/ChatMessageDateAndStatusNode/Sources/ChatMessageDateAndStatusNode.swift

@@ -362,7 +362,7 @@ public class ChatMessageDateAndStatusNode: ASDisplayNode {
                     selectedStarsForeground: themeColors.reactionStarsActiveForeground.argb,
                     extractedBackground: arguments.presentationData.theme.theme.contextMenu.backgroundColor.argb,
                     extractedForeground: arguments.presentationData.theme.theme.contextMenu.primaryColor.argb,
-                    extractedSelectedForeground: arguments.presentationData.theme.theme.overallDarkAppearance ? themeColors.reactionActiveForeground.argb : arguments.presentationData.theme.theme.list.itemCheckColors.foregroundColor.argb,
+                    extractedSelectedForeground: arguments.presentationData.theme.theme.overallDarkAppearance ? themeColors.reactionActiveForeground.argb : arguments.presentationData.theme.theme.contextMenu.primaryColor.argb,
                     deselectedMediaPlaceholder: themeColors.reactionInactiveMediaPlaceholder.argb,
                     selectedMediaPlaceholder: themeColors.reactionActiveMediaPlaceholder.argb
                 )