LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix sizing for html files and add loading indicator

Browse source
This commit is contained in:
Yamboy1 2020-01-19 17:08:40 +13:00 committed by Sean Yesmunt
parent 99f87e746e
commit 222287d4b7
1 changed files with 30 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
ui/component/viewers/htmlViewer.jsx
View file

@ -1,21 +1,47 @@
// @flow
import React from 'react';
import * as React from 'react';
import { stopContextMenu } from 'util/context-menu';
type Props = {
source: string,
};
class HtmlViewer extends React.PureComponent<Props> {
type State = {
loading: boolean,
};
class HtmlViewer extends React.PureComponent<Props, State> {
iframe: React.ElementRef<any>;
constructor(props: Props) {
super(props);
this.state = { loading: true };
this.iframe = React.createRef();
}
componentDidMount() {
const resize = () => {
const { scrollHeight, scrollWidth } = this.iframe.current.contentDocument.body;
this.iframe.current.style.height = `${scrollHeight}px`;
this.iframe.current.style.width = `${scrollWidth}px`;
};
this.iframe.current.onload = () => {
this.setState({ loading: false });
resize();
};
this.iframe.current.resize = () => resize();
}
render() {
const { source } = this.props;
const { loading } = this.state;
return (
<div className="file-render__viewer" onContextMenu={stopContextMenu}>
{loading && <div className="placeholder--text-document" />}
{/* @if TARGET='app' */}
<iframe sandbox="" title={__('File preview')} src={`file://${source}`} />
<iframe ref={this.iframe} hidden={loading} sandbox="" title={__('File preview')} src={`file://${source}`} />
{/* @endif */}
{/* @if TARGET='web' */}
<iframe sandbox="" title={__('File preview')} src={source} />
<iframe ref={this.iframe} hidden={loading} sandbox="" title={__('File preview')} src={source} />
{/* @endif */}
</div>
);