- show episodes section in about anime in a grid view

- using binding in selector bar behavior
insomniachi · Jun 17, 2024 · bc5c825 · bc5c825
1 parent a9b2ff9
commit bc5c825
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 61 deletions.
diff --git a/Totoro.Core/ViewModels/AboutAnimeViewModel.cs b/Totoro.Core/ViewModels/AboutAnimeViewModel.cs
@@ -7,8 +7,6 @@ namespace Totoro.Core.ViewModels;
 
 public class AboutAnimeViewModel : NavigatableViewModel
 {
-    private readonly SourceList<PivotItemModel> _sectionsList = new();
-    private readonly ReadOnlyObservableCollection<PivotItemModel> _sections;
 
     public ObservableCollection<PivotItemModel> Pages { get; }
 
@@ -19,45 +17,39 @@ public AboutAnimeViewModel(IAnimeServiceContext animeService,
                                ISimklService simklService,
                                IEpisodesInfoProvider episodesInfoProvider)
     {
-        _sectionsList
-            .Connect()
-            .RefCount()
-            .AutoRefresh(x => x.Visible)
-            .Filter(x => x.Visible)
-            .Bind(out _sections)
-            .Subscribe()
-            .DisposeWith(Garbage);
-
-        _sectionsList.Add(new PivotItemModel
-        {
-            Header = "Previews",
-            ViewModel = typeof(PreviewsViewModel)
-        });
-        _sectionsList.Add(new PivotItemModel
-        {
-            Header = "Episodes",
-            ViewModel = typeof(AnimeEpisodesViewModel)
-        });
-        _sectionsList.Add(new PivotItemModel
-        {
-            Header = "Related",
-            ViewModel = typeof(AnimeCardListViewModel),
-        });
-        _sectionsList.Add(new PivotItemModel
-        {
-            Header = "Recommended",
-            ViewModel = typeof(AnimeCardListViewModel),
-        });
-        _sectionsList.Add(new PivotItemModel
-        {
-            Header = "OST",
-            ViewModel = typeof(OriginalSoundTracksViewModel),
-        });
-        _sectionsList.Add(new PivotItemModel
-        {
-            Header = "Torrents",
-            ViewModel = typeof(AnimeEpisodesTorrentViewModel)
-        });
+        Sections = new(
+            [
+                new PivotItemModel
+                {
+                    Header = "Previews",
+                    ViewModel = typeof(PreviewsViewModel)
+                },
+                new PivotItemModel
+                {
+                    Header = "Episodes",
+                    ViewModel = typeof(AnimeEpisodesViewModel)
+                },
+                new PivotItemModel
+                {
+                    Header = "Related",
+                    ViewModel = typeof(AnimeCardListViewModel),
+                },
+                new PivotItemModel
+                {
+                    Header = "Recommended",
+                    ViewModel = typeof(AnimeCardListViewModel),
+                },
+                new PivotItemModel
+                {
+                    Header = "OST",
+                    ViewModel = typeof(OriginalSoundTracksViewModel),
+                },
+                new PivotItemModel
+                {
+                    Header = "Torrents",
+                    ViewModel = typeof(AnimeEpisodesTorrentViewModel)
+                }
+            ]);
 
         ListType = settings.DefaultListService;
         if (PluginFactory<AnimeProvider>.Instance.Plugins.FirstOrDefault(x => x.Name == settings.DefaultProviderType) is { } provider)
@@ -70,15 +62,16 @@ public AboutAnimeViewModel(IAnimeServiceContext animeService,
             .ObserveOn(RxApp.MainThreadScheduler)
             .Subscribe(async anime =>
             {
-                var previewsItem = _sectionsList.Items.ElementAt(0);
-                var episodesItem = _sectionsList.Items.ElementAt(1);
-                var relatedItem = _sectionsList.Items.ElementAt(2);
-                var recommendedItem = _sectionsList.Items.ElementAt(3);
-                var ostsItem = _sectionsList.Items.ElementAt(4);
-                var torrentsItem = _sectionsList.Items.ElementAt(5);
                 var sounds = animeSoundService.GetThemes(anime.Id);
                 var episodes = await episodesInfoProvider.GetEpisodeInfos(anime.Id, GetServiceName(settings.DefaultListService)).ToListAsync();
 
+                var previewsItem = Sections[0];
+                var episodesItem = Sections[1];
+                var relatedItem = Sections[2];
+                var recommendedItem = Sections[3];
+                var ostsItem = Sections[4];
+                var torrentsItem = Sections[5];
+
                 if (episodes.FirstOrDefault() is { EpisodeNumber: > 1 } first)
                 {
                     var offset = first.EpisodeNumber - 1;
@@ -133,10 +126,12 @@ public AboutAnimeViewModel(IAnimeServiceContext animeService,
                 if (episodes is not { Count: > 0 })
                 {
                     episodesItem.Visible = false;
+                    torrentsItem.Visible = false;
                 }
 
                 SelectedSection = null;
                 SelectedSection = Sections.FirstOrDefault();
+                IsLoading = false;
             });
 
         this.ObservableForProperty(x => x.Id, x => x)
@@ -147,7 +142,6 @@ public AboutAnimeViewModel(IAnimeServiceContext animeService,
             .Subscribe(x =>
             {
                 Anime = x;
-                IsLoading = false;
             }, RxApp.DefaultExceptionHandler.OnError);
 
         this.WhenAnyValue(x => x.Anime)
@@ -194,7 +188,7 @@ public AboutAnimeViewModel(IAnimeServiceContext animeService,
     [ObservableAsProperty] public bool CanWatch { get; }
     [ObservableAsProperty] public bool HasTracking { get; }
 
-    public ReadOnlyObservableCollection<PivotItemModel> Sections => _sections;
+    public ReadOnlyObservableCollection<PivotItemModel> Sections { get; }
     public string DefaultProviderType { get; }
     public ListServiceType ListType { get; }
 

diff --git a/Totoro.WinUI/Behaviors/SelectorBarBehavior.cs b/Totoro.WinUI/Behaviors/SelectorBarBehavior.cs
@@ -1,5 +1,6 @@
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Data;
 using Microsoft.Xaml.Interactivity;
 using ReactiveMarbles.ObservableEvents;
 using Totoro.Core.ViewModels;
@@ -35,13 +36,22 @@ protected override void OnAttached()
             .Subscribe(values =>
             {
                 AssociatedObject.Items.Clear();
-                foreach (var item in values.Where(x => x.Visible))
+                foreach (var item in values)
                 {
-                    AssociatedObject.Items.Add(new SelectorBarItem
+                    var barItem = new SelectorBarItem
                     {
                         Text = item.Header,
-                        FontSize = 20
+                        FontSize = 20,
+                    };
+
+                    barItem.SetBinding(UIElement.VisibilityProperty, new Binding
+                    {
+                        Source = item,
+                        Path = new PropertyPath(nameof(item.Visible)),
+                        Mode = BindingMode.OneWay
                     });
+
+                    AssociatedObject.Items.Add(barItem);
                 }
 
                 if (SelectedItem is null)

diff --git a/Totoro.WinUI/Views/AboutSections/EpisodesSection.xaml b/Totoro.WinUI/Views/AboutSections/EpisodesSection.xaml
@@ -31,20 +31,27 @@
                         <ctk:ConstrainedBox AspectRatio="16:9">
                             <uc:ImageEx Source="{x:Bind Image}"
                                         Stretch="UniformToFill" 
-                                        Width="360"
+                                        Height="240"
+                                        Width="427"
                                         PlaceholderSource="/Assets/placeholder.jpg"
                                         PlaceholderStretch="Fill"/>
                         </ctk:ConstrainedBox>
 
-                        <StackPanel Grid.Column="1" Padding="10" Spacing="5">
+                        <Grid Grid.Column="1" Padding="10">
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition Height="*"/>
+                            </Grid.RowDefinitions>
                             <TextBlock Style="{ThemeResource SubtitleTextBlockStyle}"
                                        Margin="0 0 0 8">
-                                <Run Text="Episode" Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
-                                <Run Text="{x:Bind EpisodeNumber}" Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
-                                <Run Text=":" Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
+                                <Run Text="Episode" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
+                                <Run Text="{x:Bind EpisodeNumber}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
+                                <Run Text=":" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
                                 <Run Text="{x:Bind Titles.English}"/>
                             </TextBlock>
-                            <StackPanel Orientation="Horizontal" Spacing="5" Margin="0 0 0 8">
+                            <StackPanel Orientation="Horizontal" Spacing="5" Margin="0 0 0 8"
+                                        Grid.Row="1">
                                 <SymbolIcon Symbol="CalendarDay"/>
                                 <TextBlock Text="{x:Bind AirDate}" Margin="0 0 16 0"/>
                                 <SymbolIcon Symbol="Clock"/>
@@ -53,14 +60,19 @@
                                     <Run Text="Min"/>
                                 </TextBlock>
                             </StackPanel>
-                            <TextBlock Text="{x:Bind Overview}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="WrapWholeWords"/>
-                        </StackPanel>
+                            <ScrollView Grid.Row="2">
+                                <TextBlock Text="{x:Bind Overview}" Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="WrapWholeWords"/>
+                            </ScrollView>
+                        </Grid>
                     </Grid>
                 </ItemContainer>
             </DataTemplate>
         </ItemsView.ItemTemplate>
         <ItemsView.Layout>
-            <StackLayout Spacing="10"/>
+            <UniformGridLayout ItemsStretch="Fill" 
+                               MinColumnSpacing="10"
+                               MinRowSpacing="10"
+                               MinItemWidth="1000"/>
         </ItemsView.Layout>
     </ItemsView>