Add Shorts look preview and visual crop editor

Show opening/closing 9:16 stills from the same filtergraph, and let
users drag a keep-region on a source frame to fill the crop insets.
This commit is contained in:
2026-08-15 21:08:36 +02:00
parent 8a734d58d9
commit 323324d713
9 changed files with 958 additions and 12 deletions
+82 -2
View File
@@ -5,6 +5,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:AmiReel.Controls"
mc:Ignorable="d">
<Grid x:Name="RootGrid" Padding="20" RowSpacing="16" Background="{ThemeResource PageBrush}">
@@ -87,7 +88,12 @@
</Grid>
<Border Grid.Row="1" Padding="18" Style="{StaticResource CardBorderStyle}" x:Name="ShortsContentPanel" Visibility="Collapsed">
<StackPanel Spacing="14">
<Grid ColumnSpacing="18">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Spacing="14">
<StackPanel Spacing="4">
<TextBlock x:Name="ShortWizardTitleText" Text="Source clip" Style="{StaticResource SectionTitleStyle}" />
<TextBlock x:Name="ShortWizardStepText" Text="Step 1 of 4" Style="{StaticResource MutedTextStyle}" />
@@ -207,7 +213,7 @@
<ComboBoxItem Content="Auto (remove left/right black borders)" Tag="Auto" />
<ComboBoxItem Content="Center 4:3" Tag="Center" />
</ComboBox>
<TextBlock Text="Manual crop overrides auto/center. Leave at 0 to use the mode above."
<TextBlock Text="Manual crop overrides auto/center. Leave at 0 to use the mode above, or drag the kept region on a source frame."
Style="{StaticResource MutedTextStyle}" TextWrapping="WrapWholeWords" />
<Grid ColumnSpacing="10">
<Grid.ColumnDefinitions>
@@ -225,6 +231,12 @@
<TextBox x:Name="ShortCropBottomBox" Grid.Column="3" Header="Crop bottom" Text="0"
AutomationProperties.Name="Crop bottom pixels" />
</Grid>
<Button x:Name="OpenCropEditorButton"
Content="Crop visually..."
Click="OpenCropEditor_Click"
HorizontalAlignment="Left"
AutomationProperties.Name="Open visual crop editor"
AutomationProperties.AutomationId="OpenCropEditorButton" />
</StackPanel>
</StackPanel>
@@ -284,6 +296,56 @@
<TextBlock x:Name="ShortSummaryText" Text="" Style="{StaticResource MutedTextStyle}" TextWrapping="WrapWholeWords" />
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="1" Width="308" Spacing="10">
<TextBlock Text="Preview" Style="{StaticResource SectionTitleStyle}" />
<TextBlock x:Name="ShortPreviewStatusText"
Text="Pick a source clip, then update the preview to see the 9:16 look."
Style="{StaticResource MutedTextStyle}"
TextWrapping="WrapWholeWords" />
<Button x:Name="UpdateShortPreviewButton"
Content="Update preview"
Click="UpdateShortPreview_Click"
HorizontalAlignment="Stretch"
AutomationProperties.Name="Update short preview"
AutomationProperties.AutomationId="UpdateShortPreviewButton" />
<ProgressBar x:Name="ShortPreviewProgress"
IsIndeterminate="True"
Height="6"
Visibility="Collapsed"
AutomationProperties.Name="Preview progress" />
<Grid ColumnSpacing="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Spacing="6">
<TextBlock Text="Opening" Style="{StaticResource MutedTextStyle}" />
<Border Width="148" Height="263"
Background="{ThemeResource PageBrush}"
BorderBrush="{ThemeResource BorderBrush}"
BorderThickness="1"
CornerRadius="8">
<Image x:Name="ShortPreviewOpeningImage"
Stretch="Uniform"
AutomationProperties.Name="Opening hook preview" />
</Border>
</StackPanel>
<StackPanel Grid.Column="1" Spacing="6">
<TextBlock Text="Closing" Style="{StaticResource MutedTextStyle}" />
<Border Width="148" Height="263"
Background="{ThemeResource PageBrush}"
BorderBrush="{ThemeResource BorderBrush}"
BorderThickness="1"
CornerRadius="8">
<Image x:Name="ShortPreviewClosingImage"
Stretch="Uniform"
AutomationProperties.Name="Closing title-card preview" />
</Border>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</Border>
<Border x:Name="RenderProgressPanel"
@@ -352,6 +414,24 @@
</StackPanel>
</Grid>
<ContentDialog x:Name="CropEditorDialog"
Title="Crop source"
PrimaryButtonText="Use this crop"
CloseButtonText="Cancel"
DefaultButton="Primary"
Background="{ThemeResource PanelBrush}"
Foreground="{ThemeResource TextBrush}"
BorderBrush="{ThemeResource HeroBorderBrush}"
BorderThickness="1.5"
CornerRadius="18"
PrimaryButtonStyle="{StaticResource DialogPrimaryButtonStyle}"
CloseButtonStyle="{StaticResource DialogCloseButtonStyle}">
<ContentDialog.Resources>
<x:Double x:Key="ContentDialogMaxWidth">920</x:Double>
</ContentDialog.Resources>
<controls:SourceCropEditor x:Name="ShortCropEditor" />
</ContentDialog>
<ContentDialog x:Name="SettingsDialog"
Title="Settings"
PrimaryButtonText="Done"