Skinning guide: how to port a skin to MP2, or how "Titan" gets transformed (1 Viewer)

[morpheus_xx]

The OSD and dialog styles are getting better.

For the OSD I introduced a OSD.xaml theme file (in the Reflexion skin), that allows the definition of the major OSD shape in one single place. It has placeholders included for the progress bar, player controls and title/information fields.

https://github.com/MediaPortal/MediaPortal-2/commit/5854f2070e53876dfe87fac4a9cbefe794d41da9#L5L11

To make the former Reflexion OSD look like Titan, it was a chance of around 10 lines of code: https://github.com/MediaPortal/MediaPortal-2/commit/5854f2070e53876dfe87fac4a9cbefe794d41da9#L5L11

Things to note:
Again I defined the OSD colors by resources in colors.xaml. This allows global changing the colors for new color themes.

The menu style got adopted as base for all dialogs now. The result is shown in next screen:

This is again a difference to the orginal MP1 version: Titan has one single image shape as background for dialogs. MP2 does define the style once, but it is freely scalable. You can see here two open dialogs using a flexible width (based on content).

Sometimes it might not be wanted to use flexible sizes, but this can simply be solved by putting in a fixed "Width=xxx". I do prefer the flexible way for now.

 

[morpheus_xx]

you are making great progress
One question: Wouldn't it look much cleaner without the cross for closing the dialog? Normally you use a media center with a remote and not with a mouse, so it would give it a much more cleaner look

I could show it only if mouse is used, so we can have both ways Btw, this is one major usability issue in MP1: if you really try to use it with a mouse only, you are lost quickly

Good suggestions are always welcome, so I implemented the changes right now:

• All dialogs are showing the close button on top right only, if mouse is used: https://github.com/MediaPortal/MediaPortal-2/commit/68aae846fb946c9c29c236fce3f1374cd34709a1
• Also inside the OSD same logic for player control buttons: https://github.com/MediaPortal/MediaPortal-2/commit/5e9aa70f12d1fbd684e66307845de881e12af123#L1R47

Check the screenshots for the same OSD, showing normal view, details view with and witout mouse controls active. And see the OSD background smoothly scales with its contents. Yes, I really love skinning MP2

 

[morpheus_xx]

I wrote it already above: creating color themes for MP2 skin is easier then ever before! Because we have defined colors by constants in our colors.xaml, a theme can simply override the default values.

I made a quick example, which was done in 10 minutes (because I had to take screenshots ) https://github.com/MediaPortal/MediaPortal-2/commit/5a1973dc5dded1ebc4546c855b73cce21cda75a5#L2R0

If you check the changes, you will mainly see a new theme "blue" created, a theme.xml added and inside the "colors.xaml" of this new theme I only defined two colors of the OSD. That's it, blue theme is done. Of course you can adjust all colors as you want, i.e. change background color of menus/dialogs to blueish or whatever you like.

For understanding the theming philosophy such a "2 line of code change" is more clear: only the 2 color definitions are used from "blue theme", all others fall back to the "default theme" of Titanium skin. If there is the color not defined, the fallback goes further to the Default skin, starting by probing for a "blue theme" (which not exists there), then last chance is the "default theme" of "Default skin".

This way is also taken for screen loading. That's why even this state of the Titanium skin is fully usable, and there are no longer "Skin file missing" errors!

 

[morpheus_xx]

This guide will make a christmas break now. But for all who are interested in the first preview you can find a download here https://forum.team-mediaportal.com/threads/skinning-guide-discussion-and-download.114861/.

Merry christmas to all!

 

[morpheus_xx]

Christmas is over, so time for more work on porting the Titan to MP2

The next part is a quite big one: the MediaLibrary views. They are in fact one of the most important parts, they let you browse all your liked media items (Audio, Video, Images, Movies, Series, Recordings).

The concept is still the same: code/design once, reuse it multiple times:

I copied the basic SimpleShowItems.xaml from the Default screens of the "Media Plugin", because I need to bring in more content:
https://github.com/MediaPortal/MediaPortal-2/commit/36d7999c29feb4bcb63f01625322907440902d77#L11R19

In contrast to the original layout, that filled the whole screen with the media items list, I wanted to have a "split" layout which has the list on right and details to the selected item on left. To keep this screen flexible, I've added a control placeholder, that is later filled by the "calling" pages (that included this screen).

<Control Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Template="{Binding Source={DynamicResource Media_Details_Template}}" />

Now the "MoviesShowItems.xaml" includes first the SimpleShowItems.xaml and defines the templates for Media_Details_Template:

<!-- Control template for the MediaItem details (cover, thumbs, duration, genres...)-->
<ControlTemplate x:Key="Media_Details_Template">
<Include Source="screens\MediaItemMovieDetails.inc"/>
</ControlTemplate>

And finally there are the contents of the details panel:
https://github.com/MediaPortal/MediaPortal-2/commit/36d7999c29feb4bcb63f01625322907440902d77#L2R92

For now I've started with the "small list view", later I'll add the grid view and maybe also cover list. Cover flow is not yet implemented in MP2, but I think it will be done sooner or later

So these are the first screenshots of movies, movie collections and audio items.

 

[morpheus_xx]

Next step for the media items lists:

Until now we had only following view modes available:

• ListView (small, medium, large)
• GridView (large)

Now I've added another view mode definition:

• Cover (large)

This was added in following commts: https://github.com/MediaPortal/MediaPortal-2/compare/fdbca9af6aa7...a02fa92632be

The previously introduced details panel left to the list should now be hidden for the new Cover view, so we can have the full screen width available. This done by introducing a conditional visibility:
https://github.com/MediaPortal/MediaPortal-2/commit/e4856d538ea710ba6f1de124e3867b0ef26bb5d2

<Control Grid.Column="0" Grid.Row="1" VerticalAlignment="Stretch" Width="950"
Template="{Binding Source={DynamicResource Media_Details_Template}}">
<Control.IsVisible>
<Binding Source="{StaticResource ViewModeModel}" Path="LayoutType" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} != {LayoutType}.{CoverLayout}"/>
</Control.IsVisible>
</Control>

If you read only the bold text it can be understood as: "IsVisible = LayoutType is not CoverLayout".

For the new Cover layout I wanted to have not the normal button style, but a simple cover/image in combination with a reflexion. So we need to set the matching item style for each type (list, grid, cover):

<DataTemplate DataType="{x:Type navitemseriesFilterItem}">
<Control>
<Control.Template>
<MultiBinding Converter="{StaticResource ExpressionMultiValueConverter}" ConverterParameter="{}{0} == {LayoutType}.{ListLayout} ? {1} : ({0} == {LayoutType}.{GridLayout} ? {2} : {3})">
<Binding Source="{StaticResource ViewModeModel}" Path="LayoutType"/>
<Binding Source="{StaticResource ListViewSeriesFilterItemTemplate}"/>
<Binding Source="{StaticResource GridViewSeriesFilterItemTemplate}"/>
<Binding Source="{StaticResource CoverViewSeriesFilterItemTemplate}"/>
</MultiBinding>
</Control.Template>
</Control>
</DataTemplate>

Things to note:

• The ConverterParameter construct got extended, so it now compares 3 types (read as: "if ListLayout then ListViewTemplate" else "if GridLayout then GridViewTemplate" else "CoverViewTemplate"). Important are the red braces ( ), otherwise a correct interpretation is not possible.

https://github.com/MediaPortal/MediaPortal-2/commit/a02fa92632be688b11644221aa828d9877fbd7b4#L0R1235

 

[morpheus_xx]

Some more work on different places has been done.

I started to work on the TV guide screen to develop a similar view as Titan provides. As you might have noticed already, I can't (and also don't want to) copy each detail currently.

Some screenshots of normal guide, with one playing TV stream and last with PiP in background:

Main changes related to default screens are:

• I'm using master_menu.xml as template, so the common menu is available. In Reflexion skin and all others I used the master_bare.xaml, because the menu would waste too much space on the left side (https://github.com/MediaPortal/MediaPortal-2/commit/46a127a99f8e366c3147f7ed17963117d5af9653#L2L4)
• The content region (with half transparent black) is increased here. This means I override the default styles of the master_menu screen with locally defined margins (https://github.com/MediaPortal/MediaPortal-2/commit/7242c7c172d60268f560393c843e2bcbc1f54687#L2R63)
• To implement this overriding of resources, I've added a new converter, which now can be used by any skinner out there: https://github.com/MediaPortal/MediaPortal-2/commit/70c567a16ac86a590fe8df2d1e13bd23a5e9378b

Besides the TV guide also the main styles for OnlineVideos have been created. Titanium is already very usable.

Next stuff will be more detailed work in media lists and cover view, or to add opacity mask to home menu buttons.

 

[morpheus_xx]

More tweaks have been done on the media items sizes and styles. The main layout will stay this way. I'm not sure yet if I should change the ListItems style to the "simple" layout of original Titan. The differnece is currently, that Titanium uses its regular button style as base for each MediaItem (including zoom animation on hover), while Titan has special list background images: a default one and a hover image.

I also could solve a navigation issue: the "Menu" button on left side was not always focusable when navigating by keys (remote). See http://mantis.team-mediaportal.com/view.php?id=4095 for background info.

The change was small, with big effect: https://github.com/MediaPortal/MediaPortal-2/commit/ba365a2ac3e4ee5cde2f4939fe16c42fb1177416. It's working fine now.

Before the change I had the LeftPanel "on screen", but moved it outside via RenderTransformation (it is done after the Layouting happened). When the focus should be switched, the focus prediction calculated that the button is in original place (without RenderTransform). So moving "left" could not reach the menu button.

Now I move the panel outside the screen while layouting (margin left -550) and slide it in on opening. Simple. If the old behaviour is a bug should @Albert decide

Finally there is a huge update of screenshots showing all media sections: Audio, Video, Movie, Series and Images.

 

[morpheus_xx]

Now that we have a nice "NewsPlugin" available (thanks to @offbyone! https://forum.team-mediaportal.com/threads/news-plugin-rss-atom.113147/) I adopted the home screen to show a new ticker:

The left part is the short summary, on the left there is the news content. Right side starts to scroll after 2 seconds. News toggle in 10 second interval:

Main News screen:

Also OnlineVideos got some screens for Titanium:

And a short note about the Skin name inside MP2:

When I started to port "Titan" to MP2, I first thought to name it the same way in MP2 as well. But in fact it won't be the "same" skin as in MP1, it uses its designs, but does have some other ways in using it and also other content in many parts.

So my working title is "Titanium", as a derivation of MP1-"Titan" (there where some examples before Avalon -> Avallonis)

Stay tuned

 

[morpheus_xx]

Time for a small update

While playing around with our great MediaLibrary I missed an indicator for watched/unwatched items. We already have a property "PlayCount" in the MediaAspect defined, where each "start play" is counted. But we did not yet expose this property to the UI.

So this was the first change, which is very small: https://github.com/MediaPortal/MediaPortal-2/commit/dc9e0bbe2ee9a5d28d3cff2ea4fd50485ff131e4

Next change is minor as well: we need to modify the MediaItem templates from mediastyles.xaml file: https://github.com/MediaPortal/MediaPortal-2/commit/1c30e2cf1756792b703d678610fc9048e8a221e3#L8R972

	  <!-- Unwatched indicator -->
	  <Image Source="unwatched_flag.png" HorizontalAlignment="Left" VerticalAlignment="Top">
		<Image.IsVisible>
		  <Binding Path="PlayCount" Converter="{StaticResource ExpressionValueConverter}" ConverterParameter="{}{0} == 0"/>
		</Image.IsVisible>
	  </Image>

The important logic is inside the Image.IsVisible: the binding uses "PlayCount" and evaluates "isVisible : PlayCount == 0". Now we have our "unwatched" indicator.

For font color of the label we do similar thing: choosing a different color for (un-)watched items: https://github.com/MediaPortal/MediaPortal-2/commit/1c30e2cf1756792b703d678610fc9048e8a221e3#L8R980.

Which finally leads to following results: