Synchronize animated image playback inside of LazyStack

[LosFarmosCTL]

The application I am working on needs to display a lot of animated "emotes" within text messages, often multiple occurrences of the same image, which get out of sync when the individual messages are being scrolled inside of a lazy stack. Since the playback is paused when they move out of view and resumed at the old position when they reappear, the other images have moved on to different frames in the meantime.

Now, I feel like the synchronization aspect should probably be on me (the actual application) to handle, but I can't figure out any way to control the playback of animated images. The image player is not exposed, neither are there methods to control it indirectly.

Would be great to have an option for that, since otherwise the only way I see for me to move forward is building my own custom wrapper for SDWebImage that enables me to do so, which would be a shame compared to just using this more matured library.

import SwiftUI
import SDWebImageSwiftUI

struct ContentView: View {
  let imageURL = URL(string: "https://cdn.betterttv.net/emote/5a8314b61686393232d31027/3x.gif")!

  var body: some View {
    ScrollView {
      LazyVStack {
        ForEach(1...200, id: \.self) { _ in
          AnimatedImage(url: imageURL)
            .resizable()
            .frame(width: 25, height: 25)
        }
      }
    }
  }
}

https://github.com/SDWebImage/SDWebImageSwiftUI/assets/80157503/77a8abd8-625a-4f05-b278-f9f44f23b366

[LosFarmosCTL]

PS: Things I have tested so far:

• use WebImage, but even if using it would work, the performance is absolutely unfeasible for my use case, there might be 100+ animated images displayed at once, which is fine using the UIKit implementation but just doesn't scale at all for SwiftUI
• create the AnimatedImage instance only once as a constant and use that inside of body, doesn't change anything and is definitely not how SwiftUI should work
• look at the available constructor options and methods of AnimatedImage

[dreampiggy]

This is a feature which need the upstream SDWebImage support

In SD6, we will support all of playing status on each image view in sync

Currently seems hard to do, until we use a shared SDAnimatedImagePlayer, which need break changes. (Currently, each AnimatedImage hold a different SDAnimatedImagePlayer internally, sync the status between them is hard)

[LosFarmosCTL]

In SD6, we will support all of playing status on each image view in sync

Great to hear that this is planned! Is there any rough timeframe for when we could expect SD6?

Depending on that I'll have to decide if I'd just wait for the update or if implementing synchronization in my App using SDAnimatedImagePlayer directly myself is worth it.

[dreampiggy]

Seems long time pass.

Do you still have this feature request ?

I'd like to introdce a API, which allows you to sync different image views (For UIKit, it's SDAnimatedImageView, for SwiftUI, it's AnimatedImage).

Just like this (example API usage)

  @State isPlaying: Bool = true
  var player: AnimatedImagePlayer(url: imageURL, isPlaying: $isPlaying)
  var body: some View {
    ScrollView {
      LazyVStack {
        ForEach(1...200, id: \.self) { _ in
          AnimatedImage(player: player)
            .resizable()
            .frame(width: 25, height: 25)
        }
      }
    }

[LosFarmosCTL]

Do you still have this feature request ?

I'd like to introdce a API, which allows you to sync different image views (For UIKit, it's SDAnimatedImageView, for SwiftUI, it's AnimatedImage).

Just like this (example API usage)

Yes, that would be exactly what I am looking for!

[Kyle-Ye]

Seems long time pass.

Do you still have this feature request ?

I'd like to introdce a API, which allows you to sync different image views (For UIKit, it's SDAnimatedImageView, for SwiftUI, it's AnimatedImage).

Just like this (example API usage)

  @State isPlaying: Bool = true
  var player: AnimatedImagePlayer(url: imageURL, isPlaying: $isPlaying)
  var body: some View {
    ScrollView {
      LazyVStack {
        ForEach(1...200, id: \.self) { _ in
          AnimatedImage(player: player)
            .resizable()
            .frame(width: 25, height: 25)
        }
      }
    }

DM reply and post the code here cc @dreampiggy

We can use something like the tag and coordinateSpace API

Public API

public struct AnimatedImageCoordinateTag: EnvironmentKey {
    public static var defaultValue: String? { nil }
}

extension EnvironmentValues {
    public var animatedImageCoordinateTag: String? {
        get { self[AnimatedImageCoordinateTag.self] }
        set { self[AnimatedImageCoordinateTag.self] = newValue }
    }
}

Downstream Usage

struct TestContentView: View {
    let imageURL = URL(string: "https://cdn.betterttv.net/emote/5a8314b61686393232d31027/3x.gif")!

    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(1 ... 200, id: \.self) { _ in
                    AnimatedImage(url: imageURL)
                        .resizable()
                        .frame(width: 25, height: 25)
                        .environment(\.animatedImageCoordinateTag, "A")
                }
                ForEach(1 ... 200, id: \.self) { _ in
                    AnimatedImage(url: imageURL)
                        .resizable()
                        .frame(width: 25, height: 25)
                        .environment(\.animatedImageCoordinateTag, "B")
                }
            }
        }
    }
}

Internal implementation

public struct AnimatedImage : PlatformViewRepresentable {
    ...
    public func makeUIView(context: Context) -> AnimatedImageViewWrapper {
        let tag = context.environment.animatedImageCoordinateTag
        // Framework internal logic
        ...
    }

    public func updateUIView(_ uiView: AnimatedImageViewWrapper, context: Context) {
        let tag = context.environment.animatedImageCoordinateTag
        // Framework internal logic
        ...
    }
}

If you have more question about EnvironmentKey or EnvironmentValues You can give my implementation of EnvironmentValues and EnvironmentKey a look

[dreampiggy]

Is this behavior what you want ?

Demo.mov.zip

Note for the Synchronization, we have some hack behavior like pauseable modifier, which may cause other view status mass. Currently I disable that support

[LosFarmosCTL]

Yes, this looks exactly like what I'm looking for!