add continue watching section to home page

tubearchivist/home/templates/home/home.html

@@ -2,6 +2,46 @@
 {% block content %}
 {% load static %}
 <div class="boxed-content">
+    {% if continue_vids %}
+        <div class="title-bar">
+            <h1>Continue Watching</h1>
+        </div>
+        <div class="video-list {{ view_style }}">
+            {% for video in continue_vids %}
+                <div class="video-item {{ view_style }}">
+                    <a href="#player" data-id="{{ video.youtube_id }}" onclick="createPlayer(this)">
+                        <div class="video-thumb-wrap {{ view_style }}">
+                            <div class="video-thumb">
+                                <img src="/cache/{{ video.vid_thumb_url }}" alt="video-thumb">
+                                {% if video.player.progress %}
+                                <div class="video-progress-bar" id="progress-{{ video.youtube_id }}" style="width: {{video.player.progress}}%;"></div>
+                                {% else %}
+                                <div class="video-progress-bar" id="progress-{{ video.youtube_id }}" style="width: 0%;"></div>
+                                {% endif %}
+                            </div>
+                            <div class="video-play">
+                                <img src="{% static 'img/icon-play.svg' %}" alt="play-icon">
+                            </div>
+                        </div>
+                    </a>
+                    <div class="video-desc {{ view_style }}">
+                        <div class="video-desc-player" id="video-info-{{ video.youtube_id }}">
+                            {% if video.player.watched %}
+                                <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
+                            {% else %}
+                                <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
+                            {% endif %}
+                            <span>{{ video.published }} | {{ video.player.duration_str }}</span>
+                        </div>
+                        <div>
+                            <a href="{% url 'channel_id' video.channel.channel_id %}"><h3>{{ video.channel.channel_name }}</h3></a>
+                            <a class="video-more" href="{% url 'video' video.youtube_id %}"><h2>{{ video.title }}</h2></a>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    {% endif %}
     <div class="title-bar">
         <h1>Recent Videos</h1>
     </div>

tubearchivist/home/views.py

@@ -175,6 +175,7 @@ class ArchivistResultsView(ArchivistViewConfig):
         if not results or not self.context["results"]:
             return
 
+        self.context["continue_vids"] = []
         progress = {i["youtube_id"]: i["position"] for i in results}
         for hit in self.context["results"]:
             video = hit["source"]
@@ -182,6 +183,7 @@ class ArchivistResultsView(ArchivistViewConfig):
                 played_sec = progress.get(video["youtube_id"])
                 total = video["player"]["duration"]
                 video["player"]["progress"] = 100 * (played_sec / total)
+                self.context["continue_vids"].append(video)
 
     def single_lookup(self, es_path):
         """retrieve a single item from url"""

tubearchivist/static/css/style.css

@@ -370,16 +370,18 @@ button:hover {
 }
 
 /* video list */
-.video-list.grid {
+.video-list {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
     grid-gap: 1rem;
+    margin-top: 1rem;
+}
+
+.video-list.grid {
+    grid-template-columns: 1fr 1fr 1fr;
 }
 
 .video-list.list {
-    display: grid;
     grid-template-columns: unset;
-    grid-gap: 1rem;
 }
 
 .video-item {