feat(creator): 오디오 섹션을 연결한다
This commit is contained in:
Yu Sung
@@ -0,0 +1,157 @@
|
||||
import SwiftUI
|
||||
|
||||
struct CreatorChannelAudioContentListItem: View {
|
||||
let audioContent: CreatorChannelAudioContentResponse
|
||||
let action: () -> Void
|
||||
|
||||
init(
|
||||
audioContent: CreatorChannelAudioContentResponse,
|
||||
action: @escaping () -> Void = {}
|
||||
) {
|
||||
self.audioContent = audioContent
|
||||
self.action = action
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
Button(action: action) {
|
||||
HStack(alignment: .center, spacing: SodaSpacing.s14) {
|
||||
thumbnail
|
||||
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(audioContent.title)
|
||||
.appFont(size: 16, weight: .bold)
|
||||
.foregroundColor(.white)
|
||||
.lineLimit(1)
|
||||
.truncationMode(.tail)
|
||||
|
||||
if !subtitle.isEmpty {
|
||||
Text(subtitle)
|
||||
.appFont(size: 14, weight: .medium)
|
||||
.foregroundColor(Color.gray500)
|
||||
.lineLimit(1)
|
||||
.truncationMode(.tail)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
.frame(width: 346, alignment: .leading)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
|
||||
private var subtitle: String {
|
||||
[audioContent.duration, audioContent.seriesName]
|
||||
.compactMap { value in
|
||||
guard let value, !value.isEmpty else { return nil }
|
||||
return value
|
||||
}
|
||||
.joined(separator: " • ")
|
||||
}
|
||||
|
||||
private var thumbnail: some View {
|
||||
ZStack(alignment: .topLeading) {
|
||||
DownsampledKFImage(
|
||||
url: audioContent.imageUrl.flatMap(URL.init(string:)),
|
||||
size: CGSize(width: 88, height: 88)
|
||||
)
|
||||
.background(Color.gray800)
|
||||
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
topTagList
|
||||
|
||||
Spacer(minLength: 0)
|
||||
|
||||
bottomTagList
|
||||
}
|
||||
}
|
||||
.frame(width: 88, height: 88)
|
||||
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var topTagList: some View {
|
||||
HStack(spacing: 0) {
|
||||
if audioContent.isOriginalSeries == true {
|
||||
CreatorChannelAudioImageTag(imageName: "ic_content_tag_original")
|
||||
}
|
||||
|
||||
if audioContent.isFirstContent {
|
||||
CreatorChannelAudioFirstTag()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var bottomTagList: some View {
|
||||
HStack(spacing: 0) {
|
||||
if audioContent.isPointAvailable {
|
||||
CreatorChannelAudioImageTag(imageName: "ic_content_tag_point")
|
||||
}
|
||||
|
||||
if audioContent.price == 0 {
|
||||
CreatorChannelAudioFreeTag()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct CreatorChannelAudioImageTag: View {
|
||||
let imageName: String
|
||||
|
||||
var body: some View {
|
||||
Image(imageName)
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.frame(width: 24, height: 24)
|
||||
}
|
||||
}
|
||||
|
||||
struct CreatorChannelAudioFirstTag: View {
|
||||
var body: some View {
|
||||
ZStack {
|
||||
Color(hex: "FF34B8")
|
||||
|
||||
Image("ic_content_tag_first_star")
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.padding(SodaSpacing.s4)
|
||||
}
|
||||
.frame(width: 24, height: 24)
|
||||
}
|
||||
}
|
||||
|
||||
struct CreatorChannelAudioFreeTag: View {
|
||||
var body: some View {
|
||||
Text("무료")
|
||||
.appFont(size: 14, weight: .semibold)
|
||||
.foregroundColor(.white)
|
||||
.lineLimit(1)
|
||||
.padding(SodaSpacing.s4)
|
||||
.frame(height: 24)
|
||||
.background(Color.soda900)
|
||||
}
|
||||
}
|
||||
|
||||
struct CreatorChannelAudioContentListItem_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
CreatorChannelAudioContentListItem(
|
||||
audioContent: CreatorChannelAudioContentResponse(
|
||||
audioContentId: 1,
|
||||
title: "콘텐츠 이름이 한 줄 콘텐츠 이름이 한 줄 콘텐츠 이름이 한 줄",
|
||||
duration: "3:00",
|
||||
imageUrl: "https://picsum.photos/300/300",
|
||||
price: 0,
|
||||
isAdult: false,
|
||||
isPointAvailable: true,
|
||||
isFirstContent: true,
|
||||
seriesName: "시리즈 이름",
|
||||
isOriginalSeries: true,
|
||||
isOwned: false,
|
||||
isRented: false
|
||||
)
|
||||
)
|
||||
.padding(SodaSpacing.s14)
|
||||
.background(Color.black)
|
||||
.previewLayout(.sizeThatFits)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import SwiftUI
|
||||
|
||||
struct CreatorChannelAudioSection: View {
|
||||
let audioContents: [CreatorChannelAudioContentResponse]
|
||||
let onSelectTab: (CreatorChannelTab) -> Void
|
||||
let onTapContent: (Int) -> Void
|
||||
|
||||
private let homeVisibleCount = 9
|
||||
private let itemsPerColumn = 3
|
||||
|
||||
init(
|
||||
audioContents: [CreatorChannelAudioContentResponse],
|
||||
onSelectTab: @escaping (CreatorChannelTab) -> Void,
|
||||
onTapContent: @escaping (Int) -> Void = { _ in }
|
||||
) {
|
||||
self.audioContents = audioContents
|
||||
self.onSelectTab = onSelectTab
|
||||
self.onTapContent = onTapContent
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
if audioContents.isEmpty == false {
|
||||
VStack(alignment: .leading, spacing: SodaSpacing.s14) {
|
||||
SectionTitle(title: I18n.CreatorChannelHome.audio) {
|
||||
onSelectTab(.audio)
|
||||
}
|
||||
|
||||
ScrollView(.horizontal, showsIndicators: false) {
|
||||
HStack(alignment: .top, spacing: SodaSpacing.s8) {
|
||||
ForEach(audioContentColumns.indices, id: \.self) { index in
|
||||
VStack(alignment: .leading, spacing: SodaSpacing.s8) {
|
||||
ForEach(audioContentColumns[index]) { audioContent in
|
||||
CreatorChannelAudioContentListItem(audioContent: audioContent) {
|
||||
onTapContent(audioContent.audioContentId)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.leading, SodaSpacing.s14)
|
||||
.padding(.trailing, SodaSpacing.s20)
|
||||
}
|
||||
}
|
||||
.padding(.top, SodaSpacing.s20)
|
||||
}
|
||||
}
|
||||
|
||||
private var visibleAudioContents: [CreatorChannelAudioContentResponse] {
|
||||
Array(audioContents.prefix(homeVisibleCount))
|
||||
}
|
||||
|
||||
private var audioContentColumns: [[CreatorChannelAudioContentResponse]] {
|
||||
stride(from: 0, to: visibleAudioContents.count, by: itemsPerColumn).map { index in
|
||||
Array(visibleAudioContents[index..<min(index + itemsPerColumn, visibleAudioContents.count)])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct CreatorChannelAudioSection_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
CreatorChannelAudioSection(
|
||||
audioContents: (1...9).map { index in
|
||||
CreatorChannelAudioContentResponse(
|
||||
audioContentId: index,
|
||||
title: "콘텐츠 이름이 한 줄 콘텐츠 이름이 한 줄 콘텐츠 이름이 한 줄",
|
||||
duration: "3:00",
|
||||
imageUrl: "https://picsum.photos/300/300?\(index)",
|
||||
price: index.isMultiple(of: 2) ? 0 : 10,
|
||||
isAdult: false,
|
||||
isPointAvailable: index.isMultiple(of: 3),
|
||||
isFirstContent: index.isMultiple(of: 2),
|
||||
seriesName: index == 3 ? "시리즈 이름" : nil,
|
||||
isOriginalSeries: index == 3,
|
||||
isOwned: false,
|
||||
isRented: false
|
||||
)
|
||||
},
|
||||
onSelectTab: { _ in }
|
||||
)
|
||||
.background(Color.black)
|
||||
.previewLayout(.sizeThatFits)
|
||||
}
|
||||
}
|
||||
@@ -114,43 +114,6 @@ private struct CreatorChannelLatestAudioCard: View {
|
||||
}
|
||||
}
|
||||
|
||||
private struct CreatorChannelAudioImageTag: View {
|
||||
let imageName: String
|
||||
|
||||
var body: some View {
|
||||
Image(imageName)
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.frame(width: 24, height: 24)
|
||||
}
|
||||
}
|
||||
|
||||
private struct CreatorChannelAudioFirstTag: View {
|
||||
var body: some View {
|
||||
ZStack {
|
||||
Color(hex: "FF34B8")
|
||||
|
||||
Image("ic_content_tag_first_star")
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.padding(SodaSpacing.s4)
|
||||
}
|
||||
.frame(width: 24, height: 24)
|
||||
}
|
||||
}
|
||||
|
||||
private struct CreatorChannelAudioFreeTag: View {
|
||||
var body: some View {
|
||||
Text("무료")
|
||||
.appFont(size: 14, weight: .semibold)
|
||||
.foregroundColor(.white)
|
||||
.lineLimit(1)
|
||||
.padding(SodaSpacing.s4)
|
||||
.frame(height: 24)
|
||||
.background(Color.soda900)
|
||||
}
|
||||
}
|
||||
|
||||
struct CreatorChannelLatestAudioSection_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
CreatorChannelLatestAudioSection(
|
||||
|
||||
Reference in New Issue
Block a user