mirror of
https://github.com/TeamPiped/Piped.git
synced 2025-01-22 04:27:00 +00:00
feat: option to export watch history database
This commit is contained in:
Alin
Bnyro
parent
3e9c745a54
commit
9dbe6c557b
142
src/components/ExportHistoryModal.vue
Normal file
142
src/components/ExportHistoryModal.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<ModalComponent>
|
||||
<div class="min-w-max flex flex-col">
|
||||
<h2 class="mb-4 text-center text-xl font-bold">Export History</h2>
|
||||
<form>
|
||||
<div>
|
||||
<label class="mr-2" for="export-format">Export as:</label>
|
||||
<select id="export-format" v-model="exportAs" class="select">
|
||||
<option
|
||||
v-for="option in exportOptions"
|
||||
:key="option"
|
||||
:value="option"
|
||||
v-text="formatField(option)"
|
||||
/>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="exportAs === 'history'">
|
||||
<label v-for="field in fields" :key="field" class="flex items-center gap-2">
|
||||
<input
|
||||
v-model="selectedFields"
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
:value="field"
|
||||
:disabled="field === 'videoId'"
|
||||
/>
|
||||
<span v-text="formatField(field)" />
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<button class="btn mt-4" @click="handleExport">Export</button>
|
||||
</div>
|
||||
</ModalComponent>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalComponent from "./ModalComponent.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ModalComponent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
exportOptions: ["playlist", "history"],
|
||||
exportAs: "playlist",
|
||||
fields: [
|
||||
"videoId",
|
||||
"title",
|
||||
"uploaderName",
|
||||
"uploaderUrl",
|
||||
"duration",
|
||||
"thumbnail",
|
||||
"watchedAt",
|
||||
"currentTime",
|
||||
],
|
||||
selectedFields: [
|
||||
"videoId",
|
||||
"title",
|
||||
"uploaderName",
|
||||
"uploaderUrl",
|
||||
"duration",
|
||||
"thumbnail",
|
||||
"watchedAt",
|
||||
"currentTime",
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async fetchAllVideos() {
|
||||
if (window.db) {
|
||||
var tx = window.db.transaction("watch_history", "readonly");
|
||||
var store = tx.objectStore("watch_history");
|
||||
const request = store.getAll();
|
||||
return new Promise((resolve, reject) => {
|
||||
(request.onsuccess = e => {
|
||||
const videos = e.target.result;
|
||||
this.exportVideos = videos;
|
||||
resolve();
|
||||
}),
|
||||
(request.onerror = e => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
handleExport() {
|
||||
if (this.exportAs === "playlist") {
|
||||
this.fetchAllVideos()
|
||||
.then(() => {
|
||||
this.exportAsPlaylist();
|
||||
})
|
||||
.catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
} else if (this.exportAs === "history") {
|
||||
this.fetchAllVideos()
|
||||
.then(() => {
|
||||
this.exportAsHistory();
|
||||
})
|
||||
.catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
}
|
||||
},
|
||||
exportAsPlaylist() {
|
||||
const dateStr = new Date().toISOString().split(".")[0];
|
||||
let json = {
|
||||
format: "Piped",
|
||||
version: 1,
|
||||
playlists: [
|
||||
{
|
||||
name: `Piped History ${dateStr}`,
|
||||
type: "history",
|
||||
visibility: "private",
|
||||
videos: this.exportVideos.map(video => "https://youtube.com" + video.url),
|
||||
},
|
||||
],
|
||||
};
|
||||
this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
|
||||
},
|
||||
exportAsHistory() {
|
||||
const dateStr = new Date().toISOString().split(".")[0];
|
||||
let json = {
|
||||
format: "Piped",
|
||||
version: 1,
|
||||
watchHistory: this.exportVideos.map(video => {
|
||||
let obj = {};
|
||||
this.selectedFields.forEach(field => {
|
||||
obj[field] = video[field];
|
||||
});
|
||||
return obj;
|
||||
}),
|
||||
};
|
||||
this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
|
||||
},
|
||||
formatField(field) {
|
||||
// camelCase to Title Case
|
||||
return field.replace(/([A-Z])/g, " $1").replace(/^./, str => str.toUpperCase());
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,15 +1,16 @@
|
||||
<template>
|
||||
<h1 v-t="'titles.history'" class="mb-3 text-center font-bold" />
|
||||
<h1 v-t="'titles.history'" class="my-2 mb-3 text-center font-bold" />
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex flex-col gap-2 md:flex-row md:items-center">
|
||||
<button v-t="'actions.clear_history'" class="btn" @click="clearHistory" />
|
||||
|
||||
<button v-t="'actions.export_to_json'" class="btn" @click="exportHistory" />
|
||||
|
||||
<div class="ml-auto flex items-center gap-1">
|
||||
<SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" />
|
||||
<button v-t="'actions.export_to_json'" class="btn" @click="showExportModal = !showExportModal" />
|
||||
<button v-t="'actions.import_from_json'" class="btn" @click="showImportModal = !showImportModal" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" />
|
||||
</div>
|
||||
|
||||
<div class="ml-4 flex items-center">
|
||||
@ -37,16 +38,22 @@
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<ExportHistoryModal v-if="showExportModal" @close="showExportModal = false" />
|
||||
<ImportHistoryModal v-if="showImportModal" @close="showImportModal = false" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VideoItem from "./VideoItem.vue";
|
||||
import SortingSelector from "./SortingSelector.vue";
|
||||
import ExportHistoryModal from "./ExportHistoryModal.vue";
|
||||
import ImportHistoryModal from "./ImportHistoryModal.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VideoItem,
|
||||
SortingSelector,
|
||||
ExportHistoryModal,
|
||||
ImportHistoryModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -56,6 +63,8 @@ export default {
|
||||
videos: [],
|
||||
autoDeleteHistory: false,
|
||||
autoDeleteDelayHours: "24",
|
||||
showExportModal: false,
|
||||
showImportModal: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@ -77,8 +86,8 @@ export default {
|
||||
url: "/watch?v=" + video.videoId,
|
||||
title: video.title,
|
||||
uploaderName: video.uploaderName,
|
||||
uploaderUrl: video.uploaderUrl,
|
||||
duration: video.duration,
|
||||
uploaderUrl: video.uploaderUrl ?? "", // Router doesn't like undefined
|
||||
duration: video.duration ?? 0, // Undefined duration shows "Live"
|
||||
thumbnail: video.thumbnail,
|
||||
watchedAt: video.watchedAt,
|
||||
watched: true,
|
||||
@ -114,22 +123,6 @@ export default {
|
||||
}
|
||||
this.videos = [];
|
||||
},
|
||||
exportHistory() {
|
||||
const dateStr = new Date().toISOString().split(".")[0];
|
||||
let json = {
|
||||
format: "Piped",
|
||||
version: 1,
|
||||
playlists: [
|
||||
{
|
||||
name: `Piped History ${dateStr}`,
|
||||
type: "history",
|
||||
visibility: "private",
|
||||
videos: this.videos.map(video => "https://youtube.com" + video.url),
|
||||
},
|
||||
],
|
||||
};
|
||||
this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
|
||||
},
|
||||
onChange() {
|
||||
this.setPreference("autoDeleteWatchHistory", this.autoDeleteHistory);
|
||||
this.setPreference("autoDeleteWatchHistoryDelayHours", this.autoDeleteDelayHours);
|
||||
|
||||
102
src/components/ImportHistoryModal.vue
Normal file
102
src/components/ImportHistoryModal.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<ModalComponent>
|
||||
<div class="text-center">
|
||||
<h2 class="mb-4 text-center text-xl font-bold">Import History</h2>
|
||||
<form>
|
||||
<br />
|
||||
<div>
|
||||
<input ref="fileSelector" class="btn mb-2 ml-2" type="file" @change="fileChange" />
|
||||
</div>
|
||||
<div>
|
||||
<strong v-text="`Found ${itemsLength} items`" />
|
||||
</div>
|
||||
<div>
|
||||
<strong class="flex items-center justify-center gap-2">
|
||||
Override: <input v-model="override" class="checkbox" type="checkbox" />
|
||||
</strong>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<progress :value="index" :max="itemsLength" />
|
||||
<div v-text="`Success: ${success} Error: ${error} Skipped: ${skipped}`" />
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<a class="btn w-auto" @click="handleImport">Import</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</ModalComponent>
|
||||
</template>
|
||||
<script>
|
||||
import ModalComponent from "./ModalComponent.vue";
|
||||
|
||||
export default {
|
||||
components: { ModalComponent },
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
override: false,
|
||||
index: 0,
|
||||
success: 0,
|
||||
error: 0,
|
||||
skipped: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
itemsLength() {
|
||||
return this.items.length;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fileChange() {
|
||||
const file = this.$refs.fileSelector.files[0];
|
||||
file.text().then(text => {
|
||||
this.items = [];
|
||||
const json = JSON.parse(text);
|
||||
const items = json.watchHistory.map(video => {
|
||||
return {
|
||||
...video,
|
||||
watchedAt: video.watchedAt ?? 0,
|
||||
currentTime: video.currentTime ?? 0,
|
||||
};
|
||||
});
|
||||
this.items = items.sort((a, b) => b.watchedAt - a.watchedAt);
|
||||
});
|
||||
},
|
||||
handleImport() {
|
||||
if (window.db) {
|
||||
var tx = window.db.transaction("watch_history", "readwrite");
|
||||
var store = tx.objectStore("watch_history");
|
||||
this.items.forEach(item => {
|
||||
const dbItem = store.get(item.videoId);
|
||||
dbItem.onsuccess = () => {
|
||||
if (dbItem.result && dbItem.result.videoId === item.videoId) {
|
||||
if (!this.override) {
|
||||
this.index++;
|
||||
this.skipped++;
|
||||
return;
|
||||
}
|
||||
}
|
||||
try {
|
||||
const request = store.put(JSON.parse(JSON.stringify(item))); // prevent "Symbol could not be cloned." error
|
||||
request.onsuccess = () => {
|
||||
this.index++;
|
||||
this.success++;
|
||||
};
|
||||
request.onerror = () => {
|
||||
this.index++;
|
||||
this.error++;
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
this.index++;
|
||||
this.error++;
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user