라이브 UI 변경
This commit is contained in:
Yu Sung
@@ -0,0 +1,217 @@
|
||||
//
|
||||
// LiveRoomInfoHostView.swift
|
||||
// SodaLive
|
||||
//
|
||||
// Created by klaus on 2024/01/17.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
import Kingfisher
|
||||
|
||||
struct LiveRoomInfoHostView: View {
|
||||
|
||||
let title: String
|
||||
let totalDonationCan: Int
|
||||
let participantsCount: Int
|
||||
|
||||
let isOnBg: Bool
|
||||
let isOnNotice: Bool
|
||||
|
||||
let creatorId: Int
|
||||
let creatorNickname: String
|
||||
let creatorProfileUrl: String
|
||||
let speakerList: [LiveRoomMember]
|
||||
let muteSpeakerList: [UInt]
|
||||
let activeSpeakerList: [UInt]
|
||||
|
||||
let isAdult: Bool
|
||||
|
||||
let onClickQuit: () -> Void
|
||||
let onClickToggleBg: () -> Void
|
||||
let onClickShare: () -> Void
|
||||
let onClickEdit: () -> Void
|
||||
let onClickProfile: (Int) -> Void
|
||||
let onClickNotice: () -> Void
|
||||
let onClickTotalDonation: () -> Void
|
||||
let onClickParticipants: () -> Void
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
VStack(alignment: .leading, spacing: 13.3) {
|
||||
HStack(spacing: 5.3) {
|
||||
LiveRoomOverlayStrokeTextButton(
|
||||
text: "라이브 종료",
|
||||
textColor: Color.red,
|
||||
strokeColor: Color.red,
|
||||
strokeWidth: 1,
|
||||
strokeCornerRadius: 5.3
|
||||
) { onClickQuit() }
|
||||
|
||||
Spacer()
|
||||
|
||||
LiveRoomOverlayStrokeTextToggleButton(
|
||||
isOn: isOnBg,
|
||||
onText: "배경 ON",
|
||||
onTextColor: Color.button,
|
||||
onStrokeColor: Color.button,
|
||||
offText: "배경 OFF",
|
||||
offTextColor: Color.graybb,
|
||||
offStrokeColor: Color.graybb,
|
||||
strokeWidth: 1,
|
||||
strokeCornerRadius: 5.3
|
||||
) { onClickToggleBg() }
|
||||
|
||||
LiveRoomOverlayStrokeImageButton(
|
||||
imageName: "ic_share",
|
||||
strokeColor: Color.graybb,
|
||||
strokeWidth: 1,
|
||||
strokeCornerRadius: 5.3
|
||||
) { onClickShare() }
|
||||
|
||||
LiveRoomOverlayStrokeImageButton(
|
||||
imageName: "ic_edit",
|
||||
strokeColor: Color.graybb,
|
||||
strokeWidth: 1,
|
||||
strokeCornerRadius: 5.3
|
||||
) { onClickEdit() }
|
||||
}
|
||||
|
||||
HStack(spacing: 8) {
|
||||
LiveRoomInfoCreatorView(
|
||||
roomTitle: title,
|
||||
creatorNickname: creatorNickname,
|
||||
creatorProfileUrl: creatorProfileUrl,
|
||||
isMute: muteSpeakerList.contains(UInt(creatorId)),
|
||||
isAdult: isAdult,
|
||||
isFollowing: false,
|
||||
isActiveSpeaker: activeSpeakerList.contains(UInt(creatorId)),
|
||||
isShowFollowingButton: false,
|
||||
onClickFollow: {},
|
||||
onClickProfile: {}
|
||||
)
|
||||
.frame(width: 180, alignment: .leading)
|
||||
|
||||
Spacer()
|
||||
|
||||
ForEach(0..<speakerList.count, id: \.self) { index in
|
||||
let speaker = speakerList[index]
|
||||
|
||||
if speaker.id != UInt(creatorId) {
|
||||
LiveRoomInfoSpeakerView(
|
||||
nickname: speaker.nickname,
|
||||
profileUrl: speaker.profileImage,
|
||||
isMute: muteSpeakerList.contains(UInt(speaker.id)),
|
||||
isActiveSpeaker: activeSpeakerList.contains(UInt(speaker.id)),
|
||||
onClickProfile: { onClickProfile(speaker.id) }
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HStack(spacing: 5.3) {
|
||||
LiveRoomOverlayStrokeTextToggleButton(
|
||||
isOn: isOnNotice,
|
||||
onText: "공지",
|
||||
onTextColor: .button,
|
||||
onStrokeColor: .button,
|
||||
offText: nil,
|
||||
offTextColor: .graybb,
|
||||
offStrokeColor: .graybb,
|
||||
strokeWidth: 1,
|
||||
strokeCornerRadius: 5.3,
|
||||
onClick: { onClickNotice() }
|
||||
)
|
||||
|
||||
Spacer()
|
||||
|
||||
HStack(spacing: 2.7) {
|
||||
Image("ic_can")
|
||||
.resizable()
|
||||
.frame(width: 12, height: 12)
|
||||
|
||||
Text("\(totalDonationCan)")
|
||||
.font(.custom(Font.medium.rawValue, size: 12))
|
||||
.foregroundColor(.graybb)
|
||||
}
|
||||
.padding(.horizontal, 11)
|
||||
.padding(.vertical, 5.3)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 5.3)
|
||||
.stroke(Color.graybb, lineWidth: 1)
|
||||
)
|
||||
.onTapGesture { onClickTotalDonation() }
|
||||
|
||||
HStack(spacing: 6.7) {
|
||||
Text("참여자")
|
||||
.font(.custom(Font.medium.rawValue, size: 12))
|
||||
.foregroundColor(.graybb)
|
||||
|
||||
Text("\(participantsCount)")
|
||||
.font(.custom(Font.bold.rawValue, size: 12))
|
||||
.foregroundColor(.graybb)
|
||||
}
|
||||
.padding(.horizontal, 11)
|
||||
.padding(.vertical, 5.3)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 5.3)
|
||||
.stroke(Color.graybb, lineWidth: 1)
|
||||
)
|
||||
.onTapGesture { onClickParticipants() }
|
||||
}
|
||||
}
|
||||
|
||||
if muteSpeakerList.contains(UInt(creatorId)) {
|
||||
Image("img_noti_mute")
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 13.3)
|
||||
.padding(.top, 16)
|
||||
.background(Color.gray22)
|
||||
}
|
||||
}
|
||||
|
||||
struct LiveRoomInfoHostView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
LiveRoomInfoHostView(
|
||||
title: "오늘의 라이브방송은 OOO입니다.",
|
||||
totalDonationCan: 123456,
|
||||
participantsCount: 18,
|
||||
isOnBg: true,
|
||||
isOnNotice: true,
|
||||
creatorId: 1,
|
||||
creatorNickname: "도화",
|
||||
creatorProfileUrl: "https://cf.sodalive.net/profile/26/26-profile-ddf78b4d-0300-4c50-9c84-5d8a95fd5fe2-4892-1705256364320",
|
||||
speakerList: [
|
||||
LiveRoomMember(
|
||||
id: 1,
|
||||
nickname: "도화",
|
||||
profileImage: "https://cf.sodalive.net/profile/26/26-profile-ddf78b4d-0300-4c50-9c84-5d8a95fd5fe2-4892-1705256364320",
|
||||
role: .SPEAKER
|
||||
),
|
||||
LiveRoomMember(
|
||||
id: 2,
|
||||
nickname: "청령",
|
||||
profileImage: "https://cf.sodalive.net/profile/13/13-profile-fabb75e0-2870-4d99-900e-1d9aa63e605b-685-1704859996417",
|
||||
role: .SPEAKER
|
||||
),
|
||||
LiveRoomMember(
|
||||
id: 3,
|
||||
nickname: "LUNA",
|
||||
profileImage: "https://cf.sodalive.net/profile/4679/4679-profile-41e83399-234e-4541-8591-f961a025cfaa-5819-1699536915310",
|
||||
role: .SPEAKER
|
||||
),
|
||||
],
|
||||
muteSpeakerList: [],
|
||||
activeSpeakerList: [],
|
||||
isAdult: false,
|
||||
onClickQuit: {},
|
||||
onClickToggleBg: {},
|
||||
onClickShare: {},
|
||||
onClickEdit: {},
|
||||
onClickProfile: { _ in },
|
||||
onClickNotice: {},
|
||||
onClickTotalDonation: {},
|
||||
onClickParticipants: {}
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user