add basic view of 10 cast by billing order for movies

src/app/providers/tmdb.py

@@ -151,7 +151,7 @@ def movie(media_id):
         url = f"{base_url}/movie/{media_id}"
         params = {
             **base_params,
-            "append_to_response": "recommendations,external_ids",
+            "append_to_response": "recommendations,external_ids,credits",
         }
 
         try:
@@ -188,6 +188,19 @@ def movie(media_id):
             item for item in recommended_items if item["id"] not in collection_ids
         ]
 
+        cast = response.get("credits", {}).get("cast", [])
+        filtered_cast = [
+            {
+                "id": member.get("id"),
+                "name": member.get("name"),
+                "character": member.get("character"),
+                "image": get_image_url(member.get("profile_path"))
+                if member.get("profile_path")
+                else None,
+            }
+            for member in cast[:10]
+        ]
+
         data = {
             "media_id": media_id,
             "source": Sources.TMDB.value,
@@ -209,6 +222,7 @@ def movie(media_id):
                 "country": get_country(response["production_countries"]),
                 "languages": get_languages(response["spoken_languages"]),
             },
+            "cast": filtered_cast,
             "related": {
                 collection_response.get("name", "collection"): collection_items,
                 "recommendations": get_related(

src/templates/app/components/cast_card.html

@@ -0,0 +1,28 @@
+{% load app_tags %}
+
+<div class="bg-[#2a2f35] rounded-lg overflow-hidden shadow-lg relative group">
+  <div class="relative">
+    <a href="https://www.themoviedb.org/person/{{ cast.id }}"
+       target="_blank">
+      <img alt="{{ cast.name }}"
+           class="lazyload w-full aspect-2/3 bg-[#3e454d] {% if cast.image %}object-cover{% endif %}"
+           data-src="{{ cast.image }}"
+           src="{{ IMG_NONE }}">
+    </a>
+
+    <div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+      <a href="https://www.themoviedb.org/person/{{ cast.id }}"
+         target="_blank"
+         class="p-2.5 bg-indigo-600 text-white rounded-full hover:bg-indigo-500 hover:scale-110 transition-all duration-200">
+        {% include "app/icons/external-link.svg" with classes="w-5 h-5" %}
+      </a>
+    </div>
+  </div>
+
+  <div class="p-3">
+    <div class="text-sm font-semibold text-white line-clamp-1"
+         title="{{ cast.name }}">{{ cast.name }}</div>
+    <div class="text-xs text-gray-400 line-clamp-1 mt-1"
+         title="{{ cast.character }}">{{ cast.character }}</div>
+  </div>
+</div>

src/templates/app/media_details.html

@@ -469,9 +469,21 @@
       </div>
     </div>
 
+    <div class="w-full md:w-3/4">
+      {% if media.cast %}
+        <section class="{% if not forloop.last %}mb-8{% endif %}">
+          <h2 class="text-xl font-bold mb-4">Cast</h2>
+          <div class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-4">
+            {% for cast in media.cast %}
+
+              {% include "app/components/cast_card.html" with cast=cast only %}
+            {% endfor %}
+          </div>
+        </section>
+      {% endif %}
+
       {# Related Media #}
       {% if media.related %}
-      <div class="w-full md:w-3/4">
         {% for name, related_items in media.related.items %}
           {% if related_items %}
             <section class="{% if not forloop.last %}mb-8{% endif %}">
@@ -489,7 +501,6 @@
             </section>
           {% endif %}
         {% endfor %}
-      </div>
       {% endif %}
 
       {# Episodes List #}
@@ -594,4 +605,5 @@
         </div>
       {% endif %}
     </div>
+  </div>
 {% endblock content %}