fox-send/app/ui/noStreams.js

109 lines
3.6 KiB
JavaScript

const html = require('choo/html');
const { bytes } = require('../utils');
const assets = require('../../common/assets');
module.exports = function(state, emit) {
const archive = state.fileInfo;
return html`
<div
class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
>
<h1 class="mb-4 text-3xl font-bold">${state.translate(
'downloadTitle'
)}</h1>
<p
class="w-full p-2 border border-yellow-50 rounded md:w-4/5 text-orange-60 bg-yellow-40 text-center leading-normal"
>
⚠️ ${state.translate('noStreamsWarning')} ⚠️
</p>
<form class="md:w-128" onsubmit=${submit}>
<fieldset class="border rounded p-4 my-4" onchange=${optionChanged}>
<div class="flex items-center mb-2">
<svg class="h-8 w-6 mr-3 flex-shrink-0 text-primary">
<use xlink:href="${assets.get('blue_file.svg')}#icon"/>
</svg>
<p class="flex-grow">
<h1 class="text-base font-medium word-break-all">${
archive.name
}</h1>
<div class="text-sm font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
</div>
<div class=" mt-6 mb-3">
<input class="mx-2" type="radio" name="gus" id="copy" value="copy" checked>
<label class="" for="copy">${state.translate(
'noStreamsOptionCopy'
)}</label>
</div>
<div class="my-3">
<input class="mx-2" type="radio" name="gus" id="firefox" value="firefox">
<label class="" for="firefox">${state.translate(
'noStreamsOptionFirefox'
)}</label>
</div>
<div class="mt-3">
<input class="mx-2" type="radio" name="gus" id="download" value="download">
<label class="" for="download">${state.translate(
'noStreamsOptionDownload'
)}</label>
</div>
</fieldset>
<input
class="btn rounded-lg w-full flex flex-shrink-0 items-center justify-center"
value="${state.translate('copyLinkButton')}"
title="${state.translate('copyLinkButton')}"
type="submit" />
<p
class="text-grey-80 leading-normal dark:text-grey-40 font-semibold text-center md:my-8 md:text-left"
>
${state.translate('downloadConfirmDescription')}
</p>
</form>
</div>
`;
function optionChanged(event) {
event.stopPropagation();
const choice = event.target.value;
const button = event.currentTarget.nextElementSibling;
let title = button.title;
console.error(choice, title);
switch (choice) {
case 'copy':
title = state.translate('copyLinkButton');
break;
case 'firefox':
title = state.translate('downloadFirefox');
break;
case 'download':
title = state.translate('downloadButtonLabel');
break;
}
button.title = title;
button.value = title;
}
function submit(event) {
const action = document.querySelector('input[type="radio"]:checked').value;
switch (action) {
case 'copy':
emit('copy', { url: window.location.href });
document.querySelector('input[type="submit"]').value = state.translate(
'copiedUrl'
);
break;
case 'firefox':
window.open(
'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com'
);
break;
case 'download':
emit('download');
break;
}
return false;
}
};