add video progress bar

tubearchivist/home/templates/home/home.html

@@ -49,6 +49,9 @@
                         <div class="video-thumb-wrap {{ view_style }}">
                             <div class="video-thumb">
                                 <img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
+                                {% if video.source.player.progress %}
+                                <div class="video-progress-bar" id="progress-{{ video.source.youtube_id }}" style="width: {{video.source.player.progress}}%;"></div>
+                                {% endif %}
                             </div>
                             <div class="video-play">
                                 <img src="{% static 'img/icon-play.svg' %}" alt="play-icon">

tubearchivist/home/views.py

@@ -169,6 +169,17 @@ class ArchivistResultsView(ArchivistViewConfig):
         }
         self.data = data
 
+    def match_progress(self):
+        """add video progress to result context"""
+        results = RedisArchivist().list_items(f"{self.user_id}:progress:")
+        progress = {i["youtube_id"]: i["position"] for i in results}
+        for hit in self.context["results"]:
+            video = hit["source"]
+            if video["youtube_id"] in progress:
+                played_sec = progress.get(video["youtube_id"])
+                total = video["player"]["duration"]
+                video["player"]["progress"] = 100 * (played_sec / total)
+
     def single_lookup(self, es_path):
         """retrieve a single item from url"""
         search = SearchHandler(es_path, config=self.default_conf)
@@ -212,6 +223,7 @@ class HomeView(ArchivistResultsView):
         self.initiate_vars(request)
         self._update_view_data()
         self.find_results()
+        self.match_progress()
 
         return render(request, "home/home.html", self.context)
 

tubearchivist/static/css/style.css

@@ -391,8 +391,17 @@ button:hover {
     grid-template-columns: 25% auto;
 }
 
+.video-progress-bar {
+    position: absolute;
+    background-color: var(--accent-font-light);
+    height: 7px;
+    left: 0;
+    bottom: 3px;
+}
+
 .video-thumb img {
     width: 100%;
+    position: relative;
 }
 
 .video-play img {