Remove hardcoded http. Isolate some css. Adds dark-mode. Adds audible.

jonkristian · Mar 6, 2024 · d5b1da4 · d5b1da4
1 parent 50d99bd
commit d5b1da4
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 192 deletions.
diff --git a/dist/mediatracker-card.js b/dist/mediatracker-card.js
diff --git a/package.json b/package.json
@@ -44,4 +44,4 @@
     "build": "rollup -c --bundleConfigAsCjs",
     "dev": "rollup -c --watch --bundleConfigAsCjs"
   }
-}
+}
diff --git a/src/styles/card.ts b/src/styles/card.ts
@@ -1,120 +1,12 @@
 import { css } from "lit";
 
 export const cardStyle = css`
-  // Card
-  .mt-card {
-    display: flex;
-    flex-direction: column;
-    padding: 1rem;
+  :root {
+    --dark-primary-color: #0288d1;
+    --light-primary-color: #b3e5fC;
   }
 
-  .mt-header {
-    color: var(--ha-card-header-color,--primary-text-color);
-    font-size: var(--ha-card-header-font-size,24px);
-    padding-block: .5rem;
-    margin-bottom: 1rem;
-  }
-
-  .mt-calendar.constrict {
-    overflow-y: scroll;
-    max-height: 450px;
-    padding-right: 1rem;
-  }
-
-  .mt-day {
-    margin-bottom: 1.6rem;
-  }
-
-  // Events
-  .mt-events-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    border-bottom: 1px solid var(--divider-color);
-    margin-bottom: 1rem;
-    padding-bottom: .5rem;
-  }
-
-  .mt-events-header__day,
-  .mt-events-header__date {
-    font-size: 18px;
-    font-weight: 400;
-    padding: 0;
-    margin: 0;
-  }
-
-  .mt-events {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-auto-rows: 1fr;
-    gap: 1rem;
-  }
-
-  // Event
-  .mt-event {
-    position: relative;
-    border-radius: 10px;
-    height: 100%;
-    overflow: hidden;
-    /* white-space: nowrap; */
-  }
-
-  .mt-event-backdrop {
-    position: absolute;
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-    object-position: center;
-  }
-
-  .mt-event-content {
-    position: relative;
-    z-index: 2;
-    color: var(--primary-text-color);
-    font-weight: 400;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .has-backdrop .mt-event-content {
-    background-color: rgba(0,0,0,.75);
-    padding: 1rem;
-    height: 100%;
-  }
-
-  .mt-event-title {
-    font-size: 14px;
-    font-weight: 400;
-    position: relative;
-    color: var(--primary-text-color);
-    margin: 0;
-    margin-left: 5px;
-
-    &:before {
-      content: "";
-      display: inline-block;
-      background-color: var(--event-bg);
-      width: 10px;
-      height: 10px;
-      border-radius: 100%;
-      transform: translateX(-5px);
-    }
-  }
-
-  .has-backdrop .mt-event-title {
-    font-weight: 500;
-  }
-
-  .mt-event-description {
-    color: var(--secondary-text-color);
-    font-size: 13px;
-    margin-bottom: 1rem;
-  }
-
-  .has-backdrop .mt-event-description {
-    color: var(--primary-text-color);
-    margin-bottom: 0;
-    max-width: 600px;
+  a {
+    color: var(--mt-link-color);
   }
 `;
diff --git a/src/templates/event-backdrop.ts b/src/templates/event-backdrop.ts
@@ -8,12 +8,14 @@ dayjs.extend(updateLocale);
 dayjs.extend(relativeTime);
 import setupCustomlocalize from "../localize/localize";
 import { getSourceLinks } from "../utils";
+import { cardStyle } from "../styles/card";
 
 @customElement("mediatracker-event-backdrop")
 export class MediaTrackerCardEvent extends LitElement {
   @property() hass;
   @property() event;
   @property() rating;
+  @property() dark_mode;
   @property() description;
   @property() source_links;
 
@@ -34,7 +36,7 @@ export class MediaTrackerCardEvent extends LitElement {
     }
 
     return html`
-      <div class="mt-event" style="--event-color: ${this.event.backgroundColor}; --event-backdrop: url(http://${data.host}${data.backdrop}?token=${data.token})">
+      <div class="mt-event" style="--event-color: ${this.event.backgroundColor}; --event-backdrop: url(//${data.host}${data.backdrop}?token=${data.token})">
         <span class="mt-event-color" style="--event-color: ${this.event.backgroundColor};"></span>
         <div class="mt-event-content">
           <header class="mt-event-header">
@@ -56,7 +58,9 @@ export class MediaTrackerCardEvent extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return [
+      cardStyle,
+      css`
       .mt-event {
         background-color: var(--event-color);
         background-image: var(--event-backdrop);
@@ -119,9 +123,10 @@ export class MediaTrackerCardEvent extends LitElement {
         margin: 0;
         font-size: 13px;
         padding-block: .5rem;
-        color: var(--primary-text-color);
+        color: var(--secondary-text-color);
         max-width: 600px;
       }
-    `;
+    `
+    ]
   }
 }
diff --git a/src/templates/event-poster.ts b/src/templates/event-poster.ts
@@ -36,7 +36,7 @@ export class MediaTrackerCardEvent extends LitElement {
     return html`
       <div class="mt-event" style="--event-color: ${this.event.backgroundColor};">
         <figure class="mt-event-poster">
-          <img src="http://${data.host}${data.poster}?size=small&token=${data.token}">
+          <img src="//${data.host}${data.poster}?size=small&token=${data.token}">
         </figure>
 
         <div class="mt-event-content">
@@ -69,6 +69,10 @@ export class MediaTrackerCardEvent extends LitElement {
         overflow: hidden;
       }
 
+      .mt-event a {
+        color: var(--event-color);
+      }
+
       .mt-event-icon {
         --mdc-icon-size: 20px;
       }
@@ -86,13 +90,13 @@ export class MediaTrackerCardEvent extends LitElement {
       }
 
       .mt-event-content {
-        color: var(--primary-text-color);
+        color: var(--light-primary-color);
         padding-left: 1rem;
         font-weight: 400;
         display: flex;
         flex-direction: column;
         gap: .3rem;
-        background-color: rgba(0,0,0,.6);
+        background-color: rgba(0,0,0,.7);
         padding: 1rem;
         height: 100%;
       }
@@ -110,7 +114,7 @@ export class MediaTrackerCardEvent extends LitElement {
         margin: 0;
         font-size: 16px;
         font-weight: 500;
-        color: var(--primary-text-color);
+        color: var(--light-primary-color);
       }
 
       .mt-event-details {
@@ -125,7 +129,7 @@ export class MediaTrackerCardEvent extends LitElement {
         margin: 0;
         font-size: 13px;
         padding-block: .5rem;
-        color: var(--primary-text-color);
+        color: var(--light-primary-color);
         max-width: 600px;
       }
     `;

diff --git a/src/templates/event.ts b/src/templates/event.ts
@@ -115,7 +115,7 @@ export class MediaTrackerCardEvent extends LitElement {
         margin: 0;
         font-size: 13px;
         padding-block: .5rem;
-        color: var(--primary-text-color);
+        color: var(--secondary-text-color);
         max-width: 600px;
       }
     `;

diff --git a/src/templates/events.ts b/src/templates/events.ts
@@ -25,6 +25,7 @@ export class MediaTrackerCardEvents extends LitElement {
       return html``;
     }
 
+    const darkMode = this.hass.themes.darkMode;
     const customLocalize = setupCustomlocalize(this.hass!);
 
     return html`
@@ -48,6 +49,7 @@ export class MediaTrackerCardEvents extends LitElement {
               <mediatracker-event-backdrop
                 .hass=${this.hass}
                 .event="${event}"
+                .dark_mode="${darkMode}"
                 .rating="${this.config.show_rating}"
                 .description="${this.config.description}"
                 .source_links="${this.config.source_links}"

diff --git a/src/types.ts b/src/types.ts
@@ -59,6 +59,7 @@ export interface MediaTrackerCalendarEvent {
 }
 
 export interface MediaTrackerCalendarEventSources {
+  audible?: string;
   igdb?: string;
   tmdb?: string;
   imdb?: string;

diff --git a/src/utils.ts b/src/utils.ts
@@ -178,30 +178,20 @@ export function getColorByIndex(index: number) {
   return COLORS[index % COLORS.length];
 }
 
-export function getGraphColorByIndex(
-  index: number,
-  style: CSSStyleDeclaration
-) {
-  // The CSS vars for the colors use range 1..n, so we need to adjust the index from the internal 0..n color index range.
-  return (
-    style.getPropertyValue(`--graph-color-${index + 1}`) ||
-    getColorByIndex(index)
-  );
-}
-
-
 export function getSourceLinks(type: string, sources: MediaTrackerCalendarEventSources) {
   if(type == 'all') {
     return html`
-      ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}">IGDB</a>`:''}
-      ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}">TMDB</a>`:''}
-      ${sources.imdb ? html`<a class="mt-event-source" href="${sources.imdb}">IMDB</a>`:''}
+      ${sources.audible ? html`<a class="mt-event-source" href="${sources.audible}" target="_new" title="Audible">Audible</a>`:''}
+      ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}" target="_new" title="IGDB">IGDB</a>`:''}
+      ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}" target="_new" title="TMDB">TMDB</a>`:''}
+      ${sources.imdb ? html`<a class="mt-event-source" href="${sources.imdb}" target="_new" title="IMDB">IMDB</a>`:''}
     `
   }
   if(type == 'primary') {
     return html`
-      ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}">IGDB</a>`:''}
-      ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}">TMDB</a>`:''}
+      ${sources.audible ? html`<a class="mt-event-source" href="${sources.audible}" target="_new" title="Audible">Audible</a>`:''}
+      ${sources.igdb ? html`<a class="mt-event-source" href="${sources.igdb}" target="_new" title="IGDB">IGDB</a>`:''}
+      ${sources.tmdb ? html`<a class="mt-event-source" href="${sources.tmdb}" target="_new" title="TMDB">TMDB</a>`:''}
     `
   }
   return html``;
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,4 +44,4 @@ @@
         "build": "rollup -c --bundleConfigAsCjs",
         "dev": "rollup -c --watch --bundleConfigAsCjs"
       }
-    }
+    }