add continue watching section to home page

This commit is contained in:
simon 2022-03-07 20:26:37 +07:00
parent 25bc66ae80
commit 437e83b2ae
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
3 changed files with 48 additions and 4 deletions

View File

@ -2,6 +2,46 @@
{% block content %} {% block content %}
{% load static %} {% load static %}
<div class="boxed-content"> <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"> <div class="title-bar">
<h1>Recent Videos</h1> <h1>Recent Videos</h1>
</div> </div>

View File

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

View File

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