New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Synchronize animated image playback inside of LazyStack #300
Comments
PS: Things I have tested so far:
|
This is a feature which need the upstream SDWebImage support In SD6, we will support Currently seems hard to do, until we use a shared |
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 |
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 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)
}
}
} |
Yes, that would be exactly what I am looking for! |
DM reply and post the code here cc @dreampiggy We can use something like the Public APIpublic 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 Usagestruct 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 implementationpublic 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
...
}
}
|
Is this behavior what you want ? Note for the |
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.
RPReplay_Final1709503396.MP4
The text was updated successfully, but these errors were encountered: