diff --git a/src/App.vue b/src/App.vue index 9b52acc0..b59c4442 100644 --- a/src/App.vue +++ b/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; diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue index 5f59af83..b3f94abf 100644 --- a/src/components/NavBar.vue +++ b/src/components/NavBar.vue @@ -50,7 +50,7 @@
    • -
  • +
  • @@ -79,7 +79,7 @@
    • -
  • +
  • diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue index d84dea9c..26d2c5db 100644 --- a/src/components/PlaylistPage.vue +++ b/src/components/PlaylistPage.vue @@ -14,6 +14,10 @@

    + @@ -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; + }; + }, }, }; diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue index 7383fd79..27d9d3c6 100644 --- a/src/components/PlaylistsPage.vue +++ b/src/components/PlaylistsPage.vue @@ -1,9 +1,7 @@ @@ -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); + }, }, }; diff --git a/src/locales/en.json b/src/locales/en.json index 318f1bcf..7b640e63 100644 --- a/src/locales/en.json +++ b/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}" @@ -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}", diff --git a/src/main.js b/src/main.js index fb15e695..c56e4ae8 100644 --- a/src/main.js +++ b/src/main.js @@ -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";