Infinite scrolling using tabview is flashing - ios

Question

I am trying to combine these two tutorials Instagram Reels UI and Infinite Carousel Slider, so that I get Reels with Infinite scrolling. I implemented the solution to the flashing of the Infinite Slider but my offset is never 0, I tried printing it and it was something like -201. I guess my .preference(key: OffsetKey.self, value: proxy.frame(in: .global).minX) returns something else. I tried using minY since my scrolling is to the top/bottom, and checking for index == 0 && -offset < size.height && offset < size.height but this leads to lag/flashing. To test the flashing just comment out the .onChange(of: offset, perform: {...}
ReelView:
struct Reels: View {
#State var currentReel = ""
#State var offset: CGFloat = 0
#State var items: [Item] = [
Item(reel: Reel(player: AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: "apple-watch", ofType: "mp4") ?? "")))),
Item(reel: Reel(player: AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: "ibiza", ofType: "mp4") ?? "")))),
Item(reel: Reel(player: AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: "sneaker", ofType: "mp4") ?? "")))),
Item(reel: Reel(player: AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: "rolex", ofType: "mp4") ?? "")))),
Item(reel: Reel(player: AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: "lambo", ofType: "mp4") ?? ""))))
]
var body: some View {
ZStack {
GeometryReader { proxy in
let size = proxy.size
TabView(selection: $currentReel) {
ForEach($items) { $reel in
ReelsPlayer(currentReel: $currentReel, item: $reel)
.frame(width: size.width)
.rotationEffect(.init(degrees: -90))
.ignoresSafeArea(.all, edges: .top)
.tag(reel.id)
.overlay {
GeometryReader { proxy in
Color.clear
.preference(key: OffsetKey.self, value: proxy.frame(in: .global).minX)
}
}
.onPreferenceChange(OffsetKey.self, perform: { offset in
self.offset = offset
})
}
}.tabViewStyle(.page)
.onChange(of: offset, perform: { newValue in
let index = items.lastIndex(where: { item in
item.id == currentReel
}) ?? 0
if index == 0 && offset == 0 {
currentReel = items[items.count - 2].id
}
if index == items.count - 1 && offset == 0 {
currentReel = items[1].id
}
})
.onAppear() {
guard var first = items.first else {
return
}
guard var last = items.last else {
return
}
last.id = UUID().uuidString
first.id = UUID().uuidString
items.append(first)
items.insert(last, at: 0)
currentReel = items[1].id
}
.rotationEffect(.init(degrees: 90))
.frame(width: size.height)
.tabViewStyle(.page(indexDisplayMode: .never))
.frame(width: size.width)
}
}
}
}
ReelsPlayer:
struct ReelsPlayer: View {
#Binding var currentReel: String
#Binding var item: Item
var body: some View {
ZStack {
if let player = item.reel.player {
CustomVideoPlayer(player: player)
.allowsHitTesting(false)
GeometryReader { proxy -> Color in
let minY = proxy.frame(in: .global).minY
let size = proxy.size
DispatchQueue.main.async {
if -minY < (size.height / 2) && minY < (size.height / 2) && currentReel == item.id {
player.play()
} else {
player.pause()
player.seek(to: .zero
)
}
}
return Color.clear
}
}
BottomOverlay(item: $item)
.allowsHitTesting(true)
}
}
}
CustomVideoPlayer:
struct CustomVideoPlayer: UIViewControllerRepresentable {
var player: AVPlayer
func makeCoordinator() -> Coordinator {
return Coordinator(parent: self)
}
func makeUIViewController(context: Context) -> AVPlayerViewController {
let controller = AVPlayerViewController()
controller.player = player
controller.showsPlaybackControls = false
controller.videoGravity = .resizeAspectFill
player.actionAtItemEnd = .none
NotificationCenter.default.addObserver(context.coordinator, selector: #selector(context.coordinator.restartPlayback), name: .AVPlayerItemDidPlayToEndTime, object: player.currentItem)
return controller
}
func updateUIViewController(_ uiViewController: AVPlayerViewController, context: Context) {
}
class Coordinator: NSObject {
var parent: CustomVideoPlayer
init(parent: CustomVideoPlayer) {
self.parent = parent
}
#objc func restartPlayback() {
parent.player.seek(to: .zero)
}
}
}