change current movie ring color in the collection

src/app/providers/tmdb.py

@@ -163,7 +163,8 @@ def movie(media_id):
             )
 
             if response.get("belongs_to_collection", {}) is not None and (
-            collection_id := response.get("belongs_to_collection", {}).get("id")):
+                collection_id := response.get("belongs_to_collection", {}).get("id")
+            ):
                 collection_response = services.api_request(
                     Sources.TMDB.value,
                     "GET",
@@ -179,8 +180,9 @@ def movie(media_id):
         collection_items = get_collection(collection_response)
         collection_ids = [item["media_id"] for item in collection_items]
         recommended_items = response.get("recommendations", {}).get("results", [])
-        filtered_recommendations = [item for item in recommended_items
-                                    if item["id"] not in collection_ids]
+        filtered_recommendations = [
+            item for item in recommended_items if item["id"] not in collection_ids
+        ]
 
         data = {
             "media_id": media_id,
@@ -601,6 +603,7 @@ def get_related(related_medias, media_type, parent_response=None):
 
 def get_collection(collection_response):
     """Format media collection list to match related media."""
+
     def date_key(media):
         date = media.get("release_date", "")
         if date is None or date == "":
@@ -610,11 +613,17 @@ def get_collection(collection_response):
         return date
 
     parts = sorted(collection_response.get("parts", []), key=date_key)
-    return [{"source": Sources.TMDB.value,
-             "media_type": MediaTypes.MOVIE.value,
-             "image": get_image_url(media["poster_path"]),
-             "media_id": media["id"],
-             "title": get_title(media)} for media in parts]
+    return [
+        {
+            "source": Sources.TMDB.value,
+            "media_type": MediaTypes.MOVIE.value,
+            "image": get_image_url(media["poster_path"]),
+            "media_id": media["id"],
+            "title": get_title(media),
+        }
+        for media in parts
+    ]
+
 
 def process_episodes(season_metadata, episodes_in_db):
     """Process the episodes for the selected season."""

src/static/css/main.css

@@ -45,6 +45,7 @@
     --color-fuchsia-600: oklch(59.1% 0.293 322.896);
     --color-fuchsia-700: oklch(51.8% 0.253 323.949);
     --color-slate-200: oklch(92.9% 0.013 255.508);
+    --color-slate-400: oklch(70.4% 0.04 256.788);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
@@ -1714,9 +1715,16 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-\[1\.5px\] {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1.5px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-indigo-500 {
     --tw-ring-color: var(--color-indigo-500);
   }
+  .ring-slate-400 {
+    --tw-ring-color: var(--color-slate-400);
+  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);

src/templates/app/components/media_card.html

@@ -1,6 +1,6 @@
 {% load app_tags %}
 
-<div class="{% if secondary_color %}bg-[#39404b]{% else %}bg-[#2a2f35]{% endif %} rounded-lg overflow-hidden shadow-lg relative {% if active %}ring-2 ring-indigo-700{% endif %}"
+<div class="{% if secondary_color %}bg-[#39404b]{% else %}bg-[#2a2f35]{% endif %} rounded-lg overflow-hidden shadow-lg relative {% if active %}ring-[1.5px] ring-slate-400{% endif %}"
      x-data="{ trackOpen: false, listsOpen: false, historyOpen: false }">
   <div class="relative">
     <a href="{{ item|media_url }}">

src/templates/app/media_details.html

@@ -478,8 +478,8 @@
               <h2 class="text-xl font-bold mb-4">{{ name|no_underscore|title }}</h2>
               <div class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
                 {% for result in related_items %}
-                  {% if media_type != MediaTypes.TV.value and media_type != MediaTypes.SEASON.value %}
-                    {# Set active to highlight the current movie in a collection. Avoid TV media, since seasons have same ID as the parent show #}
+                  {# Set active to highlight the current movie in a collection. Avoid TV media, since seasons have same ID as the parent show #}
+                  {% if media_type == MediaTypes.MOVIE.value %}
                     {% include "app/components/media_card.html" with item=result.item title=result.item.season_title|default:result.item.title media=result.media active=media.media_id|str_equals:result.item.media_id %}
                   {% else %}
                     {% include "app/components/media_card.html" with item=result.item title=result.item.season_title|default:result.item.title media=result.media %}