Implement autoplay and autonext for playlists

frontend/templatetags/playlists.py

@@ -21,3 +21,10 @@ def other_videos(playlist, video, count=4):
     older_out = older[-count+len(newer_out):]
 
     return sorted(older_out + newer_out, key=lambda x: x.published)
+
+@register.simple_tag
+def next_video(playlist, video):
+    try:
+        return playlist.videos.filter(published__gt=video.published).order_by('published').first()
+    except:
+        return None

frontend/views.py

@@ -14,6 +14,7 @@ class PlaylistView(ListView):
         context = super().get_context_data(**kwargs)
         context["title"] = "All Videos"
         context["playlists"] = Playlist.objects.all()
+        context["playlist"] = self.get_playlist()
         return context
 
     def get_playlist(self):
@@ -31,7 +32,8 @@ class PlaylistView(ListView):
         return queryset
 
     def get_ordering(self):
-        return self.request.GET.get('sort', '-published')
+        ordering = "published" if self.get_playlist() else "-published"
+        return self.request.GET.get('sort', ordering)
 
 
 class VideoView(DetailView):
@@ -41,4 +43,9 @@ class VideoView(DetailView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context["title"] = self.object.title
+        context["playlist"] = self.get_playlist()
         return context
+
+    def get_playlist(self):
+        if (pid := self.request.GET.get("playlist")):
+            return get_object_or_404(Playlist, id=pid)

static/js/nextvideo.js

@@ -0,0 +1,8 @@
+var player = document.getElementById("videoplayer");
+
+var current = player.getAttribute("data-current");
+var next = player.getAttribute("data-next");
+
+if (next) {
+    player.onended = function () { document.location.href = document.location.href.replace(current, next); };
+};

templates/frontend/base.html

@@ -32,6 +32,8 @@
     <script src="/static/bootstrap/js/bootstrap.min.js"></script>
     <script src="/static/js/pikaday.min.js"></script>
     <script src="/static/js/theme.js"></script>
+{% block scripts %}
+{% endblock %}
 </body>
 
 </html>

templates/frontend/playlist.html

@@ -9,15 +9,16 @@
             <div class="col-md-3">
                 <ul class="list-unstyled sidebar">
                     <li><a class="active" href="/">All</a></li>
-                    {% for playlist in playlists %}
+                    {% for pl in playlists %}
-                    <li><a href="{{playlist.get_absolute_url}}">{{playlist.title}}</a></li>
+                    <li><a href="{{pl.get_absolute_url}}">{{pl.title}}</a></li>
                     {% endfor %}
                 </ul>
             </div>
             <div class="col-md-9">
                 <div class="row">
                     {% for video in object_list %}
-                    <div class="col-md-6 col-lg-4 project-sidebar-card"><a href="{{video.get_absolute_url}}"><img
+                    <div class="col-md-6 col-lg-4 project-sidebar-card"><a
+                            href="{{video.get_absolute_url}}{% if playlist %}?playlist={{playlist.id}}{% endif %}"><img
                                 class="img-fluid image scale-on-hover"
                                 src="{{video.get_thumbnail_url}}">{{video.title}}</a></div>
                     {% endfor %}
@@ -25,27 +26,28 @@
             </div>
             <nav>
                 <ul class="pagination">
-                    {% if not page_obj.number <= 2 %}
+                    {% if not page_obj.number <= 2 %} <li class="page-item">
-                    <li class="page-item">
                         <a class="page-link" href="?page=1" tabindex="-1">First<a>
-                    </li>
+                                </li>
-                    {% endif %}
+                                {% endif %}
-                    {% if page_obj.number != 1 %}
+                                {% if page_obj.number != 1 %}
-                    <li class="page-item">
+                                <li class="page-item">
-                        <a class="page-link" href="?page={{page_obj.previous_page_number}}">{{page_obj.previous_page_number}}</a>
+                                    <a class="page-link"
-                    </li>
+                                        href="?page={{page_obj.previous_page_number}}">{{page_obj.previous_page_number}}</a>
-                    {% endif %}
+                                </li>
-                    <li class="page-item active">
+                                {% endif %}
-                        <a class="page-link" href="?page={{page_obj.number}}">{{page_obj.number}}</a>
+                                <li class="page-item active">
-                    </li>
+                                    <a class="page-link" href="?page={{page_obj.number}}">{{page_obj.number}}</a>
-                    {% if page_obj.has_next %}
+                                </li>
-                    <li class="page-item">
+                                {% if page_obj.has_next %}
-                        <a class="page-link" href="?page={{page_obj.next_page_number}}">{{page_obj.next_page_number}}</a>
+                                <li class="page-item">
-                    </li>
+                                    <a class="page-link"
-                    <li class="page-item">
+                                        href="?page={{page_obj.next_page_number}}">{{page_obj.next_page_number}}</a>
-                        <a class="page-link" href="?page={{page_obj.paginator.num_pages}}">Last</a>
+                                </li>
-                    </li>
+                                <li class="page-item">
-                    {% endif %}
+                                    <a class="page-link" href="?page={{page_obj.paginator.num_pages}}">Last</a>
+                                </li>
+                                {% endif %}
                 </ul>
             </nav>
         </div>

templates/frontend/video.html

@@ -7,8 +7,12 @@
         <div class="heading">
             <h2>{{object.title}}</h2>
         </div>
-        <div class="image"><video controls poster="{{object.get_thumbnail_url}}" src="{{object.get_video_url}}"
+        <div class="image">
-                width="100%" height="100%"></div>
+            {% if playlist %}{% next_video playlist object as next %}{% endif %}
+            <video controls poster="{{object.get_thumbnail_url}}" src="{{object.get_video_url}}" width="100%"
+                height="100%" data-current="{{object.id}}" {% if next %}data-next="{{next.id}}" {% endif %}
+                id="videoplayer" autoplay>
+        </div>
         <div class="row">
             <div class="col-12 col-md-6 offset-md-1 info">
                 <h3>Description</h3>
@@ -17,24 +21,26 @@
             <div class="col-12 col-md-3 offset-md-1 meta">
                 {% if object.playlist_set.all %}
                 <div class="tags"><span class="meta-heading">Part of Playlists</span>
-                    {% for playlist in object.playlist_set.all %}
+                    {% for pl in object.playlist_set.all %}
-                    <a href="{{playlist.get_absolute_url}}">{{playlist.title}}</a>
+                    <a href="{{pl.get_absolute_url}}">{{pl.title}}</a>
                     {% endfor %}
                 </div>
                 <hr>
                 {% endif %}
+                {% if object.tags %}
                 <div class="tags"><span class="meta-heading">Tags</span>
                     {% for tag in object.tags %}
                     <a href="#">{{tag}}</a>
                     {% endfor %}
                 </div>
                 <hr>
+                {% endif %}
                 <div class="tags"><span class="meta-heading">Date</span>
                     {{ object.published.date }}
                 </div>
             </div>
         </div>
-        {% for playlist in object.playlist_set.all %}
+        {% if playlist %}
         <div class="more-projects">
             <h3 class="text-center">Other videos in {{playlist.title}}</h3>
             <div class="row gallery">
@@ -47,7 +53,7 @@
                 {% endfor %}
             </div>
         </div>
-        {% endfor %}
+        {% endif %}
         <div class="more-projects">
             <h3 class="text-center">Random Videos</h3>
             <div class="row gallery">
@@ -62,4 +68,7 @@
         </div>
     </div>
 </section>
+{% endblock %}
+{% block scripts %}
+<script src="/static/js/nextvideo.js"></script>
 {% endblock %}