4gray · 4gray · Sep 3, 2024 · Aug 26, 2024 · Aug 26, 2024 · Aug 26, 2024
diff --git a/angular.json b/angular.json
@@ -32,8 +32,7 @@
                             "src/manifest.webmanifest"
                         ],
                         "styles": [
-                            "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-                            "src/styles.scss",
+                            "src/m3-theme.scss",
                             "./node_modules/video.js/dist/video-js.css"
                         ],
                         "scripts": [],
@@ -95,24 +94,24 @@
                 "serve": {
                     "builder": "@angular-devkit/build-angular:dev-server",
                     "options": {
-                      "buildTarget": "iptvnator:build"
+                        "buildTarget": "iptvnator:build"
                     },
                     "configurations": {
                         "dev": {
-                          "buildTarget": "iptvnator:build:dev"
+                            "buildTarget": "iptvnator:build:dev"
                         },
                         "web": {
-                          "buildTarget": "iptvnator:build:web"
+                            "buildTarget": "iptvnator:build:web"
                         },
                         "production": {
-                          "buildTarget": "iptvnator:build:production"
+                            "buildTarget": "iptvnator:build:production"
                         }
                     }
                 },
                 "extract-i18n": {
                     "builder": "@angular-devkit/build-angular:extract-i18n",
                     "options": {
-                      "buildTarget": "iptvnator:build"
+                        "buildTarget": "iptvnator:build"
                     }
                 },
                 "test": {

diff --git a/electron/preload.ts b/electron/preload.ts
@@ -2,6 +2,6 @@ import { Titlebar, TitlebarColor } from 'custom-electron-titlebar';
 
 window.addEventListener('DOMContentLoaded', () => {
     new Titlebar({
-        backgroundColor: TitlebarColor.fromHex('#000'),
+        backgroundColor: TitlebarColor.fromHex('#1b1c1c'),
     });
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,8 +53,8 @@
   "dependencies": {
     "@angular-builders/jest": "17.0.0",
     "@angular/animations": "18.2.1",
-    "@angular/cdk": "16.1.5",
-    "@angular/material": "16.1.5",
+    "@angular/cdk": "18.2.1",
+    "@angular/material": "18.2.1",
     "@electron/remote": "2.1.0",
     "@ngrx/component-store": "18.0.2",
     "@ngrx/effects": "18.0.2",
@@ -157,4 +157,4 @@
   "browserslist": [
     "chrome 91"
   ]
-}
+}
diff --git a/src/app/home/home.component.scss b/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) {

diff --git a/src/app/home/recent-playlists/playlist-item/playlist-item.component.html b/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 />
diff --git a/src/app/home/recent-playlists/playlist-item/playlist-item.component.scss b/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;
 }
 

diff --git a/src/app/home/recent-playlists/recent-playlists.component.html b/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,6 @@
                         }}
                     </div>
                 </mat-list-item>
-                <mat-divider />
 
                 <app-playlist-item
                     *ngFor="

diff --git a/src/app/home/recent-playlists/recent-playlists.component.scss b/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;
+        }
     }
 }
 
@@ -43,10 +62,11 @@
 
 #skeleton-container {
     padding-top: 10px;
+    width: 100%;
 
     .skeleton-item {
         display: flex;
-        padding-left: 25px;
+        padding: 0 20px;
         height: 72px;
 
         .text {

diff --git a/src/app/home/xtream-code-import/xtream-code-import.component.html b/src/app/home/xtream-code-import/xtream-code-import.component.html
@@ -14,6 +14,7 @@
             type="text"
             id="serverUrl"
             formControlName="serverUrl"
+            (input)="extractParams(form.value.serverUrl)"
         />
         <mat-hint>{{
             'HOME.XTREAM_PLAYLIST.URL_VALIDATION_ERROR' | translate

diff --git a/src/app/home/xtream-code-import/xtream-code-import.component.ts b/src/app/home/xtream-code-import/xtream-code-import.component.ts
@@ -67,4 +67,25 @@ export class XtreamCodeImportComponent {
         );
         this.addClicked.emit();
     }
+
+    extractParams(urlAsString: string): void {
+        if (
+            this.form.get('username').value !== '' ||
+            this.form.get('password').value !== ''
+        )
+            return;
+        try {
+            // Create a new URL object from the complete link
+            const url = new URL(urlAsString);
+
+            // Extract username and password from query parameters
+            const username = url.searchParams.get('username') || '';
+            const password = url.searchParams.get('password') || '';
+
+            this.form.get('username')?.setValue(username);
+            this.form.get('password')?.setValue(password);
+        } catch (error) {
+            console.error('Invalid URL', error);
+        }
+    }
 }
diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.html b/src/app/player/components/channel-list-container/channel-list-container.component.html
@@ -8,15 +8,17 @@
                 </div>
             </ng-template>
             <div class="search-panel">
-                <input
-                    class="full-width search-bar"
-                    type="search"
-                    #search
-                    [placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
-                    [(ngModel)]="searchTerm.name"
-                />
+                <mat-form-field class="search-bar">
+                    <input
+                        matInput
+                        class="full-width"
+                        type="search"
+                        #search
+                        [placeholder]="'CHANNELS.SEARCH_CHANNEL' | translate"
+                        [(ngModel)]="searchTerm.name"
+                    />
+                </mat-form-field>
             </div>
-            <mat-divider></mat-divider>
             <mat-nav-list style="overflow: hidden">
                 <cdk-virtual-scroll-viewport
                     itemSize="50"
@@ -39,7 +41,7 @@
                         [logo]="channel?.tvg?.logo"
                         (clicked)="selectChannel(channel)"
                         [selected]="selected?.id === channel?.id"
-                    ></app-channel-list-item>
+                    />
                 </cdk-virtual-scroll-viewport>
             </mat-nav-list>
         </mat-tab>

diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.scss b/src/app/player/components/channel-list-container/channel-list-container.component.scss
@@ -1,3 +1,5 @@
+@use '@angular/material' as mat;
+
 .mat-list-base {
     padding-top: 0;
 }
@@ -7,14 +9,14 @@
 }
 
 .search-panel {
-    padding: 10px;
+    padding: 10px 0 0 0;
+    display: flex;
+    justify-content: center;
 }
 
 .search-bar {
-    padding: 8px;
-    background: #ddd;
-    border: none;
-    border-radius: 4px;
+    @include mat.form-field-density(-5);
+    width: 96%;
 }
 
 mat-nav-list {
@@ -23,23 +25,18 @@ mat-nav-list {
 }
 
 ::ng-deep {
-    .mat-expansion-panel-body {
-        padding: 0 !important;
-    }
-
-    .dark-theme {
-        .search-bar {
-            background: #666;
-            color: #fff;
+    .search-bar {
+        div {
+            border-radius: 20px;
         }
+    }
 
-        .search-bar::placeholder {
-            color: #ccc;
-        }
+    div[matformfieldlineripple], .mat-mdc-form-field-subscript-wrapper {
+        display: none;
     }
 
-    .mat-tab-label-content {
-        text-transform: uppercase;
+    .mat-expansion-panel-body {
+        padding: 0 !important;
     }
 
     .mat-expansion-panel {