From d84580cf4f56a19f3beea7e693eba7b4666e3dbf Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Fri, 6 Jan 2023 19:30:28 +0100
Subject: [PATCH 1/5] Add support for playlist bookmarks

---
 src/App.vue                      | 29 +++++++++++++++----------
 src/components/PlaylistPage.vue  | 20 ++++++++++++++++++
 src/components/PlaylistsPage.vue | 36 +++++++++++++++++++++++++++++++-
 src/locales/en.json              |  3 ++-
 src/main.js                      |  2 ++
 5 files changed, 77 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3b1dc465..dd0f8faf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,12 +40,13 @@ export default {
         darkModePreference.addEventListener("change", () => {
             this.setTheme();
         });
-        if (this.getPreferenceBoolean("watchHistory", false))
-            if ("indexedDB" in window) {
-                const request = indexedDB.open("piped-db", 2);
-                request.onupgradeneeded = ev => {
-                    const db = request.result;
-                    console.log("Upgrading object store.");
+
+        if ("indexedDB" in window) {
+            const request = indexedDB.open("piped-db", 3);
+            request.onupgradeneeded = ev => {
+                const db = request.result;
+                console.log("Upgrading object store.");
+                if (this.getPreferenceBoolean("watchHistory", false)) {
                     if (!db.objectStoreNames.contains("watch_history")) {
                         const store = db.createObjectStore("watch_history", { keyPath: "videoId" });
                         store.createIndex("video_id_idx", "videoId", { unique: true });
@@ -55,11 +56,17 @@ export default {
                         const store = request.transaction.objectStore("watch_history");
                         store.createIndex("watchedAt", "watchedAt", { unique: false });
                     }
-                };
-                request.onsuccess = e => {
-                    window.db = e.target.result;
-                };
-            } else console.log("This browser doesn't support IndexedDB");
+                }
+                if (!db.objectStoreNames.contains("playlist_bookmarks")) {
+                    const store = db.createObjectStore("playlist_bookmarks", { keyPath: "playlistId" });
+                    store.createIndex("playlist_id_idx", "playlistId", { unique: true });
+                    store.createIndex("id_idx", "id", { unique: true, autoIncrement: true });
+                }
+            };
+            request.onsuccess = e => {
+                window.db = e.target.result;
+            };
+        } else console.log("This browser doesn't support IndexedDB");
 
         const App = this;
 
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index d84dea9c..69234876 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -14,6 +14,9 @@
             <div>
                 <strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
                 <br />
+                <button class="btn mr-1" v-if="!isPipedPlaylist" @click="bookmarkPlaylist">
+                    {{ $t("actions.bookmark_playlist") }}<font-awesome-icon class="ml-3" icon="bookmark" />
+                </button>
                 <button class="btn mr-1" v-if="authenticated && !isPipedPlaylist" @click="clonePlaylist">
                     {{ $t("actions.clone_playlist") }}<font-awesome-icon class="ml-3" icon="clone" />
                 </button>
@@ -144,6 +147,23 @@ export default {
             });
             this.download(data, this.playlist.name + ".txt", "text/plain");
         },
+        async bookmarkPlaylist() {
+            if (!this.playlist) return;
+            if (window.db) {
+                const playlistId = this.$route.query.list;
+                var tx = window.db.transaction("playlist_bookmarks", "readwrite");
+                var store = tx.objectStore("playlist_bookmarks");
+                store.put({
+                    playlistId: playlistId,
+                    name: this.playlist.name,
+                    uploader: this.playlist.uploader,
+                    uploaderUrl: this.playlist.uploaderUrl,
+                    thumbnail: this.playlist.thumbnailUrl,
+                    uploaderAvatar: this.playlist.uploaderAvatar,
+                    videos: this.playlist.videos,
+                });
+            }
+        },
     },
 };
 </script>
diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index 7383fd79..27e4834a 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -39,6 +39,25 @@
         </div>
     </div>
     <br />
+
+    <div v-if="bookmarks" class="video-grid">
+        <router-link v-for="playlist in bookmarks" :key="playlist.id" :to="`/playlist?list=${playlist.id}`">
+            <img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
+            <div class="relative text-sm">
+                <span class="thumbnail-overlay thumbnail-right" v-text="`${playlist.videos} ${$t('video.videos')}`" />
+            </div>
+            <p
+                style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
+                class="my-2 overflow-hidden flex link"
+                :title="playlist.name"
+                v-text="playlist.name"
+            />
+            <div class="flex">
+                <img class="rounded-full" src="" alt="" />
+            </div>
+        </router-link>
+    </div>
+    <br />
 </template>
 
 <script>
@@ -46,11 +65,12 @@ export default {
     data() {
         return {
             playlists: [],
+            bookmarks: [],
         };
     },
     mounted() {
         if (this.authenticated) this.fetchPlaylists();
-        else this.$router.push("/login");
+        this.loadPlaylistBookmarks();
     },
     activated() {
         document.title = this.$t("titles.playlists") + " - Piped";
@@ -201,6 +221,20 @@ export default {
                 },
             });
         },
+        async loadPlaylistBookmarks() {
+            if (!window.db) return;
+            var tx = window.db.transaction("playlist_bookmarks", "readonly");
+            var store = tx.objectStore("playlist_bookmarks");
+            const cursorRequest = store.openCursor();
+            cursorRequest.onsuccess = e => {
+                const cursor = e.target.result;
+                if (cursor) {
+                    const bookmark = cursor.value;
+                    this.bookmarks.push(bookmark);
+                    cursor.continue();
+                }
+            };
+        },
     },
 };
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 318f1bcf..32fb7197 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -120,7 +120,8 @@
         "instance_donations": "Instance donations",
         "reply_count": "{count} replies",
         "no_valid_playlists": "The file doesn't contain valid playlists!",
-        "with_playlist": "Share with playlist"
+        "with_playlist": "Share with playlist",
+        "bookmark_playlist": "Bookmark"
     },
     "comment": {
         "pinned_by": "Pinned by {author}",
diff --git a/src/main.js b/src/main.js
index fb15e695..c56e4ae8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,6 +20,7 @@ import {
     faBook,
     faServer,
     faDonate,
+    faBookmark,
 } from "@fortawesome/free-solid-svg-icons";
 import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -46,6 +47,7 @@ library.add(
     faBook,
     faServer,
     faDonate,
+    faBookmark,
 );
 
 import router from "@/router/router.js";

From 8e3d3d5061b30d7cf9af849f3596c32a13c34ac1 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Fri, 6 Jan 2023 20:38:42 +0100
Subject: [PATCH 2/5] Add possiblity to delete bookmark

---
 src/components/NavBar.vue        |  4 ++--
 src/components/PlaylistsPage.vue | 30 ++++++++++++++++++++++--------
 src/locales/en.json              |  3 ++-
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 333198bd..c804ec58 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -50,7 +50,7 @@
             <li v-if="shouldShowHistory">
                 <router-link v-t="'titles.history'" to="/history" />
             </li>
-            <li v-if="authenticated">
+            <li>
                 <router-link v-t="'titles.playlists'" to="/playlists" />
             </li>
             <li v-if="!shouldShowTrending">
@@ -79,7 +79,7 @@
         <li v-if="shouldShowHistory">
             <router-link v-t="'titles.history'" to="/history" />
         </li>
-        <li v-if="authenticated">
+        <li>
             <router-link v-t="'titles.playlists'" to="/playlists" />
         </li>
         <li v-if="!shouldShowTrending">
diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index 27e4834a..33928f11 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -1,9 +1,7 @@
 <template>
-    <h1 class="font-bold text-center my-4" v-t="'titles.playlists'" />
+    <h2 v-if="authenticated" class="font-bold my-4" v-t="'titles.playlists'" />
 
-    <hr />
-
-    <div class="flex justify-between mb-3">
+    <div v-if="authenticated" class="flex justify-between mb-3">
         <button v-t="'actions.create_playlist'" class="btn" @click="onCreatePlaylist" />
         <div class="flex">
             <button
@@ -38,13 +36,22 @@
             <button class="btn h-auto ml-2" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" />
         </div>
     </div>
-    <br />
+    <hr />
+
+    <h2 class="font-bold my-4" v-t="'titles.bookmarks'" />
 
     <div v-if="bookmarks" class="video-grid">
-        <router-link v-for="playlist in bookmarks" :key="playlist.id" :to="`/playlist?list=${playlist.id}`">
+        <router-link
+            v-for="(playlist, index) in bookmarks"
+            :key="playlist.playlistId"
+            :to="`/playlist?list=${playlist.playlistId}`"
+        >
             <img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
             <div class="relative text-sm">
                 <span class="thumbnail-overlay thumbnail-right" v-text="`${playlist.videos} ${$t('video.videos')}`" />
+                <div class="absolute bottom-100px right-5px px-5px z-100" @click.prevent="removeBookmark(index)">
+                    <font-awesome-icon class="ml-3" icon="bookmark" />
+                </div>
             </div>
             <p
                 style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
@@ -52,8 +59,9 @@
                 :title="playlist.name"
                 v-text="playlist.name"
             />
-            <div class="flex">
-                <img class="rounded-full" src="" alt="" />
+            <div class="flex items-center">
+                <img class="rounded-full w-32px h-32px" :src="playlist.uploaderAvatar" />
+                <span class="ml-3" v-text="playlist.uploader" />
             </div>
         </router-link>
     </div>
@@ -235,6 +243,12 @@ export default {
                 }
             };
         },
+        async removeBookmark(index) {
+            var tx = window.db.transaction("playlist_bookmarks", "readwrite");
+            var store = tx.objectStore("playlist_bookmarks");
+            store.delete(this.bookmarks[index].playlistId);
+            this.bookmarks.splice(index, 1);
+        },
     },
 };
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 32fb7197..ac99729c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -12,7 +12,8 @@
         "instance": "Instance",
         "player": "Player",
         "livestreams": "Livestreams",
-        "channels": "Channels"
+        "channels": "Channels",
+        "bookmarks": "Bookmarks"
     },
     "player": {
         "watch_on": "Watch on {0}"

From 031fa6e45efeee50a182cd66066d185dd76fae1d Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Fri, 6 Jan 2023 21:05:05 +0100
Subject: [PATCH 3/5] Dynamically update the button in the playlist page

---
 src/components/PlaylistPage.vue  | 30 +++++++++++++++++++++++++++++-
 src/components/PlaylistsPage.vue |  6 +++---
 src/locales/en.json              |  3 ++-
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 69234876..26d2c5db 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -15,7 +15,8 @@
                 <strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
                 <br />
                 <button class="btn mr-1" v-if="!isPipedPlaylist" @click="bookmarkPlaylist">
-                    {{ $t("actions.bookmark_playlist") }}<font-awesome-icon class="ml-3" icon="bookmark" />
+                    {{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`)
+                    }}<font-awesome-icon class="ml-3" icon="bookmark" />
                 </button>
                 <button class="btn mr-1" v-if="authenticated && !isPipedPlaylist" @click="clonePlaylist">
                     {{ $t("actions.clone_playlist") }}<font-awesome-icon class="ml-3" icon="clone" />
@@ -63,6 +64,7 @@ export default {
         return {
             playlist: null,
             admin: false,
+            isBookmarked: false,
         };
     },
     computed: {
@@ -88,6 +90,7 @@ export default {
                 if (json.error) alert(json.error);
                 else if (json.filter(playlist => playlist.id === playlistId).length > 0) this.admin = true;
             });
+        this.isPlaylistBookmarked();
     },
     activated() {
         window.addEventListener("scroll", this.handleScroll);
@@ -149,6 +152,12 @@ export default {
         },
         async bookmarkPlaylist() {
             if (!this.playlist) return;
+
+            if (this.isBookmarked) {
+                this.removePlaylistBookmark();
+                return;
+            }
+
             if (window.db) {
                 const playlistId = this.$route.query.list;
                 var tx = window.db.transaction("playlist_bookmarks", "readwrite");
@@ -162,8 +171,27 @@ export default {
                     uploaderAvatar: this.playlist.uploaderAvatar,
                     videos: this.playlist.videos,
                 });
+                this.isBookmarked = true;
             }
         },
+        async removePlaylistBookmark() {
+            var tx = window.db.transaction("playlist_bookmarks", "readwrite");
+            var store = tx.objectStore("playlist_bookmarks");
+            store.delete(this.$route.query.list);
+            this.isBookmarked = false;
+        },
+        async isPlaylistBookmarked() {
+            // needed in order to change the is bookmarked var later
+            const App = this;
+            const playlistId = this.$route.query.list;
+            var tx = window.db.transaction("playlist_bookmarks", "readwrite");
+            var store = tx.objectStore("playlist_bookmarks");
+            var req = store.openCursor(playlistId);
+            req.onsuccess = function (e) {
+                var cursor = e.target.result;
+                App.isBookmarked = cursor ? true : false;
+            };
+        },
     },
 };
 </script>
diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index 33928f11..27d9d3c6 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -59,10 +59,10 @@
                 :title="playlist.name"
                 v-text="playlist.name"
             />
-            <div class="flex items-center">
+            <a :href="playlist.uploaderUrl" class="flex items-center">
                 <img class="rounded-full w-32px h-32px" :src="playlist.uploaderAvatar" />
-                <span class="ml-3" v-text="playlist.uploader" />
-            </div>
+                <span class="ml-3 hover:underline" v-text="playlist.uploader" />
+            </a>
         </router-link>
     </div>
     <br />
diff --git a/src/locales/en.json b/src/locales/en.json
index ac99729c..7b640e63 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -122,7 +122,8 @@
         "reply_count": "{count} replies",
         "no_valid_playlists": "The file doesn't contain valid playlists!",
         "with_playlist": "Share with playlist",
-        "bookmark_playlist": "Bookmark"
+        "bookmark_playlist": "Bookmark",
+        "playlist_bookmarked": "Bookmarked"
     },
     "comment": {
         "pinned_by": "Pinned by {author}",

From 8532b5e22d8e31b8cbf00a239ba609757b0ecc98 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Sun, 8 Jan 2023 16:22:28 +0100
Subject: [PATCH 4/5] Always create the watch history store on db upgrade

---
 public/efy  |  1 +
 src/App.vue | 18 ++++++++----------
 2 files changed, 9 insertions(+), 10 deletions(-)
 create mode 160000 public/efy

diff --git a/public/efy b/public/efy
new file mode 160000
index 00000000..64c903b6
--- /dev/null
+++ b/public/efy
@@ -0,0 +1 @@
+Subproject commit 64c903b6bf21ed8c3f6259f7b8e02266968b91db
diff --git a/src/App.vue b/src/App.vue
index dd0f8faf..ae6805db 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,16 +46,14 @@ export default {
             request.onupgradeneeded = ev => {
                 const db = request.result;
                 console.log("Upgrading object store.");
-                if (this.getPreferenceBoolean("watchHistory", false)) {
-                    if (!db.objectStoreNames.contains("watch_history")) {
-                        const store = db.createObjectStore("watch_history", { keyPath: "videoId" });
-                        store.createIndex("video_id_idx", "videoId", { unique: true });
-                        store.createIndex("id_idx", "id", { unique: true, autoIncrement: true });
-                    }
-                    if (ev.oldVersion < 2) {
-                        const store = request.transaction.objectStore("watch_history");
-                        store.createIndex("watchedAt", "watchedAt", { unique: false });
-                    }
+                if (!db.objectStoreNames.contains("watch_history")) {
+                    const store = db.createObjectStore("watch_history", { keyPath: "videoId" });
+                    store.createIndex("video_id_idx", "videoId", { unique: true });
+                    store.createIndex("id_idx", "id", { unique: true, autoIncrement: true });
+                }
+                if (ev.oldVersion < 2) {
+                    const store = request.transaction.objectStore("watch_history");
+                    store.createIndex("watchedAt", "watchedAt", { unique: false });
                 }
                 if (!db.objectStoreNames.contains("playlist_bookmarks")) {
                     const store = db.createObjectStore("playlist_bookmarks", { keyPath: "playlistId" });

From 33ba3ee87296f33f87955000f642f737d8bf3e5a Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Sun, 8 Jan 2023 16:24:49 +0100
Subject: [PATCH 5/5] Undo changes from efy branch

---
 public/efy | 1 -
 1 file changed, 1 deletion(-)
 delete mode 160000 public/efy

diff --git a/public/efy b/public/efy
deleted file mode 160000
index 64c903b6..00000000
--- a/public/efy
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 64c903b6bf21ed8c3f6259f7b8e02266968b91db