Show warning when opening files externally #2478

Merged
zxawry merged 3 commits from external-resources into master 2019-05-15 18:40:03 +02:00
8 changed files with 93 additions and 71 deletions

View file

@ -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 })}
/> />
); );
} }

View file

@ -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)),

View file

@ -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>
); );
} }

View file

@ -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';

View file

@ -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;

View file

@ -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);

View 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;

View file

@ -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: