Creating a Startup Theme with Video Support

[Jason Carr]

Hello all, there's been some recent discussion on attempting to create a startup theme with videos, so I thought I'd chime in with some solutions. Adding a video to a startup theme is actually rather easy, as it's the same as with Big Box themes. Here's an example "Default.xaml" file with a video:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:controls="clr-namespace:Unbroken.LaunchBox.Wpf.Controls;assembly=Unbroken.LaunchBox.Wpf"
             mc:Ignorable="d"
             d:DesignHeight="562"
             d:DesignWidth="1000"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             FocusVisualStyle="{x:Null}"
             BorderThickness="0"
             Margin="0"
             Padding="0"
             Background="#000">
    <Canvas Name="Canvas">
        <controls:VideoControl VideoPath="pack://siteoforigin:,,,/StartupThemes/VideoExampleTheme/Videos/_Default.mp4"
            StretchVideo="true" CenterVideo="false" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
            Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />
    </Canvas>
</UserControl>

Keep in mind that you need the xmlns:controls line near the top in order to use the VideoControl tag. Other than that, it's all in that VideoControl tag, and it will play the "LaunchBox\StartupThemes\VideoExampleTheme\Videos\_Default.mp4" video file full-screen. It will also work for both Windows Media Player and VLC.

I'll be adding some subsequent posts in this topic for more involved solutions shortly, but I wanted to post a simple solution first.

[Jason Carr]

Next, let's look at using bindings for dynamic video paths. Let's say you want to use different videos for each platform. Something like this would work in your Default.xaml file for the startup theme:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:controls="clr-namespace:Unbroken.LaunchBox.Wpf.Controls;assembly=Unbroken.LaunchBox.Wpf"
             mc:Ignorable="d"
             d:DesignHeight="562"
             d:DesignWidth="1000"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             FocusVisualStyle="{x:Null}"
             BorderThickness="0"
             Margin="0"
             Padding="0"
             Background="#000">
    <Canvas Name="Canvas">
        <TextBlock x:Name="VideoFileName" Visibility="Collapsed">
            <TextBlock.Text>
                <MultiBinding StringFormat="{}pack://siteoforigin:,,,/StartupThemes/VideoExampleTheme/Videos/{0}.mp4">
                    <Binding Path="KnownPlatformOrPlaylistTitle" />
                </MultiBinding>
            </TextBlock.Text>
        </TextBlock>
        <controls:VideoControl VideoPath="{Binding Text, ElementName=VideoFileName}"
            StretchVideo="true" CenterVideo="false" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
            Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />
    </Canvas>
</UserControl>

The only changes here are that we've added the TextBlock element and changed the VideoPath property of the VideoControl element to bind to the text in that TextBlock element. The TextBlock's visibility is set to Collapsed, which means that it will not show up at all and also won't take up any space; it's simply used for binding purposes behind the scenes.

We use the MultiBinding in the TextBlock.Text element to replace the "{0}" portion of the StringFormat value with the "KnownPlatformOrPlaylistTitle" binding, which basically returns the active platform. Thus the value that is used for the VideoPath will be the full path to the platform-specific video file.

Keep in mind that we have *not* specified a FallbackValue in the VideoPath binding. You may have seen some themes that do something similar to the above, but add a FallbackValue like this:

VideoPath="{Binding Text, ElementName=VideoFileName, FallbackValue='pack://siteoforigin:,,,/StartupThemes/VideoExampleTheme/Videos/_Default.mp4'}"

You might assume that the "_Default.mp4" video file will be used if the platform video file does not exist, but unfortunately that does not work, despite some themes suggesting that it does. The reason this doesn't work is because nothing in the XAML is checking to see if the platform video file exists or not, and the XAML doesn't care, so whether the file exists or not, the platform-specific video file will be returned, and the FallbackValue will never be used. I'm not sure of exactly when and where the FallbackValue is used, but I would guess that most likely it's used if the KnownPlatformOrPlaylistTitle binding turns out to be NULL.

So naturally, the next step of the puzzle is figuring out how to prioritize bindings and use a default video if a platform video does not exist. A solution for that is coming in the next post.

[Jason Carr]

Alright, finally, here's a full solution for prioritized videos using the PrioritizedPathSelector control that was just integrated into LaunchBox in version 9.6-beta-6. Keep in mind that you will need at least version 9.6-beta-6 for this solution to work. Previously the PrioritizedPathSelector control was available in a plugin, but for version 9.6-beta-6, it was integrated directly into LaunchBox/Big Box for use in the startup themes.

Here's our example:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:controls="clr-namespace:Unbroken.LaunchBox.Wpf.Controls;assembly=Unbroken.LaunchBox.Wpf"
             mc:Ignorable="d"
             d:DesignHeight="562"
             d:DesignWidth="1000"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             FocusVisualStyle="{x:Null}"
             BorderThickness="0"
             Margin="0"
             Padding="0"
             Background="#000">
    <Canvas Name="Canvas">
        <controls:PrioritizedPathSelector x:Name="VideoFileName" FolderPath="StartupThemes\VideoExampleTheme\Videos" FileExtension=".mp4"
			Priority1FileName="{Binding KnownPlatformOrPlaylistTitle}"
			Priority2FileName="{Binding Platform.NestedName}"
			Priority3FileName="{Binding SelectedGame.Platform}"
			Priority4FileName="_Default" />
        <controls:VideoControl VideoPath="{Binding PrioritizedFilePath, ElementName=VideoFileName}"
            StretchVideo="true" CenterVideo="false" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
            Height="{Binding ElementName=Canvas, Path=ActualHeight}" Width="{Binding ElementName=Canvas, Path=ActualWidth}" />
    </Canvas>
</UserControl>

This time, instead of using a TextBlock element for binding in the background, we use the new PrioritizedPathSelector control. It's also available in the same "Unbroken.LaunchBox.Wpf.Controls" namespace that the VideoControl is in, so we can use the same xmlns tag for this control as with the VideoControl. However, do keep in mind that there are a couple of different namespaces that the VideoControl is available in (for backwards compatibility reasons), so double-check that the xmlns:controls line in the file you're working with matches the above line exactly.

The PrioritizedPathSelector element above specifies the Name of the element (used by the ElementName property of the VideoPath binding), the FolderPath, the FileExtension, and several prioritized file name properties. Usage should be fairly obvious, but let's talk through the four prioritized file names. There are a total of 5 prioritized file name properties available in the control, of which we are using four.

The Priority1FileName is currently bound to KnownPlatformOrPlaylistTitle, which is the same binding that we were using previously. It contains some logic in the LaunchBox/Big Box backend to attempt to spit out an actual platform or arcade playlist name, instead of a nested playlist like "Nintendo Entertainment System All Games", for example.

The Priority2FileName property is then used if the Priority1FileName file is not found. It attempts to use a file name that matches the "Nested Name" of the current platform or playlist. For example, "Nintendo Entertainment System All Games" would simply return "All Games".

The Priority3FileName jumps straight to the name of the platform itself for the launching game, regardless of which list the game is launching from, which is a good fallback if the first two options are not found.

Finally, the Priority4FileName property simply reverts to the "_Default.mp4" video file if no platform-specific video file is found. That pretty much sums it up; let me know if anything isn't working or if you have any questions.

[Retro808]

 

@Jason Carr Thank you for this. I was stuck and it was getting irritating trying to figure this out. At least it is good to know as I read more I started down basically the path you showed here. So at least I was finally heading the right way with the code versus when I first started it.

[Jason Carr]

2 minutes ago, Retro808 said:

 

@Jason Carr Thank you for this. I was stuck and it was getting irritating trying to figure this out. At least it is good to know as I read more I started down basically the path you showed here. So at least I was finally heading the right way with the code versus when I first started it.

Sorry it took me a bit to respond, Retro.

[Jason Carr]

FYI all, @Retro808 discovered an issue where the video hitches up and doesn't play properly in the startup themes. I am able to reproduce as well on my slower machines. I have it on my plate to dive in to see if there's anything I can do to fix it.

[Jason Carr]

@Retro808 I just put out beta 8, which should fix the video hitching issues with the startup themes. We should be all good now with the above solution.

[Retro808]

@Jason Carr I can confirm the new beta fixed the video play issues I was having. There is one issue still present. The audio keeps looping in the background even after the emulator takes over. I have to close LB completely to clear the audio.

[Jason Carr]

3 minutes ago, Retro808 said:

@Jason Carr I can confirm the new beta fixed the video play issues I was having. There is one issue still present. The audio keeps looping in the background even after the emulator takes over. I have to close LB completely to clear the audio.

Wow, that's strange; I haven't seen that. What is your video playback engine set to in Big Box?

[Retro808]

1 minute ago, Jason Carr said:

Wow, that's strange; I haven't seen that. What is your video playback engine set to in Big Box?

VLC. Tested both on VLC and Window Media. Same effect. Both in LB and BB.

[Jason Carr]

22 hours ago, Retro808 said:

VLC. Tested both on VLC and Window Media. Same effect. Both in LB and BB.

Alright, I think I have it fixed for the next beta. It's actually a way more complicated issue to solve than you would think, as it's not always cut and dry knowing when the game is loaded. We'll see how beta 10 fares. Should be out shortly.

[Retro808]

@Jason Carr Update 10 is a huge improvement. So far in some emulators I only get about 1 sec of audio overlap. Retroarch seems to be hit and miss depending on core and how fast the emulator takes control. But it is only 1 second of additional audio heard and then no issues. Thank you for working on this. 

[Jason Carr]

3 hours ago, Retro808 said:

@Jason Carr Update 10 is a huge improvement. So far in some emulators I only get about 1 sec of audio overlap. Retroarch seems to be hit and miss depending on core and how fast the emulator takes control. But it is only 1 second of additional audio heard and then no issues. Thank you for working on this. 

That might be the best we can do, at least for this release. The problem is that we don't *exactly* know when the game starts, due to the nature of the startup screen solution with exclusive fullscreen support. It might be best for startup screen videos not to use audio anyways since the video can get cut off at any point once the game is loaded, and game startup times aren't exactly perfectly consistent between launches.

[Retro808]

Thanks @Jason Carr I agree. So I went and coded audio is mute in the theme and set it to true.

Will leave steps on how a user can change if they want the audio to play and leave a notice that there may be some audio overlap if they choose to do it. 

[Retro808]

@Jason Carr Does the prioritization work correctly for you? I am not seeing it play any video if I do not have a default video or any other related video in my theme's video folder. I just get a black screen. Or am I just misunderstanding how it should work? Does it pull only from the theme's folder or is Priorities 1-3 supposed to look in the platform and game specific folders as well?

[Jason Carr]

17 minutes ago, Retro808 said:

@Jason Carr Does the prioritization work correctly for you? I am not seeing it play any video if I do not have a default video or any other related video in my theme's video folder. I just get a black screen. Or am I just misunderstanding how it should work? Does it pull only from the theme's folder or is Priorities 1-3 supposed to look in the platform and game specific folders as well?

The PrioritizedPathSelector control will pull only from the folder specified by the FolderPath property, and no other folders. So I'm guessing that's what you're running into?

[Retro808]

1 minute ago, Jason Carr said:

The PrioritizedPathSelector control will pull only from the folder specified by the FolderPath property, and no other folders. So I'm guessing that's what you're running into?

Thanks Jason. That is what I figured it was. But last night I was testing a theme and got to wondering if it maybe pulled from the other folder as well. 

[Jason Carr]

1 minute ago, Retro808 said:

Thanks Jason. That is what I figured it was. But last night I was testing a theme and got to wondering if it maybe pulled from the other folder as well. 

Gotcha. Yeah, I never even thought of that while making that control lol. I can see that being useful though.

[Retro808]

6 minutes ago, Jason Carr said:

Gotcha. Yeah, I never even thought of that while making that control lol. I can see that being useful though.

Thanks Jason. I can work with what we have for now. I was mainly testing some things out to see what I can do. 

[launchretrogirl2562]

On 3/22/2019 at 1:47 AM, Retro808 said:

@Jason Carr I can confirm the new beta fixed the video play issues I was having. There is one issue still present. The audio keeps looping in the background even after the emulator takes over. I have to close LB completely to clear the audio.

Hi Jason,

I was in the process of adjusting my theme to use moving marquees on top of my arcade cabinet.

I use the following in my wheelgames3 xaml

<!-- MARQUEE IMAGE -->    

            <controls:PrioritizedPathSelector x:Name="MarqueeVideoFileName" FolderPath="Themes\Unified &amp; Ultrawide\Media\marqueeVids" FileExtension=".mp4"
                Priority1FileName="{Binding SelectedGame.ApplicationFileNameWithoutExtension}"                    
                />                    
        <controls:VideoControl VideoPath="{Binding PrioritizedFilePath, ElementName=MarqueeVideoFileName}"
            StretchVideo="true" Grid.Column="1" Grid.ColumnSpan="3" Grid.RowSpan="1" CenterVideo="false" Panel.ZIndex="1" HorizontalAlignment="Center" VerticalAlignment="Top"
             />
             <TextBlock Grid.Column="1" Panel.ZIndex="2" Grid.ColumnSpan="4" Grid.RowSpan="1" Text="{Binding PrioritizedFilePath, ElementName=MarqueeVideoFileName}" Foreground="Orange" DockPanel.Dock="Left"  FontFamily="{StaticResource FontBebasNeue}" FontSize="50" TextAlignment="Left" />

With the textblock I just check to see if the path to my marquee vid is correct...which it is.

But my marquee just doesn't show.
When I however click through to the textgames view....and go back...then magically the marquee appears.
But never on the first go, and never while scrolling through the games in the wheelgamesview
The textblock shows the correct path to the vid each time I scroll through the wheel....but the marquee never loads. Only always when first going to the textgames view...and then back

I did include the reference in usercontrols :
xmlns:videos="clr-namespace:Unbroken.LaunchBox.Windows.BigBox.Controls;assembly=BigBox"

What could be the cause of this?

I am using the following theme

Example of marquees are attached

Edited 22 hours ago by launchretrogirl2562