mirror of
git://jb55.com/damus
synced 2024-09-30 08:50:42 +00:00
Add new image carousel
Changelog-Added: Added dots under image carousel Changelof-Fixed: Fixed carousel issues with multiple images of different aspect ratios Closes: #1004
This commit is contained in:
parent
2e596a47a1
commit
d091543448
@ -52,6 +52,7 @@ enum ImageShape {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// MARK: - Image Carousel
|
||||||
struct ImageCarousel: View {
|
struct ImageCarousel: View {
|
||||||
var urls: [URL]
|
var urls: [URL]
|
||||||
|
|
||||||
@ -62,9 +63,12 @@ struct ImageCarousel: View {
|
|||||||
@State private var open_sheet: Bool = false
|
@State private var open_sheet: Bool = false
|
||||||
@State private var current_url: URL? = nil
|
@State private var current_url: URL? = nil
|
||||||
@State private var image_fill: ImageFill? = nil
|
@State private var image_fill: ImageFill? = nil
|
||||||
|
|
||||||
let fillHeight: CGFloat = 350
|
@State private var fillHeight: CGFloat = 350
|
||||||
let maxHeight: CGFloat = UIScreen.main.bounds.height * 1.2
|
@State private var maxHeight: CGFloat = UIScreen.main.bounds.height * 0.85 // 1.2
|
||||||
|
@State private var firstImageHeight: CGFloat = UIScreen.main.bounds.height * 0.85
|
||||||
|
@State private var currentImageHeight: CGFloat?
|
||||||
|
@State private var selectedIndex = 0
|
||||||
|
|
||||||
init(state: DamusState, evid: String, urls: [URL]) {
|
init(state: DamusState, evid: String, urls: [URL]) {
|
||||||
_open_sheet = State(initialValue: false)
|
_open_sheet = State(initialValue: false)
|
||||||
@ -91,7 +95,7 @@ struct ImageCarousel: View {
|
|||||||
.resizable()
|
.resizable()
|
||||||
.frame(width: geo_size.width * UIScreen.main.scale, height: self.height * UIScreen.main.scale)
|
.frame(width: geo_size.width * UIScreen.main.scale, height: self.height * UIScreen.main.scale)
|
||||||
} else {
|
} else {
|
||||||
EmptyView()
|
Color.clear
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.onAppear {
|
.onAppear {
|
||||||
@ -105,9 +109,10 @@ struct ImageCarousel: View {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var body: some View {
|
var Images: some View {
|
||||||
TabView {
|
TabView(selection: $selectedIndex) {
|
||||||
ForEach(urls, id: \.absoluteString) { url in
|
ForEach(urls.indices, id: \.self) { index in
|
||||||
|
let url = urls[index]
|
||||||
GeometryReader { geo in
|
GeometryReader { geo in
|
||||||
KFAnimatedImage(url)
|
KFAnimatedImage(url)
|
||||||
.callbackQueue(.dispatch(.global(qos:.background)))
|
.callbackQueue(.dispatch(.global(qos:.background)))
|
||||||
@ -128,27 +133,72 @@ struct ImageCarousel: View {
|
|||||||
state.events.lookup_img_metadata(url: url)?.state = .not_needed
|
state.events.lookup_img_metadata(url: url)?.state = .not_needed
|
||||||
}
|
}
|
||||||
image_fill = fill
|
image_fill = fill
|
||||||
|
if index == 0 {
|
||||||
|
firstImageHeight = fill.height
|
||||||
|
//maxHeight = firstImageHeight ?? maxHeight
|
||||||
|
} else {
|
||||||
|
//maxHeight = firstImageHeight ?? fill.height
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.background {
|
.background {
|
||||||
Placeholder(url: url, geo_size: geo.size)
|
Placeholder(url: url, geo_size: geo.size)
|
||||||
}
|
}
|
||||||
.aspectRatio(contentMode: filling ? .fill : .fit)
|
.aspectRatio(contentMode: filling ? .fill : .fit)
|
||||||
|
//.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
|
||||||
|
.position(x: geo.size.width / 2, y: geo.size.height / 2)
|
||||||
.tabItem {
|
.tabItem {
|
||||||
Text(url.absoluteString)
|
Text(url.absoluteString)
|
||||||
}
|
}
|
||||||
.id(url.absoluteString)
|
.id(url.absoluteString)
|
||||||
|
.padding(0)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
|
||||||
.fullScreenCover(isPresented: $open_sheet) {
|
.fullScreenCover(isPresented: $open_sheet) {
|
||||||
ImageView(urls: urls, disable_animation: state.settings.disable_animation)
|
ImageView(urls: urls, disable_animation: state.settings.disable_animation)
|
||||||
}
|
}
|
||||||
.frame(height: self.height)
|
.frame(height: firstImageHeight)
|
||||||
.onTapGesture {
|
.onTapGesture {
|
||||||
open_sheet = true
|
open_sheet = true
|
||||||
}
|
}
|
||||||
|
.onChange(of: selectedIndex) { value in
|
||||||
|
selectedIndex = value
|
||||||
|
}
|
||||||
.tabViewStyle(PageTabViewStyle())
|
.tabViewStyle(PageTabViewStyle())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var body: some View {
|
||||||
|
VStack {
|
||||||
|
Images
|
||||||
|
|
||||||
|
// This is our custom carousel image indicator
|
||||||
|
CarouselDotsView(urls: urls, selectedIndex: $selectedIndex)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// MARK: - Custom Carousel
|
||||||
|
struct CarouselDotsView: View {
|
||||||
|
let urls: [URL]
|
||||||
|
@Binding var selectedIndex: Int
|
||||||
|
|
||||||
|
var body: some View {
|
||||||
|
if urls.count > 1 {
|
||||||
|
HStack {
|
||||||
|
ForEach(urls.indices, id: \.self) { index in
|
||||||
|
Circle()
|
||||||
|
.fill(index == selectedIndex ? Color("DamusPurple") : Color("DamusLightGrey"))
|
||||||
|
.frame(width: 10, height: 10)
|
||||||
|
.onTapGesture {
|
||||||
|
selectedIndex = index
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.padding(.top, CGFloat(8))
|
||||||
|
.id(UUID())
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// MARK: - Image Modifier
|
// MARK: - Image Modifier
|
||||||
@ -199,6 +249,7 @@ public struct ImageFill {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// MARK: - Preview Provider
|
||||||
struct ImageCarousel_Previews: PreviewProvider {
|
struct ImageCarousel_Previews: PreviewProvider {
|
||||||
static var previews: some View {
|
static var previews: some View {
|
||||||
ImageCarousel(state: test_damus_state(), evid: "evid", urls: [URL(string: "https://jb55.com/red-me.jpg")!,URL(string: "https://jb55.com/red-me.jpg")!])
|
ImageCarousel(state: test_damus_state(), evid: "evid", urls: [URL(string: "https://jb55.com/red-me.jpg")!,URL(string: "https://jb55.com/red-me.jpg")!])
|
||||||
|
@ -14,6 +14,7 @@ struct AppearanceSettingsView: View {
|
|||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
Form {
|
Form {
|
||||||
|
// MARK: - Text Truncation
|
||||||
Section(header: Text(NSLocalizedString("Text Truncation", comment: "Section header for damus text truncation user configuration"))) {
|
Section(header: Text(NSLocalizedString("Text Truncation", comment: "Section header for damus text truncation user configuration"))) {
|
||||||
Toggle(NSLocalizedString("Truncate timeline text", comment: "Setting to truncate text in timeline"), isOn: $settings.truncate_timeline_text)
|
Toggle(NSLocalizedString("Truncate timeline text", comment: "Setting to truncate text in timeline"), isOn: $settings.truncate_timeline_text)
|
||||||
.toggleStyle(.switch)
|
.toggleStyle(.switch)
|
||||||
@ -21,11 +22,13 @@ struct AppearanceSettingsView: View {
|
|||||||
.toggleStyle(.switch)
|
.toggleStyle(.switch)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// MARK: - Accessibility
|
||||||
Section(header: Text(NSLocalizedString("Accessibility", comment: "Section header for accessibility settings"))) {
|
Section(header: Text(NSLocalizedString("Accessibility", comment: "Section header for accessibility settings"))) {
|
||||||
Toggle(NSLocalizedString("Left Handed", comment: "Moves the post button to the left side of the screen"), isOn: $settings.left_handed)
|
Toggle(NSLocalizedString("Left Handed", comment: "Moves the post button to the left side of the screen"), isOn: $settings.left_handed)
|
||||||
.toggleStyle(.switch)
|
.toggleStyle(.switch)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// MARK: - Images
|
||||||
Section(NSLocalizedString("Images", comment: "Section title for images configuration.")) {
|
Section(NSLocalizedString("Images", comment: "Section title for images configuration.")) {
|
||||||
Toggle(NSLocalizedString("Animations", comment: "Toggle to enable or disable image animation"), isOn: $settings.enable_animation)
|
Toggle(NSLocalizedString("Animations", comment: "Toggle to enable or disable image animation"), isOn: $settings.enable_animation)
|
||||||
.toggleStyle(.switch)
|
.toggleStyle(.switch)
|
||||||
|
Loading…
Reference in New Issue
Block a user