iptvnator/src/app/shared/components/header/header.component.html

<div class="logo">
    <img src="./assets/icons/icon-tv-256.png" height="100" />
</div>
<div class="main">
    <div class="title">{{ title }}</div>
    <div class="subtitle">{{ subtitle }}</div>
</div>
<div class="menu">
    <button
        mat-icon-button
        class="add-playlist-btn"
        [matMenuTriggerFor]="addPlaylistMenu"
        [matTooltip]="'HOME.URL_UPLOAD.ADD_PLAYLIST' | translate"
        data-test-id="add-playlist"
    >
        <mat-icon>add</mat-icon>
    </button>
    <!-- <button
        mat-icon-button
        [matTooltip]="'HOME.FILTER_BY_NAME' | translate"
        data-test-id="filter-playlist-by-name"
    >
        <mat-icon>search</mat-icon>
    </button> -->
    <button
        mat-icon-button
        [matMenuTriggerFor]="filterPlaylistMenu"
        [matTooltip]="'HOME.FILTER_BY_TYPE' | translate"
        data-test-id="filter-playlist-by-type"
    >
        <mat-icon>filter_list</mat-icon>
    </button>
    <button
        *ngIf="isElectron; else pwaMenu"
        mat-icon-button
        (click)="openSettings()"
        [matTooltip]="'MENU.SETTINGS' | translate"
        data-test-id="open-settings"
    >
        <mat-icon>settings</mat-icon>
    </button>

    <mat-menu #filterPlaylistMenu="matMenu">
        <section (click)="$event.stopPropagation()" class="filter-container">
            <h4>{{ 'HOME.FILTER_BY_TYPE' | translate }}:</h4>
            @for (type of playlistTypes; track $index) {
                <p>
                    <mat-checkbox
                        (click)="$event.stopPropagation()"
                        [checked]="true"
                        (change)="onPlaylistFilterChange()"
                        [(ngModel)]="type.checked"
                        >{{ type.title }}</mat-checkbox
                    >
                </p>
            }
        </section>
    </mat-menu>

    <mat-menu #addPlaylistMenu="matMenu">
        <button
            mat-menu-item
            [attr.aria-label]="'HOME.TABS.FILE_UPLOAD' | translate"
            (click)="opedAddPlaylistDialog('file')"
        >
            <mat-icon>attach_file</mat-icon>
            <span>{{ 'HOME.TABS.FILE_UPLOAD' | translate }}</span>
        </button>
        <button
            mat-menu-item
            [attr.aria-label]="'HOME.TABS.URL_UPLOAD' | translate"
            (click)="opedAddPlaylistDialog('url')"
        >
            <mat-icon>link</mat-icon>
            <span>{{ 'HOME.TABS.URL_UPLOAD' | translate }}</span>
        </button>

        <button
            mat-menu-item
            [attr.aria-label]="'HOME.TABS.TEXT_IMPORT' | translate"
            (click)="opedAddPlaylistDialog('text')"
        >
            <mat-icon>text_format</mat-icon>
            <span>{{ 'HOME.TABS.TEXT_IMPORT' | translate }}</span>
        </button>
        <mat-divider></mat-divider>
        <button
            mat-menu-item
            [attr.aria-label]="'HOME.TABS.XTREME_IMPORT' | translate"
            (click)="opedAddPlaylistDialog('xtream')"
        >
            <mat-icon>video_library</mat-icon>
            <span>{{ 'HOME.TABS.XTREME_IMPORT' | translate }}</span>
        </button>
        <button
            mat-menu-item
            [attr.aria-label]="'HOME.TABS.STALKER_PORTAL_IMPORT' | translate"
            (click)="opedAddPlaylistDialog('stalker')"
        >
            <mat-icon>dashboard</mat-icon>
            <span>{{ 'HOME.TABS.STALKER_PORTAL_IMPORT' | translate }}</span>
        </button>
    </mat-menu>
</div>

<ng-template #pwaMenu>
    <button
        mat-icon-button
        [matMenuTriggerFor]="menu"
        [attr.aria-label]="'MENU.OPEN' | translate"
    >
        <mat-icon>menu</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
        <ng-container *ngIf="isHome">
            <button
                mat-menu-item
                [attr.aria-label]="'MENU.SETTINGS_ARIA' | translate"
                (click)="openSettings()"
            >
                <mat-icon>settings</mat-icon>
                <span>{{ 'MENU.SETTINGS' | translate }}</span>
            </button>
            <mat-divider></mat-divider>
        </ng-container>
        <button
            mat-menu-item
            [attr.aria-label]="'MENU.SUPPORT_ARIA' | translate"
            (click)="openUrl('https:///github.com/4gray/iptvnator')"
        >
            <mat-icon>recommend</mat-icon>
            <span>GitHub</span>
        </button>
        <button
            mat-menu-item
            [attr.aria-label]="'MENU.BUG_REPORT' | translate"
            (click)="openUrl('https://github.com/4gray/iptvnator/issues')"
        >
            <mat-icon>bug_report</mat-icon>
            <span>{{ 'MENU.BUG_REPORT' | translate }}</span>
        </button>
        <mat-divider></mat-divider>
        <button
            mat-menu-item
            [attr.aria-label]="'MENU.WHAT_IS_NEW' | translate"
            (click)="setDialogVisibility(true)"
        >
            <mat-icon>new_releases</mat-icon>
            <span>{{ 'MENU.WHAT_IS_NEW' | translate }}</span>
        </button>
        <button
            mat-menu-item
            [attr.aria-label]="'MENU.ABOUT_ARIA' | translate"
            (click)="openAboutDialog()"
        >
            <mat-icon>info</mat-icon>
            <span>{{ 'MENU.ABOUT' | translate }}</span>
        </button>
    </mat-menu>
</ng-template>
<ngx-whats-new
    *ngIf="!isElectron && isDialogVisible$ | async"
    (closeModal)="setDialogVisibility(false)"
    [items]="modals"
    [options]="options"
>
</ngx-whats-new>