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

Convert UI to use outpoints for unique IDs

Browse source 
This covers *almost* everything. There are a couple of places that
still use names or SD hashes because the APIs haven't been updated
yet.
This commit is contained in:
Alex Liebowitz 2017-03-08 02:17:16 -05:00
parent cba3ec3091
commit 3b428c394c
7 changed files with 84 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/CHANGELOG.md
View file

@ -10,6 +10,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
### Added ### Added
* You can now make API calls directly on the lbry module, e.g. lbry.peer_list() * You can now make API calls directly on the lbry module, e.g. lbry.peer_list()
* New-style API calls return promises instead of using callbacks * New-style API calls return promises instead of using callbacks
* Wherever possible, use outpoints for unique IDs instead of names or SD hashes
### Changed ### Changed
* *

18
ui/js/component/file-actions.js
View file

@ -68,7 +68,7 @@ let FileActionsRow = React.createClass({
propTypes: { propTypes: {
streamName: React.PropTypes.string, streamName: React.PropTypes.string,
sdHash: React.PropTypes.string.isRequired, outpoint: React.PropTypes.string.isRequired,
metadata: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]), metadata: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]),
}, },
getInitialState: function() { getInitialState: function() {
@ -145,11 +145,7 @@ let FileActionsRow = React.createClass({
}); });
}, },
handleRemoveConfirmed: function() { handleRemoveConfirmed: function() {
if (this.props.streamName) { lbry.removeFile(this.props.outpoint, this.state.deleteChecked);
lbry.removeFile(this.props.sdHash, this.props.streamName, this.state.deleteChecked);
} else {
alert('this file cannot be deleted because lbry is a retarded piece of shit');
}
this.setState({ this.setState({
modal: null, modal: null,
fileInfo: false, fileInfo: false,
@ -163,12 +159,12 @@ let FileActionsRow = React.createClass({
}, },
componentDidMount: function() { componentDidMount: function() {
this._isMounted = true; this._isMounted = true;
this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.sdHash, this.onFileInfoUpdate); this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate);
}, },
componentWillUnmount: function() { componentWillUnmount: function() {
this._isMounted = false; this._isMounted = false;
if (this._fileInfoSubscribeId) { if (this._fileInfoSubscribeId) {
lbry.fileInfoUnsubscribe(this.props.sdHash, this._fileInfoSubscribeId); lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId);
} }
}, },
render: function() { render: function() {
@ -238,7 +234,7 @@ export let FileActions = React.createClass({
propTypes: { propTypes: {
streamName: React.PropTypes.string, streamName: React.PropTypes.string,
sdHash: React.PropTypes.string.isRequired, outpoint: React.PropTypes.string.isRequired,
metadata: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]), metadata: React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.string]),
}, },
getInitialState: function() { getInitialState: function() {
@ -262,7 +258,7 @@ export let FileActions = React.createClass({
}, },
componentDidMount: function() { componentDidMount: function() {
this._isMounted = true; this._isMounted = true;
this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.sdHash, this.onFileInfoUpdate); this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate);
lbry.getStreamAvailability(this.props.streamName, (availability) => { lbry.getStreamAvailability(this.props.streamName, (availability) => {
if (this._isMounted) { if (this._isMounted) {
this.setState({ this.setState({
@ -290,7 +286,7 @@ export let FileActions = React.createClass({
return (<section className="file-actions"> return (<section className="file-actions">
{ {
fileInfo || this.state.available || this.state.forceShowActions fileInfo || this.state.available || this.state.forceShowActions
? <FileActionsRow sdHash={this.props.sdHash} metadata={this.props.metadata} streamName={this.props.streamName} /> ? <FileActionsRow outpoint={this.props.outpoint} metadata={this.props.metadata} streamName={this.props.streamName} />
: <div> : <div>
<div className="button-set-item empty">This file is not currently available.</div> <div className="button-set-item empty">This file is not currently available.</div>
<ToolTip label="Why?" <ToolTip label="Why?"

22
ui/js/component/file-tile.js
View file

@ -58,7 +58,7 @@ export let FileTileStream = React.createClass({
propTypes: { propTypes: {
metadata: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object]), metadata: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object]),
sdHash: React.PropTypes.string, outpoint: React.PropTypes.string,
hideOnRemove: React.PropTypes.bool, hideOnRemove: React.PropTypes.bool,
hidePrice: React.PropTypes.bool, hidePrice: React.PropTypes.bool,
obscureNsfw: React.PropTypes.bool obscureNsfw: React.PropTypes.bool
@ -79,12 +79,12 @@ export let FileTileStream = React.createClass({
componentDidMount: function() { componentDidMount: function() {
this._isMounted = true; this._isMounted = true;
if (this.props.hideOnRemove) { if (this.props.hideOnRemove) {
lbry.fileInfoSubscribe(this.props.sdHash, this.onFileInfoUpdate); lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate);
} }
}, },
componentWillUnmount: function() { componentWillUnmount: function() {
if (this._fileInfoSubscribeId) { if (this._fileInfoSubscribeId) {
lbry.fileInfoUnsubscribe(this.props.sdHash, this._fileInfoSubscribeId); lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId);
} }
}, },
onFileInfoUpdate: function(fileInfo) { onFileInfoUpdate: function(fileInfo) {
@ -135,7 +135,7 @@ export let FileTileStream = React.createClass({
</TruncatedText> </TruncatedText>
</a> </a>
</h3> </h3>
<FileActions streamName={this.props.name} sdHash={this.props.sdHash} metadata={metadata} /> <FileActions streamName={this.props.name} outpoint={this.props.outpoint} metadata={metadata} />
<p className="file-tile__description"> <p className="file-tile__description">
<TruncatedText lines={3}> <TruncatedText lines={3}>
{isConfirmed {isConfirmed
@ -168,7 +168,7 @@ export let FileTile = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
sdHash: null, outpoint: null,
metadata: null metadata: null
} }
}, },
@ -176,12 +176,12 @@ export let FileTile = React.createClass({
componentDidMount: function() { componentDidMount: function() {
this._isMounted = true; this._isMounted = true;
lbry.resolveName(this.props.name, (metadata) => { lbry.claim_show({name: this.props.name}).then(({value, txid, nout}) => {
if (this._isMounted && metadata) { if (this._isMounted && value) {
// In case of a failed lookup, metadata will be null, in which case the component will never display // In case of a failed lookup, metadata will be null, in which case the component will never display
this.setState({ this.setState({
sdHash: metadata.sources.lbry_sd_hash, outpoint: txid + ':' + nout,
metadata: metadata, metadata: value,
}); });
} }
}); });
@ -190,10 +190,10 @@ export let FileTile = React.createClass({
this._isMounted = false; this._isMounted = false;
}, },
render: function() { render: function() {
if (!this.state.metadata || !this.state.sdHash) { if (!this.state.metadata || !this.state.outpoint) {
return null; return null;
} }
return <FileTileStream sdHash={this.state.sdHash} metadata={this.state.metadata} {... this.props} />; return <FileTileStream outpoint={this.state.outpoint} metadata={this.state.metadata} {... this.props} />;
} }
}); });

64
ui/js/lbry.js
View file

@ -209,26 +209,6 @@ lbry.getFeaturedDiscoverNames = function(callback) {
}); });
} }
lbry.getFileStatus = function(name, callback, errorCallback) {
lbry.call('get_lbry_file', { 'name': name }, callback, errorCallback);
}
lbry.getFilesInfo = function(callback) {
lbry.call('get_lbry_files', {}, callback);
}
lbry.getFileInfoByName = function(name, callback) {
lbry.call('get_lbry_file', {name: name}, callback);
}
lbry.getFileInfoBySdHash = function(sdHash, callback) {
lbry.call('get_lbry_file', {sd_hash: sdHash}, callback);
}
lbry.getFileInfoByFilename = function(filename, callback) {
lbry.call('get_lbry_file', {file_name: filename}, callback);
}
lbry.getMyClaims = function(callback) { lbry.getMyClaims = function(callback) {
lbry.call('get_name_claims', {}, callback); lbry.call('get_name_claims', {}, callback);
} }
@ -241,14 +221,14 @@ lbry.stopFile = function(name, callback) {
lbry.call('stop_lbry_file', { name: name }, callback); lbry.call('stop_lbry_file', { name: name }, callback);
} }
lbry.removeFile = function(sdHash, name, deleteTargetFile=true, callback) { // Name param is temporary until the API can delete by unique ID (SD hash, claim ID etc.) lbry.removeFile = function(outpoint, deleteTargetFile=true, callback) {
this._removedFiles.push(sdHash); this._removedFiles.push(outpoint);
this._updateSubscribedFileInfo(sdHash); this._updateSubscribedFileInfo(outpoint);
lbry.call('delete_lbry_file', { lbry.file_delete({
name: name, outpoint: outpoint,
delete_target_file: deleteTargetFile, delete_target_file: deleteTargetFile,
}, callback); }).then(callback);
} }
lbry.getFileInfoWhenListed = function(name, callback, timeoutCallback, tryNum=0) { lbry.getFileInfoWhenListed = function(name, callback, timeoutCallback, tryNum=0) {
@ -429,7 +409,7 @@ lbry._fileInfoSubscribeIdCounter = 0;
lbry._fileInfoSubscribeCallbacks = {}; lbry._fileInfoSubscribeCallbacks = {};
lbry._fileInfoSubscribeInterval = 5000; lbry._fileInfoSubscribeInterval = 5000;
lbry._removedFiles = []; lbry._removedFiles = [];
lbry._claimIdOwnershipCache = {}; // should be claimId!!! But not lbry._claimIdOwnershipCache = {};
lbry._updateClaimOwnershipCache = function(claimId) { lbry._updateClaimOwnershipCache = function(claimId) {
lbry.getMyClaims((claimInfos) => { lbry.getMyClaims((claimInfos) => {
@ -439,17 +419,17 @@ lbry._updateClaimOwnershipCache = function(claimId) {
}); });
}; };
lbry._updateSubscribedFileInfo = function(sdHash) { lbry._updateSubscribedFileInfo = function(outpoint) {
const callSubscribedCallbacks = (sdHash, fileInfo) => { const callSubscribedCallbacks = (outpoint, fileInfo) => {
for (let [subscribeId, callback] of Object.entries(this._fileInfoSubscribeCallbacks[sdHash])) { for (let [subscribeId, callback] of Object.entries(this._fileInfoSubscribeCallbacks[outpoint])) {
callback(fileInfo); callback(fileInfo);
} }
} }
if (lbry._removedFiles.includes(sdHash)) { if (lbry._removedFiles.includes(outpoint)) {
callSubscribedCallbacks(sdHash, false); callSubscribedCallbacks(outpoint, false);
} else { } else {
lbry.getFileInfoBySdHash(sdHash, (fileInfo) => { lbry.file_list({outpoint: outpoint}).then(([fileInfo]) => {
if (fileInfo) { if (fileInfo) {
if (this._claimIdOwnershipCache[fileInfo.claim_id] === undefined) { if (this._claimIdOwnershipCache[fileInfo.claim_id] === undefined) {
this._updateClaimOwnershipCache(fileInfo.claim_id); this._updateClaimOwnershipCache(fileInfo.claim_id);
@ -457,26 +437,26 @@ lbry._updateSubscribedFileInfo = function(sdHash) {
fileInfo.isMine = !!this._claimIdOwnershipCache[fileInfo.claim_id]; fileInfo.isMine = !!this._claimIdOwnershipCache[fileInfo.claim_id];
} }
callSubscribedCallbacks(sdHash, fileInfo); callSubscribedCallbacks(outpoint, fileInfo);
}); });
} }
if (Object.keys(this._fileInfoSubscribeCallbacks[sdHash]).length) { if (Object.keys(this._fileInfoSubscribeCallbacks[outpoint]).length) {
setTimeout(() => { setTimeout(() => {
this._updateSubscribedFileInfo(sdHash); this._updateSubscribedFileInfo(outpoint);
}, lbry._fileInfoSubscribeInterval); }, lbry._fileInfoSubscribeInterval);
} }
} }
lbry.fileInfoSubscribe = function(sdHash, callback) { lbry.fileInfoSubscribe = function(outpoint, callback) {
if (!lbry._fileInfoSubscribeCallbacks[sdHash]) if (!lbry._fileInfoSubscribeCallbacks[outpoint])
{ {
lbry._fileInfoSubscribeCallbacks[sdHash] = {}; lbry._fileInfoSubscribeCallbacks[outpoint] = {};
} }
const subscribeId = ++lbry._fileInfoSubscribeIdCounter; const subscribeId = ++lbry._fileInfoSubscribeIdCounter;
lbry._fileInfoSubscribeCallbacks[sdHash][subscribeId] = callback; lbry._fileInfoSubscribeCallbacks[outpoint][subscribeId] = callback;
lbry._updateSubscribedFileInfo(sdHash); lbry._updateSubscribedFileInfo(outpoint);
return subscribeId; return subscribeId;
} }
@ -501,7 +481,7 @@ lbry = new Proxy(lbry, {
return function(params={}) { return function(params={}) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
jsonrpc.call(lbry.connectionString, name, [params], resolve, reject, reject); jsonrpc.call(lbry.daemonConnectionString, name, [params], resolve, reject, reject);
}); });
}; };
} }

64
ui/js/page/file-list.js
View file

@ -18,23 +18,15 @@ export let FileListDownloaded = React.createClass({
this._isMounted = true; this._isMounted = true;
document.title = "Downloaded Files"; document.title = "Downloaded Files";
let publishedFilesSdHashes = []; lbry.claim_list_mine().then((myClaimInfos) => {
lbry.getMyClaims((claimInfos) => {
if (!this._isMounted) { return; } if (!this._isMounted) { return; }
for (let claimInfo of claimInfos) { lbry.file_list().then((fileInfos) => {
let metadata = JSON.parse(claimInfo.value);
publishedFilesSdHashes.push(metadata.sources.lbry_sd_hash);
}
lbry.getFilesInfo((fileInfos) => {
if (!this._isMounted) { return; } if (!this._isMounted) { return; }
const myClaimOutpoints = myClaimInfos.map(({txid, nOut}) => txid + ':' + nOut);
this.setState({ this.setState({
fileInfos: fileInfos.filter(({sd_hash}) => { fileInfos: fileInfos.filter(({outpoint}) => !myClaimOutpoints.includes(outpoint)),
return publishedFilesSdHashes.indexOf(sd_hash) == -1;
})
}); });
}); });
}); });
@ -74,41 +66,17 @@ export let FileListPublished = React.createClass({
this._isMounted = true; this._isMounted = true;
document.title = "Published Files"; document.title = "Published Files";
lbry.getMyClaims((claimInfos) => { lbry.claim_list_mine().then((claimInfos) => {
if (claimInfos.length == 0) { if (!this._isMounted) { return; }
lbry.file_list().then((fileInfos) => {
if (!this._isMounted) { return; }
const myClaimOutpoints = claimInfos.map(({txid, nOut}) => txid + ':' + nOut);
this.setState({ this.setState({
fileInfos: [], fileInfos: fileInfos.filter(({outpoint}) => myClaimOutpoints.includes(outpoint)),
}); });
} });
/**
* Build newFileInfos as a sparse array and drop elements in at the same position they
* occur in claimInfos, so the order is preserved even if the API calls inside this loop
* return out of order.
*/
let newFileInfos = Array(claimInfos.length),
claimInfoProcessedCount = 0;
for (let [i, claimInfo] of claimInfos.entries()) {
let metadata = JSON.parse(claimInfo.value);
lbry.getFileInfoBySdHash(metadata.sources.lbry_sd_hash, (fileInfo) => {
claimInfoProcessedCount++;
if (fileInfo !== false) {
newFileInfos[i] = fileInfo;
}
if (claimInfoProcessedCount >= claimInfos.length) {
/**
* newfileInfos may have gaps from claims that don't have associated files in
* lbrynet, so filter out any missing elements
*/
this.setState({
fileInfos: newFileInfos.filter(function () {
return true
}),
});
}
});
}
}); });
}, },
render: function () { render: function () {
@ -192,15 +160,13 @@ export let FileList = React.createClass({
seenUris = {}; seenUris = {};
const fileInfosSorted = this._sortFunctions[this.state.sortBy](this.props.fileInfos); const fileInfosSorted = this._sortFunctions[this.state.sortBy](this.props.fileInfos);
for (let fileInfo of fileInfosSorted) { for (let {lbry_uri, outpoint, metadata} of fileInfosSorted) {
let {lbry_uri, sd_hash, metadata} = fileInfo;
if (!metadata || seenUris[lbry_uri]) { if (!metadata || seenUris[lbry_uri]) {
continue; continue;
} }
seenUris[lbry_uri] = true; seenUris[lbry_uri] = true;
content.push(<FileTileStream key={lbry_uri} name={lbry_uri} hideOnRemove={true} sdHash={sd_hash} content.push(<FileTileStream key={lbry_uri} name={lbry_uri} hideOnRemove={true} outpoint={outpoint}
hidePrice={this.props.hidePrices} metadata={metadata} />); hidePrice={this.props.hidePrices} metadata={metadata} />);
} }

11
ui/js/page/show.js
View file

@ -19,6 +19,7 @@ var FormatItem = React.createClass({
claimInfo: React.PropTypes.object, claimInfo: React.PropTypes.object,
cost: React.PropTypes.number, cost: React.PropTypes.number,
name: React.PropTypes.string, name: React.PropTypes.string,
outpoint: React.PropTypes.string,
costIncludesData: React.PropTypes.bool, costIncludesData: React.PropTypes.bool,
}, },
render: function() { render: function() {
@ -62,7 +63,7 @@ var FormatItem = React.createClass({
</tbody> </tbody>
</table> </table>
</section> </section>
<FileActions streamName={this.props.name} sdHash={claimInfo.sources.lbry_sd_hash} metadata={claimInfo} /> <FileActions streamName={this.props.name} outpoint={this.props.outpoint} metadata={claimInfo} />
<section> <section>
<Link href="https://lbry.io/dmca" label="report" className="button-text-help" /> <Link href="https://lbry.io/dmca" label="report" className="button-text-help" />
</section> </section>
@ -120,9 +121,10 @@ var DetailPage = React.createClass({
componentWillMount: function() { componentWillMount: function() {
document.title = 'lbry://' + this.props.name; document.title = 'lbry://' + this.props.name;
lbry.resolveName(this.props.name, (metadata) => { lbry.claim_show({name: this.props.name}, ({name, txid, nout, value}) => {
this.setState({ this.setState({
metadata: metadata, outpoint: txid + ':' + nout,
metadata: value,
nameLookupComplete: true, nameLookupComplete: true,
}); });
}); });
@ -143,12 +145,13 @@ var DetailPage = React.createClass({
const costIncludesData = this.state.costIncludesData; const costIncludesData = this.state.costIncludesData;
const metadata = this.state.metadata; const metadata = this.state.metadata;
const cost = this.state.cost; const cost = this.state.cost;
const outpoint = this.state.outpoint;
return ( return (
<main> <main>
<section className="card"> <section className="card">
{this.state.nameLookupComplete ? ( {this.state.nameLookupComplete ? (
<FormatsSection name={name} claimInfo={metadata} cost={cost} costIncludesData={costIncludesData} /> <FormatsSection name={name} outpoint={outpoint} claimInfo={metadata} cost={cost} costIncludesData={costIncludesData} />
) : ( ) : (
<div> <div>
<h2>No content</h2> <h2>No content</h2>

36
ui/js/page/watch.js
View file

@ -12,6 +12,7 @@ var WatchPage = React.createClass({
_isMounted: false, _isMounted: false,
_controlsHideDelay: 3000, // Note: this needs to be shorter than the built-in delay in Electron, or Electron will hide the controls before us _controlsHideDelay: 3000, // Note: this needs to be shorter than the built-in delay in Electron, or Electron will hide the controls before us
_controlsHideTimeout: null, _controlsHideTimeout: null,
_outpoint: null,
propTypes: { propTypes: {
name: React.PropTypes.string, name: React.PropTypes.string,
@ -26,8 +27,10 @@ var WatchPage = React.createClass({
}; };
}, },
componentDidMount: function() { componentDidMount: function() {
lbry.getStream(this.props.name); lbry.get({name: this.props.name}, (fileInfo) => {
this.updateLoadStatus(); this._outpoint = fileInfo.outpoint;
this.updateLoadStatus();
});
}, },
handleBackClicked: function() { handleBackClicked: function() {
history.back(); history.back();
@ -64,10 +67,13 @@ var WatchPage = React.createClass({
} }
}, },
updateLoadStatus: function() { updateLoadStatus: function() {
lbry.getFileStatus(this.props.name, (status) => { api.file_list({
outpoint: this._outpoint,
full_status: true,
}, ([status]) => {
if (!status || !['running', 'stopped'].includes(status.code) || status.written_bytes == 0) { if (!status || !['running', 'stopped'].includes(status.code) || status.written_bytes == 0) {
// Download hasn't started yet, so update status message (if available) then try again // Download hasn't started yet, so update status message (if available) then try again
// TODO: Would be nice to check if we have the MOOV before starting playing // TODO: Would be nice to check if we have the MOOV before starting playing
if (status) { if (status) {
this.setState({ this.setState({
loadStatusMessage: status.message loadStatusMessage: status.message
@ -79,17 +85,17 @@ var WatchPage = React.createClass({
readyToPlay: true, readyToPlay: true,
mimeType: status.mime_type, mimeType: status.mime_type,
}) })
const mediaFile = { const mediaFile = {
createReadStream: function (opts) { createReadStream: function (opts) {
// Return a readable stream that provides the bytes // Return a readable stream that provides the bytes
// between offsets "start" and "end" inclusive // between offsets "start" and "end" inclusive
console.log('Stream between ' + opts.start + ' and ' + opts.end + '.'); console.log('Stream between ' + opts.start + ' and ' + opts.end + '.');
return fs.createReadStream(status.download_path, opts) return fs.createReadStream(status.download_path, opts)
} }
} };
var elem = this.refs.video; var elem = this.refs.video;
var videostream = VideoStream(mediaFile, elem); var videostream = VideoStream(mediaFile, elem);
elem.play(); elem.play();
} }
}); });
}, },