Add possiblity to delete bookmark

This commit is contained in:
Bnyro 2023-01-06 20:38:42 +01:00
parent d84580cf4f
commit 8e3d3d5061
3 changed files with 26 additions and 11 deletions

View file

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

View file

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

View file

@ -12,7 +12,8 @@
"instance": "Instance",
"player": "Player",
"livestreams": "Livestreams",
"channels": "Channels"
"channels": "Channels",
"bookmarks": "Bookmarks"
},
"player": {
"watch_on": "Watch on {0}"