fix(add-playlist): widen dialog and use card-friendly labels

The 5-card method picker was rendering at the old 560px dialog width
which left each card too narrow — titles wrapped to 2-3 lines and the
subtitles to 6, all visible in the user-reported screenshot.

Three fixes:

1. Bump the dialog width from 560px → 780px to match the v0.22 mockup.
   maxWidth: 92vw keeps the responsive collapse path intact.

2. Replace the inherited "Add via URL" / "Add via file upload" /
   "Add Xtreme Code" / "Add Stalker Portal" / "Import from text" tab
   labels with short noun-only card titles: "M3U URL", "M3U file",
   "Xtream credentials", "Stalker portal", "Raw m3u text". The dialog
   itself is titled "Add playlist" so the "Add" prefix on every card
   was redundant. The "Xtreme" misspelling on the old key disappears
   as a side effect.

3. Lock cards to min-height: 132px so the URL card (short subtitle)
   stops collapsing while the Xtream/Stalker cards (longer subtitle)
   stretch — selection states now look visually consistent. Slightly
   tighter padding (10/11/12 vs 12/14) to fit the new width without
   feeling cramped.

i18n: 5 new METHOD_*_LABEL keys translated across all 17 locales by
per-locale agents; placeholder integrity verified across all 920+
leaf keys.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
4grayandClaude Opus 4.7 committed 2026-05-19 01:15:18 +02:00
1 parent 210baa2e75
commit 810d9170f0
21 files changed
+112 -9

No files matched your search

@@ -18,7 +18,12 @@ export class AppWorkspaceShellActionsService implements WorkspaceShellActions {
void import('@iptvnator/playlist/import/feature').then(
({ AddPlaylistDialogComponent }) => {
this.dialog.open(AddPlaylistDialogComponent, {
width: '560px',
// Width sized for the 5-card method picker plus the
// selected method's form below. Matches the v0.22
// mockup; falls back to viewport-clamped width on
// narrow screens so the grid can collapse via the
// SCSS responsive breakpoints.
width: '780px',
maxWidth: '92vw',
data: type ? { type } : {},
});
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "اختر طريقة الاتصال، ويمكنك إعادة تسميتها لاحقًا.",
"METHOD_URL_LABEL": "رابط M3U",
"METHOD_URL_SUB": "ألصق رابطًا لملف .m3u أو .m3u8 بعيد",
"METHOD_FILE_LABEL": "ملف M3U",
"METHOD_FILE_SUB": "حمّل قائمة تشغيل من جهازك",
"METHOD_XTREAM_LABEL": "بيانات اعتماد Xtream",
"METHOD_XTREAM_SUB": "اتصل باستخدام المضيف واسم المستخدم وكلمة المرور",
"METHOD_STALKER_LABEL": "بوابة Stalker",
"METHOD_STALKER_SUB": "عنوان MAC ورابط البوابة",
"METHOD_TEXT_LABEL": "نص m3u الخام",
"METHOD_TEXT_SUB": "للقوائم العابرة أو عندما يتوفر لديك النص فقط"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "اختار كيفاش بغيتي تربط. تقدر تبدل الاسم من بعد.",
"METHOD_URL_LABEL": "رابط M3U",
"METHOD_URL_SUB": "لصق رابط ل ملف .m3u ولا .m3u8 بعيد",
"METHOD_FILE_LABEL": "ملف M3U",
"METHOD_FILE_SUB": "زيد قائمة تشغيل من الجهاز ديالك",
"METHOD_XTREAM_LABEL": "بيانات Xtream",
"METHOD_XTREAM_SUB": "ربط بالخادم، اسم المستخدم وكلمة المرور",
"METHOD_STALKER_LABEL": "بوابة Stalker",
"METHOD_STALKER_SUB": "عنوان MAC ورابط البوابة",
"METHOD_TEXT_LABEL": "نص m3u خام",
"METHOD_TEXT_SUB": "للقوائم المؤقتة ولا إلى عندك غير النص"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Выберыце, як вы хочаце падключыцца. Перайменаваць можна пазней.",
"METHOD_URL_LABEL": "M3U URL",
"METHOD_URL_SUB": "Устаўце спасылку на выдалены .m3u або .m3u8",
"METHOD_FILE_LABEL": "M3U-файл",
"METHOD_FILE_SUB": "Загрузіце плэйліст са свайго камп'ютара",
"METHOD_XTREAM_LABEL": "Xtream уліковыя даныя",
"METHOD_XTREAM_SUB": "Падключэнне праз хост, імя карыстальніка і пароль",
"METHOD_STALKER_LABEL": "Stalker партал",
"METHOD_STALKER_SUB": "MAC-адрас і URL партала",
"METHOD_TEXT_LABEL": "Тэкст M3U",
"METHOD_TEXT_SUB": "Для разавых спісаў або калі ў вас ёсць толькі тэкст"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Wählen Sie aus, wie Sie sich verbinden möchten. Sie können den Namen später ändern.",
"METHOD_URL_LABEL": "M3U-URL",
"METHOD_URL_SUB": "Fügen Sie einen Link zu einer .m3u- oder .m3u8-Datei ein",
"METHOD_FILE_LABEL": "M3U-Datei",
"METHOD_FILE_SUB": "Laden Sie eine Wiedergabeliste von Ihrem Computer hoch",
"METHOD_XTREAM_LABEL": "Xtream-Zugangsdaten",
"METHOD_XTREAM_SUB": "Verbinden mit Host, Benutzername und Passwort",
"METHOD_STALKER_LABEL": "Stalker-Portal",
"METHOD_STALKER_SUB": "MAC-Adresse und Portal-URL",
"METHOD_TEXT_LABEL": "M3U-Text",
"METHOD_TEXT_SUB": "Für einmalige Listen oder wenn Sie nur Text haben"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Επιλέξτε τρόπο σύνδεσης. Μπορείτε να τη μετονομάσετε αργότερα.",
"METHOD_URL_LABEL": "M3U URL",
"METHOD_URL_SUB": "Επικολλήστε έναν σύνδεσμο σε απομακρυσμένο .m3u ή .m3u8",
"METHOD_FILE_LABEL": "Αρχείο M3U",
"METHOD_FILE_SUB": "Ανεβάστε μια λίστα αναπαραγωγής από τον υπολογιστή σας",
"METHOD_XTREAM_LABEL": "Διαπιστευτήρια Xtream",
"METHOD_XTREAM_SUB": "Σύνδεση με διακομιστή, όνομα χρήστη και κωδικό πρόσβασης",
"METHOD_STALKER_LABEL": "Πύλη Stalker",
"METHOD_STALKER_SUB": "MAC address και URL πύλης",
"METHOD_TEXT_LABEL": "Ακατέργαστο κείμενο m3u",
"METHOD_TEXT_SUB": "Για λίστες μίας χρήσης ή όταν έχετε μόνο κείμενο"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Pick how you want to connect. You can rename it later.",
"METHOD_URL_LABEL": "M3U URL",
"METHOD_URL_SUB": "Paste a link to a remote .m3u or .m3u8",
"METHOD_FILE_LABEL": "M3U file",
"METHOD_FILE_SUB": "Upload a playlist from your computer",
"METHOD_XTREAM_LABEL": "Xtream credentials",
"METHOD_XTREAM_SUB": "Connect with host, username and password",
"METHOD_STALKER_LABEL": "Stalker portal",
"METHOD_STALKER_SUB": "MAC address and portal URL",
"METHOD_TEXT_LABEL": "Raw m3u text",
"METHOD_TEXT_SUB": "For one-off lists or when you only have text"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Elige cómo quieres conectar. Puedes renombrarla más tarde.",
"METHOD_URL_LABEL": "URL de M3U",
"METHOD_URL_SUB": "Pega un enlace a un archivo .m3u o .m3u8 remoto",
"METHOD_FILE_LABEL": "Archivo M3U",
"METHOD_FILE_SUB": "Sube una lista de reproducción desde tu computadora",
"METHOD_XTREAM_LABEL": "Credenciales de Xtream",
"METHOD_XTREAM_SUB": "Conecta con host, usuario y contraseña",
"METHOD_STALKER_LABEL": "Portal Stalker",
"METHOD_STALKER_SUB": "Dirección MAC y URL del portal",
"METHOD_TEXT_LABEL": "Texto m3u sin formato",
"METHOD_TEXT_SUB": "Para listas puntuales o cuando solo tienes texto"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Choisissez comment vous souhaitez vous connecter. Vous pourrez renommer la liste plus tard.",
"METHOD_URL_LABEL": "URL M3U",
"METHOD_URL_SUB": "Collez un lien vers un fichier .m3u ou .m3u8 distant",
"METHOD_FILE_LABEL": "Fichier M3U",
"METHOD_FILE_SUB": "Téléversez une liste de lecture depuis votre ordinateur",
"METHOD_XTREAM_LABEL": "Identifiants Xtream",
"METHOD_XTREAM_SUB": "Connectez-vous avec hôte, nom d'utilisateur et mot de passe",
"METHOD_STALKER_LABEL": "Portail Stalker",
"METHOD_STALKER_SUB": "Adresse MAC et URL du portail",
"METHOD_TEXT_LABEL": "Texte m3u brut",
"METHOD_TEXT_SUB": "Pour les listes ponctuelles ou quand vous n'avez que du texte"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Scegli come connetterti. Puoi rinominarla in seguito.",
"METHOD_URL_LABEL": "URL M3U",
"METHOD_URL_SUB": "Incolla un link a un file .m3u o .m3u8 remoto",
"METHOD_FILE_LABEL": "File M3U",
"METHOD_FILE_SUB": "Carica una playlist dal tuo computer",
"METHOD_XTREAM_LABEL": "Credenziali Xtream",
"METHOD_XTREAM_SUB": "Connetti con host, nome utente e password",
"METHOD_STALKER_LABEL": "Portale Stalker",
"METHOD_STALKER_SUB": "Indirizzo MAC e URL del portale",
"METHOD_TEXT_LABEL": "Testo m3u grezzo",
"METHOD_TEXT_SUB": "Per liste occasionali o quando hai solo il testo"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "接続方法を選択してください。名前は後から変更できます。",
"METHOD_URL_LABEL": "M3U URL",
"METHOD_URL_SUB": "リモートの.m3uまたは.m3u8へのリンクを貼り付け",
"METHOD_FILE_LABEL": "M3Uファイル",
"METHOD_FILE_SUB": "コンピューターからプレイリストをアップロード",
"METHOD_XTREAM_LABEL": "Xtream認証情報",
"METHOD_XTREAM_SUB": "ホスト、ユーザー名、パスワードで接続",
"METHOD_STALKER_LABEL": "Stalkerポータル",
"METHOD_STALKER_SUB": "MACアドレスとポータルURL",
"METHOD_TEXT_LABEL": "M3Uテキスト",
"METHOD_TEXT_SUB": "一度限りのリストやテキストしかない場合に"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "연결 방식을 선택하세요. 이름은 나중에 변경할 수 있습니다.",
"METHOD_URL_LABEL": "M3U URL",
"METHOD_URL_SUB": "원격 .m3u 또는 .m3u8 링크를 붙여넣으세요",
"METHOD_FILE_LABEL": "M3U 파일",
"METHOD_FILE_SUB": "내 컴퓨터에서 재생목록을 업로드하세요",
"METHOD_XTREAM_LABEL": "Xtream 자격 증명",
"METHOD_XTREAM_SUB": "호스트, 사용자 이름, 비밀번호로 연결하세요",
"METHOD_STALKER_LABEL": "Stalker 포털",
"METHOD_STALKER_SUB": "MAC 주소와 포털 URL",
"METHOD_TEXT_LABEL": "원본 m3u 텍스트",
"METHOD_TEXT_SUB": "일회성 목록이나 텍스트만 있을 때 사용하세요"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Kies hoe je verbinding wilt maken. Je kunt het later hernoemen.",
"METHOD_URL_LABEL": "M3U-URL",
"METHOD_URL_SUB": "Plak een link naar een externe .m3u of .m3u8",
"METHOD_FILE_LABEL": "M3U-bestand",
"METHOD_FILE_SUB": "Upload een afspeellijst vanaf je computer",
"METHOD_XTREAM_LABEL": "Xtream-inloggegevens",
"METHOD_XTREAM_SUB": "Maak verbinding met host, gebruikersnaam en wachtwoord",
"METHOD_STALKER_LABEL": "Stalker-portaal",
"METHOD_STALKER_SUB": "MAC-adres en portal-URL",
"METHOD_TEXT_LABEL": "Ruwe m3u-tekst",
"METHOD_TEXT_SUB": "Voor eenmalige lijsten of als je alleen tekst hebt"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Wybierz sposób połączenia. Nazwę można zmienić później.",
"METHOD_URL_LABEL": "Adres URL M3U",
"METHOD_URL_SUB": "Wklej link do zdalnego pliku .m3u lub .m3u8",
"METHOD_FILE_LABEL": "Plik M3U",
"METHOD_FILE_SUB": "Prześlij listę odtwarzania z komputera",
"METHOD_XTREAM_LABEL": "Dane logowania Xtream",
"METHOD_XTREAM_SUB": "Połącz przy użyciu hosta, nazwy użytkownika i hasła",
"METHOD_STALKER_LABEL": "Portal Stalker",
"METHOD_STALKER_SUB": "Adres MAC i URL portalu",
"METHOD_TEXT_LABEL": "Surowy tekst m3u",
"METHOD_TEXT_SUB": "Do jednorazowych list lub gdy dostępny jest tylko tekst"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Escolha como você quer se conectar. Você pode renomeá-la depois.",
"METHOD_URL_LABEL": "URL M3U",
"METHOD_URL_SUB": "Cole um link para um arquivo .m3u ou .m3u8 remoto",
"METHOD_FILE_LABEL": "Arquivo M3U",
"METHOD_FILE_SUB": "Envie uma playlist do seu computador",
"METHOD_XTREAM_LABEL": "Credenciais Xtream",
"METHOD_XTREAM_SUB": "Conecte-se com host, nome de usuário e senha",
"METHOD_STALKER_LABEL": "Portal Stalker",
"METHOD_STALKER_SUB": "Endereço MAC e URL do portal",
"METHOD_TEXT_LABEL": "Texto m3u bruto",
"METHOD_TEXT_SUB": "Para listas pontuais ou quando você só tem o texto"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Выберите способ подключения. Переименовать плейлист можно позже.",
"METHOD_URL_LABEL": "M3U URL",
"METHOD_URL_SUB": "Вставьте ссылку на удалённый файл .m3u или .m3u8",
"METHOD_FILE_LABEL": "Файл M3U",
"METHOD_FILE_SUB": "Загрузите плейлист с вашего компьютера",
"METHOD_XTREAM_LABEL": "Учётные данные Xtream",
"METHOD_XTREAM_SUB": "Подключение через сервер, имя пользователя и пароль",
"METHOD_STALKER_LABEL": "Stalker портал",
"METHOD_STALKER_SUB": "MAC-адрес и URL портала",
"METHOD_TEXT_LABEL": "M3U текстом",
"METHOD_TEXT_SUB": "Для разовых плейлистов или когда есть только текст"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "Nasıl bağlanmak istediğinizi seçin. Daha sonra yeniden adlandırabilirsiniz.",
"METHOD_URL_LABEL": "M3U URL",
"METHOD_URL_SUB": "Uzak bir .m3u veya .m3u8 bağlantısını yapıştırın",
"METHOD_FILE_LABEL": "M3U dosyası",
"METHOD_FILE_SUB": "Bilgisayarınızdan bir oynatma listesi yükleyin",
"METHOD_XTREAM_LABEL": "Xtream kimlik bilgileri",
"METHOD_XTREAM_SUB": "Sunucu, kullanıcı adı ve parola ile bağlanın",
"METHOD_STALKER_LABEL": "Stalker portalı",
"METHOD_STALKER_SUB": "MAC adresi ve portal URL'si",
"METHOD_TEXT_LABEL": "Ham m3u metni",
"METHOD_TEXT_SUB": "Tek seferlik listeler veya yalnızca metniniz olduğunda"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "选择您想要的连接方式。稍后可以重命名。",
"METHOD_URL_LABEL": "M3U URL",
"METHOD_URL_SUB": "粘贴远程 .m3u 或 .m3u8 的链接",
"METHOD_FILE_LABEL": "M3U 文件",
"METHOD_FILE_SUB": "从您的电脑上传播放列表",
"METHOD_XTREAM_LABEL": "Xtream 凭据",
"METHOD_XTREAM_SUB": "使用主机、用户名和密码连接",
"METHOD_STALKER_LABEL": "Stalker 门户",
"METHOD_STALKER_SUB": "MAC 地址和门户 URL",
"METHOD_TEXT_LABEL": "原始 m3u 文本",
"METHOD_TEXT_SUB": "用于一次性列表,或仅有文本时"
},
"FILE_UPLOAD": {
+5
View File
@@ -130,10 +130,15 @@
},
"ADD_PLAYLIST": {
"PICK_METHOD": "請選擇您要使用的連線方式,之後仍可重新命名。",
"METHOD_URL_LABEL": "M3U URL",
"METHOD_URL_SUB": "貼上遠端 .m3u 或 .m3u8 的連結",
"METHOD_FILE_LABEL": "M3U 檔案",
"METHOD_FILE_SUB": "從您的電腦上傳播放清單",
"METHOD_XTREAM_LABEL": "Xtream 帳號",
"METHOD_XTREAM_SUB": "使用主機位址、帳號和密碼連線",
"METHOD_STALKER_LABEL": "Stalker 入口網站",
"METHOD_STALKER_SUB": "MAC 位址與入口網址",
"METHOD_TEXT_LABEL": "M3U 原始文字",
"METHOD_TEXT_SUB": "適合一次性清單,或您只有文字內容時使用"
},
"FILE_UPLOAD": {
@@ -57,15 +57,20 @@
background: var(--apd-segment-track);
border: 1px solid var(--apd-border);
border-radius: 10px;
padding: 12px 12px 14px;
padding: 10px 11px 12px;
display: flex;
flex-direction: column;
gap: 6px;
gap: 5px;
cursor: pointer;
text-align: left;
font: inherit;
color: var(--apd-heading);
min-width: 0;
// Locks every card to the same height regardless of which has the
// longest subtitle. Without this the URL card (short text) collapses
// and the Stalker/Xtream cards (longer text) push tall — selection
// states then look visually inconsistent.
min-height: 132px;
transition:
background-color 160ms ease,
border-color 160ms ease,
@@ -75,36 +75,39 @@ export class AddPlaylistDialogComponent {
// Order matches the v0.22 mockup left-to-right: URL first (Most common),
// then File, Xtream credentials, Stalker portal, raw text paste. Each
// entry stands on its own — no nested subtypes.
// entry stands on its own — no nested subtypes. Labels are short and
// sentence-cased; the "Add via …" / "Add Xtreme Code" wording from the
// old tab labels is redundant inside a dialog already titled "Add
// playlist".
readonly methodOptions: PlaylistMethodOption[] = [
{
value: 'url',
icon: 'public',
labelKey: 'HOME.TABS.URL_UPLOAD',
labelKey: 'HOME.ADD_PLAYLIST.METHOD_URL_LABEL',
subKey: 'HOME.ADD_PLAYLIST.METHOD_URL_SUB',
},
{
value: 'file',
icon: 'folder_open',
labelKey: 'HOME.TABS.FILE_UPLOAD',
labelKey: 'HOME.ADD_PLAYLIST.METHOD_FILE_LABEL',
subKey: 'HOME.ADD_PLAYLIST.METHOD_FILE_SUB',
},
{
value: 'xtream',
icon: 'vpn_key',
labelKey: 'HOME.TABS.XTREME_IMPORT',
labelKey: 'HOME.ADD_PLAYLIST.METHOD_XTREAM_LABEL',
subKey: 'HOME.ADD_PLAYLIST.METHOD_XTREAM_SUB',
},
{
value: 'stalker',
icon: 'cast',
labelKey: 'HOME.TABS.STALKER_PORTAL_IMPORT',
labelKey: 'HOME.ADD_PLAYLIST.METHOD_STALKER_LABEL',
subKey: 'HOME.ADD_PLAYLIST.METHOD_STALKER_SUB',
},
{
value: 'text',
icon: 'subject',
labelKey: 'HOME.TABS.TEXT_IMPORT',
labelKey: 'HOME.ADD_PLAYLIST.METHOD_TEXT_LABEL',
subKey: 'HOME.ADD_PLAYLIST.METHOD_TEXT_SUB',
},
];