#373 Изменить дизайн плейлистов "Какой сейчас вайб"

MusicX/Controls/BlockControl.xaml

@@ -12,6 +12,7 @@
     xmlns:viewModels="clr-namespace:MusicX.ViewModels.Controls" xmlns:hc="https://handyorg.github.io/handycontrol"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
     ContentTemplateSelector="{DynamicResource BlockTemplateSelector}"
     mc:Ignorable="d">
 
@@ -68,6 +69,11 @@
         <DataTemplate x:Key="music_playlists_music_chart_large_slider" DataType="models:Block">
             <controls:ListPlaylists Content="{Binding Playlists}" ShowFull="False" />
         </DataTemplate>
+
+        <DataTemplate x:Key="music_playlists_crop_slider" DataType="models:Block">
+            <controls:ListPlaylists Content="{Binding Playlists}" IsCropped="True" />
+        </DataTemplate>
+
         <DataTemplate x:Key="music_playlists" DataType="models:Block">
             <controls:ListPlaylists Content="{Binding Playlists}" ShowFull="False" />
         </DataTemplate>

MusicX/Controls/CroppedPlaylistControl.xaml

@@ -0,0 +1,34 @@
+<UserControl x:Class="MusicX.Controls.CroppedPlaylistControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:local="clr-namespace:MusicX.Controls"
+             Loaded="UserControl_Loaded"
+             Unloaded="UserControl_Unloaded"
+                 xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
+
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+        <Border Cursor="Hand" MouseLeftButtonDown="OpenFullPlaylist" CornerRadius="10" Height="60"  Width="300" ClipToBounds="True">
+
+            <Grid ClipToBounds="True">
+
+                <Image Stretch="UniformToFill" Source="{Binding Cover, UpdateSourceTrigger=PropertyChanged}">
+                    <Image.Clip>
+                        <RectangleGeometry Rect="0,0,300,60" RadiusX="10" RadiusY="10"/>
+                    </Image.Clip>
+                </Image>
+
+                <TextBlock HorizontalAlignment="Left" Margin="10,0,0,0" FontSize="19" VerticalAlignment="Center" FontFamily="{StaticResource VKSansMedium}" Text="{Binding Title, UpdateSourceTrigger=PropertyChanged}"/>
+
+                <Border MouseLeftButtonDown="PlayPlaylist" Background="White" MouseEnter="Border_MouseEnter" MouseLeave="Border_MouseLeave" Opacity="0.6" HorizontalAlignment="Right" CornerRadius="9999" Margin="0,0,10,0" Height="35"  Width="35">
+                    <ui:SymbolIcon x:Name="PlayIcon" HorizontalAlignment="Center" VerticalAlignment="Center" Symbol="Play24"/>
+                </Border>
+
+            </Grid>
+
+        </Border>
+    </Grid>
+</UserControl>

MusicX/Controls/CroppedPlaylistControl.xaml.cs

@@ -0,0 +1,172 @@
+using Microsoft.AppCenter.Analytics;
+using Microsoft.AppCenter.Crashes;
+using Microsoft.Extensions.DependencyInjection;
+using MusicX.Core.Models;
+using MusicX.Core.Services;
+using MusicX.Services;
+using MusicX.Services.Player.Playlists;
+using MusicX.Services.Player;
+using MusicX.Views;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Windows;
+using System.Windows.Controls;
+using Wpf.Ui.Controls;
+using System;
+
+namespace MusicX.Controls
+{
+    /// <summary>
+    /// Логика взаимодействия для CroppedPlaylistControl.xaml
+    /// </summary>
+    public partial class CroppedPlaylistControl : UserControl
+    {
+
+        public static readonly DependencyProperty TitleProperty =
+        DependencyProperty.Register("Title", typeof(string), typeof(CroppedPlaylistControl), new PropertyMetadata(string.Empty));
+
+        public string Title
+        {
+            get { return (string)GetValue(TitleProperty); }
+            set
+            {
+                SetValue(TitleProperty, value);
+            }
+        }
+
+        public static readonly DependencyProperty CoverProperty =
+        DependencyProperty.Register("Cover", typeof(string), typeof(CroppedPlaylistControl), new PropertyMetadata(string.Empty));
+
+        public string Cover
+        {
+            get { return (string)GetValue(CoverProperty); }
+            set
+            {
+                SetValue(CoverProperty, value);
+            }
+        }
+
+        public static readonly DependencyProperty PlaylistProperty =
+          DependencyProperty.Register("Playlist", typeof(Playlist), typeof(CroppedPlaylistControl), new PropertyMetadata(new Playlist()));
+
+        public Playlist Playlist
+        {
+            get { return (Playlist)GetValue(PlaylistProperty); }
+            set
+            {
+                SetValue(PlaylistProperty, value);
+            }
+        }
+
+        public CroppedPlaylistControl()
+        {
+            InitializeComponent();
+        }
+
+        private bool _nowPlay = false;
+
+        private void Border_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
+        {
+            if(sender is Border border)
+            {
+                border.Opacity = 1;
+            }
+        }
+
+        private void Border_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
+        {
+            if (sender is Border border)
+            {
+                border.Opacity = 0.6;
+            }
+        }
+
+        private void OpenFullPlaylist(object sender, System.Windows.Input.MouseButtonEventArgs e)
+        {
+            var notificationService = StaticService.Container.GetRequiredService<NavigationService>();
+
+            notificationService.OpenExternalPage(new PlaylistView(Playlist));
+        }
+
+        private async void PlayPlaylist(object sender, System.Windows.Input.MouseButtonEventArgs e)
+        {
+            e.Handled = true;
+            try
+            {
+                var properties = new Dictionary<string, string>
+                {
+#if DEBUG
+                    { "IsDebug", "True" },
+#endif
+                    {"Version", StaticService.Version }
+                };
+                Analytics.TrackEvent("PlayPlaylistWithButton", properties);
+
+                var playerService = StaticService.Container.GetRequiredService<PlayerService>();
+
+                if (!_nowPlay)
+                {
+                    _nowPlay = true;
+
+                    PlayIcon.Symbol = SymbolRegular.Timer24;
+                    var vkService = StaticService.Container.GetRequiredService<VkService>();
+
+                    await playerService.PlayAsync(
+                        new VkPlaylistPlaylist(vkService, new(Playlist.Id, Playlist.OwnerId, Playlist.AccessKey)));
+
+                    PlayIcon.Symbol = SymbolRegular.Pause24;
+
+                }
+                else
+                {
+                    playerService.Pause();
+                    PlayIcon.Symbol = SymbolRegular.Play24;
+
+                    _nowPlay = false;
+                }
+            }
+            catch (Exception ex)
+            {
+
+                var properties = new Dictionary<string, string>
+                {
+#if DEBUG
+                    { "IsDebug", "True" },
+#endif
+                    {"Version", StaticService.Version }
+                };
+                Crashes.TrackError(ex, properties);
+            }
+        }
+
+        private void UserControl_Loaded(object sender, RoutedEventArgs e)
+        {
+            var player = StaticService.Container.GetRequiredService<PlayerService>();
+            player.CurrentPlaylistChanged += PlayerOnCurrentPlaylistChanged;
+        }
+
+        private void UserControl_Unloaded(object sender, RoutedEventArgs e)
+        {
+            var player = StaticService.Container.GetRequiredService<PlayerService>();
+            player.CurrentPlaylistChanged -= PlayerOnCurrentPlaylistChanged;
+        }
+
+        private void PlayerOnCurrentPlaylistChanged(object? sender, EventArgs e)
+        {
+            if (sender is not PlayerService service)
+                return;
+
+            if (service.CurrentPlaylist is VkPlaylistPlaylist { Data: { } data } && data.PlaylistId == Playlist.Id)
+            {
+                _nowPlay = true;
+                PlayIcon.Symbol = SymbolRegular.Pause24;
+            }
+            else
+            {
+                _nowPlay = false;
+                PlayIcon.Symbol = SymbolRegular.Play24;
+            }
+        }
+
+    }
+}

MusicX/Controls/ListPlaylists.xaml

@@ -22,7 +22,11 @@
             <DataTemplate DataType="{x:Type models:Playlist}" x:Key="PlaylistTemplate">
                 <local:PlaylistControl Margin="5,0" Width="200" Playlist="{Binding}" ShowFull="False" />
             </DataTemplate>
-
+
+            <DataTemplate DataType="{x:Type models:Playlist}" x:Key="CroppedPlaylistTemplate">
+                <local:CroppedPlaylistControl Margin="5,0" Playlist="{Binding}" Title="{Binding Title}" Cover="{Binding Cover}"/>
+            </DataTemplate>
+
             <ItemsPanelTemplate x:Key="FullPlaylistPanelTemplate">
                 <ui:VirtualizingWrapPanel Orientation="Vertical" IsItemsHost="True" 
                                           IsVirtualizing="{TemplateBinding VirtualizingPanel.IsVirtualizing}" 
@@ -52,6 +56,12 @@
                                 <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
                                 <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
                             </DataTrigger>
+                            <DataTrigger Binding="{Binding IsCropped, ElementName=Control}" Value="True">
+                                <Setter Property="ItemsPanel" Value="{StaticResource PlaylistPanelTemplate}"/>
+                                <Setter Property="ItemTemplate" Value="{StaticResource CroppedPlaylistTemplate}"/>
+                                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+                                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
+                            </DataTrigger>
                         </Style.Triggers>
                     </Style>
                 </ui:ListView.Style>

MusicX/Controls/ListPlaylists.xaml.cs

@@ -22,5 +22,14 @@ public bool ShowFull
             get => (bool)GetValue(ShowFullProperty);
             set => SetValue(ShowFullProperty, value);
         }
+
+        public static readonly DependencyProperty IsCroppedProperty = DependencyProperty.Register(
+           nameof(IsCropped), typeof(bool), typeof(ListPlaylists));
+
+        public bool IsCropped
+        {
+            get => (bool)GetValue(IsCroppedProperty);
+            set => SetValue(IsCroppedProperty, value);
+        }
     }
 }