mirror of
https://github.com/Swiftgram/Telegram-iOS.git
synced 2025-12-24 07:05:35 +00:00
[WIP] Stories UI
This commit is contained in:
Ali
@@ -0,0 +1,167 @@
|
||||
import Foundation
|
||||
import UIKit
|
||||
import Display
|
||||
import ComponentFlow
|
||||
import AppBundle
|
||||
|
||||
public final class MessageInputActionButtonComponent: Component {
|
||||
public enum Mode {
|
||||
case send
|
||||
case voiceInput
|
||||
case videoInput
|
||||
}
|
||||
|
||||
public let mode: Mode
|
||||
public let action: () -> Void
|
||||
|
||||
public init(
|
||||
mode: Mode,
|
||||
action: @escaping () -> Void
|
||||
) {
|
||||
self.mode = mode
|
||||
self.action = action
|
||||
}
|
||||
|
||||
public static func ==(lhs: MessageInputActionButtonComponent, rhs: MessageInputActionButtonComponent) -> Bool {
|
||||
if lhs.mode != rhs.mode {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
public final class View: HighlightTrackingButton {
|
||||
private let microphoneIconView: UIImageView
|
||||
private let cameraIconView: UIImageView
|
||||
private let sendIconView: UIImageView
|
||||
|
||||
private var component: MessageInputActionButtonComponent?
|
||||
private weak var componentState: EmptyComponentState?
|
||||
|
||||
override init(frame: CGRect) {
|
||||
self.microphoneIconView = UIImageView()
|
||||
|
||||
self.cameraIconView = UIImageView()
|
||||
self.sendIconView = UIImageView()
|
||||
|
||||
super.init(frame: frame)
|
||||
|
||||
self.isMultipleTouchEnabled = false
|
||||
|
||||
self.addSubview(self.microphoneIconView)
|
||||
self.addSubview(self.cameraIconView)
|
||||
self.addSubview(self.sendIconView)
|
||||
|
||||
self.highligthedChanged = { [weak self] highlighted in
|
||||
guard let self else {
|
||||
return
|
||||
}
|
||||
|
||||
let scale: CGFloat = highlighted ? 0.6 : 1.0
|
||||
|
||||
let transition = Transition(animation: .curve(duration: highlighted ? 0.5 : 0.3, curve: .spring))
|
||||
transition.setSublayerTransform(view: self, transform: CATransform3DMakeScale(scale, scale, 1.0))
|
||||
}
|
||||
|
||||
self.addTarget(self, action: #selector(self.pressed), for: .touchUpInside)
|
||||
}
|
||||
|
||||
required init?(coder: NSCoder) {
|
||||
fatalError("init(coder:) has not been implemented")
|
||||
}
|
||||
|
||||
@objc private func pressed() {
|
||||
self.component?.action()
|
||||
}
|
||||
|
||||
override public func continueTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
|
||||
return super.continueTracking(touch, with: event)
|
||||
}
|
||||
|
||||
func update(component: MessageInputActionButtonComponent, availableSize: CGSize, state: EmptyComponentState, environment: Environment<Empty>, transition: Transition) -> CGSize {
|
||||
self.component = component
|
||||
self.componentState = state
|
||||
|
||||
if self.microphoneIconView.image == nil {
|
||||
self.microphoneIconView.image = UIImage(bundleImageName: "Chat/Input/Text/IconMicrophone")?.withRenderingMode(.alwaysTemplate)
|
||||
self.microphoneIconView.tintColor = .white
|
||||
}
|
||||
if self.cameraIconView.image == nil {
|
||||
self.cameraIconView.image = UIImage(bundleImageName: "Chat/Input/Text/IconVideo")?.withRenderingMode(.alwaysTemplate)
|
||||
self.cameraIconView.tintColor = .white
|
||||
}
|
||||
|
||||
if self.sendIconView.image == nil {
|
||||
self.sendIconView.image = generateImage(CGSize(width: 33.0, height: 33.0), rotatedContext: { size, context in
|
||||
context.clear(CGRect(origin: CGPoint(), size: size))
|
||||
context.setFillColor(UIColor.white.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.translateBy(x: 5.45, y: 4.0)
|
||||
|
||||
context.saveGState()
|
||||
context.translateBy(x: 4.0, y: 4.0)
|
||||
let _ = try? drawSvgPath(context, path: "M1,7 L7,1 L13,7 S ")
|
||||
context.restoreGState()
|
||||
|
||||
context.saveGState()
|
||||
context.translateBy(x: 10.0, y: 4.0)
|
||||
let _ = try? drawSvgPath(context, path: "M1,16 V1 S ")
|
||||
context.restoreGState()
|
||||
})
|
||||
}
|
||||
|
||||
var sendAlpha: CGFloat = 0.0
|
||||
var microphoneAlpha: CGFloat = 0.0
|
||||
var cameraAlpha: CGFloat = 0.0
|
||||
|
||||
switch component.mode {
|
||||
case .send:
|
||||
sendAlpha = 1.0
|
||||
case .videoInput:
|
||||
cameraAlpha = 1.0
|
||||
case .voiceInput:
|
||||
microphoneAlpha = 1.0
|
||||
}
|
||||
|
||||
transition.setAlpha(view: self.sendIconView, alpha: sendAlpha)
|
||||
transition.setScale(view: self.sendIconView, scale: sendAlpha == 0.0 ? 0.01 : 1.0)
|
||||
|
||||
transition.setAlpha(view: self.cameraIconView, alpha: cameraAlpha)
|
||||
transition.setScale(view: self.cameraIconView, scale: cameraAlpha == 0.0 ? 0.01 : 1.0)
|
||||
|
||||
transition.setAlpha(view: self.microphoneIconView, alpha: microphoneAlpha)
|
||||
transition.setScale(view: self.microphoneIconView, scale: microphoneAlpha == 0.0 ? 0.01 : 1.0)
|
||||
|
||||
if let image = self.sendIconView.image {
|
||||
let iconFrame = CGRect(origin: CGPoint(x: floorToScreenPixels((availableSize.width - image.size.width) * 0.5), y: floorToScreenPixels((availableSize.height - image.size.height) * 0.5)), size: image.size)
|
||||
transition.setPosition(view: self.sendIconView, position: iconFrame.center)
|
||||
transition.setBounds(view: self.sendIconView, bounds: CGRect(origin: CGPoint(), size: iconFrame.size))
|
||||
}
|
||||
if let image = self.cameraIconView.image {
|
||||
let iconFrame = CGRect(origin: CGPoint(x: floorToScreenPixels((availableSize.width - image.size.width) * 0.5), y: floorToScreenPixels((availableSize.height - image.size.height) * 0.5)), size: image.size)
|
||||
transition.setPosition(view: self.cameraIconView, position: iconFrame.center)
|
||||
transition.setBounds(view: self.cameraIconView, bounds: CGRect(origin: CGPoint(), size: iconFrame.size))
|
||||
}
|
||||
if let image = self.microphoneIconView.image {
|
||||
let iconFrame = CGRect(origin: CGPoint(x: floorToScreenPixels((availableSize.width - image.size.width) * 0.5), y: floorToScreenPixels((availableSize.height - image.size.height) * 0.5)), size: image.size)
|
||||
transition.setPosition(view: self.microphoneIconView, position: iconFrame.center)
|
||||
transition.setBounds(view: self.microphoneIconView, bounds: CGRect(origin: CGPoint(), size: iconFrame.size))
|
||||
}
|
||||
|
||||
return availableSize
|
||||
}
|
||||
}
|
||||
|
||||
public func makeView() -> View {
|
||||
return View(frame: CGRect())
|
||||
}
|
||||
|
||||
public func update(view: View, availableSize: CGSize, state: EmptyComponentState, environment: Environment<Empty>, transition: Transition) -> CGSize {
|
||||
return view.update(component: self, availableSize: availableSize, state: state, environment: environment, transition: transition)
|
||||
}
|
||||
}
|
||||
@@ -3,31 +3,56 @@ import UIKit
|
||||
import Display
|
||||
import ComponentFlow
|
||||
import AppBundle
|
||||
import TextFieldComponent
|
||||
|
||||
public final class MessageInputPanelComponent: Component {
|
||||
public init() {
|
||||
public final class ExternalState {
|
||||
public fileprivate(set) var hasText: Bool = false
|
||||
|
||||
public init() {
|
||||
}
|
||||
}
|
||||
|
||||
public let externalState: ExternalState
|
||||
public let sendMessageAction: () -> Void
|
||||
|
||||
public init(
|
||||
externalState: ExternalState,
|
||||
sendMessageAction: @escaping () -> Void
|
||||
) {
|
||||
self.externalState = externalState
|
||||
self.sendMessageAction = sendMessageAction
|
||||
}
|
||||
|
||||
public static func ==(lhs: MessageInputPanelComponent, rhs: MessageInputPanelComponent) -> Bool {
|
||||
if lhs.externalState !== rhs.externalState {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
public enum SendMessageInput {
|
||||
case text(String)
|
||||
}
|
||||
|
||||
public final class View: UIView {
|
||||
private let fieldBackgroundView: UIImageView
|
||||
private let fieldPlaceholder = ComponentView<Empty>()
|
||||
|
||||
private let textField = ComponentView<Empty>()
|
||||
private let textFieldExternalState = TextFieldComponent.ExternalState()
|
||||
|
||||
private let attachmentIconView: UIImageView
|
||||
private let recordingIconView: UIImageView
|
||||
private let inputActionButton = ComponentView<Empty>()
|
||||
private let stickerIconView: UIImageView
|
||||
|
||||
private var currentMediaInputIsVoice: Bool = true
|
||||
|
||||
private var component: MessageInputPanelComponent?
|
||||
private weak var state: EmptyComponentState?
|
||||
|
||||
override init(frame: CGRect) {
|
||||
self.fieldBackgroundView = UIImageView()
|
||||
self.attachmentIconView = UIImageView()
|
||||
self.recordingIconView = UIImageView()
|
||||
self.stickerIconView = UIImageView()
|
||||
|
||||
super.init(frame: frame)
|
||||
@@ -36,7 +61,6 @@ public final class MessageInputPanelComponent: Component {
|
||||
|
||||
self.addSubview(self.fieldBackgroundView)
|
||||
self.addSubview(self.attachmentIconView)
|
||||
self.addSubview(self.recordingIconView)
|
||||
self.addSubview(self.stickerIconView)
|
||||
}
|
||||
|
||||
@@ -44,7 +68,22 @@ public final class MessageInputPanelComponent: Component {
|
||||
fatalError("init(coder:) has not been implemented")
|
||||
}
|
||||
|
||||
public func getSendMessageInput() -> SendMessageInput {
|
||||
guard let textFieldView = self.textField.view as? TextFieldComponent.View else {
|
||||
return .text("")
|
||||
}
|
||||
|
||||
return .text(textFieldView.getText())
|
||||
}
|
||||
|
||||
public func clearSendMessageInput() {
|
||||
if let textFieldView = self.textField.view as? TextFieldComponent.View {
|
||||
textFieldView.setText(string: "")
|
||||
}
|
||||
}
|
||||
|
||||
func update(component: MessageInputPanelComponent, availableSize: CGSize, state: EmptyComponentState, environment: Environment<Empty>, transition: Transition) -> CGSize {
|
||||
let baseHeight: CGFloat = 44.0
|
||||
let insets = UIEdgeInsets(top: 5.0, left: 41.0, bottom: 5.0, right: 41.0)
|
||||
let fieldCornerRadius: CGFloat = 16.0
|
||||
|
||||
@@ -58,47 +97,82 @@ public final class MessageInputPanelComponent: Component {
|
||||
self.attachmentIconView.image = UIImage(bundleImageName: "Chat/Input/Text/IconAttachment")?.withRenderingMode(.alwaysTemplate)
|
||||
self.attachmentIconView.tintColor = .white
|
||||
}
|
||||
if self.recordingIconView.image == nil {
|
||||
self.recordingIconView.image = UIImage(bundleImageName: "Chat/Input/Text/IconMicrophone")?.withRenderingMode(.alwaysTemplate)
|
||||
self.recordingIconView.tintColor = .white
|
||||
}
|
||||
if self.stickerIconView.image == nil {
|
||||
self.stickerIconView.image = UIImage(bundleImageName: "Chat/Input/Text/AccessoryIconStickers")?.withRenderingMode(.alwaysTemplate)
|
||||
self.stickerIconView.tintColor = .white
|
||||
}
|
||||
|
||||
let fieldFrame = CGRect(origin: CGPoint(x: insets.left, y: insets.top), size: CGSize(width: availableSize.width - insets.left - insets.right, height: availableSize.height - insets.top - insets.bottom))
|
||||
let availableTextFieldSize = CGSize(width: availableSize.width - insets.left - insets.right, height: availableSize.height - insets.top - insets.bottom)
|
||||
|
||||
self.textField.parentState = state
|
||||
let textFieldSize = self.textField.update(
|
||||
transition: .immediate,
|
||||
component: AnyComponent(TextFieldComponent(
|
||||
externalState: self.textFieldExternalState,
|
||||
placeholder: "Reply Privately..."
|
||||
)),
|
||||
environment: {},
|
||||
containerSize: availableTextFieldSize
|
||||
)
|
||||
|
||||
let fieldFrame = CGRect(origin: CGPoint(x: insets.left, y: insets.top), size: CGSize(width: availableSize.width - insets.left - insets.right, height: textFieldSize.height))
|
||||
transition.setFrame(view: self.fieldBackgroundView, frame: fieldFrame)
|
||||
|
||||
let rightFieldInset: CGFloat = 34.0
|
||||
|
||||
let placeholderSize = self.fieldPlaceholder.update(
|
||||
transition: .immediate,
|
||||
component: AnyComponent(Text(text: "Reply Privately...", font: Font.regular(17.0), color: UIColor(white: 1.0, alpha: 0.16))),
|
||||
environment: {},
|
||||
containerSize: fieldFrame.size
|
||||
)
|
||||
if let fieldPlaceholderView = self.fieldPlaceholder.view {
|
||||
if fieldPlaceholderView.superview == nil {
|
||||
fieldPlaceholderView.layer.anchorPoint = CGPoint()
|
||||
fieldPlaceholderView.isUserInteractionEnabled = false
|
||||
self.addSubview(fieldPlaceholderView)
|
||||
let size = CGSize(width: availableSize.width, height: textFieldSize.height + insets.top + insets.bottom)
|
||||
|
||||
if let textFieldView = self.textField.view {
|
||||
if textFieldView.superview == nil {
|
||||
self.addSubview(textFieldView)
|
||||
}
|
||||
fieldPlaceholderView.bounds = CGRect(origin: CGPoint(), size: placeholderSize)
|
||||
transition.setPosition(view: fieldPlaceholderView, position: CGPoint(x: fieldFrame.minX + 12.0, y: fieldFrame.minY + floor((fieldFrame.height - placeholderSize.height) * 0.5)))
|
||||
transition.setFrame(view: textFieldView, frame: CGRect(origin: CGPoint(x: fieldFrame.minX, y: fieldFrame.maxY - textFieldSize.height), size: textFieldSize))
|
||||
}
|
||||
|
||||
if let image = self.attachmentIconView.image {
|
||||
transition.setFrame(view: self.attachmentIconView, frame: CGRect(origin: CGPoint(x: floor((insets.left - image.size.width) * 0.5), y: floor((availableSize.height - image.size.height) * 0.5)), size: image.size))
|
||||
}
|
||||
if let image = self.recordingIconView.image {
|
||||
transition.setFrame(view: self.recordingIconView, frame: CGRect(origin: CGPoint(x: availableSize.width - insets.right + floor((insets.right - image.size.width) * 0.5), y: floor((availableSize.height - image.size.height) * 0.5)), size: image.size))
|
||||
}
|
||||
if let image = self.stickerIconView.image {
|
||||
transition.setFrame(view: self.stickerIconView, frame: CGRect(origin: CGPoint(x: fieldFrame.maxX - rightFieldInset + floor((rightFieldInset - image.size.width) * 0.5), y: fieldFrame.minY + floor((fieldFrame.height - image.size.height) * 0.5)), size: image.size))
|
||||
transition.setFrame(view: self.attachmentIconView, frame: CGRect(origin: CGPoint(x: floor((insets.left - image.size.width) * 0.5), y: size.height - baseHeight + floor((baseHeight - image.size.height) * 0.5)), size: image.size))
|
||||
}
|
||||
|
||||
return availableSize
|
||||
let inputActionButtonSize = self.inputActionButton.update(
|
||||
transition: transition,
|
||||
component: AnyComponent(MessageInputActionButtonComponent(
|
||||
mode: self.textFieldExternalState.hasText ? .send : (self.currentMediaInputIsVoice ? .voiceInput : .videoInput),
|
||||
action: { [weak self] in
|
||||
guard let self else {
|
||||
return
|
||||
}
|
||||
|
||||
if case .text("") = self.getSendMessageInput() {
|
||||
self.currentMediaInputIsVoice = !self.currentMediaInputIsVoice
|
||||
self.state?.updated(transition: Transition(animation: .curve(duration: 0.4, curve: .spring)))
|
||||
|
||||
HapticFeedback().impact()
|
||||
} else {
|
||||
self.component?.sendMessageAction()
|
||||
}
|
||||
}
|
||||
)),
|
||||
environment: {},
|
||||
containerSize: CGSize(width: 33.0, height: 33.0)
|
||||
)
|
||||
if let inputActionButtonView = self.inputActionButton.view {
|
||||
if inputActionButtonView.superview == nil {
|
||||
self.addSubview(inputActionButtonView)
|
||||
}
|
||||
transition.setFrame(view: inputActionButtonView, frame: CGRect(origin: CGPoint(x: size.width - insets.right + floorToScreenPixels((insets.right - inputActionButtonSize.width) * 0.5), y: size.height - baseHeight + floorToScreenPixels((baseHeight - inputActionButtonSize.height) * 0.5)), size: inputActionButtonSize))
|
||||
}
|
||||
if let image = self.stickerIconView.image {
|
||||
let stickerIconFrame = CGRect(origin: CGPoint(x: fieldFrame.maxX - rightFieldInset + floor((rightFieldInset - image.size.width) * 0.5), y: fieldFrame.minY + floor((fieldFrame.height - image.size.height) * 0.5)), size: image.size)
|
||||
transition.setPosition(view: self.stickerIconView, position: stickerIconFrame.center)
|
||||
transition.setBounds(view: self.stickerIconView, bounds: CGRect(origin: CGPoint(), size: stickerIconFrame.size))
|
||||
|
||||
transition.setAlpha(view: self.stickerIconView, alpha: self.textFieldExternalState.hasText ? 0.0 : 1.0)
|
||||
transition.setScale(view: self.stickerIconView, scale: self.textFieldExternalState.hasText ? 0.1 : 1.0)
|
||||
}
|
||||
|
||||
component.externalState.hasText = self.textFieldExternalState.hasText
|
||||
|
||||
return size
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user