fox-send/app/ui/noStreams.js

101 lines
3.4 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">${state.translate('downloadFilesTitle')}</h1>
<p
class="w-full p-2 border border-yellow-light rounded md:w-4/5 text-orange-dark bg-yellow-lighter 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">
<img class="mr-3 flex-no-shrink" src="${assets.get(
'blue_file.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-no-shrink items-center justify-center"
value="${state.translate('copyUrlFormButtonText')}"
title="${state.translate('copyUrlFormButtonText')}"
type="submit" />
</form>
</div>
`;
function optionChanged(event) {
event.stopPropagation();
const choice = event.target.value;
const button = event.currentTarget.nextElementSibling;
let title = button.title;
switch (choice) {
case 'copy':
title = state.translate('copyUrlFormButtonText');
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', archive);
break;
}
return false;
}
};