From 8006f3a19905089065626df2621dfcddf5f85e89 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Tue, 1 Nov 2022 11:32:53 +0100
Subject: [PATCH 1/5] move the search results into a `ContentItem` component

---
 src/components/ContentItem.vue   | 52 ++++++++++++++++++++++++++++++++
 src/components/SearchResults.vue | 35 ++-------------------
 2 files changed, 55 insertions(+), 32 deletions(-)
 create mode 100644 src/components/ContentItem.vue

diff --git a/src/components/ContentItem.vue b/src/components/ContentItem.vue
new file mode 100644
index 00000000..ec3d1608
--- /dev/null
+++ b/src/components/ContentItem.vue
@@ -0,0 +1,52 @@
+<template>
+    <VideoItem v-if="shouldUseVideoItem(contentItem)" :video="contentItem" height="94" width="168" />
+    <div v-else>
+        <router-link :to="contentItem.url">
+            <div class="relative">
+                <img class="w-full" :src="contentItem.thumbnail" loading="lazy" />
+            </div>
+            <p>
+                <span v-text="contentItem.name" />
+                <font-awesome-icon class="ml-1.5" v-if="contentItem.verified" icon="check" />
+            </p>
+        </router-link>
+        <p v-if="contentItem.description" v-text="contentItem.description" />
+        <router-link v-if="contentItem.uploaderUrl" class="link" :to="contentItem.uploaderUrl">
+            <p>
+                <span v-text="contentItem.uploader" />
+                <font-awesome-icon class="ml-1.5" v-if="contentItem.uploaderVerified" icon="check" />
+            </p>
+        </router-link>
+
+        <a v-if="contentItem.uploaderName" class="link" v-text="contentItem.uploaderName" />
+        <template v-if="contentItem.videos >= 0">
+            <br v-if="contentItem.uploaderName" />
+            <strong v-text="`${contentItem.videos} ${$t('video.videos')}`" />
+        </template>
+
+        <br />
+    </div>
+</template>
+
+<script>
+import VideoItem from "./VideoItem.vue";
+
+export default {
+    components: {
+        VideoItem,
+    },
+    props: {
+        contentItem: {
+            type: Object,
+            default: () => {
+                return {};
+            },
+        },
+    },
+    methods: {
+        shouldUseVideoItem(item) {
+            return item.title;
+        },
+    },
+};
+</script>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 8d3098b8..2325965d 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -20,43 +20,17 @@
 
     <div v-if="results" class="video-grid">
         <template v-for="result in results.items" :key="result.url">
-            <VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
-            <div v-if="!shouldUseVideoItem(result)">
-                <router-link :to="result.url">
-                    <div class="relative">
-                        <img class="w-full" :src="result.thumbnail" loading="lazy" />
-                    </div>
-                    <p>
-                        <span v-text="result.name" />
-                        <font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check" />
-                    </p>
-                </router-link>
-                <p v-if="result.description" v-text="result.description" />
-                <router-link v-if="result.uploaderUrl" class="link" :to="result.uploaderUrl">
-                    <p>
-                        <span v-text="result.uploader" />
-                        <font-awesome-icon class="ml-1.5" v-if="result.uploaderVerified" icon="check" />
-                    </p>
-                </router-link>
-
-                <a v-if="result.uploaderName" class="link" v-text="result.uploaderName" />
-                <template v-if="result.videos >= 0">
-                    <br v-if="result.uploaderName" />
-                    <strong v-text="`${result.videos} ${$t('video.videos')}`" />
-                </template>
-
-                <br />
-            </div>
+            <ContentItem :content-item="result" />
         </template>
     </div>
 </template>
 
 <script>
-import VideoItem from "./VideoItem.vue";
+import ContentItem from "./ContentItem.vue";
 
 export default {
     components: {
-        VideoItem,
+        ContentItem,
     },
     data() {
         return {
@@ -124,9 +98,6 @@ export default {
                 });
             }
         },
-        shouldUseVideoItem(item) {
-            return item.title;
-        },
         handleRedirect() {
             const query = this.$route.query.search_query;
             const url =

From 40417bbdde9a1f26d6c12a0c7e9b3b2995ab0c32 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Tue, 1 Nov 2022 12:31:45 +0100
Subject: [PATCH 2/5] basic functionality

---
 src/components/ChannelPage.vue | 63 ++++++++++++++++++++++++++++++----
 src/locales/en.json            |  6 ++--
 2 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index d08ce459..e5f07815 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -35,13 +35,19 @@
             <font-awesome-icon icon="rss" />
         </a>
 
+        <div class="flex mt-4 mb-2">
+            <button v-for="(tab, index) in tabs" :key="tab.name" class="btn mr-2" @click="loadTab(index)">
+                <span v-text="tab.translatedName"></span>
+            </button>
+        </div>
+
         <hr />
 
         <div class="video-grid">
-            <VideoItem
-                v-for="video in channel.relatedStreams"
-                :key="video.url"
-                :video="video"
+            <ContentItem
+                v-for="item in contentItems"
+                :key="item.url"
+                :content-item="item"
                 height="94"
                 width="168"
                 hide-channel
@@ -52,17 +58,21 @@
 
 <script>
 import ErrorHandler from "./ErrorHandler.vue";
-import VideoItem from "./VideoItem.vue";
+import ContentItem from "./ContentItem.vue";
 
 export default {
     components: {
         ErrorHandler,
-        VideoItem,
+        ContentItem,
     },
     data() {
         return {
             channel: null,
             subscribed: false,
+            tabs: [],
+            selectedTab: 0,
+            contentItems: [],
+            tabNextPage: null,
         };
     },
     mounted() {
@@ -111,8 +121,17 @@ export default {
                 .then(() => {
                     if (!this.channel.error) {
                         document.title = this.channel.name + " - Piped";
+                        this.contentItems = this.channel.relatedStreams;
                         this.fetchSubscribedStatus();
                         this.updateWatched(this.channel.relatedStreams);
+                        this.tabs.push({
+                            translatedName: this.$t("video.videos"),
+                        });
+                        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);
+                        }
                     }
                 });
         },
@@ -126,7 +145,7 @@ export default {
                     this.channel.nextpage = json.nextpage;
                     this.loading = false;
                     this.updateWatched(json.relatedStreams);
-                    json.relatedStreams.map(stream => this.channel.relatedStreams.push(stream));
+                    json.relatedStreams.map(stream => this.contentItems.push(stream));
                 });
             }
         },
@@ -147,6 +166,36 @@ export default {
             }
             this.subscribed = !this.subscribed;
         },
+        getTranslatedTabName(tabName) {
+            let translatedTabName = tabName;
+            switch (tabName) {
+                case "Livestreams":
+                    translatedTabName = this.$t("titles.livestreams");
+                    break;
+                case "Playlists":
+                    translatedTabName = this.$t("titles.playlists");
+                    break;
+                case "Channels":
+                    translatedTabName = this.$t("titles.channels");
+                    break;
+                case "Shorts":
+                    translatedTabName = this.$t("video.shorts");
+                    break;
+            }
+            return translatedTabName;
+        },
+        loadTab(index) {
+            if (index == 0) {
+                this.contentItems = this.channel.relatedStreams;
+                return;
+            }
+            this.fetchJson(this.apiUrl() + "/channels/tabs", {
+                data: this.tabs[index].data,
+            }).then(tab => {
+                this.contentItems = tab.content;
+                this.tabNextPage = tab.nextpage;
+            });
+        },
     },
 };
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index feb042c3..5370ac44 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -10,7 +10,9 @@
         "playlists": "Playlists",
         "account": "Account",
         "instance": "Instance",
-        "player": "Player"
+        "player": "Player",
+        "livestreams": "Livestreams",
+        "channels": "Channels"
     },
     "player": {
         "watch_on": "Watch on {0}"
@@ -165,4 +167,4 @@
         "copied": "Copied!",
         "cannot_copy": "Can't copy!"
     }
-}
+}
\ No newline at end of file

From 94def0723df37f4e66553789c9caf8694e755e03 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Tue, 1 Nov 2022 12:39:01 +0100
Subject: [PATCH 3/5] proper nextpage implementation

---
 src/components/ChannelPage.vue | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index e5f07815..8b13ada4 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -139,16 +139,33 @@ export default {
             if (this.loading || !this.channel || !this.channel.nextpage) return;
             if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
                 this.loading = true;
-                this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, {
-                    nextpage: this.channel.nextpage,
-                }).then(json => {
-                    this.channel.nextpage = json.nextpage;
-                    this.loading = false;
-                    this.updateWatched(json.relatedStreams);
-                    json.relatedStreams.map(stream => this.contentItems.push(stream));
-                });
+                if (this.selectedTab == 0) {
+                    this.fetchChannelNextPage();
+                } else {
+                    this.fetchChannelTabNextPage();
+                }
             }
         },
+        fetchChannelNextPage() {
+            this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, {
+                nextpage: this.channel.nextpage,
+            }).then(json => {
+                this.channel.nextpage = json.nextpage;
+                this.loading = false;
+                this.updateWatched(json.relatedStreams);
+                json.relatedStreams.map(stream => this.contentItems.push(stream));
+            });
+        },
+        fetchChannelTabNextPage() {
+            this.fetchJson(this.apiUrl() + "/channels/tabs", {
+                data: this.tabs[this.selectedTab].data,
+                nextpage: this.tabNextPage,
+            }).then(json => {
+                this.tabNextPage = json.nextpage;
+                this.loading = false;
+                json.content.map(item => this.contentItems.push(item));
+            });
+        },
         subscribeHandler() {
             if (this.authenticated) {
                 this.fetchJson(this.authApiUrl() + (this.subscribed ? "/unsubscribe" : "/subscribe"), null, {
@@ -185,6 +202,7 @@ export default {
             return translatedTabName;
         },
         loadTab(index) {
+            this.selectedTab = index;
             if (index == 0) {
                 this.contentItems = this.channel.relatedStreams;
                 return;

From 349b04834e52bb932c4bb21aa69cc6c6a6708730 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Tue, 1 Nov 2022 13:07:31 +0100
Subject: [PATCH 4/5] hightlight the current tab

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

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 8b13ada4..663a25b8 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -36,7 +36,13 @@
         </a>
 
         <div class="flex mt-4 mb-2">
-            <button v-for="(tab, index) in tabs" :key="tab.name" class="btn mr-2" @click="loadTab(index)">
+            <button
+                v-for="(tab, index) in tabs"
+                :key="tab.name"
+                class="btn mr-2"
+                @click="loadTab(index)"
+                :class="{ active: selectedTab == index }"
+            >
                 <span v-text="tab.translatedName"></span>
             </button>
         </div>
@@ -217,3 +223,9 @@ export default {
     },
 };
 </script>
+
+<style>
+.active {
+    border: 0.1rem outset red;
+}
+</style>

From 16dcca8822f1178b7df2346534e52af1068b4bc4 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Tue, 1 Nov 2022 13:22:23 +0100
Subject: [PATCH 5/5] log untranslated tabs

---
 src/components/ChannelPage.vue | 3 +++
 src/locales/en.json            | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 663a25b8..b99e844a 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -204,6 +204,9 @@ export default {
                 case "Shorts":
                     translatedTabName = this.$t("video.shorts");
                     break;
+                default:
+                    console.error(`Tab name "${tabName}" is not translated yet!`);
+                    break;
             }
             return translatedTabName;
         },
diff --git a/src/locales/en.json b/src/locales/en.json
index 5370ac44..9cef968d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -167,4 +167,4 @@
         "copied": "Copied!",
         "cannot_copy": "Can't copy!"
     }
-}
\ No newline at end of file
+}