Add possiblity to delete bookmark

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

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>

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