lbry-desktop/ui/component/fileDownloadLink/view.jsx

120 lines
3 KiB
React
Raw Normal View History

2018-05-21 22:30:00 +02:00
// @flow
2018-11-26 02:21:25 +01:00
import * as ICONS from 'constants/icons';
import * as MODALS from 'constants/modal_types';
2020-02-01 22:17:20 +01:00
import React, { useState } from 'react';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2017-09-08 05:15:05 +02:00
2018-05-21 22:30:00 +02:00
type Props = {
2019-08-06 05:25:33 +02:00
uri: string,
2020-01-07 19:17:43 +01:00
claim: StreamClaim,
claimIsMine: boolean,
2018-05-21 22:30:00 +02:00
downloading: boolean,
loading: boolean,
2019-08-06 05:25:33 +02:00
fileInfo: ?FileListItem,
openModal: (id: string, { path: string }) => void,
pause: () => void,
2019-08-06 05:25:33 +02:00
download: string => void,
costInfo: ?{ cost: string },
buttonType: ?string,
showLabel: ?boolean,
2020-01-29 19:58:43 +01:00
hideOpenButton: boolean,
2020-02-05 03:54:19 +01:00
hideDownloadStatus: boolean,
2020-05-21 17:38:28 +02:00
streamingUrl: ?string,
2018-05-21 22:30:00 +02:00
};
2019-08-02 08:28:14 +02:00
function FileDownloadLink(props: Props) {
const {
fileInfo,
downloading,
loading,
openModal,
pause,
claimIsMine,
download,
uri,
claim,
2020-09-30 22:46:20 +02:00
buttonType,
showLabel = false,
2020-01-29 19:58:43 +01:00
hideOpenButton = false,
2020-02-05 03:54:19 +01:00
hideDownloadStatus = false,
2020-05-21 17:38:28 +02:00
streamingUrl,
} = props;
2020-05-21 17:38:28 +02:00
const [didClickDownloadButton, setDidClickDownloadButton] = useState(false);
const fileName = claim && claim.value && claim.value.source && claim.value.source.name;
2020-02-01 22:17:20 +01:00
2020-06-08 22:26:49 +02:00
// @if TARGET='web'
2020-05-21 17:38:28 +02:00
React.useEffect(() => {
if (didClickDownloadButton && streamingUrl) {
let element = document.createElement('a');
element.setAttribute('href', `${streamingUrl}?download=true`);
element.setAttribute('download', fileName);
element.style.display = 'none';
// $FlowFixMe
document.body.appendChild(element);
element.click();
// $FlowFixMe
document.body.removeChild(element);
2020-05-21 17:38:28 +02:00
setDidClickDownloadButton(false);
}
2020-12-01 18:56:59 +01:00
}, [streamingUrl, didClickDownloadButton, fileName]);
2020-06-08 22:26:49 +02:00
// @endif
2017-09-08 05:15:05 +02:00
2020-01-29 19:58:43 +01:00
function handleDownload(e) {
2020-05-21 17:38:28 +02:00
setDidClickDownloadButton(true);
2020-02-01 22:17:20 +01:00
e.preventDefault();
download(uri);
}
2020-05-21 17:38:28 +02:00
if (!claim) {
return null;
}
// @if TARGET='app'
if (downloading || loading) {
if (hideDownloadStatus) {
return null;
}
2018-03-26 23:32:43 +02:00
if (fileInfo && fileInfo.written_bytes > 0) {
const progress = (fileInfo.written_bytes / fileInfo.total_bytes) * 100;
return <span className="download-text">{__('%percent%% downloaded', { percent: progress.toFixed(0) })}</span>;
} else {
return <span className="download-text">{__('Connecting...')}</span>;
}
2019-08-02 08:28:14 +02:00
}
2020-05-21 17:38:28 +02:00
// @endif
2017-09-08 05:15:05 +02:00
2019-08-02 08:28:14 +02:00
if (fileInfo && fileInfo.download_path && fileInfo.completed) {
const openLabel = __('Open file');
2020-01-29 19:58:43 +01:00
return hideOpenButton ? null : (
<Button
button={buttonType}
title={openLabel}
label={showLabel ? openLabel : null}
2020-01-29 19:58:43 +01:00
icon={ICONS.EXTERNAL}
onClick={() => {
pause();
openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, { path: fileInfo.download_path, isMine: claimIsMine });
}}
/>
2019-08-02 08:28:14 +02:00
);
2017-09-08 05:15:05 +02:00
}
2020-05-21 17:38:28 +02:00
const label = __('Download');
return (
2020-01-29 19:58:43 +01:00
<Button
button={buttonType}
2020-09-30 22:46:20 +02:00
className={buttonType ? undefined : 'button--file-action'}
title={label}
2020-01-29 19:58:43 +01:00
icon={ICONS.DOWNLOAD}
label={showLabel ? label : null}
2020-01-29 19:58:43 +01:00
onClick={handleDownload}
/>
);
2017-09-08 05:15:05 +02:00
}
export default FileDownloadLink;