Video carousel with lazyhstack not loading some videos

[rapgodnpm]

YouTubePlayerKit Environment

• YouTubePlayerKit version: 1.2.1
• macOS version: monterey 12.6
• Xcode version: 14
• Dependency manager (SPM, Manually): SPM

What did you do?

Video carousel with lazy h stack

What did you expect to happen?

A video carousel

What happened instead?

Some videos are not loading. If I use a normal HStack it works properly

Carousel code (ignore the geometry reader, the issue still happens without it)

//
//  YoutubePlaylistCarousel.swift
//  Lartisien
//
//  Created by Paul Vasile on 22.09.2022.
//

import SwiftUI
import YouTubePlayerKit

struct YoutubePlaylistCarousel: View {
  private let youTubePlayer: YouTubePlayer
  @State private var videoUrls: [String]?
  @State private var scrollPosition: CGFloat = 0
  
  init(playerSource: YouTubePlayer.Source) {
    youTubePlayer = YouTubePlayer(
      source: playerSource,
      configuration: .init(showControls: true, playInline: false, showRelatedVideos: false)
    )
  }
  
  var body: some View {
    ScrollView(.horizontal, showsIndicators: false) {
      ZStack {
        GeometryReader { geometry in
          EmptyView()
            .onChange(of: geometry.frame(in: .named("scroll")).origin.x) { newValue in
              scrollPosition = newValue
            }
        }
        
        LazyHStack(alignment: .top, spacing: 20) {
          VStack {
            YoutubeCarouselEntry(youTubePlayer: youTubePlayer)
            Text("\(scrollPosition)")
          }
          
          if videoUrls != nil {
            ForEach(videoUrls!, id: \.self) { url in
              YoutubeCarouselEntry(playerSource: .video(id: url))
            }
          }
        }
        .fixedSize()
      }
    }
    .coordinateSpace(name: "scroll")
    .task {
      await getYoutubeVideoIdsFromPlaylist()
    }
  }
  
  func getYoutubeVideoIdsFromPlaylist() async -> Void {
    do {
      let videoUrls = try await youTubePlayer.getPlaylist()
      
      Task { @MainActor in
        self.videoUrls = videoUrls
        self.videoUrls?.removeFirst()
      }
    } catch {
      print("test: \(error)")
    }
  }
}

struct YoutubePlaylistCarousel_Previews: PreviewProvider {
  static var previews: some View {
    YoutubePlaylistCarousel(playerSource: .playlist(id: "PLxsIRUJCHXaHNTPW0una0zb3LULFpL8yp"))
  }
}

Carousel entry code

//
//  YoutubeCarouselEntry.swift
//  Lartisien
//
//  Created by Paul Vasile on 22.09.2022.
//

import SwiftUI
import YouTubePlayerKit

struct YoutubeCarouselEntry: View {
  private let youTubePlayer: YouTubePlayer

  init(playerSource: YouTubePlayer.Source) {
    youTubePlayer = YouTubePlayer(
      source: playerSource,
      configuration: .init(showControls: true, playInline: false, showRelatedVideos: false)
    )
  }
  
  init(youTubePlayer: YouTubePlayer) {
    self.youTubePlayer = youTubePlayer
  }
  
  var body: some View {
    Button(action: {
      youTubePlayer.play()
    }) {
      YouTubePlayerView(youTubePlayer) { state in
        switch state {
          case .idle:
            ProgressView()
          case .ready:
            EmptyView()
              .frame(width: 200, height: 200)
          case .error(let error):
            Text("test \(error.localizedDescription)")
        }
      }
    }
    .frame(width: 200, height: 200)
    .cornerRadius(Theme.CornerRadius.large.value)
  }
}

struct YoutubeCarouselEntry_Previews: PreviewProvider {
  static var previews: some View {
    YoutubeCarouselEntry(playerSource: .video(id: "F7YpzD6Ir4o"))
  }
}

[SvenTiigi]

Hi @rapgodnpm,

Please check out the feature branch feature/player-improvements and let me know if this branch resolves your current issues.

Please be aware that is currently not possible to play multiple YouTube videos at the same time due to a restriction in the YouTubePlayer iFrame API.

[rapgodnpm]

Hello,

It seems to be working.

Thank you.

[rapgodnpm]

Hello, this branch fixes my issues but I don't think it was merged. I still experience them on the main branch

[SvenTiigi]

The feature/player-improvements branch has already been merged in the develop branch but some additional work is needed before merging it to the main branch alongside with a new version of the YouTubePlayerKit.

I will let you know when a new version has been released which contains the loading improvements.