feat: new Discover section shows watch providers for results

templates/components/NavBar.html.twig

@@ -29,6 +29,15 @@
                 </a>
             </li>
 
+            <li>
+                <a href="{{ path('app.discover') }}"
+                   class="block rounded-lg
+                         bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
+                         px-4 py-2 text-sm font-medium text-gray-50">
+                    Discover
+                </a>
+            </li>
+
             <li>
                 <a href="{{ path('app_user_preferences') }}"
                    class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700">

templates/components/Poster.html.twig

@@ -1,14 +1,21 @@
 <div{{ attributes }}>
+    {% if image != null and image != "https://image.tmdb.org/t/p/w500" %}
+        <a href="{{ path('app_search_result', {
+            mediaType: mediaType,
+            imdbId: imdbId
+        }) }}">
+            <img src="{{ preload(image) }}" class="w-full rounded-md" />
+        </a>
+    {% else %}
+        <div class="w-full md:w-32 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
+            <twig:ux:icon width="16" name="hugeicons:loading-01" />
+        </div>
+    {% endif %}
+
     <a href="{{ path('app_search_result', {
         mediaType: mediaType,
         imdbId: imdbId
     }) }}">
-        <img src="{{ preload(image) }}" class="w-full md:w-40 rounded-md" />
-    </a>
-    <a href="{{ path('app_search_result', {
-        mediaType: mediaType,
-        imdbId: imdbId
-    }) }}">
-        <h3 class="text-center text-white md:text-md md:text-base md:max-w-[16ch]">{{ title }}</h3>
+        <h3 class="mt-2 text-center text-white md:text-md md:text-base md:max-w-[16ch]">{{ title }}</h3>
     </a>
 </div>

templates/components/PosterContainer.html.twig

@@ -0,0 +1,30 @@
+<div{{ attributes.defaults(stimulus_controller('discover_media_results')) }} class="flex flex-col">
+    <div class="grid grid-cols-1 md:grid-cols-6 gap-4">
+        {% for i in range(0, media|length - 1) %}
+            {% if i > 5 and tease is true %}
+                {% set class_list = "hidden" %}
+            {% else %}
+                {% set class_list = "" %}
+            {% endif %}
+
+            {% set poster = media[i] %}
+            <twig:Poster data-discover-media-results-target="poster"
+                         imdbId="{{ poster.imdbId }}"
+                         tmdbId="{{ poster.tmdbId }}"
+                         title="{{ poster.title }}"
+                         description="{{ poster.description }}"
+                         image="{{ poster.poster }}"
+                         year="{{ poster.year }}"
+                         mediaType="movies"
+                         class="pb-2 w-full rounded-lg {{ class_list }}"
+            />
+        {% endfor %}
+    </div>
+
+    {% if tease == true %}
+    <div class="inline-flex self-end text-white">
+        <button data-discover-media-results-target="moreBtn" data-action="click->discover-media-results#moreResults" href="#" class="underline">More</button>
+        <a data-discover-media-results-target="moreLink" href="{{ url('app.discover.browse', {mediaType: mediaType, page: 2, genreId: genreId}) }}" class="underline hidden">More &gt;</a>
+    </div>
+    {% endif %}
+</div>

templates/components/SearchResult.html.twig

@@ -1,7 +1,7 @@
 <div{{ attributes }}>
     <div class="p-4 flex flex-col md:flex-row gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
         {% if poster != null and poster != "https://image.tmdb.org/t/p/w500" %}
-            <img class="w-full md:w-24 rounded-lg" src="{{ poster }}" />
+            <img class="w-full md:w-24 rounded-lg" src="{{ preload(poster) }}" />
         {% else %}
             <div class="w-full md:w-32 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
                 <twig:ux:icon width="16" name="hugeicons:loading-01" />