+ {this.props.children};
+ return {this.props.children};
}
});
diff --git a/ui/js/component/drawer.js b/ui/js/component/drawer.js
deleted file mode 100644
index b19e901f5..000000000
--- a/ui/js/component/drawer.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import lbry from '../lbry.js';
-import React from 'react';
-import {Link} from './link.js';
-
-var DrawerItem = React.createClass({
- getDefaultProps: function() {
- return {
- subPages: [],
- };
- },
- render: function() {
- var isSelected = (this.props.viewingPage == this.props.href.substr(1) ||
- this.props.subPages.indexOf(this.props.viewingPage) != -1);
- return
- }
-});
-
-var drawerImageStyle = { //@TODO: remove this, img should be properly scaled once size is settled
- height: '36px'
-};
-
-var Drawer = React.createClass({
- _balanceSubscribeId: null,
-
- handleLogoClicked: function(event) {
- if ((event.ctrlKey || event.metaKey) && event.shiftKey) {
- window.location.href = '?developer'
- event.preventDefault();
- }
- },
- getInitialState: function() {
- return {
- balance: 0,
- };
- },
- componentDidMount: function() {
- this._balanceSubscribeId = lbry.balanceSubscribe((balance) => {
- this.setState({
- balance: balance
- });
- });
- },
- componentWillUnmount: function() {
- if (this._balanceSubscribeId) {
- lbry.balanceUnsubscribe(this._balanceSubscribeId)
- }
- },
- render: function() {
- return (
-
- );
- }
-});
-
-
-export default Drawer;
diff --git a/ui/js/component/file-tile.js b/ui/js/component/file-tile.js
index 51413bd02..73adb63b2 100644
--- a/ui/js/component/file-tile.js
+++ b/ui/js/component/file-tile.js
@@ -3,7 +3,7 @@ import lbry from '../lbry.js';
import lbryuri from '../lbryuri.js';
import {Link} from '../component/link.js';
import {FileActions} from '../component/file-actions.js';
-import {Thumbnail, TruncatedText, FilePrice} from '../component/common.js';
+import {BusyMessage, TruncatedText, FilePrice} from '../component/common.js';
import UriIndicator from '../component/channel-indicator.js';
/*should be merged into FileTile once FileTile is refactored to take a single id*/
@@ -77,40 +77,32 @@ export let FileTileStream = React.createClass({
const isConfirmed = !!metadata;
const title = isConfirmed ? metadata.title : uri;
const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw;
+ const primaryUrl = "?show=" + uri;
return (
-
{mainContent}
-
-
-
- { !this.props.hidePrice
- ?
-
-
+
+
-
);
diff --git a/ui/js/lbry.js b/ui/js/lbry.js
index e2807090a..4c0d511d4 100644
--- a/ui/js/lbry.js
+++ b/ui/js/lbry.js
@@ -31,7 +31,6 @@ function savePendingPublish({name, channel_name}) {
return newPendingPublish;
}
-
/**
* If there is a pending publish with the given name or outpoint, remove it.
* A channel name may also be provided along with name.
@@ -132,6 +131,21 @@ lbry.connect = function() {
return lbry._connectPromise;
}
+
+//kill this but still better than document.title =, which this replaced
+lbry.setTitle = function(title) {
+ document.title = title + " - LBRY";
+}
+
+//kill this with proper routing
+lbry.back = function() {
+ if (window.history.length > 1) {
+ window.history.back();
+ } else {
+ window.location.href = "?discover";
+ }
+}
+
lbry.isDaemonAcceptingConnections = function (callback) {
// Returns true/false whether the daemon is at a point it will start returning status
lbry.call('status', {}, () => callback(true), null, () => callback(false))
@@ -633,7 +647,7 @@ lbry.resolve = function(params={}) {
if (!params.uri) {
throw "Resolve has hacked cache on top of it that requires a URI"
}
- if (params.uri && claimCache[params.uri]) {
+ if (params.uri && claimCache[params.uri] !== undefined) {
resolve(claimCache[params.uri]);
} else {
lbry.call('resolve', params, function(data) {
diff --git a/ui/js/lbryio.js b/ui/js/lbryio.js
index bbe6b9ccd..20934bbbb 100644
--- a/ui/js/lbryio.js
+++ b/ui/js/lbryio.js
@@ -7,7 +7,7 @@ const lbryio = {
_accessToken: getLocal('accessToken'),
_authenticationPromise: null,
_user : null,
- enabled: true
+ enabled: false
};
const CONNECTION_STRING = process.env.LBRY_APP_API_URL ? process.env.LBRY_APP_API_URL : 'https://api.lbry.io/';
@@ -150,20 +150,6 @@ lbryio.authenticate = function() {
} else {
setCurrentUser()
}
- // if (!lbryio._
- //(data) => {
- // resolve(data)
- // localStorage.setItem('accessToken', ID);
- // localStorage.setItem('appId', installation_id);
- // this.setState({
- // registrationCheckComplete: true,
- // justRegistered: true,
- // });
- //});
- // lbryio.call('user_install', 'exists', {app_id: installation_id}).then((userExists) => {
- // // TODO: deal with case where user exists already with the same app ID, but we have no access token.
- // // Possibly merge in to the existing user with the same app ID.
- // })
}).catch(reject);
});
}
diff --git a/ui/js/page/discover.js b/ui/js/page/discover.js
index 42ed3999d..d522a99f8 100644
--- a/ui/js/page/discover.js
+++ b/ui/js/page/discover.js
@@ -1,79 +1,18 @@
import React from 'react';
-import lbry from '../lbry.js';
import lbryio from '../lbryio.js';
-import lbryuri from '../lbryuri.js';
-import lighthouse from '../lighthouse.js';
import {FileTile, FileTileStream} from '../component/file-tile.js';
-import {Link} from '../component/link.js';
import {ToolTip} from '../component/tooltip.js';
-import {BusyMessage} from '../component/common.js';
-
-var fetchResultsStyle = {
- color: '#888',
- textAlign: 'center',
- fontSize: '1.2em'
- };
-
-var SearchActive = React.createClass({
- render: function() {
- return (
-
- No one has checked anything in for {this.props.query} yet.
-
-
- );
- }
-});
-
-var SearchResults = React.createClass({
- render: function() {
- var rows = [],
- seenNames = {}; //fix this when the search API returns claim IDs
-
- for (let {name, claim, claim_id, channel_name, channel_id, txid, nout} of this.props.results) {
- const uri = lbryuri.build({
- channelName: channel_name,
- contentName: name,
- claimId: channel_id || claim_id,
- });
-
- rows.push(
-
-
-
- {title}
-
-
-
+
+
+
-
+
{this.state.showNsfwHelp
?
-
-
-
-
-
+
+ { !this.props.hidePrice
+ ?
+ {uri}
+
+
+
@@ -227,6 +219,7 @@ export let FileCardStream = React.createClass({
export let FileTile = React.createClass({
_isMounted: false,
+ _isResolvePending: false,
propTypes: {
uri: React.PropTypes.string.isRequired,
@@ -238,13 +231,12 @@ export let FileTile = React.createClass({
claimInfo: null
}
},
-
- componentDidMount: function() {
- this._isMounted = true;
-
- lbry.resolve({uri: this.props.uri}).then((resolutionInfo) => {
+ resolve: function(uri) {
+ this._isResolvePending = true;
+ lbry.resolve({uri: uri}).then((resolutionInfo) => {
+ this._isResolvePending = false;
if (this._isMounted && resolutionInfo && resolutionInfo.claim && resolutionInfo.claim.value &&
- resolutionInfo.claim.value.stream && resolutionInfo.claim.value.stream.metadata) {
+ resolutionInfo.claim.value.stream && resolutionInfo.claim.value.stream.metadata) {
// In case of a failed lookup, metadata will be null, in which case the component will never display
this.setState({
claimInfo: resolutionInfo.claim,
@@ -252,6 +244,16 @@ export let FileTile = React.createClass({
}
});
},
+ componentWillReceiveProps: function(nextProps) {
+ if (nextProps.uri != this.props.uri) {
+ this.setState(this.getInitialState());
+ this.resolve(nextProps.uri);
+ }
+ },
+ componentDidMount: function() {
+ this._isMounted = true;
+ this.resolve(this.props.uri);
+ },
componentWillUnmount: function() {
this._isMounted = false;
},
@@ -261,6 +263,12 @@ export let FileTile = React.createClass({
return
{lbryuri.normalize(this.props.uri)} is unclaimed.
;
+ }
return null;
}
diff --git a/ui/js/component/header.js b/ui/js/component/header.js
index 32315ef2f..848f076a2 100644
--- a/ui/js/component/header.js
+++ b/ui/js/component/header.js
@@ -1,76 +1,198 @@
import React from 'react';
+import lbryuri from '../lbryuri.js';
import {Link} from './link.js';
-import {Icon} from './common.js';
+import {Icon, CreditAmount} from './common.js';
var Header = React.createClass({
+ _balanceSubscribeId: null,
+ _isMounted: false,
+
+ propTypes: {
+ onSearch: React.PropTypes.func.isRequired,
+ onSubmit: React.PropTypes.func.isRequired
+ },
+
getInitialState: function() {
return {
- title: "LBRY",
- isScrolled: false
+ balance: 0
};
},
- componentWillMount: function() {
- new MutationObserver((mutations) => {
- this.setState({ title: mutations[0].target.textContent });
- }).observe(
- document.querySelector('title'),
- { subtree: true, characterData: true, childList: true }
- );
- },
componentDidMount: function() {
- document.addEventListener('scroll', this.handleScroll);
- },
- componentWillUnmount: function() {
- document.removeEventListener('scroll', this.handleScroll);
- if (this.userTypingTimer)
- {
- clearTimeout(this.userTypingTimer);
- }
- },
- handleScroll: function() {
- this.setState({
- isScrolled: document.body.scrollTop > 0
+ this._isMounted = true;
+ this._balanceSubscribeId = lbry.balanceSubscribe((balance) => {
+ if (this._isMounted) {
+ this.setState({balance: balance});
+ }
});
},
- onQueryChange: function(event) {
-
- if (this.userTypingTimer)
- {
- clearTimeout(this.userTypingTimer);
+ componentWillUnmount: function() {
+ this._isMounted = false;
+ if (this._balanceSubscribeId) {
+ lbry.balanceUnsubscribe(this._balanceSubscribeId)
}
-
- //@TODO: Switch to React.js timing
- var searchTerm = event.target.value;
- this.userTypingTimer = setTimeout(() => {
- this.props.onSearch(searchTerm);
- }, 800); // 800ms delay, tweak for faster/slower
-
},
render: function() {
- return (
-
-
-
+
- );
}
});
-var SubHeader = React.createClass({
+class WunderBar extends React.PureComponent {
+ static propTypes = {
+ onSearch: React.PropTypes.func.isRequired,
+ onSubmit: React.PropTypes.func.isRequired
+ }
+
+ constructor(props) {
+ super(props);
+ this._userTypingTimer = null;
+ this._input = null;
+ this._stateBeforeSearch = null;
+ this._resetOnNextBlur = true;
+ this.onChange = this.onChange.bind(this);
+ this.onFocus = this.onFocus.bind(this);
+ this.onBlur = this.onBlur.bind(this);
+ this.onKeyPress = this.onKeyPress.bind(this);
+ this.onReceiveRef = this.onReceiveRef.bind(this);
+ this.state = {
+ address: this.props.address,
+ icon: this.props.icon
+ };
+ }
+
+ componentWillUnmount() {
+ if (this.userTypingTimer) {
+ clearTimeout(this._userTypingTimer);
+ }
+ }
+
+ onChange(event) {
+
+ if (this._userTypingTimer)
+ {
+ clearTimeout(this._userTypingTimer);
+ }
+
+ this.setState({ address: event.target.value })
+
+ let searchTerm = event.target.value;
+
+ this._userTypingTimer = setTimeout(() => {
+ this._resetOnNextBlur = false;
+ this.props.onSearch(searchTerm);
+ }, 800); // 800ms delay, tweak for faster/slower
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.viewingPage !== this.props.viewingPage || nextProps.address != this.props.address) {
+ this.setState({ address: nextProps.address, icon: nextProps.icon });
+ }
+ }
+
+ onFocus() {
+ this._stateBeforeSearch = this.state;
+ let newState = {
+ icon: "icon-search",
+ isActive: true
+ }
+
+ this._focusPending = true;
+ //below is hacking, improved when we have proper routing
+ if (!this.state.address.startsWith('lbry://') && this.state.icon !== "icon-search") //onFocus, if they are not on an exact URL or a search page, clear the bar
+ {
+ newState.address = '';
+ }
+ this.setState(newState);
+ }
+
+ onBlur() {
+ let commonState = {isActive: false};
+ if (this._resetOnNextBlur) {
+ this.setState(Object.assign({}, this._stateBeforeSearch, commonState));
+ this._input.value = this.state.address;
+ } else {
+ this._resetOnNextBlur = true;
+ this._stateBeforeSearch = this.state;
+ this.setState(commonState);
+ }
+ }
+
+ componentDidUpdate() {
+ this._input.value = this.state.address;
+ if (this._input && this._focusPending) {
+ this._input.select();
+ this._focusPending = false;
+ }
+ }
+
+ onKeyPress(event) {
+ if (event.charCode == 13 && this._input.value) {
+
+ let uri = null,
+ method = "onSubmit";
+
+ this._resetOnNextBlur = false;
+ clearTimeout(this._userTypingTimer);
+
+ try {
+ uri = lbryuri.normalize(this._input.value);
+ this.setState({ value: uri });
+ } catch (error) { //then it's not a valid URL, so let's search
+ uri = this._input.value;
+ method = "onSearch";
+ }
+
+ this.props[method](uri);
+ this._input.blur();
+ }
+ }
+
+ onReceiveRef(ref) {
+ this._input = ref;
+ }
+
+ render() {
+ return (
+
{ this.state.title }
-
-
+ return
+ { lbry.back() }} button="alt button--flat" icon="icon-arrow-left" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- {
- this.props.links ?
-
+ {this.state.icon ?
+ );
+ }
+}
+
+export let SubHeader = React.createClass({
render: function() {
- var links = [],
+ let links = [],
viewingUrl = '?' + this.props.viewingPage;
for (let link of Object.keys(this.props.links)) {
@@ -81,7 +203,7 @@ var SubHeader = React.createClass({
);
}
return (
-
-
- );
- }
-});
-
-var searchNoResultsStyle = {
- textAlign: 'center'
-}, searchNoResultsMessageStyle = {
- fontStyle: 'italic',
- marginRight: '5px'
-};
-
-var SearchNoResults = React.createClass({
- render: function() {
- return (
- {rows}
- );
- }
-});
const communityCategoryToolTipText = ('Community Content is a public space where anyone can share content with the ' +
-'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' +
+ 'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' +
'"five" to put your content here!');
-var FeaturedCategory = React.createClass({
+let FeaturedCategory = React.createClass({
render: function() {
return (
{ this.props.category ?
{this.props.category}
- { this.props.category == "community" ?
+ { this.props.category.match(/^community/i) ?
: '' }
@@ -82,7 +21,7 @@ var FeaturedCategory = React.createClass({
}
})
-var FeaturedContent = React.createClass({
+let DiscoverPage = React.createClass({
getInitialState: function() {
return {
featuredUris: {},
@@ -105,101 +44,19 @@ var FeaturedContent = React.createClass({
});
},
render: function() {
- return (
+ return {
this.state.failed ?
- { this.state.searching ?
- );
+ } ;
}
});
diff --git a/ui/js/page/file-list.js b/ui/js/page/file-list.js
index 063730e7f..71f8e2fc2 100644
--- a/ui/js/page/file-list.js
+++ b/ui/js/page/file-list.js
@@ -3,12 +3,22 @@ import lbry from '../lbry.js';
import lbryuri from '../lbryuri.js';
import {Link} from '../component/link.js';
import {FormField} from '../component/form.js';
+import {SubHeader} from '../component/header.js';
import {FileTileStream} from '../component/file-tile.js';
import rewards from '../rewards.js';
import lbryio from '../lbryio.js';
import {BusyMessage, Thumbnail} from '../component/common.js';
+export let FileListNav = React.createClass({
+ render: function() {
+ return
-
- );
+ content =
- You haven't downloaded anything from LBRY yet. Go !
-
- );
+ content = You haven't downloaded anything from LBRY yet. Go !;
} else {
- return (
-
-
- );
+ content =
+
+ );
}
});
@@ -79,12 +83,11 @@ export let FileListPublished = React.createClass({
else {
rewards.claimReward(rewards.TYPE_FIRST_PUBLISH).catch(() => {})
}
- });
+ }, () => {});
},
componentDidMount: function () {
this._isMounted = true;
this._requestPublishReward();
- document.title = "Published Files";
lbry.claim_list_mine().then((claimInfos) => {
if (!this._isMounted) { return; }
@@ -103,27 +106,22 @@ export let FileListPublished = React.createClass({
this._isMounted = false;
},
render: function () {
+ let content = null;
if (this.state.fileInfos === null) {
- return (
-
-
- );
+ content =
- You haven't published anything to LBRY yet. Try !
-
- );
+ content = You haven't published anything to LBRY yet. Try !;
}
else {
- return (
-
-
- );
+ content =
+
+ );
}
});
diff --git a/ui/js/page/help.js b/ui/js/page/help.js
index 99e6ad0d7..d6a28ae99 100644
--- a/ui/js/page/help.js
+++ b/ui/js/page/help.js
@@ -3,6 +3,7 @@
import React from 'react';
import lbry from '../lbry.js';
import {Link} from '../component/link.js';
+import {SettingsNav} from './settings.js';
import {version as uiVersion} from 'json!../../package.json';
var HelpPage = React.createClass({
@@ -24,9 +25,6 @@ var HelpPage = React.createClass({
});
});
},
- componentDidMount: function() {
- document.title = "Help";
- },
render: function() {
let ver, osName, platform, newVerLink;
if (this.state.versionInfo) {
@@ -49,7 +47,8 @@ var HelpPage = React.createClass({
}
return (
-
+
+
+
{this.props.category}
- { this.props.category == "community" ?
+ { this.props.category.match(/^community/i) ?
: '' }
@@ -82,7 +21,7 @@ var FeaturedCategory = React.createClass({
}
})
-var FeaturedContent = React.createClass({
+let DiscoverPage = React.createClass({
getInitialState: function() {
return {
featuredUris: {},
@@ -105,101 +44,19 @@ var FeaturedContent = React.createClass({
});
},
render: function() {
- return (
+ return Failed to load landing content.
:
{
- Object.keys(this.state.featuredUris).map((category) => {
- return this.state.featuredUris[category].length ?
-
- );
- }
-});
-
-var DiscoverPage = React.createClass({
- userTypingTimer: null,
-
- propTypes: {
- showWelcome: React.PropTypes.bool.isRequired,
- },
-
- componentDidUpdate: function() {
- if (this.props.query != this.state.query)
- {
- this.handleSearchChanged(this.props.query);
- }
- },
-
- getDefaultProps: function() {
- return {
- showWelcome: false,
- }
- },
-
- componentWillReceiveProps: function(nextProps, nextState) {
- if (nextProps.query != nextState.query)
- {
- this.handleSearchChanged(nextProps.query);
- }
- },
-
- handleSearchChanged: function(query) {
- this.setState({
- searching: true,
- query: query,
- });
-
- lighthouse.search(query).then(this.searchCallback);
- },
-
- handleWelcomeDone: function() {
- this.setState({
- welcomeComplete: true,
- });
- },
-
- componentWillMount: function() {
- document.title = "Discover";
-
- if (this.props.query) {
- // Rendering with a query already typed
- this.handleSearchChanged(this.props.query);
- }
- },
-
- getInitialState: function() {
- return {
- welcomeComplete: false,
- results: [],
- query: this.props.query,
- searching: ('query' in this.props) && (this.props.query.length > 0)
- };
- },
-
- searchCallback: function(results) {
- if (this.state.searching) //could have canceled while results were pending, in which case nothing to do
- {
- this.setState({
- results: results,
- searching: false //multiple searches can be out, we're only done if we receive one we actually care about
- });
- }
- },
-
- render: function() {
- return (
-