add video playlist navigation, previous and next

tubearchivist/home/src/index.py

@@ -574,6 +574,43 @@ class YoutubePlaylist:
         if not response.ok:
             print(response.text)
 
+    def build_nav(self, youtube_id):
+        """find next and previous in playlist of a given youtube_id"""
+        all_entries_available = self.playlist_dict["playlist_entries"]
+        all_entries = [i for i in all_entries_available if i["downloaded"]]
+        current = [i for i in all_entries if i["youtube_id"] == youtube_id]
+        # stop if not found or playlist of 1
+        if not current or not len(all_entries) > 1:
+            return False
+
+        current_idx = current[0]["idx"]
+        if current_idx == 0:
+            previous_item = False
+        else:
+            previous_item = all_entries[current_idx - 1]
+            prev_thumb = ThumbManager().vid_thumb_path(
+                previous_item["youtube_id"]
+            )
+            previous_item["vid_thumb"] = prev_thumb
+
+        if current_idx == len(all_entries) - 1:
+            next_item = False
+        else:
+            next_item = all_entries[current_idx + 1]
+            next_thumb = ThumbManager().vid_thumb_path(next_item["youtube_id"])
+            next_item["vid_thumb"] = next_thumb
+
+        nav = {
+            "playlist_meta": {
+                "playlist_id": self.playlist_id,
+                "playlist_name": self.playlist_dict["playlist_name"],
+                "playlist_channel": self.playlist_dict["playlist_channel"],
+            },
+            "playlist_previous": previous_item,
+            "playlist_next": next_item,
+        }
+        return nav
+
 
 class WatchState:
     """handle watched checkbox for videos and channels"""

tubearchivist/home/templates/home/video.html

@@ -72,4 +72,39 @@
         </div>
     </div>
 {% endif %}
+{% for playlist_item in playlist_nav %}
+    <div class="playlist-wrap">
+        <a href="{% url 'playlist_id' playlist_item.playlist_meta.playlist_id %}">
+            <h3>Playlist: {{ playlist_item.playlist_meta.playlist_name }}</h3>
+        </a>
+        <div class="playlist-nav">    
+            <div class="playlist-nav-item">
+                {% if playlist_item.playlist_previous %}
+                    <a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
+                        <img src="/cache/{{ playlist_item.playlist_previous.vid_thumb }}" alt="previous thumbnail">
+                    </a>
+                    <div class="playlist-desc">
+                        <p>Previous:</p>
+                        <a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
+                            <h3>{{ playlist_item.playlist_previous.title }}</h3>
+                        </a>
+                    </div>
+                {% endif %}
+            </div>
+            <div class="playlist-nav-item">
+                {% if playlist_item.playlist_next %}
+                    <div class="playlist-desc">
+                        <p>Next:</p>
+                        <a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
+                            <h3>{{ playlist_item.playlist_next.title }}</h3>
+                        </a>
+                    </div>
+                    <a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
+                        <img src="/cache/{{ playlist_item.playlist_next.vid_thumb }}" alt="previous thumbnail">
+                    </a>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+{% endfor %}
 {% endblock content %}

tubearchivist/home/views.py

@@ -27,7 +27,12 @@ from home.forms import (
 from home.src.config import AppConfig
 from home.src.download import ChannelSubscription, PendingList
 from home.src.helper import RedisArchivist, RedisQueue, UrlListParser
-from home.src.index import WatchState, YoutubeChannel, YoutubeVideo
+from home.src.index import (
+    WatchState,
+    YoutubeChannel,
+    YoutubePlaylist,
+    YoutubeVideo,
+)
 from home.src.searching import Pagination, SearchForm, SearchHandler
 from home.tasks import (
     download_pending,
@@ -773,10 +778,34 @@ class VideoView(View):
         except KeyError:
             video_data["stats"]["average_rating"] = False
 
+        if "playlist" in video_data.keys():
+            playlists = video_data["playlist"]
+            playlist_nav = self.build_playlists(video_id, playlists)
+        else:
+            playlist_nav = False
+
         video_title = video_data["title"]
-        context = {"video": video_data, "title": video_title, "colors": colors}
+        context = {
+            "video": video_data,
+            "playlist_nav": playlist_nav,
+            "title": video_title,
+            "colors": colors,
+        }
         return render(request, "home/video.html", context)
 
+    @staticmethod
+    def build_playlists(video_id, playlists):
+        """build playlist nav if available"""
+        all_navs = []
+        for playlist_id in playlists:
+            handler = YoutubePlaylist(playlist_id)
+            handler.get_playlist_dict()
+            nav = handler.build_nav(video_id)
+            if nav:
+                all_navs.append(nav)
+
+        return all_navs
+
     @staticmethod
     def read_config(user_id):
         """read config file"""

tubearchivist/static/css/style.css

@@ -610,6 +610,36 @@ button:hover {
     transform: rotate(180deg);
 }
 
+.playlist-wrap {
+    background-color: var(--highlight-bg);
+    margin: 1rem 0;
+    padding: 1rem;
+}
+
+.playlist-wrap > a > h3 {
+    text-align: center;
+}
+
+.playlist-nav {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin-bottom: 10px;
+}
+
+.playlist-nav-item {
+    display: flex;
+    justify-content: space-between;
+}
+
+.playlist-nav-item img {
+    width: 200px;
+}
+
+.playlist-desc {
+    padding: 5px;
+    width: 100%;
+}
+
 /* channel overview page */
 .channel-list.list {
     display: block;