From: aman.jeph Date: Fri, 12 Nov 2021 09:19:58 +0000 (+0530) Subject: Adding Current playing track highlights X-Git-Tag: submit/tizen/20211125.074930~2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=938fa082d74e4d580455d6cebe5d6bb61a97ba6d;p=profile%2Fiot%2Fapps%2Fdotnet%2Fmusic-player.git Adding Current playing track highlights Change-Id: I104070e6c27eb0b2bce287b0354a8b7ff9fe3900 Signed-off-by: aman.jeph --- diff --git a/music-player/Models/Track.cs b/music-player/Models/Track.cs index bf15a36..982f6f5 100755 --- a/music-player/Models/Track.cs +++ b/music-player/Models/Track.cs @@ -114,5 +114,13 @@ namespace MusicPlayer.Models get => isSelected; set => SetProperty(ref isSelected, value); } + + private bool isPlaying; + + public bool IsPlaying + { + get => isPlaying; + set => SetProperty(ref isPlaying, value); + } } } diff --git a/music-player/ViewModels/PlayerViewModel.cs b/music-player/ViewModels/PlayerViewModel.cs index a07a247..43760ce 100755 --- a/music-player/ViewModels/PlayerViewModel.cs +++ b/music-player/ViewModels/PlayerViewModel.cs @@ -129,6 +129,7 @@ namespace MusicPlayer.ViewModels public void SetCurrentTrack(Track track) { Tizen.Log.Info(AppConstants.LogTag, "Setting Current track"); + UpdateCurrentPlayingTrack(track); playerModel.CurrentTrack = track; lyricsViewModel.CurrentTrack = track; //TO DO need to set index properly @@ -317,6 +318,19 @@ namespace MusicPlayer.ViewModels return new PlaylistSelectorViewModel(trackList); } + private void UpdateCurrentPlayingTrack(Track newTrack) + { + Track oldTrack = playerModel.CurrentTrack; + if(oldTrack != null) + { + oldTrack.IsPlaying = false; + } + if (newTrack != null) + { + newTrack.IsPlaying = true; + } + } + private void UpdatePlayingStatus(PlayingStatus status) { playingStatus = status; diff --git a/music-player/Views/ListItemLayout.cs b/music-player/Views/ListItemLayout.cs index bafe14a..982cdd6 100755 --- a/music-player/Views/ListItemLayout.cs +++ b/music-player/Views/ListItemLayout.cs @@ -1,6 +1,7 @@ using Tizen.NUI.Components; using Tizen.NUI.BaseComponents; using Tizen.NUI; +using Tizen.NUI.Binding; using MusicPlayer.Common; namespace MusicPlayer.Views @@ -21,11 +22,26 @@ namespace MusicPlayer.Views private TextLabel titleLabel; private TextLabel subtitleLabel; private ImageView icon; + private bool isAnimating = false; + + public static readonly BindableProperty IsPlayingProperty = BindableProperty.Create(nameof(IsPlaying), typeof(bool), typeof(ListItemLayout), false, propertyChanged: (bindable, oldValue, newValue) => + { + var instance = (ListItemLayout)bindable; + if (newValue != null) + { + bool newPlaying = (bool)newValue; + bool oldPlaying = (bool)oldValue; + if (oldPlaying != newPlaying) + { + instance.UpdateItem(newPlaying); + } + } + }, + defaultValueCreator: (bindable) => ((ListItemLayout)bindable).isPlaying); public ListItemLayout(int width = 1792, int height = 108) : base() { base.OnInitialize(); - base.IsCreateByXaml = true; Width = width; Height = height; WidthSpecification = Width; @@ -37,7 +53,6 @@ namespace MusicPlayer.Views icon = new ImageView() { Size2D = new Size2D(IconSize, IconSize), - IsCreateByXaml = true, Position2D = new Position2D(x, ((Height / 2) - (IconSize / 2))), }; base.Add(icon); @@ -53,8 +68,6 @@ namespace MusicPlayer.Views titleLabel = new TextLabel() { - StyleName = "ItemLabel", - ThemeChangeSensitive = true, Size2D = new Size2D((Width - (2 * LeftPadding) - IconSize - LayoutPadding), 40), PixelSize = 32, FontFamily = "BreezeSans", @@ -66,8 +79,6 @@ namespace MusicPlayer.Views subtitleLabel = new TextLabel() { - StyleName = "ItemLabel", - ThemeChangeSensitive = true, Size2D = new Size2D((Width - (2 * LeftPadding) - IconSize - LayoutPadding), 36), PixelSize = 28, FontFamily = "BreezeSans", @@ -76,7 +87,8 @@ namespace MusicPlayer.Views }; subtitleLabel.FontStyle = UIFontStyles.AllNormal; base.Add(subtitleLabel); - IsCreateByXaml = true; + UpdateLabelColors(); + ThemeManager.ThemeChanged += OnThemeUpdated; } public ImageView Icon { @@ -91,6 +103,14 @@ namespace MusicPlayer.Views get => subtitleLabel; } + private bool isPlaying = false; + + public bool IsPlaying + { + get => (bool)GetValue(IsPlayingProperty); + set => SetValue(IsPlayingProperty, value); + } + protected override void Dispose(DisposeTypes type) { if(Disposed) @@ -103,6 +123,7 @@ namespace MusicPlayer.Views itemSeperator?.Dispose(); itemSeperator = null; + RemoveAnimation(); base.Remove(icon); icon?.Dispose(); icon = null; @@ -118,5 +139,94 @@ namespace MusicPlayer.Views base.Dispose(type); } + + private void UpdateItem(bool currentValue) + { + if(currentValue) + { + Tizen.Log.Error(AppConstants.LogTag, "Adding animation and setting highlight color"); + if(titleLabel != null && subtitleLabel != null) + { + titleLabel.TextColor = UIColors.HEX1473E6; + subtitleLabel.TextColor = UIColors.HEX1473E6; + } + if(isAnimating == false) + { + isAnimating = AddAnimation(); + } + } + else + { + Tizen.Log.Error(AppConstants.LogTag, "Remove animation and setting normal color"); + UpdateLabelColors(); + if(isAnimating) + { + RemoveAnimation(); + isAnimating = false; + } + } + isPlaying = currentValue; + } + + private void OnThemeUpdated(object sender, ThemeChangedEventArgs e) + { + if(e.IsPlatformThemeChanged && IsPlaying == false) + { + UpdateLabelColors(); + } + } + + private void UpdateLabelColors() + { + string currentPlatformThemeId = ThemeManager.PlatformThemeId; + if (currentPlatformThemeId.Equals(AppConstants.LightPlatformThemeId)) + { + if(titleLabel != null && subtitleLabel != null) + { + titleLabel.TextColor = UIColors.HEX001447; + subtitleLabel.TextColor = UIColors.HEX001447; + } + } + else if(currentPlatformThemeId.Equals(AppConstants.DarkPlatformThemeId)) + { + if(titleLabel != null && subtitleLabel != null) + { + titleLabel.TextColor = Color.White; + subtitleLabel.TextColor = Color.White; + } + } + } + + private bool AddAnimation() + { + if(icon == null) + { + return false; + } + LottieAnimationView lottieAnimationView = new LottieAnimationView(); + if(lottieAnimationView == null) + { + return false; + } + lottieAnimationView.URL = Resources.GetImagePath() + "now_playing_opacity.json"; + lottieAnimationView.LoopCount = -1; + icon.Add(lottieAnimationView); + lottieAnimationView.Play(); + return true; + } + private void RemoveAnimation() + { + if(icon != null) + { + View child = icon.GetChildAt(0); + if (child != null && child is LottieAnimationView) + { + icon.Remove(child); + LottieAnimationView lottieAnimationView = child as LottieAnimationView; + lottieAnimationView.Stop(); + lottieAnimationView.Dispose(); + } + } + } } } diff --git a/music-player/Views/PlayingListView.cs b/music-player/Views/PlayingListView.cs index 91443bb..8124b77 100755 --- a/music-player/Views/PlayingListView.cs +++ b/music-player/Views/PlayingListView.cs @@ -30,6 +30,7 @@ namespace MusicPlayer.Views layout.Icon.SetBinding(ImageView.ResourceUrlProperty, "ThumbnailPath"); layout.TitleLabel.SetBinding(TextLabel.TextProperty, "TrackTitle"); layout.SubtitleLabel.SetBinding(TextLabel.TextProperty, "ArtistName"); + layout.SetBinding(ListItemLayout.IsPlayingProperty, "IsPlaying"); return layout; }), ScrollingDirection = ScrollableBase.Direction.Vertical, diff --git a/music-player/res/images/now_playing_opacity.json b/music-player/res/images/now_playing_opacity.json new file mode 100755 index 0000000..78e2a65 --- /dev/null +++ b/music-player/res/images/now_playing_opacity.json @@ -0,0 +1 @@ +{"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 diff --git a/packaging/org.tizen.MusicPlayer-1.0.0.tpk b/packaging/org.tizen.MusicPlayer-1.0.0.tpk index 3fe6e47..454cb85 100755 Binary files a/packaging/org.tizen.MusicPlayer-1.0.0.tpk and b/packaging/org.tizen.MusicPlayer-1.0.0.tpk differ