Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-06-02 04:44:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate code to composition api.

Browse Source
This commit is contained in:
Kavin
2026-03-27 00:41:48 +05:30
parent 2448b8aa1d
commit fa5bbbd267
50 changed files with 4506 additions and 4418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/components/HistoryPage.vue
View File

@@ -42,107 +42,101 @@
<ImportHistoryModal v-if="showImportModal" @close="showImportModal = false" />
</template>
<script>
<script setup>
import { ref, onMounted, onActivated, onDeactivated } from "vue";
import VideoItem from "./VideoItem.vue";
import SortingSelector from "./SortingSelector.vue";
import ExportHistoryModal from "./ExportHistoryModal.vue";
import ImportHistoryModal from "./ImportHistoryModal.vue";
import { getPreferenceBoolean, getPreferenceString, setPreference } from "@/composables/usePreferences.js";
export default {
components: {
VideoItem,
SortingSelector,
ExportHistoryModal,
ImportHistoryModal,
},
data() {
return {
currentVideoCount: 0,
videoStep: 100,
videosStore: [],
videos: [],
autoDeleteHistory: false,
autoDeleteDelayHours: "24",
showExportModal: false,
showImportModal: false,
};
},
mounted() {
this.autoDeleteHistory = this.getPreferenceBoolean("autoDeleteWatchHistory", false);
this.autoDeleteDelayHours = this.getPreferenceString("autoDeleteWatchHistoryDelayHours", "24");
let currentVideoCount = 0;
const videoStep = 100;
const videosStore = [];
const videos = ref([]);
const autoDeleteHistory = ref(false);
const autoDeleteDelayHours = ref("24");
const showExportModal = ref(false);
const showImportModal = ref(false);
(async () => {
if (window.db && this.getPreferenceBoolean("watchHistory", false)) {
var tx = window.db.transaction("watch_history", "readwrite");
var store = tx.objectStore("watch_history");
const cursorRequest = store.index("watchedAt").openCursor(null, "prev");
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 ?? "", // Router doesn't like undefined
duration: video.duration ?? 0, // Undefined duration shows "Live"
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() {
if (window.db) {
var tx = window.db.transaction("watch_history", "readwrite");
var store = tx.objectStore("watch_history");
store.clear();
}
this.videos = [];
},
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;
},
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();
}
},
},
};
function shouldRemoveVideo(video) {
if (!autoDeleteHistory.value) return false;
let maximumTimeDiff = Number(autoDeleteDelayHours.value) * 60 * 60 * 1000;
return Date.now() - video.watchedAt > maximumTimeDiff;
}
function loadMoreVideos() {
currentVideoCount = Math.min(currentVideoCount + videoStep, videosStore.length);
if (videos.value.length != videosStore.length) videos.value = videosStore.slice(0, currentVideoCount);
}
function handleScroll() {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
loadMoreVideos();
}
}
function clearHistory() {
if (window.db) {
var tx = window.db.transaction("watch_history", "readwrite");
var store = tx.objectStore("watch_history");
store.clear();
}
videos.value = [];
}
function onChange() {
setPreference("autoDeleteWatchHistory", autoDeleteHistory.value);
setPreference("autoDeleteWatchHistoryDelayHours", autoDeleteDelayHours.value);
}
onMounted(() => {
autoDeleteHistory.value = getPreferenceBoolean("autoDeleteWatchHistory", false);
autoDeleteDelayHours.value = getPreferenceString("autoDeleteWatchHistoryDelayHours", "24");
(async () => {
if (window.db && getPreferenceBoolean("watchHistory", false)) {
var tx = window.db.transaction("watch_history", "readwrite");
var store = tx.objectStore("watch_history");
const cursorRequest = store.index("watchedAt").openCursor(null, "prev");
const cursorPromise = new Promise(resolve => {
cursorRequest.onsuccess = e => {
const cursor = e.target.result;
if (cursor) {
const video = cursor.value;
if (!shouldRemoveVideo(video)) {
videosStore.push({
url: "/watch?v=" + video.videoId,
title: video.title,
uploaderName: video.uploaderName,
uploaderUrl: video.uploaderUrl ?? "",
duration: video.duration ?? 0,
thumbnail: video.thumbnail,
watchedAt: video.watchedAt,
watched: true,
currentTime: video.currentTime,
});
} else {
store.delete(video.videoId);
}
if (videosStore.length < 1000) cursor.continue();
else resolve();
} else resolve();
};
});
await cursorPromise;
}
})().then(() => {
loadMoreVideos();
});
});
onActivated(() => {
document.title = "Watch History - Piped";
window.addEventListener("scroll", handleScroll);
});
onDeactivated(() => {
window.removeEventListener("scroll", handleScroll);
});
</script>