37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import * as _ from 'lodash';
|
|
import * as React from 'react';
|
|
import Paper from 'material-ui/Paper';
|
|
import {utils} from 'ts/utils/utils';
|
|
import {DefaultPlayer as Video} from 'react-html5video';
|
|
import 'react-html5video/dist/styles.css';
|
|
|
|
interface LoadingProps {}
|
|
|
|
interface LoadingState {}
|
|
|
|
export class Loading extends React.Component<LoadingProps, LoadingState> {
|
|
public render() {
|
|
return (
|
|
<div className="pt4 sm-px2 sm-pt2 sm-m1" style={{height: 500}}>
|
|
<Paper className="mx-auto" style={{maxWidth: 400}}>
|
|
{utils.isUserOnMobile() ?
|
|
<img className="p1" src="/gifs/0xAnimation.gif" width="96%" /> :
|
|
<div style={{pointerEvents: 'none'}}>
|
|
<Video
|
|
autoPlay={true}
|
|
loop={true}
|
|
muted={true}
|
|
controls={[]}
|
|
poster="/images/loading_poster.png"
|
|
>
|
|
<source src="/videos/0xAnimation.mp4" type="video/mp4" />
|
|
</Video>
|
|
</div>
|
|
}
|
|
<div className="center pt2" style={{paddingBottom: 11}}>Connecting to the blockchain...</div>
|
|
</Paper>
|
|
</div>
|
|
);
|
|
}
|
|
}
|