Multiple VideoViews and Panel.ZIndex support

[a44281071]

It doesn't need dx11, and we need “Video layer and video layer overlay“. FFME will copy surface to WriteableBitmap. It takes up twice as much memory, and its processing takes up too much. If we show 9 videos, It's impossible run x86 app with FFME player. But flyleaf can't overlay video image surface.

[SuRGeoNix]

It's not possible to use D3DImage with hardware acceleration. So for performance reasons this can't change.

Can you please describe your requirements further to see if I can include them in the current implementation?

You want to overlay a videoview over another videoview?

[a44281071]

Yes, like a digram canvas, We can add many children, Like "office/text/picture/dicom/video". We can change this children location/size/layer_index by mouse thumb. Like PS canvas., but more media type.

[SuRGeoNix]

@a44281071 Please have a look to the new test/sample that I have included in the solution and let me know if that solves your requirement

[SuRGeoNix]

Please re-open this if you still can't implement your design requirements

[a44281071]

@SuRGeoNix Thanks for your demo. But it is nested layer. For example:

• I have a panel named 'DiagramCanvas'.
• A ListBox in view, A Files in ViewModel.
• ListBox.ItemsPanel is 'DiagramCanvas'.
• Files.Add("aaa.jpg") | Add("bbb.mp4") | Add("ccc.dcom") | Add("ddd.mp4") | Add("eee.mp4")
• 5 items move and resize by user. Play/show all items!

The display view is below:

[SuRGeoNix]

Please give a try to re-explain me the missing feature so I can add it. I was not able to understand you.

[a44281071]

A demo for mvvm diagram list to play multi-media files. https://github.com/a44281071/TestMvvmFilePlayer

[SuRGeoNix]

Well I was able to integrate this with Flyleaf with one issue. You can't implement ZIndex on WindowsFormsHost as it will be always above other WPF elements as it is a separate HWND. This means you will need to replace the package / Screen that you currently use with a different approach. I will try to look deeper on this one later on.

I just used this one FileViewModel

public Player MediaPlayer { get; set; } = new Player();

I change MediaElement with this on FileView

<fl:VideoView x:Name="VideoView" Player="{Binding MediaPlayer}"/>

And opened the inputs with an event on FileView with this

private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            ((FileViewModel) DataContext).MediaPlayer.OpenAsync(((FileViewModel) DataContext).FilePath);
        }

I used AppBootstrapper constructor to Engine.Start() ...

[SuRGeoNix]

Have a look on the new videoview implementation and let me know if that covers your requirements.

Update: Just did a quick test by replacing your DiagramListBox with FlyleafHosts and works great ;)

...
xmlns:fl="clr-namespace:FlyleafLib.Controls.WPF;assembly=FlyleafLib"
...

<Border>
    <!--<t3:DiagramListBox Name="Items"
                 t3:SelectorAttached.SelectNoneWhenClickBlankArea="True"
                 Background="AliceBlue"
                 ItemContainerStyle="{StaticResource FileItemStyle}" Visibility="Collapsed" />-->

    <Grid >
        <fl:FlyleafHost Player="{Binding MediaPlayer1}" KeepRatioOnResize="True" VerticalAlignment="Top" HorizontalAlignment="Left" Width="180" Height="120" AttachedDragMove="Surface" AttachedResize="Surface" />
        <fl:FlyleafHost Player="{Binding MediaPlayer2}" KeepRatioOnResize="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="100" Width="180" Height="120" AttachedDragMove="Surface" AttachedResize="Surface" />
        <fl:FlyleafHost Player="{Binding MediaPlayer3}" KeepRatioOnResize="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="200" Width="180" Height="120" AttachedDragMove="Surface" AttachedResize="Surface" />
        <fl:FlyleafHost Player="{Binding MediaPlayer4}" IsAttached="True" DetachedTopMost="False" KeepRatioOnResize="True" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="300" Width="180" Height="120" AttachedDragMove="Surface" AttachedResize="Surface" />
    </Grid>
</Border>

[saman1832]

@SuRGeoNix on making KeepRatioOnResize="True" the video is playing but not able to see the video on screen. You can take any demo and just add KeepRatioOnResize="True". you will see the issue

[SuRGeoNix]

@saman1832 Try to set PreferredLandscapeWidth="100" PreferredPortraitHeight="100" as it seems that for some reason it will not set a default value and stays at 0

[saman1832]

@SuRGeoNix that working fine. But if i am resizing the window then player width and height is not its takes time to readjust in the grid (suppose i have 10 grid and each grid is having flyleafhost) and potion mismatches

[SuRGeoNix]

@saman1832 Maybe it's the Screen package that you use which makes it heavy? Check the https://github.com/SuRGeoNix/Flyleaf/blob/master/Tests/WpfFlyleafHost/MultipleAttached.xaml (add it to App.xaml) and let me know if you notice the same issue there?