feat(portals): two-state VOD detail pages (browse ↔ watch) with season tabs (#1127)

* feat(ui): slim ContentHero to non-scrolling hero block

The page scroll container moves out of the hero into the upcoming
PortalDetailShellComponent; the hero no longer hosts a default content
slot for player/seasons/extras.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat(ui): add PortalDetailShellComponent with browse/watch states

Two-state detail layout shell: owns page scroll, hero collapse animation
(~300ms, reduced-motion aware), Escape-to-close-player handling, and an
About block that re-stamps host-provided *detailTags/*detailMeta
templates in watch state. The [detail-player] slot is never wrapped in a
shell conditional so the host-owned player subtree survives state
changes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat(playback): restyle inline player header as now-playing bar

Adds a back button (emits the existing closed output — in watch state
back returns to browse, not route navigation) and replaces the
hardcoded header strings with i18n keys (PORTALS.NOW_PLAYING,
CLOSE_PLAYER, BACK_TO_BROWSE).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* refactor(xtream): migrate VOD and serial detail templates to detail shell

Hero chips/meta/actions become *detailTags/*detailMeta/*detailActions
templates; the inline player moves to the full-width [detail-player]
slot; trailer and similar rail move to [detail-extras]. Escape and the
now-playing back button close the inline player back to browse.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* refactor(stalker): migrate shared VodDetails and series view to detail shell

The shared VodDetailsComponent (Stalker VOD, collections, search) and
StalkerSeriesViewComponent move their hero content into
*detailTags/*detailMeta/*detailActions templates and host the inline
player in the full-width [detail-player] slot.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat(ui): season tabs replace two-level seasons navigation

SeasonTabsComponent renders a pill row (dropdown beyond 6 seasons), an
optional season description and a back-to-playing chip. The season
container auto-selects a season (inline-playing episode's season →
most recent in-progress → first), emits seasonSelected for
auto-selections so lazy-load/enrichment hooks keep firing, highlights
the inline-playing episode, and loses the seasons grid + 'Back to
seasons' button. Download/progress helpers move to pure utils; season
strings are now translatable.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat(portals): season descriptions under the season tabs

Xtream reads season overviews from get_series_info; Stalker exposes the
TMDB season overview through TmdbEnrichmentService.getSeason (same
cache rows as the episode enrichment) and keys it per tmdbId so views
reused across detail navigations cannot leak descriptions.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* docs: document two-state detail layout and season tabs

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(ui): app-prefix detail template directive selectors, build fixes

detailTags/detailMeta/detailActions → appDetailTags/appDetailMeta/
appDetailActions per @angular-eslint/directive-selector; type the
Escape host listener as Event; drop a redundant ?? in season tabs.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* chore(i18n): translate new detail-page keys across all 17 locales

13 PORTALS.* keys (now-playing bar, About block, season tabs, episode
empty states) translated via the i18n-fill workflow.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(playback): keep now-playing bar actions inside the viewport

The nowrap title made the header grid track grow to min-content and
pushed Copy/Close out of the page; min-width: 0 on the header/title row
lets the title truncate instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat(ui): expandable season description and episode info dialog

Season descriptions get the same show more/less toggle as the hero
(new shared ExpandableTextComponent); episode cards and list rows get
an info button that opens a dialog with the full plot, duration, air
date and a Play action — card heights stay fixed and click-to-play
semantics stay intact. Also: drop the per-frame backdrop blur on the
player card and make the watch-enter scroll instant so the hero morph
stops competing for frame budget.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(portals): re-run TMDB season enrichment when the show match arrives

With season tabs the first seasonSelected fires as soon as seasons
load — usually before the async show-level TMDB enrichment has written
tmdb_id — so the season fetch silently no-oped and was never retried,
leaving episode stills/plots and the season description empty. Both
detail hosts now key the fetch on (tmdb_id, selected season) in an
effect, so it runs whichever arrives last. Also adds breathing room
above the About divider in watch state.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(ui): move episode info button into the card body, compact overlay actions

Three overlay buttons crowded the thumbnail on hover and the new info
button had no styling at all. Info belongs with the content text: it
now sits as a quiet ghost button at the end of the title row (revealed
on card hover, MDC touch target clamped so it cannot swallow the
play-on-click card area). Download + watched-toggle stay on the
artwork, shrunk to 28px with a subtle edge border. List view already
used the shared action style and is unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(ui): single watched indicator-toggle on episode cards

Watched state was signalled three times on one card: the green badge,
the hover toggle in the top-right cluster, and a checkmark appended to
the title. Now one control does both jobs — a toggle at the top-left
of the artwork that looks like the old green badge when watched
(always visible) and appears as a ghost circle on hover when not.
The right cluster keeps only the download action; the title checkmark
is gone.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat(playback): back arrow in watch mode navigates straight to the list

Leaving the theater took two clicks: back to browse, then back to the
list. Watch state already shows everything browse offers (episodes,
About, extras), so the bar's back arrow is now route-level back
(new backClicked output wired to each host's goBack), while Close
player and Escape keep exiting to browse without navigating. Replaces
PORTALS.BACK_TO_BROWSE with a generic top-level BACK key (all locales).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat(ui): compact episode stills in the list view

When a season has genuinely distinct per-episode art (TMDB stills or
provider images), list rows show a 96x54 thumbnail with the episode
number riding on it instead of the number square. When every episode
repeats the same image (providers often send the series poster), the
plain number square stays — a column of identical posters is worse
than none.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* test(ui): compact list-thumbnail spec under the max-lines limit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(ui): address Greptile review — real fallback asset, untracked overflow measure

default-episode.png never existed (pre-existing in the grid card, copied
into the list thumbs) — both onerror handlers now fall back to the real
default-poster.png. The expandable-text and content-hero measuring
effects read the expanded signal via untracked so toggling show
more/less no longer rebuilds their ResizeObservers.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

libs/services/src/lib/tmdb/tmdb-enrichment.service.ts

@@ -25,6 +25,7 @@ import {
     TmdbEpisode,
     TmdbMovieDetails,
     TmdbPersonDetails,
+    TmdbSeasonDetails,
     TmdbTvDetails,
 } from './tmdb.types';
 
@@ -67,6 +68,18 @@ export class TmdbEnrichmentService {
         return this.season.getSeasonEpisodes(tmdbId, seasonNumber);
     }
 
+    /**
+     * Full season payload (overview + episodes) in the app language, using
+     * the same cache rows as `getSeasonEpisodes`. Returns `null` when
+     * enrichment is off or the request fails.
+     */
+    async getSeason(
+        tmdbId: number,
+        seasonNumber: number
+    ): Promise<TmdbSeasonDetails | null> {
+        return this.season.getSeason(tmdbId, seasonNumber);
+    }
+
     async getPersonDetails(
         personId: number
     ): Promise<TmdbPersonDetails | null> {

libs/services/src/lib/tmdb/tmdb-season.service.ts

@@ -6,10 +6,10 @@ import { TmdbRuntimeService } from './tmdb-runtime.service';
 import { TmdbEpisode, TmdbSeasonDetails } from './tmdb.types';
 
 /**
- * Episode list of one season (names, overviews, stills, air dates) in the
- * app language. Fetched lazily when a season is opened and cached like
- * details payloads. Returns `null` when enrichment is off or the request
- * fails — episode lists then stay provider-only.
+ * Season payloads (overview + episode list with names, overviews, stills,
+ * air dates) in the app language. Fetched lazily when a season is opened
+ * and cached like details payloads. Returns `null` when enrichment is off
+ * or the request fails — season data then stays provider-only.
  */
 @Injectable({ providedIn: 'root' })
 export class TmdbSeasonService {
@@ -21,6 +21,15 @@ export class TmdbSeasonService {
         tmdbId: number,
         seasonNumber: number
     ): Promise<TmdbEpisode[] | null> {
+        const season = await this.getSeason(tmdbId, seasonNumber);
+        return season ? (season.episodes ?? []) : null;
+    }
+
+    /** Full season payload (overview + episodes), same cache rows. */
+    async getSeason(
+        tmdbId: number,
+        seasonNumber: number
+    ): Promise<TmdbSeasonDetails | null> {
         if (!this.runtime.isEnabled()) {
             return null;
         }
@@ -35,10 +44,7 @@ export class TmdbSeasonService {
                 cached?.payload
             ) {
                 try {
-                    const season = JSON.parse(
-                        cached.payload
-                    ) as TmdbSeasonDetails;
-                    return season.episodes ?? [];
+                    return JSON.parse(cached.payload) as TmdbSeasonDetails;
                 } catch {
                     // Corrupt cache row — fall through to a fresh fetch
                 }
@@ -59,7 +65,7 @@ export class TmdbSeasonService {
                 payload: JSON.stringify(season),
             });
 
-            return season.episodes ?? [];
+            return season;
         } catch (error) {
             console.warn('TMDB season enrichment failed:', error);
             return null;

libs/services/src/lib/tmdb/tmdb.types.ts

@@ -99,6 +99,7 @@ export interface TmdbEpisode {
 
 export interface TmdbSeasonDetails {
     season_number?: number;
+    overview?: string;
     episodes?: TmdbEpisode[];
 }