diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index bf0451c82..709d85ffb 100644 --- a/ui/js/actions/app.js +++ b/ui/js/actions/app.js @@ -1,5 +1,5 @@ -import * as types from 'constants/action_types' -import lbry from 'lbry' +import * as types from "constants/action_types"; +import lbry from "lbry"; import { selectUpdateUrl, selectUpgradeDownloadPath, @@ -8,36 +8,30 @@ import { selectPageTitle, selectCurrentPage, selectCurrentParams, -} from 'selectors/app' -import { - doSearch, -} from 'actions/search' +} from "selectors/app"; +import { doSearch } from "actions/search"; -const {remote, ipcRenderer, shell} = require('electron'); -const path = require('path'); -const app = require('electron').remote.app; -const {download} = remote.require('electron-dl'); -const fs = remote.require('fs'); +const { remote, ipcRenderer, shell } = require("electron"); +const path = require("path"); +const app = require("electron").remote.app; +const { download } = remote.require("electron-dl"); +const fs = remote.require("fs"); -const queryStringFromParams = (params) => { - return Object - .keys(params) - .map(key => `${key}=${params[key]}`) - .join('&') -} +const queryStringFromParams = params => { + return Object.keys(params).map(key => `${key}=${params[key]}`).join("&"); +}; export function doNavigate(path, params = {}) { return function(dispatch, getState) { - let url = path - if (params) - url = `${url}?${queryStringFromParams(params)}` + let url = path; + if (params) url = `${url}?${queryStringFromParams(params)}`; - dispatch(doChangePath(url)) + dispatch(doChangePath(url)); - const state = getState() - const pageTitle = selectPageTitle(state) - dispatch(doHistoryPush(params, pageTitle, url)) - } + const state = getState(); + const pageTitle = selectPageTitle(state); + dispatch(doHistoryPush(params, pageTitle, url)); + }; } export function doChangePath(path) { @@ -46,121 +40,124 @@ export function doChangePath(path) { type: types.CHANGE_PATH, data: { path, - } - }) + }, + }); - const state = getState() - const pageTitle = selectPageTitle(state) - window.document.title = pageTitle - window.scrollTo(0, 0) + const state = getState(); + const pageTitle = selectPageTitle(state); + window.document.title = pageTitle; + window.scrollTo(0, 0); - const currentPage = selectCurrentPage(state) - if (currentPage === 'search') { - const params = selectCurrentParams(state) - dispatch(doSearch(params.query)) + const currentPage = selectCurrentPage(state); + if (currentPage === "search") { + const params = selectCurrentParams(state); + dispatch(doSearch(params.query)); } - } + }; } export function doHistoryBack() { return function(dispatch, getState) { - history.back() - } + history.back(); + }; } export function doHistoryPush(params, title, relativeUrl) { return function(dispatch, getState) { - let pathParts = window.location.pathname.split('/') - pathParts[pathParts.length - 1] = relativeUrl.replace(/^\//, '') - const url = pathParts.join('/') - title += " - LBRY" - history.pushState(params, title, url) - } + let pathParts = window.location.pathname.split("/"); + pathParts[pathParts.length - 1] = relativeUrl.replace(/^\//, ""); + const url = pathParts.join("/"); + title += " - LBRY"; + history.pushState(params, title, url); + }; } export function doOpenModal(modal) { return { type: types.OPEN_MODAL, data: { - modal - } - } + modal, + }, + }; } export function doCloseModal() { return { type: types.CLOSE_MODAL, - } + }; } export function doUpdateDownloadProgress(percent) { return { type: types.UPGRADE_DOWNLOAD_PROGRESSED, data: { - percent: percent - } - } + percent: percent, + }, + }; } export function doSkipUpgrade() { return { - type: types.SKIP_UPGRADE - } + type: types.SKIP_UPGRADE, + }; } export function doStartUpgrade() { return function(dispatch, getState) { - const state = getState() - const upgradeDownloadPath = selectUpgradeDownloadPath(state) + const state = getState(); + const upgradeDownloadPath = selectUpgradeDownloadPath(state); - ipcRenderer.send('upgrade', upgradeDownloadPath) - } + ipcRenderer.send("upgrade", upgradeDownloadPath); + }; } export function doDownloadUpgrade() { return function(dispatch, getState) { - const state = getState() + const state = getState(); // Make a new directory within temp directory so the filename is guaranteed to be available - const dir = fs.mkdtempSync(app.getPath('temp') + require('path').sep); - const upgradeFilename = selectUpgradeFilename(state) + const dir = fs.mkdtempSync(app.getPath("temp") + require("path").sep); + const upgradeFilename = selectUpgradeFilename(state); let options = { - onProgress: (p) => dispatch(doUpdateDownloadProgress(Math.round(p * 100))), + onProgress: p => dispatch(doUpdateDownloadProgress(Math.round(p * 100))), directory: dir, }; - download(remote.getCurrentWindow(), selectUpdateUrl(state), options) - .then(downloadItem => { - /** + download( + remote.getCurrentWindow(), + selectUpdateUrl(state), + options + ).then(downloadItem => { + /** * TODO: get the download path directly from the download object. It should just be * downloadItem.getSavePath(), but the copy on the main process is being garbage collected * too soon. */ - dispatch({ - type: types.UPGRADE_DOWNLOAD_COMPLETED, - data: { - downloadItem, - path: path.join(dir, upgradeFilename) - } - }) + dispatch({ + type: types.UPGRADE_DOWNLOAD_COMPLETED, + data: { + downloadItem, + path: path.join(dir, upgradeFilename), + }, }); + }); dispatch({ - type: types.UPGRADE_DOWNLOAD_STARTED - }) + type: types.UPGRADE_DOWNLOAD_STARTED, + }); dispatch({ type: types.OPEN_MODAL, data: { - modal: 'downloading' - } - }) - } + modal: "downloading", + }, + }); + }; } export function doCancelUpgrade() { return function(dispatch, getState) { - const state = getState() - const upgradeDownloadItem = selectUpgradeDownloadItem(state) + const state = getState(); + const upgradeDownloadItem = selectUpgradeDownloadItem(state); if (upgradeDownloadItem) { /* @@ -171,68 +168,68 @@ export function doCancelUpgrade() { try { upgradeDownloadItem.cancel(); } catch (err) { - console.error(err) + console.error(err); // Do nothing } } - dispatch({ type: types.UPGRADE_CANCELLED }) - } + dispatch({ type: types.UPGRADE_CANCELLED }); + }; } export function doCheckUpgradeAvailable() { return function(dispatch, getState) { - const state = getState() + const state = getState(); - lbry.getAppVersionInfo().then(({remoteVersion, upgradeAvailable}) => { + lbry.getAppVersionInfo().then(({ remoteVersion, upgradeAvailable }) => { if (upgradeAvailable) { dispatch({ type: types.UPDATE_VERSION, data: { version: remoteVersion, - } - }) + }, + }); dispatch({ type: types.OPEN_MODAL, data: { - modal: 'upgrade' - } - }) + modal: "upgrade", + }, + }); } }); - } + }; } export function doAlertError(errorList) { return function(dispatch, getState) { - const state = getState() - console.log('do alert error') - console.log(errorList) + const state = getState(); + console.log("do alert error"); + console.log(errorList); dispatch({ type: types.OPEN_MODAL, data: { - modal: 'error', - extraContent: errorList - } - }) - } + modal: "error", + extraContent: errorList, + }, + }); + }; } export function doDaemonReady() { return { - type: types.DAEMON_READY - } + type: types.DAEMON_READY, + }; } export function doShowSnackBar(data) { return { type: types.SHOW_SNACKBAR, data, - } + }; } export function doRemoveSnackBarSnack() { return { type: types.REMOVE_SNACKBAR_SNACK, - } + }; } diff --git a/ui/js/actions/availability.js b/ui/js/actions/availability.js index 501a2eeda..2c7cbc3cb 100644 --- a/ui/js/actions/availability.js +++ b/ui/js/actions/availability.js @@ -1,29 +1,27 @@ -import * as types from 'constants/action_types' -import lbry from 'lbry' -import { - selectFetchingAvailability -} from 'selectors/availability' +import * as types from "constants/action_types"; +import lbry from "lbry"; +import { selectFetchingAvailability } from "selectors/availability"; export function doFetchAvailability(uri) { return function(dispatch, getState) { - const state = getState() - const alreadyFetching = !!selectFetchingAvailability(state)[uri] + const state = getState(); + const alreadyFetching = !!selectFetchingAvailability(state)[uri]; if (!alreadyFetching) { dispatch({ type: types.FETCH_AVAILABILITY_STARTED, - data: {uri} - }) + data: { uri }, + }); - lbry.get_availability({uri}).then((availability) => { + lbry.get_availability({ uri }).then(availability => { dispatch({ type: types.FETCH_AVAILABILITY_COMPLETED, data: { availability, uri, - } - }) - }) + }, + }); + }); } - } -} \ No newline at end of file + }; +} diff --git a/ui/js/actions/content.js b/ui/js/actions/content.js index a7276abf9..f9fe0b02b 100644 --- a/ui/js/actions/content.js +++ b/ui/js/actions/content.js @@ -1,47 +1,35 @@ -import * as types from 'constants/action_types' -import lbry from 'lbry' -import lbryio from 'lbryio' -import lbryuri from 'lbryuri' -import rewards from 'rewards' -import { - selectBalance, -} from 'selectors/wallet' +import * as types from "constants/action_types"; +import lbry from "lbry"; +import lbryio from "lbryio"; +import lbryuri from "lbryuri"; +import rewards from "rewards"; +import { selectBalance } from "selectors/wallet"; import { selectFileInfoForUri, selectUrisDownloading, -} from 'selectors/file_info' -import { - selectResolvingUris -} from 'selectors/content' -import { - selectCostInfoForUri, -} from 'selectors/cost_info' -import { - selectClaimsByUri, -} from 'selectors/claims' -import { - doOpenModal, -} from 'actions/app' +} from "selectors/file_info"; +import { selectResolvingUris } from "selectors/content"; +import { selectCostInfoForUri } from "selectors/cost_info"; +import { selectClaimsByUri } from "selectors/claims"; +import { doOpenModal } from "actions/app"; export function doResolveUri(uri) { return function(dispatch, getState) { + uri = lbryuri.normalize(uri); - uri = lbryuri.normalize(uri) - - const state = getState() - const alreadyResolving = selectResolvingUris(state).indexOf(uri) !== -1 + const state = getState(); + const alreadyResolving = selectResolvingUris(state).indexOf(uri) !== -1; if (!alreadyResolving) { dispatch({ type: types.RESOLVE_URI_STARTED, - data: { uri } - }) + data: { uri }, + }); - lbry.resolve({ uri }).then((resolutionInfo) => { - const { - claim, - certificate, - } = resolutionInfo ? resolutionInfo : { claim : null, certificate: null } + lbry.resolve({ uri }).then(resolutionInfo => { + const { claim, certificate } = resolutionInfo + ? resolutionInfo + : { claim: null, certificate: null }; dispatch({ type: types.RESOLVE_URI_COMPLETED, @@ -49,246 +37,252 @@ export function doResolveUri(uri) { uri, claim, certificate, - } - }) - }) + }, + }); + }); } - } + }; } export function doCancelResolveUri(uri) { return function(dispatch, getState) { - lbry.cancelResolve({ uri }) + lbry.cancelResolve({ uri }); dispatch({ type: types.RESOLVE_URI_CANCELED, - data: { uri } - }) - } + data: { uri }, + }); + }; } export function doFetchFeaturedUris() { return function(dispatch, getState) { - const state = getState() + const state = getState(); dispatch({ type: types.FETCH_FEATURED_CONTENT_STARTED, - }) + }); const success = ({ Categories, Uris }) => { + let featuredUris = {}; - let featuredUris = {} - - Categories.forEach((category) => { + Categories.forEach(category => { if (Uris[category] && Uris[category].length) { - featuredUris[category] = Uris[category] + featuredUris[category] = Uris[category]; } - }) + }); dispatch({ type: types.FETCH_FEATURED_CONTENT_COMPLETED, data: { categories: Categories, uris: featuredUris, - } - }) - } + }, + }); + }; const failure = () => { dispatch({ type: types.FETCH_FEATURED_CONTENT_COMPLETED, data: { categories: [], - uris: {} - } - }) - } + uris: {}, + }, + }); + }; - lbryio.call('discover', 'list', { version: "early-access" } ) - .then(success, failure) - } + lbryio + .call("discover", "list", { version: "early-access" }) + .then(success, failure); + }; } export function doUpdateLoadStatus(uri, outpoint) { return function(dispatch, getState) { - const state = getState() + const state = getState(); - lbry.file_list({ - outpoint: outpoint, - full_status: true, - }).then(([fileInfo]) => { - if(!fileInfo || fileInfo.written_bytes == 0) { - // download hasn't started yet - setTimeout(() => { dispatch(doUpdateLoadStatus(uri, outpoint)) }, 250) - } else if (fileInfo.completed) { - // TODO this isn't going to get called if they reload the client before - // the download finished - dispatch({ - type: types.DOWNLOADING_COMPLETED, - data: { - uri, - outpoint, - fileInfo, - } - }) - } else { - // ready to play - const { - total_bytes, - written_bytes, - } = fileInfo - const progress = (written_bytes / total_bytes) * 100 + lbry + .file_list({ + outpoint: outpoint, + full_status: true, + }) + .then(([fileInfo]) => { + if (!fileInfo || fileInfo.written_bytes == 0) { + // download hasn't started yet + setTimeout(() => { + dispatch(doUpdateLoadStatus(uri, outpoint)); + }, 250); + } else if (fileInfo.completed) { + // TODO this isn't going to get called if they reload the client before + // the download finished + dispatch({ + type: types.DOWNLOADING_COMPLETED, + data: { + uri, + outpoint, + fileInfo, + }, + }); + } else { + // ready to play + const { total_bytes, written_bytes } = fileInfo; + const progress = written_bytes / total_bytes * 100; - dispatch({ - type: types.DOWNLOADING_PROGRESSED, - data: { - uri, - outpoint, - fileInfo, - progress, - } - }) - setTimeout(() => { dispatch(doUpdateLoadStatus(uri, outpoint)) }, 250) - } - }) - } + dispatch({ + type: types.DOWNLOADING_PROGRESSED, + data: { + uri, + outpoint, + fileInfo, + progress, + }, + }); + setTimeout(() => { + dispatch(doUpdateLoadStatus(uri, outpoint)); + }, 250); + } + }); + }; } export function doDownloadFile(uri, streamInfo) { return function(dispatch, getState) { - const state = getState() + const state = getState(); - lbry.file_list({ outpoint: streamInfo.outpoint, full_status: true }).then(([fileInfo]) => { - dispatch({ - type: types.DOWNLOADING_STARTED, - data: { - uri, - outpoint: streamInfo.outpoint, - fileInfo, - } + lbry + .file_list({ outpoint: streamInfo.outpoint, full_status: true }) + .then(([fileInfo]) => { + dispatch({ + type: types.DOWNLOADING_STARTED, + data: { + uri, + outpoint: streamInfo.outpoint, + fileInfo, + }, + }); + + dispatch(doUpdateLoadStatus(uri, streamInfo.outpoint)); + }); + + lbryio + .call("file", "view", { + uri: uri, + outpoint: streamInfo.outpoint, + claim_id: streamInfo.claim_id, }) + .catch(() => {}); - dispatch(doUpdateLoadStatus(uri, streamInfo.outpoint)) - }) - - lbryio.call('file', 'view', { - uri: uri, - outpoint: streamInfo.outpoint, - claim_id: streamInfo.claim_id, - }).catch(() => {}) - - rewards.claimEligiblePurchaseRewards() - - } + rewards.claimEligiblePurchaseRewards(); + }; } export function doLoadVideo(uri) { return function(dispatch, getState) { - const state = getState() + const state = getState(); dispatch({ type: types.LOADING_VIDEO_STARTED, data: { - uri - } - }) + uri, + }, + }); lbry.get({ uri }).then(streamInfo => { - const timeout = streamInfo === null || - typeof streamInfo !== 'object' || - streamInfo.error == 'Timeout' + const timeout = + streamInfo === null || + typeof streamInfo !== "object" || + streamInfo.error == "Timeout"; - if(timeout) { + if (timeout) { dispatch({ type: types.LOADING_VIDEO_FAILED, - data: { uri } - }) - dispatch(doOpenModal('timedOut')) + data: { uri }, + }); + dispatch(doOpenModal("timedOut")); } else { - dispatch(doDownloadFile(uri, streamInfo)) + dispatch(doDownloadFile(uri, streamInfo)); } - }) - } + }); + }; } export function doPurchaseUri(uri, purchaseModalName) { return function(dispatch, getState) { - const state = getState() - const balance = selectBalance(state) - const fileInfo = selectFileInfoForUri(state, { uri }) - const downloadingByUri = selectUrisDownloading(state) - const alreadyDownloading = !!downloadingByUri[uri] + const state = getState(); + const balance = selectBalance(state); + const fileInfo = selectFileInfoForUri(state, { uri }); + const downloadingByUri = selectUrisDownloading(state); + const alreadyDownloading = !!downloadingByUri[uri]; // we already fully downloaded the file. if (fileInfo && fileInfo.completed) { // If written_bytes is false that means the user has deleted/moved the // file manually on their file system, so we need to dispatch a // doLoadVideo action to reconstruct the file from the blobs - if (!fileInfo.written_bytes) dispatch(doLoadVideo(uri)) + if (!fileInfo.written_bytes) dispatch(doLoadVideo(uri)); - return Promise.resolve() + return Promise.resolve(); } // we are already downloading the file if (alreadyDownloading) { - return Promise.resolve() + return Promise.resolve(); } - const costInfo = selectCostInfoForUri(state, { uri }) - const { cost } = costInfo + const costInfo = selectCostInfoForUri(state, { uri }); + const { cost } = costInfo; // the file is free or we have partially downloaded it if (cost <= 0.01 || (fileInfo && fileInfo.download_directory)) { - dispatch(doLoadVideo(uri)) - return Promise.resolve() + dispatch(doLoadVideo(uri)); + return Promise.resolve(); } if (cost > balance) { - dispatch(doOpenModal('notEnoughCredits')) + dispatch(doOpenModal("notEnoughCredits")); } else { - dispatch(doOpenModal(purchaseModalName)) + dispatch(doOpenModal(purchaseModalName)); } - return Promise.resolve() - } + return Promise.resolve(); + }; } export function doFetchClaimsByChannel(uri) { return function(dispatch, getState) { dispatch({ type: types.FETCH_CHANNEL_CLAIMS_STARTED, - data: { uri } - }) + data: { uri }, + }); - lbry.resolve({ uri }).then((resolutionInfo) => { - const { - claims_in_channel, - } = resolutionInfo ? resolutionInfo : { claims_in_channel: [] } + lbry.resolve({ uri }).then(resolutionInfo => { + const { claims_in_channel } = resolutionInfo + ? resolutionInfo + : { claims_in_channel: [] }; dispatch({ type: types.FETCH_CHANNEL_CLAIMS_COMPLETED, data: { uri, - claims: claims_in_channel - } - }) - }) - } + claims: claims_in_channel, + }, + }); + }); + }; } export function doFetchClaimListMine() { return function(dispatch, getState) { dispatch({ - type: types.FETCH_CLAIM_LIST_MINE_STARTED - }) + type: types.FETCH_CLAIM_LIST_MINE_STARTED, + }); - - lbry.claim_list_mine().then((claims) => { + lbry.claim_list_mine().then(claims => { dispatch({ type: types.FETCH_CLAIM_LIST_MINE_COMPLETED, data: { - claims - } - }) - }) - } -} \ No newline at end of file + claims, + }, + }); + }); + }; +} diff --git a/ui/js/actions/cost_info.js b/ui/js/actions/cost_info.js index dbad86f33..e8485deff 100644 --- a/ui/js/actions/cost_info.js +++ b/ui/js/actions/cost_info.js @@ -1,48 +1,40 @@ - import * as types from 'constants/action_types' -import lbry from 'lbry' -import lbryio from 'lbryio' -import { - doResolveUri -} from 'actions/content' -import { - selectResolvingUris, -} from 'selectors/content' -import { - selectClaimsByUri -} from 'selectors/claims' -import { - selectSettingsIsGenerous -} from 'selectors/settings' +import * as types from "constants/action_types"; +import lbry from "lbry"; +import lbryio from "lbryio"; +import { doResolveUri } from "actions/content"; +import { selectResolvingUris } from "selectors/content"; +import { selectClaimsByUri } from "selectors/claims"; +import { selectSettingsIsGenerous } from "selectors/settings"; export function doFetchCostInfoForUri(uri) { return function(dispatch, getState) { const state = getState(), - claim = selectClaimsByUri(state)[uri], - isResolving = selectResolvingUris(state).indexOf(uri) !== -1, - isGenerous = selectSettingsIsGenerous(state) + claim = selectClaimsByUri(state)[uri], + isResolving = selectResolvingUris(state).indexOf(uri) !== -1, + isGenerous = selectSettingsIsGenerous(state); - if (claim === null) { //claim doesn't exist, nothing to fetch a cost for - return + if (claim === null) { + //claim doesn't exist, nothing to fetch a cost for + return; } if (!claim) { setTimeout(() => { - dispatch(doFetchCostInfoForUri(uri)) - }, 1000) + dispatch(doFetchCostInfoForUri(uri)); + }, 1000); if (!isResolving) { - dispatch(doResolveUri(uri)) + dispatch(doResolveUri(uri)); } - return + return; } - function begin() { dispatch({ type: types.FETCH_COST_INFO_STARTED, data: { uri, - } - }) + }, + }); } function resolve(costInfo) { @@ -51,27 +43,26 @@ export function doFetchCostInfoForUri(uri) { data: { uri, costInfo, - } - }) + }, + }); } if (isGenerous && claim) { - let cost + let cost; const fee = claim.value.stream.metadata.fee; - if (fee === undefined ) { - resolve({ cost: 0, includesData: true }) - } else if (fee.currency == 'LBC') { - resolve({ cost: fee.amount, includesData: true }) + if (fee === undefined) { + resolve({ cost: 0, includesData: true }); + } else if (fee.currency == "LBC") { + resolve({ cost: fee.amount, includesData: true }); } else { - begin() - lbryio.getExchangeRates().then(({lbc_usd}) => { - resolve({ cost: fee.amount / lbc_usd, includesData: true }) + begin(); + lbryio.getExchangeRates().then(({ lbc_usd }) => { + resolve({ cost: fee.amount / lbc_usd, includesData: true }); }); } } else { - begin() - lbry.getCostInfo(uri).then(resolve) + begin(); + lbry.getCostInfo(uri).then(resolve); } - } + }; } - diff --git a/ui/js/actions/file_info.js b/ui/js/actions/file_info.js index 44d76885c..d379db625 100644 --- a/ui/js/actions/file_info.js +++ b/ui/js/actions/file_info.js @@ -1,121 +1,113 @@ -import * as types from 'constants/action_types' -import lbry from 'lbry' -import { - doFetchClaimListMine -} from 'actions/content' +import * as types from "constants/action_types"; +import lbry from "lbry"; +import { doFetchClaimListMine } from "actions/content"; import { selectClaimsByUri, selectClaimListMineIsPending, -} from 'selectors/claims' +} from "selectors/claims"; import { selectFileListIsPending, selectAllFileInfos, selectUrisLoading, -} from 'selectors/file_info' -import { - doCloseModal, -} from 'actions/app' +} from "selectors/file_info"; +import { doCloseModal } from "actions/app"; -const { - shell, -} = require('electron') +const { shell } = require("electron"); export function doFetchFileInfo(uri) { return function(dispatch, getState) { - const state = getState() - const claim = selectClaimsByUri(state)[uri] - const outpoint = claim ? `${claim.txid}:${claim.nout}` : null - const alreadyFetching = !!selectUrisLoading(state)[uri] + const state = getState(); + const claim = selectClaimsByUri(state)[uri]; + const outpoint = claim ? `${claim.txid}:${claim.nout}` : null; + const alreadyFetching = !!selectUrisLoading(state)[uri]; if (!alreadyFetching) { dispatch({ type: types.FETCH_FILE_INFO_STARTED, data: { outpoint, - } - }) + }, + }); - lbry.file_list({outpoint: outpoint, full_status: true}).then(fileInfos => { - - dispatch({ - type: types.FETCH_FILE_INFO_COMPLETED, - data: { - outpoint, - fileInfo: fileInfos && fileInfos.length ? fileInfos[0] : null, - } - }) - }) + lbry + .file_list({ outpoint: outpoint, full_status: true }) + .then(fileInfos => { + dispatch({ + type: types.FETCH_FILE_INFO_COMPLETED, + data: { + outpoint, + fileInfo: fileInfos && fileInfos.length ? fileInfos[0] : null, + }, + }); + }); } - } + }; } export function doFileList() { return function(dispatch, getState) { - const state = getState() - const isPending = selectFileListIsPending(state) + const state = getState(); + const isPending = selectFileListIsPending(state); if (!isPending) { dispatch({ type: types.FILE_LIST_STARTED, - }) + }); - lbry.file_list().then((fileInfos) => { + lbry.file_list().then(fileInfos => { dispatch({ type: types.FILE_LIST_COMPLETED, data: { fileInfos, - } - }) - }) + }, + }); + }); } - } + }; } export function doOpenFileInShell(fileInfo) { return function(dispatch, getState) { - shell.openItem(fileInfo.download_path) - } + shell.openItem(fileInfo.download_path); + }; } export function doOpenFileInFolder(fileInfo) { return function(dispatch, getState) { - shell.showItemInFolder(fileInfo.download_path) - } + shell.showItemInFolder(fileInfo.download_path); + }; } export function doDeleteFile(outpoint, deleteFromComputer) { return function(dispatch, getState) { - dispatch({ type: types.FILE_DELETE, data: { - outpoint - } - }) + outpoint, + }, + }); lbry.file_delete({ outpoint: outpoint, delete_target_file: deleteFromComputer, - }) + }); - dispatch(doCloseModal()) - } + dispatch(doCloseModal()); + }; } - export function doFetchFileInfosAndPublishedClaims() { return function(dispatch, getState) { const state = getState(), - isClaimListMinePending = selectClaimListMineIsPending(state), - isFileInfoListPending = selectFileListIsPending(state) + isClaimListMinePending = selectClaimListMineIsPending(state), + isFileInfoListPending = selectFileListIsPending(state); if (isClaimListMinePending === undefined) { - dispatch(doFetchClaimListMine()) + dispatch(doFetchClaimListMine()); } if (isFileInfoListPending === undefined) { - dispatch(doFileList()) + dispatch(doFileList()); } - } + }; } - diff --git a/ui/js/actions/rewards.js b/ui/js/actions/rewards.js index 84f65047f..4c12d9c20 100644 --- a/ui/js/actions/rewards.js +++ b/ui/js/actions/rewards.js @@ -1,36 +1,35 @@ -import * as types from 'constants/action_types' -import lbry from 'lbry' -import lbryio from 'lbryio'; -import rewards from 'rewards' +import * as types from "constants/action_types"; +import lbry from "lbry"; +import lbryio from "lbryio"; +import rewards from "rewards"; export function doFetchRewards() { return function(dispatch, getState) { - const state = getState() + const state = getState(); dispatch({ type: types.FETCH_REWARDS_STARTED, - }) + }); - lbryio.call('reward', 'list', {}).then(function(userRewards) { + lbryio.call("reward", "list", {}).then(function(userRewards) { dispatch({ type: types.FETCH_REWARDS_COMPLETED, - data: { userRewards } - }) + data: { userRewards }, + }); }); - } + }; } export function doClaimReward(rewardType) { return function(dispatch, getState) { try { - rewards.claimReward(rewards[rewardType]) + rewards.claimReward(rewards[rewardType]); dispatch({ type: types.REWARD_CLAIMED, data: { - reward: rewards[rewardType] - } - }) - } catch(err) { - } - } + reward: rewards[rewardType], + }, + }); + } catch (err) {} + }; } diff --git a/ui/js/actions/search.js b/ui/js/actions/search.js index 149aa78ea..ab844df03 100644 --- a/ui/js/actions/search.js +++ b/ui/js/actions/search.js @@ -1,35 +1,28 @@ -import * as types from 'constants/action_types' -import lbryuri from 'lbryuri' -import lighthouse from 'lighthouse' -import { - doResolveUri, -} from 'actions/content' -import { - doNavigate, - doHistoryPush -} from 'actions/app' -import { - selectCurrentPage, -} from 'selectors/app' +import * as types from "constants/action_types"; +import lbryuri from "lbryuri"; +import lighthouse from "lighthouse"; +import { doResolveUri } from "actions/content"; +import { doNavigate, doHistoryPush } from "actions/app"; +import { selectCurrentPage } from "selectors/app"; export function doSearch(query) { return function(dispatch, getState) { - const state = getState() - const page = selectCurrentPage(state) + const state = getState(); + const page = selectCurrentPage(state); if (!query) { return dispatch({ type: types.SEARCH_CANCELLED, - }) + }); } dispatch({ type: types.SEARCH_STARTED, - data: { query } - }) + data: { query }, + }); - if(page != 'search') { - dispatch(doNavigate('search', { query: query })) + if (page != "search") { + dispatch(doNavigate("search", { query: query })); } else { lighthouse.search(query).then(results => { results.forEach(result => { @@ -37,18 +30,18 @@ export function doSearch(query) { channelName: result.channel_name, contentName: result.name, claimId: result.channel_id || result.claim_id, - }) - dispatch(doResolveUri(uri)) - }) + }); + dispatch(doResolveUri(uri)); + }); dispatch({ type: types.SEARCH_COMPLETED, data: { query, results, - } - }) - }) + }, + }); + }); } - } + }; } diff --git a/ui/js/actions/settings.js b/ui/js/actions/settings.js index a0742d377..8268989d8 100644 --- a/ui/js/actions/settings.js +++ b/ui/js/actions/settings.js @@ -1,31 +1,31 @@ -import * as types from 'constants/action_types' -import lbry from 'lbry' +import * as types from "constants/action_types"; +import lbry from "lbry"; export function doFetchDaemonSettings() { return function(dispatch, getState) { - lbry.settings_get().then((settings) => { + lbry.settings_get().then(settings => { dispatch({ type: types.DAEMON_SETTINGS_RECEIVED, data: { - settings - } - }) - }) - } + settings, + }, + }); + }); + }; } export function doSetDaemonSetting(key, value) { return function(dispatch, getState) { let settings = {}; settings[key] = value; - lbry.settings_set(settings).then(settings) - lbry.settings_get().then((settings) => { + lbry.settings_set(settings).then(settings); + lbry.settings_get().then(settings => { dispatch({ type: types.DAEMON_SETTINGS_RECEIVED, data: { - settings - } - }) - }) - } -} \ No newline at end of file + settings, + }, + }); + }); + }; +} diff --git a/ui/js/actions/wallet.js b/ui/js/actions/wallet.js index 53eccfa67..def93cf68 100644 --- a/ui/js/actions/wallet.js +++ b/ui/js/actions/wallet.js @@ -1,125 +1,127 @@ -import * as types from 'constants/action_types' -import lbry from 'lbry' +import * as types from "constants/action_types"; +import lbry from "lbry"; import { selectDraftTransaction, selectDraftTransactionAmount, selectBalance, -} from 'selectors/wallet' -import { - doOpenModal, -} from 'actions/app' +} from "selectors/wallet"; +import { doOpenModal } from "actions/app"; export function doUpdateBalance(balance) { return { type: types.UPDATE_BALANCE, data: { - balance: balance - } - } + balance: balance, + }, + }; } export function doFetchTransactions() { return function(dispatch, getState) { dispatch({ - type: types.FETCH_TRANSACTIONS_STARTED - }) + type: types.FETCH_TRANSACTIONS_STARTED, + }); - lbry.call('transaction_list', {}, (results) => { + lbry.call("transaction_list", {}, results => { dispatch({ type: types.FETCH_TRANSACTIONS_COMPLETED, data: { - transactions: results - } - }) - }) - } + transactions: results, + }, + }); + }); + }; } export function doGetNewAddress() { return function(dispatch, getState) { dispatch({ - type: types.GET_NEW_ADDRESS_STARTED - }) + type: types.GET_NEW_ADDRESS_STARTED, + }); lbry.wallet_new_address().then(function(address) { - localStorage.setItem('wallet_address', address); + localStorage.setItem("wallet_address", address); dispatch({ type: types.GET_NEW_ADDRESS_COMPLETED, - data: { address } - }) - }) - } + data: { address }, + }); + }); + }; } export function doCheckAddressIsMine(address) { return function(dispatch, getState) { dispatch({ - type: types.CHECK_ADDRESS_IS_MINE_STARTED - }) + type: types.CHECK_ADDRESS_IS_MINE_STARTED, + }); - lbry.checkAddressIsMine(address, (isMine) => { - if (!isMine) dispatch(doGetNewAddress()) + lbry.checkAddressIsMine(address, isMine => { + if (!isMine) dispatch(doGetNewAddress()); dispatch({ - type: types.CHECK_ADDRESS_IS_MINE_COMPLETED - }) - }) - } + type: types.CHECK_ADDRESS_IS_MINE_COMPLETED, + }); + }); + }; } export function doSendDraftTransaction() { return function(dispatch, getState) { - const state = getState() - const draftTx = selectDraftTransaction(state) - const balance = selectBalance(state) - const amount = selectDraftTransactionAmount(state) + const state = getState(); + const draftTx = selectDraftTransaction(state); + const balance = selectBalance(state); + const amount = selectDraftTransactionAmount(state); if (balance - amount < 1) { - return dispatch(doOpenModal('insufficientBalance')) + return dispatch(doOpenModal("insufficientBalance")); } dispatch({ type: types.SEND_TRANSACTION_STARTED, - }) + }); - const successCallback = (results) => { - if(results === true) { + const successCallback = results => { + if (results === true) { dispatch({ type: types.SEND_TRANSACTION_COMPLETED, - }) - dispatch(doOpenModal('transactionSuccessful')) - } - else { + }); + dispatch(doOpenModal("transactionSuccessful")); + } else { dispatch({ type: types.SEND_TRANSACTION_FAILED, - data: { error: results } - }) - dispatch(doOpenModal('transactionFailed')) + data: { error: results }, + }); + dispatch(doOpenModal("transactionFailed")); } - } + }; - const errorCallback = (error) => { + const errorCallback = error => { dispatch({ type: types.SEND_TRANSACTION_FAILED, - data: { error: error.message } - }) - dispatch(doOpenModal('transactionFailed')) - } + data: { error: error.message }, + }); + dispatch(doOpenModal("transactionFailed")); + }; - lbry.sendToAddress(draftTx.amount, draftTx.address, successCallback, errorCallback); - } + lbry.sendToAddress( + draftTx.amount, + draftTx.address, + successCallback, + errorCallback + ); + }; } export function doSetDraftTransactionAmount(amount) { return { type: types.SET_DRAFT_TRANSACTION_AMOUNT, - data: { amount } - } + data: { amount }, + }; } export function doSetDraftTransactionAddress(address) { return { type: types.SET_DRAFT_TRANSACTION_ADDRESS, - data: { address } - } + data: { address }, + }; } diff --git a/ui/js/app.js b/ui/js/app.js index 2f94dc302..1f1f32ecd 100644 --- a/ui/js/app.js +++ b/ui/js/app.js @@ -3,20 +3,26 @@ import lbry from './lbry.js'; const env = ENV; const config = require(`./config/${env}`); -const language = lbry.getClientSetting('language') ? lbry.getClientSetting('language') : 'en'; -const i18n = require('y18n')({directory: 'app/locales', updateFiles: false, locale: language}); +const language = lbry.getClientSetting('language') + ? lbry.getClientSetting('language') + : 'en'; +const i18n = require('y18n')({ + directory: 'app/locales', + updateFiles: false, + locale: language +}); const logs = []; const app = { - env: env, - config: config, - store: store, - i18n: i18n, - logs: logs, - log: function(message) { - console.log(message); - logs.push(message); - } -} + env: env, + config: config, + store: store, + i18n: i18n, + logs: logs, + log: function(message) { + console.log(message); + logs.push(message); + } +}; window.__ = i18n.__; window.__n = i18n.__n; diff --git a/ui/js/component/app/index.js b/ui/js/component/app/index.js index 5de84e28f..4c966cb56 100644 --- a/ui/js/component/app/index.js +++ b/ui/js/component/app/index.js @@ -1,26 +1,19 @@ -import React from 'react'; -import { connect } from 'react-redux' +import React from "react"; +import { connect } from "react-redux"; -import { - selectCurrentModal, -} from 'selectors/app' -import { - doCheckUpgradeAvailable, - doAlertError, -} from 'actions/app' -import { - doUpdateBalance, -} from 'actions/wallet' -import App from './view' +import { selectCurrentModal } from "selectors/app"; +import { doCheckUpgradeAvailable, doAlertError } from "actions/app"; +import { doUpdateBalance } from "actions/wallet"; +import App from "./view"; -const select = (state) => ({ +const select = state => ({ modal: selectCurrentModal(state), -}) +}); -const perform = (dispatch) => ({ - alertError: (errorList) => dispatch(doAlertError(errorList)), +const perform = dispatch => ({ + alertError: errorList => dispatch(doAlertError(errorList)), checkUpgradeAvailable: () => dispatch(doCheckUpgradeAvailable()), - updateBalance: (balance) => dispatch(doUpdateBalance(balance)) -}) + updateBalance: balance => dispatch(doUpdateBalance(balance)), +}); -export default connect(select, perform)(App) +export default connect(select, perform)(App); diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx index 1c7ff4eb4..176c04785 100644 --- a/ui/js/component/app/view.jsx +++ b/ui/js/component/app/view.jsx @@ -1,42 +1,42 @@ -import React from 'react' -import Router from 'component/router' -import Header from 'component/header'; -import ErrorModal from 'component/errorModal' -import DownloadingModal from 'component/downloadingModal' -import UpgradeModal from 'component/upgradeModal' -import lbry from 'lbry' -import {Line} from 'rc-progress' +import React from "react"; +import Router from "component/router"; +import Header from "component/header"; +import ErrorModal from "component/errorModal"; +import DownloadingModal from "component/downloadingModal"; +import UpgradeModal from "component/upgradeModal"; +import lbry from "lbry"; +import { Line } from "rc-progress"; class App extends React.Component { componentWillMount() { - document.addEventListener('unhandledError', (event) => { + document.addEventListener("unhandledError", event => { this.props.alertError(event.detail); }); if (!this.props.upgradeSkipped) { - this.props.checkUpgradeAvailable() + this.props.checkUpgradeAvailable(); } - lbry.balanceSubscribe((balance) => { - this.props.updateBalance(balance) - }) + lbry.balanceSubscribe(balance => { + this.props.updateBalance(balance); + }); } render() { - const { - modal, - } = this.props + const { modal } = this.props; - return
-
-
- + return ( +
+
+
+ +
+ {modal == "upgrade" && } + {modal == "downloading" && } + {modal == "error" && }
- {modal == 'upgrade' && } - {modal == 'downloading' && } - {modal == 'error' && } -
+ ); } } -export default App +export default App; diff --git a/ui/js/component/auth.js b/ui/js/component/auth.js index 8bea57b38..60a9ad9d4 100644 --- a/ui/js/component/auth.js +++ b/ui/js/component/auth.js @@ -3,13 +3,12 @@ import lbry from "../lbry.js"; import lbryio from "../lbryio.js"; import Modal from "./modal.js"; import ModalPage from "./modal-page.js"; -import Link from "component/link" -import {RewardLink} from 'component/reward-link'; -import {FormRow} from "../component/form.js"; -import {CreditAmount, Address} from "../component/common.js"; -import {getLocal, setLocal} from '../utils.js'; -import rewards from '../rewards' - +import Link from "component/link"; +import { RewardLink } from "component/reward-link"; +import { FormRow } from "../component/form.js"; +import { CreditAmount, Address } from "../component/common.js"; +import { getLocal, setLocal } from "../utils.js"; +import rewards from "../rewards"; class SubmitEmailStage extends React.Component { constructor(props) { @@ -17,8 +16,8 @@ class SubmitEmailStage extends React.Component { this.state = { rewardType: null, - email: '', - submitting: false + email: "", + submitting: false, }; } @@ -29,7 +28,7 @@ class SubmitEmailStage extends React.Component { } onEmailSaved(email) { - this.props.setStage("confirm", { email: email }) + this.props.setStage("confirm", { email: email }); } handleSubmit(event) { @@ -38,28 +37,56 @@ class SubmitEmailStage extends React.Component { this.setState({ submitting: true, }); - lbryio.call('user_email', 'new', {email: this.state.email}, 'post').then(() => { - this.onEmailSaved(this.state.email); - }, (error) => { - if (error.xhr && (error.xhr.status == 409 || error.message == __("This email is already in use"))) { + lbryio.call("user_email", "new", { email: this.state.email }, "post").then( + () => { this.onEmailSaved(this.state.email); - return; - } else if (this._emailRow) { - this._emailRow.showError(error.message) + }, + error => { + if ( + error.xhr && + (error.xhr.status == 409 || + error.message == __("This email is already in use")) + ) { + this.onEmailSaved(this.state.email); + return; + } else if (this._emailRow) { + this._emailRow.showError(error.message); + } + this.setState({ submitting: false }); } - this.setState({ submitting: false }); - }); + ); } render() { return (
-
{ this.handleSubmit(event) }}> - { this._emailRow = ref }} type="text" label={__("Email")} placeholder="scrwvwls@lbry.io" - name="email" value={this.state.email} - onChange={(event) => { this.handleEmailChanged(event) }} /> + { + this.handleSubmit(event); + }} + > + { + this._emailRow = ref; + }} + type="text" + label={__("Email")} + placeholder="scrwvwls@lbry.io" + name="email" + value={this.state.email} + onChange={event => { + this.handleEmailChanged(event); + }} + />
- { this.handleSubmit(event) }} /> + { + this.handleSubmit(event); + }} + />
@@ -73,7 +100,7 @@ class ConfirmEmailStage extends React.Component { this.state = { rewardType: null, - code: '', + code: "", submitting: false, errorMessage: null, }; @@ -91,34 +118,72 @@ class ConfirmEmailStage extends React.Component { submitting: true, }); - const onSubmitError = (error) => { + const onSubmitError = error => { if (this._codeRow) { - this._codeRow.showError(error.message) + this._codeRow.showError(error.message); } this.setState({ submitting: false }); }; - lbryio.call('user_email', 'confirm', {verification_token: this.state.code, email: this.props.email}, 'post').then((userEmail) => { - if (userEmail.is_verified) { - this.props.setStage("welcome") - } else { - onSubmitError(new Error(__("Your email is still not verified."))) //shouldn't happen? - } - }, onSubmitError); + lbryio + .call( + "user_email", + "confirm", + { verification_token: this.state.code, email: this.props.email }, + "post" + ) + .then(userEmail => { + if (userEmail.is_verified) { + this.props.setStage("welcome"); + } else { + onSubmitError(new Error(__("Your email is still not verified."))); //shouldn't happen? + } + }, onSubmitError); } render() { return (
-
{ this.handleSubmit(event) }}> - { this._codeRow = ref }} type="text" - name="code" placeholder="a94bXXXXXXXXXXXXXX" value={this.state.code} onChange={(event) => { this.handleCodeChanged(event) }} - helper={__("A verification code is required to access this version.")}/> + { + this.handleSubmit(event); + }} + > + { + this._codeRow = ref; + }} + type="text" + name="code" + placeholder="a94bXXXXXXXXXXXXXX" + value={this.state.code} + onChange={event => { + this.handleCodeChanged(event); + }} + helper={__( + "A verification code is required to access this version." + )} + />
- { this.handleSubmit(event)}} /> + { + this.handleSubmit(event); + }} + />
- {__("No code?")} { this.props.setStage("nocode")}} label={__("Click here")} />. + {__("No code?")} + {" "} + { + this.props.setStage("nocode"); + }} + label={__("Click here")} + />.
@@ -129,7 +194,7 @@ class ConfirmEmailStage extends React.Component { class WelcomeStage extends React.Component { static propTypes = { endAuth: React.PropTypes.func, - } + }; constructor(props) { super(props); @@ -143,77 +208,143 @@ class WelcomeStage extends React.Component { onRewardClaim(reward) { this.setState({ hasReward: true, - rewardAmount: reward.amount - }) + rewardAmount: reward.amount, + }); } render() { - return ( - !this.state.hasReward ? - + return !this.state.hasReward + ?

{__("Welcome to LBRY.")}

-

{__("Using LBRY is like dating a centaur. Totally normal up top, and way different underneath.")}

+

+ {__( + "Using LBRY is like dating a centaur. Totally normal up top, and way different underneath." + )} +

{__("Up top, LBRY is similar to popular media sites.")}

-

{__("Below, LBRY is controlled by users -- you -- via blockchain and decentralization.")}

-

{__("Thank you for making content freedom possible! Here's a nickel, kid.")}

-
- { this.onRewardClaim(event) }} onRewardFailure={() => this.props.setStage(null)} onConfirmed={() => { this.props.setStage(null) }} /> +

+ {__( + "Below, LBRY is controlled by users -- you -- via blockchain and decentralization." + )} +

+

+ {__( + "Thank you for making content freedom possible! Here's a nickel, kid." + )} +

+
+ { + this.onRewardClaim(event); + }} + onRewardFailure={() => this.props.setStage(null)} + onConfirmed={() => { + this.props.setStage(null); + }} + />
- : - { this.props.setStage(null) }}> + + : { + this.props.setStage(null); + }} + >

{__("About Your Reward")}

-

{__("You earned a reward of ")} {__("LBRY credits, or \"LBC\".")}

-

{__("This reward will show in your Wallet momentarily, probably while you are reading this message.")}

-

{__("LBC is used to compensate creators, to publish, and to have say in how the network works.")}

-

{__("No need to understand it all just yet! Try watching or downloading something next.")}

-

{__("Finally, know that LBRY is an early beta and that it earns the name.")}

+

+ {__("You earned a reward of ")} + {" "} + + {" "}{__('LBRY credits, or "LBC".')} +

+

+ {__( + "This reward will show in your Wallet momentarily, probably while you are reading this message." + )} +

+

+ {__( + "LBC is used to compensate creators, to publish, and to have say in how the network works." + )} +

+

+ {__( + "No need to understand it all just yet! Try watching or downloading something next." + )} +

+

+ {__( + "Finally, know that LBRY is an early beta and that it earns the name." + )} +

- - ); + ; } } -const ErrorStage = (props) => { - return
-

{__("An error was encountered that we cannot continue from.")}

-

{__("At least we're earning the name beta.")}

- { props.errorText ?

{__("Message:")} {props.errorText}

: '' } - { window.location.reload() } } /> -
-} - -const PendingStage = (props) => { - return
-

{__("Preparing for first access")}

-
-} +const ErrorStage = props => { + return ( +
+

{__("An error was encountered that we cannot continue from.")}

+

{__("At least we're earning the name beta.")}

+ {props.errorText ?

{__("Message:")} {props.errorText}

: ""} + { + window.location.reload(); + }} + /> +
+ ); +}; +const PendingStage = props => { + return ( +
+

+ {__("Preparing for first access")} +

+
+ ); +}; class CodeRequiredStage extends React.Component { constructor(props) { super(props); - this._balanceSubscribeId = null + this._balanceSubscribeId = null; this.state = { balance: 0, - address: getLocal('wallet_address') + address: getLocal("wallet_address"), }; } componentWillMount() { - this._balanceSubscribeId = lbry.balanceSubscribe((balance) => { + this._balanceSubscribeId = lbry.balanceSubscribe(balance => { this.setState({ - balance: balance + balance: balance, }); - }) + }); if (!this.state.address) { - lbry.wallet_unused_address().then((address) => { - setLocal('wallet_address', address); + lbry.wallet_unused_address().then(address => { + setLocal("wallet_address", address); this.setState({ address: address }); }); } @@ -221,7 +352,7 @@ class CodeRequiredStage extends React.Component { componentWillUnmount() { if (this._balanceSubscribeId) { - lbry.balanceUnsubscribe(this._balanceSubscribeId) + lbry.balanceUnsubscribe(this._balanceSubscribeId); } } @@ -230,27 +361,62 @@ class CodeRequiredStage extends React.Component { return (
-

{__("Access to LBRY is restricted as we build and scale the network.")}

+

+ {__( + "Access to LBRY is restricted as we build and scale the network." + )} +

{__("There are two ways in:")}

{__("Own LBRY Credits")}

{__("If you own at least 1 LBC, you can get in right now.")}

-

{ setLocal('auth_bypassed', true); this.props.setStage(null); }} - disabled={disabled} label={__("Let Me In")} button={ disabled ? "alt" : "primary" } />

-

{__("Your balance is ")}. {__("To increase your balance, send credits to this address:")}

-

+

+ { + setLocal("auth_bypassed", true); + this.props.setStage(null); + }} + disabled={disabled} + label={__("Let Me In")} + button={disabled ? "alt" : "primary"} + /> +

+

+ {__("Your balance is ")}. {__("To increase your balance, send credits to this address:")} +

+

+

+

{__("If you don't understand how to send credits, then...")}

{__("Wait For A Code")}

-

{__("If you provide your email, you'll automatically receive a notification when the system is open.")}

-

{ this.props.setStage("email"); }} label={__("Return")} />

+

+ {__( + "If you provide your email, you'll automatically receive a notification when the system is open." + )} +

+

+ { + this.props.setStage("email"); + }} + label={__("Return")} + /> +

); } } - export class AuthOverlay extends React.Component { constructor(props) { super(props); @@ -261,67 +427,89 @@ export class AuthOverlay extends React.Component { nocode: CodeRequiredStage, email: SubmitEmailStage, confirm: ConfirmEmailStage, - welcome: WelcomeStage - } + welcome: WelcomeStage, + }; this.state = { stage: "pending", - stageProps: {} + stageProps: {}, }; } setStage(stage, stageProps = {}) { this.setState({ stage: stage, - stageProps: stageProps - }) + stageProps: stageProps, + }); } componentWillMount() { - lbryio.authenticate().then((user) => { - if (!user.has_verified_email) { - if (getLocal('auth_bypassed')) { - this.setStage(null) + lbryio + .authenticate() + .then(user => { + if (!user.has_verified_email) { + if (getLocal("auth_bypassed")) { + this.setStage(null); + } else { + this.setStage("email", {}); + } } else { - this.setStage("email", {}) + lbryio.call("reward", "list", {}).then(userRewards => { + userRewards.filter(function(reward) { + return ( + reward.reward_type == rewards.TYPE_NEW_USER && + reward.transaction_id + ); + }).length + ? this.setStage(null) + : this.setStage("welcome"); + }); } - } else { - lbryio.call('reward', 'list', {}).then((userRewards) => { - userRewards.filter(function(reward) { - return reward.reward_type == rewards.TYPE_NEW_USER && reward.transaction_id; - }).length ? - this.setStage(null) : - this.setStage("welcome") - }); - } - }).catch((err) => { - this.setStage("error", { errorText: err.message }) - document.dispatchEvent(new CustomEvent('unhandledError', { - detail: { - message: err.message, - data: err.stack - } - })); - }) + }) + .catch(err => { + this.setStage("error", { errorText: err.message }); + document.dispatchEvent( + new CustomEvent("unhandledError", { + detail: { + message: err.message, + data: err.stack, + }, + }) + ); + }); } render() { if (!this.state.stage) { - return null; + return null; } const StageContent = this._stages[this.state.stage]; if (!StageContent) { - return {__("Unknown authentication step.")} + return ( + {__("Unknown authentication step.")} + ); } - return ( - this.state.stage != "welcome" ? - -

{__("LBRY Early Access")}

- { this.setStage(stage, stageProps) }} /> - : - { this.setStage(stage, stageProps) }} {...this.state.stageProps} /> - ); + return this.state.stage != "welcome" + ? +

{__("LBRY Early Access")}

+ { + this.setStage(stage, stageProps); + }} + /> + + : { + this.setStage(stage, stageProps); + }} + {...this.state.stageProps} + />; } } diff --git a/ui/js/component/common.js b/ui/js/component/common.js index cc5578f1a..58f2d1036 100644 --- a/ui/js/component/common.js +++ b/ui/js/component/common.js @@ -1,5 +1,5 @@ -import React from 'react'; -import lbry from '../lbry.js'; +import React from "react"; +import lbry from "../lbry.js"; //component/icon.js export class Icon extends React.Component { @@ -7,37 +7,50 @@ export class Icon extends React.Component { icon: React.PropTypes.string.isRequired, className: React.PropTypes.string, fixed: React.PropTypes.bool, - } + }; render() { - const {fixed, className} = this.props; - const spanClassName = ('icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') + - this.props.icon + ' ' + (this.props.className || '')); - return + const { fixed, className } = this.props; + const spanClassName = + "icon " + + ("fixed" in this.props ? "icon-fixed-width " : "") + + this.props.icon + + " " + + (this.props.className || ""); + return ; } } export class TruncatedText extends React.Component { static propTypes = { lines: React.PropTypes.number, - } + }; static defaultProps = { - lines: null - } + lines: null, + }; render() { - return {this.props.children}; + return ( + + {this.props.children} + + ); } } export class BusyMessage extends React.Component { static propTypes = { message: React.PropTypes.string, - } + }; render() { - return {this.props.message} + return ( + {this.props.message} + ); } } @@ -54,23 +67,29 @@ export class CreditAmount extends React.Component { isEstimate: React.PropTypes.bool, label: React.PropTypes.bool, showFree: React.PropTypes.bool, - look: React.PropTypes.oneOf(['indicator', 'plain']), - } + look: React.PropTypes.oneOf(["indicator", "plain"]), + }; static defaultProps = { precision: 1, label: true, showFree: false, - look: 'indicator', - } + look: "indicator", + }; render() { - const formattedAmount = lbry.formatCredits(this.props.amount, this.props.precision); + const formattedAmount = lbry.formatCredits( + this.props.amount, + this.props.precision + ); let amountText; if (this.props.showFree && parseFloat(formattedAmount) == 0) { - amountText = __('free'); + amountText = __("free"); } else if (this.props.label) { - amountText = formattedAmount + ' ' + (parseFloat(formattedAmount) == 1 ? __('credit') : __('credits')); + amountText = + formattedAmount + + " " + + (parseFloat(formattedAmount) == 1 ? __("credit") : __("credits")); } else { amountText = formattedAmount; } @@ -80,19 +99,27 @@ export class CreditAmount extends React.Component { {amountText} - { this.props.isEstimate ? * : null } + {this.props.isEstimate + ? + * + + : null} ); } } let addressStyle = { - fontFamily: '"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace', + fontFamily: + '"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace', }; export class Address extends React.Component { static propTypes = { address: React.PropTypes.string, - } + }; constructor(props) { super(props); @@ -102,8 +129,19 @@ export class Address extends React.Component { render() { return ( - { this._inputElem = input; }} - onFocus={() => { this._inputElem.select(); }} style={addressStyle} readOnly="readonly" value={this.props.address}> + { + this._inputElem = input; + }} + onFocus={() => { + this._inputElem.select(); + }} + style={addressStyle} + readOnly="readonly" + value={this.props.address} + /> ); } } @@ -111,7 +149,7 @@ export class Address extends React.Component { export class Thumbnail extends React.Component { static propTypes = { src: React.PropTypes.string, - } + }; handleError() { if (this.state.imageUrl != this._defaultImageUri) { @@ -124,9 +162,9 @@ export class Thumbnail extends React.Component { constructor(props) { super(props); - this._defaultImageUri = lbry.imagePath('default-thumb.svg') - this._maxLoadTime = 10000 - this._isMounted = false + this._defaultImageUri = lbry.imagePath("default-thumb.svg"); + this._maxLoadTime = 10000; + this._isMounted = false; this.state = { imageUri: this.props.src || this._defaultImageUri, @@ -149,9 +187,19 @@ export class Thumbnail extends React.Component { } render() { - const className = this.props.className ? this.props.className : '', - otherProps = Object.assign({}, this.props) + const className = this.props.className ? this.props.className : "", + otherProps = Object.assign({}, this.props); delete otherProps.className; - return { this.handleError() }} {...otherProps} className={className} src={this.state.imageUri} /> + return ( + { + this.handleError(); + }} + {...otherProps} + className={className} + src={this.state.imageUri} + /> + ); } } diff --git a/ui/js/component/downloadingModal/index.jsx b/ui/js/component/downloadingModal/index.jsx index 618f335fb..1902cbd13 100644 --- a/ui/js/component/downloadingModal/index.jsx +++ b/ui/js/component/downloadingModal/index.jsx @@ -1,25 +1,17 @@ -import React from 'react' -import { - connect -} from 'react-redux' -import { - doStartUpgrade, - doCancelUpgrade, -} from 'actions/app' -import { - selectDownloadProgress, - selectDownloadComplete, -} from 'selectors/app' -import DownloadingModal from './view' +import React from "react"; +import { connect } from "react-redux"; +import { doStartUpgrade, doCancelUpgrade } from "actions/app"; +import { selectDownloadProgress, selectDownloadComplete } from "selectors/app"; +import DownloadingModal from "./view"; -const select = (state) => ({ +const select = state => ({ downloadProgress: selectDownloadProgress(state), downloadComplete: selectDownloadComplete(state), -}) +}); -const perform = (dispatch) => ({ +const perform = dispatch => ({ startUpgrade: () => dispatch(doStartUpgrade()), - cancelUpgrade: () => dispatch(doCancelUpgrade()) -}) + cancelUpgrade: () => dispatch(doCancelUpgrade()), +}); -export default connect(select, perform)(DownloadingModal) +export default connect(select, perform)(DownloadingModal); diff --git a/ui/js/component/downloadingModal/view.jsx b/ui/js/component/downloadingModal/view.jsx index 053668437..4025ea372 100644 --- a/ui/js/component/downloadingModal/view.jsx +++ b/ui/js/component/downloadingModal/view.jsx @@ -1,9 +1,7 @@ -import React from 'react' -import { - Modal -} from 'component/modal' -import {Line} from 'rc-progress'; -import Link from 'component/link' +import React from "react"; +import { Modal } from "component/modal"; +import { Line } from "rc-progress"; +import Link from "component/link"; class DownloadingModal extends React.Component { render() { @@ -12,29 +10,53 @@ class DownloadingModal extends React.Component { downloadComplete, startUpgrade, cancelUpgrade, - } = this.props + } = this.props; return ( - - {__("Downloading Update")}{downloadProgress ? `: ${downloadProgress}%` : null} - - {downloadComplete ? ( -
-
-

{__("Click \"Begin Upgrade\" to start the upgrade process.")}

-

{__("The app will close, and you will be prompted to install the latest version of LBRY.")}

-

{__("After the install is complete, please reopen the app.")}

-
- ) : null } + + {__("Downloading Update")} + {downloadProgress ? `: ${downloadProgress}%` : null} + + {downloadComplete + ?
+
+

{__('Click "Begin Upgrade" to start the upgrade process.')}

+

+ {__( + "The app will close, and you will be prompted to install the latest version of LBRY." + )} +

+

+ {__("After the install is complete, please reopen the app.")} +

+
+ : null}
{downloadComplete - ? + ? : null} - +
- ) + ); } } -export default DownloadingModal +export default DownloadingModal; diff --git a/ui/js/component/errorModal/index.jsx b/ui/js/component/errorModal/index.jsx index e4e4bc24b..dadbe3eb5 100644 --- a/ui/js/component/errorModal/index.jsx +++ b/ui/js/component/errorModal/index.jsx @@ -1,23 +1,16 @@ -import React from 'react' -import { - connect -} from 'react-redux' -import { - selectCurrentModal, - selectModalExtraContent, -} from 'selectors/app' -import { - doCloseModal, -} from 'actions/app' -import ErrorModal from './view' +import React from "react"; +import { connect } from "react-redux"; +import { selectCurrentModal, selectModalExtraContent } from "selectors/app"; +import { doCloseModal } from "actions/app"; +import ErrorModal from "./view"; -const select = (state) => ({ +const select = state => ({ modal: selectCurrentModal(state), error: selectModalExtraContent(state), -}) +}); -const perform = (dispatch) => ({ - closeModal: () => dispatch(doCloseModal()) -}) +const perform = dispatch => ({ + closeModal: () => dispatch(doCloseModal()), +}); -export default connect(select, perform)(ErrorModal) +export default connect(select, perform)(ErrorModal); diff --git a/ui/js/component/errorModal/view.jsx b/ui/js/component/errorModal/view.jsx index a5cbcd8c7..930511b84 100644 --- a/ui/js/component/errorModal/view.jsx +++ b/ui/js/component/errorModal/view.jsx @@ -1,41 +1,41 @@ -import React from 'react' -import lbry from 'lbry' -import { - ExpandableModal -} from 'component/modal' +import React from "react"; +import lbry from "lbry"; +import { ExpandableModal } from "component/modal"; class ErrorModal extends React.Component { render() { - const { - modal, - closeModal, - error - } = this.props + const { modal, closeModal, error } = this.props; - const errorObj = typeof error === "string" ? { error: error } : error + const errorObj = typeof error === "string" ? { error: error } : error; const error_key_labels = { - connectionString: __('API connection string'), - method: __('Method'), - params: __('Parameters'), - code: __('Error code'), - message: __('Error message'), - data: __('Error data'), - } + connectionString: __("API connection string"), + method: __("Method"), + params: __("Parameters"), + code: __("Error code"), + message: __("Error message"), + data: __("Error data"), + }; - - const errorInfoList = [] + const errorInfoList = []; for (let key of Object.keys(error)) { - let val = typeof error[key] == 'string' ? error[key] : JSON.stringify(error[key]); + let val = typeof error[key] == "string" + ? error[key] + : JSON.stringify(error[key]); let label = error_key_labels[key]; - errorInfoList.push(
  • {label}: {val}
    • ); + errorInfoList.push( +
  • {label}: {val}
    • + ); } - const errorInfo =
      {errorInfoList}
    + const errorInfo = ( +
      {errorInfoList}
    + ); - return( + return ( {__("Error")}
    -
    -

    {__("We're sorry that LBRY has encountered an error. This has been reported and we will investigate the problem.")}

    +
    + +
    +

    + {__( + "We're sorry that LBRY has encountered an error. This has been reported and we will investigate the problem." + )} +

    - ) + ); } } -export default ErrorModal +export default ErrorModal; diff --git a/ui/js/component/file-selector.js b/ui/js/component/file-selector.js index 786d82caf..677ba7f71 100644 --- a/ui/js/component/file-selector.js +++ b/ui/js/component/file-selector.js @@ -1,16 +1,16 @@ -import React from 'react'; +import React from "react"; -const {remote} = require('electron'); +const { remote } = require("electron"); class FileSelector extends React.Component { static propTypes = { - type: React.PropTypes.oneOf(['file', 'directory']), + type: React.PropTypes.oneOf(["file", "directory"]), initPath: React.PropTypes.string, onFileChosen: React.PropTypes.func, - } + }; static defaultProps = { - type: 'file', - } + type: "file", + }; componentWillMount() { this.setState({ @@ -19,40 +19,46 @@ class FileSelector extends React.Component { } handleButtonClick() { - remote.dialog.showOpenDialog({ - properties: [this.props.type == 'file' ? 'openFile' : 'openDirectory'], - }, (paths) => { - if (!paths) { // User hit cancel, so do nothing - return; - } + remote.dialog.showOpenDialog( + { + properties: [this.props.type == "file" ? "openFile" : "openDirectory"], + }, + paths => { + if (!paths) { + // User hit cancel, so do nothing + return; + } - const path = paths[0]; - this.setState({ - path: path, - }); - if (this.props.onFileChosen) { - this.props.onFileChosen(path); + const path = paths[0]; + this.setState({ + path: path, + }); + if (this.props.onFileChosen) { + this.props.onFileChosen(path); + } } - }); + ); } render() { return (
    - - {' '} + {" "} - {this.state.path ? - this.state.path : - __('No File Chosen')} + {this.state.path ? this.state.path : __("No File Chosen")}
    ); } -}; +} export default FileSelector; diff --git a/ui/js/component/fileActions/index.js b/ui/js/component/fileActions/index.js index 1d8ba6088..3f3e43283 100644 --- a/ui/js/component/fileActions/index.js +++ b/ui/js/component/fileActions/index.js @@ -1,49 +1,30 @@ -import React from 'react' -import { - connect, -} from 'react-redux' -import { - selectPlatform, -} from 'selectors/app' +import React from "react"; +import { connect } from "react-redux"; +import { selectPlatform } from "selectors/app"; import { makeSelectFileInfoForUri, makeSelectDownloadingForUri, makeSelectLoadingForUri, -} from 'selectors/file_info' -import { - makeSelectIsAvailableForUri, -} from 'selectors/availability' -import { - selectCurrentModal, -} from 'selectors/app' -import { - makeSelectCostInfoForUri, -} from 'selectors/cost_info' -import { - doCloseModal, - doOpenModal, - doHistoryBack, -} from 'actions/app' -import { - doFetchAvailability -} from 'actions/availability' +} from "selectors/file_info"; +import { makeSelectIsAvailableForUri } from "selectors/availability"; +import { selectCurrentModal } from "selectors/app"; +import { makeSelectCostInfoForUri } from "selectors/cost_info"; +import { doCloseModal, doOpenModal, doHistoryBack } from "actions/app"; +import { doFetchAvailability } from "actions/availability"; import { doOpenFileInShell, doOpenFileInFolder, doDeleteFile, -} from 'actions/file_info' -import { - doPurchaseUri, - doLoadVideo, -} from 'actions/content' -import FileActions from './view' +} from "actions/file_info"; +import { doPurchaseUri, doLoadVideo } from "actions/content"; +import FileActions from "./view"; const makeSelect = () => { - const selectFileInfoForUri = makeSelectFileInfoForUri() - const selectIsAvailableForUri = makeSelectIsAvailableForUri() - const selectDownloadingForUri = makeSelectDownloadingForUri() - const selectCostInfoForUri = makeSelectCostInfoForUri() - const selectLoadingForUri = makeSelectLoadingForUri() + const selectFileInfoForUri = makeSelectFileInfoForUri(); + const selectIsAvailableForUri = makeSelectIsAvailableForUri(); + const selectDownloadingForUri = makeSelectDownloadingForUri(); + const selectCostInfoForUri = makeSelectCostInfoForUri(); + const selectLoadingForUri = makeSelectLoadingForUri(); const select = (state, props) => ({ fileInfo: selectFileInfoForUri(state, props), @@ -53,23 +34,23 @@ const makeSelect = () => { downloading: selectDownloadingForUri(state, props), costInfo: selectCostInfoForUri(state, props), loading: selectLoadingForUri(state, props), - }) + }); - return select -} + return select; +}; -const perform = (dispatch) => ({ - checkAvailability: (uri) => dispatch(doFetchAvailability(uri)), +const perform = dispatch => ({ + checkAvailability: uri => dispatch(doFetchAvailability(uri)), closeModal: () => dispatch(doCloseModal()), - openInFolder: (fileInfo) => dispatch(doOpenFileInFolder(fileInfo)), - openInShell: (fileInfo) => dispatch(doOpenFileInShell(fileInfo)), + openInFolder: fileInfo => dispatch(doOpenFileInFolder(fileInfo)), + openInShell: fileInfo => dispatch(doOpenFileInShell(fileInfo)), deleteFile: (fileInfo, deleteFromComputer) => { - dispatch(doHistoryBack()) - dispatch(doDeleteFile(fileInfo, deleteFromComputer)) + dispatch(doHistoryBack()); + dispatch(doDeleteFile(fileInfo, deleteFromComputer)); }, - openModal: (modal) => dispatch(doOpenModal(modal)), - startDownload: (uri) => dispatch(doPurchaseUri(uri, 'affirmPurchase')), - loadVideo: (uri) => dispatch(doLoadVideo(uri)), -}) + openModal: modal => dispatch(doOpenModal(modal)), + startDownload: uri => dispatch(doPurchaseUri(uri, "affirmPurchase")), + loadVideo: uri => dispatch(doLoadVideo(uri)), +}); -export default connect(makeSelect, perform)(FileActions) \ No newline at end of file +export default connect(makeSelect, perform)(FileActions); diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx index 0d45514f7..482ee0d05 100644 --- a/ui/js/component/fileActions/view.jsx +++ b/ui/js/component/fileActions/view.jsx @@ -1,33 +1,33 @@ -import React from 'react'; -import {Icon,BusyMessage} from 'component/common'; -import FilePrice from 'component/filePrice' -import {Modal} from 'component/modal'; -import {FormField} from 'component/form'; -import Link from 'component/link'; -import {ToolTip} from 'component/tooltip'; -import {DropDownMenu, DropDownMenuItem} from 'component/menu'; +import React from "react"; +import { Icon, BusyMessage } from "component/common"; +import FilePrice from "component/filePrice"; +import { Modal } from "component/modal"; +import { FormField } from "component/form"; +import Link from "component/link"; +import { ToolTip } from "component/tooltip"; +import { DropDownMenu, DropDownMenuItem } from "component/menu"; class FileActions extends React.Component { constructor(props) { - super(props) + super(props); this.state = { forceShowActions: false, deleteChecked: false, - } + }; } componentWillMount() { - this.checkAvailability(this.props.uri) + this.checkAvailability(this.props.uri); } componentWillReceiveProps(nextProps) { - this.checkAvailability(nextProps.uri) + this.checkAvailability(nextProps.uri); } checkAvailability(uri) { if (!this._uri || uri !== this._uri) { this._uri = uri; - this.props.checkAvailability(uri) + this.props.checkAvailability(uri); } } @@ -40,12 +40,12 @@ class FileActions extends React.Component { handleDeleteCheckboxClicked(event) { this.setState({ deleteChecked: event.target.checked, - }) + }); } onAffirmPurchase() { - this.props.closeModal() - this.props.loadVideo(this.props.uri) + this.props.closeModal(); + this.props.loadVideo(this.props.uri); } render() { @@ -64,88 +64,159 @@ class FileActions extends React.Component { startDownload, costInfo, loading, - } = this.props + } = this.props; const deleteChecked = this.state.deleteChecked, - metadata = fileInfo ? fileInfo.metadata : null, - openInFolderMessage = platform.startsWith('Mac') ? __('Open in Finder') : __('Open in Folder'), - showMenu = fileInfo && Object.keys(fileInfo).length > 0, - title = metadata ? metadata.title : uri; + metadata = fileInfo ? fileInfo.metadata : null, + openInFolderMessage = platform.startsWith("Mac") + ? __("Open in Finder") + : __("Open in Folder"), + showMenu = fileInfo && Object.keys(fileInfo).length > 0, + title = metadata ? metadata.title : uri; - let content + let content; if (loading || downloading) { + const progress = fileInfo && fileInfo.written_bytes + ? fileInfo.written_bytes / fileInfo.total_bytes * 100 + : 0, + label = fileInfo + ? progress.toFixed(0) + __("% complete") + : __("Connecting..."), + labelWithIcon = ( + + {label} + + ); - const - progress = (fileInfo && fileInfo.written_bytes) ? fileInfo.written_bytes / fileInfo.total_bytes * 100 : 0, - label = fileInfo ? progress.toFixed(0) + __('% complete') : __('Connecting...'), - labelWithIcon = {label}; - - content =
    -
    {labelWithIcon}
    - {labelWithIcon} -
    - + content = ( +
    +
    + {labelWithIcon} +
    + {labelWithIcon} +
    + ); } else if (!fileInfo && isAvailable === undefined) { - - content = - + content = ; } else if (!fileInfo && !isAvailable && !this.state.forceShowActions) { - - content =
    -
    {__("Content unavailable.")}
    - - -
    - + content = ( +
    +
    + {__("Content unavailable.")} +
    + + +
    + ); } else if (fileInfo === null && !downloading) { if (!costInfo) { - content = + content = ; } else { - content = { startDownload(uri) } } />; + content = ( + { + startDownload(uri); + }} + /> + ); } - } else if (fileInfo && fileInfo.download_path) { - content = openInShell(fileInfo)} />; + content = ( + openInShell(fileInfo)} + /> + ); } else { - console.log('handle this case of file action props?'); + console.log("handle this case of file action props?"); } return (
    - { content } - { showMenu ? - - openInFolder(fileInfo)} label={openInFolderMessage} /> - openModal('confirmRemove')} label={__("Remove...")} /> - : '' } - - {__("This will purchase")} {title} {__("for")} {__("credits")}. + {content} + {showMenu + ? + openInFolder(fileInfo)} + label={openInFolderMessage} + /> + openModal("confirmRemove")} + label={__("Remove...")} + /> + + : ""} + + {__("This will purchase")} {title} {__("for")} + {" "} + {" "}{__("credits")}. - + {__("You don't have enough LBRY credits to pay for this stream.")} - + {__("LBRY was unable to download the stream")} {uri}. - deleteFile(fileInfo.outpoint, deleteChecked)} - onAborted={closeModal}> -

    {__("Are you sure you'd like to remove")} {title} {__("from LBRY?")}

    + deleteFile(fileInfo.outpoint, deleteChecked)} + onAborted={closeModal} + > +

    + {__("Are you sure you'd like to remove")} {title} + {" "}{__("from LBRY?")} +

    - +
    ); } } -export default FileActions +export default FileActions; diff --git a/ui/js/component/fileCard/index.js b/ui/js/component/fileCard/index.js index 89ebc5040..dcf1aad5c 100644 --- a/ui/js/component/fileCard/index.js +++ b/ui/js/component/fileCard/index.js @@ -1,34 +1,21 @@ -import React from 'react' -import { - connect -} from 'react-redux' -import { - doNavigate, -} from 'actions/app' -import { - doResolveUri, - doCancelResolveUri, -} from 'actions/content' -import { - selectObscureNsfw, -} from 'selectors/app' +import React from "react"; +import { connect } from "react-redux"; +import { doNavigate } from "actions/app"; +import { doResolveUri, doCancelResolveUri } from "actions/content"; +import { selectObscureNsfw } from "selectors/app"; import { makeSelectClaimForUri, makeSelectMetadataForUri, -} from 'selectors/claims' -import { - makeSelectFileInfoForUri, -} from 'selectors/file_info' -import { - makeSelectIsResolvingForUri, -} from 'selectors/content' -import FileCard from './view' +} from "selectors/claims"; +import { makeSelectFileInfoForUri } from "selectors/file_info"; +import { makeSelectIsResolvingForUri } from "selectors/content"; +import FileCard from "./view"; const makeSelect = () => { - const selectClaimForUri = makeSelectClaimForUri() - const selectFileInfoForUri = makeSelectFileInfoForUri() - const selectMetadataForUri = makeSelectMetadataForUri() - const selectResolvingUri = makeSelectIsResolvingForUri() + const selectClaimForUri = makeSelectClaimForUri(); + const selectFileInfoForUri = makeSelectFileInfoForUri(); + const selectMetadataForUri = makeSelectMetadataForUri(); + const selectResolvingUri = makeSelectIsResolvingForUri(); const select = (state, props) => ({ claim: selectClaimForUri(state, props), @@ -36,15 +23,15 @@ const makeSelect = () => { obscureNsfw: selectObscureNsfw(state), metadata: selectMetadataForUri(state, props), isResolvingUri: selectResolvingUri(state, props), - }) + }); - return select -} + return select; +}; -const perform = (dispatch) => ({ +const perform = dispatch => ({ navigate: (path, params) => dispatch(doNavigate(path, params)), - resolveUri: (uri) => dispatch(doResolveUri(uri)), - cancelResolveUri: (uri) => dispatch(doCancelResolveUri(uri)) -}) + resolveUri: uri => dispatch(doResolveUri(uri)), + cancelResolveUri: uri => dispatch(doCancelResolveUri(uri)), +}); -export default connect(makeSelect, perform)(FileCard) +export default connect(makeSelect, perform)(FileCard); diff --git a/ui/js/component/fileCard/view.jsx b/ui/js/component/fileCard/view.jsx index d333c03c9..0dd04b48d 100644 --- a/ui/js/component/fileCard/view.jsx +++ b/ui/js/component/fileCard/view.jsx @@ -1,42 +1,33 @@ -import React from 'react'; -import lbry from 'lbry.js'; -import lbryuri from 'lbryuri.js'; -import Link from 'component/link'; -import {Thumbnail, TruncatedText, Icon} from 'component/common'; -import FilePrice from 'component/filePrice' -import UriIndicator from 'component/uriIndicator'; +import React from "react"; +import lbry from "lbry.js"; +import lbryuri from "lbryuri.js"; +import Link from "component/link"; +import { Thumbnail, TruncatedText, Icon } from "component/common"; +import FilePrice from "component/filePrice"; +import UriIndicator from "component/uriIndicator"; class FileCard extends React.Component { componentWillMount() { - this.resolve(this.props) + this.resolve(this.props); } componentWillReceiveProps(nextProps) { - this.resolve(nextProps) + this.resolve(nextProps); } resolve(props) { - const { - isResolvingUri, - resolveUri, - claim, - uri, - } = props + const { isResolvingUri, resolveUri, claim, uri } = props; - if(!isResolvingUri && claim === undefined && uri) { - resolveUri(uri) + if (!isResolvingUri && claim === undefined && uri) { + resolveUri(uri); } } componentWillUnmount() { - const { - isResolvingUri, - cancelResolveUri, - uri - } = this.props + const { isResolvingUri, cancelResolveUri, uri } = this.props; if (isResolvingUri) { - cancelResolveUri(uri) + cancelResolveUri(uri); } } @@ -53,55 +44,75 @@ class FileCard extends React.Component { } render() { - - const { - claim, - fileInfo, - metadata, - isResolvingUri, - navigate, - } = this.props + const { claim, fileInfo, metadata, isResolvingUri, navigate } = this.props; const uri = lbryuri.normalize(this.props.uri); - const title = !isResolvingUri && metadata && metadata.title ? metadata.title : uri; + const title = !isResolvingUri && metadata && metadata.title + ? metadata.title + : uri; const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw; - let description = "" + let description = ""; if (isResolvingUri) { - description = __("Loading...") + description = __("Loading..."); } else if (metadata && metadata.description) { - description = metadata.description + description = metadata.description; } else if (claim === null) { - description = __("This address contains no content.") + description = __("This address contains no content."); } return ( -
    +
    - navigate('/show', { uri })} className="card__link"> + navigate("/show", { uri })} + className="card__link" + >
    -
    {title}
    +
    + {title} +
    - + - { fileInfo ? {' '} : '' } + {fileInfo + ? {" "} + : ""}
    - {metadata && metadata.thumbnail && -
    - } + {metadata && + metadata.thumbnail && +
    }
    - {description} + {description}
    {obscureNsfw && this.state.hovered - ?
    -

    - {__("This content is Not Safe For Work. To view adult content, please change your")} navigate('settings')} label={__("Settings")} />. -

    -
    + ?
    +

    + {__( + "This content is Not Safe For Work. To view adult content, please change your" + )} + {" "} + navigate("settings")} + label={__("Settings")} + />. +

    +
    : null}
    @@ -109,4 +120,4 @@ class FileCard extends React.Component { } } -export default FileCard +export default FileCard; diff --git a/ui/js/component/fileList/index.js b/ui/js/component/fileList/index.js index dd0209b40..966481a30 100644 --- a/ui/js/component/fileList/index.js +++ b/ui/js/component/fileList/index.js @@ -1,13 +1,9 @@ -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) => ({ -}) +const select = state => ({}); -const perform = (dispatch) => ({ -}) +const perform = dispatch => ({}); -export default connect(select, perform)(FileList) +export default connect(select, perform)(FileList); diff --git a/ui/js/component/fileList/view.jsx b/ui/js/component/fileList/view.jsx index cd85a7b84..fef4cc574 100644 --- a/ui/js/component/fileList/view.jsx +++ b/ui/js/component/fileList/view.jsx @@ -1,20 +1,20 @@ -import React from 'react'; -import lbry from 'lbry.js'; -import lbryuri from 'lbryuri.js'; -import Link from 'component/link'; -import {FormField} from 'component/form.js'; -import FileTile from 'component/fileTile'; -import rewards from 'rewards.js'; -import lbryio from 'lbryio.js'; -import {BusyMessage, Thumbnail} from 'component/common.js'; +import React from "react"; +import lbry from "lbry.js"; +import lbryuri from "lbryuri.js"; +import Link from "component/link"; +import { FormField } from "component/form.js"; +import FileTile from "component/fileTile"; +import rewards from "rewards.js"; +import lbryio from "lbryio.js"; +import { BusyMessage, Thumbnail } from "component/common.js"; class FileList extends React.Component { constructor(props) { - super(props) + super(props); this.state = { - sortBy: 'date', - } + sortBy: "date", + }; this._sortFunctions = { date: function(fileInfos) { @@ -22,8 +22,12 @@ class FileList extends React.Component { }, title: function(fileInfos) { return fileInfos.slice().sort(function(fileInfo1, fileInfo2) { - const title1 = fileInfo1.metadata ? fileInfo1.metadata.stream.metadata.title.toLowerCase() : fileInfo1.name; - const title2 = fileInfo2.metadata ? fileInfo2.metadata.stream.metadata.title.toLowerCase() : fileInfo2.name; + const title1 = fileInfo1.metadata + ? fileInfo1.metadata.stream.metadata.title.toLowerCase() + : fileInfo1.name; + const title2 = fileInfo2.metadata + ? fileInfo2.metadata.stream.metadata.title.toLowerCase() + : fileInfo2.name; if (title1 < title2) { return -1; } else if (title1 > title2) { @@ -31,53 +35,56 @@ class FileList extends React.Component { } else { 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; - } - }) + 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; + } + }); }, - } + }; } handleSortChanged(event) { this.setState({ sortBy: event.target.value, - }) + }); } render() { - const { - handleSortChanged, - fetching, - fileInfos, - } = this.props - const { - sortBy, - } = this.state - const content = [] + const { handleSortChanged, fetching, fileInfos } = this.props; + const { sortBy } = this.state; + const content = []; this._sortFunctions[sortBy](fileInfos).forEach(fileInfo => { const uri = lbryuri.build({ contentName: fileInfo.name, channelName: fileInfo.channel_name, - }) - content.push() - }) + }); + content.push( + + ); + }); return (
    - { fetching && } - - {__("Sort by")} { ' ' } + {fetching && } + + {__("Sort by")} {" "} @@ -86,8 +93,8 @@ class FileList extends React.Component { {content}
    - ) + ); } } -export default FileList +export default FileList; diff --git a/ui/js/component/fileListSearch/index.js b/ui/js/component/fileListSearch/index.js index ed452052b..8008aaaef 100644 --- a/ui/js/component/fileListSearch/index.js +++ b/ui/js/component/fileListSearch/index.js @@ -1,29 +1,23 @@ -import React from 'react' -import { - connect, -} from 'react-redux' -import { - doSearch, -} from 'actions/search' +import React from "react"; +import { connect } from "react-redux"; +import { doSearch } from "actions/search"; import { selectIsSearching, selectCurrentSearchResults, selectSearchQuery, -} from 'selectors/search' -import { - doNavigate, -} from 'actions/app' -import FileListSearch from './view' +} from "selectors/search"; +import { doNavigate } from "actions/app"; +import FileListSearch from "./view"; -const select = (state) => ({ +const select = state => ({ isSearching: selectIsSearching(state), query: selectSearchQuery(state), - results: selectCurrentSearchResults(state) -}) + results: selectCurrentSearchResults(state), +}); -const perform = (dispatch) => ({ - navigate: (path) => dispatch(doNavigate(path)), - search: (search) => dispatch(doSearch(search)) -}) +const perform = dispatch => ({ + navigate: path => dispatch(doNavigate(path)), + search: search => dispatch(doSearch(search)), +}); -export default connect(select, perform)(FileListSearch) +export default connect(select, perform)(FileListSearch); diff --git a/ui/js/component/fileListSearch/view.jsx b/ui/js/component/fileListSearch/view.jsx index 7666c54fc..2a6f2fc96 100644 --- a/ui/js/component/fileListSearch/view.jsx +++ b/ui/js/component/fileListSearch/view.jsx @@ -1,76 +1,76 @@ -import React from 'react'; -import lbry from 'lbry'; -import lbryio from 'lbryio'; -import lbryuri from 'lbryuri'; -import lighthouse from 'lighthouse'; -import FileTile from 'component/fileTile' -import Link from 'component/link' -import {ToolTip} from 'component/tooltip.js'; -import {BusyMessage} from 'component/common.js'; +import React from "react"; +import lbry from "lbry"; +import lbryio from "lbryio"; +import lbryuri from "lbryuri"; +import lighthouse from "lighthouse"; +import FileTile from "component/fileTile"; +import Link from "component/link"; +import { ToolTip } from "component/tooltip.js"; +import { BusyMessage } from "component/common.js"; -const SearchNoResults = (props) => { - const { - navigate, - query, - } = props +const SearchNoResults = props => { + const { navigate, query } = props; - return
    - - {__("No one has checked anything in for %s yet."), query} { ' ' } - navigate('/publish')} /> - -
    ; -} + return ( +
    + + {(__("No one has checked anything in for %s yet."), query)} {" "} + navigate("/publish")} /> + +
    + ); +}; -const FileListSearchResults = (props) => { - const { - results, - } = props +const FileListSearchResults = props => { + const { results } = props; const rows = [], seenNames = {}; //fix this when the search API returns claim IDs - for (let {name, claim, claim_id, channel_name, channel_id, txid, nout} of results) { + for (let { + name, + claim, + claim_id, + channel_name, + channel_id, + txid, + nout, + } of results) { const uri = lbryuri.build({ channelName: channel_name, contentName: name, claimId: channel_id || claim_id, }); - rows.push( - - ); + rows.push(); } - return ( -
    {rows}
    - ); -} + return
    {rows}
    ; +}; -class FileListSearch extends React.Component{ +class FileListSearch extends React.Component { componentWillMount() { - this.props.search(this.props.query) + this.props.search(this.props.query); } render() { - const { - isSearching, - results - } = this.props + const { isSearching, results } = this.props; return (
    - {isSearching && !results && + {isSearching && + !results && } - {isSearching && results && + {isSearching && + results && } - {(results && !!results.length) ? - : - } + {results && !!results.length + ? + : }
    - ) + ); } } -export default FileListSearch +export default FileListSearch; diff --git a/ui/js/component/filePrice/index.js b/ui/js/component/filePrice/index.js index 65e870a58..d97249e3f 100644 --- a/ui/js/component/filePrice/index.js +++ b/ui/js/component/filePrice/index.js @@ -1,31 +1,27 @@ -import React from 'react' -import { - connect, -} from 'react-redux' -import { - doFetchCostInfoForUri, -} from 'actions/cost_info' +import React from "react"; +import { connect } from "react-redux"; +import { doFetchCostInfoForUri } from "actions/cost_info"; import { makeSelectCostInfoForUri, makeSelectFetchingCostInfoForUri, -} from 'selectors/cost_info' -import FilePrice from './view' +} from "selectors/cost_info"; +import FilePrice from "./view"; const makeSelect = () => { - const selectCostInfoForUri = makeSelectCostInfoForUri() - const selectFetchingCostInfoForUri = makeSelectFetchingCostInfoForUri() + const selectCostInfoForUri = makeSelectCostInfoForUri(); + const selectFetchingCostInfoForUri = makeSelectFetchingCostInfoForUri(); const select = (state, props) => ({ costInfo: selectCostInfoForUri(state, props), fetching: selectFetchingCostInfoForUri(state, props), - }) + }); - return select -} + return select; +}; -const perform = (dispatch) => ({ - fetchCostInfo: (uri) => dispatch(doFetchCostInfoForUri(uri)), +const perform = dispatch => ({ + fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)), // cancelFetchCostInfo: (uri) => dispatch(doCancelFetchCostInfoForUri(uri)) -}) +}); -export default connect(makeSelect, perform)(FilePrice) +export default connect(makeSelect, perform)(FilePrice); diff --git a/ui/js/component/filePrice/view.jsx b/ui/js/component/filePrice/view.jsx index 2a0872492..4bbb163dc 100644 --- a/ui/js/component/filePrice/view.jsx +++ b/ui/js/component/filePrice/view.jsx @@ -1,44 +1,43 @@ -import React from 'react' -import { - CreditAmount, -} from 'component/common' +import React from "react"; +import { CreditAmount } from "component/common"; -class FilePrice extends React.Component{ +class FilePrice extends React.Component { componentWillMount() { - this.fetchCost(this.props) + this.fetchCost(this.props); } componentWillReceiveProps(nextProps) { - this.fetchCost(nextProps) + this.fetchCost(nextProps); } fetchCost(props) { - const { - costInfo, - fetchCostInfo, - uri, - fetching, - } = props + const { costInfo, fetchCostInfo, uri, fetching } = props; if (costInfo === undefined && !fetching) { - fetchCostInfo(uri) + fetchCostInfo(uri); } } render() { - const { - costInfo, - look = 'indicator', - } = this.props + const { costInfo, look = "indicator" } = this.props; - const isEstimate = costInfo ? !costInfo.includesData : null + const isEstimate = costInfo ? !costInfo.includesData : null; if (!costInfo) { - return ???; + return ( + ??? + ); } - return + return ( + + ); } } -export default FilePrice +export default FilePrice; diff --git a/ui/js/component/fileTile/index.js b/ui/js/component/fileTile/index.js index d61e58b64..58a34b13d 100644 --- a/ui/js/component/fileTile/index.js +++ b/ui/js/component/fileTile/index.js @@ -1,33 +1,21 @@ -import React from 'react' -import { - connect -} from 'react-redux' -import { - doNavigate, -} from 'actions/app' -import { - doResolveUri, -} from 'actions/content' +import React from "react"; +import { connect } from "react-redux"; +import { doNavigate } from "actions/app"; +import { doResolveUri } from "actions/content"; import { makeSelectClaimForUri, makeSelectMetadataForUri, -} from 'selectors/claims' -import { - makeSelectFileInfoForUri, -} from 'selectors/file_info' -import { - selectObscureNsfw, -} from 'selectors/app' -import { - makeSelectIsResolvingForUri, -} from 'selectors/content' -import FileTile from './view' +} from "selectors/claims"; +import { makeSelectFileInfoForUri } from "selectors/file_info"; +import { selectObscureNsfw } from "selectors/app"; +import { makeSelectIsResolvingForUri } from "selectors/content"; +import FileTile from "./view"; const makeSelect = () => { - const selectClaimForUri = makeSelectClaimForUri() - const selectFileInfoForUri = makeSelectFileInfoForUri() - const selectMetadataForUri = makeSelectMetadataForUri() - const selectResolvingUri = makeSelectIsResolvingForUri() + const selectClaimForUri = makeSelectClaimForUri(); + const selectFileInfoForUri = makeSelectFileInfoForUri(); + const selectMetadataForUri = makeSelectMetadataForUri(); + const selectResolvingUri = makeSelectIsResolvingForUri(); const select = (state, props) => ({ claim: selectClaimForUri(state, props), @@ -35,14 +23,14 @@ const makeSelect = () => { obscureNsfw: selectObscureNsfw(state), metadata: selectMetadataForUri(state, props), isResolvingUri: selectResolvingUri(state, props), - }) + }); - return select -} + return select; +}; -const perform = (dispatch) => ({ +const perform = dispatch => ({ navigate: (path, params) => dispatch(doNavigate(path, params)), - resolveUri: (uri) => dispatch(doResolveUri(uri)), -}) + resolveUri: uri => dispatch(doResolveUri(uri)), +}); -export default connect(makeSelect, perform)(FileTile) \ No newline at end of file +export default connect(makeSelect, perform)(FileTile); diff --git a/ui/js/component/fileTile/view.jsx b/ui/js/component/fileTile/view.jsx index 610ad2d28..d76d75ec2 100644 --- a/ui/js/component/fileTile/view.jsx +++ b/ui/js/component/fileTile/view.jsx @@ -1,38 +1,37 @@ -import React from 'react'; -import lbry from 'lbry.js'; -import lbryuri from 'lbryuri.js'; -import Link from 'component/link'; -import FileActions from 'component/fileActions'; -import {Thumbnail, TruncatedText,} from 'component/common.js'; -import FilePrice from 'component/filePrice' -import UriIndicator from 'component/uriIndicator'; +import React from "react"; +import lbry from "lbry.js"; +import lbryuri from "lbryuri.js"; +import Link from "component/link"; +import FileActions from "component/fileActions"; +import { Thumbnail, TruncatedText } from "component/common.js"; +import FilePrice from "component/filePrice"; +import UriIndicator from "component/uriIndicator"; class FileTile extends React.Component { - static SHOW_EMPTY_PUBLISH = "publish" - static SHOW_EMPTY_PENDING = "pending" + static SHOW_EMPTY_PUBLISH = "publish"; + static SHOW_EMPTY_PENDING = "pending"; constructor(props) { - super(props) + super(props); this.state = { showNsfwHelp: false, - } + }; } componentDidMount() { - const { - isResolvingUri, - resolveUri, - claim, - uri, - } = this.props + const { isResolvingUri, resolveUri, claim, uri } = this.props; - if(!isResolvingUri && !claim && uri) { - resolveUri(uri) + if (!isResolvingUri && !claim && uri) { + resolveUri(uri); } } 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, }); @@ -55,40 +54,61 @@ class FileTile extends React.Component { showEmpty, navigate, hidePrice, - } = this.props + } = this.props; const uri = lbryuri.normalize(this.props.uri); const isClaimed = !!claim; - const isClaimable = lbryuri.isClaimable(uri) - const title = isClaimed && metadata && metadata.title ? metadata.title : uri; + const isClaimable = lbryuri.isClaimable(uri); + const title = isClaimed && metadata && metadata.title + ? metadata.title + : uri; const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw; - let onClick = () => navigate('/show', { uri }) + let onClick = () => navigate("/show", { uri }); - let description = "" + let description = ""; if (isClaimed) { - description = metadata && metadata.description + description = metadata && metadata.description; } else if (isResolvingUri) { - description = __("Loading...") + description = __("Loading..."); } else if (showEmpty === FileTile.SHOW_EMPTY_PUBLISH) { - onClick = () => navigate('/publish', { }) - description = - {__("This location is unused.")} { ' ' } - { isClaimable && {__("Put something here!")} } - + onClick = () => navigate("/publish", {}); + description = ( + + {__("This location is unused.")} {" "} + {isClaimable && + {__("Put something here!")}} + + ); } else if (showEmpty === FileTile.SHOW_EMPTY_PENDING) { - description = {__("This file is pending confirmation.")} + description = ( + + {__("This file is pending confirmation.")} + + ); } return ( -
    +
    -
    -
    +
    - { !hidePrice ? : null} + {!hidePrice ? : null}
    {uri}

    {title}

    @@ -101,15 +121,23 @@ class FileTile extends React.Component {
    {this.state.showNsfwHelp - ?
    -

    - {__("This content is Not Safe For Work. To view adult content, please change your")} navigate('/settings')} label={__("Settings")} />. -

    -
    + ?
    +

    + {__( + "This content is Not Safe For Work. To view adult content, please change your" + )} + {" "} + navigate("/settings")} + label={__("Settings")} + />. +

    +
    : null}
    ); } } -export default FileTile +export default FileTile; diff --git a/ui/js/component/form.js b/ui/js/component/form.js index 809ebe534..809f79e7b 100644 --- a/ui/js/component/form.js +++ b/ui/js/component/form.js @@ -1,13 +1,13 @@ -import React from 'react'; -import FileSelector from './file-selector.js'; -import {Icon} from './common.js'; +import React from "react"; +import FileSelector from "./file-selector.js"; +import { Icon } from "./common.js"; var formFieldCounter = 0, - formFieldFileSelectorTypes = ['file', 'directory'], - formFieldNestedLabelTypes = ['radio', 'checkbox']; + formFieldFileSelectorTypes = ["file", "directory"], + formFieldNestedLabelTypes = ["radio", "checkbox"]; function formFieldId() { - return "form-field-" + (++formFieldCounter); + return "form-field-" + ++formFieldCounter; } export class FormField extends React.Component { @@ -15,13 +15,13 @@ export class FormField extends React.Component { type: React.PropTypes.string.isRequired, prefix: React.PropTypes.string, postfix: React.PropTypes.string, - hasError: React.PropTypes.bool - } + hasError: React.PropTypes.bool, + }; constructor(props) { super(props); - this._fieldRequiredText = __('This field is required'); + this._fieldRequiredText = __("This field is required"); this._type = null; this._element = null; @@ -32,15 +32,15 @@ export class FormField extends React.Component { } 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 == "text-number") { + this._element = "input"; + this._type = "text"; } else if (formFieldFileSelectorTypes.includes(this.props.type)) { - this._element = 'input'; - this._type = 'hidden'; + this._element = "input"; + this._type = "hidden"; } else { // Non field, e.g.