export watch history db

src/components/HistoryPage.vue

@@ -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,
+                            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,
                         });
@@ -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>

src/components/ImportHistoryPage.vue

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

src/router/router.js

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