diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 00000000..95af295c --- /dev/null +++ b/.travis.yml @@ -0,0 +1,44 @@ +sudo: true +dist: xenial +#addons: +# apt: +# sources: +# - mysql-5.7-trusty +# packages: +# - mysql-server +# - mysql-client +language: node_js +node_js: + - "lts/*" +cache: + directories: + - "node_modules" +#services: +# - mysql + +jobs: + include: + - stage: "Build" + name: "Build and run test environment" + + before_install: + # - sudo mysql -e "use mysql; update user set authentication_string=PASSWORD('password') where User='root'; update user set plugin='mysql_native_password';FLUSH PRIVILEGES;" + # - sudo mysql_upgrade -u root -ppassword + # - sudo service mysql restart + # - mysql -u root -ppassword -e 'CREATE DATABASE IF NOT EXISTS lbry;' + # - mysql -u root -ppassword -e "CREATE USER 'lbry'@'localhost' IDENTIFIED BY 'lbry';" + # - mysql -u root -ppassword -e "GRANT ALL ON lbry.* TO 'lbry'@'localhost';" + # - sudo service mysql restart + - dpkg --compare-versions `npm -v` ge 6.4.0 || npm i -g npm@^6.4.0 + + install: + - npm i + + script: + - cp ./cli/defaults/* ./site/config/ + - | + echo '{ "sessionKey": "session", "masterPassword": false }' > ./site/private/authConfig.json + # - npm run fix + - npm run build + - npm start & + - sleep 10 # Attempt to collect output for 10 seconds diff --git a/README.md b/README.md index 009ba6ae..64d44cb6 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,29 @@ # Spee.ch -Spee.ch is a [NodeJS](https://nodejs.org) React web app that reads and publishes images and videos to and from the [LBRY](https://lbry.io/) blockchain. -You can create your own custom version of spee.ch by installing this code base and then creating your own custom components and styles to override the defaults. (More details/guide on how to do that coming soon.) +spee.ch provides a user-friendly, custom-designed, image and video hosting site backed by a decentralized network and +blockchain ([LBRY](https://lbry.tech/)). Via just a small set of config files, you can spin your an entire spee.ch site back up including assets. -Spee.ch depends on two other lbry technologies: - * [chainquery](https://github.com/lbryio/chainquery) - a normalized database of the blockchain data. We've provided credentials to use a public chainquery service. You can also install it on your own server to avoid being affected by the commons. - * [lbrynet](https://github.com/lbryio/lbry) - a daemon that handles your wallet and transactions. ![App GIF](https://spee.ch/e/speechgif.gif) -## Install +For a completely open, unrestricted example of a spee.ch site, check out https://www.spee.ch. -### Ubuntu Step by Step -[Ubuntu Install Guide](./docs/ubuntuinstall.md) +For a closed, custom-hosted and branded example, check out https://lbry.theantimedia.com/. -### Quickstart Overview +## Installation + +### Ubuntu Step-by-Step + +[Step-by-step Ubuntu Install Guide](./docs/ubuntuinstall.md) + +### Full Instructions #### Get some information ready: * mysqlusername * mysqlpassword - * domainname or 'http://localhost' + * domainname or 'http://localhost:3000' * speechport = 3000 -#### Install and Set Up System Dependencies: +#### Install and Set Up Dependencies * Firewall open ports * 22 * 80 @@ -29,10 +31,10 @@ Spee.ch depends on two other lbry technologies: * 3333 * 4444 * [NodeJS](https://nodejs.org) - * [MySQL](https://dev.mysql.com/doc/refman/8.0/en/installing.html) + * [MySQL version 5.7 or higher](https://dev.mysql.com/doc/refman/8.0/en/installing.html) * mysqlusername or root * mysqlpassword - * You may need + * Requires mysql_native_password plugin ``` mysql> `ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'yourpassword';` ``` @@ -49,7 +51,7 @@ Spee.ch depends on two other lbry technologies: * _note: even running on http://localhost, you must redirect http or https to port 3000_ -#### Clone a spee.ch repo (choose one) +#### Clone spee.ch * release version for stable production ``` $ git clone -b release https://github.com/lbryio/spee.ch.git @@ -87,7 +89,7 @@ $ npm run start ``` #### View in browser - * Visit [http://localhost:3000](http://localhost:3000) in your browser + * Visit [http://localhost:3000](http://localhost:3000) in your browser #### Customize your app @@ -95,8 +97,8 @@ Check out the [customization guide](https://github.com/lbryio/spee.ch/blob/readm #### (optional) add custom components and update the styles - * Create custom components by creating React components in `site/custom/src/` (further instructions coming soon) - * Update the CSS by changing the files in `site/custom/scss` (further instructions and refactor coming soon) + * Create custom components by creating React components in `site/custom/src/` + * Update or override the CSS by changing the files in `site/custom/scss` #### (optional) install your own chainquery Instructions are coming at [lbry-docker] to install your own chainquery instance using docker-compose. This will require 50GB of preferably SSD space and at least 10 minutes to download, possibly much longer. @@ -222,7 +224,8 @@ Spee.ch also runs a sync tool, which decodes blocks from the `LBRY` blockchain a * To run only tests that do not require LBC, run `npm run test:no-lbc` ### URL formats -Spee.ch has a few types of URL formats that return different assets from the LBRY network. Below is a list of all possible URLs for the content on spee.ch +Spee.ch has a few types of URL formats that return different assets from the LBRY network. Below is a list of all possible URLs for the content on spee.ch. You can learn more about LBRY URLs [here](https://lbry.tech/resources/uri). + * retrieve the controlling `LBRY` claim: * https://spee.ch/`claim` * https://spee.ch/`claim`.`ext` (serve) @@ -240,22 +243,15 @@ Spee.ch has a few types of URL formats that return different assets from the LBR * https://spee.ch/`@channel`:`channel_id`/`claim` * https://spee.ch/`@channel`:`channel_id`/`claim`.`ext` (serve) +### Dependencies + +Spee.ch depends on two other lbry technologies: + * [chainquery](https://github.com/lbryio/chainquery) - a normalized database of the blockchain data. We've provided credentials to use a public chainquery service. You can also install it on your own server to avoid being affected by the commons. + * [lbrynet](https://github.com/lbryio/lbry) - a daemon that handles your wallet and transactions. + ### Bugs If you find a bug or experience a problem, please report your issue here on GitHub and find us in the lbry discord! -### Issue tags in this repo -#### level 1 -Issues that anyone with basic web development can handle; little-to-no experience with the spee.ch codebase is required. - -#### level 2 -Familiarity with web apps is required, but little-to-no familiarity with the lbry daemon is necessary - -#### level 3 -Familiarity with the spee.ch code base and how the lbry daemon functions is required - -#### level 4 -Issues with lbry (e.g. the spee.ch wallet, lbrynet configuration, etc.) that require strong familiarity with the lbry daemon and/or network to fix. Generally these issues are best suited for the `lbry` `protocol team` but are reported in this repo because they are part of the spee.ch implementation - ## License This project is MIT licensed. For the full license, see [LICENSE](LICENSE). diff --git a/client/scss/_asset-preview.scss b/client/scss/_asset-preview.scss index f420531d..a05c2a2c 100644 --- a/client/scss/_asset-preview.scss +++ b/client/scss/_asset-preview.scss @@ -1,3 +1,7 @@ +.asset-preview { + position: relative; +} + .asset-preview__image { width : 100%; padding: 0; diff --git a/client/scss/_claim-pending.scss b/client/scss/_claim-pending.scss new file mode 100644 index 00000000..906743ee --- /dev/null +++ b/client/scss/_claim-pending.scss @@ -0,0 +1,12 @@ +.claim-pending { + display: inline-block; + position: absolute; + top: 10px; + left: 10px; + padding: 5px; + border-radius: 5px; + border: 2px solid red; + color: red; + font-weight: bold; + background-color: white; +} diff --git a/client/scss/all.scss b/client/scss/all.scss index 07601eb5..8414492e 100644 --- a/client/scss/all.scss +++ b/client/scss/all.scss @@ -18,6 +18,7 @@ @import '~scss/_button'; @import '~scss/_button-primary'; @import '~scss/_button-secondary'; +@import '~scss/_claim-pending'; @import '~scss/_click-to-copy'; @import '~scss/_form-feedback'; @import '~scss/_horizontal-split'; diff --git a/client/src/components/AssetPreview/index.jsx b/client/src/components/AssetPreview/index.jsx index 13b17ef9..5599709e 100644 --- a/client/src/components/AssetPreview/index.jsx +++ b/client/src/components/AssetPreview/index.jsx @@ -2,8 +2,14 @@ import React from 'react'; import { Link } from 'react-router-dom'; import createCanonicalLink from '../../../../utils/createCanonicalLink'; +const ClaimPending = () => { + return ( +
PENDING
+ ); +}; + const AssetPreview = ({ defaultThumbnail, claimData }) => { - const {name, fileExt, contentType, thumbnail, title} = claimData; + const {name, fileExt, contentType, thumbnail, title, pending} = claimData; const showUrl = createCanonicalLink({asset: {...claimData}}); const embedUrl = `${showUrl}.${fileExt}`; switch (contentType) { diff --git a/client/src/containers/AssetDisplay/view.jsx b/client/src/containers/AssetDisplay/view.jsx index 98a78366..2102f12b 100644 --- a/client/src/containers/AssetDisplay/view.jsx +++ b/client/src/containers/AssetDisplay/view.jsx @@ -46,7 +46,7 @@ class AssetDisplay extends React.Component { } render () { const { status, error, asset } = this.props; - const { name, claimData: { claimId, contentType, thumbnail, outpoint } } = asset; + const { name, claimData: { claimId, contentType, thumbnail, outpoint, pending } } = asset; // the outpoint is added to force the browser to re-download the asset after an update // issue: https://github.com/lbryio/spee.ch/issues/607 let fileExt; @@ -68,16 +68,22 @@ class AssetDisplay extends React.Component {

Curious what magic is happening here? Learn more.

} - {(status === ERROR) && -
- -

Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the following error message in the LBRY discord.

- - -

{error}

- -
- } + {(status === ERROR) && ( + pending ? ( +
+

This content is pending confirmation on the LBRY blockchain. It should be available in the next few minutes, please check back or refresh.

+
+ ) : ( +
+ +

Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the following error message in the LBRY discord.

+ + +

{error}

+ +
+ ) + )} {(status === AVAILABLE) && } /> @@ -142,7 +144,7 @@ class AssetInfo extends React.Component { LBRY URL diff --git a/client/src/containers/PublishTool/index.js b/client/src/containers/PublishTool/index.js index 0e0d4b4f..335553d9 100644 --- a/client/src/containers/PublishTool/index.js +++ b/client/src/containers/PublishTool/index.js @@ -1,14 +1,14 @@ import {connect} from 'react-redux'; import View from './view'; import {selectAsset} from '../../selectors/show'; -import {buildURI} from '../../utils/buildURI'; +import {createPermanentURI} from '@clientutils/createPermanentURI'; const mapStateToProps = props => { const { show, publish } = props; const asset = selectAsset(show); let uri; if (asset) { - uri = `lbry://${buildURI(asset)}`; + uri = `lbry://${createPermanentURI(asset)}`; } return { disabled : publish.disabled, diff --git a/client/src/utils/buildURI.js b/client/src/utils/buildURI.js deleted file mode 100644 index b6fb599c..00000000 --- a/client/src/utils/buildURI.js +++ /dev/null @@ -1,10 +0,0 @@ -export const buildURI = asset => { - let channelName, certificateId, name, claimId; - if (asset.claimData) { - ({ channelName, certificateId, name, claimId } = asset.claimData); - } - if (channelName) { - return `${channelName}:${certificateId}/${name}`; - } - return `${claimId}/${name}`; -}; diff --git a/client/src/utils/createPermanentURI.js b/client/src/utils/createPermanentURI.js new file mode 100644 index 00000000..10f570e4 --- /dev/null +++ b/client/src/utils/createPermanentURI.js @@ -0,0 +1,24 @@ +/* +{ channelName, certificateId, name, claimId } = { claimData } = asset + +permanentUrl for a channel +@channelName#certificateId + +permanentUrl for an asset in a channel +@channelName#certificateId/name + +permanentUrl for an asset published anonymously +name#claimId +*/ + +export const createPermanentURI = asset => { + let channelName, certificateId, name, claimId; + if (asset.claimData) { + ({ channelName, certificateId, name, claimId } = asset.claimData); + } + else return 'Error: unknown asset at createPermanentURI.js'; + if (channelName) { + return `${channelName}#${certificateId}/${name}`; + } + return `${name}#${claimId}`; +}; diff --git a/docs/ubuntuinstall.md b/docs/ubuntuinstall.md index 9f1f98aa..454cb327 100644 --- a/docs/ubuntuinstall.md +++ b/docs/ubuntuinstall.md @@ -6,23 +6,23 @@ * Ability to use SSH (putty + public key for windows users) * Ubuntu 16.04 or 18.04 VPS with root access * Your login info ready + * Exposed ports: 22, 80, 443, 3333, 4444 * Domain name with @ and www pointed at your VPS IP - * alternatively, specify http://localhost + * _alternatively, specify http://localhost:3000 as domain during speech configuration_ * Ability to send 5+ LBRY credits to an address * Noncommercial use - * _(configuration examples for nginx and certbot are included as an alternative)_ + * _alternative configuration examples for nginx and certbot are [here](https://github.com/lbryio/spee.ch/tree/master/docs/setup/conf/nginx)_ ## You'll be installing: - * MySQL DB + * MySQL DB version 5.7 or higher * Default Port 3306 + * mysql_native_password plugin * NodeJS v8+ - * Https proxy server - * Caddy for personal use - * Exposed ports: 22, 80, 443, 3333, 4444 - * Reverse proxies 80 redirected to 443 to App on 3000 - * Spee.ch started on port 3000 + * Caddy - https reverse proxy server + * automatically obtains tls certificate + * Redirects 80 (http) to 443 (https) to Speech on 3000 * Lbrynet DAEMON started on ports 3333 and 4444 - + * Spee.ch started on port 3000 # 1. Setup OS and install dependencies ## OS @@ -184,15 +184,13 @@ tmux allows you to run multiple things in different sessions. Useful for manuall ## Detatch tmux session `Control + b`, then `d` -<<<<<<< Updated upstream * `tmux` if you want to get back into tmux * `Control+b`, then `)` while in tmux session to cycle back to your lbrynet session to see output -======= + `tmux` _note: `Control+b`, then `)` while in tmux session to cycle back to your lbrynet session to see output_ ->>>>>>> Stashed changes ## Display wallet address to which to send 5+ LBC. @@ -227,19 +225,17 @@ tmux allows you to run multiple things in different sessions. Useful for manuall `npm run configure` -<<<<<<< Updated upstream -======= (once your wallet balance has cleared) `npm run configure` ->>>>>>> Stashed changes + * Database: lbry * Username: root * Password: your_mysql_password * Port: 3000 * Site Title: Your Site Name - * Enter your site's domain name: https://example.com or http://localhost + * Enter your site's domain name: https://example.com or http://localhost:3000 * Enter a directory where uploads should be stored: (/home/lbry/Uploads) `npm run start` @@ -255,7 +251,7 @@ tmux allows you to run multiple things in different sessions. Useful for manuall npm install -g pm2 ``` -### 7 Maintenance Proceedures +### 7 Maintenance Procedures #### Change daemon * backup wallet (private keys!) to a safe place diff --git a/server/chainquery/bundle.js b/server/chainquery/bundle.js index 4a96169b..a859bd5d 100644 --- a/server/chainquery/bundle.js +++ b/server/chainquery/bundle.js @@ -873,8 +873,7 @@ var claimQueries = (db, table, sequelize) => ({ logger$1.debug(`claim.getAllChannelClaims for ${channelClaimId}`); const defaultWhereClauses = { - bid_state: - { [sequelize.Op.or]: ['Controlling', 'Active', 'Accepted'] } + bid_state: { [sequelize.Op.or]: ['Controlling', 'Active', 'Accepted'] } }; const addWhereClauses = (whereClauses, params) => { @@ -969,7 +968,7 @@ var claimQueries = (db, table, sequelize) => ({ getTopFreeClaimIdByClaimName: async (name) => { return await table.findAll({ // TODO: Limit 1 - where: { name }, + where: { name, bid_state: { [sequelize.Op.or]: ['Controlling', 'Active', 'Accepted'] } }, order: [['effective_amount', 'DESC'], ['height', 'ASC']], }).then(result => { if(result.length === 0) { diff --git a/server/chainquery/queries/claimQueries.js b/server/chainquery/queries/claimQueries.js index cf4b532b..521cda04 100644 --- a/server/chainquery/queries/claimQueries.js +++ b/server/chainquery/queries/claimQueries.js @@ -72,8 +72,7 @@ export default (db, table, sequelize) => ({ logger.debug(`claim.getAllChannelClaims for ${channelClaimId}`); const defaultWhereClauses = { - bid_state: - { [sequelize.Op.or]: ['Controlling', 'Active', 'Accepted'] } + bid_state: { [sequelize.Op.or]: ['Controlling', 'Active', 'Accepted'] } }; const addWhereClauses = (whereClauses, params) => { @@ -168,7 +167,7 @@ export default (db, table, sequelize) => ({ getTopFreeClaimIdByClaimName: async (name) => { return await table.findAll({ // TODO: Limit 1 - where: { name }, + where: { name, bid_state: { [sequelize.Op.or]: ['Controlling', 'Active', 'Accepted'] } }, order: [['effective_amount', 'DESC'], ['height', 'ASC']], }).then(result => { if(result.length === 0) { diff --git a/server/controllers/api/channel/claims/getChannelClaims.js b/server/controllers/api/channel/claims/getChannelClaims.js index 61c2c639..dd0dce8f 100644 --- a/server/controllers/api/channel/claims/getChannelClaims.js +++ b/server/controllers/api/channel/claims/getChannelClaims.js @@ -17,6 +17,12 @@ const getChannelClaims = async (channelName, channelShortId, page) => { channelClaims = await chainquery.claim.queries.getAllChannelClaims(channelId, params); } + const split = channelClaims.reduce( + (acc, val) => val.dataValues.height === 0 ? { ...acc, zero: acc.zero.concat(val) } : { ...acc, nonzero: acc.nonzero.concat(val) }, + { zero: [], nonzero: [] } + ); + channelClaims = split.zero.concat(split.nonzero); + const processingChannelClaims = channelClaims ? channelClaims.map((claim) => getClaimData(claim)) : []; const processedChannelClaims = await Promise.all(processingChannelClaims); diff --git a/server/controllers/api/claim/get/index.js b/server/controllers/api/claim/get/index.js index 2bfbf2b1..47423119 100644 --- a/server/controllers/api/claim/get/index.js +++ b/server/controllers/api/claim/get/index.js @@ -38,7 +38,7 @@ const claimGet = async ({ ip, originalUrl, params }, res) => { try { await waitOn({ resources: [ lbrynetResult.file_name ], - delay : 100, + delay : 500, timeout : 10000, // 10 seconds }); } catch (e) {} diff --git a/server/controllers/assets/utils/serveFile.js b/server/controllers/assets/utils/serveFile.js index 7344fdb2..8500dbe6 100644 --- a/server/controllers/assets/utils/serveFile.js +++ b/server/controllers/assets/utils/serveFile.js @@ -6,8 +6,10 @@ const serveFile = ({ filePath, fileType }, res) => { } const sendFileOptions = { headers: { - 'X-Content-Type-Options': 'nosniff', - 'Content-Type' : fileType, + 'X-Content-Type-Options' : 'nosniff', + 'Content-Type' : fileType, + 'Access-Control-Allow-Origin' : '*', + 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept', }, }; logger.debug(`fileOptions for ${filePath}:`, sendFileOptions); diff --git a/server/utils/getClaimData.js b/server/utils/getClaimData.js index 0271f36b..ea5f080b 100644 --- a/server/utils/getClaimData.js +++ b/server/utils/getClaimData.js @@ -28,5 +28,6 @@ module.exports = async (data) => { thumbnail : data.generated_thumbnail || data.thumbnail_url || data.thumbnail, outpoint : data.transaction_hash_id || data.outpoint, host, + pending: Boolean(data.height === 0), }); }; diff --git a/utils/createModuleAliases.js b/utils/createModuleAliases.js index b9129f47..00506bb9 100644 --- a/utils/createModuleAliases.js +++ b/utils/createModuleAliases.js @@ -34,6 +34,11 @@ module.exports = () => { moduleAliases['@config'] = resolve('site/config'); moduleAliases['@private'] = resolve('site/private'); + // aliases for utils + moduleAliases['@globalutils'] = resolve('utils'); + moduleAliases['@clientutils'] = resolve(`${DEFAULT_ROOT}/utils`); + // moduleAliases['@serverutils'] = resolve('server/utils'); + // create specific aliases for locally defined components in the following folders moduleAliases = addAliasesForCustomComponentFolder('containers', moduleAliases); moduleAliases = addAliasesForCustomComponentFolder('components', moduleAliases); @@ -48,6 +53,7 @@ module.exports = () => { moduleAliases['@sagas'] = resolve(`${DEFAULT_ROOT}/sagas`); moduleAliases['@app'] = resolve(`${DEFAULT_ROOT}/app.js`); + // return finished aliases return moduleAliases; };