Add error handling for Videos, Channels, and Playlists.

src/components/Channel.vue

@@ -1,8 +1,10 @@
 <template>
-    <div v-if="channel">
+    <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
+
+    <div v-if="channel" v-show="!channel.error">
         <h1 class="uk-text-center"><img height="48" width="48" v-bind:src="channel.avatarUrl" />{{ channel.name }}</h1>
         <img v-if="channel.bannerUrl" v-bind:src="channel.bannerUrl" style="width: 100%" loading="lazy" />
-        <p v-html="this.channel.description.replaceAll('\n', '<br>')"></p>
+        <p v-html="this.channel.description" style="white-space: pre"></p>
 
         <hr />
 
@@ -35,6 +37,7 @@
 
 <script>
 import Constants from "@/Constants.js";
+import ErrorHandler from "@/components/ErrorHandler.vue";
 
 export default {
     data() {
@@ -63,7 +66,9 @@ export default {
         async getChannelData() {
             this.fetchChannel()
                 .then(data => (this.channel = data))
-                .then(() => (document.title = this.channel.name + " - Piped"));
+                .then(() => {
+                    if (!this.channel.error) document.title = this.channel.name + " - Piped";
+                });
         },
         handleScroll() {
             if (this.loading || !this.channel || !this.channel.nextpage) return;
@@ -84,5 +89,8 @@ export default {
             }
         },
     },
+    components: {
+        ErrorHandler,
+    },
 };
 </script>

src/components/ErrorHandler.vue

@@ -0,0 +1,16 @@
+<template>
+    <p>{{ message }}</p>
+    <button uk-toggle="target: #stacktrace" class="uk-button uk-button-small" style="background: #222" type="button">
+        Show More
+    </button>
+    <p id="stacktrace" style="white-space: pre" hidden>{{ error }}</p>
+</template>
+
+<script>
+export default {
+    props: {
+        error: String,
+        message: String,
+    },
+};
+</script>

src/components/Playlist.vue

@@ -1,5 +1,7 @@
 <template>
-    <div v-if="playlist">
+    <ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
+
+    <div v-if="playlist" v-show="!playlist.error">
         <h1 class="uk-text-center">
             <img v-bind:src="playlist.avatarUrl" height="48" width="48" loading="lazy" />
             {{ playlist.name }}
@@ -44,6 +46,7 @@
 
 <script>
 import Constants from "@/Constants.js";
+import ErrorHandler from "@/components/ErrorHandler.vue";
 
 export default {
     data() {
@@ -86,5 +89,8 @@ export default {
             }
         },
     },
+    components: {
+        ErrorHandler,
+    },
 };
 </script>

src/components/WatchVideo.vue

@@ -1,5 +1,8 @@
 <template>
     <div class="uk-container uk-container-xlarge">
+        <ErrorHandler v-if="video.error" :message="video.message" :error="video.error" />
+
+        <div v-show="!video.error">
             <Player ref="videoPlayer" :video="video" :sponsors="sponsors" :selectedAutoPlay="selectedAutoPlay" />
             <h1 class="uk-text-bold">{{ video.title }}</h1>
 
@@ -26,6 +29,8 @@
                 {{ showDesc ? "+" : "-" }}
             </a>
             <p v-show="showDesc" class="uk-light" v-html="video.description"></p>
+        </div>
+
         <a v-if="sponsors && sponsors.segments">Sponsors Segments: {{ sponsors.segments.length }}</a>
 
         <hr />
@@ -100,6 +105,7 @@
 <script>
 import Constants from "@/Constants.js";
 import Player from "@/components/Player.vue";
+import ErrorHandler from "@/components/ErrorHandler.vue";
 
 export default {
     name: "App",
@@ -160,6 +166,7 @@ export default {
                     this.video = data;
                 })
                 .then(() => {
+                    if (!this.video.error) {
                         document.title = this.video.title + " - Piped";
 
                         this.video.description = this.video.description
@@ -168,6 +175,7 @@ export default {
                             .replaceAll("\n", "<br>");
 
                         this.$refs.videoPlayer.loadVideo();
+                    }
                 });
         },
         async getSponsors() {
@@ -197,6 +205,7 @@ export default {
     },
     components: {
         Player,
+        ErrorHandler,
     },
 };
 </script>