I am working on a React Native app that displays HTML content using the react-native-render-html library. This HTML data is coming from content formatted in WordPress. The same content is also being displayed in the web app made with ReactJS. I am also using this iframe plugin, as recommended by the render-html library, to display the iframes in my HTML.
I have the following problem with rendering Twitch video embeds.
The Twitch embeds are in this format:
<iframe src="https://clips.twitch.tv/embed?clip=ShortHelpfulSquirrelCmonBruh-hWj49qxBfx-VKseO&autoplay=false&parent=my.parent.domain" width="640px" height="360px" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
Please note that these are not live streams, but clips. The ReactJS website displays these embeds correctly with the thumbnail:
With the same embed code, however, my React Native app displays the embed without the thumbnail but with just a black background (although it shows the title and controls):
Once I play and pause the video, the background does not remain black, however:
Here is the rendererProp that I am passing to the library for iframes:
iframe: {
scalesPageToFit: true,
webViewProps: {
scrollEnabled: false,
mediaPlaybackRequiresUserAction: true,
javaScriptEnabled: true,
domStorageEnabled: true,
userAgent: Platform.select({
ios: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15",
android: "Chrome/56.0.0.0 Mobile android",
}),
},
}
I am passing the IframeRenderer and iframeModel as imported directly from #native-html/iframe-plugin (linked at the beginning) into the renderers and customHTMLElementModels props of the <RenderHtml/> component. Also I am using the WebView from react-native-webview lib.
My team and I cannot figure out why the thumbnail is not appearing in the react-native-webview, but works fine in the website. If anyone has any experience rendering Twitch video iframe embeds on react-native-webview, please take a look. Any help will be appreciated.
Related
My question is related to:
Scrapy-splash not rendering dynamic content from a certain react-driven site
But disabling private mode did not fix the issue (passing --disable-private-mode as an argument to the Docker container).
I made a single page app using React and all it does is add an element to root:
function F(){
class HelloMessage extends React.Component {
render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
}
return(React.createElement(HelloMessage, { name: "Taylor" }));
}
But Splash only shows a blank white page!
I also made a single page website using Django and the HTML loads a script on head:
<script src="/static/js/modify-the-dom.js"></script>
And all the script does is to write something on the page after the content is loaded:
window.onload = function(){
document.write('Modified the DOM!');
}
This change shows up on the browsers! But on on Splash, if I remove the window.onload and just write document.write('Modified the DOM!'); it works fine! So the issue seems to be with window.onload even though I'm waiting long enough about 10 seconds on the LUA script.
So I was wondering how to fix that.
I also checked my Splash with this website and it seems JS is not enabled!
https://www.whatismybrowser.com/detect/is-javascript-enabled I wonder if there's an option I have not enabled?
One example of a client-rendering website that Splash does not crawl properly (same issues above) is https://www.digikala.com/ it only shows a blank white page with some HTML that needs to be populated with AJAX requests. Even https://web.archive.org/ does not crawl this website's pages properly and shows a blank page.
Thanks a lot!
Update:
The Splash script is:
function main(splash, args)
splash:set_user_agent("Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36")
assert(splash:go(args.url))
assert(splash:wait(30)) -- Tried different timeouts.
return {
html = splash:html(),
png = splash:png(),
har = splash:har(),
}
end
I also tried setting these to no avail:
splash.plugins_enabled = true
splash.resource_timeout = 0
I have an app with expoGo and use expo-file-system to download files to the user's device.
When I pass the path to the files to rn-pdf-reader-js in online mode, everything works as it should, but in offline the library simply simply does not render pdf.
<PDFReader
style={styles.reader}
customStyle={{
readerContainerZoomContainerButton: {
display: 'none',
},
}}
withPinchZoom={true}
withScroll={true}
noLoader={false}
source={{uri: magazine.pdf ? magazine.pdf : URL.MAGAZINE_PDF(magazine)}}
/>
where magazine.pdf look like "file:///Users/user/Library/Developer/CoreSimulator/Devices//data/Containers/Data/Application//Documents/ExponentExperienceData/%2540anonymous%252**/pdf2021-1.pdf"
I need a PDF to be displayed offline
I tried many solutions: load base64, load component into webView;
but it's all useless
I have a hybrid mobile app built on Trigger.io that opens links (some of them are user generated content) in the in-app child browser (forge.tabs module) per default. When trying to open a .pdf document the screen will stay blank white (tested on both Android and iOS).
Here is a cut down version of the code I'm using:
$(document).on('click', 'a', function() {
window.forge.tabs.open( $(this).attr('href') );
return false;
});
I would expect to either view the document in the in-app browser or be able to download it to the device.
Assuming your PDFs are local, you'll need to do a "getURL" first.
Here's a function that works just fine for me:
function showPDF (pdfName) {
forge.tools.getURL(pdfName, function (myPDF ) { forge.tabs.open(myPDF); });
}
Then just call showPDF with a relative or absolute url i.e.
<button class="btn" type="button" onclick="showPDF('assets/pdf/sample.pdf');">
I have tested the HTML5 video player, it can make HTML5 video fullscreen on Android Chrome browser but not Dolphin browser.
Is someone know what is the way to make HTML5 video fullscreen on Dolphin browser?
Thanks
Tested that jplayer can make HTML5 video in fullscreen, ever in Android 4.x default browser and Dolphin browser, the config should refer to below code:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "demo.m4v"
});
},
swfPath: "js",
supplied: "webmv, ogv, m4v",
fullScreen: true
});
I am using JS to hide and show a flash video object at various stages in a flow. The function works perfectly in all browsers including Safari 5.1 on OSX 10.6, but does not work on Safari 5.1.3, 5.1.4 and 5.1.5 on OSX 10.7. It repositions on the page but remains visible.
You can see the issue here.
Any help really appreciated!
Embed code:
var swfVersionStr="10.2.0";
var xiSwfUrlStr="/video/expressInstall.swf";
var flashvars={
sToken:"#{#stream_name}",
sSWFPath: "/video/Recorder.swf",
sConfigPath: "#{current_recorder_config_file}"
};
var params={
bgcolor:"#FFFFFF",
allowfullscreen:"true",
allownetworking:"all",
allowscriptaccess:"always",
base:".",
devicefont:"false",
menu:"false",
play:"true",
quality:"high",
salign:"tl",
scale:"showall",
seamlesstabbing:"false",
swliveconnect:"true",
wmode:"window"
};
var attributes={
id:"Recorder",
name:"Recorder"
};
swfobject.embedSWF("/video/Recorder.swf", "flashContent", "384", "318", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);
JS for Hide and Show:
function hideVideo() {$('.step_video, #flashContent').css({visibility:'hidden', height:1})}
function showVideo() {$('.step_video, #flashContent').css({visibility:'visible', height:'auto'})}
Already had this bug before you shouldn't hide it, it's a bug with flash.
My workaround was :
position: absolute;
left: -5000px;