{"id":47685961,"url":"https://github.com/rusty4444/coming-soon-card","last_synced_at":"2026-04-21T14:01:03.928Z","repository":{"id":347242888,"uuid":"1193310669","full_name":"rusty4444/coming-soon-card","owner":"rusty4444","description":"A cinematic Home Assistant card showing upcoming movies and TV episodes from Radarr and Sonarr","archived":false,"fork":false,"pushed_at":"2026-03-27T09:34:32.000Z","size":77,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-03T02:23:20.937Z","etag":null,"topics":["coming-soon","custom-card","hacs","home-assistant","home-assistant-frontend","lovelace","radarr","sonarr"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rusty4444.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-27T04:53:12.000Z","updated_at":"2026-03-30T20:30:36.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/rusty4444/coming-soon-card","commit_stats":null,"previous_names":["rusty4444/coming-soon-card"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/rusty4444/coming-soon-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rusty4444%2Fcoming-soon-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rusty4444%2Fcoming-soon-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rusty4444%2Fcoming-soon-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rusty4444%2Fcoming-soon-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rusty4444","download_url":"https://codeload.github.com/rusty4444/coming-soon-card/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rusty4444%2Fcoming-soon-card/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32095160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T11:25:29.218Z","status":"ssl_error","status_checked_at":"2026-04-21T11:25:28.499Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["coming-soon","custom-card","hacs","home-assistant","home-assistant-frontend","lovelace","radarr","sonarr"],"created_at":"2026-04-02T14:50:11.545Z","updated_at":"2026-04-21T14:01:03.918Z","avatar_url":"https://github.com/rusty4444.png","language":null,"funding_links":["https://buymeacoffee.com/rusty4"],"categories":["Others"],"sub_categories":[],"readme":"# Coming Soon Card\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://buymeacoffee.com/rusty4\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" height=\"50\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n\nA cinematic Home Assistant card that displays upcoming movies and TV episodes from **Radarr/Sonarr** and/or **Trakt**. Multiple layout options, themes, countdown timers, swipe navigation, and trailer playback.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/coming-soon-card.jpg\" alt=\"Coming Soon Card — Poster Layout\" width=\"400\"\u003e\n\u003c/p\u003e\n\n## Features\n\n- **Multiple data sources** — Radarr + Sonarr, Trakt, or both combined\n- **Upcoming movies** with digital release dates\n- **Upcoming TV episodes** with air dates and season/episode numbers\n- **Days offset** — optionally include items released up to N days ago\n- **Themes** — 9 colour presets including Plex, Kodi, Jellyfin, Emby, Midnight, Sunset, Forest\n- **Multiple layouts** — centred poster or detailed view with poster + info side-by-side\n- **Image type toggle** — choose between poster art or key art/fanart\n- **Countdown timer** — \"In 5 days\", \"Tomorrow\", \"Today\"\n- **Formatted release date** — \"8th of April 2026\"\n- **Swipe navigation** — swipe or click-and-drag left/right to move through items\n- **Blurred background art** — cinematic fanart behind the card content\n- **Trailer button** — plays trailers via TMDB (optional, requires free API key)\n- **Trailer mode** — play inline on the card or as a fullscreen popup\n- **Auto-cycling** — rotates through upcoming items with smooth transitions\n- **Color-coded dots** — primary accent for movies, secondary for TV\n- **Visual editor** — configure everything from the HA UI, no YAML needed\n- **Responsive** — poster scales to fit any card width\n- **Filters past releases** — only shows items not yet downloaded\n- **Deduplicates TV shows** — only shows the next upcoming episode per series\n\n---\n\n## Layouts\n\n### Poster (centred)\nThe default layout — poster front and centre with title, countdown, and release date overlaid at the bottom.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/coming-soon-card.jpg\" alt=\"Poster Layout\" width=\"400\"\u003e\n\u003c/p\u003e\n\n### Detailed (poster + info)\nPoster on the left with full details on the right — title, episode info, countdown, release date, and synopsis.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/layout-fanart.jpg\" alt=\"Fanart Layout\" width=\"500\"\u003e\n\u003c/p\u003e\n\n### Key Art / Fanart\nSwitch from portrait poster art to landscape key art/fanart for a more cinematic look.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/layout-poster.jpg\" alt=\"Detailed + Key Art Layout\" width=\"500\"\u003e\n\u003c/p\u003e\n\n### Detailed + Key Art\nCombine detailed layout with fanart for a full info view with landscape key art.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/layout-detailed.jpg\" alt=\"Detailed Layout\" width=\"500\"\u003e\n\u003c/p\u003e\n\n---\n\n## Install via HACS (Recommended)\n\n1. Open **HACS** in Home Assistant\n2. Click the **three dots** menu (top right) → **Custom repositories**\n3. Paste `https://github.com/rusty4444/coming-soon-card` and select **Dashboard** as the category\n4. Click **Add**\n5. Search for **Coming Soon Card** in HACS → **Download**\n6. Refresh your browser (Ctrl+Shift+R)\n\n## Install Manually\n\n1. Download `coming-soon-card.js` from the [latest release](https://github.com/rusty4444/coming-soon-card/releases)\n2. Copy it to `/config/www/coming-soon-card.js`\n3. Go to **Settings → Dashboards → Resources** and add:\n   - URL: `/local/coming-soon-card.js`\n   - Type: JavaScript Module\n4. Refresh your browser\n\n---\n\n## Visual Editor\n\nThe card includes a built-in visual editor. When you add or edit the card, you'll see a graphical form instead of raw YAML.\n\nYou can still use YAML if you prefer — click \"Show code editor\" at the bottom of the editor.\n\n---\n\n## Configuration\n\nSearch for the card by name in the **Add Card** dialog — you can configure everything using the visual editor.\n\nOr add a **Manual card** with YAML (examples below).\n\n### Radarr + Sonarr\n\n```yaml\ntype: custom:coming-soon-card\nradarr_url: http://YOUR_RADARR_IP:7878\nradarr_api_key: YOUR_RADARR_API_KEY\nsonarr_url: http://YOUR_SONARR_IP:8989\nsonarr_api_key: YOUR_SONARR_API_KEY\nmovies_count: 5\nshows_count: 5\ncycle_interval: 8\ntitle: Coming Soon\ntheme: auto\ndays_offset: 0\ntmdb_api_key: YOUR_TMDB_READ_ACCESS_TOKEN  # Optional: enables trailers\n```\n\n### Trakt only\n\n```yaml\ntype: custom:coming-soon-card\ntrakt_api_key: YOUR_TRAKT_CLIENT_ID\ntrakt_access_token: YOUR_TRAKT_ACCESS_TOKEN  # Optional: for private calendar\nmovies_count: 5\nshows_count: 5\ncycle_interval: 8\ntitle: Coming Soon\ntmdb_api_key: YOUR_TMDB_READ_ACCESS_TOKEN  # Optional: enables posters and trailers\n```\n\n### Trakt + Radarr/Sonarr combined\n\n```yaml\ntype: custom:coming-soon-card\nradarr_url: http://YOUR_RADARR_IP:7878\nradarr_api_key: YOUR_RADARR_API_KEY\nsonarr_url: http://YOUR_SONARR_IP:8989\nsonarr_api_key: YOUR_SONARR_API_KEY\ntrakt_api_key: YOUR_TRAKT_CLIENT_ID\ntrakt_access_token: YOUR_TRAKT_ACCESS_TOKEN\nmovies_count: 5\nshows_count: 5\ntmdb_api_key: YOUR_TMDB_READ_ACCESS_TOKEN\n```\n\n---\n\n### Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `radarr_url` | string | — | Radarr server URL (e.g., `http://192.168.1.100:7878`) |\n| `radarr_api_key` | string | — | Radarr API key |\n| `sonarr_url` | string | — | Sonarr server URL (e.g., `http://192.168.1.100:8989`) |\n| `sonarr_api_key` | string | — | Sonarr API key |\n| `trakt_api_key` | string | — | Trakt Client ID — enables Trakt calendar |\n| `trakt_access_token` | string | — | Trakt OAuth access token (for private calendar) |\n| `movies_count` | number | `5` | Number of upcoming movies to display |\n| `shows_count` | number | `5` | Number of upcoming TV episodes to display |\n| `cycle_interval` | number | `8` | Seconds between cycling to the next item |\n| `title` | string | `\"Coming Soon\"` | Header text — set to \"Next Up\" or any custom name |\n| `theme` | string | `\"auto\"` | Colour theme — see [Themes](#themes) section |\n| `layout` | string | `\"poster\"` | `poster` (centred) or `detailed` (poster + info side-by-side) |\n| `image_type` | string | `\"poster\"` | `poster` (portrait art) or `fanart` (landscape key art) |\n| `days_offset` | number | `0` | Include items released up to this many days ago (0 = future only) |\n| `tmdb_api_key` | string | — | TMDB Read Access Token — enables posters (for Trakt) and trailers |\n| `date_format` | string | `\"ordinal\"` | Date format for release/air dates — see table below |\n| `trailer_mode` | string | `\"popup\"` | `popup` (fullscreen overlay) or `inline` (plays on top of card) |\n| `fill_height` | boolean | `true` | Card stretches to fill container. Disable if card appears collapsed |\n| `card_height` | number | `300` | Height in pixels when `fill_height` is `false` |\n\nAt least one data source is required — either Radarr/Sonarr, Trakt, or both.\n\n### Date Formats\n\n| Value | Example | Description |\n|-------|---------|-------------|\n| `ordinal` | 10th of April 2026 | Default — most recognisable worldwide |\n| `short` | 10 Apr 2026 | Compact international format |\n| `us` | Apr 10, 2026 | US short format |\n| `us_long` | April 10, 2026 | US long format |\n| `eu` | 10/04/2026 | EU / Australian numeric format |\n| `iso` | 2026-04-10 | ISO 8601 |\n\n---\n\n## Themes\n\nThe `theme` option controls the accent colours for badges, dots, countdown text, and highlights.\n\n| Theme | Primary | Description |\n|-------|---------|-------------|\n| `auto` | Teal (#2dd4bf) | Default — neutral teal accent |\n| `plex` | Gold (#e5a00d) | Plex's signature gold |\n| `kodi` | Blue (#1da1f2) | Kodi blue |\n| `jellyfin` | Purple (#aa5cc3) | Jellyfin purple |\n| `emby` | Green (#52b54b) | Emby green |\n| `dark` | Grey (#aaaaaa) | Neutral grey |\n| `midnight` | Deep blue (#4f8ef7) | Midnight blue |\n| `sunset` | Orange (#f97316) | Warm sunset tones |\n| `forest` | Green (#22c55e) | Forest green |\n\n---\n\n## Trakt Integration\n\nTrakt shows upcoming movies and TV episodes from your watchlist and followed shows.\n\n### Getting a Trakt Client ID\n1. Sign in at [trakt.tv](https://trakt.tv) and go to **Settings → Your API Apps**\n2. Click **New Application**\n3. Give it a name, set Redirect URI to `urn:ietf:wg:oauth:2.0:oob`, save\n4. Copy the **Client ID** and paste it into `trakt_api_key`\n\n### Getting a Trakt Access Token (optional — for private calendars)\nIf your Trakt profile is public, the Client ID alone is enough. For private profiles:\n1. Use a tool like [Trakt Token Generator](https://steve228uk.github.io/trakt-token-generator/) or the Trakt OAuth flow\n2. Paste the resulting access token into `trakt_access_token`\n\n### How Trakt + TMDB works\nTrakt doesn't provide images. When a TMDB API key is set, the card automatically fetches posters and fanart from TMDB for each Trakt item. Without a TMDB key, items will show a placeholder shimmer.\n\n---\n\n## Days Offset\n\nThe `days_offset` option lets you include items that came out recently but haven't been downloaded yet. For example:\n- `days_offset: 0` — future only (default)\n- `days_offset: 2` — includes anything released in the past 2 days\n- `days_offset: 7` — look back a full week\n\n---\n\n## Layout + Image Type Combinations\n\n| Layout | Image Type | Result |\n|--------|-----------|--------|\n| `poster` | `poster` | Centred portrait poster with info overlaid (default) |\n| `poster` | `fanart` | Centred landscape fanart with info overlaid |\n| `detailed` | `poster` | Poster left, info right — traditional media card look |\n| `detailed` | `fanart` | Fanart on top, info below — cinematic widescreen look |\n\n---\n\n## Finding Your API Keys\n\n**Radarr**: Settings → General → API Key\n\n**Sonarr**: Settings → General → API Key\n\n**TMDB** (for trailers and Trakt poster images):\n1. Create a free account at [themoviedb.org](https://www.themoviedb.org/signup)\n2. Go to [API Settings](https://www.themoviedb.org/settings/api)\n3. Copy either the **API Read Access Token** (the long `eyJ...` token — recommended) **or** the **API Key (v3 auth)** (the 32-character hex string). From v1.2.2 the card auto-detects which one you've supplied.\n\n---\n\n## Swipe Navigation\n\nSwipe left or right on touch devices, or click-and-drag on desktop to move through items. The auto-cycle timer resets after each swipe.\n\n---\n\n## How It Works\n\n- **Radarr/Sonarr**: fetches the calendar API for the next 90 days, filters out downloaded items, and sorts by release date\n- **Trakt**: fetches your personal calendar for the next 90 days, enriches with TMDB images if a key is set\n- When both sources are configured, results are merged and deduplicated by title\n- Items are interleaved: movie, show, movie, show...\n\n---\n\n## Known Issues\n\n- **Geo-restricted trailers**: Some trailers may show \"Video unavailable — The uploader has not made this video available in your country.\" This is a YouTube/TMDB restriction and cannot be fixed by the card.\n\n---\n\n## Related\n\n- [recently-added-media-card](https://github.com/rusty4444/recently-added-media-card) — Recently added movies and TV shows from Plex, Kodi, Jellyfin, or Emby\n\n---\n\n## Credits\n\n- Built by Sam Russell — AI used in development\n- YouTube embed fix based on the approach from [loryanstrant/ha-youtubevideocard](https://github.com/loryanstrant/ha-youtubevideocard) — YouTube IFrame API for Home Assistant\n- Trailer data from [The Movie Database (TMDB)](https://www.themoviedb.org/)\n- Built for the Home Assistant community\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frusty4444%2Fcoming-soon-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frusty4444%2Fcoming-soon-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frusty4444%2Fcoming-soon-card/lists"}