Merge pull request #1319 from imswel/main

Add Custom Card Medias

custom_cards/custom_card_imswel_medias/README.md

@@ -0,0 +1,81 @@
+---
+title: Custom Card Media
+hide:
+  - toc
+---
+
+<!-- markdownlint-disable MD046 -->
+
+# Custom Card "Media"
+
+These are some `custom-card` for your plex, radarr and sonarr media libraries.
+
+![example-image-radarr](../../docs/assets/img/custom_card_imswel_medias/medias_upcoming_radarr.png)
+![example-image-sonarr](../../docs/assets/img/custom_card_imswel_medias/medias_upcoming_sonarr.png)<br>
+![example-image-plex](../../docs/assets/img/custom_card_imswel_medias/medias_library_plex.png)
+
+## Credits
+
+- Author: imswel - 2023
+- Version: 1.0.0
+
+## Changelog
+
+<details>
+<summary>1.0.0</summary>
+Initial release
+</details>
+
+## Requirements
+
+This card needs the following to function correctly:
+| Component                                                                                 | Required                           |
+| ----------------------------------------------------------------------------------------- | ---------------------------------- |
+|[Plex Recently Added](https://github.com/NemesisRE/sensor.plex_recently_added)             | Yes for **`Media Library Card`**   |
+|[Radarr Upcoming Media](https://github.com/custom-components/sensor.radarr_upcoming_media) | Yes for **`Media Upcoming Card`**  |
+|[Sonarr Upcoming Media](https://github.com/custom-components/sensor.sonarr_upcoming_media) | Yes for **`Media Upcoming Card`**  |
+
+## Usage
+
+**Media Library Card** for [Plex Recently Added](https://github.com/NemesisRE/sensor.plex_recently_added) :
+
+![example-image-plex](../../docs/assets/img/custom_card_imswel_medias/medias_library_plex.png)<br>
+| Variable                              | Default | Required | Notes                                                                   |
+| -----------------------------         | ------- | -------- | ----------------------------------------------------------------------- |
+| ulm_custom_card_imswel_medias_index   |    1    | Yes      | The index of the item in your **Plex library**  to show.                |
+
+```yaml
+- type: custom:button-card
+  template: "custom_card_imswel_medias_library"
+  entity: sensor.plex_recently_added
+  variables:
+    ulm_custom_card_imswel_medias_index: 1
+```
+
+<br>
+
+**Media Upcoming Card** for [Radarr Upcoming Media](https://github.com/custom-components/sensor.radarr_upcoming_media) & [Sonarr Upcoming Media](https://github.com/custom-components/sensor.sonarr_upcoming_media) :
+
+![example-image-radarr](../../docs/assets/img/custom_card_imswel_medias/medias_upcoming_radarr.png)
+![example-image-sonarr](../../docs/assets/img/custom_card_imswel_medias/medias_upcoming_sonarr.png)<br>
+| 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. <br> Can be: **`radarr`** or **`sonarr`**. <br> |
+
+```yaml
+- 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
+
+??? note "Template Code"
+
+    ```yaml title="custom_card_imswel_medias.yaml"
+    --8<-- "custom_cards/custom_card_imswel_medias/custom_card_imswel_medias.yaml"
+    ```

custom_cards/custom_card_imswel_medias/custom_card_imswel_medias.yaml

@@ -0,0 +1,223 @@
+---
+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 "au cinéma"
+        }
+      }
+
+      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>"; ]]]

custom_cards/custom_card_imswel_medias/languages/EN.yaml

@@ -0,0 +1,13 @@
+---
+# EN.yaml for custom_card_imswel_medias
+custom_card_imswel_medias_language_variables:
+  variables:
+    ulm_custom_card_imswel_recentlyadded: "Recently added"
+    ulm_custom_card_imswel_in_theaters: "in theathers"
+    ulm_custom_card_imswel_weekday: >
+      [[[
+        return ["Sunday","Monday","Thuesday","Wednesday","Thursday","Friday","Saturday"];
+      ]]]
+    ulm_custom_card_imswel_today: "Today"
+    ulm_custom_card_imswel_tommorow: "Tommorow"
+    ulm_custom_card_imswel_locale: "en-US"

custom_cards/custom_card_imswel_medias/languages/FR.yaml

@@ -0,0 +1,13 @@
+---
+# FR.yaml for custom_card_imswel_medias
+custom_card_imswel_medias_language_variables:
+  variables:
+    ulm_custom_card_imswel_recentlyadded: "Récemment ajouté"
+    ulm_custom_card_imswel_in_theaters: "au cinéma"
+    ulm_custom_card_imswel_weekday: >
+      [[[
+        return ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
+      ]]]
+    ulm_custom_card_imswel_today: "Aujourd'hui"
+    ulm_custom_card_imswel_tommorow: "Demain"
+    ulm_custom_card_imswel_locale: "fr-FR"