Create thumbnail seek/scrubber bar with SwiftUI

174 Views Asked by At

I need a help in creation thumbnail seek/scrubber bar based on SwiftUI. Looking for something similar on native Photos app when we watch some video. So currently I'm already done with thumbnails and placed it at my view (but I'm not confident is it done in right way):

ZStack(alignment: .leading) {
    ScrollView(.horizontal) {
        HStack {
            ForEach(0..<thumbnails.count, id: \.self) { index in
                Image(uiImage: thumbnails[index])
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 33, height: 40)
            }
        }
        .padding(.bottom, 18)
        .overlay(alignment: .leading) {
            Rectangle()
                .fill(Color.white)
                .frame(width: 4, height: 44)
                .frame(width: 50, height: 50)
                .contentShape(Rectangle())
                .cornerRadius(10)
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .inset(by: 0.5)
                        .stroke(Color.black, lineWidth: 1)
                )
                .offset(x: videoSize.width * progress)
                .padding(.bottom, 18)
        }
    }
}

enter image description here

As I see I need to find proper width and/or offset values, tracking progress but I'm stuck at this. Also I need somehow handle my dragGesture, when I move my Rectangle() it will slide over images.

I'll really appreciate if you give me some advices or show right direction!

0

There are 0 best solutions below