Add a "load more" button instead of always inserting events in timelines

Changelog-Added: Add a "load more" button instead of always inserting events in timelines
This commit is contained in:
William Casarin
2023-02-20 09:11:39 -08:00
parent 795577a0a1
commit b4140dc5f2
15 changed files with 322 additions and 94 deletions

View File

@@ -94,7 +94,7 @@ struct ChatView: View {
}
}
if let ref_id = thread.replies.lookup(event.id) {
if let _ = thread.replies.lookup(event.id) {
if !is_reply_to_prev() {
/*
ReplyQuoteView(keypair: damus_state.keypair, quoter: event, event_id: ref_id, profiles: damus_state.profiles, previews: damus_state.previews)

View File

@@ -404,10 +404,10 @@ struct ProfileView: View {
.background(colorScheme == .dark ? Color.black : Color.white)
if filter_state == FilterState.posts {
InnerTimelineView(events: $profile.events, damus: damus_state, show_friend_icon: false, filter: FilterState.posts.filter)
InnerTimelineView(events: profile.events, damus: damus_state, show_friend_icon: false, filter: FilterState.posts.filter)
}
if filter_state == FilterState.posts_and_replies {
InnerTimelineView(events: $profile.events, damus: damus_state, show_friend_icon: false, filter: FilterState.posts_and_replies.filter)
InnerTimelineView(events: profile.events, damus: damus_state, show_friend_icon: false, filter: FilterState.posts_and_replies.filter)
}
}
.padding(.horizontal, Theme.safeAreaInsets?.left)

View File

@@ -40,7 +40,7 @@ struct SearchHomeView: View {
}
var GlobalContent: some View {
return TimelineView(events: $model.events, loading: $model.loading, damus: damus_state, show_friend_icon: true, filter: { _ in true })
return TimelineView(events: model.events, loading: $model.loading, damus: damus_state, show_friend_icon: true, filter: { _ in true })
.refreshable {
// Fetch new information by unsubscribing and resubscribing to the relay
model.unsubscribe()
@@ -90,7 +90,7 @@ struct SearchHomeView: View {
self.model.filter_muted()
}
.onAppear {
if model.events.isEmpty {
if model.events.events.isEmpty {
model.subscribe()
}
}

View File

@@ -13,7 +13,7 @@ struct SearchView: View {
@Environment(\.dismiss) var dismiss
var body: some View {
TimelineView(events: $search.events, loading: $search.loading, damus: appstate, show_friend_icon: true, filter: { _ in true })
TimelineView(events: search.events, loading: $search.loading, damus: appstate, show_friend_icon: true, filter: { _ in true })
.navigationBarTitle(describe_search(search.search))
.onReceive(handle_notify(.switched_timeline)) { obj in
dismiss()

View File

@@ -0,0 +1,59 @@
//
// InnerTimelineView.swift
// damus
//
// Created by William Casarin on 2023-02-20.
//
import SwiftUI
struct InnerTimelineView: View {
@ObservedObject var events: EventHolder
let damus: DamusState
let show_friend_icon: Bool
let filter: (NostrEvent) -> Bool
@State var nav_target: NostrEvent? = nil
@State var navigating: Bool = false
var MaybeBuildThreadView: some View {
Group {
if let ev = nav_target {
BuildThreadV2View(damus: damus, event_id: (ev.inner_event ?? ev).id)
} else {
EmptyView()
}
}
}
var body: some View {
NavigationLink(destination: MaybeBuildThreadView, isActive: $navigating) {
EmptyView()
}
LazyVStack(spacing: 0) {
let events = self.events.events
if events.isEmpty {
EmptyTimelineView()
} else {
ForEach(events.filter(filter), id: \.id) { (ev: NostrEvent) in
EventView(damus: damus, event: ev, has_action_bar: true)
.onTapGesture {
nav_target = ev
navigating = true
}
.padding(.top, 10)
}
}
}
.padding(.horizontal)
}
}
struct InnerTimelineView_Previews: PreviewProvider {
static var previews: some View {
InnerTimelineView(events: test_event_holder, damus: test_damus_state(), show_friend_icon: true, filter: { _ in true }, nav_target: nil, navigating: false)
.frame(width: 300, height: 500)
.border(Color.red)
}
}

View File

@@ -0,0 +1,50 @@
//
// LoadMoreButton.swift
// damus
//
// Created by William Casarin on 2023-02-20.
//
import SwiftUI
struct LoadMoreButton: View {
@ObservedObject var events: EventHolder
let scroller: ScrollViewProxy?
func click() {
events.flush()
guard let ev = events.events.first, let scroller else {
return
}
scroll_to_event(scroller: scroller, id: ev.id, delay: 0.1, animate: true)
}
var body: some View {
Group {
if events.queued > 0 {
Button(action: click) {
Text("Load \(events.queued) more")
}
.font(.system(size: 14, weight: .bold))
.padding(10)
.frame(height: 30)
.foregroundColor(.white)
.background(LINEAR_GRADIENT)
.clipShape(Capsule())
} else {
EmptyView()
}
}
}
}
struct LoadMoreButton_Previews: PreviewProvider {
@StateObject static var events: EventHolder = test_event_holder
static var previews: some View {
LoadMoreButton(events: events, scroller: nil)
}
}
let test_event_holder = EventHolder(events: [], incoming: [test_event])

View File

@@ -12,50 +12,12 @@ enum TimelineAction {
case navigating
}
struct InnerTimelineView: View {
@Binding var events: [NostrEvent]
let damus: DamusState
let show_friend_icon: Bool
let filter: (NostrEvent) -> Bool
@State var nav_target: NostrEvent? = nil
@State var navigating: Bool = false
var MaybeBuildThreadView: some View {
Group {
if let ev = nav_target {
BuildThreadV2View(damus: damus, event_id: (ev.inner_event ?? ev).id)
} else {
EmptyView()
}
}
}
var body: some View {
NavigationLink(destination: MaybeBuildThreadView, isActive: $navigating) {
EmptyView()
}
LazyVStack(spacing: 0) {
if events.isEmpty {
EmptyTimelineView()
} else {
ForEach(events.filter(filter), id: \.id) { (ev: NostrEvent) in
EventView(damus: damus, event: ev, has_action_bar: true)
.onTapGesture {
nav_target = ev
navigating = true
}
.padding(.top, 10)
}
}
}
.padding(.horizontal)
}
}
struct TimelineView: View {
@Binding var events: [NostrEvent]
@ObservedObject var events: EventHolder
@Binding var loading: Bool
@State var offset = CGFloat.zero
@Environment(\.colorScheme) var colorScheme
let damus: DamusState
let show_friend_icon: Bool
@@ -65,37 +27,66 @@ struct TimelineView: View {
MainContent
}
func handle_scroll(_ proxy: GeometryProxy) {
let offset = -proxy.frame(in: .named("scroll")).origin.y
guard offset != -0.0 else {
return
}
self.events.should_queue = offset > 0
}
var realtime_bar_opacity: Double {
colorScheme == .dark ? 0.2 : 0.1
}
var MainContent: some View {
ScrollViewReader { scroller in
ScrollView {
InnerTimelineView(events: loading ? .constant(Constants.EXAMPLE_EVENTS) : $events, damus: damus, show_friend_icon: show_friend_icon, filter: loading ? { _ in true } : filter)
.redacted(reason: loading ? .placeholder : [])
.shimmer(loading)
.disabled(loading)
}
.onReceive(NotificationCenter.default.publisher(for: .scroll_to_top)) { _ in
guard let event = events.filter(self.filter).first else {
return
ZStack {
VStack {
LoadMoreButton(events: events, scroller: scroller)
.padding([.top], 10)
Spacer()
}
.zIndex(10.0)
ScrollView {
InnerTimelineView(events: events, damus: damus, show_friend_icon: show_friend_icon, filter: loading ? { _ in true } : filter)
.redacted(reason: loading ? .placeholder : [])
.shimmer(loading)
.disabled(loading)
.background(GeometryReader { proxy -> Color in
DispatchQueue.main.async {
handle_scroll(proxy)
}
return Color.clear
})
}
.overlay(
Rectangle()
.fill(RECTANGLE_GRADIENT.opacity(realtime_bar_opacity))
.offset(y: -1)
.frame(height: events.should_queue ? 0 : 8)
,
alignment: .top
)
.buttonStyle(BorderlessButtonStyle())
.coordinateSpace(name: "scroll")
.onReceive(NotificationCenter.default.publisher(for: .scroll_to_top)) { _ in
guard let event = events.events.filter(self.filter).first else {
return
}
scroll_to_event(scroller: scroller, id: event.id, delay: 0.0, animate: true, anchor: .top)
}
scroll_to_event(scroller: scroller, id: event.id, delay: 0.0, animate: true, anchor: .top)
}
}
}
}
struct TimelineView_Previews: PreviewProvider {
@StateObject static var events = test_event_holder
static var previews: some View {
TimelineView(events: .constant(Constants.EXAMPLE_EVENTS), loading: .constant(true), damus: Constants.EXAMPLE_DEMOS, show_friend_icon: true, filter: { _ in true })
TimelineView(events: events, loading: .constant(true), damus: Constants.EXAMPLE_DEMOS, show_friend_icon: true, filter: { _ in true })
}
}
struct NavigationLazyView<Content: View>: View {
let build: () -> Content
init(_ build: @autoclosure @escaping () -> Content) {
self.build = build
}
var body: Content {
build()
}
}