From d7ba61ebbc2c75fd3faa1fb07aef73e89177e2e3 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 26 Jan 2023 19:36:20 +0100
Subject: [PATCH 1/3] Allow channel tabs as query parameter

---
 src/components/ChannelPage.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 64cdb27f..458963fa 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -136,10 +136,12 @@ export default {
                         this.tabs.push({
                             translatedName: this.$t("video.videos"),
                         });
+                        const tabQuery = this.$route.query.tab;
                         for (let i = 0; i < this.channel.tabs.length; i++) {
                             let tab = this.channel.tabs[i];
                             tab.translatedName = this.getTranslatedTabName(tab.name);
                             this.tabs.push(tab);
+                            if (tab.name === tabQuery) this.loadTab(i + 1);
                         }
                     }
                 });

From 7f72485a0449f7b5db829d6ad6b4abbd059fe36b Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Thu, 26 Jan 2023 19:43:07 +0100
Subject: [PATCH 2/3] Save the tab param to the URL at runtime

---
 src/components/ChannelPage.vue |  3 +++
 src/main.js                    | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 458963fa..4bce5531 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -224,10 +224,13 @@ export default {
         },
         loadTab(index) {
             this.selectedTab = index;
+            this.appendQueryToUrl("tab", this.tabs[index].name ?? "videos");
+
             if (index == 0) {
                 this.contentItems = this.channel.relatedStreams;
                 return;
             }
+
             if (this.tabs[index].content) {
                 this.contentItems = this.tabs[index].content;
                 return;
diff --git a/src/main.js b/src/main.js
index 12cf63ef..67538926 100644
--- a/src/main.js
+++ b/src/main.js
@@ -251,6 +251,18 @@ const mixin = {
             elem.click();
             elem.remove();
         },
+        appendQueryToUrl(key, value) {
+            let searchParams = new URLSearchParams(window.location.search);
+            searchParams.set(key, value);
+            let newurl =
+                window.location.protocol +
+                "//" +
+                window.location.host +
+                window.location.pathname +
+                "?" +
+                searchParams.toString();
+            window.history.pushState({ path: newurl }, "", newurl);
+        },
     },
     computed: {
         authenticated(_this) {

From 3ecb0f668e83fd0c40800526a248fa396c993221 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Fri, 27 Jan 2023 16:42:20 +0100
Subject: [PATCH 3/3] Use `replaceState` and simplify updating search params

---
 src/components/ChannelPage.vue |  6 +++++-
 src/main.js                    | 12 ------------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 4bce5531..95bbdeef 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -224,7 +224,11 @@ export default {
         },
         loadTab(index) {
             this.selectedTab = index;
-            this.appendQueryToUrl("tab", this.tabs[index].name ?? "videos");
+
+            // update the tab query in the url path
+            const url = new URL(window.location);
+            url.searchParams.set("tab", this.tabs[index].name ?? "videos");
+            window.history.replaceState(window.history.state, "", url);
 
             if (index == 0) {
                 this.contentItems = this.channel.relatedStreams;
diff --git a/src/main.js b/src/main.js
index 67538926..12cf63ef 100644
--- a/src/main.js
+++ b/src/main.js
@@ -251,18 +251,6 @@ const mixin = {
             elem.click();
             elem.remove();
         },
-        appendQueryToUrl(key, value) {
-            let searchParams = new URLSearchParams(window.location.search);
-            searchParams.set(key, value);
-            let newurl =
-                window.location.protocol +
-                "//" +
-                window.location.host +
-                window.location.pathname +
-                "?" +
-                searchParams.toString();
-            window.history.pushState({ path: newurl }, "", newurl);
-        },
     },
     computed: {
         authenticated(_this) {