🛠 fix: video thumbnails

tomy0000000 · Jan 1, 2023 · 55b2f07 · 55b2f07
1 parent 0ba3988
commit 55b2f07
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/tubee/models/video.py b/tubee/models/video.py
@@ -29,10 +29,10 @@ class Video(db.Model):  # type: ignore
         "channelTitle,liveBroadcastContent))"
     )
     THUMBNAIL_SIZES_TUPLE = [
-        ("medium", "mqdefault.jpg", 320, 180),
-        ("high", "hqdefault.jpg", 480, 360),
-        ("standard", "sddefault.jpg", 640, 480),
         ("maxres", "maxresdefault.jpg", 1280, 720),
+        ("standard", "sddefault.jpg", 640, 480),
+        ("high", "hqdefault.jpg", 480, 360),
+        ("medium", "mqdefault.jpg", 320, 180),
     ]
 
     def __init__(self, video_id, channel, details=None, fetch_infos=True):
@@ -55,14 +55,17 @@ def thumbnails(self):
         base_url = self.details.get("thumbnails", {}).get("default", {}).get("url")
         if not base_url:
             return None
+        thumbnails_map = {}
         for size, filename, width, height in self.THUMBNAIL_SIZES_TUPLE:
-            if size not in self.details["thumbnails"]:
-                self.details["thumbnails"][size] = {
+            if size in self.details["thumbnails"]:
+                thumbnails_map[size] = self.details["thumbnails"][size]
+            else:
+                thumbnails_map[size] = {
                     "url": urljoin(base_url, filename),
                     "width": width,
                     "height": height,
                 }
-        return self.details["thumbnails"]
+        return thumbnails_map
 
     @thumbnails.setter
     def thumbnails(self, thumbnails):

diff --git a/tubee/templates/macros/channel.html b/tubee/templates/macros/channel.html
@@ -24,11 +24,15 @@
   <div class="carousel-inner">
     {% for video in videos[:thumb_num] %}
     <div class="carousel-item {{ 'active' if loop.first else '' }}">
-      <img
-        src="{{ video.thumbnails.maxres.url }}"
-        class="d-block w-100"
-        alt="{{ video.name }}"
-      />
+      <picture>
+        {% for size, info in video.thumbnails.items() %}
+        <source
+          media="(min-width:{{ info.width }}px)"
+          srcset="{{ info.url }}"
+        />
+        {% endfor %}
+        <img class="d-block w-100" alt="{{ video.name }}" />
+      </picture>
       <div class="carousel-caption d-none d-md-block">
         <h5>{{ video.name }}</h5>
         <p>{{ video.details.description }}</p>