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> <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"> <div class="flex">
<button class="btn" v-t="'actions.clear_history'" @click="clearHistory" /> <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"> <div class="ml-auto flex gap-1 items-center">
<SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" /> <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>
</div> </div>
@ -32,30 +51,39 @@ export default {
data() { data() {
return { return {
videos: [], videos: [],
autoDeleteHistory: false,
autoDeleteDelayHours: "24",
}; };
}, },
mounted() { mounted() {
this.autoDeleteHistory = this.getPreferenceBoolean("autoDeleteWatchHistory", false);
this.autoDeleteDelayHours = this.getPreferenceString("autoDeleteWatchHistoryDelayHours", "24");
(async () => { (async () => {
if (window.db && this.getPreferenceBoolean("watchHistory", false)) { 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"); var store = tx.objectStore("watch_history");
const cursorRequest = store.index("watchedAt").openCursor(null, "prev"); const cursorRequest = store.index("watchedAt").openCursor(null, "prev");
cursorRequest.onsuccess = e => { cursorRequest.onsuccess = e => {
const cursor = e.target.result; const cursor = e.target.result;
if (cursor) { if (cursor) {
const video = cursor.value; 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.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"); 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> </script>

View File

@ -139,7 +139,8 @@
"group_name": "Group name", "group_name": "Group name",
"cancel": "Cancel", "cancel": "Cancel",
"okay": "Okay", "okay": "Okay",
"show_search_suggestions": "Show search suggestions" "show_search_suggestions": "Show search suggestions",
"delete_automatically": "Delete automatically after"
}, },
"comment": { "comment": {
"pinned_by": "Pinned by {author}", "pinned_by": "Pinned by {author}",
@ -196,6 +197,10 @@
"cannot_copy": "Can't copy!", "cannot_copy": "Can't copy!",
"local_storage": "This action requires localStorage, are cookies enabled?", "local_storage": "This action requires localStorage, are cookies enabled?",
"register_no_email_note": "Using an e-mail as username is not recommended. Proceed anyways?", "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)"
} }
} }