feat: support xtream playlists

src/app/home/recent-playlists/playlist-info/playlist-info.component.html

@@ -12,13 +12,31 @@
             }}</mat-label>
             <input formControlName="title" matInput />
         </mat-form-field>
+        <mat-form-field class="full-width" *ngIf="playlist.serverUrl">
+            <mat-label>{{
+                'HOME.PLAYLISTS.INFO_DIALOG.SERVER_URL' | translate
+            }}</mat-label>
+            <input matInput formControlName="serverUrl" />
+        </mat-form-field>
+        <mat-form-field class="full-width" *ngIf="playlist.username">
+            <mat-label>{{
+                'HOME.PLAYLISTS.INFO_DIALOG.USERNAME' | translate
+            }}</mat-label>
+            <input matInput formControlName="username" />
+        </mat-form-field>
+        <mat-form-field class="full-width" *ngIf="playlist.password">
+            <mat-label>{{
+                'HOME.PLAYLISTS.INFO_DIALOG.PASSWORD' | translate
+            }}</mat-label>
+            <input matInput formControlName="password" />
+        </mat-form-field>
         <mat-form-field class="full-width" *ngIf="playlist.url">
             <mat-label>{{
                 'HOME.PLAYLISTS.INFO_DIALOG.FROM_URL' | translate
             }}</mat-label>
             <input matInput formControlName="url" />
         </mat-form-field>
-        <mat-form-field class="full-width">
+        <mat-form-field class="full-width" *ngIf="playlist.filename">
             <mat-label>{{
                 'HOME.PLAYLISTS.INFO_DIALOG.ORIGINAL_FILENAME' | translate
             }}</mat-label>
@@ -30,7 +48,7 @@
             }}</mat-label>
             <input matInput formControlName="importDate" />
         </mat-form-field>
-        <mat-form-field class="full-width">
+        <mat-form-field class="full-width" *ngIf="playlist.count">
             <mat-label>{{
                 'HOME.PLAYLISTS.INFO_DIALOG.CHANNELS' | translate
             }}</mat-label>
@@ -67,10 +85,15 @@
         </ng-container>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-        <button mat-flat-button color="accent" (click)="exportPlaylist()">
+        <button
+            mat-flat-button
+            color="accent"
+            (click)="exportPlaylist()"
+            *ngIf="!playlist.serverUrl"
+        >
             {{ 'HOME.PLAYLISTS.INFO_DIALOG.EXPORT_PLAYLIST' | translate }}
         </button>
-        <div style="flex: 1 1 auto"></div>
+        <div class="spacer"></div>
         <button
             mat-flat-button
             mat-dialog-close

src/app/home/recent-playlists/playlist-info/playlist-info.component.ts

@@ -25,6 +25,13 @@ import * as PlaylistActions from '../../../state/actions';
 @Component({
     selector: 'app-playlist-info',
     templateUrl: './playlist-info.component.html',
+    styles: [
+        `
+            .spacer {
+                flex: 1 1 auto;
+            }
+        `,
+    ],
     providers: [DatePipe],
     imports: [
         TranslateModule,
@@ -88,6 +95,9 @@ export class PlaylistInfoComponent {
                 disabled: true,
             }),
             autoRefresh: new FormControl(this.playlist.autoRefresh),
+            serverUrl: new FormControl(this.playlist.serverUrl),
+            username: new FormControl(this.playlist.username),
+            password: new FormControl(this.playlist.password),
         });
     }
 

src/app/home/recent-playlists/playlist-item/playlist-item.component.html

@@ -14,31 +14,48 @@
     <mat-icon
         matListItemAvatar
         class="upload-type-icon"
-        *ngIf="!item?.url"
+        *ngIf="!item?.url && !item.serverUrl"
         [matTooltip]="'HOME.PLAYLISTS.ADDED_VIA_FILE' | translate"
         >folder</mat-icon
     >
+    <mat-icon
+        matListItemAvatar
+        class="upload-type-icon"
+        *ngIf="item?.serverUrl"
+        [matTooltip]="'HOME.PLAYLISTS.XTREAM_PLAYLIST' | translate"
+        >globe</mat-icon
+    >
     <div matListItemTitle>{{ item.title || item.filename }}</div>
     <div matListItemLine class="meta">
-        {{ 'HOME.PLAYLISTS.CHANNELS' | translate }}: {{ item.count }}
-        <ng-container *ngIf="item.importDate?.length > 3">
-            | {{ 'HOME.PLAYLISTS.ADDED' | translate }}:
-            {{ item.importDate | date }}
-        </ng-container>
-        <ng-container *ngIf="item.updateDate">
-            | {{ 'HOME.PLAYLISTS.UPDATED' | translate }}:
-            {{ item.updateDate | date: 'MMMM d, yyyy, HH:mm' }}
-        </ng-container>
-        <ng-container *ngIf="item.updateState === 2">
-            <mat-icon
-                [matTooltip]="
-                    'HOME.PLAYLISTS.INFO_DIALOG.UPDATE_FAILED' | translate
-                "
-                [inline]="true"
-                >warning</mat-icon
-            >
+        <ng-container *ngIf="!item.serverUrl; else xtreamPlaylist">
+            {{ 'HOME.PLAYLISTS.CHANNELS' | translate }}: {{ item.count }}
+            <ng-container *ngIf="item.importDate?.length > 3">
+                | {{ 'HOME.PLAYLISTS.ADDED' | translate }}:
+                {{ item.importDate | date }}
+            </ng-container>
+            <ng-container *ngIf="item.updateDate">
+                | {{ 'HOME.PLAYLISTS.UPDATED' | translate }}:
+                {{ item.updateDate | date : 'MMMM d, yyyy, HH:mm' }}
+            </ng-container>
+            <ng-container *ngIf="item.updateState === 2">
+                <mat-icon
+                    [matTooltip]="
+                        'HOME.PLAYLISTS.INFO_DIALOG.UPDATE_FAILED' | translate
+                    "
+                    [inline]="true"
+                    >warning</mat-icon
+                >
+            </ng-container>
         </ng-container>
+        <ng-template #xtreamPlaylist
+            >Xtream Code Playlist
+            <ng-container *ngIf="item.importDate?.length > 3">
+                | {{ 'HOME.PLAYLISTS.ADDED' | translate }}:
+                {{ item.importDate | date }}
+            </ng-container></ng-template
+        >
     </div>
+
     <span matListItemMeta class="action-buttons" *ngIf="showActions">
         <button
             *ngIf="item.url || item.filePath"

src/app/home/recent-playlists/recent-playlists.component.html

@@ -15,7 +15,7 @@
         </mat-list-item>
         <mat-list-item
             *ngIf="playlists.length > 0"
-            (click)="getPlaylist('GLOBAL_FAVORITES')"
+            (click)="getGlobalFavorites()"
         >
             <mat-icon class="favorites-icon" matListItemAvatar>star</mat-icon>
             <div matListItemTitle>
@@ -32,7 +32,7 @@
             [item]="item"
             [showActions]="!sidebarMode"
             (editPlaylistClicked)="openInfoDialog($event)"
-            (playlistClicked)="getPlaylist($event)"
+            (playlistClicked)="getPlaylist(item)"
             (refreshClicked)="refreshPlaylist($event)"
             (removeClicked)="removeClicked($event)"
         ></app-playlist-item>

src/app/home/recent-playlists/recent-playlists.component.ts

@@ -13,6 +13,7 @@ import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { map } from 'rxjs';
+import { GLOBAL_FAVORITES_PLAYLIST_ID } from '../../../../shared/constants';
 import { IpcCommand } from '../../../../shared/ipc-command.class';
 import { Playlist } from '../../../../shared/playlist.interface';
 import { DataService } from '../../services/data.service';
@@ -160,9 +161,18 @@ export class RecentPlaylistsComponent implements OnDestroy {
         );
     }
 
-    getPlaylist(playlistId: string): void {
-        this.router.navigate(['playlists', playlistId]);
-        this.playlistClicked.emit(playlistId);
+    getGlobalFavorites() {
+        this.router.navigate(['playlists', GLOBAL_FAVORITES_PLAYLIST_ID]);
+        this.playlistClicked.emit(GLOBAL_FAVORITES_PLAYLIST_ID);
+    }
+
+    getPlaylist(playlistMeta: PlaylistMeta): void {
+        if (playlistMeta.serverUrl) {
+            this.router.navigate(['xtreams', playlistMeta._id]);
+        } else {
+            this.router.navigate(['playlists', playlistMeta._id]);
+            this.playlistClicked.emit(playlistMeta._id);
+        }
     }
 
     /**