Added Web Share API to photo viewer and clipboard

[signalkraft]

This PR adds share buttons using the Web Share API in browsers that support it. Basically, it opens the native Share menu on mobile devices and some desktop browsers, letting users share / edit / mail photos from the PWA as you would from a native photo gallery app.

I built this after watching someone struggle to share a photo from the PhotoPrism PWA on Android with a friend on WhatsApp.

• It works alongside the existing sharing features, which may be a bit confusing, but at least there are different icons
• It works from the photo viewer toolbar, and from the photo clipboard after selecting one or more photos
• I left the share button in the album toolbar alone, I think it makes more sense to share URLs to albums instead of downloading and sharing all the files
• I had a bit of a name collision between the JS File and your model, so I broke that part of the code out into common/util. Let me know if there's a better way to do that
• I tested it on Windows in Edge, Chrome and Firefox (where it's not supported and doesn't show up by design), but couldn't test on my mobile devices since Web Share requires HTTPS and I couldn't get that set up between my dev environment and my phone
• AFAIK there's no easy way to cover this with automated testcases, so I didn't write any

[CLAassistant]

All committers have signed the CLA.

[graciousgrey]

Thank you for your contribution!

Because we want to create the best possible product for our users, we have a set of guidelines which ensure that all source code contributions are acceptable:

• The feature must be fully implemented
• Unit and acceptance tests have to be written
• The feature must work with sqlite and mysql
• The UI must be fully responsive
• It needs to be tested on multiple browsers and devices
• Translations need to be created for all languages
• Docs need to be updated

Reviewing, testing and finally merging pull requests consumes significant resources on our side. Unless it's just a small fix, it may take several months.

Thanks for your patience :)

[graciousgrey]

As there is no support for firefox and chrome, what other browsers can be used on Android to install the PWA?

Am I right that it won't work for everyone who already installed the PWA using chrome or firefox?

[signalkraft]

This should work on mobile browser, regardless of using it as a PWA or in the browser without installing it. The web share API works in both cases. It should also work if people installed it previously, after photoprism gets updated.

[graciousgrey]

Sounds good! If firefox and chrome are supported on mobile devices that should be fine.
I will test it once we merged local https support to develop.

[alexislefebvre]

You can use a took like https://ngrok.com/ to have HTTPS on your local environment.

[signalkraft]

@alexislefebvre thanks, I tested it with ngrok and it works fine in Chrome on Android.

But, turns out Firefox never implemented the files part of the Web Share API, there's an old ticket for it here: https://bugzilla.mozilla.org/show_bug.cgi?id=1635700

So the green checkmark on https://caniuse.com/?search=Navigator%20share for Firefox on Android is a bit misleading, when you scroll down there's more sections that are actually red.

[elisman]

What's the status of this PR? It's been over a year now.
@signalkraft, is only the CLA missing?

[lastzero]

The status is (a) we need a larger team (b) the CLA is not signed (c) there are merge conflicts and (d) there might be tests missing.

[signalkraft]

I thought I signed the CLA when I created the PR - I guess it changed? I signed it again, in any case.

Since I've personally stopped using Photoprism a while ago, I wont have time to work on this further. It's a small PR, so I hope someone else can pick it up.

As for automated testcases, I'm unsure how that would work with the Web Share API. I guess it could be mocked?

[lastzero]

@signalkraft Since you have no motivation to keep working on it and don't seem to need it anymore, I'll close this PR. Thank you for your contribution!