How to show Thumbnail video url in image in SwiftUI

Question

I am getting array of video urls that i need to show as a thumbnail image(need to show that video) or thumbnail video

for that tried below

code: with this code only placeholder image is showing. i need video to be shown

struct GalleryVedioDetailsView: View {

@State private var gotoPreview = false
@StateObject private var viewModel = GalleryViewModel()

var body: some View {
    
    ZStack {
        Color.hexF4F4FC
            .ignoresSafeArea()
        VStack(spacing: 0) {
            
            VStack {
                ScrollView {
                    
                    LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 4), count: 4), spacing: 4) {
                        
                        ForEach(0..<viewModel.video.count, id: \.self) { ind in
                            Button {
                                gotoPreview = true
                            } label: {
                                let width = ((screenWidth - 24) / 4) - 2
                                URLImageView(url: viewModel.video[ind].url ?? "" , placeholder: "PhotogalleryPlaceholder", width: width, height: width)
                                    .scaledToFill()
                                    .clipped()
                            }
                            .buttonStyle(.plain)
                        }
                    }
                    .padding(.top, 10)
                    .padding(.horizontal, 12)
                }
            }
            
        }
    }
}
}

o/p: showing like this

need like this

Answer 1

I have changed url string to thumbnail like this.. this worked for me

ForEach(0..<viewModel.video.count, id: \.self) { ind in
Button {
    // gotoPreview = true
} label: {
    let width = ((screenWidth - 24) / 4) - 2
    ZStack {
        if let strPhotoURL1 = viewModel.video[ind].url, let value = strPhotoURL1.extractYoutubeIdFromLink() {
            let strVideoID = value
            let strPhotoURL = "https://img.youtube.com/vi/\(strVideoID)/hqdefault.jpg"
            URLImageView(url: strPhotoURL, placeholder: "PhotogalleryPlaceholder")
                .scaledToFill()
                .clipped()
        } else {
            URLImageView(url: "", placeholder: "PhotogalleryPlaceholder", width: width, height: width)
                .scaledToFill()
                .clipped()
        }
        Image(systemName: "play.circle.fill")
            .resizable()
            .frame(width: 25, height: 25)
            .foregroundColor(.white)
            .opacity(0.7)
    }
}
.buttonStyle(.plain)
}


extension String {
func extractYoutubeIdFromLink() -> String? {
    let pattern = "((?<=(v|V)/)|(?<=be/)|(?<=(\\?|\\&)v=)|(?<=embed/))([\\w-]++)"
    guard let regExp = try? NSRegularExpression(pattern: pattern, options: .caseInsensitive) else {
        return nil
    }
    let nsLink = self as NSString
    let options = NSRegularExpression.MatchingOptions(rawValue: 0)
    let range = NSRange(location: 0, length: nsLink.length)
    let matches = regExp.matches(in: self as String, options: options, range: range)
    if let firstMatch = matches.first {
        return nsLink.substring(with: firstMatch.range)
    }
    return nil
}
}

o/p will be like this