+ )}
+
+ );
+ }
+}
+
export default Page;
diff --git a/src/renderer/component/spinner/index.js b/src/renderer/component/spinner/index.js
new file mode 100644
index 000000000..6589e05da
--- /dev/null
+++ b/src/renderer/component/spinner/index.js
@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { selectTheme } from 'redux/selectors/settings';
+import Spinner from './view';
+
+const mapStateToProps = state => ({
+ theme: selectTheme(state),
+});
+
+export default connect(mapStateToProps, null)(Spinner);
diff --git a/src/renderer/component/spinner/view.jsx b/src/renderer/component/spinner/view.jsx
new file mode 100644
index 000000000..bb44ee6f7
--- /dev/null
+++ b/src/renderer/component/spinner/view.jsx
@@ -0,0 +1,36 @@
+// @flow
+import * as React from 'react';
+import classnames from 'classnames';
+import { DARK_THEME, LIGHT_THEME } from 'constants/themes';
+
+type Props = {
+ dark?: boolean, // always a dark spinner
+ light?: boolean, // always a light spinner
+ theme: string,
+};
+
+const Spinner = (props: Props) => {
+ const { dark, light, theme } = props;
+
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+Spinner.defaultProps = {
+ dark: false,
+ light: false,
+};
+
+export default Spinner;
diff --git a/src/renderer/component/subscribeButton/view.jsx b/src/renderer/component/subscribeButton/view.jsx
index 1a341447f..52516dfb8 100644
--- a/src/renderer/component/subscribeButton/view.jsx
+++ b/src/renderer/component/subscribeButton/view.jsx
@@ -3,7 +3,7 @@ import React from 'react';
import { MODALS } from 'lbry-redux';
import * as icons from 'constants/icons';
import Button from 'component/button';
-import type { Subscription } from 'redux/reducers/subscriptions';
+import type { Subscription } from 'types/subscription';
type SubscribtionArgs = {
channelName: string,
diff --git a/src/renderer/component/uriIndicator/view.jsx b/src/renderer/component/uriIndicator/view.jsx
index 499b11fba..98c249932 100644
--- a/src/renderer/component/uriIndicator/view.jsx
+++ b/src/renderer/component/uriIndicator/view.jsx
@@ -3,21 +3,18 @@ import React from 'react';
import Button from 'component/button';
import { buildURI } from 'lbry-redux';
import classnames from 'classnames';
-// import Icon from 'component/common/icon';
+import type { Claim } from 'types/claim';
type Props = {
isResolvingUri: boolean,
- resolveUri: string => void,
- claim: {
- channel_name: string,
- has_signature: boolean,
- signature_is_valid: boolean,
- value: {
- publisherSignature: { certificateId: string },
- },
- },
- uri: string,
+ claim: Claim,
link: ?boolean,
+ // Lint thinks we aren't using these, even though we are.
+ // Possibly because the resolve function is an arrow function that is passed in props?
+ /* eslint-disable react/no-unused-prop-types */
+ resolveUri: string => void,
+ uri: string,
+ /* eslint-enable react/no-unused-prop-types */
};
class UriIndicator extends React.PureComponent {
diff --git a/src/renderer/component/video/internal/loading-screen.jsx b/src/renderer/component/video/internal/loading-screen.jsx
index ccada9d41..f313b412d 100644
--- a/src/renderer/component/video/internal/loading-screen.jsx
+++ b/src/renderer/component/video/internal/loading-screen.jsx
@@ -1,6 +1,6 @@
// @flow
import React from 'react';
-import Spinner from 'component/common/spinner';
+import Spinner from 'component/spinner';
type Props = {
spinner: boolean,
@@ -16,7 +16,7 @@ class LoadingScreen extends React.PureComponent {
const { status, spinner } = this.props;
return (
- {spinner && }
+ {spinner && }
{status}
diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx
index c1663c5e3..761a19e10 100644
--- a/src/renderer/component/video/view.jsx
+++ b/src/renderer/component/video/view.jsx
@@ -2,6 +2,7 @@
import React from 'react';
import { Lbry } from 'lbry-redux';
import classnames from 'classnames';
+import type { Claim } from 'types/claim';
import VideoPlayer from './internal/player';
import VideoPlayButton from './internal/play-button';
import LoadingScreen from './internal/loading-screen';
@@ -26,7 +27,7 @@ type Props = {
contentType: string,
changeVolume: number => void,
volume: number,
- claim: {},
+ claim: Claim,
uri: string,
doPlay: () => void,
doPause: () => void,
diff --git a/src/renderer/component/walletSendTip/view.jsx b/src/renderer/component/walletSendTip/view.jsx
index 9af0da866..a8d10a8a5 100644
--- a/src/renderer/component/walletSendTip/view.jsx
+++ b/src/renderer/component/walletSendTip/view.jsx
@@ -3,11 +3,12 @@ import React from 'react';
import Button from 'component/button';
import { FormField } from 'component/common/form';
import UriIndicator from 'component/uriIndicator';
+import type { Claim } from 'types/claim';
type Props = {
uri: string,
title: string,
- claim: { claim_id: string },
+ claim: Claim,
errorMessage: string,
isPending: boolean,
sendSupport: (number, string, string) => void,
diff --git a/src/renderer/constants/action_types.js b/src/renderer/constants/action_types.js
index 27678804b..3ffe23e6e 100644
--- a/src/renderer/constants/action_types.js
+++ b/src/renderer/constants/action_types.js
@@ -1,3 +1,13 @@
+/*
+ Constants for redux actions
+ All names should be in present tense
+ ex:
+ XXX_START
+ XXX_SUCCESS
+ XXX_FAIL
+ XXX_COMPLETE // if there is no fail case
+*/
+
export const WINDOW_FOCUSED = 'WINDOW_FOCUSED';
export const DAEMON_READY = 'DAEMON_READY';
export const DAEMON_VERSION_MATCH = 'DAEMON_VERSION_MATCH';
@@ -166,6 +176,9 @@ export const SET_SUBSCRIPTION_NOTIFICATIONS = 'SET_SUBSCRIPTION_NOTIFICATIONS';
export const CHECK_SUBSCRIPTION_STARTED = 'CHECK_SUBSCRIPTION_STARTED';
export const CHECK_SUBSCRIPTION_COMPLETED = 'CHECK_SUBSCRIPTION_COMPLETED';
export const CHECK_SUBSCRIPTIONS_SUBSCRIBE = 'CHECK_SUBSCRIPTIONS_SUBSCRIBE';
+export const FETCH_SUBSCRIPTIONS_START = 'FETCH_SUBSCRIPTIONS_START';
+export const FETCH_SUBSCRIPTIONS_FAIL = 'FETCH_SUBSCRIPTIONS_FAIL';
+export const FETCH_SUBSCRIPTIONS_SUCCESS = 'FETCH_SUBSCRIPTIONS_SUCCESS';
// Video controls
export const SET_VIDEO_PAUSE = 'SET_VIDEO_PAUSE';
diff --git a/src/renderer/constants/themes.js b/src/renderer/constants/themes.js
new file mode 100644
index 000000000..0b9cc53b6
--- /dev/null
+++ b/src/renderer/constants/themes.js
@@ -0,0 +1,4 @@
+// css theme values
+// saved in settings and found at /static/themes/{theme}.css
+export const DARK_THEME = 'dark';
+export const LIGHT_THEME = 'light';
diff --git a/src/renderer/page/channel/view.jsx b/src/renderer/page/channel/view.jsx
index 59a5b5531..693cb3c89 100644
--- a/src/renderer/page/channel/view.jsx
+++ b/src/renderer/page/channel/view.jsx
@@ -6,6 +6,7 @@ import ReactPaginate from 'react-paginate';
import SubscribeButton from 'component/subscribeButton';
import Page from 'component/page';
import FileList from 'component/fileList';
+import type { Claim } from 'types/claim';
type Props = {
uri: string,
@@ -13,10 +14,7 @@ type Props = {
totalPages: number,
fetching: boolean,
params: { page: number },
- claim: {
- name: string,
- claim_id: string,
- },
+ claim: Claim,
claimsInChannel: Array<{}>,
fetchClaims: (string, number) => void,
fetchClaimCount: string => void,
@@ -58,8 +56,8 @@ class ChannelPage extends React.PureComponent {
}
render() {
- const { fetching, claimsInChannel, claim, uri, page, totalPages } = this.props;
- const { name } = claim;
+ const { fetching, claimsInChannel, claim, page, totalPages } = this.props;
+ const { name, permanent_url: permanentUrl } = claim;
let contentList;
if (fetching) {
@@ -78,7 +76,7 @@ class ChannelPage extends React.PureComponent {
{name}
-
+
{contentList}
diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx
index 40cc010a2..bf7c34846 100644
--- a/src/renderer/page/file/view.jsx
+++ b/src/renderer/page/file/view.jsx
@@ -16,18 +16,10 @@ import SubscribeButton from 'component/subscribeButton';
import Page from 'component/page';
import player from 'render-media';
import * as settings from 'constants/settings';
+import type { Claim } from 'types/claim';
type Props = {
- claim: {
- claim_id: string,
- height: number,
- channel_name: string,
- value: {
- publisherSignature: ?{
- certificateId: ?string,
- },
- },
- },
+ claim: Claim,
fileInfo: {},
metadata: {
title: string,
diff --git a/src/renderer/page/show/view.jsx b/src/renderer/page/show/view.jsx
index aa6e042ad..afa753be6 100644
--- a/src/renderer/page/show/view.jsx
+++ b/src/renderer/page/show/view.jsx
@@ -5,16 +5,13 @@ import ChannelPage from 'page/channel';
import FilePage from 'page/file';
import Page from 'component/page';
import Button from 'component/button';
+import type { Claim } from 'types/claim';
type Props = {
isResolvingUri: boolean,
resolveUri: string => void,
uri: string,
- claim: {
- name: string,
- txid: string,
- nout: number,
- },
+ claim: Claim,
blackListedOutpoints: Array<{
txid: string,
nout: number,
diff --git a/src/renderer/page/subscriptions/index.js b/src/renderer/page/subscriptions/index.js
index 4d1ce6409..433adc80c 100644
--- a/src/renderer/page/subscriptions/index.js
+++ b/src/renderer/page/subscriptions/index.js
@@ -1,27 +1,25 @@
-import React from 'react';
import { connect } from 'react-redux';
import {
- selectSubscriptionsFromClaims,
+ selectSubscriptionClaims,
selectSubscriptions,
- selectHasFetchedSubscriptions,
+ selectSubscriptionsBeingFetched,
+ selectIsFetchingSubscriptions,
selectNotifications,
} from 'redux/selectors/subscriptions';
import { doFetchClaimsByChannel } from 'redux/actions/content';
-import {
- setHasFetchedSubscriptions,
- setSubscriptionNotifications,
-} from 'redux/actions/subscriptions';
+import { setSubscriptionNotifications, doFetchMySubscriptions } from 'redux/actions/subscriptions';
import SubscriptionsPage from './view';
const select = state => ({
- hasFetchedSubscriptions: state.subscriptions.hasFetchedSubscriptions,
- savedSubscriptions: selectSubscriptions(state),
- subscriptions: selectSubscriptionsFromClaims(state),
+ isFetchingSubscriptions: selectIsFetchingSubscriptions(state),
+ subscriptionsBeingFetched: selectSubscriptionsBeingFetched(state),
+ subscriptions: selectSubscriptions(state),
+ subscriptionClaims: selectSubscriptionClaims(state),
notifications: selectNotifications(state),
});
export default connect(select, {
doFetchClaimsByChannel,
- setHasFetchedSubscriptions,
setSubscriptionNotifications,
+ doFetchMySubscriptions,
})(SubscriptionsPage);
diff --git a/src/renderer/page/subscriptions/view.jsx b/src/renderer/page/subscriptions/view.jsx
index 27f3fac45..1ea53e306 100644
--- a/src/renderer/page/subscriptions/view.jsx
+++ b/src/renderer/page/subscriptions/view.jsx
@@ -1,39 +1,28 @@
// @flow
import React from 'react';
import Page from 'component/page';
-import CategoryList from 'component/common/category-list';
-import type { Subscription } from 'redux/reducers/subscriptions';
+import type { Subscription } from 'types/subscription';
import * as NOTIFICATION_TYPES from 'constants/notification_types';
import Button from 'component/button';
-
-type SavedSubscriptions = Array;
+import FileList from 'component/fileList';
+import type { Claim } from 'types/claim';
type Props = {
- doFetchClaimsByChannel: (string, number) => any,
- savedSubscriptions: SavedSubscriptions,
- // TODO build out claim types
- subscriptions: Array,
- setHasFetchedSubscriptions: () => void,
- hasFetchedSubscriptions: boolean,
+ doFetchClaimsByChannel: (string, number) => void,
+ doFetchMySubscriptions: () => void,
+ setSubscriptionNotifications: ({}) => void,
+ subscriptions: Array,
+ isFetchingSubscriptions: boolean,
+ subscriptionClaims: Array<{ uri: string, claims: Array }>,
+ subscriptionsBeingFetched: {},
+ notifications: {},
};
export default class extends React.PureComponent {
- // setHasFetchedSubscriptions is a terrible hack
- // it allows the subscriptions to load correctly when refresing on the subscriptions page
- // currently the page is rendered before the state is rehyrdated
- // that causes this component to be rendered with zero savedSubscriptions
- // we need to wait until persist/REHYDRATE has fired before rendering the page
componentDidMount() {
- const {
- savedSubscriptions,
- setHasFetchedSubscriptions,
- notifications,
- setSubscriptionNotifications,
- } = this.props;
- if (savedSubscriptions.length) {
- this.fetchSubscriptions(savedSubscriptions);
- setHasFetchedSubscriptions();
- }
+ const { notifications, setSubscriptionNotifications, doFetchMySubscriptions } = this.props;
+ doFetchMySubscriptions();
+
const newNotifications = {};
Object.keys(notifications).forEach(cur => {
if (notifications[cur].type === NOTIFICATION_TYPES.DOWNLOADING) {
@@ -43,40 +32,37 @@ export default class extends React.PureComponent {
setSubscriptionNotifications(newNotifications);
}
- componentWillReceiveProps(props: Props) {
- const { savedSubscriptions, hasFetchedSubscriptions, setHasFetchedSubscriptions } = props;
+ componentDidUpdate() {
+ const {
+ subscriptions,
+ subscriptionClaims,
+ doFetchClaimsByChannel,
+ subscriptionsBeingFetched,
+ } = this.props;
- if (!hasFetchedSubscriptions && savedSubscriptions.length) {
- this.fetchSubscriptions(savedSubscriptions);
- setHasFetchedSubscriptions();
- }
- }
+ const subscriptionClaimMap = {};
+ subscriptionClaims.forEach(claim => {
+ subscriptionClaimMap[claim.uri] = 1;
+ });
- fetchSubscriptions(savedSubscriptions: SavedSubscriptions) {
- const { doFetchClaimsByChannel } = this.props;
- if (savedSubscriptions.length) {
- // can this use batchActions?
- savedSubscriptions.forEach(sub => {
+ subscriptions.forEach(sub => {
+ if (!subscriptionClaimMap[sub.uri] && !subscriptionsBeingFetched[sub.uri]) {
doFetchClaimsByChannel(sub.uri, 1);
- });
- }
+ }
+ });
}
render() {
- const { subscriptions, savedSubscriptions } = this.props;
+ const { subscriptions, subscriptionClaims, isFetchingSubscriptions } = this.props;
- // TODO: if you are subscribed to an empty channel, this will always be true (but it should not be)
- const someClaimsNotLoaded = Boolean(
- subscriptions.find(subscription => !subscription.claims.length)
- );
-
- const fetchingSubscriptions =
- !!savedSubscriptions.length &&
- (subscriptions.length !== savedSubscriptions.length || someClaimsNotLoaded);
+ let claimList = [];
+ subscriptionClaims.forEach(claimData => {
+ claimList = claimList.concat(claimData.claims);
+ });
return (
-
- {!savedSubscriptions.length && (
+
+ {!subscriptions.length && (
{__("It looks like you aren't subscribed to any channels yet.")}
@@ -84,28 +70,7 @@ export default class extends React.PureComponent {
)}
- {!!savedSubscriptions.length && (
-
- {!!subscriptions.length &&
- subscriptions.map(subscription => {
- if (!subscription.claims.length) {
- // will need to update when you can subscribe to empty channels
- // for now this prevents issues with FeaturedCategory being rendered
- // before the names (claim uris) are populated
- return '';
- }
-
- return (
-
- );
- })}
-