Myujth

I'm trying to get working the MediaManager library playing a couple videos from youtube using MVVM approach.

My idea is to have a single view where initially is loaded a video, once the user watched the first loaded video he can click a button to see another video in the same view.

I can't find many examples on the internet related about how to accomplish this using MVVM, every example I've found uses the codebehind approach but my app is created in full MVVM so I need to get it working like that.

This is what I've done by now.

XAML

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 xmlns:behaviors="clr-namespace:Behaviors;assembly=Behaviors"
 xmlns:mediamanager="clr-namespace:Plugin.MediaManager.Forms;assembly=Plugin.MediaManager.Forms"
 x:Class="VideoView"
 BindingContext="Binding VideoViewModel, Source=StaticResource ServiceLocator">

 <ContentPage.Behaviors>
 <behaviors:EventHandlerBehavior EventName="Appearing">
 <behaviors:InvokeCommandAction Command="Binding PageAppearingCommand" />
 </behaviors:EventHandlerBehavior>
 </ContentPage.Behaviors>

 <StackLayout Margin="10,60,10,0">

 <Label x:Name="LblMsg"/>

 <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
 <mediamanager:VideoView x:Name="TrainingVideoPlayer"
 AspectMode="AspectFill"
 HorizontalOptions="FillAndExpand"
 VerticalOptions="FillAndExpand" />
 <StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand">
 <ProgressBar x:Name="progress" HeightRequest="10" Progress="Binding ProgressStatus, Mode=TwoWay" />
 <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="10" VerticalOptions="End">
 <Image x:Name="ImgPlay"
 Source="video_play.png"
 HorizontalOptions="Center">
 <Image.GestureRecognizers>
 <TapGestureRecognizer Command="Binding PlayTappedCommand" NumberOfTapsRequired="1" />
 </Image.GestureRecognizers>
 </Image>
 <Image x:Name="ImgPause"
 Source="video_pause.png"
 HorizontalOptions="Center">
 <Image.GestureRecognizers>
 <TapGestureRecognizer Command="Binding PauseTappedCommand" NumberOfTapsRequired="1" />
 </Image.GestureRecognizers>
 </Image>
 <Image x:Name="ImgStop"
 Source="video_stop.png"
 HorizontalOptions="Center">
 <Image.GestureRecognizers>
 <TapGestureRecognizer Command="Binding StopTappedCommand" NumberOfTapsRequired="1" />
 </Image.GestureRecognizers>
 </Image>
 </StackLayout>
 </StackLayout>
 </Grid>

 <Button x:Name="BtnNext" Command="Binding NextCommand"/>

 </StackLayout>

</ContentPage>

ViewModel

public class VideoViewModel : AppBaseViewModel


 //Commands
 public ICommand PageAppearingCommand get; set; 
 public ICommand PlayTappedCommand get; set; 
 public ICommand PauseTappedCommand get; set; 
 public ICommand StopTappedCommand get; set; 
 public ICommand NextCommand get; set; 

 //Fields
 private double _progressStatus;
 private string youtubevideourl;

 //Properties
 public double ProgressStatus
 
 get => _progressStatus;
 set
 
 if (Set(ref _progressStatus, value))
 
 RaisePropertyChanged(() => ProgressStatus);
 
 
 

 public VideoViewModel()
 
 PageAppearingCommand = new Command(OnPageAppearing);
 PlayTappedCommand = new Command(OnImgPlay_Tapped);
 PauseTappedCommand = new Command(OnImgPause_Tapped);
 StopTappedCommand = new Command(OnImgStop_Tapped);
 NextCommand = new Command(OnBtnNext_Click);

 youtubevideourl = "https://urloftheyoutubevideo";
 

 private async void OnPageAppearing()
 
 await CrossMediaManager.Current.Stop();

 //Sets the videoplayer events to control playback status
 CrossMediaManager.Current.PlayingChanged += VideoPlayer_PlayingChanged;
 CrossMediaManager.Current.MediaFinished += VideoPlayer_MediaFinished;
 

 private async void OnImgPlay_Tapped()
 
 await CrossMediaManager.Current.Play(youtubevideourl, MediaFileType.Video);
 

 private async void OnImgPause_Tapped()
 
 await CrossMediaManager.Current.Pause();
 

 private async void OnImgStop_Tapped()
 
 await CrossMediaManager.Current.Stop();
 

 private void VideoPlayer_PlayingChanged(object sender, PlayingChangedEventArgs e)
 
 Device.BeginInvokeOnMainThread(() =>
 
 ProgressStatus = e.Progress;
 );
 

 private void VideoPlayer_MediaFinished(object sender, MediaFinishedEventArgs e)
 
 //Some logic
 

 private async void OnBtnNext_Click()
 
 //logic to load the next video url
 

Using this code I can execute play/pause/stop methods of the MediaManager but nothing happens in the View, I cant even see 1 second of the youtube video.

I will appreciate your help

Note: I installed the MediaManager nuget package in my three projects: Android, iOS and NetStandard library

Note2: One of my requirements is to guarantee as much as possible the user watched the whole video before moving to the next one (the value will be stored in an external DB), so any solution different to this one must follow this requirement