grid row ui improvements, #build

Changed:
- Better styled grid row, hid controlls if not applicable
- Changed subtitle naming convention
- Timeout for search as you type
- move delete queue button to settings page

tubearchivist/home/src/download/queue.py

@@ -269,9 +269,12 @@ class PendingList(PendingIndex):
             "vid_thumb_url": vid["thumbnail"],
             "title": vid["title"],
             "channel_id": vid["channel_id"],
-            "channel_indexed": vid["channel_id"] in self.all_channels,
             "duration": duration_str,
             "published": published,
             "timestamp": int(datetime.now().strftime("%s")),
         }
+        if self.all_channels:
+            youtube_details.update(
+                {"channel_indexed": vid["channel_id"] in self.all_channels}
+            )
         return youtube_details

tubearchivist/home/src/download/yt_dlp_base.py

@@ -30,7 +30,8 @@ class YtWrap:
         """build yt-dlp obs"""
         self.obs = self.OBS_BASE.copy()
         self.obs.update(self.obs_request)
-        self.add_cookie()
+        if self.config:
+            self.add_cookie()
 
     def add_cookie(self):
         """add cookie if enabled"""

tubearchivist/home/src/index/reindex.py

@@ -153,6 +153,7 @@ class Reindex:
         date_downloaded = video.json_data["date_downloaded"]
         channel_dict = video.json_data["channel"]
         playlist = video.json_data.get("playlist")
+        subtitles = video.json_data.get("subtitles")
 
         # get new
         video.build_json()
@@ -160,7 +161,7 @@ class Reindex:
             video.deactivate()
             return
 
-        video.delete_subtitles()
+        video.delete_subtitles(subtitles=subtitles)
         video.check_subtitles()
 
         # add back

tubearchivist/home/src/index/video.py

@@ -67,7 +67,7 @@ class YoutubeSubtitle:
             return False
 
         video_media_url = self.video.json_data["media_url"]
-        media_url = video_media_url.replace(".mp4", f"-{lang}.vtt")
+        media_url = video_media_url.replace(".mp4", f".{lang}.vtt")
         all_formats = all_subtitles.get(lang)
         if not all_formats:
             return False
@@ -103,7 +103,7 @@ class YoutubeSubtitle:
             return False
 
         video_media_url = self.video.json_data["media_url"]
-        media_url = video_media_url.replace(".mp4", f"-{lang}.vtt")
+        media_url = video_media_url.replace(".mp4", f".{lang}.vtt")
         all_formats = all_subtitles.get(lang)
         if not all_formats:
             # no user subtitles found
@@ -152,15 +152,19 @@ class YoutubeSubtitle:
         """send subtitle to es for indexing"""
         _, _ = ElasticWrap("_bulk").post(data=query_str, ndjson=True)
 
-    def delete(self):
+    def delete(self, subtitles=False):
         """delete subtitles from index and filesystem"""
         youtube_id = self.video.youtube_id
-        # delete files
         videos_base = self.video.config["application"]["videos"]
-        if not self.video.json_data.get("subtitles"):
+        # delete files
-            return
+        if subtitles:
+            files = [i["media_url"] for i in subtitles]
+        else:
+            if not self.video.json_data.get("subtitles"):
+                return
+
+            files = [i["media_url"] for i in self.video.json_data["subtitles"]]
 
-        files = [i["media_url"] for i in self.video.json_data["subtitles"]]
         for file_name in files:
             file_path = os.path.join(videos_base, file_name)
             try:
@@ -594,10 +598,10 @@ class YoutubeVideo(YouTubeItem, YoutubeSubtitle):
                     )
             playlist.upload_to_es()
 
-    def delete_subtitles(self):
+    def delete_subtitles(self, subtitles=False):
         """delete indexed subtitles"""
         print(f"{self.youtube_id}: delete subtitles")
-        YoutubeSubtitle(self).delete()
+        YoutubeSubtitle(self).delete(subtitles=subtitles)
 
     def _get_ryd_stats(self):
         """get optional stats from returnyoutubedislikeapi.com"""

tubearchivist/home/templates/home/channel_id.html

@@ -145,9 +145,12 @@
             <img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()" id="animate-icon">
             {% if view_style == "grid" %}
             <div class="grid-count">
-                <span>{{ grid_items }}</span>
+                {% if grid_items < 7 %}
-                <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
+                    <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
-                <img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus 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="home" data-value="grid" alt="grid view">

tubearchivist/home/templates/home/downloads.html

@@ -45,15 +45,6 @@
             <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view">
         </div>
     </div>
-    <div class="title-split">
-        {% if show_ignored_only %}
-            <h2>Ignored from download</h2>
-            <button onclick="deleteQueue(this)" data-id="ignore" title="Delete all previously ignored videos from the queue">Delete all ignored</button>
-        {% else %}
-            <h2>Download queue</h2>
-            <button onclick="deleteQueue(this)" data-id="pending" title="Delete all pending videos from the queue">Delete all queued</button>
-        {% endif %}
-    </div>
     <h3>Total videos: {{ max_hits }}{% if max_hits == 10000 %}+{% endif %}</h3>
     <div class="dl-list {{ view_style }}">
         {% if results %}

tubearchivist/home/templates/home/home.html

@@ -76,9 +76,12 @@
             <img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()" id="animate-icon">
             {% if view_style == "grid" %}
                 <div class="grid-count">
-                    <span>{{ grid_items }}</span>
+                    {% if grid_items < 7 %}
-                    <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
+                        <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
-                    <img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus 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="home" data-value="grid" alt="grid view">

tubearchivist/home/templates/home/playlist_id.html

@@ -80,9 +80,12 @@
         <div class="view-icons">
             {% if view_style == "grid" %}
             <div class="grid-count">
-                <span>{{ grid_items }}</span>
+                {% if grid_items < 7 %}
-                <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
+                    <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
-                <img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus 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="home" data-value="grid" alt="grid view">

tubearchivist/home/templates/home/search.html

@@ -1,7 +1,7 @@
 {% extends "home/base.html" %}
 {% block content %}
 <div id="player" class="player-wrapper"></div>
-<div class="boxed-content">
+<div class="boxed-content {% if all_styles.home == "grid" %}boxed-{{ grid_items }}{% endif %}">
     <div class="title-bar">
         <h1>Search your Archive</h1>
     </div>
@@ -10,7 +10,7 @@
     </div>
     <div class="multi-search-result">
         <h2>Video Results</h2>
-        <div id="video-results" class="video-list {{ all_styles.home }}">
+        <div id="video-results" class="video-list {{ all_styles.home }} {% if all_styles.home == "grid" %}grid-{{ grid_items }}{% endif %}">
             <p>No videos found.</p>
         </div>
     </div>

tubearchivist/home/templates/home/settings.html

@@ -269,6 +269,12 @@
     <div class="title-bar">
         <h1>Actions</h1>
     </div>
+    <div class="settings-group">
+        <h2>Delete download queue</h2>
+        <p>Delete your pending or previously ignored videos from your download queue.<p>
+        <button onclick="deleteQueue(this)" id="ignore-button" data-id="ignore" title="Delete all previously ignored videos from the queue">Delete all ignored</button>
+        <button onclick="deleteQueue(this)" id="pending-button" data-id="pending" title="Delete all pending videos from the queue">Delete all queued</button>
+    </div>
     <div class="settings-group">
         <h2>Manual media files import.</h2>
         <p>Add files to the <span class="settings-current">cache/import</span> folder. Make sure to follow the instructions in the Github <a href="https://github.com/tubearchivist/tubearchivist/wiki/Settings" target="_blank">Wiki</a>.</p>

tubearchivist/requirements.txt

@@ -1,5 +1,5 @@
 beautifulsoup4==4.11.1
-celery==5.2.6
+celery==5.2.7
 Django==4.0.4
 django-cors-headers==3.12.0
 djangorestframework==3.13.1

tubearchivist/static/css/style.css

@@ -346,14 +346,20 @@ button:hover {
     justify-content: end;
 }
 
-.view-icons img,
+.view-icons img {
-.grid-count img {
     width: 30px;
     margin: 5px 10px;
     cursor: pointer;
     filter: var(--img-filter);
 }
 
+.grid-count img {
+    width: 15px;
+    margin: 5px;
+    cursor: pointer;
+    filter: var(--img-filter);
+}
+
 #hidden-form {
     display: none;
 }

tubearchivist/static/script.js

@@ -203,10 +203,10 @@ function deleteQueue(button) {
     var to_delete = button.getAttribute('data-id');
     var payload = JSON.stringify({'deleteQueue': to_delete});
     sendPost(payload);
-    setTimeout(function(){
+    // clear button
-        location.reload();
+    var message = document.createElement('p');
-        return false;
+    message.innerText = 'deleting download queue: ' + to_delete;
-    }, 1000);
+    document.getElementById(button.id).replaceWith(message);
 }
 
 function stopQueue() {
@@ -785,21 +785,25 @@ function setProgressBar(videoId, currentTime, duration) {
 }
 
 // multi search form
+let searchTimeout = null;
 function searchMulti(query) {
-    if (query.length > 1) {
+    clearTimeout(searchTimeout);
-        var payload = JSON.stringify({'multi_search': query});
+    searchTimeout = setTimeout(function () {
-        var http = new XMLHttpRequest();
+        if (query.length > 1) {
-        http.onreadystatechange = function() {
+            var payload = JSON.stringify({'multi_search': query});
-            if (http.readyState === 4) {
+            var http = new XMLHttpRequest();
-                allResults = JSON.parse(http.response).results;
+            http.onreadystatechange = function() {
-                populateMultiSearchResults(allResults);
+                if (http.readyState === 4) {
-            }
+                    allResults = JSON.parse(http.response).results;
-        };
+                    populateMultiSearchResults(allResults);
-        http.open("POST", "/process/", true);
+                }
-        http.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
+            };
-        http.setRequestHeader("Content-type", "application/json");
+            http.open("POST", "/process/", true);
-        http.send(payload);
+            http.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
-    }
+            http.setRequestHeader("Content-type", "application/json");
+            http.send(payload);
+        }
+    }, 500);
 }
 
 function getViewDefaults(view) {