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

<mat-toolbar>
    <div class="logo">
        <img
            src="./assets/icons/icon-tv-256.png"
            height="100"
            alt="iptvnator logo"
        />
    </div>
    <div class="main">
        <div class="title">{{ title() }}</div>
        <div class="subtitle">{{ subtitle() }}</div>
    </div>
    @if (isHome) {
        <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>
            <!-- Sort button -->
            <button
                mat-icon-button
                [matMenuTriggerFor]="sortMenu"
                [matTooltip]="'HOME.SORT_PLAYLISTS' | translate"
                data-test-id="sort-playlists"
            >
                <mat-icon>sort</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_alt</mat-icon>
            </button>
            @if (isDesktop) {
                <button
                    mat-icon-button
                    (click)="openSettings()"
                    [matTooltip]="'MENU.SETTINGS' | translate"
                    data-test-id="open-settings"
                >
                    <mat-icon>settings</mat-icon>
                </button>
            } @else {
                <button
                    mat-icon-button
                    [matMenuTriggerFor]="menu"
                    [attr.aria-label]="'MENU.OPEN' | translate"
                    data-test-id="pwa-menu"
                >
                    <mat-icon>menu</mat-icon>
                </button>
                <mat-menu #menu="matMenu">
                    @if (isHome) {
                        <button
                            mat-menu-item
                            [attr.aria-label]="'MENU.SETTINGS_ARIA' | translate"
                            (click)="openSettings()"
                            data-test-id="pwa-open-settings"
                        >
                            <mat-icon>settings</mat-icon>
                            <span>{{ 'MENU.SETTINGS' | translate }}</span>
                        </button>
                        <mat-divider></mat-divider>
                    }
                    <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 />
                    <button
                        mat-menu-item
                        [attr.aria-label]="'MENU.SUPPORT_PROJECT' | translate"
                        (click)="openUrl('https://github.com/sponsors/4gray')"
                    >
                        <mat-icon>savings</mat-icon>
                        <span>{{ 'MENU.SUPPORT_PROJECT' | translate }}</span>
                    </button>
                    <mat-divider></mat-divider>
                    <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>
            }
            <!-- Sort menu -->
            <mat-menu #sortMenu="matMenu">
                <div
                    class="dropdown-menu-header"
                    (click)="$event.stopPropagation()"
                >
                    {{ 'HOME.SORT_BY' | translate }}
                </div>
                <button
                    mat-menu-item
                    (click)="setSortOptions(SortBy.NAME, SortOrder.ASC)"
                    [class.active-sort]="
                        isSortActive(SortBy.NAME, SortOrder.ASC)
                    "
                >
                    <mat-icon>sort_by_alpha</mat-icon>
                    <span>{{ 'HOME.SORT_OPTIONS.NAME_ASC' | translate }}</span>
                </button>
                <button
                    mat-menu-item
                    (click)="setSortOptions(SortBy.NAME, SortOrder.DESC)"
                    [class.active-sort]="
                        isSortActive(SortBy.NAME, SortOrder.DESC)
                    "
                >
                    <mat-icon>sort_by_alpha</mat-icon>
                    <span>{{ 'HOME.SORT_OPTIONS.NAME_DESC' | translate }}</span>
                </button>
                <mat-divider></mat-divider>
                <button
                    mat-menu-item
                    (click)="setSortOptions(SortBy.DATE_ADDED, SortOrder.DESC)"
                    [class.active-sort]="
                        isSortActive(SortBy.DATE_ADDED, SortOrder.DESC)
                    "
                >
                    <mat-icon>date_range</mat-icon>
                    <span>{{ 'HOME.SORT_OPTIONS.NEWEST' | translate }}</span>
                </button>
                <button
                    mat-menu-item
                    (click)="setSortOptions(SortBy.DATE_ADDED, SortOrder.ASC)"
                    [class.active-sort]="
                        isSortActive(SortBy.DATE_ADDED, SortOrder.ASC)
                    "
                >
                    <mat-icon>date_range</mat-icon>
                    <span>{{ 'HOME.SORT_OPTIONS.OLDEST' | translate }}</span>
                </button>
            </mat-menu>
            <mat-menu #filterPlaylistMenu="matMenu">
                <section
                    (click)="$event.stopPropagation()"
                    class="filter-container"
                >
                    <div
                        class="dropdown-menu-header"
                        (click)="$event.stopPropagation()"
                    >
                        {{ 'HOME.FILTER_BY_TYPE' | translate }}
                    </div>
                    @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>
    }
</mat-toolbar>