css fixes

4 files changed, 120 insertions, 78 deletions

diff --git a/static/css/main.css b/static/css/main.css
index e1321c0..df3ef7f 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -878,6 +878,15 @@ video {
   max-width: max-content;
 }
 
+.max-w-fit {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
+.max-w-full {
+  max-width: 100%;
+}
+
 .origin-left {
   transform-origin: left;
 }
@@ -930,10 +939,6 @@ video {
           user-select: none;
 }
 
-.resize {
-  resize: both;
-}
-
 .list-inside {
   list-style-position: inside;
 }
@@ -1016,6 +1021,28 @@ video {
   overflow-y: auto;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.text-wrap {
+  text-wrap: wrap;
+}
+
+.text-nowrap {
+  text-wrap: nowrap;
+}
+
 .break-words {
   overflow-wrap: break-word;
 }
@@ -1127,11 +1154,6 @@ video {
   background-color: rgb(14 116 144 / var(--tw-bg-opacity));
 }
 
-.bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
 .bg-green-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
@@ -1344,10 +1366,6 @@ video {
   --tw-bg-opacity: 0.4;
 }
 
-.bg-opacity-30 {
-  --tw-bg-opacity: 0.3;
-}
-
 .bg-cover {
   background-size: cover;
 }
@@ -1597,6 +1615,11 @@ video {
   color: rgb(21 128 61 / var(--tw-text-opacity));
 }
 
+.text-green-900 {
+  --tw-text-opacity: 1;
+  color: rgb(20 83 45 / var(--tw-text-opacity));
+}
+
 .text-indigo-300 {
   --tw-text-opacity: 1;
   color: rgb(165 180 252 / var(--tw-text-opacity));
@@ -1781,6 +1804,11 @@ video {
   color: rgb(161 98 7 / var(--tw-text-opacity));
 }
 
+.text-green-800 {
+  --tw-text-opacity: 1;
+  color: rgb(22 101 52 / var(--tw-text-opacity));
+}
+
 .opacity-25 {
   opacity: 0.25;
 }
@@ -2232,15 +2260,15 @@ main {
     --tw-bg-opacity: 0.2;
   }
 
-  .lg\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-
   .lg\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
   }
+
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
 }
 
 @media (min-width: 1280px) {
diff --git a/templates/partials/datacard_render.html b/templates/partials/datacard_render.html
index ff21495..086cc25 100644
--- a/templates/partials/datacard_render.html
+++ b/templates/partials/datacard_render.html
@@ -1,28 +1,6 @@
 {% for anime in data %}
 <a href="{% url "watch:watch" anime.id %}" class="w-1/2 2xl:w-1/6 md:w-1/3 lg:w-1/4 xl:w-1/5 text-gray-500 px-1 mb-4 hover:text-white flex flex-col gap-2">
     <img src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-56 h-80 mx-auto object-cover"/>
-    <div class="inline-flex gap-2 flex-wrap">
-        <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
-            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
-            <path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
-            <path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
-            <path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
-            </svg>
-            {{ anime.type }}
-        </span>
-        <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
-            <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
-            </svg>              
-            {{ anime.releaseDate }}
-        </span>
-        <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
-            </svg>
-            {{ anime.rating }}
-        </span>
-    </div>
     <span class="text-sm font-bold flex gap-1 flex-row items-start">
         {% if anime.status == "Ongoing" %}
             <span class="text-green-500 pt-1">
@@ -43,7 +21,7 @@
             </svg>
             </span>
         {% endif %}
-        <span>
+        <span class="truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
             {% if user.preferences.title_language == "english" and anime.title.english %}
             {{ anime.title.english }}
             {% elif user.preferences.title_language == "native" and anime.title.native %}
@@ -53,5 +31,27 @@
             {% endif %}
         </span>
     </span>
+    <div class="inline-flex gap-2 flex-wrap">
+        <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
+            <path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
+            <path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
+            <path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
+            </svg>
+            {{ anime.type }}
+        </span>
+        <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
+            <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
+            </svg>              
+            {{ anime.releaseDate }}
+        </span>
+        <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
+            </svg>
+            {{ anime.rating }}
+        </span>
+    </div>
 </a>
 {% endfor %}
\ No newline at end of file
diff --git a/templates/watch/watch.html b/templates/watch/watch.html
index d48dee7..767f29f 100644
--- a/templates/watch/watch.html
+++ b/templates/watch/watch.html
@@ -25,12 +25,42 @@
         <div class="flex flex-col gap-2">
             {% for episode in anime_episodes.episodes %}
             {% if episode.number == current_episode %}
-            <a href="{% url "watch:watch_episode" anime_id episode.number %}" class="flex flex-row w-full gap-4 bg-{{ user.preferences.accent_colour }}-600 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
-                {{ episode.number }}. {{ episode.title }}
+            <a href="{% url "watch:watch_episode" anime_id episode.number %}" class="flex flex-row justify-between items-center w-full gap-4 bg-{{ user.preferences.accent_colour }}-600 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
+                <span class="truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">{{ episode.number }}. {{ episode.title }}</span>
+                
+                <span class="flex flex-row item-center gap-2">
+                {% if anime_selected.episodes.sub >= episode.number %}                  
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6 bg-green-700 p-1 rounded" title="Available in Sub">
+                    <path fill-rule="evenodd" d="M4.848 2.771A49.144 49.144 0 0 1 12 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97a48.901 48.901 0 0 1-3.476.383.39.39 0 0 0-.297.17l-2.755 4.133a.75.75 0 0 1-1.248 0l-2.755-4.133a.39.39 0 0 0-.297-.17 48.9 48.9 0 0 1-3.476-.384c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97ZM6.75 8.25a.75.75 0 0 1 .75-.75h9a.75.75 0 0 1 0 1.5h-9a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H7.5Z" clip-rule="evenodd" />
+                </svg>
+                {% endif %}
+
+                {% if anime_selected.episodes.dub >= episode.number %}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6 bg-blue-700 p-1 rounded" title="Available in Dub">
+                    <path d="M8.25 4.5a3.75 3.75 0 1 1 7.5 0v8.25a3.75 3.75 0 1 1-7.5 0V4.5Z" />
+                    <path d="M6 10.5a.75.75 0 0 1 .75.75v1.5a5.25 5.25 0 1 0 10.5 0v-1.5a.75.75 0 0 1 1.5 0v1.5a6.751 6.751 0 0 1-6 6.709v2.291h3a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3v-2.291a6.751 6.751 0 0 1-6-6.709v-1.5A.75.75 0 0 1 6 10.5Z" />
+                </svg>
+                {% endif %}
+                </span>
+                
             </a>
             {% else %}
-            <a href="{% url "watch:watch_episode" anime_id episode.number %}" class="flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
-                {{ episode.number }}. {{ episode.title }}
+            <a href="{% url "watch:watch_episode" anime_id episode.number %}" class="flex flex-row justify-between w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
+                <span class="truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">{{ episode.number }}. {{ episode.title }}</span>
+                <span class="flex flex-row item-center gap-2">
+                {% if anime_selected.episodes.sub >= episode.number %}                  
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6 bg-green-700 p-1 rounded" title="Available in Sub">
+                    <path fill-rule="evenodd" d="M4.848 2.771A49.144 49.144 0 0 1 12 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97a48.901 48.901 0 0 1-3.476.383.39.39 0 0 0-.297.17l-2.755 4.133a.75.75 0 0 1-1.248 0l-2.755-4.133a.39.39 0 0 0-.297-.17 48.9 48.9 0 0 1-3.476-.384c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97ZM6.75 8.25a.75.75 0 0 1 .75-.75h9a.75.75 0 0 1 0 1.5h-9a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H7.5Z" clip-rule="evenodd" />
+                </svg>
+                {% endif %}
+
+                {% if anime_selected.episodes.dub >= episode.number %}
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6 bg-blue-700 p-1 rounded" title="Available in Dub">
+                    <path d="M8.25 4.5a3.75 3.75 0 1 1 7.5 0v8.25a3.75 3.75 0 1 1-7.5 0V4.5Z" />
+                    <path d="M6 10.5a.75.75 0 0 1 .75.75v1.5a5.25 5.25 0 1 0 10.5 0v-1.5a.75.75 0 0 1 1.5 0v1.5a6.751 6.751 0 0 1-6 6.709v2.291h3a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3v-2.291a6.751 6.751 0 0 1-6-6.709v-1.5A.75.75 0 0 1 6 10.5Z" />
+                </svg>
+                {% endif %}
+                </span>
             </a>
             {% endif %}
             {% endfor %}
diff --git a/watch/views.py b/watch/views.py
index 23c7164..5ee65ff 100644
--- a/watch/views.py
+++ b/watch/views.py
@@ -13,46 +13,30 @@ def watch(request, anime_id, episode=None):
 
     mode = request.GET.get("mode", request.user.preferences.default_language)
 
-    # data from cache:
-    data_from_cache = get_from_redis_cache(anime_id)
-
-    if not data_from_cache:
-        print("cache miss. fetching data from api")
-        base_url = f"{os.getenv("CONSUMET_URL")}/meta/anilist/data/{anime_id}?provider=zoro"
-        response = requests.get(base_url)
-        anime_data = response.json()
-
-        base_url = f"{os.getenv("ZORO_URL")}/anime/search?q={anime_data["title"]["english"]}&page=1"
-        response = requests.get(base_url)
-        anime_search_result = response.json()
-        anime_selected = [a for a in anime_search_result["animes"] if a["name"] == anime_data["title"]["english"]]
-
-        if not anime_selected:
-            anime_selected = anime_search_result["animes"][0]
-        else:
-            anime_selected = anime_selected[0]
-
-        base_url = f"{os.getenv("ZORO_URL")}/anime/episodes/{anime_selected["id"]}"
-        response = requests.get(base_url)
-        anime_episodes = response.json()
+    base_url = f"{os.getenv("CONSUMET_URL")}/meta/anilist/data/{anime_id}?provider=zoro"
+    response = requests.get(base_url)
+    anime_data = response.json()
 
-        data_to_cache = {
-            "anime_data": anime_data,
-            "anime_selected": anime_selected,
-            "anime_episodes": anime_episodes,
-        }
-        data_to_cache = json.dumps(data_to_cache)
+    base_url = f"{os.getenv("ZORO_URL")}/anime/search?q={anime_data["title"]["english"]}&page=1"
+    response = requests.get(base_url)
+    anime_search_result = response.json()
+    anime_selected = [a for a in anime_search_result["animes"] if a["name"] == anime_data["title"]["english"]]
 
-        store_in_redis_cache(anime_id, data_to_cache)
+    if not anime_selected:
+        anime_selected = anime_search_result["animes"][0]
     else:
-        data_from_cache = json.loads(data_from_cache)
-        anime_data = data_from_cache["anime_data"]
-        anime_selected = data_from_cache["anime_selected"]
-        anime_episodes = data_from_cache["anime_episodes"]
+        anime_selected = anime_selected[0]
+
+    base_url = f"{os.getenv("ZORO_URL")}/anime/episodes/{anime_selected["id"]}"
+    response = requests.get(base_url)
+    anime_episodes = response.json()
 
     if mode == "dub" and not anime_selected["episodes"]["dub"]:
         mode = "sub"
 
+    if not anime_selected["episodes"][mode] or anime_selected["episodes"][mode] < episode:
+        mode = "sub"
+
     if episode > anime_episodes["totalEpisodes"]:
             return redirect("watch:watch_episode", anime_id=anime_id, episode=anime_episodes["totalEpisodes"])