gbrown/Piped
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add error handling for Videos, Channels, and Playlists.

Browse source
This commit is contained in:
FireMasterK 2021-06-07 00:17:43 +05:30
parent db5681297f
commit 20ddaab9e3
No known key found for this signature in database
GPG key ID: 8DFF5DD33E93DB58
4 changed files with 73 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Channel.vue
View file

@ -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>

16
src/components/ErrorHandler.vue Normal file
View file

@ -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>

8
src/components/Playlist.vue
View file

@ -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>

69
src/components/WatchVideo.vue
View file

@ -1,31 +1,36 @@
<template>
<div class="uk-container uk-container-xlarge">
<Player ref="videoPlayer" :video="video" :sponsors="sponsors" :selectedAutoPlay="selectedAutoPlay" />
<h1 class="uk-text-bold">{{ video.title }}</h1>
<ErrorHandler v-if="video.error" :message="video.message" :error="video.error" />
<img :src="video.uploaderAvatar" loading="lazy" />
<router-link class="uk-text-bold" v-bind:to="video.uploaderUrl || '/'">
<a>{{ video.uploader }}</a>
</router-link>
<div v-show="!video.error">
<Player ref="videoPlayer" :video="video" :sponsors="sponsors" :selectedAutoPlay="selectedAutoPlay" />
<h1 class="uk-text-bold">{{ video.title }}</h1>
<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
.replaceAll("http://www.youtube.com", "")
.replaceAll("https://www.youtube.com", "")
.replaceAll("\n", "<br>");
this.video.description = this.video.description
.replaceAll("http://www.youtube.com", "")
.replaceAll("https://www.youtube.com", "")
.replaceAll("\n", "<br>");
this.$refs.videoPlayer.loadVideo();
this.$refs.videoPlayer.loadVideo();
}
});
},
async getSponsors() {
@ -197,6 +205,7 @@ export default {
},
components: {
Player,
ErrorHandler,
},
};
</script>