MediaElement using 100% CPU inside CarouselView.

[RSReswin]

MediaElement 100% CPU usage inside CarouselView, i am using only 3 low quality 500kb video inside CarouselView.
here is the application speedscope trace file : speedscope.json

<CarouselView ItemsSource="{Binding ReelsCollection, Mode=TwoWay}"
                      VerticalScrollBarVisibility="Never"
                      HorizontalScrollBarVisibility="Never"
                      IsSwipeEnabled="True"
                      Loop="True"
                      CurrentItemChanged="CarouselView_OnCurrentItemChanged"
                      PositionChanged="CarouselView_OnPositionChanged"
                      x:Name="RootCarouselView">
        
            <CarouselView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical"
                                   SnapPointsAlignment="Center"
                                   SnapPointsType="MandatorySingle"/>
            </CarouselView.ItemsLayout>
            
            <CarouselView.ItemTemplate>
                <DataTemplate x:DataType="model:ReelsStatisticsItemSource">
                    <Grid>
                        <toolkit:MediaElement Source="{Binding MetaData.VideoUrl}"
                                              ShouldAutoPlay="True"
                                              ShouldShowPlaybackControls="False"
                                              IsVisible="True"/>
                        
                        <StackLayout VerticalOptions="End" Margin="5,0,0,5">
                            <VerticalStackLayout HorizontalOptions="End"
                                                 Spacing="15"
                                                 Margin="0,0,0,-30">
            
                                <checkBox:LikeCheckBox Scale="0.85"
                                                       Checked="{Binding Interaction.Like, Mode=TwoWay}"
                                                       TotalChecked="{Binding Engagement.TotalLike, Mode=TwoWay}"
                                                       ReelsId="{Binding MetaData.Id, Mode=TwoWay}"
                                                       x:Name="LikeCheckBox"
                                                       CheckChanged="LikeCheckBox_OnCheckChanged"/>
                                
                                <button:CommandButton TotalCommand="{Binding Engagement.TotalCommand, Mode=TwoWay}"
                                                      ButtonCommand="{Binding CommandButtonClickedCommand, Source={RelativeSource AncestorType={x:Type viewModels:HomeViewModel}}}"
                                                      ButtonCommandParameter="{Binding MetaData.Id, Mode=TwoWay}"/>
                                
                                <ImageButton Source="donate"
                                             WidthRequest="30"
                                             HeightRequest="30"
                                             Scale="0.85"
                                             Command="{Binding DonateButtonClickedCommand, Source={RelativeSource AncestorType={x:Type viewModels:HomeViewModel}}}"
                                             CommandParameter="{Binding MetaData.Id}">
                                    
                                    <ImageButton.Behaviors>
                                        <toolkit:IconTintColorBehavior TintColor="White"/>
                                    </ImageButton.Behaviors>
                                </ImageButton>
                                
                                <ImageButton Source="more"
                                             WidthRequest="30"
                                             HeightRequest="30"
                                             Scale="0.6"
                                             IsVisible="True"
                                             Command="{Binding ReelsSettingButtonClickedCommand, Source={RelativeSource AncestorType={x:Type viewModels:HomeViewModel}}}"
                                             CommandParameter="{Binding MetaData.Id}">
                                    
                                    <ImageButton.Behaviors>
                                        <toolkit:IconTintColorBehavior TintColor="White"/>
                                    </ImageButton.Behaviors>
                                </ImageButton>
                            </VerticalStackLayout>
            
                            <VerticalStackLayout Spacing="8">
                                <HorizontalStackLayout Spacing="10">
                                    <Border WidthRequest="40"
                                            HeightRequest="40"
                                            StrokeThickness="0"
                                            BackgroundColor="{StaticResource Primary}">
                    
                                        <Image Source="{Binding Creator.ProfileUrl}"
                                               Aspect="AspectFill"/>
                                        <Border.StrokeShape>
                                            <Ellipse/>
                                        </Border.StrokeShape>
                                    </Border>
                
                                    <Label Text="{Binding Creator.Username}"
                                           TextColor="White"
                                           VerticalOptions="Center"
                                           FontFamily="FustatMedium"
                                           FontSize="13"/>
                                </HorizontalStackLayout>
                
                                <Label Text="{Binding MetaData.Description}"
                                       TextColor="White"
                                       FontSize="13"/>
                            </VerticalStackLayout>
                        </StackLayout>
                    </Grid>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

when i use mediaElement Cpu 100%
when i command the mediaElement code Cpu usage Less then 10%

[ne0rrmatrix]

• What operating system are you using? Are you on Android? IOS? Windows? Mac?
• You are auto playing all the video's that show up? Is that intended to play multiple video's at the same time?

If the clips are very short and you are looping them, and they are similar length you would be first loading, then buffering, playing, and then stopping, unloading, loading, buffering, and then playing again. Doing multiple operations on a list of media elements at the same time would use some resource's. I have never tracked exactly how much though.

I recommend not having a collection of video's set to autoplay. That will use a lot of resources.

[RSReswin]

and i have CarouselView PositionChanged event tigger 2 time when i scroll.
i am forget to say, i am using CarouselView in ContentView ma that is the problem ?

[RSReswin]

[ObservableProperty] private ObservableCollection<ReelsStatisticsItemSource> _reelsCollection = new ObservableCollection<ReelsStatisticsItemSource>();
private List<ReelsStatisticsItemSource> _reelsStatistics;
private byte _currentReelsIndex = 3;

public async ValueTask LoadNextReelAsync(int index)
    {
        _currentReelsIndex++;
        await SetReelsByIndexAsync(index, _currentReelsIndex); 
    }

    public async ValueTask LoadPreviousReelAsync(int index)
    {
        _currentReelsIndex--;
        await SetReelsByIndexAsync(index, _currentReelsIndex);
    }

    private async ValueTask SetReelsByIndexAsync(int scrollIndex, int pageIndex)
    {
        if (pageIndex > _reelsStatistics.Count)
        {
            try
            {
                var result = await _apiService.GetManyReels(ReelsCollection[ReelsCollection.Count].MetaData.Id);
                _reelsStatistics.Clear();
                _reelsStatistics = ReelsStatisticsMapper.Map(result);
            }
            catch (ApiException e)
            {
                DisplayAlertManager.Show(e.Content!);
            }
            catch (Exception e)
            {
                _logger.LogError("HomeViewModel Error : {message}", e.Message);
            }
        }
        
        ReelsCollection[scrollIndex] = _reelsStatistics[pageIndex];
    }
    ```
    
    maybe uploading values in ObservableCollection that case the issue ?

[RSReswin]

ReelsCollection[scrollIndex] = _reelsStatistics[pageIndex];

i think this is creating a problem.

[RSReswin]

what is the proper way to update the data in CarouselView to make instagram reels like CarouselView ?

[pictos]

@RSReswin Can you create a small project, that reproduces the issue, and share on github? That way we can look into it better. And please do it on a bug issue, so we can track it

[RSReswin]

@pictos @ne0rrmatrix sry for late.
@pictos And please do it on a bug issue, so we can track it => i have no idea it is bug or issue by me, so i create this is diss, wand to move it to issue ?

Here is the sample project : MauiSample.zip

this also have same issue.