kumi/steeldonutcollection
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Implement autoplay and autonext for playlists

Browse source
This commit is contained in:
Kumi 2022-05-08 13:56:37 +02:00
parent 46565f520c
commit 9ce5b28763
Signed by: kumi
GPG key ID: 5D1CE6AF1805ECA2
6 changed files with 65 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/templatetags/playlists.py
View file

@ -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

9
frontend/views.py
View file

@ -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)

8
static/js/nextvideo.js Normal file
View file

@ -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); };
};

2
templates/frontend/base.html
View file

@ -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>

48
templates/frontend/playlist.html
View file

@ -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 %}
<li><a href="{{playlist.get_absolute_url}}">{{playlist.title}}</a></li>
{% for pl in playlists %}
<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 %}
<li class="page-item">
{% if not page_obj.number <= 2 %} <li class="page-item">
<a class="page-link" href="?page=1" tabindex="-1">First<a>
</li>
{% endif %}
{% if page_obj.number != 1 %}
<li class="page-item">
<a class="page-link" href="?page={{page_obj.previous_page_number}}">{{page_obj.previous_page_number}}</a>
</li>
{% endif %}
<li class="page-item active">
<a class="page-link" href="?page={{page_obj.number}}">{{page_obj.number}}</a>
</li>
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{page_obj.next_page_number}}">{{page_obj.next_page_number}}</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{page_obj.paginator.num_pages}}">Last</a>
</li>
{% endif %}
</li>
{% endif %}
{% if page_obj.number != 1 %}
<li class="page-item">
<a class="page-link"
href="?page={{page_obj.previous_page_number}}">{{page_obj.previous_page_number}}</a>
</li>
{% endif %}
<li class="page-item active">
<a class="page-link" href="?page={{page_obj.number}}">{{page_obj.number}}</a>
</li>
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link"
href="?page={{page_obj.next_page_number}}">{{page_obj.next_page_number}}</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{page_obj.paginator.num_pages}}">Last</a>
</li>
{% endif %}
</ul>
</nav>
</div>

21
templates/frontend/video.html
View file

@ -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}}"
width="100%" height="100%"></div>
<div class="image">
{% 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 %}
<a href="{{playlist.get_absolute_url}}">{{playlist.title}}</a>
{% for pl in object.playlist_set.all %}
<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 %}