x15904151985/iptvnator
1
0 Fork 0
mirror of https://github.com/4gray/iptvnator.git synced 2026-10-08 17:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

feat(recent-playlists): show auto-refresh indicator on playlist items

Browse Source 
Add a compact auto-refresh icon to playlist items to indicate when a
playlist has auto-refresh enabled. Move existing upload-type icons into
an .icon-container so the auto-refresh indicator can be positioned
absolutely beside them.

- Add .auto-refresh-indicator styles to position and size the indicator,
  match colors, and center the icon.
- Wrap mat-icon elements in .icon-container and render an additional
  mat-icon when item.autoRefresh is true for URL and file playlists.
- Keep tooltips for the auto-refresh icon to explain its meaning.

This improves UX by making auto-refresh state visible at a glance.
This commit is contained in:
4gray committed 2025-11-11 08:23:27 +01:00
1 parent 2ae7e730ad
commit a06c642eef
2 files changed
+45 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.html
+30 -14
View File
@@ -1,21 +1,37 @@
<mat-list-item (click)="playlistClicked.emit(item._id)">
@if (item.url) {
<mat-icon
matListItemIcon
class="upload-type-icon"
[matTooltip]="
('HOME.PLAYLISTS.ADDED_VIA_URL' | translate) + ' ' + item.url
"
>cloud</mat-icon
>
<div class="icon-container" matListItemIcon>
<mat-icon
class="upload-type-icon"
[matTooltip]="
('HOME.PLAYLISTS.ADDED_VIA_URL' | translate) + ' ' + item.url
"
>cloud</mat-icon
>
@if (item.autoRefresh) {
<mat-icon
class="auto-refresh-indicator"
[matTooltip]="'HOME.PLAYLISTS.AUTO_REFRESH_ENABLED' | translate"
>autorenew</mat-icon
>
}
</div>
}
@if (!item.url && !item.serverUrl && !item.macAddress) {
<mat-icon
matListItemIcon
class="upload-type-icon"
[matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
>folder</mat-icon
>
<div class="icon-container" matListItemIcon>
<mat-icon
class="upload-type-icon"
[matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
>folder</mat-icon
>
@if (item.autoRefresh) {
<mat-icon
class="auto-refresh-indicator"
[matTooltip]="'HOME.PLAYLISTS.AUTO_REFRESH_ENABLED' | translate"
>autorenew</mat-icon
>
}
</div>
}
@if (item.serverUrl) {
<div class="icon-container" matListItemIcon>
libs/ui/components/src/lib/recent-playlists/playlist-item/playlist-item.component.scss
+15
View File
@@ -84,6 +84,21 @@ mat-list-item {
background-color: #444444;
}
.auto-refresh-indicator {
position: absolute;
right: -2px;
bottom: -2px;
font-size: 14px !important;
width: 14px !important;
height: 14px !important;
color: #4caf50;
background-color: var(--background-color, #fff);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 480px) {
.upload-type-icon,
.icon-container {