Merge pull request #2112 from vr10t/progress-bar

Watch progress bar under video thumbnails
This commit is contained in:
Kavin 2023-02-20 10:23:53 +00:00 committed by GitHub
commit d29240546b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 31 additions and 9 deletions

View file

@ -54,6 +54,8 @@ export default {
duration: video.duration,
thumbnail: video.thumbnail,
watchedAt: video.watchedAt,
watched: true,
currentTime: video.currentTime,
});
if (this.videos.length < 1000) cursor.continue();
}

View file

@ -106,7 +106,10 @@ export default {
async getPlaylistData() {
this.fetchPlaylist()
.then(data => (this.playlist = data))
.then(() => this.updateTitle());
.then(() => {
this.updateTitle();
this.updateWatched(this.playlist.relatedStreams);
});
},
async updateTitle() {
document.title = this.playlist.name + " - Piped";

View file

@ -32,6 +32,7 @@ export default {
},
mounted() {
this.updateScroll();
this.updateWatched(this.playlist.relatedStreams);
},
methods: {
updateScroll() {

View file

@ -72,7 +72,10 @@ export default {
},
async updateResults() {
document.title = this.$route.query.search_query + " - Piped";
this.results = this.fetchResults().then(json => (this.results = json));
this.results = this.fetchResults().then(json => {
this.results = json;
this.updateWatched(this.results.items);
});
},
updateFilter() {
this.$router.replace({

View file

@ -10,6 +10,7 @@
},
}"
>
<div class="w-full">
<img
class="w-full aspect-video"
:src="item.thumbnail"
@ -17,6 +18,16 @@
:class="{ 'shorts-img': item.isShort }"
loading="lazy"
/>
<!-- progress bar -->
<div class="relative w-full h-1">
<div
class="absolute bottom-0 left-0 h-1 bg-red-600"
v-if="item.watched && item.duration > 0"
:style="{ width: `clamp(0%, ${(item.currentTime / item.duration) * 100}%, 100%` }"
/>
</div>
</div>
<div class="relative text-sm">
<span
class="thumbnail-overlay thumbnail-right"

View file

@ -425,6 +425,7 @@ export default {
});
xmlDoc.querySelectorAll("br").forEach(elem => (elem.outerHTML = "\n"));
this.video.description = this.rewriteDescription(xmlDoc.querySelector("body").innerHTML);
this.updateWatched(this.video.relatedStreams);
}
});
},

View file

@ -213,6 +213,7 @@ const mixin = {
request.onsuccess = function (event) {
if (event.target.result) {
video.watched = true;
video.currentTime = event.target.result.currentTime;
}
};
});