Image/Video Background Refactor

CollapseLauncher/App.xaml

@@ -31,6 +31,14 @@
                 <ResourceDictionary Source="ms-appx:///XAMLs/Theme/CustomControls/UserFeedbackDialog/UserFeedbackDialog.xaml" />
                 <ResourceDictionary Source="ms-appx:///XAMLs/Theme/CustomControls/SocMedIconButton/SocMedIconButton.xaml" />
                 <ResourceDictionary Source="ms-appx:///XAMLs/Theme/CustomControls/FullPageOverlay/FullPageOverlay.xaml" />
+
+                <ResourceDictionary Source="ms-appx:///XAMLs/Theme/CustomControls/NewPipsPager/NewPipsPager_themeresources.xaml" />
+                <ResourceDictionary Source="ms-appx:///XAMLs/Theme/CustomControls/NewPipsPager/NewPipsPager.xaml" />
+
+                <ResourceDictionary Source="ms-appx:///XAMLs/Theme/CustomControls/PanelSlideshow/PanelSlideshow_themeresources.xaml" />
+                <ResourceDictionary Source="ms-appx:///XAMLs/Theme/CustomControls/PanelSlideshow/PanelSlideshow.xaml" />
+
+                <ResourceDictionary Source="ms-appx:///XAMLs/Theme/CustomControls/LayeredBackgroundImage/LayeredBackgroundImage.xaml" />
                 <ResourceDictionary>
                     <ResourceDictionary.ThemeDictionaries>
                         <ResourceDictionary x:Key="Default">

CollapseLauncher/Classes/AnimatedVisuals/Lottie/BindableThemeChangeAnimation.cs

@@ -0,0 +1,28 @@
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Media;
+
+#pragma warning disable IDE0130
+
+#nullable enable
+namespace CollapseLauncher.AnimatedVisuals.Lottie;
+
+public abstract class BindableThemeChangeAnimation : DependencyObject
+{
+    public Brush Foreground
+    {
+        get => (Brush)GetValue(ForegroundProperty);
+        set => SetValue(ForegroundProperty, value);
+    }
+
+    /// <summary>
+    /// Dependency property for Foreground.
+    /// </summary>
+    public static readonly DependencyProperty ForegroundProperty =
+        DependencyProperty.Register(nameof(Foreground), typeof(Brush), typeof(BindableThemeChangeAnimation),
+                                    new PropertyMetadata(null!, OnForegroundChanged));
+
+    protected static void OnForegroundChanged(DependencyObject d, DependencyPropertyChangedEventArgs args)
+        => ((BindableThemeChangeAnimation)d).OnForegroundChanged(args.NewValue as Brush);
+
+    protected abstract void OnForegroundChanged(Brush? brush);
+}

CollapseLauncher/Classes/AnimatedVisuals/Lottie/DownloadIcon.json

@@ -0,0 +1 @@
+{"v":"5.12.2","fr":60,"ip":0,"op":300,"w":256,"h":256,"nm":"DownloadIconMasterComp","ddd":0,"assets":[{"id":"comp_0","nm":"DownloadIcon","fr":60,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[360.517,-180.5],[0,180.017],[-360.517,-180.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":128,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":53,"s":[58.5]},{"t":83,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":53,"s":[58.5]},{"t":83,"s":[58.5]}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":53,"s":[-101.6]},{"t":83,"s":[0]}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":300,"st":-7,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,-459.501],[-459.501,0],[0,459.501],[0,0]],"o":[[0,0],[-459.501,0],[0,459.501],[459.501,0],[0,-459.501],[0,0]],"v":[[0,116],[0,-832],[-832,0],[0,832],[832,0],[515,-688]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":128,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[85.5]},{"t":60,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[85.5]},{"t":80,"s":[10]}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":30,"s":[0]},{"t":60,"s":[0]}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":300,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":3,"nm":"Null 1","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":50,"s":[128]},{"t":90,"s":[128]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[128.125]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":90,"s":[126.125]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":165,"s":[126.125]},{"i":{"x":[0.168],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":200,"s":[109.5]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":210,"s":[109.5]},{"t":255,"s":[293.75]}],"ix":4}},"a":{"a":0,"k":[50,50,0],"ix":1,"l":2},"s":{"a":0,"k":[12.5,12.5,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":300,"st":-10,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":260,"s":[100]},{"t":280,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":150,"s":[8]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":167,"s":[-8]},{"t":184,"s":[0]}],"ix":10},"p":{"s":true,"x":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":30,"s":[128]},{"t":70,"s":[128]}],"ix":3},"y":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[179.125]},{"i":{"x":[0.03],"y":[1]},"o":{"x":[0.157],"y":[0]},"t":70,"s":[179.125]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":167,"s":[179.125]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":188,"s":[197.125]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":210,"s":[197.125]},{"t":240,"s":[179.125]}],"ix":4}},"a":{"a":0,"k":[4,344,0],"ix":1,"l":2},"s":{"a":0,"k":[12.5,12.5,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-460,344],[468,344]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":128,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[0]},{"i":{"x":[0.586],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":70,"s":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":260,"s":[0]},{"t":280,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":70,"s":[100]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":260,"s":[100]},{"t":280,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":2,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":300,"st":-15,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"DownloadIcon","refId":"comp_0","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":260,"s":[100]},{"t":280,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":140,"s":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":150,"s":[-9]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":160,"s":[11]},{"t":179,"s":[0]}],"ix":10},"p":{"s":true,"x":{"a":0,"k":128,"ix":3},"y":{"a":0,"k":128,"ix":4}},"a":{"a":0,"k":[128,128,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":150,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[289.5,-24.5],[-42,-24.5],[-42,266.5],[289.5,266.5]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":189,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[289.5,-24.5],[-42,-24.5],[-42,191.5],[289.5,191.5]],"c":true}]},{"t":230,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[289.5,-24.5],[-42,-24.5],[-42,179],[289.5,179]],"c":true}]}],"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"w":256,"h":256,"ip":0,"op":300,"st":0,"bm":0}],"markers":[],"props":{}}