Consolidate downloads page UI, #build

Changed:
- use video styling from homepage also on download page
- configure grid items on download page
- fix reindex task trying to reindexing inactive videos
- better error handling with yt-dlp, timeout and retry

Dockerfile

@@ -3,7 +3,7 @@
 
 
 # First stage to build python wheel
-FROM python:3.10.5-slim-bullseye AS builder
+FROM python:3.10.7-slim-bullseye AS builder
 ARG TARGETPLATFORM
 
 RUN apt-get update
@@ -14,7 +14,7 @@ COPY ./tubearchivist/requirements.txt /requirements.txt
 RUN pip install --user -r requirements.txt
 
 # build final image
-FROM python:3.10.5-slim-bullseye as tubearchivist
+FROM python:3.10.7-slim-bullseye as tubearchivist
 
 ARG TARGETPLATFORM
 ARG INSTALL_DEBUG

tubearchivist/home/src/download/queue.py

@@ -196,6 +196,7 @@ class PendingList(PendingIndex):
         bulk_list = []
 
         for idx, youtube_id in enumerate(self.missing_videos):
+            print(f"{youtube_id}: add to download queue")
             video_details = self.get_youtube_details(youtube_id)
             if not video_details:
                 continue

tubearchivist/home/src/download/yt_dlp_base.py

@@ -20,7 +20,8 @@ class YtWrap:
         "default_search": "ytsearch",
         "quiet": True,
         "check_formats": "selected",
-        "socket_timeout": 2,
+        "socket_timeout": 3,
+        "extractor_retries": 3,
     }
 
     def __init__(self, obs_request, config=False):

tubearchivist/home/src/index/reindex.py

@@ -72,14 +72,11 @@ class Reindex:
 
     def _get_unrated_vids(self):
         """get max 200 videos without rating if ryd integration is enabled"""
-        data = {
-            "size": 200,
-            "query": {
-                "bool": {
-                    "must_not": [{"exists": {"field": "stats.average_rating"}}]
-                }
-            },
-        }
+        must_not_list = [
+            {"exists": {"field": "stats.average_rating"}},
+            {"term": {"active": {"value": False}}},
+        ]
+        data = {"size": 200, "query": {"bool": {"must_not": must_not_list}}}
         response, _ = ElasticWrap("ta_video/_search").get(data=data)
 
         missing_rating = [i["_id"] for i in response["hits"]["hits"]]

tubearchivist/home/templates/home/downloads.html

@@ -41,38 +41,56 @@
             </div>
         </div>
         <div class="view-icons">
+            {% if view_style == "grid" %}
+                <div class="grid-count">
+                    {% if grid_items < 7 %}
+                        <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
+                    {% endif %}
+                    {% if grid_items > 3 %}
+                        <img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus row">
+                    {% endif %}
+                </div>
+            {% endif %}
             <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view">
             <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view">
         </div>
     </div>
     <h3>Total videos: {{ max_hits }}{% if max_hits == 10000 %}+{% endif %}</h3>
-    <div class="dl-list {{ view_style }}">
+</div>
+<div class="boxed-content {% if view_style == "grid" %}boxed-{{ grid_items }}{% endif %}">
+    <div class="video-list {{ view_style }} {% if view_style == "grid" %}grid-{{ grid_items }}{% endif %}">
         {% if results %}
             {% for video in results %}
-                <div class="dl-item {{ view_style }}" id="dl-{{ video.source.youtube_id }}">
-                    <div class="dl-thumb {{ view_style }}">
-                        <img src="/cache/{{ video.source.vid_thumb_url }}" alt="video_thumb">
-                        {% if show_ignored_only %}
-                            <span>ignored</span>
-                        {% else %}
-                            <span>queued</span>
-                        {% endif %}
+                <div class="video-item {{ view_style }}" id="dl-{{ video.source.youtube_id }}">
+                    <div class="video-thumb-wrap {{ view_style }}">
+                        <div class="video-thumb">
+                            <img src="/cache/{{ video.source.vid_thumb_url }}" alt="video_thumb">
+                            {% if show_ignored_only %}
+                                <span>ignored</span>
+                            {% else %}
+                                <span>queued</span>
+                            {% endif %}
+                        </div>
                     </div>
-                    <div class="dl-desc {{ view_style }}">
-                        <h3>{{ video.source.title }}</h3>
-                        {% if video.source.channel_indexed %}
+                    <div class="video-desc {{ view_style }}">
+                        <div>
+                            {% if video.source.channel_indexed %}
                             <a href="{% url 'channel_id' video.source.channel_id %}">{{ video.source.channel_name }}</a>
-                        {% else %}
-                            <span>{{ video.source.channel_name }}</span>
-                        {% endif %}
+                            {% else %}
+                                <span>{{ video.source.channel_name }}</span>
+                            {% endif %}
+                            <h3>{{ video.source.title }}</h3>
+                        </div>
                         <p>Published: {{ video.source.published }} | Duration: {{ video.source.duration }} | {{ video.source.youtube_id }}</p>
-                        {% if show_ignored_only %}
-                            <button data-id="{{ video.source.youtube_id }}" onclick="forgetIgnore(this)">Forget</button>
-                            <button data-id="{{ video.source.youtube_id }}" onclick="addSingle(this)">Add to queue</button>
-                        {% else %}
-                            <button data-id="{{ video.source.youtube_id }}" onclick="toIgnore(this)">Ignore</button>
-                            <button id="{{ video.source.youtube_id }}" data-id="{{ video.source.youtube_id }}" onclick="downloadNow(this)">Download now</button>
-                        {% endif %}
+                        <div>
+                            {% if show_ignored_only %}
+                                <button data-id="{{ video.source.youtube_id }}" onclick="forgetIgnore(this)">Forget</button>
+                                <button data-id="{{ video.source.youtube_id }}" onclick="addSingle(this)">Add to queue</button>
+                            {% else %}
+                                <button data-id="{{ video.source.youtube_id }}" onclick="toIgnore(this)">Ignore</button>
+                                <button id="{{ video.source.youtube_id }}" data-id="{{ video.source.youtube_id }}" onclick="downloadNow(this)">Download now</button>
+                            {% endif %}
+                        </div>
                     </div>
                 </div>
             {% endfor %}

tubearchivist/static/css/style.css

@@ -456,6 +456,10 @@ video:-webkit-full-screen {
     overflow: hidden;
 }
 
+.video-item:hover .video-thumb span {
+    opacity: 1;
+}
+
 .video-item.list {
     display: grid;
     grid-template-columns: 26% auto;
@@ -476,6 +480,16 @@ video:-webkit-full-screen {
     position: relative;
 }
 
+.video-thumb span {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    background-color: var(--accent-font-light);
+    padding: 5px;
+    opacity: 0;
+    transition: 300ms ease-in-out;
+}
+
 .video-play img {
     width: 40px;
     filter: var(--img-filter);
@@ -512,7 +526,7 @@ video:-webkit-full-screen {
     padding: 10px;
     height: 100%;
     display: flex;
-    flex-wrap: wrap-reverse;
+    flex-wrap: wrap;
     align-content: center;
 }
 
@@ -907,73 +921,6 @@ video:-webkit-full-screen {
     cursor: pointer;
 }
 
-.dl-list.list {
-    display: block;
-}
-
-.dl-list.grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-gap: 1rem;
-}
-
-.dl-item.list {
-    display: flex;
-    margin: 15px 0;
-    align-items: center;
-    background-color: var(--highlight-bg);
-}
-
-.dl-item.grid {
-    display: flex;
-    flex-wrap: wrap;
-    background-color: var(--highlight-bg);
-}
-
-.dl-check {
-    width: 30px;
-}
-
-.dl-item:hover > .dl-thumb span {
-    opacity: 1;
-}
-
-.dl-thumb {
-    position: relative;
-}
-
-.dl-thumb span {
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    background-color: var(--accent-font-light);
-    padding: 5px;
-    opacity: 0;
-    transition: 300ms ease-in-out;
-}
-
-.dl-thumb.list {
-    width: 25%;
-}
-
-.dl-thumb.grid {
-    width: 100%;
-}
-
-.dl-item img {
-    width: 100%;
-}
-
-.dl-desc.list {
-    padding: 0 15px;
-    width: 75%;
-}
-
-.dl-desc.grid {
-    padding: 15px;
-    width: 100%;
-}
-
 .dl-control-icons {
     display: flex;
     justify-content: center;
@@ -1131,14 +1078,10 @@ video:-webkit-full-screen {
     .video-list.grid.grid-5,
     .video-list.grid.grid-6,
     .video-list.grid.grid-7,
-    .dl-list.grid,
     .channel-list.grid,
     .playlist-list.grid {
         grid-template-columns: 1fr 1fr;
     }
-    .dl-thumb.list {
-        width: 35%;
-    }
     .video-item.list,
     .playlist-item.list {
         display: grid;
@@ -1182,7 +1125,6 @@ video:-webkit-full-screen {
     .video-list.grid.grid-5,
     .video-list.grid.grid-6,
     .video-list.grid.grid-7,
-    .dl-list.grid,
     .channel-list.grid,
     .video-item.list,
     .playlist-list.list,
@@ -1231,15 +1173,6 @@ video:-webkit-full-screen {
     .description-box {
         display: block;
     }
-    .dl-item {
-        display: block;
-    }
-    .dl-thumb {
-        width: 100%;
-    }
-    .dl-desc {
-        padding: 15px;
-    }
     .backup-grid-row {
         display: flex;
         flex-wrap: wrap;