Forum Xamarin.Forms

Video Player inside CollectionView item addition causes video frame shuffle Xamarin Forms

astralmasterastralmaster Member ✭✭
edited May 2020 in Xamarin.Forms

I have a CollectionView that has a VideoPlayer element in its DataTemplate taken from Xamarin Forms sample projects. On iOS, the video player rendered uses AVPlayer to play video.
I also have a button that when pressed, adds more items to the ItemSource of the CollectionView.
If I play the first, say, three items and pause them all on random frame/time, and then press this add more items button, the frozen image frames on these three AVPlayer instances on iPhone get shuffled/switched in some weird order.
In more detail:

If the first item of the CollectionView has some animated cartoon video paused, and the second item has some sports game video paused, and the third item has some forest images video paused, when I press the add more items button, and some new items get added to the ItemSource of the CollectionView, I see the sports game video frame moved to the first item's AVPlayer instance, the forest images video frame moved to second item's AVPlayer instance and the animated cartoon frame is moved to third item's AVPlayer instance. To clarify: the items themselves stay in their exact position, only the video frames in AVPlayer are switched.

After these have been 'shuffled', if I unpause the first item, it plays its original video of animated cartoon, and same goes with item two and three. The only problem, as I understand it, is that somewhere in the caching / cell reusing mechanism of CollectionView, the cached frames of AVPlayer are switched in some order when new items are added to the CollectionView.
This problem happens exclusively with AVPlayer. Any other element, does not reproduce this behavior. I have tried with ffimageloading's CahcedImage, simple labels and other elements, but it is only AVPlayer's rendered, paused frame images that get shuffled.
I realize this issue probably has some deep roots that won't be solved on Xamarin Forms level, but just wanted to try my luck here.

My code for the CollectionView is pretty basic:

<CollectionView ItemsSource="{Binding ScrollArticles}" 

                AbsoluteLayout.LayoutBounds="0,0,1,1"
                AbsoluteLayout.LayoutFlags="All"
        RemainingItemsThreshold="5"
                RemainingItemsThresholdReachedCommand="{Binding LoadMoreItems}"
                VerticalOptions="FillAndExpand" 
                HorizontalOptions="FillAndExpand"
                ItemsLayout="VerticalList"
                x:Name="CategoryItemsListView"
                VerticalScrollBarVisibility="Always"
                Scrolled="CategoryItemsListView_OnScrolled"

                >

    <CollectionView.ItemTemplate>
        <DataTemplate>

                <elements:VideoPlayer Margin="0,0,0,15" Source={Binding video_url}>

                </elements:VideoPlayer>

        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

The same exact code, when having the VideoPlayer element replaced with any other element, say Image, behaves as it should.
Another thing is that the same exact VideoPlayer code does not do this when implemented inside ListView (with CachingStrategy=RecycleElement) instead of CollectionView. But unfortunately, ListView lacks a lot of features such as determining the center most item when scrolling etc.

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    I see the sports game video frame moved to the first item's AVPlayer instance, the forest images video frame moved to second item's AVPlayer instance and the animated cartoon frame is moved to third item's AVPlayer instance.

    Hi astralmaster, I am confused with what you said, could you please share a simple video or some screenshots to illustrate your problem?

    If it is convenient for you ,could you please post a basic demo so that we can try to reproduce this question on our side?
    Thanks in advance.

  • astralmasterastralmaster Member ✭✭

    Hi, I will try to do so once I finish my current project. Unfortunately due to deadline considerations I was forced to switch to ListView that does not have the same bug for the same exact code.

  • jezhjezh Member, Xamarin Team Xamurai

    It's a good idea , since the listview does not have the same bug for the same exact code, you can use it first.

    Meanwhile we hope you can upload a basic demo when you are free and we will try to test on our side.

    Thank you very much for your support of xamarin.

    Best Regards.

Sign In or Register to comment.