Piped/src/components/HistoryPage.vue

78 lines
2.3 KiB
Vue
Raw Normal View History

<template>
<h1 class="font-bold text-center" v-t="'titles.history'" />
2022-01-12 11:59:50 +00:00
<div class="flex">
<div>
<button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
</div>
2022-01-12 11:59:50 +00:00
<div class="right-1">
2022-05-19 21:17:58 +00:00
<SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" />
2022-01-12 11:59:50 +00:00
</div>
2021-09-04 15:39:04 +00:00
</div>
<hr />
2021-12-27 14:46:22 +00:00
<div class="video-grid">
<VideoItem v-for="video in videos" :key="video.url" :video="video" />
</div>
2021-09-04 15:39:04 +00:00
<br />
</template>
<script>
2022-04-08 15:46:49 +00:00
import VideoItem from "./VideoItem.vue";
2022-05-19 21:17:58 +00:00
import SortingSelector from "./SortingSelector.vue";
export default {
components: {
VideoItem,
2022-05-19 21:17:58 +00:00
SortingSelector,
},
data() {
return {
videos: [],
};
},
mounted() {
(async () => {
if (window.db) {
var tx = window.db.transaction("watch_history", "readonly");
var store = tx.objectStore("watch_history");
const cursorRequest = store.openCursor();
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,
});
this.videos.sort((a, b) => b.watchedAt - a.watchedAt); // TODO: Optimize
if (this.videos.length < 1000) cursor.continue();
}
};
}
})();
},
activated() {
document.title = "Watch History - Piped";
},
methods: {
clearHistory() {
if (window.db) {
var tx = window.db.transaction("watch_history", "readwrite");
var store = tx.objectStore("watch_history");
store.clear();
}
this.videos = [];
},
},
};
</script>