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,31 +1,36 @@
 <template>
     <div class="uk-container uk-container-xlarge">
-        <Player ref="videoPlayer" :video="video" :sponsors="sponsors" :selectedAutoPlay="selectedAutoPlay" />
+        <ErrorHandler v-if="video.error" :message="video.message" :error="video.error" />
-        <h1 class="uk-text-bold">{{ video.title }}</h1>
 
-        <img :src="video.uploaderAvatar" loading="lazy" />
+        <div v-show="!video.error">
-        <router-link class="uk-text-bold" v-bind:to="video.uploaderUrl || '/'">
+            <Player ref="videoPlayer" :video="video" :sponsors="sponsors" :selectedAutoPlay="selectedAutoPlay" />
-            <a>{{ video.uploader }}</a>
+            <h1 class="uk-text-bold">{{ video.title }}</h1>
-        </router-link>
+
+            <img :src="video.uploaderAvatar" loading="lazy" />
+            <router-link class="uk-text-bold" v-bind:to="video.uploaderUrl || '/'">
+                <a>{{ video.uploader }}</a>
+            </router-link>
+
+            <p class="uk-dark">
+                <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
+                <b>{{ addCommas(video.likes) }}</b>
+                &nbsp;
+                <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
+                <b>{{ addCommas(video.dislikes) }}</b>
+            </p>
+            <p>
+                <font-awesome-icon icon="eye"></font-awesome-icon>
+                <b>{{ addCommas(video.views) }}</b> views
+            </p>
+            <p>
+                Uploaded on <b>{{ video.uploadDate }}</b>
+            </p>
+            <a class="uk-button uk-button-small" style="background: #222" @click="showDesc = !showDesc">
+                {{ showDesc ? "+" : "-" }}
+            </a>
+            <p v-show="showDesc" class="uk-light" v-html="video.description"></p>
+        </div>
 
-        <p class="uk-dark">
-            <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
-            <b>{{ addCommas(video.likes) }}</b>
-            &nbsp;
-            <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
-            <b>{{ addCommas(video.dislikes) }}</b>
-        </p>
-        <p>
-            <font-awesome-icon icon="eye"></font-awesome-icon>
-            <b>{{ addCommas(video.views) }}</b> views
-        </p>
-        <p>
-            Uploaded on <b>{{ video.uploadDate }}</b>
-        </p>
-        <a class="uk-button uk-button-small" style="background: #222" @click="showDesc = !showDesc">
-            {{ showDesc ? "+" : "-" }}
-        </a>
-        <p v-show="showDesc" class="uk-light" v-html="video.description"></p>
         <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,14 +166,16 @@ export default {
                     this.video = data;
                 })
                 .then(() => {
-                    document.title = this.video.title + " - Piped";
+                    if (!this.video.error) {
+                        document.title = this.video.title + " - Piped";
 
-                    this.video.description = this.video.description
+                        this.video.description = this.video.description
-                        .replaceAll("http://www.youtube.com", "")
+                            .replaceAll("http://www.youtube.com", "")
-                        .replaceAll("https://www.youtube.com", "")
+                            .replaceAll("https://www.youtube.com", "")
-                        .replaceAll("\n", "<br>");
+                            .replaceAll("\n", "<br>");
 
-                    this.$refs.videoPlayer.loadVideo();
+                        this.$refs.videoPlayer.loadVideo();
+                    }
                 });
         },
         async getSponsors() {
@@ -197,6 +205,7 @@ export default {
     },
     components: {
         Player,
+        ErrorHandler,
     },
 };
 </script>