From 1aea8596601624bf3114bbc5a6963c3a31742fcf Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Tue, 3 Sep 2024 19:56:07 +0200
Subject: [PATCH] style: visual improvements

---
 electron/preload.ts                           |  2 +-
 .../recent-playlists.component.html           |  1 -
 .../recent-playlists.component.scss           |  3 ++-
 .../xtream-code-import.component.html         |  1 +
 .../xtream-code-import.component.ts           | 21 +++++++++++++++++++
 5 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/electron/preload.ts b/electron/preload.ts
index 3f7abe05b..5bd437d80 100644
--- 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/src/app/home/recent-playlists/recent-playlists.component.html b/src/app/home/recent-playlists/recent-playlists.component.html
index cada6e811..6b4097605 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.html
+++ b/src/app/home/recent-playlists/recent-playlists.component.html
@@ -44,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
index 2de8fc71c..f0d10f02b 100644
--- a/src/app/home/recent-playlists/recent-playlists.component.scss
+++ b/src/app/home/recent-playlists/recent-playlists.component.scss
@@ -62,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
index 1f51756ef..d58f59408 100644
--- 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
index 7d64a3f71..a7c8e8f2a 100644
--- 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);
+        }
+    }
 }