Skip to content

Add indicators to cards (played, favorites, progress, etc #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dfederm merged 1 commit into from
Mar 9, 2026
Merged

Add indicators to cards (played, favorites, progress, etc #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/JellyBox/Glyphs.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,7 @@ internal static class Glyphs
// Favorites
public const string HeartOutline = "\uEB51";
public const string HeartFilled = "\uEB52";

// Indicators
public const string Checkmark = "\uE73E";
}
19 changes: 19 additions & 0 deletions src/JellyBox/Models/Card.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
using System.Globalization;
using System.Windows.Input;
using JellyBox.Services;

Expand All @@ -22,4 +23,22 @@ internal sealed record Card : INavigable
public required JellyfinImage Image { get; init; }

public required ICommand NavigateCommand { get; init; }

public bool IsFavorite { get; init; }

public bool IsPlayed { get; init; }

public double PlayedPercentage { get; init; }

public int UnplayedItemCount { get; init; }

public bool HasProgress => PlayedPercentage > 0 && !IsPlayed;

public bool ShowPlayedIndicator => IsPlayed && UnplayedItemCount == 0;

public bool ShowUnplayedCount => UnplayedItemCount > 0;

public string UnplayedCountText => UnplayedItemCount >= 100 ? "99+" : UnplayedItemCount.ToString(CultureInfo.InvariantCulture);

public double ProgressWidth => ImageWidth * PlayedPercentage / 100.0;
}
4 changes: 4 additions & 0 deletions src/JellyBox/Models/CardFactory.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,10 @@ public Card CreateFromItem(
ImageHeight = imageHeight,
Image = image,
NavigateCommand = new RelayCommand(() => _navigationManager.NavigateToItem(item)),
IsFavorite = item.UserData?.IsFavorite ?? false,
IsPlayed = item.UserData?.Played ?? false,
PlayedPercentage = item.UserData?.PlayedPercentage ?? 0,
UnplayedItemCount = item.UserData?.UnplayedItemCount ?? 0,
};
}

Expand Down
3 changes: 3 additions & 0 deletions src/JellyBox/Resources/Styles.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@
<SolidColorBrush x:Key="SurfaceSecondaryHover" Color="#3A3A3A" />
<SolidColorBrush x:Key="FocusBorder" Color="#FFFFFF" />
<SolidColorBrush x:Key="OverlayBackground" Color="#CC000000" />
<SolidColorBrush x:Key="CardIndicatorBackground" Color="#CC000000" />
<SolidColorBrush x:Key="FavoriteColor" Color="#E91E63" />
<SolidColorBrush x:Key="ProgressTrackBackground" Color="#40000000" />

<!-- TV-Optimized Font Sizes (10-foot UI) -->
<x:Double x:Key="FontXS">16</x:Double>
Expand Down
82 changes: 77 additions & 5 deletions src/JellyBox/Resources/Templates.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,83 @@
<Border
CornerRadius="{StaticResource CardCornerRadius}"
Background="{StaticResource BackgroundCard}">
<controls:LazyLoadedImage
ImageUri="{x:Bind Image.Uri}"
BlurHash="{x:Bind Image.BlurHash}"
Width="{x:Bind ImageWidth}"
Height="{x:Bind ImageHeight}" />
<Grid>
<controls:LazyLoadedImage
ImageUri="{x:Bind Image.Uri}"
BlurHash="{x:Bind Image.BlurHash}"
Width="{x:Bind ImageWidth}"
Height="{x:Bind ImageHeight}" />

<!-- Favorite indicator (top-left) -->
<Border
Visibility="{x:Bind IsFavorite}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="6"
Background="{StaticResource CardIndicatorBackground}"
CornerRadius="12"
Width="24"
Height="24">
<FontIcon
FontFamily="{StaticResource SegoeIcons}"
Glyph="&#xEB52;"
FontSize="14"
Foreground="{StaticResource FavoriteColor}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>

<!-- Played indicator (top-right) -->
<Border
Visibility="{x:Bind ShowPlayedIndicator}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="6"
Background="{StaticResource CardIndicatorBackground}"
CornerRadius="12"
Width="24"
Height="24">
<FontIcon
FontFamily="{StaticResource SegoeIcons}"
Glyph="&#xE73E;"
FontSize="14"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>

<!-- Unplayed count indicator (top-right) -->
<Border
Visibility="{x:Bind ShowUnplayedCount}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="6"
Background="{StaticResource AccentColor}"
CornerRadius="12"
MinWidth="24"
Height="24"
Padding="6,0">
<TextBlock
Text="{x:Bind UnplayedCountText}"
FontSize="12"
FontWeight="Bold"
Foreground="White"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>

<!-- Progress bar (bottom) -->
<Grid
Visibility="{x:Bind HasProgress}"
Height="4"
VerticalAlignment="Bottom">
<Rectangle Fill="{StaticResource ProgressTrackBackground}" />
<Rectangle
Fill="{StaticResource AccentColor}"
HorizontalAlignment="Left"
Width="{x:Bind ProgressWidth}" />
</Grid>
</Grid>
</Border>
<TextBlock
Grid.Row="1"
Expand Down