I am trying to play a video when developing locally with VueJS 2.
My code is the following :
<video class="back_video" :src="`../videos/Space${videoIndex}.mp4`" id="background-video"></video>
...
data :
function() {
return {
videoIndex:1
}
}
...
const vid = document.getElementById("background-video");
vid.crossOrigin = 'anonymous';
let playPromise = vid.play();
if (playPromise !== undefined) {
playPromise.then(function() {
console.log("video playing");
}).catch(function(error) {
console.error(error);
});
}
This code is causing the exception given in title. Tried in several browsers, always the same.
If I change the src by :
:src="require(`../videos/Space${videoIndex}.mp4`)"
it works.
But in that case building time is very long as I have many different videos in my videos directory, because adding require() will force to copy all videos in the running directory at build phase (vue-cli serve), and this is really annoying. In other words I want to refer videos that are outside the build directory to avoid this (but also to avoid having videos in my git).
It is interesting to note that when I deploy server side, it works perfectly with my original code
:src="`../videos/Space${videoIndex}.mp4`"
Note also that if i replace my code with simply
src="../videos/Space1.mp4"
it works too. So the video itself, or its location, are not the source of the problem.
Any clue ?
You can host your videos on a CDN to have something faster and easier to debug/work with.
Otherwise, it will need to bundle it locally and may take some time.
I am developing a React Native app. It is a very simple app. I just have to load a website on a webview, which is perfectly done. but my client wants something which I am not sure how to do.
There are some social media buttons on the website. like facebook, twitter etc. so my client wants me to open social media app while user tap on them. suppose user tapped on facebook button then the facebook app will load.
I badly need to know the solution. please help me. thanks in advance.
Make use of onMessage.
Code is untested but you should get the gist of what it's trying to achieve.
Webpage:
function facebookClick() {
window.postMessage("Facebook button done got clicked");
}
var _fb_button = document.getElementById("your-facebook-button");
_fb_button.addEventListener("click", facebookClick, false);
WebView:
[...]
import { Linking } from 'react-native';
[...]
<WebView
onMessage={(event) => {
let message = event.nativeEvent.data;
if(message.includes("Facebook button done got clicked"))
Linking.openURL('fb://page/PAGE_ID');
}}
[...]
You'll have to check out the current protocol's details of each of the social apps you're trying to open via deeplink. Once you've done that, you can further improve your code with Linking.canOpenURL
Is there a way to disable the error overlay when running a create-react-app in development mode?
This is the overlay I'm talking about:
I'm asking this because im using error boundaries (React 16 Error Boundaries) in my app to display error messages when components crashes, but the error overlay pops up and covers my messages.
An alternate solution is to add the following CSS style:
iframe
{
display: none;
}
This prevents the error from showing.
We don't provide an option to disable the error overlay in development.
Error boundaries do not take its place (they are meant for production use).
There is no harm having both the development error overlay and your error boundary; simply press Escape if you'd like to view your error boundary.
We feel the error overlay provides tremendous value over your typical error boundary (source code, click to open, etc).
It is also vital as we explore enabling hot component reloading as a default behavior for all users.
If you feel strongly about disabling the overlay, you'll need to eject from react-scripts and discontinue use of webpackHotDevClient. A less intrusive method may be removing the error event listener installed by the overlay off of window.
The error overlay can be disabled by using the stopReportingRuntimeErrors helper utility in the react-error-overlay package.
First, install the react-error-overlay package:
yarn add react-error-overlay
Then in index.js — right before mounting the root React component, import the utility and invoke it like this:
import { stopReportingRuntimeErrors } from "react-error-overlay";
if (process.env.NODE_ENV === "development") {
stopReportingRuntimeErrors(); // disables error overlays
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
Error overlays in create-react-app should now be disabled.
You can suppress React's error event handling by capturing the event first.
for example, by placing in public/index.html's <head>:
<script>
window.addEventListener('error', function(e){
// prevent React's listener from firing
e.stopImmediatePropagation();
// prevent the browser's console error message
e.preventDefault();
});
</script>
Since you probably still want React's error overlay for errors outside the error boundary, consider this option:
<script>
window.addEventListener('error', function(e){
const {error} = e;
if (!error.captured) {
error.captured = true;
e.stopImmediatePropagation();
e.preventDefault();
// Revisit this error after the error boundary element processed it
setTimeout(()=>{
// can be set by the error boundary error handler
if (!error.shouldIgnore) {
// but if it wasn't caught by a boundary, release it back to the wild
throw error;
}
})
}
});
</script>
assuming your error boundary does something like:
static getDerivedStateFromError(error) {
error['shouldIgnore'] = true;
return { error };
}
The result is a behaviour that follows try...catch line of reasoning.
To solve this issue, you could use CSS:
body > iframe {
display: none !important;
}
for some reason the overlay popped up for me only now while upgrading to Webpack 5.
In any case, you can now cancel the overlay by adding in your webpack.config.js:
module.exports = {
//...
devServer: {
client: {
overlay: false,
},
},
};
Or through the CLI: npx webpack serve --no-client-overlay
Taken from here: https://webpack.js.org/configuration/dev-server/#overlay
To avoid bundling in this large dev library in prod you can use a
dynamic import:
yarn add react-error-overlay
if (process.env.NODE_ENV === 'development') {
import('react-error-overlay').then(m => {
m.stopReportingRuntimeErrors();
});
}
In config/webpack.config.dev.js, comment out the following line in the entry array
require.resolve('react-dev-utils/webpackHotDevClient'),
And uncomment these two:
require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
I think this makes sense but sometimes when you are typing and have an error boundary then the overlay pops up with each character stroke and is annoying. I can remove the handler I suppose.
In the file webpack.config.js, comment the line:
// require.resolve('react-dev-utils/webpackHotDevClient'),
And uncomment:
require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
In the file webpackDevServer.config.js, comment:
// transportMode: 'ws',
// injectClient: false,
hide it with adblock
It is very useful to disable the errors temporarily so you don't have to comment/uncomment parts of your code that is not used at the moment, but it definitely will be after a few more changes.
The quickest solution is to just use adblock to pick the iframe with the errors.
It is trivial to toggle it with a single click to enable / disable adblock on the given page.
It is counter-intuitive to overlay the rendered page in development mode just to inform the user the newly imported objects or the recenlty created variables are not yet used.
I would say it is an arrow to the knee for beginners :)
If you are using the latest version with react-script >= 5.0.0, you just need to add an environment variable ESLINT_NO_DEV_ERRORS=true.
https://create-react-app.dev/docs/advanced-configuration
There is no option for it.
But, if you strongly wanted to disable modal window, just comment out this line
https://github.com/facebook/create-react-app/blob/26f701fd60cece427d0e6c5a0ae98a5c79993640/packages/react-dev-utils/webpackHotDevClient.js#L173
I had the same problem and I have been digging in the create-react-app source for a long time. I can't find any way to disable it, but you can remove the listeners it puts in place, which effectivly stops the error message. Open the developerconsole and select the html tag. There you can remove the event listeners on error and unhandlerejection which is put in place by unhandledError.js. You can also close the error message by clicking the x in the upper right corner of the screen, and then you should see your message.
Gathering answers here together, I managed to solve this issue for myself.
Here is the package I created for this.
The css fix has changed:
body > hmr-error-overlay {
display: none;
}
I'll also recommend adding this block on init so that you don't get silent errors:
window.addEventListener('error', function (e) {
console.error(e.message);
// prevent React's listener from firing
e.stopImmediatePropagation();
// prevent the browser's console error message
e.preventDefault();
});
Environment:
Worklight 6.1.0.2
dojo 1.9.4
We have created a hybrid app using Worklight 6.1 for android, iOS and windows8 platform. Now we would like to add and show End User License Agreement (EULA) window to the user, when the app first time launch. It should have Accept and Decline button. If user tap on Accept button, then he should be able to use the app.
I would like to know, how can we achieve this using Worklight 6.1.
Any help on this, will be much appreciated.
FYI there is nothing specific here to Worklight.
You could implement this in any number of ways w/out ever using any Worklight API whatsoever.
You could achieve it for example like this (untested code - you'll need to experiment):
In main.js create some global variable eulaAccepted:
var eulaAccepted;
// You will need to handle this property using HTML5 Local Storage so that it will persist for the next time the app is launched, and have the app act accordingly.
Then, in wlCommonInit():
function wlCommonInit() {
if (!eulaAccepted) {
displayEula();
} else {
displayApp();
}
}
In displayEula():
function displayEula() {
// either display a dialog using `WL.SimpleDialog`...
// Or maybe custom HTML with "accept" and "not accept" buttons
WL.SimpleDialog.show(
"Eula Agreement", "your-eula-text-here",
[{text: "Accept", handler: acceptEula },
{text: "Reject", handler: rejectEula}]
);
}
Handle the result:
function acceptEula() {
eulaAccepted = true;
... // Some code that will store the `eulaAccepted` variable using HTML5 Local Storage API
displayApp();
}
function rejectEula() {
// Display some other custom HTML instead of your app.
// Maybe also additional logic to try again to accept the Eula...
}
WL.App.close is deprecated. I know that this is not supported for iOS. But why is it deprecated for Android as well? At the moment, it is still functioning fine, even on 6.2, but since it is deprecated, what is the alternative/substitute for this?
In Android as well, this is not the recommended approach. You should let the user quit the app, and this is done by manually bringing up the "applications view" and swiping the app in order to quit it.
Can be corroborated by these answers by Googlers:
http://android.nextapp.com/site/fx/doc/exit
Additionally, there are these approaches:
Close application and launch home screen on Android
https://groups.google.com/forum/#!topic/android-developers/Y96KnN_6RqM
You could write a Cordova plug-in that will force-quit the app and trigger it by overriding whatever you'd like (like the Back button), or create a dedicated Quit button, etc.
In MobileFirst 7.0, this method seems to be deprecated in both iOS and Android, but when I call this "deprecated" method in Android, it really works.
I think overriding Android's back button might be a best practice in Android webapp as back button may cause strange page navigating issues (if you use UI frameworks like JQM). This is what I done in WL's main.js.
WL.App.overrideBackButton(backFunc);
function backFunc(){
WL.SimpleDialog.show(
"Alert",
"Sure to quit the app ?",
[ {text : 'Cancel', handler: function() {
}},
{text : 'Yes', handler: function() {
if(WL.Client.getEnvironment() == WL.Environment.ANDROID) {
WL.App.close();
}
}}]
);
}