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

Merge video progress bar to master

Browse Source
This commit is contained in:
simon 2022-02-26 09:26:53 +07:00
commit 6822ed380d
12 changed files with 110 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tubearchivist/api/views.py
View File

@ -123,7 +123,7 @@ class VideoProgressView(ApiBaseView):
"""set progress position in redis"""
position = request.data.get("position", 0)
key = f"{request.user.id}:progress:{video_id}"
message = {"position": position}
message = {"position": position, "youtube_id": video_id}
RedisArchivist().set_message(key, message, expire=False)
self.response = request.data

16
tubearchivist/home/src/download/subscriptions.py
View File

@ -48,7 +48,13 @@ class ChannelSubscription:
}
if limit:
obs["playlistend"] = self.channel_size
chan = yt_dlp.YoutubeDL(obs).extract_info(url, download=False)
try:
chan = yt_dlp.YoutubeDL(obs).extract_info(url, download=False)
except yt_dlp.utils.DownloadError:
print(f"{channel_id}: failed to extract videos, skipping.")
return False
last_videos = [(i["id"], i["title"]) for i in chan["entries"]]
return last_videos
@ -66,9 +72,11 @@ class ChannelSubscription:
for idx, channel in enumerate(all_channels):
channel_id = channel["channel_id"]
last_videos = self.get_last_youtube_videos(channel_id)
for video in last_videos:
if video[0] not in to_ignore:
missing_videos.append(video[0])
if last_videos:
for video in last_videos:
if video[0] not in to_ignore:
missing_videos.append(video[0])
# notify
message = {
"status": "message:rescan",

13
tubearchivist/home/src/ta/ta_redis.py
View File

@ -59,6 +59,19 @@ class RedisArchivist:
return json_str
def list_items(self, query):
"""list all matches"""
reply = self.redis_connection.execute_command(
"KEYS", self.NAME_SPACE + query + "*"
)
all_matches = [i.decode().lstrip(self.NAME_SPACE) for i in reply]
all_results = []
for match in all_matches:
json_str = self.get_message(match)
all_results.append(json_str)
return all_results
def del_message(self, key):
"""delete key from redis"""
response = self.redis_connection.execute_command(

2
tubearchivist/home/templates/home/base.html
View File

@ -132,7 +132,7 @@
</div>
<div class="footer">
<div class="boxed-content">
<span>© 2021 - <script type="text/javascript">document.write(new Date().getFullYear());</script> TubeArchivist v0.1.1 </span><span><a href="{% url 'about' %}">About</a> | <a href="https://github.com/bbilly1/tubearchivist" target="_blank">GitHub</a> | <a href="https://hub.docker.com/r/bbilly1/tubearchivist" target="_blank">Docker Hub</a> | <a href="https://discord.gg/AFwz8nE7BK" target="_blank">Discord</a> | <a href="https://www.reddit.com/r/TubeArchivist/">Reddit</a></span>
<span>© 2021 - <script type="text/javascript">document.write(new Date().getFullYear());</script> TubeArchivist v0.1.2 </span><span><a href="{% url 'about' %}">About</a> | <a href="https://github.com/bbilly1/tubearchivist" target="_blank">GitHub</a> | <a href="https://hub.docker.com/r/bbilly1/tubearchivist" target="_blank">Docker Hub</a> | <a href="https://discord.gg/AFwz8nE7BK" target="_blank">Discord</a> | <a href="https://www.reddit.com/r/TubeArchivist/">Reddit</a></span>
</div>
</div>
</body>

5
tubearchivist/home/templates/home/channel_id.html
View File

@ -110,6 +110,11 @@
<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>
{% else %}
<div class="video-progress-bar" id="progress-{{ video.source.youtube_id }}" style="width: 0%;"></div>
{% endif %}
</div>
<div class="video-play">
<img src="{% static 'img/icon-play.svg' %}" alt="play-icon">

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

@ -49,6 +49,11 @@
<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>
{% else %}
<div class="video-progress-bar" id="progress-{{ video.source.youtube_id }}" style="width: 0%;"></div>
{% endif %}
</div>
<div class="video-play">
<img src="{% static 'img/icon-play.svg' %}" alt="play-icon">

5
tubearchivist/home/templates/home/playlist_id.html
View File

@ -91,6 +91,11 @@
<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>
{% else %}
<div class="video-progress-bar" id="progress-{{ video.source.youtube_id }}" style="width: 0%;"></div>
{% endif %}
</div>
<div class="video-play">
<img src="{% static 'img/icon-play.svg' %}" alt="play-icon">

4
tubearchivist/home/templates/home/video.html
View File

@ -113,6 +113,8 @@
{% endif %}
</div>
<script>
window.onload = insertVideoTag('{{ video.youtube_id }}');
var videoData = getVideoData('{{ video.youtube_id }}');
var videoProgress = getVideoProgress('{{ video.youtube_id }}').position;
window.onload = insertVideoTag(videoData, videoProgress);
</script>
{% endblock content %}

17
tubearchivist/home/views.py
View File

@ -169,6 +169,20 @@ 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:")
if not results or not self.context["results"]:
return
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 +226,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)
@ -355,6 +370,7 @@ class ChannelIdView(ArchivistResultsView):
self.initiate_vars(request)
self._update_view_data(channel_id)
self.find_results()
self.match_progress()
if self.context["results"]:
channel_info = self.context["results"][0]["source"]["channel"]
@ -456,6 +472,7 @@ class PlaylistIdView(ArchivistResultsView):
playlist_name = playlist_info["playlist_name"]
self._update_view_data(playlist_id, playlist_info)
self.find_results()
self.match_progress()
self.context.update(
{
"title": "Playlist: " + playlist_name,

1
tubearchivist/static/cast-videos.js
View File

@ -43,6 +43,7 @@ function castVideoProgress(player) {
var duration = player.duration;
if ((currentTime % 10) <= 1.0 && currentTime != 0 && duration != 0) { // Check progress every 10 seconds or else progress is checked a few times a second
postVideoProgress(videoId, currentTime);
setProgressBar(videoId, currentTime, duration);
if (!getVideoPlayerWatchStatus()) { // Check if video is already marked as watched
if (watchedThreshold(currentTime, duration)) {
isWatched(videoId);

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-dark);
height: 7px;
left: 0;
bottom: 3px;
}
.video-thumb img {
width: 100%;
position: relative;
}
.video-play img {

51
tubearchivist/static/script.js
View File

@ -10,6 +10,7 @@ function sortChange(sortValue) {
function isWatched(youtube_id) {
postVideoProgress(youtube_id, 0); // Reset video progress on watched;
removeProgressBar(youtube_id);
var payload = JSON.stringify({'watched': youtube_id});
sendPost(payload);
var seenIcon = document.createElement('img');
@ -22,6 +23,11 @@ function isWatched(youtube_id) {
document.getElementById(youtube_id).replaceWith(seenIcon);
}
// Removes the progress bar when passed a video id
function removeProgressBar(videoId) {
setProgressBar(videoId, 0, 1);
}
function isWatchedButton(button) {
youtube_id = button.getAttribute("data-id");
var payload = JSON.stringify({'watched': youtube_id});
@ -298,9 +304,10 @@ function cancelDelete() {
function createPlayer(button) {
var videoId = button.getAttribute('data-id');
var videoData = getVideoData(videoId);
var videoProgress = getVideoProgress(videoId).position;
var videoName = videoData.data.title;
var videoTag = createVideoTag(videoId);
var videoTag = createVideoTag(videoData, videoProgress);
var playlist = '';
var videoPlaylists = videoData.data.playlist; // Array of playlists the video is in
@ -369,19 +376,17 @@ function createPlayer(button) {
}
// Add video tag to video page when passed a video id, function loaded on page load `video.html (115-117)`
function insertVideoTag(videoId) {
var videoTag = createVideoTag(videoId);
function insertVideoTag(videoData, videoProgress) {
var videoTag = createVideoTag(videoData, videoProgress);
var videoMain = document.getElementsByClassName("video-main");
videoMain[0].innerHTML = videoTag;
}
// Generates a video tag with subtitles when passed a video id.
function createVideoTag(videoId) {
var videoData = getVideoData(videoId);
var videoProgress = getVideoProgress(videoId).position;
// Generates a video tag with subtitles when passed videoData and videoProgress.
function createVideoTag(videoData, videoProgress) {
var videoId = videoData.data.youtube_id;
var videoUrl = videoData.data.media_url;
var videoThumbUrl = videoData.data.vid_thumb_url;
var subtitles = '';
var videoSubtitles = videoData.data.subtitles; // Array of subtitles
if (typeof(videoSubtitles) != 'undefined' && videoData.config.downloads.subtitle) {
@ -391,7 +396,7 @@ function createVideoTag(videoId) {
}
var videoTag = `
<video poster="${videoThumbUrl}" ontimeupdate="onVideoProgress()" onpause="onVideoPause()" controls autoplay width="100%" playsinline id="video-item">
<video poster="${videoThumbUrl}" ontimeupdate="onVideoProgress()" onpause="onVideoPause()" onended="onVideoEnded()" controls autoplay width="100%" playsinline id="video-item">
<source src="${videoUrl}#t=${videoProgress}" type="video/mp4" id="video-source" videoid="${videoId}">
${subtitles}
</video>
@ -460,6 +465,14 @@ function onVideoProgress() {
}
}
// Runs on video end, marks video as watched
function onVideoEnded() {
var videoId = getVideoPlayerVideoId();
if (!getVideoPlayerWatchStatus()) { // Check if video is already marked as watched
isWatched(videoId);
}
}
function watchedThreshold(currentTime, duration) {
var watched = false;
if (duration <= 1800){ // If video is less than 30 min
@ -538,16 +551,17 @@ function getSubbedPlaylists(videoPlaylists) {
// Send video position when given video id and progress in seconds
function postVideoProgress(videoId, videoProgress) {
var apiEndpoint = "/api/video/" + videoId + "/progress/";
if (!isNaN(videoProgress)) {
var duartion = getVideoPlayerDuration();
if (!isNaN(videoProgress) && duartion != 'undefined') {
var data = {
"position": videoProgress
};
if (videoProgress == 0) {
apiRequest(apiEndpoint, "DELETE");
console.log("Deleting Video Progress for Video ID: " + videoId + ", Progress: " + videoProgress);
// console.log("Deleting Video Progress for Video ID: " + videoId + ", Progress: " + videoProgress);
} else if (!getVideoPlayerWatchStatus()) {
apiRequest(apiEndpoint, "POST", data);
console.log("Saving Video Progress for Video ID: " + videoId + ", Progress: " + videoProgress);
// console.log("Saving Video Progress for Video ID: " + videoId + ", Progress: " + videoProgress);
}
}
}
@ -564,14 +578,17 @@ function apiRequest(apiEndpoint, method, data) {
return JSON.parse(xhttp.responseText);
}
// Gets origin URL
function getURL() {
return window.location.href.replace(window.location.pathname, "");
return window.location.origin;
}
function removePlayer() {
var currentTime = getVideoPlayerCurrentTime();
var duration = getVideoPlayerDuration();
var videoId = getVideoPlayerVideoId();
postVideoProgress(videoId, currentTime);
setProgressBar(videoId, currentTime, duration);
var playerElement = document.getElementById('player');
if (playerElement.hasChildNodes()) {
var youtubeId = playerElement.childNodes[1].getAttribute("data-id");
@ -587,6 +604,14 @@ function removePlayer() {
}
}
// Sets the progress bar when passed a video id, video progress and video duration
function setProgressBar(videoId, currentTime, duration) {
progressBar = document.getElementById("progress-" + videoId);
progressBarWidth = (currentTime / duration) * 100 + "%";
if (progressBar) {
progressBar.style.width = progressBarWidth;
}
}
// multi search form
function searchMulti(query) {