klaus/sodalive-ios
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(refresh): Lottie 새로고침 표시를 적용한다

Browse Source
This commit is contained in:
Yu Sung
2026-08-26 01:21:26 +09:00
parent fc0f7e2b50
commit e46198f87a
14 changed files with 1046 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
SodaLive/Resources/pull-to-refresh.json Normal file
View File

@@ -0,0 +1,213 @@
{
"v": "5.9.0",
"fr": 30,
"ip": 0,
"op": 45,
"w": 150,
"h": 150,
"nm": "loading",
"ddd": 0,
"assets": [],
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "loading",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 1,
"k": [
{
"i": { "x": [0.667], "y": [1] },
"o": { "x": [0.333], "y": [0] },
"t": 0,
"s": [-90]
},
{
"t": 45,
"s": [270]
}
],
"ix": 10
},
"p": {
"a": 0,
"k": [75, 75, 0],
"ix": 2,
"l": 2
},
"a": {
"a": 0,
"k": [0, 0, 0],
"ix": 1,
"l": 2
},
"s": {
"a": 0,
"k": [100, 100, 100],
"ix": 6,
"l": 2
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": {
"a": 0,
"k": [100, 100],
"ix": 2
},
"p": {
"a": 0,
"k": [0, 0],
"ix": 3
},
"nm": "타원 패스 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [1, 1, 1, 1],
"ix": 3
},
"o": {
"a": 0,
"k": 100,
"ix": 4
},
"w": {
"a": 0,
"k": 20,
"ix": 5
},
"lc": 2,
"lj": 1,
"ml": 4,
"bm": 0,
"nm": "선 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [0, 0],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "변형"
}
],
"nm": "타원 1",
"np": 3,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
},
{
"ty": "tm",
"s": {
"a": 1,
"k": [
{
"i": { "x": [0.667], "y": [1] },
"o": { "x": [0.333], "y": [0] },
"t": 19.78,
"s": [3]
},
{
"t": 45,
"s": [97]
}
],
"ix": 1
},
"e": {
"a": 1,
"k": [
{
"i": { "x": [0.667], "y": [1] },
"o": { "x": [0.333], "y": [0] },
"t": 0,
"s": [3]
},
{
"i": { "x": [0.833], "y": [1] },
"o": { "x": [0.167], "y": [0] },
"t": 26.372,
"s": [100]
},
{
"t": 45,
"s": [97]
}
],
"ix": 2
},
"o": {
"a": 0,
"k": 0,
"ix": 3
},
"m": 1,
"ix": 2,
"nm": "패스 다듬어 자르기 1",
"mn": "ADBE Vector Filter - Trim",
"hd": false
}
],
"ip": 0,
"op": 45,
"st": 0,
"bm": 0
}
],
"markers": []
}

27
SodaLive/Sources/V2/Component/Refresh/LottieRefreshIndicator.swift Normal file
View File

@@ -0,0 +1,27 @@
import SwiftUI
import Lottie
struct LottieRefreshIndicator: View {
let isAnimating: Bool
@Environment(\.accessibilityReduceMotion) private var accessibilityReduceMotion
var body: some View {
let animation = LottieView(animation: .named("pull-to-refresh"))
.configure(\.contentMode, to: .scaleAspectFit)
.resizable()
Group {
if accessibilityReduceMotion {
animation.currentFrame(1)
} else if isAnimating {
animation.looping()
} else {
animation.currentFrame(0)
}
}
.frame(maxWidth: SodaSpacing.s48, maxHeight: SodaSpacing.s48)
.accessibilityHidden(true)
}
}

119
SodaLive/Sources/V2/Component/Refresh/LottieRefreshableScrollView.swift Normal file
View File

@@ -0,0 +1,119 @@
import SwiftUI
struct LottieRefreshableScrollView<Content: View>: View {
private let action: () async -> Void
private let content: () -> Content
private let refreshRegionHeight = SodaSpacing.s48 + (SodaSpacing.s8 * 2)
@Environment(\.accessibilityReduceMotion) private var accessibilityReduceMotion
@State private var pullOffset: CGFloat = 0
@State private var isRefreshArmed = false
@State private var isRefreshing = false
init(
action: @escaping () async -> Void,
@ViewBuilder content: @escaping () -> Content
) {
self.action = action
self.content = content
}
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 0) {
pullOffsetReader
refreshRegion
content()
}
}
.scrollBounceBehavior(.always, axes: .vertical)
.background(PullOffsetPositionReader(type: .fixed))
.onPreferenceChange(PullOffsetPreferenceKey.self) { positions in
guard
let movingMinY = positions.first(where: { $0.type == .moving })?.minY,
let fixedMinY = positions.first(where: { $0.type == .fixed })?.minY
else { return }
let offset = max(0, movingMinY - fixedMinY)
pullOffset = offset
guard !isRefreshing else { return }
if offset >= refreshRegionHeight {
isRefreshArmed = true
} else if isRefreshArmed {
isRefreshArmed = false
refresh()
}
}
.accessibilityAction(named: Text(I18n.LiveNow.refreshButton)) {
refresh()
}
}
private var pullOffsetReader: some View {
PullOffsetPositionReader(type: .moving)
.frame(height: 0)
}
private var refreshRegion: some View {
Color.clear
.frame(height: isRefreshing ? refreshRegionHeight : 0)
.overlay(alignment: .top) {
if pullOffset > 0 || isRefreshing {
LottieRefreshIndicator(isAnimating: true)
.padding(.vertical, SodaSpacing.s8)
.frame(maxWidth: .infinity)
.frame(height: refreshRegionHeight)
.offset(y: isRefreshing ? 0 : -refreshRegionHeight)
}
}
}
private func refresh() {
isRefreshArmed = false
guard !isRefreshing else { return }
withAnimation(accessibilityReduceMotion ? nil : .easeOut(duration: 0.2)) {
isRefreshing = true
}
Task { @MainActor in
await action()
withAnimation(accessibilityReduceMotion ? nil : .easeOut(duration: 0.2)) {
pullOffset = 0
isRefreshing = false
}
}
}
}
private enum PullOffsetPositionType {
case fixed
case moving
}
private struct PullOffsetPosition: Equatable {
let type: PullOffsetPositionType
let minY: CGFloat
}
private struct PullOffsetPreferenceKey: PreferenceKey {
static var defaultValue: [PullOffsetPosition] = []
static func reduce(value: inout [PullOffsetPosition], nextValue: () -> [PullOffsetPosition]) {
value.append(contentsOf: nextValue())
}
}
private struct PullOffsetPositionReader: View {
let type: PullOffsetPositionType
var body: some View {
GeometryReader { proxy in
Color.clear.preference(
key: PullOffsetPreferenceKey.self,
value: [PullOffsetPosition(type: type, minY: proxy.frame(in: .global).minY)]
)
}
}
}

21
SodaLive/Sources/V2/Main/Chat/MainChatView.swift
View File

@@ -59,7 +59,9 @@ struct MainChatView: View {
} else if viewModel.shouldShowEmptyState {
emptyContent
} else {
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
LazyVStack(spacing: 0) {
ForEach(viewModel.rooms) { room in
MainChatRoomListItem(room: room) { roomId, chatType in
@@ -79,39 +81,34 @@ struct MainChatView: View {
}
.padding(.top, 0)
}
.refreshable {
await viewModel.refresh()
}
}
}
private var loadingContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
ProgressView()
.progressViewStyle(.circular)
.tint(Color.soda400)
.frame(maxWidth: .infinity)
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}
private var emptyContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
Text(I18n.MainChat.emptyStateMessage)
.appFont(size: 16, weight: .medium)
.foregroundColor(Color.gray500)
.frame(maxWidth: .infinity)
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}

21
SodaLive/Sources/V2/Main/Content/All/MainContentAllView.swift
View File

@@ -74,7 +74,9 @@ struct MainContentAllView: View {
} else if viewModel.shouldShowEmptyState {
emptyContent
} else {
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
gridContent
.padding(.horizontal, SodaSpacing.s14)
.padding(.top, SodaSpacing.s8)
@@ -86,36 +88,31 @@ struct MainContentAllView: View {
.padding(.vertical, SodaSpacing.s20)
}
}
.refreshable {
await viewModel.refresh()
}
}
}
}
private var loadingContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
ProgressView()
.progressViewStyle(CircularProgressViewStyle(tint: .white))
.frame(maxWidth: .infinity)
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}
private var emptyContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
MainContentAudioEmptyStateView(message: I18n.MainContentAll.emptyStateMessage)
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}

21
SodaLive/Sources/V2/Main/Content/Ranking/MainContentRankingView.swift
View File

@@ -40,20 +40,21 @@ struct MainContentRankingView: View {
private var loadingContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
ProgressView()
.progressViewStyle(CircularProgressViewStyle(tint: .white))
.frame(maxWidth: .infinity)
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}
private var rankingContent: some View {
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
VStack(alignment: .leading, spacing: SodaSpacing.s8) {
if let topItem {
MainContentAudioRankingTopCard(
@@ -104,20 +105,16 @@ struct MainContentRankingView: View {
.padding(.horizontal, SodaSpacing.s8)
.padding(.vertical, SodaSpacing.s20)
}
.refreshable {
await viewModel.refresh()
}
}
private var emptyContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
MainContentAudioRankingEmptyStateView(message: viewModel.emptyStateMessage)
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}

21
SodaLive/Sources/V2/Main/Content/Recommendation/MainContentRecommendationView.swift
View File

@@ -22,7 +22,9 @@ struct MainContentRecommendationView: View {
} else if viewModel.shouldShowEmptyState {
emptyContent
} else {
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
VStack(alignment: .leading, spacing: SodaSpacing.s24) {
if let recommendations = viewModel.recommendations {
MainContentAudioBannerSection(
@@ -80,9 +82,6 @@ struct MainContentRecommendationView: View {
}
.padding(.vertical, SodaSpacing.s20)
}
.refreshable {
await viewModel.refresh()
}
}
}
.onAppear {
@@ -99,27 +98,25 @@ struct MainContentRecommendationView: View {
private var loadingContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
ProgressView()
.progressViewStyle(CircularProgressViewStyle(tint: .white))
.frame(maxWidth: .infinity)
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}
private var emptyContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
MainContentAudioEmptyStateView(message: viewModel.emptyStateMessage)
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}
}

21
SodaLive/Sources/V2/Main/Home/Following/MainHomeFollowingView.swift
View File

@@ -56,7 +56,9 @@ struct MainHomeFollowingView: View {
} else if !viewModel.message.isEmpty {
emptyContent(message: viewModel.message)
} else if let response = viewModel.response {
ScrollView(.vertical, showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
VStack(spacing: 0) {
if !response.followingCreators.isEmpty {
MainHomeFollowingCreatorSection(
@@ -104,9 +106,6 @@ struct MainHomeFollowingView: View {
.padding(.bottom, SodaSpacing.s20)
}
.background(Color.black)
.refreshable {
await viewModel.refresh()
}
} else {
emptyContent(message: I18n.HomeFollowing.emptyStateMessage)
}
@@ -114,31 +113,29 @@ struct MainHomeFollowingView: View {
private var loadingContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
ProgressView()
.tint(.white)
.frame(maxWidth: .infinity)
.frame(minHeight: geometry.size.height)
}
.background(Color.black)
.refreshable {
await viewModel.refresh()
}
}
}
private func emptyContent(message: String, loginAction: (() -> Void)? = nil) -> some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
MainHomeFollowingEmptyStateView(
message: message,
loginAction: loginAction
)
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}
}

21
SodaLive/Sources/V2/Main/Home/Ranking/MainHomeRankingView.swift
View File

@@ -31,20 +31,21 @@ struct MainHomeRankingView: View {
private var loadingContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
ProgressView()
.progressViewStyle(CircularProgressViewStyle(tint: .white))
.frame(maxWidth: .infinity)
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}
private var rankingContent: some View {
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
VStack(alignment: .leading, spacing: SodaSpacing.s8) {
ForEach(firstRankItems) { item in
MainHomeRankingCard(
@@ -96,20 +97,16 @@ struct MainHomeRankingView: View {
.padding(.horizontal, SodaSpacing.s8)
.padding(.vertical, SodaSpacing.s20)
}
.refreshable {
await viewModel.refresh()
}
}
private var emptyContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
MainHomeRankingEmptyStateView()
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}

14
SodaLive/Sources/V2/Main/Home/Recommendation/MainHomeRecommendationView.swift
View File

@@ -21,7 +21,9 @@ struct MainHomeRecommendationView: View {
if viewModel.isLoading && viewModel.recommendations == nil && viewModel.errorMessage.isEmpty {
loadingContent
} else {
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
VStack(alignment: .leading, spacing: SodaSpacing.s24) {
MainHomeLiveSection(
items: viewModel.recommendations?.lives ?? [],
@@ -82,9 +84,6 @@ struct MainHomeRecommendationView: View {
}
.padding(.vertical, SodaSpacing.s20)
}
.refreshable {
await viewModel.refresh()
}
}
}
.onAppear {
@@ -119,15 +118,14 @@ struct MainHomeRecommendationView: View {
private var loadingContent: some View {
GeometryReader { geometry in
ScrollView(showsIndicators: false) {
LottieRefreshableScrollView(action: {
await viewModel.refresh()
}) {
ProgressView()
.progressViewStyle(CircularProgressViewStyle(tint: .white))
.frame(maxWidth: .infinity)
.frame(minHeight: geometry.size.height)
}
.refreshable {
await viewModel.refresh()
}
}
}
}