LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

make select and file actions refactor

Browse source
This commit is contained in:
Jeremy Kauffman 2017-09-07 23:15:05 -04:00
parent bdf84b3dbd
commit 680bb1df9d
35 changed files with 409 additions and 586 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/js/actions/app.js
View file

@ -17,11 +17,12 @@ const { download } = remote.require("electron-dl");
const fs = remote.require("fs"); const fs = remote.require("fs");
const { lbrySettings: config } = require("../../../app/package.json"); const { lbrySettings: config } = require("../../../app/package.json");
export function doOpenModal(modal) { export function doOpenModal(modal, modalProps = {}) {
return { return {
type: types.OPEN_MODAL, type: types.OPEN_MODAL,
data: { data: {
modal, modal,
modalProps,
}, },
}; };
} }
@ -166,7 +167,7 @@ export function doAlertError(errorList) {
type: types.OPEN_MODAL, type: types.OPEN_MODAL,
data: { data: {
modal: "error", modal: "error",
extraContent: errorList, modalProps: { error: errorList },
}, },
}); });
}; };

15
ui/js/actions/content.js
View file

@ -4,11 +4,11 @@ import lbryio from "lbryio";
import lbryuri from "lbryuri"; import lbryuri from "lbryuri";
import { selectBalance } from "selectors/wallet"; import { selectBalance } from "selectors/wallet";
import { import {
selectFileInfoForUri, makeSelectFileInfoForUri,
selectDownloadingByOutpoint, selectDownloadingByOutpoint,
} from "selectors/file_info"; } from "selectors/file_info";
import { selectResolvingUris } from "selectors/content"; import { selectResolvingUris } from "selectors/content";
import { selectCostInfoForUri } from "selectors/cost_info"; import { makeSelectCostInfoForUri } from "selectors/cost_info";
import { doAlertError, doOpenModal } from "actions/app"; import { doAlertError, doOpenModal } from "actions/app";
import { doClaimEligiblePurchaseRewards } from "actions/rewards"; import { doClaimEligiblePurchaseRewards } from "actions/rewards";
import { selectBadgeNumber } from "selectors/app"; import { selectBadgeNumber } from "selectors/app";
@ -299,13 +299,12 @@ export function doLoadVideo(uri) {
data: { uri }, data: { uri },
}); });
dispatch(doOpenModal(modals.FILE_TIMEOUT)); dispatch(doOpenModal(modals.FILE_TIMEOUT, { uri }));
} else { } else {
dispatch(doDownloadFile(uri, streamInfo)); dispatch(doDownloadFile(uri, streamInfo));
} }
}) })
.catch(error => { .catch(error => {
console.log(error);
dispatch({ dispatch({
type: types.LOADING_VIDEO_FAILED, type: types.LOADING_VIDEO_FAILED,
data: { uri }, data: { uri },
@ -315,11 +314,11 @@ export function doLoadVideo(uri) {
}; };
} }
export function doPurchaseUri(uri, purchaseModalName) { export function doPurchaseUri(uri) {
return function(dispatch, getState) { return function(dispatch, getState) {
const state = getState(); const state = getState();
const balance = selectBalance(state); const balance = selectBalance(state);
const fileInfo = selectFileInfoForUri(state, { uri }); const fileInfo = makeSelectFileInfoForUri(uri)(state);
const downloadingByOutpoint = selectDownloadingByOutpoint(state); const downloadingByOutpoint = selectDownloadingByOutpoint(state);
const alreadyDownloading = const alreadyDownloading =
fileInfo && !!downloadingByOutpoint[fileInfo.outpoint]; fileInfo && !!downloadingByOutpoint[fileInfo.outpoint];
@ -339,7 +338,7 @@ export function doPurchaseUri(uri, purchaseModalName) {
return Promise.resolve(); return Promise.resolve();
} }
const costInfo = selectCostInfoForUri(state, { uri }); const costInfo = makeSelectCostInfoForUri(uri)(state);
const { cost } = costInfo; const { cost } = costInfo;
// the file is free or we have partially downloaded it // the file is free or we have partially downloaded it
@ -351,7 +350,7 @@ export function doPurchaseUri(uri, purchaseModalName) {
if (cost > balance) { if (cost > balance) {
dispatch(doOpenModal(modals.INSUFFICIENT_CREDITS)); dispatch(doOpenModal(modals.INSUFFICIENT_CREDITS));
} else { } else {
dispatch(doOpenModal(purchaseModalName)); dispatch(doOpenModal(modals.AFFIRM_PURCHASE, { uri }));
} }
return Promise.resolve(); return Promise.resolve();

40
ui/js/component/fileActions/index.js
View file

@ -1,52 +1,32 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { selectPlatform } from "selectors/app"; import { selectPlatform } from "selectors/app";
import { import { makeSelectFileInfoForUri } from "selectors/file_info";
makeSelectFileInfoForUri,
makeSelectDownloadingForUri,
makeSelectLoadingForUri,
} from "selectors/file_info";
import { makeSelectIsAvailableForUri } from "selectors/availability";
import { makeSelectCostInfoForUri } from "selectors/cost_info"; import { makeSelectCostInfoForUri } from "selectors/cost_info";
import { doOpenModal } from "actions/app"; import { doOpenModal } from "actions/app";
import { doFetchAvailability } from "actions/availability"; import { doFetchAvailability } from "actions/availability";
import { doOpenFileInShell, doOpenFileInFolder } from "actions/file_info"; import { doOpenFileInShell, doOpenFileInFolder } from "actions/file_info";
import { makeSelectClaimForUriIsMine } from "selectors/claims"; import { makeSelectClaimIsMine } from "selectors/claims";
import { doPurchaseUri, doLoadVideo, doStartDownload } from "actions/content"; import { doPurchaseUri, doLoadVideo, doStartDownload } from "actions/content";
import { doNavigate } from "actions/navigation"; import { doNavigate } from "actions/navigation";
import FileActions from "./view"; import FileActions from "./view";
const makeSelect = () => { const select = (state, props) => ({
const selectFileInfoForUri = makeSelectFileInfoForUri(); fileInfo: makeSelectFileInfoForUri(props.uri)(state),
const selectIsAvailableForUri = makeSelectIsAvailableForUri();
const selectDownloadingForUri = makeSelectDownloadingForUri();
const selectCostInfoForUri = makeSelectCostInfoForUri();
const selectLoadingForUri = makeSelectLoadingForUri();
const selectClaimForUriIsMine = makeSelectClaimForUriIsMine();
const select = (state, props) => ({
fileInfo: selectFileInfoForUri(state, props),
/*availability check is disabled due to poor performance, TBD if it dies forever or requires daemon fix*/ /*availability check is disabled due to poor performance, TBD if it dies forever or requires daemon fix*/
isAvailable: true, //selectIsAvailableForUri(state, props),
platform: selectPlatform(state), platform: selectPlatform(state),
downloading: selectDownloadingForUri(state, props), costInfo: makeSelectCostInfoForUri(props.uri)(state),
costInfo: selectCostInfoForUri(state, props), claimIsMine: makeSelectClaimIsMine(props.uri)(state),
loading: selectLoadingForUri(state, props), });
claimIsMine: selectClaimForUriIsMine(state, props),
});
return select;
};
const perform = dispatch => ({ const perform = dispatch => ({
checkAvailability: uri => dispatch(doFetchAvailability(uri)), checkAvailability: uri => dispatch(doFetchAvailability(uri)),
openInFolder: fileInfo => dispatch(doOpenFileInFolder(fileInfo)), openInFolder: fileInfo => dispatch(doOpenFileInFolder(fileInfo)),
openInShell: fileInfo => dispatch(doOpenFileInShell(fileInfo)), openInShell: fileInfo => dispatch(doOpenFileInShell(fileInfo)),
openModal: modal => dispatch(doOpenModal(modal)), openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
startDownload: uri => dispatch(doPurchaseUri(uri, "affirmPurchase")), startDownload: uri => dispatch(doPurchaseUri(uri)),
loadVideo: uri => dispatch(doLoadVideo(uri)),
restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)), restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
editClaim: fileInfo => dispatch(doNavigate("/publish", fileInfo)), editClaim: fileInfo => dispatch(doNavigate("/publish", fileInfo)),
}); });
export default connect(makeSelect, perform)(FileActions); export default connect(select, perform)(FileActions);

142
ui/js/component/fileActions/view.jsx
View file

@ -1,59 +1,10 @@
import React from "react"; import React from "react";
import { Icon, BusyMessage } from "component/common";
import Link from "component/link"; import Link from "component/link";
import { ToolTip } from "component/tooltip"; import FileDownloadLink from "component/fileDownloadLink";
import { DropDownMenu, DropDownMenuItem } from "component/menu"; import { DropDownMenu, DropDownMenuItem } from "component/menu";
import * as modals from "constants/modal_types"; import * as modals from "constants/modal_types";
class FileActions extends React.PureComponent { class FileActions extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
forceShowActions: false,
};
}
componentWillMount() {
this.checkAvailability(this.props.uri);
}
componentWillReceiveProps(nextProps) {
this.checkAvailability(nextProps.uri);
this.restartDownload(nextProps);
}
restartDownload(props) {
const { downloading, fileInfo, uri, restartDownload } = props;
if (
!downloading &&
fileInfo &&
!fileInfo.completed &&
fileInfo.written_bytes !== false &&
fileInfo.written_bytes < fileInfo.total_bytes
) {
restartDownload(uri, fileInfo.outpoint);
}
}
checkAvailability(uri) {
if (!this._uri || uri !== this._uri) {
this._uri = uri;
this.props.checkAvailability(uri);
}
}
onShowFileActionsRowClicked() {
this.setState({
forceShowActions: true,
});
}
onAffirmPurchase() {
this.props.closeModal();
this.props.loadVideo(this.props.uri);
}
handleSupportButtonClicked() { handleSupportButtonClicked() {
this.props.onTipShow(); this.props.onTipShow();
} }
@ -61,16 +12,10 @@ class FileActions extends React.PureComponent {
render() { render() {
const { const {
fileInfo, fileInfo,
isAvailable,
platform, platform,
downloading,
uri, uri,
openInFolder, openInFolder,
openInShell,
openModal, openModal,
startDownload,
costInfo,
loading,
claimIsMine, claimIsMine,
editClaim, editClaim,
} = this.props; } = this.props;
@ -85,90 +30,9 @@ class FileActions extends React.PureComponent {
showMenu = fileInfo && Object.keys(fileInfo).length > 0, showMenu = fileInfo && Object.keys(fileInfo).length > 0,
title = metadata ? metadata.title : uri; title = metadata ? metadata.title : uri;
let content;
if (loading || downloading) {
const progress = fileInfo && fileInfo.written_bytes
? fileInfo.written_bytes / fileInfo.total_bytes * 100
: 0,
label = fileInfo
? progress.toFixed(0) + __("% complete")
: __("Connecting..."),
labelWithIcon = (
<span className="button__content">
<Icon icon="icon-download" />
<span>
{label}
</span>
</span>
);
content = (
<div className="faux-button-block file-actions__download-status-bar button-set-item">
<div
className="faux-button-block file-actions__download-status-bar-overlay"
style={{ width: progress + "%" }}
>
{labelWithIcon}
</div>
{labelWithIcon}
</div>
);
} else if (!fileInfo && isAvailable === undefined) {
content = <BusyMessage message={__("Checking availability")} />;
} else if (!fileInfo && !isAvailable && !this.state.forceShowActions) {
content = (
<div>
<div className="button-set-item empty">
{__("Content unavailable.")}
</div>
<ToolTip
label={__("Why?")}
body={__(
"The content on LBRY is hosted by its users. It appears there are no users connected that have this file at the moment."
)}
className="button-set-item"
/>
<Link
label={__("Try Anyway")}
onClick={this.onShowFileActionsRowClicked.bind(this)}
className="button-text button-set-item"
/>
</div>
);
} else if (fileInfo === null && !downloading) {
if (!costInfo) {
content = <BusyMessage message={__("Fetching cost info")} />;
} else {
content = (
<Link
button="text"
label={__("Download")}
icon="icon-download"
onClick={() => {
startDownload(uri);
}}
/>
);
}
} else if (fileInfo && fileInfo.download_path) {
content = (
<Link
label={__("Open")}
button="text"
icon="icon-folder-open"
onClick={() => openInShell(fileInfo)}
/>
);
} else if (!fileInfo) {
content = <BusyMessage message={__("Fetching file info")} />;
} else {
console.log("handle this case of file action props?");
}
return ( return (
<section className="file-actions"> <section className="file-actions">
{content} <FileDownloadLink uri={uri} />
<Link <Link
label={__("Support")} label={__("Support")}
button="text" button="text"
@ -191,7 +55,7 @@ class FileActions extends React.PureComponent {
/>} />}
<DropDownMenuItem <DropDownMenuItem
key={2} key={2}
onClick={() => openModal(modals.CONFIRM_FILE_REMOVE)} onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
label={__("Remove...")} label={__("Remove...")}
/> />
</DropDownMenu> </DropDownMenu>

25
ui/js/component/fileCard/index.js
View file

@ -9,32 +9,23 @@ import {
} from "selectors/claims"; } from "selectors/claims";
import { makeSelectFileInfoForUri } from "selectors/file_info"; import { makeSelectFileInfoForUri } from "selectors/file_info";
import { import {
makeSelectIsResolvingForUri, makeSelectIsUriResolving,
selectRewardContentClaimIds, selectRewardContentClaimIds,
} from "selectors/content"; } from "selectors/content";
import FileCard from "./view"; import FileCard from "./view";
const makeSelect = () => { const select = (state, props) => ({
const selectClaimForUri = makeSelectClaimForUri(); claim: makeSelectClaimForUri(props.uri)(state),
const selectFileInfoForUri = makeSelectFileInfoForUri(); fileInfo: makeSelectFileInfoForUri(props.uri)(state),
const selectMetadataForUri = makeSelectMetadataForUri();
const selectResolvingUri = makeSelectIsResolvingForUri();
const select = (state, props) => ({
claim: selectClaimForUri(state, props),
fileInfo: selectFileInfoForUri(state, props),
obscureNsfw: !selectShowNsfw(state), obscureNsfw: !selectShowNsfw(state),
metadata: selectMetadataForUri(state, props), metadata: makeSelectMetadataForUri(props.uri)(state),
rewardedContentClaimIds: selectRewardContentClaimIds(state, props), rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
isResolvingUri: selectResolvingUri(state, props), isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
}); });
return select;
};
const perform = dispatch => ({ const perform = dispatch => ({
navigate: (path, params) => dispatch(doNavigate(path, params)), navigate: (path, params) => dispatch(doNavigate(path, params)),
resolveUri: uri => dispatch(doResolveUri(uri)), resolveUri: uri => dispatch(doResolveUri(uri)),
}); });
export default connect(makeSelect, perform)(FileCard); export default connect(select, perform)(FileCard);

31
ui/js/component/fileDownloadLink/index.js Normal file
View file

@ -0,0 +1,31 @@
import React from "react";
import { connect } from "react-redux";
import {
makeSelectFileInfoForUri,
makeSelectDownloadingForUri,
makeSelectLoadingForUri,
} from "selectors/file_info";
import { makeSelectCostInfoForUri } from "selectors/cost_info";
import { doFetchAvailability } from "actions/availability";
import { doOpenFileInShell } from "actions/file_info";
import { doPurchaseUri, doStartDownload } from "actions/content";
import FileDownloadLink from "./view";
import * as modals from "constants/modal_types";
const select = (state, props) => ({
fileInfo: makeSelectFileInfoForUri(props.uri)(state),
/*availability check is disabled due to poor performance, TBD if it dies forever or requires daemon fix*/
downloading: makeSelectDownloadingForUri(props.uri)(state),
costInfo: makeSelectCostInfoForUri(props.uri)(state),
loading: makeSelectLoadingForUri(props.uri)(state),
});
const perform = dispatch => ({
checkAvailability: uri => dispatch(doFetchAvailability(uri)),
openInShell: fileInfo => dispatch(doOpenFileInShell(fileInfo)),
startDownload: uri =>
dispatch(doPurchaseUri(uri, modals.CONFIRM_FILE_PURCHASE)),
restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
});
export default connect(select, perform)(FileDownloadLink);

104
ui/js/component/fileDownloadLink/view.jsx Normal file
View file

@ -0,0 +1,104 @@
import React from "react";
import { Icon, BusyMessage } from "component/common";
import Link from "component/link";
class FileDownloadLink extends React.PureComponent {
componentWillMount() {
this.checkAvailability(this.props.uri);
}
componentWillReceiveProps(nextProps) {
this.checkAvailability(nextProps.uri);
this.restartDownload(nextProps);
}
restartDownload(props) {
const { downloading, fileInfo, uri, restartDownload } = props;
if (
!downloading &&
fileInfo &&
!fileInfo.completed &&
fileInfo.written_bytes !== false &&
fileInfo.written_bytes < fileInfo.total_bytes
) {
restartDownload(uri, fileInfo.outpoint);
}
}
checkAvailability(uri) {
if (!this._uri || uri !== this._uri) {
this._uri = uri;
this.props.checkAvailability(uri);
}
}
render() {
const {
fileInfo,
downloading,
uri,
openInShell,
startDownload,
costInfo,
loading,
} = this.props;
if (loading || downloading) {
const progress = fileInfo && fileInfo.written_bytes
? fileInfo.written_bytes / fileInfo.total_bytes * 100
: 0,
label = fileInfo
? progress.toFixed(0) + __("% complete")
: __("Connecting..."),
labelWithIcon = (
<span className="button__content">
<Icon icon="icon-download" />
<span>
{label}
</span>
</span>
);
return (
<div className="faux-button-block file-actions__download-status-bar button-set-item">
<div
className="faux-button-block file-actions__download-status-bar-overlay"
style={{ width: progress + "%" }}
>
{labelWithIcon}
</div>
{labelWithIcon}
</div>
);
} else if (fileInfo === null && !downloading) {
if (!costInfo) {
return <BusyMessage message={__("Fetching cost info")} />;
} else {
return (
<Link
button="text"
label={__("Download")}
icon="icon-download"
onClick={() => {
startDownload(uri);
}}
/>
);
}
} else if (fileInfo && fileInfo.download_path) {
return (
<Link
label={__("Open")}
button="text"
icon="icon-external-link-square"
onClick={() => openInShell(fileInfo)}
/>
);
}
return null;
}
}
export default FileDownloadLink;

20
ui/js/component/filePrice/index.js
View file

@ -8,23 +8,15 @@ import {
import { makeSelectClaimForUri } from "selectors/claims"; import { makeSelectClaimForUri } from "selectors/claims";
import FilePrice from "./view"; import FilePrice from "./view";
const makeSelect = () => { const select = (state, props) => ({
const selectCostInfoForUri = makeSelectCostInfoForUri(); costInfo: makeSelectCostInfoForUri(props.uri)(state),
const selectFetchingCostInfoForUri = makeSelectFetchingCostInfoForUri(); fetching: makeSelectFetchingCostInfoForUri(props.uri)(state),
const selectClaim = makeSelectClaimForUri(); claim: makeSelectClaimForUri(props.uri)(state),
});
const select = (state, props) => ({
costInfo: selectCostInfoForUri(state, props),
fetching: selectFetchingCostInfoForUri(state, props),
claim: selectClaim(state, props),
});
return select;
};
const perform = dispatch => ({ const perform = dispatch => ({
fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)), fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)),
// cancelFetchCostInfo: (uri) => dispatch(doCancelFetchCostInfoForUri(uri)) // cancelFetchCostInfo: (uri) => dispatch(doCancelFetchCostInfoForUri(uri))
}); });
export default connect(makeSelect, perform)(FilePrice); export default connect(select, perform)(FilePrice);

25
ui/js/component/fileTile/index.js
View file

@ -9,32 +9,23 @@ import {
import { makeSelectFileInfoForUri } from "selectors/file_info"; import { makeSelectFileInfoForUri } from "selectors/file_info";
import { selectShowNsfw } from "selectors/settings"; import { selectShowNsfw } from "selectors/settings";
import { import {
makeSelectIsResolvingForUri, makeSelectIsUriResolving,
selectRewardContentClaimIds, selectRewardContentClaimIds,
} from "selectors/content"; } from "selectors/content";
import FileTile from "./view"; import FileTile from "./view";
const makeSelect = () => { const select = (state, props) => ({
const selectClaimForUri = makeSelectClaimForUri(); claim: makeSelectClaimForUri(props.uri)(state),
const selectFileInfoForUri = makeSelectFileInfoForUri(); fileInfo: makeSelectFileInfoForUri(props.uri)(state),
const selectMetadataForUri = makeSelectMetadataForUri();
const selectResolvingUri = makeSelectIsResolvingForUri();
const select = (state, props) => ({
claim: selectClaimForUri(state, props),
fileInfo: selectFileInfoForUri(state, props),
obscureNsfw: !selectShowNsfw(state), obscureNsfw: !selectShowNsfw(state),
metadata: selectMetadataForUri(state, props), metadata: makeSelectMetadataForUri(props.uri)(state),
isResolvingUri: selectResolvingUri(state, props), isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
rewardedContentClaimIds: selectRewardContentClaimIds(state, props), rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
}); });
return select;
};
const perform = dispatch => ({ const perform = dispatch => ({
navigate: (path, params) => dispatch(doNavigate(path, params)), navigate: (path, params) => dispatch(doNavigate(path, params)),
resolveUri: uri => dispatch(doResolveUri(uri)), resolveUri: uri => dispatch(doResolveUri(uri)),
}); });
export default connect(makeSelect, perform)(FileTile); export default connect(select, perform)(FileTile);

2
ui/js/component/router/view.jsx
View file

@ -46,7 +46,7 @@ const Router = props => {
search: <SearchPage params={params} />, search: <SearchPage params={params} />,
send: <SendCreditsPage params={params} />, send: <SendCreditsPage params={params} />,
settings: <SettingsPage params={params} />, settings: <SettingsPage params={params} />,
show: <ShowPage params={params} />, show: <ShowPage {...params} />,
wallet: <WalletPage params={params} />, wallet: <WalletPage params={params} />,
}); });
}; };

20
ui/js/component/uriIndicator/index.js
View file

@ -1,25 +1,19 @@
import React from "react"; import React from "react";
import lbryuri from "lbryuri"; import lbryuri from "lbryuri";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { makeSelectIsResolvingForUri } from "selectors/content"; import { doResolveUri } from "actions/content";
import { makeSelectIsUriResolving } from "selectors/content";
import { makeSelectClaimForUri } from "selectors/claims"; import { makeSelectClaimForUri } from "selectors/claims";
import UriIndicator from "./view"; import UriIndicator from "./view";
const makeSelect = () => { const select = (state, props) => ({
const selectClaim = makeSelectClaimForUri(), claim: makeSelectClaimForUri(props.uri)(state),
selectIsResolving = makeSelectIsResolvingForUri(); isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
const select = (state, props) => ({
claim: selectClaim(state, props),
isResolvingUri: selectIsResolving(state, props),
uri: lbryuri.normalize(props.uri), uri: lbryuri.normalize(props.uri),
}); });
return select;
};
const perform = dispatch => ({ const perform = dispatch => ({
resolveUri: uri => dispatch(doResolveUri(uri)), resolveUri: uri => dispatch(doResolveUri(uri)),
}); });
export default connect(makeSelect, perform)(UriIndicator); export default connect(select, perform)(UriIndicator);

35
ui/js/component/video/index.js
View file

@ -17,34 +17,21 @@ import { makeSelectCostInfoForUri } from "selectors/cost_info";
import { selectShowNsfw } from "selectors/settings"; import { selectShowNsfw } from "selectors/settings";
import Video from "./view"; import Video from "./view";
const makeSelect = () => { const select = (state, props) => ({
const selectCostInfo = makeSelectCostInfoForUri(); costInfo: makeSelectCostInfoForUri(props.uri)(state),
const selectFileInfo = makeSelectFileInfoForUri(); fileInfo: makeSelectFileInfoForUri(props.uri)(state),
const selectIsLoading = makeSelectLoadingForUri(); metadata: makeSelectMetadataForUri(props.uri)(state),
const selectIsDownloading = makeSelectDownloadingForUri();
const selectMetadata = makeSelectMetadataForUri();
const selectContentType = makeSelectContentTypeForUri();
const select = (state, props) => ({
costInfo: selectCostInfo(state, props),
fileInfo: selectFileInfo(state, props),
metadata: selectMetadata(state, props),
obscureNsfw: !selectShowNsfw(state), obscureNsfw: !selectShowNsfw(state),
modal: selectCurrentModal(state), isLoading: makeSelectLoadingForUri(props.uri)(state),
isLoading: selectIsLoading(state, props), isDownloading: makeSelectDownloadingForUri(props.uri)(state),
isDownloading: selectIsDownloading(state, props), contentType: makeSelectContentTypeForUri(props.uri)(state),
contentType: selectContentType(state, props), volume: selectVolume(state),
volume: selectVolume(state, props), });
});
return select;
};
const perform = dispatch => ({ const perform = dispatch => ({
loadVideo: uri => dispatch(doLoadVideo(uri)), loadVideo: uri => dispatch(doLoadVideo(uri)),
purchaseUri: uri => dispatch(doPurchaseUri(uri, "affirmPurchaseAndPlay")), purchaseUri: uri => dispatch(doPurchaseUri(uri)),
closeModal: () => dispatch(doCloseModal()),
changeVolume: volume => dispatch(doChangeVolume(volume)), changeVolume: volume => dispatch(doChangeVolume(volume)),
}); });
export default connect(makeSelect, perform)(Video); export default connect(select, perform)(Video);

43
ui/js/component/video/internal/play-button.jsx
View file

@ -1,7 +1,5 @@
import React from "react"; import React from "react";
import FilePrice from "component/filePrice";
import Link from "component/link"; import Link from "component/link";
import Modal from "modal/modal";
class VideoPlayButton extends React.PureComponent { class VideoPlayButton extends React.PureComponent {
componentDidMount() { componentDidMount() {
@ -13,12 +11,6 @@ class VideoPlayButton extends React.PureComponent {
document.removeEventListener("keydown", this.keyDownListener); document.removeEventListener("keydown", this.keyDownListener);
} }
onPurchaseConfirmed() {
this.props.closeModal();
this.props.startPlaying();
this.props.loadVideo(this.props.uri);
}
onKeyDown(event) { onKeyDown(event) {
if ( if (
"input" !== event.target.tagName.toLowerCase() && "input" !== event.target.tagName.toLowerCase() &&
@ -33,23 +25,14 @@ class VideoPlayButton extends React.PureComponent {
this.props.purchaseUri(this.props.uri).then(() => { this.props.purchaseUri(this.props.uri).then(() => {
if (!this.props.modal) { if (!this.props.modal) {
this.props.startPlaying(); this.props.startPlaying();
} else {
alert("fix me set pending play");
} }
}); });
} }
render() { render() {
const { const { button, label, isLoading, fileInfo, mediaType } = this.props;
button,
label,
metadata,
metadata: { title },
uri,
modal,
closeModal,
isLoading,
fileInfo,
mediaType,
} = this.props;
/* /*
title={ title={
@ -64,8 +47,7 @@ class VideoPlayButton extends React.PureComponent {
? "icon-play" ? "icon-play"
: "icon-folder-o"; : "icon-folder-o";
return ( return;
<div>
<Link <Link
button={button ? button : null} button={button ? button : null}
disabled={disabled} disabled={disabled}
@ -73,22 +55,7 @@ class VideoPlayButton extends React.PureComponent {
className="video__play-button" className="video__play-button"
icon={icon} icon={icon}
onClick={this.onWatchClick.bind(this)} onClick={this.onWatchClick.bind(this)}
/> />;
<Modal
type="confirm"
isOpen={modal == "affirmPurchaseAndPlay"}
contentLabel={__("Confirm Purchase")}
onConfirmed={this.onPurchaseConfirmed.bind(this)}
onAborted={closeModal}
>
{__("This will purchase")} <strong>{title}</strong> {__("for")}{" "}
<strong>
<FilePrice uri={uri} showFullPrice={true} look="plain" />
</strong>{" "}
{__("credits")}.
</Modal>
</div>
);
} }
} }

6
ui/js/modal/modalAffirmPurchase/index.js
View file

@ -1,15 +1,17 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { doCloseModal } from "actions/app"; import { doCloseModal } from "actions/app";
import { doLoadVideo } from "actions/content";
import { makeSelectMetadataForUri } from "selectors/claims"; import { makeSelectMetadataForUri } from "selectors/claims";
import ModalAffirmPurchase from "./view"; import ModalAffirmPurchase from "./view";
const select = state => ({ const select = (state, props) => ({
metadata: makeSelectMetadataForUri()(state), metadata: makeSelectMetadataForUri(props.uri)(state),
}); });
const perform = dispatch => ({ const perform = dispatch => ({
closeModal: () => dispatch(doCloseModal()), closeModal: () => dispatch(doCloseModal()),
loadVideo: uri => dispatch(doLoadVideo(uri)),
}); });
export default connect(select, perform)(ModalAffirmPurchase); export default connect(select, perform)(ModalAffirmPurchase);

9
ui/js/modal/modalAffirmPurchase/view.jsx
View file

@ -3,13 +3,18 @@ import FilePrice from "component/filePrice";
import { Modal } from "modal/modal"; import { Modal } from "modal/modal";
class ModalAffirmPurchase extends React.PureComponent { class ModalAffirmPurchase extends React.PureComponent {
onAffirmPurchase() {
this.props.closeModal();
this.props.loadVideo(this.props.uri);
}
render() { render() {
const { metadata: { title } } = this.props; const { closeModal, metadata: { title }, uri } = this.props;
return ( return (
<Modal <Modal
type="confirm" type="confirm"
isOpen={modal == "affirmPurchase"} isOpen={true}
contentLabel={__("Confirm Purchase")} contentLabel={__("Confirm Purchase")}
onConfirmed={this.onAffirmPurchase.bind(this)} onConfirmed={this.onAffirmPurchase.bind(this)}
onAborted={closeModal} onAborted={closeModal}

2
ui/js/modal/modalAuthFailure/index.js
View file

@ -9,4 +9,4 @@ const perform = dispatch => ({
close: () => dispatch(doCloseModal()), close: () => dispatch(doCloseModal()),
}); });
export default connect(select, perform)(ModalAuthFailure); export default connect(null, null)(ModalAuthFailure);

8
ui/js/modal/modalError/index.js
View file

@ -1,16 +1,10 @@
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { selectCurrentModal, selectModalExtraContent } from "selectors/app";
import { doCloseModal } from "actions/app"; import { doCloseModal } from "actions/app";
import ModalError from "./view"; import ModalError from "./view";
const select = state => ({
modal: selectCurrentModal(state),
error: selectModalExtraContent(state),
});
const perform = dispatch => ({ const perform = dispatch => ({
closeModal: () => dispatch(doCloseModal()), closeModal: () => dispatch(doCloseModal()),
}); });
export default connect(select, perform)(ModalError); export default connect(null, perform)(ModalError);

4
ui/js/modal/modalError/view.jsx
View file

@ -4,7 +4,7 @@ import { ExpandableModal } from "modal/modal";
class ModalError extends React.PureComponent { class ModalError extends React.PureComponent {
render() { render() {
const { modal, closeModal, error } = this.props; const { closeModal, error } = this.props;
const errorObj = typeof error === "string" ? { message: error } : error; const errorObj = typeof error === "string" ? { message: error } : error;
@ -33,7 +33,7 @@ class ModalError extends React.PureComponent {
return ( return (
<ExpandableModal <ExpandableModal
isOpen={modal == "error"} isOpen={true}
contentLabel={__("Error")} contentLabel={__("Error")}
className="error-modal" className="error-modal"
overlayClassName="error-modal-overlay" overlayClassName="error-modal-overlay"

2
ui/js/modal/modalFileTimeout/index.js
View file

@ -5,7 +5,7 @@ import { makeSelectMetadataForUri } from "selectors/claims";
import ModalFileTimeout from "./view"; import ModalFileTimeout from "./view";
const select = state => ({ const select = state => ({
metadata: makeSelectMetadataForUri()(state), metadata: makeSelectMetadataForUri(props.uri)(state),
}); });
const perform = dispatch => ({ const perform = dispatch => ({

15
ui/js/modal/modalRemoveFile/index.js
View file

@ -2,16 +2,17 @@ import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { doCloseModal } from "actions/app"; import { doCloseModal } from "actions/app";
import { doDeleteFileAndGoBack } from "actions/file_info"; import { doDeleteFileAndGoBack } from "actions/file_info";
import { makeSelectClaimForUriIsMine } from "selectors/claims"; import {
makeSelectMetadataForUri,
makeSelectClaimIsMine,
} from "selectors/claims";
import { makeSelectFileInfoForUri } from "selectors/file_info";
import ModalRemoveFile from "./view"; import ModalRemoveFile from "./view";
import { makeSelectFileInfoForUri } from "../../selectors/file_info";
const select = (state, props) => ({ const select = (state, props) => ({
claimIsMine: makeSelectClaimForUriIsMine()(state, props), claimIsMine: makeSelectClaimIsMine(props.uri)(state),
uri: makeSelectCurrentParam("uri")(state, props), metadata: makeSelectMetadataForUri(props.uri)(state),
metadata: makeSelectMetadataForUri()(state, props), fileInfo: makeSelectFileInfoForUri(props.uri)(state),
outpoint: makeSelectFileInfoForUri()(state, props),
}); });
const perform = dispatch => ({ const perform = dispatch => ({

8
ui/js/modal/modalRemoveFile/view.jsx
View file

@ -25,7 +25,13 @@ class ModalRemoveFile extends React.PureComponent {
} }
render() { render() {
const { claimIsMine, closeModal, deleteFile, outpoint, title } = this.props; const {
claimIsMine,
closeModal,
deleteFile,
fileInfo: { outpoint },
metadata: { title },
} = this.props;
const { deleteChecked, abandonClaimChecked } = this.state; const { deleteChecked, abandonClaimChecked } = this.state;
return ( return (

3
ui/js/modal/modalRouter/index.js
View file

@ -2,7 +2,7 @@ import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { doOpenModal } from "actions/app"; import { doOpenModal } from "actions/app";
import * as settings from "constants/settings"; import * as settings from "constants/settings";
import { selectCurrentModal } from "selectors/app"; import { selectCurrentModal, selectModalProps } from "selectors/app";
import { selectCurrentPage } from "selectors/navigation"; import { selectCurrentPage } from "selectors/navigation";
import { selectCostForCurrentPageUri } from "selectors/cost_info"; import { selectCostForCurrentPageUri } from "selectors/cost_info";
import { makeSelectClientSetting } from "selectors/settings"; import { makeSelectClientSetting } from "selectors/settings";
@ -14,6 +14,7 @@ const select = (state, props) => ({
balance: selectBalance(state), balance: selectBalance(state),
showPageCost: selectCostForCurrentPageUri(state), showPageCost: selectCostForCurrentPageUri(state),
modal: selectCurrentModal(state), modal: selectCurrentModal(state),
modalProps: selectModalProps(state),
page: selectCurrentPage(state), page: selectCurrentPage(state),
isWelcomeAcknowledged: makeSelectClientSetting( isWelcomeAcknowledged: makeSelectClientSetting(
settings.NEW_USER_ACKNOWLEDGED settings.NEW_USER_ACKNOWLEDGED

33
ui/js/modal/modalRouter/view.jsx
View file

@ -8,6 +8,7 @@ import ModalWelcome from "modal/modalWelcome";
import ModalFirstReward from "modal/modalFirstReward"; import ModalFirstReward from "modal/modalFirstReward";
import ModalRewardApprovalRequired from "modal/modalRewardApprovalRequired"; import ModalRewardApprovalRequired from "modal/modalRewardApprovalRequired";
import ModalCreditIntro from "modal/modalCreditIntro"; import ModalCreditIntro from "modal/modalCreditIntro";
import ModalRemoveFile from "modal/modalRemoveFile";
import ModalTransactionFailed from "modal/modalTransactionFailed"; import ModalTransactionFailed from "modal/modalTransactionFailed";
import ModalInsufficientBalance from "modal/modalInsufficientBalance"; import ModalInsufficientBalance from "modal/modalInsufficientBalance";
import ModalFileTimeout from "modal/modalFileTimeout"; import ModalFileTimeout from "modal/modalFileTimeout";
@ -33,7 +34,7 @@ class ModalRouter extends React.PureComponent {
} }
showTransitionModals(props) { showTransitionModals(props) {
const { modal, openModal, page } = props; const { modal, modalProps, openModal, page } = props;
if (modal) { if (modal) {
return; return;
@ -100,37 +101,37 @@ class ModalRouter extends React.PureComponent {
} }
render() { render() {
const { modal } = this.props; const { modal, modalProps } = this.props;
switch (modal) { switch (modal) {
case modals.UPGRADE: case modals.UPGRADE:
return <ModalUpgrade />; return <ModalUpgrade {...modalProps} />;
case modals.DOWNLOADING: case modals.DOWNLOADING:
return <ModalDownloading />; return <ModalDownloading {...modalProps} />;
case modals.ERROR: case modals.ERROR:
return <ModalError />; return <ModalError {...modalProps} />;
case modals.FILE_TIMEOUT: case modals.FILE_TIMEOUT:
return <ModalFileTimeout />; return <ModalFileTimeout {...modalProps} />;
case modals.INSUFFICIENT_CREDITS: case modals.INSUFFICIENT_CREDITS:
return <ModalInsufficientCredits />; return <ModalInsufficientCredits {...modalProps} />;
case modals.WELCOME: case modals.WELCOME:
return <ModalWelcome />; return <ModalWelcome {...modalProps} />;
case modals.FIRST_REWARD: case modals.FIRST_REWARD:
return <ModalFirstReward />; return <ModalFirstReward {...modalProps} />;
case modals.AUTHENTICATION_FAILURE: case modals.AUTHENTICATION_FAILURE:
return <ModalAuthFailure />; return <ModalAuthFailure {...modalProps} />;
case modals.CREDIT_INTRO: case modals.CREDIT_INTRO:
return <ModalCreditIntro />; return <ModalCreditIntro {...modalProps} />;
case modals.TRANSACTION_FAILED: case modals.TRANSACTION_FAILED:
return <ModalTransactionFailed />; return <ModalTransactionFailed {...modalProps} />;
case modals.INSUFFICIENT_BALANCE: case modals.INSUFFICIENT_BALANCE:
return <ModalInsufficientBalance />; return <ModalInsufficientBalance {...modalProps} />;
case modals.REWARD_APPROVAL_REQUIRED: case modals.REWARD_APPROVAL_REQUIRED:
return <ModalRewardApprovalRequired />; return <ModalRewardApprovalRequired {...modalProps} />;
case modals.CONFIRM_FILE_REMOVE: case modals.CONFIRM_FILE_REMOVE:
return <ModalRemoveFile />; return <ModalRemoveFile {...modalProps} />;
case modals.AFFIRM_PURCHASE: case modals.AFFIRM_PURCHASE:
return <ModalAffirmPurchase />; return <ModalAffirmPurchase {...modalProps} />;
default: default:
return null; return null;
} }

26
ui/js/page/channel/index.js
View file

@ -14,22 +14,16 @@ import { doNavigate } from "actions/navigation";
import { makeSelectTotalPagesForChannel } from "selectors/content"; import { makeSelectTotalPagesForChannel } from "selectors/content";
import ChannelPage from "./view"; import ChannelPage from "./view";
const makeSelect = () => { const select = (state, props) => ({
const selectClaim = makeSelectClaimForUri(), claim: makeSelectClaimForUri(props.uri)(state),
selectClaimsInChannel = makeSelectClaimsInChannelForCurrentPage(), claimsInChannel: makeSelectClaimsInChannelForCurrentPage(
selectFetchingChannelClaims = makeSelectFetchingChannelClaims(), props.uri,
selectTotalPagesForChannel = makeSelectTotalPagesForChannel(); props.page
)(state),
const select = (state, props) => ({ fetching: makeSelectFetchingChannelClaims(props.uri)(state),
claim: selectClaim(state, props),
claimsInChannel: selectClaimsInChannel(state, props),
fetching: selectFetchingChannelClaims(state, props),
totalPages: selectTotalPagesForChannel(state, props),
params: selectCurrentParams(state), params: selectCurrentParams(state),
}); totalPages: makeSelectTotalPagesForChannel(props.uri)(state),
});
return select;
};
const perform = dispatch => ({ const perform = dispatch => ({
fetchClaims: (uri, page) => dispatch(doFetchClaimsByChannel(uri, page)), fetchClaims: (uri, page) => dispatch(doFetchClaimsByChannel(uri, page)),
@ -37,4 +31,4 @@ const perform = dispatch => ({
navigate: (path, params) => dispatch(doNavigate(path, params)), navigate: (path, params) => dispatch(doNavigate(path, params)),
}); });
export default connect(makeSelect, perform)(ChannelPage); export default connect(select, perform)(ChannelPage);

16
ui/js/page/channel/view.jsx
View file

@ -7,20 +7,19 @@ import ReactPaginate from "react-paginate";
class ChannelPage extends React.PureComponent { class ChannelPage extends React.PureComponent {
componentDidMount() { componentDidMount() {
const { uri, params, fetchClaims, fetchClaimCount } = this.props; const { uri, page, fetchClaims, fetchClaimCount } = this.props;
fetchClaims(uri, params.page || 1); fetchClaims(uri, page || 1);
fetchClaimCount(uri); fetchClaimCount(uri);
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
const { params, fetching, fetchClaims, fetchClaimCount } = this.props; const { page, uri, fetching, fetchClaims, fetchClaimCount } = this.props;
const nextParams = nextProps.params;
if (fetching !== nextParams.page && params.page !== nextParams.page) { if (fetching !== nextProps.page && page !== nextProps.page) {
fetchClaims(nextProps.uri, nextParams.page); fetchClaims(nextProps.uri, nextProps.page);
} }
if (nextProps.uri != this.props.uri) { if (nextProps.uri != uri) {
fetchClaimCount(uri); fetchClaimCount(uri);
} }
} }
@ -38,10 +37,9 @@ class ChannelPage extends React.PureComponent {
claimsInChannel, claimsInChannel,
claim, claim,
uri, uri,
params, page,
totalPages, totalPages,
} = this.props; } = this.props;
const { page } = params;
let contentList; let contentList;
if (claimsInChannel === undefined) { if (claimsInChannel === undefined) {

26
ui/js/page/file/index.js
View file

@ -14,25 +14,15 @@ import { makeSelectCostInfoForUri } from "selectors/cost_info";
import { selectShowNsfw } from "selectors/settings"; import { selectShowNsfw } from "selectors/settings";
import FilePage from "./view"; import FilePage from "./view";
const makeSelect = () => { const select = (state, props) => ({
const selectClaim = makeSelectClaimForUri(), claim: makeSelectClaimForUri(props.uri)(state),
selectContentType = makeSelectContentTypeForUri(), contentType: makeSelectContentTypeForUri(props.uri)(state),
selectFileInfo = makeSelectFileInfoForUri(), costInfo: makeSelectCostInfoForUri(props.uri)(state),
selectCostInfo = makeSelectCostInfoForUri(), metadata: makeSelectMetadataForUri(props.uri)(state),
selectMetadata = makeSelectMetadataForUri();
const select = (state, props) => ({
claim: selectClaim(state, props),
contentType: selectContentType(state, props),
costInfo: selectCostInfo(state, props),
metadata: selectMetadata(state, props),
obscureNsfw: !selectShowNsfw(state), obscureNsfw: !selectShowNsfw(state),
fileInfo: selectFileInfo(state, props), fileInfo: makeSelectFileInfoForUri(props.uri)(state),
rewardedContentClaimIds: selectRewardContentClaimIds(state, props), rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
}); });
return select;
};
const perform = dispatch => ({ const perform = dispatch => ({
navigate: (path, params) => dispatch(doNavigate(path, params)), navigate: (path, params) => dispatch(doNavigate(path, params)),
@ -40,4 +30,4 @@ const perform = dispatch => ({
fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)), fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)),
}); });
export default connect(makeSelect, perform)(FilePage); export default connect(select, perform)(FilePage);

19
ui/js/page/show/index.js
View file

@ -2,23 +2,16 @@ import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { doResolveUri } from "actions/content"; import { doResolveUri } from "actions/content";
import { makeSelectClaimForUri } from "selectors/claims"; import { makeSelectClaimForUri } from "selectors/claims";
import { makeSelectIsResolvingForUri } from "selectors/content"; import { makeSelectIsUriResolving } from "selectors/content";
import ShowPage from "./view"; import ShowPage from "./view";
const makeSelect = () => { const select = (state, props) => ({
const selectClaim = makeSelectClaimForUri(), claim: makeSelectClaimForUri(props.uri)(state),
selectIsResolving = makeSelectIsResolvingForUri(); isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
});
const select = (state, props) => ({
claim: selectClaim(state, props.params),
isResolvingUri: selectIsResolving(state, props.params),
});
return select;
};
const perform = dispatch => ({ const perform = dispatch => ({
resolveUri: uri => dispatch(doResolveUri(uri)), resolveUri: uri => dispatch(doResolveUri(uri)),
}); });
export default connect(makeSelect, perform)(ShowPage); export default connect(select, perform)(ShowPage);

9
ui/js/page/show/view.jsx
View file

@ -6,15 +6,13 @@ import FilePage from "page/file";
class ShowPage extends React.PureComponent { class ShowPage extends React.PureComponent {
componentWillMount() { componentWillMount() {
const { isResolvingUri, resolveUri, params } = this.props; const { isResolvingUri, resolveUri, uri } = this.props;
const { uri } = params;
if (!isResolvingUri) resolveUri(uri); if (!isResolvingUri) resolveUri(uri);
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
const { isResolvingUri, resolveUri, claim, params } = nextProps; const { isResolvingUri, resolveUri, claim, uri } = nextProps;
const { uri } = params;
if (!isResolvingUri && claim === undefined && uri) { if (!isResolvingUri && claim === undefined && uri) {
resolveUri(uri); resolveUri(uri);
@ -22,8 +20,7 @@ class ShowPage extends React.PureComponent {
} }
render() { render() {
const { claim, params, isResolvingUri } = this.props; const { claim, isResolvingUri, uri } = this.props;
const { uri } = params;
let innerContent = ""; let innerContent = "";

6
ui/js/reducers/app.js
View file

@ -8,6 +8,8 @@ const win = remote.BrowserWindow.getFocusedWindow();
const reducers = {}; const reducers = {};
const defaultState = { const defaultState = {
isLoaded: false, isLoaded: false,
modal: null,
modalProps: {},
platform: process.platform, platform: process.platform,
upgradeSkipped: sessionStorage.getItem("upgradeSkipped"), upgradeSkipped: sessionStorage.getItem("upgradeSkipped"),
daemonVersionMatched: null, daemonVersionMatched: null,
@ -76,14 +78,14 @@ reducers[types.UPDATE_VERSION] = function(state, action) {
reducers[types.OPEN_MODAL] = function(state, action) { reducers[types.OPEN_MODAL] = function(state, action) {
return Object.assign({}, state, { return Object.assign({}, state, {
modal: action.data.modal, modal: action.data.modal,
modalExtraContent: action.data.extraContent, modalProps: action.data.modalProps || {},
}); });
}; };
reducers[types.CLOSE_MODAL] = function(state, action) { reducers[types.CLOSE_MODAL] = function(state, action) {
return Object.assign({}, state, { return Object.assign({}, state, {
modal: undefined, modal: undefined,
modalExtraContent: undefined, modalProps: {},
}); });
}; };

4
ui/js/selectors/app.js
View file

@ -71,9 +71,9 @@ export const selectUpgradeDownloadItem = createSelector(
state => state.downloadItem state => state.downloadItem
); );
export const selectModalExtraContent = createSelector( export const selectModalProps = createSelector(
_selectState, _selectState,
state => state.modalExtraContent state => state.modalProps
); );
export const selectDaemonReady = createSelector( export const selectDaemonReady = createSelector(

21
ui/js/selectors/availability.js
View file

@ -7,14 +7,10 @@ export const selectAvailabilityByUri = createSelector(
state => state.byUri || {} state => state.byUri || {}
); );
const selectAvailabilityForUri = (state, props) => { export const makeSelectIsAvailableForUri = uri => {
return selectAvailabilityByUri(state)[props.uri];
};
export const makeSelectIsAvailableForUri = () => {
return createSelector( return createSelector(
selectAvailabilityForUri, selectAvailabilityByUri,
availability => (availability === undefined ? undefined : availability > 0) byUri => (!byUri || byUri[uri] === undefined ? undefined : byUri[uri] > 0)
); );
}; };
@ -23,10 +19,9 @@ export const selectFetchingAvailability = createSelector(
state => state.fetching || {} state => state.fetching || {}
); );
const selectFetchingAvailabilityForUri = (state, props) => { export const makeSelectFetchingAvailabilityForUri = uri => {
return selectFetchingAvailability(state)[props.uri]; return createSelector(
}; selectFetchingAvailability,
byUri => byUri && byUri[uri]
export const makeSelectFetchingAvailabilityForUri = () => { );
return createSelector(selectFetchingAvailabilityForUri, fetching => fetching);
}; };

114
ui/js/selectors/claims.js
View file

@ -40,24 +40,24 @@ export const selectAllClaimsByChannel = createSelector(
state => state.claimsByChannel || {} state => state.claimsByChannel || {}
); );
const selectClaimForUri = (state, props) => { export const makeSelectClaimForUri = uri => {
const uri = lbryuri.normalize(props.uri); return createSelector(
return selectClaimsByUri(state)[uri]; selectClaimsByUri,
claims => claims && claims[lbryuri.normalize(uri)]
);
}; };
export const makeSelectClaimForUri = () => { export const makeSelectClaimIsMine = rawUri => {
return createSelector(selectClaimForUri, claim => claim); const uri = lbryuri.normalize(rawUri);
}; return createSelector(
selectClaimsByUri,
const selectClaimForUriIsMine = (state, props) => { selectMyClaimsRaw,
const uri = lbryuri.normalize(props.uri); (claims, myClaims) =>
const claim = selectClaimsByUri(state)[uri]; claims &&
const myClaims = selectMyClaimsRaw(state); claims[uri] &&
return myClaims && myClaims.has(claim.claim_id); claims[uri].claim_id &&
}; myClaims.has(claims[uri].claim_id)
);
export const makeSelectClaimForUriIsMine = () => {
return createSelector(selectClaimForUriIsMine, isMine => isMine);
}; };
export const selectAllFetchingChannelClaims = createSelector( export const selectAllFetchingChannelClaims = createSelector(
@ -65,84 +65,44 @@ export const selectAllFetchingChannelClaims = createSelector(
state => state.fetchingChannelClaims || {} state => state.fetchingChannelClaims || {}
); );
const selectFetchingChannelClaims = (state, props) => { export const makeSelectFetchingChannelClaims = uri => {
const allFetchingChannelClaims = selectAllFetchingChannelClaims(state); createSelector(
selectAllFetchingChannelClaims,
return allFetchingChannelClaims[props.uri]; fetching => fetching && fetching[uri]
);
}; };
export const makeSelectFetchingChannelClaims = (state, props) => { export const makeSelectClaimsInChannelForCurrentPage = (uri, page = 1) => {
return createSelector(selectFetchingChannelClaims, fetching => fetching); return createSelector(
}; selectClaimsById,
selectAllClaimsByChannel,
export const selectClaimsInChannelForUri = (state, props) => { (byId, allClaims) => {
const byId = selectClaimsById(state); const byChannel = allClaims[uri] || {};
const byChannel = selectAllClaimsByChannel(state)[props.uri] || {};
const claimIds = byChannel["all"];
if (!claimIds) return claimIds;
const claims = [];
claimIds.forEach(claimId => claims.push(byId[claimId]));
return claims;
};
export const makeSelectClaimsInChannelForUri = () => {
return createSelector(selectClaimsInChannelForUri, claims => claims);
};
export const selectClaimsInChannelForCurrentPage = (state, props) => {
const byId = selectClaimsById(state);
const byChannel = selectAllClaimsByChannel(state)[props.uri] || {};
const params = selectCurrentParams(state);
const page = params && params.page ? params.page : 1;
const claimIds = byChannel[page]; const claimIds = byChannel[page];
if (!claimIds) return claimIds; if (!claimIds) return claimIds;
const claims = []; return claimIds.map(claimId => byId[claimId]);
}
claimIds.forEach(claimId => claims.push(byId[claimId])); );
return claims;
}; };
export const makeSelectClaimsInChannelForCurrentPage = () => { export const makeSelectMetadataForUri = uri => {
return createSelector(selectClaimsInChannelForCurrentPage, claims => claims); return createSelector(makeSelectClaimForUri(uri), claim => {
};
const selectMetadataForUri = (state, props) => {
const claim = selectClaimForUri(state, props);
const metadata = const metadata =
claim && claim.value && claim.value.stream && claim.value.stream.metadata; claim && claim.value && claim.value.stream && claim.value.stream.metadata;
const value = metadata ? metadata : claim === undefined ? undefined : null; const value = metadata ? metadata : claim === undefined ? undefined : null;
return value; return value;
});
}; };
export const makeSelectMetadataForUri = () => { export const makeSelectContentTypeForUri = uri => {
return createSelector(selectMetadataForUri, metadata => metadata); return createSelector(makeSelectClaimForUri(uri), claim => {
};
const selectSourceForUri = (state, props) => {
const claim = selectClaimForUri(state, props);
const source = const source =
claim && claim.value && claim.value.stream && claim.value.stream.source; claim && claim.value && claim.value.stream && claim.value.stream.source;
return source ? source.contentType : undefined;
return source ? source : claim === undefined ? undefined : null; });
};
export const makeSelectSourceForUri = () => {
return createSelector(selectSourceForUri, source => source);
};
export const makeSelectContentTypeForUri = () => {
return createSelector(
selectSourceForUri,
source => (source ? source.contentType : source)
);
}; };
export const selectIsFetchingClaimListMine = createSelector( export const selectIsFetchingClaimListMine = createSelector(

19
ui/js/selectors/content.js
View file

@ -17,12 +17,11 @@ export const selectResolvingUris = createSelector(
state => state.resolvingUris || [] state => state.resolvingUris || []
); );
const selectResolvingUri = (state, props) => { export const makeSelectIsUriResolving = uri => {
return selectResolvingUris(state).indexOf(props.uri) != -1; return createSelector(
}; selectResolvingUris,
resolvingUris => resolvingUris && resolvingUris.indexOf(uri) != -1
export const makeSelectIsResolvingForUri = () => { );
return createSelector(selectResolvingUri, resolving => resolving);
}; };
export const selectChannelPages = createSelector( export const selectChannelPages = createSelector(
@ -30,12 +29,8 @@ export const selectChannelPages = createSelector(
state => state.channelPages || {} state => state.channelPages || {}
); );
const selectTotalPagesForChannel = (state, props) => { export const makeSelectTotalPagesForChannel = uri => {
return selectChannelPages(state)[props.uri]; return createSelector(selectChannelPages, byUri => byUri && byUri[uri]);
};
export const makeSelectTotalPagesForChannel = () => {
return createSelector(selectTotalPagesForChannel, totalPages => totalPages);
}; };
export const selectRewardContentClaimIds = createSelector( export const selectRewardContentClaimIds = createSelector(

22
ui/js/selectors/cost_info.js
View file

@ -8,12 +8,11 @@ export const selectAllCostInfoByUri = createSelector(
state => state.byUri || {} state => state.byUri || {}
); );
export const selectCostInfoForUri = (state, props) => { export const makeSelectCostInfoForUri = uri => {
return selectAllCostInfoByUri(state)[props.uri]; return createSelector(
}; selectAllCostInfoByUri,
costInfos => costInfos && costInfos[uri]
export const makeSelectCostInfoForUri = () => { );
return createSelector(selectCostInfoForUri, costInfo => costInfo);
}; };
export const selectCostForCurrentPageUri = createSelector( export const selectCostForCurrentPageUri = createSelector(
@ -28,10 +27,9 @@ export const selectFetchingCostInfo = createSelector(
state => state.fetching || {} state => state.fetching || {}
); );
const selectFetchingCostInfoForUri = (state, props) => { export const makeSelectFetchingCostInfoForUri = uri => {
return selectFetchingCostInfo(state)[props.uri]; return createSelector(
}; selectFetchingCostInfo,
fetchingByUri => fetchingByUri && fetchingByUri[uri]
export const makeSelectFetchingCostInfoForUri = () => { );
return createSelector(selectFetchingCostInfoForUri, fetching => !!fetching);
}; };

44
ui/js/selectors/file_info.js
View file

@ -26,17 +26,17 @@ export const selectIsFetchingFileListDownloadedOrPublished = createSelector(
isFetchingFileList || isFetchingClaimListMine isFetchingFileList || isFetchingClaimListMine
); );
export const selectFileInfoForUri = (state, props) => { export const makeSelectFileInfoForUri = uri => {
const claims = selectClaimsByUri(state), return createSelector(
claim = claims[props.uri], selectClaimsByUri,
byOutpoint = selectFileInfosByOutpoint(state), selectFileInfosByOutpoint,
(claims, byOutpoint) => {
const claim = claims[uri],
outpoint = claim ? `${claim.txid}:${claim.nout}` : undefined; outpoint = claim ? `${claim.txid}:${claim.nout}` : undefined;
return outpoint ? byOutpoint[outpoint] : undefined; return outpoint ? byOutpoint[outpoint] : undefined;
}; }
);
export const makeSelectFileInfoForUri = () => {
return createSelector(selectFileInfoForUri, fileInfo => fileInfo);
}; };
export const selectDownloadingByOutpoint = createSelector( export const selectDownloadingByOutpoint = createSelector(
@ -44,19 +44,14 @@ export const selectDownloadingByOutpoint = createSelector(
state => state.downloadingByOutpoint || {} state => state.downloadingByOutpoint || {}
); );
const selectDownloadingForUri = (state, props) => { export const makeSelectDownloadingForUri = uri => {
const byOutpoint = selectDownloadingByOutpoint(state);
const fileInfo = selectFileInfoForUri(state, props);
if (!fileInfo) return false;
return byOutpoint[fileInfo.outpoint];
};
export const makeSelectDownloadingForUri = () => {
return createSelector( return createSelector(
selectDownloadingForUri, selectDownloadingByOutpoint,
downloadingForUri => !!downloadingForUri makeSelectFileInfoForUri(uri),
(byOutpoint, fileInfo) => {
if (!fileInfo) return false;
return byOutpoint[fileInfo.outpoint];
}
); );
}; };
@ -65,13 +60,8 @@ export const selectUrisLoading = createSelector(
state => state.urisLoading || {} state => state.urisLoading || {}
); );
const selectLoadingForUri = (state, props) => { export const makeSelectLoadingForUri = uri => {
const byUri = selectUrisLoading(state); return createSelector(selectUrisLoading, byUri => byUri && byUri[uri]);
return byUri[props.uri];
};
export const makeSelectLoadingForUri = () => {
return createSelector(selectLoadingForUri, loading => !!loading);
}; };
export const selectFileInfosPendingPublish = createSelector( export const selectFileInfosPendingPublish = createSelector(