Add support for playlist bookmarks

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);
+            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,6 +56,12 @@ export default {
                         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" });
+                    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;

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>

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>

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

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";