tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-22 11:50:14 +00:00
Code Issues Projects Releases Wiki Activity

add video progress bar

Browse Source
This commit is contained in:
simon 2022-02-24 18:58:26 +07:00
parent 6078d8d276
commit d88d6d6a61
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
3 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
tubearchivist/home/templates/home/home.html
View File

@ -49,6 +49,9 @@
<div class="video-thumb-wrap {{ view_style }}">
<div class="video-thumb">
<img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
{% if video.source.player.progress %}
<div class="video-progress-bar" id="progress-{{ video.source.youtube_id }}" style="width: {{video.source.player.progress}}%;"></div>
{% endif %}
</div>
<div class="video-play">
<img src="{% static 'img/icon-play.svg' %}" alt="play-icon">

12
tubearchivist/home/views.py
View File

@ -169,6 +169,17 @@ class ArchivistResultsView(ArchivistViewConfig):
}
self.data = data
def match_progress(self):
"""add video progress to result context"""
results = RedisArchivist().list_items(f"{self.user_id}:progress:")
progress = {i["youtube_id"]: i["position"] for i in results}
for hit in self.context["results"]:
video = hit["source"]
if video["youtube_id"] in progress:
played_sec = progress.get(video["youtube_id"])
total = video["player"]["duration"]
video["player"]["progress"] = 100 * (played_sec / total)
def single_lookup(self, es_path):
"""retrieve a single item from url"""
search = SearchHandler(es_path, config=self.default_conf)
@ -212,6 +223,7 @@ class HomeView(ArchivistResultsView):
self.initiate_vars(request)
self._update_view_data()
self.find_results()
self.match_progress()
return render(request, "home/home.html", self.context)

9
tubearchivist/static/css/style.css
View File

@ -391,8 +391,17 @@ button:hover {
grid-template-columns: 25% auto;
}
.video-progress-bar {
position: absolute;
background-color: var(--accent-font-light);
height: 7px;
left: 0;
bottom: 3px;
}
.video-thumb img {
width: 100%;
position: relative;
}
.video-play img {