From 4daa9cfc346d7d5e94c7f2ff75e7170a2776b7be Mon Sep 17 00:00:00 2001
From: vr10t <ai6@tuta.io>
Date: Wed, 1 Mar 2023 18:00:18 +0000
Subject: [PATCH] feat: add pagination to history page
Co-authored-by: Bnyro <bnyro@tutanota.com>
---
src/components/HistoryPage.vue | 69 ++++++++++++++++++++++------------
1 file changed, 46 insertions(+), 23 deletions(-)
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 31221424..97b30d9a 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -50,6 +50,9 @@ export default {
},
data() {
return {
+ currentVideoCount: 0,
+ videoStep: 100,
+ videosStore: [],
videos: [],
autoDeleteHistory: false,
autoDeleteDelayHours: "24",
@@ -64,33 +67,43 @@ export default {
var tx = window.db.transaction("watch_history", "readwrite");
var store = tx.objectStore("watch_history");
const cursorRequest = store.index("watchedAt").openCursor(null, "prev");
- cursorRequest.onsuccess = e => {
- const cursor = e.target.result;
- if (cursor) {
- const video = cursor.value;
- if (this.videos.length < 1000) cursor.continue();
- if (!this.shouldRemoveVideo(video)) {
- this.videos.push({
- url: "/watch?v=" + video.videoId,
- title: video.title,
- uploaderName: video.uploaderName,
- uploaderUrl: video.uploaderUrl,
- duration: video.duration,
- thumbnail: video.thumbnail,
- watchedAt: video.watchedAt,
- watched: true,
- currentTime: video.currentTime,
- });
- } else {
- store.delete(video.videoId);
- }
- }
- };
+ const cursorPromise = new Promise(resolve => {
+ cursorRequest.onsuccess = e => {
+ const cursor = e.target.result;
+ if (cursor) {
+ const video = cursor.value;
+ if (!this.shouldRemoveVideo(video)) {
+ this.videosStore.push({
+ url: "/watch?v=" + video.videoId,
+ title: video.title,
+ uploaderName: video.uploaderName,
+ uploaderUrl: video.uploaderUrl,
+ duration: video.duration,
+ thumbnail: video.thumbnail,
+ watchedAt: video.watchedAt,
+ watched: true,
+ currentTime: video.currentTime,
+ });
+ } else {
+ store.delete(video.videoId);
+ }
+ if (this.videosStore.length < 1000) cursor.continue();
+ else resolve();
+ } else resolve();
+ };
+ });
+ await cursorPromise;
}
- })();
+ })().then(() => {
+ this.loadMoreVideos();
+ });
},
activated() {
document.title = "Watch History - Piped";
+ window.addEventListener("scroll", this.handleScroll);
+ },
+ deactivated() {
+ window.removeEventListener("scroll", this.handleScroll);
},
methods: {
clearHistory() {
@@ -127,6 +140,16 @@ export default {
let maximumTimeDiff = Number(this.autoDeleteDelayHours) * 60 * 60 * 1000;
return Date.now() - video.watchedAt > maximumTimeDiff;
},
+ loadMoreVideos() {
+ this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);
+ if (this.videos.length != this.videosStore.length)
+ this.videos = this.videosStore.slice(0, this.currentVideoCount);
+ },
+ handleScroll() {
+ if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+ this.loadMoreVideos();
+ }
+ },
},
};
</script>