try web share api

This commit is contained in:
Danny Coates 2019-03-09 17:59:06 -08:00
parent aa56216e76
commit 9294ecb09f
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
3 changed files with 68 additions and 2 deletions

View File

@ -90,6 +90,7 @@ export default async function getCapabilities() {
} catch (e) {
account = false;
}
const share = !!navigator.share;
return {
account,
@ -98,6 +99,7 @@ export default async function getCapabilities() {
streamUpload: nativeStreams || polyStreams,
streamDownload:
nativeStreams && serviceWorker && browserName() !== 'safari',
multifile: nativeStreams || polyStreams
multifile: nativeStreams || polyStreams,
share
};
}

View File

@ -5,6 +5,7 @@ import * as metrics from './metrics';
import { bytes } from './utils';
import okDialog from './ui/okDialog';
import copyDialog from './ui/copyDialog';
import shareDialog from './ui/shareDialog';
import signupDialog from './ui/signupDialog';
export default function(state, emitter) {
@ -168,7 +169,9 @@ export default function(state, emitter) {
file: ownedFile
});
}
state.modal = copyDialog(ownedFile.name, ownedFile.url);
state.modal = state.capabilities.share
? shareDialog(ownedFile.name, ownedFile.url)
: copyDialog(ownedFile.name, ownedFile.url);
} catch (err) {
if (err.message === '0') {
//cancelled. do nothing

61
app/ui/shareDialog.js Normal file
View File

@ -0,0 +1,61 @@
const html = require('choo/html');
/* Possible strings for l10n
shareLinkDescription = Share the link to your file:
shareLinkButton = Share link
shareMessage = Download { $name } with { -send-brand }: simple, safe file sharing
*/
module.exports = function(name, url) {
return function(state, emit, close) {
return html`
<send-share-dialog
class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
>
<h1 class="font-bold my-4">
${state.translate('notifyUploadEncryptDone')}
</h1>
<p class="font-normal leading-normal text-grey-darkest word-break-all">
Share the link to your file:<br />
${name}
</p>
<input
type="text"
id="share-url"
class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1"
value="${url}"
readonly="true"
/>
<button
class="btn rounded-lg w-full flex-no-shrink focus:outline"
onclick="${share}"
title="Share link"
>
Share link
</button>
<button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline"
onclick="${close}"
title="${state.translate('okButton')}"
>
${state.translate('okButton')}
</button>
</send-share-dialog>
`;
async function share(event) {
event.stopPropagation();
try {
await navigator.share({
title: state.translate('-send-brand'),
text: `Download ${name} with Firefox Send: simple, safe file sharing`,
//state.translate('shareMessage', { name }),
url
});
} catch (e) {
console.error(e);
}
setTimeout(close, 1000);
}
};
};