Custom Card "Media"

These are some custom-card for your plex, radarr and sonarr media libraries.

Credits

• Author: imswel - 2023
• Version: 1.0.0

Changelog

1.0.0

Initial release

Requirements

This card needs the following to function correctly: | Component | Required | | ----------------------------------------------------------------------------------------- | ---------------------------------- | |Plex Recently Added | Yes for Media Library Card | |Radarr Upcoming Media | Yes for Media Upcoming Card | |Sonarr Upcoming Media | Yes for Media Upcoming Card |

Usage

Media Library Card for Plex Recently Added :

| Variable | Default | Required | Notes | | ----------------------------- | ------- | -------- | ----------------------------------------------------------------------- | | ulm_custom_card_imswel_medias_index | 1 | Yes | The index of the item in your Plex library to show. |

- type: custom:button-card
  template: "custom_card_imswel_medias_library"
  entity: sensor.plex_recently_added
  variables:
    ulm_custom_card_imswel_medias_index: 1

Media Upcoming Card for Radarr Upcoming Media & Sonarr Upcoming Media :

| Variable | Default | Required | Notes | | ----------------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------- | | ulm_custom_card_imswel_medias_index | 1 | Yes | The index of the item in your Radarr/Sonarr library to show. | | ulm_custom_card_imswel_medias_platform| radarr | Yes | The platform to choose depending on the selected entity.
Can be: radarr or sonarr.
|

- type: custom:button-card
  template: "custom_card_imswel_medias_upcoming"
  entity: sensor.sonarr_upcoming_media
  variables:
    ulm_custom_card_imswel_medias_index: 1
    ulm_custom_card_imswel_medias_platform: "sonarr"

Template code

Template Code

custom_card_imswel_medias.yaml

---
custom_card_imswel_medias:
  show_icon: false
  show_label: true
  show_name: true
  show_state: false
  styles:
    label:
      - z-index: 2
      - color: "white"
      - font-weight: "bold"
      - font-size: "12px"
      - filter: "opacity(60%)"
    name:
      - z-index: 2
      - color: "white"
      - font-weight: "bold"
      - font-size: "14px"
    card:
      - z-index: 0
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - background-size: "cover"
      - background-position: "center center"
      - text-shadow: >
          [[[
            return entity == "undefined" ? "none" : "1px 1px 5px rgba(18, 22, 23, 0.9)";
          ]]]

custom_card_imswel_medias_library:
  template:
    - "custom_card_imswel_medias"
    - "ulm_translation_engine"
    - "custom_card_imswel_medias_language_variables"
  variables:
    ulm_custom_card_imswel_medias_index: 1
  triggers_update: "[[[ return entity.entity_id; ]]]"
  aspect_ratio: "5/2"
  label: >
    [[[
      if (entity.state == "unavailable" || entity.state == "undefined"){
        return variables.ulm_translation_unavailable;
      } else{
        var data = entity.attributes.data;
        if (data[variables.ulm_custom_card_imswel_medias_index].number == undefined){
          var number = '(' + data[variables.ulm_custom_card_imswel_medias_index].aired.split('-')[0] + ')';
        } else{
          var number = data[variables.ulm_custom_card_imswel_medias_index].number;
        }
        return `${data[variables.ulm_custom_card_imswel_medias_index].title} ${number}`;
      }
    ]]]
  name: "[[[ return variables.ulm_custom_card_imswel_recentlyadded ]]]"
  styles:
    label:
      - align-self: "start"
      - justify-self: "start"
      - margin-left: "12px"
    name:
      - align-self: "end"
      - justify-self: "start"
      - margin-left: "12px"
    grid:
      - grid-template-areas: "'icon .' 'n n' 'l l' '. .'"
      - grid-template-rows: "auto repeat(2, min-content) 12px"
    card:
      - padding: "0px"
      - background-image: >
          [[[
            return entity === undefined || `url(${states[entity.entity_id].attributes.data[variables.ulm_custom_card_imswel_medias_index].fanart})`;
          ]]]
      - border: "none"
    custom_fields:
      icon:
        - z-index: 2
        - align-self: "start"
        - justify-self: "start"
        - height: "24px"
        - width: "24px"
        - margin-left: "12px"
        - margin-top: "12px"
      blur:
        - z-index: 1
        - position: "absolute"
        - top: 0
        - left: 0
        - height: "100%"
        - width: "100%"
        - border-radius: "var(--border-radius)"
        - background: "linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%)"
  custom_fields:
    icon: >
      <svg viewBox="0 0 50 50">
        <path d="M7.7.3h34.6c4.1 0 7.4 3.3 7.4 7.4v34.6c0 4.1-3.3 7.4-7.4 7.4H7.7c-4.1 0-7.4-3.3-7.4-7.4V7.7C.3 3.6 3.6.3 7.7.3z" fill="#282a2d"/>
        <path d="M25,7.1H14.6L25,25L14.6,42.9H25L35.4,25L25,7.1z" fill="#e5a00d"/>
      </svg>
    blur: >
      [[[ return entity === undefined ? null : "<div id='blur'></div>"; ]]]

custom_card_imswel_medias_upcoming:
  template:
    - "custom_card_imswel_medias"
    - "ulm_translation_engine"
    - "custom_card_imswel_medias_language_variables"
  variables:
    ulm_custom_card_imswel_medias_index: 1
    ulm_custom_card_imswel_medias_platform: >
      [[[
        if (entity.entity_id.includes("sonarr")){
          return "sonarr";
        } else if(entity.entity_id.includes("plex")){
          return "plex";
        } else{
          return "radarr";
        }
      ]]]
  triggers_update: "all"
  aspect_ratio: "3/4"
  label: >
    [[[
      var data = entity.attributes?.data;
      var platform = variables.ulm_custom_card_imswel_medias_platform;
      var airdate = new Date(data[variables.ulm_custom_card_imswel_medias_index].airdate);

      Date.prototype.addDays = function (days) {
        const date = new Date(this.valueOf());
        date.setDate(date.getDate() + days);
        return date;
      }

      function formatRelease(release){
        if(release.includes("Available")){
          return ""
        } else if (release.includes("In Theaters")){
          return variables.ulm_custom_card_imswel_in_theaters;
        }
      }

      function formatDate(date){
        var weekday = variables.ulm_custom_card_imswel_weekday;
        var now = new Date();
        var tomorrow = now.addDays(1);

        var time = date - now;
        var secs = parseInt((time / 1000), 10);
        var days = Math.floor(secs / (3600*24));

        if (days < 6){
          if (weekday[date.getDay()] == weekday[now.getDay()]){
            return variables.ulm_custom_card_imswel_today;
          } else if (weekday[date.getDay()] == weekday[tomorrow.getDay()]){
            return variables.ulm_custom_card_imswel_tommorow;
          } else{
            return weekday[date.getDay()];
          }
        } else{
          return date.toLocaleDateString(variables.ulm_custom_card_imswel_locale);
        }
      }

      if(platform == "radarr"){
        var release = data[variables.ulm_custom_card_imswel_medias_index].release;
        return formatDate(airdate) + " " + formatRelease(release);
      } else if(platform == "sonarr"){
        return formatDate(airdate);
      }
    ]]]
  name: >
    [[[
      if (entity.state == "unavailable" || entity.state == "undefined"){
        return variables.ulm_translation_unavailable;
      } else{
        var data = entity.attributes?.data;
        var platform = variables.ulm_custom_card_imswel_medias_platform;

        if(platform == "radarr"){
          return `${data[variables.ulm_custom_card_imswel_medias_index].title}`;
        } else if(platform =="sonarr"){
          var number = data[variables.ulm_custom_card_imswel_medias_index].number;
          return `${data[variables.ulm_custom_card_imswel_medias_index].title} - ${number}`;
        }
      }
    ]]]
  styles:
    icon:
    label:
      - align-self: "start"
      - justify-self: "center"
    name:
      - align-self: "end"
      - justify-self: "center"
    state:
    img_cell:
    grid:
      - grid-template-areas: "'. . .' '. n .' '. l .' '. . .'"
      - grid-template-columns: "8px 1fr 8px"
      - grid-template-rows: "auto repeat(2, min-content) 8px"
    card:
      - background-image: >
          [[[
            return entity === undefined || `url(${states[entity.entity_id].attributes.data[variables.ulm_custom_card_imswel_medias_index].poster})`;
          ]]]
      - border: "none"
    custom_fields:
      overlay:
        - z-index: 1
        - position: "absolute"
        - top: 0
        - left: 0
        - height: "100%"
        - width: "100%"
        - border-radius: "var(--border-radius)"
        - background: "linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%)"
  extra_styles: >
    .ellipsis:not(#overlay){
      white-space: normal !important;
      word-wrap: break-all;
      max-height: 2.4em;
      line-height: 1.2em;
    }
  custom_fields:
    overlay: >
      [[[ return entity === undefined ? null : "<div id='overlay'></div>"; ]]]