// @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;