TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

add watch progress bar

Browse source
This commit is contained in:
Alin 2023-02-16 17:26:14 +00:00
parent cf24fd5208
commit 005a938261
2 changed files with 20 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/VideoItem.vue
View file

@ -10,13 +10,24 @@
},
}"
>
<img
class="w-full aspect-video"
:src="item.thumbnail"
:alt="item.title"
:class="{ 'shorts-img': item.isShort }"
loading="lazy"
/>
<div class="w-full">
<img
class="w-full aspect-video"
:src="item.thumbnail"
:alt="item.title"
: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"
@ -148,6 +159,7 @@ export default {
};
},
mounted() {
this.updateWatched([this.item]);
this.shouldShowVideo();
},
methods: {

1
src/main.js
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;
}
};
});