feat: add Jellyfin as a built-in source icon

Register a `jellyfin` special icon alongside disney/amazon/dazn so users can
set `icon: jellyfin` in their sources config. Adds jellyfinIcon() following the
shared .st0 / var(--remote-text-color) convention, wires it into iconMapping
and the default source grid, and documents the keyword in README.md and info.md.

Also bumps the GitHub Actions to current majors (checkout v4, setup-node v4,
upload-artifact v4) across the Build, Release and Validate workflows, since the
old versions are deprecated and upload-artifact v3 now hard-fails on
GitHub-hosted runners.

Author: twigglits

.github/workflows/build.yml

@@ -9,9 +9,9 @@ jobs:
     name: Build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
 
@@ -21,7 +21,7 @@ jobs:
           npm run build
 
       - name: Archive built file
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: lg-remote-control
           path: dist/lg-remote-control.js

.github/workflows/release.yml

@@ -9,9 +9,9 @@ jobs:
     name: Prepare release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-      
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
 

.github/workflows/validate.yaml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Validate HACS
         uses: "hacs/action@main"

README.md

@@ -79,14 +79,16 @@ sources:
   - icon: 'mdi:youtube'
     name: "YouTube"
 ```
-**Note:**  `disney` `amazon` and `dazn` are special, icon you must enter them like this:
+**Note:**  `disney` `amazon` `dazn` and `jellyfin` are special, icon you must enter them like this:
 ```yaml
   - icon: disney
     name: Disney+
   - icon: amazon
     name: Prime Video
   - icon: dazn
     name: Dazn
+  - icon: jellyfin
+    name: Jellyfin
 ```
 ### Channels Options
 | Name | Type | Default | Supported options | Description |
@@ -263,6 +265,8 @@ in this new version we have implemented some new features:
       icon: disney
     - name: Dazn
       icon: dazn
+    - name: Jellyfin
+      icon: jellyfin
     - name: YouTube
       icon: 'mdi:youtube-tv'
     - name: HDMI 1
@@ -277,7 +281,7 @@ in this new version we have implemented some new features:
 
    
 ```
-**note: disney and danz are special icon. so you you must enter it as in the example**
+**note: disney, danz and jellyfin are special icon. so you you must enter it as in the example**
 
   ## dimnensions option:
 

info.md

@@ -79,14 +79,16 @@ sources:
   - icon: 'mdi:youtube'
     name: "YouTube"
 ```
-**Note:**  `disney` `amazon` and `dazn` are special, icon you must enter them like this:
+**Note:**  `disney` `amazon` `dazn` and `jellyfin` are special, icon you must enter them like this:
 ```yaml
   - icon: disney
     name: Disney+
   - icon: amazon
     name: Prime Video
   - icon: dazn
     name: Dazn
+  - icon: jellyfin
+    name: Jellyfin
 ```
 ### Channels Options
 | Name | Type | Default | Supported options | Description |
@@ -264,6 +266,8 @@ in this new version we have implemented some new features:
       icon: disney
     - name: Dazn
       icon: dazn
+    - name: Jellyfin
+      icon: jellyfin
     - name: YouTube
       icon: 'mdi:youtube-tv'
     - name: HDMI 1
@@ -278,7 +282,7 @@ in this new version we have implemented some new features:
 
    
 ```
-**note: disney and danz are special icon. so you you must enter it as in the example**
+**note: disney, danz and jellyfin are special icon. so you you must enter it as in the example**
 
   ## dimnensions option:
 

src/icons.ts

@@ -24,6 +24,18 @@ export function disneyIcon() {
         `;
 }
 
+export function jellyfinIcon() {
+  return html`<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                         viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+              <style type="text/css">
+              .st0{fill:var(--remote-text-color);}
+              </style>
+              <path class="st0" d="M256,201.6c-20.4,0-86.2,119.3-76.2,139.4s142.5,19.9,152.4,0S276.5,201.6,256,201.6z"/>
+              <path class="st0" d="M256,23.3c-61.6,0-259.8,359.4-229.6,420.1s429.3,60,459.2,0S317.6,23.3,256,23.3z M406.5,390.8c-19.6,39.3-281.1,39.8-300.9,0s110.1-275.3,150.4-275.3S426.1,351.4,406.5,390.8z"/>
+              </svg>
+        `;
+}
+
 export function daznIcon() {
   return html`<svg version="1.0" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                          viewBox="0 0 30.7 30.7" style="enable-background:new 0 0 30.7 30.7;" xml:space="preserve">

src/lg-remote-control.ts

@@ -3,7 +3,7 @@ import { customElement } from 'lit/decorators.js';
 import { HomeAssistant } from 'custom-card-helpers';
 
 import "./editor";
-import { lineOutIcon, amazonIcon, tvOpticIcon, daznIcon, disneyIcon, tvHeadphonesIcon, arcIcon, opticIcon, nowTvIcon } from "./icons";
+import { lineOutIcon, amazonIcon, tvOpticIcon, daznIcon, disneyIcon, jellyfinIcon, tvHeadphonesIcon, arcIcon, opticIcon, nowTvIcon } from "./icons";
 import { HomeAssistantFixed, WindowWithCards } from "./types";
 import { CARD_TAG_NAME, CARD_VERSION, EDITOR_CARD_TAG_NAME } from "./const";
 import { getMediaPlayerEntitiesByPlatform } from "./utils";
@@ -72,6 +72,7 @@ class LgRemoteControl extends LitElement {
             "dazn": daznIcon(),
             "nowtv": nowTvIcon(),
             "amazon": amazonIcon(),
+            "jellyfin": jellyfinIcon(),
         };
     }
 
@@ -249,6 +250,7 @@ class LgRemoteControl extends LitElement {
                                 <button class="btn_source ripple" @click=${() => this._select_source("Prime Video")}>${amazonIcon()}</button>
                                 <button class="btn_source ripple" @click=${() => this._select_source("Disney+")}>${disneyIcon()}</button>
                                 <button class="btn_source ripple" @click=${() => this._select_source("DAZN")}>${daznIcon()}</button>
+                                <button class="btn_source ripple" @click=${() => this._select_source("Jellyfin")}>${jellyfinIcon()}</button>
                             </div>`}
                         <!-- ################################# SOURCE BUTTONS END ################################# -->