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

Setup ESLint and Prettier and apply changes to sources #891

Merged
IGassmann merged 22 commits from issue/763 into master 2017-12-27 21:22:51 +01:00
Conversation 3 Commits 22 Files changed 298 +2122 -2883
183 changed files with 2122 additions and 2883 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit e103778b8a - Show all commits

6
src/renderer/component/address/index.js
View file

@ -1,6 +1,6 @@
import { connect } from "react-redux";
import { doShowSnackBar } from "redux/actions/app";
import Address from "./view";
import { connect } from 'react-redux';
import { doShowSnackBar } from 'redux/actions/app';
import Address from './view';
export default connect(null, {
doShowSnackBar,

18
src/renderer/component/address/view.jsx
View file

@ -1,8 +1,8 @@
import React from "react";
import PropTypes from "prop-types";
import { clipboard } from "electron";
import Link from "component/link";
import classnames from "classnames";
import React from 'react';
import PropTypes from 'prop-types';
import { clipboard } from 'electron';
import Link from 'component/link';
import classnames from 'classnames';
export default class Address extends React.PureComponent {
static propTypes = {
@ -21,8 +21,8 @@ export default class Address extends React.PureComponent {
return (
<div className="form-field form-field--address">
<input
className={classnames("input-copyable", {
"input-copyable--with-copy-btn": showCopyButton,
className={classnames('input-copyable', {
'input-copyable--with-copy-btn': showCopyButton,
})}
type="text"
ref={input => {
@ -32,7 +32,7 @@ export default class Address extends React.PureComponent {
this._inputElem.select();
}}
readOnly="readonly"
value={address || ""}
value={address || ''}
/>
{showCopyButton && (
<span className="header__item">
@ -41,7 +41,7 @@ export default class Address extends React.PureComponent {
icon="clipboard"
onClick={() => {
clipboard.writeText(address);
doShowSnackBar({ message: __("Address copied") });
doShowSnackBar({ message: __('Address copied') });
}}
/>
</span>

14
src/renderer/component/app/index.js
View file

@ -1,14 +1,14 @@
import React from "react";
import { connect } from "react-redux";
import React from 'react';
import { connect } from 'react-redux';
import {
selectPageTitle,
selectHistoryIndex,
selectActiveHistoryEntry,
} from "redux/selectors/navigation";
import { selectUser } from "redux/selectors/user";
import { doAlertError } from "redux/actions/app";
import { doRecordScroll } from "redux/actions/navigation";
import App from "./view";
} from 'redux/selectors/navigation';
import { selectUser } from 'redux/selectors/user';
import { doAlertError } from 'redux/actions/app';
import { doRecordScroll } from 'redux/actions/navigation';
import App from './view';
const select = (state, props) => ({
pageTitle: selectPageTitle(state),

26
src/renderer/component/app/view.jsx
View file

@ -1,10 +1,10 @@
import React from "react";
import Router from "component/router/index";
import Header from "component/header";
import Theme from "component/theme";
import ModalRouter from "modal/modalRouter";
import ReactModal from "react-modal";
import throttle from "util/throttle";
import React from 'react';
import Router from 'component/router/index';
import Header from 'component/header';
import Theme from 'component/theme';
import ModalRouter from 'modal/modalRouter';
import ReactModal from 'react-modal';
import throttle from 'util/throttle';
class App extends React.PureComponent {
constructor() {
@ -15,25 +15,25 @@ class App extends React.PureComponent {
componentWillMount() {
const { alertError } = this.props;
document.addEventListener("unhandledError", event => {
document.addEventListener('unhandledError', event => {
alertError(event.detail);
});
}
componentDidMount() {
const { recordScroll } = this.props;
const mainContent = document.getElementById("main-content");
const mainContent = document.getElementById('main-content');
this.mainContent = mainContent;
const scrollListener = () => recordScroll(this.mainContent.scrollTop);
this.mainContent.addEventListener("scroll", throttle(scrollListener, 750));
this.mainContent.addEventListener('scroll', throttle(scrollListener, 750));
ReactModal.setAppElement("#window"); //fuck this
ReactModal.setAppElement('#window'); // fuck this
}
componentWillUnmount() {
this.mainContent.removeEventListener("scroll", this.scrollListener);
this.mainContent.removeEventListener('scroll', this.scrollListener);
}
componentWillReceiveProps(props) {
@ -50,7 +50,7 @@ class App extends React.PureComponent {
}
setTitleFromProps(props) {
window.document.title = props.pageTitle || "LBRY";
window.document.title = props.pageTitle || 'LBRY';
}
render() {

6
src/renderer/component/cardMedia/index.js
View file

@ -1,6 +1,6 @@
import React from "react";
import { connect } from "react-redux";
import CardMedia from "./view";
import React from 'react';
import { connect } from 'react-redux';
import CardMedia from './view';
const select = state => ({});
const perform = dispatch => ({});

35
src/renderer/component/cardMedia/view.jsx
View file

@ -1,18 +1,18 @@
import React from "react";
import React from 'react';
class CardMedia extends React.PureComponent {
static AUTO_THUMB_CLASSES = [
"purple",
"red",
"pink",
"indigo",
"blue",
"light-blue",
"cyan",
"teal",
"green",
"yellow",
"orange",
'purple',
'red',
'pink',
'indigo',
'blue',
'light-blue',
'cyan',
'teal',
'green',
'yellow',
'orange',
];
componentWillMount() {
@ -29,12 +29,7 @@ class CardMedia extends React.PureComponent {
const atClass = this.state.autoThumbClass;
if (thumbnail) {
return (
<div
className="card__media"
style={{ backgroundImage: "url('" + thumbnail + "')" }}
/>
);
return <div className="card__media" style={{ backgroundImage: `url('${thumbnail}')` }} />;
}
return (
@ -42,8 +37,8 @@ class CardMedia extends React.PureComponent {
<div className="card__autothumb__text">
{title &&
title
.replace(/\s+/g, "")
.substring(0, Math.min(title.replace(" ", "").length, 5))
.replace(/\s+/g, '')
.substring(0, Math.min(title.replace(' ', '').length, 5))
.toUpperCase()}
</div>
</div>

8
src/renderer/component/cardVerify/index.js
View file

@ -1,7 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import { selectUserEmail } from "redux/selectors/user";
import CardVerify from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { selectUserEmail } from 'redux/selectors/user';
import CardVerify from './view';
const select = state => ({
email: selectUserEmail(state),

38
src/renderer/component/cardVerify/view.jsx
View file

@ -1,6 +1,6 @@
import React from "react";
import PropTypes from "prop-types";
import Link from "component/link";
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'component/link';
let scriptLoading = false;
let scriptLoaded = false;
@ -48,8 +48,8 @@ class CardVerify extends React.Component {
scriptLoading = true;
const script = document.createElement("script");
script.src = "https://checkout.stripe.com/checkout.js";
const script = document.createElement('script');
script.src = 'https://checkout.stripe.com/checkout.js';
script.async = 1;
this.loadPromise = (() => {
@ -69,12 +69,8 @@ class CardVerify extends React.Component {
};
});
const wrappedPromise = new Promise((accept, cancel) => {
promise.then(
() => (canceled ? cancel({ isCanceled: true }) : accept())
);
promise.catch(
error => (canceled ? cancel({ isCanceled: true }) : cancel(error))
);
promise.then(() => (canceled ? cancel({ isCanceled: true }) : accept()));
promise.catch(error => (canceled ? cancel({ isCanceled: true }) : cancel(error)));
});
return {
@ -85,9 +81,7 @@ class CardVerify extends React.Component {
};
})();
this.loadPromise.promise
.then(this.onScriptLoaded)
.catch(this.onScriptError);
this.loadPromise.promise.then(this.onScriptLoaded).catch(this.onScriptError);
document.body.appendChild(script);
}
@ -119,7 +113,7 @@ class CardVerify extends React.Component {
};
onScriptError = (...args) => {
throw new Error("Unable to load credit validation script.");
throw new Error('Unable to load credit validation script.');
};
onClosed = () => {
@ -139,10 +133,10 @@ class CardVerify extends React.Component {
CardVerify.stripeHandler.open({
allowRememberMe: false,
closed: this.onClosed,
description: __("Confirm Identity"),
description: __('Confirm Identity'),
email: this.props.email,
locale: "auto",
panelLabel: "Verify",
locale: 'auto',
panelLabel: 'Verify',
token: this.props.token,
zipCode: true,
});
@ -151,9 +145,7 @@ class CardVerify extends React.Component {
onClick = () => {
if (scriptDidError) {
try {
throw new Error(
"Tried to call onClick, but StripeCheckout failed to load"
);
throw new Error('Tried to call onClick, but StripeCheckout failed to load');
} catch (x) {}
} else if (CardVerify.stripeHandler) {
this.showStripeDialog();
@ -168,9 +160,7 @@ class CardVerify extends React.Component {
button="alt"
label={this.props.label}
icon="icon-lock"
disabled={
this.props.disabled || this.state.open || this.hasPendingClick
}
disabled={this.props.disabled || this.state.open || this.hasPendingClick}
onClick={this.onClick.bind(this)}
/>
);

16
src/renderer/component/channelTile/index.js
View file

@ -1,11 +1,11 @@
import React from "react";
import { connect } from "react-redux";
import { makeSelectClaimForUri } from "redux/selectors/claims";
import { doNavigate } from "redux/actions/navigation";
import { doResolveUri } from "redux/actions/content";
import { makeSelectTotalItemsForChannel } from "redux/selectors/content";
import { makeSelectIsUriResolving } from "redux/selectors/content";
import ChannelTile from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { makeSelectClaimForUri } from 'redux/selectors/claims';
import { doNavigate } from 'redux/actions/navigation';
import { doResolveUri } from 'redux/actions/content';
import { makeSelectTotalItemsForChannel } from 'redux/selectors/content';
import { makeSelectIsUriResolving } from 'redux/selectors/content';
import ChannelTile from './view';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),

22
src/renderer/component/channelTile/view.jsx
View file

@ -1,6 +1,6 @@
import React from "react";
import CardMedia from "component/cardMedia";
import { TruncatedText, BusyMessage } from "component/common.js";
import React from 'react';
import CardMedia from 'component/cardMedia';
import { TruncatedText, BusyMessage } from 'component/common.js';
class ChannelTile extends React.PureComponent {
componentDidMount() {
@ -26,12 +26,12 @@ class ChannelTile extends React.PureComponent {
channelId = claim.claim_id;
}
let onClick = () => navigate("/show", { uri });
const onClick = () => navigate('/show', { uri });
return (
<section className="file-tile card">
<div onClick={onClick} className="card__link">
<div className={"card__inner file-tile__row"}>
<div className="card__inner file-tile__row">
{channelName && <CardMedia title={channelName} thumbnail={null} />}
<div className="file-tile__content">
<div className="card__title-primary">
@ -40,19 +40,15 @@ class ChannelTile extends React.PureComponent {
</h3>
</div>
<div className="card__content card__subtext">
{isResolvingUri && (
<BusyMessage message={__("Resolving channel")} />
)}
{isResolvingUri && <BusyMessage message={__('Resolving channel')} />}
{totalItems > 0 && (
<span>
This is a channel with {totalItems}{" "}
{totalItems === 1 ? " item" : " items"} inside of it.
This is a channel with {totalItems} {totalItems === 1 ? ' item' : ' items'}{' '}
inside of it.
</span>
)}
{!isResolvingUri &&
!totalItems && (
<span className="empty">This is an empty channel.</span>
)}
!totalItems && <span className="empty">This is an empty channel.</span>}
</div>
</div>
</div>

40
src/renderer/component/common.js
View file

@ -1,7 +1,7 @@
import React from "react";
import PropTypes from "prop-types";
import { formatCredits, formatFullPrice } from "util/formatCredits";
import lbry from "../lbry.js";
import React from 'react';
import PropTypes from 'prop-types';
import { formatCredits, formatFullPrice } from 'util/formatCredits';
import lbry from '../lbry.js';
// component/icon.js
export class Icon extends React.PureComponent {
@ -13,9 +13,9 @@ export class Icon extends React.PureComponent {
render() {
const { fixed, className } = this.props;
const spanClassName = `icon ${
"fixed" in this.props ? "icon-fixed-width " : ""
}${this.props.icon} ${this.props.className || ""}`;
const spanClassName = `icon ${'fixed' in this.props ? 'icon-fixed-width ' : ''}${
this.props.icon
} ${this.props.className || ''}`;
return <span className={spanClassName} />;
}
}
@ -31,10 +31,7 @@ export class TruncatedText extends React.PureComponent {
render() {
return (
<span
className="truncated-text"
style={{ WebkitLineClamp: this.props.lines }}
>
<span className="truncated-text" style={{ WebkitLineClamp: this.props.lines }}>
{this.props.children}
</span>
);
@ -70,14 +67,14 @@ export class CreditAmount extends React.PureComponent {
showFree: PropTypes.bool,
showFullPrice: PropTypes.bool,
showPlus: PropTypes.bool,
look: PropTypes.oneOf(["indicator", "plain", "fee"]),
look: PropTypes.oneOf(['indicator', 'plain', 'fee']),
};
static defaultProps = {
precision: 2,
label: true,
showFree: false,
look: "indicator",
look: 'indicator',
showFullPrice: false,
showPlus: false,
};
@ -100,13 +97,13 @@ export class CreditAmount extends React.PureComponent {
let amountText;
if (this.props.showFree && parseFloat(this.props.amount) === 0) {
amountText = __("free");
amountText = __('free');
} else {
if (this.props.label) {
const label =
typeof this.props.label === "string"
typeof this.props.label === 'string'
? this.props.label
: parseFloat(amount) == 1 ? __("credit") : __("credits");
: parseFloat(amount) == 1 ? __('credit') : __('credits');
amountText = `${formattedAmount} ${label}`;
} else {
@ -118,15 +115,12 @@ export class CreditAmount extends React.PureComponent {
}
return (
<span
className={`credit-amount credit-amount--${this.props.look}`}
title={fullPrice}
>
<span className={`credit-amount credit-amount--${this.props.look}`} title={fullPrice}>
<span>{amountText}</span>
{this.props.isEstimate ? (
<span
className="credit-amount__estimate"
title={__("This is an estimate and does not include data fees")}
title={__('This is an estimate and does not include data fees')}
>
*
</span>
@ -152,7 +146,7 @@ export class Thumbnail extends React.PureComponent {
constructor(props) {
super(props);
this._defaultImageUri = lbry.imagePath("default-thumb.svg");
this._defaultImageUri = lbry.imagePath('default-thumb.svg');
this._maxLoadTime = 10000;
this._isMounted = false;
@ -177,7 +171,7 @@ export class Thumbnail extends React.PureComponent {
}
render() {
const className = this.props.className ? this.props.className : "",
const className = this.props.className ? this.props.className : '',
otherProps = Object.assign({}, this.props);
delete otherProps.className;
return (

28
src/renderer/component/common/spinner.jsx
View file

@ -1,16 +1,14 @@
import React from "react";
import classnames from "classnames";
import React from 'react';
import classnames from 'classnames';
export default ({ dark, className }) => {
return (
<div
className={classnames(
"spinner",
{
"spinner--dark": dark,
},
className
)}
/>
);
};
export default ({ dark, className }) => (
<div
className={classnames(
'spinner',
{
'spinner--dark': dark,
},
className
)}
/>
);

15
src/renderer/component/dateTime/index.js
View file

@ -1,14 +1,11 @@
import React from "react";
import { connect } from "react-redux";
import { makeSelectBlockDate } from "redux/selectors/wallet";
import { doFetchBlock } from "redux/actions/wallet";
import DateTime from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { makeSelectBlockDate } from 'redux/selectors/wallet';
import { doFetchBlock } from 'redux/actions/wallet';
import DateTime from './view';
const select = (state, props) => ({
date:
!props.date && props.block
? makeSelectBlockDate(props.block)(state)
: props.date,
date: !props.date && props.block ? makeSelectBlockDate(props.block)(state) : props.date,
});
const perform = dispatch => ({

20
src/renderer/component/dateTime/view.jsx
View file

@ -1,15 +1,15 @@
import React from "react";
import React from 'react';
class DateTime extends React.PureComponent {
static SHOW_DATE = "date";
static SHOW_TIME = "time";
static SHOW_BOTH = "both";
static SHOW_DATE = 'date';
static SHOW_TIME = 'time';
static SHOW_BOTH = 'both';
static defaultProps = {
formatOptions: {
month: "long",
day: "numeric",
year: "numeric",
month: 'long',
day: 'numeric',
year: 'numeric',
},
};
@ -37,12 +37,12 @@ class DateTime extends React.PureComponent {
<span>
{date &&
(show == DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
date.toLocaleDateString([locale, "en-US"], formatOptions)}
{show == DateTime.SHOW_BOTH && " "}
date.toLocaleDateString([locale, 'en-US'], formatOptions)}
{show == DateTime.SHOW_BOTH && ' '}
{date &&
(show == DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&
date.toLocaleTimeString()}
{!date && "..."}
{!date && '...'}
</span>
);
}

23
src/renderer/component/file-selector.js
View file

@ -1,17 +1,17 @@
import React from "react";
import PropTypes from "prop-types";
import React from 'react';
import PropTypes from 'prop-types';
const { remote } = require("electron");
const { remote } = require('electron');
class FileSelector extends React.PureComponent {
static propTypes = {
type: PropTypes.oneOf(["file", "directory"]),
type: PropTypes.oneOf(['file', 'directory']),
initPath: PropTypes.string,
onFileChosen: PropTypes.func,
};
static defaultProps = {
type: "file",
type: 'file',
};
constructor(props) {
@ -28,10 +28,7 @@ class FileSelector extends React.PureComponent {
handleButtonClick() {
remote.dialog.showOpenDialog(
{
properties:
this.props.type == "file"
? ["openFile"]
: ["openDirectory", "createDirectory"],
properties: this.props.type == 'file' ? ['openFile'] : ['openDirectory', 'createDirectory'],
},
paths => {
if (!paths) {
@ -60,12 +57,10 @@ class FileSelector extends React.PureComponent {
>
<span className="button__content">
<span className="button-label">
{this.props.type == "file"
? __("Choose File")
: __("Choose Directory")}
{this.props.type == 'file' ? __('Choose File') : __('Choose Directory')}
</span>
</span>
</button>{" "}
</button>{' '}
<span className="file-selector__path">
<input
className="input-copyable"
@ -77,7 +72,7 @@ class FileSelector extends React.PureComponent {
this._inputElem.select();
}}
readOnly="readonly"
value={this.state.path || __("No File Chosen")}
value={this.state.path || __('No File Chosen')}
/>
</span>
</div>

14
src/renderer/component/fileActions/index.js
View file

@ -1,10 +1,10 @@
import React from "react";
import { connect } from "react-redux";
import { makeSelectFileInfoForUri } from "redux/selectors/file_info";
import { makeSelectCostInfoForUri } from "redux/selectors/cost_info";
import { doOpenModal } from "redux/actions/app";
import { makeSelectClaimIsMine } from "redux/selectors/claims";
import FileActions from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { makeSelectFileInfoForUri } from 'redux/selectors/file_info';
import { makeSelectCostInfoForUri } from 'redux/selectors/cost_info';
import { doOpenModal } from 'redux/actions/app';
import { makeSelectClaimIsMine } from 'redux/selectors/claims';
import FileActions from './view';
const select = (state, props) => ({
fileInfo: makeSelectFileInfoForUri(props.uri)(state),

18
src/renderer/component/fileActions/view.jsx
View file

@ -1,7 +1,7 @@
import React from "react";
import Link from "component/link";
import FileDownloadLink from "component/fileDownloadLink";
import * as modals from "constants/modal_types";
import React from 'react';
import Link from 'component/link';
import FileDownloadLink from 'component/fileDownloadLink';
import * as modals from 'constants/modal_types';
class FileActions extends React.PureComponent {
render() {
@ -17,7 +17,7 @@ class FileActions extends React.PureComponent {
<Link
button="text"
icon="icon-trash"
label={__("Remove")}
label={__('Remove')}
className="no-underline"
onClick={() => openModal(modals.CONFIRM_FILE_REMOVE, { uri })}
/>
@ -28,22 +28,22 @@ class FileActions extends React.PureComponent {
icon="icon-flag"
href={`https://lbry.io/dmca?claim_id=${claimId}`}
className="no-underline"
label={__("report")}
label={__('report')}
/>
)}
<Link
button="primary"
icon="icon-gift"
label={__("Support")}
label={__('Support')}
navigate="/show"
className="card__action--right"
navigateParams={{ uri, tab: "tip" }}
navigateParams={{ uri, tab: 'tip' }}
/>
{claimIsMine && (
<Link
button="alt"
icon="icon-edit"
label={__("Edit")}
label={__('Edit')}
navigate="/publish"
className="card__action--right"
navigateParams={{ id: claimId }}

24
src/renderer/component/fileCard/index.js
View file

@ -1,18 +1,12 @@
import React from "react";
import { connect } from "react-redux";
import { doNavigate } from "redux/actions/navigation";
import { doResolveUri } from "redux/actions/content";
import { selectShowNsfw } from "redux/selectors/settings";
import {
makeSelectClaimForUri,
makeSelectMetadataForUri,
} from "redux/selectors/claims";
import { makeSelectFileInfoForUri } from "redux/selectors/file_info";
import {
makeSelectIsUriResolving,
selectRewardContentClaimIds,
} from "redux/selectors/content";
import FileCard from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { doNavigate } from 'redux/actions/navigation';
import { doResolveUri } from 'redux/actions/content';
import { selectShowNsfw } from 'redux/selectors/settings';
import { makeSelectClaimForUri, makeSelectMetadataForUri } from 'redux/selectors/claims';
import { makeSelectFileInfoForUri } from 'redux/selectors/file_info';
import { makeSelectIsUriResolving, selectRewardContentClaimIds } from 'redux/selectors/content';
import FileCard from './view';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),

47
src/renderer/component/fileCard/view.jsx
View file

@ -1,14 +1,14 @@
import React from "react";
import lbryuri from "lbryuri.js";
import CardMedia from "component/cardMedia";
import Link from "component/link";
import { TruncatedText } from "component/common";
import Icon from "component/icon";
import FilePrice from "component/filePrice";
import UriIndicator from "component/uriIndicator";
import NsfwOverlay from "component/nsfwOverlay";
import TruncatedMarkdown from "component/truncatedMarkdown";
import * as icons from "constants/icons";
import React from 'react';
import lbryuri from 'lbryuri.js';
import CardMedia from 'component/cardMedia';
import Link from 'component/link';
import { TruncatedText } from 'component/common';
import Icon from 'component/icon';
import FilePrice from 'component/filePrice';
import UriIndicator from 'component/uriIndicator';
import NsfwOverlay from 'component/nsfwOverlay';
import TruncatedMarkdown from 'component/truncatedMarkdown';
import * as icons from 'constants/icons';
class FileCard extends React.PureComponent {
constructor(props) {
@ -59,35 +59,27 @@ class FileCard extends React.PureComponent {
const uri = lbryuri.normalize(this.props.uri);
const title = metadata && metadata.title ? metadata.title : uri;
const thumbnail =
metadata && metadata.thumbnail ? metadata.thumbnail : null;
const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null;
const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
const isRewardContent =
claim && rewardedContentClaimIds.includes(claim.claim_id);
const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
let description = "";
let description = '';
if (isResolvingUri && !claim) {
description = __("Loading...");
description = __('Loading...');
} else if (metadata && metadata.description) {
description = metadata.description;
} else if (claim === null) {
description = __("This address contains no content.");
description = __('This address contains no content.');
}
return (
<section
className={
"card card--small card--link " +
(obscureNsfw ? "card--obscured " : "")
}
className={`card card--small card--link ${obscureNsfw ? 'card--obscured ' : ''}`}
onMouseEnter={this.handleMouseOver.bind(this)}
onMouseLeave={this.handleMouseOut.bind(this)}
>
<div className="card__inner">
<Link
onClick={() => navigate("/show", { uri })}
className="card__link"
>
<Link onClick={() => navigate('/show', { uri })} className="card__link">
<CardMedia title={title} thumbnail={thumbnail} />
<div className="card__title-identity">
<div className="card__title" title={title}>
@ -95,8 +87,7 @@ class FileCard extends React.PureComponent {
</div>
<div className="card__subtitle">
<span className="card__indicators">
<FilePrice uri={uri} />{" "}
{isRewardContent && <Icon icon={icons.FEATURED} />}{" "}
<FilePrice uri={uri} /> {isRewardContent && <Icon icon={icons.FEATURED} />}{' '}
{fileInfo && <Icon icon={icons.LOCAL} />}
</span>
<UriIndicator uri={uri} smallCard />

12
src/renderer/component/fileDetails/index.js
View file

@ -1,13 +1,13 @@
import React from "react";
import { connect } from "react-redux";
import React from 'react';
import { connect } from 'react-redux';
import {
makeSelectClaimForUri,
makeSelectContentTypeForUri,
makeSelectMetadataForUri,
} from "redux/selectors/claims";
import FileDetails from "./view";
import { doOpenFileInFolder } from "redux/actions/file_info";
import { makeSelectFileInfoForUri } from "redux/selectors/file_info";
} from 'redux/selectors/claims';
import FileDetails from './view';
import { doOpenFileInFolder } from 'redux/actions/file_info';
import { makeSelectFileInfoForUri } from 'redux/selectors/file_info';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),

47
src/renderer/component/fileDetails/view.jsx
View file

@ -1,27 +1,20 @@
import React from "react";
import ReactMarkdown from "react-markdown";
import lbry from "lbry.js";
import FileActions from "component/fileActions";
import Link from "component/link";
import DateTime from "component/dateTime";
import React from 'react';
import ReactMarkdown from 'react-markdown';
import lbry from 'lbry.js';
import FileActions from 'component/fileActions';
import Link from 'component/link';
import DateTime from 'component/dateTime';
const path = require("path");
const path = require('path');
class FileDetails extends React.PureComponent {
render() {
const {
claim,
contentType,
fileInfo,
metadata,
openFolder,
uri,
} = this.props;
const { claim, contentType, fileInfo, metadata, openFolder, uri } = this.props;
if (!claim || !metadata) {
return (
<div className="card__content">
<span className="empty">{__("Empty claim or metadata info.")}</span>
<span className="empty">{__('Empty claim or metadata info.')}</span>
</div>
);
}
@ -29,9 +22,7 @@ class FileDetails extends React.PureComponent {
const { description, language, license } = metadata;
const mediaType = lbry.getMediaType(contentType);
const downloadPath = fileInfo
? path.normalize(fileInfo.download_path)
: null;
const downloadPath = fileInfo ? path.normalize(fileInfo.download_path) : null;
return (
<div>
@ -40,33 +31,31 @@ class FileDetails extends React.PureComponent {
<div className="divider__horizontal" />
<div className="card__content card__subtext card__subtext--allow-newlines">
<ReactMarkdown
source={description || ""}
escapeHtml={true}
disallowedTypes={["Heading", "HtmlInline", "HtmlBlock"]}
source={description || ''}
escapeHtml
disallowedTypes={['Heading', 'HtmlInline', 'HtmlBlock']}
/>
</div>
<div className="card__content">
<table className="table-standard table-stretch">
<tbody>
<tr>
<td>{__("Content-Type")}</td>
<td>{__('Content-Type')}</td>
<td>{mediaType}</td>
</tr>
<tr>
<td>{__("Language")}</td>
<td>{__('Language')}</td>
<td>{language}</td>
</tr>
<tr>
<td>{__("License")}</td>
<td>{__('License')}</td>
<td>{license}</td>
</tr>
{downloadPath && (
<tr>
<td>{__("Downloaded to")}</td>
<td>{__('Downloaded to')}</td>
<td>
<Link onClick={() => openFolder(downloadPath)}>
{downloadPath}
</Link>
<Link onClick={() => openFolder(downloadPath)}>{downloadPath}</Link>
</td>
</tr>
)}

16
src/renderer/component/fileDownloadLink/index.js
View file

@ -1,15 +1,15 @@
import React from "react";
import { connect } from "react-redux";
import React from 'react';
import { connect } from 'react-redux';
import {
makeSelectFileInfoForUri,
makeSelectDownloadingForUri,
makeSelectLoadingForUri,
} from "redux/selectors/file_info";
import { makeSelectCostInfoForUri } from "redux/selectors/cost_info";
import { doFetchAvailability } from "redux/actions/availability";
import { doOpenFileInShell } from "redux/actions/file_info";
import { doPurchaseUri, doStartDownload } from "redux/actions/content";
import FileDownloadLink from "./view";
} from 'redux/selectors/file_info';
import { makeSelectCostInfoForUri } from 'redux/selectors/cost_info';
import { doFetchAvailability } from 'redux/actions/availability';
import { doOpenFileInShell } from 'redux/actions/file_info';
import { doPurchaseUri, doStartDownload } from 'redux/actions/content';
import FileDownloadLink from './view';
const select = (state, props) => ({
fileInfo: makeSelectFileInfoForUri(props.uri)(state),

49
src/renderer/component/fileDownloadLink/view.jsx
View file

@ -1,6 +1,6 @@
import React from "react";
import { Icon, BusyMessage } from "component/common";
import Link from "component/link";
import React from 'react';
import { Icon, BusyMessage } from 'component/common';
import Link from 'component/link';
class FileDownloadLink extends React.PureComponent {
componentWillMount() {
@ -34,24 +34,14 @@ class FileDownloadLink extends React.PureComponent {
}
render() {
const {
fileInfo,
downloading,
uri,
openInShell,
purchaseUri,
costInfo,
loading,
} = this.props;
const { fileInfo, downloading, uri, openInShell, purchaseUri, 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..."),
label = fileInfo ? progress.toFixed(0) + __('% complete') : __('Connecting...'),
labelWithIcon = (
<span className="button__content">
<Icon icon="icon-download" />
@ -63,7 +53,7 @@ class FileDownloadLink extends React.PureComponent {
<div className="faux-button-block file-download button-set-item">
<div
className="faux-button-block file-download__overlay"
style={{ width: progress + "%" }}
style={{ width: `${progress}%` }}
>
{labelWithIcon}
</div>
@ -72,24 +62,23 @@ class FileDownloadLink extends React.PureComponent {
);
} else if (fileInfo === null && !downloading) {
if (!costInfo) {
return <BusyMessage message={__("Fetching cost info")} />;
} else {
return (
<Link
button="text"
label={__("Download")}
icon="icon-download"
className="no-underline"
onClick={() => {
purchaseUri(uri);
}}
/>
);
return <BusyMessage message={__('Fetching cost info')} />;
}
return (
<Link
button="text"
label={__('Download')}
icon="icon-download"
className="no-underline"
onClick={() => {
purchaseUri(uri);
}}
/>
);
} else if (fileInfo && fileInfo.download_path) {
return (
<Link
label={__("Open")}
label={__('Open')}
button="text"
icon="icon-external-link-square"
className="no-underline"

6
src/renderer/component/fileList/index.js
View file

@ -1,6 +1,6 @@
import React from "react";
import { connect } from "react-redux";
import FileList from "./view";
import React from 'react';
import { connect } from 'react-redux';
import FileList from './view';
const select = state => ({});

59
src/renderer/component/fileList/view.jsx
View file

@ -1,23 +1,23 @@
import React from "react";
import lbryuri from "lbryuri.js";
import FormField from "component/formField";
import FileTile from "component/fileTile";
import { BusyMessage } from "component/common.js";
import React from 'react';
import lbryuri from 'lbryuri.js';
import FormField from 'component/formField';
import FileTile from 'component/fileTile';
import { BusyMessage } from 'component/common.js';
class FileList extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
sortBy: "date",
sortBy: 'date',
};
this._sortFunctions = {
date: function(fileInfos) {
date(fileInfos) {
return fileInfos.slice().reverse();
},
title: function(fileInfos) {
return fileInfos.slice().sort(function(fileInfo1, fileInfo2) {
title(fileInfos) {
return fileInfos.slice().sort((fileInfo1, fileInfo2) => {
const title1 = fileInfo1.value
? fileInfo1.value.stream.metadata.title.toLowerCase()
: fileInfo1.name;
@ -28,25 +28,21 @@ class FileList extends React.PureComponent {
return -1;
} else if (title1 > title2) {
return 1;
} else {
return 0;
}
return 0;
});
},
filename: function(fileInfos) {
return fileInfos
.slice()
.sort(function({ file_name: fileName1 }, { file_name: fileName2 }) {
const fileName1Lower = fileName1.toLowerCase();
const fileName2Lower = fileName2.toLowerCase();
if (fileName1Lower < fileName2Lower) {
return -1;
} else if (fileName2Lower > fileName1Lower) {
return 1;
} else {
return 0;
}
});
filename(fileInfos) {
return fileInfos.slice().sort(({ file_name: fileName1 }, { file_name: fileName2 }) => {
const fileName1Lower = fileName1.toLowerCase();
const fileName2Lower = fileName2.toLowerCase();
if (fileName1Lower < fileName2Lower) {
return -1;
} else if (fileName2Lower > fileName1Lower) {
return 1;
}
return 0;
});
},
};
}
@ -54,9 +50,8 @@ class FileList extends React.PureComponent {
getChannelSignature(fileInfo) {
if (fileInfo.value) {
return fileInfo.value.publisherSignature.certificateId;
} else {
return fileInfo.metadata.publisherSignature.certificateId;
}
return fileInfo.metadata.publisherSignature.certificateId;
}
handleSortChanged(event) {
@ -71,7 +66,7 @@ class FileList extends React.PureComponent {
const content = [];
this._sortFunctions[sortBy](fileInfos).forEach(fileInfo => {
let uriParams = {};
const uriParams = {};
if (fileInfo.channel_name) {
uriParams.channelName = fileInfo.channel_name;
@ -89,7 +84,7 @@ class FileList extends React.PureComponent {
uri={uri}
showPrice={false}
showLocal={false}
showActions={true}
showActions
showEmpty={this.props.fileTileShowEmpty}
/>
);
@ -98,10 +93,10 @@ class FileList extends React.PureComponent {
<section className="file-list__header">
{fetching && <BusyMessage />}
<span className="sort-section">
{__("Sort by")}{" "}
{__('Sort by')}{' '}
<FormField type="select" onChange={this.handleSortChanged.bind(this)}>
<option value="date">{__("Date")}</option>
<option value="title">{__("Title")}</option>
<option value="date">{__('Date')}</option>
<option value="title">{__('Title')}</option>
</FormField>
</span>
{content}

13
src/renderer/component/fileListSearch/index.js
View file

@ -1,11 +1,8 @@
import React from "react";
import { connect } from "react-redux";
import { doSearch } from "redux/actions/search";
import {
selectIsSearching,
makeSelectSearchUris,
} from "redux/selectors/search";
import FileListSearch from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { doSearch } from 'redux/actions/search';
import { selectIsSearching, makeSelectSearchUris } from 'redux/selectors/search';
import FileListSearch from './view';
const select = (state, props) => ({
isSearching: selectIsSearching(state),

26
src/renderer/component/fileListSearch/view.jsx
View file

@ -1,9 +1,9 @@
import React from "react";
import FileTile from "component/fileTile";
import ChannelTile from "component/channelTile";
import Link from "component/link";
import { BusyMessage } from "component/common.js";
import lbryuri from "lbryuri";
import React from 'react';
import FileTile from 'component/fileTile';
import ChannelTile from 'component/channelTile';
import Link from 'component/link';
import { BusyMessage } from 'component/common.js';
import lbryuri from 'lbryuri';
const SearchNoResults = props => {
const { query } = props;
@ -11,8 +11,8 @@ const SearchNoResults = props => {
return (
<section>
<span className="empty">
{(__("No one has checked anything in for %s yet."), query)}{" "}
<Link label={__("Be the first")} navigate="/publish" />
{(__('No one has checked anything in for %s yet.'), query)}{' '}
<Link label={__('Be the first')} navigate="/publish" />
</span>
</section>
);
@ -38,18 +38,14 @@ class FileListSearch extends React.PureComponent {
return (
<div>
{isSearching &&
!uris && (
<BusyMessage message={__("Looking up the Dewey Decimals")} />
)}
{isSearching && !uris && <BusyMessage message={__('Looking up the Dewey Decimals')} />}
{isSearching &&
uris && <BusyMessage message={__("Refreshing the Dewey Decimals")} />}
{isSearching && uris && <BusyMessage message={__('Refreshing the Dewey Decimals')} />}
{uris && uris.length
? uris.map(
uri =>
lbryuri.parse(uri).name[0] === "@" ? (
lbryuri.parse(uri).name[0] === '@' ? (
<ChannelTile key={uri} uri={uri} />
) : (
<FileTile key={uri} uri={uri} />

12
src/renderer/component/filePrice/index.js
View file

@ -1,12 +1,12 @@
import React from "react";
import { connect } from "react-redux";
import { doFetchCostInfoForUri } from "redux/actions/cost_info";
import React from 'react';
import { connect } from 'react-redux';
import { doFetchCostInfoForUri } from 'redux/actions/cost_info';
import {
makeSelectCostInfoForUri,
makeSelectFetchingCostInfoForUri,
} from "redux/selectors/cost_info";
import { makeSelectClaimForUri } from "redux/selectors/claims";
import FilePrice from "./view";
} from 'redux/selectors/cost_info';
import { makeSelectClaimForUri } from 'redux/selectors/claims';
import FilePrice from './view';
const select = (state, props) => ({
costInfo: makeSelectCostInfoForUri(props.uri)(state),

12
src/renderer/component/filePrice/view.jsx
View file

@ -1,5 +1,5 @@
import React from "react";
import { CreditAmount } from "component/common";
import React from 'react';
import { CreditAmount } from 'component/common';
class FilePrice extends React.PureComponent {
componentWillMount() {
@ -19,14 +19,12 @@ class FilePrice extends React.PureComponent {
}
render() {
const { costInfo, look = "indicator", showFullPrice = false } = this.props;
const { costInfo, look = 'indicator', showFullPrice = false } = this.props;
const isEstimate = costInfo ? !costInfo.includesData : null;
if (!costInfo) {
return (
<span className={`credit-amount credit-amount--${look}`}>???</span>
);
return <span className={`credit-amount credit-amount--${look}`}>???</span>;
}
return (
@ -34,7 +32,7 @@ class FilePrice extends React.PureComponent {
label={false}
amount={costInfo.cost}
isEstimate={isEstimate}
showFree={true}
showFree
showFullPrice={showFullPrice}
/>
);

24
src/renderer/component/fileTile/index.js
View file

@ -1,18 +1,12 @@
import React from "react";
import { connect } from "react-redux";
import { doNavigate } from "redux/actions/navigation";
import { doResolveUri } from "redux/actions/content";
import {
makeSelectClaimForUri,
makeSelectMetadataForUri,
} from "redux/selectors/claims";
import { makeSelectFileInfoForUri } from "redux/selectors/file_info";
import { selectShowNsfw } from "redux/selectors/settings";
import {
makeSelectIsUriResolving,
selectRewardContentClaimIds,
} from "redux/selectors/content";
import FileTile from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { doNavigate } from 'redux/actions/navigation';
import { doResolveUri } from 'redux/actions/content';
import { makeSelectClaimForUri, makeSelectMetadataForUri } from 'redux/selectors/claims';
import { makeSelectFileInfoForUri } from 'redux/selectors/file_info';
import { selectShowNsfw } from 'redux/selectors/settings';
import { makeSelectIsUriResolving, selectRewardContentClaimIds } from 'redux/selectors/content';
import FileTile from './view';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),

70
src/renderer/component/fileTile/view.jsx
View file

@ -1,15 +1,15 @@
import React from "react";
import * as icons from "constants/icons";
import lbryuri from "lbryuri.js";
import CardMedia from "component/cardMedia";
import { TruncatedText } from "component/common.js";
import FilePrice from "component/filePrice";
import NsfwOverlay from "component/nsfwOverlay";
import Icon from "component/icon";
import React from 'react';
import * as icons from 'constants/icons';
import lbryuri from 'lbryuri.js';
import CardMedia from 'component/cardMedia';
import { TruncatedText } from 'component/common.js';
import FilePrice from 'component/filePrice';
import NsfwOverlay from 'component/nsfwOverlay';
import Icon from 'component/icon';
class FileTile extends React.PureComponent {
static SHOW_EMPTY_PUBLISH = "publish";
static SHOW_EMPTY_PENDING = "pending";
static SHOW_EMPTY_PUBLISH = 'publish';
static SHOW_EMPTY_PENDING = 'pending';
static defaultProps = {
showPrice: true,
@ -36,11 +36,7 @@ class FileTile extends React.PureComponent {
}
handleMouseOver() {
if (
this.props.obscureNsfw &&
this.props.metadata &&
this.props.metadata.nsfw
) {
if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) {
this.setState({
showNsfwHelp: true,
});
@ -73,59 +69,49 @@ class FileTile extends React.PureComponent {
const isClaimed = !!claim;
const isClaimable = lbryuri.isClaimable(uri);
const title =
isClaimed && metadata && metadata.title
? metadata.title
: lbryuri.parse(uri).contentName;
const thumbnail =
metadata && metadata.thumbnail ? metadata.thumbnail : null;
isClaimed && metadata && metadata.title ? metadata.title : lbryuri.parse(uri).contentName;
const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null;
const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
const isRewardContent =
claim && rewardedContentClaimIds.includes(claim.claim_id);
const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
let onClick = () => navigate("/show", { uri });
let onClick = () => navigate('/show', { uri });
let name = "";
let name = '';
if (claim) {
name = claim.name;
}
let description = "";
let description = '';
if (isClaimed) {
description = metadata && metadata.description;
} else if (isResolvingUri) {
description = __("Loading...");
description = __('Loading...');
} else if (showEmpty === FileTile.SHOW_EMPTY_PUBLISH) {
onClick = () => navigate("/publish", {});
onClick = () => navigate('/publish', {});
description = (
<span className="empty">
{__("This location is unused.")}{" "}
{isClaimable && (
<span className="button-text">{__("Put something here!")}</span>
)}
{__('This location is unused.')}{' '}
{isClaimable && <span className="button-text">{__('Put something here!')}</span>}
</span>
);
} else if (showEmpty === FileTile.SHOW_EMPTY_PENDING) {
description = (
<span className="empty">
{__("This file is pending confirmation.")}
</span>
);
description = <span className="empty">{__('This file is pending confirmation.')}</span>;
}
return (
<section
className={"file-tile card " + (obscureNsfw ? "card--obscured " : "")}
className={`file-tile card ${obscureNsfw ? 'card--obscured ' : ''}`}
onMouseEnter={this.handleMouseOver.bind(this)}
onMouseLeave={this.handleMouseOut.bind(this)}
>
<div onClick={onClick} className="card__link">
<div className={"card__inner file-tile__row"}>
<div className="card__inner file-tile__row">
<CardMedia title={title || name} thumbnail={thumbnail} />
<div className="file-tile__content">
<div className="card__title-primary">
<span className="card__indicators">
{showPrice && <FilePrice uri={this.props.uri} />}{" "}
{isRewardContent && <Icon icon={icons.FEATURED} />}{" "}
{showPrice && <FilePrice uri={this.props.uri} />}{' '}
{isRewardContent && <Icon icon={icons.FEATURED} />}{' '}
{showLocal && fileInfo && <Icon icon={icons.LOCAL} />}
</span>
<h3>
@ -134,9 +120,7 @@ class FileTile extends React.PureComponent {
</div>
{description && (
<div className="card__content card__subtext">
<TruncatedText lines={!showActions ? 3 : 2}>
{description}
</TruncatedText>
<TruncatedText lines={!showActions ? 3 : 2}>{description}</TruncatedText>
</div>
)}
</div>

54
src/renderer/component/form.js
View file

@ -1,11 +1,11 @@
import React from "react";
import PropTypes from "prop-types";
import FormField from "component/formField";
import { Icon } from "component/common.js";
import React from 'react';
import PropTypes from 'prop-types';
import FormField from 'component/formField';
import { Icon } from 'component/common.js';
let formFieldCounter = 0;
export const formFieldNestedLabelTypes = ["radio", "checkbox"];
export const formFieldNestedLabelTypes = ['radio', 'checkbox'];
export function formFieldId() {
return `form-field-${++formFieldCounter}`;
@ -26,11 +26,7 @@ export class Form extends React.PureComponent {
}
render() {
return (
<form onSubmit={event => this.handleSubmit(event)}>
{this.props.children}
</form>
);
return <form onSubmit={event => this.handleSubmit(event)}>{this.props.children}</form>;
}
}
@ -50,7 +46,7 @@ export class FormRow extends React.PureComponent {
this._field = null;
this._fieldRequiredText = __("This field is required");
this._fieldRequiredText = __('This field is required');
this.state = this.getStateFromProps(props);
}
@ -63,11 +59,9 @@ export class FormRow extends React.PureComponent {
return {
isError: !!props.errorMessage,
errorMessage:
typeof props.errorMessage === "string"
typeof props.errorMessage === 'string'
? props.errorMessage
: props.errorMessage instanceof Error
? props.errorMessage.toString()
: "",
: props.errorMessage instanceof Error ? props.errorMessage.toString() : '',
};
}
@ -85,7 +79,7 @@ export class FormRow extends React.PureComponent {
clearError(text) {
this.setState({
isError: false,
errorMessage: "",
errorMessage: '',
});
}
@ -116,9 +110,7 @@ export class FormRow extends React.PureComponent {
render() {
const fieldProps = Object.assign({}, this.props),
elementId = formFieldId(),
renderLabelInFormField = formFieldNestedLabelTypes.includes(
this.props.type
);
renderLabelInFormField = formFieldNestedLabelTypes.includes(this.props.type);
if (!renderLabelInFormField) {
delete fieldProps.label;
@ -128,26 +120,24 @@ export class FormRow extends React.PureComponent {
delete fieldProps.isFocus;
return (
<div
className={`form-row${this.state.isFocus ? " form-row--focus" : ""}`}
>
<div className={`form-row${this.state.isFocus ? ' form-row--focus' : ''}`}>
{this.props.label && !renderLabelInFormField ? (
<div
className={`form-row__label-row ${
this.props.labelPrefix ? "form-row__label-row--prefix" : ""
this.props.labelPrefix ? 'form-row__label-row--prefix' : ''
}`}
>
<label
htmlFor={elementId}
className={`form-field__label ${
this.state.isError ? "form-field__label--error" : " "
this.state.isError ? 'form-field__label--error' : ' '
}`}
>
{this.props.label}
</label>
</div>
) : (
""
''
)}
<FormField
ref={ref => {
@ -161,12 +151,12 @@ export class FormRow extends React.PureComponent {
{!this.state.isError && this.props.helper ? (
<div className="form-field__helper">{this.props.helper}</div>
) : (
""
''
)}
{this.state.isError ? (
<div className="form-field__error">{this.state.errorMessage}</div>
) : (
""
''
)}
</div>
);
@ -176,14 +166,14 @@ export class FormRow extends React.PureComponent {
export const Submit = props => {
const { title, label, icon, disabled } = props;
const className = `${"button-block" +
" button-primary" +
" button-set-item" +
" button--submit"}${disabled ? " disabled" : ""}`;
const className = `${'button-block' +
' button-primary' +
' button-set-item' +
' button--submit'}${disabled ? ' disabled' : ''}`;
const content = (
<span className="button__content">
{"icon" in props ? <Icon icon={icon} fixed /> : null}
{'icon' in props ? <Icon icon={icon} fixed /> : null}
{label ? <span className="button-label">{label}</span> : null}
</span>
);

6
src/renderer/component/formField/index.js
View file

@ -1,5 +1,5 @@
import React from "react";
import { connect } from "react-redux";
import FormField from "./view";
import React from 'react';
import { connect } from 'react-redux';
import FormField from './view';
export default connect(null, null, null, { withRef: true })(FormField);

92
src/renderer/component/formField/view.jsx
View file

@ -1,11 +1,11 @@
import React from "react";
import PropTypes from "prop-types";
import FileSelector from "component/file-selector.js";
import SimpleMDE from "react-simplemde-editor";
import { formFieldNestedLabelTypes, formFieldId } from "../form";
import style from "react-simplemde-editor/dist/simplemde.min.css";
import React from 'react';
import PropTypes from 'prop-types';
import FileSelector from 'component/file-selector.js';
import SimpleMDE from 'react-simplemde-editor';
import { formFieldNestedLabelTypes, formFieldId } from '../form';
import style from 'react-simplemde-editor/dist/simplemde.min.css';
const formFieldFileSelectorTypes = ["file", "directory"];
const formFieldFileSelectorTypes = ['file', 'directory'];
class FormField extends React.PureComponent {
static propTypes = {
@ -14,10 +14,7 @@ class FormField extends React.PureComponent {
postfix: PropTypes.string,
hasError: PropTypes.bool,
trim: PropTypes.bool,
regexp: PropTypes.oneOfType([
PropTypes.instanceOf(RegExp),
PropTypes.string,
]),
regexp: PropTypes.oneOfType([PropTypes.instanceOf(RegExp), PropTypes.string]),
};
static defaultProps = {
@ -27,7 +24,7 @@ class FormField extends React.PureComponent {
constructor(props) {
super(props);
this._fieldRequiredText = __("This field is required");
this._fieldRequiredText = __('This field is required');
this._type = null;
this._element = null;
this._extraElementProps = {};
@ -39,22 +36,22 @@ class FormField extends React.PureComponent {
}
componentWillMount() {
if (["text", "number", "radio", "checkbox"].includes(this.props.type)) {
this._element = "input";
if (['text', 'number', 'radio', 'checkbox'].includes(this.props.type)) {
this._element = 'input';
this._type = this.props.type;
} else if (this.props.type == "text-number") {
this._element = "input";
this._type = "text";
} else if (this.props.type == "SimpleMDE") {
} else if (this.props.type == 'text-number') {
this._element = 'input';
this._type = 'text';
} else if (this.props.type == 'SimpleMDE') {
this._element = SimpleMDE;
this._type = "textarea";
this._type = 'textarea';
this._extraElementProps.options = {
placeholder: this.props.placeholder,
hideIcons: ["heading", "image", "fullscreen", "side-by-side"],
hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
};
} else if (formFieldFileSelectorTypes.includes(this.props.type)) {
this._element = "input";
this._type = "hidden";
this._element = 'input';
this._type = 'hidden';
} else {
// Non <input> field, e.g. <select>, <textarea>
this._element = this.props.type;
@ -66,7 +63,7 @@ class FormField extends React.PureComponent {
* We have to add the webkitdirectory attribute here because React doesn't allow it in JSX
* https://github.com/facebook/react/issues/3468
*/
if (this.props.type == "directory") {
if (this.props.type == 'directory') {
this.refs.field.webkitdirectory = true;
}
}
@ -75,7 +72,7 @@ class FormField extends React.PureComponent {
this.refs.field.value = path;
if (this.props.onChange) {
// Updating inputs programmatically doesn't generate an event, so we have to make our own
const event = new Event("change", { bubbles: true });
const event = new Event('change', { bubbles: true });
this.refs.field.dispatchEvent(event); // This alone won't generate a React event, but we use it to attach the field as a target
this.props.onChange(event);
}
@ -91,20 +88,17 @@ class FormField extends React.PureComponent {
clearError() {
this.setState({
isError: false,
errorMessage: "",
errorMessage: '',
});
}
getValue() {
if (this.props.type == "checkbox") {
if (this.props.type == 'checkbox') {
return this.refs.field.checked;
} else if (this.props.type == "SimpleMDE") {
} else if (this.props.type == 'SimpleMDE') {
return this.refs.field.simplemde.value();
} else {
return this.props.trim
? this.refs.field.value.trim()
: this.refs.field.value;
}
return this.props.trim ? this.refs.field.value.trim() : this.refs.field.value;
}
getSelectedElement() {
@ -116,9 +110,9 @@ class FormField extends React.PureComponent {
}
validate() {
if ("regexp" in this.props) {
if ('regexp' in this.props) {
if (!this.getValue().match(this.props.regexp)) {
this.showError(__("Invalid format."));
this.showError(__('Invalid format.'));
} else {
this.clearError();
}
@ -133,8 +127,7 @@ class FormField extends React.PureComponent {
render() {
// Pass all unhandled props to the field element
const otherProps = Object.assign({}, this.props),
isError =
this.state.isError !== null ? this.state.isError : this.props.hasError,
isError = this.state.isError !== null ? this.state.isError : this.props.hasError,
elementId = this.props.elementId ? this.props.elementId : formFieldId(),
renderElementInsideLabel =
this.props.label && formFieldNestedLabelTypes.includes(this.props.type);
@ -158,13 +151,8 @@ class FormField extends React.PureComponent {
placeholder={this.props.placeholder}
onBlur={() => this.validate()}
onFocus={() => this.props.onFocus && this.props.onFocus()}
className={
"form-field__input form-field__input-" +
this.props.type +
" " +
(this.props.className || "") +
(isError ? "form-field__input--error" : "")
}
className={`form-field__input form-field__input-${this.props.type} ${this.props.className ||
''}${isError ? 'form-field__input--error' : ''}`}
{...otherProps}
{...this._extraElementProps}
>
@ -173,19 +161,13 @@ class FormField extends React.PureComponent {
);
return (
<div className={"form-field form-field--" + this.props.type}>
{this.props.prefix ? (
<span className="form-field__prefix">{this.props.prefix}</span>
) : (
""
)}
<div className={`form-field form-field--${this.props.type}`}>
{this.props.prefix ? <span className="form-field__prefix">{this.props.prefix}</span> : ''}
{element}
{renderElementInsideLabel && (
<label
htmlFor={elementId}
className={
"form-field__label " + (isError ? "form-field__label--error" : "")
}
className={`form-field__label ${isError ? 'form-field__label--error' : ''}`}
>
{this.props.label}
</label>
@ -194,20 +176,18 @@ class FormField extends React.PureComponent {
<FileSelector
type={this.props.type}
onFileChosen={this.handleFileChosen.bind(this)}
{...(this.props.defaultValue
? { initPath: this.props.defaultValue }
: {})}
{...(this.props.defaultValue ? { initPath: this.props.defaultValue } : {})}
/>
) : null}
{this.props.postfix ? (
<span className="form-field__postfix">{this.props.postfix}</span>
) : (
""
''
)}
{isError && this.state.errorMessage ? (
<div className="form-field__error">{this.state.errorMessage}</div>
) : (
""
''
)}
</div>
);

6
src/renderer/component/formFieldPrice/index.js
View file

@ -1,5 +1,5 @@
import React from "react";
import { connect } from "react-redux";
import FormFieldPrice from "./view";
import React from 'react';
import { connect } from 'react-redux';
import FormFieldPrice from './view';
export default connect(null, null)(FormFieldPrice);

27
src/renderer/component/formFieldPrice/view.jsx
View file

@ -1,18 +1,13 @@
import React from "react";
import FormField from "component/formField";
import React from 'react';
import FormField from 'component/formField';
class FormFieldPrice extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
amount:
props.defaultValue && props.defaultValue.amount
? props.defaultValue.amount
: "",
amount: props.defaultValue && props.defaultValue.amount ? props.defaultValue.amount : '',
currency:
props.defaultValue && props.defaultValue.currency
? props.defaultValue.currency
: "LBC",
props.defaultValue && props.defaultValue.currency ? props.defaultValue.currency : 'LBC',
};
}
@ -45,24 +40,20 @@ class FormFieldPrice extends React.PureComponent {
name="amount"
min={min}
placeholder={placeholder || null}
step="any" //Unfortunately, you cannot set a step without triggering validation that enforces a multiple of the step
step="any" // Unfortunately, you cannot set a step without triggering validation that enforces a multiple of the step
onChange={event => this.handleFeeAmountChange(event)}
defaultValue={
defaultValue && defaultValue.amount ? defaultValue.amount : ""
}
defaultValue={defaultValue && defaultValue.amount ? defaultValue.amount : ''}
className="form-field__input--inline"
/>
<FormField
type="select"
name="currency"
onChange={event => this.handleFeeCurrencyChange(event)}
defaultValue={
defaultValue && defaultValue.currency ? defaultValue.currency : ""
}
defaultValue={defaultValue && defaultValue.currency ? defaultValue.currency : ''}
className="form-field__input--inline"
>
<option value="LBC">{__("LBRY Credits (LBC)")}</option>
<option value="USD">{__("US Dollars")}</option>
<option value="LBC">{__('LBRY Credits (LBC)')}</option>
<option value="USD">{__('US Dollars')}</option>
</FormField>
</span>
);

25
src/renderer/component/header/index.js
View file

@ -1,19 +1,12 @@
import React from "react";
import { formatCredits } from "util/formatCredits";
import { connect } from "react-redux";
import {
selectIsBackDisabled,
selectIsForwardDisabled,
} from "redux/selectors/navigation";
import { selectBalance } from "redux/selectors/wallet";
import {
doNavigate,
doHistoryBack,
doHistoryForward,
} from "redux/actions/navigation";
import Header from "./view";
import { selectIsUpgradeAvailable } from "redux/selectors/app";
import { doDownloadUpgrade } from "redux/actions/app";
import React from 'react';
import { formatCredits } from 'util/formatCredits';
import { connect } from 'react-redux';
import { selectIsBackDisabled, selectIsForwardDisabled } from 'redux/selectors/navigation';
import { selectBalance } from 'redux/selectors/wallet';
import { doNavigate, doHistoryBack, doHistoryForward } from 'redux/actions/navigation';
import Header from './view';
import { selectIsUpgradeAvailable } from 'redux/selectors/app';
import { doDownloadUpgrade } from 'redux/actions/app';
const select = state => ({
isBackDisabled: selectIsBackDisabled(state),

38
src/renderer/component/header/view.jsx
View file

@ -1,6 +1,6 @@
import React from "react";
import Link from "component/link";
import WunderBar from "component/wunderbar";
import React from 'react';
import Link from 'component/link';
import WunderBar from 'component/wunderbar';
export const Header = props => {
const {
@ -21,7 +21,7 @@ export const Header = props => {
disabled={isBackDisabled}
button="alt button--flat"
icon="icon-arrow-left"
title={__("Back")}
title={__('Back')}
/>
</div>
<div className="header__item">
@ -30,59 +30,55 @@ export const Header = props => {
disabled={isForwardDisabled}
button="alt button--flat"
icon="icon-arrow-right"
title={__("Forward")}
title={__('Forward')}
/>
</div>
<div className="header__item">
<Link
onClick={() => navigate("/discover")}
onClick={() => navigate('/discover')}
button="alt button--flat"
icon="icon-home"
title={__("Discover Content")}
title={__('Discover Content')}
/>
</div>
<div className="header__item">
<Link
onClick={() => navigate("/subscriptions")}
button="alt button--flat"
icon="icon-at"
/>
<Link onClick={() => navigate('/subscriptions')} button="alt button--flat" icon="icon-at" />
</div>
<div className="header__item header__item--wunderbar">
<WunderBar />
</div>
<div className="header__item">
<Link
onClick={() => navigate("/wallet")}
onClick={() => navigate('/wallet')}
button="text"
className="no-underline"
icon="icon-bank"
label={balance}
title={__("Wallet")}
title={__('Wallet')}
/>
</div>
<div className="header__item">
<Link
onClick={() => navigate("/publish")}
onClick={() => navigate('/publish')}
button="primary button--flat"
icon="icon-upload"
label={__("Publish")}
label={__('Publish')}
/>
</div>
<div className="header__item">
<Link
onClick={() => navigate("/downloaded")}
onClick={() => navigate('/downloaded')}
button="alt button--flat"
icon="icon-folder"
title={__("Downloads and Publishes")}
title={__('Downloads and Publishes')}
/>
</div>
<div className="header__item">
<Link
onClick={() => navigate("/settings")}
onClick={() => navigate('/settings')}
button="alt button--flat"
icon="icon-gear"
title={__("Settings")}
title={__('Settings')}
/>
</div>
{isUpgradeAvailable && (
@ -90,7 +86,7 @@ export const Header = props => {
onClick={() => downloadUpgrade()}
button="primary button--flat"
icon="icon-arrow-up"
label={__("Upgrade App")}
label={__('Upgrade App')}
/>
)}
</header>

6
src/renderer/component/icon/index.js
View file

@ -1,5 +1,5 @@
import React from "react";
import { connect } from "react-redux";
import Icon from "./view";
import React from 'react';
import { connect } from 'react-redux';
import Icon from './view';
export default connect(null, null)(Icon);

17
src/renderer/component/icon/view.jsx
View file

@ -1,6 +1,6 @@
import React from "react";
import PropTypes from "prop-types";
import * as icons from "constants/icons";
import React from 'react';
import PropTypes from 'prop-types';
import * as icons from 'constants/icons';
export default class Icon extends React.PureComponent {
static propTypes = {
@ -15,17 +15,17 @@ export default class Icon extends React.PureComponent {
getIconClass() {
const { icon } = this.props;
return icon.startsWith("icon-") ? icon : "icon-" + icon;
return icon.startsWith('icon-') ? icon : `icon-${icon}`;
}
getIconTitle() {
switch (this.props.icon) {
case icons.FEATURED:
return __("Watch this and earn rewards.");
return __('Watch this and earn rewards.');
case icons.LOCAL:
return __("You have a copy of this file.");
return __('You have a copy of this file.');
default:
return "";
return '';
}
}
@ -33,8 +33,7 @@ export default class Icon extends React.PureComponent {
const className = this.getIconClass(),
title = this.getIconTitle();
const spanClassName =
"icon " + className + (this.props.fixed ? " icon-fixed-width " : "");
const spanClassName = `icon ${className}${this.props.fixed ? ' icon-fixed-width ' : ''}`;
return <span className={spanClassName} title={title} />;
}

11
src/renderer/component/inviteList/index.js
View file

@ -1,10 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import {
selectUserInvitees,
selectUserInviteStatusIsPending,
} from "redux/selectors/user";
import InviteList from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { selectUserInvitees, selectUserInviteStatusIsPending } from 'redux/selectors/user';
import InviteList from './view';
const select = state => ({
invitees: selectUserInvitees(state),

65
src/renderer/component/inviteList/view.jsx
View file

@ -1,7 +1,7 @@
import React from "react";
import { Icon } from "component/common";
import RewardLink from "component/rewardLink";
import rewards from "rewards.js";
import React from 'react';
import { Icon } from 'component/common';
import RewardLink from 'component/rewardLink';
import rewards from 'rewards.js';
class InviteList extends React.PureComponent {
render() {
@ -14,7 +14,7 @@ class InviteList extends React.PureComponent {
return (
<section className="card">
<div className="card__title-primary">
<h3>{__("Invite History")}</h3>
<h3>{__('Invite History')}</h3>
</div>
<div className="card__content">
{invitees.length === 0 && (
@ -24,38 +24,33 @@ class InviteList extends React.PureComponent {
<table className="table-standard table-stretch">
<thead>
<tr>
<th>{__("Invitee Email")}</th>
<th className="text-center">{__("Invite Status")}</th>
<th className="text-center">{__("Reward")}</th>
<th>{__('Invitee Email')}</th>
<th className="text-center">{__('Invite Status')}</th>
<th className="text-center">{__('Reward')}</th>
</tr>
</thead>
<tbody>
{invitees.map((invitee, index) => {
return (
<tr key={index}>
<td>{invitee.email}</td>
<td className="text-center">
{invitee.invite_accepted ? (
<Icon icon="icon-check" />
) : (
<span className="empty">{__("unused")}</span>
)}
</td>
<td className="text-center">
{invitee.invite_reward_claimed ? (
<Icon icon="icon-check" />
) : invitee.invite_reward_claimable ? (
<RewardLink
label={__("claim")}
reward_type={rewards.TYPE_REFERRAL}
/>
) : (
<span className="empty">{__("unclaimable")}</span>
)}
</td>
</tr>
);
})}
{invitees.map((invitee, index) => (
<tr key={index}>
<td>{invitee.email}</td>
<td className="text-center">
{invitee.invite_accepted ? (
<Icon icon="icon-check" />
) : (
<span className="empty">{__('unused')}</span>
)}
</td>
<td className="text-center">
{invitee.invite_reward_claimed ? (
<Icon icon="icon-check" />
) : invitee.invite_reward_claimable ? (
<RewardLink label={__('claim')} reward_type={rewards.TYPE_REFERRAL} />
) : (
<span className="empty">{__('unclaimable')}</span>
)}
</td>
</tr>
))}
</tbody>
</table>
)}
@ -63,7 +58,7 @@ class InviteList extends React.PureComponent {
<div className="card__content">
<div className="help">
{__(
"The maximum number of invite rewards is currently limited. Invite reward can only be claimed if the invitee passes the humanness test."
'The maximum number of invite rewards is currently limited. Invite reward can only be claimed if the invitee passes the humanness test.'
)}
</div>
</div>

14
src/renderer/component/inviteNew/index.js
View file

@ -1,15 +1,15 @@
import React from "react";
import { connect } from "react-redux";
import InviteNew from "./view";
import React from 'react';
import { connect } from 'react-redux';
import InviteNew from './view';
import {
selectUserInvitesRemaining,
selectUserInviteNewIsPending,
selectUserInviteNewErrorMessage,
} from "redux/selectors/user";
import rewards from "rewards";
import { makeSelectRewardAmountByType } from "redux/selectors/rewards";
} from 'redux/selectors/user';
import rewards from 'rewards';
import { makeSelectRewardAmountByType } from 'redux/selectors/rewards';
import { doUserInviteNew } from "redux/actions/user";
import { doUserInviteNew } from 'redux/actions/user';
const select = state => {
const selectReward = makeSelectRewardAmountByType();

24
src/renderer/component/inviteNew/view.jsx
View file

@ -1,13 +1,13 @@
import React from "react";
import { BusyMessage, CreditAmount } from "component/common";
import { Form, FormRow, Submit } from "component/form.js";
import React from 'react';
import { BusyMessage, CreditAmount } from 'component/common';
import { Form, FormRow, Submit } from 'component/form.js';
class FormInviteNew extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
email: "",
email: '',
};
}
@ -39,7 +39,7 @@ class FormInviteNew extends React.PureComponent {
}}
/>
<div className="form-row-submit">
<Submit label={__("Send Invite")} disabled={isPending} />
<Submit label={__('Send Invite')} disabled={isPending} />
</div>
</Form>
);
@ -61,7 +61,7 @@ class InviteNew extends React.PureComponent {
<section className="card">
<div className="card__title-primary">
<CreditAmount amount={rewardAmount} />
<h3>{__("Invite a Friend")}</h3>
<h3>{__('Invite a Friend')}</h3>
</div>
{/*
<div className="card__content">
@ -71,16 +71,8 @@ class InviteNew extends React.PureComponent {
<p className="empty">{__("You have no invites.")}</p>}
</div> */}
<div className="card__content">
<p>
{__(
"Or an enemy. Or your cousin Jerry, who you're kind of unsure about."
)}
</p>
<FormInviteNew
errorMessage={errorMessage}
inviteNew={inviteNew}
isPending={isPending}
/>
<p>{__("Or an enemy. Or your cousin Jerry, who you're kind of unsure about.")}</p>
<FormInviteNew errorMessage={errorMessage} inviteNew={inviteNew} isPending={isPending} />
</div>
</section>
);

8
src/renderer/component/link/index.js
View file

@ -1,7 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import { doNavigate } from "redux/actions/navigation";
import Link from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { doNavigate } from 'redux/actions/navigation';
import Link from './view';
const perform = dispatch => ({
doNavigate: (path, params) => dispatch(doNavigate(path, params)),

22
src/renderer/component/link/view.jsx
View file

@ -1,5 +1,5 @@
import React from "react";
import Icon from "component/icon";
import React from 'react';
import Icon from 'component/icon';
const Link = props => {
const {
@ -19,10 +19,10 @@ const Link = props => {
} = props;
const combinedClassName =
(className || "") +
(!className && !button ? "button-text" : "") + // Non-button links get the same look as text buttons
(button ? " button-block button-" + button + " button-set-item" : "") +
(disabled ? " disabled" : "");
(className || '') +
(!className && !button ? 'button-text' : '') + // Non-button links get the same look as text buttons
(button ? ` button-block button-${button} button-set-item` : '') +
(disabled ? ' disabled' : '');
const onClick =
!props.onClick && navigate
@ -36,10 +36,10 @@ const Link = props => {
content = children;
} else {
content = (
<span {...("button" in props ? { className: "button__content" } : {})}>
{icon ? <Icon icon={icon} fixed={true} /> : null}
<span {...('button' in props ? { className: 'button__content' } : {})}>
{icon ? <Icon icon={icon} fixed /> : null}
{label ? <span className="link-label">{label}</span> : null}
{iconRight ? <Icon icon={iconRight} fixed={true} /> : null}
{iconRight ? <Icon icon={iconRight} fixed /> : null}
</span>
);
}
@ -47,10 +47,10 @@ const Link = props => {
return (
<a
className={combinedClassName}
href={href || "javascript:;"}
href={href || 'javascript:;'}
title={title}
onClick={onClick}
{...("style" in props ? { style: style } : {})}
{...('style' in props ? { style } : {})}
>
{content}
</a>

6
src/renderer/component/linkTransaction/index.js
View file

@ -1,5 +1,5 @@
import React from "react";
import { connect } from "react-redux";
import LinkTransaction from "./view";
import React from 'react';
import { connect } from 'react-redux';
import LinkTransaction from './view';
export default connect(null, null)(LinkTransaction);

6
src/renderer/component/linkTransaction/view.jsx
View file

@ -1,11 +1,11 @@
import React from "react";
import Link from "component/link";
import React from 'react';
import Link from 'component/link';
const LinkTransaction = props => {
const { id } = props;
const linkProps = Object.assign({}, props);
linkProps.href = "https://explorer.lbry.io/#!/transaction/" + id;
linkProps.href = `https://explorer.lbry.io/#!/transaction/${id}`;
linkProps.label = id.substr(0, 7);
return <Link {...linkProps} />;

14
src/renderer/component/load_screen.js
View file

@ -1,8 +1,8 @@
import React from "react";
import PropTypes from "prop-types";
import lbry from "../lbry.js";
import { BusyMessage, Icon } from "./common.js";
import Link from "component/link";
import React from 'react';
import PropTypes from 'prop-types';
import lbry from '../lbry.js';
import { BusyMessage, Icon } from './common.js';
import Link from 'component/link';
class LoadScreen extends React.PureComponent {
static propTypes = {
@ -26,7 +26,7 @@ class LoadScreen extends React.PureComponent {
};
render() {
const imgSrc = lbry.imagePath("lbry-white-485x160.png");
const imgSrc = lbry.imagePath('lbry-white-485x160.png');
return (
<div className="load-screen">
<img src={imgSrc} alt="LBRY" />
@ -43,7 +43,7 @@ class LoadScreen extends React.PureComponent {
</h3>
<span
className={`load-screen__details ${
this.props.isWarning ? "load-screen__details--warning" : ""
this.props.isWarning ? 'load-screen__details--warning' : ''
}`}
>
{this.props.details}

27
src/renderer/component/menu.js
View file

@ -1,7 +1,7 @@
import React from "react";
import PropTypes from "prop-types";
import { Icon } from "./common.js";
import Link from "component/link";
import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from './common.js';
import Link from 'component/link';
export class DropDownMenuItem extends React.PureComponent {
static propTypes = {
@ -12,7 +12,7 @@ export class DropDownMenuItem extends React.PureComponent {
};
static defaultProps = {
iconPosition: "left",
iconPosition: 'left',
};
render() {
@ -22,12 +22,12 @@ export class DropDownMenuItem extends React.PureComponent {
<a
className="menu__menu-item"
onClick={this.props.onClick}
href={this.props.href || "javascript:"}
href={this.props.href || 'javascript:'}
label={this.props.label}
>
{this.props.iconPosition == "left" ? icon : null}
{this.props.iconPosition == 'left' ? icon : null}
{this.props.label}
{this.props.iconPosition == "left" ? null : icon}
{this.props.iconPosition == 'left' ? null : icon}
</a>
);
}
@ -47,7 +47,7 @@ export class DropDownMenu extends React.PureComponent {
componentWillUnmount() {
if (this._isWindowClickBound) {
window.removeEventListener("click", this.handleWindowClick, false);
window.removeEventListener('click', this.handleWindowClick, false);
}
}
@ -57,7 +57,7 @@ export class DropDownMenu extends React.PureComponent {
});
if (!this.state.menuOpen && !this._isWindowClickBound) {
this._isWindowClickBound = true;
window.addEventListener("click", this.handleWindowClick, false);
window.addEventListener('click', this.handleWindowClick, false);
e.stopPropagation();
}
return false;
@ -72,10 +72,7 @@ export class DropDownMenu extends React.PureComponent {
/* this will force "this" to always be the class, even when passed to an event listener */
handleWindowClick = e => {
if (
this.state.menuOpen &&
(!this._menuDiv || !this._menuDiv.contains(e.target))
) {
if (this.state.menuOpen && (!this._menuDiv || !this._menuDiv.contains(e.target))) {
this.setState({
menuOpen: false,
});
@ -85,7 +82,7 @@ export class DropDownMenu extends React.PureComponent {
render() {
if (!this.state.menuOpen && this._isWindowClickBound) {
this._isWindowClickBound = false;
window.removeEventListener("click", this.handleWindowClick, false);
window.removeEventListener('click', this.handleWindowClick, false);
}
return (
<div className="menu-container">

10
src/renderer/component/nsfwOverlay/index.js
View file

@ -1,10 +1,10 @@
import React from "react";
import { connect } from "react-redux";
import { doNavigate } from "redux/actions/navigation";
import NsfwOverlay from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { doNavigate } from 'redux/actions/navigation';
import NsfwOverlay from './view';
const perform = dispatch => ({
navigateSettings: () => dispatch(doNavigate("/settings")),
navigateSettings: () => dispatch(doNavigate('/settings')),
});
export default connect(null, perform)(NsfwOverlay);

32
src/renderer/component/nsfwOverlay/view.jsx
View file

@ -1,21 +1,17 @@
import React from "react";
import Link from "component/link";
import React from 'react';
import Link from 'component/link';
const NsfwOverlay = props => {
return (
<div className="card-overlay">
<p>
{__(
"This content is Not Safe For Work. To view adult content, please change your"
)}{" "}
<Link
className="button-text"
onClick={() => props.navigateSettings()}
label={__("Settings")}
/>.
</p>
</div>
);
};
const NsfwOverlay = props => (
<div className="card-overlay">
<p>
{__('This content is Not Safe For Work. To view adult content, please change your')}{' '}
<Link
className="button-text"
onClick={() => props.navigateSettings()}
label={__('Settings')}
/>.
</p>
</div>
);
export default NsfwOverlay;

8
src/renderer/component/publishForm/index.js
View file

@ -1,7 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import PublishForm from "./view";
import { selectBalance } from "redux/selectors/wallet";
import React from 'react';
import { connect } from 'react-redux';
import PublishForm from './view';
import { selectBalance } from 'redux/selectors/wallet';
const select = state => ({
balance: selectBalance(state),

60
src/renderer/component/publishForm/internal/channelSection.jsx
View file

@ -1,15 +1,15 @@
import React from "react";
import lbryuri from "lbryuri";
import { FormRow } from "component/form.js";
import { BusyMessage } from "component/common";
import Link from "component/link";
import React from 'react';
import lbryuri from 'lbryuri';
import { FormRow } from 'component/form.js';
import { BusyMessage } from 'component/common';
import Link from 'component/link';
class ChannelSection extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
newChannelName: "@",
newChannelName: '@',
newChannelBid: 10,
addingChannel: false,
};
@ -17,7 +17,7 @@ class ChannelSection extends React.PureComponent {
handleChannelChange(event) {
const channel = event.target.value;
if (channel === "new") this.setState({ addingChannel: true });
if (channel === 'new') this.setState({ addingChannel: true });
else {
this.setState({ addingChannel: false });
this.props.handleChannelChange(event.target.value);
@ -25,21 +25,17 @@ class ChannelSection extends React.PureComponent {
}
handleNewChannelNameChange(event) {
const newChannelName = event.target.value.startsWith("@")
const newChannelName = event.target.value.startsWith('@')
? event.target.value
: "@" + event.target.value;
: `@${event.target.value}`;
if (
newChannelName.length > 1 &&
!lbryuri.isValidName(newChannelName.substr(1), false)
) {
if (newChannelName.length > 1 && !lbryuri.isValidName(newChannelName.substr(1), false)) {
this.refs.newChannelName.showError(
__("LBRY channel names must contain only letters, numbers and dashes.")
__('LBRY channel names must contain only letters, numbers and dashes.')
);
return;
} else {
this.refs.newChannelName.clearError();
}
this.refs.newChannelName.clearError();
this.setState({
newChannelName,
@ -57,9 +53,7 @@ class ChannelSection extends React.PureComponent {
const { newChannelBid } = this.state;
if (newChannelBid > balance) {
this.refs.newChannelName.showError(
__("Unable to create channel due to insufficient funds.")
);
this.refs.newChannelName.showError(__('Unable to create channel due to insufficient funds.'));
return;
}
@ -85,19 +79,17 @@ class ChannelSection extends React.PureComponent {
this.setState({
creatingChannel: false,
});
this.refs.newChannelName.showError(
__("Unable to create channel due to an internal error.")
);
this.refs.newChannelName.showError(__('Unable to create channel due to an internal error.'));
};
this.props.createChannel(newChannelName, amount).then(success, failure);
}
render() {
const lbcInputHelp = __(
"This LBC remains yours. It is a deposit to reserve the name and can be undone at any time."
'This LBC remains yours. It is a deposit to reserve the name and can be undone at any time.'
);
const channel = this.state.addingChannel ? "new" : this.props.channel;
const channel = this.state.addingChannel ? 'new' : this.props.channel;
const { fetchingChannels, channels = [] } = this.props;
const channelSelector = (
@ -109,7 +101,7 @@ class ChannelSection extends React.PureComponent {
value={channel}
>
<option key="anonymous" value="anonymous">
{__("Anonymous")}
{__('Anonymous')}
</option>
{channels.map(({ name }) => (
<option key={name} value={name}>
@ -117,7 +109,7 @@ class ChannelSection extends React.PureComponent {
</option>
))}
<option key="new" value="new">
{__("New channel...")}
{__('New channel...')}
</option>
</FormRow>
);
@ -125,12 +117,10 @@ class ChannelSection extends React.PureComponent {
return (
<section className="card">
<div className="card__title-primary">
<h4>{__("Channel Name")}</h4>
<h4>{__('Channel Name')}</h4>
<div className="card__subtitle">
{__(
"This is a username or handle that your content can be found under."
)}{" "}
{__("Ex. @Marvel, @TheBeatles, @BooksByJoe")}
{__('This is a username or handle that your content can be found under.')}{' '}
{__('Ex. @Marvel, @TheBeatles, @BooksByJoe')}
</div>
</div>
<div className="card__content">
@ -143,13 +133,13 @@ class ChannelSection extends React.PureComponent {
{this.state.addingChannel && (
<div className="card__content">
<FormRow
label={__("Name")}
label={__('Name')}
type="text"
onChange={this.handleNewChannelNameChange.bind(this)}
value={this.state.newChannelName}
/>
<FormRow
label={__("Deposit")}
label={__('Deposit')}
postfix="LBC"
step="any"
min="0"
@ -163,9 +153,7 @@ class ChannelSection extends React.PureComponent {
<Link
button="primary"
label={
!this.state.creatingChannel
? __("Create channel")
: __("Creating channel...")
!this.state.creatingChannel ? __('Create channel') : __('Creating channel...')
}
onClick={this.handleCreateChannelClick.bind(this)}
disabled={this.state.creatingChannel}

377
src/renderer/component/publishForm/view.jsx
View file

@ -1,44 +1,44 @@
import React from "react";
import lbry from "lbry";
import lbryuri from "lbryuri";
import FormField from "component/formField";
import { Form, FormRow, Submit } from "component/form.js";
import Link from "component/link";
import FormFieldPrice from "component/formFieldPrice";
import Modal from "modal/modal";
import { BusyMessage } from "component/common";
import ChannelSection from "./internal/channelSection";
import React from 'react';
import lbry from 'lbry';
import lbryuri from 'lbryuri';
import FormField from 'component/formField';
import { Form, FormRow, Submit } from 'component/form.js';
import Link from 'component/link';
import FormFieldPrice from 'component/formFieldPrice';
import Modal from 'modal/modal';
import { BusyMessage } from 'component/common';
import ChannelSection from './internal/channelSection';
class PublishForm extends React.PureComponent {
constructor(props) {
super(props);
this._requiredFields = ["name", "bid", "meta_title", "tosAgree"];
this._requiredFields = ['name', 'bid', 'meta_title', 'tosAgree'];
this._defaultCopyrightNotice = "All rights reserved.";
this._defaultCopyrightNotice = 'All rights reserved.';
this._defaultPaidPrice = 0.01;
this.state = {
id: null,
uri: null,
rawName: "",
name: "",
rawName: '',
name: '',
bid: 10,
hasFile: false,
feeAmount: "",
feeCurrency: "LBC",
channel: "anonymous",
newChannelName: "@",
feeAmount: '',
feeCurrency: 'LBC',
channel: 'anonymous',
newChannelName: '@',
newChannelBid: 10,
meta_title: "",
meta_thumbnail: "",
meta_description: "",
meta_language: "en",
meta_nsfw: "0",
licenseType: "",
meta_title: '',
meta_thumbnail: '',
meta_description: '',
meta_language: 'en',
meta_nsfw: '0',
licenseType: '',
copyrightNotice: this._defaultCopyrightNotice,
otherLicenseDescription: "",
otherLicenseUrl: "",
otherLicenseDescription: '',
otherLicenseUrl: '',
tosAgree: false,
prefillDone: false,
uploadProgress: 0.0,
@ -50,7 +50,7 @@ class PublishForm extends React.PureComponent {
isFee: false,
customUrl: false,
source: null,
mode: "publish",
mode: 'publish',
};
}
@ -65,7 +65,7 @@ class PublishForm extends React.PureComponent {
const { bid } = this.state;
if (bid > balance) {
this.handlePublishError({ message: "insufficient funds" });
this.handlePublishError({ message: 'insufficient funds' });
return;
}
@ -74,16 +74,16 @@ class PublishForm extends React.PureComponent {
submitting: true,
});
let checkFields = this._requiredFields;
const checkFields = this._requiredFields;
if (!this.myClaimExists()) {
checkFields.unshift("file");
checkFields.unshift('file');
}
let missingFieldFound = false;
for (let fieldName of checkFields) {
for (const fieldName of checkFields) {
const field = this.refs[fieldName];
if (field) {
if (field.getValue() === "" || field.getValue() === false) {
if (field.getValue() === '' || field.getValue() === false) {
field.showRequiredError();
if (!missingFieldFound) {
field.focus();
@ -102,10 +102,10 @@ class PublishForm extends React.PureComponent {
return;
}
let metadata = {};
const metadata = {};
for (let metaField of ["title", "description", "thumbnail", "language"]) {
const value = this.state["meta_" + metaField];
for (const metaField of ['title', 'description', 'thumbnail', 'language']) {
const value = this.state[`meta_${metaField}`];
if (value) {
metadata[metaField] = value;
}
@ -115,19 +115,19 @@ class PublishForm extends React.PureComponent {
metadata.licenseUrl = this.getLicenseUrl();
metadata.nsfw = !!parseInt(this.state.meta_nsfw);
var doPublish = () => {
var publishArgs = {
const doPublish = () => {
const publishArgs = {
name: this.state.name,
bid: parseFloat(this.state.bid),
metadata: metadata,
...(this.state.channel != "new" && this.state.channel != "anonymous"
metadata,
...(this.state.channel != 'new' && this.state.channel != 'anonymous'
? { channel_name: this.state.channel }
: {}),
};
const { source } = this.state;
if (this.refs.file.getValue() !== "") {
if (this.refs.file.getValue() !== '') {
publishArgs.file_path = this.refs.file.getValue();
} else if (source) {
publishArgs.sources = source;
@ -145,7 +145,7 @@ class PublishForm extends React.PureComponent {
metadata.fee = {
currency: this.state.feeCurrency,
amount: parseFloat(this.state.feeAmount),
address: address,
address,
};
doPublish();
@ -157,18 +157,18 @@ class PublishForm extends React.PureComponent {
handlePublishStarted() {
this.setState({
modal: "publishStarted",
modal: 'publishStarted',
});
}
handlePublishStartedConfirmed() {
this.props.navigate("/published");
this.props.navigate('/published');
}
handlePublishError(error) {
this.setState({
submitting: false,
modal: "error",
modal: 'error',
errorMessage: error.message,
});
}
@ -220,13 +220,11 @@ class PublishForm extends React.PureComponent {
myClaimInfo() {
const { id } = this.state;
return Object.values(this.props.myClaims).find(
claim => claim.claim_id === id
);
return Object.values(this.props.myClaims).find(claim => claim.claim_id === id);
}
handleNameChange(event) {
var rawName = event.target.value;
const rawName = event.target.value;
this.setState({
customUrl: Boolean(rawName.length),
});
@ -237,33 +235,31 @@ class PublishForm extends React.PureComponent {
nameChanged(rawName) {
if (!rawName) {
this.setState({
rawName: "",
name: "",
uri: "",
rawName: '',
name: '',
uri: '',
prefillDone: false,
mode: "publish",
mode: 'publish',
});
return;
}
if (!lbryuri.isValidName(rawName, false)) {
this.refs.name.showError(
__("LBRY names must contain only letters, numbers and dashes.")
);
this.refs.name.showError(__('LBRY names must contain only letters, numbers and dashes.'));
return;
}
let channel = "";
if (this.state.channel !== "anonymous") channel = this.state.channel;
let channel = '';
if (this.state.channel !== 'anonymous') channel = this.state.channel;
const name = rawName.toLowerCase();
const uri = lbryuri.build({ contentName: name, channelName: channel });
this.setState({
rawName: rawName,
name: name,
rawName,
name,
prefillDone: false,
mode: "publish",
mode: 'publish',
uri,
});
@ -282,26 +278,18 @@ class PublishForm extends React.PureComponent {
const { claim_id, name, channel_name, amount } = claimInfo;
const { source, metadata } = claimInfo.value.stream;
const {
license,
licenseUrl,
title,
thumbnail,
description,
language,
nsfw,
} = metadata;
const { license, licenseUrl, title, thumbnail, description, language, nsfw } = metadata;
let newState = {
const newState = {
id: claim_id,
channel: channel_name || "anonymous",
channel: channel_name || 'anonymous',
bid: amount,
meta_title: title,
meta_thumbnail: thumbnail,
meta_description: description,
meta_language: language,
meta_nsfw: nsfw,
mode: "edit",
mode: 'edit',
prefillDone: true,
rawName: name,
name,
@ -309,21 +297,18 @@ class PublishForm extends React.PureComponent {
};
if (license == this._defaultCopyrightNotice) {
newState.licenseType = "copyright";
newState.licenseType = 'copyright';
newState.copyrightNotice = this._defaultCopyrightNotice;
} else {
// If the license URL or description matches one of the drop-down options, use that
let licenseType = "other"; // Will be overridden if we find a match
for (let option of this._meta_license.getOptions()) {
if (
option.getAttribute("data-url") === licenseUrl ||
option.text === license
) {
let licenseType = 'other'; // Will be overridden if we find a match
for (const option of this._meta_license.getOptions()) {
if (option.getAttribute('data-url') === licenseUrl || option.text === license) {
licenseType = option.value;
}
}
if (licenseType == "other") {
if (licenseType == 'other') {
newState.otherLicenseDescription = license;
newState.otherLicenseUrl = licenseUrl;
}
@ -349,10 +334,7 @@ class PublishForm extends React.PureComponent {
handleFeePrefChange(feeEnabled) {
this.setState({
isFee: feeEnabled,
feeAmount:
this.state.feeAmount == ""
? this._defaultPaidPrice
: this.state.feeAmount,
feeAmount: this.state.feeAmount == '' ? this._defaultPaidPrice : this.state.feeAmount,
});
}
@ -363,7 +345,7 @@ class PublishForm extends React.PureComponent {
* more complex logic and the final value is determined at submit time.
*/
this.setState({
["meta_" + event.target.name]: event.target.value,
[`meta_${event.target.name}`]: event.target.value,
});
}
@ -399,7 +381,7 @@ class PublishForm extends React.PureComponent {
handleChannelChange(channelName) {
this.setState({
mode: "publish",
mode: 'publish',
channel: channelName,
});
const nameChanged = () => this.nameChanged(this.state.rawName);
@ -414,9 +396,9 @@ class PublishForm extends React.PureComponent {
getLicense() {
switch (this.state.licenseType) {
case "copyright":
case 'copyright':
return this.state.copyrightNotice;
case "other":
case 'other':
return this.state.otherLicenseDescription;
default:
return this._meta_license.getSelectedElement().text;
@ -425,12 +407,12 @@ class PublishForm extends React.PureComponent {
getLicenseUrl() {
switch (this.state.licenseType) {
case "copyright":
return "";
case "other":
case 'copyright':
return '';
case 'other':
return this.state.otherLicenseUrl;
default:
return this._meta_license.getSelectedElement().getAttribute("data-url");
return this._meta_license.getSelectedElement().getAttribute('data-url');
}
}
@ -450,8 +432,8 @@ class PublishForm extends React.PureComponent {
const { mode } = this.state;
if (this.refs.file.getValue()) {
this.setState({ hasFile: true });
if (!this.state.customUrl && mode !== "edit") {
let fileName = this._getFileName(this.refs.file.getValue());
if (!this.state.customUrl && mode !== 'edit') {
const fileName = this._getFileName(this.refs.file.getValue());
this.nameChanged(fileName);
}
} else {
@ -460,11 +442,11 @@ class PublishForm extends React.PureComponent {
}
_getFileName(fileName) {
const path = require("path");
const path = require('path');
const extension = path.extname(fileName);
fileName = path.basename(fileName, extension);
fileName = fileName.replace(lbryuri.REGEXP_INVALID_URI, "");
fileName = fileName.replace(lbryuri.REGEXP_INVALID_URI, '');
return fileName;
}
@ -474,23 +456,20 @@ class PublishForm extends React.PureComponent {
const claim = this.claim();
if (prefillDone) {
return __("Existing claim data was prefilled");
return __('Existing claim data was prefilled');
}
if (uri && resolvingUris.indexOf(uri) !== -1 && claim === undefined) {
return __("Checking...");
return __('Checking...');
} else if (!name) {
return __("Select a URL for this publish.");
return __('Select a URL for this publish.');
} else if (!claim) {
return __("This URL is unused.");
return __('This URL is unused.');
} else if (this.myClaimExists() && !prefillDone) {
return (
<span>
{__("You already have a claim with this name.")}{" "}
<Link
label={__("Edit existing claim")}
onClick={() => this.handleEditClaim()}
/>
{__('You already have a claim with this name.')}{' '}
<Link label={__('Edit existing claim')} onClick={() => this.handleEditClaim()} />
</span>
);
} else if (claim) {
@ -504,20 +483,18 @@ class PublishForm extends React.PureComponent {
)}
</span>
);
} else {
return (
<span>
{__(
'A deposit of at least "%s" credits is required to win "%s". However, you can still get a permanent URL for any amount.',
topClaimValue,
name
)}
</span>
);
}
} else {
return "";
return (
<span>
{__(
'A deposit of at least "%s" credits is required to win "%s". However, you can still get a permanent URL for any amount.',
topClaimValue,
name
)}
</span>
);
}
return '';
}
closeModal() {
@ -529,14 +506,12 @@ class PublishForm extends React.PureComponent {
render() {
const { mode, submitting } = this.state;
const lbcInputHelp = __(
"This LBC remains yours and the deposit can be undone at any time."
);
const lbcInputHelp = __('This LBC remains yours and the deposit can be undone at any time.');
let submitLabel = !submitting ? __("Publish") : __("Publishing...");
let submitLabel = !submitting ? __('Publish') : __('Publishing...');
if (mode === "edit") {
submitLabel = !submitting ? __("Update") : __("Updating...");
if (mode === 'edit') {
submitLabel = !submitting ? __('Update') : __('Updating...');
}
return (
@ -544,10 +519,8 @@ class PublishForm extends React.PureComponent {
<Form onSubmit={this.handleSubmit.bind(this)}>
<section className="card">
<div className="card__title-primary">
<h4>{__("Content")}</h4>
<div className="card__subtitle">
{__("What are you publishing?")}
</div>
<h4>{__('Content')}</h4>
<div className="card__subtitle">{__('What are you publishing?')}</div>
</div>
<div className="card__content">
<FormRow
@ -571,7 +544,7 @@ class PublishForm extends React.PureComponent {
<div className="card__content">
<FormRow
ref="meta_title"
label={__("Title")}
label={__('Title')}
type="text"
name="title"
value={this.state.meta_title}
@ -584,7 +557,7 @@ class PublishForm extends React.PureComponent {
<div className="card__content">
<FormRow
type="text"
label={__("Thumbnail URL")}
label={__('Thumbnail URL')}
name="thumbnail"
value={this.state.meta_thumbnail}
placeholder="http://spee.ch/mylogo"
@ -596,11 +569,11 @@ class PublishForm extends React.PureComponent {
<div className="card__content">
<FormRow
type="SimpleMDE"
label={__("Description")}
label={__('Description')}
ref="meta_description"
name="description"
value={this.state.meta_description}
placeholder={__("Description of your content")}
placeholder={__('Description of your content')}
onChange={text => {
this.handleDescriptionChanged(text);
}}
@ -608,7 +581,7 @@ class PublishForm extends React.PureComponent {
</div>
<div className="card__content">
<FormRow
label={__("Language")}
label={__('Language')}
type="select"
value={this.state.meta_language}
name="language"
@ -616,19 +589,19 @@ class PublishForm extends React.PureComponent {
this.handleMetadataChange(event);
}}
>
<option value="en">{__("English")}</option>
<option value="zh">{__("Chinese")}</option>
<option value="fr">{__("French")}</option>
<option value="de">{__("German")}</option>
<option value="jp">{__("Japanese")}</option>
<option value="ru">{__("Russian")}</option>
<option value="es">{__("Spanish")}</option>
<option value="en">{__('English')}</option>
<option value="zh">{__('Chinese')}</option>
<option value="fr">{__('French')}</option>
<option value="de">{__('German')}</option>
<option value="jp">{__('Japanese')}</option>
<option value="ru">{__('Russian')}</option>
<option value="es">{__('Spanish')}</option>
</FormRow>
</div>
<div className="card__content">
<FormRow
type="select"
label={__("Maturity")}
label={__('Maturity')}
value={this.state.meta_nsfw}
name="nsfw"
onChange={event => {
@ -636,8 +609,8 @@ class PublishForm extends React.PureComponent {
}}
>
{/* <option value=""></option> */}
<option value="0">{__("All Ages")}</option>
<option value="1">{__("Adults Only")}</option>
<option value="0">{__('All Ages')}</option>
<option value="1">{__('Adults Only')}</option>
</FormRow>
</div>
</div>
@ -646,14 +619,12 @@ class PublishForm extends React.PureComponent {
<section className="card">
<div className="card__title-primary">
<h4>{__("Price")}</h4>
<div className="card__subtitle">
{__("How much does this content cost?")}
</div>
<h4>{__('Price')}</h4>
<div className="card__subtitle">{__('How much does this content cost?')}</div>
</div>
<div className="card__content">
<FormRow
label={__("Free")}
label={__('Free')}
type="radio"
name="isFree"
onChange={() => this.handleFeePrefChange(false)}
@ -662,27 +633,26 @@ class PublishForm extends React.PureComponent {
<FormField
type="radio"
name="isFree"
label={!this.state.isFee ? __("Choose price...") : __("Price ")}
label={!this.state.isFee ? __('Choose price...') : __('Price ')}
onChange={() => {
this.handleFeePrefChange(true);
}}
checked={this.state.isFee}
/>
<span className={!this.state.isFee ? "hidden" : ""}>
<span className={!this.state.isFee ? 'hidden' : ''}>
<FormFieldPrice
min="0"
defaultValue={{
amount: this._defaultPaidPrice,
currency: "LBC",
currency: 'LBC',
}}
onChange={val => this.handleFeeChange(val)}
/>
</span>
{this.state.isFee &&
this.state.feeCurrency.toUpperCase() != "LBC" ? (
{this.state.isFee && this.state.feeCurrency.toUpperCase() != 'LBC' ? (
<div className="form-field__helper">
{__(
"All content fees are charged in LBC. For non-LBC payment methods, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase."
'All content fees are charged in LBC. For non-LBC payment methods, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase.'
)}
</div>
) : null}
@ -690,7 +660,7 @@ class PublishForm extends React.PureComponent {
</section>
<section className="card">
<div className="card__title-primary">
<h4>{__("License")}</h4>
<h4>{__('License')}</h4>
</div>
<div className="card__content">
<FormRow
@ -703,61 +673,51 @@ class PublishForm extends React.PureComponent {
this.handleLicenseTypeChange(event);
}}
>
<option>{__("None")}</option>
<option value="publicDomain">{__("Public Domain")}</option>
<option>{__('None')}</option>
<option value="publicDomain">{__('Public Domain')}</option>
<option
value="cc-by"
data-url="https://creativecommons.org/licenses/by/4.0/legalcode"
>
{__("Creative Commons Attribution 4.0 International")}
{__('Creative Commons Attribution 4.0 International')}
</option>
<option
value="cc-by-sa"
data-url="https://creativecommons.org/licenses/by-sa/4.0/legalcode"
>
{__(
"Creative Commons Attribution-ShareAlike 4.0 International"
)}
{__('Creative Commons Attribution-ShareAlike 4.0 International')}
</option>
<option
value="cc-by-nd"
data-url="https://creativecommons.org/licenses/by-nd/4.0/legalcode"
>
{__(
"Creative Commons Attribution-NoDerivatives 4.0 International"
)}
{__('Creative Commons Attribution-NoDerivatives 4.0 International')}
</option>
<option
value="cc-by-nc"
data-url="https://creativecommons.org/licenses/by-nc/4.0/legalcode"
>
{__(
"Creative Commons Attribution-NonCommercial 4.0 International"
)}
{__('Creative Commons Attribution-NonCommercial 4.0 International')}
</option>
<option
value="cc-by-nc-sa"
data-url="https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode"
>
{__(
"Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International"
)}
{__('Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International')}
</option>
<option
value="cc-by-nc-nd"
data-url="https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode"
>
{__(
"Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International"
)}
{__('Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International')}
</option>
<option value="copyright">{__("Copyrighted...")}</option>
<option value="other">{__("Other...")}</option>
<option value="copyright">{__('Copyrighted...')}</option>
<option value="other">{__('Other...')}</option>
</FormRow>
{this.state.licenseType == "copyright" ? (
{this.state.licenseType == 'copyright' ? (
<FormRow
label={__("Copyright notice")}
label={__('Copyright notice')}
type="text"
name="copyright-notice"
value={this.state.copyrightNotice}
@ -767,9 +727,9 @@ class PublishForm extends React.PureComponent {
/>
) : null}
{this.state.licenseType == "other" ? (
{this.state.licenseType == 'other' ? (
<FormRow
label={__("License description")}
label={__('License description')}
type="text"
name="other-license-description"
value={this.state.otherLicenseDescription}
@ -779,9 +739,9 @@ class PublishForm extends React.PureComponent {
/>
) : null}
{this.state.licenseType == "other" ? (
{this.state.licenseType == 'other' ? (
<FormRow
label={__("License URL")}
label={__('License URL')}
type="text"
name="other-license-url"
value={this.state.otherLicenseUrl}
@ -801,23 +761,18 @@ class PublishForm extends React.PureComponent {
<section className="card">
<div className="card__title-primary">
<h4>{__("Content URL")}</h4>
<h4>{__('Content URL')}</h4>
<div className="card__subtitle">
{__(
"This is the exact address where people find your content (ex. lbry://myvideo)."
)}{" "}
<Link
label={__("Learn more")}
href="https://lbry.io/faq/naming"
/>.
'This is the exact address where people find your content (ex. lbry://myvideo).'
)}{' '}
<Link label={__('Learn more')} href="https://lbry.io/faq/naming" />.
</div>
</div>
<div className="card__content">
<FormRow
prefix={`lbry://${
this.state.channel === "anonymous"
? ""
: `${this.state.channel}/`
this.state.channel === 'anonymous' ? '' : `${this.state.channel}/`
}`}
type="text"
ref="name"
@ -835,7 +790,7 @@ class PublishForm extends React.PureComponent {
ref="bid"
type="number"
step="any"
label={__("Deposit")}
label={__('Deposit')}
postfix="LBC"
onChange={event => {
this.handleBidChange(event);
@ -847,23 +802,23 @@ class PublishForm extends React.PureComponent {
/>
</div>
) : (
""
''
)}
</section>
<section className="card">
<div className="card__title-primary">
<h4>{__("Terms of Service")}</h4>
<h4>{__('Terms of Service')}</h4>
</div>
<div className="card__content">
<FormRow
ref="tosAgree"
label={
<span>
{__("I agree to the")}{" "}
{__('I agree to the')}{' '}
<Link
href="https://www.lbry.io/termsofservice"
label={__("LBRY terms of service")}
label={__('LBRY terms of service')}
/>
</span>
}
@ -878,36 +833,27 @@ class PublishForm extends React.PureComponent {
<div className="card-series-submit">
<Submit
label={
!this.state.submitting ? __("Publish") : __("Publishing...")
}
label={!this.state.submitting ? __('Publish') : __('Publishing...')}
disabled={
this.props.balance <= 0 ||
this.state.submitting ||
(this.state.uri &&
this.props.resolvingUris.indexOf(this.state.uri) !== -1) ||
(this.claim() &&
!this.topClaimIsMine() &&
this.state.bid <= this.topClaimValue())
(this.state.uri && this.props.resolvingUris.indexOf(this.state.uri) !== -1) ||
(this.claim() && !this.topClaimIsMine() && this.state.bid <= this.topClaimValue())
}
/>
<Link
button="cancel"
onClick={this.props.back}
label={__("Cancel")}
/>
<Link button="cancel" onClick={this.props.back} label={__('Cancel')} />
</div>
</Form>
<Modal
isOpen={this.state.modal == "publishStarted"}
contentLabel={__("File published")}
isOpen={this.state.modal == 'publishStarted'}
contentLabel={__('File published')}
onConfirmed={event => {
this.handlePublishStartedConfirmed(event);
}}
>
<p>
{__("Your file has been published to LBRY at the address")}{" "}
{__('Your file has been published to LBRY at the address')}{' '}
<code>{this.state.uri}</code>!
</p>
<p>
@ -917,15 +863,14 @@ class PublishForm extends React.PureComponent {
</p>
</Modal>
<Modal
isOpen={this.state.modal == "error"}
contentLabel={__("Error publishing file")}
isOpen={this.state.modal == 'error'}
contentLabel={__('Error publishing file')}
onConfirmed={event => {
this.closeModal(event);
}}
>
{__(
"The following error occurred when attempting to publish your file"
)}: {this.state.errorMessage}
{__('The following error occurred when attempting to publish your file')}:{' '}
{this.state.errorMessage}
</Modal>
</main>
);

15
src/renderer/component/rewardLink/index.js
View file

@ -1,16 +1,13 @@
import React from "react";
import { connect } from "react-redux";
import React from 'react';
import { connect } from 'react-redux';
import {
makeSelectClaimRewardError,
makeSelectRewardByType,
makeSelectIsRewardClaimPending,
} from "redux/selectors/rewards";
import { doNavigate } from "redux/actions/navigation";
import {
doClaimRewardType,
doClaimRewardClearError,
} from "redux/actions/rewards";
import RewardLink from "./view";
} from 'redux/selectors/rewards';
import { doNavigate } from 'redux/actions/navigation';
import { doClaimRewardType, doClaimRewardClearError } from 'redux/actions/rewards';
import RewardLink from './view';
const makeSelect = () => {
const selectIsPending = makeSelectIsRewardClaimPending();

24
src/renderer/component/rewardLink/view.jsx
View file

@ -1,33 +1,23 @@
import React from "react";
import Modal from "modal/modal";
import Link from "component/link";
import React from 'react';
import Modal from 'modal/modal';
import Link from 'component/link';
const RewardLink = props => {
const {
reward,
button,
claimReward,
clearError,
errorMessage,
label,
isPending,
} = props;
const { reward, button, claimReward, clearError, errorMessage, label, isPending } = props;
return (
<div className="reward-link">
<Link
button={button}
disabled={isPending}
label={
isPending ? __("Claiming...") : label ? label : __("Claim Reward")
}
label={isPending ? __('Claiming...') : label || __('Claim Reward')}
onClick={() => {
claimReward(reward);
}}
/>
{errorMessage ? (
<Modal
isOpen={true}
isOpen
contentLabel="Reward Claim Error"
className="error-modal"
onConfirmed={() => {
@ -37,7 +27,7 @@ const RewardLink = props => {
{errorMessage}
</Modal>
) : (
""
''
)}
</div>
);

8
src/renderer/component/rewardListClaimed/index.js
View file

@ -1,7 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import { selectClaimedRewards } from "redux/selectors/rewards";
import RewardListClaimed from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { selectClaimedRewards } from 'redux/selectors/rewards';
import RewardListClaimed from './view';
const select = state => ({
rewards: selectClaimedRewards(state),

36
src/renderer/component/rewardListClaimed/view.jsx
View file

@ -1,5 +1,5 @@
import React from "react";
import LinkTransaction from "component/linkTransaction";
import React from 'react';
import LinkTransaction from 'component/linkTransaction';
const RewardListClaimed = props => {
const { rewards } = props;
@ -17,27 +17,23 @@ const RewardListClaimed = props => {
<table className="table-standard table-stretch">
<thead>
<tr>
<th>{__("Title")}</th>
<th>{__("Amount")}</th>
<th>{__("Transaction")}</th>
<th>{__("Date")}</th>
<th>{__('Title')}</th>
<th>{__('Amount')}</th>
<th>{__('Transaction')}</th>
<th>{__('Date')}</th>
</tr>
</thead>
<tbody>
{rewards.map(reward => {
return (
<tr key={reward.id}>
<td>{reward.reward_title}</td>
<td>{reward.reward_amount}</td>
<td>
<LinkTransaction id={reward.transaction_id} />
</td>
<td>
{reward.created_at.replace("Z", " ").replace("T", " ")}
</td>
</tr>
);
})}
{rewards.map(reward => (
<tr key={reward.id}>
<td>{reward.reward_title}</td>
<td>{reward.reward_amount}</td>
<td>
<LinkTransaction id={reward.transaction_id} />
</td>
<td>{reward.created_at.replace('Z', ' ').replace('T', ' ')}</td>
</tr>
))}
</tbody>
</table>
</div>

8
src/renderer/component/rewardSummary/index.js
View file

@ -1,7 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import { selectUnclaimedRewardValue } from "redux/selectors/rewards";
import RewardSummary from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { selectUnclaimedRewardValue } from 'redux/selectors/rewards';
import RewardSummary from './view';
const select = state => ({
unclaimedRewardAmount: selectUnclaimedRewardValue(state),

25
src/renderer/component/rewardSummary/view.jsx
View file

@ -1,7 +1,7 @@
// @flow
import React from "react";
import Link from "component/link";
import { CreditAmount } from "component/common";
import React from 'react';
import Link from 'component/link';
import { CreditAmount } from 'component/common';
type Props = {
unclaimedRewardAmount: number,
@ -13,29 +13,20 @@ const RewardSummary = (props: Props) => {
return (
<section className="card">
<div className="card__title-primary">
<h3>{__("Rewards")}</h3>
<h3>{__('Rewards')}</h3>
</div>
<div className="card__content">
{unclaimedRewardAmount > 0 ? (
<p>
{__("You have")}{" "}
<CreditAmount amount={unclaimedRewardAmount} precision={8} />{" "}
{__("in unclaimed rewards")}.
{__('You have')} <CreditAmount amount={unclaimedRewardAmount} precision={8} />{' '}
{__('in unclaimed rewards')}.
</p>
) : (
<p>
{__(
"There are no rewards available at this time, please check back later"
)}.
</p>
<p>{__('There are no rewards available at this time, please check back later')}.</p>
)}
</div>
<div className="card__actions">
<Link
button="primary"
navigate="/rewards"
label={__("Claim Rewards")}
/>
<Link button="primary" navigate="/rewards" label={__('Claim Rewards')} />
</div>
</section>
);

6
src/renderer/component/rewardTile/index.js
View file

@ -1,5 +1,5 @@
import React from "react";
import { connect } from "react-redux";
import RewardTile from "./view";
import React from 'react';
import { connect } from 'react-redux';
import RewardTile from './view';
export default connect(null, null)(RewardTile);

14
src/renderer/component/rewardTile/view.jsx
View file

@ -1,8 +1,8 @@
import React from "react";
import { CreditAmount, Icon } from "component/common";
import RewardLink from "component/rewardLink";
import Link from "component/link";
import rewards from "rewards";
import React from 'react';
import { CreditAmount, Icon } from 'component/common';
import RewardLink from 'component/rewardLink';
import Link from 'component/link';
import rewards from 'rewards';
const RewardTile = props => {
const { reward } = props;
@ -19,12 +19,12 @@ const RewardTile = props => {
<div className="card__content">{reward.reward_description}</div>
<div className="card__actions ">
{reward.reward_type == rewards.TYPE_REFERRAL && (
<Link button="alt" navigate="/invite" label={__("Go To Invites")} />
<Link button="alt" navigate="/invite" label={__('Go To Invites')} />
)}
{reward.reward_type !== rewards.TYPE_REFERRAL &&
(claimed ? (
<span>
<Icon icon="icon-check" /> {__("Reward claimed.")}
<Icon icon="icon-check" /> {__('Reward claimed.')}
</span>
) : (
<RewardLink button="alt" reward_type={reward.reward_type} />

11
src/renderer/component/router/index.js
View file

@ -1,10 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import Router from "./view.jsx";
import {
selectCurrentPage,
selectCurrentParams,
} from "redux/selectors/navigation.js";
import React from 'react';
import { connect } from 'react-redux';
import Router from './view.jsx';
import { selectCurrentPage, selectCurrentParams } from 'redux/selectors/navigation.js';
const select = state => ({
params: selectCurrentParams(state),

40
src/renderer/component/router/view.jsx
View file

@ -1,23 +1,23 @@
import React from "react";
import SettingsPage from "page/settings";
import HelpPage from "page/help";
import ReportPage from "page/report.js";
import WalletPage from "page/wallet";
import GetCreditsPage from "../../page/getCredits";
import SendReceivePage from "page/sendCredits";
import ShowPage from "page/show";
import PublishPage from "page/publish";
import DiscoverPage from "page/discover";
import RewardsPage from "page/rewards";
import FileListDownloaded from "page/fileListDownloaded";
import FileListPublished from "page/fileListPublished";
import TransactionHistoryPage from "page/transactionHistory";
import ChannelPage from "page/channel";
import SearchPage from "page/search";
import AuthPage from "page/auth";
import InvitePage from "page/invite";
import BackupPage from "page/backup";
import SubscriptionsPage from "page/subscriptions";
import React from 'react';
import SettingsPage from 'page/settings';
import HelpPage from 'page/help';
import ReportPage from 'page/report.js';
import WalletPage from 'page/wallet';
import GetCreditsPage from '../../page/getCredits';
import SendReceivePage from 'page/sendCredits';
import ShowPage from 'page/show';
import PublishPage from 'page/publish';
import DiscoverPage from 'page/discover';
import RewardsPage from 'page/rewards';
import FileListDownloaded from 'page/fileListDownloaded';
import FileListPublished from 'page/fileListPublished';
import TransactionHistoryPage from 'page/transactionHistory';
import ChannelPage from 'page/channel';
import SearchPage from 'page/search';
import AuthPage from 'page/auth';
import InvitePage from 'page/invite';
import BackupPage from 'page/backup';
import SubscriptionsPage from 'page/subscriptions';
const route = (page, routesMap) => {
const component = routesMap[page];

12
src/renderer/component/shapeShift/index.js
View file

@ -1,15 +1,15 @@
import { connect } from "react-redux";
import { connect } from 'react-redux';
import {
createShapeShift,
shapeShiftInit,
getCoinStats,
clearShapeShift,
getActiveShift,
} from "redux/actions/shape_shift";
import { doShowSnackBar } from "redux/actions/app";
import { selectReceiveAddress } from "redux/selectors/wallet";
import { selectShapeShift } from "redux/selectors/shape_shift";
import ShapeShift from "./view";
} from 'redux/actions/shape_shift';
import { doShowSnackBar } from 'redux/actions/app';
import { selectReceiveAddress } from 'redux/selectors/wallet';
import { selectShapeShift } from 'redux/selectors/shape_shift';
import ShapeShift from './view';
const select = state => ({
receiveAddress: selectReceiveAddress(state),

47
src/renderer/component/shapeShift/internal/active-shift.jsx
View file

@ -1,11 +1,11 @@
// @flow
import * as React from "react";
import QRCode from "qrcode.react";
import * as statuses from "constants/shape_shift";
import Address from "component/address";
import Link from "component/link";
import type { Dispatch } from "redux/actions/shape_shift";
import ShiftMarketInfo from "./market_info";
import * as React from 'react';
import QRCode from 'qrcode.react';
import * as statuses from 'constants/shape_shift';
import Address from 'component/address';
import Link from 'component/link';
import type { Dispatch } from 'redux/actions/shape_shift';
import ShiftMarketInfo from './market_info';
type Props = {
shiftState: ?string,
@ -78,10 +78,10 @@ class ActiveShapeShift extends React.PureComponent<Props> {
{shiftState === statuses.NO_DEPOSITS && (
<div>
<p>
Send up to{" "}
Send up to{' '}
<span className="credit-amount--bold">
{originCoinDepositMax} {shiftCoinType}
</span>{" "}
</span>{' '}
to the address below.
</p>
<ShiftMarketInfo
@ -104,41 +104,32 @@ class ActiveShapeShift extends React.PureComponent<Props> {
{shiftState === statuses.RECEIVED && (
<div className="card__content--extra-vertical-space">
<p>
{__(
"ShapeShift has received your payment! Sending the funds to your LBRY wallet."
)}
{__('ShapeShift has received your payment! Sending the funds to your LBRY wallet.')}
</p>
<span className="help">
{__("This can take a while, especially with BTC.")}
</span>
<span className="help">{__('This can take a while, especially with BTC.')}</span>
</div>
)}
{shiftState === statuses.COMPLETE && (
<div className="card__content--extra-vertical-space">
<p>
{__(
"Transaction complete! You should see the new LBC in your wallet."
)}
</p>
<p>{__('Transaction complete! You should see the new LBC in your wallet.')}</p>
</div>
)}
<div className="card__actions card__actions--only-vertical">
<Link
button={shiftState === statuses.COMPLETE ? "primary" : "alt"}
button={shiftState === statuses.COMPLETE ? 'primary' : 'alt'}
onClick={clearShapeShift}
label={
shiftState === statuses.COMPLETE ||
shiftState === statuses.RECEIVED
? __("Done")
: __("Cancel")
shiftState === statuses.COMPLETE || shiftState === statuses.RECEIVED
? __('Done')
: __('Cancel')
}
/>
{shiftOrderId && (
<span className="shapeshift__link">
<Link
button="text"
label={__("View the status on Shapeshift.io")}
label={__('View the status on Shapeshift.io')}
href={`https://shapeshift.io/#/status/${shiftOrderId}`}
/>
</span>
@ -147,8 +138,8 @@ class ActiveShapeShift extends React.PureComponent<Props> {
shiftReturnAddress && (
<div className="shapeshift__actions-help">
<span className="help">
If the transaction doesn't go through, ShapeShift will return
your {shiftCoinType} back to {shiftReturnAddress}
If the transaction doesn't go through, ShapeShift will return your {shiftCoinType}{' '}
back to {shiftReturnAddress}
</span>
</div>
)}

23
src/renderer/component/shapeShift/internal/form.jsx
View file

@ -1,9 +1,9 @@
import React from "react";
import Link from "component/link";
import { getExampleAddress } from "util/shape_shift";
import { Submit, FormRow } from "component/form";
import type { ShapeShiftFormValues, Dispatch } from "redux/actions/shape_shift";
import ShiftMarketInfo from "./market_info";
import React from 'react';
import Link from 'component/link';
import { getExampleAddress } from 'util/shape_shift';
import { Submit, FormRow } from 'component/form';
import type { ShapeShiftFormValues, Dispatch } from 'redux/actions/shape_shift';
import ShiftMarketInfo from './market_info';
type ShapeShiftFormErrors = {
returnAddress?: string,
@ -50,7 +50,7 @@ export default (props: Props) => {
return (
<form onSubmit={handleSubmit}>
<div className="form-field">
<span>{__("Exchange")} </span>
<span>{__('Exchange')} </span>
<select
className="form-field__input form-field__input-select"
name="originCoin"
@ -65,7 +65,7 @@ export default (props: Props) => {
</option>
))}
</select>
<span> {__("for LBC")}</span>
<span> {__('for LBC')}</span>
<div className="shapeshift__tx-info">
{!updating &&
originCoinDepositMax && (
@ -84,7 +84,7 @@ export default (props: Props) => {
type="text"
name="returnAddress"
placeholder={getExampleAddress(originCoin)}
label={__("Return address")}
label={__('Return address')}
onChange={handleChange}
onBlur={handleBlur}
value={values.returnAddress}
@ -93,14 +93,13 @@ export default (props: Props) => {
/>
<span className="help">
<span>
({__("optional but recommended")}) {__("We will return your")}{" "}
{originCoin}{" "}
({__('optional but recommended')}) {__('We will return your')} {originCoin}{' '}
{__("to this address if the transaction doesn't go through.")}
</span>
</span>
<div className="card__actions card__actions--only-vertical">
<Submit
label={__("Begin Conversion")}
label={__('Begin Conversion')}
disabled={isSubmitting || !!Object.keys(errors).length}
/>
</div>

12
src/renderer/component/shapeShift/internal/market_info.jsx
View file

@ -1,5 +1,5 @@
// @flow
import React from "react";
import React from 'react';
type Props = {
shapeShiftRate: ?number,
@ -21,13 +21,13 @@ export default (props: Props) => {
return (
<div>
<span className="help">
{__("Receive")} {shapeShiftRate} LBC
{" / "}
{"1"} {originCoin} {__("less")} {originCoinDepositFee} LBC {__("fee")}.
{__('Receive')} {shapeShiftRate} LBC
{' / '}
{'1'} {originCoin} {__('less')} {originCoinDepositFee} LBC {__('fee')}.
<br />
{__("Exchange max")}: {originCoinDepositMax} {originCoin}
{__('Exchange max')}: {originCoinDepositMax} {originCoin}
<br />
{__("Exchange min")}: {originCoinDepositMin} {originCoin}
{__('Exchange min')}: {originCoinDepositMin} {originCoin}
</span>
</div>
);

49
src/renderer/component/shapeShift/view.jsx
View file

@ -1,18 +1,18 @@
// @flow
import * as React from "react";
import { shell } from "electron";
import { Formik } from "formik";
import classnames from "classnames";
import * as statuses from "constants/shape_shift";
import { validateShapeShiftForm } from "util/shape_shift";
import Link from "component/link";
import Spinner from "component/common/spinner";
import { BusyMessage } from "component/common";
import ShapeShiftForm from "./internal/form";
import ActiveShapeShift from "./internal/active-shift";
import * as React from 'react';
import { shell } from 'electron';
import { Formik } from 'formik';
import classnames from 'classnames';
import * as statuses from 'constants/shape_shift';
import { validateShapeShiftForm } from 'util/shape_shift';
import Link from 'component/link';
import Spinner from 'component/common/spinner';
import { BusyMessage } from 'component/common';
import ShapeShiftForm from './internal/form';
import ActiveShapeShift from './internal/active-shift';
import type { ShapeShiftState } from "redux/reducers/shape_shift";
import type { Dispatch, ShapeShiftFormValues } from "redux/actions/shape_shift";
import type { ShapeShiftState } from 'redux/reducers/shape_shift';
import type { Dispatch, ShapeShiftFormValues } from 'redux/actions/shape_shift';
type Props = {
shapeShift: ShapeShiftState,
@ -27,10 +27,7 @@ type Props = {
class ShapeShift extends React.PureComponent<Props> {
componentDidMount() {
const {
shapeShiftInit,
shapeShift: { hasActiveShift, shiftSupportedCoins },
} = this.props;
const { shapeShiftInit, shapeShift: { hasActiveShift, shiftSupportedCoins } } = this.props;
if (!hasActiveShift && !shiftSupportedCoins.length) {
// calls shapeshift to see list of supported coins for shifting
@ -70,8 +67,8 @@ class ShapeShift extends React.PureComponent<Props> {
const initialFormValues: ShapeShiftFormValues = {
receiveAddress,
originCoin: "BTC",
returnAddress: "",
originCoin: 'BTC',
returnAddress: '',
};
return (
@ -80,19 +77,17 @@ class ShapeShift extends React.PureComponent<Props> {
// if the markup below changes for the initial render (form.jsx) there will be content jumping
// the styling in shapeshift.scss will need to be updated to the correct min-height
<section
className={classnames("card shapeshift__wrapper", {
"shapeshift__initial-wrapper": loading,
className={classnames('card shapeshift__wrapper', {
'shapeshift__initial-wrapper': loading,
})}
>
<div className="card__title-primary">
<h3>{__("Convert Crypto to LBC")}</h3>
<h3>{__('Convert Crypto to LBC')}</h3>
<p className="help">
{__("Powered by ShapeShift. Read our FAQ")}{" "}
<Link href="https://lbry.io/faq/shapeshift">{__("here")}</Link>.
{__('Powered by ShapeShift. Read our FAQ')}{' '}
<Link href="https://lbry.io/faq/shapeshift">{__('here')}</Link>.
{hasActiveShift &&
shiftState !== "complete" && (
<span>{__("This will update automatically.")}</span>
)}
shiftState !== 'complete' && <span>{__('This will update automatically.')}</span>}
</p>
</div>

10
src/renderer/component/snackBar/index.js
View file

@ -1,8 +1,8 @@
import React from "react";
import { connect } from "react-redux";
import { doRemoveSnackBarSnack } from "redux/actions/app";
import { selectSnackBarSnacks } from "redux/selectors/app";
import SnackBar from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { doRemoveSnackBarSnack } from 'redux/actions/app';
import { selectSnackBarSnacks } from 'redux/selectors/app';
import SnackBar from './view';
const perform = dispatch => ({
removeSnack: () => dispatch(doRemoveSnackBarSnack()),

12
src/renderer/component/snackBar/view.jsx
View file

@ -1,5 +1,5 @@
import React from "react";
import Link from "component/link";
import React from 'react';
import Link from 'component/link';
class SnackBar extends React.PureComponent {
constructor(props) {
@ -13,7 +13,7 @@ class SnackBar extends React.PureComponent {
const { snacks, removeSnack } = this.props;
if (!snacks.length) {
this._hideTimeout = null; //should be unmounting anyway, but be safe?
this._hideTimeout = null; // should be unmounting anyway, but be safe?
return null;
}
@ -32,11 +32,7 @@ class SnackBar extends React.PureComponent {
{message}
{linkText &&
linkTarget && (
<Link
navigate={linkTarget}
className="snack-bar__action"
label={linkText}
/>
<Link navigate={linkTarget} className="snack-bar__action" label={linkText} />
)}
</div>
);

13
src/renderer/component/splash/index.js
View file

@ -1,12 +1,9 @@
import React from "react";
import { connect } from "react-redux";
import React from 'react';
import { connect } from 'react-redux';
import {
selectCurrentModal,
selectDaemonVersionMatched,
} from "redux/selectors/app";
import { doCheckDaemonVersion } from "redux/actions/app";
import SplashScreen from "./view";
import { selectCurrentModal, selectDaemonVersionMatched } from 'redux/selectors/app';
import { doCheckDaemonVersion } from 'redux/actions/app';
import SplashScreen from './view';
const select = state => ({
modal: selectCurrentModal(state),

60
src/renderer/component/splash/view.jsx
View file

@ -1,11 +1,11 @@
import React from "react";
import PropTypes from "prop-types";
import lbry from "lbry.js";
import LoadScreen from "../load_screen.js";
import ModalIncompatibleDaemon from "modal/modalIncompatibleDaemon";
import ModalUpgrade from "modal/modalUpgrade";
import ModalDownloading from "modal/modalDownloading";
import * as modals from "constants/modal_types";
import React from 'react';
import PropTypes from 'prop-types';
import lbry from 'lbry.js';
import LoadScreen from '../load_screen.js';
import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon';
import ModalUpgrade from 'modal/modalUpgrade';
import ModalDownloading from 'modal/modalDownloading';
import * as modals from 'constants/modal_types';
export class SplashScreen extends React.PureComponent {
static propTypes = {
@ -17,8 +17,8 @@ export class SplashScreen extends React.PureComponent {
super(props);
this.state = {
details: __("Starting daemon"),
message: __("Connecting"),
details: __('Starting daemon'),
message: __('Connecting'),
isRunning: false,
isLagging: false,
};
@ -32,19 +32,19 @@ export class SplashScreen extends React.PureComponent {
_updateStatusCallback(status) {
const startupStatus = status.startup_status;
if (startupStatus.code == "started") {
if (startupStatus.code == 'started') {
// Wait until we are able to resolve a name before declaring
// that we are done.
// TODO: This is a hack, and the logic should live in the daemon
// to give us a better sense of when we are actually started
this.setState({
message: __("Testing Network"),
details: __("Waiting for name resolution"),
message: __('Testing Network'),
details: __('Waiting for name resolution'),
isLagging: false,
isRunning: true,
});
lbry.resolve({ uri: "lbry://one" }).then(() => {
lbry.resolve({ uri: 'lbry://one' }).then(() => {
// Only leave the load screen if the daemon version matched;
// otherwise we'll notify the user at the end of the load screen.
@ -54,24 +54,18 @@ export class SplashScreen extends React.PureComponent {
});
return;
}
if (
status.blockchain_status &&
status.blockchain_status.blocks_behind > 0
) {
if (status.blockchain_status && status.blockchain_status.blocks_behind > 0) {
const format =
status.blockchain_status.blocks_behind == 1
? "%s block behind"
: "%s blocks behind";
status.blockchain_status.blocks_behind == 1 ? '%s block behind' : '%s blocks behind';
this.setState({
message: __("Blockchain Sync"),
message: __('Blockchain Sync'),
details: __(format, status.blockchain_status.blocks_behind),
isLagging: startupStatus.is_lagging,
});
} else {
this.setState({
message: __("Network Loading"),
details:
startupStatus.message + (startupStatus.is_lagging ? "" : "..."),
message: __('Network Loading'),
details: startupStatus.message + (startupStatus.is_lagging ? '' : '...'),
isLagging: startupStatus.is_lagging,
});
}
@ -90,9 +84,9 @@ export class SplashScreen extends React.PureComponent {
.catch(() => {
this.setState({
isLagging: true,
message: __("Connection Failure"),
message: __('Connection Failure'),
details: __(
"Try closing all LBRY processes and starting again. If this still happens, your anti-virus software or firewall may be preventing LBRY from connecting. Contact hello@lbry.io if you think this is a software bug."
'Try closing all LBRY processes and starting again. If this still happens, your anti-virus software or firewall may be preventing LBRY from connecting. Contact hello@lbry.io if you think this is a software bug.'
),
});
});
@ -104,19 +98,13 @@ export class SplashScreen extends React.PureComponent {
return (
<div>
<LoadScreen
message={message}
details={details}
isWarning={isLagging}
/>
<LoadScreen message={message} details={details} isWarning={isLagging} />
{/* Temp hack: don't show any modals on splash screen daemon is running;
daemon doesn't let you quit during startup, so the "Quit" buttons
in the modals won't work. */}
{modal == "incompatibleDaemon" &&
isRunning && <ModalIncompatibleDaemon />}
{modal == 'incompatibleDaemon' && isRunning && <ModalIncompatibleDaemon />}
{modal == modals.UPGRADE && isRunning && <ModalUpgrade />}
{modal == modals.DOWNLOADING &&
isRunning && <ModalDownloading />}
{modal == modals.DOWNLOADING && isRunning && <ModalDownloading />}
</div>
);
}

13
src/renderer/component/subHeader/index.js
View file

@ -1,11 +1,8 @@
import React from "react";
import { connect } from "react-redux";
import {
selectCurrentPage,
selectHeaderLinks,
} from "redux/selectors/navigation";
import { doNavigate } from "redux/actions/navigation";
import SubHeader from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { selectCurrentPage, selectHeaderLinks } from 'redux/selectors/navigation';
import { doNavigate } from 'redux/actions/navigation';
import SubHeader from './view';
const select = (state, props) => ({
currentPage: selectCurrentPage(state),

18
src/renderer/component/subHeader/view.jsx
View file

@ -1,20 +1,18 @@
import React from "react";
import Link from "component/link";
import classnames from "classnames";
import React from 'react';
import Link from 'component/link';
import classnames from 'classnames';
const SubHeader = props => {
const { subLinks, currentPage, navigate, fullWidth, smallMargin } = props;
const links = [];
for (let link of Object.keys(subLinks)) {
for (const link of Object.keys(subLinks)) {
links.push(
<Link
onClick={event => navigate(`/${link}`, event)}
key={link}
className={
link == currentPage ? "sub-header-selected" : "sub-header-unselected"
}
className={link == currentPage ? 'sub-header-selected' : 'sub-header-unselected'}
>
{subLinks[link]}
</Link>
@ -23,9 +21,9 @@ const SubHeader = props => {
return (
<nav
className={classnames("sub-header", {
"sub-header--full-width": fullWidth,
"sub-header--small-margin": smallMargin,
className={classnames('sub-header', {
'sub-header--full-width': fullWidth,
'sub-header--small-margin': smallMargin,
})}
>
{links}

11
src/renderer/component/subscribeButton/index.js
View file

@ -1,11 +1,8 @@
import { connect } from "react-redux";
import {
doChannelSubscribe,
doChannelUnsubscribe,
} from "redux/actions/subscriptions";
import { selectSubscriptions } from "redux/selectors/subscriptions";
import { connect } from 'react-redux';
import { doChannelSubscribe, doChannelUnsubscribe } from 'redux/actions/subscriptions';
import { selectSubscriptions } from 'redux/selectors/subscriptions';
import SubscribeButton from "./view";
import SubscribeButton from './view';
const select = (state, props) => ({
subscriptions: selectSubscriptions(state),

39
src/renderer/component/subscribeButton/view.jsx
View file

@ -1,36 +1,27 @@
import React from "react";
import Link from "component/link";
export default ({
channelName,
uri,
subscriptions,
doChannelSubscribe,
doChannelUnsubscribe
}) => {
import React from 'react';
import Link from 'component/link';
export default ({ channelName, uri, subscriptions, doChannelSubscribe, doChannelUnsubscribe }) => {
const isSubscribed =
subscriptions
.map(subscription => subscription.channelName)
.indexOf(channelName) !== -1;
subscriptions.map(subscription => subscription.channelName).indexOf(channelName) !== -1;
const subscriptionHandler = isSubscribed
? doChannelUnsubscribe
: doChannelSubscribe;
const subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
const subscriptionLabel = isSubscribed ? __("Unsubscribe") : __("Subscribe");
const subscriptionLabel = isSubscribed ? __('Unsubscribe') : __('Subscribe');
return channelName && uri ? (
<div className="card__actions">
<Link
iconRight={isSubscribed ? "" : "at"}
button={isSubscribed ? "alt" : "primary"}
iconRight={isSubscribed ? '' : 'at'}
button={isSubscribed ? 'alt' : 'primary'}
label={subscriptionLabel}
onClick={() => subscriptionHandler({
channelName,
uri,
})}
onClick={() =>
subscriptionHandler({
channelName,
uri,
})
}
/>
</div>
) : null;
}
};

8
src/renderer/component/theme/index.js
View file

@ -1,7 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import { selectThemePath } from "redux/selectors/settings.js";
import Theme from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { selectThemePath } from 'redux/selectors/settings.js';
import Theme from './view';
const select = state => ({
themePath: selectThemePath(state),

11
src/renderer/component/theme/view.jsx
View file

@ -1,4 +1,4 @@
import React from "react";
import React from 'react';
const Theme = props => {
const { themePath } = props;
@ -7,14 +7,7 @@ const Theme = props => {
return null;
}
return (
<link
href={themePath}
rel="stylesheet"
type="text/css"
media="screen,print"
/>
);
return <link href={themePath} rel="stylesheet" type="text/css" media="screen,print" />;
};
export default Theme;

8
src/renderer/component/tooltip.js
View file

@ -1,5 +1,5 @@
import React from "react";
import PropTypes from "prop-types";
import React from 'react';
import PropTypes from 'prop-types';
export class ToolTip extends React.PureComponent {
static propTypes = {
@ -29,7 +29,7 @@ export class ToolTip extends React.PureComponent {
render() {
return (
<span className={`tooltip ${this.props.className || ""}`}>
<span className={`tooltip ${this.props.className || ''}`}>
<a
className="tooltip__link"
onClick={() => {
@ -39,7 +39,7 @@ export class ToolTip extends React.PureComponent {
{this.props.label}
</a>
<div
className={`tooltip__body ${this.state.showTooltip ? "" : " hidden"}`}
className={`tooltip__body ${this.state.showTooltip ? '' : ' hidden'}`}
onMouseOut={() => {
this.handleTooltipMouseOut();
}}

14
src/renderer/component/transactionList/index.js
View file

@ -1,10 +1,10 @@
import React from "react";
import { connect } from "react-redux";
import { doNavigate } from "redux/actions/navigation";
import { doOpenModal } from "redux/actions/app";
import { selectClaimedRewardsByTransactionId } from "redux/selectors/rewards";
import { selectAllMyClaimsByOutpoint } from "redux/selectors/claims";
import TransactionList from "./view";
import React from 'react';
import { connect } from 'react-redux';
import { doNavigate } from 'redux/actions/navigation';
import { doOpenModal } from 'redux/actions/app';
import { selectClaimedRewardsByTransactionId } from 'redux/selectors/rewards';
import { selectAllMyClaimsByOutpoint } from 'redux/selectors/claims';
import TransactionList from './view';
const select = state => ({
rewards: selectClaimedRewardsByTransactionId(state),

61
src/renderer/component/transactionList/internal/TransactionListItem.jsx
View file

@ -1,10 +1,10 @@
import React from "react";
import LinkTransaction from "component/linkTransaction";
import { CreditAmount } from "component/common";
import DateTime from "component/dateTime";
import Link from "component/link";
import lbryuri from "lbryuri";
import * as txnTypes from "constants/transaction_types";
import React from 'react';
import LinkTransaction from 'component/linkTransaction';
import { CreditAmount } from 'component/common';
import DateTime from 'component/dateTime';
import Link from 'component/link';
import lbryuri from 'lbryuri';
import * as txnTypes from 'constants/transaction_types';
class TransactionListItem extends React.PureComponent {
abandonClaim() {
@ -16,21 +16,10 @@ class TransactionListItem extends React.PureComponent {
getLink(type) {
if (type == txnTypes.TIP) {
return (
<Link
onClick={this.abandonClaim.bind(this)}
icon="icon-unlock-alt"
title={__("Unlock")}
/>
);
} else {
return (
<Link
onClick={this.abandonClaim.bind(this)}
icon="icon-trash"
title={__("Revoke")}
/>
<Link onClick={this.abandonClaim.bind(this)} icon="icon-unlock-alt" title={__('Unlock')} />
);
}
return <Link onClick={this.abandonClaim.bind(this)} icon="icon-trash" title={__('Revoke')} />;
}
capitalize(string) {
@ -51,9 +40,9 @@ class TransactionListItem extends React.PureComponent {
} = transaction;
const dateFormat = {
month: "short",
day: "numeric",
year: "numeric",
month: 'short',
day: 'numeric',
year: 'numeric',
};
return (
@ -61,41 +50,25 @@ class TransactionListItem extends React.PureComponent {
<td>
{date ? (
<div>
<DateTime
date={date}
show={DateTime.SHOW_DATE}
formatOptions={dateFormat}
/>
<DateTime date={date} show={DateTime.SHOW_DATE} formatOptions={dateFormat} />
<div className="meta">
<DateTime date={date} show={DateTime.SHOW_TIME} />
</div>
</div>
) : (
<span className="empty">{__("Pending")}</span>
<span className="empty">{__('Pending')}</span>
)}
</td>
<td>
<CreditAmount
amount={amount}
look="plain"
label={false}
showPlus={true}
precision={8}
/>
<CreditAmount amount={amount} look="plain" label={false} showPlus precision={8} />
<br />
{fee != 0 && (
<CreditAmount amount={fee} look="fee" label={false} precision={8} />
)}
{fee != 0 && <CreditAmount amount={fee} look="fee" label={false} precision={8} />}
</td>
<td>
{this.capitalize(type)} {isRevokeable && this.getLink(type)}
</td>
<td>
{reward && (
<Link navigate="/rewards">
{__("Reward: %s", reward.reward_title)}
</Link>
)}
{reward && <Link navigate="/rewards">{__('Reward: %s', reward.reward_title)}</Link>}
{name &&
claimId && (
<Link

60
src/renderer/component/transactionList/view.jsx
View file

@ -1,9 +1,9 @@
import React from "react";
import TransactionListItem from "./internal/TransactionListItem";
import FormField from "component/formField";
import Link from "component/link";
import * as icons from "constants/icons";
import * as modals from "constants/modal_types";
import React from 'react';
import TransactionListItem from './internal/TransactionListItem';
import FormField from 'component/formField';
import Link from 'component/link';
import * as icons from 'constants/icons';
import * as modals from 'constants/modal_types';
class TransactionList extends React.PureComponent {
constructor(props) {
@ -39,48 +39,38 @@ class TransactionList extends React.PureComponent {
render() {
const { emptyMessage, rewards, transactions } = this.props;
let transactionList = transactions.filter(
this.filterTransaction.bind(this)
);
const transactionList = transactions.filter(this.filterTransaction.bind(this));
return (
<div>
{(transactionList.length || this.state.filter) && (
<span className="sort-section">
{__("Filter")}{" "}
<FormField
type="select"
onChange={this.handleFilterChanged.bind(this)}
>
<option value="">{__("All")}</option>
<option value="spend">{__("Spends")}</option>
<option value="receive">{__("Receives")}</option>
<option value="publish">{__("Publishes")}</option>
<option value="channel">{__("Channels")}</option>
<option value="tip">{__("Tips")}</option>
<option value="support">{__("Supports")}</option>
<option value="update">{__("Updates")}</option>
</FormField>{" "}
<Link
href="https://lbry.io/faq/transaction-types"
icon={icons.HELP_CIRCLE}
/>
{__('Filter')}{' '}
<FormField type="select" onChange={this.handleFilterChanged.bind(this)}>
<option value="">{__('All')}</option>
<option value="spend">{__('Spends')}</option>
<option value="receive">{__('Receives')}</option>
<option value="publish">{__('Publishes')}</option>
<option value="channel">{__('Channels')}</option>
<option value="tip">{__('Tips')}</option>
<option value="support">{__('Supports')}</option>
<option value="update">{__('Updates')}</option>
</FormField>{' '}
<Link href="https://lbry.io/faq/transaction-types" icon={icons.HELP_CIRCLE} />
</span>
)}
{!transactionList.length && (
<div className="empty">
{emptyMessage || __("No transactions to list.")}
</div>
<div className="empty">{emptyMessage || __('No transactions to list.')}</div>
)}
{Boolean(transactionList.length) && (
<table className="table-standard table-transactions table-stretch">
<thead>
<tr>
<th>{__("Date")}</th>
<th>{__("Amount (Fee)")}</th>
<th>{__("Type")} </th>
<th>{__("Details")} </th>
<th>{__("Transaction")}</th>
<th>{__('Date')}</th>
<th>{__('Amount (Fee)')}</th>
<th>{__('Type')} </th>
<th>{__('Details')} </th>
<th>{__('Transaction')}</th>
</tr>
</thead>
<tbody>

10
src/renderer/component/transactionListRecent/index.js
View file

@ -1,14 +1,14 @@
import React from "react";
import { connect } from "react-redux";
import { doFetchTransactions } from "redux/actions/wallet";
import React from 'react';
import { connect } from 'react-redux';
import { doFetchTransactions } from 'redux/actions/wallet';
import {
selectBalance,
selectRecentTransactions,
selectHasTransactions,
selectIsFetchingTransactions,
} from "redux/selectors/wallet";
} from 'redux/selectors/wallet';
import TransactionListRecent from "./view";
import TransactionListRecent from './view';
const select = state => ({
fetchingTransactions: selectIsFetchingTransactions(state),

20
src/renderer/component/transactionListRecent/view.jsx
View file

@ -1,8 +1,8 @@
import React from "react";
import { BusyMessage } from "component/common";
import Link from "component/link";
import TransactionList from "component/transactionList";
import * as icons from "constants/icons";
import React from 'react';
import { BusyMessage } from 'component/common';
import Link from 'component/link';
import TransactionList from 'component/transactionList';
import * as icons from 'constants/icons';
class TransactionListRecent extends React.PureComponent {
componentWillMount() {
@ -15,16 +15,14 @@ class TransactionListRecent extends React.PureComponent {
return (
<section className="card">
<div className="card__title-primary">
<h3>{__("Recent Transactions")}</h3>
<h3>{__('Recent Transactions')}</h3>
</div>
<div className="card__content">
{fetchingTransactions && (
<BusyMessage message={__("Loading transactions")} />
)}
{fetchingTransactions && <BusyMessage message={__('Loading transactions')} />}
{!fetchingTransactions && (
<TransactionList
transactions={transactions}
emptyMessage={__("You have no recent transactions.")}
emptyMessage={__('You have no recent transactions.')}
/>
)}
</div>
@ -32,7 +30,7 @@ class TransactionListRecent extends React.PureComponent {
<div className="card__actions card__actions--bottom">
<Link
navigate="/history"
label={__("Full History")}
label={__('Full History')}
icon={icons.HISTORY}
className="no-underline"
button="text"

6
src/renderer/component/truncatedMarkdown/index.js
View file

@ -1,5 +1,5 @@
import React from "react";
import { connect } from "react-redux";
import TruncatedMarkdown from "./view";
import React from 'react';
import { connect } from 'react-redux';
import TruncatedMarkdown from './view';
export default connect()(TruncatedMarkdown);

23
src/renderer/component/truncatedMarkdown/view.jsx
View file

@ -1,7 +1,7 @@
import React from "react";
import PropTypes from "prop-types";
import ReactMarkdown from "react-markdown";
import ReactDOMServer from "react-dom/server";
import React from 'react';
import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown';
import ReactDOMServer from 'react-dom/server';
class TruncatedMarkdown extends React.PureComponent {
static propTypes = {
@ -14,24 +14,21 @@ class TruncatedMarkdown extends React.PureComponent {
transformMarkdown(text) {
// render markdown to html string then trim html tag
let htmlString = ReactDOMServer.renderToStaticMarkup(
const htmlString = ReactDOMServer.renderToStaticMarkup(
<ReactMarkdown source={this.props.children} />
);
var txt = document.createElement("textarea");
const txt = document.createElement('textarea');
txt.innerHTML = htmlString;
return txt.value.replace(/<(?:.|\n)*?>/gm, "");
return txt.value.replace(/<(?:.|\n)*?>/gm, '');
}
render() {
let content =
this.props.children && typeof this.props.children === "string"
const content =
this.props.children && typeof this.props.children === 'string'
? this.transformMarkdown(this.props.children)
: this.props.children;
return (
<span
className="truncated-text"
style={{ WebkitLineClamp: this.props.lines }}
>
<span className="truncated-text" style={{ WebkitLineClamp: this.props.lines }}>
{content}
</span>
);

14
src/renderer/component/uriIndicator/index.js
View file

@ -1,10 +1,10 @@
import React from "react";
import lbryuri from "lbryuri";
import { connect } from "react-redux";
import { doResolveUri } from "redux/actions/content";
import { makeSelectIsUriResolving } from "redux/selectors/content";
import { makeSelectClaimForUri } from "redux/selectors/claims";
import UriIndicator from "./view";
import React from 'react';
import lbryuri from 'lbryuri';
import { connect } from 'react-redux';
import { doResolveUri } from 'redux/actions/content';
import { makeSelectIsUriResolving } from 'redux/selectors/content';
import { makeSelectClaimForUri } from 'redux/selectors/claims';
import UriIndicator from './view';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),

44
src/renderer/component/uriIndicator/view.jsx
View file

@ -1,8 +1,8 @@
import React from "react";
import { Icon } from "component/common";
import Link from "component/link";
import lbryuri from "lbryuri";
import classnames from "classnames";
import React from 'react';
import { Icon } from 'component/common';
import Link from 'component/link';
import lbryuri from 'lbryuri';
import classnames from 'classnames';
class UriIndicator extends React.PureComponent {
componentWillMount() {
@ -39,9 +39,7 @@ class UriIndicator extends React.PureComponent {
value,
} = claim;
const channelClaimId =
value &&
value.publisherSignature &&
value.publisherSignature.certificateId;
value && value.publisherSignature && value.publisherSignature.certificateId;
if (!hasSignature || !channelName) {
return <span className="empty">Anonymous</span>;
@ -50,34 +48,30 @@ class UriIndicator extends React.PureComponent {
let icon, channelLink, modifier;
if (signatureIsValid) {
modifier = "valid";
channelLink = link
? lbryuri.build({ channelName, claimId: channelClaimId }, false)
: false;
modifier = 'valid';
channelLink = link ? lbryuri.build({ channelName, claimId: channelClaimId }, false) : false;
} else {
icon = "icon-times-circle";
modifier = "invalid";
icon = 'icon-times-circle';
modifier = 'invalid';
}
const inner = (
<span>
<span
className={classnames("channel-name", {
"channel-name--small": smallCard,
"button-text no-underline": link,
className={classnames('channel-name', {
'channel-name--small': smallCard,
'button-text no-underline': link,
})}
>
{channelName}
</span>{" "}
</span>{' '}
{!signatureIsValid ? (
<Icon
icon={icon}
className={`channel-indicator__icon channel-indicator__icon--${
modifier
}`}
className={`channel-indicator__icon channel-indicator__icon--${modifier}`}
/>
) : (
""
''
)}
</span>
);
@ -87,11 +81,7 @@ class UriIndicator extends React.PureComponent {
}
return (
<Link
navigate="/show"
navigateParams={{ uri: channelLink }}
className="no-underline"
>
<Link navigate="/show" navigateParams={{ uri: channelLink }} className="no-underline">
{inner}
</Link>
);

17
src/renderer/component/userEmailNew/index.js
View file

@ -1,13 +1,10 @@
import React from "react";
import { connect } from "react-redux";
import { doUserEmailNew, doUserInviteNew } from "redux/actions/user";
import {
selectEmailNewIsPending,
selectEmailNewErrorMessage,
} from "redux/selectors/user";
import UserEmailNew from "./view";
import rewards from "rewards";
import { makeSelectRewardAmountByType } from "redux/selectors/rewards";
import React from 'react';
import { connect } from 'react-redux';
import { doUserEmailNew, doUserInviteNew } from 'redux/actions/user';
import { selectEmailNewIsPending, selectEmailNewErrorMessage } from 'redux/selectors/user';
import UserEmailNew from './view';
import rewards from 'rewards';
import { makeSelectRewardAmountByType } from 'redux/selectors/rewards';
const select = state => ({
isPending: selectEmailNewIsPending(state),

17
src/renderer/component/userEmailNew/view.jsx
View file

@ -1,13 +1,13 @@
import React from "react";
import { CreditAmount } from "component/common";
import { Form, FormRow, Submit } from "component/form.js";
import React from 'react';
import { CreditAmount } from 'component/common';
import { Form, FormRow, Submit } from 'component/form.js';
class UserEmailNew extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
email: "",
email: '',
};
}
@ -28,18 +28,15 @@ class UserEmailNew extends React.PureComponent {
return (
<div>
<p>
Let us know your email and you'll receive{" "}
<CreditAmount amount={rewardAmount} label="LBC" />, the blockchain
token used by LBRY.
Let us know your email and you'll receive{' '}
<CreditAmount amount={rewardAmount} label="LBC" />, the blockchain token used by LBRY.
</p>
<p>
{__(
"We'll also let you know about LBRY updates, security issues, and great new content."
)}
</p>
<p>
{__("We'll never sell your email, and you can unsubscribe at any time.")}
</p>
<p>{__("We'll never sell your email, and you can unsubscribe at any time.")}</p>
<Form onSubmit={this.handleSubmit.bind(this)}>
<FormRow
type="text"

14
src/renderer/component/userEmailVerify/index.js
View file

@ -1,14 +1,14 @@
import React from "react";
import { connect } from "react-redux";
import { doUserEmailVerify } from "redux/actions/user";
import React from 'react';
import { connect } from 'react-redux';
import { doUserEmailVerify } from 'redux/actions/user';
import {
selectEmailVerifyIsPending,
selectEmailToVerify,
selectEmailVerifyErrorMessage,
} from "redux/selectors/user";
import UserEmailVerify from "./view";
import rewards from "rewards";
import { makeSelectRewardAmountByType } from "redux/selectors/rewards";
} from 'redux/selectors/user';
import UserEmailVerify from './view';
import rewards from 'rewards';
import { makeSelectRewardAmountByType } from 'redux/selectors/rewards';
const select = state => ({
isPending: selectEmailVerifyIsPending(state),

29
src/renderer/component/userEmailVerify/view.jsx
View file

@ -1,14 +1,14 @@
import React from "react";
import Link from "component/link";
import { CreditAmount } from "component/common";
import { Form, FormRow, Submit } from "component/form.js";
import React from 'react';
import Link from 'component/link';
import { CreditAmount } from 'component/common';
import { Form, FormRow, Submit } from 'component/form.js';
class UserEmailVerify extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
code: "",
code: '',
};
}
@ -24,19 +24,13 @@ class UserEmailVerify extends React.PureComponent {
}
render() {
const {
cancelButton,
errorMessage,
email,
isPending,
rewardAmount,
} = this.props;
const { cancelButton, errorMessage, email, isPending, rewardAmount } = this.props;
return (
<Form onSubmit={this.handleSubmit.bind(this)}>
<p>Please enter the verification code emailed to {email}.</p>
<FormRow
type="text"
label={__("Verification Code")}
label={__('Verification Code')}
name="code"
value={this.state.code}
onChange={event => {
@ -47,14 +41,13 @@ class UserEmailVerify extends React.PureComponent {
{/* render help separately so it always shows */}
<div className="form-field__helper">
<p>
{__("Email")}{" "}
<Link href="mailto:help@lbry.io" label="help@lbry.io" /> or join our{" "}
<Link href="https://chat.lbry.io" label="chat" />{" "}
{__("if you encounter any trouble with your code.")}
{__('Email')} <Link href="mailto:help@lbry.io" label="help@lbry.io" /> or join our{' '}
<Link href="https://chat.lbry.io" label="chat" />{' '}
{__('if you encounter any trouble with your code.')}
</p>
</div>
<div className="form-row-submit">
<Submit label={__("Verify")} disabled={isPending} />
<Submit label={__('Verify')} disabled={isPending} />
{cancelButton}
</div>
</Form>

16
src/renderer/component/userVerify/index.js
View file

@ -1,14 +1,14 @@
import React from "react";
import { connect } from "react-redux";
import { doNavigate } from "redux/actions/navigation";
import { doUserIdentityVerify } from "redux/actions/user";
import rewards from "rewards";
import { makeSelectRewardByType } from "redux/selectors/rewards";
import React from 'react';
import { connect } from 'react-redux';
import { doNavigate } from 'redux/actions/navigation';
import { doUserIdentityVerify } from 'redux/actions/user';
import rewards from 'rewards';
import { makeSelectRewardByType } from 'redux/selectors/rewards';
import {
selectIdentityVerifyIsPending,
selectIdentityVerifyErrorMessage,
} from "redux/selectors/user";
import UserVerify from "./view";
} from 'redux/selectors/user';
import UserVerify from './view';
const select = (state, props) => {
const selectReward = makeSelectRewardByType();

74
src/renderer/component/userVerify/view.jsx
View file

@ -1,14 +1,14 @@
import React from "react";
import Link from "component/link";
import CardVerify from "component/cardVerify";
import lbryio from "lbryio.js";
import React from 'react';
import Link from 'component/link';
import CardVerify from 'component/cardVerify';
import lbryio from 'lbryio.js';
class UserVerify extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
code: "",
code: '',
};
}
@ -28,33 +28,27 @@ class UserVerify extends React.PureComponent {
<div>
<section className="card card--form">
<div className="card__title-primary">
<h1>{__("Final Human Proof")}</h1>
<h1>{__('Final Human Proof')}</h1>
</div>
<div className="card__content">
<p>
Finally, please complete <strong>one and only one</strong> of the
options below.
Finally, please complete <strong>one and only one</strong> of the options below.
</p>
</div>
</section>
<section className="card card--form">
<div className="card__title-primary">
<h3>{__("1) Proof via Credit")}</h3>
<h3>{__('1) Proof via Credit')}</h3>
</div>
<div className="card__content">
{__(
"If you have a valid credit or debit card, you can use it to instantly prove your humanity."
) +
" " +
__("There is no charge at all for this, now or in the future.") +
" "}
{`${__(
'If you have a valid credit or debit card, you can use it to instantly prove your humanity.'
)} ${__('There is no charge at all for this, now or in the future.')} `}
</div>
<div className="card__actions">
{errorMessage && (
<p className="form-field__error">{errorMessage}</p>
)}
{errorMessage && <p className="form-field__error">{errorMessage}</p>}
<CardVerify
label={__("Perform Card Verification")}
label={__('Perform Card Verification')}
disabled={isPending}
token={this.onToken.bind(this)}
stripeKey={lbryio.getStripeToken()}
@ -62,32 +56,27 @@ class UserVerify extends React.PureComponent {
</div>
<div className="card__content">
<div className="meta">
{__(
"A $1 authorization may temporarily appear with your provider."
)}{" "}
{__('A $1 authorization may temporarily appear with your provider.')}{' '}
<Link
href="https://lbry.io/faq/identity-requirements"
label={__("Read more about why we do this.")}
label={__('Read more about why we do this.')}
/>
</div>
</div>
</section>
<section className="card card--form">
<div className="card__title-primary">
<h3>{__("2) Proof via YouTube")}</h3>
<h3>{__('2) Proof via YouTube')}</h3>
</div>
<div className="card__content">
<p>
{__(
"If you have a YouTube account with subscribers and views, you can sync your account and content to be granted instant verification."
'If you have a YouTube account with subscribers and views, you can sync your account and content to be granted instant verification.'
)}
</p>
<p>
{__("Some account minimums apply.")}{" "}
<Link
href="https://lbry.io/faq/youtube"
label={__("Read more.")}
/>
{__('Some account minimums apply.')}{' '}
<Link href="https://lbry.io/faq/youtube" label={__('Read more.')} />
</p>
</div>
<div className="card__actions">
@ -95,30 +84,29 @@ class UserVerify extends React.PureComponent {
href="https://api.lbry.io/yt/connect"
button="alt"
icon="icon-youtube"
label={__("YouTube Account Sync")}
label={__('YouTube Account Sync')}
/>
</div>
<div className="card__content">
<div className="meta">
This will not automatically refresh after approval. Once you have
synced your account, just navigate away or click{" "}
<Link navigate="/rewards" label="here" />.
This will not automatically refresh after approval. Once you have synced your account,
just navigate away or click <Link navigate="/rewards" label="here" />.
</div>
</div>
</section>
<section className="card card--form">
<div className="card__title-primary">
<h3>{__("3) Proof via Chat")}</h3>
<h3>{__('3) Proof via Chat')}</h3>
</div>
<div className="card__content">
<p>
{__(
"A moderator capable of approving you is typically available in the #verification channel of our chat room."
'A moderator capable of approving you is typically available in the #verification channel of our chat room.'
)}
</p>
<p>
{__(
"This process will likely involve providing proof of a stable and established online or real-life identity."
'This process will likely involve providing proof of a stable and established online or real-life identity.'
)}
</p>
</div>
@ -127,27 +115,23 @@ class UserVerify extends React.PureComponent {
href="https://chat.lbry.io"
button="alt"
icon="icon-comments"
label={__("Join LBRY Chat")}
label={__('Join LBRY Chat')}
/>
</div>
</section>
<section className="card card--form">
<div className="card__title-primary">
<h5>{__("Or, Skip It Entirely")}</h5>
<h5>{__('Or, Skip It Entirely')}</h5>
</div>
<div className="card__content">
<p className="meta">
{__(
"You can continue without this step, but you will not be eligible to earn rewards."
'You can continue without this step, but you will not be eligible to earn rewards.'
)}
</p>
</div>
<div className="card__actions">
<Link
onClick={() => navigate("/discover")}
button="alt"
label={__("Skip Rewards")}
/>
<Link onClick={() => navigate('/discover')} button="alt" label={__('Skip Rewards')} />
</div>
</section>
</div>

25
src/renderer/component/video/index.js
View file

@ -1,21 +1,18 @@
import React from "react";
import { connect } from "react-redux";
import { doChangeVolume } from "redux/actions/app";
import { selectVolume } from "redux/selectors/app";
import { doPlayUri, doSetPlayingUri } from "redux/actions/content";
import {
makeSelectMetadataForUri,
makeSelectContentTypeForUri,
} from "redux/selectors/claims";
import React from 'react';
import { connect } from 'react-redux';
import { doChangeVolume } from 'redux/actions/app';
import { selectVolume } from 'redux/selectors/app';
import { doPlayUri, doSetPlayingUri } from 'redux/actions/content';
import { makeSelectMetadataForUri, makeSelectContentTypeForUri } from 'redux/selectors/claims';
import {
makeSelectFileInfoForUri,
makeSelectLoadingForUri,
makeSelectDownloadingForUri,
} from "redux/selectors/file_info";
import { makeSelectCostInfoForUri } from "redux/selectors/cost_info";
import { selectShowNsfw } from "redux/selectors/settings";
import Video from "./view";
import { selectPlayingUri } from "redux/selectors/content";
} from 'redux/selectors/file_info';
import { makeSelectCostInfoForUri } from 'redux/selectors/cost_info';
import { selectShowNsfw } from 'redux/selectors/settings';
import Video from './view';
import { selectPlayingUri } from 'redux/selectors/content';
const select = (state, props) => ({
costInfo: makeSelectCostInfoForUri(props.uri)(state),

4
src/renderer/component/video/internal/loading-screen.jsx
View file

@ -1,5 +1,5 @@
import React from "react";
import Spinner from "component/common/spinner";
import React from 'react';
import Spinner from 'component/common/spinner';
const LoadingScreen = ({ status, spinner = true }) => (
<div className="video__loading-screen">

22
src/renderer/component/video/internal/play-button.jsx
View file

@ -1,21 +1,18 @@
import React from "react";
import Link from "component/link";
import React from 'react';
import Link from 'component/link';
class VideoPlayButton extends React.PureComponent {
componentDidMount() {
this.keyDownListener = this.onKeyDown.bind(this);
document.addEventListener("keydown", this.keyDownListener);
document.addEventListener('keydown', this.keyDownListener);
}
componentWillUnmount() {
document.removeEventListener("keydown", this.keyDownListener);
document.removeEventListener('keydown', this.keyDownListener);
}
onKeyDown(event) {
if (
"input" !== event.target.tagName.toLowerCase() &&
"Space" === event.code
) {
if (event.target.tagName.toLowerCase() !== 'input' && event.code === 'Space') {
event.preventDefault();
this.watch();
}
@ -37,16 +34,13 @@ class VideoPlayButton extends React.PureComponent {
*/
const disabled = isLoading || fileInfo === undefined;
const icon =
["audio", "video"].indexOf(mediaType) !== -1
? "icon-play"
: "icon-folder-o";
const icon = ['audio', 'video'].indexOf(mediaType) !== -1 ? 'icon-play' : 'icon-folder-o';
return (
<Link
button={button ? button : null}
button={button || null}
disabled={disabled}
label={label ? label : ""}
label={label || ''}
className="video__play-button"
icon={icon}
onClick={() => this.watch()}

74
src/renderer/component/video/internal/player.jsx
View file

@ -1,12 +1,13 @@
const { remote } = require("electron");
import React from "react";
import { Thumbnail } from "component/common";
import player from "render-media";
import fs from "fs";
import LoadingScreen from "./loading-screen";
const { remote } = require('electron');
import React from 'react';
import { Thumbnail } from 'component/common';
import player from 'render-media';
import fs from 'fs';
import LoadingScreen from './loading-screen';
class VideoPlayer extends React.PureComponent {
static MP3_CONTENT_TYPES = ["audio/mpeg3", "audio/mpeg"];
static MP3_CONTENT_TYPES = ['audio/mpeg3', 'audio/mpeg'];
constructor(props) {
super(props);
@ -22,13 +23,7 @@ class VideoPlayer extends React.PureComponent {
componentDidMount() {
const container = this.refs.media;
const {
contentType,
downloadPath,
mediaType,
changeVolume,
volume,
} = this.props;
const { contentType, downloadPath, mediaType, changeVolume, volume } = this.props;
const loadedMetadata = e => {
this.setState({ hasMetadata: true, startedPlaying: true });
this.refs.media.children[0].play();
@ -39,10 +34,8 @@ class VideoPlayer extends React.PureComponent {
// Handle fullscreen change for the Windows platform
const win32FullScreenChange = e => {
const win = remote.BrowserWindow.getFocusedWindow();
if ("win32" === process.platform) {
win.setMenu(
document.webkitIsFullScreen ? null : remote.Menu.getApplicationMenu()
);
if (process.platform === 'win32') {
win.setMenu(document.webkitIsFullScreen ? null : remote.Menu.getApplicationMenu());
}
};
@ -58,22 +51,15 @@ class VideoPlayer extends React.PureComponent {
);
}
document.addEventListener("keydown", this.togglePlayListener);
document.addEventListener('keydown', this.togglePlayListener);
const mediaElement = this.refs.media.children[0];
if (mediaElement) {
mediaElement.addEventListener("click", this.togglePlayListener);
mediaElement.addEventListener(
"loadedmetadata",
loadedMetadata.bind(this),
{
once: true,
}
);
mediaElement.addEventListener(
"webkitfullscreenchange",
win32FullScreenChange.bind(this)
);
mediaElement.addEventListener("volumechange", () => {
mediaElement.addEventListener('click', this.togglePlayListener);
mediaElement.addEventListener('loadedmetadata', loadedMetadata.bind(this), {
once: true,
});
mediaElement.addEventListener('webkitfullscreenchange', win32FullScreenChange.bind(this));
mediaElement.addEventListener('volumechange', () => {
changeVolume(mediaElement.volume);
});
mediaElement.volume = volume;
@ -81,10 +67,10 @@ class VideoPlayer extends React.PureComponent {
}
componentWillUnmount() {
document.removeEventListener("keydown", this.togglePlayListener);
document.removeEventListener('keydown', this.togglePlayListener);
const mediaElement = this.refs.media.children[0];
if (mediaElement) {
mediaElement.removeEventListener("click", this.togglePlayListener);
mediaElement.removeEventListener('click', this.togglePlayListener);
}
}
@ -95,7 +81,7 @@ class VideoPlayer extends React.PureComponent {
// clear the container
const { downloadPath } = this.props;
const audio = document.createElement("audio");
const audio = document.createElement('audio');
audio.autoplay = autoplay;
audio.controls = true;
audio.src = downloadPath;
@ -105,8 +91,8 @@ class VideoPlayer extends React.PureComponent {
togglePlay(event) {
// ignore all events except click and spacebar keydown, or input events in a form control
if (
"keydown" === event.type &&
("Space" !== event.code || "input" === event.target.tagName.toLowerCase())
event.type === 'keydown' &&
(event.code !== 'Space' || event.target.tagName.toLowerCase() === 'input')
) {
return;
}
@ -144,37 +130,33 @@ class VideoPlayer extends React.PureComponent {
return {
name: filename,
createReadStream: opts => {
return fs.createReadStream(downloadPath, opts);
},
createReadStream: opts => fs.createReadStream(downloadPath, opts),
};
}
playableType() {
const { mediaType } = this.props;
return ["audio", "video"].indexOf(mediaType) !== -1;
return ['audio', 'video'].indexOf(mediaType) !== -1;
}
render() {
const { mediaType, poster } = this.props;
const { hasMetadata, unplayable } = this.state;
const noMetadataMessage = "Waiting for metadata.";
const noMetadataMessage = 'Waiting for metadata.';
const unplayableMessage = "Sorry, looks like we can't play this file.";
const needsMetadata = this.playableType();
return (
<div>
{["audio", "application"].indexOf(mediaType) !== -1 &&
{['audio', 'application'].indexOf(mediaType) !== -1 &&
(!this.playableType() || hasMetadata) &&
!unplayable && <Thumbnail src={poster} className="video-embedded" />}
{this.playableType() &&
!hasMetadata &&
!unplayable && <LoadingScreen status={noMetadataMessage} />}
{unplayable && (
<LoadingScreen status={unplayableMessage} spinner={false} />
)}
{unplayable && <LoadingScreen status={unplayableMessage} spinner={false} />}
<div ref="media" className="media" />
</div>
);

Some files were not shown because too many files have changed in this diff Show more