118 lines
3.7 KiB
Swift
118 lines
3.7 KiB
Swift
import SwiftUI
|
|
|
|
struct CreatorChannelSeriesSection: View {
|
|
let series: [CreatorChannelSeriesResponse]
|
|
let onSelectTab: (CreatorChannelTab) -> Void
|
|
let onTapSeries: (Int) -> Void
|
|
|
|
init(
|
|
series: [CreatorChannelSeriesResponse],
|
|
onSelectTab: @escaping (CreatorChannelTab) -> Void,
|
|
onTapSeries: @escaping (Int) -> Void = { _ in }
|
|
) {
|
|
self.series = series
|
|
self.onSelectTab = onSelectTab
|
|
self.onTapSeries = onTapSeries
|
|
}
|
|
|
|
var body: some View {
|
|
if series.isEmpty == false {
|
|
VStack(alignment: .leading, spacing: SodaSpacing.s14) {
|
|
SectionTitle(title: I18n.CreatorChannelHome.series) {
|
|
onSelectTab(.series)
|
|
}
|
|
|
|
ScrollView(.horizontal, showsIndicators: false) {
|
|
HStack(alignment: .top, spacing: SodaSpacing.s8) {
|
|
ForEach(series) { item in
|
|
CreatorChannelSeriesCard(series: item) {
|
|
onTapSeries(item.seriesId)
|
|
}
|
|
}
|
|
}
|
|
.padding(.leading, SodaSpacing.s14)
|
|
.padding(.trailing, SodaSpacing.s20)
|
|
}
|
|
}
|
|
.padding(.top, SodaSpacing.s20)
|
|
}
|
|
}
|
|
}
|
|
|
|
private struct CreatorChannelSeriesCard: View {
|
|
let series: CreatorChannelSeriesResponse
|
|
let action: () -> Void
|
|
|
|
private let baseDeviceWidth: CGFloat = 402
|
|
private let maxThumbnailWidth: CGFloat = 163
|
|
private let maxThumbnailHeight: CGFloat = 230
|
|
|
|
private var scale: CGFloat {
|
|
min(1, UIScreen.main.bounds.width / baseDeviceWidth)
|
|
}
|
|
|
|
private var thumbnailWidth: CGFloat {
|
|
maxThumbnailWidth * scale
|
|
}
|
|
|
|
private var thumbnailHeight: CGFloat {
|
|
maxThumbnailHeight * scale
|
|
}
|
|
|
|
var body: some View {
|
|
Button(action: action) {
|
|
thumbnail
|
|
}
|
|
.buttonStyle(.plain)
|
|
}
|
|
|
|
private var thumbnail: some View {
|
|
ZStack(alignment: .topLeading) {
|
|
DownsampledKFImage(
|
|
url: URL(string: series.coverImageUrl),
|
|
size: CGSize(width: thumbnailWidth, height: thumbnailHeight)
|
|
)
|
|
.background(Color.gray800)
|
|
|
|
if series.isOriginal {
|
|
HStack(spacing: 4) {
|
|
Image("ic_series_original")
|
|
.resizable()
|
|
.scaledToFit()
|
|
.frame(width: 14, height: 14)
|
|
|
|
Image("img_new_only")
|
|
.resizable()
|
|
.scaledToFit()
|
|
.frame(height: 14)
|
|
}
|
|
.padding(.horizontal, 8)
|
|
.padding(.vertical, 5)
|
|
.background(Color.gray900)
|
|
}
|
|
}
|
|
.frame(width: thumbnailWidth, height: thumbnailHeight)
|
|
.clipShape(RoundedRectangle(cornerRadius: SodaSpacing.s14, style: .continuous))
|
|
}
|
|
}
|
|
|
|
struct CreatorChannelSeriesSection_Previews: PreviewProvider {
|
|
static var previews: some View {
|
|
CreatorChannelSeriesSection(
|
|
series: (1...3).map { index in
|
|
CreatorChannelSeriesResponse(
|
|
seriesId: index,
|
|
title: "시리즈 제목",
|
|
coverImageUrl: "https://picsum.photos/300/420?\(index)",
|
|
numberOfContent: 10,
|
|
isNew: index.isMultiple(of: 2),
|
|
isOriginal: true
|
|
)
|
|
},
|
|
onSelectTab: { _ in }
|
|
)
|
|
.background(Color.black)
|
|
.previewLayout(.sizeThatFits)
|
|
}
|
|
}
|