style(portals): improve style of the player dialog

src/app/xtream/player-dialog/player-dialog.component.html

@@ -1,19 +1,24 @@
 <h2 mat-dialog-title>{{ title }}</h2>
 <mat-dialog-content class="content">
     <app-web-player-view [streamUrl]="streamUrl" />
+    <mat-form-field class="link-input">
+        <input
+            matInput
+            formControlName="streamUrl"
+            [value]="streamUrl"
+            disabled
+        />
+    </mat-form-field>
 </mat-dialog-content>
 <mat-dialog-actions class="align-actions">
-    <div>
-        <input [value]="streamUrl" disabled class="link-input" />
-        <button
-            mat-button
-            [cdkCopyToClipboard]="streamUrl"
-            (click)="showCopyNotification()"
-        >
-            <mat-icon>content_copy</mat-icon>
-            {{ 'PORTALS.COPY_STREAM_URL' | translate }}
-        </button>
-    </div>
+    <button
+        mat-button
+        [cdkCopyToClipboard]="streamUrl"
+        (click)="showCopyNotification()"
+    >
+        <mat-icon>content_copy</mat-icon>
+        {{ 'PORTALS.COPY_STREAM_URL' | translate }}
+    </button>
     <button mat-button mat-dialog-close color="accent">
         {{ 'CLOSE' | translate }}
     </button>

src/app/xtream/player-dialog/player-dialog.component.scss

@@ -0,0 +1,22 @@
+@use '@angular/material' as mat;
+
+.content {
+    overflow: hidden;
+    padding: 10px !important;
+}
+
+.link-input {
+    width: 98%;
+    padding-top: 5px;
+    @include mat.form-field-density(-5);
+}
+
+.align-actions {
+    justify-content: space-between;
+}
+
+mat-dialog-content {
+    .video-js {
+        height: 500px !important;
+    }
+}

src/app/xtream/player-dialog/player-dialog.component.ts

@@ -3,7 +3,9 @@ import { NgIf } from '@angular/common';
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { WebPlayerViewComponent } from '../../portals/web-player-view/web-player-view.component';
@@ -20,35 +22,14 @@ export interface PlayerDialogData {
         ClipboardModule,
         MatButtonModule,
         MatDialogModule,
+        MatFormFieldModule,
         MatIconModule,
+        MatInputModule,
         NgIf,
         TranslateModule,
         WebPlayerViewComponent,
     ],
-    styles: `
-        .content {
-            overflow: hidden; 
-                padding: 10px !important;
-        }
-
-        .link-input {
-            padding: 10px;
-            margin-right: 5px;
-            border-radius: 4px;
-            border: 0;
-            width: 200px;
-        }
-
-        .align-actions {
-            justify-content: space-between;
-        }
-
-        mat-dialog-content {
-            .video-js {
-                height: 500px !important;
-            }
-        }
-    `,
+    styleUrl: './player-dialog.component.scss',
     encapsulation: ViewEncapsulation.None,
 })
 export class PlayerDialogComponent {