Merge pull request #824 from lbryio/staging

Cut release from staging

.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

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).

client/scss/_asset-preview.scss

@@ -1,3 +1,7 @@
+.asset-preview {
+  position: relative;
+}
+
 .asset-preview__image {
   width  : 100%;
   padding: 0;

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;
+}

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';

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 (
+    <div className='claim-pending'>PENDING</div>
+  );
+};
+
 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) {

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 {
           <p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
         </div>
         }
-        {(status === ERROR) &&
-        <div>
-          <Row>
-            <p>Unfortunately, we couldn't download your asset from LBRY.  You can help us out by sharing the following error message in the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>LBRY discord</a>.</p>
-          </Row>
-          <Row>
-            <p id='error-message'><i>{error}</i></p>
-          </Row>
-        </div>
-        }
+        {(status === ERROR) && (
+          pending ? (
+            <div>
+              <p>This content is pending confirmation on the LBRY blockchain. It should be available in the next few minutes, please check back or refresh.</p>
+            </div>
+          ) : (
+            <div>
+              <Row>
+                <p>Unfortunately, we couldn't download your asset from LBRY.  You can help us out by sharing the following error message in the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>LBRY discord</a>.</p>
+              </Row>
+              <Row>
+                <p id='error-message'><i>{error}</i></p>
+              </Row>
+            </div>
+          )
+        )}
         {(status === AVAILABLE) &&
         <AvailableContent
           contentType={contentType}

client/src/containers/AssetInfo/view.jsx

@@ -9,6 +9,8 @@ import HorizontalSplit from '@components/HorizontalSplit';
 import siteConfig from '@config/siteConfig.json';
 import createCanonicalLink from '../../../../utils/createCanonicalLink';
 import AssetInfoFooter from '../../components/AssetInfoFooter/index';
+import { createPermanentURI } from '@clientutils/createPermanentURI';
+
 const { details: { host } } = siteConfig;
 
 class AssetInfo extends React.Component {
@@ -120,8 +122,8 @@ class AssetInfo extends React.Component {
                 }
                 content={
                   <ClickToCopy
-                    id={'short-link'}
-                    value={`${channelName}#${certificateId}/${name}`}
+                    id={'lbry-permanent-url'}
+                    value={`${createPermanentURI(asset)}`}
                   />
                 }
               />
@@ -142,7 +144,7 @@ class AssetInfo extends React.Component {
                 </a>
                 <a
                   className={'link--primary'}
-                  href={`https://open.lbry.io/${channelName}#${certificateId}/${name}`}
+                  href={`https://open.lbry.io/${createPermanentURI(asset)}`}
                   download={name}
                 >
                   LBRY URL

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,

client/src/utils/buildURI.js

@@ -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}`;
-};

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}`;
+};

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

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) {

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) {

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);
 

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) {}

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);

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),
   });
 };

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;
 };