From 21769160bb2b44eab981d3a9a62772367b758b60 Mon Sep 17 00:00:00 2001
From: Alin <ai6@tuta.io>
Date: Fri, 17 Feb 2023 18:02:49 +0000
Subject: [PATCH 1/2] export watch history db

---
 src/components/HistoryPage.vue       | 124 +++++++++++++++++++++++++--
 src/components/ImportHistoryPage.vue |  98 +++++++++++++++++++++
 src/router/router.js                 |   5 ++
 3 files changed, 222 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ImportHistoryPage.vue

diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 3c650b8e..5b827d8a 100644
--- a/src/components/HistoryPage.vue
+++ b/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,
-                            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>
diff --git a/src/components/ImportHistoryPage.vue b/src/components/ImportHistoryPage.vue
new file mode 100644
index 00000000..10016468
--- /dev/null
+++ b/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>
diff --git a/src/router/router.js b/src/router/router.js
index 29bb7c61..c1bf8e4a 100644
--- a/src/router/router.js
+++ b/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",

From 40d370bedc1dea3450c4e4202a929850b8a00a6e Mon Sep 17 00:00:00 2001
From: vr10t <ai6@tuta.io>
Date: Sun, 19 Feb 2023 14:55:36 +0000
Subject: [PATCH 2/2] make import and export modal components

---
 src/components/ExportHistoryModal.vue         | 142 +++++++++++++++++
 src/components/HistoryPage.vue                | 150 ++----------------
 ...HistoryPage.vue => ImportHistoryModal.vue} |  60 +++----
 src/router/router.js                          |   5 -
 4 files changed, 189 insertions(+), 168 deletions(-)
 create mode 100644 src/components/ExportHistoryModal.vue
 rename src/components/{ImportHistoryPage.vue => ImportHistoryModal.vue} (64%)

diff --git a/src/components/ExportHistoryModal.vue b/src/components/ExportHistoryModal.vue
new file mode 100644
index 00000000..30746cda
--- /dev/null
+++ b/src/components/ExportHistoryModal.vue
@@ -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>
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index 5b827d8a..89095abc 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -1,16 +1,16 @@
 <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>
-            <button class="btn" v-t="'actions.clear_history'" @click="clearHistory" />
+    <div class="flex flex-col gap-2 items-center lg:flex-row">
+        <div class="flex flex-wrap gap-2 justify-center">
+            <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 class="right-1">
+        <div class="lg:right-1">
             <SortingSelector by-key="watchedAt" @apply="order => videos.sort(order)" />
         </div>
     </div>
@@ -22,77 +22,28 @@
     </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>
+    <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 ModalComponent from "./ModalComponent.vue";
+import ExportHistoryModal from "./ExportHistoryModal.vue";
+import ImportHistoryModal from "./ImportHistoryModal.vue";
 
 export default {
     components: {
         VideoItem,
         SortingSelector,
-        ModalComponent,
+        ExportHistoryModal,
+        ImportHistoryModal,
     },
     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",
-            ],
+            showExportModal: false,
+            showImportModal: false,
         };
     },
     mounted() {
@@ -132,77 +83,6 @@ export default {
             }
             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>
diff --git a/src/components/ImportHistoryPage.vue b/src/components/ImportHistoryModal.vue
similarity index 64%
rename from src/components/ImportHistoryPage.vue
rename to src/components/ImportHistoryModal.vue
index 10016468..d2ce0a52 100644
--- a/src/components/ImportHistoryPage.vue
+++ b/src/components/ImportHistoryModal.vue
@@ -1,31 +1,38 @@
 <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>
+    <ModalComponent>
+        <div class="text-center">
+            <h2 class="text-xl font-bold mb-4 text-center">Import History</h2>
+            <form>
+                <br />
+                <div>
+                    <input class="btn ml-2 mb-2" ref="fileSelector" type="file" @change="fileChange" />
+                </div>
+                <div>
+                    <strong v-text="`Found ${itemsLength} items`" />
+                </div>
+                <div>
+                    <strong class="flex gap-2 justify-center items-center">
+                        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: [],
@@ -41,9 +48,6 @@ export default {
             return this.items.length;
         },
     },
-    activated() {
-        document.title = "Import History - Piped";
-    },
     methods: {
         fileChange() {
             const file = this.$refs.fileSelector.files[0];
@@ -75,7 +79,7 @@ export default {
                             }
                         }
                         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 = () => {
                                 this.index++;
                                 this.success++;
diff --git a/src/router/router.js b/src/router/router.js
index c1bf8e4a..29bb7c61 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -75,11 +75,6 @@ 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",