Xamarin Forms (PCL) Youtube Player loading in a WebView - xamarin

We have YouTube trailers that we want to run on our Xamarin Forms (PCL) project.
We have try'd everything but somehow there is not a good Youtube player out there :(
So now we are loading the Youtube trailers in a WebView so that it runs on the Android + iOS.
This is how we load the trailers in our WebView component:
var apiRequest = "https://www.youtube.com/embed/GYmm9qNwd_s?html5=1&autoplay=1&loop=1&rel=0&showinfo=0&controls=1";
var webView = new WebView();
webView.Source = apiRequest;
webView.MinimumWidthRequest = 200;
webView.MinimumHeightRequest = 200;
webView.HorizontalOptions = LayoutOptions.FillAndExpand;
webView.VerticalOptions = LayoutOptions.FillAndExpand;
var stackLayout = new StackLayout();
stackLayout.Children.Add(webView);
stackLayout.HorizontalOptions = LayoutOptions.FillAndExpand;
stackLayout.VerticalOptions = LayoutOptions.FillAndExpand;
grid.Children.Add(stackLayout);
this.Content = grid;
But somehow the Trailer is running on iOS and Android but the Autoplay is not working and the related movies still show up!
So my question is :
Is there a way to set the Autoplay on the Xamarin Forms platforms?
Why does the autoplay function won't work?

Autoplay on most mobile platforms (Android, iOS) gets blocked to avoid poor user experiences - video should only play following a user action.
Like in Andriod, Auto-play is disabled since Android SDK 17.
You can check this question to get more information Android webview html5 video autoplay not working on android 4.0.3

Related

Xamarin for Android: Automatically taking photos -- something similar to UWP's MediaCapture functionality

A wrote a robotics app using UWP a few years ago, which automatically takes photos. I want to convert it to an Android (and possibly iOS) app with Xamarin, but I noticed that Xamarin's MediaPicker is a far cry from UWP's MediaCapture object. With MediaCapture I could have my app take several pictures completely on its own, without the user having to click on any buttons, with this code:
MediaCapture mediaCapture = new MediaCapture();
await mediaCapture.InitializeAsync(mediaSettings);
Low​Lag​Photo​Capture photoCapture = await mediaCapture.PrepareLowLagPhotoCaptureAsync(imageProperties);
CapturedPhoto photo = await photoCapture.CaptureAsync();
CapturedFrame frame = photo.Frame;
SoftwareBitmap SWBitmap = frame.SoftwareBitmap;
Is there a way to do the same in Xamarin?

Xamarin forms page not loaded properly for PopPageModel using navigation stack in FreshMVVM

We are using FreshMVVM in our application. We are using CoreMethods.PopPageModel based on NavigationStack count. While navigating the required page, that page not loaded properly. In xamarin forms ios it's working fine. For xamarin forms android not working fine. We are using below code,
for (int i = 0; i < 2; i++)
await CoreMethods.PopPageModel(i == (CurrentPage.Navigation.NavigationStack.Count - 1), animate: false);
How to resolve this?

Not able to get a desktop kind of a window

On windows, when I run the electron.net app see a desktop-style window. However, on a Mac, I see that the same app is being shown in a browser.
var browserWindow = await Electron.WindowManager.CreateWindowAsync(new BrowserWindowOptions
{
Width = 1000,
Height = 600,
Show = false
});
browserWindow.OnReadyToShow += () => browserWindow.Show();
browserWindow.SetTitle("Electron.NET API Demos");
How could I avoid giving the browser feel for a electron.net app on a Mac?
It's an asp.net core 3 based app using electron.net.
On the Mac, I updated the electron-builder package using npm and it works.

Significant drop in performance after migrating from UIWebView to WKWebView

The project I'm working on was using Xamarin Forms (3.4.0.x) Cross Platform, so obviously the iOS app had the UIWebView built in.
We decided to migrate to WKWebView, which required the Xamarin Forms 4.4 update so we proceeded to do that then added [assembly: ExportRenderer(typeof(WebView), typeof(Xamarin.Forms.Platform.iOS.WkWebViewRenderer))] to the AssemblyInfo.cs in our iOS app, like it says to do here. https://github.com/xamarin/Xamarin.Forms/pull/3346
Now I think that's all I need to do completely migrate to WK, but I have noticed that the app has slowed down significantly, taking ~5x as long to load a page, and on top of that, this loading icon stays on the screen even after the page is done loading
My questions are:
Did I migrate correctly, or are there any steps I'm missing/did wrong? Has anyone run into this loading icon problem before? Please ask me to clarify if I'm leaving information out, I'm new to Xamarin Forms so I'm not sure how to ask the best questions, and this is a big project I'm being introduced to. I have been told there is no custom iOS WebView Renderer though, so everything is done using the default WebView.
Thanks!
It is a native iOS issue caused because of the time it takes to detect phone numbers on the web page. So if you just disable that detection, it should work better.
Here's a sample of how you can do it in Xamarin:
var urlRequest = new NSUrlRequest(new NSUrl("https://www.gooogle.com"));
var config = new WebKit.WKWebViewConfiguration();
config.DataDetectorTypes = WebKit.WKDataDetectorTypes.Address;
var frame = new CoreGraphics.CGRect();
var webView = new WebKit.WKWebView(frame, config);
webView.LoadRequest(urlRequest);
If you followed the link you shared, you should be able to put the code inside the SetElement function of the WkWebViewRenderer. So your code would look like this:
var config = new WebKit.WKWebViewConfiguration();
config.DataDetectorTypes = WebKit.WKDataDetectorTypes.Address;
WebView = new WebKit.WKWebView(WebView.Frame, config);
There's an easier solution that just went public from the Xamarin team. All you need to do is update the Forms Nuget, Visual Studio, and Xamarin.iOS, and then:
... go to your iOS project, open the project properties and add this flag in the additional mtouch arguments field: --optimize=experimental-xforms-product-type.

How to create media down-loader like whats app, telegram in Xamarin forms? and how to create whats app UI

I am creating social application in Xamarin.Forms where I want to implement media downloader to download image and video. currently I am using Xamarin.FFImageLoading.Transformations nuget to load image.
how to create Whatsapp UI using xamarin forms for android and iOS?
I want to implement manual media download functionality with progress shown in images thumbnail like whatsapp, telegram mobile app.
var cachedImage = new CachedImage() {
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
WidthRequest = 300,
HeightRequest = 300,
CacheDuration = TimeSpan.FromDays(30),
DownsampleToViewSize = true,
RetryCount = 0,
RetryDelay = 250,
TransparencyEnabled = false,
LoadingPlaceholder = "loading.png",
ErrorPlaceholder = "error.png",
Source = "http://loremflickr.com/600/600/nature?filename=simple.jpg"
};
https://github.com/luberda-molinet/FFImageLoading
suggest any approach to achieve above functionality in Xamarin.Forms or Xamarin.Android or Xamarin.iOS.
#Sumeet what I understood is as below please correct me if I am wrong :-
There would be 4 options to app user as below :
If user selects auto download option...
Media in the app would get downloaded automatically when we open app, or in the background the media could get downloaded.
If user select download over WiFi option from user settings
Media would get downloaded once user gets connected to WiFi.
If user selects download media manually option from settings
App media should only get downloaded once user select particular media for download
If user selects do not download option
User will not be allowed to download the media contents in the app.
For file downloading using Xamarin Forms there is a nice article by Damien Aicheh :
https://damienaicheh.github.io/xamarin/xamarin.forms/2018/07/10/download-a-file-with-progress-bar-in-xamarin-forms-en.html
For circular progress dialog you can refer this article by James Montemagno :
https://blog.xamarin.com/using-custom-controls-in-xamarin-forms-on-android/
You need to create your custom xaml where you place your loader on top of a view and update the UI based on the file downloaded progress.
Hope this helps!!!
If you want a true progress bar, you will likely need to take over the image download yourself and build a custom control. You may be able to extend or modify CachedImage, but not sure if they provide hooks into their stream downloader (which you would want to replace with one that reports progress).
Another option would be to just show a nice animation with something like this https://github.com/DanielCauser/XamarinFFImageLoadingAndLottie
Found to create UI like Whats app and functionality using Xamarin Forms check below link
https://github.com/egbakou/WhatsAppUI
and below link is for some good looking UI in Xamarin Forms for android and iOS
https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI

Resources