I am working very hard to get audio to play on my mobile phone with react 360. Through reading various documentation, I've learned that in order to play audio on mobile, I need to enact an html entity to create a user interaction. Once a user interacts by clicking the button, audio should be able to play on mobile. This does not seem to be the case.
In my index.html file I have the following code:
<html>
<head>
<title>ExampleVR</title>
<style>body { margin: 0; }</style>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<!-- Attachment point for your app -->
<div id="container">
<button id="enter" onclick="enterApp();">
Click to Enter VR
</button>
</div>
<script src="./client.bundle?platform=vr"></script>
<script>
// Initialize the React 360 application
function enterApp() {
React360.init(
'index.bundle?platform=vr&dev=true',
document.getElementById('container'),
{
assetRoot: 'static_assets/',
}
);
}
</script>
</body>
</html>
As you can see, I have created am html button that when clicked, loads my React 360 code . However, when I click a VrButton in mobile, it still does not play. I've followed the recommendations as documented and it works on all browsers on desktop with the exception of mobile. Does anyone know how to fix this problem?
This was the solution to fix the audio issue:
https://github.com/facebook/react-360/issues/652
Related
Created a new app a developer Xero account. From the App, I got client_id and a callback. This is a dotnet core project integrating Xero SDK.
I created a simple HTML using the following code and that works nicely. (same as they provided here)
<html>
<head>
<meta charset="UTF-8">
<meta name="xero-client-id" content="42xxxx">
<meta name="xero-scopes" content="openid,profile,email">
<meta name="xero-redirect-uri" content="host-url/oidc-signin">
<title>My App </title>
</head>
<body>
<span data-xero-sso data-label="Sign in with Xero"></span>
<script src="https://edge.xero.com/platform/sso/xero-sso.js" async defer></script>
</body>
</html>
I have a React application, I'm adding a button within a react app so that user can authenticate and then get the invoices from Xero. So the button is not working from the react app. When I click on the button nothing just happens.
Any idea, please?
I found this plugin and tried but that didn't work either.
On my production build (npm run build && npm run start) of my NextJS app I noticed elements firing a css transition on page load (links flashing blue, svg flashing color).
Noticed in Chrome only, Firefox and Safari didn't have this problem.
Found the answer in this stackoverflow question. Appearantly it is due to a chrome bug (https://crbug.com/332189 and https://crbug.com/167083).
Fix is to put a script tag with one space at the end of the body. In NextJS you can do this by adding a pages/_document.js file (more info).
Mine looks like this now:
import Document, { Html, Head, Main, NextScript } from 'next/document';
export default class MyDocument extends Document {
render () {
return (
<Html lang="en">
<Head>
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
</Head>
<body>
<Main />
<NextScript />
{/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
<script> </script>
</body>
</Html>
)
}
}
Edit: This bug might be fixed since June 1st 2021 in Chrome Canary v93.0.4529.0 after 7.5 years!
I have started to use JSON editor library and angular wrapper from angular-tools/ng-jsoneditor.
The bug appears to be very annoying when switched to code view. Anyone had something similar?
Situation image
Situation image 2
Happens only when quotes appear on that line. Thats pretty every line for a JSON.
Using standart lib, nothing changed. I'm running out of ideas.
controller
$scope.obj = { data: null, options: { mode: 'code' } };
$scope.onLoad = function (instance) {
instance.expandAll();
};
view
<!DOCTYPE html>
<html ng-app="jsonapp" ng-controller="jsonController">
<head>
<meta charset="utf-8" />
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta content="charset=utf-8">
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
<div ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" style="height:800px"></div>
</body>
</html>
I had a similar problem, after a few hours of investigation finally I find that what causing it was the font-family style(I had global font for all app).
So I override it with ng-deep:: to font-family: monospace.
This was a solution in my case!
I have this demo app
It works as intended in mobile safari (and desktop) but when I add the page to homescreen I can no longer click (ng-click) the card heading to toggle class to show full contact card. Any idea why that only happens when in standalone mode?
I have it as a codepen here as well
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
</head>
<body>
<div class="mdl-card__title mdl-color--blue-grey-500" ng-click="showCard($index)">
I am still learning the tricks to jQuery mobile and have been having a problem with the zooming in and zooming out of a picture/image on a data-role="page." Is there a way to make the pinch/zoom work on an image on the iPhone using jquery mobile? Cant get it to work on the iOS Simulator. Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport">
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content" style="padding:0;">
<img src="coffee.gif" width="320" height="480" alt="coffee">
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Thanks so much for your help. Much appreciated.
-bob
edit the "viewport" in meta tag with this
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
It's the viewport metadata property that controls those settings.
Follow this to see how to enable pinch & zoom on JQM iOS (shouldn't really matter that you are using PhoneGap).
Hope this helps.
When jQuery Mobile renders a page, it adds the following meta tag to
the head of the document.
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
It is the minimum-scale=1, maximum-scale=1 part of
the tag which disables the pinch zoom. What we need to do is modify
the $.mobile.metaViewportContent variable. We can do this using the
following code.
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width';
});
If we want to restrict the amount of zooming, we can use the following:
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2';
});