swiftimageswiftuivideo-thumbnails

How to show Thumbnail video url in image in SwiftUI


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

enter image description here

need like this

enter image description here


Solution

  • 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

    enter image description here