mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
export watch history db
This commit is contained in:
Alin
parent
cf24fd5208
commit
21769160bb
3 changed files with 222 additions and 5 deletions
|
|
@ -5,7 +5,9 @@
|
|||
<div>
|
||||
<button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
|
||||
|
||||
<button class="btn mx-3" v-t="'actions.export_to_json'" @click="exportHistory" />
|
||||
<button class="btn mx-3" v-t="'actions.export_to_json'" @click="showModal = !showModal" />
|
||||
|
||||
<button class="btn" v-t="'actions.import_from_json'" @click="$router.push('/history/import')" />
|
||||
</div>
|
||||
|
||||
<div class="right-1">
|
||||
|
|
@ -20,20 +22,77 @@
|
|||
</div>
|
||||
|
||||
<br />
|
||||
<ModalComponent v-if="showModal" @close="showModal = !showModal">
|
||||
<div class="min-w-max flex flex-col">
|
||||
<h2 class="text-xl font-bold mb-4">Export History</h2>
|
||||
<form>
|
||||
<div>
|
||||
<label class="mr-2" for="export-format">Export as:</label>
|
||||
<select class="select" id="export-format" v-model="exportAs">
|
||||
<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 gap-2 items-center">
|
||||
<input
|
||||
class="checkbox"
|
||||
type="checkbox"
|
||||
:value="field"
|
||||
v-model="selectedFields"
|
||||
: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 VideoItem from "./VideoItem.vue";
|
||||
import SortingSelector from "./SortingSelector.vue";
|
||||
import ModalComponent from "./ModalComponent.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VideoItem,
|
||||
SortingSelector,
|
||||
ModalComponent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
videos: [],
|
||||
exportVideos: [],
|
||||
showModal: false,
|
||||
exportOptions: ["playlist", "history"],
|
||||
exportAs: "playlist",
|
||||
fields: [
|
||||
"videoId",
|
||||
"title",
|
||||
"uploaderName",
|
||||
"uploaderUrl",
|
||||
"duration",
|
||||
"thumbnail",
|
||||
"watchedAt",
|
||||
"currentTime",
|
||||
],
|
||||
selectedFields: [
|
||||
"videoId",
|
||||
"title",
|
||||
"uploaderName",
|
||||
"uploaderUrl",
|
||||
"duration",
|
||||
"thumbnail",
|
||||
"watchedAt",
|
||||
"currentTime",
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -50,8 +109,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,
|
||||
});
|
||||
|
|
@ -73,7 +132,43 @@ export default {
|
|||
}
|
||||
this.videos = [];
|
||||
},
|
||||
exportHistory() {
|
||||
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",
|
||||
|
|
@ -83,12 +178,31 @@ export default {
|
|||
name: `Piped History ${dateStr}`,
|
||||
type: "history",
|
||||
visibility: "private",
|
||||
videos: this.videos.map(video => "https://youtube.com" + video.url),
|
||||
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>
|
||||
|
|
|
|||
98
src/components/ImportHistoryPage.vue
Normal file
98
src/components/ImportHistoryPage.vue
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div class="text-center min-h-screen">
|
||||
<h1 class="text-center my-2">Import History</h1>
|
||||
<form>
|
||||
<br />
|
||||
<div>
|
||||
<input ref="fileSelector" type="file" @change="fileChange" />
|
||||
</div>
|
||||
<div>
|
||||
<strong v-text="`Found ${itemsLength} items`" />
|
||||
</div>
|
||||
<div>
|
||||
<strong>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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
override: false,
|
||||
index: 0,
|
||||
success: 0,
|
||||
error: 0,
|
||||
skipped: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
itemsLength() {
|
||||
return this.items.length;
|
||||
},
|
||||
},
|
||||
activated() {
|
||||
document.title = "Import History - Piped";
|
||||
},
|
||||
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)));
|
||||
request.onsuccess = () => {
|
||||
this.index++;
|
||||
this.success++;
|
||||
};
|
||||
request.onerror = () => {
|
||||
this.index++;
|
||||
this.error++;
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
this.index++;
|
||||
this.error++;
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -75,6 +75,11 @@ const routes = [
|
|||
name: "Watch History",
|
||||
component: () => import("../components/HistoryPage.vue"),
|
||||
},
|
||||
{
|
||||
path: "/history/import",
|
||||
name: "Import History",
|
||||
component: () => import("../components/ImportHistoryPage.vue"),
|
||||
},
|
||||
{
|
||||
path: "/playlists",
|
||||
name: "Playlists",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue