Added ability to load images from external source.

README.md

@@ -52,6 +52,7 @@ Media Tracker Card can be installed through [HACS][hacs] (Home Assistant Communi
 | entities                 | `list(required)`    | A list of entity IDs or entity objects, see below.                  |
 | number_of_days           | `integer(required)` | How many days ahead you want to fetch.                              |
 | constrict_height         | `boolean`           | Sets a predetermined card height and adds an inline scroll.         |
+| external_media           | `boolean`           | Fetches media/images from an external source.                       |
 | refresh_interval         | `integer(required)` | How often the calendar should refresh.                              |
 | show_description         | `boolean`           | Show calendar entry description if returned from `mediatracker-ha`. |
 | human_readable_countdown | `boolean`           | Show human readable countdown next to day name.                     |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediatracker-card",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "This card is made to work with the Media Tracker custom component.",
   "keywords": [
     "home-assistant",

src/localize/languages/en.json

@@ -10,6 +10,7 @@
     "refresh_interval": "Refresh Interval",
     "number_of_days": "Number of Days",
     "constrict_height": "Constrict Card Height",
+    "external_media": "Fetch External Media",
     "human_readable_countdown": "Human Readable Countdown",
     "show_rating": "Show Rating",
     "style": {

src/localize/languages/nb.json

@@ -10,6 +10,7 @@
     "refresh_interval": "Oppdateringsintervall",
     "number_of_days": "Antall dager",
     "constrict_height": "Tving korthøyde",
+    "external_media": "Hent media eksternt",
     "human_readable_countdown": "Nedtelling som setning",
     "show_rating": "Vis vurdering",
     "style": {

src/mediatracker-card-editor.ts

@@ -208,6 +208,14 @@ export class MediaTrackerCardEditor
               .configValue="${"constrict_height"}"
             ></ha-checkbox>
           </ha-formfield>
+
+          <ha-formfield .label=${customLocalize("editor.external_media")}>
+            <ha-checkbox
+              @change="${this._valueChanged}"
+              .checked=${this._config.external_media}
+              .configValue="${"external_media"}"
+            ></ha-checkbox>
+          </ha-formfield>
         </div>
 
         <div class="entities">

src/templates/event-backdrop.ts

@@ -18,6 +18,7 @@ export class MediaTrackerCardEvent extends LitElement {
   @property() dark_mode;
   @property() description;
   @property() source_links;
+  @property() external_media;
 
   protected render(): TemplateResult {
     if (!this.event) {
@@ -35,8 +36,15 @@ export class MediaTrackerCardEvent extends LitElement {
       showDescription = true;
     }
 
+    let backdropUrl = `//${data.host}${data.backdrop}?token=${data.token}`;
+
+    // Check if config has external_media boolean set to true.
+    if(this.external_media && data.poster_external) {
+      backdropUrl = data.backdrop_external.replace(/\/original\//, "/w500/");
+    }
+
     return html`
-      <div class="mt-event" style="--event-color: ${this.event.backgroundColor}; --event-backdrop: url(//${data.host}${data.backdrop}?token=${data.token})">
+      <div class="mt-event" style="--event-color: ${this.event.backgroundColor}; --event-backdrop: url(${backdropUrl})">
         <span class="mt-event-color" style="--event-color: ${this.event.backgroundColor};"></span>
         <div class="mt-event-content">
           <header class="mt-event-header">

src/templates/event-poster.ts

@@ -16,6 +16,7 @@ export class MediaTrackerCardEvent extends LitElement {
   @property() rating;
   @property() description;
   @property() source_links;
+  @property() external_media;
 
   protected render(): TemplateResult {
     if (!this.event) {
@@ -33,10 +34,17 @@ export class MediaTrackerCardEvent extends LitElement {
       showDescription = true;
     }
 
+    let posterUrl = `//${data.host}${data.poster}?size=small&token=${data.token}`;
+
+    // Check if config has external_media boolean set to true.
+    if(this.external_media && data.poster_external) {
+      posterUrl = data.poster_external.replace(/\/original\//, "/w200/");
+    }
+
     return html`
       <div class="mt-event" style="--event-color: ${this.event.backgroundColor};">
         <figure class="mt-event-poster">
-          <img src="//${data.host}${data.poster}?size=small&token=${data.token}">
+          <img src="${posterUrl}">
         </figure>
 
         <div class="mt-event-content">

src/templates/events.ts

@@ -53,6 +53,7 @@ export class MediaTrackerCardEvents extends LitElement {
                 .rating="${this.config.show_rating}"
                 .description="${this.config.description}"
                 .source_links="${this.config.source_links}"
+                .external_media="${this.config.external_media}"
               ></mediatracker-event-backdrop>
             `)}
           </div>
@@ -66,6 +67,7 @@ export class MediaTrackerCardEvents extends LitElement {
                 .rating="${this.config.show_rating}"
                 .description="${this.config.description}"
                 .source_links="${this.config.source_links}"
+                .external_media="${this.config.external_media}"
               ></mediatracker-event-poster>
             `)}
           </div>

src/types.ts

@@ -17,6 +17,7 @@ export interface MediaTrackerCardConfig extends LovelaceCardConfig {
   source_links: string;
   show_rating: boolean;
   constrict_height: boolean;
+  external_media: boolean;
   human_readable_countdown: boolean;
   show_warning?: boolean;
   show_error?: boolean;