updateModalImages() in show$ does not work

[yarozar]

When running updateModalImages() inside subscriptions of show$() (or firstImage$, lastImage$) you still get an image from before updateModalImages() array shown, and only next navigation clicks get you to the refreshed images array.

In manual it says that show$ is fired BEFORE image visible so I expected to override current image with updateModalImages() ...

Also, from this as a workaround comes a question if it is possible to programmatically change currentImage in already opened gallery? Did not find anything in docs.

Thanks!

p.s.: your gallery looks and works great, thank you very much for making it available for everyone!

[Ks89]

In manual it says that show$ is fired BEFORE image visible

Are you saying that show$ is fired AFTER instead of BEFORE?

if it is possible to programmatically change currentImage in already opened gallery

At the moment, this is not possible.

[yarozar]

In manual it says that show$ is fired BEFORE image visible

Are you saying that show$ is fired AFTER instead of BEFORE?

not show$ itself, but it's subscription next func is getting executed after image is rendered, due to its async nature probably:

modalGalleryRef = this.ks89GalleryService.open(
...
  images: someImages,
...
)

modalGalleryRef.show$.subscribe(
  (next: ImageModalEven) => {
    if (next.result === 2) { // lets update images array when user navigates to 2nd image
       this.ks89GalleryService.updateModalImages(newImages);
      // ^^ this one looks like ignored and image from `someImages[1]` array is shown
      // until clicking next/prev and then you realize that images array was updated
      // with `newImages[]`
    }
  },
);

that makes it impossible for me to "intercept" user during gallery navigation action, to serve him with different image (by updating images array under the hood)

I would expect actual image render to happen after show$ subscription's event complete (if there is one present).

[Ks89]

Mmm ok now I understand. Yes it Is asynchronous. I'll try to do some experiments.

[Ks89]

I made some experiment but I don't know which workaround could work to implement this.
I modified the code of the library to emit the event after a delay and in this way it works, but it isn't the right way to implement it.

To add this feature we need to modify the library to support pagination, but this is a huge change.
We need to track exactly which features to implement, for instance:

• add a way to change currentImage via service (but this should be done only choosing an image from the images array)
• think a way to add pagination

[yarozar]

Is it easier to add to ks89GalleryService.updateModalImages(...) 2nd parameter like currentImage which will make that image shown/selected when images array is updated?.. There probably will be some "flickering" when this is used inside show$ but at least there will be "less flickering" compared when you close/re-open gallery (that's how I do it today). 🤷‍♂️

[Ks89]

Yes, but it's a workaround, I cannot add this feature to a library used by many other people. This could cause other issues or misuses.
The right way to implement this is adding pagination as a real feature to the library.

However I still don't understand why you don't append images to the array instead of replace them.
Let say that I have 50 images and I receive these in 5 pages of 10 images.
When the async service that retrieve the images has some data, it adds to the array automatically, without replacing anything in the array. The only thing you need to know is when you can call the service to obtain the next page (for instance you reached 50% of the current page).
I never tried to implement this, but if you have a working example to simulate your scenario I can try locally to do some experiments. If you can, please create a new public repo based on the official example/angular-cli-16.

[yarozar]

Well, I "flip" pages when user reaches the last on current page and clicks next, that's the logical way to do it. Trying to do guess with things like "reached 50% of the current page" gives a lot of different edge cases which also had to be dealt with somehow (like ModalGallery is triggerent with currentImage being last on current page - should I immediately fire next page fetch and re-populate it in that case, etc).