From b009b2a87d171909248aeb11ab4145a1ceeacf62 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Sat, 15 Jun 2024 14:15:08 +0200
Subject: [PATCH] fix: race conditions when when loading lots of videos quickly

---
 src/components/ChannelPage.vue     | 10 +++++-----
 src/components/CollapsableText.vue |  4 ++--
 src/components/FeedPage.vue        |  2 +-
 src/components/WatchVideo.vue      |  7 +++----
 src/main.js                        |  1 -
 5 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 56e586ba..9ff58751 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -183,8 +183,8 @@ export default {
                 this.channel.nextpage = json.nextpage;
                 this.loading = false;
                 this.updateWatched(json.relatedStreams);
-                json.relatedStreams.map(stream => this.contentItems.push(stream));
-                this.fetchDeArrowContent(this.contentItems);
+                this.contentItems.push(...json.relatedStreams);
+                this.fetchDeArrowContent(json.relatedStreams);
             });
         },
         fetchChannelTabNextPage() {
@@ -194,8 +194,8 @@ export default {
             }).then(json => {
                 this.tabs[this.selectedTab].tabNextPage = json.nextpage;
                 this.loading = false;
-                json.content.map(item => this.contentItems.push(item));
-                this.fetchDeArrowContent(this.contentItems);
+                json.this.contentItems.push(...json.content);
+                this.fetchDeArrowContent(json.content);
                 this.tabs[this.selectedTab].content = this.contentItems;
             });
         },
@@ -246,7 +246,7 @@ export default {
                 data: this.tabs[index].data,
             }).then(tab => {
                 this.contentItems = this.tabs[index].content = tab.content;
-                this.fetchDeArrowContent(this.contentItems);
+                this.fetchDeArrowContent(tab.content);
                 this.tabs[this.selectedTab].tabNextPage = tab.nextpage;
             });
         },
diff --git a/src/components/CollapsableText.vue b/src/components/CollapsableText.vue
index 0de1e858..dc65b932 100644
--- a/src/components/CollapsableText.vue
+++ b/src/components/CollapsableText.vue
@@ -1,5 +1,5 @@
-<template v-if="text">
-    <div class="mx-1 whitespace-pre-wrap py-2">
+<template>
+    <div v-if="text" class="mx-1 whitespace-pre-wrap py-2">
         <!-- eslint-disable-next-line vue/no-v-html -->
         <span v-if="showFullText" class="contentText" v-html="fullText()" />
         <!-- eslint-disable-next-line vue/no-v-html -->
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index cbfa5e4c..bb8ac13d 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -131,8 +131,8 @@ export default {
             if (!this.videosStore) return;
             this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);
             if (this.videos.length != this.videosStore.length) {
+                this.fetchDeArrowContent(this.videosStore.slice(this.videos.length, this.currentVideoCount));
                 this.videos = this.videosStore.slice(0, this.currentVideoCount);
-                this.fetchDeArrowContent(this.videos);
             }
         },
         handleScroll() {
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 0d512fa4..c76548bd 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -525,9 +525,7 @@ export default {
                             }
                     }
                 });
-                await this.fetchPlaylistPages().then(() => {
-                    this.fetchDeArrowContent(this.playlist.relatedStreams);
-                });
+                await this.fetchPlaylistPages();
             }
         },
         async fetchPlaylistPages() {
@@ -535,8 +533,9 @@ export default {
                 await this.fetchJson(this.apiUrl() + "/nextpage/playlists/" + this.playlistId, {
                     nextpage: this.playlist.nextpage,
                 }).then(json => {
-                    this.playlist.relatedStreams = this.playlist.relatedStreams.concat(json.relatedStreams);
+                    this.playlist.relatedStreams.push(...json.relatedStreams);
                     this.playlist.nextpage = json.nextpage;
+                    this.fetchDeArrowContent(json.relatedStreams);
                 });
                 await this.fetchPlaylistPages();
             }
diff --git a/src/main.js b/src/main.js
index a723ddea..b7d5b187 100644
--- a/src/main.js
+++ b/src/main.js
@@ -524,7 +524,6 @@ const mixin = {
 
             const videoIds = content
                 .filter(item => item.type === "stream")
-                .filter(item => item.dearrow === undefined)
                 .map(item => item.url.substr(-11))
                 .sort();