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

style(settings): add EPG sources handling and UI enhancements

Browse Source 
Entire-Checkpoint: c6e522b4276c
This commit is contained in:
4gray committed 2026-04-25 22:39:55 +02:00
1 parent 4616df5d16
commit e53a25f441
21 files changed
+265 -82
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/web/src/app/settings/settings.component.html
+103 -65
View File
@@ -232,7 +232,7 @@
formControlName="player"
data-test-id="select-video-player"
>
@for (player of players; track player) {
@for (player of players(); track player.id) {
<mat-option
[value]="player.id"
[attr.data-test-id]="player.id"
@@ -419,70 +419,96 @@
<div class="setting-item setting-item--full-control">
<div class="setting-item__control">
<ng-container formArrayName="epgUrl">
<div class="epg-sources">
@for (
_ of epgUrl.controls;
track _;
let i = $index
) {
<div class="epg-source-row">
<mat-form-field
appearance="outline"
subscriptSizing="dynamic"
class="w-full"
>
<mat-label>{{
'SETTINGS.EPG_URL_PLACEHOLDER'
| translate
}}</mat-label>
<input
matInput
type="url"
[formControlName]="i"
#epgField
/>
<mat-error>{{
'SETTINGS.EPG_URL_ERROR'
| translate
}}</mat-error>
</mat-form-field>
@if (epgField.value) {
<app-epg-source-status
[url]="epgField.value"
/>
}
<button
mat-icon-button
color="accent"
[matTooltip]="
'SETTINGS.REFRESH_EPG'
| translate
"
type="button"
[disabled]="
epgField.value === ''
"
(click)="
refreshEpg(epgUrl.value[i])
"
>
<mat-icon>refresh</mat-icon>
</button>
<button
mat-icon-button
color="accent"
[matTooltip]="
'SETTINGS.REMOVE_EPG_SOURCE'
| translate
"
type="button"
(click)="removeEpgSource(i)"
>
<mat-icon>remove</mat-icon>
</button>
</div>
}
</div>
@if (epgUrl.length === 0) {
<div
class="epg-sources-empty"
data-test-id="epg-sources-empty"
>
<mat-icon
class="epg-sources-empty__icon"
>event_busy</mat-icon
>
<h4 class="epg-sources-empty__title">
{{
'SETTINGS.EPG_EMPTY_TITLE'
| translate
}}
</h4>
<p class="epg-sources-empty__hint">
{{
'SETTINGS.EPG_EMPTY_HINT'
| translate
}}
</p>
</div>
} @else {
<div class="epg-sources">
@for (
_ of epgUrl.controls;
track _;
let i = $index
) {
<div class="epg-source-row">
<mat-form-field
appearance="outline"
subscriptSizing="dynamic"
class="w-full"
>
<mat-label>{{
'SETTINGS.EPG_URL_PLACEHOLDER'
| translate
}}</mat-label>
<input
matInput
type="url"
[formControlName]="i"
#epgField
/>
<mat-error>{{
'SETTINGS.EPG_URL_ERROR'
| translate
}}</mat-error>
</mat-form-field>
@if (epgField.value) {
<app-epg-source-status
[url]="epgField.value"
/>
}
<button
mat-icon-button
color="accent"
[matTooltip]="
'SETTINGS.REFRESH_EPG'
| translate
"
type="button"
[disabled]="
epgField.value === ''
"
(click)="
refreshEpg(
epgUrl.value[i]
)
"
>
<mat-icon>refresh</mat-icon>
</button>
<button
mat-icon-button
color="accent"
[matTooltip]="
'SETTINGS.REMOVE_EPG_SOURCE'
| translate
"
type="button"
(click)="removeEpgSource(i)"
>
<mat-icon>remove</mat-icon>
</button>
</div>
}
</div>
}
</ng-container>
</div>
</div>
@@ -909,6 +935,18 @@
</div>
</div>
@if (isDesktop) {
<div class="settings-note">
<strong>{{
'SETTINGS.EMBEDDED_MPV_NOTICE_TITLE' | translate
}}</strong>
<span>{{
'SETTINGS.EMBEDDED_MPV_NOTICE_DESCRIPTION'
| translate
}}</span>
</div>
}
<div class="setting-item setting-item--full-control">
<div class="setting-item__meta">
<h4>{{ 'SETTINGS.COMMUNITY' | translate }}</h4>