kamil/libnovel
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 162 Wiki Activity

iOS: improve mini player progress indicator to wrap around pill shape

Browse Source 
- Changed progress bar from RoundedRectangle to Capsule for rounded ends
- Added horizontal padding so indicator wraps nicely around bottom corners
- Progress bar now feels like an integrated part of the pill-shaped mini player
This commit is contained in:
Admin
2026-03-08 13:40:53 +05:00
parent c35f099f50
commit 71ba882858
1 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
ios/LibNovel/LibNovel/Views/Player/PlayerViews.swift
View File

@@ -119,24 +119,25 @@ struct MiniPlayerView: View {
.fill(Color.black.opacity(0.3)) .fill(Color.black.opacity(0.3))
) )
// Progress indicator as bottom border // Progress indicator - wraps around bottom corners of pill
GeometryReader { geo in GeometryReader { geo in
VStack { VStack {
Spacer() Spacer()
ZStack(alignment: .leading) { ZStack(alignment: .leading) {
// Background track // Background track - rounded to match pill shape
RoundedRectangle(cornerRadius: 1) Capsule()
.fill(Color.white.opacity(0.2)) .fill(Color.white.opacity(0.2))
.frame(height: 3) .frame(height: 3)
// Progress fill // Progress fill - rounded to match pill shape
RoundedRectangle(cornerRadius: 1) Capsule()
.fill(Color.amber) .fill(Color.amber)
.frame(width: geo.size.width * progress, height: 3) .frame(width: max(3, geo.size.width * progress), height: 3)
} }
.padding(.horizontal, 4) // Inset slightly from edges so it wraps nicely
} }
} }
.padding(.bottom, 0) .padding(.bottom, 2)
} }
) )
.frame(height: 80) .frame(height: 80)