[DRAFT] [dev-v5] Migrate fluentcx lottieplayer

examples/demo/FluentUI.Demo.Client/Documentation/Components/LottiePlayer/Examples/LottiePlayerDefault.razor

@@ -0,0 +1,34 @@
+<div style="height: 400px">
+    <FluentStack Orientation="Orientation.Vertical">
+
+        <FluentSelect Items="@Sources"
+                       TOption="LootieFile"
+                       @bind-Value="Source"
+                       Placeholder="Select a Lottie Animation"
+                       Style="margin-bottom: 20px;"
+                       OptionText="@(e => e.Name)"
+                       OptionValue="@(e => e.Url)" />
+
+
+        <FluentStack VerticalAlignment="VerticalAlignment.Center"
+                 HorizontalAlignment="HorizontalAlignment.Center">
+            <FluentCxLottiePlayer Source="@Source?.Url"
+                                  Width="300px"
+                                  Height="300px"
+                                  Loop="true"
+                                  Autoplay="true" />
+        </FluentStack>
+    </FluentStack>
+</div>
+
+@code {
+    private record LootieFile(string Name, string Url);
+
+    private static readonly List<LootieFile> Sources = [
+        new("Trophy", "https://assets10.lottiefiles.com/packages/lf20_touohxv0.json"),
+        new("Book1", "https://lottie.host/6918cb79-0097-427d-9e33-763c70a8090e/fdfBQynp6I.json"),
+        new("Book2", "https://lottie.host/3204b079-1565-4c21-8965-fbe96b9d09ab/c4azoY9oBc.json")
+    ];
+
+    private LootieFile? Source{ get; set; }
+}

examples/demo/FluentUI.Demo.Client/Documentation/Components/LottiePlayer/Examples/LottiePlayerWithControls.razor

@@ -0,0 +1,10 @@
+<div style="height: 400px">
+    <FluentStack VerticalAlignment="VerticalAlignment.Center" HorizontalAlignment="HorizontalAlignment.Center">
+        <FluentCxLottiePlayer Source="https://assets2.lottiefiles.com/packages/lf20_touohxv0.json"
+                              Width="300px"
+                              Height="300px"
+                              Loop="true">
+            <LottieControls />
+        </FluentCxLottiePlayer>
+    </FluentStack>
+</div>

examples/demo/FluentUI.Demo.Client/Documentation/Components/LottiePlayer/LottiePlayer.md

@@ -0,0 +1,24 @@
+---
+title: Lottie Player
+icon: Play
+route: /LottiePlayer
+---
+
+# Lottie Player
+
+  The <code>FluentCxLottiePlayer</code> component allows you to easily integrate Lottie animations into your Blazor applications.
+    The component supports various customization options, including setting the animation source, dimensions, playback controls, and interactivity features.
+    The <code>FluentCxLottieProvider</code> is required to use the <code>FluentCxLottie</code> component and should be added once in your application, typically in the MainLayout.
+    There are 3 renderers available: <code>Svg</code>, <code>Canvas</code> and <code>Html</code>. By default, the <code>Svg</code> renderer is used.
+
+## Examples
+
+{{ LottiePlayerDefault }}
+
+{{ LottiePlayerWithControls }}
+
+
+
+## API Lottie Player
+
+{{ API Type=LottiePlayer }}

examples/demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor

@@ -116,6 +116,8 @@
 
 </FluentLayout>
 
+<FluentCxLootiePlayerProvider />
 <!-- FluentUI Service Providers -->
 <FluentProviders />
 
+

src/Core/Components/LottiePlayer/FluentCxLootiePlayerProvider.razor

@@ -0,0 +1,31 @@
+@namespace FluentUI.Blazor.Community.Components
+@inherits FluentComponentBase
+
+<HeadContent>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.13.0/lottie.min.js"></script>
+</HeadContent>
+
+@code {
+    public FluentCxLootiePlayerProvider(LibraryConfiguration libraryConfiguration)
+        : base(libraryConfiguration)
+    {
+    }
+
+    [Inject]
+    private LottieState State { get; set; } = default!;
+
+    /// <inheritdoc />
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        State.Register();
+    }
+
+    /// <inheritdoc />
+    public override ValueTask DisposeAsync()
+    {
+        State.Unregister();
+
+        return base.DisposeAsync();
+    }
+}

src/Core/Components/LottiePlayer/FluentCxLottiePlayer.razor

@@ -0,0 +1,13 @@
+@namespace FluentUI.Blazor.Community.Components
+@inherits FluentComponentBase
+
+<CascadingValue Value="this">
+    <div id="lottie-container">
+        <div id="@Id"
+             style="@InternalStyle"
+             class="@InternalCss">
+        </div>
+
+        @ChildContent
+    </div>
+</CascadingValue>