Show warning when opening files externally #2478
8 changed files with 93 additions and 71 deletions
|
@ -37,7 +37,7 @@ class ExternalLink extends React.PureComponent<Props> {
|
||||||
title={title || href}
|
title={title || href}
|
||||||
label={children}
|
label={children}
|
||||||
className="button--external-link"
|
className="button--external-link"
|
||||||
onClick={() => openModal(MODALS.CONFIRM_EXTERNAL_LINK, { uri: href })}
|
onClick={() => openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, { uri: href })}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@ import {
|
||||||
makeSelectClaimForUri,
|
makeSelectClaimForUri,
|
||||||
} from 'lbry-redux';
|
} from 'lbry-redux';
|
||||||
import { makeSelectCostInfoForUri } from 'lbryinc';
|
import { makeSelectCostInfoForUri } from 'lbryinc';
|
||||||
import { doOpenFileInShell } from 'redux/actions/file';
|
import { doOpenModal } from 'redux/actions/app';
|
||||||
import { doPurchaseUri, doStartDownload, doSetPlayingUri } from 'redux/actions/content';
|
import { doPurchaseUri, doStartDownload, doSetPlayingUri } from 'redux/actions/content';
|
||||||
import FileDownloadLink from './view';
|
import FileDownloadLink from './view';
|
||||||
|
|
||||||
|
@ -20,7 +20,7 @@ const select = (state, props) => ({
|
||||||
});
|
});
|
||||||
|
|
||||||
const perform = dispatch => ({
|
const perform = dispatch => ({
|
||||||
openInShell: path => dispatch(doOpenFileInShell(path)),
|
openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
|
||||||
purchaseUri: uri => dispatch(doPurchaseUri(uri)),
|
purchaseUri: uri => dispatch(doPurchaseUri(uri)),
|
||||||
restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
|
restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
|
||||||
pause: () => dispatch(doSetPlayingUri(null)),
|
pause: () => dispatch(doSetPlayingUri(null)),
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
|
import * as MODALS from 'constants/modal_types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import ToolTip from 'component/common/tooltip';
|
import ToolTip from 'component/common/tooltip';
|
||||||
|
@ -20,7 +21,7 @@ type Props = {
|
||||||
loading: boolean,
|
loading: boolean,
|
||||||
costInfo: ?{},
|
costInfo: ?{},
|
||||||
restartDownload: (string, number) => void,
|
restartDownload: (string, number) => void,
|
||||||
openInShell: string => void,
|
openModal: (id: string, { path: string }) => void,
|
||||||
purchaseUri: string => void,
|
purchaseUri: string => void,
|
||||||
pause: () => void,
|
pause: () => void,
|
||||||
};
|
};
|
||||||
|
@ -43,14 +44,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
|
||||||
uri: ?string;
|
uri: ?string;
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { fileInfo, downloading, uri, openInShell, purchaseUri, costInfo, loading, pause, claim } = this.props;
|
const { fileInfo, downloading, uri, openModal, purchaseUri, costInfo, loading, pause, claim } = this.props;
|
||||||
|
|
||||||
const openFile = () => {
|
|
||||||
if (fileInfo) {
|
|
||||||
openInShell(fileInfo.download_path);
|
|
||||||
pause();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading || downloading) {
|
if (loading || downloading) {
|
||||||
const progress = fileInfo && fileInfo.written_bytes ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0;
|
const progress = fileInfo && fileInfo.written_bytes ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0;
|
||||||
|
@ -83,7 +77,15 @@ class FileDownloadLink extends React.PureComponent<Props> {
|
||||||
} else if (fileInfo && fileInfo.download_path) {
|
} else if (fileInfo && fileInfo.download_path) {
|
||||||
return (
|
return (
|
||||||
<ToolTip onComponent body={__('Open file')}>
|
<ToolTip onComponent body={__('Open file')}>
|
||||||
<Button button="alt" iconColor="green" icon={ICONS.EXTERNAL} onClick={() => openFile()} />
|
<Button
|
||||||
|
button="alt"
|
||||||
|
iconColor="green"
|
||||||
|
icon={ICONS.EXTERNAL}
|
||||||
|
onClick={() => {
|
||||||
|
pause();
|
||||||
|
openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, { path: fileInfo.download_path });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</ToolTip>
|
</ToolTip>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
export const CONFIRM_FILE_REMOVE = 'confirm_file_remove';
|
export const CONFIRM_FILE_REMOVE = 'confirm_file_remove';
|
||||||
export const CONFIRM_EXTERNAL_LINK = 'confirm_external_link';
|
export const CONFIRM_EXTERNAL_RESOURCE = 'confirm_external_resource';
|
||||||
export const INCOMPATIBLE_DAEMON = 'incompatible_daemon';
|
export const INCOMPATIBLE_DAEMON = 'incompatible_daemon';
|
||||||
export const FILE_TIMEOUT = 'file_timeout';
|
export const FILE_TIMEOUT = 'file_timeout';
|
||||||
export const DOWNLOADING = 'downloading';
|
export const DOWNLOADING = 'downloading';
|
||||||
|
|
|
@ -1,52 +0,0 @@
|
||||||
// @flow
|
|
||||||
import React from 'react';
|
|
||||||
import { Modal } from 'modal/modal';
|
|
||||||
import { formatLbryUriForWeb } from 'util/uri';
|
|
||||||
// @if TARGET='app'
|
|
||||||
import { shell } from 'electron';
|
|
||||||
// @endif
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
uri: string,
|
|
||||||
closeModal: () => void,
|
|
||||||
};
|
|
||||||
|
|
||||||
class ModalOpenExternalLink extends React.PureComponent<Props> {
|
|
||||||
openExternalLink() {
|
|
||||||
const { uri, closeModal } = this.props;
|
|
||||||
// @if TARGET='app'
|
|
||||||
const { openExternal } = shell;
|
|
||||||
if (uri) {
|
|
||||||
openExternal(uri);
|
|
||||||
}
|
|
||||||
// @endif
|
|
||||||
// @if TARGET='web'
|
|
||||||
window.open(uri);
|
|
||||||
// @endif
|
|
||||||
|
|
||||||
closeModal();
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { uri, closeModal } = this.props;
|
|
||||||
return (
|
|
||||||
<Modal
|
|
||||||
isOpen
|
|
||||||
title={__('Warning!')}
|
|
||||||
contentLabel={__('Confirm External Link')}
|
|
||||||
type="confirm"
|
|
||||||
confirmButtonLabel={__('Continue')}
|
|
||||||
onConfirmed={() => this.openExternalLink()}
|
|
||||||
onAborted={closeModal}
|
|
||||||
>
|
|
||||||
<section className="card__content">
|
|
||||||
<p>{__('This link leads to an external website.')}</p>
|
|
||||||
<blockquote>{uri}</blockquote>
|
|
||||||
<p>{__('LBRY Inc is not responsible for its content, click continue to proceed at your own risk.')}</p>
|
|
||||||
</section>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ModalOpenExternalLink;
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { doHideModal } from 'redux/actions/app';
|
import { doHideModal } from 'redux/actions/app';
|
||||||
import ModalOpenExternalLink from './view';
|
import ModalOpenExternalResource from './view';
|
||||||
|
|
||||||
const perform = dispatch => ({
|
const perform = dispatch => ({
|
||||||
closeModal: () => dispatch(doHideModal()),
|
closeModal: () => dispatch(doHideModal()),
|
||||||
|
@ -9,4 +9,4 @@ const perform = dispatch => ({
|
||||||
export default connect(
|
export default connect(
|
||||||
null,
|
null,
|
||||||
perform
|
perform
|
||||||
)(ModalOpenExternalLink);
|
)(ModalOpenExternalResource);
|
72
src/ui/modal/modalOpenExternalResource/view.jsx
Normal file
72
src/ui/modal/modalOpenExternalResource/view.jsx
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
// @flow
|
||||||
|
import React from 'react';
|
||||||
|
import { Modal } from 'modal/modal';
|
||||||
|
import { formatLbryUriForWeb } from 'util/uri';
|
||||||
|
// @if TARGET='app'
|
||||||
|
import { shell } from 'electron';
|
||||||
|
// @endif
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
uri: string,
|
||||||
|
path: string,
|
||||||
|
closeModal: () => void,
|
||||||
|
};
|
||||||
|
|
||||||
|
class ModalOpenExternalResource extends React.PureComponent<Props> {
|
||||||
|
openExternalResource() {
|
||||||
|
const { uri, path, closeModal } = this.props;
|
||||||
|
// @if TARGET='app'
|
||||||
|
const { openExternal, openItem, showItemInFolder } = shell;
|
||||||
|
if (uri) {
|
||||||
|
openExternal(uri);
|
||||||
|
} else if (path) {
|
||||||
|
const success = openItem(path);
|
||||||
|
if (!success) {
|
||||||
|
showItemInFolder(path);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// @endif
|
||||||
|
// @if TARGET='web'
|
||||||
|
if (uri) {
|
||||||
|
window.open(uri);
|
||||||
|
} else if (path) {
|
||||||
|
// Converintg path into uri, like "file://path/to/file"
|
||||||
|
let _uri = path.replace(/\\/g, '/');
|
||||||
|
// Windows drive letter must be prefixed with a slash
|
||||||
|
if (_uri[0] !== '/') {
|
||||||
|
_uri = `/${_uri}`;
|
||||||
|
}
|
||||||
|
_uri = encodeURI(`file://${_uri}`).replace(/[?#]/g, encodeURIComponent);
|
||||||
|
window.open(_uri);
|
||||||
|
}
|
||||||
|
// @endif
|
||||||
|
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { uri, path, closeModal } = this.props;
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isOpen
|
||||||
|
title={__('Warning!')}
|
||||||
|
contentLabel={__('Confirm External Resource')}
|
||||||
|
type="confirm"
|
||||||
|
confirmButtonLabel={__('Continue')}
|
||||||
|
onConfirmed={() => this.openExternalResource()}
|
||||||
|
onAborted={closeModal}
|
||||||
|
>
|
||||||
|
<section className="card__content">
|
||||||
|
<p>
|
||||||
|
{(uri && __('This link leads to an external website.')) ||
|
||||||
|
(path && __('This file has been shared with you by other people.'))}
|
||||||
|
</p>
|
||||||
|
<blockquote>{uri || path}</blockquote>
|
||||||
|
<p>{__('LBRY Inc is not responsible for its content, click continue to proceed at your own risk.')}</p>
|
||||||
|
</section>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ModalOpenExternalResource;
|
|
@ -21,7 +21,7 @@ import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
|
||||||
import ModalSocialShare from 'modal/modalSocialShare';
|
import ModalSocialShare from 'modal/modalSocialShare';
|
||||||
import ModalSendTip from 'modal/modalSendTip';
|
import ModalSendTip from 'modal/modalSendTip';
|
||||||
import ModalPublish from 'modal/modalPublish';
|
import ModalPublish from 'modal/modalPublish';
|
||||||
import ModalOpenExternalLink from 'modal/modalOpenExternalLink';
|
import ModalOpenExternalResource from 'modal/modalOpenExternalResource';
|
||||||
import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
|
import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
|
||||||
import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
|
import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
|
||||||
import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
|
import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
|
||||||
|
@ -85,8 +85,8 @@ function ModalRouter(props: Props) {
|
||||||
return <ModalSocialShare {...modalProps} />;
|
return <ModalSocialShare {...modalProps} />;
|
||||||
case MODALS.PUBLISH:
|
case MODALS.PUBLISH:
|
||||||
return <ModalPublish {...modalProps} />;
|
return <ModalPublish {...modalProps} />;
|
||||||
case MODALS.CONFIRM_EXTERNAL_LINK:
|
case MODALS.CONFIRM_EXTERNAL_RESOURCE:
|
||||||
return <ModalOpenExternalLink {...modalProps} />;
|
return <ModalOpenExternalResource {...modalProps} />;
|
||||||
case MODALS.CONFIRM_TRANSACTION:
|
case MODALS.CONFIRM_TRANSACTION:
|
||||||
return <ModalConfirmTransaction {...modalProps} />;
|
return <ModalConfirmTransaction {...modalProps} />;
|
||||||
case MODALS.CONFIRM_THUMBNAIL_UPLOAD:
|
case MODALS.CONFIRM_THUMBNAIL_UPLOAD:
|
||||||
|
|
Loading…
Reference in a new issue