65 lines
1.9 KiB
JavaScript
65 lines
1.9 KiB
JavaScript
// @flow
|
|
import React, { useState, useEffect } from 'react';
|
|
import LoadingScreen from 'component/common/loading-screen';
|
|
|
|
type Props = {
|
|
source: string,
|
|
claim: StreamClaim,
|
|
contentType: string,
|
|
};
|
|
|
|
const SANDBOX_TYPES = ['application/x-lbry', 'application/x-ext-lbry'];
|
|
|
|
// This server exists in src/platforms/electron/startSandBox.js
|
|
const SANDBOX_SET_BASE_URL = 'http://localhost:5278/set/';
|
|
const SANDBOX_CONTENT_BASE_URL = 'http://localhost:5278';
|
|
|
|
function AppViewer(props: Props) {
|
|
const { claim, contentType } = props;
|
|
const [loading, setLoading] = useState(true);
|
|
const [appUrl, setAppUrl] = useState(false);
|
|
|
|
const outpoint = `${claim.txid}:${claim.nout}`;
|
|
useEffect(() => {
|
|
if (SANDBOX_TYPES.indexOf(contentType) > -1) {
|
|
fetch(`${SANDBOX_SET_BASE_URL}${outpoint}`)
|
|
.then(res => res.text())
|
|
.then(url => {
|
|
const appUrl = `${SANDBOX_CONTENT_BASE_URL}${url}`;
|
|
setAppUrl(appUrl);
|
|
setLoading(false);
|
|
})
|
|
.catch(err => {
|
|
setLoading(false);
|
|
});
|
|
} else {
|
|
setLoading(false);
|
|
}
|
|
}, [outpoint, contentType, setAppUrl, setLoading]);
|
|
|
|
return (
|
|
<div className="file-render__viewer">
|
|
{!appUrl && (
|
|
<LoadingScreen
|
|
status={loading ? __('Almost there') : __('Unable to view this file in the app')}
|
|
spinner={loading}
|
|
/>
|
|
)}
|
|
{appUrl && (
|
|
<webview
|
|
title=""
|
|
sandbox="allow-scripts allow-forms allow-pointer-lock"
|
|
src={appUrl}
|
|
autosize="on"
|
|
style={{ border: 0, width: '100%', height: '100%' }}
|
|
useragent="Mozilla/5.0 AppleWebKit/537 Chrome/60 Safari/537"
|
|
enableremotemodule="false"
|
|
webpreferences="sandbox=true,contextIsolation=true,webviewTag=false,enableRemoteModule=false,devTools=false"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AppViewer;
|