Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-11-14 04:08:21 +00:00
Code Issues Packages Projects Releases 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/VideoItem.vue
View File

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

1
src/main.js
View File

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