feat(portals): show and copy stream url from web-player dialog

src/app/stalker/stalker-main-container.component.ts

@@ -31,7 +31,10 @@ import { CategoryViewComponent } from '../xtream/category-view/category-view.com
 import { ContentTypeNavigationItem } from '../xtream/content-type-navigation-item.interface';
 import { ContentType } from '../xtream/content-type.enum';
 import { NavigationBarComponent } from '../xtream/navigation-bar/navigation-bar.component';
-import { PlayerDialogComponent } from '../xtream/player-dialog/player-dialog.component';
+import {
+    PlayerDialogComponent,
+    PlayerDialogData,
+} from '../xtream/player-dialog/player-dialog.component';
 import { PlaylistErrorViewComponent } from '../xtream/playlist-error-view/playlist-error-view.component';
 import { PortalStore } from '../xtream/portal.store';
 import { VodDetailsComponent } from '../xtream/vod-details/vod-details.component';
@@ -338,6 +341,7 @@ export class StalkerMainContainerComponent implements OnInit {
             this.pageIndex = response.payload.js.cur_page;
         } else if (response.action === StalkerPortalActions.CreateLink) {
             let url = response.payload.js.cmd as string;
+            //url = url.replace('extension=ts', 'extension=m3u8');
             if (url?.startsWith('ffmpeg')) {
                 url = url.split(' ')[1];
             }
@@ -374,10 +378,16 @@ export class StalkerMainContainerComponent implements OnInit {
                 url: streamUrl,
             });
         } else {
-            this.dialog.open(PlayerDialogComponent, {
-                data: { streamUrl, player, title },
-                width: '80%',
-            });
+            this.dialog.open<PlayerDialogComponent, PlayerDialogData>(
+                PlayerDialogComponent,
+                {
+                    data: {
+                        streamUrl,
+                        title: title ?? this.itemDetails.info.name,
+                    },
+                    width: '80%',
+                }
+            );
         }
     }
 
@@ -473,6 +483,7 @@ export class StalkerMainContainerComponent implements OnInit {
             this.getSerialDetails(item);
             return;
         }
+
         if (this.selectedContentType === ContentType.ITV) {
             this.playVod(item.cmd);
             return;

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

@@ -2,3 +2,19 @@
 <mat-dialog-content class="content">
     <app-web-player-view [streamUrl]="streamUrl" />
 </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 mat-dialog-close color="accent">
+        {{ 'CLOSE' | translate }}
+    </button>
+</mat-dialog-actions>

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

@@ -1,29 +1,49 @@
+import { ClipboardModule } from '@angular/cdk/clipboard';
 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 { MatIconModule } from '@angular/material/icon';
+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';
-import { VideoPlayer } from '../../settings/settings.interface';
 
-interface DialogData {
+export interface PlayerDialogData {
     streamUrl: string;
-    player: VideoPlayer;
     title: string;
 }
 
 @Component({
-    selector: 'app-player-dialog',
     templateUrl: './player-dialog.component.html',
     standalone: true,
-    imports: [MatDialogModule, NgIf, WebPlayerViewComponent],
+    imports: [
+        ClipboardModule,
+        MatButtonModule,
+        MatDialogModule,
+        MatIconModule,
+        NgIf,
+        TranslateModule,
+        WebPlayerViewComponent,
+    ],
     styles: `
         .content {
             overflow: hidden; 
                 padding: 10px !important;
         }
 
-        mat-dialog-content {
-            
+        .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;
             }
@@ -35,8 +55,22 @@ export class PlayerDialogComponent {
     title: string;
     streamUrl: string;
 
-    constructor(@Inject(MAT_DIALOG_DATA) data: DialogData) {
+    constructor(
+        @Inject(MAT_DIALOG_DATA) data: PlayerDialogData,
+        private snackBar: MatSnackBar,
+        private translateService: TranslateService
+    ) {
         this.streamUrl = data.streamUrl;
         this.title = data.title;
     }
+
+    showCopyNotification() {
+        this.snackBar.open(
+            this.translateService.instant('PORTALS.STREAM_URL_COPIED'),
+            null,
+            {
+                duration: 2000,
+            }
+        );
+    }
 }

src/assets/i18n/en.json

@@ -260,7 +260,9 @@
     "EMPTY_LIST_VIEW": {
       "NO_SEARCH_RESULTS": "Nothing found, try to change you search request",
       "EMPTY_CATEGORY": "This category is empty, try another one"
-    }
+    },
+    "STREAM_URL_COPIED": "Stream URL copied to clipboard",
+    "COPY_STREAM_URL": "Copy Stream URL"
   },
   "INFORMATION": "Information"
 }