download and online stream is not working in parallel - reactjs

We have encountered a problem, where we are downloading the video on my application home page and playing it in the videoPlayer page. Playing the video is getting stuck since download is in progress and the streaming request to google-cloud-bucket is in "pending" status(refer the screenshot).
As soon as download completes, video starts playing on videoPlayer page.
Can someone suggest any idea/solution for this usecase. There is an error message which is coming on console(on production) and on UI on local dev env.
Error Message: Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Related

How can I send pusher beams browser notification alerts with nextjs?

I'm implementing Pusher-Beams with next.js using authenticated users flow exactly as described in beams docs, and I got in the browser console client is subscribed and registered successfully.
However at pusher-beams debug-console website page I have these messages when I click on push notification button and nothing shown in my application,
I don't know what exactly I'm doing wrong here?!! and why I keep getting device de-registered message?
Note: I've tried with Chrome, Firefox and Brave but it is not working.

Why Do I Get a Blank Page on an Error but other people don't

I am watching this video and when an error occurs he gets an actual error on the page and only a blank white screen when he deploys the site.
I see this a few times. However I only see white screen no matter if I am on local host or on production.
I see he is using chrome on Mac and I am using it on PC. Not sure if that is the difference.
While I can't say definitively, my suspicion is that you aren't using create-react-app to setup your project.
You will only see that error message if you have used CRA to set up your project, as that is a specific error handler that is baked into that project. If you're not using create-react-app, React should log an error to your console instead.
ReactJS smart enough to hide the errors to the users when the app is in production mode.
You will see only a blank page if the app gets crashed but if you inspect the page you will see small detail about the error in the console.
if you running the app in development mode you will see full details about the errors.
for this case cames componentDidCatch method to handle app crash errors, instead of the blank page display a “Something went wrong” message to the user or you can send XHR request to the server with the error info.
Check out this example of declaring and using an error boundary
https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

CEFSHARP Video player don't work on weibo.com site

I can not see the videos on the weibo.com website.
Debugging sees this error:
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
For example watch this link:
https://www.weibo.com/tv/v/FxU2CxqKj?from=vhot
What could be the problem?
Many thanks,
Matteo
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
This means that some script tried to call the play method of a video object, but this was prevented by the browser, because this call was not directly related to a user interaction, that clearly indicates that the user wants the video to play at this point.
This is done to thwart attempts to autoplay videos without the user actually wanting this to happen - which can in the least be annoying, and at worst even costly (for example on a metered/mobile connection.)
But if this is not a problem you are experiencing with any code you have written yourself, then you can only ask the people behind this website to look into that for you - you’ll have to check what contact options or bug report possibilities they provide.

TouchID/Biometrics on iOS 11: LAPolicy.deviceOwnerAuthenticationWithBiometrics results in LAErrorAppBackgrounded without showing prompt

On iOS 11, there seems to be something different in the app state when an app is backgrounded using the home button vs when it opens an external webview link and goes to safari.
On returning to my app, I am requiring the user to validate with touch ID. If the app is backgrounded using the home button and returns, the call to LAPolicy.deviceOwnerAuthenticationWithBiometrics shows a prompt and waits for the user interaction. However, the user goes to an external website through a link in the app, and returns to the app using the "Back to app" button that shows in the status bar, a call to LAPolicy.deviceOwnerAuthenticationWithBiometrics results in an error immediately without displaying the touch ID prompt.
I've checked that the application state in both cases when the call is made is that the app is active. It's being done on the main thread, and it's being made on applicationDidBecomeActive.
This is the error I see:
Error Domain=com.apple.LocalAuthentication Code=-1004 "User interaction is required." UserInfo={NSLocalizedDescription=User interaction is required.}`
Any insights into the behavior of LAPolicy.deviceOwnerAuthenticationWithBiometrics? The code used to call it is:
let context = LAContext()
context.localizedFallbackTitle = ""
print("--> internalAuthenticateBiometrics background \(UIApplication.shared.applicationState == UIApplicationState.background)")
context.evaluatePolicy(LAPolicy.deviceOwnerAuthenticationWithBiometrics, localizedReason:NSLocalizedString("Place your finger to sign in.",comment: "")) { [weak self] (success, error) in
print("--> internalAuthenticateBiometrics completion success \(success) error \(error)")
}
We discovered that this specific issue was happening on older versions of iOS 11. We were testing on devices that had iOS 11.0.3 and 11.1.2. I updated my OS to 11.4 and the issue went away.
As of right now, I can only assume that Apple fixed some app foregrounding and biometrics issues. FYI this issue didn't have anything to do with the views being backgrounded or covered, because we made sure everything was visible, appDidEnterForeground was called, viewDidAppear was happening, and we even added delays in triggering biometrics after several seconds.

What error trigger the Oops, couldn't load error in kik web app

I am trying to integrate my app into kik, but for a specific action I fall in an error page that says:
Oops, couldn't load. Please try again later.
This panel looks like a kik panel with my app logo at the top
But everything is OK, If I try my app in Chrome with Kik plugin it works well. In fact my app creates an iframe and load it then we use postMessage to communicate between parent and iframe. I put some logs and it seems that everything is OK. Iframe is loaded and send message to parent with postmessage. But when I am in kik, the 'couldn't load' message appears and stops my app.
Does someone know what cause this panel to appear?
I had the exact same problem.
The problem is the combination of loading an iframe after doing browser history manipulation. Since there is no back button in Kik you can just do the page updates without updating the browser history and this will solve your problem.
I use this line to detect Kik and, if detected, ignore browser history updates:
if (!kik.enabled) {
//We are not running in Kik so we can do browser history manipulation here
}
Websites in the Kik browser must be single-page applications. The error screen shows up when the website either fails to load or tries to navigate elsewhere.
Is your website doing any navigation? Also, is there a place where we could take a look at the code?

Resources