using Tizen.NUI.Components;\r
using Tizen.NUI.BaseComponents;\r
using Tizen.NUI;\r
+using Tizen.NUI.Binding;\r
using MusicPlayer.Common;\r
\r
namespace MusicPlayer.Views\r
private TextLabel titleLabel;\r
private TextLabel subtitleLabel;\r
private ImageView icon;\r
+ private bool isAnimating = false;\r
+\r
+ public static readonly BindableProperty IsPlayingProperty = BindableProperty.Create(nameof(IsPlaying), typeof(bool), typeof(ListItemLayout), false, propertyChanged: (bindable, oldValue, newValue) =>\r
+ {\r
+ var instance = (ListItemLayout)bindable;\r
+ if (newValue != null)\r
+ {\r
+ bool newPlaying = (bool)newValue;\r
+ bool oldPlaying = (bool)oldValue;\r
+ if (oldPlaying != newPlaying)\r
+ {\r
+ instance.UpdateItem(newPlaying);\r
+ }\r
+ }\r
+ },\r
+ defaultValueCreator: (bindable) => ((ListItemLayout)bindable).isPlaying);\r
\r
public ListItemLayout(int width = 1792, int height = 108) : base()\r
{\r
base.OnInitialize();\r
- base.IsCreateByXaml = true;\r
Width = width;\r
Height = height;\r
WidthSpecification = Width;\r
icon = new ImageView()\r
{\r
Size2D = new Size2D(IconSize, IconSize),\r
- IsCreateByXaml = true,\r
Position2D = new Position2D(x, ((Height / 2) - (IconSize / 2))),\r
};\r
base.Add(icon);\r
\r
titleLabel = new TextLabel()\r
{\r
- StyleName = "ItemLabel",\r
- ThemeChangeSensitive = true,\r
Size2D = new Size2D((Width - (2 * LeftPadding) - IconSize - LayoutPadding), 40),\r
PixelSize = 32,\r
FontFamily = "BreezeSans",\r
\r
subtitleLabel = new TextLabel()\r
{\r
- StyleName = "ItemLabel",\r
- ThemeChangeSensitive = true,\r
Size2D = new Size2D((Width - (2 * LeftPadding) - IconSize - LayoutPadding), 36),\r
PixelSize = 28,\r
FontFamily = "BreezeSans",\r
};\r
subtitleLabel.FontStyle = UIFontStyles.AllNormal;\r
base.Add(subtitleLabel);\r
- IsCreateByXaml = true;\r
+ UpdateLabelColors();\r
+ ThemeManager.ThemeChanged += OnThemeUpdated;\r
}\r
public ImageView Icon\r
{\r
get => subtitleLabel;\r
}\r
\r
+ private bool isPlaying = false;\r
+\r
+ public bool IsPlaying\r
+ {\r
+ get => (bool)GetValue(IsPlayingProperty);\r
+ set => SetValue(IsPlayingProperty, value);\r
+ }\r
+\r
protected override void Dispose(DisposeTypes type)\r
{\r
if(Disposed)\r
itemSeperator?.Dispose();\r
itemSeperator = null;\r
\r
+ RemoveAnimation();\r
base.Remove(icon);\r
icon?.Dispose();\r
icon = null;\r
\r
base.Dispose(type);\r
}\r
+\r
+ private void UpdateItem(bool currentValue)\r
+ {\r
+ if(currentValue)\r
+ {\r
+ Tizen.Log.Error(AppConstants.LogTag, "Adding animation and setting highlight color");\r
+ if(titleLabel != null && subtitleLabel != null)\r
+ {\r
+ titleLabel.TextColor = UIColors.HEX1473E6;\r
+ subtitleLabel.TextColor = UIColors.HEX1473E6;\r
+ }\r
+ if(isAnimating == false)\r
+ {\r
+ isAnimating = AddAnimation();\r
+ }\r
+ }\r
+ else\r
+ {\r
+ Tizen.Log.Error(AppConstants.LogTag, "Remove animation and setting normal color");\r
+ UpdateLabelColors();\r
+ if(isAnimating)\r
+ {\r
+ RemoveAnimation();\r
+ isAnimating = false;\r
+ }\r
+ }\r
+ isPlaying = currentValue;\r
+ }\r
+\r
+ private void OnThemeUpdated(object sender, ThemeChangedEventArgs e)\r
+ {\r
+ if(e.IsPlatformThemeChanged && IsPlaying == false)\r
+ {\r
+ UpdateLabelColors();\r
+ }\r
+ }\r
+\r
+ private void UpdateLabelColors()\r
+ {\r
+ string currentPlatformThemeId = ThemeManager.PlatformThemeId;\r
+ if (currentPlatformThemeId.Equals(AppConstants.LightPlatformThemeId))\r
+ {\r
+ if(titleLabel != null && subtitleLabel != null)\r
+ {\r
+ titleLabel.TextColor = UIColors.HEX001447;\r
+ subtitleLabel.TextColor = UIColors.HEX001447;\r
+ }\r
+ }\r
+ else if(currentPlatformThemeId.Equals(AppConstants.DarkPlatformThemeId))\r
+ {\r
+ if(titleLabel != null && subtitleLabel != null)\r
+ {\r
+ titleLabel.TextColor = Color.White;\r
+ subtitleLabel.TextColor = Color.White;\r
+ }\r
+ }\r
+ }\r
+\r
+ private bool AddAnimation()\r
+ {\r
+ if(icon == null)\r
+ {\r
+ return false;\r
+ }\r
+ LottieAnimationView lottieAnimationView = new LottieAnimationView();\r
+ if(lottieAnimationView == null)\r
+ {\r
+ return false;\r
+ }\r
+ lottieAnimationView.URL = Resources.GetImagePath() + "now_playing_opacity.json";\r
+ lottieAnimationView.LoopCount = -1;\r
+ icon.Add(lottieAnimationView);\r
+ lottieAnimationView.Play();\r
+ return true;\r
+ }\r
+ private void RemoveAnimation()\r
+ {\r
+ if(icon != null)\r
+ {\r
+ View child = icon.GetChildAt(0);\r
+ if (child != null && child is LottieAnimationView)\r
+ {\r
+ icon.Remove(child);\r
+ LottieAnimationView lottieAnimationView = child as LottieAnimationView;\r
+ lottieAnimationView.Stop();\r
+ lottieAnimationView.Dispose();\r
+ }\r
+ }\r
+ }\r
}\r
}\r
--- /dev/null
+{"v":"5.5.8","fr":60,"ip":0,"op":180,"w":64,"h":64,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"1/Now playing_1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[10.875,32,0],"ix":2},"a":{"a":0,"k":[2.5,11.5,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100,100,100],"e":[100,75.556,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":32,"s":[100,75.556,100],"e":[100,142.325,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":78,"s":[100,142.325,100],"e":[100,43.333,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":125,"s":[100,43.333,100],"e":[100,100,100]},{"t":179}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[2,11],[-2,11],[-2,-11],[2,-11]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.25,11.25],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"2/Now playing_1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[21.625,32,0],"ix":2},"a":{"a":0,"k":[2.5,9.5,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100,100,100],"e":[100,156.757,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":32,"s":[100,156.757,100],"e":[100,68.68,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":78,"s":[100,68.68,100],"e":[100,206.757,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":125,"s":[100,206.757,100],"e":[100,100,100]},{"t":179}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[2,9],[-2,9],[-2,-9],[2,-9]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.25,9.25],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"3/Now playing_1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[33,32,0],"ix":2},"a":{"a":0,"k":[2.5,17.5,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100,100,100],"e":[100,71.014,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":32,"s":[100,71.014,100],"e":[100,109.542,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":78,"s":[100,109.542,100],"e":[100,63.043,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":125,"s":[100,63.043,100],"e":[100,100,100]},{"t":179}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[2,17],[-2,17],[-2,-17],[2,-17]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.25,17.25],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"4/Now playing_1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[42.875,32,0],"ix":2},"a":{"a":0,"k":[2.5,11.5,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100,100,100],"e":[100,73.333,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":32,"s":[100,73.333,100],"e":[100,142.334,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":78,"s":[100,142.334,100],"e":[100,30,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":125,"s":[100,30,100],"e":[100,100,100]},{"t":179}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[2,11],[-2,11],[-2,-11],[2,-11]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.25,11.25],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"5/Now playing_1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[52.875,32,0],"ix":2},"a":{"a":0,"k":[2.5,8.5,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":0,"s":[100,100,100],"e":[100,168.182,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":32,"s":[100,168.182,100],"e":[100,85.32,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":78,"s":[100,85.32,100],"e":[100,266.667,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":125,"s":[100,266.667,100],"e":[100,100,100]},{"t":179}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[2,8],[-2,8],[-2,-8],[2,-8]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.25,8.25],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"bg/Now playing_1 Outlines","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[32,32,0],"ix":2},"a":{"a":0,"k":[32.5,32.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-32,32],[32,32],[32,-32],[-32,-32]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.16862745098,0.372549019608,0.725490196078,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[32.25,32.25],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file