Allow to open viewer in a separate window

[pandablue0809]

Issue

Make possible to open the integrated viewer in a separate window (/nft page).

[ihomp]

@Anna15170221 can you test this one and write your suggestions?

from me: it seems a lot of code was copy pasted from a different component, we shouldn't copy-paste the code, we need to extract it and reuse it.. that way we will keep the code maintanable.

• the full-screen view - has trouble with scrolling; also, the scrolling button shouldn't be there.
• the buttons to view full screen and to download music should be in the same style (new style you suggested) ..
• when we have both audio and image - we have two buttons to view full screen - that shoudn't be the case.

[ihomp]

• why search block css was changed? that can break with some popups scrolling for fixed objects etc.. that is need to be tested well.

[ihomp]

It seems there is a lot of copy-pasted code that needs to be extracted and reused.

[Anna15170221]

@pandablue0809

the buttons are on the image - for me doesn't look nice for desktop
and the mobile view should also be improved I think

http://localhost:3000/en/nft/00083A9836EC5BC756007990B29DBFC81F45460ED8B8583A6442C30600000069 - I tested on this one

[Anna15170221]

@ihomp Slava, popups scrolling for fixed objects - what do you mean here?
that can break with some popups scrolling for fixed objects etc.. that is need to be tested well.

[pandablue0809]

@ihomp
i fixed it. plz review again. 🙏

[ihomp]

@ihomp Slava, popups scrolling for fixed objects - what do you mean here? that can break with some popups scrolling for fixed objects etc.. that is need to be tested well.

@pandablue0809 chenaged css for the search block, so the search block on other pages can appear over some popuup windows like choosinga. token or when signing transactions, or when scrolling on a pages, some elemnts can be under the bar or over the bar.. it's dangerous to change such parameters without proper testing on different pages with different scenarious

[ihomp]

@ihomp i fixed it. plz review again. 🙏

@Anna15170221 can you test again please

[pandablue0809]

@ihomp
i fixed it.
plz review again. 🙏

[Anna15170221]

@pandablue0809
the button "video" is on the image until you open the full screen size.

The rest looks ok for me.

[pandablue0809]

@Anna15170221 @ihomp
i fixed it.
plz review again. 🙏

[Anna15170221]

@pandablue0809 @ihomp
looks ok for me.

[ihomp]

There are a lot of copy-pasted functions and code.
You can not copy-paste the same function within the same app, they need to be extracted as functions and reused.

[pandablue0809]

@ihomp
i fixed it
plz review again 🙏

[ihomp]

Please check how you used styles in the other pages you did:
/pages/nft-collection
/pages/objects
/pages/services/account-settings

Please use it here in the same way.

[pandablue0809]

@ihomp
i fixed it
plz review again 🙏

[ihomp]

@Anna15170221 can you please test again, please

[Anna15170221]

@ihomp for me looks ok.

[ihomp]

where is this part go?

[ihomp]

why nft is deleted?

[ihomp]

There are many things affected by this PR:
I see some logic was deleted for loading states for models for example.

We need to test:
NFT pages with:

• image + audio
• image + video
• image + audio + video
• image + model
• model
• video

We need to make sure
When the model is loading, we see the loading state on the NFT page
When testing, we need to check how it is now and how it will be after the PR.

we need to make sure we have proper loading states

• videos
• images
• models

We need to make sure we show errors for failing loading images
that 18+ still works on the nft page

@Anna15170221 @pandablue0809, please send me some examples where you've tested, so I can check too.