feat(account-info): add translations

Add a complete Angular template for the Xtream Tauri account-info dialog.
The new HTML lays out user and server information in a responsive
two-column grid, including status, username, connection counts,
creation/expiry dates, trial indicator, allowed output formats and
server details (live/movies/series counts, URL, protocol, timezone,
server time and ports). Translation pipes are used for all labels and
conditional classes mark active/trial states. This provides a full UI
for displaying parsed accountInfo data and prepares the dialog for
binding with component logic and styles.

apps/web/src/app/xtream-tauri/account-info/account-info.component.html

@@ -0,0 +1,114 @@
+<h2 mat-dialog-title>{{ 'XTREAM.ACCOUNT_INFO.TITLE' | translate }}</h2>
+<mat-dialog-content class="mat-typography">
+    @if (accountInfo?.user_info?.message) {
+        <div class="welcome-message">
+            {{ accountInfo?.user_info?.message }}
+        </div>
+    }
+    <div class="info-grid">
+        <div class="info-section">
+            <h3>{{ 'XTREAM.ACCOUNT_INFO.USER_INFO' | translate }}</h3>
+            <mat-list>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.STATUS' | translate }}:
+                    <span [class.active]="isActive">{{
+                        accountInfo?.user_info?.status
+                    }}</span>
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.USERNAME' | translate }}:
+                    {{ accountInfo?.user_info?.username }}
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.ACTIVE_CONNECTIONS' | translate }}:
+                    {{ accountInfo?.user_info?.active_cons }}/{{
+                        accountInfo?.user_info?.max_connections
+                    }}
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.CREATED' | translate }}:
+                    {{ formattedCreatedDate }}
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.EXPIRES' | translate }}:
+                    {{ formattedExpDate }}
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.TRIAL_ACCOUNT' | translate }}:
+                    <span [class.trial]="isTrial">{{
+                        (isTrial
+                            ? 'XTREAM.ACCOUNT_INFO.YES'
+                            : 'XTREAM.ACCOUNT_INFO.NO'
+                        ) | translate
+                    }}</span>
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.ALLOWED_FORMATS' | translate }}:
+                    <span class="formats">
+                        {{
+                            accountInfo?.user_info?.allowed_output_formats?.join(
+                                ', '
+                            )
+                        }}
+                    </span>
+                </mat-list-item>
+            </mat-list>
+        </div>
+
+        <div class="info-section">
+            <h3>{{ 'XTREAM.ACCOUNT_INFO.SERVER_INFO' | translate }}</h3>
+            <mat-list>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.LIVE_TV' | translate }}:
+                    {{ liveStreamsCount }}
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.MOVIES' | translate }}:
+                    {{ vodStreamsCount }}
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.TV_SERIES' | translate }}:
+                    {{ seriesCount }}
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.URL' | translate }}:
+                    {{ accountInfo?.server_info?.url }}
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.PROTOCOL' | translate }}:
+                    {{ accountInfo?.server_info?.server_protocol }}
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.TIMEZONE' | translate }}:
+                    {{ accountInfo?.server_info?.timezone }}
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.SERVER_TIME' | translate }}:
+                    {{ accountInfo?.server_info?.time_now }}
+                </mat-list-item>
+                <mat-list-item>
+                    {{ 'XTREAM.ACCOUNT_INFO.PORTS' | translate }}:
+                    <div class="ports">
+                        <span
+                            >{{ 'XTREAM.ACCOUNT_INFO.HTTP_PORT' | translate }}:
+                            {{ accountInfo?.server_info?.port }}</span
+                        >
+                        <span
+                            >{{ 'XTREAM.ACCOUNT_INFO.HTTPS_PORT' | translate }}:
+                            {{ accountInfo?.server_info?.https_port }}</span
+                        >
+                        <span
+                            >{{ 'XTREAM.ACCOUNT_INFO.RTMP_PORT' | translate }}:
+                            {{ accountInfo?.server_info?.rtmp_port }}</span
+                        >
+                    </div>
+                </mat-list-item>
+            </mat-list>
+        </div>
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-button mat-dialog-close color="accent">
+        {{ 'CLOSE' | translate }}
+    </button>
+</mat-dialog-actions>

apps/web/src/app/xtream-tauri/account-info/account-info.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatListModule } from '@angular/material/list';
@@ -11,150 +11,32 @@ import { XtreamAccountInfo } from './account-info.interface';
 @Component({
     selector: 'app-account-info',
     imports: [MatButton, MatDialogModule, MatListModule, TranslatePipe],
-    template: `
-        <h2 mat-dialog-title>Account Information</h2>
-        <mat-dialog-content class="mat-typography">
-            @if (accountInfo?.user_info?.message) {
-                <div class="welcome-message">
-                    {{ accountInfo?.user_info?.message }}
-                </div>
-            }
-            <div class="info-grid">
-                <div class="info-section">
-                    <h3>User Information</h3>
-                    <mat-list>
-                        <mat-list-item>
-                            Status:
-                            <span [class.active]="isActive">{{
-                                accountInfo?.user_info?.status
-                            }}</span>
-                        </mat-list-item>
-                        <mat-list-item>
-                            Username:
-                            {{ accountInfo?.user_info?.username }}
-                        </mat-list-item>
-                        <mat-list-item>
-                            Active Connections:
-                            {{ accountInfo?.user_info?.active_cons }}/{{
-                                accountInfo?.user_info?.max_connections
-                            }}
-                        </mat-list-item>
-                        <mat-list-item>
-                            Created:
-                            {{ formattedCreatedDate }}
-                        </mat-list-item>
-                        <mat-list-item>
-                            Expires: {{ formattedExpDate }}
-                        </mat-list-item>
-                        <mat-list-item>
-                            Trial Account:
-                            <span [class.trial]="isTrial">{{
-                                isTrial ? 'Yes' : 'No'
-                            }}</span>
-                        </mat-list-item>
-                        <mat-list-item>
-                            Allowed Formats:
-                            <span class="formats">
-                                {{
-                                    accountInfo?.user_info?.allowed_output_formats?.join(
-                                        ', '
-                                    )
-                                }}
-                            </span>
-                        </mat-list-item>
-                    </mat-list>
-                </div>
-
-                <div class="info-section">
-                    <h3>Server Information</h3>
-                    <mat-list>
-                        <mat-list-item>
-                            Live TV:
-                            {{ liveStreamsCount }}
-                        </mat-list-item>
-                        <mat-list-item>
-                            Movies:
-                            {{ vodStreamsCount }}
-                        </mat-list-item>
-                        <mat-list-item>
-                            TV Series:
-                            {{ seriesCount }}
-                        </mat-list-item>
-                        <mat-list-item>
-                            URL:
-                            {{ accountInfo?.server_info?.url }}
-                        </mat-list-item>
-                        <mat-list-item>
-                            Protocol:
-                            {{ accountInfo?.server_info?.server_protocol }}
-                        </mat-list-item>
-                        <mat-list-item>
-                            Timezone:
-                            {{ accountInfo?.server_info?.timezone }}
-                        </mat-list-item>
-                        <mat-list-item>
-                            Server Time:
-                            {{ accountInfo?.server_info?.time_now }}
-                        </mat-list-item>
-                        <mat-list-item>
-                            Ports:
-                            <div class="ports">
-                                <span
-                                    >HTTP:
-                                    {{ accountInfo?.server_info?.port }}</span
-                                >
-                                <span
-                                    >HTTPS:
-                                    {{
-                                        accountInfo?.server_info?.https_port
-                                    }}</span
-                                >
-                                <span
-                                    >RTMP:
-                                    {{
-                                        accountInfo?.server_info?.rtmp_port
-                                    }}</span
-                                >
-                            </div>
-                        </mat-list-item>
-                    </mat-list>
-                </div>
-            </div>
-        </mat-dialog-content>
-        <mat-dialog-actions>
-            <button mat-button mat-dialog-close color="accent">
-                {{ 'CLOSE' | translate }}
-            </button>
-        </mat-dialog-actions>
-    `,
+    templateUrl: './account-info.component.html',
     styleUrl: './account-info.component.scss',
 })
 export class AccountInfoComponent {
-    accountInfo: XtreamAccountInfo;
-    formattedExpDate: string;
-    formattedCreatedDate: string;
-
+    readonly data = inject<{
+        vodStreamsCount: number;
+        liveStreamsCount: number;
+        seriesCount: number;
+    }>(MAT_DIALOG_DATA);
     private readonly dataService = inject(DataService);
     private readonly store = inject(Store);
 
+    accountInfo: XtreamAccountInfo;
+    formattedExpDate: string;
+    formattedCreatedDate: string;
     vodStreamsCount: number;
     liveStreamsCount: number;
     seriesCount: number;
 
     readonly currentPlaylist = this.store.selectSignal(selectActivePlaylist);
 
-    constructor(
-        @Inject(MAT_DIALOG_DATA)
-        data: {
-            vodStreamsCount: number;
-            liveStreamsCount: number;
-            seriesCount: number;
-        }
-    ) {
+    constructor() {
         this.setAccountInfo();
-        this.vodStreamsCount = data.vodStreamsCount;
-        this.liveStreamsCount = data.liveStreamsCount;
-        this.seriesCount = data.seriesCount;
+        this.vodStreamsCount = this.data.vodStreamsCount;
+        this.liveStreamsCount = this.data.liveStreamsCount;
+        this.seriesCount = this.data.seriesCount;
     }
 
     async setAccountInfo() {
@@ -170,7 +52,7 @@ export class AccountInfoComponent {
                     action: 'get_account_info',
                 }
             );
-            console.log(this.accountInfo);
+
             if (this.accountInfo) {
                 this.formattedExpDate = new Date(
                     parseInt(this.accountInfo.user_info.exp_date) * 1000

apps/web/src/assets/i18n/de.json

@@ -219,6 +219,7 @@
     "RELEASE_DATE": "Veröffentlichungsdatum",
     "ACTORS": "Schauspieler",
     "PLAY": "Abspielen",
+    "OPENING_PLAYER": "Player wird geöffnet...",
     "GENRE": "Genre",
     "DURATION": "Dauer",
     "COUNTRY": "Land",
@@ -233,7 +234,32 @@
     "DESCRIPTION": "Beschreibung",
     "KINOPOISK_RATING": "Bewertung Kinopoisk",
     "IMDB_RATING": "IMDB-Bewertung",
-    "EPISODE_RUN_TIME": "Laufzeit der Episode"
+    "EPISODE_RUN_TIME": "Laufzeit der Episode",
+    "ACCOUNT_INFO": {
+      "TITLE": "Kontoinformationen",
+      "USER_INFO": "Benutzerinformationen",
+      "STATUS": "Status",
+      "USERNAME": "Benutzername",
+      "ACTIVE_CONNECTIONS": "Aktive Verbindungen",
+      "CREATED": "Erstellt",
+      "EXPIRES": "Läuft ab",
+      "TRIAL_ACCOUNT": "Testkonto",
+      "YES": "Ja",
+      "NO": "Nein",
+      "ALLOWED_FORMATS": "Zulässige Formate",
+      "SERVER_INFO": "Serverinformationen",
+      "LIVE_TV": "Live-TV",
+      "MOVIES": "Filme",
+      "TV_SERIES": "Serien",
+      "URL": "URL",
+      "PROTOCOL": "Protokoll",
+      "TIMEZONE": "Zeitzone",
+      "SERVER_TIME": "Serverzeit",
+      "PORTS": "Ports",
+      "HTTP_PORT": "HTTP",
+      "HTTPS_PORT": "HTTPS",
+      "RTMP_PORT": "RTMP"
+    }
   },
   "PORTALS": {
     "SIDEBAR": {

apps/web/src/assets/i18n/en.json

@@ -264,6 +264,7 @@
     "REFRESH": "Refresh",
     "XTREAM": {
         "PLAY": "Play",
+        "OPENING_PLAYER": "Opening player...",
         "NAME": "Name",
         "RELEASE_DATE": "Release date",
         "GENRE": "Genre",
@@ -280,7 +281,32 @@
         "YEAR": "Year",
         "AGE": "Age",
         "YOUTUBE_TRAILER": "YouTube Trailer",
-        "EPISODE": "Episode"
+        "EPISODE": "Episode",
+        "ACCOUNT_INFO": {
+            "TITLE": "Account Information",
+            "USER_INFO": "User Information",
+            "STATUS": "Status",
+            "USERNAME": "Username",
+            "ACTIVE_CONNECTIONS": "Active Connections",
+            "CREATED": "Created",
+            "EXPIRES": "Expires",
+            "TRIAL_ACCOUNT": "Trial Account",
+            "YES": "Yes",
+            "NO": "No",
+            "ALLOWED_FORMATS": "Allowed Formats",
+            "SERVER_INFO": "Server Information",
+            "LIVE_TV": "Live TV",
+            "MOVIES": "Movies",
+            "TV_SERIES": "TV Series",
+            "URL": "URL",
+            "PROTOCOL": "Protocol",
+            "TIMEZONE": "Timezone",
+            "SERVER_TIME": "Server Time",
+            "PORTS": "Ports",
+            "HTTP_PORT": "HTTP",
+            "HTTPS_PORT": "HTTPS",
+            "RTMP_PORT": "RTMP"
+        }
     },
     "PORTALS": {
         "ALL_CATEGORIES": "All categories",

apps/web/src/assets/i18n/ru.json

@@ -230,6 +230,7 @@
     "RELEASE_DATE": "Дата выпуска",
     "ACTORS": "Актеры",
     "PLAY": "Воспроизвести",
+    "OPENING_PLAYER": "Открытие плеера...",
     "GENRE": "Жанр",
     "DURATION": "Продолжительность",
     "COUNTRY": "Страна",
@@ -243,7 +244,32 @@
     "YOUTUBE_TRAILER": "YouTube-трейлер",
     "DESCRIPTION": "Описание",
     "KINOPOISK_RATING": "Рейтинг на Кинопоиск",
-    "IMDB_RATING": "Рейтинг на IMDB"
+    "IMDB_RATING": "Рейтинг на IMDB",
+    "ACCOUNT_INFO": {
+      "TITLE": "Информация об аккаунте",
+      "USER_INFO": "Информация о пользователе",
+      "STATUS": "Статус",
+      "USERNAME": "Имя пользователя",
+      "ACTIVE_CONNECTIONS": "Активные подключения",
+      "CREATED": "Создано",
+      "EXPIRES": "Истекает",
+      "TRIAL_ACCOUNT": "Пробный аккаунт",
+      "YES": "Да",
+      "NO": "Нет",
+      "ALLOWED_FORMATS": "Разрешенные форматы",
+      "SERVER_INFO": "Информация о сервере",
+      "LIVE_TV": "Прямой эфир",
+      "MOVIES": "Фильмы",
+      "TV_SERIES": "Сериалы",
+      "URL": "URL",
+      "PROTOCOL": "Протокол",
+      "TIMEZONE": "Часовой пояс",
+      "SERVER_TIME": "Время сервера",
+      "PORTS": "Порты",
+      "HTTP_PORT": "HTTP",
+      "HTTPS_PORT": "HTTPS",
+      "RTMP_PORT": "RTMP"
+    }
   },
   "PORTALS": {
     "ALL_CATEGORIES": "Все категории",