[solved] FanArt transition (2 Viewers)

[ge2301]

Sounds really cool and this is exactly what I'd like to see

 

[Brownard]

I've uploaded my image source in a new post here https://forum.team-mediaportal.com/threads/plugin-imagesourceextensions.133000/

 

[ge2301]

@Brownard
I've modified the FanArt screen a bit in order to show more from images and audio poster.
Currently those FanArts are too small, because they are uniformed into space, that is intended for movie posters.

Everything looks basically ok, just then switching between FanArts with different aspect there is a sudden jump.
It seems that the FanArt is changing the position after the ImageSourceWrapper finished it's transition effect.

Attached a small movie showing this.

Do you have an idea, why this happens or how we can prevent it?

Here the code in MediaItemFanArt.inc:

<Grid
  xmlns="www.team-mediaportal.com/2008/mpf/directx"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:fanart="clr-namespace:MediaPortal.Extensions.UserServices.FanArtService.Client;assembly=FanArtService.Client"
  xmlns:media="clr-namespace:MediaPortal.UiComponents.Media.Models.AspectWrappers;assembly=Media"
  x:Name="MediaItemDetails" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="{DynamicResource Cover_Width}"
  Margin="-25,-20,-80,30">

  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Grid.Resources>
    <fanart:FanArtImageSourceConverter x:Key="FanArtImageSourceConverter"/>
  </Grid.Resources>

  <Image Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" Stretch="Uniform" Margin="0,0,5,0" Height="560">
    <Image.Source>
      <ImageSourceWrapper Delay="0.5" DelayInOut="true" Transition="transitions\dissolve" TransitionDuration="0.5"
                     Source="{Binding Source={StaticResource FanArtBackgroundModel}, Path=ImageSource, Converter={StaticResource FanArtImageSourceConverter}, ConverterParameter=Poster;0;0;False}"
                     FallbackSource="{Binding Source={StaticResource FanArtBackgroundModel},Path=MediaItem}" />
    </Image.Source>
  </Image>
</Grid>

 

[Brownard]

I think the underlying reason is that you haven't given the Image control a width and the skin engine is calculating the size and position of the control during the transition from the size of the first image, then it updates the control's size and position based on the second image's size after the transition.

A workaround is to give the Image control a width e.g.

<Image Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" Stretch="Uniform" Margin="0,0,5,0" Height="560" Width="{DynamicResource Cover_Width}">
    <Image.Source>
      <ImageSourceWrapper Delay="0.5" DelayInOut="true" Transition="transitions\dissolve" TransitionDuration="0.5"
                    Source="{Binding Source={StaticResource FanArtBackgroundModel}, Path=ImageSource, Converter={StaticResource FanArtImageSourceConverter}, ConverterParameter=Poster;0;0;False}"
                    FallbackSource="{Binding Source={StaticResource FanArtBackgroundModel},Path=MediaItem}" />
    </Image.Source>
</Image>

This does impact the alignment though, the image control is aligned to the right but the actual images are centred within the image control's 'rectangle' so the distance to the right hand side varies depending on the image's aspect ratio. It looks acceptable to me though.

 

[ge2301]

so the distance to the right hand side varies depending on the image's aspect ratio. It looks acceptable to me though.

Thanks, this is a good step. But the same code is used for movie poster etc. To keep visually a symetry and in order to not cover the FanArt background in the middle, it needs to be aligned on the right side. I'm sure there is a solution, I'll play around with it further Google didn't help so far though ...

 

[Brownard]

I don't think it will be easy (maybe impossible).
You could either define a different Cover_Width for each view based on expected values for that media type or disable transitions.

The ultimate fix would be to implement ContentAlignment for the image control so that images aren't always drawn in the centre, I don't think WPF even implements this though.

 

[mrj]

Hi

I don't think WPF even implements this though.

Is not this one of the reasons that MP2 uses MPF and not WPF?
/mrj

 

[ge2301]

I think MPF is a "light version" of WPF. Means most parts are taken over, but some parts are missing in MPF.
Howeer there might be also other reasons, as I'm not part of MP2 from the beginning

 

[Lehmden]

I think MPF is a "light version" of WPF

MPF is meant as an modified WPF to fit MP2 needs perfect. Some features of WPF are not supported but some features used in MP2 are not supported in WPF but in MPF. To say it is a "light" version is not exactly correct...
Al least it this how I have understood the existance of MPF

 

[Brownard]

I've managed to hack together a working solution to this where you can specify the alignment of the texture within the image control.

@morpheus_xx is this something we want to support? The current problem is that when an Image control's width/height is dynamic based on the texture size, there is a 'jump' when a transition finishes (it's also there without a transition but much less noticeable) when the layout updates based on the new texture size. But without a dynamic size it isn't possible to get a consistent alignment because the texture is always drawn centred.

The relevant changes would need to be made here so that textures aren't always drawn centred.