TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

make import and export modal components

Browse source
This commit is contained in:
vr10t 2023-02-19 14:55:36 +00:00
parent 21769160bb
commit 40d370bedc
4 changed files with 189 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

142
src/components/ExportHistoryModal.vue Normal file
View file

@ -0,0 +1,142 @@
<template>
<ModalComponent>
<div class="min-w-max flex flex-col">
<h2 class="text-xl font-bold mb-4 text-center">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 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>

150
src/components/HistoryPage.vue
View file

@ -1,16 +1,16 @@
<template> <template>
<h1 class="font-bold text-center" v-t="'titles.history'" /> <h1 class="font-bold text-center my-2" v-t="'titles.history'" />
<div class="flex"> <div class="flex flex-col gap-2 items-center lg:flex-row">
<div> <div class="flex flex-wrap gap-2 justify-center">
<button class="btn" v-t="'actions.clear_history'" @click="clearHistory" /> <button class="btn w-54" v-t="'actions.clear_history'" @click="clearHistory" />
<button class="btn mx-3" v-t="'actions.export_to_json'" @click="showModal = !showModal" /> <button class="btn w-54" v-t="'actions.export_to_json'" @click="showExportModal = !showExportModal" />
<button class="btn" v-t="'actions.import_from_json'" @click="$router.push('/history/import')" /> <button class="btn w-54" v-t="'actions.import_from_json'" @click="showImportModal = !showImportModal" />
</div> </div>
<div class="right-1"> <div class="lg:right-1">
<SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" /> <SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" />
</div> </div>
</div> </div>
@ -22,77 +22,28 @@
</div> </div>
<br /> <br />
<ModalComponent v-if="showModal" @close="showModal = !showModal"> <ExportHistoryModal v-if="showExportModal" @close="showExportModal = false" />
<div class="min-w-max flex flex-col"> <ImportHistoryModal v-if="showImportModal" @close="showImportModal = false" />
<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> </template>
<script> <script>
import VideoItem from "./VideoItem.vue"; import VideoItem from "./VideoItem.vue";
import SortingSelector from "./SortingSelector.vue"; import SortingSelector from "./SortingSelector.vue";
import ModalComponent from "./ModalComponent.vue"; import ExportHistoryModal from "./ExportHistoryModal.vue";
import ImportHistoryModal from "./ImportHistoryModal.vue";
export default { export default {
components: { components: {
VideoItem, VideoItem,
SortingSelector, SortingSelector,
ModalComponent, ExportHistoryModal,
ImportHistoryModal,
}, },
data() { data() {
return { return {
videos: [], videos: [],
exportVideos: [], showExportModal: false,
showModal: false, showImportModal: 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() { mounted() {
@ -132,77 +83,6 @@ export default {
} }
this.videos = []; this.videos = [];
}, },
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> </script>

20
src/components/ImportHistoryPage.vue → src/components/ImportHistoryModal.vue
View file

@ -1,16 +1,19 @@
<template> <template>
<div class="text-center min-h-screen"> <ModalComponent>
<h1 class="text-center my-2">Import History</h1> <div class="text-center">
<h2 class="text-xl font-bold mb-4 text-center">Import History</h2>
<form> <form>
<br /> <br />
<div> <div>
<input ref="fileSelector" type="file" @change="fileChange" /> <input class="btn ml-2 mb-2" ref="fileSelector" type="file" @change="fileChange" />
</div> </div>
<div> <div>
<strong v-text="`Found ${itemsLength} items`" /> <strong v-text="`Found ${itemsLength} items`" />
</div> </div>
<div> <div>
<strong>Override: <input v-model="override" class="checkbox" type="checkbox" /></strong> <strong class="flex gap-2 justify-center items-center">
Override: <input v-model="override" class="checkbox" type="checkbox" />
</strong>
</div> </div>
<br /> <br />
<div> <div>
@ -23,9 +26,13 @@
</div> </div>
</form> </form>
</div> </div>
</ModalComponent>
</template> </template>
<script> <script>
import ModalComponent from "./ModalComponent.vue";
export default { export default {
components: { ModalComponent },
data() { data() {
return { return {
items: [], items: [],
@ -41,9 +48,6 @@ export default {
return this.items.length; return this.items.length;
}, },
}, },
activated() {
document.title = "Import History - Piped";
},
methods: { methods: {
fileChange() { fileChange() {
const file = this.$refs.fileSelector.files[0]; const file = this.$refs.fileSelector.files[0];
@ -75,7 +79,7 @@ export default {
} }
} }
try { try {
const request = store.put(JSON.parse(JSON.stringify(item))); const request = store.put(JSON.parse(JSON.stringify(item))); // prevent "Symbol could not be cloned." error
request.onsuccess = () => { request.onsuccess = () => {
this.index++; this.index++;
this.success++; this.success++;

5
src/router/router.js
View file

@ -75,11 +75,6 @@ const routes = [
name: "Watch History", name: "Watch History",
component: () => import("../components/HistoryPage.vue"), component: () => import("../components/HistoryPage.vue"),
}, },
{
path: "/history/import",
name: "Import History",
component: () => import("../components/ImportHistoryPage.vue"),
},
{ {
path: "/playlists", path: "/playlists",
name: "Playlists", name: "Playlists",