101 lines
3.4 KiB
JavaScript
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;
|
|||
|
|
}
|
|||
|
|
};
|