From 21fe51e73b48a8a1a92007f0a0b12584bd0173f7 Mon Sep 17 00:00:00 2001 From: 4gray Date: Fri, 1 May 2026 22:55:17 +0200 Subject: [PATCH] fix(ui): redesign EPG no-data empty state to match app pattern MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the dashed-bordered "Ooops" placeholder in the EPG side panel (rendered when the selected date has no programmes) with the icon + title + hint pattern already used by groups view, season container, and portal empty states. The dashed border was a visual outlier — every other empty state in the codebase is borderless, and a dashed stroke conventionally signals a drop-zone or "add new" affordance, neither of which applies to a passive informational state. The new layout uses a 48px event_busy icon at 0.5 opacity, a 1.05rem title, and a 0.85rem hint at 0.65 opacity, centered in the panel via flex. Soften the EN microcopy ("Ooops, EPG is not available for the selected date" -> "No program guide", which also fixes the "Ooops" typo) and add a NO_GUIDE_HINT key with localized strings across all 18 locales, nudging the user toward the date arrows or playlist refresh. Co-Authored-By: Claude Opus 4.7 (1M context) Entire-Checkpoint: 4bfb62f988b7 --- apps/web/src/assets/i18n/ar.json | 1 + apps/web/src/assets/i18n/ary.json | 1 + apps/web/src/assets/i18n/by.json | 1 + apps/web/src/assets/i18n/de.json | 1 + apps/web/src/assets/i18n/el.json | 1 + apps/web/src/assets/i18n/en.json | 3 +- apps/web/src/assets/i18n/es.json | 1 + apps/web/src/assets/i18n/fr.json | 1 + apps/web/src/assets/i18n/it.json | 1 + apps/web/src/assets/i18n/ja.json | 1 + apps/web/src/assets/i18n/ko.json | 1 + apps/web/src/assets/i18n/nl.json | 1 + apps/web/src/assets/i18n/pl.json | 1 + apps/web/src/assets/i18n/pt.json | 1 + apps/web/src/assets/i18n/ru.json | 1 + apps/web/src/assets/i18n/tr.json | 1 + apps/web/src/assets/i18n/zh.json | 1 + apps/web/src/assets/i18n/zhtw.json | 1 + .../src/lib/epg-list/epg-list.component.scss | 38 ++++++++++++++++--- 19 files changed, 51 insertions(+), 7 deletions(-) diff --git a/apps/web/src/assets/i18n/ar.json b/apps/web/src/assets/i18n/ar.json index d789c192b..778f4a4de 100644 --- a/apps/web/src/assets/i18n/ar.json +++ b/apps/web/src/assets/i18n/ar.json @@ -255,6 +255,7 @@ "LIVE_STREAM": "بث مباشر", "TIMESHIFT_AVAILABLE": "التحريك الزمني متاح، انقر للتشغيل", "EPG_NOT_AVAILABLE_DATE": "عذراً، الدليل غير متاح لهذا التاريخ", + "NO_GUIDE_HINT": "جرب تاريخاً آخر أو حدّث قائمة التشغيل.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "عذراً، الدليل غير متاح لهذه القناة", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "يرجى إضافة/تعديل رابط EPG في إعدادات التطبيق.", "FETCH_EPG": "جارٍ جلب بيانات EPG...", diff --git a/apps/web/src/assets/i18n/ary.json b/apps/web/src/assets/i18n/ary.json index fac318e97..6e98c9c85 100644 --- a/apps/web/src/assets/i18n/ary.json +++ b/apps/web/src/assets/i18n/ary.json @@ -247,6 +247,7 @@ "LIVE_STREAM": "بث مباشر", "TIMESHIFT_AVAILABLE": "التأجيل الزمني متوفر، ضغط باش تلعب", "EPG_NOT_AVAILABLE_DATE": "أوه، EPG ما متوفرش للتاريخ اللي اختاريتيه", + "NO_GUIDE_HINT": "جرب تاريخ آخر أو حدّث اللائحة.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "أوه، EPG ما متوفرش لهاد القناة.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "عفاك زيد/بدل رابط قائمة EPG في إعدادات التطبيق.", "FETCH_EPG": "جاري جلب بيانات EPG...", diff --git a/apps/web/src/assets/i18n/by.json b/apps/web/src/assets/i18n/by.json index 99cbdc583..d1d82cbfa 100644 --- a/apps/web/src/assets/i18n/by.json +++ b/apps/web/src/assets/i18n/by.json @@ -244,6 +244,7 @@ "LIVE_STREAM": "Прамая трансляцыя", "TIMESHIFT_AVAILABLE": "Даступная функцыя архіва (timeshift). Націсніце на перадачу для прайгравання.", "EPG_NOT_AVAILABLE_DATE": "Ой, праграма на гэты дзень, на жаль, адсутнічае.", + "NO_GUIDE_HINT": "Паспрабуйце іншую дату або абнавіце плэйліст.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Праграма для гэтага канала недаступная.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Паспрабуйце змяніць або абнавіць спасылку на EPG у наладах праграмы.", "FETCH_EPG": "Загружаю праграму ТБ-перадач (EPG)...", diff --git a/apps/web/src/assets/i18n/de.json b/apps/web/src/assets/i18n/de.json index 21757fc96..1d849ed70 100644 --- a/apps/web/src/assets/i18n/de.json +++ b/apps/web/src/assets/i18n/de.json @@ -37,6 +37,7 @@ "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Versuchen Sie bitte die TV-Guide Einstellungen zu ändern.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ups, leider ist das TV-Programm nicht verfügbar.", "EPG_NOT_AVAILABLE_DATE": "Ups, leider ist das TV-Programm für das ausgewählte Datum nicht verfügbar", + "NO_GUIDE_HINT": "Versuchen Sie ein anderes Datum oder aktualisieren Sie die Playlist.", "LIVE_NOW": "Live jetzt", "LIVE_STREAM": "Live stream", "NEXT_DAY": "Zum nächsten Tag", diff --git a/apps/web/src/assets/i18n/el.json b/apps/web/src/assets/i18n/el.json index 009601922..b046fcd20 100644 --- a/apps/web/src/assets/i18n/el.json +++ b/apps/web/src/assets/i18n/el.json @@ -301,6 +301,7 @@ "LIVE_STREAM": "Ζωντανή ροή", "TIMESHIFT_AVAILABLE": "Η χρονική μετατόπιση είναι διαθέσιμη, κάντε κλικ για αναπαραγωγή.", "EPG_NOT_AVAILABLE_DATE": "Ωχ, το EPG δεν είναι διαθέσιμο για την επιλεγμένη ημερομηνία", + "NO_GUIDE_HINT": "Δοκιμάστε άλλη ημερομηνία ή ανανεώστε τη λίστα αναπαραγωγής.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ωχ, το EPG δεν είναι διαθέσιμο για αυτό το κανάλι.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Προσθέστε/αλλάξτε τη διεύθυνση URL της λίστας EPG στις ρυθμίσεις της εφαρμογής.", "FETCH_EPG": "Ανάκτηση δεδομένων EPG...", diff --git a/apps/web/src/assets/i18n/en.json b/apps/web/src/assets/i18n/en.json index b1b1b0385..804235c7e 100644 --- a/apps/web/src/assets/i18n/en.json +++ b/apps/web/src/assets/i18n/en.json @@ -437,7 +437,8 @@ "TIMESHIFT_AVAILABLE": "Timeshift is available, click to play", "ARCHIVE_PLAYBACK_UNAVAILABLE_TITLE": "Archive playback is unavailable", "ARCHIVE_PLAYBACK_UNAVAILABLE_DESCRIPTION": "This provider exposes schedule history for the channel, but does not expose playable archive/catch-up playback.", - "EPG_NOT_AVAILABLE_DATE": "Ooops, EPG is not available for the selected date", + "EPG_NOT_AVAILABLE_DATE": "No program guide", + "NO_GUIDE_HINT": "Try a different date or refresh the playlist.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ooops, EPG is not available for this channel.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Please add/change the URL of the EPG list in the settings of the app.", "FETCH_EPG": "Fetching EPG data...", diff --git a/apps/web/src/assets/i18n/es.json b/apps/web/src/assets/i18n/es.json index e3ab248c7..fe8ff24a7 100644 --- a/apps/web/src/assets/i18n/es.json +++ b/apps/web/src/assets/i18n/es.json @@ -272,6 +272,7 @@ "LIVE_STREAM": "Transmisión en vivo", "TIMESHIFT_AVAILABLE": "Timeshift está disponible, clic para reproducir", "EPG_NOT_AVAILABLE_DATE": "Vaya, no está disponible la EPG de esa fecha", + "NO_GUIDE_HINT": "Prueba otra fecha o actualiza la lista de reproducción.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Vaya, no está disponible la EPG del canal.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Por favor añada/cargue la url de la lista EPG en los ajustes de la app.", "FETCH_EPG": "Obteniendo datos de EPG...", diff --git a/apps/web/src/assets/i18n/fr.json b/apps/web/src/assets/i18n/fr.json index 7d14013a4..b6046a432 100644 --- a/apps/web/src/assets/i18n/fr.json +++ b/apps/web/src/assets/i18n/fr.json @@ -269,6 +269,7 @@ "LIVE_STREAM": "Diffusion en direct", "TIMESHIFT_AVAILABLE": "Contrôle du direct disponible, cliquez pour lire", "EPG_NOT_AVAILABLE_DATE": "L'EPG n'est pas disponible pour la date sélectionnée", + "NO_GUIDE_HINT": "Essayez une autre date ou actualisez la playlist.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "L'EPG n'est pas disponible pour cette chaîne.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Veuillez ajouter/modifier l'URL de la liste EPG dans les réglages de l'application.", "FETCH_EPG": "Récupération des données EPG...", diff --git a/apps/web/src/assets/i18n/it.json b/apps/web/src/assets/i18n/it.json index 86d6aa8ec..06183351f 100644 --- a/apps/web/src/assets/i18n/it.json +++ b/apps/web/src/assets/i18n/it.json @@ -289,6 +289,7 @@ "LIVE_STREAM": "Stream live", "TIMESHIFT_AVAILABLE": "Disponibile il timeshift, fai clic per riprodurre", "EPG_NOT_AVAILABLE_DATE": "Non è disponibile l'EPG per la data selezionata", + "NO_GUIDE_HINT": "Prova una data diversa o aggiorna la playlist.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Non è disponibile l'EPG per questo canale.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Aggiungi/modifica l'URL dell'elenco EPG nelle impostazioni dell'app.", "FETCH_EPG": "Recupero dati EPG...", diff --git a/apps/web/src/assets/i18n/ja.json b/apps/web/src/assets/i18n/ja.json index ba1ad5d47..bad546d8d 100644 --- a/apps/web/src/assets/i18n/ja.json +++ b/apps/web/src/assets/i18n/ja.json @@ -235,6 +235,7 @@ "LIVE_STREAM": "ライブストリーム", "TIMESHIFT_AVAILABLE": "タイムシフトが利用可能です。クリックして再生", "EPG_NOT_AVAILABLE_DATE": "申し訳ありません。選択した日付のEPGは利用できません", + "NO_GUIDE_HINT": "別の日付を試すか、プレイリストを更新してください。", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "申し訳ありません。このチャンネルのEPGは利用できません。", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "アプリの設定でEPGリストのURLを追加/変更してください。", "FETCH_EPG": "EPGデータを取得中...", diff --git a/apps/web/src/assets/i18n/ko.json b/apps/web/src/assets/i18n/ko.json index aa93ee9a5..562ad20a1 100644 --- a/apps/web/src/assets/i18n/ko.json +++ b/apps/web/src/assets/i18n/ko.json @@ -201,6 +201,7 @@ "LIVE_STREAM": "Live stream", "TIMESHIFT_AVAILABLE": "Timeshift를 사용할 수 있습니다, 클릭하여 재생합니다", "EPG_NOT_AVAILABLE_DATE": "선택한 날짜에는 EPG를 사용할 수 없습니다.", + "NO_GUIDE_HINT": "다른 날짜를 시도하거나 재생 목록을 새로 고치세요.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "이 채널에는 EPG를 사용할 수 없습니다.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "설정에서 EPG의 URL을 추가/변경하십시오.", "FETCH_EPG": "EPG 데이터 가져 오기...", diff --git a/apps/web/src/assets/i18n/nl.json b/apps/web/src/assets/i18n/nl.json index e905bca05..8a3bfba72 100644 --- a/apps/web/src/assets/i18n/nl.json +++ b/apps/web/src/assets/i18n/nl.json @@ -247,6 +247,7 @@ "LIVE_STREAM": "Live stream", "TIMESHIFT_AVAILABLE": "Doorspoelen is beschikbaar, klik om af te spelen", "EPG_NOT_AVAILABLE_DATE": "De TV-Gids is niet beschikbaar voor de geselecteerde datum", + "NO_GUIDE_HINT": "Probeer een andere datum of vernieuw de afspeellijst.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "De TV-Gids is niet beschikbaar voor dit kanaal.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Voeg een TV-Gids URL toe of wijzig deze in de instellingen van de app.", "FETCH_EPG": "Ophalen TV-Gids...", diff --git a/apps/web/src/assets/i18n/pl.json b/apps/web/src/assets/i18n/pl.json index aa7e89a6a..c9cf4e4d7 100644 --- a/apps/web/src/assets/i18n/pl.json +++ b/apps/web/src/assets/i18n/pl.json @@ -247,6 +247,7 @@ "LIVE_STREAM": "Transmisja na żywo", "TIMESHIFT_AVAILABLE": "Dostępne jest przesunięcie czasowe, kliknij, aby odtworzyć", "EPG_NOT_AVAILABLE_DATE": "Ups, EPG nie jest dostępne dla wybranej daty", + "NO_GUIDE_HINT": "Spróbuj innej daty lub odśwież playlistę.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ups, EPG nie jest dostępne dla tego kanału.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Dodaj/zmień URL listy EPG w ustawieniach aplikacji.", "FETCH_EPG": "Pobieranie danych EPG...", diff --git a/apps/web/src/assets/i18n/pt.json b/apps/web/src/assets/i18n/pt.json index 5909795e3..00fd0eb76 100644 --- a/apps/web/src/assets/i18n/pt.json +++ b/apps/web/src/assets/i18n/pt.json @@ -266,6 +266,7 @@ "LIVE_STREAM": "Transmissão ao vivo", "TIMESHIFT_AVAILABLE": "Timeshift está disponível, clique para reproduzir", "EPG_NOT_AVAILABLE_DATE": "Ooops, EPG não está disponível para a data selecionada", + "NO_GUIDE_HINT": "Tente uma data diferente ou atualize a lista de reprodução.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Ooops, EPG não está disponível para este canal.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Adicione/altere a URL da lista de EPG nas configurações do aplicativo.", "FETCH_EPG": "Buscando dados do EPG...", diff --git a/apps/web/src/assets/i18n/ru.json b/apps/web/src/assets/i18n/ru.json index bebc7463b..1013a1afc 100644 --- a/apps/web/src/assets/i18n/ru.json +++ b/apps/web/src/assets/i18n/ru.json @@ -346,6 +346,7 @@ "LIVE_STREAM": "Прямая трансляция", "TIMESHIFT_AVAILABLE": "Доступна функция архива (timeshift). Нажмите на передачу для воспроизведения.", "EPG_NOT_AVAILABLE_DATE": "Ой, программа на этот день, к сожалению, отсутствует.", + "NO_GUIDE_HINT": "Попробуйте другую дату или обновите плейлист.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Программа для этого канала недоступна.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Попробуйте изменить или обновить ссылку на EPG в настройках приложения.", "FETCH_EPG": "Загружаю программу ТВ-передач (EPG)...", diff --git a/apps/web/src/assets/i18n/tr.json b/apps/web/src/assets/i18n/tr.json index 1b0713f08..79a4fab90 100644 --- a/apps/web/src/assets/i18n/tr.json +++ b/apps/web/src/assets/i18n/tr.json @@ -309,6 +309,7 @@ "LIVE_STREAM": "Canlı yayın", "TIMESHIFT_AVAILABLE": "Zaman kaydırma mevcut, tıklayarak oynat", "EPG_NOT_AVAILABLE_DATE": "Üzgünüz, seçilen tarih için EPG mevcut değil", + "NO_GUIDE_HINT": "Başka bir tarih deneyin veya oynatma listesini yenileyin.", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "Üzgünüz, bu kanal için EPG mevcut değil.", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "Lütfen uygulamanın ayarlarında EPG listesi URL'sini ekleyin veya değiştirin.", "FETCH_EPG": "EPG verileri alınıyor...", diff --git a/apps/web/src/assets/i18n/zh.json b/apps/web/src/assets/i18n/zh.json index 4029926cf..6887e4f47 100644 --- a/apps/web/src/assets/i18n/zh.json +++ b/apps/web/src/assets/i18n/zh.json @@ -201,6 +201,7 @@ "LIVE_STREAM": "正在直播", "TIMESHIFT_AVAILABLE": "时移功能可用，点击播放", "EPG_NOT_AVAILABLE_DATE": "错误：电子节目单EPG在所选日期不可用", + "NO_GUIDE_HINT": "尝试其他日期或刷新播放列表。", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "错误：电子节目单EPG不适用于此频道", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "请添加/更改设置项中电子节目单的URL", "FETCH_EPG": "获取 EPG 数据...", diff --git a/apps/web/src/assets/i18n/zhtw.json b/apps/web/src/assets/i18n/zhtw.json index c557c94de..a6e2ef823 100644 --- a/apps/web/src/assets/i18n/zhtw.json +++ b/apps/web/src/assets/i18n/zhtw.json @@ -247,6 +247,7 @@ "LIVE_STREAM": "現場直播", "TIMESHIFT_AVAILABLE": "時間平移功能可用，點選以播放", "EPG_NOT_AVAILABLE_DATE": "抱歉，選擇的日期上 EPG 無法使用", + "NO_GUIDE_HINT": "嘗試其他日期或重新整理播放清單。", "EPG_NOT_AVAILABLE_CHANNEL_TITLE": "抱歉，此頻道上的 EPG 無法使用。", "EPG_NOT_AVAILABLE_CHANNEL_DESCRIPTION": "請在應用程式設定中增加/更改 EPG 列表的URL。", "FETCH_EPG": "取得 EPG 資料...", diff --git a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss index 35ed5805c..148f00779 100644 --- a/libs/ui/epg/src/lib/epg-list/epg-list.component.scss +++ b/libs/ui/epg/src/lib/epg-list/epg-list.component.scss @@ -208,12 +208,38 @@ transition: width 0.35s ease; } -.epg-not-available { - margin: auto 10px; - padding: 22px; - border: 1px dashed var(--app-separator); - border-radius: 12px; +.epg-empty-state { + flex: 1; + min-height: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 40px 24px; text-align: center; - font-size: 0.88rem; color: var(--app-muted-color); + + .empty-state-icon { + width: 48px; + height: 48px; + font-size: 48px; + opacity: 0.5; + margin-bottom: 16px; + } + + .empty-state-title { + font-size: 1.05rem; + font-weight: 520; + letter-spacing: -0.01em; + margin-bottom: 8px; + text-wrap: balance; + } + + .empty-state-hint { + opacity: 0.65; + font-size: 0.85rem; + max-width: 240px; + line-height: 1.4; + text-wrap: pretty; + } }