igordanchenko/yet-another-react-lightbox

Add the ability to pass a download function to Download plugin

thefinnomenon opened this issue · 7 comments

thefinnomenon commented

Is your feature request related to a problem? Please describe.

I am handling downloads differently for desktop (initiating file download) vs mobile (opening share sheet) and would like to be able to trigger this functionality upon download button click instead of the current download functionality.

Describe the solution you'd like

The ability to pass a download function to the plugin and it would be nice to be able to control a loading state since the share sheet solution requires downloading the blob.

Describe alternatives you've considered

The only alternative I can think of is to create my own custom Download plugin but I think it would be advantageous to add this ability to the default plugin.

Additional context

No response

igordanchenko commented

Hi there!

  1. Are you referring to the Web Share API? It probably should be a separate plugin with a different icon, and it could be used in tandem with the Download plugin.
<Lightbox
  plugins={[ Share.isSupported() ? Share : Download ]}
  // ...
/>

Here is a proof of concept demo - https://rjvyek.csb.app

  1. I don't believe I can add a loading state to the existing Download plugin since that implementation can't be promisified. However, it should be trivial in the case of Share plugin. Do you have a suggestion on the visual effect for the loading state?
thefinnomenon commented

Thanks for the POC! I am going to adapt it to fit my use case.

I think the loading state isn't needed for the Share plugin since it is instant. I am doing funky stuff with file downloads.

You should definitely publish this Share Plugin -- I think it is a cool addition.

igordanchenko commented

Thank you for your feedback. I'm glad to hear you were able to solve your use case with the above POC.

I'll go ahead and implement support for custom download function as it may be helpful for other users as well. One example could be pre-signing download urls on-demand.

<Lightbox
  slides={slides}
  download={{
    download: async ({ slide, saveAs }) => {
      if (isImageSlide(slide)) {
        saveAs(await presignUrl(slide.src));
      }
    },
  }}
  // ...
/>
github-actions commented

🎉 This issue has been resolved in version 3.8.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

iaminarush commented

I'm trying out the new custom download function, but the download button seems to be disabled if I put a function inside the the download prop. You can find the sandbox here, thanks a lot!

igordanchenko commented

When using custom download function, downloadable slides must be marked with truthy download attribute. I’ll update the docs.

igordanchenko commented

Well, actually, I'm going to reverse this logic before this feature sees wide adoption. Non-downloadable slides should be marked with download: false attribute. The fix is available in v3.8.3. Should have implemented it this way from the get-go...

  • 👍2