Dynamically update the button in the playlist page

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>

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" />
+                <span class="ml-3 hover:underline" v-text="playlist.uploader" />
-            </div>
+            </a>
         </router-link>
     </div>
     <br />

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