add support for auto deleting the history (#1778)

This commit is contained in:
Bnyro 2023-07-17 10:40:19 +02:00 committed by GitHub
parent d82a93fd0b
commit ba3a87cb5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 20 deletions

View file

@ -1,13 +1,32 @@
<template>
<h1 class="font-bold text-center" v-t="'titles.history'" />
<h1 class="font-bold text-center mb-3" v-t="'titles.history'" />
<div class="flex md:items-center gap-2 flex-col md:flex-row">
<button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
<div class="flex">
<div class="flex md:items-center gap-2 flex-col md:flex-row">
<button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
<button class="btn" v-t="'actions.export_to_json'" @click="exportHistory" />
<button class="btn" v-t="'actions.export_to_json'" @click="exportHistory" />
<div class="ml-auto flex gap-1 items-center">
<SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" />
<div class="ml-auto flex gap-1 items-center">
<SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" />
</div>
</div>
<div class="flex ml-4 items-center">
<input id="autoDelete" type="checkbox" v-model="autoDeleteHistory" @change="onChange" />
<label class="ml-2" for="autoDelete" v-t="'actions.delete_automatically'" />
<select class="pl-3 ml-3 select" v-model="autoDeleteDelayHours" @change="onChange">
<option value="1" v-t="{ path: 'info.hours', args: { amount: '1' } }" />
<option value="3" v-t="{ path: 'info.hours', args: { amount: '3' } }" />
<option value="6" v-t="{ path: 'info.hours', args: { amount: '6' } }" />
<option value="12" v-t="{ path: 'info.hours', args: { amount: '12' } }" />
<option value="24" v-t="{ path: 'info.days', args: { amount: '1' } }" />
<option value="72" v-t="{ path: 'info.days', args: { amount: '3' } }" />
<option value="168" v-t="{ path: 'info.weeks', args: { amount: '1' } }" />
<option value="336" v-t="{ path: 'info.weeks', args: { amount: '3' } }" />
<option value="672" v-t="{ path: 'info.months', args: { amount: '1' } }" />
<option value="1344" v-t="{ path: 'info.months', args: { amount: '2' } }" />
</select>
</div>
</div>
@ -32,30 +51,39 @@ export default {
data() {
return {
videos: [],
autoDeleteHistory: false,
autoDeleteDelayHours: "24",
};
},
mounted() {
this.autoDeleteHistory = this.getPreferenceBoolean("autoDeleteWatchHistory", false);
this.autoDeleteDelayHours = this.getPreferenceString("autoDeleteWatchHistoryDelayHours", "24");
(async () => {
if (window.db && this.getPreferenceBoolean("watchHistory", false)) {
var tx = window.db.transaction("watch_history", "readonly");
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;
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,
});
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);
}
}
};
}
@ -89,6 +117,16 @@ export default {
};
this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
},
onChange() {
this.setPreference("autoDeleteWatchHistory", this.autoDeleteHistory);
this.setPreference("autoDeleteWatchHistoryDelayHours", this.autoDeleteDelayHours);
},
shouldRemoveVideo(video) {
if (!this.autoDeleteHistory) return false;
// convert from hours to milliseconds
let maximumTimeDiff = Number(this.autoDeleteDelayHours) * 60 * 60 * 1000;
return Date.now() - video.watchedAt > maximumTimeDiff;
},
},
};
</script>

View file

@ -139,7 +139,8 @@
"group_name": "Group name",
"cancel": "Cancel",
"okay": "Okay",
"show_search_suggestions": "Show search suggestions"
"show_search_suggestions": "Show search suggestions",
"delete_automatically": "Delete automatically after"
},
"comment": {
"pinned_by": "Pinned by {author}",
@ -196,6 +197,10 @@
"cannot_copy": "Can't copy!",
"local_storage": "This action requires localStorage, are cookies enabled?",
"register_no_email_note": "Using an e-mail as username is not recommended. Proceed anyways?",
"next_video_countdown": "Playing next video in {0}s"
"next_video_countdown": "Playing next video in {0}s",
"hours": "{amount} hour(s)",
"days": "{amount} day(s)",
"weeks": "{amount} week(s)",
"months": "{amount} month(s)"
}
}