From 2e64c4f003d76925355da39cf3704456dc6c962e Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 15 Jun 2023 17:32:32 +0200
Subject: [PATCH 1/7] Refactor playlist logic into dedicated functions

---
 src/components/PlaylistAddModal.vue | 24 +++-----
 src/components/PlaylistsPage.vue    | 86 +++++-----------------------
 src/components/VideoItem.vue        |  7 ++-
 src/components/WatchVideo.vue       |  7 ++-
 src/main.js                         | 87 +++++++++++++++++++++++++++++
 5 files changed, 119 insertions(+), 92 deletions(-)

diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index 3e3a4aac..77df9ac1 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -23,8 +23,12 @@ export default {
         ModalComponent,
     },
     props: {
+        videoInfo: {
+            type: Object,
+            required: true,
+        },
         videoId: {
-            type: String,
+            type: Object,
             required: true,
         },
     },
@@ -62,28 +66,14 @@ export default {
             this.$refs.addButton.disabled = true;
             this.processing = true;
 
-            this.fetchJson(this.authApiUrl() + "/user/playlists/add", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    playlistId: playlistId,
-                    videoId: this.videoId,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            }).then(json => {
+            this.addVideosToPlaylist(playlistId, [this.videoId], [this.videoInfo]).then(json => {
                 this.setPreference("selectedPlaylist" + this.hashCode(this.authApiUrl()), playlistId);
                 this.$emit("close");
                 if (json.error) alert(json.error);
             });
         },
         async fetchPlaylists() {
-            this.fetchJson(this.authApiUrl() + "/user/playlists", null, {
-                headers: {
-                    Authorization: this.getAuthToken(),
-                },
-            }).then(json => {
+            this.getPlaylists().then(json => {
                 this.playlists = json;
             });
         },
diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index 0dda0efe..58c14543 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -1,7 +1,7 @@
 <template>
-    <h2 v-if="authenticated" class="font-bold my-4" v-t="'titles.playlists'" />
+    <h2 class="font-bold my-4" v-t="'titles.playlists'" />
 
-    <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" />
         <div class="flex">
             <button
@@ -63,7 +63,7 @@
                 v-if="playlistToDelete == playlist.id"
                 :message="$t('actions.delete_playlist_confirm')"
                 @close="playlistToDelete = null"
-                @confirm="deletePlaylist(playlist.id)"
+                @confirm="onDeletePlaylist(playlist.id)"
             />
         </div>
     </div>
@@ -115,7 +115,7 @@ export default {
         };
     },
     mounted() {
-        if (this.authenticated) this.fetchPlaylists();
+        this.fetchPlaylists();
         this.loadPlaylistBookmarks();
     },
     activated() {
@@ -123,11 +123,7 @@ export default {
     },
     methods: {
         fetchPlaylists() {
-            this.fetchJson(this.authApiUrl() + "/user/playlists", null, {
-                headers: {
-                    Authorization: this.getAuthToken(),
-                },
-            }).then(json => {
+            this.getPlaylists().then(json => {
                 this.playlists = json;
             });
         },
@@ -141,50 +137,21 @@ export default {
             const newName = this.newPlaylistName;
             const newDescription = this.newPlaylistDescription;
             if (newName != selectedPlaylist.name) {
-                this.fetchJson(this.authApiUrl() + "/user/playlists/rename", null, {
-                    method: "POST",
-                    body: JSON.stringify({
-                        playlistId: selectedPlaylist.id,
-                        newName: newName,
-                    }),
-                    headers: {
-                        Authorization: this.getAuthToken(),
-                        "Content-Type": "application/json",
-                    },
-                }).then(json => {
+                this.renamePlaylist(selectedPlaylist.id, newName).then(json => {
                     if (json.error) alert(json.error);
                     else selectedPlaylist.name = newName;
                 });
             }
             if (newDescription != selectedPlaylist.description) {
-                this.fetchJson(this.authApiUrl() + "/user/playlists/description", null, {
-                    method: "PATCH",
-                    body: JSON.stringify({
-                        playlistId: selectedPlaylist.id,
-                        description: newDescription,
-                    }),
-                    headers: {
-                        Authorization: this.getAuthToken(),
-                        "Content-Type": "application/json",
-                    },
-                }).then(json => {
+                this.changePlaylistDescription(selectedPlaylist.id, newDescription).then(json => {
                     if (json.error) alert(json.error);
                     else selectedPlaylist.description = newDescription;
                 });
             }
             this.playlistToEdit = null;
         },
-        deletePlaylist(id) {
-            this.fetchJson(this.authApiUrl() + "/user/playlists/delete", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    playlistId: id,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            }).then(json => {
+        onDeletePlaylist(id) {
+            this.deletePlaylist(id).then(json => {
                 if (json.error) alert(json.error);
                 else this.playlists = this.playlists.filter(playlist => playlist.id !== id);
             });
@@ -198,19 +165,6 @@ export default {
                 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 = {
@@ -223,8 +177,8 @@ export default {
             this.download(JSON.stringify(json), "playlists.json", "application/json");
         },
         async fetchPlaylistJson(playlistId) {
-            let playlist = await this.fetchJson(this.authApiUrl() + "/playlists/" + playlistId);
-            let playlistJson = {
+            let playlist = await this.getPlaylist(playlistId);
+            return {
                 name: playlist.name,
                 // possible other types: history, watch later, ...
                 type: "playlist",
@@ -233,7 +187,6 @@ export default {
                 // 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 files = this.$refs.fileSelector.files;
@@ -252,8 +205,8 @@ export default {
                     alert(this.$t("actions.no_valid_playlists"));
                     return;
                 }
-                for (var i = 0; i < playlists.length; i++) {
-                    tasks.push(this.createPlaylistWithVideos(playlists[i]));
+                for (let playlist of playlists) {
+                    tasks.push(this.createPlaylistWithVideos(playlist));
                 }
                 // CSV from Google Takeout
             } else if (file.name.slice(-4).toLowerCase() == ".csv") {
@@ -277,19 +230,6 @@ export default {
             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");
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 918ebb3f..702814e0 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -124,7 +124,12 @@
                     @confirm="removeVideo(item.url.substr(-11))"
                     :message="$t('actions.delete_playlist_video_confirm')"
                 />
-                <PlaylistAddModal v-if="showModal" :video-id="item.url.substr(-11)" @close="showModal = !showModal" />
+                <PlaylistAddModal
+                    v-if="showModal"
+                    :video-id="item.url.substr(-11)"
+                    video-info="item"
+                    @close="showModal = !showModal"
+                />
             </div>
         </div>
     </div>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 2f34e6e2..6deff7f9 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -78,7 +78,12 @@
                     <!-- Verified Badge -->
                     <font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check" />
                 </div>
-                <PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
+                <PlaylistAddModal
+                    v-if="showModal"
+                    :video-id="getVideoId()"
+                    :video-info="video"
+                    @close="showModal = !showModal"
+                />
                 <ShareModal
                     v-if="showShareModal"
                     :video-id="getVideoId()"
diff --git a/src/main.js b/src/main.js
index 71b916d4..a1ffb6d3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -292,6 +292,93 @@ const mixin = {
             var store = tx.objectStore("channel_groups");
             store.delete(groupName);
         },
+        async getPlaylists() {
+            return await this.fetchJson(this.authApiUrl() + "/user/playlists", null, {
+                headers: {
+                    Authorization: this.getAuthToken(),
+                },
+            });
+        },
+        async getPlaylist(playlistId) {
+            return await this.fetchJson(this.authApiUrl() + "/playlists/" + playlistId);
+        },
+        async createPlaylist(name) {
+            return await this.fetchJson(this.authApiUrl() + "/user/playlists/create", null, {
+                method: "POST",
+                body: JSON.stringify({
+                    name: name,
+                }),
+                headers: {
+                    Authorization: this.getAuthToken(),
+                    "Content-Type": "application/json",
+                },
+            });
+        },
+        async deletePlaylist(playlistId) {
+            return await this.fetchJson(this.authApiUrl() + "/user/playlists/delete", null, {
+                method: "POST",
+                body: JSON.stringify({
+                    playlistId: playlistId,
+                }),
+                headers: {
+                    Authorization: this.getAuthToken(),
+                    "Content-Type": "application/json",
+                },
+            });
+        },
+        async renamePlaylist(playlistId, newName) {
+            return await this.fetchJson(this.authApiUrl() + "/user/playlists/rename", null, {
+                method: "POST",
+                body: JSON.stringify({
+                    playlistId: playlistId,
+                    newName: newName,
+                }),
+                headers: {
+                    Authorization: this.getAuthToken(),
+                    "Content-Type": "application/json",
+                },
+            });
+        },
+        async changePlaylistDescription(playlistId, newDescription) {
+            return await this.fetchJson(this.authApiUrl() + "/user/playlists/description", null, {
+                method: "PATCH",
+                body: JSON.stringify({
+                    playlistId: playlistId,
+                    description: newDescription,
+                }),
+                headers: {
+                    Authorization: this.getAuthToken(),
+                    "Content-Type": "application/json",
+                },
+            });
+        },
+        async addVideosToPlaylist(playlistId, videoIds, videoInfos) {
+            if (videoInfos == "hallo") return; //TODO, only needed for local vids
+            return 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 removeVideoFromPlaylist(playlistId, videoId) {
+            return await this.fetchJson(this.authApiUrl() + "/user/playlists/add", null, {
+                method: "POST",
+                body: JSON.stringify({
+                    playlistId: playlistId,
+                    videoId: videoId,
+                }),
+                headers: {
+                    Authorization: this.getAuthToken(),
+                    "Content-Type": "application/json",
+                },
+            });
+        },
     },
     computed: {
         authenticated(_this) {

From 37d6423e080aa0cac5f386ca8b2467188cbe4ab0 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 15 Jun 2023 19:18:47 +0200
Subject: [PATCH 2/7] Add support for local playlists

---
 src/App.vue                      |   8 +-
 src/components/PlaylistPage.vue  |  12 +--
 src/components/PlaylistsPage.vue |   3 +-
 src/components/VideoItem.vue     |   4 +-
 src/components/WatchVideo.vue    |   8 +-
 src/main.js                      | 147 ++++++++++++++++++++++++++++++-
 6 files changed, 167 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 331a2065..4eec7018 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,7 +55,7 @@ export default {
         });
 
         if ("indexedDB" in window) {
-            const request = indexedDB.open("piped-db", 4);
+            const request = indexedDB.open("piped-db", 5);
             request.onupgradeneeded = ev => {
                 const db = request.result;
                 console.log("Upgrading object store.");
@@ -77,6 +77,12 @@ export default {
                     const store = db.createObjectStore("channel_groups", { keyPath: "groupName" });
                     store.createIndex("groupName", "groupName", { unique: true });
                 }
+                if (!db.objectStoreNames.contains("playlists")) {
+                    const playlistStore = db.createObjectStore("playlists", { keyPath: "playlistId" });
+                    playlistStore.createIndex("playlistId", "playlistId", { unique: true });
+                    const playlistVideosStore = db.createObjectStore("playlistVideos", { keyPath: "videoId" });
+                    playlistVideosStore.createIndex("videoId", "videoId", { unique: true });
+                }
             };
             request.onsuccess = e => {
                 window.db = e.target.result;
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index b2ea2361..80ad5cb4 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -86,14 +86,11 @@ export default {
     mounted() {
         const playlistId = this.$route.query.list;
         if (this.authenticated && playlistId?.length == 36)
-            this.fetchJson(this.authApiUrl() + "/user/playlists", null, {
-                headers: {
-                    Authorization: this.getAuthToken(),
-                },
-            }).then(json => {
+            this.getPlaylists().then(json => {
                 if (json.error) alert(json.error);
                 else if (json.some(playlist => playlist.id === playlistId)) this.admin = true;
             });
+        else if (playlistId.startsWith("local")) this.admin = true;
         this.isPlaylistBookmarked();
     },
     activated() {
@@ -106,6 +103,11 @@ export default {
     },
     methods: {
         async fetchPlaylist() {
+            const playlistId = this.$route.query.list;
+            if (playlistId.startsWith("local")) {
+                return this.getPlaylist(playlistId);
+            }
+
             return await await this.fetchJson(this.authApiUrl() + "/playlists/" + this.$route.query.list);
         },
         async getPlaylistData() {
diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index 58c14543..06f4da30 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -238,8 +238,7 @@ export default {
             cursorRequest.onsuccess = e => {
                 const cursor = e.target.result;
                 if (cursor) {
-                    const bookmark = cursor.value;
-                    this.bookmarks.push(bookmark);
+                    this.bookmarks.push(cursor.value);
                     cursor.continue();
                 }
             };
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 702814e0..4b9a7dca 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -107,7 +107,7 @@
                 >
                     <font-awesome-icon icon="headphones" />
                 </router-link>
-                <button v-if="authenticated" :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
+                <button :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
                     <font-awesome-icon icon="circle-plus" />
                 </button>
                 <button
@@ -127,7 +127,7 @@
                 <PlaylistAddModal
                     v-if="showModal"
                     :video-id="item.url.substr(-11)"
-                    video-info="item"
+                    :video-info="item"
                     @close="showModal = !showModal"
                 />
             </div>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 6deff7f9..aaa34661 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -94,7 +94,7 @@
                 />
                 <div class="flex flex-wrap gap-1 ml-auto">
                     <!-- Subscribe Button -->
-                    <button class="btn flex items-center" v-if="authenticated" @click="showModal = !showModal">
+                    <button class="btn flex items-center" @click="showModal = !showModal">
                         {{ $t("actions.add_to_playlist") }}<font-awesome-icon class="ml-1" icon="circle-plus" />
                     </button>
                     <button
@@ -112,7 +112,7 @@
                             title="RSS feed"
                             role="button"
                             v-if="video.uploaderUrl"
-                            :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${video.uploaderUrl.split('/')[2]}`"
+                            :href="`${apiUrl()}/fss?channels=${video.uploaderUrl.split('/')[2]}`"
                             target="_blank"
                             class="btn flex items-center"
                         >
@@ -494,7 +494,7 @@ export default {
         },
         async fetchSubscribedStatus() {
             if (!this.channelId) return;
-            if (!this.authenticated) {
+            if ({
                 this.subscribed = this.isSubscribedLocally(this.channelId);
                 return;
             }
@@ -531,7 +531,7 @@ export default {
             });
         },
         subscribeHandler() {
-            if (this.authenticated) {
+            if {
                 this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
                     method: "POST",
                     body: JSON.stringify({
diff --git a/src/main.js b/src/main.js
index a1ffb6d3..a0385f4d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -194,6 +194,9 @@ const mixin = {
         timeAgo(time) {
             return timeAgo.format(time);
         },
+        async delay(millis) {
+            return await new Promise(r => setTimeout(r, millis));
+        },
         urlify(string) {
             if (!string) return "";
             const urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
@@ -292,7 +295,84 @@ const mixin = {
             var store = tx.objectStore("channel_groups");
             store.delete(groupName);
         },
+        async getLocalPlaylist(playlistId) {
+            var tx = window.db.transaction("playlists", "readonly");
+            var store = tx.objectStore("playlists");
+            const req = store.openCursor(playlistId);
+            let playlist = null;
+            req.onsuccess = e => {
+                playlist = e.target.result.value;
+            };
+            while (playlist == null) {
+                await this.delay(10);
+            }
+            playlist.videos = JSON.parse(playlist.videoIds).length;
+            return playlist;
+        },
+        createOrUpdateLocalPlaylist(playlist) {
+            var tx = window.db.transaction("playlists", "readwrite");
+            var store = tx.objectStore("playlists");
+            store.put(playlist);
+        },
+        // needs to handle both, streamInfo items and streams items
+        createLocalPlaylistVideo(videoId, videoInfo) {
+            if (videoInfo === null || videoId === null) return;
+
+            var tx = window.db.transaction("playlistVideos", "readwrite");
+            var store = tx.objectStore("playlistVideos");
+            const video = {
+                videoId: videoId,
+                title: videoInfo.title,
+                type: "stream",
+                shortDescription: videoInfo.shortDescription ?? videoInfo.description,
+                url: `/watch?v=${videoId}`,
+                thumbnailUrl: videoInfo.thumbnailUrl,
+                uploaderVerified: videoInfo.uploaderVerified,
+                duration: videoInfo.duration,
+                uploaderAvatar: videoInfo.uploaderAvatar,
+                uploaderUrl: videoInfo.uploaderUrl,
+                uploaderName: videoInfo.uploaderName ?? videoInfo.uploader,
+            };
+            store.put(video);
+        },
+        async getLocalPlaylistVideo(videoId) {
+            var tx = window.db.transaction("playlistVideos", "readonly");
+            var store = tx.objectStore("playlistVideos");
+            const req = store.openCursor(videoId);
+            let video = null;
+            req.onsuccess = e => {
+                video = e.target.result;
+            };
+            while (video == null) {
+                await this.delay(10);
+            }
+            return video;
+        },
         async getPlaylists() {
+            if (!this.authenticated) {
+                if (!window.db) return [];
+                let finished = false;
+                let playlists = [];
+                var tx = window.db.transaction("playlists", "readonly");
+                var store = tx.objectStore("playlists");
+                const cursorRequest = store.openCursor();
+                cursorRequest.onsuccess = e => {
+                    const cursor = e.target.result;
+                    if (cursor) {
+                        let playlist = cursor.value;
+                        playlist.videos = JSON.parse(playlist.videoIds).length;
+                        playlists.push(playlist);
+                        cursor.continue();
+                    } else {
+                        finished = true;
+                    }
+                };
+                while (!finished) {
+                    await this.delay(10);
+                }
+                return playlists;
+            }
+
             return await this.fetchJson(this.authApiUrl() + "/user/playlists", null, {
                 headers: {
                     Authorization: this.getAuthToken(),
@@ -300,9 +380,31 @@ const mixin = {
             });
         },
         async getPlaylist(playlistId) {
+            if (!this.authenticated) {
+                const playlist = await this.getLocalPlaylist(playlistId);
+                const videoIds = JSON.parse(playlist.videoIds);
+                const videosFuture = videoIds.map(videoId => this.getLocalPlaylistVideo(videoId));
+                playlist.relatedStreams = Promise.all(videosFuture);
+                return playlist;
+            }
+
             return await this.fetchJson(this.authApiUrl() + "/playlists/" + playlistId);
         },
         async createPlaylist(name) {
+            if (!this.authenticated) {
+                const playlistId = "local-1";
+                this.createOrUpdateLocalPlaylist({
+                    playlistId: playlistId,
+                    // remapping needed for the playlists page
+                    id: playlistId,
+                    name: name,
+                    description: "",
+                    thumbnail: "https://pipedproxy.kavin.rocks/?host=i.ytimg.com",
+                    videoIds: "[]", // empty list
+                });
+                return { playlistId: playlistId };
+            }
+
             return await this.fetchJson(this.authApiUrl() + "/user/playlists/create", null, {
                 method: "POST",
                 body: JSON.stringify({
@@ -315,6 +417,13 @@ const mixin = {
             });
         },
         async deletePlaylist(playlistId) {
+            if (!this.authenticated) {
+                var tx = window.db.transaction("playlists", "readwrite");
+                var store = tx.objectStore("playlists");
+                store.delete(playlistId);
+                return { message: "ok" };
+            }
+
             return await this.fetchJson(this.authApiUrl() + "/user/playlists/delete", null, {
                 method: "POST",
                 body: JSON.stringify({
@@ -327,6 +436,13 @@ const mixin = {
             });
         },
         async renamePlaylist(playlistId, newName) {
+            if (!this.authenticated) {
+                const playlist = await this.getLocalPlaylist(playlistId);
+                playlist.name = newName;
+                this.createOrUpdateLocalPlaylist(playlist);
+                return { message: "ok" };
+            }
+
             return await this.fetchJson(this.authApiUrl() + "/user/playlists/rename", null, {
                 method: "POST",
                 body: JSON.stringify({
@@ -340,6 +456,13 @@ const mixin = {
             });
         },
         async changePlaylistDescription(playlistId, newDescription) {
+            if (!this.authenticated) {
+                const playlist = await this.getLocalPlaylist(playlistId);
+                playlist.description = newDescription;
+                this.createOrUpdateLocalPlaylist(playlist);
+                return { message: "ok" };
+            }
+
             return await this.fetchJson(this.authApiUrl() + "/user/playlists/description", null, {
                 method: "PATCH",
                 body: JSON.stringify({
@@ -353,7 +476,19 @@ const mixin = {
             });
         },
         async addVideosToPlaylist(playlistId, videoIds, videoInfos) {
-            if (videoInfos == "hallo") return; //TODO, only needed for local vids
+            if (!this.authenticated) {
+                const playlist = await this.getLocalPlaylist(playlistId);
+                const currentVideoIds = JSON.parse(playlist.videoIds);
+                if (currentVideoIds.length == 0) playlist.thumbnailUrl = videoInfos[0].thumbnailUrl;
+                videoIds.push(...videoIds);
+                playlist.videoIds = JSON.stringify(videoIds);
+                this.createOrUpdateLocalPlaylist(playlist);
+                for (let i in videoIds) {
+                    this.createLocalPlaylistVideo(videoIds[i], videoInfos[i]);
+                }
+                return { message: "ok" };
+            }
+
             return await this.fetchJson(this.authApiUrl() + "/user/playlists/add", null, {
                 method: "POST",
                 body: JSON.stringify({
@@ -367,6 +502,16 @@ const mixin = {
             });
         },
         async removeVideoFromPlaylist(playlistId, videoId) {
+            if (!this.authenticated) {
+                const playlist = await this.getLocalPlaylist(playlistId);
+                const videoIds = JSON.parse(playlist.videoIds);
+                videoIds.splice(videoIds.indexOf(videoId), 1);
+                playlist.videoIds = JSON.stringify(videoIds);
+                if (videoIds.length == 0) playlist.thumbnailUrl = "";
+                this.createOrUpdateLocalPlaylist(playlist);
+                return { message: "ok" };
+            }
+
             return await this.fetchJson(this.authApiUrl() + "/user/playlists/add", null, {
                 method: "POST",
                 body: JSON.stringify({

From a52c511d29b6844e39ee34e791a6987eff51e3ef Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 15 Jun 2023 22:41:26 +0200
Subject: [PATCH 3/7] Fix remaining issues with local playlists

---
 src/components/PlaylistAddModal.vue |  2 +-
 src/components/VideoItem.vue        | 12 +-----------
 src/main.js                         | 26 ++++++++++++++------------
 3 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index 77df9ac1..d155e72a 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -28,7 +28,7 @@ export default {
             required: true,
         },
         videoId: {
-            type: Object,
+            type: String,
             required: true,
         },
     },
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 4b9a7dca..dd6ba219 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -177,17 +177,7 @@ export default {
     methods: {
         removeVideo() {
             this.$refs.removeButton.disabled = true;
-            this.fetchJson(this.authApiUrl() + "/user/playlists/remove", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    playlistId: this.playlistId,
-                    index: this.index,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            }).then(json => {
+            this.removeVideoFromPlaylist(this.playlistId, null, this.index).then(json => {
                 if (json.error) alert(json.error);
                 else this.$emit("remove");
             });
diff --git a/src/main.js b/src/main.js
index a0385f4d..4a6bdb1c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -316,7 +316,7 @@ const mixin = {
         },
         // needs to handle both, streamInfo items and streams items
         createLocalPlaylistVideo(videoId, videoInfo) {
-            if (videoInfo === null || videoId === null) return;
+            if (videoInfo === undefined || videoId === null) return;
 
             var tx = window.db.transaction("playlistVideos", "readwrite");
             var store = tx.objectStore("playlistVideos");
@@ -326,7 +326,7 @@ const mixin = {
                 type: "stream",
                 shortDescription: videoInfo.shortDescription ?? videoInfo.description,
                 url: `/watch?v=${videoId}`,
-                thumbnailUrl: videoInfo.thumbnailUrl,
+                thumbnail: videoInfo.thumbnail ?? videoInfo.thumbnailUrl,
                 uploaderVerified: videoInfo.uploaderVerified,
                 duration: videoInfo.duration,
                 uploaderAvatar: videoInfo.uploaderAvatar,
@@ -341,7 +341,7 @@ const mixin = {
             const req = store.openCursor(videoId);
             let video = null;
             req.onsuccess = e => {
-                video = e.target.result;
+                video = e.target.result.value;
             };
             while (video == null) {
                 await this.delay(10);
@@ -384,7 +384,8 @@ const mixin = {
                 const playlist = await this.getLocalPlaylist(playlistId);
                 const videoIds = JSON.parse(playlist.videoIds);
                 const videosFuture = videoIds.map(videoId => this.getLocalPlaylistVideo(videoId));
-                playlist.relatedStreams = Promise.all(videosFuture);
+                playlist.relatedStreams = await Promise.all(videosFuture);
+                console.log(playlist);
                 return playlist;
             }
 
@@ -392,7 +393,8 @@ const mixin = {
         },
         async createPlaylist(name) {
             if (!this.authenticated) {
-                const playlistId = "local-1";
+                const uuid = crypto.randomUUID();
+                const playlistId = `local-${uuid}`;
                 this.createOrUpdateLocalPlaylist({
                     playlistId: playlistId,
                     // remapping needed for the playlists page
@@ -479,9 +481,9 @@ const mixin = {
             if (!this.authenticated) {
                 const playlist = await this.getLocalPlaylist(playlistId);
                 const currentVideoIds = JSON.parse(playlist.videoIds);
-                if (currentVideoIds.length == 0) playlist.thumbnailUrl = videoInfos[0].thumbnailUrl;
-                videoIds.push(...videoIds);
-                playlist.videoIds = JSON.stringify(videoIds);
+                if (currentVideoIds.length == 0) playlist.thumbnail = videoInfos[0].thumbnail;
+                currentVideoIds.push(...videoIds);
+                playlist.videoIds = JSON.stringify(currentVideoIds);
                 this.createOrUpdateLocalPlaylist(playlist);
                 for (let i in videoIds) {
                     this.createLocalPlaylistVideo(videoIds[i], videoInfos[i]);
@@ -501,22 +503,22 @@ const mixin = {
                 },
             });
         },
-        async removeVideoFromPlaylist(playlistId, videoId) {
+        async removeVideoFromPlaylist(playlistId, videoId, index) {
             if (!this.authenticated) {
                 const playlist = await this.getLocalPlaylist(playlistId);
                 const videoIds = JSON.parse(playlist.videoIds);
                 videoIds.splice(videoIds.indexOf(videoId), 1);
                 playlist.videoIds = JSON.stringify(videoIds);
-                if (videoIds.length == 0) playlist.thumbnailUrl = "";
+                if (videoIds.length == 0) playlist.thumbnail = "https://pipedproxy.kavin.rocks/?host=i.ytimg.com";
                 this.createOrUpdateLocalPlaylist(playlist);
                 return { message: "ok" };
             }
 
-            return await this.fetchJson(this.authApiUrl() + "/user/playlists/add", null, {
+            return await this.fetchJson(this.authApiUrl() + "/user/playlists/remove", null, {
                 method: "POST",
                 body: JSON.stringify({
                     playlistId: playlistId,
-                    videoId: videoId,
+                    index: index,
                 }),
                 headers: {
                     Authorization: this.getAuthToken(),

From 4056c44fbb33ede720bff0494b04aab8200d9804 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 15 Jun 2023 23:03:57 +0200
Subject: [PATCH 4/7] Implement restoring backups and auto-delete unused videos

---
 src/App.vue |  2 +-
 src/main.js | 28 ++++++++++++++++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4eec7018..21938271 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -80,7 +80,7 @@ export default {
                 if (!db.objectStoreNames.contains("playlists")) {
                     const playlistStore = db.createObjectStore("playlists", { keyPath: "playlistId" });
                     playlistStore.createIndex("playlistId", "playlistId", { unique: true });
-                    const playlistVideosStore = db.createObjectStore("playlistVideos", { keyPath: "videoId" });
+                    const playlistVideosStore = db.createObjectStore("playlist_videos", { keyPath: "videoId" });
                     playlistVideosStore.createIndex("videoId", "videoId", { unique: true });
                 }
             };
diff --git a/src/main.js b/src/main.js
index 4a6bdb1c..bff3879e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -316,10 +316,10 @@ const mixin = {
         },
         // needs to handle both, streamInfo items and streams items
         createLocalPlaylistVideo(videoId, videoInfo) {
-            if (videoInfo === undefined || videoId === null) return;
+            if (videoInfo === undefined || videoId === null || videoInfo?.error) return;
 
-            var tx = window.db.transaction("playlistVideos", "readwrite");
-            var store = tx.objectStore("playlistVideos");
+            var tx = window.db.transaction("playlist_videos", "readwrite");
+            var store = tx.objectStore("playlist_videos");
             const video = {
                 videoId: videoId,
                 title: videoInfo.title,
@@ -336,8 +336,8 @@ const mixin = {
             store.put(video);
         },
         async getLocalPlaylistVideo(videoId) {
-            var tx = window.db.transaction("playlistVideos", "readonly");
-            var store = tx.objectStore("playlistVideos");
+            var tx = window.db.transaction("playlist_videos", "readonly");
+            var store = tx.objectStore("playlist_videos");
             const req = store.openCursor(videoId);
             let video = null;
             req.onsuccess = e => {
@@ -420,9 +420,22 @@ const mixin = {
         },
         async deletePlaylist(playlistId) {
             if (!this.authenticated) {
+                const playlist = await this.getLocalPlaylist(playlistId);
                 var tx = window.db.transaction("playlists", "readwrite");
                 var store = tx.objectStore("playlists");
                 store.delete(playlistId);
+                // delete videos that don't need to be store anymore
+                const playlists = await this.getPlaylists();
+                const usedVideoIds = playlists
+                    .filter(playlist => playlist.id != playlistId)
+                    .map(playlist => JSON.parse(playlist.videoIds))
+                    .flat();
+                const potentialDeletableVideos = JSON.parse(playlist.videoIds);
+                var videoTx = window.db.transaction("playlist_videos", "readwrite");
+                var videoStore = videoTx.objectStore("playlist_videos");
+                for (let videoId of potentialDeletableVideos) {
+                    if (!usedVideoIds.includes(videoId)) videoStore.delete(videoId);
+                }
                 return { message: "ok" };
             }
 
@@ -485,8 +498,11 @@ const mixin = {
                 currentVideoIds.push(...videoIds);
                 playlist.videoIds = JSON.stringify(currentVideoIds);
                 this.createOrUpdateLocalPlaylist(playlist);
+                let streamInfos =
+                    videoInfos ??
+                    (await Promise.all(videoIds.map(videoId => this.fetchJson(this.apiUrl() + "/streams/" + videoId))));
                 for (let i in videoIds) {
-                    this.createLocalPlaylistVideo(videoIds[i], videoInfos[i]);
+                    this.createLocalPlaylistVideo(videoIds[i], streamInfos[i]);
                 }
                 return { message: "ok" };
             }

From f854af3581606e2d23d7d9cda597220ace627a26 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 15 Jun 2023 23:12:26 +0200
Subject: [PATCH 5/7] Remove unused logging for debugging

---
 src/components/WatchVideo.vue | 6 +++---
 src/main.js                   | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index aaa34661..c5299bf8 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -112,7 +112,7 @@
                             title="RSS feed"
                             role="button"
                             v-if="video.uploaderUrl"
-                            :href="`${apiUrl()}/fss?channels=${video.uploaderUrl.split('/')[2]}`"
+                            :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${video.uploaderUrl.split('/')[2]}`"
                             target="_blank"
                             class="btn flex items-center"
                         >
@@ -494,7 +494,7 @@ export default {
         },
         async fetchSubscribedStatus() {
             if (!this.channelId) return;
-            if ({
+            if (!this.authenticated) {
                 this.subscribed = this.isSubscribedLocally(this.channelId);
                 return;
             }
@@ -531,7 +531,7 @@ export default {
             });
         },
         subscribeHandler() {
-            if {
+            if (this.authenticated) {
                 this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
                     method: "POST",
                     body: JSON.stringify({
diff --git a/src/main.js b/src/main.js
index bff3879e..e6d25c50 100644
--- a/src/main.js
+++ b/src/main.js
@@ -385,7 +385,6 @@ const mixin = {
                 const videoIds = JSON.parse(playlist.videoIds);
                 const videosFuture = videoIds.map(videoId => this.getLocalPlaylistVideo(videoId));
                 playlist.relatedStreams = await Promise.all(videosFuture);
-                console.log(playlist);
                 return playlist;
             }
 

From d044accf5eb6c3c05f95b642e9f1c0c8afb55a52 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Fri, 16 Jun 2023 08:39:44 +0200
Subject: [PATCH 6/7] Fix removing videos from local playlist

---
 src/components/VideoItem.vue | 2 +-
 src/main.js                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index dd6ba219..e05e3992 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -177,7 +177,7 @@ export default {
     methods: {
         removeVideo() {
             this.$refs.removeButton.disabled = true;
-            this.removeVideoFromPlaylist(this.playlistId, null, this.index).then(json => {
+            this.removeVideoFromPlaylist(this.playlistId, this.index).then(json => {
                 if (json.error) alert(json.error);
                 else this.$emit("remove");
             });
diff --git a/src/main.js b/src/main.js
index e6d25c50..22f60614 100644
--- a/src/main.js
+++ b/src/main.js
@@ -518,11 +518,11 @@ const mixin = {
                 },
             });
         },
-        async removeVideoFromPlaylist(playlistId, videoId, index) {
+        async removeVideoFromPlaylist(playlistId, index) {
             if (!this.authenticated) {
                 const playlist = await this.getLocalPlaylist(playlistId);
                 const videoIds = JSON.parse(playlist.videoIds);
-                videoIds.splice(videoIds.indexOf(videoId), 1);
+                videoIds.splice(index, 1);
                 playlist.videoIds = JSON.stringify(videoIds);
                 if (videoIds.length == 0) playlist.thumbnail = "https://pipedproxy.kavin.rocks/?host=i.ytimg.com";
                 this.createOrUpdateLocalPlaylist(playlist);

From ee57a0c34805508d1deb19572b9b8317b92818ad Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Mon, 19 Jun 2023 14:28:09 +0200
Subject: [PATCH 7/7] Simplify local playlist indexeddb queries

---
 src/main.js | 82 +++++++++++++++++++++++------------------------------
 1 file changed, 36 insertions(+), 46 deletions(-)

diff --git a/src/main.js b/src/main.js
index 22f60614..fb4fb6b9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -194,9 +194,6 @@ const mixin = {
         timeAgo(time) {
             return timeAgo.format(time);
         },
-        async delay(millis) {
-            return await new Promise(r => setTimeout(r, millis));
-        },
         urlify(string) {
             if (!string) return "";
             const urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
@@ -296,18 +293,17 @@ const mixin = {
             store.delete(groupName);
         },
         async getLocalPlaylist(playlistId) {
-            var tx = window.db.transaction("playlists", "readonly");
-            var store = tx.objectStore("playlists");
-            const req = store.openCursor(playlistId);
-            let playlist = null;
-            req.onsuccess = e => {
-                playlist = e.target.result.value;
-            };
-            while (playlist == null) {
-                await this.delay(10);
-            }
-            playlist.videos = JSON.parse(playlist.videoIds).length;
-            return playlist;
+            return await new Promise(resolve => {
+                var tx = window.db.transaction("playlists", "readonly");
+                var store = tx.objectStore("playlists");
+                const req = store.openCursor(playlistId);
+                let playlist = null;
+                req.onsuccess = e => {
+                    playlist = e.target.result.value;
+                    playlist.videos = JSON.parse(playlist.videoIds).length;
+                    resolve(playlist);
+                };
+            });
         },
         createOrUpdateLocalPlaylist(playlist) {
             var tx = window.db.transaction("playlists", "readwrite");
@@ -336,41 +332,35 @@ const mixin = {
             store.put(video);
         },
         async getLocalPlaylistVideo(videoId) {
-            var tx = window.db.transaction("playlist_videos", "readonly");
-            var store = tx.objectStore("playlist_videos");
-            const req = store.openCursor(videoId);
-            let video = null;
-            req.onsuccess = e => {
-                video = e.target.result.value;
-            };
-            while (video == null) {
-                await this.delay(10);
-            }
-            return video;
+            return await new Promise(resolve => {
+                var tx = window.db.transaction("playlist_videos", "readonly");
+                var store = tx.objectStore("playlist_videos");
+                const req = store.openCursor(videoId);
+                req.onsuccess = e => {
+                    resolve(e.target.result.value);
+                };
+            });
         },
         async getPlaylists() {
             if (!this.authenticated) {
                 if (!window.db) return [];
-                let finished = false;
-                let playlists = [];
-                var tx = window.db.transaction("playlists", "readonly");
-                var store = tx.objectStore("playlists");
-                const cursorRequest = store.openCursor();
-                cursorRequest.onsuccess = e => {
-                    const cursor = e.target.result;
-                    if (cursor) {
-                        let playlist = cursor.value;
-                        playlist.videos = JSON.parse(playlist.videoIds).length;
-                        playlists.push(playlist);
-                        cursor.continue();
-                    } else {
-                        finished = true;
-                    }
-                };
-                while (!finished) {
-                    await this.delay(10);
-                }
-                return playlists;
+                return await new Promise(resolve => {
+                    let playlists = [];
+                    var tx = window.db.transaction("playlists", "readonly");
+                    var store = tx.objectStore("playlists");
+                    const cursorRequest = store.openCursor();
+                    cursorRequest.onsuccess = e => {
+                        const cursor = e.target.result;
+                        if (cursor) {
+                            let playlist = cursor.value;
+                            playlist.videos = JSON.parse(playlist.videoIds).length;
+                            playlists.push(playlist);
+                            cursor.continue();
+                        } else {
+                            resolve(playlists);
+                        }
+                    };
+                });
             }
 
             return await this.fetchJson(this.authApiUrl() + "/user/playlists", null, {