NEW splash #2491
12 changed files with 127 additions and 187 deletions
|
|
@ -24,14 +24,13 @@ const downloadDaemon = targetPlatform =>
|
|||
const daemonFilePath = path.join(daemonDir, daemonFileName);
|
||||
const daemonVersionPath = path.join(__dirname, 'daemon.ver');
|
||||
const tmpZipPath = path.join(__dirname, '..', 'dist', 'daemon.zip');
|
||||
const daemonURL = daemonURLTemplate
|
||||
.replace(/DAEMONVER/g, daemonVersion)
|
||||
.replace(/OSNAME/g, daemonPlatform);
|
||||
const daemonURL = daemonURLTemplate.replace(/DAEMONVER/g, daemonVersion).replace(/OSNAME/g, daemonPlatform);
|
||||
|
||||
// If a daemon and daemon.ver exists, check to see if it matches the current daemon version
|
||||
const hasDaemonDownloaded = fs.existsSync(daemonFilePath);
|
||||
const hasDaemonVersion = fs.existsSync(daemonVersionPath);
|
||||
let downloadedDaemonVersion;
|
||||
|
||||
if (hasDaemonVersion) {
|
||||
downloadedDaemonVersion = fs.readFileSync(daemonVersionPath, 'utf8');
|
||||
}
|
||||
|
|
@ -65,6 +64,7 @@ const downloadDaemon = targetPlatform =>
|
|||
})
|
||||
)
|
||||
.then(() => del(`${daemonFilePath}*`))
|
||||
.then()
|
||||
.then(() =>
|
||||
decompress(tmpZipPath, daemonDir, {
|
||||
filter: file => path.basename(file.path) === daemonFileName,
|
||||
|
|
@ -80,9 +80,7 @@ const downloadDaemon = targetPlatform =>
|
|||
resolve('Done');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(
|
||||
`\x1b[31merror\x1b[0m Daemon download failed due to: \x1b[35m${error}\x1b[0m`
|
||||
);
|
||||
console.error(`\x1b[31merror\x1b[0m Daemon download failed due to: \x1b[35m${error}\x1b[0m`);
|
||||
reject(error);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@
|
|||
"copy-webpack-plugin": "^4.6.0",
|
||||
"country-data": "^0.0.31",
|
||||
"cross-env": "^5.2.0",
|
||||
"css-doodle": "^0.7.1",
|
||||
"css-loader": "^2.1.0",
|
||||
"cssnano": "^4.1.10",
|
||||
"dat.gui": "^0.7.2",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default appState => {
|
|||
});
|
||||
|
||||
const windowConfiguration = {
|
||||
backgroundColor: '#2f9176',
|
||||
backgroundColor: '#270f34', // Located in src/scss/init/_vars.scss `--color-background`
|
||||
minWidth: 950,
|
||||
minHeight: 600,
|
||||
autoHideMenuBar: true,
|
||||
|
|
|
|||
5
src/ui/component/doodle/index.js
Normal file
5
src/ui/component/doodle/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
Since we aren't using this component anywhere else, it can just be brought into the Since we aren't using this component anywhere else, it can just be brought into the `splash` component. See my comment above.
Ohh, the auto-formatted moved this line. Ohh, the auto-formatted moved this line.
Since we aren't using this component anywhere else, it can just be brought into the Since we aren't using this component anywhere else, it can just be brought into the `splash` component. See my comment above.
|
||||
/* eslint react/display-name: 0 */
|
||||
|
Ohh, the auto-formatted moved this line. Ohh, the auto-formatted moved this line.
Since we aren't using this component anywhere else, it can just be brought into the Since we aren't using this component anywhere else, it can just be brought into the `splash` component. See my comment above.
|
||||
|
||||
|
Ohh, the auto-formatted moved this line. Ohh, the auto-formatted moved this line.
Since we aren't using this component anywhere else, it can just be brought into the Since we aren't using this component anywhere else, it can just be brought into the `splash` component. See my comment above.
|
||||
import React from 'react';
|
||||
|
Ohh, the auto-formatted moved this line. Ohh, the auto-formatted moved this line.
Since we aren't using this component anywhere else, it can just be brought into the Since we aren't using this component anywhere else, it can just be brought into the `splash` component. See my comment above.
|
||||
|
||||
|
Ohh, the auto-formatted moved this line. Ohh, the auto-formatted moved this line.
Since we aren't using this component anywhere else, it can just be brought into the Since we aren't using this component anywhere else, it can just be brought into the `splash` component. See my comment above.
|
||||
export default ({ rule = '' }) => <css-doodle use="var(--rule)">{rule}</css-doodle>;
|
||||
|
Ohh, the auto-formatted moved this line. Ohh, the auto-formatted moved this line.
Since we aren't using this component anywhere else, it can just be brought into the Since we aren't using this component anywhere else, it can just be brought into the `splash` component. See my comment above.
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
// @flow
|
||||
import * as ICONS from 'constants/icons';
|
||||
import React, { Fragment } from 'react';
|
||||
import Icon from 'component/common/icon';
|
||||
import Spinner from 'component/spinner';
|
||||
import Button from 'component/button';
|
||||
|
||||
type Props = {
|
||||
message: string,
|
||||
details: ?string,
|
||||
isWarning: boolean,
|
||||
error: boolean,
|
||||
};
|
||||
|
||||
class LoadScreen extends React.PureComponent<Props> {
|
||||
static defaultProps = {
|
||||
isWarning: false,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { details, message, isWarning, error } = this.props;
|
||||
|
||||
return (
|
||||
<div className="load-screen">
|
||||
<div>
|
||||
<div className="load-screen__header">
|
||||
<h1 className="load-screen__title">
|
||||
{__('LBRY')}
|
||||
<sup>beta</sup>
|
||||
</h1>
|
||||
</div>
|
||||
{error ? (
|
||||
<Fragment>
|
||||
<h3>{__('Uh oh. Sean must have messed something up. Try refreshing to fix it.')}</h3>
|
||||
<div className="load-screen__actions">
|
||||
<Button
|
||||
label="Refresh"
|
||||
button="link"
|
||||
className="load-screen__button"
|
||||
onClick={() => window.location.reload()}
|
||||
/>
|
||||
</div>
|
||||
<div className="load-screen__help">
|
||||
<p>{__('If you still have issues, your anti-virus software or firewall may be preventing startup.')}</p>
|
||||
<p>
|
||||
{__('Reach out to hello@lbry.com for help, or check out')}{' '}
|
||||
<Button
|
||||
button="link"
|
||||
className="load-screen__button"
|
||||
href="https://lbry.com/faq/startup-troubleshooting"
|
||||
label="this link"
|
||||
/>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Fragment>
|
||||
{isWarning ? (
|
||||
<span className="load-screen__message">
|
||||
<Icon size={20} icon={ICONS.ALERT} />
|
||||
{` ${message}`}
|
||||
</span>
|
||||
) : (
|
||||
<div className="load-screen__message">{message}</div>
|
||||
)}
|
||||
|
||||
{details && <div className="load-screen__details">{details}</div>}
|
||||
<Spinner type="splash" />
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default LoadScreen;
|
||||
|
|
@ -1,14 +1,15 @@
|
|||
// @flow
|
||||
import * as React from 'react';
|
||||
import * as MODALS from 'constants/modal_types';
|
||||
import React from 'react';
|
||||
import { Lbry } from 'lbry-redux';
|
||||
import Button from 'component/button';
|
||||
import ModalWalletUnlock from 'modal/modalWalletUnlock';
|
||||
import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon';
|
||||
import ModalUpgrade from 'modal/modalUpgrade';
|
||||
import ModalDownloading from 'modal/modalDownloading';
|
||||
import LoadScreen from './internal/load-screen';
|
||||
import 'css-doodle';
|
||||
|
||||
const ONE_MINUTE = 60 * 1000;
|
||||
const FORTY_FIVE_SECONDS = 45 * 1000;
|
||||
|
||||
type Props = {
|
||||
checkDaemonVersion: () => Promise<any>,
|
||||
|
|
@ -87,7 +88,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
|
|||
// If nothing changes after 1 minute, show the error message.
|
||||
this.timeout = setTimeout(() => {
|
||||
this.setState({ error: true });
|
||||
}, ONE_MINUTE);
|
||||
}, FORTY_FIVE_SECONDS);
|
||||
}
|
||||
|
||||
updateStatus() {
|
||||
|
|
@ -206,16 +207,66 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { message, details, error } = this.state;
|
||||
const { error } = this.state;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<LoadScreen message={message} details={details} error={error} />
|
||||
<div className="splash">
|
||||
<css-doodle>
|
||||
{`
|
||||
--color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5));
|
||||
:doodle {
|
||||
@grid: 30x1 / 18vmin;
|
||||
--deg: @p(-180deg, 180deg);
|
||||
}
|
||||
:container {
|
||||
perspective: 30vmin;
|
||||
}
|
||||
|
||||
@place-cell: center;
|
||||
@size: 100%;
|
||||
|
||||
box-shadow: @m2(0 0 50px var(--color));
|
||||
will-change: transform, opacity;
|
||||
animation: scale-up 12s linear infinite;
|
||||
animation-delay: calc(-12s / @size() * @i());
|
||||
|
||||
@keyframes scale-up {
|
||||
0%, 95.01%, 100% {
|
||||
transform: translateZ(0) rotate(0);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
95% {
|
||||
transform:
|
||||
translateZ(35vmin) rotateZ(@var(--deg));
|
||||
}
|
||||
}
|
||||
)
|
||||
`}
|
||||
</css-doodle>
|
||||
<h1 className="splash__title">LBRY</h1>
|
||||
{error && (
|
||||
<div className="splash__error card card--section">
|
||||
<h3>{__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}</h3>
|
||||
<div className="card__actions--top-space card__actions--center">
|
||||
<Button button="primary" label={__('Refresh')} onClick={() => window.location.reload()} />
|
||||
</div>
|
||||
<div className="help">
|
||||
<p>{__('If you still have issues, your anti-virus software or firewall may be preventing startup.')}</p>
|
||||
<p>
|
||||
{__('Reach out to hello@lbry.com for help, or check out')}{' '}
|
||||
<Button button="link" href="https://lbry.com/faq/startup-troubleshooting" label="this link" />.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Temp hack: don't show any modals on splash screen daemon is running;
|
||||
daemon doesn't let you quit during startup, so the "Quit" buttons
|
||||
in the modals won't work. */}
|
||||
in the modals won't work. */}
|
||||
{this.renderModals()}
|
||||
</React.Fragment>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@
|
|||
@import 'component/header';
|
||||
@import 'component/icon';
|
||||
@import 'component/item-list';
|
||||
@import 'component/load-screen';
|
||||
@import 'component/main';
|
||||
@import 'component/markdown-editor';
|
||||
@import 'component/markdown-preview';
|
||||
|
|
@ -38,6 +37,7 @@
|
|||
@import 'component/search';
|
||||
@import 'component/snack-bar';
|
||||
@import 'component/spinner';
|
||||
@import 'component/splash';
|
||||
@import 'component/subscriptions';
|
||||
@import 'component/syntax-highlighter';
|
||||
@import 'component/table';
|
||||
|
|
|
|||
|
|
@ -1,86 +0,0 @@
|
|||
.load-screen {
|
||||
min-width: 100vw;
|
||||
min-height: 100vh;
|
||||
|
||||
align-items: center;
|
||||
background-image: linear-gradient(to right, $lbry-teal-5, $lbry-cyan-5 100%);
|
||||
background-size: cover;
|
||||
color: $lbry-white;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
.spinner {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.load-screen__button {
|
||||
transition: none;
|
||||
color: $lbry-white;
|
||||
border-bottom: 1px solid $lbry-white;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid $lbry-blue-1;
|
||||
color: $lbry-blue-1;
|
||||
}
|
||||
}
|
||||
|
||||
.load-screen__details {
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.load-screen__header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
.load-screen__help {
|
||||
font-size: 1.25rem;
|
||||
padding-top: var(--spacing-vertical-large);
|
||||
}
|
||||
|
||||
.load-screen__message {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
margin-bottom: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
.load-screen__title {
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
|
||||
sup {
|
||||
margin-left: -var(--spacing-vertical-tiny);
|
||||
padding: var(--spacing-vertical-miniscule) var(--spacing-vertical-small);
|
||||
|
||||
background-color: rgba($lbry-white, 0.3);
|
||||
border-radius: 0.2rem;
|
||||
color: $lbry-white;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1rem;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
top: 2.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
.load-screen--help {
|
||||
font-size: 14px;
|
||||
padding-top: $spacing-vertical;
|
||||
}
|
||||
|
||||
.load-screen__actions {
|
||||
font-size: 1.2em;
|
||||
margin-top: var(--spacing-vertical-medium);
|
||||
}
|
||||
|
|
@ -90,8 +90,7 @@
|
|||
|
||||
.error-modal__content {
|
||||
display: flex;
|
||||
padding: 0 var(--spacing-vertical-medium) var(--spacing-vertical-medium)
|
||||
var(--spacing-vertical-medium);
|
||||
padding: 0 var(--spacing-vertical-medium) var(--spacing-vertical-medium) var(--spacing-vertical-medium);
|
||||
}
|
||||
|
||||
.error-modal__warning-symbol {
|
||||
|
|
|
|||
46
src/ui/scss/component/_splash.scss
Normal file
46
src/ui/scss/component/_splash.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.splash {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
align-items: center;
|
||||
background-color: var(--color-background);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// .splash__actions {
|
||||
// margin-top: var(--spacing-vertical-medium);
|
||||
// align-items: center;
|
||||
// }
|
||||
|
||||
.splash__button {
|
||||
border-bottom: 1px solid $lbry-white;
|
||||
color: $lbry-white;
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px solid $lbry-blue-1;
|
||||
color: $lbry-blue-1;
|
||||
}
|
||||
}
|
||||
|
||||
.splash__details {
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.splash__title {
|
||||
position: absolute;
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
color: $lbry-white;
|
||||
}
|
||||
|
||||
.splash__error {
|
||||
position: absolute;
|
||||
margin-top: 25rem;
|
||||
box-shadow: var(--card-box-shadow) $lbry-gray-5;
|
||||
}
|
||||
|
|
@ -9,7 +9,6 @@ $large-breakpoint: 1921px;
|
|||
// Width & spacing
|
||||
--side-nav-width: 180px;
|
||||
--font-size-subtext-multiple: 0.92;
|
||||
|
||||
--spacing-vertical-miniscule: calc(2rem / 5);
|
||||
--spacing-vertical-tiny: calc(2rem / 4);
|
||||
--spacing-vertical-small: calc(2rem / 3);
|
||||
|
|
@ -17,15 +16,15 @@ $large-breakpoint: 1921px;
|
|||
--spacing-vertical-large: 2rem;
|
||||
--spacing-vertical-xlarge: 3rem;
|
||||
--spacing-main-padding: var(--spacing-vertical-xlarge);
|
||||
|
||||
--file-page-max-width: 1787px;
|
||||
--file-max-height: 788px;
|
||||
--file-max-width: 1400px;
|
||||
|
||||
--video-aspect-ratio: 56.25%; // 9 x 16
|
||||
|
||||
--channel-thumbnail-size: 10rem;
|
||||
|
||||
// Color
|
||||
--color-background: #270f34;
|
||||
|
||||
// Text
|
||||
--text-max-width: 660px;
|
||||
--text-link-padding: 4px;
|
||||
|
|
|
|||
|
|
@ -3001,6 +3001,11 @@ css-declaration-sorter@^4.0.1:
|
|||
postcss "^7.0.1"
|
||||
timsort "^0.3.0"
|
||||
|
||||
css-doodle@^0.7.1:
|
||||
version "0.7.1"
|
||||
resolved "https://registry.yarnpkg.com/css-doodle/-/css-doodle-0.7.1.tgz#477466310df6554ec5182349745194ba37415670"
|
||||
integrity sha512-TRs+7YLgP/yc0EdrL5Us2GRHbhIgf4GsQWAt5WdRxr5pwwpWl8Q9jZle431Z/5u5C29jiEoItjIaKE84xFh+kA==
|
||||
|
||||
css-hot-loader@^1.4.3:
|
||||
version "1.4.4"
|
||||
resolved "https://registry.yarnpkg.com/css-hot-loader/-/css-hot-loader-1.4.4.tgz#ae784932cd8b7d092f7f15702af08b3ec9436052"
|
||||
|
|
|
|||
Loading…
Reference in a new issue
Ohh, the auto-formatted moved this line.