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"> <li v-if="shouldShowHistory">
<router-link v-t="'titles.history'" to="/history" /> <router-link v-t="'titles.history'" to="/history" />
</li> </li>
<li v-if="authenticated"> <li>
<router-link v-t="'titles.playlists'" to="/playlists" /> <router-link v-t="'titles.playlists'" to="/playlists" />
</li> </li>
<li v-if="!shouldShowTrending"> <li v-if="!shouldShowTrending">
@ -79,7 +79,7 @@
<li v-if="shouldShowHistory"> <li v-if="shouldShowHistory">
<router-link v-t="'titles.history'" to="/history" /> <router-link v-t="'titles.history'" to="/history" />
</li> </li>
<li v-if="authenticated"> <li>
<router-link v-t="'titles.playlists'" to="/playlists" /> <router-link v-t="'titles.playlists'" to="/playlists" />
</li> </li>
<li v-if="!shouldShowTrending"> <li v-if="!shouldShowTrending">

View file

@ -1,9 +1,7 @@
<template> <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 v-if="authenticated" class="flex justify-between mb-3">
<div class="flex justify-between mb-3">
<button v-t="'actions.create_playlist'" class="btn" @click="onCreatePlaylist" /> <button v-t="'actions.create_playlist'" class="btn" @click="onCreatePlaylist" />
<div class="flex"> <div class="flex">
<button <button
@ -38,13 +36,22 @@
<button class="btn h-auto ml-2" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" /> <button class="btn h-auto ml-2" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" />
</div> </div>
</div> </div>
<br /> <hr />
<h2 class="font-bold my-4" v-t="'titles.bookmarks'" />
<div v-if="bookmarks" class="video-grid"> <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" /> <img class="w-full" :src="playlist.thumbnail" alt="thumbnail" />
<div class="relative text-sm"> <div class="relative text-sm">
<span class="thumbnail-overlay thumbnail-right" v-text="`${playlist.videos} ${$t('video.videos')}`" /> <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> </div>
<p <p
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
@ -52,8 +59,9 @@
:title="playlist.name" :title="playlist.name"
v-text="playlist.name" v-text="playlist.name"
/> />
<div class="flex"> <div class="flex items-center">
<img class="rounded-full" src="" alt="" /> <img class="rounded-full w-32px h-32px" :src="playlist.uploaderAvatar" />
<span class="ml-3" v-text="playlist.uploader" />
</div> </div>
</router-link> </router-link>
</div> </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> </script>

View file

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