From 45af52c1dec2c63d8b0234daab1b16d3ec903cdd Mon Sep 17 00:00:00 2001
From: Andrii Borziak <aborziak@microsoft.com>
Date: Fri, 20 Aug 2021 17:20:14 -0700
Subject: [PATCH] UI Markers improvement

---
 LottieViewer/MainPage.xaml                    |  5 +-
 LottieViewer/MainPage.xaml.cs                 |  4 +-
 LottieViewer/PropertiesTemplateSelector.cs    |  6 +--
 .../LottieVisualDiagnosticsViewModel.cs       | 52 +++++++++++++++++++
 4 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/LottieViewer/MainPage.xaml b/LottieViewer/MainPage.xaml
index d18e58dc..dbdd03f9 100644
--- a/LottieViewer/MainPage.xaml
+++ b/LottieViewer/MainPage.xaml
@@ -261,8 +261,9 @@
                                     <DataTemplate x:Key="MarkerWithDurationTemplate" x:DataType="viewmodel:MarkerWithDuration">
                                         <StackPanel Orientation="Horizontal" Margin="0,0,0,2" MaxWidth="310">
                                             <TextBlock Foreground="White" TextAlignment="Right" TextWrapping="Wrap" MaxWidth="250" MinWidth="60" Padding="0,0,12,0">
-                                                <Hyperlink Foreground="{StaticResource LottieHyperlinkForegroundBrush}" Click="MarkerClick"><Run Text="{x:Bind InFrame}"/></Hyperlink> -
-                                                <Hyperlink Foreground="{StaticResource LottieHyperlinkForegroundBrush}" Click="MarkerEndClick"><Run Text="{x:Bind OutFrame}"/></Hyperlink>
+                                                <Hyperlink Foreground="{StaticResource LottieHyperlinkForegroundBrush}" Click="MarkerWithDurationClick">
+                                                    <Run Text="{x:Bind InFrame}"/>-<Run Text="{x:Bind OutFrame}"/>
+                                                </Hyperlink>
                                             </TextBlock>
                                             <TextBlock Foreground="White" TextWrapping="Wrap" Text="{x:Bind Name}"/>
                                         </StackPanel>
diff --git a/LottieViewer/MainPage.xaml.cs b/LottieViewer/MainPage.xaml.cs
index 8f99e70c..37eefefd 100644
--- a/LottieViewer/MainPage.xaml.cs
+++ b/LottieViewer/MainPage.xaml.cs
@@ -433,11 +433,11 @@ void MarkerClick(Hyperlink sender, HyperlinkClickEventArgs args)
         }
 
         // Called when the user clicks on a marker-with-duration hyperlink.
-        void MarkerEndClick(Hyperlink sender, HyperlinkClickEventArgs args)
+        void MarkerWithDurationClick(Hyperlink sender, HyperlinkClickEventArgs args)
         {
             var dataContext = ((FrameworkElement)sender.ElementStart.Parent).DataContext;
             var marker = (MarkerWithDuration)dataContext;
-            SeekToProgressValue(marker.ConstrainedOutProgress);
+            _ = _stage.Player?.PlayAsync(marker.ConstrainedInProgress, marker.ConstrainedOutProgress, looped: true);
         }
 
         // Sets the progress to the given value, and sets the focus to the scrubber
diff --git a/LottieViewer/PropertiesTemplateSelector.cs b/LottieViewer/PropertiesTemplateSelector.cs
index fadbb6b9..3ac65a9d 100644
--- a/LottieViewer/PropertiesTemplateSelector.cs
+++ b/LottieViewer/PropertiesTemplateSelector.cs
@@ -24,13 +24,13 @@ public sealed class PropertiesTemplateSelector : DataTemplateSelector
             {
                 return Normal;
             }
-            else if (item is Marker)
+            else if (item is MarkerWithDuration)
             {
-                return Marker;
+                return MarkerWithDuration;
             }
             else
             {
-                return MarkerWithDuration;
+                return Marker;
             }
         }
     }
diff --git a/LottieViewer/ViewModel/LottieVisualDiagnosticsViewModel.cs b/LottieViewer/ViewModel/LottieVisualDiagnosticsViewModel.cs
index f40b4a83..a48ce367 100644
--- a/LottieViewer/ViewModel/LottieVisualDiagnosticsViewModel.cs
+++ b/LottieViewer/ViewModel/LottieVisualDiagnosticsViewModel.cs
@@ -5,6 +5,7 @@
 #nullable enable
 
 using System;
+using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.ComponentModel;
 using System.Linq;
@@ -68,8 +69,59 @@ public object? DiagnosticsObject
                         var totalFrames = framesPerSecond * duration;
 
                         var isFirst = true;
+
+                        var usedMarkers = new List<string>();
+
+                        // XAML AnimatedIcon uses NAME_Start -> NAME_End naming convention for markers.
+                        // It uses two markers to specify animation segment for some state.
+                        // This loop extracts matching pairs of markers of format NAME_Start and NAME_End
+                        // and transforms them to MarkerWithDuration object so that in UI it will be displayed as single segment.
+                        foreach (var startMarker in metadata.FilteredMarkers)
+                        {
+                            if (!startMarker.Name.EndsWith("_Start") || startMarker.Duration.Frames != 0)
+                            {
+                                continue;
+                            }
+
+                            foreach (var endMarker in metadata.FilteredMarkers)
+                            {
+                                if (!endMarker.Name.EndsWith("_End") || endMarker.Duration.Frames != 0)
+                                {
+                                    continue;
+                                }
+
+                                string namePrefix = endMarker.Name.Substring(0, endMarker.Name.Length - "_End".Length);
+
+                                if (startMarker.Name.StartsWith(namePrefix))
+                                {
+                                    usedMarkers.Add(startMarker.Name);
+                                    usedMarkers.Add(endMarker.Name);
+
+                                    var propertyName = isFirst ? $"Marker{(composition.Markers.Count > 1 ? "s" : string.Empty)}" : string.Empty;
+
+                                    var inProgress = startMarker.Frame.GetNudgedProgress(NudgeFrameProportion);
+                                    var outProgress = endMarker.Frame.GetNudgedProgress(NudgeFrameProportion);
+
+                                    Markers.Add(new MarkerWithDuration(
+                                        namePrefix,
+                                        propertyName,
+                                        (int)startMarker.Frame.Number,
+                                        inProgress,
+                                        (int)endMarker.Frame.Number,
+                                        outProgress));
+
+                                    isFirst = false;
+                                }
+                            }
+                        }
+
                         foreach (var m in metadata.FilteredMarkers)
                         {
+                            if (usedMarkers.Contains(m.Name))
+                            {
+                                continue;
+                            }
+
                             var inProgress = m.Frame.GetNudgedProgress(NudgeFrameProportion);
                             Marker marker;
                             var propertyName = isFirst ? $"Marker{(composition.Markers.Count > 1 ? "s" : string.Empty)}" : string.Empty;