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}
|
||||
label={children}
|
||||
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,
|
||||
} from 'lbry-redux';
|
||||
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 FileDownloadLink from './view';
|
||||
|
||||
|
@ -20,7 +20,7 @@ const select = (state, props) => ({
|
|||
});
|
||||
|
||||
const perform = dispatch => ({
|
||||
openInShell: path => dispatch(doOpenFileInShell(path)),
|
||||
openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
|
||||
purchaseUri: uri => dispatch(doPurchaseUri(uri)),
|
||||
restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
|
||||
pause: () => dispatch(doSetPlayingUri(null)),
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
// @flow
|
||||
import * as ICONS from 'constants/icons';
|
||||
import * as MODALS from 'constants/modal_types';
|
||||
import React from 'react';
|
||||
import Button from 'component/button';
|
||||
import ToolTip from 'component/common/tooltip';
|
||||
|
@ -20,7 +21,7 @@ type Props = {
|
|||
loading: boolean,
|
||||
costInfo: ?{},
|
||||
restartDownload: (string, number) => void,
|
||||
openInShell: string => void,
|
||||
openModal: (id: string, { path: string }) => void,
|
||||
purchaseUri: string => void,
|
||||
pause: () => void,
|
||||
};
|
||||
|
@ -43,14 +44,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
|
|||
uri: ?string;
|
||||
|
||||
render() {
|
||||
const { fileInfo, downloading, uri, openInShell, purchaseUri, costInfo, loading, pause, claim } = this.props;
|
||||
|
||||
const openFile = () => {
|
||||
if (fileInfo) {
|
||||
openInShell(fileInfo.download_path);
|
||||
pause();
|
||||
}
|
||||
};
|
||||
const { fileInfo, downloading, uri, openModal, purchaseUri, costInfo, loading, pause, claim } = this.props;
|
||||
|
||||
if (loading || downloading) {
|
||||
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) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
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 FILE_TIMEOUT = 'file_timeout';
|
||||
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 { doHideModal } from 'redux/actions/app';
|
||||
import ModalOpenExternalLink from './view';
|
||||
import ModalOpenExternalResource from './view';
|
||||
|
||||
const perform = dispatch => ({
|
||||
closeModal: () => dispatch(doHideModal()),
|
||||
|
@ -9,4 +9,4 @@ const perform = dispatch => ({
|
|||
export default connect(
|
||||
null,
|
||||
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 ModalSendTip from 'modal/modalSendTip';
|
||||
import ModalPublish from 'modal/modalPublish';
|
||||
import ModalOpenExternalLink from 'modal/modalOpenExternalLink';
|
||||
import ModalOpenExternalResource from 'modal/modalOpenExternalResource';
|
||||
import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
|
||||
import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
|
||||
import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
|
||||
|
@ -85,8 +85,8 @@ function ModalRouter(props: Props) {
|
|||
return <ModalSocialShare {...modalProps} />;
|
||||
case MODALS.PUBLISH:
|
||||
return <ModalPublish {...modalProps} />;
|
||||
case MODALS.CONFIRM_EXTERNAL_LINK:
|
||||
return <ModalOpenExternalLink {...modalProps} />;
|
||||
case MODALS.CONFIRM_EXTERNAL_RESOURCE:
|
||||
return <ModalOpenExternalResource {...modalProps} />;
|
||||
case MODALS.CONFIRM_TRANSACTION:
|
||||
return <ModalConfirmTransaction {...modalProps} />;
|
||||
case MODALS.CONFIRM_THUMBNAIL_UPLOAD:
|
||||
|
|
Loading…
Reference in a new issue