라이브 방

- 채팅창 너비 축소
- 오른쪽 하단 옵션 버튼 baseline이 채팅창 baseline과 동일하게 설정
This commit is contained in:
Yu Sung 2024-10-24 01:46:10 +09:00
parent 97a3637a7b
commit c7314cc1d4
3 changed files with 116 additions and 53 deletions

View File

@ -0,0 +1,61 @@
//
// ChatTextFieldView.swift
// SodaLive
//
// Created by klaus on 10/24/24.
//
import SwiftUI
import UIKit
struct ChatTextFieldView: UIViewRepresentable {
class Coordinator: NSObject, UITextFieldDelegate {
var parent: ChatTextFieldView
init(parent: ChatTextFieldView) {
self.parent = parent
}
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
// "Send"
parent.onSend()
return true
}
@objc func textDidChange(_ textField: UITextField) {
parent.text = textField.text ?? ""
}
}
@Binding var text: String
var placeholder: String
var onSend: () -> Void
func makeUIView(context: Context) -> UITextField {
let textField = UITextField(frame: .zero)
textField.delegate = context.coordinator
textField.borderStyle = .roundedRect
textField.placeholder = placeholder
textField.autocorrectionType = .no
textField.autocapitalizationType = .none
textField.borderStyle = .none
textField.backgroundColor = UIColor(hex: "222222")
textField.textColor = UIColor(hex: "BBBBBB")
textField.tintColor = UIColor(hex: "3BB9F1")
textField.font = UIFont(name: Font.medium.rawValue, size: 13.3)
textField.returnKeyType = .send
textField.addTarget(context.coordinator, action: #selector(Coordinator.textDidChange(_:)), for: .editingChanged)
return textField
}
func updateUIView(_ uiView: UITextField, context: Context) {
uiView.text = text
}
func makeCoordinator() -> Coordinator {
return Coordinator(parent: self)
}
}
#Preview {
ChatTextFieldView(text: .constant(""), placeholder: "채팅을 입력하세요") {}
}

View File

@ -16,23 +16,15 @@ struct LiveRoomInputChatView: View {
var body: some View { var body: some View {
HStack(spacing: 6.7) { HStack(spacing: 6.7) {
TextField("채팅을 입력하세요", text: $chatMessage) ChatTextFieldView(text: $chatMessage, placeholder: "채팅을 입력하세요") {
.autocapitalization(.none) if sendMessage(chatMessage) {
.disableAutocorrection(true) chatMessage = ""
.font(.custom(Font.medium.rawValue, size: 13.3)) }
.foregroundColor(.graybb) }
.accentColor(.button) .padding(.horizontal, 13.3)
.keyboardType(.default) .padding(.vertical, 18.3)
.padding(.horizontal, 13.3) .fixedSize(horizontal: false, vertical: true)
.padding(.vertical, 18.3) .frame(maxWidth: .infinity)
.background(Color.gray22)
.cornerRadius(5.3)
.frame(maxWidth: .infinity)
.overlay(
RoundedRectangle(cornerRadius: 5.3)
.strokeBorder(lineWidth: 1)
.foregroundColor(.gray77)
)
Image("btn_message_send") Image("btn_message_send")
.resizable() .resizable()
@ -44,6 +36,13 @@ struct LiveRoomInputChatView: View {
} }
} }
} }
.background(Color.gray22)
.cornerRadius(5.3)
.overlay(
RoundedRectangle(cornerRadius: 5.3)
.strokeBorder(lineWidth: 1)
.foregroundColor(.gray77)
)
.padding(13.3) .padding(13.3)
} }
} }

View File

@ -185,47 +185,50 @@ struct LiveRoomViewV2: View {
.padding(.bottom, 40) .padding(.bottom, 40)
.padding(.trailing, 13.3) .padding(.trailing, 13.3)
VStack(spacing: 13.3) { HStack(alignment: .bottom, spacing: 0) {
if liveRoomInfo.creatorId == UserDefaults.int(forKey: .userId) { LiveRoomInputChatView {
LiveRoomRightBottomButton( viewModel.sendMessage(chatMessage: $0) {
imageName: "ic_roulette_settings", viewModel.isShowingNewChat = false
onClick: { viewModel.isShowRouletteSettings = true } proxy.scrollTo(viewModel.messages.count - 1, anchor: .center)
) }
} else if liveRoomInfo.creatorId != UserDefaults.int(forKey: .userId) && viewModel.isActiveRoulette {
LiveRoomRightBottomButton( return true
imageName: "ic_roulette",
onClick: { viewModel.showRoulette() }
)
} }
if viewModel.role == .SPEAKER { VStack(spacing: 13.3) {
if liveRoomInfo.creatorId == UserDefaults.int(forKey: .userId) {
LiveRoomRightBottomButton(
imageName: "ic_roulette_settings",
onClick: { viewModel.isShowRouletteSettings = true }
)
} else if liveRoomInfo.creatorId != UserDefaults.int(forKey: .userId) && viewModel.isActiveRoulette {
LiveRoomRightBottomButton(
imageName: "ic_roulette",
onClick: { viewModel.showRoulette() }
)
}
LiveRoomRightBottomButton( LiveRoomRightBottomButton(
imageName: viewModel.isMute ? "ic_mic_off" : "ic_mic_on", imageName: "ic_donation_message_list",
onClick: { viewModel.toggleMute() } onClick: { viewModel.isShowDonationMessagePopup = true }
) )
if liveRoomInfo.creatorId != UserDefaults.int(forKey: .userId) {
LiveRoomRightBottomButton(
imageName: "ic_donation",
onClick: { viewModel.isShowDonationPopup = true }
)
}
if viewModel.role == .SPEAKER {
LiveRoomRightBottomButton(
imageName: viewModel.isMute ? "ic_mic_off" : "ic_mic_on",
onClick: { viewModel.toggleMute() }
)
}
} }
.padding(.bottom, 13.3)
LiveRoomRightBottomButton( .padding(.trailing, 13.3)
imageName: "ic_donation_message_list",
onClick: { viewModel.isShowDonationMessagePopup = true }
)
if liveRoomInfo.creatorId != UserDefaults.int(forKey: .userId) {
LiveRoomRightBottomButton(
imageName: "ic_donation",
onClick: { viewModel.isShowDonationPopup = true }
)
}
}
.padding(.trailing, 13.3)
LiveRoomInputChatView {
viewModel.sendMessage(chatMessage: $0) {
viewModel.isShowingNewChat = false
proxy.scrollTo(viewModel.messages.count - 1, anchor: .center)
}
return true
} }
.padding(.bottom, 10) .padding(.bottom, 10)
} }