feat: option to export watch history database

src/components/ExportHistoryModal.vue

@@ -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>

src/components/HistoryPage.vue

@@ -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" />
+            <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 class="ml-auto flex items-center gap-1">
-                <SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" />
         </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,
+                                    uploaderUrl: video.uploaderUrl ?? "", // Router doesn't like undefined
-                                    duration: video.duration,
+                                    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);

src/components/ImportHistoryModal.vue

@@ -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>