style: update home view

src/app/home/home.component.scss

@@ -15,8 +15,6 @@
 .recent-playlists {
     height: calc(100vh - 106px);
     overflow: auto;
-    width: 100%;
-    display: block;
 }
 
 @media only screen and (max-width: 480px) {

src/app/home/recent-playlists/playlist-item/playlist-item.component.html

@@ -1,9 +1,9 @@
 <mat-list-item cdkDrag (click)="playlistClicked.emit(item._id)">
-    <mat-icon matListItemAvatar cdkDragHandle class="drag-icon"
+    <mat-icon matListItemIcon cdkDragHandle class="drag-icon"
         >drag_indicator</mat-icon
     >
     <mat-icon
-        matListItemAvatar
+        matListItemIcon
         class="upload-type-icon"
         *ngIf="item?.url"
         [matTooltip]="
@@ -12,21 +12,21 @@
         >cloud</mat-icon
     >
     <mat-icon
-        matListItemAvatar
+        matListItemIcon
         class="upload-type-icon"
         *ngIf="!item?.url && !item.serverUrl && !item.macAddress"
         [matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
         >folder</mat-icon
     >
     <mat-icon
-        matListItemAvatar
+        matListItemIcon
         class="upload-type-icon"
         *ngIf="item?.serverUrl"
         [matTooltip]="'HOME.PLAYLISTS.XTREAM_PLAYLIST' | translate"
         >public</mat-icon
     >
     <mat-icon
-        matListItemAvatar
+        matListItemIcon
         class="upload-type-icon"
         *ngIf="item?.macAddress"
         [matTooltip]="'HOME.PLAYLISTS.STALKER_PORTAL' | translate"
@@ -101,4 +101,3 @@
         </button>
     </span>
 </mat-list-item>
-<mat-divider />

src/app/home/recent-playlists/playlist-item/playlist-item.component.scss

@@ -14,8 +14,8 @@ mat-list-item {
 
 .cdk-drag-preview {
     box-sizing: border-box;
-    border-radius: 4px;
-    box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
+    border-radius: 30px;
+    box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgba(58, 58, 58, 0.14), 0 3px 14px 2px rgb(0 0 0 / 12%);
 }
 
 .cdk-drag-placeholder {
@@ -28,7 +28,6 @@ mat-list-item {
 
 .drag-icon {
     cursor: move;
-    margin-left: 0;
     margin-right: 0;
 }
 

src/app/home/recent-playlists/recent-playlists.component.html

@@ -1,5 +1,6 @@
 @if (allPlaylistsLoaded()) {
-    <mat-form-field class="full-width search-field" subscriptSizing="dynamic">
+    <mat-form-field class="search-field" subscriptSizing="dynamic">
+        <mat-icon matPrefix>search</mat-icon>
         <input
             matInput
             #searchQuery
@@ -17,7 +18,7 @@
             <mat-list-item
                 *ngIf="playlists.length === 0; else playlistsTemplate"
             >
-                <mat-icon class="favorites-icon" matListItemAvatar
+                <mat-icon class="favorites-icon" matListItemIcon
                     >search</mat-icon
                 >
                 <div matListItemTitle>
@@ -30,7 +31,7 @@
 
             <ng-template #playlistsTemplate>
                 <mat-list-item (click)="getGlobalFavorites()">
-                    <mat-icon class="favorites-icon" matListItemAvatar
+                    <mat-icon class="favorites-icon" matListItemIcon
                         >star</mat-icon
                     >
                     <div matListItemTitle>
@@ -43,7 +44,7 @@
                         }}
                     </div>
                 </mat-list-item>
-                <mat-divider />
+                <!-- <mat-divider /> -->
 
                 <app-playlist-item
                     *ngFor="

src/app/home/recent-playlists/recent-playlists.component.scss

@@ -1,13 +1,21 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .mat-list-base {
     padding-top: 0;
 }
 
 .playlists-list {
     padding: 0;
+    width: 100%;
 }
 
 .search-field {
-    border-radius: 0;
+    width: 96%;
+    margin: 10px 0;
 }
 
 .meta {
@@ -16,24 +24,35 @@
     margin-top: 2px !important;
 }
 
-::ng-deep .cdk-drag-preview .mat-list-item-content {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 0 16px;
-    position: relative;
-    height: inherit;
-    width: 100%;
-    justify-content: space-between;
 
-    .mat-list-text {
+::ng-deep {
+    div[matformfieldlineripple] {
+        display: none;
+    }
+
+    .search-field > .mat-mdc-text-field-wrapper {
+        border-radius: 30px;
+    }
+    
+    .cdk-drag-preview .mat-list-item-content {
         display: flex;
-        flex-direction: column;
-        flex: auto;
+        flex-direction: row;
+        align-items: center;
         box-sizing: border-box;
-        overflow: hidden;
-        padding-left: 16px;
+        padding: 0 16px;
+        position: relative;
+        height: inherit;
+        width: 100%;
+        justify-content: space-between;
+
+        .mat-list-text {
+            display: flex;
+            flex-direction: column;
+            flex: auto;
+            box-sizing: border-box;
+            overflow: hidden;
+            padding-left: 16px;
+        }
     }
 }
 

src/app/player/components/vjs-player/vjs-player.component.scss

@@ -1,7 +1,7 @@
 .video-js {
     position: relative !important;
     width: 100% !important;
-    height: calc(100vh - 54px);
+    height: calc(100vh - 65px);
 }
 
 /* Hide the captions settings item from the captions menu. */

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

@@ -1,107 +1,114 @@
-<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" *ngIf="isHome">
-    <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-toolbar>
+    <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" *ngIf="isHome">
+        <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-button
+            [matMenuTriggerFor]="filterPlaylistMenu"
+            [matTooltip]="'HOME.FILTER_BY_TYPE' | translate"
+            data-test-id="filter-playlist-by-type"
         >
-            <mat-icon>attach_file</mat-icon>
-            <span>{{ 'HOME.TABS.FILE_UPLOAD' | translate }}</span>
+            <mat-icon>filter_list</mat-icon>
         </button>
         <button
-            mat-menu-item
-            [attr.aria-label]="'HOME.TABS.URL_UPLOAD' | translate"
-            (click)="opedAddPlaylistDialog('url')"
+            *ngIf="isElectron; else pwaMenu"
+            mat-icon-button
+            (click)="openSettings()"
+            [matTooltip]="'MENU.SETTINGS' | translate"
+            data-test-id="open-settings"
         >
-            <mat-icon>link</mat-icon>
-            <span>{{ 'HOME.TABS.URL_UPLOAD' | translate }}</span>
+            <mat-icon>settings</mat-icon>
         </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-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>
+</mat-toolbar>
 
 <ng-template #pwaMenu>
     <button

src/app/shared/components/header/header.component.scss

@@ -1,8 +1,9 @@
 :host {
-    background: #000;
+    background: #1b1c1c;
     color: #fff;
     display: flex;
     width: 100%;
+    --mat-toolbar-standard-height: 100px;
 }
 
 .logo {
@@ -19,13 +20,13 @@
     max-width: 100%;
 
     .title {
-        font-size: 1.1em;
+        font-size: 1em;
     }
 
     .subtitle {
         color: #999;
-        font-size: 0.9em;
-        margin-top: 10px;
+        font-size: 0.8em;
+        margin-top: 5px;
     }
 }
 
@@ -41,6 +42,7 @@
 
 .add-playlist-btn {
     background-color: #3f51b5;
+    color: #fff;
 }
 
 @media (max-width: 500px) {

src/app/shared/components/header/header.component.ts

@@ -7,6 +7,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
@@ -35,6 +36,7 @@ import {
         MatDividerModule,
         MatIconModule,
         MatMenuModule,
+        MatToolbarModule,
         MatTooltipModule,
         NgIf,
         NgFor,