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 @@
+
+
+
+
-
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;
+ });
+ },
},
};
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