fix: prevent pdf flickering

[Zir0h]

Possible fix for #220
Looks like the page is rendered twice when doing next/previous, this causes it to jump around on the UI

[github-actions]

PR Preview Action v1.4.4
🚀 Deployed preview to https://teia-community.github.io/teia-ui/previews/pr-355/
on branch gh-pages at 2023-11-28 18:18 UTC

[melMass]

I can still see the flicker, what you removed was actually an attempt at removing the flicker (that failed).
I just tested it briefly, but with this PR all page flicker, whereas in master page flicker only once but once cached they don't anymore

[melMass]

It's like 1 frame 😅

[Zir0h]

I can still see the flicker, what you removed was actually an attempt at removing the flicker (that failed). I just tested it briefly, but with this PR all page flicker, whereas in master page flicker only once but once cached they don't anymore

aah okay! could it be related to the pdfjs version maybe? we're currently 2 major versions behind it seems 😅

[Zir0h]

In the pdfjs examples they use a rendering queue, see queueRenderPage

[melMass]

we're currently 2 major versions behind it seems 😅

Yeah I think that would be wise to update 😅

In the pdfjs examples they use a rendering queue, see queueRenderPage

This looks like the proper implementation of my attempt

[Zir0h]

updating didn't change much, it still goes like page 1 => blank page for a flash => page 2 => blank page for a flash => page 3, it's weird

[Zir0h]

The example in react-pdf also flickers 😆

[melMass]

The example in react-pdf also flickers 😆

Ohhh indeed ahah🤦 !
But the one you posted earlier is a good reference.
I will have time to dive and test more tomorrow

[Zir0h]

The example in react-pdf also flickers 😆

Ohhh indeed ahah🤦 ! But the one you posted earlier is a good reference. I will have time to dive and test more tomorrow

This looks like what you were trying to do before? With some hidden page shenanigans 😆

[Zir0h]

we're currently 2 major versions behind it seems 😅

Yeah I think that would be wise to update 😅

In the pdfjs examples they use a rendering queue, see queueRenderPage

This looks like the proper implementation of my attempt

This code also has the same issue. I think that the minted pdf files on teia are more "image" type than "text", so rendering them is always harder on the browser than just ASCII :/

[Zir0h]

objkt.com uses https://www.npmjs.com/package/ng2-pdf-viewer which works very well, but I suppose there's no way to make that work on react?

//edit: without using iframes (because that would be easy I think, like we do for previews with iframe.teia.art)

[Zir0h]

https://vadimdez.github.io/ng2-pdf-viewer/ this is snappy 😄 just put an ipfs link as source and uncheck "show all pages"

[melMass]

vadimdez.github.io/ng2-pdf-viewer this is snappy 😄 just put an ipfs link as source and uncheck "show all pages"

Angular is widely different not sure how we could do that sanely tbh.

[melMass]

Will merge tomorrow if no one see objections.

@Zir0h just migrated the iframe thing we removed a few months back to it's own repo -> https://github.com/teia-community/teia-iframe

The idea proposed by Z0 would be to add support for pdf there so that we can use whatever work best