Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2025-08-09 20:24:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1951 from Bnyro/playlist-bookmarks

Browse Source 
Playlist bookmarks
This commit is contained in:
Bnyro
2023-01-09 16:28:59 +01:00
committed by GitHub
parent 4c564d8a8f 33ba3ee872
commit 537050b07d
6 changed files with 135 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/NavBar.vue
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">

48
src/components/PlaylistPage.vue
View File

@@ -14,6 +14,10 @@
<div>
<strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
<br />
<button class="btn mr-1" v-if="!isPipedPlaylist" @click="bookmarkPlaylist">
{{ $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" />
</button>
@@ -60,6 +64,7 @@ export default {
return {
playlist: null,
admin: false,
isBookmarked: false,
};
},
computed: {
@@ -85,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);
@@ -144,6 +150,48 @@ export default {
});
this.download(data, this.playlist.name + ".txt", "text/plain");
},
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");
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,
});
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>

58
src/components/PlaylistsPage.vue
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,6 +36,35 @@
<button class="btn h-auto ml-2" @click="deletePlaylist(playlist.id)" v-t="'actions.delete_playlist'" />
</div>
</div>
<hr />
<h2 class="font-bold my-4" v-t="'titles.bookmarks'" />
<div v-if="bookmarks" class="video-grid">
<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"
class="my-2 overflow-hidden flex link"
:title="playlist.name"
v-text="playlist.name"
/>
<a :href="playlist.uploaderUrl" class="flex items-center">
<img class="rounded-full w-32px h-32px" :src="playlist.uploaderAvatar" />
<span class="ml-3 hover:underline" v-text="playlist.uploader" />
</a>
</router-link>
</div>
<br />
</template>
@@ -46,11 +73,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 +229,26 @@ 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();
}
};
},
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>