LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

Staging #1066

Merged
jessopb merged 55 commits from staging into release 2020-05-16 17:08:51 +02:00
Conversation 0 Commits 55 Files changed 7 +270 -116
8 changed files with 270 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 626b3f8b5c - Show all commits

91
client/scss/_asset-preview.scss
View file

@ -1,29 +1,89 @@
.asset-preview { .asset-preview {
position: relative; display: flex;
flex-direction: column;
background: $card-color; background: $card-color;
padding: $thin-padding;
color: $text-color; color: $text-color;
width: 240px; width: 240px;
border: $subtle-border; border: $subtle-border;
height: 280px; height: 256px;
&:hover { &:hover {
border: 1px solid $highlight-border-color; border-color: $highlight-border-color;
color: $primary-color; color: $primary-color;
} }
} }
.asset-preview__image {
height : 180px;
width : 240px;
overflow: hidden;
object-fit: cover;
padding: 0;
margin : 0;
box-sizing: border-box;
}
.asset-preview__image-box {
width : 240px;
height : 180px;
padding: 0;
margin : 0;
box-sizing: border-box;
}
.asset-preview__label { .asset-preview__label {
height: 100%;
padding: $thin-padding;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
height: 7.3em;
} }
.asset-preview__label-text { .asset-preview__label-text {
height: 4.5em; overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-around;
box-sizing: border-box;
font-size: $text-small;
font-weight: bold;
height: 54px;
}
.asset-preview__label-info {
width: 100%;
height: 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
box-sizing: border-box; box-sizing: border-box;
align-items: center;
}
.asset-preview__label-info-datum {
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
box-sizing: border-box;
font-size: $text-small;
max-width: 40%;
}
.asset-preview__label-info-datum svg{
height: 1.2em;
width: 1.2em;
padding: 0;
padding-right: $thin-padding;
margin: 0;
}
.asset-preview__label-info-datum .svg-icon{
padding: 0px;
margin: 0;
height: 15px;
} }
.asset-preview__blocked { .asset-preview__blocked {
@ -34,22 +94,3 @@
padding: $thin-padding; padding: $thin-padding;
margin-bottom: $thin-padding; margin-bottom: $thin-padding;
} }
.asset-preview__image {
width : 240px;
height : 180px;
overflow: hidden;
object-fit: cover;
padding: 0;
margin : 0;
box-sizing: border-box;
}
h3.asset-preview__title {
margin: 0;
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 4em;
font-size: $text-large;
}

2
client/scss/_channel-claims-display.scss
View file

@ -1,7 +1,7 @@
.channel-claims-display { .channel-claims-display {
width: 100%; width: 100%;
display: grid; display: grid;
grid-gap: $thin-padding; grid-gap: $tertiary-padding;
align-content: space-around; align-content: space-around;
@media (min-width: $break-point-x-large) { @media (min-width: $break-point-x-large) {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

31
client/src/components/AssetPreview/index.jsx
View file

@ -4,9 +4,23 @@ import createCanonicalLink from '@globalutils/createCanonicalLink';
import * as Icon from 'react-feather'; import * as Icon from 'react-feather';
const AssetPreview = ({ defaultThumbnail, claimData }) => { const AssetPreview = ({ defaultThumbnail, claimData }) => {
const {name, fileExt, contentType, thumbnail, title, blocked} = claimData; const {name, fileExt, contentType, thumbnail, title, blocked, transactionTime} = claimData;
const showUrl = createCanonicalLink({asset: {...claimData}}); const showUrl = createCanonicalLink({asset: {...claimData}});
console.log(transactionTime)
const embedUrl = `${showUrl}.${fileExt}`; const embedUrl = `${showUrl}.${fileExt}`;
const ago = Date.now()/1000 - transactionTime;
const dayInSeconds = 60 * 60 * 24;
const monthInSeconds = dayInSeconds * 30;
const yearInSeconds = dayInSeconds * 365;
let when;
if (ago < dayInSeconds) {
when = 'Just today';
} else if (ago < monthInSeconds) {
when = `${Math.floor(ago / dayInSeconds)} d ago`;
} else {
when = `${Math.floor(ago / monthInSeconds)} mo ago`;
}
/* /*
we'll be assigning media icon based on supported type / mime types we'll be assigning media icon based on supported type / mime types
*/ */
@ -37,22 +51,33 @@ const AssetPreview = ({ defaultThumbnail, claimData }) => {
} else { } else {
return ( return (
<Link to={showUrl} className='asset-preview'> <Link to={showUrl} className='asset-preview'>
<div className='asset-preview__image-box'>
<img <img
className={'asset-preview__image'} className={'asset-preview__image'}
src={thumb || defaultThumbnail} src={thumb || defaultThumbnail}
alt={name} alt={name}
/> />
</div>
<div className={'asset-preview__label'}> <div className={'asset-preview__label'}>
<div className={'asset-preview__label-text'}> <div className={'asset-preview__label-text'}>
<p className='asset-preview__title text--medium'>{title}</p> <p>{title}</p>
</div> </div>
<div className={'asset-preview__label-info '}> <div className={'asset-preview__label-info '}>
<div className={'text--medium'}> <div className={'asset-preview__label-info-datum'}>
<div className={'svg-icon'}>
{ media === 'image' && <Icon.Image />} { media === 'image' && <Icon.Image />}
{ media === 'text' && <Icon.FileText />} { media === 'text' && <Icon.FileText />}
{ media === 'video' && contentType === 'video/mp4' && <Icon.Video />} { media === 'video' && contentType === 'video/mp4' && <Icon.Video />}
{ media !== 'image' && media !== 'text' && contentType !== 'video/mp4' && <Icon.File />} { media !== 'image' && media !== 'text' && contentType !== 'video/mp4' && <Icon.File />}
</div> </div>
<div>{fileExt}</div>
</div>
<div className={'asset-preview__label-info-datum'}>
<div>{when}</div>
</div>
</div> </div>
</div> </div>
</Link> </Link>

3
client/src/components/ChannelSelectDropdown/index.jsx
View file

@ -7,6 +7,9 @@ const ChannelSelectDropdown = ({ selectedChannel, handleSelection, loggedInChann
id='channel-name-select' id='channel-name-select'
value={selectedChannel} value={selectedChannel}
onChange={handleSelection}> onChange={handleSelection}>
{ loggedInChannelName && (
<option value={loggedInChannelName} >{loggedInChannelName}</option>
)}
<option value={LOGIN}>Existing</option> <option value={LOGIN}>Existing</option>
<option value={CREATE}>New</option> <option value={CREATE}>New</option>
</select> </select>

15
docs/setup/conf/lbrynet/lbrynet.service.example Normal file
View file

@ -0,0 +1,15 @@
[Unit]
Description="LBRYnet daemon"
After=network.target
[Service]
Environment="HOME=/home/lbry"
ExecStart=/opt/lbry/lbrynet start
User=lbry
Group=lbry
Restart=on-failure
KillMode=process
[Install]
WantedBy=multi-user.target

16
docs/setup/conf/lbrynet/lbrynet.service.template Normal file
View file

@ -0,0 +1,16 @@
[Unit]
Description="LBRYnet daemon"
After=network.target
# Change environment to /home/{{USERNAME}}
[Service]
Environment="HOME=/home/{{USERNAME}}"
ExecStart=/opt/lbry/lbrynet start
User={{USERNAME}}
Group={{USERNAME}}
Restart=on-failure
KillMode=process
[Install]
WantedBy=multi-user.target

198
docs/ubuntuinstall.md
View file

@ -24,6 +24,8 @@
* Lbrynet DAEMON started on ports 3333 and 4444 * Lbrynet DAEMON started on ports 3333 and 4444
* Spee.ch started on port 3000 * Spee.ch started on port 3000
_note: throughout this guide you'll be replacing `{{xyz}}` with `yourvalue` omitting the brackets_
# 1. Setup OS and install dependencies # 1. Setup OS and install dependencies
## OS ## OS
@ -36,26 +38,27 @@ As root# _create user and add to sudo group_
su - username su - username
``` ```
As username: *paste public key in authorized\_keys* As username: *paste public key in authorized\_keys*
```
`cd` `cd`
`mkdir .ssh` `mkdir .ssh`
`nano ~/.ssh/authorized_keys` `nano ~/.ssh/authorized_keys`
```
### Prep ### Prep
Log in as username@domainname or username@ip_address ssh to username@domainname or username@ip_address
`sudo apt-get update -y` ```
sudo apt-get update -y
`ulimit -n 8192` ulimit -n 8192
wget -qO- https://deb.nodesource.com/setup_8.x | sudo -E bash -
`wget -qO- https://deb.nodesource.com/setup_8.x | sudo -E bash -` ```
## Git, Curl, Tmux, Unzip, ffmpeg, Node ## Git, Curl, Unzip, ffmpeg, imagemagick, Node
`sudo apt-get install git curl tmux unzip ffmpeg nodejs -y` `sudo apt-get install git curl unzip ffmpeg nodejs imagemagick -y`
## Clone speech either from your own fork, or from the lbryio/spee.ch repo. ## Clone speech either from your own fork, or from the lbryio/spee.ch repo.
@ -78,24 +81,29 @@ Log in as username@domainname or username@ip_address
`chmod 750 -R ~/spee.ch/docs/setup` `chmod 750 -R ~/spee.ch/docs/setup`
# 2 Secure the UFW firewall # 2 Secure the UFW firewall
## UFW ## UFW
`sudo ~/spee.ch/docs/setup/scripts/firewall.sh` `sudo ~/spee.ch/docs/setup/scripts/firewall.sh`
_if your distro isn't vanilla ubuntu 16 or 18, you may have to install it_
# 3 Install Caddy to handle https and reverse proxy # 3 Install Caddy to handle https and reverse proxy
## Get Caddy ## Get Caddy
`curl https://getcaddy.com | sudo bash -s personal` `curl https://getcaddy.com | sudo bash -s personal`
## Set up Caddy reverse proxy and ssl ## Set up Caddy reverse proxy and ssl
`sudo mkdir -p /opt/caddy/logs/` _Make Caddy's folders, copy the template, edit the Caddyfile, copy the caddyfile to its folder._
`sudo mkdir -p /opt/caddy/store/` ```
sudo mkdir -p /opt/caddy/logs/
`cp ~/spee.ch/docs/setup/conf/caddy/Caddyfile.template ~/spee.ch/docs/setup/conf/caddy/Caddyfile` sudo mkdir -p /opt/caddy/store/
cp ~/spee.ch/docs/setup/conf/caddy/Caddyfile.template ~/spee.ch/docs/setup/conf/caddy/Caddyfile
`nano ~/spee.ch/docs/setup/conf/caddy/Caddyfile` nano ~/spee.ch/docs/setup/conf/caddy/Caddyfile
```
( Change {{EXAMPLE.COM}} to YOURDOMAIN.COM ) ( Change {{EXAMPLE.COM}} to YOURDOMAIN.COM )
@ -103,19 +111,15 @@ Log in as username@domainname or username@ip_address
## Set up Caddy to run as systemd service ## Set up Caddy to run as systemd service
`sudo cp ~/spee.ch/docs/setup/conf/caddy/caddy.service /etc/systemd/system/caddy.service` ```
sudo cp ~/spee.ch/docs/setup/conf/caddy/caddy.service /etc/systemd/system/caddy.service
`sudo chmod 644 /etc/systemd/system/caddy.service` sudo chmod 644 /etc/systemd/system/caddy.service
sudo chown -R www-data:www-data /opt/caddy/
`sudo chown -R www-data:www-data /opt/caddy/` sudo setcap 'cap_net_bind_service=+ep' /usr/local/bin/caddy
sudo systemctl daemon-reload
`sudo setcap 'cap_net_bind_service=+ep' /usr/local/bin/caddy` sudo systemctl start caddy
sudo systemctl status caddy
`sudo systemctl daemon-reload` ```
`sudo systemctl start caddy`
`sudo systemctl status caddy`
`q` exits `q` exits
@ -151,7 +155,7 @@ Log in as username@domainname or username@ip_address
mysql> mysql>
`ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'your_mysql_password';` `ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'yourpassword123';`
mysql> mysql>
@ -165,36 +169,76 @@ Log in as username@domainname or username@ip_address
# 5 Get Lbrynet SDK Daemon # 5 Get Lbrynet SDK Daemon
## Start tmux
tmux allows you to run multiple things in different sessions. Useful for manually starting daemons and watching its console logs.
`tmux`
* `Ctrl+b`, then `d` detaches leaving session running.
* `tmux`, reenters tmux, then
* `Ctrl+b`, `(` goes back to through sessions
## Get the SDK ## Get the SDK
`wget -O ~/latest_daemon.zip https://lbry.io/get/lbrynet.linux.zip`
`unzip -o -u ~/latest_daemon.zip` We'll be putting it in /opt/lbry.
`sudo mkdir /opt/lbry`
`sudo wget -O /opt/lbry/latest_daemon.zip https://lbry.io/get/lbrynet.linux.zip`
`sudo unzip -o -u /opt/lbry/latest_daemon.zip -d /opt/lbry`
## Set up lbrynet to run as systemd service
We'll soon update the setup scripts. Meanwhile, here's an example lbrynet.service file. Again, fully replace {{USERNAME}}
```
[Unit]
Description="LBRYnet daemon"
After=network.target
# Replace {{USERNAME}} with your username, e.g. `bob` or `speechuser`
[Service]
Environment="HOME=/home/{{USERNAME}}"
ExecStart=/opt/lbry/lbrynet start
User={{USERNAME}}
Group={{USERNAME}}
Restart=on-failure
KillMode=process
[Install]
WantedBy=multi-user.target
```
`sudo nano /etc/systemd/system/lbrynet.service`
Then paste the above into the file and edit replacing {{USERNAME}} with yours.
Finally do the following.
```
sudo chmod 644 /etc/systemd/system/lbrynet.service
sudo systemctl daemon-reload
sudo systemctl start lbrynet
sudo systemctl status lbrynet
```
You'll find your lbrynet logs in ~/.local/share/lbry/lbrynet/lbrynet.log
Let's make our lives easier and link /opt/lbry/lbrynet in /usr/local/bin
`sudo ln -s /opt/lbry/lbrynet /usr/local/bin/lbrynet`
Now we can `lbrynet` without `/opt/lbry`. Let's make sure we're back in our home directory. `cd`
## Customize SDK settings ## Customize SDK settings
These settings will prevent you and your users from spending your server's LBC on paid content. Full documentation is [here](https://lbry.tech/resources/daemon-settings). These settings will prevent you and your users from spending your server's LBC on paid content. Full documentation is [here](https://lbry.tech/resources/daemon-settings).
~$ ~$
`mkdir .lbrynet`
`cd .lbrynet` `cd ~/.local/share/lbry/lbrynet`
`nano daemon_settings.yml` `nano daemon_settings.yml`
copy and paste in the following code (Ctrl+Shift V) copy and paste in the following code (Ctrl+Shift V)
_upnp is unnecessary for a vps but may be useful behind a properly configured NAT_
``` ```
run_reflector_server: false run_reflector_server: false
disable_max_key_fee: false
max_key_fee: {amount: 0, currency: LBC} max_key_fee: {amount: 0, currency: LBC}
use_upnp: false use_upnp: false
auto_re_reflect_interval: 0 auto_re_reflect_interval: 0
@ -202,41 +246,31 @@ tmux allows you to run multiple things in different sessions. Useful for manuall
`CONTROL+O` then `CONTROL+X` to save and exit `CONTROL+O` then `CONTROL+X` to save and exit
## Start the daemon Restart lbrynet sdk:
`./lbrynet start`
## Detatch tmux session `sudo systemctl restart lbrynet`
`Control + b`, then `d`
* `tmux` if you want to get back into tmux `sudo systemctl status lbrynet`
* `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_
## Display wallet address to which to send 5+ LBC. ## Display wallet address to which to send 5+ LBC.
_note: These commands work when `./lbrynet start` is already running in another tmux session_ _note: These commands work when `lbrynet` is already running_
`./lbrynet commands` to check out the current commands `lbrynet commands` to check out the current commands
`./lbrynet address_list` to get your wallet address `lbrynet address list` to get your wallet address
`Ctrl + Shift + C` after highlighting an address to copy. `Ctrl + Shift + C` after highlighting an address to copy.
Use a LBRY app or daemon to send LBC to the address. Sending LBC may take a few seconds or longer. Use a LBRY app or daemon to send LBC to the address. Sending LBC may take a few seconds or longer.
`./lbrynet account_balance` to check your balance after you've sent LBC. `lbrynet account balance` to check your balance after you've sent LBC.
## Optional/Production: Set up lbrynet to run as a systemd service
`//coming soon`
# 6 Set up spee.ch # 6 Set up spee.ch
## Build it ## Build it
`cd spee.ch` `cd spee.ch`
~/spee.ch: ~/spee.ch:
@ -257,7 +291,8 @@ tmux allows you to run multiple things in different sessions. Useful for manuall
* Port: 3000 * Port: 3000
* Site Title: Your Site Name * Site Title: Your Site Name
* Enter your site's domain name: https://example.com or http://localhost:3000 * Enter your site's domain name: https://example.com or http://localhost:3000
* Enter a directory where uploads should be stored: (/home/lbry/Uploads) * Enter a directory where uploads should be stored: (/home/{{username}}/Uploads) *
_* if you're not sure, `pwd`_
`npm run build` (or `npm run dev` to build for developing) `npm run build` (or `npm run dev` to build for developing)
@ -270,15 +305,34 @@ tmux allows you to run multiple things in different sessions. Useful for manuall
# 7 Production # 7 Production
## pm2 to keep your speech app running ## pm2 to keep your speech app running
```
npm install -g pm2 If your server is running in the terminal from the last section, `Control+C` it.
```
`sudo npm install -g pm2` _There are tutorials online for avoiding sudo for npm i -g_
`cd spee.ch`
`pm2 start npm --name speech -- run start`
While pm2 installed this way will restart the server, it will not rebuild it on changes. You'll do that manually as discussed before.
### 7 Maintenance Procedures ### 7 Maintenance Procedures
#### Change daemon #### Update sdk daemon
* backup wallet (private keys!) to a safe place
* wget daemon from https://github.com/lbryio/lbry/releases * Backup wallet (private keys!) to a safe place. It should be in ~/.local/share/lbry/lbryum/wallets.
* wget -O ~/your_name_daemon.zip https://your_copied_file_path.zip * `lbrynet stop`
* rm ./lbrynet * Following the instructions in 5: Get the SDK will rename the old daemon and give you the new one.
* unzip -o -u ~/your_name_daemon.zip * `lbrynet start`
* `lbrynet version`
* `lbrynet account balance`
#### Update speech
* Read the release notes to see if there are any breaking changes, address them
* `pm2 stop speech`
* `git pull origin release` (assuming you cloned release)
* `npm i` if necessary
* `npm run build`
* `pm2 start speech`
* Have an exotic energy drink

2
server/lbrynet/index.js
View file

@ -153,7 +153,7 @@ module.exports = {
Date.now() Date.now()
); );
if (data.result) { if (data.result) {
resolve(data.result.download_directory); resolve(data.result.download_dir);
} else { } else {
return new Error( return new Error(
'Successfully connected to lbry daemon, but unable to retrieve the download directory.' 'Successfully connected to lbry daemon, but unable to retrieve the download directory.'