mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 10:18:23 +00:00
Merge pull request #1951 from Bnyro/playlist-bookmarks
Playlist bookmarks
This commit is contained in:
Bnyro
GitHub
commit
537050b07d
45
src/App.vue
45
src/App.vue
@ -44,26 +44,31 @@ export default {
|
||||
darkModePreference.addEventListener("change", () => {
|
||||
this.setTheme();
|
||||
});
|
||||
if (this.getPreferenceBoolean("watchHistory", false))
|
||||
if ("indexedDB" in window) {
|
||||
const request = indexedDB.open("piped-db", 2);
|
||||
request.onupgradeneeded = ev => {
|
||||
const db = request.result;
|
||||
console.log("Upgrading object store.");
|
||||
if (!db.objectStoreNames.contains("watch_history")) {
|
||||
const store = db.createObjectStore("watch_history", { keyPath: "videoId" });
|
||||
store.createIndex("video_id_idx", "videoId", { unique: true });
|
||||
store.createIndex("id_idx", "id", { unique: true, autoIncrement: true });
|
||||
}
|
||||
if (ev.oldVersion < 2) {
|
||||
const store = request.transaction.objectStore("watch_history");
|
||||
store.createIndex("watchedAt", "watchedAt", { unique: false });
|
||||
}
|
||||
};
|
||||
request.onsuccess = e => {
|
||||
window.db = e.target.result;
|
||||
};
|
||||
} else console.log("This browser doesn't support IndexedDB");
|
||||
|
||||
if ("indexedDB" in window) {
|
||||
const request = indexedDB.open("piped-db", 3);
|
||||
request.onupgradeneeded = ev => {
|
||||
const db = request.result;
|
||||
console.log("Upgrading object store.");
|
||||
if (!db.objectStoreNames.contains("watch_history")) {
|
||||
const store = db.createObjectStore("watch_history", { keyPath: "videoId" });
|
||||
store.createIndex("video_id_idx", "videoId", { unique: true });
|
||||
store.createIndex("id_idx", "id", { unique: true, autoIncrement: true });
|
||||
}
|
||||
if (ev.oldVersion < 2) {
|
||||
const store = request.transaction.objectStore("watch_history");
|
||||
store.createIndex("watchedAt", "watchedAt", { unique: false });
|
||||
}
|
||||
if (!db.objectStoreNames.contains("playlist_bookmarks")) {
|
||||
const store = db.createObjectStore("playlist_bookmarks", { keyPath: "playlistId" });
|
||||
store.createIndex("playlist_id_idx", "playlistId", { unique: true });
|
||||
store.createIndex("id_idx", "id", { unique: true, autoIncrement: true });
|
||||
}
|
||||
};
|
||||
request.onsuccess = e => {
|
||||
window.db = e.target.result;
|
||||
};
|
||||
} else console.log("This browser doesn't support IndexedDB");
|
||||
|
||||
const App = this;
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -12,7 +12,8 @@
|
||||
"instance": "Instance",
|
||||
"player": "Player",
|
||||
"livestreams": "Livestreams",
|
||||
"channels": "Channels"
|
||||
"channels": "Channels",
|
||||
"bookmarks": "Bookmarks"
|
||||
},
|
||||
"player": {
|
||||
"watch_on": "Watch on {0}"
|
||||
@ -120,7 +121,9 @@
|
||||
"instance_donations": "Instance donations",
|
||||
"reply_count": "{count} replies",
|
||||
"no_valid_playlists": "The file doesn't contain valid playlists!",
|
||||
"with_playlist": "Share with playlist"
|
||||
"with_playlist": "Share with playlist",
|
||||
"bookmark_playlist": "Bookmark",
|
||||
"playlist_bookmarked": "Bookmarked"
|
||||
},
|
||||
"comment": {
|
||||
"pinned_by": "Pinned by {author}",
|
||||
|
||||
@ -20,6 +20,7 @@ import {
|
||||
faBook,
|
||||
faServer,
|
||||
faDonate,
|
||||
faBookmark,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { faGithub, faBitcoin, faYoutube } from "@fortawesome/free-brands-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
@ -46,6 +47,7 @@ library.add(
|
||||
faBook,
|
||||
faServer,
|
||||
faDonate,
|
||||
faBookmark,
|
||||
);
|
||||
|
||||
import router from "@/router/router.js";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user