refactor: add note about cors proxy usage

src/app/home/url-upload/url-upload.component.html

@@ -7,7 +7,11 @@
             formControlName="playlistUrl"
         />
     </mat-form-field>
+    <mat-card>
+        Note: In order to avoid <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">CORS</a> issues at this point the application uses a public CORS Proxy service. If you want to upload a playlist with sensitive data, it is better to import it as a file in the adjacent tab.
+    </mat-card>
     <button
+        class="add-button"
         mat-flat-button
         [disabled]="!form.valid"
         color="primary"

src/app/home/url-upload/url-upload.component.scss

@@ -3,5 +3,6 @@ form {
 }
 
 button {
+    margin-top: 10px;
     text-transform: uppercase;
 }

src/app/home/url-upload/url-upload.component.spec.ts

@@ -1,12 +1,14 @@
-import { TranslatePipe } from '@ngx-translate/core';
-import { MockPipe } from 'ng-mocks';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-
-import { UrlUploadComponent } from './url-upload.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatInputModule } from '@angular/material/input';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockModule, MockPipe } from 'ng-mocks';
+import { DataService } from '../../services/data.service';
+import { ElectronServiceStub } from '../../services/electron.service.stub';
+import { UrlUploadComponent } from './url-upload.component';
 
 describe('UrlUploadComponent', () => {
     let component: UrlUploadComponent;
@@ -17,11 +19,18 @@ describe('UrlUploadComponent', () => {
             TestBed.configureTestingModule({
                 declarations: [UrlUploadComponent, MockPipe(TranslatePipe)],
                 imports: [
-                    MatInputModule,
+                    MockModule(MatInputModule),
+                    MockModule(MatCardModule),
                     FormsModule,
                     ReactiveFormsModule,
                     NoopAnimationsModule,
                 ],
+                providers: [
+                    {
+                        provide: DataService,
+                        useClass: ElectronServiceStub,
+                    },
+                ],
             }).compileComponents();
         })
     );

src/app/home/url-upload/url-upload.component.ts

@@ -1,5 +1,6 @@
-import { Component, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DataService } from '../../services/data.service';
 
 @Component({
     selector: 'app-url-upload',
@@ -13,11 +14,14 @@ export class UrlUploadComponent implements OnInit {
     /** Form group with playlist url */
     form: FormGroup;
 
+    /** Is true if app runs in electron-based environment */
+    isElectron = this.dataService.isElectron;
+
     /**
      * Creates an instance of component
-     * @param fb angulars form builder
+     * @param fb angular form builder
      */
-    constructor(private fb: FormBuilder) {}
+    constructor(private fb: FormBuilder, private dataService: DataService) {}
 
     ngOnInit(): void {
         const urlRegex = '(https?://.*?)';