+
@@ -14,6 +14,10 @@
+
@@ -42,11 +46,12 @@
width="168"
/>
-
diff --git a/src/components/PlaylistVideos.vue b/src/components/PlaylistVideos.vue
index f8a118e2..b054662b 100644
--- a/src/components/PlaylistVideos.vue
+++ b/src/components/PlaylistVideos.vue
@@ -32,6 +32,7 @@ export default {
},
mounted() {
this.updateScroll();
+ this.updateWatched(this.playlist.relatedStreams);
},
methods: {
updateScroll() {
diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index 716524b5..27d9d3c6 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -1,9 +1,19 @@
-
+
-
-
-
+
+
+
+
+
+
@@ -34,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";
@@ -94,22 +134,120 @@ export default {
else this.playlists = this.playlists.filter(playlist => playlist.id !== id);
});
},
- createPlaylist() {
+ onCreatePlaylist() {
const name = prompt(this.$t("actions.create_playlist"));
- if (name)
- this.fetchJson(this.authApiUrl() + "/user/playlists/create", null, {
- method: "POST",
- body: JSON.stringify({
- name: name,
- }),
- headers: {
- Authorization: this.getAuthToken(),
- "Content-Type": "application/json",
- },
- }).then(json => {
- if (json.error) alert(json.error);
- else this.fetchPlaylists();
- });
+ if (!name) return;
+ this.createPlaylist(name).then(json => {
+ if (json.error) alert(json.error);
+ else this.fetchPlaylists();
+ });
+ },
+ async createPlaylist(name) {
+ let json = await this.fetchJson(this.authApiUrl() + "/user/playlists/create", null, {
+ method: "POST",
+ body: JSON.stringify({
+ name: name,
+ }),
+ headers: {
+ Authorization: this.getAuthToken(),
+ "Content-Type": "application/json",
+ },
+ });
+ return json;
+ },
+ async exportPlaylists() {
+ if (!this.playlists) return;
+ let json = {
+ format: "Piped",
+ version: 1,
+ playlists: [],
+ };
+ let tasks = this.playlists.map(playlist => this.fetchPlaylistJson(playlist.id));
+ json.playlists = await Promise.all(tasks);
+ this.download(JSON.stringify(json), "playlists.json", "application/json");
+ },
+ async fetchPlaylistJson(playlistId) {
+ let playlist = await this.fetchJson(this.authApiUrl() + "/playlists/" + playlistId);
+ let playlistJson = {
+ name: playlist.name,
+ // possible other types: history, watch later, ...
+ type: "playlist",
+ // as Invidious supports public and private playlists
+ visibility: "private",
+ // list of the videos, starting with "https://youtube.com" to clarify that those are YT videos
+ videos: playlist.relatedStreams.map(stream => "https://youtube.com" + stream.url),
+ };
+ return playlistJson;
+ },
+ async importPlaylists() {
+ const file = this.$refs.fileSelector.files[0];
+ let text = await file.text();
+ let tasks = [];
+ // list of playlists exported from Piped
+ if (text.includes("playlists")) {
+ let playlists = JSON.parse(text).playlists;
+ if (!playlists.length) {
+ alert(this.$t("actions.no_valid_playlists"));
+ return;
+ }
+ for (var i = 0; i < playlists.length; i++) {
+ tasks.push(this.createPlaylistWithVideos(playlists[i]));
+ }
+ // CSV from Google Takeout
+ } else if (file.name.slice(-4).toLowerCase() == ".csv") {
+ const lines = text.split("\n");
+ const playlist = {
+ name: lines[1].split(",")[4],
+ videos: lines
+ .slice(4, lines.length)
+ .filter(line => line != "")
+ .map(line => `https://youtube.com/watch?v=${line.split(",")[0]}`),
+ };
+ tasks.push(this.createPlaylistWithVideos(playlist));
+ } else {
+ alert(this.$t("actions.no_valid_playlists"));
+ return;
+ }
+ await Promise.all(tasks);
+ window.location.reload();
+ },
+ async createPlaylistWithVideos(playlist) {
+ let newPlaylist = await this.createPlaylist(playlist.name);
+ let videoIds = playlist.videos.map(url => url.substr(-11));
+ await this.addVideosToPlaylist(newPlaylist.playlistId, videoIds);
+ },
+ async addVideosToPlaylist(playlistId, videoIds) {
+ await this.fetchJson(this.authApiUrl() + "/user/playlists/add", null, {
+ method: "POST",
+ body: JSON.stringify({
+ playlistId: playlistId,
+ videoIds: videoIds,
+ }),
+ headers: {
+ Authorization: this.getAuthToken(),
+ "Content-Type": "application/json",
+ },
+ });
+ },
+ 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/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 31e5913f..3526794f 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -45,6 +45,16 @@
@change="onChange($event)"
/>
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+