mirror of
https://github.com/tubearchivist/tubearchivist-frontend.git
synced 2024-11-23 04:10:13 +00:00
add video playlist navigation, previous and next
This commit is contained in:
parent
3d969c25fa
commit
e450b38702
@ -574,6 +574,43 @@ class YoutubePlaylist:
|
|||||||
if not response.ok:
|
if not response.ok:
|
||||||
print(response.text)
|
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:
|
class WatchState:
|
||||||
"""handle watched checkbox for videos and channels"""
|
"""handle watched checkbox for videos and channels"""
|
||||||
|
@ -72,4 +72,39 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% 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 %}
|
{% endblock content %}
|
@ -27,7 +27,12 @@ from home.forms import (
|
|||||||
from home.src.config import AppConfig
|
from home.src.config import AppConfig
|
||||||
from home.src.download import ChannelSubscription, PendingList
|
from home.src.download import ChannelSubscription, PendingList
|
||||||
from home.src.helper import RedisArchivist, RedisQueue, UrlListParser
|
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.src.searching import Pagination, SearchForm, SearchHandler
|
||||||
from home.tasks import (
|
from home.tasks import (
|
||||||
download_pending,
|
download_pending,
|
||||||
@ -773,10 +778,34 @@ class VideoView(View):
|
|||||||
except KeyError:
|
except KeyError:
|
||||||
video_data["stats"]["average_rating"] = False
|
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"]
|
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)
|
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
|
@staticmethod
|
||||||
def read_config(user_id):
|
def read_config(user_id):
|
||||||
"""read config file"""
|
"""read config file"""
|
||||||
|
@ -610,6 +610,36 @@ button:hover {
|
|||||||
transform: rotate(180deg);
|
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 overview page */
|
||||||
.channel-list.list {
|
.channel-list.list {
|
||||||
display: block;
|
display: block;
|
||||||
|
Loading…
Reference in New Issue
Block a user